:root{--canvas-bg: #fff;--canvas-border: transparent;--text: #000;--accent: #000;--ui-yellow: oklch(85.2% .199 91.936);--ui-grid-inset: .5rem;--ui-grid-gap: .5rem;--ui-grid-columns: 12;--pixel-space-nav-span: 3}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#fff;color:var(--text);min-height:100vh;user-select:text;-webkit-user-select:text}#app{min-height:100dvh;height:100dvh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(.5rem,2vh,1rem);overflow:hidden}.start-screen-wrap,.play-screen,.end-screen,.play-nav-text,.pixel-space-cursor-tooltip,.pixel-space-loading{user-select:text;-webkit-user-select:text}.start-screen-wrap{width:100%;max-width:min(92vw,520px);display:flex;flex-direction:column;gap:1.5rem;padding:clamp(.5rem,2vh,1.5rem) 0;overflow-y:auto;overflow-x:hidden}.start-title{font-size:clamp(1.75rem,6vw,2.25rem);font-weight:700;letter-spacing:.02em;margin:0 0 .25rem;text-align:center}.start-section{margin:0}.start-heading{font-size:1rem;font-weight:600;margin:0 0 .5rem;letter-spacing:.02em;color:var(--text)}.start-list{margin:0;padding-left:1.25rem;line-height:1.6;font-size:.95rem;color:var(--text)}.start-list li{margin-bottom:.35rem}.start-controls{margin:0;font-size:.9rem;line-height:1.55}.start-controls dt{font-weight:600;margin:.75rem 0 .2rem;color:var(--text)}.start-controls dt:first-child{margin-top:0}.start-controls dd{margin:0;padding-left:0;color:#444}.start-controls kbd{font-family:inherit;font-size:.85em;padding:.15em .4em;border-radius:4px;background:#eee;border:1px solid #ccc;box-shadow:0 1px #ccc}.start-btn{margin-top:.5rem;padding:.75rem 2rem;font-size:1.1rem;font-weight:600;font-family:inherit;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;align-self:center}.start-btn-row{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.start-btn-row .start-btn{margin-top:.5rem}.start-btn-secondary{background:#fff;color:var(--accent);border:1px solid var(--accent)}.start-btn:hover{opacity:.9}.start-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.end-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.5rem,2vh,1rem);text-align:center;width:100%;max-width:min(96vw,1200px);max-height:100%}.end-title{font-size:clamp(1rem,3vw,1.25rem);font-weight:600;margin:0;letter-spacing:.02em}.result-list{display:flex;flex-direction:row;justify-content:center;gap:clamp(.4rem,1.2vw,.75rem);width:100%;flex-wrap:nowrap}.result-item{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:16vw;max-width:140px;min-width:48px}.result-word{font-size:clamp(.65rem,1.9vw,1rem);font-weight:600;letter-spacing:.02em;line-height:1.1;text-wrap:balance}.result-canvas{width:100%;max-width:100%}.square-result{pointer-events:none;cursor:default}.play-again-btn{margin-top:clamp(.25rem,1vh,.6rem);padding:.45rem .9rem;font-size:clamp(.85rem,2.5vw,1rem);font-family:inherit;background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}.play-again-btn:hover{opacity:.9}.play-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.5rem,2vh,1rem);width:100%;max-width:min(96vw,96vmin);max-height:100%}.play-nav-text{position:fixed;top:var(--ui-grid-inset);left:var(--ui-grid-inset);z-index:140;width:min(92vw,38rem);display:flex;flex-direction:column;gap:.35rem}.play-nav-line{margin:0;display:flex;flex-wrap:wrap;gap:.32rem;align-items:baseline;font-size:clamp(.88rem,1.8vw,1rem);line-height:1.62;letter-spacing:.004em}.play-nav-verb-line{max-height:none;overflow:visible;padding-right:0}.play-nav-submit-line{margin-top:.12rem}.play-nav-highlight{display:inline-block;padding:.25rem;border-radius:2px;background:var(--nav-chip-bg, #fff);color:var(--nav-chip-fg, #000);user-select:none;-webkit-user-select:none}.play-nav-highlight-white{background:#fff}.play-nav-highlight-button{cursor:pointer;border:none;transition:background-color .16s ease,color .16s ease;user-select:none;-webkit-user-select:none}.play-nav-highlight-button:hover{background:#000;color:#fff}.play-nav-highlight-button:focus-visible{outline:2px solid #000;outline-offset:1px}.play-nav-highlight-disabled{opacity:.55;cursor:not-allowed}.play-nav-highlight-black,.play-nav-highlight-inverted{--nav-chip-bg: #000;--nav-chip-fg: #fff}.play-nav-highlight-yellow{--nav-chip-bg: var(--ui-yellow);--nav-chip-fg: #000}.play-nav-highlight-current-word{--nav-chip-bg: #ff2b2b;--nav-chip-fg: #fff}.play-nav-drawing-count{display:inline-block;padding:.125rem .25rem;line-height:1;background:#ff2b2b;color:#fff;user-select:none;-webkit-user-select:none}.play-screen-nav{position:static;top:auto;left:auto;z-index:190;width:100%;max-width:100%;align-self:flex-start;margin:0}.play-screen-nav .play-nav-line{font-size:13px;line-height:1;gap:4px;align-items:baseline}.play-screen-nav .play-nav-highlight{padding:.125rem .25rem;border-radius:0}.play-screen-nav .play-nav-highlight-button{padding:.125rem .25rem;border-radius:0;border:none;background:var(--nav-chip-bg, #fff);color:var(--nav-chip-fg, #000);font:inherit;line-height:inherit;-moz-appearance:none;appearance:none;-webkit-appearance:none}.play-nav-timer-chip{display:inline-flex;align-items:center;gap:.3rem;font-variant-numeric:tabular-nums}.play-nav-plain-text{display:inline;background:transparent;color:#fff;padding:0;user-select:none;-webkit-user-select:none}.play-nav-more-line{margin-top:.1rem}.play-nav-hint-plain{background:transparent;color:#fff}.play-nav-inline-link{display:inline-flex;align-items:center;gap:.2rem;color:inherit;text-decoration:none}.play-nav-inline-link:hover,.play-nav-inline-link:focus-visible{text-decoration:none}.pixel-space-nav-text{z-index:270;width:calc(((100vw - (2 * var(--ui-grid-inset)) - ((var(--ui-grid-columns) - 1) * var(--ui-grid-gap))) / var(--ui-grid-columns)) * var(--pixel-space-nav-span) + ((var(--pixel-space-nav-span) - 1) * var(--ui-grid-gap)));max-width:calc(100vw - (2 * var(--ui-grid-inset)))}@media (max-width: 1200px){:root{--pixel-space-nav-span: 5}}@media (max-width: 900px){:root{--pixel-space-nav-span: 6}}@media (max-width: 700px){:root{--pixel-space-nav-span: 9}}@media (max-width: 520px){:root{--pixel-space-nav-span: 12}}.pixel-space-word-focus{background:#ff2b2b;color:#fff;border-color:#ff2b2b}.pixel-space-nav-text .play-nav-line{font-size:13px;line-height:1;gap:4px}.pixel-space-nav-primary-line{color:#fff}.pixel-space-nav-title{color:#000}.pixel-space-nav-go{--nav-chip-bg: var(--ui-yellow);--nav-chip-fg: #000}.pixel-space-nav-name-chip{display:inline-flex;align-items:center;background:#ff2b2b}.pixel-space-nav-name-sizer{position:absolute;visibility:hidden;pointer-events:none;white-space:pre;font:inherit;line-height:1;padding:0;margin:0}.pixel-space-nav-name-input{display:block;min-width:1px;border:none;background:transparent;color:#fff;font:inherit;line-height:1;padding:0;margin:0;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;user-select:text;-webkit-user-select:text}.pixel-space-nav-name-input::placeholder{color:#fff}.pixel-space-nav-cluster-label{color:#fff}.pixel-space-nav-slider-chip{display:inline-flex;align-items:center;gap:.25rem;line-height:1}.pixel-space-nav-slider{width:3.1rem;height:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;margin:0}.pixel-space-nav-slider::-webkit-slider-runnable-track{height:.22rem;border-radius:999px;background:#000}.pixel-space-nav-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:.56rem;height:.56rem;border-radius:50%;border:1px solid #000;background:#fff;margin-top:-.17rem}.pixel-space-nav-slider::-moz-range-track{height:.22rem;border-radius:999px;background:#000}.pixel-space-nav-slider::-moz-range-thumb{width:.56rem;height:.56rem;border-radius:50%;border:1px solid #000;background:#fff}.pixel-space-nav-text .play-nav-highlight{padding:.125rem .25rem;border-radius:0}.pixel-space-nav-text .play-nav-highlight-button:hover,.pixel-space-nav-text .play-nav-highlight-button:focus-visible{background:var(--nav-chip-bg, #fff);color:var(--nav-chip-fg, #000);outline:none}.pixel-space-nav-verb-item{background:#fff;border:none;color:#000}.pixel-space-nav-verb-item:hover,.pixel-space-nav-verb-item:focus-visible{background:#fff;color:#000;border-color:transparent}.pixel-space-nav-verb-item.pixel-space-word-focus,.pixel-space-nav-verb-item.pixel-space-word-focus:hover,.pixel-space-nav-verb-item.pixel-space-word-focus:focus-visible{background:#ff2b2b;color:#fff;border:none}.word-row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.15rem,.7vh,.35rem)}.timer{font-size:clamp(.85rem,2.5vw,1rem);font-variant-numeric:tabular-nums;color:var(--text);display:inline-flex;align-items:center;gap:.3rem}.word-display{text-align:center;font-size:clamp(1.1rem,4vw,1.75rem);font-weight:600;letter-spacing:.02em;margin:0}.canvas-wrap{aspect-ratio:1;width:min(100%,100dvh);max-width:100%;max-height:100%;background-color:var(--canvas-bg);border:1px solid #000;position:relative;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}.canvas-wrap--with-corners{--canvas-border: #000}.canvas-border-square{display:none}.result-canvas .corner{display:block;position:absolute;width:24px;height:24px;box-sizing:border-box;pointer-events:none;z-index:2}.result-canvas .corner-tl{left:0;top:0;border-left:2px solid #000;border-top:2px solid #000}.result-canvas .corner-tr{right:0;top:0;border-right:2px solid #000;border-top:2px solid #000}.result-canvas .corner-bl{left:0;bottom:0;border-left:2px solid #000;border-bottom:2px solid #000}.result-canvas .corner-br{right:0;bottom:0;border-right:2px solid #000;border-bottom:2px solid #000}.canvas{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;user-select:none;-webkit-user-select:none}.square{position:absolute;background:#000;cursor:move;transform-origin:center center;touch-action:none;outline:none}.square:focus,.square:focus-visible{outline:none}.square.square-dragging{cursor:grabbing}.square.square-copy-ready,.square.square-copy-ready.square-dragging{cursor:copy}.square.square-selected{outline:1px dashed rgba(255,255,255,.55);outline-offset:-1px}.selection-overlay{position:absolute;pointer-events:none;border:1px solid #ff2b2b;transform-origin:center center;z-index:10}.transform-handle{position:absolute;left:calc((var(--hx) + 1) * 50%);top:calc((var(--hy) + 1) * 50%);width:11px;height:11px;pointer-events:auto;transform:translate(-50%,-50%);border:1px solid #ff2b2b;background:#ff2b2b;display:grid;place-items:center}.resize-handle{cursor:none;z-index:2}.resize-handle.resize-alt{cursor:none}.resize-handle :global(svg){stroke-width:2.1;transform:rotate(calc((var(--hx) * 45deg) + (var(--hy) * 45deg)));pointer-events:none}.rotate-handle{width:34px;height:34px;border:none;background:transparent;transform:translate(-50%,-50%) translate(calc(var(--hx) * 24px),calc(var(--hy) * 24px));cursor:none;z-index:1}.rotate-handle:active{cursor:none}.rotate-handle :global(svg){stroke-width:2.1;pointer-events:none}.center-marker{position:absolute;width:8px;height:8px;border-radius:50%;background:#00000080;pointer-events:none;transform:translate(-50%,-50%)}.center-marker-fixed{width:10px;height:10px;background:#000000b3;border:1px solid rgba(0,0,0,.9)}.square-preview{pointer-events:none;background:transparent;border:2px solid #ff2b2b;cursor:crosshair}.skip-hint{font-size:clamp(.7rem,2vw,.8rem);color:var(--text);margin:0;display:inline-flex;align-items:center;gap:.25rem}.cursor-tool-icon{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:30;display:grid;place-items:center;width:22px;height:22px;border-radius:0;border:none;background:#ff2b2b;color:#fff}.cursor-tool-icon :global(svg){stroke-width:2.2}.canvas.tool-cursor-active,.canvas.tool-cursor-active *{cursor:none!important}.submit-status{margin:0;font-size:.82rem;color:#333}.pixel-space-screen{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100dvh;z-index:200}.pixel-space-wrap{position:relative;width:100%;height:100%;overflow:hidden;background:#155dfc;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}.pixel-space-draw-panel{position:fixed;top:var(--ui-grid-inset);left:calc(var(--ui-grid-inset) + (((100vw - (2 * var(--ui-grid-inset)) - ((var(--ui-grid-columns) - 1) * var(--ui-grid-gap))) / var(--ui-grid-columns)) * var(--pixel-space-nav-span) + ((var(--pixel-space-nav-span) - 1) * var(--ui-grid-gap))) + var(--ui-grid-gap));right:var(--ui-grid-inset);bottom:var(--ui-grid-inset);z-index:265;display:flex;align-items:flex-start;justify-content:flex-start;overflow:hidden;background:transparent}.pixel-space-draw-panel .play-screen{width:100%;max-width:none;max-height:100%;height:100%;justify-content:flex-start;align-items:flex-start;gap:4px;padding:0}@media (max-width: 700px){body:has(#app .pixel-space-screen.pixel-space-screen--with-draw-panel){background:#155dfc}#app:has(.pixel-space-screen.pixel-space-screen--with-draw-panel){justify-content:flex-start;align-items:stretch;padding:.25rem;overflow-y:auto;background:transparent}.pixel-space-screen.pixel-space-screen--with-draw-panel{position:static;inset:auto;width:100%;height:auto;z-index:auto;display:flex;flex-direction:column;align-items:stretch;overflow-y:auto;padding:0;gap:var(--ui-grid-gap)}.pixel-space-screen.pixel-space-screen--with-draw-panel .pixel-space-nav-text{position:static;top:auto;left:auto;width:100%;max-width:none;z-index:auto;border:none;padding:0;background:transparent}.pixel-space-screen.pixel-space-screen--with-draw-panel .pixel-space-nav-text .play-nav-line{width:100%}.pixel-space-screen.pixel-space-screen--with-draw-panel .pixel-space-wrap{display:none}.pixel-space-draw-panel{position:static;top:auto;left:auto;right:auto;bottom:auto;width:100%;height:auto;z-index:auto;overflow:visible;margin:1px 0 0;padding:0}.pixel-space-draw-panel .play-screen{width:100%;max-width:none;height:auto;max-height:none;gap:var(--ui-grid-gap);align-items:stretch;justify-content:flex-start;margin:0;padding:0}.pixel-space-draw-panel .play-screen-nav{width:100%}.pixel-space-draw-panel .canvas-wrap{width:100%;max-width:none}}.pixel-space-wrap:active{cursor:grabbing}.pixel-space-world{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:0 0}.pixel-space-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:240;font-size:.9rem;border:1px solid #4b5563;border-radius:6px;background:#111827e6;color:#f8fafc;padding:.55rem .75rem}.pixel-space-tile{position:absolute;width:130px;height:130px;padding:0;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;box-shadow:none;overflow:visible;pointer-events:auto;transition:transform .15s ease}.pixel-space-tile:focus-visible{outline:none}.pixel-space-tile:hover,.pixel-space-tile.pixel-space-tile-selected{box-shadow:none}.pixel-space-tile.pixel-space-tile-dimmed{opacity:.24;filter:blur(1.6px) saturate(.7)}.pixel-space-tile.pixel-space-tile-focused{opacity:1;filter:none}.pixel-space-canvas{width:100%;aspect-ratio:1;position:relative;background:#f8fafc;border:none;overflow:hidden}.pixel-space-square{cursor:default}.pixel-space-hull-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:20}.pixel-space-hull-path{fill:#ff000017;stroke:#ff2b2b;stroke-width:4;stroke-linejoin:miter;stroke-linecap:butt}.pixel-space-cursor-tooltip{position:fixed;z-index:300;pointer-events:none;background:#fff;color:#000;border:1px solid #000;font-size:.7rem;line-height:1.15;padding:.25rem .38rem;border-radius:2px;white-space:nowrap}.pixel-space-cursor-tooltip-title{font-weight:600}.pixel-space-cursor-tooltip-by{margin-top:.06rem}