:root{--cell:min(44px, calc((100dvh - 110px) / 8), calc((100dvw - 180px) / 16));--gap:2px;--bg:#0f0f1a;--surface:#1a1a2e;--surface-2:#252540;--text:#e0e0e0;--text-dim:#888;--text-bright:#fff;--green:#66bb6a;--orange:#ffa726;--yellow:#ffee58;--blue:#42a5f5;--pink:#ec407a;--green-dark:#2e7d32;--orange-dark:#e65100;--yellow-dark:#f57f17;--blue-dark:#1565c0;--pink-dark:#ad1457}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg);width:100%;height:100dvh;color:var(--text);touch-action:manipulation;-webkit-user-select:none;user-select:none;font-family:system-ui,-apple-system,sans-serif;overflow:hidden}.game{grid-template:"header header header""board board controls"1fr/auto 1fr auto;gap:4px;width:100dvw;height:100dvh;padding:4px 8px;display:grid;overflow:auto}.header{color:var(--text-dim);grid-area:header;justify-content:space-between;align-items:center;padding:2px 8px;font-size:13px;display:flex}.header .turn{color:var(--text);font-weight:600}.header .score-display{color:var(--text-bright);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:4px;padding:2px 8px;font-family:inherit;font-size:18px;font-weight:700}.header .score-display:active{background:var(--surface-2)}.header .title{color:var(--text);letter-spacing:2px;text-transform:uppercase;font-size:15px;font-weight:700}.board-area{grid-area:board;align-items:center;gap:6px;display:flex;overflow:auto}.hearts-column{flex-direction:column;align-items:center;gap:2px;display:flex}.heart-slot{width:calc(var(--cell) * .7);height:calc(var(--cell) * .7);color:var(--pink);border:1px solid var(--surface-2);background:var(--surface);border-radius:3px;justify-content:center;align-items:center;font-size:10px;display:flex}.heart-slot.active{background:var(--pink);color:var(--bg);font-weight:700}.grid-wrapper{flex-direction:column;align-items:center;gap:1px;display:flex}.col-labels{grid-template-columns:repeat(15, var(--cell));gap:var(--gap);display:grid}.col-label{text-align:center;color:var(--text-dim);font-size:9px;font-weight:600}.col-label:nth-child(8){color:var(--text-bright)}.grid{grid-template-columns:repeat(15, var(--cell));grid-template-rows:repeat(7, var(--cell));gap:var(--gap);display:grid}.cell{cursor:default;font-size:calc(var(--cell) * .35);-webkit-tap-highlight-color:transparent;border:none;border-radius:4px;justify-content:center;align-items:center;font-weight:700;transition:transform .1s,box-shadow .1s;display:flex;position:relative}.grid>.cell:nth-child(15n+8){outline-offset:-1px;outline:2px solid #ffffff40}.cell[data-color=green]{background:var(--green);color:var(--green-dark)}.cell[data-color=orange]{background:var(--orange);color:var(--orange-dark)}.cell[data-color=yellow]{background:var(--yellow);color:var(--yellow-dark)}.cell[data-color=blue]{background:var(--blue);color:var(--blue-dark)}.cell[data-color=pink]{background:var(--pink);color:var(--pink-dark)}.cell.crossed:after{content:"✕";font-size:calc(var(--cell) * .65);color:#00000073;text-shadow:0 0 2px #ffffff4d;font-weight:900;position:absolute}.cell.valid{cursor:pointer;box-shadow:0 0 0 2px var(--text-bright), 0 0 8px #fff6;animation:1s ease-in-out infinite pulse}.cell.valid:active{transform:scale(.9)}.cell.selected{cursor:pointer;box-shadow:0 0 0 3px var(--text-bright), 0 0 14px #fff9;z-index:2;transform:scale(1.08)}@keyframes pulse{0%,to{box-shadow:0 0 0 2px var(--text-bright), 0 0 8px #ffffff4d}50%{box-shadow:0 0 0 2px var(--text-bright), 0 0 16px #fff9}}.col-scores{grid-template-columns:repeat(15, var(--cell));gap:var(--gap);display:grid}.col-score{text-align:center;color:var(--text-dim);font-size:8px;line-height:1.2}.col-score .first{color:var(--text);font-weight:700}.col-score.completed .first{color:var(--green)}.row-info{gap:var(--gap);flex-direction:column;justify-content:flex-start;padding-top:12px;display:flex}.row-label{height:var(--cell);color:var(--text-dim);justify-content:center;align-items:center;gap:2px;font-size:9px;font-weight:600;display:flex}.row-pts{color:var(--text);font-weight:700}.row-label.completed,.row-label.completed .row-pts{color:var(--green)}.score-overlay{z-index:50;background:#00000080;justify-content:flex-end;padding:32px 12px 12px;display:flex;position:fixed;inset:0}.score-popup{background:var(--surface);border:1px solid var(--surface-2);border-radius:8px;flex-direction:column;align-self:flex-start;gap:3px;min-width:140px;max-height:fit-content;padding:10px 14px;font-size:11px;display:flex;box-shadow:0 4px 24px #0009}.score-colors{justify-content:center;gap:3px;margin-bottom:3px;display:flex}.score-color .swatch{opacity:.4;border-radius:3px;justify-content:center;align-items:center;width:18px;height:18px;display:flex}.score-color.done .swatch{opacity:1}.score-color .check{color:#fff;text-shadow:0 0 2px #00000080;font-size:10px;font-weight:900}.score-line{align-items:center;gap:6px;display:flex}.score-label{color:var(--text-dim);flex:1}.score-sep{color:var(--green);text-align:center;width:12px;font-weight:700}.score-val{text-align:right;width:24px;color:var(--text);font-weight:700}.score-line.penalty .score-sep,.score-line.penalty .score-val{color:var(--pink)}.score-line.total{font-size:13px;font-weight:800}.score-line.total .score-label{color:var(--text-bright)}.score-line.total .score-val{color:#7c4dff;font-size:15px}.score-divider{border-top:1px solid var(--surface-2);margin:2px 0}.controls{flex-direction:column;grid-area:controls;justify-content:center;align-items:center;gap:6px;min-width:160px;padding:0 4px;display:flex}.dice-area{flex-direction:column;align-items:stretch;gap:4px;display:flex}.dice-group{background:var(--surface);border-radius:6px;align-items:center;gap:4px;padding:3px 6px;display:flex}.dice-group-label{color:var(--text-dim);text-align:right;flex-shrink:0;width:20px;font-size:8px}.die{cursor:pointer;-webkit-tap-highlight-color:transparent;border:2px solid #0000;border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;font-weight:800;transition:transform .15s,border-color .15s;display:flex}.die:active{transform:scale(.92)}.die.selected{border-color:var(--text-bright);box-shadow:0 0 8px #fff6}.die.color-die{background:var(--surface-2);color:var(--text)}.die.color-die[data-face=green]{background:var(--green);color:var(--green-dark)}.die.color-die[data-face=orange]{background:var(--orange);color:var(--orange-dark)}.die.color-die[data-face=yellow]{background:var(--yellow);color:var(--yellow-dark)}.die.color-die[data-face=blue]{background:var(--blue);color:var(--blue-dark)}.die.color-die[data-face=pink]{background:var(--pink);color:var(--pink-dark)}.die.color-die[data-face=wild]{background:linear-gradient(135deg, var(--green), var(--orange), var(--yellow), var(--blue), var(--pink));color:#fff}.die.number-die{color:var(--text-bright);background:#333}.die.number-die[data-face=wild]{color:#fff;background:linear-gradient(135deg,#555,#333)}.die.special-die{color:gold;background:#8b6914}.die.special-die.selected{background:#b8860b;border-color:gold;box-shadow:0 0 10px #ffd70080}.special-badge{color:gold;text-transform:uppercase;letter-spacing:1px;text-align:center;background:#b8860b;border-radius:4px;padding:3px 8px;font-size:10px;font-weight:700}.btn{cursor:pointer;text-transform:uppercase;letter-spacing:1px;-webkit-tap-highlight-color:transparent;border:none;border-radius:6px;width:100%;padding:8px 16px;font-size:12px;font-weight:700;transition:transform .1s,opacity .1s}.btn:active{transform:scale(.95)}.btn:disabled{opacity:.3;cursor:not-allowed}.btn-roll{color:#fff;background:#7c4dff}.btn-confirm{background:var(--green);color:#fff}.btn-pass{background:var(--surface-2);color:var(--text)}.btn-new{color:#fff;background:#7c4dff}.btn-row{gap:4px;width:100%;display:flex}.btn-row .btn{flex:1}.info-row{color:var(--text-dim);align-items:center;gap:8px;font-size:10px;display:flex}.info-row .val{color:var(--text);font-weight:700}.phase-hint{color:var(--text-dim);text-align:center;min-height:1.2em;font-size:10px}.game-over{z-index:100;background:#000000d9;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:fixed;inset:0}.game-over h2{color:var(--text-bright);font-size:28px;font-weight:800}.game-over .final-score{color:#7c4dff;font-size:52px;font-weight:900}.game-over .rating{color:var(--text);font-size:16px}@keyframes roll-bounce{0%{transform:rotate(0)scale(1)}25%{transform:rotate(90deg)scale(.8)}50%{transform:rotate(180deg)scale(1.1)}75%{transform:rotate(270deg)scale(.9)}to{transform:rotate(360deg)scale(1)}}.die.rolling{animation:.4s cubic-bezier(.22,1.2,.36,1) roll-bounce}.menu-screen,.lobby-screen{background:var(--bg);justify-content:center;align-items:center;width:100dvw;height:100dvh;display:flex}.menu-content,.lobby-content{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:360px;padding:24px;display:flex}.menu-title{color:var(--text-bright);letter-spacing:3px;text-transform:uppercase;font-size:32px;font-weight:900}.menu-sub{color:var(--text-dim);margin-top:-8px;font-size:13px}.menu-name{width:100%}.menu-input{border:1px solid var(--surface-2);background:var(--surface);width:100%;color:var(--text-bright);text-align:center;border-radius:6px;outline:none;padding:10px 14px;font-family:inherit;font-size:14px}.menu-input:focus{border-color:#7c4dff}.menu-input::placeholder{color:var(--text-dim)}.code-input{letter-spacing:6px;text-transform:uppercase;font-size:20px;font-weight:700}.menu-buttons{gap:8px;width:100%;display:flex}.btn-menu{flex:1;padding:14px 12px;font-size:13px}.btn-solo{background:var(--green);color:#fff}.btn-create{color:#fff;background:#7c4dff}.btn-join{background:var(--surface-2);color:var(--text)}.menu-join{align-items:center;gap:8px;width:100%;display:flex}.menu-join .menu-input{flex:1}.btn-go{color:#fff;background:#7c4dff;width:auto;padding:10px 20px}.lobby-title{color:var(--text-bright);text-transform:uppercase;letter-spacing:2px;font-size:22px;font-weight:800}.lobby-code{flex-direction:column;align-items:center;gap:4px;display:flex}.code-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;font-size:11px}.code-value{letter-spacing:8px;color:#7c4dff;font-size:32px;font-weight:900}.lobby-share{width:100%}.btn-share{background:var(--surface-2);color:var(--text)}.lobby-players{background:var(--surface);border-radius:8px;width:100%;padding:12px}.lobby-players h3{color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:11px}.lobby-player{color:var(--text);align-items:center;gap:8px;padding:6px 0;font-size:14px;display:flex}.lobby-player.me{color:var(--text-bright);font-weight:700}.player-dot{background:var(--green);border-radius:50%;flex-shrink:0;width:8px;height:8px}.lobby-waiting{color:var(--text-dim);text-align:center;padding:8px 0;font-size:12px}.lobby-actions{flex-direction:column;gap:8px;width:100%;display:flex}.btn-start{background:var(--green);color:#fff}.btn-leave{background:var(--surface-2);color:var(--text-dim);font-size:11px}.waiting-badge{background:var(--surface);color:var(--text-dim);text-align:center;border-radius:6px;width:100%;padding:8px 14px;font-size:11px;font-weight:600;animation:2s ease-in-out infinite pulse-dim}@keyframes pulse-dim{0%,to{opacity:.6}50%{opacity:1}}.leaderboard{background:var(--surface);border-radius:8px;width:240px;padding:8px 12px}.lb-row{color:var(--text);align-items:center;gap:8px;padding:4px 0;font-size:14px;display:flex}.lb-row.me{color:#7c4dff;font-weight:700}.lb-rank{width:24px;color:var(--text-dim);font-weight:700}.lb-name{flex:1}.lb-score{font-weight:800}.install-banner{background:var(--surface);color:var(--text);z-index:200;border-top:1px solid var(--surface-2);justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;font-size:12px;display:flex;position:fixed;bottom:0;left:0;right:0}.install-banner button{color:var(--text-dim);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:4px 8px;font-size:16px}