/* Focus Dungeon demo UI. Everything lives inside #stage and scales with it (container query units). */
#stage{container-type:inline-size;font-family:var(--display);color:var(--ink);background:#0b0915}
#stage .fd-cv{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;transition:filter .9s ease}
#stage .fd-cv.dim{filter:saturate(.4) brightness(.9) hue-rotate(-12deg)}
#stage button{font-family:var(--display)}
.fd-hidden{display:none!important}

/* HUD */
.fd-hud{position:absolute;inset:0 0 auto;padding:2.2cqw 3.6cqw 0;pointer-events:none;z-index:3;text-shadow:0 .5cqw 0 rgba(0,0,0,.6)}
.fd-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.fd-chip{display:flex;flex-direction:column;gap:.4cqw;font-size:3cqw;color:var(--mid);letter-spacing:.1em;text-transform:uppercase;padding-top:1.4cqw}
.fd-chip b{font-size:6.6cqw;color:var(--ink);letter-spacing:0;line-height:1;display:flex;align-items:center;gap:1.4cqw}
.fd-gold{align-items:flex-end}
.fd-gold b{color:#ffd965;transition:transform .12s}
.fd-gold.bump b{transform:scale(1.18)}
.fd-gold img{width:5.4cqw;height:5.4cqw;image-rendering:pixelated}
.fd-timer{font-size:17cqw;font-weight:700;line-height:.84;display:flex;justify-content:center;color:var(--ink);transition:color .5s}
.fd-timer span{display:inline-block;width:.6em;text-align:center}
.fd-timer span.c{width:.28em}
.fd-hud.dim .fd-timer{color:#7d74a3;animation:fd-flick 1.4s steps(2) infinite}
.fd-hud.done .fd-timer{color:var(--accent);text-shadow:0 0 4cqw rgba(124,242,165,.5),0 .5cqw 0 rgba(0,0,0,.6)}
@keyframes fd-flick{50%{opacity:.72}}
.fd-label{text-align:center;font-size:2.9cqw;color:var(--mid);margin-top:1.2cqw;letter-spacing:.03em}
.fd-hud.done .fd-label{color:var(--accent)}
.fd-xp{display:flex;align-items:center;gap:2cqw;margin-top:1.6cqw;font-size:3.1cqw;color:var(--mid)}
.fd-xp b{color:var(--accent);font-weight:700;min-width:8cqw}
.fd-xp .fd-meter{flex:1;height:2.8cqw;background:#0c0a16;border:.6cqw solid #3a3260;position:relative;overflow:hidden}
.fd-xp .fd-meter i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);box-shadow:inset 0 -.9cqw 0 #35b874;transition:width .4s steps(8)}
.fd-xp .fd-meter.flash i{background:#fff}
.fd-xp span{min-width:15cqw;text-align:right}

/* Boss bar + banners */
.fd-boss{position:absolute;left:8cqw;right:8cqw;top:33cqw;z-index:3;text-align:center;font-size:3.4cqw;letter-spacing:.14em;color:#ffb3bd;text-shadow:0 .5cqw 0 #000;pointer-events:none;transition:opacity .3s}
.fd-boss .fd-meter{height:2.6cqw;margin-top:1cqw;background:#12091a;border:.6cqw solid #5a2a48}
.fd-boss .fd-meter i{display:block;height:100%;width:100%;background:#ff5a74;box-shadow:inset 0 -.8cqw 0 #b02848;transition:width .15s}
.fd-banner{position:absolute;left:50%;top:41cqw;transform:translate(-50%,0);z-index:4;max-width:88cqw;width:max-content;text-align:center;padding:2.2cqw 4cqw;font-size:4.4cqw;line-height:1.15;background:rgba(12,9,22,.88);border:.6cqw solid #3d3466;box-shadow:0 1cqw 0 rgba(0,0,0,.5);pointer-events:none;opacity:0;transition:opacity .25s,transform .25s}
.fd-banner.show{opacity:1;transform:translate(-50%,-1cqw)}
.fd-banner.warn{color:#ffd38a;border-color:#8a5a2a}
.fd-banner.good{color:var(--accent);border-color:#2f8f5a}
.fd-banner.floor{background:none;border:0;box-shadow:none;font-size:9cqw;font-weight:700;text-shadow:0 .7cqw 0 #000}
.fd-banner.floor small{display:block;font-size:3.6cqw;font-weight:400;color:var(--mid);letter-spacing:.06em}
.fd-banner.big{background:none;border:0;box-shadow:none;font-size:10cqw;font-weight:600;letter-spacing:.04em;color:var(--accent);text-shadow:0 0 5cqw rgba(124,242,165,.7),0 .8cqw 0 #000}

/* Bottom bar */
.fd-bottom{position:absolute;inset:auto 0 0;display:flex;gap:2.4cqw;align-items:center;justify-content:space-between;padding:3cqw 3.6cqw;z-index:4;background:linear-gradient(to top,rgba(9,7,17,.92) 40%,rgba(9,7,17,0))}
.fd-task{min-width:0;flex:1;font-size:3.5cqw;color:var(--mid);line-height:1.2}
.fd-task b{display:block;color:var(--ink);font-weight:600;font-size:4.2cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-btn{font-size:4.4cqw;font-weight:600;min-height:max(44px,11cqw);padding:0 4cqw;border:.7cqw solid #5b4f8f;background:#2a2346;color:var(--ink);box-shadow:0 1cqw 0 #08060f;cursor:pointer;white-space:nowrap;touch-action:manipulation}
.fd-btn:active,.fd-btn.press{transform:translateY(.7cqw);box-shadow:0 .3cqw 0 #08060f}
.fd-btn.on,.fd-btn.go{background:var(--accent);color:var(--accent-ink);border-color:#c4ffd9}
.fd-btn:focus-visible{outline:.8cqw solid #fff;outline-offset:.6cqw}
.fd-btn:disabled{opacity:.5;cursor:default}

/* Start overlay */
.fd-start{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;padding:6cqw 7cqw 0;background:linear-gradient(to bottom,rgba(14,11,24,.97) 0,rgba(14,11,24,.93) 52%,rgba(14,11,24,0) 66%)}
.fd-start .k{font-size:3.1cqw;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.fd-start h1{font-size:8.6cqw;line-height:1;margin:1.4cqw 0 3.6cqw}
.fd-start label{font-size:3.6cqw;color:var(--mid);display:block;margin-bottom:1.4cqw}
.fd-start input{width:100%;font:600 max(16px,5cqw) var(--display);color:var(--ink);background:#0d0b18;border:.7cqw solid #4b3f7a;padding:2.2cqw 3cqw;outline:none;border-radius:0}
.fd-start input:focus{border-color:var(--accent)}
.fd-start .fd-btn{width:100%;margin-top:3.6cqw;font-size:6cqw;min-height:max(52px,14cqw)}
.fd-start .s{margin-top:2.6cqw;font-size:3.1cqw;color:var(--mid);text-align:center}
.fd-tip{position:absolute;left:0;right:0;bottom:3.6cqw;z-index:5;text-align:center;font-size:3.4cqw;color:var(--mid);padding:0 5cqw;text-shadow:0 .5cqw 0 #000}
.fd-tip b{color:var(--ink);font-weight:600}

/* Phone mock (the distraction) */
.fd-phone{position:absolute;right:2.6cqw;bottom:0;width:44cqw;height:76cqw;z-index:6;background:#0a0912;border:1cqw solid #2c2744;border-bottom:0;border-radius:6cqw 6cqw 0 0;padding:0 2.6cqw;transform:translateY(104%);transition:transform .35s cubic-bezier(.2,.9,.3,1.2);box-shadow:0 0 0 .6cqw #000,-2cqw 0 6cqw rgba(0,0,0,.6);overflow:hidden}
.fd-phone.show{transform:translateY(14%)}
.fd-phone .st{position:relative;z-index:1;background:#0a0912;display:flex;justify-content:space-between;font-size:2.8cqw;color:#9a93bb;margin:0 -2.6cqw 1cqw;padding:3cqw 4cqw 1.6cqw}
.fd-phone .feed{display:flex;flex-direction:column;gap:2cqw;animation:fd-scroll 2.6s linear infinite}
.fd-phone .n{background:#1b1830;border-radius:2.4cqw;padding:2cqw 2.4cqw;font-size:2.9cqw;line-height:1.2;color:#d8d2f2}
.fd-phone .n small{display:block;color:#857ea6;font-size:2.5cqw}
.fd-phone .n i{display:block;height:9cqw;margin-top:1.4cqw;border-radius:1.4cqw;background:linear-gradient(135deg,#3b2f6b,#6b3f7a 50%,#2f5b6b)}
@keyframes fd-scroll{to{transform:translateY(-30%)}}
.fd-phone .fd-btn{position:absolute;left:2.6cqw;right:2.6cqw;bottom:15cqw;font-size:3.9cqw;padding:0 1cqw}

/* Pause */
.fd-pause{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqw;background:rgba(10,8,18,.72);font-size:9cqw;font-weight:700;cursor:pointer}
.fd-pause small{font-size:3.6cqw;font-weight:400;color:var(--mid)}

/* Loot screen */
.fd-loot{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;padding:6cqw;background:rgba(9,7,17,.66);opacity:0;transition:opacity .3s}
.fd-loot.show{opacity:1}
.fd-card{width:100%;background:var(--panel);border:.8cqw solid #3d3466;box-shadow:0 1.6cqw 0 #08060f;padding:4.6cqw 5cqw 3cqw}
.fd-card .k{font-size:3cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.fd-card h3{font-size:8cqw;line-height:1;margin:1.4cqw 0 .6cqw;color:var(--accent)}
.fd-card .t{font-size:3.6cqw;color:var(--mid);margin-bottom:2cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-li{display:flex;align-items:center;gap:3cqw;padding:2.2cqw 0;border-top:.4cqw dashed rgba(255,255,255,.12);font-size:4.3cqw;opacity:0;transform:translateX(-3cqw);transition:opacity .25s,transform .25s}
.fd-li.on{opacity:1;transform:none}
.fd-li img{width:7cqw;height:7cqw;image-rendering:pixelated;flex:none}
.fd-li .ic{width:7cqw;text-align:center;flex:none;font-size:5cqw}
.fd-li span{flex:1;min-width:0;line-height:1.1}
.fd-li small{display:block;font-size:3cqw;color:var(--mid)}
.fd-li b{font-size:5cqw;color:#ffd965;white-space:nowrap}
.fd-li b.m{color:var(--accent)}
.fd-li.lv b{animation:fd-pop .5s steps(4) 2}
@keyframes fd-pop{50%{transform:scale(1.25)}}
#stage #cta{z-index:8}