@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'Space Grotesk',Arial,sans-serif;color:#f3f2e9;background:#101722;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 50% -20%,#28435a 0,#101722 55%)}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffce71;outline-offset:3px}.app{max-width:1260px;min-height:100vh;margin:auto;padding:17px 24px 20px}.header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 0 16px;margin-bottom:18px;border-bottom:1px solid #3d5463}.logo{font:12px/1.5 'Press Start 2P',monospace;color:#ffe186}.logo-star{color:#f8744e;font-size:19px;vertical-align:-2px}.logo small{font-size:7px;color:#8ca9b8;margin-left:13px}.header-actions{display:flex;align-items:center;gap:15px}.source-link{font:8px 'Press Start 2P',monospace;color:#8ccbd0;text-decoration:none}.source-link:hover{text-decoration:underline}.icon-button{width:36px;height:36px;border:1px solid #607685;border-radius:4px;background:#263b4a;color:#f8e6ba;font-size:20px}.icon-button:hover{background:#38546a}.stage-shell{position:relative;overflow:hidden;border:5px solid #465d6b;box-shadow:0 0 0 4px #071019,0 18px 60px #0008;aspect-ratio:16/9;background:#192c48}.stage-shell canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.hud{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;justify-content:space-between;gap:8px;padding:12px 19px 19px;background:linear-gradient(#09121ded,#09121dbb 65%,transparent);text-shadow:2px 2px #080c14}.hud>div{min-width:80px}.hud-label{display:block;font:7px 'Press Start 2P',monospace;color:#84bbc2;margin-bottom:9px}.hud strong{font:10px 'Press Start 2P',monospace;color:#fff0c2}.hud #lives{color:#fa7567}.message{position:absolute;z-index:3;top:80px;left:50%;transform:translateX(-50%);padding:9px 13px;background:#101923dd;border:2px solid #ffd377;color:#fff;font:9px/1.6 'Press Start 2P',monospace;text-align:center;white-space:nowrap;opacity:0;transition:opacity .18s;pointer-events:none}.message.show{opacity:1}.overlay,.pause-screen{position:absolute;z-index:4;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:linear-gradient(#091524dc,#12233dd9)}.overlay[hidden],.pause-screen[hidden]{display:none}.overlay{padding:14px 25px}.overlay-art{display:flex;gap:7px;margin-bottom:14px}.overlay-art span{display:grid;place-items:center;width:38px;height:43px;border:3px solid #f1d095;box-shadow:4px 4px #0a101b;color:#fff;font:16px 'Press Start 2P',monospace}.overlay-art span:first-child{background:#273c59}.overlay-art span:last-child{background:#b58a80}.eyebrow{font:8px 'Press Start 2P',monospace;color:#93dfcd;margin:0 0 14px}.overlay h1{font:clamp(21px,3.9vw,42px)/1.4 'Press Start 2P',monospace;text-shadow:4px 4px #923f31,8px 8px #151b2c;color:#ffdc79;margin:0}.overlay h1 em{font-style:normal;color:#f37855}.overlay>p:not(.eyebrow):not(.overlay-hint){max-width:530px;font-size:15px;line-height:1.5;color:#e3e9e7;margin:20px 0}.primary-button{min-height:50px;padding:10px 22px;background:#e75d40;border:3px solid #f8c587;border-bottom-width:6px;border-radius:3px;color:white;font:10px 'Press Start 2P',monospace}.primary-button:hover{background:#f5734f;transform:translateY(-2px)}.primary-button:active{transform:translateY(3px);border-bottom-width:3px}.primary-button span{margin-left:14px}.overlay-hint{color:#9cbbc4;font-size:11px;margin:18px 0 0}.pause-screen{gap:14px}.pause-screen strong{font:26px 'Press Start 2P',monospace;color:#ffe17d}.pause-screen span{font-size:14px}.below{display:grid;grid-template-columns:1.4fr 1fr;gap:33px;margin:27px 0 15px}.section-label{font:9px 'Press Start 2P',monospace;color:#8fbbc5;margin-bottom:15px}.section-label span{color:#f6ac68}.level-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.level-card{border:1px solid #3e5667;background:#182633;padding:14px 12px;min-height:100px;color:#9eb4be}.level-card.active{border-color:#e4ae69;background:#283745;color:#f9d893}.level-card.done{border-color:#5b9976;color:#9cdeb1}.level-card>span{display:block;font:10px 'Press Start 2P',monospace;margin-bottom:11px}.level-card strong{display:block;color:#f2f0e8;font-size:15px;line-height:1.1}.level-card small{display:block;margin-top:7px;font-size:11px}.help{border-left:1px solid #344d5b;padding-left:27px}.help>div:not(.section-label){display:flex;align-items:center;gap:5px;padding:5px 0;font-size:11px}.help>div>span:first-child{width:74px;color:#afc1c6;font-size:10px;font-weight:700}.help .or{color:#77949d}.help kbd{display:inline-block;min-width:24px;text-align:center;padding:5px 6px;border:1px solid #546b77;border-bottom-width:3px;border-radius:3px;background:#263b4b;color:#fff;font:8px 'Press Start 2P',monospace}.touch-controls{display:none}footer{border-top:1px solid #344653;padding-top:14px;text-align:center;color:#7895a2;font:7px/1.6 'Press Start 2P',monospace}
@media(max-width:780px){.app{padding:12px 10px}.header{margin-bottom:13px;padding-bottom:10px}.logo{font-size:9px}.logo small{display:none}.stage-shell{border-width:3px}.hud{padding:8px 7px 12px}.hud>div{min-width:0}.hud-label{font-size:5px;margin-bottom:5px}.hud strong{font-size:7px}.message{top:51px;font-size:6px}.overlay-art{margin-bottom:5px}.overlay-art span{width:27px;height:31px;font-size:12px;border-width:2px}.eyebrow{font-size:6px;margin-bottom:7px}.overlay h1{font-size:clamp(15px,4vw,26px)}.overlay>p:not(.eyebrow):not(.overlay-hint){font-size:11px;margin:9px 0}.primary-button{min-height:39px;font-size:8px;padding:7px 13px;border-width:2px;border-bottom-width:4px}.overlay-hint{display:none}.below{display:block;margin:17px 0}.help{display:none}.level-cards{gap:5px}.level-card{min-height:80px;padding:9px 7px}.level-card>span{font-size:7px;margin-bottom:7px}.level-card strong{font-size:11px}.level-card small{font-size:9px}.touch-controls{display:flex;justify-content:space-between;gap:12px;max-width:600px;margin:10px auto 17px}.touch-controls>div{display:flex;gap:8px}.touch-controls button{display:grid;place-items:center;width:55px;height:52px;border:2px solid #708d9d;border-bottom-width:5px;border-radius:5px;background:#2c4759;color:#fff;font-size:21px;touch-action:none}.touch-controls button:hover,.touch-controls button.is-held{background:#416579}.touch-controls .jump{background:#d25f43;border-color:#f3ad75}.touch-controls .jump:hover,.touch-controls .jump.is-held{background:#ec7853}}@media(max-width:420px){.logo{font-size:7px}.icon-button{width:30px;height:30px}.touch-controls button{width:43px;height:45px;font-size:18px}.touch-controls>div{gap:4px}.overlay{padding:9px}.overlay-art{display:none}.overlay>p:not(.eyebrow):not(.overlay-hint){font-size:9px;margin:5px 0}.overlay h1{font-size:14px}.primary-button{min-height:32px;font-size:7px}}
.roster{display:flex;flex-wrap:wrap;align-items:center;gap:7px 15px;margin-top:15px;padding:12px 14px;border:1px solid #3e5667;background:#182633}.roster span{font:8px 'Press Start 2P',monospace;color:#91c4c6}.roster strong{font-size:12px;color:#ffe2a3}.roster small{font-size:11px;color:#9cb4bd}

/* Keep display lettering pixelated; use readable type for game information. */
.logo small,.source-link,.hud-label,.hud strong,.message,.eyebrow,.primary-button,.section-label,.level-card>span,.help kbd,.roster span,footer{font-family:'Space Grotesk',Arial,sans-serif;font-weight:700}
.logo small{font-size:11px}.source-link{font-size:12px}.hud-label{font-size:11px;margin-bottom:5px}.hud strong{font-size:18px;font-variant-numeric:tabular-nums}.message{font-size:13px;line-height:1.3}.eyebrow{font-size:12px}.primary-button{font-size:14px}.section-label{font-size:12px}.level-card>span{font-size:13px}.help kbd{font-size:12px}.roster span{font-size:12px}footer{font-size:11px}
@media(max-width:780px){.source-link{font-size:10px}.hud-label{font-size:9px;margin-bottom:3px}.hud strong{font-size:12px}.message{font-size:11px;top:48px;max-width:calc(100% - 14px);white-space:normal}.eyebrow{font-size:10px}.primary-button{font-size:11px}.section-label{font-size:11px}.level-card>span{font-size:11px}footer{font-size:10px}}
@media(max-width:420px){.overlay>p:not(.eyebrow):not(.overlay-hint){font-size:11px;line-height:1.25}.primary-button{font-size:10px}}

.overlay{background:linear-gradient(#0a1726f2,#142b42ed)}
.overlay-art{align-items:flex-end;gap:26px;margin-bottom:8px}
.overlay-art figure{display:flex;align-items:center;flex-direction:column;gap:2px;margin:0}
.overlay-art span{display:block;width:150px;height:140px;border:0;box-shadow:none;background-color:transparent}
.overlay-art span.intro-javier{background:url('./assets/heroes-small.png') left center / 200% 100% no-repeat}
.overlay-art span.intro-karina{background:url('./assets/heroes-small.png') right center / 200% 100% no-repeat}
.overlay-art figcaption{font:700 12px 'Space Grotesk',Arial,sans-serif;color:#ffe3a6}
.overlay.result .overlay-art{display:none}
@media(max-width:780px){.overlay-art{gap:12px;margin-bottom:2px}.overlay-art span{width:65px;height:57px}.overlay-art figcaption{font-size:10px}}
@media(max-width:420px){.overlay-art{display:flex}.overlay-art span{width:60px;height:52px}.overlay-art figcaption{display:none}}

.mobile-pause{display:none}
.mobile-fullscreen{display:none}
.mobile-fullscreen[hidden]{display:none}
.fullscreen-help[hidden]{display:none}
@media (max-width:780px), (hover:none) and (pointer:coarse){
  html,body{height:100%;overscroll-behavior:none}
  .app{height:100dvh;min-height:0;max-width:none;display:flex;flex-direction:column;overflow:hidden;padding:env(safe-area-inset-top) 0 0}
  .header{flex:none;min-height:49px;margin:0;padding:6px 12px;border-bottom-color:#48606c}
  .header-actions{gap:4px}
  .header-actions .icon-button{width:44px;height:44px}
  .source-link{display:none}
  .mobile-pause{display:none}
  .mobile-fullscreen{display:block}
  body[data-game-state="playing"] .mobile-pause,body[data-game-state="paused"] .mobile-pause{display:block}
  .stage-shell{flex:1;min-height:0;aspect-ratio:auto;border:0;box-shadow:none}
  .stage-shell canvas{width:100%;height:100%}
  .below,footer{display:none}
  .hud{padding:11px 12px 20px;gap:5px}
  .hud-label{font-size:9px;margin-bottom:4px}
  .hud strong{font-size:14px}
  .message{top:68px;max-width:calc(100% - 24px);padding:9px 11px;font-size:13px;white-space:normal}
  .overlay{padding:24px 25px;justify-content:center}
  .overlay-art{gap:18px;margin-bottom:20px}
  .overlay-art span{width:120px;height:112px}
  .overlay-art figcaption{display:block;font-size:12px}
  .eyebrow{font-size:12px;margin-bottom:14px}
  .overlay h1{font-size:clamp(20px,6vw,28px)}
  .overlay>p:not(.eyebrow):not(.overlay-hint){font-size:15px;line-height:1.45;margin:20px 0;max-width:360px}
  .primary-button{min-height:52px;padding:10px 22px;font-size:14px}
  .overlay>p.fullscreen-help:not(.eyebrow):not(.overlay-hint){max-width:320px;color:#c8dcdf;font-size:12px;line-height:1.4;margin:12px 0 0}
  .touch-controls{--control-size:clamp(58px,18vw,76px);display:none;flex:none;grid-template-columns:1fr auto;align-items:end;gap:12px;max-width:none;min-height:156px;margin:0;padding:11px 14px calc(12px + env(safe-area-inset-bottom));background:#14212e;border-top:1px solid #3d5869;touch-action:none;user-select:none;-webkit-user-select:none}
  body[data-game-state="playing"] .touch-controls,body[data-game-state="paused"] .touch-controls{display:grid}
  .touch-controls .move-pad,.touch-controls .action-pad{display:grid;grid-template-columns:repeat(2,var(--control-size));gap:7px;align-items:end}
  .move-pad{height:calc(var(--control-size) + 50px);align-content:end;touch-action:none}
  .touch-controls button{width:var(--control-size);height:var(--control-size);border-radius:8px;border:1px solid #7395a6;border-bottom-width:4px;background:#2c4c5d;box-shadow:0 3px 0 #0b1822;font-size:27px;touch-action:none;-webkit-tap-highlight-color:transparent}
  .touch-controls button.is-held{transform:translateY(3px);box-shadow:none;background:#426a7b}
  .action-pad{grid-template-rows:42px var(--control-size)}
  .touch-controls .minor-action{height:42px;display:flex;flex-direction:column;gap:0;background:#273b48;border-color:#5c7582;font-size:19px}
  .touch-controls button span{display:block;font:700 9px 'Space Grotesk',Arial,sans-serif;letter-spacing:0}
  .touch-controls .attack{background:#43827b;border-color:#87cec1}
  .touch-controls .jump{background:#d66b4b;border-color:#ffb17a}
  .touch-controls .attack.is-held{background:#56a098}
  .touch-controls .jump.is-held{background:#ee8260}
  .pause-screen strong{font-size:24px}
}
@media (max-width:780px) and (orientation:landscape), (hover:none) and (pointer:coarse) and (orientation:landscape){
  .app{position:relative;padding:0}
  .header{position:absolute;z-index:5;top:0;left:0;right:0;min-height:48px;padding:2px max(12px,env(safe-area-inset-right)) 2px max(12px,env(safe-area-inset-left));background:#101722c9;border:0}
  .stage-shell{width:100%;height:100%}
  .touch-controls{position:absolute;z-index:5;left:0;right:0;bottom:0;min-height:0;padding:8px calc(14px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));background:transparent;border:0;pointer-events:none}
  .touch-controls button,.move-pad{pointer-events:auto}
  .move-pad{height:auto}
  .hud{top:48px;padding:5px max(12px,env(safe-area-inset-right)) 20px max(12px,env(safe-area-inset-left))}
  .message{top:90px}
  .overlay-art span{width:64px;height:58px}
  .overlay-art{margin-bottom:4px}
  .overlay>p:not(.eyebrow):not(.overlay-hint){font-size:12px;margin:8px 0}
  .overlay h1{font-size:22px}
}
.stage-shell canvas{image-rendering:auto}
.rotate-prompt{position:absolute;z-index:6;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:24px;text-align:center;background:#102033}
.rotate-prompt[hidden]{display:none}
.rotate-phone{position:relative;width:48px;height:78px;margin:8px 0 20px;border:4px solid #ffe09b;border-radius:9px;box-shadow:0 0 0 5px #385667;animation:rotate-phone 1.1s ease-out both}
.rotate-phone::after{content:'';position:absolute;inset:7px 4px 11px;border:2px solid #85c9c8;border-radius:3px}
.rotate-prompt h2{margin:0;color:#ffe09b;font:19px/1.4 'Press Start 2P',monospace}
.rotate-prompt p{max-width:310px;margin:0;color:#d7e4df;font-size:15px;line-height:1.45}
.rotate-back{min-height:44px;padding:8px 18px;border:0;background:transparent;color:#9cc7cb;font-size:13px;font-weight:700}
.rotate-back:hover{color:#fff}
@keyframes rotate-phone{from{transform:rotate(0)}to{transform:rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(90deg)}}
@media(max-width:420px){.rotate-prompt h2{font-size:16px}.rotate-prompt p{font-size:14px}.rotate-prompt .primary-button{font-size:11px}}
@media (max-width:780px), (hover:none) and (pointer:coarse){
  html,body,.app,.stage-shell{touch-action:manipulation}
  body[data-game-state="playing"] .app{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  body[data-game-state="playing"] .hud{pointer-events:none}
  .stage-shell canvas{touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none}
}
.mobile-controls{display:none}
@media (max-width:780px), (hover:none) and (pointer:coarse){
  body[data-game-state="playing"] .mobile-controls{display:flex}
  .mobile-controls{--control-size:clamp(50px,14vw,62px);flex:none;align-items:center;justify-content:space-between;gap:8px;min-height:calc(var(--control-size) + 26px + env(safe-area-inset-bottom));padding:8px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:#101c26;border-top:1px solid #45616c;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  .movement-controls,.action-controls{display:flex;align-items:center;gap:5px}
  .secondary-controls{display:flex;flex-direction:column;gap:4px}
  .mobile-controls button{display:flex;flex:none;align-items:center;justify-content:center;flex-direction:column;width:var(--control-size);height:var(--control-size);padding:0;border:2px solid #8daab1;border-radius:50%;background:#2f5060;color:#fff;box-shadow:0 3px 0 #07131c;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;line-height:1}
  .mobile-controls button span{font-size:25px;line-height:1}
  .mobile-controls button small{font:700 9px/1 'Space Grotesk',Arial,sans-serif;margin-top:3px}
  .mobile-controls .secondary-controls button{width:48px;height:calc((var(--control-size) - 4px)/2);border-radius:5px;background:#30444e;border-color:#6f929d}
  .mobile-controls .secondary-controls span{font-size:16px}
  .mobile-controls .secondary-controls small{font-size:8px;margin-top:0}
  .mobile-controls .attack-control{background:#b73339;border-color:#ffd0bc}
  .mobile-controls .jump-control{background:#16806e;border-color:#b8f2d6}
  .mobile-controls button.is-held{transform:translateY(2px);box-shadow:0 1px 0 #07131c;filter:brightness(1.25)}
}
@media (max-width:780px) and (orientation:landscape), (hover:none) and (pointer:coarse) and (orientation:landscape){
  .stage-shell{height:auto;flex:1;min-height:0}
  .mobile-controls{position:relative;z-index:5}
}
@media (max-width:350px){
  .mobile-controls{gap:4px;padding-left:7px;padding-right:7px}
  .movement-controls,.action-controls{gap:3px}
  .mobile-controls .secondary-controls button{width:40px}
  .mobile-controls .secondary-controls small{font-size:7px}
}
@media (max-width:780px), (hover:none) and (pointer:coarse){
  .app{position:relative;padding:0}
  .stage-shell{position:absolute;inset:0;width:100%;height:100%;flex:none}
  .header{position:absolute;z-index:7;top:0;left:0;right:0;min-height:0;margin:0;padding:calc(4px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));justify-content:flex-end;background:none;border:0;pointer-events:none}
  .header .logo{display:none}
  .header-actions{pointer-events:auto}
  .header-actions .icon-button{width:42px;height:42px;background:#10233399;border-color:#bad2d080;color:#fff7dd;backdrop-filter:blur(3px)}
  .hud{top:calc(48px + env(safe-area-inset-top));padding:5px max(10px,env(safe-area-inset-right)) 18px max(10px,env(safe-area-inset-left));background:linear-gradient(#09121d99,#09121d00);pointer-events:none}
  .message{top:calc(94px + env(safe-area-inset-top))}
  .mobile-controls{position:absolute;z-index:5;left:0;right:0;bottom:0;min-height:0;padding:8px max(10px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:none;border:0;pointer-events:none}
  .movement-controls,.action-controls,.secondary-controls{pointer-events:none}
  .movement-controls{gap:12px}
  .mobile-controls .movement-controls button{width:clamp(58px,16vw,70px);height:clamp(58px,16vw,70px)}
  .mobile-controls .movement-controls button span{font-size:28px}
  .mobile-controls button{pointer-events:auto;background:#19374666;border-color:#e2f0ed88;box-shadow:0 2px 8px #07131c55;color:#fff}
  .mobile-controls .attack-control{background:#ad2939d9;border-color:#ffe0d2}
  .mobile-controls .jump-control{background:#137c6bd9;border-color:#bcf7df}
  .mobile-controls .secondary-controls button{height:44px;background:#286180df;border-color:#b4e8f5}
  .mobile-controls .secondary-controls button[data-control="ability"]{background:#92701cdd;border-color:#ffe39a}
  .mobile-controls button.is-held{background:#426a7bcc;filter:brightness(1.2)}
  .mobile-controls .attack-control.is-held{background:#d9424dea}
  .mobile-controls .jump-control.is-held{background:#20a58deb}
  .mobile-controls .secondary-controls button[data-control="switch"].is-held{background:#397fa4ef}
  .mobile-controls .secondary-controls button[data-control="ability"].is-held{background:#b99227ef}
}
body[data-game-state="playing"],body[data-game-state="playing"] .stage-shell,body[data-game-state="playing"] .mobile-controls{touch-action:none}
.social-actions{display:flex;justify-content:center;gap:10px;margin-top:10px}
.ranking-preview{max-width:90%;margin:7px 0 0!important;color:#ffe5aa!important;font:700 11px/1.3 'Space Grotesk',Arial,sans-serif!important;text-align:center}
body:not([data-game-state="menu"]) .ranking-preview{display:none}
.level2-start{min-height:34px;margin-top:7px;padding:6px 12px;border:1px solid #f0cf91;border-radius:3px;background:#284a53;color:#ffe5ad;font:700 12px 'Space Grotesk',Arial,sans-serif}
.level-shortcuts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.level2-start[hidden],body:not([data-game-state="menu"]) .level2-start{display:none}
.level2-start:hover{background:#3d6871}
.level-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.social-actions button,.ranking-panel button{min-height:36px;padding:7px 12px;border:1px solid #90c6c0;border-radius:3px;background:#163947;color:#f3f7e8;font:700 12px 'Space Grotesk',Arial,sans-serif}
.score-entry button{min-height:36px;padding:7px 12px;border:1px solid #f6c886;border-radius:3px;background:#9b4935;color:#fff7e7;font:700 12px 'Space Grotesk',Arial,sans-serif}
.score-entry button:hover{background:#be5b3f}
.social-actions button:hover,.ranking-panel button:hover{background:#256070}
.share-status{min-height:16px;margin:5px 0 0!important;font-size:11px!important;color:#aee5d4!important}
.ranking-panel{position:absolute;z-index:6;inset:5%;overflow:auto;padding:16px 22px;background:#102434f7;border:2px solid #78aeb1;box-shadow:0 12px 35px #0009;text-align:left;color:#fff}
.overlay:has(.ranking-panel:not([hidden])){z-index:8}
.ranking-panel[hidden],#scoreForm[hidden]{display:none}
.ranking-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #638b91;padding-bottom:8px}
.ranking-head strong{font-size:17px;color:#ffe18f}
.ranking-head button{min-width:36px;font-size:23px;line-height:1;padding:2px}
#scoreForm{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin-top:12px}
#scoreForm:not([hidden]){width:min(450px,100%);margin:7px auto 0}
#scoreForm label{width:100%;font-size:11px;font-weight:700;color:#a7d7d0}
#scoreForm input{flex:1;min-width:130px;min-height:36px;padding:7px 9px;border:1px solid #86b8b8;border-radius:3px;background:#f5f7ef;color:#102434;font:600 14px 'Space Grotesk',Arial,sans-serif}
#scoreForm button:disabled{opacity:.55;cursor:wait}
#rankingStatus{margin:10px 0;color:#c5d9d8;font-size:12px}
#rankingStatus:empty{display:none}
.overlay:not(.result):not(:has(.ranking-panel:not([hidden]))) .ranking-status{display:none}
#rankingList{margin:0;padding:0;list-style:none;counter-reset:rank;max-width:540px}
#rankingList li{display:flex;justify-content:space-between;gap:14px;padding:6px 2px;border-bottom:1px solid #486471;font-size:13px}
#rankingList li strong{color:#ffe18f;font-variant-numeric:tabular-nums}
@media(max-width:780px){.ranking-panel{inset:4%;padding:10px 12px}.ranking-head strong{font-size:14px}.social-actions{margin-top:6px}.social-actions button{font-size:11px;min-height:32px}.ranking-preview{font-size:9px!important;margin-top:4px!important}}
.story-source{display:inline-block;margin:0 0 12px;color:#9ed9d4;font:700 10px/1.3 'Space Grotesk',Arial,sans-serif;text-decoration:underline;text-underline-offset:3px}
.duo-selector{display:grid;gap:6px;width:min(580px,100%);margin:1px 0 12px;text-align:left}
.duo-selector[hidden]{display:none}
.duo-slot{display:flex;align-items:center;gap:9px}
.duo-slot>strong{flex:0 0 105px;color:#f8d68b;font:700 10px 'Space Grotesk',Arial,sans-serif}
.duo-avatar{display:block;flex:0 0 54px;width:54px;height:56px;border:2px solid #d6bb84;border-radius:3px;background-color:#244353;box-shadow:2px 2px #0a1520}
.duo-avatar-javier{background-image:url('./assets/heroes-small.png');background-position:left center;background-size:200% 100%}
.duo-avatar-karina{background-image:url('./assets/heroes-small.png');background-position:right center;background-size:200% 100%}
.duo-avatar-patricia{background-image:url('./assets/patricia-small.png');background-position:center center;background-size:contain;background-repeat:no-repeat}
.duo-avatar-toto{background-image:url('./assets/toto-animated-small.png');background-position:left center;background-size:400% 100%}
.duo-avatar-sturzenegger{background-image:url('./assets/sturzenegger-animated-small.png');background-position:left center;background-size:400% 100%}
.notice-page{max-width:760px;margin:0 auto;padding:34px 20px 64px;color:#e3e9e7;line-height:1.65}
.notice-page h1{font-size:36px;line-height:1.2;color:#ffe186}
.notice-page h2{font-size:19px;margin:34px 0 8px;color:#93dfcd}
.notice-page p{margin:10px 0;font-size:16px}
.notice-page a{color:#8ccbd0}
.notice-back{display:inline-block;min-height:44px;padding:10px 0;font-size:13px;font-weight:700;text-decoration:none}
@media(max-width:520px){.notice-page h1{font-size:28px}}
.duo-options{display:flex;gap:5px;min-width:0}
.duo-options button{min-height:36px;padding:5px 9px;border:1px solid #779fa3;border-radius:3px;background:#173542;color:#e2eeee;font:700 11px 'Space Grotesk',Arial,sans-serif}
.duo-options button strong,.duo-options button small{display:block;white-space:normal}
.duo-options button small{margin-top:3px;color:#c8e6e2;font-size:10px;line-height:1.2}
.duo-options button:hover:not(:disabled){background:#32677a}
.duo-options button[aria-pressed="true"]{border-color:#ffe195;background:#936044;color:#fff4cd}
.duo-options button:disabled{opacity:.42;cursor:default}
@media(max-width:780px){.duo-selector{gap:3px;margin-bottom:5px}.duo-slot>strong{flex-basis:83px;font-size:8px}.duo-avatar{flex-basis:42px;width:42px;height:44px}.duo-options button{min-height:30px;padding:3px 6px;font-size:9px}}
@media(max-width:780px){.duo-options button small{font-size:9px}.level-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.story-source[hidden],.story-boss[hidden]{display:none}
.story-source:hover{color:#fff0b3}
.overlay.story-intro{background:#08111cef}
.story-intro .overlay-art,.story-intro .social-actions,.story-intro .ranking-preview,.story-intro .share-status,.story-intro .fullscreen-help,.story-intro .level2-start{display:none}
.story-intro .eyebrow{color:#e8be72;letter-spacing:0}
.story-intro h1{max-width:90%;color:#ffe296;font-size:clamp(20px,3vw,32px);line-height:1.5;animation:story-rise .65s ease-out both}
.story-intro #overlayBody{max-width:590px;color:#f3dfaf;font-size:clamp(15px,1.7vw,22px);font-weight:700;line-height:1.5;animation:story-rise .8s .2s ease-out both}
.story-intro .story-source{animation:story-rise .8s .35s ease-out both}
.overlay.result .overlay-art{display:none}
.overlay.result #overlayBody{max-width:600px;margin:14px 0;color:#f4dfb5;font-size:16px;line-height:1.45}
.overlay.result h1{font-size:clamp(21px,3.4vw,35px)}
.overlay.result{overflow-y:auto;justify-content:flex-start;padding-top:12px;padding-bottom:12px}
.overlay.result .ranking-preview{margin:4px 0!important}
.overlay.result #rankingStatus{margin:3px 0}
.story-boss{position:relative;display:grid;place-items:center;width:96px;height:105px;margin:0 0 10px;overflow:hidden;border:5px solid #9da8aa;background:#26313c;box-shadow:4px 5px #080e17}
.story-boss img{width:91px;height:102px;object-fit:contain;object-position:center bottom;image-rendering:pixelated}
.story-bars{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 13px,#d6d9d1 13px 16px,#34434e 16px 20px);border-top:5px solid #d6d9d1;border-bottom:5px solid #34434e;pointer-events:none}
footer a{color:#9ed9d4;text-decoration:none}
footer a:hover{text-decoration:underline;color:#ffe296}
@keyframes story-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.story-intro h1,.story-intro #overlayBody,.story-intro .story-source{animation:none}}
@media(max-width:780px){.story-intro h1{font-size:clamp(17px,4vw,25px)}.story-intro #overlayBody{font-size:13px;margin:9px 0!important;max-width:470px}.story-source{font-size:9px;margin-bottom:7px}.overlay.result #overlayBody{font-size:12px;margin:7px 0}.overlay.result .story-boss{width:60px;height:62px;margin-bottom:5px;border-width:3px}.overlay.result .story-boss img{width:57px;height:58px}.overlay.result .story-bars{background:repeating-linear-gradient(90deg,transparent 0 8px,#d6d9d1 8px 10px,#34434e 10px 12px);border-width:3px}}
@media(max-width:780px) and (orientation:landscape){.overlay.result{padding:5px 12px;gap:2px}.overlay.result .eyebrow{margin:0}.overlay.result h1{font-size:17px}.overlay.result #overlayBody{font-size:10px;line-height:1.2;margin:2px 0}.overlay.result .story-boss{display:none}.overlay.result .story-source{font-size:8px;margin:0}.overlay.result .primary-button{min-height:30px}.overlay.result .social-actions{margin:0}.overlay.result .social-actions button{min-height:27px;padding:3px 8px}.overlay.result #scoreForm{margin:1px auto 0}.overlay.result #scoreForm label{font-size:9px}.overlay.result #scoreForm input,.overlay.result #scoreForm button{min-height:28px;padding:3px 7px;font-size:11px}}
.message.enemy-intro{top:50%;max-width:calc(100% - 36px);width:max-content;min-width:300px;transform:translate(-50%,-50%);padding:17px 22px;border:3px solid #ffe099;background:#101923ee;box-shadow:0 12px 38px #050b14aa;color:#ffe69f;font:20px/1.45 'Press Start 2P',monospace;white-space:normal}
@media(max-width:780px){.message.enemy-intro{top:49%;min-width:0;max-width:calc(100% - 70px);padding:12px 16px;font-size:13px;line-height:1.5}}
@media(max-width:780px) and (orientation:landscape), (hover:none) and (pointer:coarse) and (orientation:landscape){
  .header{min-height:0;height:0;padding:0;background:none;box-shadow:none}
  .header-actions{position:absolute;inset:0;pointer-events:none}
  .header-actions .icon-button{width:40px;height:40px;border-color:#b9d0cb77;background:#10233377;pointer-events:auto}
  #mute{display:none}
  #fullscreen{position:absolute;top:calc(4px + env(safe-area-inset-top));right:max(7px,env(safe-area-inset-right))}
  body[data-game-state="playing"] #fullscreen,body[data-game-state="paused"] #fullscreen{display:none}
  #mobilePause{position:absolute;top:calc(4px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);opacity:.75}
  body[data-game-state="paused"] #mobilePause{display:none}
  .hud{top:env(safe-area-inset-top);padding:6px max(10px,env(safe-area-inset-right)) 16px max(10px,env(safe-area-inset-left))}
}
.social-actions{flex-wrap:wrap}
.ideas-panel{margin:28px 0 0;padding:22px 0 28px;border-top:1px solid #638b91;border-bottom:1px solid #344653;text-align:left;color:#fff}
.ideas-panel[hidden],#ideaForm[hidden]{display:none}
.ideas-panel .ranking-head{max-width:900px}
.ideas-panel #ideasClose{display:none}
.ideas-list,#ideaForm{max-width:900px}
.ideas-panel button{min-height:36px;padding:7px 12px;border:1px solid #90c6c0;border-radius:3px;background:#163947;color:#f3f7e8;font:700 12px 'Space Grotesk',Arial,sans-serif}
.ideas-panel button:hover:not(:disabled){background:#256070}
.ideas-panel button:disabled{opacity:.62;cursor:default}
.ideas-intro{max-width:670px!important;margin:10px 0!important;color:#c5d9d8!important;font-size:13px!important;line-height:1.4!important}
#ideasStatus{min-height:18px;margin:7px 0;color:#ffe4a0;font-size:12px}
.idea-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 0;border-top:1px solid #41606c}
.idea-row h3{margin:0 0 5px;color:#fff0bc;font-size:15px}
.idea-row p{margin:0;color:#d2e1df;font-size:12px;line-height:1.4}
.idea-row .idea-vote{flex:none;min-width:116px;border-color:#e1c783;background:#5b4b24;color:#fff0bc}
.idea-row .idea-vote:hover:not(:disabled){background:#79632e}
#ideaForm{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:end;margin-top:14px;padding-top:12px;border-top:1px solid #68898b}
#ideaForm strong,#ideaForm label,#ideaForm textarea{grid-column:1/-1}
#ideaForm strong{color:#ffe18f;font-size:14px}
#ideaForm label{font-size:11px;font-weight:700;color:#a7d7d0}
#ideaForm input,#ideaForm textarea{width:100%;min-height:36px;padding:8px 9px;border:1px solid #86b8b8;border-radius:3px;background:#f5f7ef;color:#102434;font:600 14px 'Space Grotesk',Arial,sans-serif}
#ideaForm textarea{resize:vertical}
@media(max-width:780px), (hover:none) and (pointer:coarse){
  .ideas-panel{position:fixed;z-index:20;inset:0;overflow:auto;margin:0;padding:calc(16px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));border:0;background:#102434;color:#fff}
  .ideas-panel #ideasClose{display:block}
  .ideas-panel .ranking-head{position:sticky;top:0;z-index:1;background:#102434}
  .ideas-intro{font-size:12px!important}
  .idea-row{gap:8px}
  .idea-row h3{font-size:13px}
  .idea-row p{font-size:11px}
  .idea-row .idea-vote{min-width:82px;padding:6px;font-size:10px}
  #ideaForm{grid-template-columns:1fr}
  #ideaForm input,#ideaForm button{grid-column:1/-1}
}
.decision-panel{position:absolute;z-index:9;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:auto;padding:24px 32px;background:#091523f4;color:#f3eee0;text-align:center}
.decision-panel[hidden]{display:none}
.decision-panel .eyebrow{margin:0;color:#f2c278}
.decision-panel h2{margin:0;color:#ffe2a4;font:700 26px/1.15 'Space Grotesk',Arial,sans-serif}
.decision-panel>p:not(.eyebrow){max-width:660px;margin:0;font-size:15px;line-height:1.45}
.decision-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(680px,100%)}
.decision-choices button{min-height:78px;padding:12px 15px;border:2px solid #86abae;border-radius:3px;background:#183849;color:#f3eee0;text-align:left}
.decision-choices button:hover,.decision-choices button:focus-visible{background:#255568;border-color:#f2ce8e}
.decision-choices strong,.decision-choices small{display:block}
.decision-choices strong{color:#ffe2a4;font-size:14px}
.decision-choices small{margin-top:5px;color:#c5d9d8;font-size:12px;line-height:1.35}
.decision-sources{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}
.decision-sources a{color:#9ed9d4;font-size:11px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:780px), (hover:none) and (pointer:coarse){
  .decision-panel{gap:8px;padding:48px 18px 14px}
  .decision-panel h2{font-size:19px}
  .decision-panel>p:not(.eyebrow){font-size:12px;line-height:1.35}
  .decision-choices{gap:8px}
  .decision-choices button{min-height:66px;padding:8px 10px}
  .decision-choices strong{font-size:11px}
  .decision-choices small{font-size:10px}
  .decision-sources a{font-size:10px}
}
@media(max-width:520px) and (orientation:portrait){.decision-choices{grid-template-columns:1fr}}

.below{display:block}
.controls-menu{position:relative}
.controls-trigger{min-height:36px;padding:0 12px;border:1px solid #607685;border-radius:4px;background:#263b4a;color:#f8e6ba;font:700 12px 'Space Grotesk',Arial,sans-serif}
.controls-trigger:hover,.controls-trigger[aria-expanded="true"]{background:#38546a;border-color:#a6c9c7}
.header.is-controls-open{position:relative;z-index:11}
.controls-scrim{position:fixed;z-index:10;inset:0;background:#07121b55;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.controls-scrim[hidden],.controls-popover[hidden]{display:none}
.controls-popover{position:absolute;z-index:12;top:calc(100% + 12px);right:0;width:350px;max-width:calc(100vw - 28px);padding:16px;border:1px solid #8ab0b5;border-radius:5px;background:#142a38;box-shadow:0 18px 48px #030b14b8}
.controls-popover-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#ffe2a4;font-size:13px}
.controls-popover-head button{width:30px;height:30px;border:1px solid #688491;border-radius:3px;background:#254352;color:#fff;font-size:22px;line-height:1}
.controls-popover-head button:hover{background:#386071}
.controls-popover .help{display:block;padding:0;border:0}
.controls-popover .help>div{display:flex;align-items:center;gap:5px;padding:7px 0;border-top:1px solid #365361;font-size:11px}
.controls-popover .help>div>span:first-child{width:76px;flex:none}
.controls-popover .help .or{white-space:nowrap}
@media(max-width:780px),(hover:none) and (pointer:coarse){.controls-menu,.controls-scrim{display:none}}