@font-face{font-family:DotGothic16;src:url('./fonts/DotGothic16.woff') format('woff');font-weight:400;font-display:swap}
:root{color-scheme:dark;font-family:DotGothic16,'MS Gothic',monospace;background:#080e17;color:#f4e6bf;font-synthesis:none;line-height:1.6}
*{box-sizing:border-box}body{margin:0;padding:calc(env(safe-area-inset-top,0px) + 12px) calc(env(safe-area-inset-right,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 16px) calc(env(safe-area-inset-left,0px) + 16px)}main{max-width:920px;margin:auto}h1,h2,p{margin:0}h1{font-size:20px;font-weight:400}h2{font-size:19px;font-weight:400}a{color:#edc97e}.page-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.page-header a{display:flex;align-items:center;min-height:48px;white-space:nowrap}.review-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}.panel{min-width:0;border:2px solid #72908a;background:#142c33;padding:12px;box-shadow:inset 0 0 0 2px #0b1922,0 4px #050911}.viewer{display:grid;gap:8px}.four-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}button,select,textarea,input{font:inherit}button,select{min-height:48px;border:2px solid #72908a;border-radius:0;color:#f4e6bf;background:#183b41}button{cursor:pointer;touch-action:manipulation;line-height:1.3;min-width:48px;padding:7px 5px}button:hover:not(:disabled){background:#32605c}button:active:not(:disabled){translate:0 1px}button:disabled{opacity:.55;cursor:default}.primary,button[aria-pressed=true]{color:#182d33;background:#dfb568;border-color:#ffe1a0}.primary:hover:not(:disabled),button[aria-pressed=true]:hover{background:#efd18c}button:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #fff0b5;outline-offset:3px}.frame-heading{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:14px}.frame-heading strong{font-weight:400}#play-state{font-size:12px;color:#e6c47e}.stage{display:grid;justify-items:center;align-items:center;min-width:0;padding:0;background:#0c1a24;border:1px solid #33494b}.stage,#sprite-frame{touch-action:pan-y}#sprite-frame{position:relative;line-height:0;background-color:#213039;background-image:conic-gradient(#293b41 25%,transparent 0 50%,#293b41 0 75%,transparent 0);background-size:16px 16px}#review-canvas{display:block;width:192px;height:288px;image-rendering:pixelated;cursor:crosshair}#pixel-grid,#point-marker{position:absolute;pointer-events:none}#pixel-grid{inset:0;background-image:linear-gradient(to right,#f5ebc82c 1px,transparent 1px),linear-gradient(to bottom,#f5ebc82c 1px,transparent 1px);background-size:var(--pixel-scale,6px) var(--pixel-scale,6px)}#point-marker{border:2px solid #fff4af;box-shadow:0 0 0 2px #e15b55;z-index:2}#point-marker::before,#point-marker::after{content:'';position:absolute;background:#e15b55}#point-marker::before{left:50%;width:2px;top:-9px;height:6px}#point-marker::after{top:50%;height:2px;left:-9px;width:6px}.playback{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px}#frame-buttons button{display:flex;justify-content:center;align-items:center;gap:6px;padding:5px 2px}#frame-buttons canvas{display:block;image-rendering:pixelated;width:32px;height:48px}#frame-buttons button span{font-size:14px}.viewer-help,.small{font-size:12px;color:#c1c6ae}.options{display:grid;grid-template-columns:1fr 1.25fr .8fr;gap:8px;align-items:end}.options label{font-size:12px;display:grid;gap:4px;min-width:0}select{width:100%;padding:6px 4px}.options .grid-label{display:flex;align-items:center;justify-content:center;min-height:48px;border:2px solid #72908a;background:#183b41;gap:4px;cursor:pointer}input[type=checkbox]{width:20px;height:20px;margin:0;accent-color:#e9ba69}.notes{display:grid;gap:12px}#note-target{color:#edc97e}.point-row{display:flex;align-items:center;justify-content:space-between;gap:8px}#point-label{font-size:13px}.point-row button{font-size:13px;padding:6px 10px}textarea{resize:vertical;min-height:112px;width:100%;border:2px solid #72908a;border-radius:0;padding:10px;color:#f4e6bf;background:#0c1a24;font-size:16px;line-height:1.7}textarea::placeholder{color:#9caca5}#status{min-height:26px;font-size:14px;color:#ffe1a0;overflow-wrap:anywhere}#manual-copy{display:grid;gap:8px;font-size:13px}#feedback-output{font-size:14px}[hidden]{display:none!important}
@media(max-width:700px){.review-layout{grid-template-columns:minmax(0,1fr);gap:16px}.page-header{margin-bottom:8px}h1{font-size:18px}.panel{padding:10px}}
@media(max-width:350px){body{padding-left:calc(env(safe-area-inset-left,0px) + 12px);padding-right:calc(env(safe-area-inset-right,0px) + 12px)}.page-header{gap:8px}h1{font-size:16px}.frame-heading{font-size:12px}#direction-buttons button{font-size:14px}}
@media(min-width:701px) and (max-height:480px){.viewer{grid-template-columns:100px minmax(0,1fr);grid-template-areas:'stage heading' 'stage directions' 'stage playback' 'stage frames' 'help help' 'options options' 'small small';padding:10px}.viewer .stage{grid-area:stage;align-self:center}.frame-heading{grid-area:heading;font-size:12px}#direction-buttons{grid-area:directions}#direction-buttons button{font-size:13px}.playback{grid-area:playback}#frame-buttons{grid-area:frames}#frame-buttons button{gap:3px}.viewer-help{grid-area:help}.options{grid-area:options}.viewer>.small{grid-area:small}}
@media(min-width:701px) and (max-height:480px){.viewer.wide-zoom{grid-template-columns:minmax(0,1fr);grid-template-areas:'directions' 'heading' 'stage' 'playback' 'frames' 'help' 'options' 'small'}}
.game-preview-entry{display:grid;gap:6px;margin-bottom:16px}.game-preview-entry>a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px;border:2px solid #ffe1a0;background:#dfb568;color:#182d33;text-decoration:none}.game-preview-entry>a:active{translate:0 1px}
@media(min-width:701px) and (max-height:480px){.review-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;margin-bottom:8px}.review-top .page-header,.game-preview-entry{margin-bottom:0}.game-preview-entry .small{display:none}.game-preview-entry>a{font-size:14px;padding-inline:12px}}