@import"https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap";:root{color-scheme:light;--tone-0: #0f380f;--tone-1: #306230;--tone-2: #8bac0f;--tone-3: #9bbc0f;--shadow: rgba(15, 56, 15, .25);font-family:Silkscreen,monospace}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%}html{background:#10180c}body{min-height:100svh;background:radial-gradient(circle at top,rgba(155,188,15,.15),transparent 32%),linear-gradient(180deg,#182510,#10180c);color:var(--tone-0);overscroll-behavior:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}button{font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.app-shell{min-height:100svh;display:grid;place-items:center;width:100%;padding:calc(.65rem + env(safe-area-inset-top)) calc(.8rem + env(safe-area-inset-right)) calc(.8rem + env(safe-area-inset-bottom)) calc(.8rem + env(safe-area-inset-left))}.pocket{width:min(100%,35rem);display:grid;gap:.55rem;padding:.8rem;background:linear-gradient(180deg,var(--tone-3),var(--tone-2));border:4px solid var(--tone-0);border-radius:1.4rem 1.4rem 2.8rem;box-shadow:0 .95rem #0f380f52,inset 0 0 0 4px #9bbc0f3d}.title-row,.status-row{display:flex;justify-content:space-between;gap:.55rem}.title-row{align-items:center}.status-row{align-items:stretch}.title-block h1{margin:0;font-size:clamp(.88rem,3.5vw,1.2rem);line-height:1.1}.system-label,.score-label,.display-header{letter-spacing:.05em;font-size:.5rem;line-height:1.4}.system-label{display:inline-block}.reset-button{border:3px solid var(--tone-0);border-radius:.9rem;padding:.56rem .8rem;min-width:5rem;line-height:1;color:var(--tone-3);background:var(--tone-0);box-shadow:0 .35rem #0f380f33;cursor:pointer}.status-line{flex:1;margin:0;padding:.45rem .6rem;min-height:2.2rem;border:3px solid var(--tone-0);border-radius:.9rem;background:#9bbc0f3d;font-size:.54rem;line-height:1.45}.status-line[data-variant=celebrate]{background:var(--tone-0);color:var(--tone-3)}.score-box{min-width:5.7rem;padding:.45rem .6rem;text-align:right;border:3px solid var(--tone-0);border-radius:.9rem;background:var(--tone-3)}.score-box strong{display:block;margin-top:.2rem;font-size:.82rem;line-height:1.2}.progress-meter{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.24rem}.progress-cell{height:.54rem;border:2px solid var(--tone-0);border-radius:.2rem;background:transparent}.progress-cell.is-lit{background:var(--tone-1)}.display-panel{padding:.5rem;border:4px solid var(--tone-0);border-radius:1rem 1rem 2.2rem;background:var(--tone-1)}.display-header{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.35rem;color:var(--tone-3)}.screen-frame{position:relative;aspect-ratio:4 / 4.5;overflow:hidden;border:4px solid var(--tone-0);border-radius:.8rem;background:var(--tone-3);box-shadow:inset 0 0 0 4px var(--tone-2);touch-action:none;transform-origin:center center;transition:transform .05s linear;cursor:grab}.screen-frame:active{cursor:grabbing}.scene-root,.screen-overlay{position:absolute;inset:0}.scene-root canvas{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}.screen-overlay{pointer-events:none;background:linear-gradient(180deg,rgba(155,188,15,.08),transparent 24%,rgba(15,56,15,.1) 100%),repeating-linear-gradient(90deg,rgba(15,56,15,.045) 0,rgba(15,56,15,.045) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(180deg,rgba(15,56,15,.05) 0,rgba(15,56,15,.05) 1px,transparent 1px,transparent 4px);mix-blend-mode:multiply}.controls{touch-action:none}.burst-button{width:100%;border:4px solid var(--tone-0);border-radius:1rem;min-height:5rem;display:grid;place-items:center;padding:1rem;background:linear-gradient(to top,var(--tone-1) calc(var(--charge, 0) * 100% - 1px),var(--tone-0) calc(var(--charge, 0) * 100% - 1px),var(--tone-0) calc(var(--charge, 0) * 100%),var(--tone-2) calc(var(--charge, 0) * 100%));box-shadow:0 .35rem 0 var(--shadow);touch-action:none;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease}.burst-button.is-pressed{transform:translateY(.25rem);box-shadow:none}.burst-label{font-size:1.1rem;line-height:1;color:var(--tone-3);text-shadow:1px 0 0 var(--tone-0),-1px 0 0 var(--tone-0),0 1px 0 var(--tone-0),0 -1px 0 var(--tone-0)}.pocket.is-complete .progress-cell.is-lit{background:var(--tone-0)}button:focus-visible{outline:3px solid var(--tone-0);outline-offset:2px}@media(max-width:720px){.title-row,.status-row{flex-direction:column}.score-box{text-align:left}}@media(pointer:coarse),(hover:none)and (max-width:720px){.app-shell{place-items:start center;padding-top:calc(.35rem + env(safe-area-inset-top));padding-bottom:0}.pocket{gap:.4rem;padding:.55rem;padding-bottom:calc(4.5rem + max(.75rem,env(safe-area-inset-bottom)));width:min(100%,34rem)}.controls{position:fixed;left:calc(.75rem + env(safe-area-inset-left));right:calc(.75rem + env(safe-area-inset-right));bottom:max(.75rem,env(safe-area-inset-bottom));z-index:10}.burst-button{min-height:4rem;box-shadow:0 .35rem 0 var(--shadow),0 .8rem 1.5rem #0000004d}}@media(max-width:480px){.pocket{padding:.5rem;gap:.4rem}.status-line,.score-box{padding:.38rem .52rem}.display-panel{padding:.42rem}.display-header{margin-bottom:.25rem}.title-block h1{font-size:clamp(.78rem,3.1vw,1.02rem)}.reset-button{padding:.48rem .65rem;min-width:4.5rem}}@media(max-height:760px)and (pointer:coarse){.pocket{gap:.4rem}.status-line{min-height:2.4rem;padding:.4rem .6rem}.score-box{padding:.4rem .6rem}.score-box strong{margin-top:.2rem}.progress-cell{height:.55rem}.display-panel{padding:.4rem}.display-header{margin-bottom:.3rem}.burst-button{min-height:3.5rem;padding:.7rem}}