@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{color-scheme:dark;--bg:#12131a;--panel:#20222d;--ink:#f5f2e9;--muted:#a5a5ae;--lime:#c9f363;--pink:#fa91aa;--line:#41434c}
*{box-sizing:border-box}
html{min-width:320px;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}
button{font:inherit}
.page{max-width:1240px;margin:auto;padding:0 42px}
.topbar{height:92px;display:flex;align-items:center;border-bottom:1px solid #33343c;gap:10px}
.brand-mark{color:var(--lime);font-size:34px;line-height:1;transform:rotate(-18deg)}
.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.06em;font-size:22px}
.brand-dot,.period{color:var(--lime)}
.top-note{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.16em;color:#b9b9bd}
.intro{padding:77px 0 47px;position:relative}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--lime);font-size:11px;letter-spacing:.2em;font-weight:800;margin:0 0 28px}
.live-dot{width:8px;height:8px;background:var(--lime);border-radius:50%;box-shadow:0 0 16px var(--lime)}
h1{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.095em;font-size:clamp(82px,12vw,166px);line-height:.78;margin:0}
h1>span:not(.period){color:var(--lime)}
.lead{font-size:17px;line-height:1.6;color:#c6c4c4;max-width:500px;margin:42px 0 0}
.game-wrap{border:1px solid var(--line);border-radius:17px;background:var(--panel);overflow:hidden;box-shadow:0 25px 80px #0004}
.game-top,.game-bottom{height:64px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.game-top{border-bottom:1px solid var(--line)}
.game-rivals{display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.rival{padding:4px 8px;border-radius:999px;letter-spacing:.05em;color:#1c1e23}
.rival-frog{background:#78c882}.rival-rat{background:#b4b3c7}.rival-pig{background:#f3a6b7}
.game-bottom{border-top:1px solid var(--line)}
.game-label,.score,.game-bottom{font-size:11px;letter-spacing:.14em;font-weight:800}
.game-label{display:flex;align-items:center;gap:11px}
.game-label-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--bg);font-size:18px}
.score{color:var(--muted);display:flex;gap:12px;align-items:center}
.score strong{font-family:'Space Grotesk',sans-serif;color:var(--lime);font-size:24px;letter-spacing:0;min-width:45px;text-align:right}
.canvas-wrap{position:relative;width:100%;min-width:0;touch-action:manipulation;cursor:pointer;aspect-ratio:1000/360;min-height:220px;background:#dceac4}
canvas{display:block;width:100%;height:100%}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#151722b8;text-align:center;gap:8px;transition:opacity .18s}
.overlay.hidden{opacity:0;pointer-events:none}
.game-shout{position:absolute;z-index:1;top:17px;left:50%;transform:translate(-50%,-8px);color:#20222d;background:var(--lime);border-radius:999px;padding:7px 13px;font-size:11px;font-weight:800;letter-spacing:.08em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.game-shout.visible{opacity:1;transform:translate(-50%,0)}
.overlay-kicker{color:var(--lime);font-size:11px;letter-spacing:.17em;font-weight:800}
.overlay strong{font-family:'Space Grotesk',sans-serif;font-size:clamp(36px,6vw,65px);letter-spacing:-.07em;line-height:1}
.overlay-hint{color:#ddd;font-size:14px;margin:2px 0 13px}
.overlay button,.game-bottom button{border:0;background:var(--lime);color:#14171a;border-radius:8px;font-weight:800;letter-spacing:.05em;cursor:pointer;transition:transform .15s,background .15s}
.overlay button{padding:13px 20px;font-size:12px}
.overlay button span{font-size:18px;margin-left:15px}
.overlay button:hover,.game-bottom button:hover{background:#ddff90;transform:translateY(-2px)}
.game-bottom{color:var(--muted)}
.game-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
kbd{font:inherit;color:var(--ink);border:1px solid #666;border-radius:4px;padding:3px 6px}
.game-bottom button{min-height:44px;padding:9px 14px;font-size:11px;touch-action:manipulation}
.game-bottom button span{font-size:16px;margin-left:8px}
.game-bottom #soundButton{background:transparent;color:var(--ink);border:1px solid #747680;font-size:10px;padding:8px 11px}
.game-bottom #soundButton:hover{background:#343642;transform:none}
footer{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:51px 0 55px}
footer p{margin:0;font-size:11px;letter-spacing:.15em;font-weight:800}
.community{color:var(--muted)}
.community span{display:block;font-family:'Space Grotesk',sans-serif;color:var(--ink);font-size:clamp(26px,4vw,43px);letter-spacing:-.06em;margin-top:7px}
.credit{color:var(--muted);white-space:nowrap}
.credit span{color:var(--lime);font-size:19px;margin-left:9px}
@media(max-width:700px){.page{padding:0 19px}.topbar{height:72px}.brand{font-size:19px}.top-note{display:none}.intro{padding:65px 0 37px}.eyebrow{font-size:9px;letter-spacing:.13em;margin-bottom:24px}h1{font-size:clamp(71px,16vw,112px)}.lead{font-size:15px;margin-top:30px}.game-top,.game-bottom{min-height:55px;height:auto;padding:8px 13px}.game-label,.score,.game-bottom{font-size:9px;letter-spacing:.06em}.game-label-icon{width:22px;height:22px}.canvas-wrap{aspect-ratio:1.75;min-height:220px}.game-bottom>span{max-width:210px;line-height:1.5}.game-bottom button{font-size:10px;white-space:nowrap}.game-shout{font-size:9px;top:10px}footer{padding:37px 0 40px;display:block}.credit{margin-top:20px}}
@media(max-width:700px){.game-wrap{display:flex;flex-direction:column;aspect-ratio:9/16}.game-top,.game-bottom,.game-rivals{flex-shrink:0}.canvas-wrap{flex:1;aspect-ratio:auto;min-height:0}}
@media(max-width:700px){.page{--side-space:19px}.game-wrap{width:calc(100% + var(--side-space) + var(--side-space));margin-inline:calc(0px - var(--side-space));border-radius:12px}.game-bottom button{min-height:48px;font-size:11px}.game-bottom #soundButton{font-size:10px}.intro{padding-top:48px}.lead{margin-top:24px}}
@media(max-width:390px){.page{--side-space:13px;padding:0 13px}.brand{font-size:17px}.intro{padding-top:42px}h1{font-size:clamp(62px,16vw,80px)}.game-label{font-size:8px}.game-rivals{gap:5px;font-size:8px}.rival{padding:4px 6px}.game-bottom>span{max-width:95px}.game-bottom button{padding:8px 9px}.game-bottom #soundButton{font-size:9px;padding:8px 7px}.game-actions{gap:5px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}