/* Original comic panels and pixel collectibles. No external fonts or game assets. */
:root{--mint:#a6f0cc;--sun:#ffe16b;--violet:#c4b5f5;--green:#236b50;--ink:#252635;--paper:#fffdf5;--bg:#eeeade}
header{border-bottom:3px solid var(--ink)}.brand-icon{border-radius:0;background:var(--mint);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
button{border-radius:0}button:active{translate:1px 2px;box-shadow:none}.workspace{border-radius:0}.year-label strong{color:var(--ink)}
.game-hud{flex-shrink:0;background:var(--paper);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);margin-bottom:6px;position:relative}
.hud-row{display:flex;align-items:center;gap:16px;padding:12px 16px}.pixel-badge{width:48px;height:48px;flex-shrink:0;background:var(--mint);border:2px solid var(--ink);display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink);transform:rotate(-4deg)}
.pixel-trophy{width:32px;height:32px;shape-rendering:crispEdges;fill:currentColor}.hud-identity{min-width:150px}.game-kicker{font:700 9px/1.6 monospace;letter-spacing:2px;color:#62616f}.hud-identity strong{display:block;font-size:18px;line-height:1.5}.hud-progress{flex:1;max-width:500px;min-width:100px}.hud-progress p{font-size:11px;margin:0 0 6px;color:#545462}.xp-track{height:12px;background:#e7e4dc;border:2px solid var(--ink);padding:2px}.xp-track span{display:block;height:100%;background:repeating-linear-gradient(90deg,#397b60 0 9px,var(--mint) 9px 11px);width:0;transition:width .25s steps(8)}.hud-actions{display:flex;gap:8px;margin-left:auto;align-items:center}.hud-actions button{min-height:38px;font-weight:750}.game-primary{background:var(--sun);box-shadow:3px 3px 0 var(--ink)}.hud-mini{border:0;box-shadow:none!important;padding:5px;min-width:32px;color:#62616f}.game-hud.is-collapsed .hud-progress,.game-hud.is-collapsed .pixel-badge{display:none}.game-hud.is-collapsed .hud-row{padding-block:7px}.game-hud.is-collapsed .hud-identity strong{font-size:14px}.game-hud.is-collapsed .game-kicker{display:none}
.cell{border-radius:0;transform-origin:50% 70%}.cell.watched{border-color:var(--green);box-shadow:2px 2px 0 var(--ink)}.cell.watched:after{content:'✓';opacity:1;inset:3px 3px auto auto;width:17px;height:17px;background:var(--mint);border:1px solid var(--ink);color:var(--ink);font:bold 12px/15px monospace;text-align:center;z-index:4}.cell:hover{outline:2px dashed var(--ink);outline-offset:3px}
.cell.hit{animation:pixel-hit .34s steps(2,end)}.cell.unhit{animation:pixel-unhit .22s steps(3,end)}
@keyframes pixel-hit{0%{transform:scale(1)}15%,28%{transform:scale(.9,1.06)}29%,40%{transform:scale(1.07,.95);filter:brightness(1.5)}65%{transform:translateY(-4px) scale(1.02)}100%{transform:none;filter:none}}
@keyframes pixel-unhit{35%{transform:translateX(-2px) scale(.96)}70%{transform:translateX(2px)}100%{transform:none}}
.game-fx{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}.pixel-bit{position:absolute;width:7px;height:7px;background:var(--sun);border:1px solid var(--ink);animation:pixel-fly .46s steps(7,end) forwards}.pixel-bit.muted{background:#a4a1ab}.hit-word{position:absolute;color:var(--ink);background:var(--sun);border:2px solid var(--ink);padding:4px 7px;font-size:12px;font-weight:950;box-shadow:2px 2px 0 var(--ink);white-space:nowrap;animation:word-pop .65s steps(7,end) forwards;transform:translate(-50%,-50%)}
@keyframes pixel-fly{to{transform:translate(var(--dx),var(--dy)) rotate(90deg);opacity:0}}@keyframes word-pop{15%{transform:translate(-50%,-65%) scale(1.1)}70%{opacity:1}100%{transform:translate(-50%,-110%);opacity:0}}
.game-reward{position:fixed;right:20px;top:86px;width:330px;max-width:calc(100vw - 32px);z-index:80;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:17px 20px;background:var(--sun);pointer-events:none}.game-reward:not([hidden]){animation:reward-enter .32s steps(5,end)}.game-reward .game-kicker{color:var(--ink)}.game-reward strong{display:block;margin:5px 0;font-size:20px}.game-reward p{margin:0;font-size:12px;line-height:1.7}.game-reward .reward-burst{position:absolute;right:12px;top:12px;opacity:.15;width:65px;height:65px}.game-reward.platinum{background:var(--mint)}@keyframes reward-enter{0%{transform:translateX(110%)}70%{transform:translateX(-6px)}100%{transform:none}}
.game-dialog{width:760px;padding:26px;background-color:var(--paper);background-image:radial-gradient(#25263513 .7px,transparent .7px);background-size:6px 6px;border-radius:0}.game-dialog[open]{animation:menu-open .16s steps(3,end)}@keyframes menu-open{from{opacity:.3;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.game-dialog h2{margin:7px 0 16px}.game-dialog h3{font-size:15px}.game-subtitle{margin:0 0 18px;font-size:12px!important}.game-dialog button,.game-dialog input,.game-dialog select{min-height:42px}.profile-banner{background:var(--ink);color:var(--paper);padding:18px;margin-bottom:18px;box-shadow:5px 5px 0 var(--mint)}.profile-banner .game-kicker{color:var(--mint)}.profile-banner strong{font-size:25px;display:block;margin:5px 0}.profile-banner p{color:#eeeade;margin:0;font-size:12px}.profile-numbers{display:flex;gap:24px;margin-top:18px}.profile-numbers b{font:900 27px monospace;color:var(--sun)}.profile-numbers span{font-size:10px;display:block;color:#d7d3dd}.profile-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.profile-form label{font-size:12px;display:flex;flex-direction:column;gap:6px;min-width:0}.profile-form input,.profile-form select{background:var(--paper);border:2px solid var(--ink);border-radius:0;padding:8px;font-size:14px;max-width:100%;width:100%}.profile-form .wide{grid-column:1/-1}.profile-form .inline-setting{flex-direction:row;align-items:center}.inline-setting input{width:18px;min-height:18px;accent-color:var(--green)}.game-help{font-size:11px!important;line-height:1.7!important;color:#656170!important}.game-dialog .game-footer{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}.game-footer button{flex:1}
.trophy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.trophy-card{border:2px solid var(--ink);background:var(--paper);padding:15px 12px;box-shadow:3px 3px 0 var(--ink);position:relative}.trophy-card.locked{border-color:#ccc8c0;box-shadow:2px 2px 0 #d9d5cc}.trophy-card .trophy-icon{background:#f2d7b1;border:2px solid var(--ink);width:45px;height:45px;display:grid;place-items:center;color:#6e4329;margin-bottom:12px}.trophy-card.silver .trophy-icon{background:#dfe5ef;color:#515f77}.trophy-card.gold .trophy-icon{background:var(--sun);color:#856300}.trophy-card.platinum .trophy-icon{background:var(--mint);color:#185d51}.trophy-card.locked .trophy-icon{background:#e8e5df;color:#918c83;border-color:#c7c2ba}.trophy-card h3{margin:0 0 7px;font-size:13px}.trophy-card p{font-size:11px;line-height:1.6;min-height:35px;margin:0 0 10px}.trophy-state{position:absolute;top:14px;right:10px;font-size:9px;color:#655f68}.trophy-card progress{width:100%;height:7px;accent-color:var(--green);display:block}.trophy-card small{font-size:10px;color:#686472;margin-top:7px;display:block}
#shareCanvas{display:block;width:100%;max-width:420px;height:auto;margin:0 auto;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}#shareStatus{min-height:20px}.game-entrance{font-size:10px;color:#64616c}.game-hud[hidden],.game-reward[hidden]{display:none}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html[data-motion=light] .cell.hit{animation:pixel-unhit .18s steps(3,end)}html[data-motion=light] .game-reward,html[data-motion=light] .game-dialog{animation:none}html[data-motion=off] .cell:hover{transform:none}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.cell:hover{transform:none}}
@media(max-width:800px){.hud-row{gap:11px}.hud-identity{min-width:125px}.hud-identity strong{font-size:15px}.hud-actions button{padding:7px 8px}.pixel-badge{width:38px;height:38px}.hud-progress{max-width:none}}
@media(max-width:700px){.game-hud{box-shadow:2px 2px 0 var(--ink);margin-bottom:4px}.hud-row{padding:9px;gap:8px;flex-wrap:wrap}.pixel-badge{width:32px;height:32px;box-shadow:2px 2px 0 var(--ink)}.pixel-badge .pixel-trophy{width:23px;height:23px}.hud-identity{min-width:0;flex:1}.hud-identity strong{font-size:13px}.game-kicker{font-size:8px;letter-spacing:1px}.hud-actions{gap:5px}.hud-actions button{min-height:36px;font-size:11px;padding:5px 7px}.hud-actions .hud-mini{min-width:26px;padding:3px}.hud-progress{order:4;flex-basis:100%}.hud-progress p{font-size:10px;margin-bottom:4px}.xp-track{height:10px}.game-hud.is-collapsed .hud-row{flex-wrap:nowrap}.game-hud.is-collapsed .hud-identity strong{font-size:12px}.game-dialog{padding:22px 16px max(22px,env(safe-area-inset-bottom));border-radius:0}.trophy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.trophy-card{padding:12px 9px}.trophy-card h3{font-size:12px}.trophy-state{font-size:8px;right:7px}.profile-form input,.profile-form select{font-size:16px}.profile-numbers{gap:20px}.game-reward{top:75px;right:14px;padding:13px 16px}.game-reward strong{font-size:17px}.game-reward p{font-size:11px}.cell:hover{outline:none}.game-dialog .close{min-width:44px}.hud-progress p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-height:620px){.game-hud .pixel-badge,.game-hud .hud-progress,.game-hud .game-kicker{display:none}.hud-row{padding-block:5px}.game-hud .hud-identity strong{font-size:12px}}
@media(max-width:700px){.hud-identity strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-actions{flex-shrink:0}.hud-identity{flex-basis:70px}.game-hud.is-collapsed .hud-identity{flex-basis:0}.profile-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:380px){.hud-row .pixel-badge{display:none}.hud-actions{gap:4px}.hud-actions button{padding-inline:6px}.hud-identity{flex-basis:58px}.profile-numbers{gap:15px}}
/* Match the class specificity of the desktop dialog width. The base mobile
   dialog rule alone cannot override .game-dialog's 760px width. */
@media(max-width:700px){.game-dialog{width:100%;max-width:100%;min-width:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}