/* Double Cross — mechanic-specific rules only.
 *
 * Everything generic (design tokens, topbar, modals, buttons, keyboard,
 * feedback tiles, stat cards, confetti canvas, .visually-hidden) comes from
 * ../styles.css. This file owns exactly the two things this game has that
 * WordAxis does not: the two-channel tile (fill = letter, outline = crossing
 * position) and the live mini crossword.
 */

:root {
  /* The claim channel: what is being proposed THIS turn, not what is known. */
  --dc-claim: #f9fafb;
  /* Ruled out. Deliberately not a WordAxis token -- no other surface in either
   * game means "you were told no", so there was nothing to reuse. */
  --dc-ruled: #e5484d;
  /* Confirmed rides the shared exact token so the high-contrast setting moves
   * the outline and the fill together instead of leaving one behind. */
  --dc-confirmed: var(--color-exact);
  --dc-ring: 2px;
  --dc-cell: clamp(19px, 5.4vw, 24px);
}

/* The shell's phone layout pins .play-panel to the bottom of the viewport and
 * reserves room for it. Double Cross has no fixed control bar -- one scrolling
 * column -- so the reservation is zeroed rather than left at its fallback,
 * which would strand 268px of dead space under the keyboard. */
.dc-page { --control-bar-height: 0px; }
.dc-page h1 { font-size: clamp(1.5rem, 6.6vw, 2.1rem); }

a.icon-button { display: grid; place-items: center; text-decoration: none; }

/* ---- toolbar ---------------------------------------------------------- */

.dc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 6px; }
.dc-turn-pill { margin: 0; padding: 7px 12px; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-panel-raised); font-size: .76rem; font-weight: 800; white-space: nowrap; }
.dc-turn-pill--urgent { border-color: var(--color-misplaced); color: #f0d38a; }
.dc-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-panel); margin-left: auto; }
.dc-seg-button { border: 0; border-radius: 7px; padding: 6px 11px; background: transparent; color: var(--color-muted); font-size: .74rem; font-weight: 800; cursor: pointer; }
.dc-seg-button[aria-pressed="true"] { background: var(--color-panel-raised); color: var(--color-text); }
.dc-seg-button:disabled { cursor: not-allowed; opacity: .7; }
.dc-chip-button { min-height: 38px; padding: 0 13px; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-panel-raised); color: var(--color-text); font-size: .76rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.dc-chip-button:disabled { opacity: .45; cursor: not-allowed; }
.dc-chip-button--danger { border-color: var(--dc-ruled); color: #f3a5a7; }

.dc-note { margin: 0; color: var(--color-muted); font-size: .72rem; line-height: 1.4; }
.dc-note--mode { margin: 0 2px 10px; }
.dc-note--keys { margin-top: 10px; text-align: center; }

/* ---- board ------------------------------------------------------------ */

.dc-panel { padding: 12px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-panel); }
.dc-wordrow { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.dc-rowtag { flex: none; width: 27px; height: 30px; border: 1px solid var(--color-line); border-radius: 7px; background: transparent; color: var(--color-muted); font-size: .78rem; font-weight: 900; cursor: pointer; }
.dc-wordrow--focus .dc-rowtag { border-color: var(--color-accent); background: var(--color-accent); color: #08111a; }
.dc-lockbutton { flex: none; display: grid; place-items: center; width: 27px; height: 30px; padding: 0; border: 1px solid var(--color-line); border-radius: 7px; background: var(--color-panel-raised); font-size: .8rem; cursor: pointer; }
.dc-lockbutton[hidden] { display: none; }

.dc-tiles { display: flex; flex: 1; gap: 6px; min-width: 0; }
.dc-tile {
  flex: 1 1 0;
  min-width: 0;
  max-width: 58px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: var(--dc-ring) solid transparent;
  border-radius: 8px;
  background: var(--color-tile);
  color: var(--color-text);
  font-size: clamp(1rem, 4.6vw, 1.4rem);
  font-weight: 850;
  cursor: pointer;
}
.dc-wordrow--focus .dc-tile { background: var(--color-panel-raised); }
.dc-wordrow--locked .dc-tile { background: #1b2740; color: #dfe7f2; }
.dc-tile--caret { border-color: var(--color-muted); }
.dc-tile:disabled { cursor: default; }

/* ---- meet strip + live mini crossword --------------------------------- */

.dc-meet { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.08); }
.dc-meet-info { flex: 1; min-width: 0; }
.dc-meet-line { margin: 0; font-size: .84rem; font-weight: 850; }
.dc-meet-line b { color: var(--color-accent); }
.dc-meet-state { margin: 4px 0 3px; font-size: .72rem; font-weight: 800; min-height: 1.1em; }
.dc-meet-state--ok { color: #cbd5e1; }
.dc-meet-state--clash { color: #f0d38a; }
.dc-meet-state--idle { color: var(--color-muted); }

.dc-mini { flex: none; display: grid; grid-template-columns: repeat(5, var(--dc-cell)); gap: 3px; }
.dc-mini-cell { width: var(--dc-cell); height: var(--dc-cell); display: grid; place-items: center; border: 1px solid #1b2433; border-radius: 4px; background: #0c1220; color: var(--color-muted); font-size: .62rem; font-weight: 850; }
.dc-mini-cell--on { border-color: var(--color-line); background: var(--color-tile); color: var(--color-text); }
.dc-mini-cell--meet { border-color: var(--color-accent); background: var(--color-accent); color: #08111a; }
.dc-mini-cell--clash { border-color: var(--color-misplaced); background: var(--color-misplaced); color: #10182a; }
.dc-mini-cell--solution { border-color: var(--color-exact); background: var(--color-exact); color: #fff; }
.dc-mini--solution { --dc-cell: clamp(24px, 7vw, 34px); justify-content: center; margin: 4px auto 2px; }
.dc-mini--solution .dc-mini-cell { font-size: .82rem; }

/* ---- messages --------------------------------------------------------- */

.dc-error { min-height: 1.25em; margin: 10px 2px; color: #f0d38a; font-size: .78rem; font-weight: 800; line-height: 1.35; }

/* ---- turn history ----------------------------------------------------- */


.dc-history { display: grid; gap: 14px; }
.dc-history-head { margin: 4px 2px 0; color: var(--color-muted); font-size: .64rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.dc-history-item { display: grid; grid-template-columns: 1fr auto 1fr; grid-auto-rows: auto; align-items: center; column-gap: 8px; row-gap: 4px; }
.dc-history-turn { grid-column: 1; grid-row: 1 / span 2; justify-self: end; color: #4d5b72; font-size: .62rem; font-weight: 800; }
.dc-history-strip { grid-column: 2; display: flex; align-items: center; gap: 4px; }
.dc-axis-tile { flex: none; width: clamp(26px, 7vw, 34px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; border: 2px solid; background: transparent; font-size: .72rem; font-weight: 900; }
.dc-axis-tile--h { color: #6ea8fe; border-color: #3d5f8f; }
.dc-axis-tile--v { color: #c98fdb; border-color: #6d4a7c; }
.dc-history-item .dc-chip { grid-column: 2; justify-self: center; }

.dc-minitiles { display: flex; gap: 3px; flex: none; }
.dc-minitile { width: clamp(26px, 7vw, 34px); aspect-ratio: 1; display: grid; place-items: center; border: var(--dc-ring) solid transparent; border-radius: 5px; background: var(--color-absent); color: #fff; font-size: .68rem; font-weight: 850; }

.dc-chip { padding: 3px 7px; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-muted); font-size: .6rem; font-weight: 850; white-space: nowrap; }
.dc-chip--count { background: var(--color-panel-raised); color: #cbd5e1; }
.dc-chip--count-full { border-color: var(--dc-confirmed); background: rgba(47,158,111,.2); color: #9fe0c2; }

/* ---- keyboard note ---------------------------------------------------- */

.dc-controls { margin-top: 14px; }
.dc-kbnote { margin: 0 0 6px; color: var(--color-muted); font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.dc-kbnote b { color: var(--color-accent); }

/* ---- modals ----------------------------------------------------------- */

.dc-lede { margin: 10px 0 0; color: #d5dbe4; font-size: .84rem; line-height: 1.5; }
.dc-modal-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.dc-modal-buttons .dc-chip-button { min-height: 44px; }

.modal--rules { width: min(94vw, 470px); }
.dc-rules-card { max-height: min(88vh, 88dvh); overflow-y: auto; }
.dc-example { margin: 12px 0 0; padding: 12px 12px 6px; border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-panel-raised); }
.dc-example-head { margin: 0 0 10px; color: var(--color-muted); font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.dc-example-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.dc-example-tag { flex: none; width: 13px; color: var(--color-muted); font-size: .62rem; font-weight: 850; }
.dc-example-note { position: relative; margin: 0 0 9px; padding-left: 15px; color: #c9d2de; font-size: .78rem; line-height: 1.45; }
.dc-example-note::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-muted); }

.dc-legend { display: flex; flex-wrap: wrap; gap: 7px 12px; margin: 12px 0 4px; padding: 0; list-style: none; }
.dc-legend li { display: flex; align-items: center; gap: 6px; color: #c9d2de; font-size: .7rem; }
.dc-swatch { flex: none; width: 20px; height: 20px; border: var(--dc-ring) solid transparent; border-radius: 5px; background: var(--color-tile); }

.dc-result-detail { margin: 6px 0 0; color: var(--color-muted); font-size: .76rem; line-height: 1.45; }
/* The shell drops its six-card stats grid to two columns on a phone. There are
 * only three cards here and they fit, so the phone rule is undone rather than
 * left to strand the third card on a row of its own. */
.modal--result .stats-summary { grid-template-columns: repeat(3, 1fr); }
.modal--result .stats-summary--four { grid-template-columns: repeat(4, 1fr); }
.modal--result .stat-card { padding: 11px 6px 9px; }

@media (max-width: 430px) {
  .dc-panel { padding: 10px; }
  .dc-meet { gap: 9px; }
  .dc-tiles { gap: 5px; }
  .dc-minitiles { gap: 2px; }
}

/* ---- the two channels ------------------------------------------------- *
 *
 * Fill is the letter, outline is the crossing position. These ride on three
 * different bases -- the big input tile, the history mini tile and the legend
 * swatch -- each of which sets its own background and its own transparent
 * border, so the channel rules live last in the file where they outrank every
 * base at equal specificity. Moving them earlier silently returns grey,
 * ringless tiles, which is exactly what happened the first time.
 *
 * Within the block the order is load-bearing too: the status rules come after
 * the claim rule, so a position the player has actually been told about owns
 * the outer ring and the claim is pushed inside it. Claimed-and-answered is
 * the normal endgame state, not an edge case, so both rings must stay legible
 * at every tile size the game uses. */

.dc-fill-exact { background: var(--color-exact); color: #fff; }
.dc-fill-misplaced { background: var(--color-misplaced); color: #10182a; }
.dc-fill-absent { background: var(--color-absent); color: #fff; }

.dc-claim { border-color: var(--dc-claim); }
.dc-confirmed { border-color: var(--dc-confirmed); }
.dc-ruled-out { border-color: var(--dc-ruled); }
.dc-claim.dc-confirmed,
.dc-claim.dc-ruled-out { box-shadow: inset 0 0 0 var(--dc-ring) var(--dc-claim); }