.game-stage-path { width:100%; max-width:1380px; box-sizing:border-box; margin:24px auto; padding:clamp(18px,3vw,30px); border:1px solid #ddd0ee; border-radius:22px; color:#23325d; background:#faf7ff; }
.game-stage-path > header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.game-stage-path h2 { margin:4px 0 8px; font:800 clamp(24px,3vw,36px)/1.1 'Changa',Arial,sans-serif; }
.game-stage-path p { margin:4px 0; line-height:1.5; }
.game-stage-progress-note { font-size:13px; color:#546079; padding-block:8px 16px; }
.game-stage-progress-total { padding:10px 14px; border-radius:12px; background:#ede5f7; font-size:14px; }
.game-stage-progress-total strong { font-size:24px; }
.game-stage-chooser > summary { cursor:pointer; padding:12px; border-radius:10px; color:#543080; background:#eee5f7; font-weight:800; }
.game-stage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:0; margin:18px 0 0; list-style:none; }
.game-stage-card { display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; padding:18px; border:1px solid #ddd0ee; border-radius:15px; background:#fff; }
.game-stage-card.is-selected { outline:3px solid #7850a2; outline-offset:1px; }
.game-stage-card.is-planned { background:#f3f2f6; }
.game-stage-number { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#fff; background:#734699; font-weight:800; }
.game-stage-card h3 { margin:6px 0; font:700 21px/1.2 'Changa',Arial,sans-serif; color:#23325d; }
.game-stage-card small { color:#65507b; font-size:11px; }
.game-stage-card p { font-size:13px; }
.game-stage-state { display:block; margin-top:12px; font-size:12px; font-weight:700; color:#546079; }
.game-stage-card[data-stage-progress=completed] .game-stage-state { color:#226443; }
.game-stage-card a { display:flex; gap:10px; align-items:center; justify-content:space-between; min-height:44px; margin-top:10px; color:#643694; font-weight:800; font-size:14px; text-decoration:none; }
.game-stage-path :is(a,summary):focus-visible,.pattern-stage-hint > summary:focus-visible { outline:3px solid #1268c4; outline-offset:3px; }
.pattern-stage-hint { width:100%; margin-top:18px; text-align:center; }
.pattern-stage-hint > summary { cursor:pointer; width:fit-content; margin:auto; padding:12px 16px; border:1px solid #ccb6e1; border-radius:12px; font:700 16px/1.3 Arial,sans-serif; color:#563179; background:#f7f0ff; }
.pattern-labeled-piece { display:grid; justify-items:center; gap:7px; max-width:82px; }
.pattern-labeled-piece small,.pattern-choice-label { font:700 12px/1.3 Arial,sans-serif; color:#23325d; text-align:center; }
.pattern-choice-label { display:block; max-width:90px; margin-top:6px; }
.game-play-page:has([data-game-stage-context]) .keyboard-prompt strong { min-width:0; max-width:100%; box-sizing:border-box; }
.game-play-page:has([data-game-stage-context]) .keyboard-game {padding:clamp(16px,3vw,40px);}
.game-play-page:has([data-game-stage-context]) .keyboard-prompt {width:100%; min-width:0; grid-template-columns:minmax(0,1fr);}
.game-play-page:has([data-game-stage-context]) .keyboard-prompt > span {width:100%; max-width:100%; min-width:0; padding:0 8px; box-sizing:border-box; text-align:center; line-height:1.4; overflow-wrap:anywhere;}
.game-play-page:has([data-game-stage-context]) .keyboard-choices:has(button:nth-child(4)) {grid-template-columns:repeat(4,minmax(0,1fr));}
.pattern-sequence.pattern-sequence--repair {display:grid; grid-template-columns:repeat(var(--pattern-columns,4),minmax(0,100px)); justify-content:center; width:100%; gap:12px;}
.pattern-repair-piece {appearance:none; box-sizing:border-box; width:100%; max-width:100%; min-height:118px; padding:10px 5px; gap:8px; align-content:center; border:2px solid #cbb6dc; border-radius:14px; background:#fff; cursor:pointer;}
.pattern-repair-piece .pattern-token {width:44px;}
.pattern-repair-piece:hover:not(:disabled) {background:#f4eafa; border-color:#74409a;}
.pattern-repair-piece:focus-visible {outline:3px solid #1268c4; outline-offset:3px;}
.pattern-repair-piece.is-selected {border-color:#74409a; background:#eee1f7; outline:2px solid #74409a;}
.pattern-repair-piece.is-try-again {border-style:dashed; background:#fff3d2;}
.pattern-repair-piece:disabled {cursor:default; opacity:1;}
.game-play-page:has([data-game-stage-context]) .keyboard-choices button:disabled {cursor:default; opacity:.55; transform:none;}
.pattern-board-wrapper {display:grid; gap:18px; width:100%;}
.pattern-board-grid {display:grid; grid-template-columns:repeat(var(--pattern-columns,3),minmax(0,110px)); gap:10px; justify-content:center; width:100%;}
.pattern-board-place {display:grid; place-items:center; align-content:center; gap:8px; min-width:0; min-height:118px; padding:10px 5px; box-sizing:border-box; border:2px solid #e2d7c6; border-radius:14px; background:#fffdf7;}
button.pattern-board-place {appearance:none; cursor:pointer; border-color:#baa0d0; background:#fff;}
.pattern-board-place > small {font:700 11px/1.3 Arial,sans-serif; color:#543080;}
.pattern-board-place .pattern-token,.pattern-board-place .pattern-missing {width:42px; box-sizing:border-box;}
.pattern-board-place.is-selected {outline:2px solid #734699; border-color:#734699; background:#f5edff;}
.pattern-board-place.is-try-again {border-style:dashed; background:#fff3d2;}
.pattern-board-place:disabled {cursor:default; opacity:1;}
.pattern-build-guide {display:grid; gap:12px; justify-items:center; padding:12px; border-radius:14px; background:#ede6f7;}
.pattern-build-guide > b,.pattern-transfer-reference > b,.pattern-transfer-key > b,.pattern-transfer-new {font:800 15px/1.4 Arial,sans-serif; color:#543080;}
.pattern-build-unit {display:flex; flex-wrap:wrap; justify-content:center; gap:14px;}
.pattern-build-unit .pattern-token {width:40px;}
.pattern-board-wrapper .pattern-rule-clue {font:700 14px/1.5 Arial,sans-serif;}
.pattern-board-controls {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin:18px auto 0;}
.pattern-board-controls[hidden] {display:none;}
.pattern-board-count {width:100%; margin:0; color:#543080; font:700 14px/1.4 Arial,sans-serif; text-align:center;}
.pattern-board-controls button {min-height:48px; padding:12px 18px; border:2px solid #74409a; border-radius:12px; font:800 15px/1.3 Arial,sans-serif; cursor:pointer;}
.pattern-board-check {color:#fff; background:#643694;}
.pattern-board-clear {color:#643694; background:#fff;}
.pattern-board-controls button:disabled {opacity:.55; cursor:default;}
.pattern-board-place:focus-visible,.pattern-board-controls button:focus-visible {outline:3px solid #1268c4; outline-offset:3px;}
.pattern-transfer-reference,.pattern-transfer-key {display:grid; gap:12px; width:100%; margin-bottom:20px;}
.pattern-transfer-sequence {display:grid; grid-template-columns:repeat(var(--pattern-columns,3),minmax(0,70px)); justify-content:center; gap:12px;}
.pattern-transfer-sequence .pattern-token {width:40px;}
.pattern-transfer-pairs {display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:10px; width:100%; max-width:600px; margin:auto;}
.pattern-transfer-pair {display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; justify-items:center; gap:6px; padding:10px 6px; border:1px solid #cbb6dc; border-radius:12px; background:#f5edff;}
.pattern-transfer-pair > span:not(.pattern-labeled-piece) {font:800 18px/1 Arial,sans-serif; color:#643694;}
.pattern-transfer-pair .pattern-token {width:32px;}
.pattern-transfer-new {display:block; margin:4px 0 16px;}
@media(max-width:1000px){.game-stage-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:650px){.game-stage-grid {grid-template-columns:1fr;}.game-play-page:has([data-game-stage-context]) .keyboard-prompt strong {padding:18px;}.pattern-labeled-piece {max-width:65px;}}
@media(max-width:700px){
  .game-play-page:has([data-game-stage-context]) .keyboard-choices {grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
  .game-play-page:has([data-game-stage-context]) .keyboard-choices:not(:has(button:nth-child(3))),.game-play-page:has([data-game-stage-context]) .keyboard-choices:has(button:nth-child(4)) {grid-template-columns:repeat(2,minmax(0,1fr));}
  .game-play-page:has([data-game-stage-context]) .keyboard-choices button {min-height:120px; padding:10px 4px;}
  .pattern-sequence.pattern-sequence--repair {grid-template-columns:repeat(var(--pattern-columns,4),minmax(0,1fr)); gap:6px;}
  .pattern-repair-piece {min-height:112px; max-width:100%; padding:8px 2px;}
  .pattern-repair-piece .pattern-token {width:36px;}
  .pattern-repair-piece small {font-size:11px;}
  .pattern-board-grid {grid-template-columns:repeat(var(--pattern-columns,3),minmax(0,1fr)); gap:6px;}
  .pattern-board-place {min-height:112px; padding:8px 2px;}
  .pattern-board-place .pattern-token,.pattern-board-place .pattern-missing {width:36px;}
  .pattern-board-controls button {padding:12px;}
}