:root{color-scheme:dark;--ink:#f5f5ff;--muted:#9ca7ce;--aqua:#59fce3;--pink:#fb6dc8;--line:#3a476c;--dark:#0b1024}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(ellipse at top,#23254c,#080b1d 72%);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace}body{display:flex;justify-content:center;align-items:center;padding:12px;overscroll-behavior:none}.game-shell{width:min(100%,1050px)}.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 4px 13px;gap:10px}.brand{font-weight:900;letter-spacing:1.4px;font-size:clamp(14px,2.5vw,22px);text-shadow:2px 2px #68358f}.brand strong{color:var(--aqua)}.bolt{display:inline-block;margin-right:6px}.small-btn,.pause-btn{font:700 12px ui-monospace,monospace;color:#dbe2ff;background:#1b2448;border:2px solid #536698;border-radius:5px;padding:9px 12px;cursor:pointer;touch-action:manipulation}.game-frame{position:relative;overflow:hidden;aspect-ratio:16/9;border:4px solid #6877ac;box-shadow:0 0 0 3px #101730,0 15px 45px #0009;background:#10112f}canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.hud{position:absolute;z-index:2;left:12px;right:60px;top:12px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;pointer-events:none}.hud-box{min-width:0;padding:6px 9px;background:#080c20c9;border:1px solid #5c6894;box-shadow:3px 3px #0005}.hud-box small{display:block;color:#aab7df;font-weight:800;font-size:clamp(8px,1.6vw,11px);letter-spacing:1px}.hud-box strong{display:block;font-size:clamp(13px,2.5vw,24px);color:#fff;white-space:nowrap}.hud-box strong small{display:inline;font-size:.45em;color:#72edd9}.progress-wrap{position:absolute;z-index:2;left:12px;right:12px;bottom:9px;height:7px;background:#151933;border:1px solid #a9abdb;pointer-events:none}.progress-bar{height:100%;width:0;background:linear-gradient(90deg,#37c2f1,#8affd7)}.status-text{position:absolute;z-index:3;top:30%;left:0;width:100%;text-align:center;font-size:clamp(16px,3vw,33px);font-weight:900;color:#fff;text-shadow:3px 3px #25134d,-2px -2px #25134d;pointer-events:none;opacity:0;transition:opacity .12s}.timing-prompt{position:absolute;z-index:3;bottom:19%;left:0;right:0;text-align:center;font-size:clamp(12px,2.2vw,22px);font-weight:900;letter-spacing:1px;text-shadow:2px 2px #050816;pointer-events:none}.overlay{position:absolute;z-index:5;inset:0;display:grid;place-items:center;background:#080c21dc;padding:12px}.overlay[hidden],.pause-btn[hidden]{display:none}.panel{border:3px solid #5edff2;background:linear-gradient(160deg,#192146,#0b1028);max-width:540px;width:min(94%,540px);padding:clamp(14px,3vw,27px);text-align:center;box-shadow:8px 8px 0 #040713,0 0 40px #34cbe02c}.eyebrow{font-size:clamp(9px,1.3vw,12px);letter-spacing:2px;color:#b7bceb}.panel h1{margin:9px 0;font-size:clamp(28px,6.4vw,58px);line-height:.94;letter-spacing:-1px;color:#fff;text-shadow:4px 4px #63389d}.panel h1 em{font-style:normal;color:var(--aqua)}.panel p{font-size:clamp(11px,1.75vw,15px);line-height:1.5;color:#d5dcf8}.overlay-stats{margin:14px 0;color:#ffdb86;font-weight:900}.action-btn{background:#71fbdc;border:0;border-bottom:5px solid #2c8b85;border-radius:5px;color:#101a2a;padding:13px 24px;font:900 clamp(14px,2vw,18px) ui-monospace,monospace;cursor:pointer;touch-action:manipulation}.action-btn:active{transform:translateY(3px);border-bottom-width:2px}.panel p.hint{font-size:clamp(9px,1.5vw,12px);color:#9da8cb;margin:12px 0 0}.pause-btn{position:absolute;z-index:4;right:12px;top:12px;padding:5px 10px;font-size:16px}.control-area{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0 11px;user-select:none}.move-controls{display:flex;gap:12px}.control-btn{background:#202b53;border:2px solid #748ac7;border-bottom:5px solid #4b598f;border-radius:8px;color:#f6f7ff;font:900 19px ui-monospace,monospace;min-height:65px;touch-action:none;cursor:pointer;user-select:none}.control-btn:active,.control-btn.pressed{background:#3a5285;transform:translateY(2px);border-bottom-width:3px}.arrow-btn{min-width:85px}.parry-btn{min-width:165px;color:#0c2330;background:#70f4dd;border-color:#a8ffec;border-bottom-color:#329a98}.parry-btn:active,.parry-btn.pressed{background:#eaff9f}.control-tip{text-align:center;color:#b9c5ec;font-weight:800;font-size:clamp(9px,1.35vw,12px);line-height:1.5}.control-tip span{color:#56f4d2}footer{display:flex;justify-content:space-between;gap:12px;color:#7988bd;font-size:11px;letter-spacing:.6px;font-weight:700;padding:0 1px}@media(max-width:620px){body{padding:6px}.topbar{padding:5px 1px 8px}.game-frame{border-width:2px}.hud{top:6px;left:6px;right:39px;gap:3px}.hud-box{padding:3px 4px;box-shadow:none}.hud-box small{letter-spacing:0}.progress-wrap{left:5px;right:5px;bottom:4px;height:5px}.pause-btn{right:6px;top:6px;font-size:12px;padding:3px 7px}.control-area{gap:5px;padding-top:11px}.move-controls{gap:8px}.control-btn{min-height:58px;font-size:16px}.arrow-btn{min-width:58px}.parry-btn{min-width:116px}.control-tip{display:none}footer{font-size:9px}.panel{padding:12px;max-width:94%}.panel p{margin:7px 0}.overlay-stats{margin:8px 0}.action-btn{padding:9px 18px}.panel p.hint{margin-top:6px}}@media(max-width:380px){.arrow-btn{min-width:51px}.parry-btn{min-width:102px}.hud-box strong{font-size:12px}}@media(max-height:540px) and (orientation:landscape){body{align-items:start}.topbar{padding:2px 0 4px}.control-area{padding:6px 0}.control-btn{min-height:44px}.panel{padding:8px}.panel h1{font-size:32px}.panel p{margin:4px}.overlay-stats{margin:5px}.action-btn{padding:7px 15px}}

.jump-btn{min-width:130px;background:#b19aff;color:#15132b;border-color:#decaff;border-bottom-color:#6950b0}.jump-btn:active,.jump-btn.pressed{background:#e1d5ff}@media(max-width:620px){.jump-btn{min-width:86px}.control-area{gap:4px}.move-controls{gap:4px}.arrow-btn{min-width:47px}.parry-btn{min-width:91px}.hud-box strong{font-size:clamp(11px,2.6vw,16px)}.hud-box{padding:3px 2px}.hud{gap:2px}}@media(max-width:380px){.arrow-btn{min-width:40px}.jump-btn{min-width:70px}.parry-btn{min-width:82px}.control-btn{font-size:13px}}

.hop-meter{position:absolute;z-index:3;left:12px;top:68px;pointer-events:none;padding:4px 8px;border:1px solid #656c93;background:#090e29bb;color:#b9c6e8;font-size:clamp(10px,1.65vw,15px);font-weight:900;letter-spacing:1px;text-shadow:1px 1px #000}.hop-meter.active{color:#ffe48d;border-color:#efcb78;box-shadow:0 0 10px #d19a4a77}@media(max-width:620px){.hop-meter{top:42px;left:6px;padding:2px 5px;font-size:10px}}

/* Mobile comfort update: buttons occupy two reachable rows instead of four tiny targets. */
@media (pointer:coarse){
  .control-btn{min-height:72px;touch-action:none;-webkit-tap-highlight-color:transparent}
  .control-btn:focus-visible{outline:3px solid #fff}
  .action-btn{min-height:48px}
}
@media (max-width:700px){
  .control-area{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"move move" "jump parry";gap:9px;padding:10px 2px}
  .move-controls{grid-area:move;display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .arrow-btn{width:100%;min-width:0;min-height:64px;font-size:24px}
  .jump-btn{grid-area:jump;min-width:0;width:100%;min-height:70px;font-size:17px}
  .parry-btn{grid-area:parry;min-width:0;width:100%;min-height:70px;font-size:17px}
  .control-tip{display:none}
  footer{line-height:1.5;font-size:9px}
  .panel p.hint{font-size:11px}
}
@media (max-width:700px) and (orientation:landscape){
  body{padding:3px}
  .game-shell{max-width:100%;display:grid;grid-template-columns:minmax(0,1fr) 184px;column-gap:6px;align-items:center}
  .topbar,.game-shell footer{display:none}
  .game-frame{grid-column:1;aspect-ratio:16/9;width:100%}
  .control-area{grid-column:2;grid-row:1;grid-template-areas:"move move" "jump parry";gap:5px;padding:0}
  .move-controls{gap:5px}.arrow-btn{min-height:72px}
  .jump-btn,.parry-btn{min-height:72px;font-size:11px;padding:2px}
}
@media (max-height:430px) and (orientation:landscape) and (min-width:701px){
  .control-area{padding:3px 0}.control-btn{min-height:48px}
}