.puzzle-stage { display: none; flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; padding: clamp(12px, 2vw, 26px); color: #112d50; background: #f5eee2; border: 1px solid rgba(17,45,80,.16); border-radius: 15px; }
body.is-puzzle .puzzle-stage { display: grid; grid-template-columns: minmax(290px, 1fr) minmax(300px, 1fr); align-content: start; gap: 12px; }
body.is-puzzle .flashcard { display: none; }
.puzzle-heading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(17,45,80,.16); }
.puzzle-heading h2 { margin: 2px 0; font: 700 clamp(1.5rem, 3vw, 2.3rem)/1.1 Georgia, serif; }
.puzzle-eyebrow { margin: 0; color: #5e7187; font-size: .73rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.puzzle-meaning { margin: 5px 0 0; color: #465b73; font-size: .96rem; }
.puzzle-study-reading { display: inline-block; margin: 7px 0 0; padding: 4px 9px; border-radius: 6px; background: #f1dbc9; color: #873d34; font-size: .87rem; font-weight: 800; }
.puzzle-study-reading[hidden] { display: none; }
.puzzle-streak { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.puzzle-streak span { display: grid; place-items: center; width: 35px; height: 35px; border: 2px solid #9aabb8; border-radius: 50%; color: #6b7d8e; font-weight: 800; }
.puzzle-streak span.is-earned { color: #fffaf2; background: #b34e42; border-color: #b34e42; }
.puzzle-layout { display: contents; }
.puzzle-board-card, .puzzle-reading-card { min-width: 0; padding: clamp(14px, 2vw, 24px); background: #fffaf2; border: 1px solid rgba(17,45,80,.18); border-radius: 14px; box-shadow: 0 10px 28px rgba(17,45,80,.06); }
.puzzle-board-card { grid-column: 1; grid-row: 2 / span 2; }
.puzzle-reading-card { grid-column: 2; grid-row: 2; }
.puzzle-step { margin: 0 0 12px; color: #112d50; font-family: Georgia, serif; font-size: clamp(1rem, 1.8vw, 1.35rem); font-weight: 700; }
.puzzle-board-wrap { display: grid; place-items: center; width: min(100%, 265px); aspect-ratio: 1; margin: auto; border: 2px solid #d7c39d; border-radius: 9px; background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(174,143,100,.16) 50%, transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), rgba(174,143,100,.16) 50%, transparent calc(50% + .5px)), #fffdf8; }
#puzzle-board { width: 92%; height: 92%; overflow: visible; }
#puzzle-board path, .puzzle-piece-shape path { fill: none; stroke: #142f52; stroke-width: 5.2; stroke-linecap: round; stroke-linejoin: round; }
#puzzle-board .is-preview-stroke { stroke: #142f52; }
#puzzle-board .puzzle-slot-strokes { cursor: pointer; }
#puzzle-board .puzzle-slot-strokes path { stroke: #cbd2d2; stroke-width: 7; pointer-events: stroke; transition: stroke .2s ease; }
#puzzle-board .puzzle-slot-strokes:hover path { stroke: #9faeae; }
#puzzle-board .puzzle-slot-strokes.is-filled { cursor: default; }
#puzzle-board .puzzle-slot-strokes.is-filled path { stroke: #142f52; stroke-width: 5.2; }
.puzzle-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 12px; }
.puzzle-slot-button { min-height: 38px; padding: 7px 12px; border: 1px solid #b9c7cb; border-radius: 7px; background: #fff; color: #112d50; cursor: pointer; font: 700 .75rem/1.2 inherit; }
.puzzle-slot-button:hover:not(:disabled), .puzzle-slot-button:focus-visible { border-color: #b34e42; outline: 2px solid rgba(179,78,66,.2); }
.puzzle-slot-button:disabled { opacity: .7; cursor: default; }
.puzzle-slot-button:disabled:not(:empty) { background: #e9f1eb; }
.puzzle-reading-card { display: flex; flex-direction: column; }
.puzzle-reading-kind { margin: 2px 0 17px; min-height: 1.5em; color: #a4463b; font-weight: 800; }
#puzzle-reading-form { display: grid; gap: 8px; }
#puzzle-reading-form label { color: #52677c; font-size: .75rem; font-weight: 800; letter-spacing: .04em; }
#puzzle-reading-input { width: 100%; min-height: 52px; padding: 11px 14px; border: 1px solid #899ca9; border-radius: 8px; background: #fff; color: #112d50; font: 700 1.1rem/1.2 inherit; }
#puzzle-reading-input:focus { outline: 3px solid rgba(179,78,66,.24); border-color: #b34e42; }
#puzzle-reading-input:disabled { background: #e9e7e3; }
#puzzle-reading-check { min-height: 46px; margin-top: 4px; border: 0; border-radius: 8px; background: #b34e42; color: #fffaf2; cursor: pointer; font-weight: 800; }
#puzzle-reading-check:disabled { background: #aeb4ba; cursor: default; }
.puzzle-feedback { min-height: 3em; margin: auto 0 0; padding-top: 18px; color: #50677b; font-size: .86rem; line-height: 1.45; }
.puzzle-feedback.is-wrong { color: #a0332d; }
.puzzle-feedback.is-right { color: #246944; }
.puzzle-tray-wrap { grid-column: 2; grid-row: 3; padding: 12px; background: #fffaf2; border: 1px solid rgba(17,45,80,.18); border-radius: 14px; }
.puzzle-tray-wrap .puzzle-step { margin: 0 0 10px; font-size: 1rem; }
.puzzle-tray { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 10px; }
.puzzle-piece { display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(76px, 10vw, 112px); min-height: 96px; padding: 7px; border: 2px solid #d4c7b6; border-radius: 9px; background: #fffdf8; color: #112d50; box-shadow: 0 5px 12px rgba(17,45,80,.07); cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.puzzle-piece:hover:not(:disabled) { transform: translateY(-3px); border-color: #b34e42; }
.puzzle-piece:focus-visible { outline: 3px solid #b34e42; outline-offset: 2px; }
.puzzle-piece.is-selected { border-color: #b34e42; box-shadow: 0 0 0 3px rgba(179,78,66,.18); }
.puzzle-piece.is-placed { opacity: .4; cursor: default; }
.puzzle-piece-shape { width: 70px; height: 70px; max-width: 100%; }
.puzzle-piece small { color: #65778b; font-size: .7rem; font-weight: 800; }
body.is-puzzle-study .puzzle-piece { width: clamp(110px, 12vw, 155px); }
body.is-puzzle-study .puzzle-piece small { text-align: center; }
.puzzle-stage.is-preview .puzzle-tray { opacity: .15; filter: blur(7px); pointer-events: none; }
.puzzle-stage.is-preview .puzzle-slots { opacity: .3; }
@media (min-width: 701px) and (max-height: 760px) {
  .puzzle-stage { padding: 10px 14px; }
  .puzzle-heading h2 { font-size: 1.65rem; }
  .puzzle-heading { padding-bottom: 7px; }
  .puzzle-board-card, .puzzle-reading-card { padding: 11px 14px; }
  .puzzle-board-wrap { width: min(100%, 205px); }
  .puzzle-step { margin-bottom: 6px; font-size: 1rem; }
  .puzzle-reading-kind { margin-bottom: 7px; }
  #puzzle-reading-input { min-height: 39px; padding: 6px 10px; }
  #puzzle-reading-check { min-height: 37px; margin-top: 0; }
  .puzzle-feedback { min-height: 2em; padding-top: 5px; }
  .puzzle-tray-wrap { padding: 8px; }
  .puzzle-tray-wrap .puzzle-step { margin-bottom: 4px; }
  .puzzle-piece { width: 72px; min-height: 72px; padding: 3px; }
  .puzzle-piece-shape { width: 52px; height: 52px; }
}
@media (max-width: 700px) {
  .puzzle-stage { padding: 10px; }
  body.is-puzzle .puzzle-stage { display: flex; flex-direction: column; }
  .puzzle-layout { display: grid; grid-template-columns: 1fr; flex: 0 0 auto; }
  .puzzle-board-card, .puzzle-reading-card, .puzzle-tray-wrap { grid-column: auto; grid-row: auto; }
  .puzzle-tray-wrap { order: 2; }
  .puzzle-reading-card { order: 3; }
  .puzzle-board-card, .puzzle-reading-card { padding: 12px; }
  .puzzle-board-wrap { width: min(100%, 240px); }
  .puzzle-heading h2 { font-size: 1.5rem; }
  .puzzle-streak span { width: 29px; height: 29px; }
  .puzzle-piece { width: 76px; min-height: 82px; }
  .puzzle-piece-shape { width: 58px; height: 58px; }
}