:root{
  --bg:#0c111d; --panel:#151e30; --panel2:#1b263b; --line:#2d3a56; --text:#f5f7fb; --muted:#aeb8cc;
  --accent:#24d18f; --danger:#ff5b68; --warn:#ffd166; --tile:#f6d08a; --tileText:#3c2407;
  --tw:#e94b7a; --dw:#ffa0b7; --tl:#4ca3ff; --dl:#9ed0ff; --st:#ffe66d;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;overflow:hidden}
button,input,select{font:inherit}
button{border:0;border-radius:14px;padding:10px 12px;font-weight:850;cursor:pointer;background:var(--accent);color:#07130e;box-shadow:0 8px 20px #0004}button:disabled{opacity:.45;filter:grayscale(.4);cursor:not-allowed}
button.secondary{background:#2a3550;color:#fff;border:1px solid #3a4a70}
button.danger{background:var(--danger);color:#fff}
button.warn{background:var(--warn);color:#2a1d00}
button.small{font-size:12px;padding:7px 9px;border-radius:10px}
input{width:100%;padding:14px 16px;border-radius:16px;border:1px solid #33415f;background:#0d1424;color:#fff;outline:none} input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #24d18f33}
a{color:#8fd7ff}.hidden{display:none!important}.muted{color:var(--muted)}
.topbar{height:50px;display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:#0a0f1b;border-bottom:1px solid #24314a;gap:8px;flex-shrink:0}.brand{font-weight:950;letter-spacing:.04em}.brand small{color:var(--muted);font-size:11px;margin-left:5px}.pill{border-radius:999px;background:#1c2740;border:1px solid #33415f;padding:7px 10px;font-size:12px;font-weight:850}.turn-pill{background:#1b3a2f;border-color:#2ed59a;color:#dffff2}.wait-pill{background:#3a2f1a;border-color:#ffd166;color:#fff0be}
.board{display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);gap:2px;aspect-ratio:1/1;width:min(100%,100%);height:auto;max-height:100%;margin:auto;touch-action:manipulation}.cell{position:relative;border:1px solid rgba(255,255,255,.13);border-radius:5px;display:flex;align-items:center;justify-content:center;background:#172238;overflow:hidden;min-width:0}.cell .special{font-size:clamp(7px,1.25vw,13px);font-weight:950;color:#ffffffcc;line-height:1;text-align:center}.cell.tw{background:linear-gradient(135deg,var(--tw),#a81945)}.cell.dw{background:linear-gradient(135deg,var(--dw),#a94d64)}.cell.tl{background:linear-gradient(135deg,var(--tl),#135ea7)}.cell.dl{background:linear-gradient(135deg,var(--dl),#3679a8)}.cell.st{background:linear-gradient(135deg,var(--st),#c79600)}
.tile{width:88%;height:88%;border-radius:6px;background:linear-gradient(145deg,#ffe0a5,var(--tile));color:var(--tileText);display:flex;align-items:center;justify-content:center;font-weight:950;box-shadow:inset 0 -2px 0 #b67b2a,0 4px 10px #0005;position:relative;user-select:none}.tile .letter{font-size:clamp(13px,2.2vw,28px);line-height:1}.tile .value{position:absolute;right:4px;bottom:2px;font-size:clamp(7px,1vw,11px);font-weight:950}.tile.ghost{opacity:.45;filter:saturate(.7)}.tile.selected{outline:3px solid #24d18f;transform:translateY(-2px)}
.rack{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:nowrap}.rack .tile{width:clamp(32px,11.8vw,52px);height:clamp(32px,11.8vw,52px);flex:0 0 auto}.rack .tile .letter{font-size:clamp(18px,6vw,28px)}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#0d1424;border:1px solid #35517c;color:#fff;border-radius:18px;padding:12px 16px;z-index:50;box-shadow:0 12px 40px #0008;max-width:90vw;text-align:center;font-weight:800}.toast.err{border-color:#ff5b68;background:#271219}.toast.ok{border-color:#24d18f;background:#10241d}
.score-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.score-card.current{border-color:var(--accent);box-shadow:0 0 0 2px #24d18f33}.score-name{font-size:clamp(13px,1.5vw,20px);font-weight:950;line-height:1.05;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.score-points{font-size:clamp(20px,2.6vw,38px);font-weight:1000;color:#fff}.timer{font-variant-numeric:tabular-nums;color:#a7f3d0;font-weight:850}.legend{display:flex;gap:6px;flex-wrap:wrap;font-size:11px;color:#dfe6f6}.legend span{background:#10192b;border:1px solid #33415f;border-radius:999px;padding:4px 7px}
@media (max-width:480px){.topbar{height:44px;padding:6px 8px}.brand{font-size:14px}.pill{font-size:11px;padding:6px 8px}.cell{border-radius:3px;gap:1px}.board{gap:1.5px}.cell .special{font-size:7px}.tile{border-radius:4px}.tile .value{right:2px;bottom:1px;font-size:7px}}

/* v3: colores por participante y marcadores más claros */
.score-card{position:relative;overflow:hidden;border-left:8px solid var(--pcolor,var(--line));background:linear-gradient(135deg, color-mix(in srgb, var(--pcolor,#24d18f) 18%, #151e30), #121b2e 68%)}
.score-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--pcolor,transparent);opacity:.9}
.score-card.current{border-color:var(--pcolor,var(--accent));box-shadow:0 0 0 3px color-mix(in srgb, var(--pcolor,#24d18f) 48%, transparent),0 0 28px color-mix(in srgb, var(--pcolor,#24d18f) 38%, transparent)}
.score-card.current .score-name::after{content:"  • TURNO";font-size:.7em;color:var(--pcolor,#24d18f);letter-spacing:.05em;white-space:nowrap}
.score-name{font-size:clamp(15px,1.7vw,24px)}
.score-points{font-size:clamp(24px,3.1vw,48px);text-shadow:0 2px 8px #0008}
.player-dot{display:inline-block;width:.8em;height:.8em;border-radius:50%;background:var(--pcolor,#24d18f);box-shadow:0 0 12px var(--pcolor,#24d18f);margin-right:.35em;vertical-align:-.05em}
.turn-pill{background:color-mix(in srgb, var(--player-color,#24d18f) 28%, #10251f);border-color:var(--player-color,#24d18f);box-shadow:0 0 0 2px color-mix(in srgb, var(--player-color,#24d18f) 30%, transparent);color:#fff}
.wait-pill{background:#241f13;border-color:#ffd166;color:#fff0be}

/* v4: fichas tentativas más visibles y con color del participante cuando está disponible */
.tile.ghost{
  opacity:.46;
  filter:saturate(.72);
  outline:2px dashed color-mix(in srgb,var(--pcolor,#24d18f) 70%,#ffffff);
  box-shadow:inset 0 -2px 0 #b67b2a,0 0 16px color-mix(in srgb,var(--pcolor,#24d18f) 38%,transparent);
}


/* v10: brillo temporal para la palabra recién formada */
.tile.glow{
  animation:scrabbleWordGlow 1s ease-in-out 0s 4;
  z-index:3;
  outline:3px solid #fff4a3;
  box-shadow:
    inset 0 -2px 0 #b67b2a,
    0 0 0 3px color-mix(in srgb,var(--pcolor,#ffd700) 45%,#ffffff),
    0 0 26px color-mix(in srgb,var(--pcolor,#ffd700) 72%,transparent),
    0 0 46px rgba(255,215,0,.58);
}
.cell:has(.tile.glow){overflow:visible;z-index:4}
@keyframes scrabbleWordGlow{
  0%,100%{transform:scale(1);filter:brightness(1) saturate(1)}
  45%{transform:scale(1.12);filter:brightness(1.55) saturate(1.45)}
}