/* كود نيمز: red against teal-blue */
.teams{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.teamBox{position:relative;overflow:hidden;border-radius:12px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.teamBox.t-r{background:var(--red);color:var(--clarity)}
.teamBox.t-b{background:var(--teal);color:var(--resolve)}
.teamBox.on{outline:3px solid var(--resolve);outline-offset:2px}
.tb-head{display:flex;justify-content:space-between;align-items:center;gap:6px}
.tb-names{display:flex;flex-direction:column;gap:2px;font-size:14px;min-width:0}
.tb-names span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-names em{font-style:normal;font-size:11px;color:var(--resolve);background:var(--gold);border-radius:999px;padding:0 6px;margin-left:6px}
.pips{display:flex;gap:3px;direction:ltr}
.pips i{width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor}
.pips i.got{background:currentColor}
.tvTag.t-r{background:var(--red);border-color:var(--red);color:var(--clarity)}.tvTag.t-b{background:var(--teal);border-color:var(--teal);color:var(--resolve)}
.clueBar{border-radius:12px;padding:10px 14px;text-align:center;line-height:1.5}
.clueBar.t-r{background:var(--red);color:var(--clarity)}
.clueBar.t-b{background:var(--teal);color:var(--resolve)}
.clueBar b{font-family:var(--display);font-size:20px}
.clueBar span{font-size:14px;opacity:.9}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tile{min-height:62px;border-radius:10px;background:var(--surface);color:var(--ink);font-weight:700;font-size:16px;line-height:1.3;padding:6px;display:grid;place-items:center;text-align:center;box-shadow:0 2px 0 var(--land);border:2px solid transparent;transition:transform .12s;overflow-wrap:anywhere}
.tile[data-act]{cursor:pointer}
.tile[data-act]:hover{transform:translateY(-2px)}
.tile.sel{border-color:var(--auth);transform:scale(1.05);box-shadow:0 0 0 3px var(--auth)}
.tile.hint-r{box-shadow:inset 0 0 0 5px var(--team-r)}
.tile.hint-b{box-shadow:inset 0 0 0 5px var(--team-b)}
.tile.hint-n{background:var(--sunk)}
.tile.hint-x{background:var(--resolve);color:var(--coral);box-shadow:inset 0 0 0 3px var(--red)}
.tile.rev-r{background:var(--red);color:var(--clarity)}
.tile.rev-b{background:var(--teal);color:var(--resolve)}
.tile.rev-n{background:var(--land);color:var(--muted);box-shadow:none}
.tile.rev-x{background:var(--resolve);color:var(--coral);border-color:var(--red)}
.tile.rev-r,.tile.rev-b,.tile.rev-n,.tile.rev-x{text-decoration:none;opacity:.95}
.tile.flip{animation:flip .5s ease both}
.nums{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.waiting{text-align:center;color:var(--muted)}
.btn.tr:not(.ghost){background:var(--red);color:var(--clarity)}
.btn.tb:not(.ghost){background:var(--teal);color:var(--resolve)}
.codeArena{display:grid;grid-template-columns:280px minmax(0,1fr) 280px;gap:28px;align-items:start}
.cmid{display:flex;flex-direction:column;gap:18px}
body.tv .board{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
/* five words to a row: the size follows the screen width so a long word stays on one line */
body.tv .tile{min-height:min(190px,calc((100vh - 360px)/3));font-size:clamp(18px,2.3vw,38px);border-radius:16px;word-break:keep-all;overflow-wrap:normal}
body.tv .clueBar{font-size:26px;padding:16px}
body.tv .clueBar b{font-size:44px}
body.tv .clueBar span{font-size:22px}
body.tv .teamBox{padding:24px 18px 16px;gap:10px}
body.tv .tb-head b{font-size:26px}
body.tv .tb-names{font-size:22px}
body.tv .tb-names em{font-size:15px}
body.tv .pips i{width:18px;height:18px}
body.tv .teams{gap:16px}