:root { color-scheme: light; --ink: #243748; --muted: #566979; --accent: #176a9a; }
* { box-sizing: border-box; }
body { margin: 0; background: #f1f5f9; color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
[hidden] { display: none !important; }
a { color: var(--accent); }
button, select { font: inherit; }
button, select, summary { touch-action: manipulation; }
button, select { min-height: 44px; border: 1px solid #b6c7d3; border-radius: 8px; background: #fff; color: var(--ink); }
button { padding: 8px 14px; font-weight: 650; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); background: #edf5fa; }
button:disabled { opacity: .45; cursor: default; }
button.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
button.primary:hover { background: #12577e; }
:focus-visible { outline: 3px solid #0879bb; outline-offset: 3px; }
.container { width: min(100% - 32px, 960px); margin: auto; padding-bottom: 32px; }
.page-header { margin: 18px 0 24px; text-align: center; }
.home-link { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; font-weight: 650; text-decoration: none; }
h1 { color: var(--accent); font-size: clamp(1.85rem, 5vw, 2.7rem); letter-spacing: -.035em; margin: 8px 0; line-height: 1.2; }
.lead { color: var(--muted); margin: 8px 0; }
.game-card { background: #fff; border: 1px solid #d6e0e8; border-radius: 18px; padding: 24px; box-shadow: 0 8px 30px #243b5308; }
.puzzle-heading { display: flex; gap: 20px; align-items: end; justify-content: space-between; }
.puzzle-picker { width: min(100%, 350px); }
.puzzle-picker label { display: block; font-weight: 650; font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
.puzzle-picker select { display: block; width: 100%; padding: 8px 10px; }
.progress { margin: 0; border-radius: 20px; background: #eef4f8; padding: 9px 15px; font-weight: 700; white-space: nowrap; }
.puzzle-description { color: var(--muted); font-size: .9rem; margin: 12px 0 20px; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; align-items: start; }
.board-panel { min-width: 0; }
.board-help { color: var(--muted); text-align: center; font-size: .85rem; margin: 0 0 10px; }
.board-scroll { overflow: auto; max-height: min(65vh, 620px); padding: 7px; border: 1px solid #ccd9e4; border-radius: 10px; background: #edf3f7; overscroll-behavior: contain; }
.board { --cell: 48px; display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr)); gap: 1px; width: min(100%, calc(var(--cols, 5) * var(--cell))); aspect-ratio: var(--cols, 5) / var(--rows, 3); margin: auto; background: #adbfcf; border: 1px solid #adbfcf; }
.board-cell { position: relative; min-width: 0; min-height: 0; border: 0; border-radius: 0; padding: 0; background: #fff; font-size: .8rem; font-weight: 800; color: #172f40; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.board-cell:hover:not(:disabled) { background: #e4f0f9; }
.board-cell.is-occupied { background: #c1d9ed; background: color-mix(in srgb, var(--piece-color, #c1d9ed) 32%, white); box-shadow: inset 0 0 0 1px #172f4026; }
.board-cell.is-occupied:hover { filter: brightness(1.08); }
.board-cell.is-selected { box-shadow: inset 0 0 0 2px #17394e; }
.board-cell.is-preview { background: #c8e9d5; box-shadow: inset 0 0 0 2px #2b7950; }
.board-cell.is-invalid { background: #f8d5d0; box-shadow: inset 0 0 0 2px #b33730; }
.board-cell.is-hint { outline: 2px dashed #176a9a; outline-offset: -4px; background: #e7f3fb; }
.board-cell:focus-visible { z-index: 1; outline-offset: -3px; }
.piece-panel { position: sticky; top: 12px; min-width: 0; }
.piece-panel h2 { font-size: 1rem; color: var(--muted); margin: 0 0 10px; }
.piece-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.piece-button { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; font-size: .85rem; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.piece-button svg { width: 65px; height: 55px; max-width: 100%; pointer-events: none; }
.piece-button.selected, .piece-button.is-selected { border-color: #176a9a; box-shadow: 0 0 0 2px #176a9a; background: #eaf4fb; }
.piece-button.is-placed { background: #edf3f7; }
.selection { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 72px; }
.selected-preview { width: 64px; height: 50px; flex: 0 0 64px; }
.selected-preview svg { width: 100%; height: 100%; }
#selection-name { margin: 0; font-size: .9rem; font-weight: 650; }
.transform-controls, .board-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.transform-controls button { flex: 1 0 40%; padding: 8px 5px; font-size: .85rem; }
.board-actions { margin: 20px 0 10px; }
.message { min-height: 1.55em; color: var(--accent); text-align: center; font-size: .9rem; margin: 12px 0; }
.result { border: 1px solid #b7d8c4; border-radius: 12px; background: #eaf6ee; text-align: center; padding: 16px; margin: 16px 0; }
.result h2 { margin: 0; color: #20563c; font-size: 1.3rem; }
.result p { margin: 8px 0 14px; }
.completion-status { text-align: center; font-size: .85rem; font-weight: 650; }
.save-status, .keyboard-help { text-align: center; color: var(--muted); font-size: .8rem; margin: 6px 0; }
.guide { max-width: 700px; margin: 32px auto; }
.guide h2 { font-size: 1.3rem; color: var(--accent); margin: 26px 0 10px; }
.guide p, .guide li { color: #435968; }
.guide li { margin: 10px 0; }
details { border-top: 1px solid #cddae5; margin-top: 24px; padding-top: 12px; }
summary { cursor: pointer; color: var(--accent); min-height: 44px; font-weight: 650; }
@media (max-width: 700px) {
  .container { width: min(100% - 20px, 960px); }
  .page-header { margin: 8px 0 16px; }
  .home-link { font-size: .85rem; }
  .lead { font-size: .9rem; }
  .game-card { padding: 14px 10px; border-radius: 12px; }
  .puzzle-heading { gap: 8px; align-items: center; }
  .progress { padding: 8px; font-size: .8rem; }
  .puzzle-picker select { font-size: .9rem; padding: 7px 5px; }
  .puzzle-description { margin: 10px 0 14px; font-size: .82rem; }
  .workspace { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .board-scroll { padding: 4px; max-height: 37vh; max-height: max(145px, 37svh); overscroll-behavior: auto; }
  .board { --cell: 44px; }
  .piece-panel { position: static; }
  .piece-panel h2 { font-size: .9rem; margin-bottom: 6px; }
  .piece-tray { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 2px; }
  .piece-button { padding: 4px 2px; gap: 1px; font-size: .78rem; line-height: 1.2; }
  .piece-button svg { height: 30px; width: 44px; }
  .selection { padding: 4px 0; min-height: 44px; }
  .selected-preview { height: 36px; }
  .transform-controls button { flex: 1 0 20%; font-size: .78rem; min-width: 0; }
  .board-actions { margin-top: 14px; }
  .board-actions button { font-size: .86rem; padding: 8px 12px; }
}
@media (540px <= width <= 700px) and (orientation: landscape) {
  .workspace { grid-template-columns: minmax(0, 1fr) 240px; }
  .board-scroll { max-height: 62svh; }
}