:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f5f3ee;--panel:#fff;--text:#222;--muted:#666;--border:#ccc;--red:#d13b2f;--yellow:#e0b800;--green:#3f9142;--blue:#2f6fd1;--accent:#222}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,sans-serif}h1,h2{margin:0 0 .5em}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed}#app{width:90%;max-width:1600px;margin:0 auto;padding:1rem}#landing{flex-wrap:wrap;gap:2rem;display:flex}#landing form{background:var(--panel);border:1px solid var(--border);border-radius:8px;flex-direction:column;flex:1;gap:.5rem;min-width:220px;padding:1rem;display:flex}#landing input{padding:.5rem;font-size:1rem}#landing button{padding:.5rem}#lobby{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:1rem}#lobby-players{padding:0;list-style:none}#lobby-players li{padding:.25rem 0}#game-header{background:var(--panel);border:1px solid var(--border);border-radius:8px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;margin-bottom:1rem;padding:.75rem 1rem;display:grid}#turn-banner{align-items:center;min-height:2.8em;font-weight:600;line-height:1.4;display:flex}#dice-row{--die-size:2rem;--die-gap:.35rem;justify-content:flex-end;align-items:center;gap:var(--die-gap);min-width:calc(5 * var(--die-size) + 4 * var(--die-gap));min-height:var(--die-size);display:flex}.die{width:var(--die-size);height:var(--die-size);color:#fff;background:#999;border-radius:6px;justify-content:center;align-items:center;font-weight:700;display:inline-flex}.die-white{color:#222;border:1px solid var(--border);background:#eee}.die-red{background:var(--red)}.die-yellow{background:var(--yellow);color:#222}.die-green{background:var(--green)}.die-blue{background:var(--blue)}#game-body{flex-direction:column;gap:1rem;display:flex}.board{--cell-size:2.5rem;--cell-gap:.25rem;--cell-font:1rem;--row-gap:.4rem}.board.mini{--cell-size:1.6rem;--cell-gap:.15rem;--cell-font:.8rem;--row-gap:.2rem}#own-board{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:1rem}#own-board-header{align-items:baseline;gap:.5rem;margin-bottom:.75rem;display:flex}#own-board-header h2{margin:0}.penalty-count{color:var(--muted)}.penalty-count:before{content:"— "}.row{align-items:center;gap:var(--cell-gap);margin-bottom:var(--row-gap);display:flex}.row:last-child{margin-bottom:0}.cell{width:var(--cell-size);height:var(--cell-size);font-size:var(--cell-font);font-variant-numeric:tabular-nums;color:color-mix(in srgb, var(--cell-colour) 55%, var(--text));background:color-mix(in srgb, var(--cell-colour) 14%, var(--panel));border:1.5px solid #0000;border-color:color-mix(in srgb, var(--cell-colour) 48%, var(--panel));border-radius:4px;justify-content:center;align-items:center;font-weight:700;display:inline-flex;position:relative}.cell-red{--cell-colour:var(--red)}.cell-yellow{--cell-colour:var(--yellow)}.cell-green{--cell-colour:var(--green)}.cell-blue{--cell-colour:var(--blue)}.cell.circle{background:linear-gradient(to bottom, transparent calc(50% - 1px), color-mix(in srgb, var(--text) 45%, transparent) calc(50% - 1px), color-mix(in srgb, var(--text) 45%, transparent) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom, color-mix(in srgb, var(--cell-colour) 16%, var(--panel)) 50%, color-mix(in srgb, var(--cell-colour-2) 16%, var(--panel)) 50%);border-color:color-mix(in srgb, var(--cell-colour) 40%, var(--cell-colour-2) 60%);border-radius:50%}.cell.circle.clickable{background:var(--panel);border:2px solid color-mix(in srgb, var(--cell-colour) 50%, var(--cell-colour-2));cursor:pointer}.cell.circle.marked{background:linear-gradient(to bottom, transparent calc(50% - 1px), #ffffff8c calc(50% - 1px), #ffffff8c calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom, var(--cell-colour) 50%, var(--cell-colour-2) 50%);color:#fff;border-color:#0000}.cell.circle.passed{background:color-mix(in srgb, var(--border) 45%, var(--panel));border-color:color-mix(in srgb, var(--border) 85%, var(--panel));color:var(--muted)}.cell.circle.hint{background:var(--panel);border:2px dashed color-mix(in srgb, var(--cell-colour) 40%, var(--cell-colour-2))}.cell.clickable{background:var(--panel);border:2px solid var(--cell-colour);color:color-mix(in srgb, var(--cell-colour) 82%, black);cursor:pointer;box-shadow:0 1px 0 color-mix(in srgb, var(--cell-colour) 30%, transparent)}.cell.clickable:hover{transform:translateY(-1px)}.cell.hint{background:color-mix(in srgb, var(--cell-colour) 12%, var(--panel));border:2px dashed color-mix(in srgb, var(--cell-colour) 55%, var(--panel));color:color-mix(in srgb, var(--cell-colour) 55%, var(--text))}.cell.hint:after{content:"";background:var(--cell-colour);border-radius:50%;width:5px;height:5px;position:absolute;top:3px;right:3px}.cell.marked{background:var(--cell-colour);border-color:var(--cell-colour);color:#fff}.cell-yellow.marked{color:#222}.cell.marked:before{content:"";opacity:.55;background:currentColor;height:2px;position:absolute;top:50%;left:12%;right:12%;transform:rotate(-9deg)}.cell.passed{background:color-mix(in srgb, var(--border) 45%, var(--panel));border-color:color-mix(in srgb, var(--border) 85%, var(--panel));color:var(--muted)}.cell.locked{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--border) 70%, var(--panel)), color-mix(in srgb, var(--border) 70%, var(--panel)) 3px, color-mix(in srgb, var(--border) 35%, var(--panel)) 3px, color-mix(in srgb, var(--border) 35%, var(--panel)) 7px);border-color:color-mix(in srgb, var(--border) 95%, var(--panel));color:color-mix(in srgb, var(--muted) 90%, var(--panel))}.lock-cell{width:var(--cell-size);height:var(--cell-size);justify-content:center;align-items:center;display:inline-flex;position:relative}.lock-cell .icon{font-size:calc(var(--cell-size) * .44);opacity:.28;z-index:1;position:relative}.lock-cell.marked .icon{opacity:1}.lock-cell:after{content:"";background:var(--cell-colour);border-radius:2px;height:4px;position:absolute;bottom:3px;left:22%;right:22%}#roster{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:1rem}#roster ul{flex-wrap:wrap;gap:.75rem;margin:0;padding:0;list-style:none;display:flex}.player-card{border:1px solid var(--border);border-radius:6px;padding:.5rem .6rem}.player-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.player-card.offline{opacity:.55}.player-label{margin-bottom:.4rem;font-size:.85rem;font-weight:600;display:block}#own-board-play{align-items:flex-start;gap:1rem;display:flex}#actions{flex-direction:column;align-items:flex-start;gap:.5rem;display:flex}#actions button{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:6px;height:2.5rem;padding:0 1rem}#game-over{background:var(--panel);border:1px solid var(--border);border-radius:8px;margin-bottom:1rem;padding:1rem}#final-scores{padding-left:1.5rem}.toast{color:#fff;z-index:10;background:#b3261e;border-radius:6px;padding:.6rem 1rem;position:fixed;top:1rem;left:50%;transform:translate(-50%)}#disconnected-overlay{color:#fff;text-align:center;z-index:20;background:#0009;justify-content:center;align-items:center;padding:2rem;display:flex;position:fixed;inset:0}