:root {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: #59311e;
  background: #916341 url("assets/oak-table.png") center / cover;
  font-size: 16px;
  font-synthesis: none;
  --cream: #fff2db;
  --caramel: #b76a35;
  --ink: #59311e;
  --hand: "Segoe Print", "Comic Sans MS", cursive;
  --raised: inset 0 2px 1px #fff9, inset 0 -3px 2px #b9844230, 0 4px 0 #76421f55, 0 6px 12px #4d270e25;
}
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 1840px; padding: 18px 28px 26px; }
h2,h3,.table-title strong { font-family: var(--hand); font-weight: 700; color: #5e2d18; }
h2 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); margin: 12px 0; }
h3 { font-size: 1.6rem; margin: 0 0 10px; }
p { line-height: 1.6; }
a { color: #844321; }
button,select,input { font: inherit; color: inherit; }
button, select, .home-choices a, input[type=file] {
  border: 1px solid #d8b288; border-radius: 16px; padding: 12px 16px;
  background: linear-gradient(#fff9ed, #f6e3c5); box-shadow: var(--raised);
}
button { cursor: pointer; font-weight: 700; }
button:hover, .home-choices a:hover { background: linear-gradient(#fff8e7,#efd0a2); border-color: #b7773e; }
button:active, .home-choices a:active { box-shadow: inset 0 2px 4px #67371035; }
button:disabled { opacity: .5; cursor: default; }
button[aria-pressed="true"] { background: linear-gradient(#ecbe7e,#d99448); border-color: #ab622b; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible { outline: 3px solid #713c21; outline-offset: 4px; }
label { font-weight: 700; }
label select { margin-left: 10px; }
.eyebrow { font-size: .67rem; letter-spacing: .17em; font-weight: 700; color: #96623c; }
#home { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: stretch; }
.welcome-panel, .home-stage, .toolbar, .quick-tools, .table-tools, .portable-controls, .completion-panel {
  background: radial-gradient(ellipse at 20% 0, #fffdf5 0, transparent 70%), linear-gradient(120deg,#fff0d9,#f4dfbf);
  border: 2px solid #ffefd8; border-radius: 27px;
  box-shadow: inset 0 0 0 1px #e5c69e, 0 5px 0 #79452165, 0 10px 24px #3e200e35;
}
.welcome-panel { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 28px 30px 36px; position: relative; overflow: hidden; }
.welcome-panel::after { content: ''; position: absolute; inset: 12px; border: 1px dashed #d2ab76; border-radius: 19px; pointer-events: none; }
.home-hero { position: relative; z-index: 1; }
.brand-art { display: block; width: 100%; max-width: 690px; height: auto; margin: 14px auto 26px; filter: drop-shadow(0 7px 3px #9f643326); }
.home-hero p { color: #8d6240; margin: 10px auto; max-width: 34ch; }
.home-hero>.eyebrow { max-width: none; margin-top: 20px; }
.home-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 23px auto 0; width: min(100%,420px); z-index: 1; }
.home-choices a { display: grid; align-content: center; text-decoration: none; font-weight: 700; padding: 17px 12px; }
.home-choices a:first-child { grid-column: 1/-1; font-size: 1.3rem; padding: 18px; }
.home-choices a:first-child::before { content: '\25B6'; font-size: .9rem; margin-bottom: 3px; }
.home-choices a:first-child, #new-puzzle {
  background: linear-gradient(#cc854c,#a9562d); color: #fff9ed; border: 1px solid #a35c30;
  box-shadow: inset 0 2px 1px #f4c39b, inset 0 -3px 1px #914421, 0 4px 0 #773e23, 0 7px 12px #61321435;
  text-shadow: 0 1px 1px #7d3e20;
}
.home-choices a:first-child:hover,#new-puzzle:hover { background: linear-gradient(#bc723e,#944824); }
.home-stage { padding: 23px; min-width: 0; min-height: 650px; }
.home-panel { padding-top: 22px; }
.setup-bar { border-bottom: 1px solid #dbc098; padding-bottom: 18px; }
.setup-bar label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .83rem; }
.setup-bar select { padding: 10px; font-size: .85rem; }
.home-choices a[aria-current="page"] { outline: 2px solid #ba793e; outline-offset: 3px; }
.home-choices a:first-child { display: flex; justify-content: center; align-items: center; gap: 14px; }
.home-choices a:first-child::before { margin: 0; }
.personal-panel .file-picker { margin-top: 26px; padding: 28px 18px; border: 2px dashed #cb9d69; border-radius: 18px; background: #fff6e799; }
.picture-help { border-top: 1px solid #d9bc94; padding-top: 18px; margin-top: 24px; font-size: .82rem; line-height: 1.7; }
.saved-panel>p { font-size: .87rem; }
#home-title, .home-panel h3 { scroll-margin-top: 24px; }

.panel-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.panel-heading h3 { margin: 0; }
.panel-heading p { font-size: .84rem; margin: 4px 0 0; }
.panel-icon { font-size: 38px; color: #9d542c; }
.browse-panel>label { font-size: .82rem; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.browse-panel select { font-size: .84rem; padding: 10px; margin: 0; }
#catalogue { display: grid; gap: 12px; margin: 20px 0 14px; }
.catalogue-card { position: relative; display: grid; grid-template-columns: 142px 1fr; align-items: center; gap: 16px; text-align: left; padding: 7px; border: 2px solid #efd7b8; border-radius: 18px; background: linear-gradient(110deg,#fffcf4,#faecd8); }
.catalogue-card img { width: 142px; height: 91px; object-fit: cover; border-radius: 11px; }
.catalogue-card span { font-size: 1rem; padding-right: 24px; line-height: 1.55; }
.catalogue-card strong { display: block; }
.catalogue-card small { display: block; font-weight: 400; font-size: .8rem; color: #876346; margin-top: 5px; }
.catalogue-card::after { content: '\203A'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 27px; color: #9d6d46; }
.catalogue-card[aria-pressed="true"] { background: linear-gradient(110deg,#fff8eb,#f5d8af); border: 2px solid #d98935; box-shadow: 0 0 0 2px #ffe7bb, var(--raised); }
.catalogue-card[aria-pressed="true"]::after { content: '\2713'; color: #a95d24; font-size: 20px; }
#catalogue-choice { font-size: .8rem; color: #80583c; margin: 12px 0; }
#new-puzzle { width: 100%; padding: 16px; font-size: 1.06rem; }
.note,#personal-help,#portable-help { font-size: .77rem; line-height: 1.65; color: #76553b; }
.browse-panel .note { margin: 14px 0 0; text-align: center; }
.personal-panel h3::before { content: '\25A7  '; color: #ad6a38; }
.saved-panel h3::before { content: '\2661  '; color: #ad6a38; }
.file-picker { display: grid; gap: 10px; font-weight: 700; font-size: .88rem; }
input[type=file] { max-width: 100%; width: 100%; font-size: .82rem; padding: 9px; box-shadow: inset 0 2px 3px #a66d3020; }
input::file-selector-button { color: #65381e; background: #e9c38f; border: 1px solid #cca174; border-radius: 9px; padding: 9px; margin-right: 12px; cursor: pointer; }
#saved-puzzles { display: grid; gap: 12px; margin: 15px 0; }
.saved-puzzle { display: flex; gap: 8px; flex-wrap: wrap; }
.saved-puzzle>button:first-child { flex: 1; text-align: left; line-height: 1.5; }
.saved-puzzle>button:first-child::after { content: 'Continue \203A'; display: block; margin-top: 7px; color: #925529; font-size: .78rem; }
.saved-puzzle>div { flex-basis: 100%; padding: 16px; border: 1px solid #b8794e; border-radius: 12px; }
.saved-puzzle>div button { margin: 5px; }
#storage-message, #portable-message { color: #fff7e6; background: #4d2a178c; border-radius: 10px; padding: 8px 14px; font-size: .8rem; margin: 12px 0 0; line-height: 1.5; }
#storage-message:empty,#portable-message:empty { display: none; }
#game { position: relative; }
.workbench { display: grid; grid-template-columns: minmax(0,1fr) 126px; gap: 16px; position: relative; }
.toolbar { margin-bottom: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 12px 20px; border-radius: 19px; }
.table-title { margin-right: auto; display: grid; gap: 3px; }
.table-title strong { font-size: 1.25rem; }
.toolbar label { font-size: .82rem; }
.toolbar select,.toolbar button { font-size: .85rem; padding: 10px 12px; }
#count { font-weight: 700; font-size: .85rem; border-left: 1px solid #d8b88e; padding-left: 16px; }
.quick-tools { grid-column: 2; grid-row: 1; padding: 12px 9px; border-radius: 22px; align-self: start; }
.quick-tools>button { width: 100%; min-height: 60px; font-size: .82rem; }
#preview::before { content: '\25C9'; display: block; font-size: 22px; margin-bottom: 5px; }
.view-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.view-controls button { padding: 10px 3px; font-size: .74rem; border-radius: 11px; }
#zoom-out { grid-column: 1; grid-row: 1; font-size: 1.3rem; }
#zoom-in { grid-column: 2; grid-row: 1; font-size: 1.3rem; }
#zoom-level { grid-column: 1/-1; text-align: center; font-size: .8rem; padding: 3px; }
#bring-back,#fit,#reset,#pan-mode { grid-column: 1/-1; min-height: 45px; }
#pan-mode[aria-pressed="true"] { background: #668b72; color: white; border-color: #4f7359; }
#table { grid-column: 1; grid-row: 1; display: block; width: 100%; height: calc(100vh - 295px); min-height: 440px; max-height: 1000px;
  background-color: #738d9c;
  background-image: linear-gradient(#6e889bb3,#6e889bb3), url("assets/blue-linen.png");
  background-size: auto, var(--cloth-size, 1000px) auto;
  background-position: center, var(--cloth-x, 0px) var(--cloth-y, 0px);
  border: 15px solid #8b9fad; border-radius: 33px; outline: 2px dashed #e9d3af; outline-offset: -8px;
  box-shadow: inset 0 0 0 2px #45607366,inset 0 0 35px #233e4d55,0 0 0 2px #445e6c,0 6px 0 #3e4f57,0 12px 17px #30190f66;
  touch-action: none; user-select: none; cursor: grab;
}
#table:focus-visible { outline: 3px solid #fff2cf; outline-offset: 4px; }
#table .piece-group { cursor: grab; filter: drop-shadow(0 3px 1px #1b303e88); }
#table path { stroke: #4c3a26; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#table .dragging path { stroke: #ffbd64; stroke-width: 2; }
#table .selection-frame { display: none; stroke: #fff7d9; stroke-width: 3; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
#table .selected .selection-frame { display: block; }
#table.complete .selected path { stroke: #58452c; stroke-width: 1; }
#table .dragging,#table.panning,#table.panning .piece-group { cursor: grabbing; }
#table.pan-mode,#table.pan-mode .piece-group { cursor: all-scroll; }
#table.space-pan,#table.space-pan .piece-group { cursor: grab; }
#table.space-pan.panning,#table.space-pan.panning .piece-group { cursor: grabbing; }
.table-tools { margin-top: 15px; padding: 12px 18px; border-radius: 15px; font-size: .82rem; }
summary { cursor: pointer; font-weight: 700; }
.selection-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.selection-controls button { padding: 9px 12px; font-size: .82rem; }
#help,#keyboard-help { line-height: 1.6; }
#picture { position: absolute; right: 145px; top: 16px; padding: 12px; background: #fff1d5; border: 2px solid #fff5de; border-radius: 16px; box-shadow: 0 8px 30px #36231377; z-index: 3; }
#picture img { display: block; width: min(360px,65vw); border-radius: 6px; }
#status { margin: 0; color: #fff1d5; font: 1rem var(--hand); text-shadow: 0 1px 2px #42200c; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; font-size: .82rem; }
#close-picture { border-radius: 50%; width: 30px; height: 30px; padding: 0; font-size: 22px; box-shadow: none; }
.new-table-options { border-top: 1px solid #d5b68b; padding-top: 13px; margin-top: 14px; font-size: .76rem; }
.new-table-options p { font-size: .73rem; }
.new-table-options select { width: 100%; margin: 7px 0 12px; padding: 9px 3px; font-size: .7rem; }
.new-table-options button { width: 100%; font-size: .73rem; padding: 10px 4px; }
.table-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 20px; }
.completion-panel { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 18px 24px; margin-top: 20px; }
.completion-panel h2 { font-size: 1.55rem; margin: 0 0 6px; }
.completion-panel p { font-size: .84rem; margin: 0; }
.completion-panel button { flex-shrink: 0; }
.toolbar #stop { font-size: .8rem; padding: 12px; }
#stop,#export-copy { justify-self: start; font-size: .86rem; margin: 0; }
#stop { order: 3; }
#export-copy { flex-shrink: 0; }
#save-recovery { padding: 20px; margin: 20px 0; background: #fff0d3; border: 2px solid #a15d34; border-radius: 18px; }
.portable-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; padding: 15px 20px; border-radius: 18px; }
.portable-controls .file-picker { display: flex; align-items: center; gap: 20px; }
.portable-controls input { width: 280px; }
.saved-panel .portable-controls { flex-wrap: wrap; box-shadow: none; border: 1px solid #d8b88e; }
.saved-panel .portable-controls .file-picker { flex-wrap: wrap; }
#portable-help { max-width: 42ch; }
main>.note { color: #fff0d6; text-shadow: 0 1px 2px #47200b; text-align: center; margin: 22px 0 0; font-size: .73rem; }
#new-count:empty { display: none; }
[hidden] { display: none!important; }
@media (min-width:1600px) { #home { grid-template-columns: 1.15fr 1fr; max-width: 1480px; margin: 0 auto; } }
@media (max-width:1050px) {
  body { padding: 16px; }
  #home { gap: 16px; grid-template-columns: 1fr 1fr; }
  .welcome-panel { padding: 22px; }
  .home-stage { padding: 20px; }
  .setup-bar label { display: grid; }
  .setup-bar select { margin-left: 0; }
  .browse-panel>label { display: grid; }
  .catalogue-card { grid-template-columns: 105px 1fr; gap: 10px; }
  .catalogue-card img { width: 105px; height: 78px; }
  .catalogue-card span { font-size: .88rem; }
  .home-choices a { font-size: .87rem; }
  .portable-controls { flex-wrap: wrap; }
}
@media (max-width:760px) {
  body { padding: 12px; }
  #home { grid-template-columns: 1fr; }
  .welcome-panel { padding: 20px 26px; }
  .brand-art { max-width: 430px; margin: 0 auto 14px; }
  .home-choices { margin-top: 16px; }
  .workbench { grid-template-columns: minmax(0,1fr) 88px; gap: 12px; }
  .toolbar { padding: 12px; gap: 12px; }
  .table-title { width: auto; }
  #count { padding-left: 8px; font-size: .73rem; }
  #table { min-height: 420px; height: 65vh; border-width: 10px; }
  .quick-tools { padding: 8px 5px; }
  .quick-tools button,.view-controls button { font-size: .66rem; padding: 8px 3px; }
  #picture { right: 100px; top: 12px; max-width: calc(100% - 110px); }
  #picture img { width: 100%; }
  .table-footer, .completion-panel { flex-direction: column; align-items: stretch; gap: 14px; }
  .home-stage { min-height: 0; }
  .setup-bar label { display: flex; flex-wrap: wrap; }
  #stop { order: 3; width: 100%; }
  .new-table-options select { font-size: .65rem; }
  .preview-heading strong { font-size: .7rem; }

  .portable-controls .file-picker { display: grid; width: 100%; gap: 10px; }
  .portable-controls input { width: 100%; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; } }

/* The playing screen is a tabletop: the mat, rather than the page, takes centre stage. */
body:has(#game:not([hidden])) {
  max-width: none;
  padding: 22px 32px 28px;
  background: radial-gradient(ellipse at 38% 20%, #ffdea327, transparent 65%);
}
body:has(#game:not([hidden])) main { max-width: 1760px; margin: auto; }
#game .toolbar {
  margin: 0 0 20px; min-height: 66px; padding: 9px 12px 9px 22px;
  border: 1px solid #f8dfba; border-radius: 20px;
  background: linear-gradient(110deg,#fff3de,#f1d2a5);
  box-shadow: inset 0 2px 1px #fff9, inset 0 -3px 2px #b9844230, 0 4px 0 #75441f, 0 8px 16px #30190f55;
}
#game .table-title strong { font-size: 1.35rem; }
#game .table-title .eyebrow { font-size: .58rem; letter-spacing: .18em; }
#game .workbench { grid-template-columns: minmax(0,1fr) 112px; gap: 22px; }
#game #table {
  height: calc(100dvh - 208px); min-height: 480px; max-height: none;
  background-image: radial-gradient(ellipse at 35% 25%, #e3edf116, #243e5233), url("assets/blue-linen.png");
  background-size: auto, var(--cloth-size, 1000px) auto;
  border: 13px solid #8b9fa9; border-radius: 36px;
  outline: 2px dashed #e9d9b9; outline-offset: -7px;
  box-shadow: inset 0 0 0 2px #d5ddda80, inset 0 0 24px #243b4b70, 0 0 0 2px #536979, 0 5px 0 #40515b, 0 12px 20px #32190e80;
}
#game .quick-tools { padding: 12px 8px; border-radius: 23px; border-color: #ffe5c2; }
#game .quick-tools button { border-radius: 13px; }
#game .view-controls { gap: 8px; }
#game [data-pan] { min-height: 32px; padding: 5px; }
#game #zoom-level { font-size: .7rem; color: #79543a; }
#game .new-table-options { margin-top: 18px; }
#game #table .piece-group { filter: none; }
#game #table .piece-thickness { stroke: #69472b; stroke-width: 1.3; }
#game #table .piece-bevel { stroke: #fff6d5c4; stroke-width: 2.5; }
#game #table .piece-face { stroke: #49351f9c; stroke-width: .8; }

#game #table .dragging { filter: none; }
#game #table .dragging .piece-face { stroke: #ffdda0; stroke-width: 2; }
#game .table-footer { padding: 17px 4px 0; min-height: 56px; }
#game #status { font-size: .92rem; }
#game #export-copy { padding: 10px 16px; font-size: .76rem; }
#game .table-tools { margin-top: 14px; background: #fff0dbed; }
body:has(#game:not([hidden])) .portable-controls { margin-top: 16px; background: #fff0dbed; }
body:has(#game:not([hidden])) main > .note { margin-top: 14px; }
@media (max-width:1050px) {
  body:has(#game:not([hidden])) { padding: 18px; }
  #game .workbench { gap: 16px; grid-template-columns: minmax(0,1fr) 104px; }
  #game #table { height: calc(100dvh - 200px); min-height: 440px; }
}
@media (max-width:760px) {
  body:has(#game:not([hidden])) { padding: 12px; }
  #game .toolbar { padding: 12px; gap: 10px; }
  #game .table-title { flex: 1; }
  #game .table-title strong { font-size: 1.1rem; }
  #game #count { font-size: .7rem; }
  #game #stop { width: 100%; }
  #game .workbench { grid-template-columns: minmax(0,1fr) 88px; gap: 12px; }
  #game #table { height: 65dvh; min-height: 420px; border-width: 10px; border-radius: 26px; }
  #game #picture { right: 100px; }
}
#game .navigation-options { grid-column: 1 / -1; padding-top: 13px; margin-top: 5px; border-top: 1px solid #d5b68b; font-size: .73rem; }
#game .navigation-options summary { line-height: 1.5; }
#game .navigation-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 12px; }
#game #table:focus-visible { outline: 3px solid #fff2cf; outline-offset: 4px; }

/* Joined pieces share one silhouette and shadow; seams stay fine and flush. */
#game #table .joined .piece-face,
#game #table .joined.selected .piece-face,
#game #table .joined.dragging .piece-face {
  stroke: #49351f55;
  stroke-width: .45;
}
#game #table.complete .selection-frame { display: none; }

/* A small game header, with the brand resting across the edge of the rail. */
#game .toolbar { display: grid; grid-template-columns: 1fr auto 1fr; position: relative; min-height: 82px; margin-top: 18px; }
#game .table-logo { width: 215px; height: 112px; object-fit: contain; margin: -30px 0 -25px; transform: rotate(-3deg); filter: drop-shadow(0 4px 3px #60311466); }
#game .piece-counter { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 25px; border: 1px solid #c9955d; border-radius: 50% / 22%; box-shadow: inset 0 1px #fff9, 0 1px #fff8; background: #fff4dd88; }
#game .piece-counter > span[aria-hidden] { color: #b0783c; font-size: 1.3rem; }
#game #count { padding: 0; border: 0; font: 1.1rem var(--hand); text-align: center; }
#game #stop { justify-self: end; }
body:has(#game:not([hidden])) .portable-controls,
body:has(#game:not([hidden])) main > .note { display: none; }
#leave-dialog { color: var(--ink); background: linear-gradient(120deg,#fff6e7,#f4dfbf); border: 2px solid #fff0d8; border-radius: 25px; padding: 28px; width: min(540px,calc(100vw - 32px)); box-shadow: 0 15px 60px #28160e88; }
#leave-dialog::backdrop { background: #281c135e; }
#leave-dialog h2 { margin-top: 0; font-size: 1.8rem; }
#leave-dialog p { font-size: .9rem; }
.leave-actions { display: grid; gap: 14px; margin-top: 22px; }
#keep-playing { box-shadow: none; background: transparent; }
#exit-status:empty { display: none; }
@media(max-width:760px) {
  #game .toolbar { grid-template-columns: 1fr 1fr; gap: 16px; }
  #game .table-logo { width: 150px; height: 90px; margin: -20px 0; }
  #game .piece-counter { padding: 8px; gap: 8px; }
  #game #count { font-size: .85rem; }
  #game #stop { grid-column: 1/-1; }
}

#leave-dialog #export-copy { justify-self: stretch; font-size: inherit; }
/* The tool rail shares the mat's top and bottom edges. */
#game .quick-tools { align-self: stretch; min-height: 0; contain: size; overflow-y: auto; }
#game .view-controls > .navigation-buttons { grid-column: 1 / -1; padding-top: 6px; }

/* Browse categories first, keeping the picture chooser within the home panel. */
.category-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 26px 0; }
.category-grid button { min-height: 76px; font-size: 1rem; }
#back-categories { padding: 8px 12px; font-size: .8rem; }
#catalogue { max-height: 300px; overflow-y: auto; padding: 4px 6px 8px 4px; overscroll-behavior-y: contain; }

.category-grid button { display: flex; align-items: center; gap: 12px; padding: 8px; text-align: left; min-width: 0; }
.category-grid img { width: 76px; height: 58px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.category-grid span { overflow-wrap: anywhere; }
.category-grid .your-pictures-tile { grid-column: 1 / -1; justify-content: center; }
@media(max-width:1100px) { .category-grid img { width: 52px; height: 52px; } .category-grid { gap: 10px; } }

/* Reserve the back control in the existing heading instead of adding a row. */
#browse-panel .panel-heading > div { flex: 1; min-width: 0; }
#back-categories { flex-shrink: 0; margin-left: auto; }
#browse-panel:has(#category-puzzles[hidden]) #back-categories { visibility: hidden; }
@media(max-width:1100px) {
  #browse-panel .panel-heading { gap: 10px; flex-wrap: wrap; }
  #browse-panel .panel-heading p { max-width: 27ch; }
  #back-categories { font-size: .72rem; padding: 8px; }
}

@media(max-width:1100px) { .home-stage { min-height: 700px; } #catalogue { max-height: 200px; } }

.rotation-setting { margin-top: 12px; }

.rotation-switch { position: relative; display: inline-flex; flex-shrink: 0; }
.rotation-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch-track { display: block; width: 78px; height: 34px; border-radius: 999px; background: #d7bea0; border: 1px solid #b28a62; box-shadow: inset 0 2px 3px #68432333; position: relative; }
.switch-track::before { content: ''; position: absolute; width: 26px; height: 26px; top: 3px; left: 3px; border-radius: 50%; background: #fff6e5; box-shadow: 0 1px 3px #68432366; }
.switch-track::after { content: 'Off'; position: absolute; right: 12px; top: 7px; font-size: .75rem; color: #59311e; }
.rotation-switch input:checked + .switch-track { background: #66876b; border-color: #4c6a51; }
.rotation-switch input:checked + .switch-track::before { left: 47px; }
.rotation-switch input:checked + .switch-track::after { content: 'On'; left: 12px; right: auto; color: #fff; }
.rotation-switch input:focus-visible + .switch-track { outline: 3px solid #925529; outline-offset: 3px; }


@media(max-width:1100px) {
  .category-grid button { min-height: 64px; }
  .category-grid img { height: 44px; width: 48px; }
}

/* Both difficulty modes occupy the same settings row, keeping browsing still. */
.rotation-row { display: grid; align-items: center; min-height: 34px; margin-top: 12px; }
.rotation-row > * { grid-area: 1 / 1; }
.setup-bar .rotation-setting { display: flex; flex-wrap: nowrap; margin: 0; }
.upright-note { margin: 0; font-size: .83rem; color: #76553b; }
.rotation-row:has(#rotation-setting:not([hidden])) .upright-note { visibility: hidden; }

@media(min-width:1101px) { .home-stage { min-height: 720px; } }

/* A quiet family signature beneath the puzzle collection. */
.home-stage { display: flex; flex-direction: column; }
.project-ident { margin: auto 0 0; padding-top: 10px; text-align: center; font-size: .62rem; letter-spacing: .13em; color: #876346; line-height: 1.5; }
.project-ident span { display: inline-block; margin-left: 4px; font-size: .85rem; letter-spacing: 0; vertical-align: middle; }

@media(min-width:1101px) { #catalogue { max-height: 270px; } }

.studio-ident { display: block; font: 1rem var(--hand); letter-spacing: 0; color: #795034; margin-bottom: 2px; }
.project-ident .forge-ident { margin-left: 0; font-size: .62rem; letter-spacing: .13em; }
@media(max-width:1100px) { .category-grid { margin-top: 16px; margin-bottom: 16px; gap: 8px; } .project-ident { padding-top: 4px; } }

@media(max-width:1100px) { #catalogue { max-height: 180px; } }

.home-hero .panel-motto { font: 1.05rem var(--hand); color: #795034; margin: -12px auto 18px; }

/* Completion floats above the finished puzzle without changing the table layout. */
dialog.completion-panel { color: var(--ink); background: linear-gradient(120deg,#fff6e7,#f4dfbf); border: 2px solid #fff0d8; border-radius: 25px; padding: 28px; width: min(560px,calc(100vw - 32px)); margin: auto; box-shadow: 0 15px 60px #28160e88; }
dialog.completion-panel:not([open]) { display: none; }
dialog.completion-panel[open] { display: block; }
dialog.completion-panel::backdrop { background: #281c1338; }
.completion-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.completion-actions button { flex: 1 1 190px; }

#table-loading { grid-column: 1; grid-row: 1; align-self: center; justify-self: center; position: relative; z-index: 10; padding: 18px 28px; border-radius: 16px; background: #fff5e4; color: #5e2d18; box-shadow: 0 5px 24px #30190f55; pointer-events: none; }

/* Keep collection tools compact as more pictures are added. */
.category-grid .category-count { margin-left: auto; flex-shrink: 0; font-size: .68rem; color: #795034; font-weight: 400; }
.puzzle-search { display: grid; gap: 6px; margin-top: 16px; font-size: .8rem; }
.puzzle-search input { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #b28a62; border-radius: 10px; background: #fffaf1; color: var(--ink); font: inherit; }
.puzzle-search input:focus-visible { outline: 3px solid #925529; outline-offset: 2px; }
#puzzle-results { margin: 8px 0; }
@media(max-width:1100px) { .category-grid button { flex-wrap: wrap; } .category-grid .category-count { margin-left: 0; } }

@media(min-width:1101px) { #catalogue { max-height: 220px; } }