:root{--text:#6b6375;--text-h:#08060d;--fg:#111;--bg:#eee;--border:#e5e4e7;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--tile-bg:#f4f0e8;--tile-bg-hover:#ede8db;--solo-bg:#3b82f61a;--solo-border:#3b82f659;--turn-bg:#22c55e1f;--turn-border:#22c55e66;--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);--content-width:min(480px, calc(100vw - 32px));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) and (height<=500px){: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;--fg:#eee;--bg:#111;--border:#2e303a;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--tile-bg:#3a2a1c;--tile-bg-hover:#4a3726;--solo-bg:#60a5fa24;--solo-border:#60a5fa66;--turn-bg:#4ade8024;--turn-border:#4ade8073;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#move-error{color:#ffd966;background:#3a2e00;border-color:#a07800}#create-error{color:#ff7675}}*{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) and (height<=500px){body{grid-template:"board score""board controls"1fr/1fr auto}}body[data-status=home]{flex-direction:column;align-items:center;padding-top:10vh;display:flex}#scoreboard{width:var(--board-size);flex-wrap:wrap;grid-area:score;align-items:center;gap:16px;margin:0 auto;padding:8px 0;display:flex}#scoreboard .player.me{text-decoration:underline}#scoreboard .player-name[contenteditable]{cursor:text;border-bottom:1px dashed;outline:none}#scoreboard .player-name[contenteditable]:focus{border-bottom-color:var(--accent);color:var(--text-h)}#scoreboard .player.current{color:var(--text-h);font-weight:600}#scoreboard .player.current:before{content:"▶ ";color:var(--accent);vertical-align:middle;font-size:.6em}#scoreboard #bag-count{place-items:center;width:2em;height:2em;margin-left:auto;display:inline-grid;position:relative}#scoreboard #bag-count .bag-icon{background-color:var(--fg);transform-origin:50% 65%;position:absolute;inset:0;transform:rotate(-30deg);-webkit-mask:url(/games/wizords/bag.svg) 50%/contain no-repeat;mask:url(/games/wizords/bag.svg) 50%/contain no-repeat}#scoreboard #bag-count .bag-num{z-index:1;font-size:.8em;font-weight:600;position:absolute;top:65%;left:50%;transform:translate(-50%,-50%)}main{grid-area:board;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}#game-selection,#gameplay,#game-outcome{display:contents}#game-selection{flex-direction:column;align-items:center;gap:8px;width:100%;margin:0;padding:0;list-style:none;display:flex}#game-list{margin:0;padding:1em 0 0;list-style:none}#home{width:var(--content-width);margin:0 auto}#title-bar{color:var(--fg);flex-direction:row;justify-content:space-between;display:flex}#title-bar img{cursor:pointer;width:28px;height:28px;margin:auto 0;display:block}#logged-out-msg{color:var(--text);text-align:center;margin:16px 0 0;font-size:.95em}#login-trigger{border:1px solid var(--border);width:fit-content;color:var(--text-h);font:inherit;cursor:pointer;background:0 0;border-radius:999px;margin:12px auto 0;padding:8px 18px;transition:background .12s;display:block}#login-trigger[hidden]{display:none}#login-trigger:hover{background:var(--tile-bg-hover)}#new-game-btn{background:var(--accent);width:fit-content;color:var(--bg);font:inherit;cursor:pointer;border:none;border-radius:999px;margin:16px 0 0 auto;padding:10px 20px;font-weight:600;transition:transform 50ms;display:block}#new-game-btn[hidden]{display:none}#new-game-btn:active{transform:scale(.97)}#game-selection ul li{width:var(--content-width);background:var(--tile-bg);border:1px solid var(--border);border-radius:999px;transition:background .12s;display:block}#game-selection ul li:hover{background:var(--tile-bg-hover)}#game-selection ul li.solo{background:var(--solo-bg);border-color:var(--solo-border)}#game-selection ul li.my-turn{background:var(--turn-bg);border-color:var(--turn-border)}#game-selection ul li a{color:inherit;align-items:center;gap:12px;padding:10px 18px;text-decoration:none;display:flex}#game-selection ul li a span:first-child{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text-h);flex:auto;overflow:hidden}#game-selection ul li a span:last-child{white-space:nowrap;color:var(--text);font-variant-numeric:tabular-nums;flex:none;font-size:.85em}#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) and (height<=500px){#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) and (height<=500px){#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{border:2px solid var(--fg);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;margin:0;padding:1em;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}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,#controls,#game-auth),body:not([data-status=waiting]) #start,body[data-is-creator=false] #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{z-index:4;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%)}.popover-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.popover-header h2{color:var(--text-h);margin:0;font-size:1.2em}.popover-close{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.25em .4em;font-size:1em;line-height:1}.popover-close:hover{background:var(--accent-bg);color:var(--text-h)}#about-popover,#game-creation-popover,#login-popover{background:var(--bg);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;width:min(360px,90vw);padding:28px 32px}#about-popover{width:min(480px,90vw);max-height:min(600px,80vh)}#about-popover:popover-open{flex-direction:column;display:flex}#about-popover .popover-header{flex:none}#about-popover::backdrop,#game-creation-popover::backdrop,#login-popover::backdrop{background:#00000073}#login-popover-copy{margin:0 0 20px;font-size:.95em;line-height:1.5}#home-auth{justify-content:center;display:flex}#about-content{flex:auto;font-size:.95em;line-height:1.5;overflow-y:auto}#about-content p{margin:0 0 .8em}#about-content p:last-child{margin-bottom:0}#about-content a{color:var(--accent)}#about-content .verbatim{font-family:var(--mono);background:var(--tile-bg);border:1px solid var(--border);border-radius:4px;padding:.1em .4em;font-size:.9em}#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}.auth-area{width:var(--board-size);justify-content:flex-end;align-items:center;min-height:40px;margin:4px auto 12px;display:flex}#game-auth{min-height:0;margin:0}#game-auth:empty{display:none}.signed-in{align-items:center;gap:10px;font-size:.9em;display:inline-flex}.signed-in-name{color:var(--text-h);font-weight:600}.sign-out-btn{color:var(--text);border:1px solid var(--border);font:inherit;cursor:pointer;background:0 0;border-radius:6px;padding:4px 10px;font-size:.85em}.sign-out-btn:hover{border-color:var(--accent-border);color:var(--accent)}
