*{box-sizing:border-box}html,body{width:100%;height:100%}body{align-items:center;background:#10182f;color:#f8f0dd;display:flex;font-family:Arial,"Microsoft YaHei",sans-serif;justify-content:center;margin:0;min-height:100%;overflow:auto}.page-shell{max-width:960px;width:min(960px,calc(100vw - 24px))}.game-shell{background:#111936;border:2px solid #64759a;border-radius:10px;box-shadow:0 18px 48px #0008;overflow:hidden;position:relative;width:100%}.hud{align-items:center;background:#151f40;border-bottom:2px solid #516486;display:flex;gap:16px;justify-content:space-between;min-height:56px;padding:10px 16px}.hud strong{display:block;font-size:18px;line-height:1.2;color:#ffe09a}.hud span{color:#aab6ce;display:block;font-size:13px;line-height:1.4}.scoreboard{color:#f5d27b;display:flex;flex-wrap:wrap;font-size:18px;font-weight:700;gap:14px;justify-content:flex-end;min-width:170px;text-align:right}.rank-btn,.control-button,button{background:#2b3c68;border:2px solid #8190b0;border-radius:7px;color:#fff;cursor:pointer;font-weight:700;min-height:40px;padding:0 14px}.rank-btn{font-size:13px;min-width:64px}.canvas-wrap{position:relative;aspect-ratio:8/3;background:#111936}.canvas-wrap canvas{display:block;height:100%;left:0;position:absolute;top:0;touch-action:manipulation;width:100%}#bg3d{z-index:0}#game{z-index:1}.pause-btn{background:#fff0bd;color:#2c2540;border:1px solid #d5b66b;border-radius:6px;cursor:pointer;width:30px;height:30px;padding:2px;position:absolute;right:8px;top:63px;z-index:4}.hidden{display:none!important}.overlay{align-items:center;background:#121a38d9;display:flex;flex-direction:column;inset:56px 0 0;justify-content:center;padding:24px;position:absolute;text-align:center;z-index:3}.overlay h1{color:#fff0c3;font-size:clamp(30px,7vw,64px);letter-spacing:3px;line-height:1;margin:0 0 8px;text-shadow:0 4px #7b4766}.overlay p{color:#d1d7e6;font-size:clamp(14px,2.5vw,18px);line-height:1.5;margin:0 0 10px;max-width:560px}.overlay-buttons{display:flex;gap:12px;justify-content:center}.overlay button,.dialog button{background:#efb965;border-color:#8d5367;color:#33223a;border-radius:7px;font-size:17px;min-height:42px;padding:0 22px}.overlay button#uploadScoreBtn{background:#2b3c68;border-color:#8190b0;color:#fff}.mobile-controls,.bgm-control{align-items:center;display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-top:12px;touch-action:none;user-select:none}.control-button{border-radius:8px;font-size:20px;min-height:58px;width:100%}.jump-button{background:#314c80}.duck-button{background:#3b3d6c}.bgm-control{grid-template-columns:1fr 1fr;padding:0 6px 6px}.bgm-button,.help-button{font-size:14px;min-height:40px}.bgm-button{background:#5b4779}.help-button{background:#35625f}.toast{background:#f2c66f;border:2px solid #fff0ba;border-radius:8px;color:#32223a;font-weight:700;left:50%;padding:10px 16px;position:fixed;top:20px;transform:translateX(-50%);z-index:30}.modal{align-items:center;background:#05091ab8;display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:25}.dialog{background:#151f40;border:2px solid #7080a5;border-radius:9px;box-shadow:0 18px 50px #0009;color:#eef1fa;max-width:420px;padding:24px;text-align:center;width:100%}.dialog h2{color:#ffe09a;margin:0 0 14px}.dialog p{color:#c6cfe0;line-height:1.6;margin:7px 0}.dialog input{background:#0c1430;border:2px solid #617397;border-radius:6px;color:#fff;font-size:15px;margin:6px 0;padding:10px;width:100%}.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}.dialog-actions button:first-child{background:#59647a;color:#fff}.rank-dialog{max-height:80vh;overflow:auto;position:relative}.close{background:transparent!important;border:0!important;color:#cbd3e4!important;font-size:26px!important;min-height:0!important;padding:0!important;position:absolute;right:12px;top:8px}.rank-row{border-top:1px solid #334365;display:grid;gap:7px;grid-template-columns:52px 1fr 80px;padding:9px 0;text-align:left}.rank-row em{color:#8fe0c9;font-style:normal}.rank-row b{color:#f5cf7b;text-align:right}.error{color:#ff9e9e!important;min-height:20px}.help-dialog{text-align:left}.help-dialog h2{text-align:center}.help-dialog button{display:block;margin:16px auto 0}@media(max-width:560px){body{align-items:flex-start;padding-top:6px}.page-shell{width:calc(100vw - 12px)}.hud{align-items:flex-start;min-height:52px;padding:6px 8px}.hud strong{font-size:15px}.hud span{font-size:11px}.scoreboard{font-size:14px;gap:4px;min-width:100px}.rank-btn{font-size:11px;min-width:48px;padding:0 6px}.overlay{inset:52px 0 0}.mobile-controls{gap:8px;margin-top:8px;padding:0 6px 6px}.control-button{font-size:18px;min-height:52px}.bgm-control{gap:8px;margin-top:8px;padding:0 6px 4px}.bgm-button,.help-button{font-size:13px;min-height:36px}}

/* Keep overlays anchored to the canvas even when the HUD wraps on phones. */
.boss-select { margin-top: 12px; padding: 12px; background: #151f40; border: 1px solid #516486; border-radius: 8px; }
.boss-select p { margin: 0 0 10px; text-align: center; color: #c6cfe0; font-size: 13px; }
.boss-select-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.boss-select-buttons button { min-height: 44px; padding: 0 6px; font-size: 14px; }
#challengeKangkang { background: #68458a; }
#challengeXiuxiu { background: #475a7e; }
#challengeEmperor { background: #815f36; }
.boss-select-buttons button:disabled { opacity: .5; cursor: wait; }
.canvas-wrap .overlay { inset: 0; overflow-y: auto; }
.canvas-wrap .overlay h1 { max-width: 100%; overflow-wrap: anywhere; line-height: 1.15; }
@media (min-width: 561px) {
  .canvas-wrap .overlay h1 { font-size: clamp(24px, 4vw, 48px); }
}
.canvas-wrap .pause-btn { top: 8px; min-height: 30px; }
.dialog { max-height: 85vh; overflow-y: auto; }
@media (max-width: 560px) {
  .canvas-wrap .overlay { justify-content: flex-start; padding: 8px 40px 12px 10px; }
  .overlay h1 { font-size: 22px; letter-spacing: 1px; }
  .overlay p { font-size: 12px; margin-bottom: 6px; }
  .overlay button { font-size: 14px; min-height: 34px; padding: 0 12px; }
  .toast { max-width: 90vw; width: max-content; font-size: 13px; }
}
