/* Canonical Futoshiki/grid play shell. Region games opt into ds-grid-shell. */

/* DS CSS is linked from index.html so files load in parallel. Fonts come from site.css. */

html.is-play.ds-root,
html.is-play.ds-root[data-ds-theme="light"] {
  color-scheme: light;
  --ink-button: var(--ivory);
  --note: var(--board-note);
  --grid-thin: var(--board-line);
  --grid-strong: var(--board-line-strong);
  --accent: var(--game-futoshiki, #C88708);
  --accent-soft: color-mix(in srgb, var(--game-futoshiki, #C88708) 16%, var(--paper));
  --accent-hover: #A86E06;
  --gold: var(--cta);
  --gold-fill: var(--cta);
  --gold-border: var(--cta);
  --gold-hover: var(--cta-hover);
  --gold-soft: color-mix(in srgb, var(--cta) 18%, var(--paper-bright));
  --gold-wash: color-mix(in srgb, var(--cta) 14%, var(--paper));
  --gold-active: color-mix(in srgb, var(--cta) 22%, var(--paper-bright));
  --gold-hint: var(--board-cell-sel);
  --gold-hint-ring: var(--cta);
  --entry: var(--board-entry);
  --same: var(--board-cell-same);
  --ok: var(--matcha);
  --hint-witness: var(--board-cell-same);
  --hint-place: var(--board-cell-sel);
  --hint-unit: var(--board-cell-hi);
  --bad: var(--board-digit-bad);
  --vermillion: var(--board-digit-bad);
  --cell: var(--board-cell);
  --btn: var(--paper-bright);
  --btn-hover: var(--paper-wash);
  --btn-hover-line: var(--indigo);
  --bg: var(--paper);
  --bg-2: var(--paper-bright);
  --given: var(--board-given);
  --box: var(--board-line-strong);
  --sel: var(--indigo);
  --sel-bg: var(--board-cell-sel);
  --hi: var(--board-cell-hi);
  --shadow: var(--shadow-card);
}

html.is-play.ds-root[data-ds-theme="dark"] {
  color-scheme: dark;
  --ink-button: var(--ivory);
  --note: var(--board-note);
  --grid-thin: var(--board-line);
  --grid-strong: var(--board-line-strong);
  --accent: var(--game-futoshiki, #C88708);
  --accent-soft: color-mix(in srgb, var(--game-futoshiki, #C88708) 16%, var(--paper));
  --accent-hover: #A86E06;
  --gold: var(--cta);
  --gold-fill: var(--cta);
  --gold-border: var(--cta);
  --gold-hover: var(--cta-hover);
  --gold-soft: color-mix(in srgb, var(--cta) 18%, var(--paper-bright));
  --gold-wash: color-mix(in srgb, var(--cta) 14%, var(--paper));
  --gold-active: color-mix(in srgb, var(--cta) 22%, var(--paper-bright));
  --gold-hint: var(--board-cell-sel);
  --gold-hint-ring: var(--cta);
  --entry: var(--board-entry);
  --same: var(--board-cell-same);
  --ok: var(--matcha);
  --hint-witness: var(--board-cell-same);
  --hint-place: var(--board-cell-sel);
  --hint-unit: var(--board-cell-hi);
  --bad: var(--board-digit-bad);
  --vermillion: var(--board-digit-bad);
  --cell: var(--board-cell);
  --btn: var(--paper-bright);
  --btn-hover: var(--paper-bright);
  --btn-hover-line: var(--indigo);
  --bg: var(--paper);
  --bg-2: var(--paper-bright);
  --given: var(--board-given);
  --box: var(--board-line-strong);
  --sel: var(--indigo);
  --sel-bg: var(--board-cell-sel);
  --hi: var(--board-cell-hi);
  --shadow: var(--shadow-card);
}

html.is-play body:is(.ds-futoshiki, .ds-grid-shell) {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--font-sans);
  background-color: var(--paper);
  background-image: none;
}

body:is(.ds-futoshiki, .ds-grid-shell) .app {
  width: min(1040px, 100%);
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 16px 48px;
}

body.ds-futoshiki .board {
  display: grid;
  gap: 0;
  padding: 8px;
  background: var(--board-cell);
  background-image: none;
  border: 2px solid var(--board-frame);
  border-radius: var(--radius-board, 10px);
  box-shadow: none;
  aspect-ratio: 1;
}

body.ds-futoshiki .cell {
  background: var(--board-cell);
  background-image: none;
  color: var(--board-given);
  font-family: var(--font-digits);
  font-size: clamp(0.9rem, 3.2vw, 1.3rem);
  font-weight: var(--weight-entry);
  border: 1px solid var(--board-line);
  border-radius: 2px;
}

body.ds-futoshiki .ineq {
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.78rem, 2.8vw, 1.02rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-strong);
  pointer-events: none;
  user-select: none;
}

/* Vertical signs sit in a dedicated row track; keep glyph inside the gap. */
body.ds-futoshiki .ineq-v {
  padding: 0;
  max-height: 100%;
  overflow: hidden;
}

body.ds-futoshiki .ineq-h {
  padding: 0;
  max-width: 100%;
  overflow: hidden;
}

html.is-play[data-ds-theme="dark"] body.ds-futoshiki .ineq {
  color: var(--ivory);
}

body.ds-futoshiki .cell.given,
body.ds-futoshiki .cell.given.hi,
body.ds-futoshiki .cell.given.same,
body.ds-futoshiki .cell.given.sel,
body.ds-futoshiki .cell.given.sel.same,
body.ds-futoshiki .cell.given.bad,
body.ds-futoshiki .cell.given.conflict,
body.ds-futoshiki .cell.given.mismatch {
  color: var(--board-given);
  font-weight: var(--weight-given);
}

body.ds-futoshiki .cell.entry,
body.ds-futoshiki .cell.entry.hi,
body.ds-futoshiki .cell.entry.same,
body.ds-futoshiki .cell.entry.sel,
body.ds-futoshiki .cell.entry.sel.same {
  color: var(--board-entry);
  font-weight: var(--weight-entry);
}

body.ds-futoshiki .cell.hi { background-color: var(--board-cell-hi); }
body.ds-futoshiki .cell.same {
  background-color: var(--board-cell-same);
  box-shadow: inset 0 0 0 2px var(--play-ring-same, #5F8F3E);
  border-radius: 5px;
  z-index: 1;
}
body.ds-futoshiki .cell.hint-unit { background-color: var(--board-cell-hi); }
body.ds-futoshiki .cell.hint-witness { background-color: var(--board-cell-same); }
body.ds-futoshiki .cell.hint-place {
  background-color: var(--board-cell-sel);
  box-shadow: inset 0 0 0 2px var(--indigo);
}

body.ds-futoshiki .cell.sel {
  background-color: var(--board-cell-sel);
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A);
  border-radius: 5px;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  body.ds-futoshiki .cell:hover:not(.sel) { background-color: var(--board-cell-hover); }
}

body.ds-futoshiki .cell:focus-visible {
  outline: none;
  z-index: 3;
  box-shadow: inset 0 0 0 2px var(--indigo), 0 0 0 2px var(--paper);
}

body.ds-futoshiki .cell.bad,
body.ds-futoshiki .cell.conflict,
body.ds-futoshiki .cell.mismatch {
  background-color: var(--board-cell-bad);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    color-mix(in srgb, var(--board-digit-bad) 16%, transparent) 3px,
    color-mix(in srgb, var(--board-digit-bad) 16%, transparent) 5px
  );
  color: var(--board-digit-bad);
  font-weight: var(--weight-given);
  box-shadow: inset 0 -3px 0 0 var(--board-digit-bad);
}
body.ds-futoshiki .cell.bad.sel,
body.ds-futoshiki .cell.conflict.sel,
body.ds-futoshiki .cell.mismatch.sel {
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A), inset 0 -3px 0 0 var(--board-digit-bad);
}

html.is-play body.ds-futoshiki .cell .notes,
body.ds-futoshiki .notes {
  position: absolute;
  inset: 3px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  width: auto;
  height: auto;
  padding: 0;
  color: var(--board-note);
  font-family: var(--font-digits);
  font-size: 0.52em;
  font-weight: 500;
  line-height: 1;
  overflow: hidden;
  place-items: center;
  pointer-events: none;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  html.is-play body.ds-futoshiki .cell .notes,
  body.ds-futoshiki .notes {
    font-size: 0.64em;
  }
}

body:is(.ds-futoshiki, .ds-grid-shell) .clock,
body:is(.ds-futoshiki, .ds-grid-shell) .clock #timer {
  font-family: var(--font-digits);
  font-variant-numeric: tabular-nums;
  color: var(--board-clock);
}

body:is(.ds-futoshiki, .ds-grid-shell) .clock #timer {
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  font-weight: 500;
  letter-spacing: 0.04em;
}

body:is(.ds-futoshiki, .ds-grid-shell) .clock #pause,
body:is(.ds-futoshiki, .ds-grid-shell) .toolbar button,
body:is(.ds-futoshiki, .ds-grid-shell) .toggles button,
body:is(.ds-futoshiki, .ds-grid-shell) .actions button,
body:is(.ds-futoshiki, .ds-grid-shell) .play-secondary button,
body:is(.ds-futoshiki, .ds-grid-shell) .keypad button,
body:is(.ds-futoshiki, .ds-grid-shell) .start-card button,
body:is(.ds-futoshiki, .ds-grid-shell) .win-card button,
body:is(.ds-futoshiki, .ds-grid-shell) .pause-card button {
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
}

body:is(.ds-futoshiki, .ds-grid-shell) .keypad {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 8px;
}

body:is(.ds-futoshiki, .ds-grid-shell) .start-kicker {
  margin: 0 0 6px;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

body:is(.ds-futoshiki, .ds-grid-shell) .keypad button {
  background: var(--board-key);
  border: 1px solid var(--board-key-line);
  color: var(--ink);
  font-family: var(--font-digits);
  font-size: 1.15rem;
  box-shadow: var(--shadow-1);
}

body:is(.ds-futoshiki, .ds-grid-shell) .keypad button:hover { border-color: var(--indigo); }

body:is(.ds-futoshiki, .ds-grid-shell) button.primary,
body:is(.ds-futoshiki, .ds-grid-shell) .start-card button.primary,
body:is(.ds-futoshiki, .ds-grid-shell) .start-card .primary,
body:is(.ds-futoshiki, .ds-grid-shell) .win-card button.primary,
body:is(.ds-futoshiki, .ds-grid-shell) #newGame.primary,
body:is(.ds-futoshiki, .ds-grid-shell) .play-secondary #newGame.primary,
body:is(.ds-futoshiki, .ds-grid-shell) #startGateBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cta);
  border: 1px solid var(--cta);
  color: var(--cta-ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  width: auto;
  min-width: 132px;
  min-height: 44px;
  padding: 10px 22px;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

body:is(.ds-futoshiki, .ds-grid-shell) .start-card::before {
  background: var(--cta);
}

body:is(.ds-futoshiki, .ds-grid-shell) .toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body:is(.ds-futoshiki, .ds-grid-shell) .toggles .check {
  grid-column: 1 / -1;
}

body:is(.ds-futoshiki, .ds-grid-shell) #pause {
  background: var(--paper-bright);
  border: 1px solid var(--line);
  color: var(--ink);
  min-width: 88px;
  padding: 8px 16px;
}

body:is(.ds-futoshiki, .ds-grid-shell) button.active {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--cta-ink);
}

body:is(.ds-futoshiki, .ds-grid-shell) .pill,
body:is(.ds-futoshiki, .ds-grid-shell) .play-mode-badge {
  background: var(--paper-bright);
  border: 1px solid var(--line);
  color: var(--ink);
}

body:is(.ds-futoshiki, .ds-grid-shell) .start-gate {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
}

body:is(.ds-futoshiki, .ds-grid-shell) .start-card,
body:is(.ds-futoshiki, .ds-grid-shell) .win-card,
body:is(.ds-futoshiki, .ds-grid-shell) .pause-card {
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px 22px;
  color: var(--ink);
}

body:is(.ds-futoshiki, .ds-grid-shell) .start-card h2,
body:is(.ds-futoshiki, .ds-grid-shell) .win-card h2,
body:is(.ds-futoshiki, .ds-grid-shell) .pause-card h2 {
  font-family: var(--font-display);
  color: var(--ink);
}

body:is(.ds-futoshiki, .ds-grid-shell) .mode-btn.is-on {
  color: var(--cta-ink);
  border-bottom-color: var(--cta);
}

body:is(.ds-futoshiki, .ds-grid-shell) .toolbar select,
body:is(.ds-futoshiki, .ds-grid-shell) .toolbar input {
  min-height: 44px;
  background: var(--paper-bright);
  color: var(--ink);
  border: 1px solid var(--line);
}

body:is(.ds-futoshiki, .ds-grid-shell) .footer-brand .mark { display: none; }

body:is(.ds-futoshiki, .ds-grid-shell) .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}

body:is(.ds-futoshiki, .ds-grid-shell) .footer-brand .ds-logo-word {
  display: block;
  line-height: 1;
}

body:is(.ds-futoshiki, .ds-grid-shell) .footer-brand .ds-logo-mark,
body:is(.ds-futoshiki, .ds-grid-shell) .footer-brand .ds-logo-dot {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 26%;
  background: none;
  object-fit: contain;
  display: block;
}



body:is(.ds-futoshiki, .ds-grid-shell) :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 760px) {
  body:is(.ds-futoshiki, .ds-grid-shell) .app {
    width: var(--mobile-content-width, 95%);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 0 28px;
  }
  /* play.css only orders clock/board/keypad. Side children otherwise stay at 0. */
  body:is(.ds-futoshiki, .ds-grid-shell) .clock { order: 0 !important; }
  body:is(.ds-futoshiki, .ds-grid-shell) .board-wrap { order: 1 !important; }
  body:is(.ds-futoshiki, .ds-grid-shell) .keypad { order: 2 !important; }
  body:is(.ds-futoshiki, .ds-grid-shell) .toggles,
  body:is(.ds-futoshiki, .ds-grid-shell) .actions,
  body:is(.ds-futoshiki, .ds-grid-shell) .check-wrap,
  body:is(.ds-futoshiki, .ds-grid-shell) .play-secondary { order: 3 !important; }
  body:is(.ds-futoshiki, .ds-grid-shell) .play-more { order: 4 !important; }
  body:is(.ds-futoshiki, .ds-grid-shell) .hint-why,
  body:is(.ds-futoshiki, .ds-grid-shell) .status { order: 5 !important; }
}

@media (max-height: 500px) and (orientation: landscape) {
  html.is-play body:is(.ds-futoshiki, .ds-grid-shell) { overflow: hidden; }
  body:is(.ds-futoshiki, .ds-grid-shell) .app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    padding: 4px 10px 8px;
    overflow: hidden;
  }
  body:is(.ds-futoshiki, .ds-grid-shell) .play-context,
  body:is(.ds-futoshiki, .ds-grid-shell) .meta,
  body:is(.ds-futoshiki, .ds-grid-shell) .board-legend { display: none; }
  body:is(.ds-futoshiki, .ds-grid-shell) .toolbar {
    flex: 0 0 auto;
    margin-bottom: 4px;
    gap: 6px;
  }
  body:is(.ds-futoshiki, .ds-grid-shell) .play {
    display: grid !important;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: unset !important;
    grid-template-columns: minmax(0, 1fr) minmax(148px, 34vw);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
  }
  body:is(.ds-futoshiki, .ds-grid-shell) .side {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: auto;
  }
  body:is(.ds-futoshiki, .ds-grid-shell) .board-wrap,
  body:is(.ds-futoshiki, .ds-grid-shell) .clock,
  body:is(.ds-futoshiki, .ds-grid-shell) .keypad,
  body:is(.ds-futoshiki, .ds-grid-shell) .play-secondary { order: unset !important; }
  body:is(.ds-futoshiki, .ds-grid-shell) .board-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto !important;
    min-width: 0;
    min-height: 0;
    max-width: 100% !important;
    height: 100%;
    max-height: 100%;
    aspect-ratio: unset;
  }
  body:is(.ds-futoshiki, .ds-grid-shell) .board {
    width: auto;
    height: 100%;
    max-height: 100%;
    aspect-ratio: 1;
  }
  body:is(.ds-futoshiki, .ds-grid-shell) .keypad { width: 100% !important; }
  body:is(.ds-futoshiki, .ds-grid-shell) .keypad button { min-height: 44px; }
  body:is(.ds-futoshiki, .ds-grid-shell) .clock { font-size: 1.15rem; }
}

@media (max-width: 430px) {
  body:is(.ds-futoshiki, .ds-grid-shell) .app { padding: 6px 0 28px; }
  body:is(.ds-futoshiki, .ds-grid-shell) .board-wrap { width: min(100%, 100vw - 24px); }
  body:is(.ds-futoshiki, .ds-grid-shell) .cell { font-size: clamp(0.8rem, 4.6vw, 1.15rem); }
  body:is(.ds-futoshiki, .ds-grid-shell) .ineq { font-size: clamp(0.72rem, 3.4vw, 1.0rem); }
  body:is(.ds-futoshiki, .ds-grid-shell) .keypad button { min-height: 44px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.ds-futoshiki, .ds-grid-shell) .cell,
  body:is(.ds-futoshiki, .ds-grid-shell) .keypad button {
    transition: none;
  }
}