.jigsaw-game {
  --jg-paper: #f4e7c6;
  --jg-ink: #293f43;
  --jg-teal: #3c645f;
  --jg-gold: #efc77d;
  --jg-wood: #ba9360;
  color: var(--jg-ink);
  font-family: Georgia, "Times New Roman", serif;
}
.jg-shell { width: min(100%, 1280px); margin: 0 auto; padding: 12px 16px 10px; border: 3px solid var(--jg-wood); background: var(--jg-paper); box-shadow: inset 0 0 0 2px #fff5dc, 0 4px 0 #806244; }
.jg-heading, .jg-toolbar, .jg-actions, .jg-tray-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jg-heading h2 { margin: 2px 0 0; color: var(--jg-ink); font: 700 clamp(1.3rem, 2.5vw, 1.75rem)/1.1 Georgia, serif; }
.jg-kicker { margin: 0; color: var(--jg-teal); font: 700 .7rem/1.2 system-ui, sans-serif; letter-spacing: .12em; }
.jg-stamp { color: #76552b; font: 700 .75rem system-ui, sans-serif; letter-spacing: .08em; white-space: nowrap; }
.jg-toolbar { flex-wrap: wrap; margin-top: 9px; padding: 6px 8px; border-block: 2px dashed #c6ad7d; color: #395854; font: .85rem/1.3 system-ui, sans-serif; }
.jg-reward { font-weight: 700; }
.jg-actions { justify-content: flex-end; }
.jg-actions label { display: flex; align-items: center; gap: 7px; }
.jg-actions button, .jg-actions select { min-height: 34px; padding: 5px 10px; border: 2px solid var(--jg-teal); border-radius: 2px; background: #fff3d5; color: var(--jg-ink); font: 700 .85rem/1.2 system-ui, sans-serif; cursor: pointer; box-shadow: none; }
.jg-actions button:hover:not(:disabled), .jg-actions button:focus-visible, .jg-actions select:focus-visible { outline: 3px solid #bf7a38; outline-offset: 2px; background: #f7dda5; }
.jg-actions button:disabled, .jg-actions select:disabled { cursor: default; opacity: .65; }
.jg-instructions { margin: 7px 0; color: #425b58; font: .88rem/1.35 system-ui, sans-serif; text-align: center; }
.jg-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); align-items: center; gap: 18px; }
.jg-board-wrap { display: grid; place-items: center; min-width: 0; }
.jg-board { display: grid; grid-template-columns: repeat(var(--jg-columns), minmax(0, 1fr)); grid-template-rows: repeat(var(--jg-rows), minmax(0, 1fr)); width: min(100%, calc(58vh * 20 / 13), 860px); height: auto; max-width: 100%; aspect-ratio: 20 / 13; overflow: visible; place-self: center; border: 5px solid #805f3c; background: #d9c99e; box-shadow: inset 0 0 0 2px #fff0c8, 0 4px 0 #684c32; }
.jg-cell { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; color: #967b4d; box-shadow: none; cursor: crosshair; touch-action: none; }
.jg-empty { display: block; width: 88%; height: 88%; border: 1px dashed #a28c63; background: rgb(247 235 207 / 54%); }
.jg-cell:hover:not(:disabled) .jg-empty, .jg-cell.is-destination .jg-empty { border-color: #956323; background: #f8eac7; }
.jg-cell.is-placed { z-index: 1; border-color: transparent; background: transparent; cursor: pointer; }
.jg-cell:focus-visible { z-index: 3; outline: 3px solid #293f43; outline-offset: -4px; }
.jg-cell:disabled { opacity: 1; }
.jg-cell svg, .jg-piece svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.jg-cell svg { position: absolute; inset: 0; }
.jg-side { display: grid; grid-template-columns: 1fr; align-items: start; gap: 8px; min-width: 0; }
.jg-preview { width: 100%; max-width: 200px; margin: 0 auto; padding: 5px; border: 3px solid #ba9360; background: #fff1cb; box-shadow: 0 3px 0 #806244; }
.jg-preview img { display: block; width: 100%; aspect-ratio: 20 / 13; object-fit: cover; }
.jg-preview figcaption { margin-top: 3px; color: #395854; font: 700 .75rem/1.3 system-ui, sans-serif; text-align: center; }
.jg-tray-heading { margin: 0; color: var(--jg-ink); font: 700 .88rem/1.2 system-ui, sans-serif; }
.jg-tray-heading h3 { margin: 0; color: inherit; font: inherit; }
.jg-tray { display: grid; grid-template-columns: repeat(var(--jg-tray-columns), minmax(0, 1fr)); justify-items: center; align-content: start; gap: 5px; min-height: 56px; padding: 8px; border: 2px dashed #b99c6d; background: #eee0bd; }
.jg-piece { position: relative; z-index: 1; width: min(100%, 58px); aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: grab; touch-action: none; }
.jg-piece:hover:not(:disabled) { z-index: 2; filter: brightness(1.08); transform: translateY(-2px); }
.jg-piece.is-selected { z-index: 4; filter: drop-shadow(0 0 4px #c28c2e); }
.jg-piece:focus-visible { z-index: 4; outline: 3px solid #293f43; outline-offset: 2px; }
.jg-piece:active { cursor: grabbing; }
.jg-piece:disabled { opacity: 1; cursor: default; }
.jg-best { margin: 0; color: #526660; font: .78rem/1.3 system-ui, sans-serif; text-align: center; }
.jg-status { min-height: 1.35em; margin: 8px 0 0; color: #395854; text-align: center; font: .88rem/1.35 system-ui, sans-serif; }
.jg-status.is-success { color: #286344; font-weight: 700; }

@media (max-width: 940px) {
  .jg-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 12px; }
  .jg-tray { gap: 3px; padding: 6px; }
  .jg-piece { width: min(100%, 48px); }
}
@media (max-width: 640px) {
  .jg-shell { padding: 10px; }
  .jg-heading, .jg-toolbar { align-items: flex-start; flex-direction: column; }
  .jg-actions { flex-wrap: wrap; justify-content: flex-start; }
  .jg-layout { grid-template-columns: 1fr; gap: 14px; }
  .jg-board { width: min(100%, 460px); height: auto; max-height: 44vh; }
  .jg-side { grid-template-columns: 125px minmax(0, 1fr); gap: 6px 8px; align-items: center; }
  .jg-preview { grid-column: 1; grid-row: 1 / 3; width: 125px; }
  .jg-tray-heading { grid-column: 2; grid-row: 1; align-self: end; }
  .jg-tray { grid-column: 2; grid-row: 2; align-self: start; }
  .jg-best { grid-column: 1 / 3; grid-row: 3; }
  .jg-piece { width: min(100%, 40px); }
}
@media (max-height: 760px) and (min-width: 641px) {
  .jg-heading { display: none; }
  .jg-shell { padding: 5px 12px 4px; }
  .jg-toolbar { margin-top: 4px; padding-block: 4px; }
  .jg-instructions { margin: 3px 0; font-size: .82rem; }
  .jg-layout { gap: 10px; }
  .jg-board { width: min(100%, calc(56vh * 20 / 13)); height: auto; }
  .jg-preview { max-width: 145px; }
  .jg-piece { width: min(100%, 46px); }
  .jg-tray { gap: 2px; padding: 4px; }
  .jg-status { min-height: 1.2em; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .jigsaw-game *, .jigsaw-game *::before, .jigsaw-game *::after { scroll-behavior: auto; transition: none; animation: none; } }