.stage-name{margin:5px 0 7px;color:#74e8f1;font:800 10px 'DM Sans',sans-serif;letter-spacing:1.4px}.stage-dots{display:flex;gap:5px;margin:0 0 13px}.stage-dots i{width:12px;height:4px;border-radius:4px;background:#30475e}.stage-dots i.current{background:#71eff5;box-shadow:0 0 10px #71eff5}.stat-card .stage-dots+.stat-row{border-top:1px solid #ffffff1a;padding-top:10px}
.focus-overlay{position:absolute;z-index:4;inset:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;text-align:center;background:radial-gradient(circle,#13294adf,#071326f4 72%);border:1px solid #67eafa99;box-shadow:inset 0 0 40px #49edff33}.focus-overlay[hidden]{display:none}.focus-kicker{font:800 11px 'DM Sans',sans-serif;letter-spacing:2px;color:#f8c56a}.focus-dial{--remaining:100%;width:176px;height:176px;border-radius:50%;margin:24px 0;display:grid;place-items:center;background:conic-gradient(#77f4ff var(--remaining),#274660 var(--remaining));box-shadow:0 0 50px #59eaff55;position:relative}.focus-dial:before{content:"";position:absolute;inset:11px;border-radius:50%;background:#09182e}.focus-dial span{position:relative;font:900 53px 'Barlow Condensed',sans-serif;letter-spacing:2px;color:white;text-shadow:0 0 18px #7effff}.focus-overlay strong{font:900 32px 'Barlow Condensed',sans-serif;letter-spacing:2px;color:#8cf4ff}.focus-overlay p{max-width:240px;color:#cae7f7;font-size:13px;line-height:1.7}.focus-overlay small{color:#84a5c1;font-size:10px}
.tray-pages{position:absolute;z-index:6;top:4px;right:7px;display:flex;align-items:center;gap:4px;color:#a6d9ef;font:800 9px 'DM Sans',sans-serif}.tray-pages button{width:21px;height:21px;padding:0;border:1px solid #456b82;border-radius:5px;color:#d4faff;background:#17304b;font-size:17px;line-height:1}.tray-pages button[hidden]{display:none}.puzzle-stage.paused .tray-pages{visibility:hidden}
.video-button{display:block;margin:18px auto 0;padding:10px 18px;border:1px solid #ffb4e8;border-radius:7px;background:#321b45;color:#ffe8f8;font:800 13px 'DM Sans',sans-serif;letter-spacing:1px;box-shadow:0 0 22px #ff77dd55}.video-button[hidden]{display:none}.video-dialog{position:fixed;z-index:110;inset:0;display:grid;place-items:center;padding:20px;background:#030915e9;backdrop-filter:blur(8px)}.video-dialog[hidden]{display:none}.video-card{position:relative;width:min(540px,100%);padding:30px;border:2px solid #81edff;border-radius:18px;background:linear-gradient(140deg,#162946,#111529);box-shadow:0 0 60px #66e9ff55;text-align:center}.video-card h2{font:900 42px 'Barlow Condensed',sans-serif;margin:10px 0 20px}.video-placeholder{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #6caacb;background:radial-gradient(circle,#263e68,#071529);color:#e8faff}.video-placeholder span{display:grid;place-items:center;width:65px;height:65px;border:2px solid #8cedff;border-radius:50%;font-size:25px;box-shadow:0 0 25px #80edff}.video-placeholder strong{margin-top:13px;font:900 25px 'Barlow Condensed',sans-serif;letter-spacing:3px}.video-placeholder p{font-size:12px;color:#a9c4da}.video-card video{width:100%}
@media(max-width:700px){.focus-overlay{inset:9px}.focus-dial{width:145px;height:145px;margin:15px 0}.focus-dial span{font-size:43px}.focus-overlay strong{font-size:26px}.stage-name{margin-top:3px}.stage-dots{margin-bottom:7px}}
@media(max-height:740px) and (min-width:701px){
  .topbar{height:56px}
  .arcade-marquee{height:26px}
  .game-layout{grid-template-columns:165px 300px minmax(360px,430px);padding-top:10px}
  .board-shell{width:300px}
  #board{width:280px;height:560px}
  .left-panel{gap:7px}
  .left-panel .card{padding:9px 12px}
  .hold-card canvas{width:84px;height:58px;margin-top:3px}
  .left-panel .large-number{font-size:34px;margin:7px 0 9px}
  .score-card .stat-row{padding-top:8px}
  .left-panel .stat-row strong{font-size:18px}
  .stage-name{margin:2px 0 4px}
  .stage-dots{margin-bottom:6px}
  .stat-card .stage-dots+.stat-row{padding-top:6px}
  .stat-card .stat-row+.stat-row{margin-top:8px}
  .level-track{margin:8px 0 9px}
  .left-panel .next-card{padding-bottom:5px}
  .next-canvases{margin-top:4px}
  .next{width:84px;height:60px}
}
@media(min-width:701px){
  .left-panel{display:grid;grid-template-rows:92px 110px 145px minmax(0,1fr);gap:7px;height:var(--left-panel-height,620px);padding-top:0}
  .left-panel .card{min-height:0;padding:9px 12px}
  .hold-card canvas{width:60px;height:50px;margin-top:3px}
  .left-panel .large-number{font-size:31px;margin:5px 0 7px}
  .score-card .stat-row{padding-top:7px}
  .left-panel .stat-row strong{font-size:18px}
  .stage-name{margin:2px 0 4px}
  .stage-dots{margin-bottom:6px}
  .stat-card .stage-dots+.stat-row{padding-top:6px}
  .stat-card .stat-row+.stat-row{margin-top:7px}
  .level-track{margin:7px 0 8px}
  .left-panel .next-card{padding-bottom:5px}
  .next-canvases{margin-top:4px}
  .next{width:80px;height:57px}
}
@media(max-height:740px) and (min-width:701px){
  .left-panel{--left-panel-height:580px}
}
.video-card{width:min(900px,100%);max-height:94vh;overflow:auto}
.video-card video{display:block;width:100%;aspect-ratio:16/9;max-height:68vh;object-fit:contain;background:#020713;border:1px solid #73c8df;border-radius:9px}
.video-note{margin:11px 0 0;color:#a9c6d8;font-size:12px}
@media(min-width:701px){.left-panel{grid-template-rows:minmax(0,1fr) 92px 110px 145px;margin-top:38px}.left-panel .next-card{grid-row:1}.left-panel .hold-card{grid-row:2}.left-panel .score-card{grid-row:3}.left-panel .stat-card{grid-row:4}}