:root{color-scheme:dark;--bg:#10182a;--panel:#1b2740;--panel2:#293958;--text:#f5ecd9;--muted:#b9bfd0;--line:#354461;--accent:#f0bc5c;--accentText:#15203c;--focus:#f5bd5d}html[data-theme="light"]{color-scheme:light;--bg:#fffaf0;--panel:#fff;--panel2:#f4e7c9;--text:#23304c;--muted:#6d7180;--line:#e7dcc7;--accent:#d99a32;--accentText:#15203c;--focus:#886312}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}.shell{max-width:1160px;margin:auto;padding:0 20px}.topbar{min-height:68px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:16px}.brand{font-weight:750;color:var(--text);text-decoration:none}.topbar nav{display:flex;align-items:center;gap:14px}.topbar a:not(.brand),.back,footer a,.story-link a{color:var(--accent)}button,select{font:inherit;font-weight:650;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);padding:10px 14px;cursor:pointer}button:hover{filter:brightness(1.1)}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.back{display:inline-block;margin-top:24px;text-decoration:none}.eyebrow,.toolbar>label,.time-box>span{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}.eyebrow{margin:20px 0 4px}h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;margin:8px 0 12px}.intro{color:var(--muted);max-width:820px;margin:0 0 24px}.game{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:clamp(14px,3vw,26px);box-shadow:0 18px 50px #0002}.toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px}.level-label{display:grid;gap:4px}.level-label select{padding:9px 12px}.time-box{display:grid;gap:1px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:7px 12px;min-width:100px}.time-box strong{font-size:1.2rem;line-height:1.2;font-variant-numeric:tabular-nums}.best-box{min-width:126px}.toolbar-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.primary{background:var(--accent);color:var(--accentText);border-color:transparent}.instructions{font-size:.9rem;color:var(--muted);margin:12px 0}.puzzle-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}.board-column h2,.tray-column h2{font-size:1rem;margin:12px 0 8px}.board{--n:3;position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);width:100%;max-width:760px;aspect-ratio:1672/941;margin:auto;border-radius:12px;background-color:#0b111a;border:1px solid var(--line);box-shadow:inset 0 0 28px #0007}.board::before{content:"";position:absolute;inset:0;background-image:var(--guide-image,url('/assets/miracles/04-a.webp'));background-size:100% 100%;opacity:.17;z-index:0;border-radius:inherit;transition:opacity .2s}.board.hide-guide::before{opacity:0}.slot{position:relative;z-index:1;min-width:0;min-height:0;border:1px dashed #ffffff65}.slot.last-column{border-right:0}.slot.last-row{border-bottom:0}.slot.filled{border-color:transparent}.slot-number{position:absolute;left:4px;top:3px;z-index:0;color:#fff9;background:#111a;border-radius:20px;font-size:.65rem;padding:0 5px}.piece{position:relative;z-index:1;display:block;width:100%;aspect-ratio:var(--piece-ratio,120.3/76.5);margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow:visible;touch-action:none;cursor:grab;box-shadow:none}.piece svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 2px #0008)}.piece path.outline{vector-effect:non-scaling-stroke}.piece.selected{z-index:3}.piece.selected svg{filter:drop-shadow(0 0 5px #ffd166) drop-shadow(0 2px 2px #0008);transform:scale(1.035)}.board.has-selection .slot{background:#83d4b315;cursor:pointer}.piece.dragging{z-index:10;cursor:grabbing;opacity:.86}.slot>.piece.placed{position:absolute;left:var(--piece-left,-10.15%);top:-18%;width:var(--piece-width,120.3%);height:136%;max-width:none;aspect-ratio:var(--piece-ratio,120.3/76.5);z-index:2;cursor:default;filter:drop-shadow(0 1px 2px #0008)}.tray{--n:3;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(8px,1.4vw,16px);width:100%;max-width:900px;margin:auto;padding:8px 4px 14px}.tray .piece{min-width:0;align-self:center}.tray .piece:hover{filter:drop-shadow(0 0 4px #83d4b377);z-index:2}.tray .piece svg{filter:drop-shadow(0 2px 3px #0009)}.remaining{font-weight:500;color:var(--muted);font-size:.86rem}.message{min-height:1.6em;margin:10px 0 0;text-align:center;color:var(--accent);font-size:1.2rem;font-weight:750}.full-preview{max-width:760px;margin:20px auto 0}.full-preview img{width:100%;display:block;border-radius:12px}.full-preview figcaption{color:var(--muted);text-align:center;margin-top:5px}.story-link{margin:20px 0 36px}footer{border-top:1px solid var(--line);padding:18px 0 28px;color:var(--muted)}.print-sheet{display:none}
@media(max-width:720px){.shell{padding:0 14px}.topbar{min-height:62px}.topbar nav{gap:8px}.topbar nav button,.topbar nav a{font-size:.85rem}.toolbar{align-items:stretch;gap:8px}.level-label{min-width:45%;font-size:.75rem}.time-box{flex:1;min-width:90px;padding:6px 9px}.best-box{min-width:110px}.toolbar-actions{margin-left:0;width:100%;justify-content:flex-start}.toolbar-actions button{flex:1;font-size:.86rem;padding:9px 8px}.puzzle-layout{gap:14px}.board-column h2,.tray-column h2{font-size:.95rem}.tray{grid-template-columns:repeat(var(--tray-columns,var(--n)),minmax(0,1fr));gap:9px 7px}.piece{aspect-ratio:var(--piece-ratio,120.3/76.5)}.slot>.piece.placed{left:var(--piece-left,-10.15%);top:-18%;width:var(--piece-width,120.3%);height:136%}}
@media print{@page{size:A4 landscape;margin:8mm}body{background:#fff;color:#111;font-size:10pt}.shell{display:none!important}.print-sheet{display:block!important;padding:0}.print-sheet h1{font-size:17pt;margin:0 0 2mm}.print-sheet>p{margin:0 0 3mm}.print-layout{display:grid;grid-template-columns:minmax(0,3.7fr) minmax(35mm,1fr);gap:6mm;align-items:center}.print-grid{--n:3;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);width:100%;aspect-ratio:1672/941;overflow:visible}.print-piece{position:relative;min-width:0;min-height:0;aspect-ratio:var(--piece-ratio,100/56.28);overflow:visible}.print-piece svg{display:block;width:var(--piece-width,120.3%);height:136%;position:absolute;left:var(--piece-left,-10.15%);top:-18%;overflow:visible}.print-piece path.outline{stroke:#151515!important;stroke-width:1.4;vector-effect:non-scaling-stroke}.print-reference{width:100%;border:1px solid #333;border-radius:2mm}.print-credit{font-size:9pt;margin-top:3mm!important}.print-grid>*{break-inside:avoid}}

/* Make the full image preview obvious and keep the mobile board in view while browsing pieces. */
.preview-dialog{position:fixed;inset:0;max-width:min(94vw,1000px);max-height:92vh;margin:auto;padding:clamp(14px,3vw,28px);border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--text);box-shadow:0 24px 80px #0009}.preview-dialog::backdrop{background:#050912d9}.preview-dialog img{display:block;max-width:100%;max-height:78vh;object-fit:contain;margin:auto;border-radius:10px}.preview-dialog p{text-align:center;color:var(--muted);margin:10px 0 0}.close-preview{position:absolute;right:8px;top:8px;width:42px;height:42px;padding:0;border-radius:50%;font-size:1.7rem;line-height:1}
.celebration{position:fixed;inset:0;z-index:100;overflow:hidden;pointer-events:none;display:none}.celebration.active{display:block}.celebration i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--spark);box-shadow:0 0 12px var(--spark);animation:firework 1.5s cubic-bezier(.12,.54,.2,1) both}.celebration i:nth-child(3n){width:5px;height:5px}.celebration i:nth-child(3n + 1){border-radius:1px}@keyframes firework{0%{transform:translate(0,0) scale(.3);opacity:1}78%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.05);opacity:0}}
@media(max-width:720px){.board-column{position:sticky;top:8px;z-index:5;padding:0 0 8px;background:var(--panel);border-radius:12px}.tray{max-height:min(44vh,360px);overflow-y:auto;overscroll-behavior:contain;align-content:start;scrollbar-gutter:stable}}
@media(prefers-reduced-motion:reduce){.celebration{display:none!important}}
@media print{@page{size:A4 landscape;margin:5mm}.print-sheet h1{font-size:16pt;margin:0}.print-head{display:grid;grid-template-columns:minmax(0,1fr) 42mm;gap:5mm;align-items:center;margin-bottom:3mm}.print-reference{display:block;width:42mm;height:auto;border:1px solid #333;border-radius:1mm}.print-layout{display:block}.print-grid{width:100%;max-width:none;aspect-ratio:1672/941}.print-credit{margin-top:2mm!important;font-size:8.5pt}.print-head>div p{margin:1mm 0 0}}

/* Easier piece navigation and a more visible finish celebration. */
.piece-nav{display:flex;gap:10px;justify-content:center;margin:8px 0 4px}.piece-nav button{min-width:min(44%,190px);padding:9px 14px;background:var(--panel2)}.piece-nav button span[aria-hidden]{font-size:1.2em;line-height:0;vertical-align:-.04em}.tray .piece{touch-action:none}.floating-piece{will-change:transform;filter:drop-shadow(0 9px 14px #000b)!important;cursor:grabbing!important}
.celebration i{width:16px;height:16px;box-shadow:0 0 22px 4px var(--spark),0 0 40px var(--spark);animation-duration:2.8s}.celebration i:nth-child(4n){width:11px;height:11px}.celebration i:nth-child(4n + 1){width:14px;height:14px}@keyframes firework{0%{transform:translate(0,0) scale(.15);opacity:1}82%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.12);opacity:0}}
@media(min-width:721px){.piece-nav{display:none}}
@media(max-width:720px){.piece-nav{display:flex}}

/* Button navigation and guarded local record management. */
.index-nav{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.index-nav button,.story-link button,.back-button{background:var(--panel2)}.story-link{margin:16px 0 24px}.record-tools{margin:26px 0 12px;border:1px solid var(--line);border-radius:12px;padding:12px}.record-tools summary{cursor:pointer;font-weight:700;color:var(--muted)}.record-tools button{margin-top:12px;background:#5c2730;border-color:#a8515e;color:#fff}.icon-label{display:inline-flex;align-items:center;gap:8px}.icon-label svg{width:18px;height:18px;flex:none}

@media print{.activity-navigation{display:none!important}}