* { box-sizing: border-box; }
:root {
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  color: #fff;
  font-synthesis: none;
  --board-columns: 10;
  --board-rows: 16;
}
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 10px;
  background: radial-gradient(ellipse at 50% 35%, #f6fcf0 0%, #e4f2e5 52%, #c9e1d7 100%);
}
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #fff69a; outline-offset: 3px; }
button:active:not(:disabled) { transform: translateY(1px); }
.simulator-workspace { width: min(1564px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 440px minmax(0, 2fr); align-items: stretch; gap: 20px; }
/* 게임이 행 높이를 결정하고, 보관함은 같은 높이로 늘어납니다. */
.block-library { width: 100%; max-width: 352px; min-height: 0; contain: size; overflow-y: auto; justify-self: end; padding: 18px; color: #355e52; border: 1px solid #ffffff; border-radius: 22px; background: #f9fff7ed; box-shadow: 0 10px 35px #35604d14; }
.library-header { position: relative; }
.library-header h2 { margin: 5px 0 7px; font-size: 23px; letter-spacing: -1px; text-align: center; }
.library-hint { min-height: 44px; margin: 13px 0 0; padding: 9px 10px; background: #edf4eb; border-radius: 9px; font-size: 11px; line-height: 1.6; word-break: keep-all; text-align: center; }
.library-select { width: 100%; margin-top: 13px; padding: 10px; border: 1px solid #699b42; border-radius: 9px; background: #7eb348; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.library-select:disabled { opacity: .55; cursor: default; }
.library-select:focus-visible { outline: 2px solid #355e52; outline-offset: 3px; }
.block-library.is-choosing { border-color: #c8b77a; box-shadow: 0 0 0 3px #fff6cd, 0 10px 35px #35604d14; }
.block-library.is-choosing .library-hint { background: #fff2c7; color: #886323; }
.library-cancel { width: 100%; margin-top: 6px; padding: 5px; border: 1px solid #d6ddcb; border-radius: 7px; background: white; color: #63705c; font-size: 11px; }
.library-section { margin-top: 15px; }
.library-section h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 9px; font-size: 13px; }
.catalog-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.catalog-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 1px solid #dde8d9; border-radius: 10px; background: #fff; color: #4b7160; }
.catalog-item:disabled { cursor: default; }
.catalog-item:not(:disabled):hover { background: #f5ffe8; border-color: #8dbd54; box-shadow: 0 2px 6px #51842118; }
.catalog-item:focus-visible { outline-color: #6cad67; }
.catalog-art { height: 41px; display: grid; place-content: center; }
.catalog-name { font-size: 12px; font-weight: 800; }
.catalog-item .mini-grid { --mini-cell-size: 7px; --block-color: #95d952; --block-border: #64ac35; }
.vowels .catalog-item .mini-grid { --block-color: #69cce9; --block-border: #32a4c6; }
.catalog-item[data-catalog-id="dot"] .mini-grid { --block-color: #f7c857; --block-border: #d4a43a; }
.catalog-item[aria-current="true"] { border-color: #d5b04f; background: #fff6d7; }
.piece-card.replacing { border-color: #c99b35; background: #fff0bf; box-shadow: 0 0 0 2px #ffdb70; }
.game {
  width: min(440px, 100%);
  position: relative;
  padding: 0 10px 17px;
  border: 4px solid #fff;
  border-top: 0;
  border-radius: 32px 32px 29px 29px;
  background: linear-gradient(180deg, #c5f3fb 10%, #85dce8 47%, #87f7ee 88%, #c9ffff);
  box-shadow: 0 5px 0 #acd6cf, 0 18px 48px #396e5e26, inset 0 0 0 3px #dcffffa6;
}
.game::after {
  content: "";
  position: absolute;
  pointer-events: none;
  bottom: 2px; left: 14px; right: 14px; height: 10px;
  background: radial-gradient(circle at 15% 50%, white 0 2px, transparent 3px), radial-gradient(circle at 49% 60%, white 0 3px, transparent 4px), radial-gradient(circle at 82% 40%, white 0 2px, transparent 3px);
}
.forest-header { position: relative; height: 100px; margin: 0 -10px; padding: 59px 12px 9px; }
.canopy { position: absolute; z-index: 2; top: -4px; left: -10px; width: calc(100% + 20px); height: 106px; pointer-events: none; }
h1 {
  position: absolute; z-index: 3; top: 1px; left: 0; right: 0;
  margin: 0; text-align: center;
  font-size: clamp(25px, 7.8vw, 35px); line-height: 1.35; font-weight: 1000; letter-spacing: -2px;
  color: #fffef1;
  -webkit-text-stroke: 6px #75ae38;
  paint-order: stroke fill;
  text-shadow: 0 5px 0 #4b8a2f, 0 7px 5px #4d832a55;
}
.edit-button { position: absolute; z-index: 4; right: 16px; top: 10px; background: #477e29; border: 1px solid #e1ff9c; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 900; padding: 5px 8px; }
.edit-button[aria-pressed="true"] { background: #bf8426; border-color: #fff4b5; }
.edit-panel { margin: 0 0 10px; padding: 12px; border: 2px solid #e4ba51; border-radius: 12px; background: #fff9df; color: #705a2b; }
.edit-panel[hidden] { display: none; }
.edit-panel > strong { font-size: 14px; }
.edit-panel p { margin: 6px 0 10px; font-size: 11px; line-height: 1.6; }
.edit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.edit-fields label { font-size: 12px; font-weight: 800; }
.edit-fields input { width: 100%; min-width: 0; margin-top: 5px; padding: 7px; border: 1px solid #ccb77c; border-radius: 6px; background: #fff; color: #574627; font: inherit; }
.edit-actions { display: flex; gap: 8px; margin-top: 10px; }
.edit-actions button { flex: 1; padding: 7px; border: 1px solid #90ac53; border-radius: 7px; background: #759d3e; color: #fff; font-size: 12px; font-weight: 800; }
.edit-actions #cancel-edit { background: #fff; border-color: #ccb77c; color: #705a2b; }
.board.is-editing { outline: 3px solid #e8b842; outline-offset: 2px; cursor: pointer; }
.board.is-editing .cell:hover, .board.is-editing .cell:focus-visible { outline: 2px solid #fff28d; outline-offset: -2px; filter: brightness(1.15); }
.calculate-button:disabled, .footer-button:disabled { opacity: .5; cursor: default; }
.score-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 3px; position: relative; z-index: 1; background: #d4b486; border-radius: 0 0 13px 13px; box-shadow: 0 3px 0 #ffffff9c; }
.score-bar > div { display: flex; justify-content: space-between; align-items: center; gap: 3px; border-radius: 15px; background: #8d6036; padding: 5px 8px; font-size: 10px; white-space: nowrap; }
.score-bar strong { font-size: 11px; }
.play-area { display: grid; grid-template-columns: minmax(0, 2.23fr) minmax(0, 1fr); gap: 7px; }
.board-frame { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; padding: 5px; border: 1px solid #60c2d8; border-radius: 9px; background: linear-gradient(#83d5f0, #76e5e0); box-shadow: inset 0 0 0 3px #ffffff40, 0 1px 0 #fff8; }
/* 폭을 프레임 내부로 고정해 높이와 종횡비로 계산된 격자가 오른쪽 여백을 넘지 않게 합니다. */
.board { display: grid; grid-template-columns: repeat(var(--board-columns), 1fr); grid-template-rows: repeat(var(--board-rows), 1fr); aspect-ratio: 10 / 16; width: 100%; min-width: 0; min-height: 0; height: 100%; overflow: hidden; border-radius: 4px; background: linear-gradient(180deg, #5bb0d8, #4ac8c7); }
.cell { position: relative; min-width: 0; min-height: 0; border: 1px solid #288da321; border-radius: 3px; box-shadow: inset 1px 1px 0 #ffffff09; }
.ability-token { position: absolute; inset: 12%; display: grid; place-items: center; border: 1px solid white; border-radius: 50%; background: #eaffff; color: #009cdc; font-size: 16px; font-weight: 900; line-height: 1; box-shadow: 0 0 5px #fff; pointer-events: none; }
.ability-token.swap-token { color: #a033dc; background: #fff0ff; }
.board.is-over { opacity: .75; }
.cell.occupied { background: var(--block-color); border-color: var(--block-border); box-shadow: inset 2px 2px 0 #fff7, inset -2px -2px 0 #0002; }
.cell.placement-flash { outline: 2px solid #fff59a; outline-offset: -2px; z-index: 1; animation: placement-appear 360ms ease-out; }
.cell.clearing-row { animation: row-disappear 600ms ease-in forwards; }
.cell.last-placement::after { content: ''; position: absolute; inset: 2px; border: 2px dashed #fff6ad; border-radius: 2px; box-shadow: 0 0 0 1px #80742799; pointer-events: none; z-index: 2; }
.cell.last-placement:not(.occupied) { background: #fff4a514; }
.cell[data-trace-step]::before { content: attr(data-trace-step); position: absolute; top: 0; left: 0; z-index: 3; min-width: 12px; padding: 0 2px; border-radius: 3px; background: #715824; color: white; font-size: 9px; font-weight: 900; pointer-events: none; }
.trace-legend { margin: 4px 3px 0; text-align: center; color: #74622b; font-size: 11px; line-height: 1.5; }
.solution-step-card.is-playing { border-color: #d6ac38; background: #fff7ce; box-shadow: inset 0 0 0 1px #f7d96d; }
.edit-button:disabled { opacity: .6; cursor: default; }
@keyframes placement-appear { from { filter: brightness(1.6); transform: scale(.85); } to { filter: brightness(1); transform: scale(1); } }
@keyframes row-disappear { 0% { background: #fff8b1; opacity: 1; } 50% { background: #fff; opacity: 1; } 100% { opacity: .1; } }
@media (prefers-reduced-motion: reduce) {
  .cell.placement-flash, .cell.clearing-row { animation: none; }
  .cell.clearing-row { background: #fff4ac; outline: 2px solid #ffe360; outline-offset: -2px; }
}
.board.is-selecting { cursor: crosshair; }
.placement-preview { position: fixed; top: 0; left: 0; z-index: 10; display: grid; pointer-events: none; user-select: none; }
.placement-preview[hidden] { display: none; }
.placement-cell { position: relative; margin: 1px; border-radius: 3px; }
.placement-cell.filled { background: #20e552a8; border: 2px solid #29ff5c; box-shadow: inset 0 0 0 1px #137b4b55; }
.placement-preview.invalid .placement-cell.filled { background: #fa6256d9; border-color: #ffb3a1; box-shadow: 0 0 0 1px #d32922; }
.placement-preview.invalid .placement-cell.filled::before,
.placement-preview.invalid .placement-cell.filled::after { content: ""; position: absolute; top: 50%; left: 50%; width: 65%; height: 3px; border-radius: 3px; background: #e82020; box-shadow: 0 0 0 1.5px #fff; transform: translate(-50%, -50%) rotate(45deg); }
.placement-preview.invalid .placement-cell.filled::after { transform: translate(-50%, -50%) rotate(-45deg); }
.placement-preview.invalid .ability-token { display: none; }
.sidebar, .pieces-section, .abilities-section { min-width: 0; }
.sidebar { display: flex; flex-direction: column; gap: 5px; }
.panel-heading { display: flex; justify-content: center; align-items: center; gap: 6px; height: 26px; margin: 0 0 5px; border-radius: 8px; background: linear-gradient(#48b6d9, #299dcc); font-size: 14px; font-weight: 900; white-space: nowrap; text-shadow: 0 1px 1px #1789b8; }
.info-button { display: grid; place-items: center; width: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%; background: #ffffff4a; color: #fff; font-size: 10px; font-weight: 900; }
.piece-list { display: grid; gap: 5px; }
.piece-card { min-height: 70px; display: grid; grid-template-columns: minmax(0, 1fr) 55px; gap: 3px; padding: 5px 4px; background: #f7fcfd; border: 1px solid #69c3d6; border-radius: 9px; box-shadow: 0 2px 0 #51bac37a, inset 0 0 0 2px #fff; }
.piece-preview { display: grid; place-content: center; border: 0; padding: 0; border-radius: 6px; background: #fff; min-width: 0; }
.piece-preview:hover { background: #fff9d8; }
.piece-card.is-used { padding: 9px 4px 7px; grid-template-columns: 1fr; align-content: center; justify-items: center; gap: 6px; background: linear-gradient(145deg, #09afe0, #08cbe8); border-color: #76f5fb; box-shadow: inset 0 0 0 1px #ffffff35; }
.piece-used-label { color: #fff; text-align: center; font-size: 13px; font-weight: 900; line-height: 18px; text-shadow: 0 1px 2px #0084b870; }
.piece-used-cancel { min-width: 48px; padding: 2px 12px; border: 1px solid #ffffffb3; border-radius: 999px; background: #ffffffed; color: #078da9; font-family: inherit; font-size: 10px; font-weight: 700; line-height: 16px; box-shadow: 0 2px 3px #007e9b30; cursor: pointer; }
.piece-used-cancel:hover { background: #fff; box-shadow: 0 2px 5px #007e9b55; }
.piece-used-cancel:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.piece-used-cancel:disabled { opacity: .55; cursor: default; }
.piece-card.is-used.replacing { border-color: #ffbf39; box-shadow: 0 0 0 2px #ffdb70; }
.piece-card.selected { border-color: #ffbe28; background: #ffe99a; box-shadow: 0 0 0 1px #fff3ad, inset 0 0 0 2px #ffcf55; }
.piece-card.selected .piece-preview { background: #fff2b5; }
.mini-grid { display: grid; grid-template-columns: repeat(var(--size), var(--mini-cell-size, 8px)); grid-template-rows: repeat(var(--height), var(--mini-cell-size, 8px)); gap: 1px; }
.mini-cell.filled { border: 1px solid var(--block-border); background: var(--block-color); box-shadow: inset 1px 1px 0 #fff9, inset -1px -1px 0 #0002; }
.piece-controls { display: grid; align-content: center; gap: 3px; }
.piece-button.replace { background: linear-gradient(#ffe6a0, #efc05d); border-color: #d3a343; color: #805b21; }
.piece-button.replace[aria-pressed="true"] { background: #f5cc6f; box-shadow: inset 0 0 0 1px #fff8; }
.piece-button { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; white-space: nowrap; border: 1px solid #0294c5; border-radius: 12px; padding: 0 3px; height: 18px; line-height: 1; background: linear-gradient(#08d5fa, #00a5e4); color: #fff; font-size: 11px; font-weight: 800; box-shadow: inset 0 1px 0 #ffffff80, 0 1px 0 #fff; }
.piece-icon { flex: 0 0 10px; width: 10px; height: 10px; }
.piece-button.flip { border-color: #059d9b; background: linear-gradient(#23ded0, #00b0ad); }
.abilities-section { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.abilities-section .panel-heading { background: linear-gradient(#4ad4da, #22b7d0); margin-bottom: 0; }
.ability-info { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 36px; padding: 3px 1px; border-radius: 8px; background: #dcffffe0; color: #35b5c9; font-size: 11px; font-weight: 800; text-align: center; }
.ability-info strong { font-size: 14px; line-height: 16px; color: #4ac7d6; }
.ability-actions { display: grid; gap: 4px; margin-top: auto; padding-top: 2px; }
.ability-button { display: flex; align-items: center; justify-content: flex-end; gap: 6px; border-radius: 20px; height: 33px; padding: 0 14px 0 3px; color: #ffffff75; font-size: 12px; font-weight: 800; box-shadow: inset 0 0 0 2px #ffffff23, 0 1px 0 #fff9; }
.ability-button:disabled { cursor: not-allowed; }
.ability-button:not(:disabled) { color: #fff; }
.ability-button[aria-pressed="true"] { outline: 2px solid #ffe46d; outline-offset: 1px; }
.piece-list.is-swapping .piece-card { border-color: #b441e7; box-shadow: inset 0 0 0 1px #e9b6ff; }
.game-message { margin: 8px 3px 0; min-height: 28px; color: #267f89; font-size: 11px; line-height: 1.4; text-align: center; word-break: keep-all; }
.piece-preview:disabled, .piece-button:disabled { cursor: default; opacity: .6; }
.ability-button b { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; font-size: 14px; color: #d9f0ff; background: #0070d6; box-shadow: inset 0 1px 3px #0003; }
.stamp { border: 1px solid #078fe2; background: linear-gradient(#16c1ff, #2e98ee); }
.swap { border: 1px solid #9252ed; background: linear-gradient(#c56cff, #a03bfa); }
.swap b { background: #8229d8; }
.game-footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.footer-button { min-height: 34px; border-radius: 9px; border: 1px solid #389da6; background: linear-gradient(#83d4d7, #43adb5); color: #fff; font-size: 15px; font-weight: 900; text-shadow: 0 1px 1px #358e9f; box-shadow: inset 0 1px 0 #edffffc4, 0 2px 0 #fff9; }
.footer-button span { font-size: 20px; vertical-align: -1px; }
.footer-button:hover { filter: brightness(1.05); }
.game-footer .footer-button { padding: 0 3px; font-size: 12px; white-space: nowrap; }
.game-footer .manual-icon-button span { font-size: 17px; }
.manual-stamp { background: linear-gradient(#6ed9ef, #35accb); border-color: #279abc; }
.manual-swap { background: linear-gradient(#baa2eb, #9272ca); border-color: #8263b8; text-shadow: 0 1px 1px #766099; }
.manual-icon-button[aria-pressed="true"] { outline: 2px solid #e9b934; outline-offset: 2px; }
.solver-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; min-height: 0; contain: size; }
.solver-panel { width: 100%; min-width: 0; min-height: 0; contain: size; overflow-y: auto; overflow-wrap: anywhere; padding: 18px; color: #355e52; border: 1px solid #fff; border-radius: 22px; background: #f9fff7ed; box-shadow: 0 10px 35px #35604d14; }
.solution-panel { background: #f4fffb; border-color: #cce5d7; }
.solver-panel h2 { margin: 5px 0 12px; font-size: 21px; letter-spacing: -1px; }
.solver-settings { display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: 9px 10px; align-items: center; min-width: 0; margin: 0 0 12px; padding: 10px 12px; border: 1px solid #d6e5cf; border-radius: 10px; background: #f0f7ed; }
.solver-settings legend { padding: 0 5px; font-size: 12px; font-weight: 800; color: #58774c; }
.solver-settings label { font-size: 11px; line-height: 1.5; word-break: keep-all; }
.worker-count-hint { display: block; margin-top: 4px; color: #73866c; font-size: 10px; font-weight: 400; line-height: 1.5; }
.solver-settings select, .solver-settings input { width: 100%; min-width: 0; height: 30px; padding: 4px 6px; border: 1px solid #bdd1b5; border-radius: 6px; background: white; color: #355e52; font: inherit; font-size: 12px; }
.settings-number { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.solver-settings p { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 10px; line-height: 1.5; color: #73866c; }
.calculate-button { width: 100%; min-height: 39px; border: 1px solid #488b35; border-radius: 9px; background: linear-gradient(#99d958, #68b444); box-shadow: inset 0 1px 0 #eeffc4; color: #fff; text-shadow: 0 1px 1px #437f31; font-size: 15px; font-weight: 900; }
.calculate-button[aria-busy="true"] { background: #779381; border-color: #587b65; }
.undo-button { width: 100%; min-height: 30px; padding: 3px; border: 1px solid #65a4ad; border-radius: 9px; background: linear-gradient(#e1f6f6, #b5e0e3); color: #327781; font-size: 12px; font-weight: 800; }
.undo-button:disabled { opacity: .5; cursor: default; }
.undo-button:not(:disabled):hover { background: #efffff; }
.solver-status { margin: 7px 0 0; font-size: 11px; line-height: 1.5; }
#solver-title, #solver-status, #solution-title, #solution-empty { text-align: center; }
#solver-status:empty, #solution-empty:empty, #swap-comparison-status:empty { display: none; }
.solver-result { margin-top: 10px; padding: 10px; border: 1px solid #bbd9a5; border-radius: 9px; background: #fffef1; }
.solver-result strong { display: block; color: #527d2b; font-size: 19px; text-align: center; }
.solver-result p { font-size: 11px; line-height: 1.6; margin: 6px 0 9px; }
#solver-description { white-space: pre-line; text-align: center; word-break: keep-all; overflow-wrap: normal; }
.swap-comparison { margin-top: 12px; padding: 12px; border: 1px solid #c9b3df; border-radius: 12px; background: #faf4ff; color: #66537b; }
.swap-comparison > strong { display: block; font-size: 14px; text-align: center; }
.swap-comparison p { font-size: 11px; line-height: 1.6; margin: 7px 0; }
.swap-comparison #swap-comparison-status { margin: 12px 0; font-size: 12px; line-height: 1.8; white-space: pre-line; word-break: keep-all; overflow-wrap: break-word; }
.swap-progress { padding: 12px; border: 1px solid #e2d6ed; border-radius: 10px; background: #fff; }
.swap-progress[hidden] { display: none; }
.swap-comparison .swap-progress-baseline { margin: 0 0 12px; text-align: center; font-size: 12px; }
.swap-progress-baseline strong { color: #725197; }
.swap-progress-numbers { display: grid; justify-items: center; gap: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.swap-progress-numbers strong { font-size: 16px; color: #69468c; }
.swap-progress-numbers span { font-size: 11px; color: #776583; }
.swap-progress progress { display: block; width: 100%; height: 9px; margin-top: 9px; border: 0; border-radius: 5px; overflow: hidden; appearance: none; background: #eee6f5; accent-color: #9c76bf; }
.swap-progress progress::-webkit-progress-bar { background: #eee6f5; border-radius: 5px; }
.swap-progress progress::-webkit-progress-value { background: #9c76bf; border-radius: 5px; }
.swap-progress progress::-moz-progress-bar { background: #9c76bf; border-radius: 5px; }
.swap-comparison .swap-progress-hint { margin: 10px 0 0; text-align: center; color: #87749b; font-size: 10px; }
.swap-comparison-result p { white-space: pre-line; }
.swap-outcomes { margin: 8px 0; font-size: 11px; }
.swap-outcomes summary { padding: 7px; border: 1px solid #ddcde9; border-radius: 6px; background: #fff; text-align: center; cursor: pointer; list-style: none; }
.swap-outcomes summary::-webkit-details-marker { display: none; }
.swap-outcomes summary::before { content: '⌄'; margin-right: 6px; font-weight: 700; }
.swap-outcomes[open] summary::before { content: '⌃'; }
.swap-outcomes summary:focus-visible { outline: 2px solid #9c76bf; outline-offset: 2px; }
.swap-outcomes table { width: 100%; margin-top: 8px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.swap-outcomes th, .swap-outcomes td { padding: 6px 3px; border-bottom: 1px solid #e5d8f0; text-align: right; }
.swap-outcomes th:first-child, .swap-outcomes td:first-child { text-align: left; }
.swap-comparison .swap-risk.has-risk { color: #a03f33; font-weight: 700; }
.swap-comparison-result { padding: 8px 0; border-top: 1px solid #e5d8f0; }
.swap-comparison-result strong { color: #725197; font-size: 12px; }
.solver-coordinate-note { margin: 12px 0; color: #638473; font-size: 11px; line-height: 1.6; }
.solution-apply-note { text-align: center; }
.solution-steps { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.solution-step-card { display: block; width: 100%; padding: 12px; border: 1px solid #d6e5cf; border-radius: 12px; background: #fff; color: inherit; text-align: center; }
.solution-step-card:not(:disabled):hover { border-color: #85b953; background: #f5ffe9; }
.solution-step-card.is-applied { background: #edf4e8; border-color: #bccfb0; cursor: default; }
.solution-step-state { display: block; margin-top: 8px; font-size: 11px; color: #679342; font-weight: 800; }
.solution-step-state:empty { display: none; }
.apply-all-button { width: 100%; min-height: 36px; margin-top: 6px; padding: 7px; border: 1px solid #689d49; border-radius: 9px; background: #7bb652; color: white; font-size: 13px; font-weight: 800; }
.apply-all-button:disabled { background: #aac799; border-color: #94b181; cursor: default; }
.solution-step-card > strong { font-size: 13px; color: #477834; }
.solution-step-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: center; align-items: center; margin-top: 10px; }
.solution-shape { justify-self: center; }
.solution-step-content p { margin: 0; font-size: 11px; line-height: 1.6; }
.solution-step-content .solution-position { margin-top: 4px; color: #287c7f; font-size: 13px; font-weight: 800; }
.solution-step-score { margin: 10px 0 0; padding-top: 7px; border-top: 1px solid #edf3e8; font-size: 11px; color: #6c8c5d; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
dialog { width: min(330px, calc(100% - 36px)); padding: 24px; border: 3px solid white; border-radius: 20px; background: #edffff; color: #286a70; box-shadow: 0 16px 60px #15362f44; }
dialog::backdrop { background: #1b463c66; backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 12px; font-size: 20px; }
dialog p { margin: 0 0 20px; line-height: 1.75; font-size: 14px; word-break: keep-all; }
dialog .footer-button { width: 100%; }
@media (max-width: 1340px) {
  .simulator-workspace { max-width: 1224px; grid-template-columns: minmax(0, 1fr) 440px minmax(0, 1fr); }
  .solver-panels { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .simulator-workspace { max-width: 812px; grid-template-columns: minmax(0, 1fr) 440px; }
  .solver-panels { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; contain: none; }
  .solver-panel { max-height: 600px; contain: none; }
}
@media (max-width: 840px) {
  .simulator-workspace { max-width: 440px; display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .game { order: 0; }
  .block-library { order: 1; max-width: none; contain: none; overflow-y: visible; }
  .solver-panels { order: 2; grid-template-columns: minmax(0, 1fr); }
  .solver-panel { max-height: none; contain: none; overflow-y: visible; }
  .library-hint { min-height: 0; }
}
@media (max-width: 380px) {
  .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  body { padding: 16px 6px; }
  .game { padding-inline: 7px; }
  .forest-header { margin-inline: -7px; }
  .play-area { gap: 5px; grid-template-columns: minmax(0, 2.23fr) minmax(97px, 1fr); }
  .piece-card { grid-template-columns: minmax(0, 1fr) 49px; padding-inline: 3px; }
  .panel-heading { font-size: 12px; }
  .score-bar > div { padding-inline: 5px; font-size: 9px; }
  .ability-info { font-size: 10px; }
  .ability-button { padding-right: 6px; font-size: 11px; gap: 3px; }
}
.solver-settings [hidden] { display: none !important; }
.library-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin-top: 13px; }
.library-actions button { width:100%; margin:0; padding:9px 3px; min-height:38px; font-size:12px; }
.solution-panel[hidden] { display:none !important; }
.simulator-workspace { max-width:1224px; grid-template-columns:minmax(0,1fr) 440px minmax(0,1fr); }
.solver-panels { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; }
.cell .plan-mark { position:absolute; inset:1px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:1px; border:1px dashed white; background:var(--plan-color); opacity:.88; z-index:3; pointer-events:none; }
.plan-mark b { background:#fff; color:#153f4a; border-radius:3px; font-size:10px; line-height:12px; padding:0 2px; }
.board { position: relative; }
.overlap-outline-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.overlap-outline-layer path { fill: none; stroke: #fffbd0; stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #ffd34b); }
.cell .plan-mark.stamp-only { background: transparent; border: 0; opacity: 1; }
.cell .plan-mark b.stamp-plan-target { display: inline-grid; place-items: center; width: 19px; height: 19px; padding: 0; flex: 0 0 19px; border-radius: 50%; border: 2px solid #a66a00; background: #ffe079; color: #503000; box-shadow: inset 0 0 0 2px #fff6cc, inset 0 0 0 3px #d89718, 0 0 2px #fff; font-size: 10px; line-height: 1; font-weight: 900; }
@media (min-width:841px) and (max-width:1000px) { .simulator-workspace { max-width:812px; grid-template-columns:minmax(0,1fr) 440px; } }

#swap-comparison-status { text-align: center; }
#solver-description[hidden], #swap-progress-time[hidden] { display: none; }
.solver-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 105px; margin-top: 12px; color: #648d4d; font-size: 13px; }
.solver-loading[hidden] { display: none; }
.solver-spinner { width: 28px; height: 28px; border: 3px solid #deebd6; border-top-color: #7eb348; border-radius: 50%; animation: solver-spin .9s linear infinite; }
@keyframes solver-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .solver-spinner { animation: none; } }
.game-settings-card { padding: 9px 13px; border: 1px solid #fff; border-radius: 14px; background: #f9fff7ed; color: #355e52; box-shadow: 0 5px 18px #35604d10; }
.game-settings-card .solver-settings { margin: 0; padding: 3px 0 0; border: 0; background: transparent; gap: 4px 12px; grid-template-columns: minmax(0, 1fr) 76px; }
.game-settings-card .solver-settings legend { padding: 0; margin-bottom: 3px; }
.game-settings-card .worker-count-hint { margin-top: 2px; font-size: 10px; line-height: 1.35; }
.guide-button { position: absolute; z-index: 4; left: 16px; top: 10px; padding: 5px 8px; border: 1px solid #e1ff9c; border-radius: 8px; background: #477e29; color: #fff; font: inherit; font-size: 12px; font-weight: 900; }
dialog.is-guide { width: min(620px, calc(100% - 28px)); max-height: calc(100svh - 40px); overflow-y: auto; padding: 24px; }
#user-guide[hidden] { display: none; }
#user-guide { font-size: 13px; line-height: 1.75; color: #355e52; }
#user-guide h3 { margin: 22px 0 9px; color: #286a70; font-size: 16px; }
#user-guide p { font-size: 13px; margin: 0 0 12px; }
#user-guide ol { padding-left: 22px; }
#user-guide li { margin-bottom: 10px; }
#user-guide dt { margin-top: 12px; font-weight: 800; color: #286a70; }
#user-guide dd { margin: 3px 0 0; }
#user-guide .guide-tip { padding: 12px; border-radius: 10px; background: #e0f2e2; }
#user-guide { font-size: 14px; line-height: 1.85; }
#user-guide p { font-size: 14px; }
#user-guide h3 { margin-top: 28px; padding-bottom: 8px; border-bottom: 1px solid #c9dfd5; }
#user-guide ol { padding-left: 27px; }
#user-guide li { padding-left: 5px; margin-bottom: 17px; }
#user-guide li::marker { color: #42805a; font-weight: 900; }
#user-guide .guide-step-title { display: block; margin-bottom: 5px; color: #235d48; }
#user-guide .guide-step-body { display: block; }
#user-guide b, #user-guide .guide-control { display: inline-block; padding: 1px 7px; border: 1px solid #c5ddc3; border-radius: 6px; background: #edf7e8; color: #32613b; font-size: 13px; font-weight: 800; line-height: 1.7; }
#user-guide .guide-entry { margin: 10px 0; padding: 13px 15px; border: 1px solid #d6e8df; border-radius: 12px; background: #ffffffb3; }
#user-guide .guide-entry dt { margin: 0 0 7px; }
#user-guide .guide-entry dd { margin: 0; font-size: 13px; }
#user-guide .guide-footnote { font-size: 12px; color: #637f76; }
#user-guide .guide-close-hint { margin-top: 20px; text-align: center; font-size: 12px; }

/* Settings occupy a separate row; the game alone determines the main row height. */
@media (min-width: 1001px) {
  .simulator-workspace { row-gap: 12px; }
  .game-settings-card { grid-column: 3; grid-row: 1; }
  .block-library { grid-column: 1; grid-row: 2; }
  .game { grid-column: 2; grid-row: 2; }
  .solver-panels { grid-column: 3; grid-row: 2; }
}
@media (min-width: 841px) and (max-width: 1000px) {
  .block-library { grid-column: 1; grid-row: 1; }
  .game { grid-column: 2; grid-row: 1; }
  .game-settings-card { grid-column: 1 / -1; grid-row: 2; }
  .solver-panels { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 840px) {
  .game-settings-card { order: 2; }
  .solver-panels { order: 3; }
}