/* Tilewise: board, tiles, rack, check bar, move log and dialogs. Layout and buttons come from cb-arcade.css. */
/* the dialogs live in the top layer, outside .tw-page, so they get the same colours */
.tw-page, .tw-dlg {
  --sq: #ece6f1; --sq-line: #d9cfe3; --frame: #3b2d5a;
  --w3: #6d3fc0; --w2: #bba4e8; --l3: #12857f; --l2: #9fd8d0;
  --tile: #fff4d6; --tile-edge: #d9b26a; --tile-ink: #2a1d17;
  --new: #ffe07a; --new-edge: #c99a1c; --last: #f08a24;
  --p0: #6d3fc0; --p1: #12857f;
}
.tw-page [hidden], .tw-dlg [hidden] { display: none !important; }

.tw-card { padding: 12px; }
.tw-banner, .cbx-card .tw-banner { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #2a2142; color: #fff; font: 800 14px/1.4 var(--cbx-body); }
.tw-banner b { color: #ffd66b; }

.tw-scores { display: flex; gap: 8px; }
.tw-scores:empty { display: none; }
.tw-pl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: var(--cbx-soft); border: 2px solid transparent; }
.tw-pl.turn { border-color: var(--cbx-accent); background: #fff; }
.tw-pl .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.tw-pl .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 14px var(--cbx-body); color: var(--cbx-ink); }
.tw-pl .pts { flex: none; font: 900 20px var(--cbx-body); color: var(--cbx-ink); font-variant-numeric: tabular-nums; }

.cbx-card .tw-status, .tw-status { margin: 8px 0; min-height: 22px; text-align: center; font: 900 16px/1.3 var(--cbx-body); color: var(--cbx-ink); }
.cbx-card .tw-status.good { color: var(--cbx-good); } .cbx-card .tw-status.bad { color: var(--cbx-bad); }

.tw-board { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 2px; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; padding: 3px; box-sizing: border-box; border-radius: 10px; background: var(--frame); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.tw-sq { position: relative; min-width: 0; border: 0; padding: 0; margin: 0; border-radius: 3px; background: var(--sq); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; font: 900 clamp(8px, 2.3vw, 12px)/1 var(--cbx-body); color: rgba(42, 29, 23, .55); overflow: hidden; }
.tw-sq.W3 { background: var(--w3); color: #fff; } .tw-sq.W2 { background: var(--w2); color: #2a1a4f; }
.tw-sq.L3 { background: var(--l3); color: #fff; } .tw-sq.L2 { background: var(--l2); color: #0d4743; }
.tw-sq.start { color: var(--cbx-accent); font-size: clamp(14px, 4.4vw, 22px); }
.tw-sq.drop { box-shadow: inset 0 0 0 3px var(--cbx-accent); }
.tw-board.locked .tw-sq { cursor: default; }
.tw-board.flash { animation: tw-flash .5s; }
@keyframes tw-flash { 50% { box-shadow: 0 0 0 6px rgba(216, 67, 59, .45); } }

/* a tile on the board or in the rack */
.tw-t { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 3px; background: var(--tile); box-shadow: inset 0 -2px 0 var(--tile-edge); color: var(--tile-ink); font: 900 clamp(13px, 4.4vw, 24px)/1 var(--cbx-body); }
.tw-t .v { position: absolute; right: 2px; bottom: 1px; font: 900 clamp(6px, 1.9vw, 10px)/1 var(--cbx-body); }
.tw-t.blank { color: #8a5a00; }
.tw-t.new { background: var(--new); box-shadow: inset 0 -2px 0 var(--new-edge), inset 0 0 0 2px var(--new-edge); }
.tw-t.bad { background: #ffd2cc; box-shadow: inset 0 -2px 0 #d8433b, inset 0 0 0 2px #d8433b; }
.tw-t.last { box-shadow: inset 0 -2px 0 var(--tile-edge), inset 0 0 0 2px var(--last); background: #ffe6c4; }

.cbx-card .tw-check, .tw-check { margin: 8px 0 6px; min-height: 22px; text-align: center; font: 900 15px/1.3 var(--cbx-body); color: var(--cbx-muted); }
.cbx-card .tw-check.good { color: var(--cbx-good); } .cbx-card .tw-check.bad { color: var(--cbx-bad); }

.tw-rack { display: flex; gap: 6px; justify-content: center; min-height: 50px; padding: 6px; border-radius: 14px; background: #4a3a6b; }
.tw-rt { position: relative; flex: 0 1 46px; aspect-ratio: 1; min-width: 0; border: 0; padding: 0; border-radius: 8px; background: var(--tile); box-shadow: inset 0 -3px 0 var(--tile-edge); color: var(--tile-ink); font: 900 clamp(18px, 6vw, 26px)/1 var(--cbx-body); cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.tw-rt .v { position: absolute; right: 4px; bottom: 3px; font: 900 11px/1 var(--cbx-body); }
.tw-rt.used { visibility: hidden; }
.tw-rt.sel { transform: translateY(-5px); box-shadow: inset 0 -3px 0 var(--tile-edge), 0 0 0 3px #ffd66b; }
.tw-rt.pick { background: var(--new); box-shadow: inset 0 -3px 0 var(--new-edge), 0 0 0 3px var(--cbx-accent); }
.tw-rack.hidden-rack { justify-content: center; align-items: center; color: #d9cfe9; font: 800 14px var(--cbx-body); }
.tw-ghost { position: fixed; z-index: 50; width: 40px; height: 40px; margin: -20px 0 0 -20px; pointer-events: none; display: grid; place-items: center; border-radius: 8px; background: var(--new); box-shadow: 0 8px 18px rgba(0, 0, 0, .3); font: 900 22px var(--cbx-body); color: var(--tile-ink); }

.tw-tools, .tw-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.tw-tools .cbx-btn { flex: 1 1 0; min-width: 0; padding: 10px 8px; min-height: 48px; }
.tw-tools #playBtn { flex: 1.4 1 0; }
.tw-actions .cbx-btn { min-height: 44px; padding: 10px 14px; font-size: 15px; }
.tw-send { margin-top: 10px; }

.tw-log { margin: 12px 0 0; padding: 8px 10px; border-radius: 12px; background: var(--cbx-soft); font: 800 14px/1.6 var(--cbx-body); color: var(--cbx-ink-2); max-height: 120px; overflow-y: auto; }
.tw-log:empty { display: none; }
.tw-log div { display: flex; gap: 6px; }
.tw-log .who { flex: none; font-weight: 900; }
.tw-log .what { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tw-log .pts { flex: none; font-weight: 900; font-variant-numeric: tabular-nums; }
.cbx-card .tw-bag, .tw-bag { margin: 8px 0 0; text-align: center; font: 800 13px var(--cbx-body); color: var(--cbx-muted); }

.tw-dlg { border: 0; padding: 0; border-radius: 22px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); color: #2a1d17; background: #fff; }
.tw-dlg::backdrop { background: rgba(42, 29, 23, .45); }
.tw-dlg-card { padding: 20px; }
.tw-dlg h2 { margin: 0 0 6px; font: 900 22px 'Fraunces', Georgia, serif; }
.tw-dlg .tw-dlg-sub { margin: 0 0 12px; font: 800 15px/1.45 'Nunito', system-ui, sans-serif; color: #7d685c; }
.tw-field { display: grid; gap: 4px; margin: 0 0 10px; font: 900 13px 'Nunito', system-ui, sans-serif; color: #4a3a30; }
.tw-field input { font: 800 17px 'Nunito', system-ui, sans-serif; padding: 11px 12px; border: 2px solid #eadccb; border-radius: 12px; }
.tw-first { display: flex; gap: 8px; margin: 0 0 10px; }
.tw-first label { flex: 1; display: grid; place-items: center; padding: 10px 6px; border-radius: 12px; border: 2px solid #eadccb; font: 900 15px 'Nunito', system-ui, sans-serif; cursor: pointer; }
.tw-first input { display: none; }
.tw-first label:has(input:checked) { border-color: #6d3fc0; background: #f1ebfb; }
.tw-dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.tw-dlg .cbx-btn { --cbx-accent: #6d3fc0; }
.tw-letters { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tw-letters button { aspect-ratio: 1; border: 0; border-radius: 8px; background: var(--tile); box-shadow: inset 0 -3px 0 var(--tile-edge); font: 900 20px 'Nunito', system-ui, sans-serif; color: var(--tile-ink); cursor: pointer; }
.tw-swap-rack { background: #4a3a6b; }
.tw-mine { margin-top: 14px; border-top: 2px solid #eadccb; padding-top: 10px; }
.tw-mine h3 { margin: 0 0 6px; font: 900 14px 'Nunito', system-ui, sans-serif; }
.tw-mine ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tw-mine a { display: block; padding: 9px 12px; border-radius: 10px; background: #f3e8da; font: 800 14px 'Nunito', system-ui, sans-serif; color: #2a1d17; text-decoration: none; }

@media (max-width: 420px) {
  .tw-card { padding: 8px; }
  .tw-board { gap: 1.5px; padding: 2px; }
}