@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');
:root { --ink:#226c2b; --paper:#f3f0e8; --lime:#d8ff27; --lime-dark:#a9cf16; --orange:#ffc400; --muted:#a5a59d; --line:rgba(243,240,232,.18); }
* { box-sizing:border-box; }
html { background:var(--ink); }
body { margin:0; min-height:100svh; color:var(--paper); background:radial-gradient(circle at 15% 10%,rgba(216,255,39,.08),transparent 26rem),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),var(--ink); background-size:auto,28px 28px,28px 28px,auto; font-family:"Space Mono",monospace; overscroll-behavior:none; }
button,a { -webkit-tap-highlight-color:transparent; } button { font:inherit; }
.app-shell { width:min(100% - 28px,1100px); margin:0 auto; padding:24px 0 18px; }
.brand-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.brand { display:flex; gap:10px; align-items:center; color:var(--paper); text-decoration:none; font:22px/1 "Archivo Black",sans-serif; letter-spacing:-.04em; }
.brand em { color:var(--lime); font:10px/1 "Space Mono",monospace; letter-spacing:.12em; border:1px solid var(--lime); padding:5px 7px; transform:rotate(-2deg); }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; color:var(--ink); background:var(--lime); border-radius:50%; font-size:18px; }
.header-actions { display:flex; gap:7px; }
.icon-button { color:var(--paper); background:transparent; border:1px solid var(--line); padding:9px 12px; font-size:10px; font-weight:700; cursor:pointer; }
.icon-button:hover,.icon-button[aria-pressed="true"] { border-color:var(--lime); color:var(--lime); }
.game-card { border:1px solid var(--line); background:rgba(47,130,56,.88); box-shadow:0 30px 90px rgba(0,0,0,.45); }
.game-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:20px 24px 18px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 5px; color:var(--muted); font-size:9px; letter-spacing:.16em; }
h1 { margin:0; font:clamp(38px,7vw,72px)/.85 "Archivo Black",sans-serif; letter-spacing:-.07em; }.accent{color:var(--lime)}
.scoreboard { display:flex; gap:clamp(18px,4vw,50px); }.scoreboard div{display:grid;gap:2px}.scoreboard span{color:var(--muted);font-size:9px;letter-spacing:.12em}.scoreboard strong{font-size:clamp(19px,3.5vw,32px);line-height:1}
.game-stage { position:relative; width:100%; aspect-ratio:9/5; overflow:hidden; background:#2f8238; touch-action:none; }
canvas { display:block; width:100%; height:100%; }
.scanline { position:absolute; inset:0; pointer-events:none; opacity:.14; background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(0,0,0,.35) 5px); mix-blend-mode:multiply; }
.overlay { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; text-align:center; padding:24px; background:rgba(34,108,43,.82); backdrop-filter:blur(7px); opacity:0; visibility:hidden; transform:scale(1.02); transition:.2s ease; z-index:4; }
.overlay.is-visible { opacity:1; visibility:visible; transform:none; }
.runner-badge { display:grid; place-items:center; width:76px; height:76px; border-radius:50%; background:var(--lime); box-shadow:7px 7px 0 var(--lime-dark); overflow:hidden; }
.runner-badge img { width:100%; height:100%; object-fit:cover; clip-path:circle(49% at 50% 50%); }
.overlay-kicker { color:var(--lime); margin:18px 0 8px; font-size:10px; font-weight:700; letter-spacing:.2em; }
.overlay h2 { margin:0 0 24px; font:clamp(24px,5vw,46px)/1.03 "Archivo Black",sans-serif; letter-spacing:-.05em; }
.primary-button { min-width:190px; display:flex; align-items:center; justify-content:space-between; gap:24px; border:0; padding:16px 18px; color:var(--ink); background:var(--lime); font-weight:700; cursor:pointer; box-shadow:6px 6px 0 var(--lime-dark); }
.controls-hint { margin:22px 0 0; color:var(--muted); font-size:8px; letter-spacing:.14em; }.record-message{margin:-14px 0 24px;color:var(--muted);font-size:10px;letter-spacing:.12em}
.pause-button { position:absolute; z-index:3; right:12px; top:12px; width:38px; height:38px; border:1px solid var(--line); color:var(--paper); background:rgba(34,108,43,.6); cursor:pointer; opacity:0; pointer-events:none; }
.game-stage.is-playing .pause-button { opacity:1; pointer-events:auto; }
.jump-button { position:absolute; z-index:3; right:18px; bottom:18px; display:none; align-items:center; gap:8px; border:1px solid rgba(34,108,43,.25); border-radius:999px; color:var(--ink); background:var(--lime); padding:12px 16px; font-weight:700; box-shadow:4px 4px 0 var(--lime-dark); }
.jump-button span { font-size:22px; }.jump-button b{font-size:10px;letter-spacing:.08em}
.glide-button { position:absolute; z-index:3; left:18px; bottom:18px; display:flex; align-items:center; gap:9px; min-width:118px; border:1px solid rgba(243,240,232,.35); border-radius:999px; color:var(--paper); background:rgba(69,149,77,.88); padding:9px 13px; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s,transform .12s,border-color .12s; }
.game-stage.is-playing .glide-button { opacity:1; pointer-events:auto; }
.glide-button.is-active { color:var(--ink); background:var(--lime); border-color:var(--lime); transform:translateY(-2px); }
.glide-button.is-empty { opacity:.38!important; }
.glide-icon { font-size:18px; }.glide-copy{display:grid;gap:5px;flex:1;text-align:left}.glide-copy b{font-size:9px;letter-spacing:.1em}.glide-copy i{display:block;width:100%;height:3px;background:rgba(165,165,157,.35);overflow:hidden}.glide-copy u{display:block;width:100%;height:100%;background:var(--lime);text-decoration:none;transform-origin:left center}.glide-button.is-active .glide-copy i{background:rgba(34,108,43,.25)}.glide-button.is-active .glide-copy u{background:var(--ink)}
footer { display:flex; justify-content:space-between; gap:12px; padding:14px 2px 0; color:#6f706b; font-size:8px; letter-spacing:.1em; }.footer-status{color:var(--lime)}.footer-status i{display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
@media(max-width:700px){.app-shell{width:min(100% - 18px,560px);padding-top:14px}.game-heading{padding:15px;align-items:center}.scoreboard{gap:13px}.scoreboard div:nth-child(3){display:none}.game-stage{aspect-ratio:4/3}.jump-button{display:flex}.glide-button{left:12px;bottom:12px;min-width:105px;padding:8px 11px}.jump-button{right:12px;bottom:12px}.overlay h2{font-size:clamp(23px,7vw,38px)}footer span:first-child{display:none}}
@media(max-width:420px){.brand em{display:none}.scoreboard strong{font-size:17px}.scoreboard span{font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}}

/* JUMBOOO official site palette */
html{background:#226c2b}body{background:radial-gradient(circle at 15% 10%,rgba(216,255,39,.10),transparent 26rem),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),#226c2b;background-size:auto,28px 28px,28px 28px,auto}.game-card{background:rgba(47,130,56,.94);box-shadow:0 30px 90px rgba(20,70,28,.36)}

/* High-contrast playfield: black screen framed by JUMBOOO green */
.game-stage{background:#070b08!important;border:2px solid rgba(216,255,39,.28)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 18px 55px rgba(10,42,17,.42)!important}.scanline{opacity:.11!important}

footer,footer .footer-status{color:#fff!important}