/* Scrabble and Theory Scrabble (2026-09-22): the board, the rack and the
   sheets, over the arcade host's ink (arcade.css). */
.ar-layout-scrabble { max-width:1040px;grid-template-columns:minmax(0,1fr) 290px;gap:22px 28px; }
.sb-main { position:relative;min-width:0; }
.sb-players { display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px; }
.sb-player { flex:1 1 120px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;gap:0 10px;padding:8px 12px;border:1px solid #a1b7c435;border-radius:11px;background:#101b2c;transition:background .2s,border-color .2s; }
.sb-player.sb-on { border-color:#e8d3a6;background:#1a2a40;box-shadow:0 0 22px #e8d3a622; }
.sb-player.sb-won { border-color:#f0d494;background:#2b2b1c; }
.sb-pname { font-size:13px;color:#e9e2d1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sb-pname small { display:block;font-size:10px;color:#9fb0c2;letter-spacing:.6px;text-transform:uppercase; }
.sb-player b { grid-column:2;grid-row:1 / span 2;font:500 26px/1 "EB Garamond",Georgia,serif;color:#f0dcb0; }
.sb-player i { grid-column:1;font-style:normal;font-size:10px;color:#93a4b6; }
.sb-board { display:grid;grid-template-columns:repeat(15,1fr);gap:2px;width:100%;max-width:600px;aspect-ratio:1;container-type:inline-size;padding:5px;border-radius:12px;background:#0b1422;border:1px solid #a1b7c435;box-shadow:0 20px 60px #0004;outline:none;user-select:none;touch-action:manipulation; }
.sb-board:focus-visible { outline:3px solid #f0d494;outline-offset:3px; }
.sb-cell { position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:11%;background:#1d2d42;overflow:hidden;font-size:2.6cqw; }
.sb-cell i { font-style:normal;font-size:1.7cqw;font-weight:700;letter-spacing:.2px;color:#ffffffb0;line-height:1; }
.sb-cell.sb-d { background:#3d6c8f; }
.sb-cell.sb-t { background:#25628c; }
.sb-cell.sb-D { background:#8e4d5e; }
.sb-cell.sb-T { background:#b0402f; }
.sb-cell.sb-star i { font-size:3.4cqw;color:#ffe7b3; }
.sb-cell.sb-over { box-shadow:inset 0 0 0 2px #f0d494; }
.sb-cell.sb-cursor::after { content:"→";position:absolute;inset:0;display:grid;place-items:center;font-size:3.6cqw;color:#f5e2b7;background:#f0d49433; }
.sb-cell.sb-cursor.sb-down::after { content:"↓"; }
.sb-cell.sb-bad .sb-t { background:#d9736a;color:#2c1210; }
.sb-t { position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:11%;background:linear-gradient(160deg,#f7ecd2,#e2d2ad);color:#2b2418;box-shadow:inset 0 -2px 0 #b9a377,0 2px 3px #0006;font-family:"EB Garamond",Georgia,serif; }
.sb-t b { font-size:3.1cqw;line-height:1;font-weight:600; }
.sb-t small { position:absolute;left:8%;top:6%;font-size:1.5cqw;color:#7a6a45; }
.sb-t em { position:absolute;right:7%;bottom:4%;font-style:normal;font-size:1.5cqw;font-weight:700;color:#5b4c2c; }
.sb-t.sb-t-blank { background:linear-gradient(160deg,#fff8e6,#efe4c8);color:#7a6a45; }
.sb-t.sb-t-blank b { font-style:italic;font-weight:400; }
.sb-cell.sb-pending .sb-t { background:linear-gradient(160deg,#fff4d0,#f1dfa8);box-shadow:inset 0 -2px 0 #b9a377,0 0 0 2px #f0d494,0 4px 8px #0007; }
.sb-cell.sb-last .sb-t { box-shadow:inset 0 -2px 0 #b9a377,0 0 0 2px #7bc6a9; }
.sb-rack-row { display:flex;align-items:center;gap:10px;margin:14px 0 8px;flex-wrap:wrap; }
.sb-rack { display:flex;gap:6px;padding:8px;border-radius:12px;background:#0b1422;border:1px solid #a1b7c435;min-height:64px; }
.sb-rack.sb-exchanging { border-color:#e8d3a6; }
#arcade-screen .sb-rt,.sb-slot { position:relative;width:48px;height:48px;padding:0;min-height:0;border-radius:7px;background:linear-gradient(160deg,#f7ecd2,#e2d2ad);border:0;color:#2b2418;box-shadow:inset 0 -3px 0 #b9a377,0 3px 5px #0006;font-family:"EB Garamond",Georgia,serif;cursor:grab;touch-action:none;display:grid;place-items:center; }
#arcade-screen .sb-rt:hover:not(:disabled) { background:linear-gradient(160deg,#fff4d0,#f1dfa8);border:0; }
.sb-slot { background:#ffffff08;box-shadow:none;border:1px dashed #ffffff22; }
.sb-rt b { font-size:24px;line-height:1;font-weight:600; }
.sb-rt small { position:absolute;left:5px;top:3px;font-size:9px;color:#7a6a45; }
.sb-rt em { position:absolute;right:4px;bottom:2px;font-style:normal;font-size:10px;font-weight:700;color:#5b4c2c; }
.sb-rt-blank b::before { content:"?";opacity:.35;font-style:italic;font-weight:400; }
#arcade-screen .sb-rt.sb-sel { transform:translateY(-6px);box-shadow:inset 0 -3px 0 #b9a377,0 0 0 3px #f0d494,0 8px 12px #0008; }
#arcade-screen .sb-rt.sb-swap { transform:translateY(-6px);box-shadow:inset 0 -3px 0 #b9a377,0 0 0 3px #e37b7b; }
#arcade-screen .sb-rt.sb-dragging { opacity:.3; }
.sb-ghost { position:fixed;z-index:400;pointer-events:none;transform:translate(-50%,-50%) scale(1.1);opacity:.95; }
.sb-rack-btns { display:flex;gap:6px; }
#arcade-screen .sb-rack-btns button { min-height:40px;padding:6px 12px;font-size:16px; }
.sb-status { color:#c9d5e2;font-size:13px;line-height:1.55;min-height:42px;margin:6px 0 10px; }
.sb-status b { color:#f0dcb0; }.sb-status i { color:#a7c4c0;font-style:italic; }
.sb-err { color:#e9a0a0; }
.sb-actions { display:flex;gap:8px;flex-wrap:wrap; }
#arcade-screen .sb-actions .ar-primary { min-width:120px; }
.sb-blank { position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:5;width:min(420px,94%);padding:16px;border-radius:14px;border:1px solid #dcc59360;background:linear-gradient(145deg,#243447f8,#132031fc);box-shadow:0 15px 40px #0007; }
.sb-blank-title { font:500 20px/1.2 "EB Garamond",Georgia,serif;margin-bottom:12px;text-align:center; }
.sb-blank-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin-bottom:12px; }
#arcade-screen .sb-blank-grid button { position:relative;min-height:44px;padding:4px;font-family:"EB Garamond",Georgia,serif;font-size:18px;background:#f3e6c8;color:#2b2418;border:0; }
.sb-blank-grid button small { position:absolute;left:4px;top:2px;font-size:9px;color:#7a6a45; }
#arcade-screen .sb-blank-cancel { width:100%; }
/* the setup sheet (2026-09-29): how many players, who they are, how well the
   computer plays — three rows of segmented choices, then one line saying the
   table in words */
.sb-setup { max-width:470px; }
.sb-opt { display:grid;grid-template-columns:86px 1fr;align-items:center;gap:10px;margin:0 0 10px;text-align:left; }
.sb-opt-l { font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#adbdce;font-weight:600; }
.sb-seg { display:flex;gap:0;border:1px solid #ffffff2a;border-radius:9px;overflow:hidden;background:#101b2c; }
#arcade-screen .sb-seg button { flex:1 1 auto;min-width:0;margin:0;padding:8px 6px;min-height:38px;border:0;border-radius:0;background:transparent;color:#d9e2ec;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#arcade-screen .sb-seg button + button { border-left:1px solid #ffffff1c; }
#arcade-screen .sb-seg button:hover:not(.on) { background:#ffffff0d; }
#arcade-screen .sb-seg button.on { background:#e8d3a6;color:#24303a;font-weight:700; }
#arcade-screen .sb-seg button:focus-visible { outline:2px solid #f0d494;outline-offset:-2px; }
.sb-setup .sb-setup-line { min-height:3.2em;margin:12px 0 14px;color:#c9d5e2; }
.sb-setup-note { color:#bfcbda;font-size:12px;margin:8px 0 0; }
/* (a table) a seat whose connection dropped, and one that left */
.sb-player.sb-away { border-style:dashed;opacity:.8; }
.sb-player.sb-out { opacity:.45; }
.sb-player.sb-out b { text-decoration:line-through;text-decoration-thickness:1px; }
.sb-final tr.sb-left td { color:#8d9aab; }
.sb-final td small { font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:#e9a0a0; }
.sb-result { max-width:470px; }
.sb-final { width:100%;border-collapse:collapse;margin:10px 0 6px;font-size:13px; }
.sb-final th { font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#adbdce;font-weight:600;text-align:right;padding:4px 6px; }
.sb-final td { padding:5px 6px;text-align:right;border-top:1px solid #ffffff14;color:#d9e2ec; }
.sb-final th:first-child,.sb-final td:first-child { text-align:left; }
.sb-final tr.sb-won td { color:#f5e2b7; }
.sb-vs-line { color:#a7c4c0!important; }
.ar-cover.sb-flash { background:transparent;backdrop-filter:none;pointer-events:none; }
.sb-flash-text { font:600 clamp(28px,6cqw,52px)/1 "EB Garamond",Georgia,serif;color:#ffe7b3;text-shadow:0 4px 18px #000c,0 0 30px #f0d49488;animation:sb-pop .5s ease-out; }
@keyframes sb-pop { from { transform:scale(.6);opacity:0; } to { transform:scale(1);opacity:1; } }
.sb-history ol { padding-left:18px;max-height:230px;overflow:auto;font-size:12px;line-height:1.5;color:#bdc9d8; }
.sb-history li { margin-bottom:4px; }
.sb-history li b { color:#e7d7b5;font-weight:600; }.sb-history li i { color:#a7c4c0; }.sb-history li span { color:#f0dcb0;float:right; }
.sb-history .sb-h-end { color:#e9a0a0; }
/* the hub's vignettes */
.tdm-arcade-preview[data-game=scrabble] span,.tdm-arcade-preview[data-game=theoryscrabble] span { position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:6px;background:linear-gradient(160deg,#fff6df,#e6d5ad);box-shadow:inset 0 -3px 0 #b9a377,0 4px 8px #482b3129;font:600 24px "EB Garamond",Georgia,serif;color:#2b2418; }
.tdm-arcade-preview[data-game=scrabble] span:nth-child(2n) { transform:translateY(8px) rotate(-4deg); }
.tdm-arcade-preview[data-game=theoryscrabble] span { background:linear-gradient(160deg,#fffaf0,#efe1bd); }
.tdm-arcade-preview[data-game=theoryscrabble] span:nth-child(4) { background:#2b2418;color:#f3e6c8; }
@media (max-width:1000px) { .ar-layout-scrabble { grid-template-columns:minmax(0,1fr) 240px;gap:16px; } }
@media (max-width:760px) {
  .ar-layout-scrabble { grid-template-columns:1fr; }
  .sb-board { max-width:none;padding:3px;gap:1px; }
  .sb-rack { gap:4px;padding:6px;min-height:56px; }
  #arcade-screen .sb-rt,.sb-slot { width:42px;height:42px; }.sb-rt b { font-size:21px; }
  .sb-players { gap:6px; }.sb-player { padding:6px 9px;flex-basis:100px; }.sb-player b { font-size:22px; }
  .sb-status { min-height:0;font-size:12px; }
  .sb-history ol { max-height:150px; }
  .sb-opt { grid-template-columns:1fr;gap:5px; }
  #arcade-screen .sb-seg button { font-size:12px;padding:8px 4px; }
  .tdm-arcade-preview[data-game=scrabble] span,.tdm-arcade-preview[data-game=theoryscrabble] span { width:34px;height:34px;font-size:18px; }
}
@media (prefers-reduced-motion:reduce) { .sb-flash-text { animation:none; } }