*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#060818;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:#fff}
#stage{position:absolute;left:50%;top:50%;width:min(100vw,177.78vh);height:min(56.25vw,100vh);width:min(100vw,177.78dvh);height:min(56.25vw,100dvh);transform:translate(-50%,-50%);container-type:size;overflow:hidden;background:#060818}
#world{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
#hud,#prompts{position:absolute;inset:0;pointer-events:none}
.disp{font-family:"Arial Black","Segoe UI Black",Impact,sans-serif;font-weight:900;letter-spacing:.02em}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* player card */
.pcard{position:absolute;left:1.6cqh;top:1.6cqh;display:flex;gap:1.4cqh;align-items:center;padding:1cqh 1.8cqh 1cqh 1cqh;border-radius:2cqh;background:rgba(8,12,34,.8);border:.3cqh solid rgba(255,210,63,.7);box-shadow:0 1cqh 3cqh rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.pcard img{width:8cqh;height:8cqh;border-radius:1.4cqh;border:.3cqh solid #fff}
.pcard b{display:block;font-size:2.8cqh;line-height:1;color:#ffd23f}
.pcard .chips{display:flex;gap:.8cqh;margin-top:.8cqh;flex-wrap:wrap}
.pcard .chip{font-size:1.5cqh;font-weight:800;padding:.4cqh 1cqh;border-radius:1cqh;background:rgba(255,255,255,.1);white-space:nowrap}
.pcard .chip em{font-style:normal;color:#ffd23f}
.topbtns{position:absolute;right:1.6cqh;top:1.6cqh;display:flex;gap:1cqh;pointer-events:auto}
.topbtns button{width:6.4cqh;height:6.4cqh;border-radius:50%;border:.3cqh solid rgba(255,255,255,.4);background:rgba(8,12,34,.8);color:#fff;font-size:2.8cqh;cursor:pointer}
.hint{position:absolute;left:50%;bottom:2cqh;transform:translateX(-50%);padding:1cqh 2.4cqh;border-radius:3cqh;background:rgba(8,12,34,.82);border:.25cqh solid rgba(63,224,255,.7);font-weight:800;font-size:2cqh;white-space:nowrap;transition:opacity .6s}
.hint.gone{opacity:0}
.hint kbd{display:inline-block;min-width:3cqh;padding:.1cqh .7cqh;margin:0 .2cqh;border-radius:.6cqh;background:#e8eeff;color:#101530;font:900 1.6cqh "Arial Black",sans-serif;box-shadow:0 .3cqh 0 #7d8ab5}

/* door prompt */
.dprompt{position:absolute;transform:translate(-50%,-100%);min-width:34cqh;max-width:44cqh;padding:1.4cqh 1.8cqh;border-radius:2cqh;text-align:center;background:rgba(6,10,30,.92);border:.35cqh solid var(--c);box-shadow:0 0 3cqh var(--c),0 1.4cqh 3cqh rgba(0,0,0,.6);animation:dp .35s cubic-bezier(.2,1.4,.4,1)}
.dprompt h3{font-family:"Arial Black",Impact,sans-serif;font-size:2.8cqh;color:#fff;line-height:1.05}
.dprompt .sub{font-size:1.6cqh;color:#c9d6ff;font-weight:700;margin-top:.4cqh}
.dprompt .stats{display:flex;gap:.8cqh;justify-content:center;flex-wrap:wrap;margin-top:1cqh}
.dprompt .stats span{font-size:1.5cqh;font-weight:800;padding:.4cqh 1cqh;border-radius:1cqh;background:rgba(255,255,255,.1)}
.dprompt .stats em{font-style:normal;color:#ffd23f}
.dprompt .go{margin-top:1cqh;font-family:"Arial Black",Impact,sans-serif;font-size:1.8cqh;color:var(--c);animation:pulse .5s infinite alternate}
.dprompt::after{content:"";position:absolute;left:50%;bottom:-1.6cqh;transform:translateX(-50%);border:1cqh solid transparent;border-top:1.2cqh solid var(--c)}
@keyframes dp{from{transform:translate(-50%,-80%) scale(.8);opacity:0}}
@keyframes pulse{from{opacity:.65}to{opacity:1}}

/* enter transition */
#fade{position:absolute;inset:0;pointer-events:none;opacity:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqh;background:radial-gradient(circle at 50% 50%,var(--c,#000) 0%,#000 70%);transition:opacity .45s}
#fade.on{opacity:1;pointer-events:auto}
#fade h2{font-family:"Arial Black",Impact,sans-serif;font-size:9cqh;letter-spacing:.04em;text-shadow:0 .8cqh 0 rgba(0,0,0,.5);animation:zoom .6s cubic-bezier(.2,1.4,.4,1)}
#fade p{font-size:2.6cqh;font-weight:800;color:#dfe7ff}
#fade .bar{width:40cqh;height:1.2cqh;border-radius:1cqh;background:rgba(255,255,255,.15);overflow:hidden}
#fade .bar i{display:block;height:100%;width:0;background:#ffd23f;animation:load 1.2s ease-in forwards}
@keyframes zoom{from{transform:scale(.4);opacity:0}}
@keyframes load{to{width:100%}}

/* touch joystick */
#stick{position:fixed;left:calc(env(safe-area-inset-left) + 3vh);bottom:4vh;width:22vh;height:22vh;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,.05));border:.4vh solid rgba(255,255,255,.35);display:none;touch-action:none;z-index:5}
#knob{position:absolute;left:50%;top:50%;width:9vh;height:9vh;margin:-4.5vh 0 0 -4.5vh;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe27a,#f5b800);box-shadow:0 .6vh 1.4vh rgba(0,0,0,.5)}
body.touch #stick{display:block}
body.touch .hint{bottom:auto;top:12cqh}

#rotate{display:none;position:fixed;inset:0;z-index:99;background:#060818;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:24px}
#rotate .phone{font-size:64px;animation:rot 1.6s ease-in-out infinite}
@keyframes rot{50%{transform:rotate(90deg)}}
/* upright phones are supported: the camera follows Romency across the plaza */
.noscript{position:fixed;inset:0;display:grid;place-items:center;background:#060818;color:#fff;font:700 20px sans-serif}

/* v2: the world view (canvas + door cards) — fills the phone screen */
#view{position:absolute;left:0;top:0;width:100%;height:100%}
body.touch #stage{left:0;top:0;width:100vw;height:100vh;height:100dvh;transform:none}
/* floating thumb-stick: appears under the thumb */
#stick{display:none!important;position:fixed;left:0;top:0;bottom:auto;width:30vh;height:30vh;min-width:120px;min-height:120px;margin:0;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,.04));border:.5vh solid rgba(255,255,255,.45);box-shadow:0 0 3vh rgba(0,0,0,.4);pointer-events:none;z-index:6}
#stick.on{display:block!important}
#knob{width:11vh;height:11vh;min-width:46px;min-height:46px;margin:0;left:50%;top:50%;translate:-50% -50%}
/* iPhone: one-time tip for true full screen */
#ioshint{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 8px);transform:translateX(-50%);z-index:20;display:flex;gap:10px;align-items:center;width:min(720px,92vw);
  padding:8px 12px;border-radius:14px;background:rgba(8,12,34,.95);border:2px solid #ffd23f;font:600 13px/1.3 "Segoe UI",system-ui,sans-serif;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.5)}
#ioshint[hidden]{display:none}
#ioshint > b{color:#ffd23f;white-space:nowrap}
#ioshint span{text-wrap:pretty}
#ioshint .share{display:inline-block;padding:0 5px;border-radius:5px;background:#2f8cff}
#ioshint button{flex:none;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:15px}

/* upright phones: HUD and door cards sized to the phone's width */
@media (orientation:portrait) and (pointer:coarse){
  .pcard{left:2vw;top:2vw;padding:1.4vw 2.4vw 1.4vw 1.4vw;gap:2vw;border-radius:3vw}
  .pcard img{width:12vw;height:12vw}
  .pcard b{font-size:4.4vw}
  .pcard .chip{font-size:2.8vw}
  .topbtns{right:2vw;top:2vw}.topbtns button{width:11vw;height:11vw;font-size:5vw}
  body.touch .hint{top:auto;bottom:4vw;font-size:3.2vw;white-space:normal;width:90vw;text-align:center}
  .dprompt{min-width:52vw;max-width:70vw;padding:2.4vw 3vw}
  .dprompt h3{font-size:5vw}.dprompt .sub{font-size:3vw}.dprompt .stats span{font-size:2.8vw}.dprompt .go{font-size:3.2vw}
  #fade h2{font-size:10vw}#fade p{font-size:4vw}#fade .bar{width:60vw}
}