@import url('chapter-map.css');
@import url('title-screens.css');
@import url('achievement-screen.css');
@import url('original-collections.css');
@import url('settings-screen.css');
@import url('demo-ads.css');
@import url('demo-shop.css');
:root{color-scheme:dark;--ink:#f8f4ec;--muted:#b5bbc2;--mint:#c8f0cf;--panel:#182229;--line:#ffffff20}
#app{color:var(--ink);text-align:left}#app h1,#app h2,#app .subtitle{color:var(--ink)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#10191d;font-family:Inter,-apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif;color:var(--ink)}
button,select,input{font:inherit}button{cursor:pointer;color:inherit;border:1px solid var(--line);background:#ffffff0a;border-radius:999px;padding:12px 20px;transition:background .15s,transform .15s}button:hover{background:#ffffff19}button:active{transform:scale(.98)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:4px}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--mint);color:#153329;border-color:var(--mint);font-weight:700}button.flat{border:0;background:transparent;padding:8px 0}button.danger{color:#ffb5ab}button.small{padding:9px 15px;font-size:13px}
#GameDiv{position:fixed!important;inset:0!important;width:100%!important;height:100%!important}#GameCanvas{outline:0}#app{position:fixed;inset:0;z-index:10;isolation:isolate}#app[hidden]{display:none}.shell{height:100%;position:relative;overflow:hidden}.backdrop{position:absolute;inset:0;background:linear-gradient(90deg,#102027f7 0%,#102027ba 45%,#10202700 80%),url('ui/background.webp') center/cover;z-index:-2}.backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#102027 0%,transparent 60%)}
.topbar{position:absolute;top:0;left:0;right:0;height:88px;padding:20px 4.5%;display:flex;align-items:center;justify-content:space-between;z-index:20;gap:16px}.brand{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:750;display:flex;align-items:center;gap:10px}.brand-mark{color:var(--mint);font-size:25px}.top-actions{display:flex;gap:10px;align-items:center}.wordmark{font-size:11px;color:#c6d3cb;letter-spacing:.14em}.locale{border:0;color:var(--ink);background:#13242b;border-radius:20px;padding:9px 12px;font-size:12px}.hero{position:relative;z-index:2;padding:clamp(110px,17vh,180px) 4.5% 40px;max-width:58%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.eyebrow{font-size:11px;color:var(--mint);letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:12px}.eyebrow:before{content:"";display:block;width:27px;height:1px;background:var(--mint)}h1{font-family:Georgia,"Noto Serif KR",serif;font-size:clamp(40px,5.5vw,86px);font-weight:400;line-height:1.02;letter-spacing:-.045em;margin:24px 0}h1 em{font-weight:400;color:var(--mint)}.hero-description{font-size:15px;line-height:1.8;max-width:380px;color:#c2ced1;white-space:pre-line;margin:0 0 30px}.hero-buttons{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.hero .primary{min-width:210px;padding:17px 23px;text-align:left;display:flex;justify-content:space-between;gap:38px}.hero-details{font-size:11px;color:#83969f;margin-top:24px;letter-spacing:.05em}.cast-stage{position:absolute;right:1%;bottom:0;width:65%;height:92%;z-index:-1;pointer-events:none;overflow:hidden}.cast{position:absolute;height:93%;width:auto;bottom:-12%;object-fit:contain;filter:drop-shadow(0 0 20px #12252b30)}.cast-2{right:39%;height:88%;z-index:2}.cast-3{right:8%;height:93%;z-index:3}.cast-4{right:-17%;height:86%;z-index:1}.cast-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#102027 0%,transparent 24%),linear-gradient(90deg,#10202733,transparent 50%);z-index:4}.bottomline{position:absolute;bottom:22px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;font-size:10px;color:#8799a1;letter-spacing:.05em;z-index:4}
.game-screen{position:absolute;inset:0;background:#0a0e11;display:flex;align-items:center;justify-content:center}.video-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.video-stage video{width:100%;height:100%;object-fit:contain}.game-top{background:linear-gradient(#000b,transparent);height:112px;align-items:flex-start;padding-top:24px}.scene-heading{display:flex;flex-direction:column;gap:6px;text-align:center;max-width:60%}.scene-heading .eyebrow{font-size:9px;display:block}.scene-title{font-size:14px;font-weight:500}.controls{display:flex;gap:8px}.controls button{background:#111a22a8;backdrop-filter:blur(8px);font-size:13px;padding:10px 16px}.subtitle{position:absolute;bottom:11%;left:10%;right:10%;text-align:center;pointer-events:none;z-index:5;font-size:clamp(16px,2vw,28px);line-height:1.45;white-space:pre-line;text-shadow:0 2px 5px #000,0 0 16px #000;font-weight:550}.subtitle span{background:#0009;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:5px 12px}.subtitle:empty{display:none}.video-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;appearance:none;border:0}.video-progress::-webkit-progress-bar{background:#ffffff18}.video-progress::-webkit-progress-value{background:var(--mint)}.scene-action{position:absolute;bottom:27px;right:4%;z-index:6}.scene-action button{background:#142329d9}.choice-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;padding:100px 5% 55px;background:linear-gradient(transparent,#081317d9);z-index:8}.choice-label{font-size:12px;letter-spacing:.12em;margin:0 0 20px;color:var(--mint);text-transform:uppercase}.choices{display:flex;flex-direction:column;gap:10px;width:min(650px,100%)}.choice{display:flex;align-items:center;gap:18px;border-radius:8px;padding:17px 22px;line-height:1.4;text-align:left;background:#17272cdc;backdrop-filter:blur(14px);white-space:pre-line}.choice-number{font-size:11px;color:var(--mint);border:1px solid #c8f0cf50;min-width:25px;height:25px;border-radius:50%;display:grid;place-items:center}.countdown{height:3px;width:100%;background:#fff2;margin:3px 0 14px;overflow:hidden}.countdown-fill{height:100%;width:100%;background:var(--mint);transform-origin:left}
.overlay{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#081217c9;backdrop-filter:blur(18px);padding:28px}.overlay:empty{display:none}.modal{width:min(650px,100%);max-height:100%;overflow:auto;background:#18262d;border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:0 20px 90px #0005}.modal.wide{width:min(1000px,100%)}.modal-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.modal-header h2{font-family:Georgia,serif;font-size:32px;letter-spacing:-.03em;font-weight:400;margin:0}.modal p{font-size:14px;line-height:1.7;color:#bac6cc}.modal .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 0;border-bottom:1px solid var(--line);font-size:14px}.setting-row input[type=range]{width:140px;accent-color:var(--mint)}.setting-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--mint)}.chapter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.chapter-card{border-radius:10px;text-align:left;padding:20px;background:#ffffff05;min-height:130px;display:flex;flex-direction:column;gap:14px;justify-content:space-between}.chapter-card .index{font-family:Georgia,serif;color:var(--mint);font-size:30px}.chapter-card .name{font-size:13px;line-height:1.5}.chapter-card .state{font-size:10px;color:#92a6ae}.status-center{text-align:center;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:12}.status-box{max-width:510px;padding:32px;border-radius:14px;background:#132329ed;border:1px solid var(--line)}.status-box h2{font-weight:500;font-size:23px}.status-box p{font-size:14px;color:#bac6cc;line-height:1.6}.status-box .actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.loading-dot{width:27px;height:27px;margin:0 auto 20px;border:2px solid #fff2;border-top-color:var(--mint);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);z-index:80;padding:12px 22px;border-radius:12px;background:#e4f8e8;color:#16342b;font-size:13px;max-width:90%;box-shadow:0 4px 30px #0003}.toast:empty{display:none}.object-layer{position:absolute;inset:0;z-index:9}.hotspot{position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;padding:0;display:grid;place-items:center;background:#c8f0cfbb;color:#19352b;border:2px solid white;box-shadow:0 0 0 7px #c8f0cf22;font-size:24px}.hotspot:active{transform:translate(-50%,-50%) scale(.95)}.object-instruction{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);background:#17272ce8;padding:13px 22px;border-radius:30px;font-size:13px;white-space:nowrap}.chat-tabs{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto}.chat-messages{max-height:40vh;overflow:auto;display:flex;flex-direction:column;gap:9px;padding:10px 0}.chat-bubble{background:#283942;border-radius:15px 15px 15px 3px;padding:11px 15px;font-size:14px;line-height:1.6;max-width:85%;align-self:flex-start;white-space:pre-line}.chat-bubble.mine{align-self:flex-end;background:#c8f0cf;color:#173b2d;border-radius:15px 15px 3px 15px}.chat-bubble.system{align-self:center;background:none;color:#9dabb4;font-size:11px}.collection-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.collection-card{background:#ffffff05;border:1px solid var(--line);border-radius:10px;padding:20px;font-size:14px}.collection-card.locked{opacity:.5}
@media(max-width:700px){.topbar{height:73px;padding:16px 6%}.brand{font-size:10px}.brand-mark{font-size:21px}.wordmark{display:none}.top-actions{gap:7px}.top-actions button{padding:9px 12px;font-size:12px}.hero{max-width:100%;padding:0 7% 75px;justify-content:flex-end;height:100%;pointer-events:none}.hero>*{pointer-events:auto}.hero h1{font-size:clamp(38px,10vw,59px);margin:16px 0}.hero-description{font-size:12px;max-width:300px;line-height:1.6;margin-bottom:22px}.eyebrow{font-size:9px}.hero-details{display:none}.hero-buttons{gap:10px}.hero .primary{padding:15px 20px;min-width:190px}.hero-buttons>button:not(.primary){font-size:12px;padding:13px 17px}.cast-stage{top:65px;bottom:auto;height:63%;width:125%;right:-7%;opacity:.9}.cast{bottom:-8%}.cast-2{right:40%}.cast-3{right:5%}.cast-4{right:-17%}.backdrop{background:linear-gradient(0deg,#102027 0%,#102027dd 26%,#10202700 80%),url('ui/background.webp') center/cover}.cast-stage:after{background:linear-gradient(0deg,#102027 3%,#10202770 24%,transparent 75%)}.bottomline{font-size:8px;bottom:16px;left:7%;right:7%}.game-top{padding-top:16px;height:90px}.scene-heading{padding-top:4px}.scene-title{font-size:12px}.controls button{padding:8px 12px;font-size:11px}.game-screen .video-stage{inset:80px 0 130px}.subtitle{left:5%;right:5%;bottom:24%;font-size:17px}.scene-action{bottom:55px}.choice-panel{padding:100px 5% 45px}.choice{font-size:13px;padding:14px 15px;gap:12px}.choices{gap:8px}.modal{padding:22px;border-radius:14px}.modal-header h2{font-size:27px}.overlay{padding:16px}.chapter-grid{grid-template-columns:repeat(2,1fr);gap:8px}.chapter-card{padding:14px;min-height:115px}.chat-messages{max-height:37vh}.setting-row{font-size:13px}.collection-grid{grid-template-columns:1fr}.object-instruction{font-size:11px}.hotspot{width:38px;height:38px;font-size:20px}}
@media(max-height:500px) and (orientation:landscape){.topbar{height:62px;padding-top:10px}.hero{padding-top:70px;padding-bottom:30px}.hero h1{font-size:38px;margin:12px 0}.hero-description{font-size:12px;margin-bottom:15px}.hero-details{display:none}.cast-stage{height:100%}.hero .primary{padding:12px 20px}.bottomline{bottom:10px}.choice-panel{padding:70px 6% 18px}.choices{gap:6px;width:min(600px,100%)}.choice{padding:9px 16px;font-size:12px}.choice-label{margin-bottom:10px}.subtitle{bottom:15%;font-size:17px}.game-top{padding-top:12px}.modal{padding:20px}.chat-messages{max-height:26vh}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(min-width:701px){.cast-stage{mask-image:linear-gradient(90deg,transparent 0%,#000 58%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 58%)}}
.object-instruction{pointer-events:none}
@media(max-width:700px) and (orientation:portrait){.object-instruction{bottom:auto;top:calc(100% + 24px);white-space:normal;width:90%;text-align:center;line-height:1.5}}