:root{--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--color-0:#ef4444;--color-1:#3b82f6;--color-2:#22c55e;--color-3:#eab308;--color-4:#a855f7;--shadow-0:#fca5a5;--shadow-1:#93c5fd;--shadow-2:#86efac;--shadow-3:#fde047;--shadow-4:#d8b4fe;--gap:clamp(3px, 1vmin, 8px);--radius:.5rem;--panel-pad:.5rem;--area-gap:.75rem;--cell:3rem;--clue-size:24px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--gray-900);color:#fff;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;min-height:100svh;margin:0;padding:.5rem;font-family:Inter,system-ui,sans-serif;display:flex}#app{flex-direction:column;flex:1;width:100%;display:flex}.container{flex-direction:column;flex:1;width:100%;display:flex;container-type:inline-size}.header,.toolbar,.status,.footer{max-width:36rem;margin-inline:auto}.play-area{align-content:start;gap:var(--area-gap);--cell:clamp(2rem, min(calc((100cqw - var(--extra-x) - var(--gaps-x) * var(--gap)) / var(--cells-x)), calc((100cqh - var(--extra-y) - var(--gaps-y) * var(--gap)) / var(--cells-y))), 5rem);--clue-size:clamp(14px, calc(var(--cell) * .45), 26px);flex:1 1 0;justify-content:center;place-items:start center;min-height:0;display:grid;container-type:size}@media (orientation:portrait){.play-area{--cells-x:5;--gaps-x:4;--cells-y:8;--gaps-y:5;--extra-x:calc(2 * var(--panel-pad));--extra-y:calc(6 * var(--panel-pad) + 4 * var(--area-gap) + 5rem);grid-template-areas:"board""controls""bins""notes""footer"}}@media (orientation:landscape){.play-area{--cells-x:8;--gaps-x:6;--cells-y:5;--gaps-y:4;--extra-x:calc(6 * var(--panel-pad) + 2 * var(--area-gap));--extra-y:calc(2 * var(--panel-pad) + 2 * var(--area-gap) + 5rem);grid-template-areas:"board bins notes""controls bins notes""footer footer footer"}.header{margin-bottom:.5rem}.header h1{font-size:1.25rem}.toolbar{margin-bottom:.5rem}.status:empty{display:none}.footer{margin-bottom:0}}#board-panel{grid-area:board}#bottom-controls{grid-area:controls;margin-bottom:0}#tray-panel{grid-area:bins}#notes-panel{grid-area:notes}.footer{grid-area:footer}.header{text-align:center;margin-bottom:.5rem}.header h1{letter-spacing:-.025em;margin:0;font-size:clamp(1.5rem,5vmin,2.25rem);font-weight:700}.toolbar{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:.25rem;display:flex}.btn-icon{width:1.25rem;height:1.25rem;display:block}.tooltip{z-index:90;background:var(--gray-700);color:#fff;white-space:nowrap;pointer-events:none;border-radius:.375rem;padding:.3rem .55rem;font-size:.75rem;font-weight:500;line-height:1.2;position:fixed;box-shadow:0 4px 10px #00000059}.toolbar .btn{min-width:2.5rem;min-height:2.5rem;padding:.5rem}.btn,.select{border-radius:var(--radius);font:inherit;color:#fff;cursor:pointer;border:0;justify-content:center;align-items:center;gap:.375rem;padding:.5rem 1rem;font-size:.875rem;font-weight:700;transition:background-color .15s;display:inline-flex}.btn:disabled{opacity:.5;pointer-events:none}.btn{-webkit-touch-callout:none;touch-action:manipulation}.help-buttons{margin:.5rem 0 0;padding:0;list-style:none}.help-button-row{align-items:flex-start;gap:.6rem;display:flex}.help-button-row+.help-button-row{margin-top:.5rem}.help-button-icon{border-radius:var(--radius);background:var(--gray-700);flex:none;padding:.3rem;display:inline-flex}.select{background:var(--gray-700)}.btn-green{background:#22c55e}.btn-green:hover:not(:disabled){background:#16a34a}.btn-yellow{background:#ca8a04}.btn-yellow:hover:not(:disabled){background:#a16207}.btn-cyan{background:#0891b2}.btn-cyan:hover:not(:disabled){background:#0e7490}.btn-indigo{background:#4f46e5}.btn-indigo:hover:not(:disabled){background:#4338ca}.btn-purple{background:#9333ea}.btn-purple:hover:not(:disabled){background:#7e22ce}.btn-pink{background:#db2777}.btn-pink:hover:not(:disabled){background:#be185d}.btn-teal{background:#0d9488}.btn-teal:hover:not(:disabled){background:#0f766e}.btn-gray{background:var(--gray-600)}.btn-gray:hover:not(:disabled){background:var(--gray-700)}.status{text-align:center;min-height:1.25rem;color:var(--gray-400);margin-bottom:.25rem;font-size:.875rem;line-height:1.25rem}.panel{padding:var(--panel-pad);background:var(--gray-800);border-radius:.75rem;position:relative;box-shadow:0 10px 15px -3px #0000004d}.grid5{gap:var(--gap);grid-template-columns:repeat(5, var(--cell));grid-auto-rows:var(--cell);display:grid}.overlay{inset:var(--panel-pad);pointer-events:none;position:absolute}#game-board,#relationship-clues-container{grid-template-columns:repeat(5, var(--cell));grid-template-rows:repeat(5, var(--cell))}@media (orientation:portrait){#spawner-grid,#spawner-clues-container{grid-template-columns:repeat(5, var(--cell));grid-template-rows:var(--cell)}#spawner-notes-grid{grid-template-columns:repeat(5, var(--cell));grid-template-rows:repeat(2, var(--cell));grid-auto-flow:row}}@media (orientation:landscape){#spawner-grid,#spawner-clues-container{grid-template-columns:var(--cell);grid-template-rows:repeat(5, var(--cell))}#spawner-notes-grid{grid-template-columns:repeat(2, var(--cell));grid-template-rows:repeat(5, var(--cell));grid-auto-flow:column}}.grid-cell,.piece,.spawner,.spawner-empty{width:var(--cell);height:var(--cell);border-radius:var(--radius);justify-content:center;align-items:center;display:flex;position:relative}.piece{z-index:1;touch-action:none;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out}.color-0{background-color:var(--color-0)}.color-1{background-color:var(--color-1)}.color-2{background-color:var(--color-2)}.color-3{background-color:var(--color-3)}.color-4{background-color:var(--color-4)}.draggable-piece{cursor:grab}.dragging-source{opacity:.5}.ghost-piece{pointer-events:none;z-index:100;opacity:.8;cursor:grabbing;position:fixed;box-shadow:0 10px 15px -3px #0003,0 4px 6px -2px #0000001a}.piece.mistake{animation:.6s ease-in-out 2 mistake-pulse;box-shadow:inset 0 0 0 4px #fff,0 0 0 3px #f87171}@keyframes mistake-pulse{50%{transform:scale(.92)}}.clue-piece{cursor:not-allowed;box-shadow:inset 0 0 0 3px #ffffffb3}.drop-zone{background-color:var(--gray-600);border:2px dashed var(--gray-500);cursor:pointer;transition:background-color .2s}.drop-zone.checkpointed{border-style:solid}.drag-over{background-color:var(--gray-700);box-shadow:inset 0 0 0 3px var(--gray-400)}.spawner{transition:background-color .2s,box-shadow .2s}.spawner-empty{border:2px dashed}.spawner-count{font-size:calc(var(--cell) * .38);color:#fff;z-index:2;text-shadow:0 0 2px #0009,0 1px 3px #00000080;pointer-events:none;font-weight:700;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.color-shape{fill:#0000004d;pointer-events:none;width:82%;height:82%;margin:auto;position:absolute;inset:0}.spawner-empty .color-shape{fill:currentColor;opacity:.35}.note-dot,.note-option{position:relative}.note-dot .color-shape{fill:#0006;width:86%;height:86%}.note-option .color-shape{width:64%;height:64%}.relation-slot{justify-content:center;align-items:center;display:flex}.relationship-clue{z-index:10;width:var(--clue-size);height:var(--clue-size);color:var(--gray-800);font-weight:700;font-size:calc(var(--clue-size) * .68);transform:rotate(var(--clue-rotate,0deg));background-color:#fff;border-radius:50%;justify-content:center;align-items:center;line-height:1;display:flex;box-shadow:0 2px 4px #0003}.relation-slot.vertical{--clue-rotate:90deg}@media (orientation:portrait){.arrow-0{grid-area:1/1;justify-content:flex-start}.arrow-1{grid-area:1/1/auto/span 2}.arrow-2{grid-area:1/2/auto/span 2}.arrow-3{grid-area:1/3/auto/span 2}.arrow-4{grid-area:1/4/auto/span 2}.arrow-5{grid-area:1/5;justify-content:flex-end}.edge-start .relationship-clue{margin-left:calc(-1 * (var(--clue-size) / 2 + var(--gap) / 2))}.edge-end .relationship-clue{margin-right:calc(-1 * (var(--clue-size) / 2 + var(--gap) / 2))}}@media (orientation:landscape){.spawner-arrow{--clue-rotate:90deg}.arrow-0{grid-area:1/1;align-items:flex-start}.arrow-1{grid-area:1/1/span 2}.arrow-2{grid-area:2/1/span 2}.arrow-3{grid-area:3/1/span 2}.arrow-4{grid-area:4/1/span 2}.arrow-5{grid-area:5/1;align-items:flex-end}.edge-start .relationship-clue{margin-top:calc(-1 * (var(--clue-size) / 2 + var(--gap) / 2))}.edge-end .relationship-clue{margin-bottom:calc(-1 * (var(--clue-size) / 2 + var(--gap) / 2))}}.note-cell{background-color:var(--gray-600);border:2px dashed var(--gray-500);cursor:pointer}.note-placeholder{color:var(--gray-400);font-size:clamp(.5rem, calc(var(--cell) * .2), .75rem)}.note-container{pointer-events:none;position:absolute;inset:0}.note-half{flex-wrap:wrap;place-content:center;gap:2px;height:50%;padding:2px 3px;display:flex;position:absolute;left:0;right:0}.note-half-top{top:0}.note-half-bottom{bottom:0}.note-divider{background:var(--gray-400);border-radius:1px;height:1px;margin-top:-.5px;position:absolute;top:50%;left:18%;right:18%}.note-dot{width:clamp(6px, calc(var(--cell) * .18), .85rem);height:clamp(6px, calc(var(--cell) * .18), .85rem);border-radius:9999px}.note-menu{z-index:60;border:1px solid var(--gray-600);border-radius:.375rem;grid-template-columns:repeat(2,1fr);gap:8px;width:120px;padding:8px;transition:background-color .15s;display:grid;position:fixed}.note-menu[data-half=top]{background-color:var(--gray-900)}.note-menu[data-half=bottom]{background-color:var(--gray-500)}.note-option{aspect-ratio:1;cursor:pointer;border:0;border-radius:50%;width:100%;transition:transform .1s,box-shadow .1s}.note-half-toggle{aspect-ratio:1;background:var(--gray-700);color:#fff;cursor:pointer;border:0;border-radius:.5rem;justify-content:center;align-items:center;width:100%;padding:0;display:flex}.half-icon{width:70%;height:70%}.half-outline{fill:none;stroke:currentColor;stroke-width:2px}.half-highlight{fill:currentColor;transition:transform .15s}.note-half-toggle[data-half=top] .half-highlight{transform:translateY(4px)}.note-half-toggle[data-half=bottom] .half-highlight{transform:translateY(12px)}.note-option.selected{transform:scale(.9);box-shadow:inset 0 0 0 3px #fff}.lock-icon{z-index:2;pointer-events:none;filter:drop-shadow(0 1px 1px #00000080);width:40%;height:40%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.footer{color:var(--gray-400);flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;display:flex}.tutorial{z-index:80;position:fixed;inset:0}.tutorial-blocker{position:fixed;inset:0}.tutorial-spotlight{border-radius:var(--radius);pointer-events:none;transition:left .2s,top .2s,width .2s,height .2s;position:fixed;box-shadow:0 0 0 9999px #000000b8,0 0 0 3px #4ade80}.tutorial-bubble{background:var(--gray-800);border:1px solid var(--gray-600);border-radius:.75rem;max-width:min(22rem,100vw - 2rem);padding:.85rem 1rem;position:fixed;box-shadow:0 10px 25px -5px #00000080}.tutorial-bubble h3{margin:0 0 .35rem;font-size:1rem}.tutorial-body{color:#d1d5db;margin:0;font-size:.875rem;line-height:1.45}.tutorial-actions{align-items:center;gap:.5rem;margin-top:.75rem;display:flex}.tutorial-progress{color:var(--gray-400);margin-right:auto;font-size:.8rem}@media (prefers-reduced-motion:reduce){.tutorial-spotlight,.piece,.half-highlight{transition:none}.piece.mistake{animation:none}}.modal{z-index:50;background:#000000bf;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-card{text-align:center;background:var(--gray-800);border:1px solid #22c55e;border-radius:1rem;padding:1.5rem;box-shadow:0 25px 50px -12px #00000080}.modal-card-help{border-color:var(--gray-600);text-align:left;max-width:34rem;max-height:85svh;overflow-y:auto}.help-body{color:#d1d5db;font-size:.9rem;line-height:1.5}.help-section+.help-section{margin-top:1.25rem}.help-section h3{color:#fff;margin:0 0 .5rem;font-size:1rem}.help-list{margin:0;padding-left:1.1rem}.help-list li+li{margin-top:.35rem}.help-legend,.help-cycle{flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:.5rem 0;display:flex}.help-cycle .note-dot{width:1.25rem;height:1.25rem}.help-legend-row,.help-cycle-step,.help-vertical-note{align-items:center;gap:.4rem;display:flex}.help-vertical-note{margin-top:.5rem}.modal-actions{justify-content:center;gap:.5rem;margin-top:1.25rem;display:flex}.modal-card h2{color:#4ade80;margin:0 0 1rem;font-size:2.25rem;font-weight:800}.modal-card p{color:#d1d5db;margin:0 0 1.5rem}