:root{
  --bg:#07020d;--panel:rgba(12,5,20,.78);--panel2:rgba(31,9,49,.72);--line:rgba(255,255,255,.18);
  --text:#fff6df;--muted:#d9c6ff;--gold:#ffe28a;--pink:#ff3cf7;--cyan:#4dfcff;--red:#ff4d6d;--green:#6dffad;
  --safeTop:env(safe-area-inset-top);--safeBottom:env(safe-area-inset-bottom);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--text);font-family:Georgia,'Times New Roman',serif;touch-action:manipulation;-webkit-user-select:none;user-select:none}body{background:radial-gradient(circle at 50% -10%,#3a0b5a 0,#0a0614 44%,#020106 100%)}button,input{font:inherit}.app{height:100dvh;display:flex;flex-direction:column;position:relative;background:linear-gradient(180deg,rgba(255,60,247,.09),transparent 40%,rgba(77,252,255,.08));isolation:isolate}.app::before{content:"";position:fixed;inset:-20%;z-index:-2;background:conic-gradient(from 0deg,#ff3cf7,#4dfcff,#ffe28a,#6dffad,#ff4d6d,#ff3cf7);filter:blur(55px);opacity:.16;animation:slowSpin 40s linear infinite}.app::after{content:"";position:fixed;inset:0;z-index:-1;background:repeating-radial-gradient(circle at 50% 45%,rgba(255,255,255,.07) 0 1px,transparent 2px 18px);mix-blend-mode:screen;opacity:.18;animation:breathe 9s ease-in-out infinite}@keyframes slowSpin{to{transform:rotate(360deg)}}@keyframes breathe{50%{opacity:.33;transform:scale(1.03)}}
.topbar{padding:calc(8px + var(--safeTop)) 12px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(180deg,rgba(0,0,0,.86),rgba(10,4,18,.48));border-bottom:1px solid var(--line);backdrop-filter:blur(18px);z-index:10}.brand{display:flex;align-items:center;gap:9px;min-width:0}.sigil{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,var(--gold),var(--pink),transparent 70%);box-shadow:0 0 22px var(--pink);color:#170019}.brand h1{font-size:15px;line-height:1;margin:0;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand p{font-size:12px;line-height:1.2;margin:3px 0 0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar__actions{display:flex;gap:6px}.iconbtn,.btn,.modebtn{border:1px solid var(--line);border-radius:14px;color:var(--text);background:rgba(255,255,255,.07);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 10px 25px rgba(0,0,0,.25);padding:9px 10px;cursor:pointer}.iconbtn{font-size:11px;padding:8px 9px}.btn--primary{background:linear-gradient(135deg,rgba(255,226,138,.92),rgba(255,60,247,.78),rgba(77,252,255,.72));color:#120016;font-weight:bold}.btn--ghost{width:100%;margin-top:10px;background:rgba(255,60,247,.12)}
.stage-shell{flex:1;min-height:0;display:grid;grid-template-columns:1fr 330px;gap:10px;padding:10px}.stage{position:relative;min-height:0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#08020d;box-shadow:0 0 40px rgba(255,60,247,.18),inset 0 0 60px rgba(0,0,0,.65)}.room-art{position:absolute;inset:0;background:#13051e;background-size:cover;background-position:center;transition:filter .7s ease, transform 1.2s ease;animation:roomDrift 18s ease-in-out infinite}.room-art::before{content:"";position:absolute;inset:0;background:var(--roomGrad,radial-gradient(circle at 50% 50%,rgba(255,226,138,.25),transparent 26%),linear-gradient(120deg,#160322,#0b0615));opacity:.96}.room-art::after{content:"";position:absolute;inset:0;background:var(--roomPattern,repeating-linear-gradient(90deg,transparent 0 28px,rgba(255,255,255,.06) 29px 31px));mix-blend-mode:screen;opacity:.65;animation:flow 16s linear infinite}@keyframes roomDrift{50%{transform:scale(1.025) translate3d(-.5%,.5%,0)}}@keyframes flow{to{background-position:420px 220px}}.fx-canvas,.vignette,.hotspot-layer,.character{position:absolute;inset:0}.fx-canvas{pointer-events:none;opacity:.85}.vignette{pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 0 45%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.9) 100%)}.character{pointer-events:none;inset:auto;left:50%;bottom:9%;width:72px;height:150px;transform:translateX(-50%);transition:left .65s cubic-bezier(.2,.8,.1,1),bottom .65s cubic-bezier(.2,.8,.1,1),filter .3s}.character__glow{position:absolute;inset:15% -30% -5%;border-radius:50%;background:radial-gradient(circle,rgba(77,252,255,.24),transparent 65%);filter:blur(12px)}.character__body{position:absolute;left:20px;bottom:0;width:32px;height:88px;background:linear-gradient(160deg,#221122,#09030c 45%,#35154d);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);border:1px solid rgba(255,255,255,.25);box-shadow:inset 0 0 10px rgba(255,226,138,.3)}.character__body::before{content:"";position:absolute;inset:4px 11px;background:linear-gradient(#fff6df,#ff3cf7);clip-path:polygon(50% 0,100% 60%,50% 100%,0 60%);opacity:.82}.character__head{position:absolute;left:18px;top:15px;width:36px;height:44px;border-radius:45% 45% 48% 48%;background:linear-gradient(140deg,#f8d0a8,#8a5264);box-shadow:0 0 12px rgba(255,226,138,.5)}
.hotspot{position:absolute;min-width:44px;min-height:44px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:radial-gradient(circle,rgba(255,226,138,.35),rgba(255,60,247,.11) 45%,transparent 68%);box-shadow:0 0 18px rgba(255,226,138,.34);display:grid;place-items:center;color:#fff;font-weight:bold;text-shadow:0 2px 8px #000;animation:pulse 2.2s ease-in-out infinite;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.hotspot.hidden-hotspots{background:transparent;border-color:transparent;box-shadow:none;color:transparent;animation:none}.hotspot.exit{border-radius:18px;background:linear-gradient(135deg,rgba(77,252,255,.24),rgba(255,60,247,.1))}.hotspot.item{background:radial-gradient(circle,rgba(109,255,173,.42),rgba(255,226,138,.16),transparent 70%)}.hotspot.locked{filter:saturate(.45);opacity:.75}@keyframes pulse{50%{transform:scale(1.12);box-shadow:0 0 28px rgba(77,252,255,.55)}}.label-pop{position:absolute;left:50%;top:-30px;transform:translateX(-50%);padding:5px 8px;border-radius:10px;background:rgba(0,0,0,.72);font-size:11px;white-space:nowrap;border:1px solid rgba(255,255,255,.18)}
.side-panel{min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;background:var(--panel);backdrop-filter:blur(18px);padding:12px;overflow:hidden}.progress-card{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:18px;padding:12px}.progress-card__head{display:flex;justify-content:space-between;font-size:12px;color:var(--gold);letter-spacing:.05em;text-transform:uppercase}.progress{height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin:9px 0}.progress div{height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--cyan),var(--gold));transition:width .35s}.progress-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.35}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}.tab{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.06);color:var(--muted);padding:8px;font-size:12px}.tab.active{color:#160018;background:linear-gradient(135deg,var(--gold),var(--cyan))}.panel-tab{display:none;min-height:0;overflow:auto;border:1px solid var(--line);border-radius:18px;padding:10px;background:rgba(0,0,0,.2);flex:1}.panel-tab.active{display:block}.item-card,.journal-card,.map-card{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);border-radius:14px;padding:9px;margin-bottom:8px}.item-card{display:flex;align-items:center;gap:8px}.item-card button{margin-left:auto}.item-icon{font-size:24px}.journal-card h4,.map-card h4{margin:0 0 5px;color:var(--gold)}.journal-card p,.map-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.35}.selected-item{outline:2px solid var(--gold);box-shadow:0 0 18px rgba(255,226,138,.3)}
.bottombar{display:none;padding:8px 8px calc(8px + var(--safeBottom));grid-template-columns:repeat(4,1fr);gap:8px;background:rgba(0,0,0,.72);border-top:1px solid var(--line);backdrop-filter:blur(18px);z-index:12}.modebtn.active{background:linear-gradient(135deg,rgba(255,226,138,.88),rgba(77,252,255,.68));color:#130018}.toast{position:fixed;left:50%;bottom:calc(84px + var(--safeBottom));transform:translateX(-50%) translateY(30px);max-width:min(560px,92vw);padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.84);border:1px solid rgba(255,255,255,.22);box-shadow:0 0 30px rgba(255,60,247,.28);opacity:0;pointer-events:none;transition:.25s;z-index:30}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:blur(14px);z-index:50;padding:20px}.modal--open{display:grid}.modal__panel{width:min(620px,96vw);max-height:92dvh;overflow:auto;border:1px solid rgba(255,255,255,.22);border-radius:28px;background:linear-gradient(160deg,rgba(24,4,35,.96),rgba(6,3,12,.96));box-shadow:0 0 60px rgba(255,60,247,.35);padding:22px}.modal__panel--wide{width:min(760px,96vw)}.modal h1,.modal h2{margin:0 0 8px;color:var(--gold)}.subtitle{color:var(--cyan);font-style:italic}.warning{border-left:3px solid var(--red);padding-left:10px;color:#ffd5dc}.option-row{display:grid;gap:8px;margin:12px 0}.menu-grid,.chapter-select{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}.chapter-select{grid-template-columns:repeat(7,1fr)}.scene-overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(circle,rgba(0,0,0,.2),rgba(0,0,0,.8));padding:20px}.scene-overlay[hidden]{display:none!important;pointer-events:none!important}.scene-card{width:min(620px,92%);border:1px solid rgba(255,255,255,.25);border-radius:24px;background:linear-gradient(160deg,rgba(17,4,30,.92),rgba(0,0,0,.86));padding:22px;text-align:center;box-shadow:0 0 60px rgba(77,252,255,.3)}.scene-icon{font-size:54px;text-shadow:0 0 24px var(--cyan)}.scene-card h2{color:var(--gold)}.scene-card p{font-size:17px;line-height:1.55;color:#f6e9ff}.roomName{position:absolute;left:14px;top:14px;padding:7px 10px;border-radius:13px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.17);z-index:5;color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:900px){.stage-shell{grid-template-columns:1fr;padding:8px;gap:8px}.side-panel{position:absolute;left:8px;right:8px;bottom:calc(66px + var(--safeBottom));max-height:44dvh;z-index:15;transform:translateY(calc(100% - 58px));transition:transform .3s ease;border-radius:20px}.side-panel.open{transform:translateY(0)}.side-panel::before{content:"Inventory • Journal • Map";display:block;text-align:center;color:var(--gold);padding-bottom:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.stage{min-height:calc(100dvh - 146px - var(--safeTop) - var(--safeBottom))}.bottombar{display:grid}.topbar{padding-left:8px;padding-right:8px}.brand h1{font-size:12px}.brand p{font-size:10px}.iconbtn{font-size:10px;padding:7px}.character{width:56px;height:124px}.character__body{left:16px;width:25px;height:72px}.character__head{left:14px;width:30px;height:36px}.chapter-select{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.stage-shell{padding:6px}.stage{border-radius:18px}.hotspot{min-width:42px;min-height:42px}.modal__panel{padding:16px}.scene-card{padding:16px}.scene-card p{font-size:15px}.topbar__actions{gap:4px}.sigil{width:28px;height:28px}.menu-grid{grid-template-columns:1fr}.toast{bottom:calc(78px + var(--safeBottom))}}
.reduce-motion *,.reduce-motion .app::before,.reduce-motion .app::after,.reduce-motion .room-art,.reduce-motion .room-art::after,.reduce-motion .hotspot{animation:none!important;transition:none!important}.soft-horror .vignette{background:radial-gradient(circle at 50% 45%,transparent 0 55%,rgba(0,0,0,.45) 100%)}.soft-horror .room-art{filter:saturate(.88) brightness(1.05)}