/* AI Games — hub, AI players, and the Scrabble table. Tokens come from /shared/bodek.css + tools.css. */
.gm-kind { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); flex-shrink: 0; }
.gm-how li + li { margin-top: .35rem; }
.gm-model { max-width: 320px; }
.gm-conn .bt-saved-name { white-space: normal; }

/* Table layout */
.gm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
@media (max-width: 991px) { .gm-layout { grid-template-columns: 1fr; } }
.gm-boardwrap { min-width: 0; }
.gm-status { font-size: .95rem; }

/* Board */
.gm-board { display: grid; grid-template-columns: repeat(15, 1fr); gap: 2px; width: 100%; max-width: 640px; aspect-ratio: 1 / 1; padding: 4px; border-radius: 10px; background: var(--bt-border); user-select: none; }
.gm-cell { position: relative; aspect-ratio: 1 / 1; border-radius: 3px; background: var(--bt-surface-2); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.gm-cell::after { content: ''; position: absolute; inset: 0; pointer-events: none; font-size: .45rem; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; color: rgba(255, 255, 255, .85); }
.gm-cell.p-T { background: #c0392b; } .gm-cell.p-T::after { content: 'TW'; }
.gm-cell.p-D { background: #e8a1a1; } .gm-cell.p-D::after { content: 'DW'; color: #5a1c1c; }
.gm-cell.p-t { background: #2d6fb5; } .gm-cell.p-t::after { content: 'TL'; }
.gm-cell.p-d { background: #9cc5ea; } .gm-cell.p-d::after { content: 'DL'; color: #123a5e; }
.gm-cell.center::after { content: '★'; font-size: .8rem; color: #5a1c1c; }
.gm-cell.has::after { content: ''; }
.gm-cell:not(.has):hover { outline: 2px solid var(--bt-accent); outline-offset: -2px; }
[data-status="finished"] .gm-cell { cursor: default; }

/* Tiles */
.gm-tile { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 4px; background: #f3e7c9; color: #2b2113; border: 1px solid #c9b585; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); font-weight: 700; font-size: clamp(.7rem, 2.6vw, 1.25rem); line-height: 1; padding: 0; cursor: pointer; }
.gm-tile .l { display: block; }
.gm-tile .v { position: absolute; right: 2px; bottom: 1px; font-size: .45em; font-weight: 600; }
.gm-tile.blank { background: #fbf6e9; color: #6d5a2e; border-style: dashed; }
.gm-tile.on { cursor: default; }
.gm-tile.on.pending { background: #ffe9a8; border-color: #d9b34a; box-shadow: 0 0 0 2px var(--bt-accent); cursor: pointer; }
.gm-tile.on.last { box-shadow: 0 0 0 2px #2ecc71; }
.gm-tile.ghost { visibility: hidden; }

/* Rack */
.gm-rackbar { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; max-width: 640px; }
.gm-rack { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; flex: 1; padding: 6px; border-radius: 8px; background: var(--bt-surface); border: 1px solid var(--bt-border); }
.gm-rack .gm-tile { aspect-ratio: 1 / 1; height: auto; font-size: clamp(1rem, 4vw, 1.5rem); }
.gm-rack .gm-tile.selected { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--bt-accent), 0 6px 12px rgba(0, 0, 0, .25); }
.gm-rack-modal { max-width: 420px; margin: 0 auto; }
.gm-rack-actions { display: flex; flex-direction: column; gap: .3rem; }
.gm-preview { min-height: 1.4rem; margin-top: .5rem; color: var(--bt-muted); }
.gm-preview.ok { color: var(--bs-success); }
.gm-preview.bad { color: var(--bs-danger); }
.gm-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; max-width: 640px; }
.gm-hints { margin-top: .6rem; padding: .6rem .8rem; border: 1px solid var(--bt-border); border-radius: 8px; background: var(--bt-surface); max-width: 640px; }
.gm-ai { margin-top: .6rem; padding: .6rem .8rem; border: 1px solid var(--bt-border); border-radius: 8px; background: var(--bt-surface); max-width: 640px; display: flex; align-items: center; flex-wrap: wrap; }
.gm-letters { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }

/* Side panel */
.gm-scores { display: flex; flex-direction: column; gap: .3rem; }
.gm-score { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 6px; border: 1px solid transparent; }
.gm-score.turn { border-color: var(--bt-accent); background: var(--bs-primary-bg-subtle); }
.gm-score.left { opacity: .5; text-decoration: line-through; }
.gm-score-name { flex: 1; min-width: 0; }
.gm-history { max-height: 340px; overflow: auto; padding-left: 1.4rem; margin: 0; }
.gm-history li { padding: .2rem 0; border-bottom: 1px solid var(--bt-border); }
.gm-history li:last-child { border-bottom: 0; }
.gm-pts { color: var(--bs-success); }
.gm-comment { color: var(--bt-muted); font-style: italic; }
.gm-h-end { color: var(--bt-muted); }