*{box-sizing:border-box}body{margin:0;background:#11131a;color:#eee;font-family:system-ui,Arial,sans-serif;display:flex;justify-content:center;min-height:100vh}
#wrap{width:1000px;max-width:96vw;text-align:center;padding:12px}
h1{letter-spacing:2px;margin:10px 0}h1 span{font-size:14px;color:#f5c542;letter-spacing:4px;margin-left:8px}
#menu{display:flex;flex-direction:column;gap:12px;align-items:center;background:#1b1f2a;padding:18px 24px;border-radius:14px;border:1px solid #333;margin-top:10px}
#menu .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
button.big{font-size:20px;padding:10px 28px;border-radius:10px;border:0;cursor:pointer;background:#f5c542;font-weight:800}
button.big:hover{background:#ffd75e}button.big:last-of-type{background:#3b82f6;color:#fff}
#help{color:#a3abbf;font-size:13px;line-height:1.5;width:100%;text-align:left}
#help .help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:10px}
#help .help-card{background:#151926;border:1px solid #2b3244;border-radius:12px;padding:10px 14px}
#help .help-card h3{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#f5c542}
#help .line{display:flex;align-items:baseline;gap:10px;padding:2px 0}
#help .keys{flex:0 0 118px;color:#e6ebf5;white-space:nowrap}
#help .line>span:last-child{color:#9aa3b8}
#help b{color:#fde68a}
#help .help-tip{margin-top:10px;padding:8px 12px;background:#10131c;border-left:3px solid #f5c542;border-radius:0 8px 8px 0;color:#b6bed1}
#help .help-foot{margin-top:8px;color:#7c8498;font-size:12px}
kbd{background:#2a2f3d;border:1px solid #444;border-bottom-width:3px;border-radius:6px;padding:1px 7px;margin:0 2px;font-family:inherit;font-size:.95em;color:#e6ebf5}
#hud{display:flex;align-items:center;gap:12px;margin:8px 0}
.bar-wrap{flex:1}.name{font-weight:700;margin-bottom:4px;text-align:left}.right .name{text-align:right}
.bar{position:relative;height:22px;background:#333;border-radius:8px;overflow:hidden;border:2px solid #000}
.bar>div{position:absolute;top:0;bottom:0;left:0}
#hp1,#hp2{background:linear-gradient(90deg,#22c55e,#a3e635);width:100%;z-index:2}
.right .bar>div{left:auto;right:0}
#hp2{background:linear-gradient(90deg,#ef4444,#f97316)}
#chip1,#chip2{background:#facc15;width:100%;z-index:1;transition:width .6s}
#timer{font-size:32px;font-weight:900;background:#000;border:2px solid #f5c542;border-radius:10px;min-width:70px;padding:2px 8px;color:#f5c542}
#stagebox{position:relative}
canvas{background:#f7f6f0;border-radius:12px;border:2px solid #333;width:100%;height:auto;display:block}
#diff{display:flex;gap:8px;align-items:center;color:#aaa;font-size:14px}
#diff button{background:#2a2f3d;color:#ddd;border:1px solid #444;border-radius:8px;padding:5px 14px;cursor:pointer;font-weight:700}
#diff button.on{background:#f5c542;color:#000;border-color:#f5c542}
#banner{position:absolute;left:0;right:0;top:34%;font-size:clamp(28px,6vw,64px);font-weight:900;color:#f5c542;-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:4px 4px 0 #000;pointer-events:none;z-index:5;padding:0 12px}
#controls-hint{margin-top:8px}
#controls-hint .hint-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 16px;color:#8b93a7;font-size:13px}
#controls-hint .hint-row+.hint-row{margin-top:5px;font-size:12px;color:#6f778c}
#controls-hint .hint-g{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#controls-hint b{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#c7cfdf}
#controls-hint i{font-style:normal;color:#737c92}
#controls-hint kbd{padding:0 6px;border-bottom-width:2px;font-size:12px}
#train-status{font-family:ui-monospace,monospace;font-size:14px;color:#7dd3fc;background:#0b1220;border:1px solid #1e3a5f;border-radius:8px;margin-top:6px;padding:6px 10px;min-height:32px}
.hidden{display:none!important}

#banner.small{font-size:clamp(18px,3.4vw,34px);-webkit-text-stroke:1.5px #000}