:root{color-scheme:dark;background:#17100d;font-family:Inter,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0}
body{min-height:100vh;min-height:100dvh;color:#f8ebdc;background:radial-gradient(ellipse 72% 60% at 50% 48%,#472819 0%,#271811 48%,#17100d 100%)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#cf884029 1px,transparent 1px),linear-gradient(90deg,#cf884029 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}
.stage{position:relative;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:calc(28px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left))}
.player-area{position:relative;width:100%;max-width:850px;display:grid;justify-items:center;gap:12px;padding-top:270px}
.player-frame{position:relative;width:100%;aspect-ratio:16/10;display:grid;place-items:center;overflow:visible;background:radial-gradient(circle at 50% 30%,#2b1b16,#080605 75%);border:2px solid #cd8951;border-radius:22px;box-shadow:0 0 0 5px #321d13,0 0 34px #c1733155,0 22px 55px #000a}
.balance-art{position:absolute;z-index:3;bottom:calc(100% - 12px);left:50%;width:min(28vw,280px);aspect-ratio:1;transform:translateX(-50%);pointer-events:none;user-select:none;filter:drop-shadow(0 8px 10px #000a)}
.balance-art img{display:block;width:100%;height:100%;object-fit:contain}
.balance-label{position:absolute;top:76%;left:9%;width:82%;height:16%;display:flex;align-items:center;justify-content:center;text-align:center;color:#ffe2ad;font-size:clamp(20px,2.8vw,28px);font-weight:900;line-height:1;text-shadow:0 2px 3px #140906}
.player-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;border-radius:20px}
.play-trigger{position:absolute;z-index:2;display:grid;place-items:center;width:56px;height:56px;border:2px solid #ffc58f;border-radius:50%;background:#aa5d28;color:#fff;cursor:pointer;box-shadow:0 0 0 6px #a35b253d,0 12px 30px #0008}
.play-trigger span{font-size:22px;margin-left:4px}
.play-trigger:disabled{opacity:.55;cursor:wait}
.play-trigger:focus-visible,.next-button:focus-visible{outline:3px solid #fff;outline-offset:4px}
.status{position:absolute;z-index:3;bottom:14px;left:14px;right:14px;text-align:center;font-size:14px;line-height:1.4;padding:10px;background:#1c1310;color:#f8ebdc;border:1px solid #9b6440;border-radius:10px}
.status.error{color:#ffb1aa}
.next-button{width:min(100%,420px);min-height:48px;border:2px solid #f0ad70;background:#bd7136;color:#1a0c05;font:800 15px Inter,"Segoe UI",Arial,sans-serif;cursor:pointer;box-shadow:4px 4px 0 #080604;transition:background .15s,transform .15s,box-shadow .15s}
.next-button:hover:not(:disabled){background:#e49a55}
.next-button:active:not(:disabled){transform:translate(4px,4px);box-shadow:2px 2px 0 #080604}
.next-button:disabled{opacity:.55;cursor:wait}
@media(max-width:600px){
  body::before{background-size:48px 48px}
  .stage{padding:calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}
  .player-area{gap:10px;padding-top:min(60vw,245px)}
  .balance-art{width:min(60vw,250px)}
  .balance-label{font-size:clamp(18px,5vw,24px)}
  .player-frame{aspect-ratio:16/10;border-radius:18px;box-shadow:0 0 0 4px #321d13,0 0 24px #c1733144,0 15px 40px #0008}
  .player-frame video{border-radius:16px}
  .next-button{width:min(78%,300px);min-height:44px;font-size:14px;box-shadow:3px 3px 0 #080604}
  .play-trigger{width:50px;height:50px}
}
[hidden]{display:none!important}