@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
*{box-sizing:border-box}body{margin:0;background:#f6f2e9;color:#294a3d;font:15px 'DM Sans',system-ui}main{max-width:1160px;margin:auto;padding:36px 28px}header{text-align:center;margin-bottom:30px}header span{font-size:11px;letter-spacing:3px;font-weight:700}h1{font:500 clamp(32px,5vw,58px)/1.05 'Playfair Display',Georgia;margin:18px 0}h1 i{color:#af704c}header p{line-height:1.6;color:#758073}h2{font:500 23px 'Playfair Display',Georgia}.play{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;align-items:start}.board-panel,.tray-panel{background:#fffdf6;border:1px solid #e4ddcd;border-radius:18px;padding:20px;box-shadow:0 8px 30px #493e2310}.progress{display:flex;gap:16px;align-items:center;margin-bottom:16px;min-height:35px}.progress b{background:#e6eddf;padding:8px;border-radius:9px;white-space:nowrap}#status{font-size:13px}#board{position:relative;aspect-ratio:12/10;background-color:#e9e4d8;background-image:linear-gradient(to right,#cfc6b377 1px,transparent 1px),linear-gradient(to bottom,#cfc6b377 1px,transparent 1px);background-size:8.333333% 10%;border:7px solid #b9a27a;border-radius:5px;box-shadow:inset 0 0 12px #574a2930;touch-action:none}.piece{position:absolute;touch-action:none;cursor:grab;z-index:2;background:none;border:0;padding:0}.piece.selected{z-index:3}.cell{position:absolute;border:3px solid var(--frame);border-radius:3px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px #fff8,0 1px 2px #0003;pointer-events:none}.selected .cell{outline:2px solid #e3ac41;outline-offset:-2px}.tools{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}button,select{font:inherit;color:inherit;border:1px solid #d4d9c9;background:#f3f5eb;border-radius:8px;padding:10px;cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #b47744;outline-offset:2px}.tools button:first-child{background:#345e49;color:white;border-color:#345e49}.tray-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.tray-heading h2{margin:0 0 16px}.tray-heading span{font-size:12px;white-space:nowrap}#tray{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:500px;overflow:auto;padding:3px}.slot{height:92px;background:#f1ede2;border-radius:8px;position:relative;display:flex;align-items:center;justify-content:center}.slot .piece{position:relative;flex-shrink:0}.slot small{position:absolute;bottom:2px;right:5px;font-size:9px;color:#7a8171}.note,footer{font-size:12px;text-align:center;color:#818573}.ghost{position:fixed!important;z-index:100;pointer-events:none;opacity:.88}.target{position:absolute;pointer-events:none;border:2px solid #3d8757;background:#94cba877;z-index:4}.target.bad{background:#cf635c77;border-color:#b7473f}#finish{text-align:center;margin-top:28px;padding:30px;background:#e9eedf;border-radius:18px}#finish[hidden]{display:none}.cheers{font-size:48px}select{display:block;margin:12px auto;min-width:220px}footer{margin-top:30px}.confetti{position:fixed;top:-20px;z-index:150;pointer-events:none;animation:fall 2.6s forwards}@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}@media(max-width:760px){main{padding:22px 12px}header{margin-bottom:20px}header p{font-size:13px}h1{margin:12px 0}.play{display:block}.board-panel{position:sticky;top:0;z-index:10;padding:12px}.tray-panel{margin-top:15px;padding:14px}#tray{grid-template-columns:repeat(6,1fr);max-height:260px}.slot{height:78px}.tools button{font-size:12px;padding:8px}.progress{margin-bottom:10px}header p br{display:none}}@media(prefers-reduced-motion:reduce){.confetti{display:none}}
.piece{pointer-events:none}.piece .cell{pointer-events:auto}.ghost,.ghost .cell{pointer-events:none}

/* The staging area touches the board: no intervening text or controls. */
.play{display:block;max-width:670px;margin:auto;padding:16px;background:#fffdf6;border:1px solid #e4ddcd;border-radius:18px;box-shadow:0 8px 30px #493e2310}
#tray{grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;margin-top:6px;max-height:182px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.slot{height:80px}.slot .piece{cursor:grab}.piece.lifted{opacity:.18}.ghost{opacity:1;filter:drop-shadow(0 9px 7px #17382566);transform:translateY(-12px)}
.tools{margin-top:12px}.progress{min-height:30px;margin-bottom:10px}header{margin-bottom:20px}header p{margin-bottom:12px}
@media(max-width:760px){.play{padding:10px;border-radius:12px}#tray{grid-template-columns:repeat(6,minmax(0,1fr));max-height:166px;margin-top:5px;gap:4px}.slot{height:76px}.tools{margin-top:8px}main{padding:16px 8px}header h1{font-size:32px}header p{font-size:12px}#status{font-size:12px}.progress{gap:10px}.ghost{transform:translateY(-22px)}}

.slot{width:100%;border:2px solid transparent;padding:0;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slot:hover{border-color:#b7c5ad}.slot.selected-slot{background:#e5eddb;border-color:#d7a139;box-shadow:inset 0 0 0 1px #d7a139}.slot small{pointer-events:none}.slot .piece{display:block}.slot:focus-visible{outline:3px solid #b47744;outline-offset:-3px}

.slot.selected-slot{touch-action:none}

#photo-zoom{width:min(640px,94vw);max-height:88dvh;overflow:auto;border:1px solid #d9cfba;border-radius:18px;background:#fffdf6;color:#294a3d;padding:20px;box-shadow:0 20px 80px #0005}#photo-zoom::backdrop{background:#1d332bd9}.zoom-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.zoom-heading h2{margin:0}.zoom-heading button{min-width:44px;min-height:44px}#zoom-images{display:grid;grid-template-columns:1fr 1fr;gap:12px}#zoom-images button{padding:5px;background:#e9e5d8;border:2px solid #c5b48e}#zoom-images img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#ebe6dc;border-radius:4px}#zoom-images.expanded{grid-template-columns:1fr}#zoom-images.expanded button:not(.photo-expanded){display:none}.zoom-note{font-size:12px;color:#758073;text-align:center}.piece{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

.photo-start{max-width:670px;margin:0 auto 18px;padding:16px;background:#e9eddf;border-radius:14px}.photo-actions{display:flex;flex-wrap:wrap;gap:8px}.photo-actions button{flex:1;min-width:150px;background:#fffdf6}.photo-actions button:first-child{background:#345e49;color:white}.photo-start p{font-size:13px;margin:12px 0 6px}.photo-start small{font-size:11px;line-height:1.5;display:block;color:#697760}#photo-loaded{margin-top:10px}#photo-loaded button{font-size:12px;margin-right:6px}.photo-start button:disabled{opacity:.65;cursor:progress}@media(max-width:760px){.photo-start{padding:12px}.photo-actions button{font-size:13px;padding:12px;min-height:46px}}

.filter-choice{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:12px;min-height:40px}.filter-choice input{width:21px;height:21px;accent-color:#345e49}

/* One reachable top piece, with the next pieces represented by stacked edges. */
#shortcut-dialog{width:min(540px,94vw);max-height:90dvh;overflow:auto;border:1px solid #d9cfba;border-radius:18px;background:#fffdf6;color:#294a3d;padding:20px}#shortcut-dialog::backdrop{background:#1d332bcc}#shortcut-dialog button,.shortcut-run{min-height:44px}#shortcut-dialog label{display:block;margin:14px 0 6px}#shortcut-paste{display:block;width:100%;font:inherit;font-size:16px;padding:10px;border:1px solid #bcc9b0;border-radius:8px;margin-bottom:8px;resize:vertical}#shortcut-status{min-height:1.5em}.shortcut-run{display:inline-block;background:#345e49;color:white;padding:12px 16px;border-radius:9px;text-decoration:none}.shortcut-guide{max-width:760px;line-height:1.6}.shortcut-guide h1{font-size:36px}.shortcut-guide li{margin-bottom:14px}.shortcut-guide code{overflow-wrap:anywhere}.shortcut-guide pre{max-height:180px;overflow:auto}
.surprise-count{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.surprise-count input{width:90px;min-height:44px;font:inherit;font-size:16px;border:1px solid #b9c5b0;border-radius:8px;padding:8px;background:#fffdf6;color:#294a3d}
#tray{display:flex;justify-content:center;align-items:flex-start;height:174px;max-height:none;overflow:visible;margin-top:6px;padding:0;touch-action:none}
#tray[hidden]{display:none}
#tray .stack-top{width:190px;height:156px;flex:none;border:2px solid #c5b592;border-radius:13px;touch-action:none;box-shadow:4px 5px 0 -1px #d7c9ad,8px 10px 0 -1px #bca982,0 9px 18px #493e2320;padding:8px 12px 23px}
#tray .stack-top[data-count="1"]{box-shadow:0 5px 14px #493e2320}
#tray .stack-top.selected-slot{border-color:#d7a139;background:#e5eddb}
#tray .stack-top small{bottom:5px;right:0;left:0;text-align:center;font-size:11px;color:#53664f}
#tray .stack-top .piece{margin:auto;touch-action:none}
@media(max-width:760px){#tray{height:170px;margin-top:5px}#tray .stack-top{width:180px}}

.photo-loading{display:flex;align-items:center;gap:12px;margin:12px 0}.photo-loading[hidden]{display:none}
#guru-invitation{max-width:480px;width:calc(100% - 28px);max-height:85dvh;overflow:auto;border:1px solid #b9c5b0;border-radius:20px;padding:24px;background:#fffdf6;color:#294a3d;box-shadow:0 20px 80px #10271f55}
#guru-invitation::backdrop{background:#19372bb8}#guru-invitation p{font-size:16px;line-height:1.5}#guru-invitation button{min-height:48px;margin:6px 4px 0 0}#guru-accept{background:#345e49;color:white}.guru-building{position:relative;display:block;flex:0 0 96px;height:76px}.guru-face{position:absolute;font-size:48px;left:0;top:2px}.guru-piece{position:absolute;right:0;font-size:23px;animation:guru-place 1.8s infinite;opacity:0}.guru-piece:nth-child(2){top:0}.guru-piece:nth-child(3){top:24px;animation-delay:.6s}.guru-piece:nth-child(4){top:48px;animation-delay:1.2s}@keyframes guru-place{0%{opacity:0;transform:translate(-22px,-12px) rotate(-20deg)}40%,85%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0}}#native-end-session{margin-top:12px;min-height:44px}@media(prefers-reduced-motion:reduce){.guru-piece{animation:none;opacity:1}}

#cancel-photo-loading{min-height:44px;flex-shrink:0}.photo-loading{flex-wrap:wrap}

.workshop-link{display:inline-block;margin:12px;padding:14px 20px;background:#345e49;color:#fff;border-radius:9px;text-decoration:none}footer a{color:inherit}

/* A single fitted image spans its region; cells expose matching slices. */
.cell.photo-fragment{border:0;border-radius:0;background:#ece7da;box-shadow:none;overflow:hidden}
.photo-fragment::after{content:"";position:absolute;inset:0;border-style:solid;border-color:var(--frame);border-width:var(--edge-top) var(--edge-right) var(--edge-bottom) var(--edge-left);pointer-events:none}
.selected .photo-fragment{outline:none}.piece.selected{filter:drop-shadow(0 0 2px #bd8537)}
.photo-fragment img{pointer-events:none;user-select:none}

/* Approved Morning Blue logo and golden K opening glint. */
.kpw-brand-banner{position:relative;width:min(100%,520px);margin:0 auto 22px;overflow:hidden;border-radius:16px}.kpw-brand-logo{display:block;width:100%;height:auto}.kpw-brand-glint{position:absolute;left:20.8%;top:48.5%;width:18%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}.kpw-brand-pulse{position:absolute;inset:0;animation:kpw-brand-shine 4.2s ease-in-out infinite;transform-origin:center}.kpw-brand-halo{position:absolute;inset:15%;background:radial-gradient(circle,#fffbea 0%,#ffdd75a0 12%,#ffcc4440 32%,transparent 70%);filter:blur(3px)}.kpw-brand-star{position:absolute;inset:0;background:radial-gradient(circle,#fff 0%,#fff9d8 5%,#ffe7a2 18%,#eebd45 50%,#eebd4500 73%);clip-path:polygon(50% 0,53% 43%,58% 47%,100% 50%,58% 53%,53% 57%,50% 100%,47% 57%,42% 53%,0 50%,42% 47%,47% 43%)}.kpw-brand-core{position:absolute;inset:45%;border-radius:50%;background:#fffef0;box-shadow:0 0 8px #fff,0 0 18px #ffdb69,0 0 30px #ffd257}@keyframes kpw-brand-shine{0%,15%,100%{opacity:0;transform:scale(.15)}40%{opacity:.6;transform:scale(.6)}55%{opacity:1;transform:scale(1)}70%{opacity:.5;transform:scale(.65)}88%{opacity:0;transform:scale(.15)}}@media(prefers-reduced-motion:reduce){.kpw-brand-pulse{animation:none;opacity:.55;transform:scale(.5)}}


/* Continue the approved morning sky across the opening banner. */
header{background:#c1e2fa url('assets/morning-blue-banner-sky.png') center top/cover no-repeat;border-radius:20px;padding:0 24px 22px;overflow:hidden}
header .kpw-brand-banner{margin-bottom:16px;border-radius:0}
header .kpw-brand-logo{-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 94%,transparent);mask-composite:intersect}
header p{color:#405b62}header h1{color:#294a3d}header>span{color:#355548}
@media(max-width:760px){header{padding:0 8px 16px;border-radius:14px}header .kpw-brand-banner{margin-bottom:12px}}
header{background-size:100% 100%}

/* Gift-focused brand voice, preserving the approved sky and logo. */
header .gift-eyebrow{display:block;font-size:11px;letter-spacing:2.5px;color:#355548}header .gift-intro{max-width:680px;margin:18px auto;font-size:16px;line-height:1.7;color:#354e55}header h1{font-size:clamp(30px,4.4vw,54px)}@media(max-width:760px){header .gift-intro{font-size:14px;padding:0 6px}header .gift-eyebrow{font-size:10px;letter-spacing:1.6px}}

@font-face{font-family:"Dancing Script";font-style:normal;font-weight:600;font-display:swap;src:url("assets/dancing-script-600.ttf") format("truetype")}
header h1.brand-tagline{font-family:"Dancing Script","Segoe Script","Apple Chancery",cursive;font-weight:600;font-style:normal;font-size:clamp(40px,5.6vw,76px);line-height:1.18;letter-spacing:0;color:#355548;margin:12px auto 24px;max-width:950px;padding:0 12px;text-shadow:0 1px 8px #ffffffb0}
@media(max-width:760px){header h1.brand-tagline{font-size:clamp(36px,8.6vw,58px);line-height:1.22;padding:0 4px}}

.policy-links{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;margin-top:12px}.policy-links a{min-height:44px;display:inline-flex;align-items:center;color:#355548}

/* Clear boundary between the cloud banner and the play invitation. */
main>header{border-bottom:5px solid #000;border-radius:20px 20px 0 0;margin-bottom:0}
.welcome-choice{text-align:center;padding:24px 12px 36px}.welcome-choice h2{font:600 clamp(32px,5vw,48px)/1.2 "Dancing Script",cursive;margin:4px 0 26px;color:#355548}.welcome-buttons{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;padding:12px 18px}
.puzzle-button{position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate;width:250px;min-height:120px;padding:22px 30px;background:#d8e5ce;border:2px solid #355548;border-radius:12px;color:#294a3d;text-decoration:none;font:600 32px/1.12 "Dancing Script",cursive;box-shadow:0 5px 0 #35554830;transition:transform .15s}
.puzzle-button::before{content:"";position:absolute;z-index:-1;width:36px;height:30px;border:2px solid #355548;border-bottom:0;border-radius:50% 50% 0 0;background:inherit;top:-28px;left:calc(50% - 18px)}.puzzle-button::after{content:"";position:absolute;width:28px;height:38px;right:-2px;top:calc(50% - 19px);background:#f6f2e9;border:2px solid #355548;border-right:0;border-radius:50% 0 0 50%}.puzzle-button.rose{background:#eed6d1}.puzzle-button:hover{transform:translateY(-3px)}.puzzle-button:focus-visible{outline:4px solid #b47744;outline-offset:8px}
#game-intro{width:min(620px,calc(100% - 28px));max-height:88dvh;overflow:auto;border:2px solid #355548;border-radius:22px;background:#fffdf6;color:#294a3d;padding:28px;line-height:1.65}#game-intro::backdrop{background:#19372bb8}#game-intro h2{font:600 36px/1.2 "Dancing Script",cursive;margin:8px 32px 20px 0}.dialog-close{float:right;min-width:44px;min-height:44px}.intro-actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.intro-actions button{flex:1;min-width:200px;min-height:52px;font-weight:600}.intro-actions button:first-child{background:#345e49;color:white}#game-intro small{display:block;font-size:12px}.play[hidden],.photo-start[hidden]{display:none!important}@media(max-width:600px){.welcome-buttons{gap:40px}.puzzle-button{width:min(280px,90%)}#game-intro{padding:20px}.welcome-choice{padding-top:22px}}

.feedback-controls{border:1px solid #d4d9c9;border-radius:10px;margin:18px 0 8px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:12px 22px}.feedback-controls legend{font-size:12px}.feedback-controls label{display:flex;align-items:center;gap:8px;min-height:44px}.feedback-controls input{width:20px;height:20px;accent-color:#345e49}.feedback-controls small{flex-basis:100%;font-size:12px}.piece.locked{cursor:zoom-in}.piece.just-fitted{animation:fit-glow .5s ease-out}@keyframes fit-glow{from{filter:drop-shadow(0 0 9px #35a45b)}to{filter:none}}@media(prefers-reduced-motion:reduce){.piece.just-fitted{animation:none;filter:drop-shadow(0 0 3px #35a45b)}}

/* Faint puzzle-pile background in the approved Morning Blue palette. */
body{background:#f6f2e9;isolation:isolate}body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#f6f2e9b8,#f6f2e9b8),url('assets/pastel-puzzle-background.webp') center/cover no-repeat}.puzzle-button::after{background:#f6f2e9}.welcome-choice{background:#f6f2e92b}.intro-workshop{margin:20px 0 10px;padding-top:16px;border-top:1px solid #d6dece}.intro-workshop a{display:inline-flex;align-items:center;min-height:48px;padding:8px 16px;border-radius:9px;background:#eed6d1;color:#294a3d;font:600 26px/1.2 "Dancing Script",cursive;text-decoration:none}footer{color:#4f6356}

/* Contain board zoom inside a reachable device-sized workspace. */
.play{width:100%;min-width:0}#board-viewport{width:100%;height:min(55dvh,510px);min-height:180px;overflow:auto;position:relative;border-radius:6px;background:#eee9dd;overscroll-behavior:contain;touch-action:pan-x pan-y}#board-viewport #board{max-width:none;flex:none;aspect-ratio:auto;margin:0}#board-viewport.moving,#board-viewport.moving *{touch-action:none!important;cursor:grab!important}.board-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0}.board-controls button{min-width:44px;min-height:44px}.board-controls output{min-width:44px;text-align:center}.board-controls [aria-pressed=true]{background:#345e49;color:#fff}.board-controls p{flex-basis:100%;margin:0;font-size:12px;line-height:1.5}#tray{touch-action:pan-y}.play{overflow:visible}@media(max-width:760px){#board-viewport{height:min(48dvh,420px)}.board-controls{position:sticky;top:0;z-index:20;background:#fffdf6;padding:6px 0}.progress{flex-wrap:wrap}}

.board-controls{position:static!important;margin-top:16px}.board-status{font-size:12px;line-height:1.5}.progress{margin-bottom:10px}.photo-start p:empty{display:none}.photo-start{margin-top:20px}

/* Two-finger board gestures; normal browser zoom elsewhere. */
html,body,main{touch-action:auto}#board-viewport,#board-viewport #board,#board-viewport .piece,#board-viewport .cell{touch-action:none}#photo-zoom,#photo-zoom *{touch-action:pan-x pan-y pinch-zoom}#tray,#tray .piece,#tray .cell{touch-action:pinch-zoom}.board-controls{display:none!important}

.zoom-card{min-width:0}.zoom-card>button:first-child{width:100%}#zoom-images.expanded .zoom-card:not(.photo-expanded){display:none}#zoom-images.expanded .zoom-card.photo-expanded button{display:block}#zoom-images .choose-puzzle-photo{width:100%;margin-top:10px;min-height:50px;padding:12px;background:#345e49;color:white;border-color:#345e49;font:600 24px/1.2 "Dancing Script",cursive}#zoom-choice-status,#puzzle-choice-status{font-size:13px;line-height:1.5}#zoom-choice-status:empty,#puzzle-choice-status:empty{display:none}#workshop-session{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#f6f2e9}#workshop-session[open]{display:flex;flex-direction:column}#workshop-session-close{flex:none;min-height:48px;border-radius:0}#workshop-frame{flex:1;width:100%;border:0;min-height:0}

#workshop-inline{overflow:auto;max-height:80dvh;width:100%;}#workshop-inline[hidden]{display:none}#workshop-session:has(#workshop-inline){width:min(1200px,96vw);padding:12px;}#workshop-inline .workshop{max-width:100%;} .choose-puzzle-photo{touch-action:manipulation}
/* Full-width sky header; the puzzle background starts below its divider. */
body>main:not(.workshop){padding-top:0}body>main:not(.workshop)>header{width:100vw;max-width:none;position:relative;left:50%;transform:translateX(-50%);box-sizing:border-box;margin-top:0;border-radius:0;border-bottom:3px solid #151b16;background-color:#c1e2fa}body{overflow-x:hidden}

#completion-image{padding:0;border:0;background:transparent;max-width:96vw;max-height:94dvh;overflow:hidden}#completion-image::backdrop{background:rgba(20,32,27,.88)}#completion-image img{display:block;width:auto;height:auto;max-width:96vw;max-height:90dvh;object-fit:contain;border-radius:12px}

/* Carry the homepage puzzle imagery into the game surround. */
.play{background-color:#e5eee4;background-image:linear-gradient(135deg,#f6f2e966,#dcebd94d),url('assets/pastel-puzzle-background.webp');background-position:center;background-size:cover;background-repeat:no-repeat;border-color:#b8cbb4;box-shadow:0 8px 30px #294a3d20}
.play .board-panel,.play .tray-panel{background:transparent}
.play .board-status{display:table;background:#fffdf6e8;border-radius:8px;padding:7px 10px}
.play .progress b{background:#e6eddfed}

/* Comfortable reading and touch, provided by the site by default. */
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:18px;line-height:1.6}
button,select,input,textarea{font-family:inherit;font-size:18px;line-height:1.4}
button,select,.checkout-link{min-height:52px;padding:12px 16px}
.tools{gap:12px}.tools button{font-size:18px;min-height:52px;padding:12px 16px}
.puzzle-button,.welcome-choice h2,#game-intro h2,.intro-workshop a,#zoom-images .choose-puzzle-photo{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:650;line-height:1.35}
.puzzle-button{font-size:26px}.welcome-choice h2,#game-intro h2{font-size:30px}
header .gift-intro,header p,.photo-start p,.photo-start small,#game-intro small,.zoom-note,.board-status,#status,#zoom-choice-status,#puzzle-choice-status,footer{font-size:18px;line-height:1.65;color:#294a3d}
header h1.brand-tagline{font-family:"Dancing Script","Segoe Script",cursive}
#game-intro p{margin:16px 0}.photo-actions button,#photo-loaded button{font-size:18px;min-height:52px}
.board-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0}.board-buttons button{flex:1 1 130px;font-weight:600}
.game-choice{display:block;font-size:18px;font-weight:650;margin:12px 0}.game-choice select{width:100%;margin:8px 0;min-width:0}
.play-help{background:#fffdf6f2;color:#294a3d;border-radius:10px;padding:12px;font-size:18px;line-height:1.6}
#tray{height:230px;margin-top:16px}#tray .stack-top{width:min(290px,100%);height:210px;padding:12px 12px 38px}
#tray .stack-top small{font-size:18px;bottom:8px;color:#294a3d}
#restart-confirm{width:min(520px,94vw);border:2px solid #355548;border-radius:18px;padding:24px;background:#fffdf6;color:#294a3d}
#restart-confirm::backdrop{background:#19372bb8}#restart-confirm button{margin:6px;min-width:140px}#restart-yes{background:#345e49;color:white}
.policy-links a{font-size:18px;min-height:48px;padding:8px 12px}
#board-viewport{height:min(58dvh,520px)}
#zoom-images{grid-template-columns:1fr}#zoom-images .choose-puzzle-photo{font-size:20px}
#photo-zoom .zoom-heading h2{font-family:system-ui,sans-serif;font-size:26px;line-height:1.3}
@media(max-width:760px){main{padding-left:10px;padding-right:10px}.play{padding:12px}.tools button{flex:1 1 140px}.progress{gap:12px}header .gift-intro{font-size:18px}#status,.board-status{font-size:18px}#board-viewport{height:min(53dvh,430px)}}
.simple-instructions{padding-left:26px}.simple-instructions li{margin:10px 0}
/* Keep the larger Gentle piece close to its smaller board. */
#board-viewport:has(#board[data-columns="6"]){height:auto;aspect-ratio:6/4;min-height:0;max-height:none}