/* ============================================================
   Puzzlelo Board Standard
   V3: solve layout = problem board slightly left, controls on right.
       compare layout = problem board left, answer board right.
   ============================================================ */
:root {
  --pz-main-pad-y: 18px;
  --pz-main-pad-x: 22px;
  --pz-main-gap: 14px;
  --pz-solve-max: 1120px;
  --pz-compare-max: 1240px;
  --pz-board-frame-pad: 16px;
  --pz-board-border: #dbe4f0;
  --pz-board-shadow: 0 2px 16px rgba(79, 70, 229, .09);
  --pz-panel-width: 220px;
}

.pz-main-standard {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  padding: var(--pz-main-pad-y) var(--pz-main-pad-x) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--pz-main-gap) !important;
}

body.has-game-topbar .standalone-view.active {
  top: calc(var(--header-height, 56px) + 46px) !important;
}

.pz-main-standard .puzzle-container,
.pz-board-stage {
  width: 100% !important;
  max-width: var(--pz-solve-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.pz-main-standard .board-header {
  width: 100% !important;
  max-width: var(--pz-solve-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.pz-board-frame,
.pz-main-standard .board-section,
.pz-main-standard .fm-board-section,
.pz-main-standard .mz-board-section {
  box-sizing: border-box !important;
}

.pz-main-standard canvas,
.pz-main-standard svg,
.pz-board-frame canvas,
.pz-board-frame svg {
  max-width: 100% !important;
  max-height: min(72vh, 720px) !important;
  height: auto;
  box-sizing: border-box !important;
}

.pz-main-standard table,
.pz-board-frame table {
  max-width: 100% !important;
}

/* Common solve surfaces */
.kk-std-layout.pz-board-frame,
#sudoku-play-layout,
#ms-play-answer-wrap {
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.kk-std-layout.pz-board-frame {
  gap: 16px !important;
  padding: 12px 0 !important;
  overflow-x: auto !important;
}

.kk-std-board,
#sudoku-board-col,
#play-board-section {
  flex: 0 0 auto !important;
}

.kk-std-ctrl,
#sudoku-side-panel {
  flex: 0 0 var(--pz-panel-width) !important;
  width: var(--pz-panel-width) !important;
  max-width: var(--pz-panel-width) !important;
  align-self: flex-start !important;
}

.kk-std-answer-wrap,
#sudoku-answer-panel,
#answer-panel {
  flex: 0 0 auto !important;
  margin-left: 8px !important;
}

.kk-std-answer-wrap.kk-answer-visible,
#sudoku-answer-panel.sd-answer-visible,
#answer-panel:not([style*="display:none"]) {
  max-width: 100% !important;
}

/* Compare mode: answer opens on the right, controls step out of the way. */
.pz-compare-mode {
  max-width: var(--pz-compare-max) !important;
}

.pz-answer-panel {
  box-sizing: border-box !important;
}

.kk-std-layout.pz-compare-mode,
.kk-std-layout:has(.kk-std-answer-wrap.kk-answer-visible) {
  max-width: var(--pz-compare-max) !important;
}
.kk-std-layout.pz-compare-mode .kk-std-ctrl,
.kk-std-layout:has(.kk-std-answer-wrap.kk-answer-visible) .kk-std-ctrl {
  display: none !important;
}
.kk-std-layout.pz-compare-mode .kk-std-board,
.kk-std-layout:has(.kk-std-answer-wrap.kk-answer-visible) .kk-std-board {
  margin-right: 8px !important;
}

#sudoku-play-layout.pz-compare-mode,
#sudoku-play-layout:has(#sudoku-answer-panel.sd-answer-visible) {
  max-width: var(--pz-compare-max) !important;
}

#ms-play-answer-wrap.pz-compare-mode,
#ms-play-answer-wrap:has(#answer-panel:not([style*="display:none"])) {
  max-width: var(--pz-compare-max) !important;
}

.puzzle-container.pz-compare-mode {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, auto);
  gap: 14px 18px !important;
  align-items: start !important;
  justify-content: center !important;
}

.puzzle-container.pz-compare-mode > .board-header,
.puzzle-container.pz-compare-mode > [id$="-subject-banner"],
.puzzle-container.pz-compare-mode > [id$="-submit-area"] {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

.puzzle-container.pz-compare-mode > .board-section:not(.pz-answer-panel),
.puzzle-container.pz-compare-mode > .pz-problem-panel {
  grid-column: 1 !important;
}

.puzzle-container.pz-compare-mode > .pz-answer-panel,
.puzzle-container.pz-compare-mode > .sudoku-answer-col.sd-answer-visible,
.puzzle-container.pz-compare-mode > .answer-panel:not(.collapsed) {
  grid-column: 2 !important;
  grid-row: 2 / span 6 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  align-self: start !important;
}

.puzzle-container.pz-compare-mode .answer-content {
  display: block !important;
}

.fm-board-wrap.pz-compare-mode,
.mz-board-wrap.pz-compare-mode {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, auto);
  gap: 16px !important;
  align-items: start !important;
  justify-content: center !important;
}

.fm-board-wrap.pz-compare-mode #fm-answer-section,
.mz-board-wrap.pz-compare-mode #mz-answer-section {
  grid-area: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin-top: 0 !important;
}

#fm-puzzle-area.pz-board-frame .fm-board-wrap:not(.fm-answer-compare):not(.pz-compare-mode) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: min(100%, 620px) !important;
  overflow-x: auto !important;
}

#fm-puzzle-area.pz-board-frame .fm-board-wrap:not(.fm-answer-compare):not(.pz-compare-mode) #fm-board {
  width: fit-content !important;
  min-width: 602px !important;
  max-width: none !important;
  overflow: visible !important;
}

#fm-puzzle-area.pz-board-frame .fm-board-wrap:not(.fm-answer-compare):not(.pz-compare-mode) .fm-route-board {
  max-width: none !important;
  overflow: visible !important;
}

/* Canvas puzzle solve surfaces: board left, action panel right. */
#ld-grid-wrap.pz-board-frame {
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: auto minmax(190px, var(--pz-panel-width));
  grid-template-areas:
    "head head"
    "board actions"
    "board result";
  align-items: start !important;
  justify-content: start !important;
  gap: 12px 16px !important;
  padding: var(--pz-board-frame-pad) !important;
  border-radius: 12px !important;
  border: 2px solid var(--pz-board-border) !important;
  box-shadow: var(--pz-board-shadow) !important;
}

#ld-grid-wrap.pz-board-frame > div:first-child { grid-area: head; }
#ld-grid-canvas { grid-area: board; }
#ld-board-actions {
  grid-area: actions;
  width: var(--pz-panel-width) !important;
  margin-top: 0 !important;
  flex-direction: column !important;
}
#ld-board-actions button {
  width: 100% !important;
}
#ld-result-area {
  grid-area: result;
  width: var(--pz-panel-width) !important;
}

#mr-grid-wrap.pz-board-frame,
#yj-grid-wrap.pz-board-frame {
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: var(--pz-board-frame-pad) !important;
  border-radius: 12px !important;
  border: 2px solid var(--pz-board-border) !important;
  box-shadow: var(--pz-board-shadow) !important;
  align-items: center !important;
  justify-content: center !important;
}

#mr-grid-wrap.pz-board-frame[style*="display:inline-flex"],
#yj-grid-wrap.pz-board-frame[style*="display:inline-flex"],
#mr-grid-wrap.pz-board-frame[style*="display: inline-flex"],
#yj-grid-wrap.pz-board-frame[style*="display: inline-flex"],
#mr-grid-wrap.pz-board-frame[style*="display:flex"],
#yj-grid-wrap.pz-board-frame[style*="display:flex"],
#mr-grid-wrap.pz-board-frame[style*="display: flex"],
#yj-grid-wrap.pz-board-frame[style*="display: flex"] {
  display: grid !important;
  grid-template-columns: auto minmax(190px, var(--pz-panel-width));
  grid-template-areas:
    "head head"
    "board actions"
    "result actions";
  align-items: start !important;
  justify-content: center !important;
  gap: 12px 16px !important;
}

#mr-grid-wrap.pz-board-frame > div:first-child,
#yj-grid-wrap.pz-board-frame > div:first-child {
  grid-area: head;
}

#mr-grid-canvas,
#yj-grid-canvas {
  grid-area: board;
}

#mr-result-area,
#yj-result-area {
  grid-area: result;
  width: 100% !important;
}

.pz-canvas-actions {
  grid-area: actions;
  width: var(--pz-panel-width) !important;
  align-self: start !important;
}

.pz-canvas-actions button.on {
  background: #eef2ff !important;
  color: #4338ca !important;
  border: 2px solid #818cf8 !important;
}

#wp-puzzle-card.pz-board-frame,
#fm-puzzle-area.pz-board-frame,
#mz-puzzle-area.pz-board-frame,
.la-main.pz-board-frame {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(190px, var(--pz-panel-width));
  grid-template-areas:
    "head head"
    "body actions"
    "result actions";
  align-items: start !important;
  justify-content: center !important;
  gap: 12px 16px !important;
  max-width: var(--pz-compare-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#wp-puzzle-card.pz-board-frame.pz-compare-mode {
  grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(190px, var(--pz-panel-width));
  grid-template-areas:
    "head head head"
    "body answer actions"
    "result answer actions";
}

#wp-answer-section {
  grid-area: answer;
  align-self: start !important;
  margin: 0 !important;
}

#wp-main.pz-main-standard.pz-compare-mode {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, auto);
  grid-template-areas:
    "intro intro"
    "empty empty"
    "problem answer";
  align-items: start !important;
  justify-content: center !important;
  gap: 14px 18px !important;
}

#wp-main.pz-main-standard.pz-compare-mode > #wp-intro-area {
  grid-area: intro;
}

#wp-main.pz-main-standard.pz-compare-mode > #wp-empty-area {
  grid-area: empty;
}

#wp-main.pz-main-standard.pz-compare-mode > #wp-puzzle-card {
  grid-area: problem;
}

#wp-main.pz-main-standard.pz-compare-mode > #wp-answer-section {
  grid-area: answer;
  max-width: min(520px, 42vw) !important;
}

#tl-container.pz-board-stage:not([style*="display:none"]):not([style*="display: none"]) {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(190px, var(--pz-panel-width));
  grid-template-areas:
    "head head"
    "info info"
    "board actions"
    "answer answer";
  align-items: start !important;
  justify-content: center !important;
  gap: 12px 16px !important;
  max-width: var(--pz-compare-max) !important;
}

#tl-container.pz-board-stage > .board-header {
  grid-area: head;
}

#tl-container.pz-board-stage > .tl-info-banner {
  grid-area: info;
}

#tl-container.pz-board-stage > .board-section:not(#tl-submit-area) {
  grid-area: board;
  margin: 0 !important;
}

#tl-submit-area.pz-control-panel {
  grid-area: actions;
  width: var(--pz-panel-width) !important;
  margin: 0 !important;
  align-self: start !important;
}

#tl-answer-panel {
  grid-area: answer;
  width: 100% !important;
}

#fc-play-layout {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(190px, var(--pz-panel-width));
  grid-template-areas:
    "board actions"
    "answer answer";
  align-items: start !important;
  justify-content: center !important;
  gap: 12px 16px !important;
  max-width: var(--pz-compare-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#fc-play-layout.pz-compare-mode {
  grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(190px, var(--pz-panel-width));
  grid-template-areas:
    "board answer actions";
}

#fc-play-layout > div:first-child {
  display: contents !important;
}

#fc-play-layout > div:first-child > .board-section {
  grid-area: board;
  margin: 0 !important;
}

#fc-submit-area.pz-control-panel {
  grid-area: actions;
  width: var(--pz-panel-width) !important;
  margin: 0 !important;
  align-self: start !important;
}

#fc-answer-panel {
  grid-area: answer;
  width: 100% !important;
  justify-self: center !important;
}

#cm-container.pz-board-stage:not([style*="display:none"]):not([style*="display: none"]),
#ng-container.pz-board-stage:not([style*="display:none"]):not([style*="display: none"]),
#sk-container.pz-board-stage:not([style*="display:none"]):not([style*="display: none"]) {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(190px, var(--pz-panel-width));
  grid-template-areas:
    "head head"
    "info info"
    "guide guide"
    "board actions"
    "answer answer";
  align-items: start !important;
  justify-content: center !important;
  gap: 12px 16px !important;
  max-width: var(--pz-compare-max) !important;
}

#cm-container.pz-board-stage.pz-compare-mode:not([style*="display:none"]):not([style*="display: none"]),
#ng-container.pz-board-stage.pz-compare-mode:not([style*="display:none"]):not([style*="display: none"]),
#sk-container.pz-board-stage.pz-compare-mode:not([style*="display:none"]):not([style*="display: none"]) {
  grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(190px, var(--pz-panel-width));
  grid-template-areas:
    "head head head"
    "info info info"
    "guide guide guide"
    "board answer actions";
}

#cm-container.pz-board-stage > .board-header,
#ng-container.pz-board-stage > .board-header,
#sk-container.pz-board-stage > .board-header {
  grid-area: head;
}

#cm-container.pz-board-stage > .cm-info-banner,
#ng-container.pz-board-stage > .ng-subject-banner,
#sk-container.pz-board-stage > .sk-info-banner {
  grid-area: info;
}

#sk-container.pz-board-stage > div:not(.board-header):not(.sk-info-banner):not(.board-section):not(#sk-answer-panel):not(#sk-board-actions) {
  grid-area: guide;
}

#cm-container.pz-board-stage > .board-section,
#ng-container.pz-board-stage > .board-section,
#sk-container.pz-board-stage > .board-section {
  grid-area: board;
  margin: 0 !important;
}

#cm-board-actions,
#ng-board-actions,
#sk-board-actions {
  grid-area: actions;
  margin-top: 0 !important;
}

#cm-answer-panel,
#ng-answer-panel,
#sk-answer-panel {
  grid-area: answer;
  width: 100% !important;
}

#kk-play-layout.pz-board-frame,
#ms-play-layout.pz-board-frame,
#nr-play-layout.pz-board-frame {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(190px, var(--pz-panel-width));
  grid-template-areas:
    "head head"
    "info info"
    "board actions"
    "answer answer";
  align-items: start !important;
  justify-content: center !important;
  gap: 12px 16px !important;
  max-width: var(--pz-compare-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#kk-play-layout.pz-board-frame.pz-compare-mode,
#ms-play-layout.pz-board-frame.pz-compare-mode,
#nr-play-layout.pz-board-frame.pz-compare-mode {
  grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(190px, var(--pz-panel-width));
  grid-template-areas:
    "head head head"
    "info info info"
    "board answer actions";
}

#kk-play-layout.pz-board-frame > #kk-topbar {
  grid-area: head;
}

#kk-play-layout.pz-board-frame > .kk-info-banner,
#ms-container.pz-board-stage > .ms-info-banner {
  grid-area: info;
}

#kk-play-layout.pz-board-frame > div:not(#kk-topbar):not(.kk-info-banner):not(#kk-answer-panel):not(#kk-board-actions),
#ms-play-layout.pz-board-frame > div:not(#ms-answer-panel):not(#mg-board-actions),
#nr-play-layout.pz-board-frame > div:not(#nr-answer-panel):not(#nr-board-actions) {
  grid-area: board;
  margin: 0 !important;
}

#kk-board-actions,
#mg-board-actions,
#nr-board-actions {
  grid-area: actions;
  margin-top: 0 !important;
}

#kk-answer-panel,
#ms-answer-panel,
#nr-answer-panel {
  grid-area: answer;
  width: 100% !important;
}

#kk-play-layout.pz-compare-mode #kk-answer-panel,
#ms-play-layout.pz-compare-mode #ms-answer-panel,
#nr-play-layout.pz-compare-mode #nr-answer-panel,
#cm-container.pz-compare-mode #cm-answer-panel,
#ng-container.pz-compare-mode #ng-answer-panel,
#sk-container.pz-compare-mode #sk-answer-panel,
#fc-play-layout.pz-compare-mode #fc-answer-panel,
#wp-puzzle-card.pz-compare-mode #wp-answer-section {
  width: auto !important;
  max-width: min(520px, 42vw) !important;
}

#cm-container.pz-board-stage.pz-compare-mode.pz-narrow-compare,
#ng-container.pz-board-stage.pz-compare-mode.pz-narrow-compare,
#sk-container.pz-board-stage.pz-compare-mode.pz-narrow-compare,
#tl-container.pz-board-stage.pz-compare-mode.pz-narrow-compare,
#kk-play-layout.pz-board-frame.pz-compare-mode.pz-narrow-compare,
#ms-play-layout.pz-board-frame.pz-compare-mode.pz-narrow-compare,
#nr-play-layout.pz-board-frame.pz-compare-mode.pz-narrow-compare,
#fc-play-layout.pz-compare-mode.pz-narrow-compare,
#wp-main.pz-main-standard.pz-compare-mode.pz-narrow-compare,
#wp-puzzle-card.pz-board-frame.pz-compare-mode.pz-narrow-compare,
#yj-board-compare-row.pz-compare-mode.pz-narrow-compare,
.la-main.pz-board-frame.pz-compare-mode.pz-narrow-compare {
  width: 100% !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "head"
    "info"
    "guide"
    "body"
    "board"
    "problem"
    "answer"
    "actions"
    "side"
    "result" !important;
  justify-items: center !important;
}

#fc-play-layout.pz-compare-mode.pz-narrow-compare,
#yj-board-compare-row.pz-compare-mode.pz-narrow-compare {
  grid-template-areas:
    "board"
    "answer"
    "actions" !important;
}

#wp-main.pz-main-standard.pz-compare-mode.pz-narrow-compare {
  grid-template-areas:
    "intro"
    "empty"
    "problem"
    "answer" !important;
}

#wp-main.pz-main-standard.pz-compare-mode.pz-narrow-compare > #wp-answer-section,
.pz-compare-mode.pz-narrow-compare .pz-answer-panel {
  max-width: 100% !important;
}

#yj-board-compare-row.pz-compare-mode {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(180px, 210px);
  grid-template-areas: "board answer actions";
  align-items: start !important;
  justify-content: center !important;
  gap: 16px !important;
}

#yj-board-compare-row.pz-compare-mode #yj-grid-canvas {
  grid-area: board;
}

#yj-board-compare-row.pz-compare-mode #yj-answer-panel {
  grid-area: answer;
  margin: 0 !important;
}

#yj-board-compare-row.pz-compare-mode #yj-action-panel {
  grid-area: actions;
  margin: 0 !important;
}

.la-main.pz-board-frame {
  grid-template-columns: minmax(0, auto) minmax(190px, var(--pz-panel-width));
  grid-template-areas:
    "body actions"
    "side actions";
}

.la-main.pz-board-frame.pz-compare-mode {
  grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(190px, var(--pz-panel-width));
  grid-template-areas:
    "body answer actions"
    "side answer actions";
  max-width: var(--pz-compare-max) !important;
}

.la-main.pz-board-frame > .la-puzzle-col {
  grid-area: body;
  min-width: 0 !important;
}

.la-main.pz-board-frame > .la-side-col {
  grid-area: side;
  min-width: 0 !important;
}

.la-main.pz-board-frame > .la-answer-reveal {
  grid-area: answer;
  align-self: start !important;
  margin-top: 0 !important;
  max-width: min(520px, 42vw) !important;
}

.la-main.pz-board-frame > #la-board-actions {
  grid-area: actions;
  margin-top: 0 !important;
  align-self: start !important;
}

#wp-puzzle-card.pz-board-frame > div:first-child,
#fm-puzzle-area.pz-board-frame > .fm-condition-banner,
#mz-puzzle-area.pz-board-frame > .mz-condition-banner,
.la-main.pz-board-frame > .la-main-header {
  grid-area: head;
}

#wp-puzzle-body,
.fm-board-wrap,
.mz-board-wrap,
.la-main.pz-board-frame > .la-problem-card {
  grid-area: body;
}

#wp-result-area,
#wp-hint-panel,
#wp-solution-panel,
#fm-answer-section,
#mz-answer-section,
.la-main.pz-board-frame > .la-status,
.la-main.pz-board-frame > .la-hint,
.la-main.pz-board-frame > .la-answer-reveal {
  grid-area: result;
}

#mz-action-panel {
  grid-area: actions;
  align-self: start;
  width: min(230px, 100%);
  box-sizing: border-box;
  border: 1.5px solid #dbeafe;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#mz-action-panel .mz-action-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 900;
  color: #0f172a;
}

#mz-action-panel .mz-action-note {
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
  word-break: keep-all;
}

#mz-action-panel .mz-action-status {
  min-height: 44px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  padding: 10px;
  word-break: keep-all;
}

#mz-action-panel .mz-action-btn {
  min-height: 42px;
  border-radius: 11px;
  border: 1.5px solid #dbeafe;
  background: #fff;
  color: #1e40af;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
}

#mz-action-panel .mz-action-btn.primary {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

#mz-action-panel .mz-action-btn.danger {
  border-color: #fecaca;
  background: #fff1f2;
  color: #dc2626;
}

#mz-action-panel .mz-action-btn:disabled {
  cursor: not-allowed;
  opacity: .45;
  filter: grayscale(.25);
}

/* Weighing puzzle keeps the answer panel outside the puzzle card.
   The shared two-column board frame squeezes its text body to min-content,
   so keep the weighing card itself as a single readable column. */
#wp-main.pz-main-standard > #wp-puzzle-card.pz-board-frame {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "head"
    "body"
    "result" !important;
  justify-content: stretch !important;
  width: min(720px, 58vw) !important;
  min-width: min(560px, 100%) !important;
  box-sizing: border-box !important;
}

#wp-main.pz-main-standard > #wp-puzzle-card.pz-board-frame > #wp-puzzle-body,
#wp-main.pz-main-standard > #wp-puzzle-card.pz-board-frame .question-box,
#wp-main.pz-main-standard > #wp-puzzle-card.pz-board-frame .q-intro,
#wp-main.pz-main-standard > #wp-puzzle-card.pz-board-frame .condition-list,
#wp-main.pz-main-standard > #wp-puzzle-card.pz-board-frame .q-question {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

#wp-main.pz-main-standard > #wp-puzzle-card.pz-board-frame .q-intro,
#wp-main.pz-main-standard > #wp-puzzle-card.pz-board-frame .c-text,
#wp-main.pz-main-standard > #wp-puzzle-card.pz-board-frame .q-question {
  line-height: 1.75 !important;
}

#wp-main.pz-main-standard > #wp-puzzle-card.pz-board-frame .wp-nested-visual {
  width: 100% !important;
  margin: 8px 0 10px !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  border: 1.5px solid #dbeafe !important;
  overflow: hidden !important;
}

#wp-main.pz-main-standard > #wp-puzzle-card.pz-board-frame .wp-nested-svg {
  display: block !important;
  width: 100% !important;
  max-height: 330px !important;
}

/* Matchstick formula puzzle - direct manipulation surface */
#view-matchstick-puzzle #ms-board-wrap {
  grid-template-columns: minmax(480px, 760px) minmax(240px, 320px) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1080px !important;
}
#view-matchstick-puzzle .ms-shell {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
}
#view-matchstick-puzzle .puzzle-sidebar.standard-sidebar {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  flex: 0 0 260px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
#view-matchstick-puzzle .ms-main {
  min-width: 0 !important;
  align-items: center !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}
#view-matchstick-puzzle .ms-type-list {
  grid-template-columns: 1fr !important;
}
#view-matchstick-puzzle .ms-visual {
  min-height: 230px !important;
  background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%) !important;
  border-color: #fed7aa !important;
}
#view-matchstick-puzzle .ms-play-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#view-matchstick-puzzle .ms-interactive-formula {
  width: 100%;
  max-width: 690px;
  min-height: 150px;
}
#view-matchstick-puzzle .ms-stick-line {
  transition: stroke .16s ease, stroke-width .16s ease, opacity .16s ease;
}
#view-matchstick-puzzle .ms-stick-line.is-on {
  stroke: #b45309 !important;
  stroke-width: 8 !important;
  stroke-linecap: round !important;
  filter: drop-shadow(0 2px 2px rgba(120, 53, 15, .18));
}
#view-matchstick-puzzle .ms-stick-line.is-off {
  stroke: #fcd34d !important;
  stroke-width: 5 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 5 6;
  opacity: .72;
}
#view-matchstick-puzzle .ms-stick-line.is-clickable,
#view-matchstick-puzzle .ms-stick-head {
  cursor: pointer;
}
#view-matchstick-puzzle .ms-stick-hit {
  stroke: transparent;
  stroke-width: 24;
  stroke-linecap: round;
  cursor: pointer;
  pointer-events: stroke;
}
#view-matchstick-puzzle .ms-stick-line.is-clickable:hover {
  stroke: #4f46e5 !important;
  stroke-width: 10 !important;
}
#view-matchstick-puzzle .ms-stick-line.is-locked,
#view-matchstick-puzzle .ms-stick-head.is-locked {
  cursor: default;
}
#view-matchstick-puzzle .ms-stick-head.is-on {
  fill: #ef4444 !important;
  stroke: #991b1b !important;
  stroke-width: .9 !important;
}
#view-matchstick-puzzle .ms-stick-head.is-off {
  fill: #fef3c7 !important;
  stroke: #fcd34d !important;
  stroke-width: 1.4 !important;
}
#view-matchstick-puzzle .ms-cell-label {
  fill: #94a3b8;
  font-size: 9px;
  font-weight: 800;
}
#view-matchstick-puzzle .ms-live-status {
  width: min(100%, 620px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1.5px solid #fed7aa;
  border-radius: 12px;
  background: #fff;
  color: #92400e;
  box-shadow: 0 2px 8px rgba(120, 53, 15, .08);
}
#view-matchstick-puzzle .ms-live-status span {
  font-size: 11px;
  font-weight: 900;
  color: #c2410c;
}
#view-matchstick-puzzle .ms-live-status strong {
  font-size: 20px;
  font-weight: 950;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  color: #1e1b4b;
}
#view-matchstick-puzzle .ms-live-status em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}
#view-matchstick-puzzle .ms-live-status.ok {
  border-color: #86efac;
  background: #f0fdf4;
}
#view-matchstick-puzzle #ms-answer-input {
  display: none !important;
}
#view-matchstick-puzzle .ms-answer-visual .ms-formula-svg {
  max-width: 280px;
  min-height: 70px;
}
#view-matchstick-puzzle .ms-board-svg {
  width: 100%;
  max-width: 480px;
  min-height: 280px;
  background: #fffef7;
  border: 1px solid #fde68a;
  border-radius: 14px;
  padding: 8px;
}
#view-matchstick-puzzle .ms-board-grid {
  stroke: #e5e7eb;
  stroke-width: 1.4;
}
#view-matchstick-puzzle .ms-board-dot {
  fill: #cbd5e1;
}
#view-matchstick-puzzle .ms-board-stick.is-on {
  stroke: #92400e !important;
  stroke-width: 9 !important;
}
#view-matchstick-puzzle .ms-board-stick.is-off {
  stroke: #fde68a !important;
  stroke-width: 5 !important;
  stroke-dasharray: 4 7;
  opacity: .58;
}
#view-matchstick-puzzle .ms-board-stick.is-diagonal.is-on {
  stroke: #7c3aed !important;
}
#view-matchstick-puzzle .ms-board-stick.is-diagonal.is-off {
  stroke: #ddd6fe !important;
}
#view-matchstick-puzzle .ms-shape-status strong {
  font-size: 16px;
  letter-spacing: 0;
  font-family: inherit;
}
#view-matchstick-puzzle .ms-shape-answer {
  font-size: 16px;
  line-height: 1.4;
  color: #7c2d12;
}
#view-matchstick-puzzle .ms-answer-visual .ms-board-svg {
  max-width: 240px;
  min-height: 150px;
}

.pz-board-actions-proxy {
  grid-area: actions;
  width: var(--pz-panel-width) !important;
  align-self: start !important;
}

/* Generic board families keep horizontal scroll, but share consistent stage width. */
.pz-main-standard .ng-board-scroll,
.pz-main-standard .cm-board-wrap,
.pz-main-standard .kk-board-wrap,
.pz-main-standard .ms-board-wrap,
.pz-main-standard .sk-board-container,
.pz-main-standard .fm-board-wrap,
.pz-main-standard .mz-board-wrap {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box !important;
}

.pz-main-standard #fm-puzzle-area.pz-board-frame .fm-board-wrap:not(.fm-answer-compare):not(.pz-compare-mode) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: min(100%, 620px) !important;
  overflow-x: auto !important;
}

.pz-main-standard #fm-puzzle-area.pz-board-frame .fm-board-wrap:not(.fm-answer-compare):not(.pz-compare-mode) #fm-board {
  width: fit-content !important;
  min-width: 602px !important;
  max-width: none !important;
  overflow: visible !important;
}

.pz-main-standard #fm-puzzle-area.pz-board-frame .fm-board-wrap:not(.fm-answer-compare):not(.pz-compare-mode) .fm-route-board {
  width: 602px !important;
  max-width: none !important;
  overflow: visible !important;
}

.pz-main-standard .empty-state,
.pz-main-standard .info-card,
.pz-main-standard [id$="-info-card"] {
  width: 100% !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#pn-content-area.pz-board-stage {
  padding: var(--pz-main-pad-y) var(--pz-main-pad-x) !important;
  box-sizing: border-box !important;
  max-width: var(--pz-compare-max) !important;
}

#pn-content-area .pn-content-wrap,
#pn-content-area .pn-section {
  width: 100% !important;
  max-width: var(--pz-solve-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#pn-content-area .puzzle-grid-wrap {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#pn-content-area .puzzle-grid-wrap:not(.kk-std-layout) {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  overflow-x: auto !important;
}

#la-main-wrap.pz-main-standard .la-main {
  width: 100% !important;
  max-width: var(--pz-solve-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Logic Arrange: clues are the actual question, so they must sit beside the array board. */
#view-logic-arrange #la-main-wrap.pz-main-standard .la-main.pz-board-frame,
#view-logic-arrange #la-main-wrap.pz-main-standard .la-main.pz-board-frame.pz-compare-mode {
  width: 100% !important;
  max-width: min(1360px, calc(100vw - 270px)) !important;
  grid-template-columns: minmax(520px, 1.28fr) minmax(310px, 380px) minmax(180px, var(--pz-panel-width)) !important;
  grid-template-areas:
    "body side actions" !important;
  align-items: start !important;
  gap: 16px !important;
}

#view-logic-arrange .la-main.pz-board-frame > .la-puzzle-col,
#view-logic-arrange .la-main.pz-board-frame.pz-compare-mode > .la-puzzle-col {
  grid-area: body !important;
  width: 100% !important;
  min-width: 0 !important;
}

#view-logic-arrange .la-main.pz-board-frame > .la-side-col,
#view-logic-arrange .la-main.pz-board-frame.pz-compare-mode > .la-side-col {
  grid-area: side !important;
  width: 100% !important;
  min-width: 0 !important;
  align-self: start !important;
}

#view-logic-arrange .la-main.pz-board-frame > #la-board-actions,
#view-logic-arrange .la-main.pz-board-frame.pz-compare-mode > #la-board-actions {
  grid-area: actions !important;
  align-self: start !important;
  margin-top: 0 !important;
}

#view-logic-arrange .la-side-col .la-card:first-child {
  border: 2px solid #dbeafe;
  box-shadow: 0 10px 26px rgba(30, 64, 175, 0.08);
}

#view-logic-arrange #la-clue-list {
  max-height: min(56vh, 520px);
  overflow-y: auto;
  padding-right: 3px;
}

#view-logic-arrange .la-clue-text {
  font-size: 0.92rem;
  line-height: 1.55;
}

#view-logic-arrange .la-track {
  min-height: 112px !important;
  padding: 14px 12px 32px !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  overflow-x: auto !important;
  row-gap: 0 !important;
}

#view-logic-arrange .la-slot {
  width: 74px !important;
  height: 74px !important;
  border-width: 2px !important;
}

#view-logic-arrange .la-slot + .la-slot {
  margin-left: 14px !important;
}

#view-logic-arrange .la-slot + .la-slot::before {
  left: -16px !important;
  width: 16px !important;
  height: 2px !important;
}

#view-logic-arrange .la-track-marble svg {
  width: 66px !important;
  height: 66px !important;
}

#view-logic-arrange .la-palette {
  gap: 12px !important;
}

#view-logic-arrange .la-palette-marble {
  width: 58px !important;
  height: 58px !important;
}

#view-logic-arrange .la-palette-marble svg {
  width: 56px !important;
  height: 56px !important;
}

#view-logic-arrange .la-slot-num {
  bottom: -22px !important;
}

@media (max-width: 1180px) {
  #view-logic-arrange #la-main-wrap.pz-main-standard .la-main.pz-board-frame,
  #view-logic-arrange #la-main-wrap.pz-main-standard .la-main.pz-board-frame.pz-compare-mode {
    max-width: 100% !important;
    grid-template-columns: minmax(390px, 1fr) minmax(280px, 330px) !important;
    grid-template-areas:
      "body side"
      "actions actions" !important;
  }

  #view-logic-arrange .la-main.pz-board-frame > #la-board-actions,
  #view-logic-arrange .la-main.pz-board-frame.pz-compare-mode > #la-board-actions {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 820px) {
  #view-logic-arrange #la-main-wrap.pz-main-standard .la-main.pz-board-frame,
  #view-logic-arrange #la-main-wrap.pz-main-standard .la-main.pz-board-frame.pz-compare-mode {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "body"
      "side"
      "actions" !important;
  }

  #view-logic-arrange #la-clue-list {
    max-height: none;
  }
}

/* Operation panel standard:
   input tools -> hint/memo -> submit/check -> answer -> reset -> utility. */
.pz-control-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  box-sizing: border-box !important;
}

.pz-control-panel[style*="display:none"],
.pz-control-panel[style*="display: none"],
.pz-control-panel[hidden] {
  display: none !important;
}

.pz-control-panel .pz-control-input {
  order: 10 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.pz-control-panel [data-pz-action="input"] { order: 10 !important; }
.pz-control-panel [data-pz-action="memo"],
.pz-control-panel [data-pz-action="hint"] { order: 20 !important; }
.pz-control-panel [data-pz-action="submit"] { order: 30 !important; }
.pz-control-panel [data-pz-action="answer"] { order: 40 !important; }
.pz-control-panel [data-pz-action="reset"] { order: 50 !important; }
.pz-control-panel [data-pz-action="save"],
.pz-control-panel [data-pz-action="print"],
.pz-control-panel [data-pz-action="share"],
.pz-control-panel [data-pz-action="tool"] { order: 60 !important; }
.pz-control-panel .pz-control-result { order: 70 !important; }

.pz-control-panel > button,
.pz-control-panel > [role="button"],
.pz-control-panel .pi-btn-submit,
.pz-control-panel .pi-btn-reset,
.pz-control-panel .dbtn,
.pz-control-panel .kk-std-btn-submit,
.pz-control-panel .kk-std-btn-answer,
.pz-control-panel .kk-std-btn-reset {
  width: 100% !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.pz-control-panel [data-pz-action="submit"] {
  background: linear-gradient(135deg, #4f46e5, #2563eb) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, .28) !important;
}

.pz-control-panel [data-pz-action="answer"] {
  background: #f0f9ff !important;
  color: #0369a1 !important;
  border: 2px solid #7dd3fc !important;
}

.pz-control-panel [data-pz-action="answer"]:disabled {
  background: #f8fafc !important;
  color: #94a3b8 !important;
  border-color: #d1d5db !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: .62 !important;
}

.pz-control-panel [data-pz-action="reset"] {
  background: #fff1f2 !important;
  color: #dc2626 !important;
  border: 2px solid #fca5a5 !important;
}

.pz-control-panel [data-pz-action="hint"],
.pz-control-panel [data-pz-action="memo"] {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 2px solid #fcd34d !important;
}

.pz-control-panel .pz-control-result {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
}

.pz-control-panel .kk-std-ctrl-sep {
  order: 25 !important;
  margin: 0 !important;
}

.pz-control-panel .kk-std-num-btn,
.pz-control-panel #sudoku-side-kp-nums button {
  min-height: 38px !important;
}

.pz-control-panel .sudoku-kb-hint,
.pz-control-panel .pi-input-hint {
  order: 65 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

@media (max-width: 900px) {
  :root {
    --pz-main-pad-y: 14px;
    --pz-main-pad-x: 16px;
    --pz-board-frame-pad: 12px;
    --pz-panel-width: 200px;
  }

  #cm-container.pz-board-stage.pz-compare-mode:not([style*="display:none"]):not([style*="display: none"]),
  #ng-container.pz-board-stage.pz-compare-mode:not([style*="display:none"]):not([style*="display: none"]),
  #sk-container.pz-board-stage.pz-compare-mode:not([style*="display:none"]):not([style*="display: none"]),
  #kk-play-layout.pz-board-frame.pz-compare-mode,
  #ms-play-layout.pz-board-frame.pz-compare-mode,
  #nr-play-layout.pz-board-frame.pz-compare-mode,
  #fc-play-layout.pz-compare-mode,
  #wp-puzzle-card.pz-board-frame.pz-compare-mode,
  #yj-board-compare-row.pz-compare-mode {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "head"
      "info"
      "guide"
      "board"
      "answer"
      "actions"
      "result" !important;
    justify-items: center !important;
  }

  #fc-play-layout.pz-compare-mode,
  #yj-board-compare-row.pz-compare-mode {
    grid-template-areas:
      "board"
      "answer"
      "actions" !important;
  }
}

@media (max-width: 720px) {
  .kk-std-layout.pz-board-frame,
  #sudoku-play-layout,
  #ms-play-answer-wrap {
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .kk-std-ctrl,
  #sudoku-side-panel,
  #ld-board-actions,
  #ld-result-area {
    width: 100% !important;
    max-width: 420px !important;
    flex: 0 0 auto !important;
  }

  #ld-grid-wrap.pz-board-frame {
    width: 100% !important;
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "board"
      "actions"
      "result";
    justify-items: center !important;
  }

  #mr-grid-wrap.pz-board-frame[style*="display:inline-flex"],
  #yj-grid-wrap.pz-board-frame[style*="display:inline-flex"],
  #mr-grid-wrap.pz-board-frame[style*="display: inline-flex"],
  #yj-grid-wrap.pz-board-frame[style*="display: inline-flex"],
  #mr-grid-wrap.pz-board-frame[style*="display:flex"],
  #yj-grid-wrap.pz-board-frame[style*="display:flex"],
  #mr-grid-wrap.pz-board-frame[style*="display: flex"],
  #yj-grid-wrap.pz-board-frame[style*="display: flex"] {
    width: 100% !important;
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "board"
      "actions"
      "result";
    justify-items: center !important;
  }

  .pz-canvas-actions {
    width: 100% !important;
    max-width: 420px !important;
  }

  #wp-puzzle-card.pz-board-frame,
  #wp-puzzle-card.pz-board-frame.pz-compare-mode,
  #fm-puzzle-area.pz-board-frame,
  #mz-puzzle-area.pz-board-frame,
  .la-main.pz-board-frame {
    width: 100% !important;
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "body"
      "actions"
      "result";
    justify-items: center !important;
  }

  #tl-container.pz-board-stage:not([style*="display:none"]):not([style*="display: none"]),
  #fc-play-layout,
  #fc-play-layout.pz-compare-mode {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "head"
      "info"
      "board"
      "actions"
      "answer" !important;
    justify-items: center !important;
  }

  #fc-play-layout {
    grid-template-areas:
      "board"
      "actions"
      "answer" !important;
  }

  #tl-submit-area.pz-control-panel,
  #fc-submit-area.pz-control-panel {
    width: 100% !important;
    max-width: 420px !important;
  }

  #cm-container.pz-board-stage:not([style*="display:none"]):not([style*="display: none"]),
  #cm-container.pz-board-stage.pz-compare-mode:not([style*="display:none"]):not([style*="display: none"]),
  #ng-container.pz-board-stage:not([style*="display:none"]):not([style*="display: none"]),
  #ng-container.pz-board-stage.pz-compare-mode:not([style*="display:none"]):not([style*="display: none"]),
  #sk-container.pz-board-stage:not([style*="display:none"]):not([style*="display: none"]),
  #sk-container.pz-board-stage.pz-compare-mode:not([style*="display:none"]):not([style*="display: none"]),
  #kk-play-layout.pz-board-frame,
  #kk-play-layout.pz-board-frame.pz-compare-mode,
  #ms-play-layout.pz-board-frame,
  #ms-play-layout.pz-board-frame.pz-compare-mode,
  #nr-play-layout.pz-board-frame,
  #nr-play-layout.pz-board-frame.pz-compare-mode {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "head"
      "info"
      "guide"
      "board"
      "actions"
      "answer" !important;
    justify-items: center !important;
  }

  #kk-play-layout.pz-board-frame,
  #kk-play-layout.pz-board-frame.pz-compare-mode,
  #ms-play-layout.pz-board-frame,
  #ms-play-layout.pz-board-frame.pz-compare-mode,
  #nr-play-layout.pz-board-frame,
  #nr-play-layout.pz-board-frame.pz-compare-mode {
    grid-template-areas:
      "head"
      "info"
      "board"
      "actions"
      "answer" !important;
  }

  .la-main.pz-board-frame {
    grid-template-areas:
      "body"
      "actions"
      "side" !important;
  }

  .pz-board-actions-proxy {
    width: 100% !important;
    max-width: 420px !important;
  }
}

#cm-container.pz-board-stage.pz-compare-mode.pz-narrow-compare > .board-section,
#sk-container.pz-board-stage.pz-compare-mode.pz-narrow-compare > .board-section,
#tl-container.pz-board-stage.pz-compare-mode.pz-narrow-compare > .board-section:not(#tl-submit-area) {
  grid-column: 1 !important;
  grid-row: auto !important;
  grid-area: board !important;
}

#cm-container.pz-board-stage.pz-compare-mode.pz-narrow-compare > #cm-answer-panel,
#sk-container.pz-board-stage.pz-compare-mode.pz-narrow-compare > #sk-answer-panel,
#tl-container.pz-board-stage.pz-compare-mode.pz-narrow-compare > #tl-answer-panel {
  grid-column: 1 !important;
  grid-row: auto !important;
  grid-area: answer !important;
  max-width: 100% !important;
}

#cm-container.pz-board-stage.pz-compare-mode.pz-narrow-compare > #cm-board-actions,
#sk-container.pz-board-stage.pz-compare-mode.pz-narrow-compare > #sk-board-actions,
#tl-container.pz-board-stage.pz-compare-mode.pz-narrow-compare > #tl-submit-area {
  grid-column: 1 !important;
  grid-row: auto !important;
  grid-area: actions !important;
}

@media (max-width: 640px) {
  :root {
    --pz-main-pad-y: 12px;
    --pz-main-pad-x: 12px;
    --pz-board-frame-pad: 10px;
  }

  .pz-main-standard canvas,
  .pz-main-standard svg,
  .pz-board-frame canvas,
  .pz-board-frame svg {
    max-width: calc(100vw - 28px) !important;
    max-height: 68vh !important;
  }

  #pn-content-area.pz-board-stage {
    padding: 12px 10px !important;
  }
}

#mz-puzzle-area.pz-board-frame > .mz-question-card {
  grid-area: head;
  width: 100% !important;
  max-width: 100% !important;
}

/* Formula Maze: activity-style node route board */
#fm-board {
  max-width: 100%;
  overflow: auto;
  padding: 4px;
}

#fm-puzzle-area.pz-board-frame .fm-board-section {
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
}

#fm-puzzle-area.pz-board-frame .fm-board {
  width: 100%;
  max-width: 100%;
  overflow: auto;
}

#fm-puzzle-area.pz-board-frame .fm-board-label {
  width: 100%;
}

.fm-board-wrap.pz-compare-mode {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
}

.fm-route-board {
  position: relative;
  isolation: isolate;
  margin: 0 auto;
  border: 2px solid #94a3b8;
  border-radius: 22px;
  box-sizing: content-box;
  background:
    linear-gradient(90deg, rgba(148,163,184,.10) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(0deg, rgba(148,163,184,.10) 1px, transparent 1px) 0 0 / 46px 46px,
    radial-gradient(circle at 18px 18px, rgba(99,102,241,.07) 2px, transparent 2.5px) 0 0 / 38px 38px,
    linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
  box-shadow: 0 14px 35px rgba(15, 23, 42, .10);
  overflow: hidden;
}

.fm-route-board::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 0;
  border: 1px dashed rgba(51, 65, 85, .12);
  border-radius: 18px;
  pointer-events: none;
}

.fm-route-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
  box-sizing: content-box;
  pointer-events: none;
}

.fm-route-corridor-outer {
  stroke: #9fb0c7;
  stroke-width: 18;
  stroke-linecap: round;
  opacity: .95;
}

.fm-route-corridor-inner {
  stroke: #fff;
  stroke-width: 12;
  stroke-linecap: round;
}

.fm-route-edge {
  stroke: #64748b;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.fm-route-corridor-outer.is-answer {
  stroke: #15803d;
}

.fm-route-corridor-inner.is-answer {
  stroke: #dcfce7;
}

.fm-route-edge.is-answer {
  stroke: #22c55e;
  stroke-width: 4;
}

.fm-route-corridor-outer.is-fail {
  stroke: #991b1b;
  opacity: .45;
}

.fm-route-corridor-inner.is-fail {
  stroke: #fff1f2;
}

.fm-route-edge.is-fail {
  stroke: #fca5a5;
  stroke-width: 3;
  stroke-dasharray: 8 8;
}

.fm-route-edge-sign {
  position: absolute;
  z-index: 4;
  min-width: 28px;
  height: 24px;
  padding: 0 9px;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #334155;
  font: 900 15px/20px "JetBrains Mono", "Noto Sans KR", sans-serif;
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
  pointer-events: none;
}

.fm-route-edge-sign.is-vertical {
  margin-left: 14px;
}

.fm-route-edge-sign.is-horizontal {
  margin-top: -15px;
}

.fm-route-edge-sign.is-answer {
  border-color: #22c55e;
  background: #dcfce7;
  color: #15803d;
}

.fm-route-edge-sign.is-fail {
  border-color: #f87171;
  background: #fff1f2;
  color: #b91c1c;
}

.fm-route-node {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px solid #64748b;
  border-radius: 16px;
  background: rgba(255,255,255,.97);
  color: #111827;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  touch-action: manipulation;
}

.fm-route-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(15, 23, 42, .16);
}

.fm-route-node strong {
  font: 900 16px "JetBrains Mono", "Noto Sans KR", sans-serif;
  letter-spacing: .01em;
}

.fm-node-kicker {
  font-size: 10px;
  font-weight: 900;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.fm-node-answer {
  font-size: 13px;
  font-weight: 900;
  color: #2563eb;
}

.fm-node-answer.muted {
  color: #94a3b8;
}

.fm-node-pass {
  position: absolute;
  top: -13px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 11px;
  font-weight: 900;
}

.fm-route-node.is-start {
  border-color: #16a34a;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
}

.fm-route-node.is-end {
  border-color: #ef4444;
  background: linear-gradient(180deg, #fff7ed 0%, #fee2e2 100%);
}

.fm-route-node.is-selected {
  border-color: #f59e0b;
  background: #fffbeb;
  box-shadow: 0 0 0 5px rgba(245, 158, 11, .18), 0 14px 24px rgba(15, 23, 42, .16);
}

.fm-route-node.is-pass {
  border-color: #22c55e;
  background: #f0fdf4;
}

.fm-route-node.is-fail {
  border-color: #f87171;
  background: #fff1f2;
}

.fm-route-order {
  position: absolute;
  top: -12px;
  left: -12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(245, 158, 11, .35);
}

.fm-route-note {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.fm-route-note b {
  color: #4f46e5;
  font-weight: 900;
}

.fm-bridge-board {
  max-width: 100%;
  box-sizing: content-box;
  background:
    radial-gradient(circle at 11% 16%, rgba(254, 240, 138, .34) 0 7%, transparent 8%),
    radial-gradient(circle at 88% 22%, rgba(187, 247, 208, .42) 0 8%, transparent 9%),
    linear-gradient(180deg, #fffdf5 0%, #f6fbff 100%);
}

.fm-bridge-board::before {
  inset: 18px;
  border: 1px solid rgba(148, 163, 184, .22);
  background:
    linear-gradient(90deg, rgba(148,163,184,.10) 1px, transparent 1px) 0 0 / 82px 62px,
    linear-gradient(0deg, rgba(148,163,184,.10) 1px, transparent 1px) 0 0 / 82px 62px;
}

.fm-bridge-story {
  position: absolute;
  top: 14px;
  left: 22px;
  right: 22px;
  z-index: 5;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .10);
  pointer-events: none;
}

.fm-bridge-story strong {
  color: #1d4ed8;
  font-weight: 950;
}

.fm-bridge-character {
  font-size: 20px;
  line-height: 1;
}

.fm-bridge-board .fm-route-corridor-outer {
  stroke: #7f91a8;
  stroke-width: 38;
  stroke-linecap: butt;
  stroke-linejoin: round;
  opacity: .96;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .10));
}

.fm-bridge-board .fm-route-corridor-inner {
  stroke: #fff3cf;
  stroke-width: 28;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

.fm-bridge-board .fm-route-edge {
  stroke: transparent;
  stroke-width: 0;
}

.fm-bridge-board .fm-route-edge.is-answer {
  stroke: rgba(34, 197, 94, .85);
  stroke-width: 4;
}

.fm-bridge-board .fm-route-edge.is-fail {
  stroke: rgba(248, 113, 113, .75);
  stroke-width: 3;
}

.fm-bridge-board .fm-route-edge-sign {
  z-index: 6;
  min-width: 34px;
  height: 28px;
  border-color: #93c5fd;
  background: #fffaf0;
  color: #1e40af;
  font-size: 16px;
  line-height: 24px;
  margin: 0;
}

.fm-bridge-board .fm-route-edge-sign.is-horizontal,
.fm-bridge-board .fm-route-edge-sign.is-vertical,
.fm-bridge-board .fm-route-edge-sign.is-diagonal {
  margin: 0 !important;
}

.fm-bridge-room {
  overflow: visible;
  isolation: isolate;
  border-width: 2px;
  border-color: #72849b;
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  box-shadow:
    0 8px 20px rgba(15, 23, 42, .10),
    inset 0 0 0 1px rgba(255, 255, 255, .8);
}

.fm-bridge-room strong {
  font-size: 17px;
}

.fm-bridge-room .fm-bridge-icon {
  font-size: 26px;
  line-height: 1.1;
}

.fm-bridge-bg-icon {
  position: absolute;
  right: 7px;
  bottom: 4px;
  z-index: 0;
  font-size: 38px;
  line-height: 1;
  opacity: .18;
  transform: rotate(-9deg);
  pointer-events: none;
}

.fm-bridge-room > :not(.fm-bridge-bg-icon):not(.fm-bridge-door) {
  position: relative;
  z-index: 1;
}

.fm-bridge-room.is-start {
  background:
    linear-gradient(180deg, rgba(240, 253, 244, .98) 0%, rgba(220, 252, 231, .96) 100%);
}

.fm-bridge-room.is-start strong {
  color: #064e3b;
}

.fm-bridge-room.is-end .fm-bridge-bg-icon {
  opacity: .22;
}

.fm-bridge-rest {
  color: #94a3b8;
  font-size: 15px !important;
}

.fm-bridge-door {
  position: absolute;
  z-index: 5;
  display: block;
  background: #fff3cf;
  box-shadow: inset 0 0 0 1px rgba(255, 243, 207, .95);
  pointer-events: none;
}

.fm-bridge-door.door-top,
.fm-bridge-door.door-bottom {
  left: 50%;
  width: 36px;
  height: 14px;
  transform: translateX(-50%);
}

.fm-bridge-door.door-top {
  top: -7px;
}

.fm-bridge-door.door-bottom {
  bottom: -7px;
}

.fm-bridge-door.door-left,
.fm-bridge-door.door-right {
  top: 50%;
  width: 14px;
  height: 36px;
  transform: translateY(-50%);
}

.fm-bridge-door.door-left {
  left: -7px;
}

.fm-bridge-door.door-right {
  right: -7px;
}

.fm-bridge-door.door-top-left,
.fm-bridge-door.door-top-right,
.fm-bridge-door.door-bottom-left,
.fm-bridge-door.door-bottom-right {
  width: 28px;
  height: 28px;
  border-radius: 4px;
}

.fm-bridge-door.door-top-left {
  top: -10px;
  left: -10px;
  transform: rotate(45deg);
}

.fm-bridge-door.door-top-right {
  top: -10px;
  right: -10px;
  transform: rotate(45deg);
}

.fm-bridge-door.door-bottom-left {
  bottom: -10px;
  left: -10px;
  transform: rotate(45deg);
}

.fm-bridge-door.door-bottom-right {
  right: -10px;
  bottom: -10px;
  transform: rotate(45deg);
}

@media (max-width: 900px) {
  #fm-board {
    width: 100%;
  }

  .fm-route-board {
    transform: scale(.82);
    transform-origin: top center;
    margin-bottom: -70px;
  }
}

#view-mirror-puzzle .mr-diff-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

#view-mirror-puzzle .mr-diff-card {
  height: auto !important;
  min-height: 43px;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  gap: 2px;
  text-align: left;
  line-height: 1.25;
  padding: 7px 10px !important;
}

#view-mirror-puzzle .mr-diff-card span {
  font-size: 13px;
  font-weight: 900;
}

#view-mirror-puzzle .mr-diff-card small {
  font-size: 10.5px;
  font-weight: 800;
  color: #64748b;
}

#view-mirror-puzzle .mr-diff-card.on small {
  color: rgba(255, 255, 255, .9);
}

#mr-grid-wrap.mr-answer-visible {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(240px, 320px);
  grid-template-areas:
    "info info"
    "mission mission"
    "problem problem"
    "canvas answer"
    "result answer";
  align-items: start;
  justify-content: center;
  column-gap: 16px;
  row-gap: 10px;
}

#mr-grid-wrap.mr-answer-visible #mr-info-bar {
  grid-area: info;
}

#mr-grid-wrap.mr-answer-visible #mr-mission-card {
  grid-area: mission;
}

#mr-grid-wrap.mr-answer-visible #mr-board-problem-info {
  grid-area: problem;
}

#mr-grid-wrap.mr-answer-visible #mr-grid-canvas {
  grid-area: canvas;
}

#mr-grid-wrap.mr-answer-visible #mr-result-area {
  grid-area: result;
  width: 100%;
}

.mr-answer-panel {
  grid-area: answer;
  width: 100%;
  max-width: 320px;
  border: 1.5px solid #bfdbfe;
  border-radius: 12px;
  background: #f8fafc;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
}

.mr-answer-title {
  font-size: 15px;
  font-weight: 900;
  color: #1e3a8a;
  margin-bottom: 3px;
}

.mr-answer-note {
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  margin-bottom: 9px;
}

.mr-answer-svg-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  overflow: hidden;
}

.mr-answer-svg-wrap svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 980px) {
  #mr-grid-wrap.mr-answer-visible {
    grid-template-columns: 1fr;
    grid-template-areas:
      "info"
      "mission"
      "problem"
      "canvas"
      "answer"
      "result";
  }

  .mr-answer-panel {
    max-width: none;
  }
}