:root {
  --logic-bg: #071329;
  --logic-panel: rgba(13, 31, 59, 0.92);
  --logic-panel-strong: #102d54;
  --logic-line: rgba(161, 203, 255, 0.18);
  --logic-text: #f5f9ff;
  --logic-muted: #a9c2df;
  --logic-good: #56e6b1;
  --logic-warn: #ffd166;
  --logic-danger: #ff7187;
  --logic-accent: #6ec8ff;
  --logic-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(circle at 14% 6%, rgba(87, 170, 255, 0.2), transparent 32rem),
    radial-gradient(circle at 86% 24%, rgba(151, 112, 255, 0.14), transparent 28rem),
    var(--logic-bg);
  color: var(--logic-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, select { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible { outline: 3px solid var(--logic-warn); outline-offset: 3px; }
[hidden] { display: none !important; }

.logic-lab { min-height: 100svh; }
.logic-main.main-screen { width: min(920px, 100%); margin: 0 auto; }
.logic-battle-screen.battle-screen { width: min(920px, 100%); height: calc(100svh - 56px); min-height: 0; max-height: calc(100svh - 56px); margin: 0 auto; overflow: hidden; }
.logic-progress-slot { min-height: 40px; display: flex; align-items: center; padding: 8px 12px; border: 1px solid var(--logic-line); border-radius: 12px; color: var(--logic-muted); }
.logic-main [data-wp-main-start] { min-height: 52px; }
.logic-return.wp-shell-return { width: 58px; min-width: 58px; justify-self: start; }
.logic-battle-back[data-wp-return="battle"] { width: 58px; min-width: 58px; min-height: 48px; height: 48px; justify-self: start; }
.battle-ad-reserve { width: min(920px, 100%); height: 56px; margin: 0 auto; }
body:not(.logic-playing) .battle-ad-reserve { display: none; }
body.logic-playing .game-page-info,
body.logic-playing .game-page-info-static { display: none !important; }
.logic-main { min-height: 100svh; padding: max(14px, env(safe-area-inset-top)) 16px 36px; }
.logic-header, .logic-battle-header {
  width: min(920px, 100%);
  margin: 0 auto;
  min-height: 56px;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 116px;
  align-items: center;
  gap: 12px;
}
.logic-header h1, .logic-battle-header h1 { margin: 0; text-align: center; font-size: clamp(17px, 2.7vw, 22px); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logic-return, .logic-battle-back, .logic-icon-button {
  min-width: 48px; min-height: 48px; border: 1px solid var(--logic-line); border-radius: 15px;
  background: rgba(255,255,255,.06); cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.logic-return { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; padding: 7px 10px; text-decoration: none; }
.logic-return img { width: 25px; height: 25px; object-fit: contain; }
.logic-return span, .logic-battle-back { font-size: 22px; }
.logic-header-tools { display: flex; justify-content: flex-end; position: relative; }
.logic-icon-button:hover, .logic-return:hover, .logic-battle-back:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); border-color: var(--logic-accent); }
.logic-settings { position: absolute; z-index: 10; top: 54px; right: 0; width: min(280px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--logic-line); border-radius: 17px; background: #0d2343; box-shadow: var(--logic-shadow); }
.logic-settings h2 { margin: 0 0 10px; font-size: 15px; }
.logic-setting-row { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--logic-muted); }
.logic-setting-row button, .logic-setting-row select { min-height: 38px; border: 1px solid var(--logic-line); border-radius: 10px; background: #173b69; color: var(--logic-text); padding: 5px 9px; }
/* Reversi's Arabic header places Settings in the physical left grid cell.
   Anchor only that game/locale popover to the cell's left edge so the
   280px panel and both controls remain inside phone-width viewports. */
:dir(rtl) body[data-logic-game="reversi"] .logic-header-tools .logic-settings {
  right: auto;
  left: 0;
}

.logic-hero { width: min(920px, 100%); margin: 10px auto 0; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, .88fr); align-items: center; gap: clamp(18px, 4vw, 48px); }
.logic-poster { width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--logic-line); border-radius: 28px; box-shadow: var(--logic-shadow); background: #102b52; }
.logic-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Tower's Main poster has a fixed wide-layout column contract. Keep the
   shared Logic Lab hero fluid for every sibling game, while making the
   canonical Tower surface deterministic at desktop widths. */
body[data-logic-game="tower-of-hanoi"] .logic-hero { grid-template-columns: 420px minmax(0, 1fr); }
/* Code Breaker's Main surface keeps the poster contract deterministic at
   desktop widths so the copy and Start action do not resize the artwork. */
body[data-logic-game="code-breaker"] .logic-hero { grid-template-columns: 420px minmax(0, 1fr); }
/* Sudoku's Main surface follows the governed wide-layout poster column so
   the puzzle promise and Start action remain readable beside a stable 420px
   poster at desktop widths. */
body[data-logic-game="sudoku"] .logic-hero { grid-template-columns: 420px minmax(0, 1fr); }
/* Four in a Row shares the Logic Lab wide-layout poster contract. Keep its
   poster column deterministic so the Main validator cannot inherit a fluid
   width that exceeds the governed 300px/420px breakpoints. */
body[data-logic-game="four-in-a-row"] .logic-hero { grid-template-columns: 420px minmax(0, 1fr); }
/* Sliding 15 uses the same governed wide-layout poster contract. */
body[data-logic-game="sliding-15"] .logic-hero { grid-template-columns: 420px minmax(0, 1fr); }
/* Peg Solitaire keeps the poster and action copy aligned to the governed
   wide-layout columns without changing its fixed-board rules. */
body[data-logic-game="peg-solitaire"] .logic-hero { grid-template-columns: 420px minmax(0, 1fr); }
/* Reversi uses the same governed wide-layout poster columns. Keep its
   strategy copy from expanding the poster beyond the Main contract. */
body[data-logic-game="reversi"] .logic-hero { grid-template-columns: 420px minmax(0, 1fr); }
/* Lights Out uses the same governed wide-layout poster columns so its
   compact landscape and desktop Main surfaces keep a stable visual anchor. */
body[data-logic-game="lights-out"] .logic-hero { grid-template-columns: 420px minmax(0, 1fr); }
/* Minefield's v13 Main keeps the poster on the governed 420px desktop
   column so the first-use summary and Start action do not stretch the
   artwork beyond the shared Main contract. */
body[data-logic-game="minefield-logic"] .logic-hero { grid-template-columns: 420px minmax(0, 1fr); }
.logic-copy { display: grid; gap: 13px; }
.logic-kicker { margin: 0; color: var(--logic-accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.logic-copy h2 { margin: 0; font-size: clamp(30px, 6vw, 54px); line-height: .98; letter-spacing: -.04em; }
.logic-copy p { margin: 0; color: var(--logic-muted); line-height: 1.6; max-width: 52ch; }
.logic-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.logic-facts span { padding: 7px 10px; border: 1px solid var(--logic-line); border-radius: 999px; color: #d5eaff; font-size: 12px; }
.logic-primary, .logic-secondary, .logic-danger, .logic-mini {
  min-height: 48px; border: 0; border-radius: 14px; padding: 10px 15px; font-weight: 800; cursor: pointer; transition: transform .18s ease, filter .18s ease, background .18s ease;
}
.logic-primary { background: linear-gradient(135deg, var(--logic-accent), #9e89ff); color: #061225; box-shadow: 0 8px 25px color-mix(in srgb, var(--logic-accent) 25%, transparent); }
.logic-secondary, .logic-mini { border: 1px solid var(--logic-line); background: rgba(255,255,255,.07); }
.logic-danger { background: rgba(255,113,135,.16); border: 1px solid rgba(255,113,135,.35); color: #ffd7de; }
.logic-primary:hover, .logic-secondary:hover, .logic-danger:hover, .logic-mini:hover { transform: translateY(-2px); filter: brightness(1.1); }
.logic-guide { width: min(920px, 100%); margin: 26px auto 0; padding: 20px; border: 1px solid var(--logic-line); border-radius: 22px; background: rgba(10, 26, 51, .7); }
.logic-guide h2, .logic-guide h3 { margin: 0 0 9px; }
.logic-guide h3 { margin-top: 17px; color: var(--logic-accent); font-size: 15px; }
.logic-guide p { margin: 0; color: var(--logic-muted); line-height: 1.6; }

.logic-battle-screen { min-height: 100svh; padding: max(10px, env(safe-area-inset-top)) 12px 0; }
.logic-battle-header { grid-template-columns: 116px minmax(0, 1fr) 116px; }
.logic-battle-header .logic-status-chip { justify-self: end; }
.logic-battle-header h1 { text-align: center; }
.logic-battle-wrap { width: min(920px, 100%); margin: 0 auto; min-height: calc(100svh - 112px); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 9px; }
.logic-tutorial { padding: 10px 14px; border: 1px solid var(--logic-line); border-radius: 14px; color: var(--logic-muted); font-size: 13px; line-height: 1.35; background: rgba(12, 34, 65, .8); }
.logic-status-line { min-height: 24px; color: var(--logic-good); text-align: center; font-size: 14px; font-weight: 700; }
.logic-status-line.is-error { color: var(--logic-danger); }
.logic-status-line.is-good { color: var(--logic-good); }
/* Sudoku feedback can be longer than the ready state. Keep its reserved
   status band stable so Hint feedback never shifts the familiar board. */
body[data-logic-game="sudoku"] .logic-status-line { height: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; overflow: auto; padding-inline: 6px; }
/* Code Breaker Hint copy can be longer than the ready state. Keep the shared
   board/status composition stable while preserving all slot agency. */
body[data-logic-game="code-breaker"] .logic-status-line { height: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; overflow: auto; padding-inline: 6px; }
body[data-logic-game="minefield-logic"] .logic-status-line { height: 52px; min-height: 52px; display: flex; align-items: center; justify-content: center; overflow: auto; padding-inline: 4px; }
body[data-logic-game="minefield-logic"] .logic-battle-wrap { min-height: calc(100svh - 122px); }
.logic-board-panel { min-height: 0; display: grid; place-items: center; padding: clamp(7px, 2vw, 18px); border: 1px solid var(--logic-line); border-radius: 22px; background: linear-gradient(160deg, rgba(17, 50, 92, .94), rgba(8, 23, 46, .96)); box-shadow: var(--logic-shadow); overflow: auto; }
.logic-board-area { width: min(100%, 700px); min-width: 0; display: grid; gap: 12px; place-items: center; }
.logic-board-toolbar, .logic-action-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.logic-board-toolbar .naval-placement-progress { flex-basis: 100%; margin: 0 6px; }
.logic-action-row { padding: 4px 0 max(8px, env(safe-area-inset-bottom)); }
.logic-action-row button { min-height: 42px; }
.logic-select { min-height: 42px; padding: 6px 10px; border: 1px solid var(--logic-line); border-radius: 12px; background: #173b69; color: var(--logic-text); }
.logic-status-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 10px; border: 1px solid var(--logic-line); border-radius: 999px; color: var(--logic-muted); font-size: 12px; white-space: nowrap; }
.logic-cell { border: 1px solid rgba(215, 238, 255, .2); background: rgba(219, 239, 255, .1); cursor: pointer; display: grid; place-items: center; user-select: none; transition: transform .12s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.logic-cell:hover { transform: translateY(-2px); border-color: var(--logic-accent); }
.logic-cell.is-selected { border-color: var(--logic-warn); box-shadow: 0 0 0 3px rgba(255,209,102,.22), inset 0 0 18px rgba(255,209,102,.13); }
.logic-cell.is-hint { animation: logic-pulse 850ms ease-in-out 2; border-color: var(--logic-warn); }
@keyframes logic-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 26px rgba(255,209,102,.6); } }

.logic-minesweeper-board { display: grid; gap: 3px; width: min(100%, 700px); }
.logic-minesweeper-board .logic-cell { aspect-ratio: 1; min-width: 0; font-weight: 900; border-radius: 6px; font-size: clamp(11px, 2.8vw, 18px); }
.logic-minesweeper-board .is-revealed { background: rgba(8, 18, 37, .82); cursor: default; }
.logic-minesweeper-board .is-mine { background: rgba(255,113,135,.28); }
.logic-minesweeper-board .is-flag { color: var(--logic-warn); }
.logic-minesweeper-board .n1 { color: #7fd3ff; } .logic-minesweeper-board .n2 { color: #6eeba8; } .logic-minesweeper-board .n3 { color: #ffb870; } .logic-minesweeper-board .n4 { color: #ccadff; }
.logic-sudoku-board { width: min(100%, 560px); min-width: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border: 2px solid var(--logic-accent); }
.logic-sudoku-board .logic-cell { min-width: 0; aspect-ratio: 1; border-radius: 0; font-weight: 850; font-size: clamp(15px, 4vw, 27px); }
.logic-sudoku-board .given { background: rgba(126, 205, 255, .2); color: #fff; cursor: default; }
.logic-sudoku-board .wrong { color: var(--logic-danger); animation: logic-shake .22s ease-in-out; }
@keyframes logic-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.logic-keypad { width: min(100%, 560px); min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.logic-keypad button { min-width: 0; min-height: 40px; }
.logic-lights-board { display: grid; grid-template-columns: repeat(5, minmax(44px, 74px)); gap: 7px; }
.logic-lights-board .logic-cell { aspect-ratio: 1; border-radius: 14px; background: #0a1b35; }
.logic-lights-board .on { background: var(--logic-warn); color: #3a2800; box-shadow: 0 0 28px rgba(255,209,102,.6); }
.logic-peg-board { display: grid; grid-template-columns: repeat(7, minmax(30px, 58px)); gap: 5px; padding: 14px; border-radius: 22px; background: #1a4c57; }
.logic-peg-board .void { visibility: hidden; pointer-events: none; }
.logic-peg-board .logic-cell { aspect-ratio: 1; border-radius: 50%; background: #3a7880; border-color: transparent; }
.logic-peg-board .peg { background: #ffce7a; box-shadow: inset 0 -5px 0 rgba(99, 48, 10, .25), 0 6px 12px rgba(0,0,0,.22); }
.logic-peg-board .empty { background: #0c2b38; }
.logic-sliding-board { display: grid; grid-template-columns: repeat(4, minmax(52px, 108px)); gap: 7px; }
.logic-sliding-board .logic-cell { aspect-ratio: 1; border-radius: 14px; font-size: clamp(20px, 6vw, 36px); font-weight: 900; background: linear-gradient(135deg, #286a9a, #193e75); }
.logic-sliding-board .blank { visibility: hidden; }
.logic-code-board { width: min(100%, 610px); display: grid; gap: 10px; }
.logic-code-slots, .logic-code-colors, .logic-code-history { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.logic-code-slot, .logic-color { width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.logic-color { cursor: pointer; }
.logic-color[data-color="0"] { background: #ff6b6b; } .logic-color[data-color="1"] { background: #ffd166; } .logic-color[data-color="2"] { background: #6ee7b7; } .logic-color[data-color="3"] { background: #6ec8ff; } .logic-color[data-color="4"] { background: #b69cff; } .logic-color[data-color="5"] { background: #ff9ed2; }
.logic-code-slot[data-color="0"] { background: #ff6b6b; } .logic-code-slot[data-color="1"] { background: #ffd166; } .logic-code-slot[data-color="2"] { background: #6ee7b7; } .logic-code-slot[data-color="3"] { background: #6ec8ff; } .logic-code-slot[data-color="4"] { background: #b69cff; } .logic-code-slot[data-color="5"] { background: #ff9ed2; }
.logic-guess-row { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; border: 1px solid var(--logic-line); border-radius: 14px; }
.logic-feedback { color: var(--logic-warn); font-weight: 800; letter-spacing: .1em; }
.logic-hanoi-board { width: min(100%, 680px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; }
.logic-hanoi-target { flex: 0 1 auto; max-width: 100%; margin: 0; color: var(--logic-text); font-weight: 750; }
.logic-tower { min-height: 215px; display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; gap: 4px; padding: 10px 4px 12px; border: 1px solid var(--logic-line); border-radius: 18px; background: linear-gradient(#173e70, #0b2344); cursor: pointer; }
.logic-tower::after { content: ""; position: absolute; }
.logic-disk { height: 26px; border-radius: 999px; background: linear-gradient(90deg, #ff9b72, #ffd166); color: #3c200d; display: grid; place-items: center; font-weight: 900; font-size: 12px; }
.logic-tower.is-selected { border-color: var(--logic-warn); box-shadow: 0 0 24px rgba(255,209,102,.28); }
.logic-tower.is-legal-destination { border-color: var(--logic-good); outline: 2px solid rgba(86,230,177,.52); outline-offset: 2px; box-shadow: 0 0 18px rgba(86,230,177,.2); }
.logic-reversi-board { display: grid; grid-template-columns: repeat(8, minmax(31px, 64px)); gap: 4px; padding: 7px; border-radius: 16px; background: #17634e; }
.logic-reversi-board .logic-cell, .logic-connect-board .logic-cell { aspect-ratio: 1; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); }
.logic-reversi-board .legal { box-shadow: inset 0 0 0 3px rgba(255,255,255,.28); }
.logic-reversi-board .disc { width: 76%; height: 76%; border-radius: 50%; box-shadow: inset -4px -5px 0 rgba(0,0,0,.22), 0 4px 8px rgba(0,0,0,.25); }
.logic-reversi-board .black .disc { background: #19263c; } .logic-reversi-board .white .disc { background: #f3f6ff; }
.logic-reversi-policy, .logic-reversi-reply { width: min(100%, 560px); margin: 0; line-height: 1.35; }
.logic-reversi-policy { color: var(--logic-text); }
.logic-reversi-reply { color: var(--logic-good); font-weight: 750; }
.logic-connect-board { display: grid; grid-template-columns: repeat(7, minmax(37px, 75px)); gap: 6px; padding: 9px; border-radius: 20px; background: #2459a0; }
.logic-connect-board .logic-cell { background: #081d44; border: 2px solid rgba(255,255,255,.1); }
.logic-connect-board .disc { width: 76%; height: 76%; border-radius: 50%; box-shadow: inset -4px -5px 0 rgba(0,0,0,.2), 0 3px 8px rgba(0,0,0,.2); }
.logic-connect-board .red .disc { background: #ff6f7e; } .logic-connect-board .yellow .disc { background: #ffd166; }
.logic-naval-board { display: grid; grid-template-columns: repeat(6, minmax(34px, 64px)); gap: 4px; }
.logic-naval-board .logic-cell { aspect-ratio: 1; border-radius: 8px; background: #1a7b91; }
.logic-naval-board .ship { background: #5fc1a6; } .logic-naval-board .hit { background: #ff6f7e; } .logic-naval-board .miss { background: #29506e; color: #b7dbff; }
.logic-naval-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 4vw, 30px); width: min(100%, 800px); }
.logic-naval-layout h3 { margin: 0 0 7px; text-align: center; font-size: 13px; color: var(--logic-muted); }
.logic-rotate { min-height: 40px; }

.logic-result { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(2, 10, 24, .78); backdrop-filter: blur(8px); }
.logic-result-card { width: min(460px, 100%); padding: 28px; border: 1px solid var(--logic-line); border-radius: 24px; text-align: center; background: #102d54; box-shadow: var(--logic-shadow); animation: logic-rise .28s ease-out; }
.logic-result-card h2 { margin: 0 0 9px; font-size: 32px; }
.logic-result-card p { margin: 0 0 20px; color: var(--logic-muted); line-height: 1.55; }
.logic-result-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@keyframes logic-rise { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.logic-live { min-height: 20px; color: var(--logic-muted); font-size: 13px; text-align: center; }

@media (max-width: 660px) {
  .logic-main { padding-inline: 12px; }
  .logic-header, .logic-battle-header { grid-template-columns: 86px minmax(0, 1fr) 86px; gap: 7px; }
  .logic-return { padding-inline: 8px; }
  .logic-return img { display: none; }
  .logic-hero { grid-template-columns: 1fr; gap: 18px; margin-top: 4px; }
  body[data-logic-game="tower-of-hanoi"] .logic-hero { grid-template-columns: 1fr; }
  body[data-logic-game="code-breaker"] .logic-hero { grid-template-columns: 1fr; }
  body[data-logic-game="sudoku"] .logic-hero { grid-template-columns: 1fr; }
  body[data-logic-game="sudoku"] .logic-return.wp-shell-return { gap: 3px; padding-inline: 4px; }
  body[data-logic-game="sudoku"] .logic-return img { display: block; }
  body[data-logic-game="four-in-a-row"] .logic-hero { grid-template-columns: 1fr; }
  body[data-logic-game="four-in-a-row"] .logic-return.wp-shell-return { gap: 3px; padding-inline: 4px; }
  body[data-logic-game="four-in-a-row"] .logic-return img { display: block; }
  body[data-logic-game="sliding-15"] .logic-hero { grid-template-columns: 1fr; }
  body[data-logic-game="sliding-15"] .logic-return.wp-shell-return { gap: 3px; padding-inline: 4px; }
  body[data-logic-game="sliding-15"] .logic-return img { display: block; }
  body[data-logic-game="peg-solitaire"] .logic-hero { grid-template-columns: 1fr; }
  body[data-logic-game="reversi"] .logic-hero { grid-template-columns: 1fr; }
  body[data-logic-game="lights-out"] .logic-hero { grid-template-columns: 1fr; }
  body[data-logic-game="minefield-logic"] .logic-hero { grid-template-columns: 1fr; }
  body[data-logic-game="lights-out"] .logic-return.wp-shell-return { gap: 3px; padding-inline: 4px; }
  body[data-logic-game="lights-out"] .logic-return img { display: block; }
  body[data-logic-game="minefield-logic"] .logic-return.wp-shell-return { gap: 3px; padding-inline: 4px; }
  body[data-logic-game="minefield-logic"] .logic-return img { display: block; }
  body[data-logic-game="peg-solitaire"] .logic-return.wp-shell-return { gap: 3px; padding-inline: 4px; }
  body[data-logic-game="peg-solitaire"] .logic-return img { display: block; }
  body[data-logic-game="reversi"] .logic-return.wp-shell-return { gap: 3px; padding-inline: 4px; }
  body[data-logic-game="reversi"] .logic-return img { display: block; }
  .logic-poster { max-width: 410px; margin: 0 auto; }
  .logic-copy h2 { font-size: clamp(31px, 11vw, 46px); }
  .logic-guide { margin-top: 18px; }
  .logic-battle-wrap { min-height: calc(100svh - 102px); }
  .logic-board-panel { padding: 8px 4px; border-radius: 18px; }
  .logic-naval-layout { grid-template-columns: 1fr; }
  .logic-result-actions { grid-template-columns: 1fr; }
}
@media (max-width: 660px) {
  /* Keep the Reversi board playable while reserving the independent Battle
     footer for Hint and New Puzzle on the wide-phone viewport. */
  body[data-logic-game="reversi"] .logic-reversi-board {
    width: min(100%, 488px);
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media (min-width: 661px) and (max-width: 1023px) and (orientation: landscape) {
  /* Compact landscape reserves a narrower poster column so the summary,
     progress, and Start action remain visible beside it. */
  body[data-logic-game="tower-of-hanoi"] .logic-hero { grid-template-columns: 300px minmax(0, 1fr); }
  body[data-logic-game="code-breaker"] .logic-hero { grid-template-columns: 300px minmax(0, 1fr); }
  body[data-logic-game="sudoku"] .logic-hero { grid-template-columns: 300px minmax(0, 1fr); }
  body[data-logic-game="four-in-a-row"] .logic-hero { grid-template-columns: 300px minmax(0, 1fr); }
  body[data-logic-game="sliding-15"] .logic-hero { grid-template-columns: 420px minmax(0, 1fr); }
  body[data-logic-game="peg-solitaire"] .logic-hero { grid-template-columns: 300px minmax(0, 1fr); }
  body[data-logic-game="reversi"] .logic-hero { grid-template-columns: 300px minmax(0, 1fr); }
  body[data-logic-game="lights-out"] .logic-hero { grid-template-columns: 300px minmax(0, 1fr); }
  body[data-logic-game="minefield-logic"] .logic-hero { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (min-width: 661px) and (max-height: 760px) and (orientation: landscape) {
  .logic-battle-screen { height: calc(100svh - 56px); min-height: 0; max-height: calc(100svh - 56px); overflow: hidden; padding-top: 4px; }
  .logic-battle-wrap { height: calc(100% - 60px); min-height: 0; gap: 6px; }
  .logic-tutorial { max-height: 32px; overflow: hidden; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .logic-status-line { min-height: 18px; font-size: 13px; }
  .logic-board-panel { min-height: 0; padding: 6px; overflow: hidden; }
  .logic-board-area { height: auto; max-height: 100%; align-self: stretch; justify-self: stretch; overflow: hidden; gap: 6px; }
  .logic-board-area > div { height: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; }
  .logic-board-area:has(.logic-connect-board) { width: 100%; height: 100%; }
  .logic-board-area > div:has(.logic-connect-board) { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 6px; min-height: 0; }
  .logic-board-area > div:has(.logic-connect-board) .logic-board-toolbar { grid-column: 2; grid-row: 1; }
  .logic-board-area > div:has(.logic-connect-board) .logic-connect-board { grid-column: 1; grid-row: 1; width: auto; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 7 / 6; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); justify-self: center; }
  .logic-minesweeper-board { width: min(100%, 430px); }
  /* Minefield's desktop landscape board shares a finite-height Battle wrap
     with the action row. Size the 9×9 board from the remaining viewport
     height so its final row stays above Hint/Undo/New Puzzle. */
  body[data-logic-game="minefield-logic"] .logic-minesweeper-board {
    width: min(100%, calc(100svh - 330px));
  }
  .logic-board-area > div:has(.logic-sudoku-board) { width: 100%; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 240px); grid-template-rows: auto minmax(0, 1fr); align-items: center; gap: 6px; }
  .logic-board-area > div:has(.logic-sudoku-board) .logic-board-toolbar { grid-column: 1 / -1; grid-row: 1; }
  .logic-board-area > div:has(.logic-sudoku-board) .logic-sudoku-board { grid-column: 1; grid-row: 2; width: min(100%, 420px); height: auto; align-self: center; justify-self: center; }
  .logic-board-area > div:has(.logic-sudoku-board) .logic-keypad { grid-column: 2; grid-row: 2; width: 100%; gap: 4px; align-self: center; }
  .logic-board-area > div:has(.logic-sudoku-board) .logic-keypad button { min-height: 44px; }
  .logic-board-area > div:has(.logic-reversi-board) { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 280px); grid-template-rows: auto auto 1fr; align-items: center; gap: 6px 12px; }
  .logic-board-area > div:has(.logic-reversi-board) .logic-reversi-board { grid-column: 1; grid-row: 1 / 4; width: min(100%, calc(100svh - 195px), 440px); justify-self: center; }
  .logic-board-area > div:has(.logic-reversi-board) .logic-board-toolbar,
  .logic-board-area > div:has(.logic-reversi-board) .logic-reversi-policy,
  .logic-board-area > div:has(.logic-reversi-board) .logic-reversi-reply { grid-column: 2; width: 100%; }
  .logic-battle-wrap:has(.logic-sliding-board) { grid-template-columns: minmax(0, 1fr) minmax(220px, 260px); grid-template-rows: auto auto minmax(0, 1fr); }
  .logic-battle-wrap:has(.logic-sliding-board) > .logic-tutorial { grid-column: 1 / -1; grid-row: 1; }
  .logic-battle-wrap:has(.logic-sliding-board) > .logic-status-line { grid-column: 1 / -1; grid-row: 2; }
  .logic-battle-wrap:has(.logic-sliding-board) > .logic-board-panel { grid-column: 1; grid-row: 3; }
  .logic-battle-wrap:has(.logic-sliding-board) > .logic-action-row { grid-column: 2; grid-row: 3; align-content: center; padding: 4px 0; }
  .logic-board-area:has(.logic-sliding-board) { width: 100%; height: 100%; }
  .logic-board-area > div:has(.logic-sliding-board) { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 8px; }
  .logic-board-area > div:has(.logic-sliding-board) .logic-sliding-board { grid-column: 1; grid-row: 1; width: min(100%, calc(100svh - 176px), 260px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; justify-self: center; }
  .logic-board-area > div:has(.logic-sliding-board) .logic-live { grid-column: 2; grid-row: 1; }
  .logic-battle-wrap:has(.logic-sliding-board) > .logic-action-row button { min-height: 44px; }
  .logic-action-row { padding-bottom: 4px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .logic-battle-screen { height: calc(100svh - 56px); min-height: 0; max-height: calc(100svh - 56px); overflow: hidden; padding-top: 4px; }
  .logic-battle-header { min-height: 42px; }
  .logic-battle-header .logic-battle-back, .logic-battle-header .logic-status-chip { min-height: 38px; }
  .logic-battle-wrap { height: calc(100% - 42px); min-height: 0; gap: 4px; }
  .logic-tutorial { max-height: 24px; overflow: hidden; padding: 3px 8px; font-size: 11px; line-height: 1.2; white-space: nowrap; }
  .logic-status-line { min-height: 16px; font-size: 12px; line-height: 1; }
  body[data-logic-game="sudoku"] .logic-status-line { height: 24px; min-height: 24px; overflow: auto; }
  body[data-logic-game="code-breaker"] .logic-status-line { height: 24px; min-height: 24px; overflow: auto; }
  body[data-logic-game="code-breaker"] .logic-battle-wrap { height: calc(100% - 48px); }
  body[data-logic-game="sudoku"] .logic-battle-wrap { height: calc(100% - 48px); }
  body[data-logic-game="minefield-logic"] .logic-status-line {
    height: 16px; min-height: 16px; overflow: hidden;
  }
  .logic-board-panel { min-height: 0; padding: 3px; overflow: hidden; }
  .logic-board-area { height: auto; max-height: 100%; align-self: stretch; justify-self: stretch; overflow: hidden; gap: 4px; }
  .logic-board-area > div { height: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; }
  .logic-action-row { gap: 5px; padding: 0 0 3px; }
  .logic-action-row button, .logic-select { min-height: 32px; padding-block: 4px; }
  /* Minefield's 9x9 board shares the short-landscape row with its toolbar.
     Keep the board square and give it the largest safe height after the
     compact header/tutorial/status/action reserve, instead of letting the
     old stacked layout collapse it to a narrow unreadable grid. */
  .logic-board-area:has(.logic-minesweeper-board) { width: 100%; height: 100%; }
  .logic-board-area > div:has(.logic-minesweeper-board) {
    width: 100%; height: 100%; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
    grid-template-rows: minmax(0, 1fr); align-items: center; gap: 8px;
  }
  .logic-board-area > div:has(.logic-minesweeper-board) .logic-minesweeper-board {
    grid-column: 1; grid-row: 1; width: min(100%, calc(100svh - 170px));
    height: auto; aspect-ratio: 1; max-width: 100%; max-height: 100%;
    grid-template-rows: repeat(9, minmax(0, 1fr)); align-self: center; justify-self: center;
  }
  .logic-board-area > div:has(.logic-minesweeper-board) .logic-board-toolbar {
    grid-column: 2; grid-row: 1; width: 100%; align-content: center;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  }
  body[data-logic-game="minefield-logic"] .logic-board-toolbar .logic-select {
    grid-column: 1 / -1; width: 100%; min-width: 0;
  }
  body[data-logic-game="minefield-logic"] .logic-board-toolbar .logic-mini,
  body[data-logic-game="minefield-logic"] .logic-board-toolbar .logic-status-chip {
    min-width: 0; width: 100%; justify-content: center; padding-inline: 6px;
  }
  .logic-sudoku-board { width: min(100%, calc(100svh - 208px)); }
  .logic-board-area > div:has(.logic-sudoku-board) { width: 100%; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 240px); grid-template-rows: auto minmax(0, 1fr); align-items: center; gap: 4px; }
  .logic-board-area > div:has(.logic-sudoku-board) .logic-board-toolbar { grid-column: 1 / -1; grid-row: 1; }
  .logic-board-area > div:has(.logic-sudoku-board) .logic-sudoku-board { grid-column: 1; grid-row: 2; align-self: center; justify-self: center; height: auto; }
  .logic-board-area > div:has(.logic-sudoku-board) .logic-keypad { grid-column: 2; grid-row: 2; width: 100%; gap: 3px; align-self: center; }
  .logic-keypad button { min-height: 32px; padding: 2px 4px; }
  .logic-lights-board { grid-template-columns: repeat(5, minmax(28px, 48px)); gap: 4px; }
  .logic-peg-board { grid-template-columns: repeat(7, minmax(18px, 38px)); gap: 3px; padding: 6px; }
  .logic-sliding-board { grid-template-columns: repeat(4, minmax(30px, 72px)); gap: 4px; }
  .logic-code-board { gap: 4px; }
  .logic-code-slot, .logic-color { width: 34px; height: 34px; }
  /* The wide logical envelope keeps Code Breaker's touch controls large, but
     its three-line stage brief still has to share the compact board with the
     Submit action. Keep the brief legible while reserving the full action
     button inside the fixed Canvas instead of letting it clip below Battle. */
  body[data-logic-game="code-breaker"] .logic-code-stage-meta {
    max-height: 42px;
    overflow: hidden;
    gap: 1px;
    padding: 3px 8px;
  }
  body[data-logic-game="code-breaker"] .logic-code-stage-meta strong { font-size: 11px; line-height: 1.05; }
  body[data-logic-game="code-breaker"] .logic-code-stage-meta span { font-size: 10px; line-height: 1.05; }
  body[data-logic-game="code-breaker"] .logic-code-legend {
    min-height: 14px;
    height: 14px;
    margin: 0;
    font-size: 11px;
    line-height: 1;
  }
  body[data-logic-game="code-breaker"] .logic-action-row button {
    min-height: 44px;
    padding-block: 6px;
  }
  .logic-hanoi-board { gap: 4px; }
  .logic-tower { min-height: 130px; padding: 5px 3px 7px; }
  .logic-reversi-board { grid-template-columns: repeat(8, minmax(20px, 45px)); gap: 2px; padding: 4px; }
  .logic-connect-board { grid-template-columns: repeat(7, minmax(24px, 55px)); gap: 3px; padding: 5px; }
  .logic-naval-layout { gap: 6px; }
  .logic-naval-board { grid-template-columns: repeat(6, minmax(22px, 48px)); gap: 2px; }
  .logic-battle-wrap:has(.logic-sliding-board) { grid-template-columns: minmax(0, 1fr) minmax(220px, 260px); grid-template-rows: auto auto minmax(0, 1fr); }
  .logic-battle-wrap:has(.logic-sliding-board) > .logic-tutorial { grid-column: 1 / -1; grid-row: 1; }
  .logic-battle-wrap:has(.logic-sliding-board) > .logic-status-line { grid-column: 1 / -1; grid-row: 2; }
  .logic-battle-wrap:has(.logic-sliding-board) > .logic-board-panel { grid-column: 1; grid-row: 3; }
  .logic-battle-wrap:has(.logic-sliding-board) > .logic-action-row { grid-column: 2; grid-row: 3; align-content: center; padding: 0; }
  .logic-board-area:has(.logic-sliding-board) { width: 100%; height: 100%; }
  .logic-board-area > div:has(.logic-sliding-board) { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 6px; }
  .logic-board-area > div:has(.logic-sliding-board) .logic-sliding-board { grid-column: 1; grid-row: 1; width: min(100%, calc(100svh - 176px), 260px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; justify-self: center; }
  .logic-board-area > div:has(.logic-sliding-board) .logic-live { grid-column: 2; grid-row: 1; }
  .logic-battle-wrap:has(.logic-sliding-board) > .logic-action-row button { min-height: 44px; padding-block: 4px; }
  /* Lights Out's five-by-five board must fit above the persistent action row
     in short landscape; otherwise the final tile row is painted beneath
     Hint, Undo, and New Puzzle and centre taps are intercepted. */
  body[data-logic-game="lights-out"] .logic-board-area:has(.logic-lights-board) { width: 100%; height: 100%; }
  body[data-logic-game="lights-out"] .logic-board-area > div:has(.logic-lights-board) {
    width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto;
    align-items: center; gap: 4px;
  }
  body[data-logic-game="lights-out"] .logic-board-area > div:has(.logic-lights-board) .logic-lights-board {
    width: min(100%, calc(100svh - 220px)); height: auto; aspect-ratio: 1;
    grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
    align-self: center; justify-self: center;
  }
}

/* Sliding 15's portrait Battle must fit the persistent action row inside the
   fixed canvas; otherwise focusing Hint scrolls the section and moves the
   primary board even though the status row itself is height-stable. */
@media (max-width: 660px) and (min-height: 561px) {
  body[data-logic-game="code-breaker"] .logic-battle-wrap {
    /* The shared Battle Canvas fixes and scales the screen to its logical
       height. Use that containing block here; 100svh would measure the
       physical viewport again and push the action row below the canvas. */
    height: calc(100% - 72px);
    min-height: 0;
  }
  body[data-logic-game="sudoku"] .logic-battle-wrap {
    height: calc(100svh - 122px);
    min-height: 0;
  }
  body[data-logic-game="sliding-15"] .logic-battle-wrap {
    /* The Battle Canvas is fixed to a logical height by the shared scaler;
       use that containing block instead of the physical viewport height so
       the action row remains inside the hit-test surface. */
    height: calc(100% - 72px);
    min-height: 0;
  }
}

/* Tall desktop Battle viewports need the same fixed canvas reserve as the
   portrait layout. Without this Sudoku's status/action rows extend the
   hidden section by a few pixels and focus scrolling moves the board. */
@media (min-height: 761px) {
  /* Code Breaker is mounted in the shared fixed logical Canvas. At tall
     desktop sizes the old svh-based minimum measured the physical viewport
     again and placed Hint/Undo/New Puzzle below the clipped Canvas. */
  body[data-logic-game="code-breaker"] .logic-battle-wrap {
    height: calc(100% - 72px);
    min-height: 0;
  }
  body[data-logic-game="sudoku"] .logic-battle-wrap {
    height: calc(100svh - 122px);
    min-height: 0;
  }
  /* Sliding 15 uses the same fixed logical Battle Canvas at tall desktop
     sizes. Keep its responsive wrap inside that logical height instead of
     measuring the physical viewport, which otherwise pushes the action row
     below the clipped Canvas at 1920x1080. */
  body[data-logic-game="sliding-15"] .logic-battle-wrap {
    height: calc(100% - 72px);
    min-height: 0;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  body[data-logic-game="sliding-15"] .logic-battle-wrap {
    height: calc(100% - 48px);
  }
}

/* Reversi Main keeps its guide in normal document flow, but the compact
   landscape first frame must still expose the primary Start action. */
@media (min-width: 661px) and (max-height: 560px) and (orientation: landscape) {
  body[data-logic-game="reversi"] .logic-main {
    padding-top: max(4px, env(safe-area-inset-top));
  }
  body[data-logic-game="reversi"] .logic-hero {
    margin-top: 4px;
    gap: 12px;
  }
  body[data-logic-game="reversi"] .logic-poster {
    max-width: 300px;
  }
  body[data-logic-game="reversi"] .logic-copy {
    gap: 8px;
  }
  body[data-logic-game="reversi"] .logic-copy h2 {
    font-size: clamp(28px, 5vw, 40px);
  }
}
@media (min-width: 700px) and (max-height: 760px) {
  .logic-sudoku-board { width: min(100%, 460px); }
}
@media (min-width: 700px) and (max-height: 560px) and (orientation: landscape) {
  .logic-board-area > div:has(.logic-sudoku-board) .logic-sudoku-board { width: min(100%, calc(100svh - 226px)); }
  .logic-board-area > div:has(.logic-sudoku-board) .logic-sudoku-board .logic-cell { padding: 0; font-size: 16px; line-height: 1; }
  .logic-board-area > div:has(.logic-sudoku-board) .logic-keypad button { min-height: 44px; }
}
/* Sliding 15 owns the target-floor repair; preserve other Logic Lab games. */
body[data-logic-game="sliding-15"] .logic-action-row button { min-width: 44px; min-height: 44px; }
body[data-logic-game="sliding-15"] .logic-battle-back { min-width: 48px; min-height: 44px; }
/* Keep Sliding 15's primary board anchored while Hint replaces the short
   ready message with a localized explanation that may wrap to extra lines. */
body[data-logic-game="sliding-15"] .logic-status-line {
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding-inline: 4px;
  line-height: 1.25;
}
@media (max-height: 560px) and (orientation: landscape) {
  body[data-logic-game="sliding-15"] .logic-status-line {
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    line-height: 1;
  }

  /* The shared wide Canvas renders at up to 0.91× on an 844×390 viewport.
     Keep every Sliding 15 tile and direct Battle control above 44 physical
     pixels after that transform, without changing other Logic Lab games. */
  body[data-logic-game="sliding-15"] .logic-sliding-board {
    width: min(100%, 244px);
    grid-template-columns: repeat(4, minmax(50px, 1fr));
  }
  body[data-logic-game="sliding-15"] .logic-sliding-board .logic-cell {
    min-width: 50px;
    min-height: 50px;
  }
  body[data-logic-game="sliding-15"] .logic-battle-back {
    min-width: 58px;
    min-height: 58px;
  }
  body[data-logic-game="sliding-15"] .logic-battle-wrap:has(.logic-sliding-board) > .logic-action-row button {
    min-width: 58px !important;
    min-height: 58px !important;
  }
}
/* Sudoku Hint re-renders one cell. The shared cell pulse scales the hinted
   cell, which can expand the centered panel's scrollable overflow and move
   its internal scroll position at responsive sizes. Keep Sudoku feedback
   inside the board paint box while retaining a visible, non-layout pulse. */
body[data-logic-game="sudoku"] .logic-sudoku-board {
  overflow: clip;
}
body[data-logic-game="sudoku"] .logic-board-panel {
  overflow-anchor: none;
}
body[data-logic-game="sudoku"] .logic-sudoku-board .logic-cell.is-selected {
  box-shadow: inset 0 0 18px rgba(255, 209, 102, .13);
}
body[data-logic-game="sudoku"] .logic-sudoku-board .logic-cell.is-hint {
  animation: sudoku-hint-pulse 850ms ease-in-out 2;
  transform: none;
}
/* Code Breaker's campaign Stage is a governed logical Canvas. The shared
   selector owns rail geometry and gestures; these rules add only the game's
   card hierarchy and local-progress presentation. */
body[data-logic-game="code-breaker"] .code-breaker-stage-screen {
  grid-template-rows: 58px auto minmax(0, 1fr) auto 24px;
  gap: 8px;
}
body[data-logic-game="code-breaker"] .code-breaker-stage-heading { padding: 4px 8px; }
body[data-logic-game="code-breaker"] .code-breaker-stage-settings { justify-self: end; }
body[data-logic-game="code-breaker"] .code-breaker-stage-heading .logic-kicker { display: block; font-size: 10px; letter-spacing: .09em; }
body[data-logic-game="code-breaker"] .code-breaker-stage-heading h1 { margin: 0; font-size: clamp(17px, 3vw, 24px); line-height: 1.05; }
body[data-logic-game="code-breaker"] .code-breaker-stage-heading p { margin: 1px 0 0; font-size: 11px; color: #d7eaff; }
body[data-logic-game="code-breaker"] .code-breaker-stage-hint { z-index: 1; margin: 0 auto; padding: 5px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #e9f4ff; background: rgba(13, 27, 45, .72); font-size: 12px; text-align: center; }
body[data-logic-game="code-breaker"] #stageRail { align-self: center; min-height: 198px !important; }
body[data-logic-game="code-breaker"] .code-breaker-stage-card { display: grid; grid-template-rows: auto auto auto 1fr auto; align-content: stretch; gap: 4px; padding: 14px; border: 1px solid rgba(225, 240, 255, .28); border-radius: 20px; background: linear-gradient(155deg, rgba(15, 52, 92, .97), rgba(8, 22, 45, .96)); color: #f8fbff; text-align: start; box-shadow: 0 12px 26px rgba(0, 0, 0, .22); cursor: pointer; }
body[data-logic-game="code-breaker"] .code-breaker-stage-card[data-wp-stage-recommended="true"] { border-color: #ff9ed2; box-shadow: 0 0 0 3px rgba(255,158,210,.22), 0 16px 34px rgba(0,0,0,.3); }
body[data-logic-game="code-breaker"] .code-breaker-stage-card .stage-number { color: #ff9ed2; font-size: 28px; font-weight: 950; line-height: 1; }
body[data-logic-game="code-breaker"] .code-breaker-stage-card :is(strong, .stage-card-arc, .stage-card-objective, .stage-card-state) { min-width: 0; overflow: hidden; white-space: normal; text-overflow: clip; }
body[data-logic-game="code-breaker"] .code-breaker-stage-card strong { font-size: 16px; line-height: 1.12; }
body[data-logic-game="code-breaker"] .code-breaker-stage-card .stage-card-arc { color: #c8e5ff; font-size: 12px; font-weight: 800; }
body[data-logic-game="code-breaker"] .code-breaker-stage-card .stage-card-objective { color: #b6cce5; font-size: 11px; line-height: 1.3; }
body[data-logic-game="code-breaker"] .code-breaker-stage-card .stage-card-state { color: #ffd166; font-size: 11px; font-weight: 850; }
body[data-logic-game="code-breaker"] .code-breaker-stage-card.is-cleared .stage-card-state { color: #56e6b1; }
body[data-logic-game="code-breaker"] .code-breaker-stage-card.is-locked { filter: saturate(.7); opacity: .78; }
body[data-logic-game="code-breaker"] #stageStatus { margin: 0; font-size: 11px; }
body[data-logic-game="code-breaker"] .code-breaker-stage-tabs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 46px; padding: 3px 12px; border-top: 1px solid var(--logic-line); background: rgba(5, 17, 35, .72); }
body[data-logic-game="code-breaker"] .code-breaker-stage-tabs button { grid-column: 2; min-width: 124px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--logic-accent); border-radius: 12px; background: rgba(110, 200, 255, .12); color: var(--logic-text); font-weight: 850; }
body[data-logic-game="code-breaker"] .logic-code-stage-meta { display: grid; gap: 3px; padding: 8px 10px; border: 1px solid var(--logic-line); border-radius: 13px; background: rgba(255,255,255,.05); }
body[data-logic-game="code-breaker"] .logic-code-stage-meta strong { color: var(--logic-accent); font-size: 13px; }
body[data-logic-game="code-breaker"] .logic-code-stage-meta span { color: var(--logic-muted); font-size: 12px; line-height: 1.3; }
body[data-logic-game="code-breaker"] .logic-code-slot.is-anchored { border-color: var(--logic-warn); box-shadow: 0 0 0 3px rgba(255,209,102,.25); }
body[data-logic-game="code-breaker"] .logic-color.is-sealed { opacity: .3; filter: grayscale(1); cursor: not-allowed; }
body[data-logic-game="code-breaker"] .logic-leave { position: fixed; inset: 0; z-index: 21; display: grid; place-items: center; padding: 20px; background: rgba(2,10,24,.76); backdrop-filter: blur(8px); }
body[data-logic-game="code-breaker"] .logic-leave-card { width: min(420px,100%); padding: 24px; border: 1px solid var(--logic-line); border-radius: 22px; background: #102d54; box-shadow: var(--logic-shadow); text-align: center; }
body[data-logic-game="code-breaker"] .logic-leave-card h2 { margin: 0 0 8px; }
body[data-logic-game="code-breaker"] .logic-leave-card p { margin: 0 0 16px; color: var(--logic-muted); }
@media (max-width: 660px) {
  body[data-logic-game="code-breaker"] .code-breaker-stage-screen { grid-template-rows: 58px auto minmax(0, 1fr) auto 24px; padding-inline: 5px; }
  body[data-logic-game="code-breaker"] .code-breaker-stage-card { padding: 12px; }
}
/* Sliding 15's campaign uses the same governed Stage Canvas with its own
   authored arc and rule cards. */
body[data-logic-game="sliding-15"] .code-breaker-stage-screen { grid-template-rows: 58px auto minmax(0, 1fr) auto 24px; gap: 8px; }
body[data-logic-game="sliding-15"] .code-breaker-stage-heading { padding: 4px 8px; }
body[data-logic-game="sliding-15"] .code-breaker-stage-settings { justify-self: end; }
body[data-logic-game="sliding-15"] .code-breaker-stage-heading .logic-kicker { display: block; font-size: 10px; letter-spacing: .09em; }
body[data-logic-game="sliding-15"] .code-breaker-stage-heading h1 { margin: 0; font-size: clamp(17px, 3vw, 24px); line-height: 1.05; }
body[data-logic-game="sliding-15"] .code-breaker-stage-heading p { margin: 1px 0 0; font-size: 11px; color: #d7eaff; }
body[data-logic-game="sliding-15"] .code-breaker-stage-hint { z-index: 1; margin: 0 auto; padding: 5px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #e9f4ff; background: rgba(13, 27, 45, .72); font-size: 12px; text-align: center; }
body[data-logic-game="sliding-15"] #stageRail { align-self: center; min-height: 198px !important; }
body[data-logic-game="sliding-15"] .sliding-15-stage-card { display: grid; grid-template-rows: auto auto auto 1fr auto; align-content: stretch; gap: 4px; padding: 14px; border: 1px solid rgba(225, 240, 255, .28); border-radius: 20px; background: linear-gradient(155deg, rgba(15, 52, 92, .97), rgba(8, 22, 45, .96)); color: #f8fbff; text-align: start; box-shadow: 0 12px 26px rgba(0, 0, 0, .22); cursor: pointer; }
body[data-logic-game="sliding-15"] .sliding-15-stage-card[data-wp-stage-recommended="true"] { border-color: #7cc7ff; box-shadow: 0 0 0 3px rgba(124,199,255,.22), 0 16px 34px rgba(0,0,0,.3); }
body[data-logic-game="sliding-15"] .sliding-15-stage-card .stage-number { color: #7cc7ff; font-size: 28px; font-weight: 950; line-height: 1; }
body[data-logic-game="sliding-15"] .sliding-15-stage-card :is(strong, .stage-card-arc, .stage-card-objective, .stage-card-state) { min-width: 0; overflow: hidden; white-space: normal; text-overflow: clip; }
body[data-logic-game="sliding-15"] .sliding-15-stage-card strong { font-size: 16px; line-height: 1.12; }
body[data-logic-game="sliding-15"] .sliding-15-stage-card .stage-card-arc { color: #c8e5ff; font-size: 12px; font-weight: 800; }
body[data-logic-game="sliding-15"] .sliding-15-stage-card .stage-card-objective { color: #b6cce5; font-size: 11px; line-height: 1.3; }
body[data-logic-game="sliding-15"] .sliding-15-stage-card .stage-card-state { color: #ffd166; font-size: 11px; font-weight: 850; }
body[data-logic-game="sliding-15"] .sliding-15-stage-card.is-cleared .stage-card-state { color: #56e6b1; }
body[data-logic-game="sliding-15"] .sliding-15-stage-card.is-locked { filter: saturate(.7); opacity: .78; }
body[data-logic-game="sliding-15"] #stageStatus { margin: 0; font-size: 11px; }
body[data-logic-game="sliding-15"] .code-breaker-stage-tabs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 46px; padding: 3px 12px; border-top: 1px solid var(--logic-line); background: rgba(5, 17, 35, .72); }
body[data-logic-game="sliding-15"] .code-breaker-stage-tabs button { grid-column: 2; min-width: 124px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--logic-accent); border-radius: 12px; background: rgba(110, 200, 255, .12); color: var(--logic-text); font-weight: 850; }
body[data-logic-game="sliding-15"] .logic-sliding-stage-meta { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--logic-line); border-radius: 13px; background: rgba(255,255,255,.05); }
body[data-logic-game="sliding-15"] .logic-sliding-stage-meta strong { color: var(--logic-accent); font-size: 13px; }
body[data-logic-game="sliding-15"] .logic-sliding-stage-meta span { color: var(--logic-muted); font-size: 12px; line-height: 1.3; }
body[data-logic-game="sliding-15"] .logic-sliding-board .is-anchored { border-color: var(--logic-warn); box-shadow: 0 0 0 3px rgba(255,209,102,.25); }
body[data-logic-game="sliding-15"] .logic-leave { position: fixed; inset: 0; z-index: 21; display: grid; place-items: center; padding: 20px; background: rgba(2,10,24,.76); backdrop-filter: blur(8px); }
body[data-logic-game="sliding-15"] .logic-leave-card { width: min(420px,100%); padding: 24px; border: 1px solid var(--logic-line); border-radius: 22px; background: #102d54; box-shadow: var(--logic-shadow); text-align: center; }
body[data-logic-game="sliding-15"] .logic-leave-card h2 { margin: 0 0 8px; }
body[data-logic-game="sliding-15"] .logic-leave-card p { margin: 0 0 16px; color: var(--logic-muted); }
@media (max-width: 660px) {
  body[data-logic-game="sliding-15"] .code-breaker-stage-screen { grid-template-rows: 58px auto minmax(0, 1fr) auto 24px; padding-inline: 5px; }
  body[data-logic-game="sliding-15"] .sliding-15-stage-card { padding: 12px; }
}
@keyframes sudoku-hint-pulse {
  50% { background: rgba(255, 209, 102, .2); border-color: var(--logic-warn); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}