@font-face{font-family:"Titan One";src:url("../assets/fonts/TitanOne-latin.woff2") format("woff2");font-display:swap}
:root{color-scheme:dark;--ink-a:#ff8a14;--ink-b:#2f5bff;--bg:#140d24;--fg:#fff;--muted:#b7aed0}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:radial-gradient(ellipse at 50% 30%,#271a46,var(--bg) 70%);color:var(--fg);font:14px/1.6 "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100svh;overflow:hidden;padding:10px 12px}
button,a,input{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--ink-a);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#frame{position:relative;container-type:inline-size;width:min(100%,calc((100svh - 128px) * 16 / 9));border-radius:14px;overflow:hidden;background:#000;box-shadow:0 20px 60px #0009,0 0 0 1px #ffffff14}
#game-link{position:absolute;right:2%;bottom:2%;width:34%;height:10%;z-index:2;background:transparent}
#game-link:hover{box-shadow:inset 0 -2px #ffd9b0}
#game-link:focus-visible{outline-offset:-3px}
#game-link span{font-family:Arial,sans-serif}
#film{width:100%;aspect-ratio:16/9;display:block}
#gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 30% 70%,#ff8a1440,transparent 45%),radial-gradient(circle at 72% 30%,#2f5bff55,transparent 45%),#140d24e6;gap:6px}
.kicker{margin:0;font-size:clamp(10px,1.4vw,13px);letter-spacing:4px;color:var(--muted)}
h1{margin:0;font:400 clamp(44px,9vw,120px)/1 "Titan One","Arial Black",sans-serif;letter-spacing:.02em;text-shadow:0 6px 0 #2f5bff,0 0 40px #ff8a1466;-webkit-text-stroke:2px #140d24}
h1 span{display:block;margin-top:.45em;font:900 clamp(14px,2.2vw,26px)/1.2 "PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.3em;-webkit-text-stroke:0;text-shadow:none;color:#ffd9b0}
#start{margin-top:clamp(10px,2.4vw,26px);background:var(--ink-a);color:#1a0f00;font-weight:900;font-size:clamp(14px,1.8vw,19px);padding:.75em 1.6em;border-radius:999px;box-shadow:0 5px 0 #b35a00;letter-spacing:2px;transition:transform .15s}
#start:hover{transform:translateY(-2px) rotate(-1.5deg)}
#start:active{transform:translateY(3px);box-shadow:0 2px 0 #b35a00}
#start[disabled]{opacity:.55;cursor:wait}
#start i{font-style:normal;margin-right:.3em}
.fine{margin:6px 0 0;font-size:12px;color:var(--muted)}
#gate{gap:clamp(3px,.5cqw,6px);padding:2cqw}
#gate .kicker{font-size:clamp(8px,1.1cqw,13px);letter-spacing:.3cqw}
#gate h1{font-size:clamp(28px,9cqw,120px)}
#gate h1 span{font-size:clamp(10px,2cqw,26px)}
#gate #start{font-size:clamp(11px,1.6cqw,19px);margin-top:clamp(5px,1.8cqw,26px);padding:.6em 1.4em}
#gate .fine{font-size:clamp(8px,1cqw,12px);margin-top:.5cqw}
#cta{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);background:#fff;color:#140d24;font-weight:900;font-size:clamp(14px,2vw,22px);padding:.6em 1.5em;border-radius:999px;box-shadow:0 5px 0 var(--ink-b);letter-spacing:3px;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
#cta:hover{background:var(--ink-a);color:#1a0f00}
@keyframes pop{from{transform:translateX(-50%) scale(.3);opacity:0}}
#bar{width:min(100%,calc((100svh - 128px) * 16 / 9));display:flex;align-items:center;gap:14px;padding:10px 2px 2px;font-size:13px;color:var(--muted)}
#play{width:36px;height:36px;border-radius:50%;background:#fff;color:#140d24;flex:none;font-size:13px}
#play:hover{background:var(--ink-a)}
#clock{font-variant-numeric:tabular-nums;flex:none}
.seek{flex:1;display:flex}
#seek{width:100%;accent-color:var(--ink-a);cursor:pointer}
#sound,#fs{flex:none}
#sound:hover,#fs:hover,.play-link:hover{color:#fff}
.play-link{flex:none;color:var(--ink-a);font-weight:700}
.credit{margin:6px 0 0;font-size:11px;color:#8b82a6;text-align:center}
#frame:fullscreen{width:100%;height:100%;border-radius:0;aspect-ratio:auto}
#frame:fullscreen #film{height:100%;aspect-ratio:auto}
@media (max-width:640px){
  body{padding:8px}
  #bar{gap:10px;font-size:12px}
  .play-link,#fs{display:none}
  .credit{font-size:10px}
}
@media (max-height:480px) and (orientation:landscape){
  body{padding:4px;justify-content:flex-start}
  #frame{width:min(100%,calc((100svh - 84px) * 16 / 9));border-radius:8px}
  #bar{width:min(100%,calc((100svh - 84px) * 16 / 9));padding-top:4px}
  .credit{display:none}
}