/* Scrabble (public/arcade/scrabble.js). Every selector lives under the scrabble stage. The board is the
   one bold thing: indigo triple words, cream tiles with deep ink, and the last move framed in its
   player's color. Everything around it stays quiet. */
.ag-stage[data-kind="scrabble"] {
  --sc-tile: #f6f7ff; --sc-ink: #15173a; --sc-tent: #b3bcff;
  --sc-sq: #0d0f22; --sc-tw: #3340a0; --sc-dw: #1c1f42; --sc-dwt: #b3bcff; --sc-tl: #2c3060; --sc-dl: #171a33;
  --sc-dim: #9ea3c6; --sc-line: #262a52;
}
.ag-stage[data-kind="scrabble"] .sc { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 5px; padding: 4px 0 8px;
  color: var(--sc-tile); font-family: var(--font); }

/* header: both scores (the player to move is filled in), the bag, then log and zoom */
.ag-stage[data-kind="scrabble"] .sc-head { flex: none; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 6px 0 8px;
  font: 400 24px/1 var(--ac-pixel, "Jersey 10"); letter-spacing: .02em; }
.ag-stage[data-kind="scrabble"] .sc-chip { --pc: var(--ac-p0, #7c8cff); display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; padding: 3px 8px 2px;
  border-radius: 6px; border: 2px solid transparent; color: var(--pc); }
.ag-stage[data-kind="scrabble"] .sc-chip.p1 { --pc: var(--ac-p1, #eef0fa); }
.ag-stage[data-kind="scrabble"] .sc-chip.on { background: var(--pc); color: #000; }
.ag-stage[data-kind="scrabble"] .sc-chip b { font-weight: 400; }
.ag-stage[data-kind="scrabble"] .sc-nm { min-width: 0; max-width: 6.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-stage[data-kind="scrabble"] .sc-pt { font-variant-numeric: tabular-nums; }
.ag-stage[data-kind="scrabble"] .sc-bag { margin-left: auto; padding: 0 4px; color: var(--sc-dim); white-space: nowrap; }
.ag-stage[data-kind="scrabble"] .sc-ib { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 10px;
  border: 2px solid var(--sc-line); background: transparent; color: var(--sc-tile); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ag-stage[data-kind="scrabble"] .sc-ib svg { width: 16px; height: 16px; fill: currentColor; }
.ag-stage[data-kind="scrabble"] .sc-ib.on, .ag-stage[data-kind="scrabble"] .sc-ib[aria-pressed="true"] { background: var(--sc-line); }

/* the board: fit the box, or 2x and scroll inside it */
.ag-stage[data-kind="scrabble"] .sc-view { position: relative; flex: 1 1 0; min-height: 0; display: flex; overflow: hidden; touch-action: manipulation; }
.ag-stage[data-kind="scrabble"] .sc-view.zoom { overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.ag-stage[data-kind="scrabble"] .sc-board { --c: 20px; --g: 2px; flex: none; margin: auto; padding: 2px; display: grid;
  grid-template-columns: repeat(15, var(--c)); grid-auto-rows: var(--c); gap: var(--g); }
.ag-stage[data-kind="scrabble"] .sc-sq { position: relative; display: grid; place-items: center; background: var(--sc-sq); border-radius: 2px; cursor: pointer;
  font: 400 calc(var(--c) * .42)/1 var(--ac-pixel, "Jersey 10"); color: var(--sc-dim); }
.ag-stage[data-kind="scrabble"] .sc-sq em { font-style: normal; letter-spacing: .02em; pointer-events: none; }
.ag-stage[data-kind="scrabble"] .sc-sq.tw { background: var(--sc-tw); color: var(--sc-tile); }
.ag-stage[data-kind="scrabble"] .sc-sq.dw { background: var(--sc-dw); color: var(--sc-dwt); }
.ag-stage[data-kind="scrabble"] .sc-sq.tl { background: var(--sc-tl); color: #d6dbff; }
.ag-stage[data-kind="scrabble"] .sc-sq.dl { background: var(--sc-dl); color: var(--sc-dim); }
.ag-stage[data-kind="scrabble"] .sc-star { width: 64%; height: 64%; fill: var(--sc-dwt); pointer-events: none; }
.ag-stage[data-kind="scrabble"] .sc-board.tiny .sc-sq em { display: none; }
.ag-stage[data-kind="scrabble"] .sc-sq.hov { outline: 2px solid var(--sc-tent); outline-offset: -2px; }
.ag-stage[data-kind="scrabble"] .sc-sq.has, .ag-stage[data-kind="scrabble"] .sc-sq.tent { background: transparent; }
.ag-stage[data-kind="scrabble"] .sc-sq.tent { touch-action: none; }
.ag-stage[data-kind="scrabble"] .sc-sq.lastsq { z-index: 1; }

/* tiles: cream with deep ink; the value sits small in the corner; blanks carry no value and indigo ink */
.ag-stage[data-kind="scrabble"] .sc-t { position: absolute; inset: 0; display: grid; place-items: center; border-radius: max(2px, calc(var(--c) * .12));
  background: var(--sc-tile); color: var(--sc-ink); pointer-events: none; }
.ag-stage[data-kind="scrabble"] .sc-t b { font: 400 calc(var(--c) * .8)/1 var(--ac-pixel, "Jersey 10"); margin-top: -4%; }
.ag-stage[data-kind="scrabble"] .sc-t i { position: absolute; right: 7%; bottom: 3%; font: 400 calc(var(--c) * .32)/1 var(--ac-pixel, "Jersey 10"); font-style: normal; }
.ag-stage[data-kind="scrabble"] .sc-board.tiny .sc-t i { display: none; }
.ag-stage[data-kind="scrabble"] .sc-t.bl b { color: var(--sc-tw); }
.ag-stage[data-kind="scrabble"] .sc-t.tn { background: var(--sc-tent); }
.ag-stage[data-kind="scrabble"] .sc-t.last { outline: 2px solid var(--pc); outline-offset: 0; }
.ag-stage[data-kind="scrabble"] .sc-t.last.p0 { --pc: var(--ac-p0, #7c8cff); }
.ag-stage[data-kind="scrabble"] .sc-t.last.p1 { --pc: var(--ac-p1, #eef0fa); }

/* the move log folds out over the top of the board */
.ag-stage[data-kind="scrabble"] .sc-log { position: absolute; z-index: 4; top: 48px; right: 6px; width: min(300px, calc(100% - 12px)); max-height: 60%; overflow: auto;
  background: var(--ac-night, #0b0c1a); border: 2px solid var(--sc-line); border-radius: 10px; }
.ag-stage[data-kind="scrabble"] .sc-log[hidden] { display: none; }
.ag-stage[data-kind="scrabble"] .sc-log ol { list-style: none; margin: 0; padding: 6px 10px; }
.ag-stage[data-kind="scrabble"] .sc-log li { display: grid; grid-template-columns: minmax(0, 5.5em) minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 4px 0;
  font: 400 20px/1.1 var(--ac-pixel, "Jersey 10"); letter-spacing: .02em; }
.ag-stage[data-kind="scrabble"] .sc-log li + li { border-top: 1px solid var(--sc-line); }
.ag-stage[data-kind="scrabble"] .sc-log li b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-stage[data-kind="scrabble"] .sc-log li b.p0 { color: var(--ac-p0, #7c8cff); }
.ag-stage[data-kind="scrabble"] .sc-log li b.p1 { color: var(--ac-p1, #eef0fa); }
.ag-stage[data-kind="scrabble"] .sc-log li span { overflow-wrap: anywhere; }
.ag-stage[data-kind="scrabble"] .sc-log li em { font-style: normal; color: var(--sc-dim); font-variant-numeric: tabular-nums; }
.ag-stage[data-kind="scrabble"] .sc-log li.none { display: block; color: var(--sc-dim); }

/* the live preview of the move being built */
.ag-stage[data-kind="scrabble"] .sc-prev { flex: none; margin: 0; padding: 0 10px; min-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 400 22px/1 var(--ac-pixel, "Jersey 10"); letter-spacing: .03em; color: var(--sc-tile); }
.ag-stage[data-kind="scrabble"] .sc-prev b { font-weight: 400; color: var(--ac-p0, #7c8cff); }
.ag-stage[data-kind="scrabble"] .sc-prev .sc-bingo { color: var(--sc-tent); }
.ag-stage[data-kind="scrabble"] .sc-prev.dim { color: var(--sc-dim); }
.ag-stage[data-kind="scrabble"] .sc-prev.err { color: var(--sc-tent); }

/* your rack */
.ag-stage[data-kind="scrabble"] .sc-rack { flex: none; display: grid; grid-template-columns: repeat(7, minmax(0, 50px)); justify-content: center; gap: 4px; padding: 0 6px; height: 50px; }
.ag-stage[data-kind="scrabble"] .sc-rt { position: relative; display: grid; place-items: center; height: 50px; padding: 0; border: 0; border-radius: 6px;
  background: var(--sc-tile); color: var(--sc-ink); cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.ag-stage[data-kind="scrabble"] .sc-rt b { font: 400 36px/1 var(--ac-pixel, "Jersey 10"); margin-top: -3px; pointer-events: none; }
.ag-stage[data-kind="scrabble"] .sc-rt i { position: absolute; right: 5px; bottom: 3px; font: 400 14px/1 var(--ac-pixel, "Jersey 10"); font-style: normal; pointer-events: none; }
.ag-stage[data-kind="scrabble"] .sc-rt.sel { transform: translateY(-5px); outline: 3px solid var(--ac-p0, #7c8cff); outline-offset: 1px; }
.ag-stage[data-kind="scrabble"] .sc-rt.swp { background: var(--sc-tl); color: var(--sc-tile); transform: translateY(-5px); }
.ag-stage[data-kind="scrabble"] .sc-rt.gone { background: transparent; border: 2px dashed var(--sc-line); cursor: default; }
.ag-stage[data-kind="scrabble"] .sc-rt:disabled { cursor: default; }
.ag-stage[data-kind="scrabble"] .sc-rack.done .sc-rt { opacity: .55; }

/* the button row: five compact cabinet pills */
.ag-stage[data-kind="scrabble"] .sc-pad { position: static; flex: none; gap: 6px; padding: 2px 8px 0; z-index: auto; }
.ag-stage[data-kind="scrabble"] .sc-pad[hidden] { display: none; }
.ag-stage[data-kind="scrabble"] .sc-pad .ag-key.wide { flex: 1 1 0; min-width: 0; max-width: 118px; height: 46px; padding: 0 2px; border-radius: 23px;
  font-size: clamp(18px, 5.4vw, 23px); white-space: nowrap; touch-action: manipulation; }
.ag-stage[data-kind="scrabble"] .sc-swaps .ag-key.wide { max-width: 150px; }

/* choosing a blank's letter */
.ag-stage[data-kind="scrabble"] .sc-pick { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 12px; background: #000c; }
.ag-stage[data-kind="scrabble"] .sc-pick[hidden] { display: none; }
.ag-stage[data-kind="scrabble"] .sc-pick-box { width: min(100%, 320px); padding: 14px; border-radius: 12px; background: var(--ac-night, #0b0c1a); border: 2px solid var(--sc-line); text-align: center; }
.ag-stage[data-kind="scrabble"] .sc-pick-box p { margin: 0 0 10px; font-size: 16px; color: var(--sc-tile); }
.ag-stage[data-kind="scrabble"] .sc-pick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 12px; }
.ag-stage[data-kind="scrabble"] .sc-pk { height: 44px; padding: 0; border: 0; border-radius: 6px; background: var(--sc-tile); color: var(--sc-tw); cursor: pointer;
  font: 400 30px/1 var(--ac-pixel, "Jersey 10"); -webkit-tap-highlight-color: transparent; }
.ag-stage[data-kind="scrabble"] .sc-pk:active { background: var(--sc-tent); }
.ag-stage[data-kind="scrabble"] .sc-pick .ag-key.wide { height: 44px; font-size: 22px; }

/* a tile being dragged follows the finger */
.ag-stage[data-kind="scrabble"] .sc-ghost { position: fixed; left: 0; top: 0; z-index: 10; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 6px;
  background: var(--sc-tile); color: var(--sc-ink); pointer-events: none; outline: 3px solid var(--ac-p0, #7c8cff); }
.ag-stage[data-kind="scrabble"] .sc-ghost b { font: 400 34px/1 var(--ac-pixel, "Jersey 10"); }
.ag-stage[data-kind="scrabble"] .sc-ghost i { position: absolute; right: 5px; bottom: 3px; font: 400 13px/1 var(--ac-pixel, "Jersey 10"); font-style: normal; }
.ag-stage[data-kind="scrabble"] .sc-ghost.bl b { color: var(--sc-tw); }

/* short screens: tighten the controls so the board keeps its room */
@media (max-height: 700px) {
  .ag-stage[data-kind="scrabble"] .sc { gap: 4px; padding-bottom: 6px; }
  .ag-stage[data-kind="scrabble"] .sc-head { min-height: 36px; }
  .ag-stage[data-kind="scrabble"] .sc-ib { width: 36px; height: 36px; }
  .ag-stage[data-kind="scrabble"] .sc-rack, .ag-stage[data-kind="scrabble"] .sc-rt { height: 46px; }
  .ag-stage[data-kind="scrabble"] .sc-pad .ag-key.wide { height: 44px; }
}
@media (max-width: 360px) {
  .ag-stage[data-kind="scrabble"] .sc-head { gap: 4px; font-size: 21px; }
  .ag-stage[data-kind="scrabble"] .sc-chip { padding: 3px 5px 2px; gap: 4px; }
  .ag-stage[data-kind="scrabble"] .sc-nm { max-width: 4.5em; }
}
@media (prefers-reduced-motion: reduce) { .ag-stage[data-kind="scrabble"] .sc-rt { transition: none; } }

/* Short screens: the board needs the room more than the face-off strip (scores are in the board's own header). */
@media (max-height: 760px) { .ag-screen:has(.ag-stage[data-kind="scrabble"]) .ag-versus { display: none; } }