:root{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;color:#f7f6e9;background:#101a35;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overscroll-behavior:none}
body{background:radial-gradient(circle at 50% -15%,#294075 0,#101a35 48%,#0b1226 100%)}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:3px solid #ffde68;outline-offset:4px}
.app{width:min(1120px,100%);min-height:100dvh;margin:auto;padding:18px clamp(12px,2.4vw,30px) 20px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:62px}
.brand{display:flex;align-items:center;gap:12px;font-size:17px;line-height:.96;font-weight:900;letter-spacing:.06em;text-shadow:3px 3px 0 #051025}
.brand strong{font-size:28px;letter-spacing:.12em;color:#ffd45c}
.brand-mark{display:grid;place-items:center;width:48px;height:48px;background:#ffd45c;color:#112043;border:4px solid #fff2b3;border-radius:10px;box-shadow:4px 4px 0 #060e20;font-size:30px}
.topbar-actions{display:flex;align-items:center;gap:11px}
.level-tag{font-size:14px;font-weight:800;letter-spacing:.06em;color:#cfe7e0;margin-right:6px}
.level-tag span{color:#f7be56;padding:0 5px}
.icon-button{min-width:48px;height:45px;border:2px solid #6486a7;border-radius:9px;color:#fff8da;background:#243b65;box-shadow:0 4px 0 #09182c;font-size:24px;font-weight:900;line-height:1}
.icon-button:hover{background:#355482}
.game-panel{border:5px solid #f6cf65;border-radius:14px;background:#10223e;box-shadow:0 10px 0 #071329,0 18px 40px #0006;overflow:hidden}
.hud{display:flex;align-items:center;gap:32px;min-height:54px;padding:8px clamp(12px,3vw,28px);background:#162d4b;border-bottom:4px solid #0a1c37;font-size:21px;line-height:1;font-weight:900;letter-spacing:.05em}
.hud-item{display:flex;align-items:center;gap:9px;white-space:nowrap}
.hud-label{font-size:12px;color:#87bcce;letter-spacing:.12em}
#coinValue{color:#ffdc60}#livesValue{color:#ff7c7c;font-size:20px;letter-spacing:0}
.stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#8ed5ed;touch-action:none}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.screen{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#0c1934a6;padding:18px;backdrop-filter:blur(2px)}
.screen[hidden]{display:none}
.screen-card{width:min(550px,94%);padding:clamp(22px,3vw,38px);text-align:center;background:#142948;border:4px solid #fff0aa;border-radius:18px;box-shadow:0 9px 0 #071329,0 20px 45px #08122699}
.screen-kicker{color:#75e2d4;font-weight:900;font-size:13px;letter-spacing:.16em}
.screen h1{font-size:clamp(31px,5vw,62px);line-height:.95;letter-spacing:.035em;margin:16px 0 14px;text-shadow:5px 5px 0 #092039;color:#fff7db}
.screen h1 span{color:#ffcf5a}
.screen p{line-height:1.5;margin:0 auto 20px;max-width:380px;font-size:15px;color:#e6f1f2}
.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-width:220px;min-height:55px;padding:12px 22px;border:3px solid #ffedaf;border-radius:9px;background:#f47c58;color:#10213c;box-shadow:0 6px 0 #a74144;font-size:17px;font-weight:900;letter-spacing:.04em;transition:transform .12s,box-shadow .12s}
.primary-button:hover{transform:translateY(2px);box-shadow:0 4px 0 #a74144;background:#ff9164}
.primary-button:active{transform:translateY(5px);box-shadow:0 1px 0 #a74144}
.screen .screen-hint{margin:18px auto 0;font-size:12px;color:#a6c2cd}
.status-row{display:flex;justify-content:space-between;gap:12px;padding:8px 18px 10px;background:#142947;color:#aecddb;font-size:13px;font-weight:700}
.desktop-tip{color:#7ea9ba}.touch-controls{display:none}.footer-note{text-align:center;color:#7191aa;font-size:12px;margin:0}
@media(max-width:700px){.app{justify-content:flex-start;padding-top:12px;gap:10px}.topbar{min-height:50px}.brand{font-size:12px;gap:8px}.brand strong{font-size:20px}.brand-mark{width:38px;height:38px;font-size:23px;border-width:3px}.level-tag{display:none}.icon-button{min-width:43px;height:41px;font-size:20px}.hud{gap:12px;justify-content:space-between;min-height:45px;padding:7px 8px;font-size:15px}.hud-item{gap:4px}.hud-label{font-size:9px}#livesValue{font-size:14px}.game-panel{border-width:4px}.stage{aspect-ratio:11/9}.screen-card{padding:15px 14px;border-width:3px}.screen h1{font-size:clamp(28px,8vw,43px);margin:9px 0}.screen-kicker{font-size:10px}.screen p{font-size:12px;margin-bottom:12px}.primary-button{min-height:45px;min-width:180px;font-size:14px}.screen .screen-hint{font-size:10px;margin-top:12px}.status-row{font-size:11px;padding:7px 10px}.desktop-tip{display:none}.touch-controls{display:flex;justify-content:space-between;gap:20px;touch-action:none}.direction-controls{display:flex;gap:14px}.control-button{width:76px;height:70px;border:3px solid #9cc5d3;border-radius:14px;background:#29476d;color:#fff6d9;box-shadow:0 6px 0 #091a33;font-size:26px;font-weight:900;user-select:none;-webkit-user-select:none;touch-action:none}.control-button.is-pressed,.control-button:active{transform:translateY(4px);box-shadow:0 2px 0 #091a33;background:#3d6885}.jump-button{width:112px;border-color:#ffe6aa;background:#f47c58;color:#15213c;font-size:18px}.footer-note{margin-top:4px}}
@media(max-width:390px){.hud{font-size:13px}.hud-label{font-size:8px}.control-button{width:66px;height:64px}.jump-button{width:100px}.status-row{font-size:10px}}
@media(max-height:650px) and (min-width:701px){.app{justify-content:flex-start}.topbar{min-height:48px}.brand-mark{width:40px;height:40px}.stage{max-height:calc(100dvh - 160px);aspect-ratio:auto}.screen-card{padding:18px}.screen h1{font-size:42px}}

/* Third-person game interface */
:root{font-family:"Trebuchet MS",Verdana,ui-sans-serif,system-ui,sans-serif;color:#f6fff9;background:#102739}
body{background:radial-gradient(circle at 50% -18%,#417591 0,#193d59 38%,#0c2236 73%,#081a2b 100%)}
.app{width:min(1220px,100%);gap:12px;padding:18px clamp(12px,2.5vw,30px) 18px}
.topbar{min-height:67px}
.brand{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:17px;letter-spacing:.1em;line-height:.9;text-shadow:0 3px 0 #092039,0 6px 10px #031421aa}
.brand strong{font-size:28px;color:#fff2bd;text-shadow:0 3px 0 #ad6c55,0 6px 0 #4c4563,0 10px 18px #071a29}
.brand em{display:inline-block;vertical-align:middle;margin-left:3px;padding:4px 5px;border-radius:5px;background:linear-gradient(145deg,#90f1d7,#2db2b6);box-shadow:0 3px 0 #1f727f;color:#153e57;font-style:normal;font-size:13px;letter-spacing:0;text-shadow:none}
.brand-mark{border:3px solid #c4fff0;border-radius:15px;background:linear-gradient(145deg,#fff5b4,#f5ab68);box-shadow:inset 0 3px 3px #fff9d1,0 5px 0 #956a5d,0 9px 18px #081928;color:#174965;transform:rotate(-8deg)}
.level-tag{color:#d8f2ed;letter-spacing:.12em}
.level-tag span{color:#77e8d5}
.icon-button{border:1px solid #8cc9d5;border-radius:12px;background:linear-gradient(155deg,#4b809e,#244f70);box-shadow:inset 0 2px 0 #b7e6e07a,0 5px 0 #143950,0 9px 17px #061b2b8c;color:#edfff8}
.icon-button:hover{background:linear-gradient(155deg,#63a1b4,#2b6282)}
.game-panel{min-width:0;border:3px solid #aadce0;border-radius:21px;background:#193c53;box-shadow:inset 0 0 0 2px #ffffff30,0 8px 0 #102c46,0 20px 42px #071c2dbc;overflow:hidden}
.hud{min-height:61px;gap:28px;border-bottom:1px solid #b8e8da70;background:linear-gradient(180deg,#427994,#24506d);padding:9px clamp(14px,3vw,29px);font-size:22px;text-shadow:0 2px 3px #0b2739}
.hud-label{font-size:11px;color:#b8e7dd;letter-spacing:.16em}
.hud-item{gap:10px}
#coinValue{color:#ffe39a}#livesValue{color:#ff9c9e}
.hud-progress{display:flex;align-items:center;gap:9px;margin-left:auto;color:#c5eee2;font-size:11px;font-weight:900;letter-spacing:.13em}
.progress-track{width:115px;height:10px;overflow:hidden;border:1px solid #8ed9d1;border-radius:99px;background:#163e56;box-shadow:inset 0 2px 4px #092334}
#progressFill{height:100%;width:0;background:linear-gradient(90deg,#4ed0ba,#fff0ac);border-radius:99px;box-shadow:0 0 9px #b1ffe0;transition:width .12s linear}
.stage{background:#87c9e7}
canvas{image-rendering:auto}
.screen{background:linear-gradient(135deg,#0d2945bb,#1233529c 55%,#0e253cbb);backdrop-filter:blur(3px)}
.screen-card{width:min(585px,94%);border:1px solid #b6f0e7;border-radius:24px;background:linear-gradient(145deg,#285979ef,#153b5cf4 64%,#17334cf5);box-shadow:inset 0 2px 0 #c5ffeb80,inset 0 -3px 0 #0d2739,0 13px 0 #0b2d41,0 23px 47px #061928b5}
.screen-kicker{color:#8bffdf;letter-spacing:.23em;font-size:12px}
.screen h1{font-family:"Trebuchet MS",Verdana,sans-serif;letter-spacing:.035em;font-weight:1000;color:#fff8dd;text-shadow:0 3px 0 #e9a568,0 6px 0 #996881,0 10px 16px #031b30}
.screen h1 span{color:#a5ffe2;text-shadow:0 3px 0 #49c7c3,0 6px 0 #276f9a,0 10px 16px #031b30}
.screen p{color:#e7f8f4}
.primary-button{border:2px solid #fff6cc;border-radius:13px;background:linear-gradient(160deg,#ffe89f,#f5b66d);box-shadow:inset 0 2px 0 #fff9d8,0 6px 0 #bf8060,0 11px 15px #071f32a8;color:#1a4053;font-weight:1000}
.primary-button:hover{background:linear-gradient(160deg,#fff0ba,#f9c47e);box-shadow:inset 0 2px 0 #fff9d8,0 4px 0 #bf8060,0 9px 13px #071f32a8}
.primary-button:active{box-shadow:inset 0 2px 0 #fff9d8,0 1px 0 #bf8060}
.screen .screen-hint{color:#b5dddf}
.status-row{background:linear-gradient(180deg,#244f6a,#1b405d);color:#ddf7ef;letter-spacing:.01em}
.desktop-tip{color:#a6dcd6}
.footer-note{color:#9bbfc4}
@media(max-width:700px){
  .app{padding-top:12px;gap:10px}
  .topbar{min-height:50px}
  .brand{font-size:11px;letter-spacing:.06em}
  .brand strong{font-size:19px}
  .brand em{font-size:9px;padding:3px}
  .brand-mark{width:39px;height:39px}
  .icon-button{min-width:42px;height:41px}
  .game-panel{border-width:2px;border-radius:15px}
  .hud{gap:10px;min-height:44px;padding:7px 9px;font-size:15px}
  .hud-item{gap:4px}
  .hud-label{font-size:8px}
  #livesValue{font-size:14px}
  .hud-progress{display:none}
  .stage{aspect-ratio:11/9}
  .screen-card{padding:16px 14px;border-radius:17px;box-shadow:inset 0 2px 0 #c5ffeb80,0 7px 0 #0b2d41,0 13px 28px #061928b5}
  .screen h1{font-size:clamp(29px,8vw,45px)}
  .screen p{font-size:12px}
  .screen-kicker{font-size:10px}
  .primary-button{min-width:180px;min-height:45px;font-size:13px}
  .status-row{font-size:11px}
  .touch-controls{display:flex;align-items:center;justify-content:space-between;min-height:151px;gap:14px;padding:2px 4px}
  .direction-controls{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,44px);gap:3px}
  .control-button{width:54px;height:44px;border:1px solid #b9eee7;border-radius:11px;background:linear-gradient(155deg,#4d8fac,#255674);box-shadow:inset 0 2px 0 #c9f7eb7a,0 4px 0 #163d56,0 7px 12px #071c2b9c;color:#f1fff8;font-size:22px}
  .forward-button{grid-column:2;grid-row:1}.left-button{grid-column:1;grid-row:2}.back-button{grid-column:2;grid-row:3}.right-button{grid-column:3;grid-row:2}
  .control-button.is-pressed,.control-button:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #c9f7eb7a,0 1px 0 #163d56;background:linear-gradient(155deg,#62b5c2,#30758c)}
  .jump-button{width:104px;height:104px;border:2px solid #fff2c5;border-radius:50%;background:linear-gradient(150deg,#ffe2a1,#f59d70);box-shadow:inset 0 4px 0 #fff7d3,0 7px 0 #ad675e,0 14px 22px #071c2baa;color:#214b5c;font-size:16px}
  .jump-button.is-pressed,.jump-button:active{box-shadow:inset 0 2px 0 #fff7d3,0 2px 0 #ad675e}
}
@media(max-width:390px){.direction-controls{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,42px)}.direction-controls .control-button{width:48px;height:42px}.jump-button{width:95px;height:95px}.hud{font-size:13px}.hud-label{font-size:7px}}
@media(max-height:650px) and (min-width:701px){.stage{max-height:calc(100dvh - 165px)}.screen h1{font-size:42px}}
canvas{cursor:grab}
canvas:active{cursor:grabbing}
.joystick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:130px;min-height:142px;color:#b8e6dd;font-size:10px;font-weight:900;letter-spacing:.18em;touch-action:none;user-select:none;-webkit-user-select:none}
.joystick-ring{position:relative;display:grid;place-items:center;width:116px;height:116px;border:2px solid #aee9df;border-radius:50%;background:radial-gradient(circle at 44% 38%,#467d98,#234f70 70%);box-shadow:inset 0 5px 10px #0b2f4d,inset 0 0 0 15px #73b5b121,0 7px 0 #143c55,0 13px 20px #071c2baa}
.joystick-ring::before,.joystick-ring::after{content:"";position:absolute;background:#c3f6e8a1;border-radius:99px}
.joystick-ring::before{width:3px;height:62px}.joystick-ring::after{width:62px;height:3px}
.joystick-thumb{position:absolute;left:50%;top:50%;z-index:1;width:52px;height:52px;transform:translate(-50%,-50%);border:2px solid #d6fff1;border-radius:50%;background:linear-gradient(150deg,#a0e6db,#4594a4);box-shadow:inset 0 4px 4px #e7fff9a1,0 4px 0 #2b637b,0 7px 10px #0b2945ac;transition:transform .1s ease-out}
.joystick.is-active .joystick-thumb{transition:none}
@media(max-width:700px){.touch-controls{min-height:150px}.joystick{width:125px}.joystick-ring{width:112px;height:112px}}
@media(max-width:390px){.joystick{width:116px}.joystick-ring{width:104px;height:104px}.joystick-thumb{width:48px;height:48px}}
.gap-warning{position:absolute;z-index:2;top:18px;left:50%;transform:translateX(-50%);padding:9px 17px;border:1px solid #fff4c0;border-radius:99px;background:#713d3fdc;color:#fff6d7;box-shadow:0 5px 0 #422d43,0 8px 18px #0e263c99;font-size:13px;font-weight:1000;letter-spacing:.14em;white-space:nowrap;pointer-events:none;animation:warningPulse .75s ease-in-out infinite alternate}
.gap-warning span{color:#ffcc78}.gap-warning[hidden]{display:none}
@keyframes warningPulse{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.05)}}
@media(max-width:700px){.gap-warning{top:11px;padding:6px 10px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.gap-warning{animation:none}}