:root{--text:#6b6375;--text-h:#08060d;--bg:#eee;--border:#e5e4e7;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--tile-bg:#f4f0e8;--tile-bg-hover:#ede8db;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;--rack-cell:min(calc((100vw - 24px) / 7), 72px);--board-size:min(100vw, calc(100vh - var(--rack-cell) * 2 - 90px));--cell-size:calc((var(--board-size) - 32px) / 15);font:18px/145% var(--sans);color:var(--text);background:var(--bg);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (orientation:landscape){:root{--board-size:min(calc(100vh - 32px), calc((100vw - 60px) * 15 / 22));--rack-cell:min(calc((100vw - var(--board-size) - 48px) / 7), 72px)}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--tile-bg:#3a2a1c;--tile-bg-hover:#4a3726;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}}*{box-sizing:border-box}html{height:100%}body{grid-template:"score""."1fr"board""rack""actions""."1fr/1fr;height:100vh;margin:0;display:grid}@media (orientation:landscape){body{grid-template:"board score""board controls"1fr/1fr auto}}header#scoreboard{flex-wrap:wrap;grid-area:score;align-items:center;gap:16px;padding:8px 16px;display:flex}header#scoreboard .player.me{text-decoration:underline}header#scoreboard .player-name[contenteditable]{cursor:text;border-bottom:1px dashed;outline:none}header#scoreboard .player-name[contenteditable]:focus{border-bottom-color:var(--accent);color:var(--text-h)}header#scoreboard .player.current{color:var(--text-h);font-weight:600}header#scoreboard .player.current:before{content:"▶ ";color:var(--accent);vertical-align:middle;font-size:.6em}main{grid-area:board;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}footer#controls{display:contents}#rack{grid-area:rack;justify-self:center;margin:8px 0}#actions{flex-direction:row;grid-area:actions;justify-self:center;gap:10px;padding:8px 0;display:flex}.icon-btn,.label-btn{--icon:none;height:calc(var(--rack-cell) + 8px);cursor:pointer;border:1px solid #0000;border-radius:10px;align-items:center;transition:background .12s,opacity .12s,transform 50ms;display:inline-flex}:is(.icon-btn,.label-btn):before{content:"";-webkit-mask:var(--icon) center / contain no-repeat;mask:var(--icon) center / contain no-repeat;-webkit-mask:var(--icon) center / contain no-repeat;background:currentColor}:is(.icon-btn,.label-btn):focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon-btn{width:calc(var(--rack-cell) + 8px);background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent);justify-content:center;padding:0}.icon-btn:before{width:60%;height:60%}.icon-btn:hover{background:var(--accent);color:#fff}.icon-btn:active{transform:scale(.94)}#play{--icon:url(/games/wizords/chevron-right.svg)}#clear{--icon:url(/games/wizords/chevron-down.svg)}#shuffle{--icon:url(/games/wizords/refresh.svg)}#pass{--icon:url(/games/wizords/annoyed.svg)}body[data-my-turn=false] :is(#play,#pass){border-color:var(--border);color:var(--text);pointer-events:none;background:0 0}.label-btn{background:var(--accent);color:#fff;font:inherit;gap:8px;padding:0 18px;font-weight:600}.label-btn:before{width:1.1em;height:1.1em}.label-btn:hover{opacity:.88}.label-btn:active{transform:scale(.97)}#start{--icon:url(/games/wizords/play.svg)}@media (orientation:landscape){footer#controls{flex-direction:column;grid-area:controls;align-items:center;gap:12px;padding:8px 12px;display:flex}#rack{margin:0}#actions{padding:0}}body[data-status=finished] #controls{display:none}#final-scores{background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:12px;flex-direction:column;grid-area:rack;justify-self:center;gap:8px;min-width:240px;margin:8px 0;padding:16px 20px;display:none}body[data-status=finished] #final-scores{display:flex}#final-scores h2{text-align:center;color:var(--text-h);margin:0 0 4px;font-size:1rem}#final-scores-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.final-score-row{border-radius:6px;justify-content:space-between;gap:24px;padding:4px 8px;display:flex}.final-score-row .score{font-variant-numeric:tabular-nums;font-weight:600}.final-score-row.me .name{text-decoration:underline}.final-score-row.winner{background:var(--accent);color:#fff}@media (orientation:landscape){#final-scores{grid-area:controls}}#board{grid-template-columns:repeat(var(--cols), 1fr);grid-template-rows:repeat(var(--rows), 1fr);background:var(--border);border:2px solid var(--border);width:var(--board-size);height:var(--board-size);transform-origin:0 0;touch-action:none;gap:2px;display:grid}.cell{background:var(--bg);min-height:0;font-size:calc(var(--cell-size) * .35);color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;font-weight:600;display:flex}.cell:hover{background:var(--accent-bg)}.cell[data-bonus=DL]{color:#1a5a8a;background:#b3d9f5}.cell[data-bonus=TL]{color:#fff;background:#4a9fd4}.cell[data-bonus=DW]{color:#8a1a1a;background:#f5b3b3}.cell[data-bonus=TW]{color:#fff;background:#d44a4a}.cell[data-center]{box-shadow:inset 0 0 0 2px var(--accent)}.cell.filled{background:var(--tile-bg);cursor:default}.cell.filled:hover{background:var(--tile-bg)}.cell.filled{--tile-size:var(--cell-size)}.rack-tile{--tile-size:var(--rack-cell)}:is(.cell.filled,.rack-tile) .letter{font-size:calc(var(--tile-size) * .55);color:var(--text-h);line-height:1}:is(.cell.filled,.rack-tile) .value{font-size:calc(var(--tile-size) * .27);color:var(--text);margin-right:calc(var(--tile-size) * .05);align-self:flex-end;line-height:1}#rack{display:grid}#rack-slots,#rack-tiles{grid-area:1/1;grid-template-columns:repeat(7, var(--rack-cell));gap:2px;display:grid}#rack-tiles{z-index:1}.rack-slot{width:var(--rack-cell);height:var(--rack-cell);background:var(--accent-bg);border:1px solid var(--accent-border)}.rack-tile{background:var(--tile-bg);width:var(--rack-cell);height:var(--rack-cell);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;flex-direction:column;justify-content:center;align-items:center;font-weight:600;display:flex}.rack-tile:hover{background:var(--tile-bg-hover)}.rack-tile.selected{outline:2px solid var(--accent);outline-offset:-2px}.rack-tile.dragging{opacity:.3}.drag-ghost{--tile-size:var(--cell-size);width:var(--cell-size);height:var(--cell-size);pointer-events:none;z-index:3;opacity:.92;position:fixed;top:0;left:0;transform:translate(-50%,-50%);box-shadow:0 4px 12px #00000059}.cell.drop-target{background:var(--accent-bg);box-shadow:inset 0 0 0 2px var(--accent)}#status-msg{z-index:2;background-color:var(--bg);text-align:center;opacity:1;border:1px solid #000;border-radius:.5em;grid-area:board;place-self:center;margin:0;padding:1em;display:none}body:is([data-status=waiting],[data-status=finished]) #status-msg{display:block}body:not([data-status=home]) #home,body[data-status=home] :is(#scoreboard,main,footer#controls),body:not([data-status=waiting]) #start,body:not([data-status=active]) :is(#play,#clear,#shuffle,#pass){display:none}#blank-picker{border:1px solid var(--accent-border);box-shadow:var(--shadow);border-radius:8px;padding:16px}.blank-picker-label{color:var(--text);margin:0 0 10px;font-size:.85em}#blank-picker-grid{max-width:calc(7 * (var(--cell-size) + 4px));flex-wrap:wrap;gap:4px;display:flex}#blank-picker-grid button{width:var(--cell-size);height:var(--cell-size);font-size:calc(var(--cell-size) * .45);background:var(--tile-bg);border:1px solid var(--border);cursor:pointer;border-radius:4px;font-weight:600}#blank-picker-grid button:hover{background:var(--tile-bg-hover)}#move-error{color:#856404;box-shadow:var(--shadow);cursor:pointer;text-align:center;background:#fff3cd;border:1px solid #ffc107;border-radius:8px;max-width:80%;padding:12px 20px;font-size:.9em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (prefers-color-scheme:dark){#move-error{color:#ffd966;background:#3a2e00;border-color:#a07800}}#create-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}#create-header h2{color:var(--text-h);margin:0;font-size:1.2em}#create-close{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.25em .4em;font-size:1em;line-height:1}#create-close:hover{background:var(--accent-bg);color:var(--text-h)}#create-popover{background:var(--bg);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;width:min(360px,90vw);padding:28px 32px}#create-popover::backdrop{background:#00000073}#create-form{flex-direction:column;gap:8px;display:flex}#create-form label{color:var(--text);font-size:.85em}#create-form select,#create-form input[type=password]{border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text-h);font:inherit;border-radius:6px;margin-bottom:8px;padding:8px 10px;font-size:.95em}:is(#create-form select,#create-form input[type=password]):focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:#0000}#create-form #create-error{color:#c0392b;padding:6px 0;font-size:.85em}#create-form #create-error[hidden]{display:none}#create-form #create-btn{background:var(--accent);color:#fff;font:inherit;cursor:pointer;border:none;border-radius:6px;margin-top:4px;padding:10px;font-size:.95em;font-weight:600}#create-form #create-btn:hover{opacity:.88}#create-form #create-btn:disabled{opacity:.55;cursor:default}@media (prefers-color-scheme:dark){#create-error{color:#ff7675}}
