/* Wordwright: the tile game. Builds on ../style.css tokens. */
:root {
  --wg-board: #d6cfbb;
  --wg-sq: #ede7d7;
  --wg-tw: #c2553a;
  --wg-dw: #e9aa93;
  --wg-tl: #3a7ca0;
  --wg-dl: #a8cfe0;
  --wg-prem-text: #ffffff;
  --wg-prem-text-soft: #3d2a22;
  --wg-tile: #f6e4b5;
  --wg-tile-edge: #cdae70;
  --wg-tile-text: #2a2218;
  --wg-last: #fff0a3;
  --wg-bad: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --wg-board: #232b28;
    --wg-sq: #2e3834;
    --wg-tw: #a3432c;
    --wg-dw: #7d4e42;
    --wg-tl: #2c607e;
    --wg-dl: #36596a;
    --wg-prem-text-soft: #f1e3dc;
    --wg-tile: #efdcaa;
    --wg-tile-edge: #a88b52;
    --wg-last: #d8c56a;
    --wg-bad: #f2867c;
  }
}

main.wg { max-width: 62rem; }
.wg [hidden] { display: none !important; }
.wg-screen h1 { margin-top: 0.25rem; }
.wg-small { font-size: 0.88rem; }
.wg-step { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0; font-weight: 600; }
.wg-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1.5rem 0 1rem; }

.wg-btn {
  font: inherit; font-size: 0.95rem; cursor: pointer;
  padding: 0.55rem 1rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
.wg-btn:hover:not(:disabled) { border-color: var(--accent); }
.wg-btn:disabled { opacity: 0.45; cursor: default; }
.wg-btn.wg-primary { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.wg-btn.wg-small-btn { font-size: 0.85rem; padding: 0.35rem 0.75rem; }
.wg-btn:focus-visible, .wg-sq:focus-visible, .wg-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Vocabulary check */
.wg-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; margin: 1.5rem 0 0; }
.wg-word {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); cursor: pointer; user-select: none;
}
.wg-word:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wg-word input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; margin: 0; }

/* Setup */
.wg-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.25rem; margin: 1.25rem 0; }
.wg-panel h2 { margin: 0 0 0.25rem; }
.wg-scale-ends { display: flex; justify-content: space-between; font-size: 0.75rem; margin-top: 1rem; }
.wg-scale { display: flex; gap: 2px; margin-top: 0.3rem; font-size: 0.75rem; font-weight: 600; }
.wg-scale span {
  text-align: center; padding: 0.15rem 0; border-radius: 4px; overflow: hidden; white-space: nowrap;
  background: var(--accent-soft); color: var(--muted);
}
.wg-scale span.wg-on { background: var(--accent); color: var(--bg); }
.wg input[type=range] { width: 100%; accent-color: var(--accent); margin: 0.6rem 0 0.2rem; }
.wg-vocab-out { font-weight: 600; margin: 0.25rem 0 0.25rem; }
.wg-switch { display: flex; gap: 0.6rem; align-items: center; cursor: pointer; margin: 0.5rem 0; }
.wg-switch input { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }
.wg-styles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-top: 0.75rem; }
@media (min-width: 760px) { .wg-styles { grid-template-columns: repeat(4, 1fr); } }
.wg-styles[aria-disabled=true] { opacity: 0.55; }
.wg-style-opt {
  text-align: left; font: inherit; color: var(--text); cursor: pointer;
  padding: 0.7rem 0.85rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg);
}
.wg-style-opt b { display: block; }
.wg-style-opt span { display: block; font-size: 0.82rem; color: var(--muted); line-height: 1.4; margin-top: 0.2rem; }
.wg-style-opt[aria-checked=true] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.wg-styles[aria-disabled=true] .wg-style-opt { cursor: default; }

/* Game layout */
.wg-game { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .wg-game { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; } }
.wg-board-wrap { --cell: min(calc((100vw - 2rem - 40px) / 15), 2.6rem); }
@media (min-width: 900px) { .wg-board-wrap { --cell: min(calc((100vw - 22rem - 40px) / 15), 2.6rem); } }

.wg-board {
  display: grid; grid-template-columns: repeat(15, var(--cell)); grid-auto-rows: var(--cell);
  gap: 2px; padding: 3px; background: var(--wg-board); border-radius: 8px; width: max-content;
  touch-action: manipulation;
}
.wg-sq {
  position: relative; display: grid; place-items: center;
  background: var(--wg-sq); border-radius: 3px;
  font-size: calc(var(--cell) * 0.26); font-weight: 700; line-height: 1; text-align: center;
  color: var(--wg-prem-text); letter-spacing: 0.02em; user-select: none;
}
.wg-sq.wg-tw { background: var(--wg-tw); }
.wg-sq.wg-dw { background: var(--wg-dw); color: var(--wg-prem-text-soft); }
.wg-sq.wg-tl { background: var(--wg-tl); }
.wg-sq.wg-dl { background: var(--wg-dl); color: var(--wg-prem-text-soft); }
.wg-sq.wg-centre:not(:has(.wg-tile))::after { content: "★"; font-size: calc(var(--cell) * 0.55); color: var(--wg-prem-text-soft); }
.wg-sq.wg-drop { box-shadow: inset 0 0 0 2px var(--accent); }
.wg-sq.wg-target { cursor: pointer; }

.wg-tile {
  position: relative; display: grid; place-items: center;
  width: var(--cell); height: var(--cell);
  background: var(--wg-tile); color: var(--wg-tile-text);
  border-radius: 4px; box-shadow: inset 0 -2px 0 var(--wg-tile-edge);
  font-weight: 700; font-size: calc(var(--cell) * 0.56); text-transform: uppercase;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.wg-tile sub { position: absolute; right: 8%; bottom: 6%; font-size: 0.4em; font-weight: 600; }
.wg-tile.wg-blank { color: #7a5b23; font-style: italic; }
.wg-sq .wg-tile { width: 100%; height: 100%; }
.wg-sq .wg-tile.wg-pending { box-shadow: inset 0 -2px 0 var(--wg-tile-edge), 0 0 0 2px var(--accent); cursor: grab; z-index: 1; }
.wg-sq .wg-tile.wg-last { background: var(--wg-last); }

.wg-rack-row { margin-top: 0.9rem; }
.wg-rack {
  --cell: min(calc((100vw - 3rem) / 7.6), 3rem);
  display: flex; gap: 0.35rem; min-height: calc(var(--cell) + 0.9rem);
  padding: 0.45rem; background: var(--wg-board); border-radius: 10px; width: max-content; max-width: 100%;
}
.wg-rack .wg-tile { cursor: grab; transition: transform 0.12s; }
.wg-rack .wg-tile.wg-selected { transform: translateY(-6px); box-shadow: inset 0 -2px 0 var(--wg-tile-edge), 0 0 0 2px var(--accent); }
.wg-rack .wg-tile.wg-swap { opacity: 0.45; transform: translateY(-4px); }
.wg-tile.wg-ghost { position: fixed; z-index: 50; pointer-events: none; opacity: 0.92; transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.wg-tile.wg-dragging { opacity: 0.3; }

.wg-status { min-height: 1.6em; margin: 0.6rem 0 0.2rem; font-size: 0.95rem; }
.wg-status.wg-bad { color: var(--wg-bad); }
.wg-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.wg-side h2 { margin: 1.5rem 0 0.5rem; font-size: 1rem; }
.wg-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.wg-score { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.8rem; }
.wg-score span { display: block; font-size: 0.8rem; color: var(--muted); }
.wg-score b { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.wg-score.wg-turn { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.wg-log { margin: 0; padding-left: 1.6rem; font-size: 0.88rem; max-height: 22rem; overflow-y: auto; }
.wg-log li { margin: 0.15rem 0; }
.wg-log .wg-who { color: var(--muted); }
.wg-log .wg-w { font-weight: 600; letter-spacing: 0.03em; }

.wg-dialog {
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text);
  padding: 1.25rem 1.4rem; max-width: min(26rem, calc(100vw - 2rem));
}
.wg-dialog::backdrop { background: rgba(0,0,0,0.35); }
.wg-dialog h2 { margin: 0 0 0.4rem; }
.wg-letters { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; margin: 0.8rem 0 1rem; }
.wg-letters button { font: inherit; font-weight: 700; text-transform: uppercase; padding: 0.45rem 0; border-radius: 6px; border: 1px solid var(--line); background: var(--wg-tile); color: var(--wg-tile-text); cursor: pointer; }

.wg-credits { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1rem; }