:root{
  --bg:#0a0d12;--panel:#12171d;--panel2:#171d24;--cream:#f3eadb;--muted:#a99f91;
  --felt1:#627975;--felt2:#405752;--gold:#d2aa73;--gold2:#9f784d;--line:#ffffff12;
}
*{box-sizing:border-box}
body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img{-webkit-user-drag:none}
/* The whole table is usable; there is no mandatory assembly mat. */
.boardPlane{display:none!important}
html,body{margin:0;min-height:100%;background:#080a0e;color:#eee;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
button{font:inherit}
button:focus-visible,input:focus-visible{outline:2px solid #d9b97b;outline-offset:2px}
.hidden{display:none!important}
.app{min-height:100vh;background:radial-gradient(circle at 50% -10%,#293129 0,#11161b 28%,#090c10 70%)}
.topbar{
  height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 24px;
  border-bottom:1px solid var(--line);background:linear-gradient(#171a20ee,#0f1318f2);backdrop-filter:blur(12px);
  position:relative;z-index:50
}
.brand{display:flex;align-items:center;gap:12px;min-width:230px}.brandIcon{font-size:28px}.brandName{font:27px Georgia,serif;color:var(--cream)}
.brandTag{font:italic 10px/1.2 Georgia,serif;color:#b6a991;border-left:1px solid #ffffff18;padding-left:12px}
.nav{display:flex;gap:8px;align-items:center;justify-content:center;flex:1}
.navBtn{border:1px solid transparent;background:transparent;color:#c8c0b4;border-radius:10px;padding:10px 14px;cursor:pointer}
.navBtn:hover{background:#ffffff08}.navBtn.active{border-color:#d5b27d55;background:#d5b27d0e;color:#f6ecdd}
.topActions{min-width:230px;display:flex;justify-content:flex-end;gap:8px;align-items:center}
.accountBtn{border:1px solid #d5b27d55;background:#d5b27d12;color:#f1dfc2;border-radius:11px;padding:9px 12px;cursor:pointer;font-size:12px}.accountBtn:hover{background:#d5b27d25}
.iconBtn,.softBtn,.primaryBtn,.hudBtn{
  border:1px solid #ffffff14;background:#ffffff08;color:#eee4d6;border-radius:11px;cursor:pointer;transition:.15s
}
.iconBtn:hover,.softBtn:hover,.hudBtn:hover{background:#ffffff10}
.iconBtn{width:40px;height:40px}.softBtn{padding:10px 14px}.primaryBtn{padding:12px 18px;background:linear-gradient(#d8b57c33,#a8794530);border-color:#d5ae745c;font-weight:750}
.primaryBtn:hover{background:linear-gradient(#e0bd8245,#b5834e40)}
.screen{display:none}.screen.active{display:block}

/* HOME */
.homeWrap{max-width:1420px;margin:0 auto;padding:22px}
.homeGrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}
.hero{
  position:relative;min-height:610px;border:1px solid #ffffff12;border-radius:24px;overflow:hidden;
  background:#111820;box-shadow:0 35px 80px #00000042
}
.heroImage{position:absolute;inset:0;background-position:center;background-size:cover;filter:saturate(.92) contrast(1.02);transform:scale(1.01)}
.heroShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,7,9,.83) 0%,rgba(6,9,11,.55) 33%,rgba(5,8,10,.10) 67%,rgba(5,8,10,.38) 100%),linear-gradient(0deg,rgba(3,5,7,.55),transparent 55%)}
.heroContent{position:absolute;inset:0;padding:48px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
.eyebrow{font:12px Georgia,serif;color:#d4c4aa;margin-bottom:10px}.hero h1{margin:0;font:500 42px/1.02 Georgia,serif;color:#f7efe4;text-shadow:0 3px 15px #0008}
.heroMeta{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 20px}.metaPill{padding:7px 10px;border-radius:999px;background:#080b0db0;border:1px solid #ffffff1a;color:#ddd3c5;font-size:11px}
.heroActions{display:flex;gap:9px;flex-wrap:wrap}.heroActions .primaryBtn{min-width:180px;font-size:15px}.heroActions .softBtn{background:#0a0d10bb}
.progressWrap{width:min(470px,100%);margin-top:17px}.progressText{display:flex;justify-content:space-between;color:#c5b9a8;font-size:10px;margin-bottom:6px}
.progressBar{height:7px;border-radius:99px;background:#0007;border:1px solid #ffffff10;overflow:hidden}.progressFill{height:100%;width:0;background:linear-gradient(90deg,#c8a36d,#f1d3a3);transition:.3s}
.sidebar{display:flex;flex-direction:column;gap:14px}
.card{border:1px solid #ffffff12;border-radius:18px;background:linear-gradient(#171c22ee,#101419f2);box-shadow:0 20px 50px #0003}
.cardHead{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 12px;border-bottom:1px solid #ffffff0d}
.cardHead h3{margin:0;font:500 18px Georgia,serif;color:#efe4d5}.cardHead small{color:#8f877b}
.leaderList{padding:8px 14px 14px}.leaderRow{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #ffffff0a;font-size:11px}
.rankBadge{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#ffffff09;color:#cabfae}.rankBadge.gold{background:#d3aa6f;color:#16120d;font-weight:800}
.playerName{color:#ddd4c8}.playerTime{color:#b6ac9e;font-variant-numeric:tabular-nums}
.smallCard{padding:16px}.smallCard h4{margin:0 0 8px;font:500 15px Georgia,serif;color:#efe4d5}.smallCard p{margin:0;color:#90877b;font-size:10px;line-height:1.5}
.libraryStrip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.thumb{aspect-ratio:4/3;border-radius:10px;background-size:cover;background-position:center;border:1px solid #ffffff10;cursor:pointer;position:relative;overflow:hidden}
.thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0008,transparent 55%)}.thumb span{position:absolute;z-index:1;left:8px;bottom:6px;font-size:9px;color:#fff}

/* PLAY */
.playShell{padding:12px 14px 86px;max-width:1550px;margin:0 auto}
.playHead{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 6px}
.playTitle small{display:block;color:#9f9587;font:10px Georgia,serif}.playTitle h2{margin:2px 0 0;font:500 19px Georgia,serif;color:#f1e8db}
.playStats{display:flex;gap:8px;align-items:center}.playStat{padding:7px 10px;border-radius:999px;border:1px solid #ffffff11;background:#ffffff06;color:#c8bfb2;font-size:10px}
.stage{
  touch-action:none;
  position:relative;height:calc(100vh - 205px);min-height:565px;overflow:hidden;border-radius:20px;border:1px solid #ffffff12;cursor:default;
  background:var(--table-pattern,none),linear-gradient(180deg,var(--felt1),var(--felt2));perspective:1600px;perspective-origin:50% -12%;
  box-shadow:inset 0 45px 90px #ffffff08,inset 0 -100px 140px #00000042,0 30px 70px #0004
}
.stage:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,#fff1cf15,transparent 42%),repeating-linear-gradient(27deg,#ffffff03 0 1px,transparent 1px 4px)}
.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.18) 100%)}
.stage.pan-ready{cursor:grab}
.stage.panning{cursor:grabbing}
.stage.panning .pieceHit{cursor:grabbing!important}
.stage.selecting{cursor:crosshair}
.world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;pointer-events:none}
.worldGrid{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,rgba(255,255,255,.018),transparent 58%);border:1px solid rgba(255,255,255,.025);border-radius:22px}

.boardPlane{position:absolute;left:50%;top:50%;width:510px;height:390px;transform:translate(-50%,-50%) scale(1.02,.985);border-radius:15px;background:linear-gradient(#ffffff08,#00000008);border:1px solid #ffffff09;box-shadow:0 25px 45px #0005,inset 0 2px 10px #ffffff08,inset 0 -24px 34px #0001}
.boardPlane:before{content:"";position:absolute;inset:12px;border-radius:11px;border:1px dashed #f5ebd819}
/* Matching shadow stacks blend lift into contact without moving the piece. */
.segment{position:absolute;left:0;top:0;touch-action:none;pointer-events:none;user-select:none;transition:transform .09s ease,filter .09s ease;
  filter:brightness(1) drop-shadow(0 var(--contact-shadow-y,3px) var(--contact-shadow-blur,2.8px) rgba(13,23,22,var(--contact-shadow-alpha,.28))) drop-shadow(0 0 0 rgba(13,23,22,0))}
.segment.held{
  will-change:transform,filter;
  transition:filter .09s cubic-bezier(.2,.7,.25,1);
  filter:brightness(1.008) drop-shadow(var(--pickup-shadow-x,2.5px) var(--pickup-shadow-y,22px) var(--pickup-shadow-blur,16px) rgba(13,23,22,var(--pickup-shadow-alpha,.43))) drop-shadow(0 6px 4px rgba(13,23,22,.24))
}
.segment.dropping{
  will-change:transform,filter;
  transition:transform var(--drop-ms,100ms) cubic-bezier(.18,.82,.25,1),filter var(--drop-ms,100ms) cubic-bezier(.18,.82,.25,1)
}
.segment.held.magnetReady{
  filter:brightness(1.008) drop-shadow(var(--pickup-shadow-x,2.5px) var(--pickup-shadow-y,22px) var(--pickup-shadow-blur,16px) rgba(13,23,22,var(--pickup-shadow-alpha,.43))) drop-shadow(0 6px 4px rgba(13,23,22,.24))
}
.segment.materialReducedMotion{transition:none!important}
@media(prefers-reduced-motion:reduce){.segment,.segment.held,.segment.dropping{transition:none!important}}
.segment.snapping{will-change:transform,filter;transition:filter var(--drop-ms,100ms) cubic-bezier(.18,.82,.25,1)}
.segment.materialJoin:not(.held):not(.dropping){transition-property:filter}
.segment.hinting{filter:drop-shadow(0 0 8px #f6d292) drop-shadow(0 0 18px #f6d29288)}
.segment.selected:not(.held):not(.hinting){
  filter:brightness(1) drop-shadow(0 var(--contact-shadow-y,3px) var(--contact-shadow-blur,2.8px) rgba(13,23,22,var(--contact-shadow-alpha,.28))) drop-shadow(0 0 3px rgba(224,182,115,.34));
}

/* Completion choreography: no geometry/scale pop, only camera framing and light. */
#screen-play.completing .playHead{opacity:.34;transition:opacity .28s ease}
.hud{transition:opacity .22s ease,transform .22s ease}
.hud.completion-hide{opacity:0;transform:translateX(-50%) translateY(10px);pointer-events:none}
.stage.completion-reveal{cursor:default}
.stage.completion-reveal .selectionOverlay{display:none!important}
.stage.completion-reveal .boardPlane{opacity:.34;transition:opacity .5s ease}
.segment.completedPuzzle{
  animation:completedPuzzleGlow .95s ease-out both;
}
@keyframes completedPuzzleGlow{
  0%{filter:brightness(1) drop-shadow(0 11px 10px rgba(0,0,0,.20))}
  42%{filter:brightness(1.045) drop-shadow(0 13px 13px rgba(0,0,0,.24)) drop-shadow(0 0 10px rgba(244,217,172,.18))}
  100%{filter:brightness(1.015) drop-shadow(0 11px 11px rgba(0,0,0,.20))}
}
@keyframes milestonePulse{0%{box-shadow:0 0 0 rgba(236,198,138,0)}45%{box-shadow:0 0 0 5px rgba(236,198,138,.10)}100%{box-shadow:0 0 0 rgba(236,198,138,0)}}
.hud.milestone{animation:milestonePulse .55s ease-out}
.zoomGroup{display:flex;align-items:center;border:1px solid #ffffff12;border-radius:11px;overflow:hidden;background:#ffffff05}
.zoomGroup .hudBtn{border:0;border-radius:0;background:transparent;padding:0 11px;min-width:38px}
.zoomGroup .hudBtn+.hudBtn{border-left:1px solid #ffffff0f}
#zoomValue{min-width:58px;font-variant-numeric:tabular-nums;color:#e7dac7}

/* Multi-selection marquee: screen-space, never affected by camera zoom. */
.selectionOverlay{position:absolute;inset:0;width:100%;height:100%;z-index:70;pointer-events:none;overflow:visible;display:none}
.selectionOverlay.visible{display:block}
.selectionMarquee{
  fill:rgba(239,215,175,.075);
  stroke:rgba(248,229,198,.96);
  stroke-width:1.15;
  stroke-dasharray:7 5;
  vector-effect:non-scaling-stroke;
  animation:selectionMarch .55s linear infinite;
}
@keyframes selectionMarch{to{stroke-dashoffset:-24}}

/* --- QA / developer overlay (v1.6 only) --- */
.qaBtn{border-color:#d5ae7450!important;color:#e9c996!important}
.devPanel{
  position:fixed;z-index:115;right:18px;top:86px;width:310px;
  border:1px solid #d6b27740;border-radius:16px;
  background:rgba(10,13,17,.95);box-shadow:0 24px 70px #0009;
  max-height:calc(100vh - 104px);backdrop-filter:blur(16px);overflow:auto
}
.devPanel.hidden{display:none!important}
.devHead{display:flex;align-items:center;justify-content:space-between;padding:12px 13px;border-bottom:1px solid #ffffff12}
.devHead b{font:600 13px Georgia,serif;color:#f0dfc5}
.devHead small{font-size:8px;color:#8e8477}
.devBody{padding:11px}
.devSection{padding:9px 0;border-bottom:1px solid #ffffff0d}
.devSection:last-child{border-bottom:0}
.devLabel{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#8f8577;margin-bottom:7px}
.devZoomRow,.devToggleGrid{display:grid;gap:6px}
.devZoomRow{grid-template-columns:repeat(4,1fr)}
.devToggleGrid{grid-template-columns:1fr 1fr}
.devMini{
  border:1px solid #ffffff13;background:#ffffff07;color:#d9d0c4;
  border-radius:8px;padding:7px 6px;font-size:9px;cursor:pointer
}
.devMini:hover{background:#ffffff0d}.devMini.active{border-color:#d6b27780;background:#d6b27717;color:#f1d4a9}
.devCheck{display:flex;gap:6px;align-items:center;color:#bdb3a6;font-size:9px;padding:5px 0}
.devStats{font:9px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;color:#b8c1b6;white-space:pre-wrap}
.qaResults{margin-top:8px;max-height:180px;overflow:auto;font:9px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace}
.qaPass{color:#9ed3a7}.qaFail{color:#ef9c92}.qaWarn{color:#e7c58d}
.qaHint{margin-top:7px;color:#756e65;font-size:8px}
.feelGrid{display:grid;grid-template-columns:1fr auto;gap:4px 9px;margin-top:6px}
.feelGrid label{font-size:8px;color:#aaa094}
.feelGrid output{font:8px ui-monospace,SFMono-Regular,Consolas,monospace;color:#e0c59f;text-align:right}
.feelGrid input{grid-column:1/-1;width:100%;margin:0 0 5px}
.feelPresetRow{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:7px}
.tableModeRow{grid-template-columns:repeat(3,1fr);margin-bottom:8px}.devSubLabel{grid-column:1/-1;margin:5px 0 2px;color:#d6b277;font:700 8px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}.visualTunerSummary{margin-top:7px;padding:7px;border-radius:7px;background:#05080566;color:#9fb5a8;font:8px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}

/* Visual QA layers */
.stage.debug-hitboxes .pieceHit{
  fill:rgba(50,255,160,.14)!important;
  stroke:rgba(70,255,175,.95)!important;
  stroke-width:.7!important;
  vector-effect:non-scaling-stroke
}
.stage.debug-bounds .segment{
  outline:1px dashed rgba(255,92,92,.95);
  outline-offset:0
}
.stage.debug-ids .piece::after{
  content:attr(data-piece-id);
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:20;min-width:18px;padding:2px 4px;border-radius:5px;
  background:rgba(5,8,10,.78);border:1px solid rgba(255,255,255,.18);
  color:#fff;font:8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-align:center;pointer-events:none
}
.snapMarker{
  display:none;position:absolute;z-index:25;width:5px;height:5px;border-radius:50%;
  background:#55baff;box-shadow:0 0 0 1px #09293f,0 0 7px rgba(85,186,255,.8);
  pointer-events:none
}
.stage.debug-snap .snapMarker{display:block}
.snapTop{left:calc(50% - 2.5px);top:9px}
.snapRight{right:9px;top:calc(50% - 2.5px)}
.snapBottom{left:calc(50% - 2.5px);bottom:9px}
.snapLeft{left:9px;top:calc(50% - 2.5px)}
.debugWorldOverlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:99999}
.debugCandidateLine,.debugCandidateTarget{display:none}
.stage.debug-snap .debugCandidateLine,
.stage.debug-snap .debugCandidateTarget{display:block}
.debugCandidateLine{stroke:#ffe083;stroke-width:1.2;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.debugCandidateTarget{fill:#ffe083;stroke:#382d11;stroke-width:.8;vector-effect:non-scaling-stroke}

.segment-depth{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.piece{position:absolute;pointer-events:none;touch-action:none;z-index:1}
/* Light touches the cut edges only; the picture and its material never get filtered. */
.snapLight,.joinGlimpse{opacity:0;pointer-events:none}
.snapHalo,.snapRim,.joinGlimpse{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.snapHalo{stroke:rgb(var(--glow-rgb,244,194,86));stroke-width:calc(1.8px + var(--glow-radius,12px)*.28);filter:blur(calc(var(--glow-radius,12px)*.18))}
.snapRim{stroke:#fff6d7;stroke-width:1.1;stroke-opacity:.85}
.joinGlimpse{stroke:#fff7d8;stroke-width:2;filter:drop-shadow(0 0 3px rgb(var(--glow-rgb,244,194,86)))}
.piece.clusterGlow .snapLight{animation:clusterEdgeLight var(--glow-duration,480ms) cubic-bezier(.2,.72,.25,1) var(--cluster-glow-delay,0ms) both}
.piece.joinFlash .joinGlimpse{animation:joinedEdgeFlash var(--join-duration,160ms) ease-out both}
@keyframes clusterEdgeLight{0%{opacity:0}30%{opacity:calc(.72*var(--glow-strength,1)*var(--glow-intensity,1))}65%{opacity:calc(.3*var(--glow-strength,1)*var(--glow-intensity,1))}100%{opacity:0}}
@keyframes joinedEdgeFlash{0%{opacity:0}25%{opacity:calc(.95*var(--glow-strength,1)*var(--glow-intensity,1))}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.piece.clusterGlow .snapLight,.piece.joinFlash .joinGlimpse{animation:none;opacity:0}}
.segment-bevel{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:2}.segmentBevelSoft,.segmentBevelEdge{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.segmentBevelHighlight{mix-blend-mode:screen}.segmentBevelShade{mix-blend-mode:multiply}
.pieceRaster,.pieceOverlay{position:absolute;inset:0;width:100%;height:100%;display:block}
.pieceRaster{pointer-events:none}
.pieceOverlay{overflow:visible;pointer-events:auto}
.pieceOverlay *{pointer-events:none}
.pieceOverlay .pieceHit{pointer-events:fill;cursor:grab;fill:transparent;stroke:none}
.pieceOverlay .pieceHit:active{cursor:grabbing}
.toast{position:absolute;z-index:9999;top:16px;left:50%;transform:translateX(-50%) translateY(-6px);opacity:0;padding:9px 13px;border-radius:999px;background:#11151def;border:1px solid #ffffff1c;color:#f3eadb;font-size:10px;transition:.16s}.toast.show{opacity:1;transform:translateX(-50%)}
.hud{
  position:fixed;z-index:80;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px;
  border-radius:16px;background:#101419e9;border:1px solid #ffffff15;box-shadow:0 20px 50px #0008;backdrop-filter:blur(16px)
}
.hudBtn{height:42px;padding:0 14px;font-size:11px}.hudBtn strong{color:#f0d0a0}.hudSep{width:1px;height:26px;background:#ffffff15;margin:0 2px}
.hudProgress{width:150px}.hudProgressTop{display:flex;justify-content:space-between;color:#a9a093;font-size:9px;margin-bottom:5px}.hudProgress .progressBar{height:5px}

/* MODAL */
.modalBack{position:fixed;z-index:120;inset:0;background:#030508b7;display:grid;place-items:center;padding:20px;backdrop-filter:blur(8px)}
.modal{width:min(560px,100%);max-height:88vh;overflow:auto;border:1px solid #ffffff16;border-radius:20px;background:linear-gradient(#1a2027,#101419);box-shadow:0 40px 100px #000b}
.modalHead{display:flex;justify-content:space-between;align-items:center;padding:17px;border-bottom:1px solid #ffffff0d}.modalHead h3{margin:0;font:500 20px Georgia,serif;color:#f1e7d8}
.modalBody{padding:16px}.settingGroup{padding:12px;border:1px solid #ffffff0d;border-radius:12px;background:#ffffff04;margin-bottom:10px}.settingGroup h4{margin:0 0 9px;font:500 13px Georgia,serif;color:#e9ddcb}
.ctrl{display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin:8px 0}.ctrl label{font-size:9px;color:#c1b7a9}.ctrl output{font-size:9px;color:#e7d9c5}.ctrl input{grid-column:1/-1;width:100%}
.modalActions{display:flex;justify-content:flex-end;gap:8px;padding:0 16px 16px}

/* COMPLETE */
.completeWrap{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 25%,#334039 0,#161d1b 32%,#090c10 75%)}
.completeCard{width:min(740px,100%);border:1px solid #ffffff14;border-radius:24px;background:linear-gradient(#181e23ee,#0f1318f6);box-shadow:0 40px 100px #0008;overflow:hidden;opacity:0;transform:translateY(18px)}
#screen-complete.active .completeCard{animation:completeCardIn .52s cubic-bezier(.18,.82,.25,1) forwards}
@keyframes completeCardIn{to{opacity:1;transform:translateY(0)}}
.completeImage{aspect-ratio:16/8;background-size:cover;background-position:center;position:relative;overflow:hidden}.completeImage:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#111820,transparent 62%);opacity:1;animation:completeShadeIn .7s ease-out forwards}@keyframes completeShadeIn{0%{opacity:.55}100%{opacity:1}}
.completeBody{padding:24px;text-align:center}.completeBody .eyebrow{margin:0 0 8px}.completeBody h1{margin:0;font:500 36px Georgia,serif;color:#f4ebde}
.resultGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.resultBox{padding:15px;border:1px solid #ffffff0d;border-radius:12px;background:#ffffff05}.resultBox small{display:block;color:#90877b;font-size:9px}.resultBox b{display:block;margin-top:4px;font:500 23px Georgia,serif;color:#f0e5d5}
.completeActions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}

/* PLACEHOLDER SCREENS */
.placeholder{max-width:900px;margin:60px auto;padding:30px;border:1px solid #ffffff12;border-radius:22px;background:#12171dcc;text-align:center}.placeholder h2{font:500 30px Georgia,serif;color:#f2e9dc}.placeholder p{color:#938a7e}

/* responsive */
@media(max-width:980px){.homeGrid{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr}.nav{display:none}.topActions{min-width:auto}.brand{min-width:auto}.hero{min-height:520px}}
@media(max-width:720px){.homeWrap{padding:10px}.heroContent{padding:24px}.hero h1{font-size:33px}.sidebar{grid-template-columns:1fr}.stage{min-height:520px;height:calc(100vh - 190px)}.hud{width:calc(100% - 20px);justify-content:center;flex-wrap:wrap}.hudProgress{display:none}.brandTag{display:none}.resultGrid{grid-template-columns:1fr}.topbar{padding:0 12px}}

/* --------------------------------------------------------------------------
   v2.3 Start Experience + hold-to-preview
   Reference image is a presentation layer only; it never changes game geometry.
   -------------------------------------------------------------------------- */
#screen-play.starting .playHead{opacity:.45;transition:opacity .24s ease}
.hud.start-hide{opacity:0;transform:translateX(-50%) translateY(12px);pointer-events:none}
.previewBtn.active{background:#d7b57d1c;border-color:#d7b57d52;color:#f4dfba;box-shadow:inset 0 0 0 1px #d7b57d18}

.referenceOverlay{
  position:absolute;inset:0;z-index:76;display:grid;place-items:center;padding:26px;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .14s ease,visibility 0s linear .14s;
}
.referenceOverlay.visible{opacity:1;visibility:visible;transition:opacity .14s ease,visibility 0s}
.referenceOverlay.leaving{opacity:0;transition:opacity .21s ease}
.referenceBackdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(9,13,12,.22),rgba(5,8,8,.74) 76%);backdrop-filter:blur(3px)}
.referenceCard{
  position:relative;width:min(760px,82vw);padding:10px;border-radius:18px;
  background:linear-gradient(145deg,#efe2cd24,#0b0f0ecf);border:1px solid #f5dfbb38;
  box-shadow:0 34px 90px #000b,0 0 0 1px #0008,inset 0 1px 0 #fff2;
  transform:translateY(4px) scale(.992);transition:transform .18s ease,opacity .18s ease;
}
.referenceOverlay.visible .referenceCard{transform:translateY(0) scale(1)}
.referenceOverlay.leaving .referenceCard{transform:translateY(-3px) scale(.997)}
.referenceImage{
  width:100%;max-height:calc(82vh - 90px);border-radius:11px;background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px #ffffff17,0 12px 34px #0008;
}
.referenceCaption{height:44px;display:flex;align-items:center;gap:10px;padding:8px 4px 0;color:#cfc1af}
.referenceEyebrow{font:9px Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:#b49f82}
.referenceTitle{font:500 14px Georgia,serif;color:#f2e5d3}
.referenceHint{margin-left:auto;font-size:9px;color:#9e9486}
.referenceOverlay.startMode .referenceCard{width:min(700px,78vw);transform:none;transition:none}
.referenceOverlay.startMode .referenceBackdrop{background:radial-gradient(circle at 50% 42%,rgba(27,35,31,.16),rgba(5,8,8,.66) 80%)}
.referenceOverlay.startMode .referenceHint{color:#b9ab97}
/* Hide target positions before the engine and its async image work exist. */
#screen-play.start-awaiting .segment{visibility:hidden!important}
.start-scatter-piece{pointer-events:none!important;transition:none!important}
/* Reserve the complete playing surface before the first contact, including HUD gaps. */
body.playing .playShell,body.playing .hud{touch-action:none}
.startCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.stage.start-canvas-active .segment,.stage.start-canvas-preparing .segment{visibility:hidden!important;will-change:auto}

/* Reduced motion keeps the new-puzzle transition immediate even before the
   script reaches its presentation guard. */
html.reduced-motion #screen-play.starting .playHead,
html.reduced-motion .hud.start-hide{transition:none}

@media(max-width:720px){
  .referenceOverlay{padding:12px}.referenceCard{width:min(94vw,700px);padding:7px;border-radius:14px}
  .referenceCaption{height:39px}.referenceHint{display:none}
}


/* v2.4 explicit abandon confirmation */
.confirmModal{width:min(500px,100%);overflow:hidden}
.confirmBody{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:20px 20px 10px}
.confirmIcon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#d5ad7212;border:1px solid #d5ad7230;color:#e5c08a;font:24px Georgia,serif}
.confirmLead{margin:1px 0 6px;color:#f0e5d6;font:500 15px/1.35 Georgia,serif}
.confirmSub{margin:0;color:#9f9588;font-size:10px;line-height:1.55}
.confirmActions{padding:14px 20px 20px;border-top:1px solid #ffffff08;margin-top:8px}
.dangerBtn{border:1px solid #d17d704d;background:linear-gradient(#7e4039,#66332e);color:#fff1ed;border-radius:10px;padding:10px 15px;font-weight:700;font-size:10px;letter-spacing:.03em;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff14}
.dangerBtn:hover{background:linear-gradient(#914b43,#743832);border-color:#e18e8068}
.dangerBtn:focus-visible{outline:2px solid #e8b0a6;outline-offset:2px}

/* Picture library */
[hidden]{display:none!important}
.galleryWrap{max-width:1180px;margin:auto;padding:38px 28px 64px}.galleryHeading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:20px 0 30px}.galleryHeading h1{font:clamp(30px,4vw,46px)/1.15 Georgia,serif;color:var(--cream);margin:12px 0}.galleryHeading p{color:var(--muted);line-height:1.6;max-width:620px}.galleryHeading button{white-space:nowrap}.motifGrid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.motifCard{display:block;text-align:left;padding:0;overflow:hidden;border:1px solid #d5b27d26;border-radius:20px;background:#1b211e;color:var(--cream);cursor:pointer;transition:transform .18s,border-color .18s}.motifCard:hover{transform:translateY(-3px);border-color:#d5b27d88}.motifCard img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.motifCaption{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px}.motifCaption strong{font:24px Georgia,serif}.motifCaption small{display:block;color:var(--muted);font-size:12px;margin-top:7px}.motifStatus{font-size:12px;color:#e1c795;text-align:right}.continuePanel{display:flex;gap:26px;align-items:center;border:1px solid #d5b27d35;background:#20261f;padding:18px;border-radius:20px;margin-bottom:40px}.continuePanel img{width:210px;aspect-ratio:4/3;object-fit:cover;border-radius:12px}.continuePanel h2{font:28px Georgia,serif;margin:10px 0}.continuePanel p{color:var(--muted)}.previousMotifs{margin-top:35px;color:var(--muted)}.previousMotifs summary{cursor:pointer;margin-bottom:20px}
#motifDialog{padding:0;border:1px solid #d5b27d55;border-radius:22px;background:#171e19;color:var(--cream);width:min(1050px,94vw);max-height:90vh;overflow:auto}#motifDialog::backdrop{background:#050907cc;backdrop-filter:blur(8px)}#motifDialog[open]{display:grid;grid-template-columns:1.5fr 1fr}.motifPreview{display:flex;align-items:center;background:#0d120e;min-height:320px}.motifPreview img{width:100%;height:auto;display:block}.motifInfo{padding:50px 28px 30px;align-self:center}.motifInfo h2{font:32px Georgia,serif}.motifInfo p{line-height:1.6;color:var(--muted)}.motifMeta{color:var(--cream)!important}.motifCredit{font-size:12px}.motifClose{position:absolute;right:12px;top:12px;background:#171e19}.motifInfo button:disabled{opacity:.5;cursor:wait}#motifLoadStatus{font-size:13px;min-height:21px}
@media(max-width:700px){.galleryWrap{padding:20px 14px}.galleryHeading{display:block}.motifGrid{grid-template-columns:1fr;gap:20px}.continuePanel{gap:15px}.continuePanel img{width:100px}.continuePanel h2{font-size:22px}#motifDialog[open]{display:block}.motifPreview{min-height:0}.motifInfo{padding:22px}.motifInfo h2{margin-top:8px}.playStats{flex-wrap:wrap}}

.pieceCountLabel{display:block;font-size:13px;color:var(--muted);margin:22px 0 8px}#pieceCount{width:100%;padding:12px;border-radius:10px;background:#242d25;color:var(--cream);border:1px solid #d5b27d66;font:inherit}#pieceCount:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.motifPreview img{aspect-ratio:4/3;object-fit:cover;object-position:center}
.libraryFilters{display:flex;gap:16px;justify-content:space-between;align-items:center;margin:0 0 24px;color:var(--muted);font-size:13px}.libraryFilters select{margin-left:10px;padding:9px 14px;border:1px solid #d5b27d55;border-radius:9px;background:#242d25;color:var(--cream);font:inherit}.libraryFilters select:focus-visible{outline:2px solid var(--gold)}
.developerOnly{display:none!important}.developer .developerOnly{display:revert!important}#bootScreen{position:fixed;inset:0;z-index:200000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#172019;color:var(--cream);padding:30px;text-align:center}#bootScreen h1{font:46px Georgia,serif}.resultGrid{grid-template-columns:1fr 1fr}
.personalLibrary{max-width:1200px;margin:24px auto;padding:24px;color:#f3eee1}.personalHeading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.personalHeading h2{margin:0}.personalCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin-top:20px}.personalCard{background:#ffffff0b;border:1px solid #ffffff20;border-radius:16px;padding:16px}.personalCard img{width:100%;height:160px;object-fit:cover;border-radius:10px}.personalCard h3{overflow-wrap:anywhere}.personalPuzzleList{margin-top:14px;display:grid;gap:8px}.personalPuzzleRow{display:flex;gap:8px;align-items:center}.personalPuzzleRow .softBtn{flex:1}.personalEditor{width:min(780px,94vw);max-height:92vh;overflow:auto;padding:24px;border:1px solid #c4bb9a;border-radius:20px;background:#f6f1e6;color:#20352b}.personalEditor::backdrop{background:#07130ecc}.personalEditor canvas{display:block;width:100%;height:auto;touch-action:none;background:#d9d2bd;border-radius:10px;cursor:grab}.personalControls{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.personalControls label{display:grid;gap:7px;font-size:14px}.personalControls input,.personalControls select{max-width:100%;width:100%;box-sizing:border-box;padding:8px}.personalEditor .softBtn{color:#20352b;background:#e5dfd0;border-color:#b8b09a}.personalEditor .iconBtn{color:#20352b}.personalEditor button:disabled{opacity:.5}#personalEditorStatus,#personalStorageStatus{overflow-wrap:anywhere}#personalStorageStatus{line-height:1.5}#personalQuality{color:#805921}.galleryHeading{flex-wrap:wrap}@media(max-width:520px){.personalControls{grid-template-columns:1fr}.personalEditor{padding:16px}.personalLibrary{padding:16px}}
.personalPuzzleButton{display:flex;align-items:center;gap:9px;text-align:left;white-space:normal;overflow-wrap:anywhere}.personalCard .personalPuzzleButton img{width:52px;height:44px;flex:none;object-fit:cover;border-radius:5px}
.personalEditor .primaryBtn{color:#fff;background:#28503e;border-color:#28503e}.personalEditor .primaryBtn:hover{background:#193a2b}.personalEditor .primaryBtn:disabled{color:#465047;background:#d6dbd4;border-color:#bfc7bd;opacity:1}.personalDeleteDialog{width:min(440px,90vw);padding:24px;border:1px solid #c4bb9a;border-radius:18px;background:#f6f1e6;color:#20352b}.personalDeleteDialog::backdrop{background:#07130ecc}.personalDeleteDialog p{line-height:1.5;overflow-wrap:anywhere}.personalDeleteDialog .softBtn{color:#20352b;background:#e5dfd0}.personalDeleteDialog .primaryBtn{color:#fff;background:#8b322b;border-color:#8b322b}
.backupControls{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.backupControls p{flex-basis:100%;margin:0}.personalBackupDialog{width:min(740px,94vw);max-height:90vh;overflow:auto;padding:24px;border:1px solid #c4bb9a;border-radius:18px;background:#f6f1e6;color:#20352b}.personalBackupDialog::backdrop{background:#07130ecc}.personalBackupDialog p{line-height:1.5}.personalBackupDialog .primaryBtn{background:#28503e;color:white}.personalBackupDialog .softBtn,.personalBackupDialog .iconBtn{color:#20352b;background:#e5dfd0}.personalBackupDialog button:disabled{opacity:.5}.backupPicture{border-top:1px solid #bfc7bd;padding:16px 0;overflow:hidden}.backupPicture>img{width:96px;height:72px;object-fit:cover;float:right;border-radius:8px;margin-left:12px}.backupPicture label{display:flex;gap:10px;align-items:flex-start;margin:12px 0;overflow-wrap:anywhere}.backupPicture input{flex:none;margin-top:4px}.backupPicture h3{overflow-wrap:anywhere}
.dailyChallenge{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:28px;margin:20px 0 36px;border:1px solid #72816b;border-radius:20px;background:#f4efdf;color:#243b2d}.dailyChallenge h2{font-size:28px;margin:10px 0}.dailyChallenge p{line-height:1.6}.dailyChallenge .primaryBtn{background:#294b38;color:#fff}.dailyChallenge .softBtn{background:#e2e5d8;color:#243b2d}.dailyChallenge input{padding:8px;border-radius:8px;border:1px solid #899b86;background:white;color:#243b2d}.dailyRow{display:grid;grid-template-columns:35px 1fr auto;gap:10px;padding:12px 8px;border-bottom:1px solid #ccd0bf}.dailyRow.me{background:#d7e5cd;font-weight:700}.dailyChallenge button:disabled{opacity:.5}#dailyResult{line-height:1.6}@media(max-width:720px){.dailyChallenge{grid-template-columns:1fr;padding:18px}.dailyRow{font-size:14px}}
.shopWrap{max-width:1180px;margin:auto;padding:42px 28px 70px;color:#213428}
.shopHero{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:30px;border:1px solid #d7c6a4;border-radius:22px;background:linear-gradient(135deg,#fff8e9,#eff4e7 62%,#e2ebdc);box-shadow:0 24px 58px #00000026}
.shopHero .eyebrow,.shopConfirm .eyebrow{color:#6f654f;letter-spacing:.12em;text-transform:uppercase}
.shopHero h1{font:clamp(30px,4vw,46px)/1.15 Georgia,serif;color:#1f3328;margin:10px 0}
.shopHero p{max-width:670px;margin:0;color:#485a4d;line-height:1.65;font-size:16px}
.shopBalance{white-space:nowrap;padding:15px 19px;border:1px solid #b89148;border-radius:999px;background:#fffdf6;color:#4e3610;font-size:18px;box-shadow:inset 0 0 0 1px #ffffff,0 10px 24px #7b5d2330}
.shopStatus{min-height:24px;margin:24px 0;color:#5b5246;line-height:1.55}
.paidPacks{margin-top:38px;padding-top:30px;border-top:1px solid #d7c6a4;color:#213428}.paidPacks h2{margin:7px 0;font:30px Georgia,serif}.paidPacks>div>p{margin:0;color:#526256}.paidPackItems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}.paidPackCard{display:flex;flex-direction:column;gap:11px;padding:20px;border:1px solid #bda879;border-radius:18px;background:linear-gradient(145deg,#fff9eb,#f3ead5);box-shadow:0 15px 32px #0000001c}.paidPackCard h3{margin:0;font:23px Georgia,serif}.paidPackCard p{margin:0;color:#526256;line-height:1.5}.paidPackContents{font-size:13px;color:#735c32!important}.paidPackFoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto}.paidCheckout{max-height:90vh;overflow:auto}.paidCheckoutContents{margin-top:14px!important;padding:12px;border:1px solid #d8c7a6;border-radius:10px;background:#fffdf7;color:#3d5142!important}.paidCheckoutTotal{display:block;margin-top:15px;font-size:21px;color:#5d3b08}.paidCheckoutSandbox{margin-top:10px!important;font-size:12px;color:#7b5c34!important}.paidCheckoutConsent{display:flex;gap:10px;align-items:flex-start;margin-top:19px;padding:13px;border:1px solid #d5c19c;border-radius:12px;background:#fffdf7;color:#36483c;font-size:13px;line-height:1.5}.paidCheckoutConsent input{flex:none;margin-top:3px}.paidCheckoutStatus{min-height:20px;margin-top:12px!important;font-size:13px}.paidCheckoutRecovery{margin-top:5px}.paidCheckoutRecovery[hidden]{display:none}.paidCheckoutError{color:#9b4034!important}@media(max-width:700px){.paidPackItems{grid-template-columns:1fr}}
.shopItems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.shopCard{display:flex;position:relative;flex-direction:column;min-height:265px;padding:20px;border:1px solid #d8c6a3;border-radius:18px;background:linear-gradient(145deg,#fffdf6,#fbf0df);color:#23372b;box-shadow:0 16px 35px #00000024;overflow:hidden;isolation:isolate}.shopCard:after{content:'';position:absolute;z-index:-1;right:-44px;top:42px;width:150px;height:150px;border-radius:50%;background:#d7c4ef38}
.shopCardHead,.shopCardFoot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.shopIllustration{display:block;width:112px;height:92px;object-fit:contain;object-position:center;margin:8px auto 3px;filter:drop-shadow(0 8px 8px #503b2826);transform:rotate(-2deg);transition:transform .22s ease}.shopCard:nth-child(2n) .shopIllustration{transform:rotate(2deg)}.shopCard:hover .shopIllustration{transform:translateY(-4px) rotate(2deg)}.shopCard:nth-child(2n):hover .shopIllustration{transform:translateY(-4px) rotate(-2deg)}
.shopCard h2{margin:5px 0 8px;font:25px Georgia,serif;color:#213428}
.shopDescription{margin:0;color:#526256;line-height:1.55;font-size:15px}
.shopCardFoot{margin-top:auto;padding-top:18px}
.shopCardActions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:12px}.shopCardActions button{min-width:90px}.shopDetailsButton{color:#25382c;background:#efe5d4;border-color:#d0bea0}
.shopType,.shopRarity{font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.shopType{color:#5f715f}
.shopRarity{padding:5px 9px;border-radius:999px;background:#e6eedf;color:#385a3d;border:1px solid #c4d3b8}
.shopPrice{color:#5d3b08;font-size:16px}
.shopUse{color:#203a2b;background:#e5eedf;border-color:#aebf9f}
.shopBuy{background:linear-gradient(#315c43,#244933);border-color:#1d3d2b;color:#fff9ef;box-shadow:0 10px 18px #1a33233b}
.shopBuy:hover{background:linear-gradient(#3b6a4e,#2a553c)}
.shopOwned{cursor:default;color:#466047;background:#dfe9d8;border-color:#b8c8ad}
.shopConfirm{width:min(480px,92vw);border:1px solid #d2bf9b;border-radius:20px;padding:28px;background:#fff8ec;color:#23372b;box-shadow:0 30px 80px #0008}
.shopConfirm::backdrop{background:#050a07cc}
.shopConfirm h2{margin:8px 38px 12px 0;font:28px Georgia,serif;color:#213428}
.shopConfirm p{margin:0;color:#526256;line-height:1.6}
.shopConfirmClose{position:absolute;right:16px;top:16px;color:#23372b;background:#eadfcc;border-color:#d0bea0}
.shopConfirm .modalActions{margin-top:24px}
.shopConfirm .softBtn{color:#25382c;background:#efe5d4;border-color:#d0bea0}
.shopConfirm .primaryBtn{background:linear-gradient(#315c43,#244933);border-color:#1d3d2b;color:#fff9ef}
.shopDetails{width:min(520px,92vw);max-height:90vh;overflow:auto}.shopDetailsLocation{margin-top:8px!important}.shopDetailsPrice{display:block;margin-top:16px;color:#5d3b08}.shopPreview{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:180px;margin:16px 0;padding:16px;border:1px solid #c9c7b6;border-radius:16px;background:linear-gradient(135deg,#fff7e8,#e8ede4);color:#294638;overflow:hidden}.shopPreview .shopIllustration{width:150px;height:128px;margin:-5px auto -18px}.shopPreviewCaption{font-size:13px;font-weight:700}.shopPreviewName{font-size:20px;font-weight:700}.shopPreviewSubtitle{font:italic 16px Georgia,serif;color:#a47935}.shopPreviewFrame{width:100%;background:linear-gradient(135deg,#ddeddc,#f1ead9)}.shopPreviewFrame .shopPreviewPicture{display:grid;place-items:center;width:100px;height:75px;border:6px solid #af9dc5;border-radius:10px;background:linear-gradient(135deg,#85b4a4,#ecd6a0);font-size:34px}.shopPreview-sunlit-corner .shopPreviewPicture{border-color:#d8b264;box-shadow:0 0 20px #eedb9a}.shopPreviewTable{background:linear-gradient(#8d9e88,#567363)}.shopPreview-coastal-wood{background:repeating-linear-gradient(8deg,#f7dbb522 0 2px,transparent 2px 10px),linear-gradient(#9c8564,#63553e)}.shopPreviewPiece{display:grid;place-items:center;width:78px;height:60px;border:3px solid #fffaf0;border-radius:9px;background:#e4b49c;font-size:32px}.shopPreviewSnap{background:#ecede4}.shopPreviewBurst{display:grid;place-items:center;width:68px;height:68px;border:4px solid #e89fca;border-radius:50%;background:#fff4f9;color:#ba5e97;font-size:34px}.shopPreview-soft-glow .shopPreviewBurst{border-color:#eac978;box-shadow:0 0 24px #ebd782;background:#fff7d8;color:#ae8433}.shopPreview .shopPreviewCaption{color:inherit}
.shopPreviewBurst{position:relative}.shopPreviewPetal{position:absolute;left:calc(50% - 5px);top:calc(50% - 6px);width:9px;height:13px;border-radius:9px 9px 3px 9px;background:#f4a9d0;opacity:0}.shopPreviewPetal:nth-child(2n){background:#f7d27c}.shopPreviewPetal:nth-child(1){--dx:31px;--dy:-21px}.shopPreviewPetal:nth-child(2){--dx:35px;--dy:18px}.shopPreviewPetal:nth-child(3){--dx:0;--dy:37px}.shopPreviewPetal:nth-child(4){--dx:-33px;--dy:17px}.shopPreviewPetal:nth-child(5){--dx:-29px;--dy:-23px}.shopPreviewPetal:nth-child(6){--dx:0;--dy:-39px}.shopPreviewPlaying .shopPreviewPetal{animation:petalPop .78s ease-out both}.shopPreview-soft-glow .shopPreviewPlaying{animation:shopPreviewGlow .86s ease-out both}@keyframes shopPreviewGlow{0%{box-shadow:0 0 0 #ebd782}40%{box-shadow:0 0 35px 12px #ebd782}100%{box-shadow:0 0 24px #ebd782}}.shopPreviewReplay{margin-top:7px;padding:7px 12px;color:#25382c;background:#fff9ed;border-color:#cdbd9e;font-size:12px}@media(prefers-reduced-motion:reduce){.shopIllustration,.shopCard:hover .shopIllustration,.shopCard:nth-child(2n):hover .shopIllustration{transform:none;transition:none}.shopPreviewPlaying .shopPreviewPetal,.shopPreview-soft-glow .shopPreviewPlaying{animation:none}}
.purchaseAccountDialog{width:min(520px,92vw);padding:28px;border:1px solid #d5b27d66;border-radius:20px;background:linear-gradient(#1b2520,#101714);color:#f3eadb;box-shadow:0 30px 80px #0008}.purchaseAccountDialog::backdrop{background:#050907cc;backdrop-filter:blur(6px)}.purchaseAccountDialog h2{margin:8px 38px 12px 0;font:28px Georgia,serif}.purchaseClose{position:absolute;right:16px;top:16px}.purchaseLead,.purchaseHint,.purchaseStatus,.purchaseEmpty{line-height:1.6;color:#c5c8b8}.purchaseHint{font-size:12px}.purchaseStatus{min-height:24px}.purchaseError{color:#ffb8aa}.purchaseForm{display:grid;gap:9px;margin-top:20px}.purchaseForm label,.purchaseLabel{font-size:12px;color:#c9b48e}.purchaseForm input{width:100%;padding:12px;border:1px solid #8d9d7c;background:#0d1510;color:#f8f2e6;border-radius:10px;font:inherit}.purchaseForm .primaryBtn{justify-self:start}.purchaseActions{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}.purchaseSummary{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px;border:1px solid #95a98544;border-radius:12px;background:#dce8c50c}.purchaseSummary div{display:grid;gap:5px}.purchaseSummary strong{font-size:16px}.purchaseActive{padding:5px 9px;border-radius:999px;background:#355d3b;color:#ecf6db;font-size:11px}.purchaseAccountDialog h3{margin:24px 0 10px;font:20px Georgia,serif}.purchaseEntitlements{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}.purchaseEntitlements li{display:flex;justify-content:space-between;gap:12px;padding:12px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff10}.purchaseEntitlements span{font-size:11px;color:#b9c7a8;text-align:right}@media(max-width:700px){.accountBtn{font-size:0;min-width:84px;height:40px;padding:0 10px}.accountBtn:after{content:'Purchases';font-size:12px}.purchaseAccountDialog{padding:24px 18px}.purchaseEntitlements li{align-items:flex-start;flex-direction:column}.purchaseEntitlements span{text-align:left}}
@media(max-width:700px){.shopWrap{padding:20px 14px}.shopHero{display:block}.shopBalance{display:inline-block;margin-top:18px}.shopItems{grid-template-columns:1fr;gap:14px}.shopCard{min-height:210px}}
.playerIdentity #playerCosmeticTitle{display:block;color:#ead38f;font:italic 12px Georgia,serif;margin-top:3px}html[data-cosmetic-frame="lavender-window"] .motifCard,html[data-cosmetic-frame="lavender-window"] .playerStrip{border-color:#b998d977;box-shadow:inset 0 0 0 3px #d9c4ef12}html[data-cosmetic-frame="sunlit-corner"] .motifCard,html[data-cosmetic-frame="sunlit-corner"] .playerStrip{border-color:#e6c37688;box-shadow:inset 0 0 0 3px #fff0bd14}html[data-cosmetic-table="linen-morning"] .stage{--table-pattern:radial-gradient(ellipse at 24% 5%,#fff8e82b,transparent 60%),repeating-linear-gradient(90deg,#fff7e607 0 1px,transparent 1px 7px)}html[data-cosmetic-table="coastal-wood"] .stage{--table-pattern:repeating-linear-gradient(8deg,#d9eeeb0b 0 2px,transparent 2px 10px)}
.dailyChallenge .eyebrow{color:#566b4e}
/* Per-puzzle leaderboards */
.playerStrip{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 24px;border:1px solid #82977855;border-radius:18px;background:#213126;margin:8px 0 26px}.playerStrip>div{display:flex;align-items:center;gap:14px;flex:1;flex-wrap:wrap}.playerStrip .eyebrow{font-size:10px}.playerStrip p{flex-basis:100%;margin:0}.playerStrip p:empty{display:none}.puzzleBoard{border-top:1px solid #8e9c7655;margin-top:24px;padding-top:18px}.boardPeriods,.boardActions{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.boardPeriods button{padding:8px 10px;font-size:12px}.boardPeriods button[aria-pressed=true]{background:#d3dfb4;color:#18251b}.boardTable{border-collapse:collapse;width:100%;font-size:13px;margin:16px 0}.boardTable th{text-align:left;color:#bec9b4;font-size:11px}.boardTable th,.boardTable td{padding:10px 5px;border-bottom:1px solid #76846344}.boardTable td:nth-child(2){overflow-wrap:anywhere}.boardTable td:nth-child(3){white-space:nowrap;font-variant-numeric:tabular-nums}.boardTable .me{background:#43593c55}.boardOwn,.boardBest{color:#e6efcd!important;font-size:13px}.puzzleBoard small,.leaderDialog small{color:#c1c7b8;line-height:1.6;display:block}.leaderDialog{width:min(760px,94vw);max-height:90vh;overflow:auto;border:1px solid #93a57b77;border-radius:20px;background:#1b291f;color:#f3efdf;padding:28px}.leaderDialog::backdrop{background:#050a07cc}.leaderClose{float:right}.boardSearch{display:flex;align-items:end;gap:10px;margin:16px 0}.boardSearch label{flex:1}.boardSearch input{display:block;width:100%;padding:10px;margin-top:5px;background:#0e1a12;border:1px solid #92a27c;border-radius:8px;color:#f4efdf;box-sizing:border-box}.rankResult{margin:20px 0}.rankResult h3{font-size:23px}.resultPositions{font-size:18px;color:#d7e8bb}#puzzlePause{position:fixed;inset:0;z-index:3000;background:#132018;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px;color:#f4efdf;gap:14px}#puzzlePause[hidden]{display:none}#puzzlePause p{max-width:460px;line-height:1.6}.puzzle-paused #stage,.puzzle-paused .previewBack,.puzzle-paused .previewOverlay{visibility:hidden!important}.puzzle-paused #screen-play .hud{visibility:hidden!important}.puzzle-paused #world{visibility:hidden!important}#autoJoinBtn[hidden]{display:none!important}
@media(max-width:700px){.playerStrip{padding:16px}.playerStrip>div{align-items:start;flex-direction:column}.leaderDialog{padding:18px}.boardTable{font-size:12px}.boardTable th,.boardTable td{padding:9px 3px}.boardSearch{flex-wrap:wrap}.boardPeriods button{flex:1}.rankResult{font-size:14px}}

/* Visual delight pack: decorative bitmap art appears only at reward, daily and journey moments. */
.featuredDaily{display:flex;align-items:center;gap:8px;max-width:340px;text-align:left}.featuredDaily img{width:58px;height:39px;object-fit:contain;flex:none;filter:drop-shadow(0 5px 6px #08120b44)}.featuredDaily span{min-width:0}.journeyMascot{width:76px;height:76px;flex:none;object-fit:contain;filter:drop-shadow(0 8px 9px #08120b55)}.playerJourney{display:flex;align-items:center;gap:9px;flex:1 1 290px;padding:10px 13px;border-radius:16px;background:linear-gradient(135deg,#344938,#263a2b);border:1px solid #8ba07855;color:#f4f0df}.journeyLevel{display:grid;place-items:center;width:33px;height:33px;flex:none;border-radius:50%;background:#f0c965;color:#34402a;font-weight:800;box-shadow:0 2px 0 #a77b2d}.journeyCopy{display:grid;gap:3px;min-width:0;flex:1}.journeyCopy strong{font-size:14px}.journeyCopy small{font-size:11px;color:#cfdbbf}.journeyTrack{height:7px;border-radius:99px;background:#101d164d;overflow:hidden}.journeyFill{height:100%;min-width:5px;border-radius:inherit;background:linear-gradient(90deg,#f1c860,#d5e69e);transition:width .35s ease}.journeyFill i{display:none}.journeyMilestone{font-size:11px;color:#f0dda1}.completionRewardArt{display:block;width:clamp(82px,15vw,118px);height:auto;margin:0 auto 4px;filter:drop-shadow(0 10px 13px #16110b77);animation:rewardArtIn .48s cubic-bezier(.18,.82,.25,1) both}@keyframes rewardArtIn{from{opacity:0;transform:scale(.72) rotate(-7deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@media(max-width:720px){.featuredDaily{max-width:100%;flex-basis:100%}.journeyMascot{width:66px;height:66px}.playerJourney{min-width:0;flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.journeyFill{transition:none}.completionRewardArt{animation:none}}

/* G3 developer-only effect lab */
.effectLab>.devLabel{display:block;cursor:pointer;list-style:none}.effectLab>.devLabel::-webkit-details-marker{display:none}.effectLab>.devLabel::after{content:"＋";float:right;color:#d6b277}.effectLab[open]>.devLabel::after{content:"−"}
.effectLabHint{font-size:9px;line-height:1.45;color:#a99e90;margin:0 0 8px}.effectGrid input[type=color]{grid-column:1/-1;width:100%;height:32px;padding:2px;border:1px solid #ffffff18;border-radius:7px;background:#ffffff0b}.effectGrid input[type=range]{min-height:24px;touch-action:pan-y}.effectLabButtons{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px}.effectCompare{grid-template-columns:repeat(2,1fr)}.effectLabButtons .devMini{min-height:34px}.effectTransfer{margin-top:8px;color:#aaa094;font-size:9px}.effectTransfer summary{cursor:pointer;padding:7px 0}.effectTransfer textarea{box-sizing:border-box;width:100%;resize:vertical;background:#090b0e;color:#d9d0c4;border:1px solid #ffffff20;border-radius:7px;padding:8px;font:9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}.effectTransfer .qaHint{display:block;min-height:1.4em}
@media(max-width:600px){.devPanel{left:10px;right:10px;top:max(10px,env(safe-area-inset-top));width:auto;max-height:calc(100dvh - 20px - env(safe-area-inset-top));border-radius:13px}.devBody{padding:10px}.effectLabButtons .devMini{font-size:10px;min-height:40px}.effectGrid input[type=range]{height:28px}}

/* G3 developer-only effect lab */
.effectLab>.devLabel{display:block;cursor:pointer;list-style:none}.effectLab>.devLabel::-webkit-details-marker{display:none}.effectLab>.devLabel::after{content:"＋";float:right;color:#d6b277}.effectLab[open]>.devLabel::after{content:"−"}
.effectLabHint{font-size:9px;line-height:1.45;color:#a99e90;margin:0 0 8px}.effectGrid input[type=color]{grid-column:1/-1;width:100%;height:32px;padding:2px;border:1px solid #ffffff18;border-radius:7px;background:#ffffff0b}.effectGrid input[type=range]{min-height:24px;touch-action:pan-y}.effectLabButtons{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px}.effectCompare{grid-template-columns:repeat(2,1fr)}.effectLabButtons .devMini{min-height:34px}.effectTransfer{margin-top:8px;color:#aaa094;font-size:9px}.effectTransfer summary{cursor:pointer;padding:7px 0}.effectTransfer textarea{box-sizing:border-box;width:100%;resize:vertical;background:#090b0e;color:#d9d0c4;border:1px solid #ffffff20;border-radius:7px;padding:8px;font:9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}.effectTransfer .qaHint{display:block;min-height:1.4em}
@media(max-width:600px){.devPanel{left:10px;right:10px;top:max(10px,env(safe-area-inset-top));width:auto;max-height:calc(100dvh - 20px - env(safe-area-inset-top));border-radius:13px}.devBody{padding:10px}.effectLabButtons .devMini{font-size:10px;min-height:40px}.effectGrid input[type=range]{height:28px}}

/* G7: reserved bitmap slots and touch/keyboard feedback, no hover requirement. */
.bitmapArt{display:contents}.completionRewardArt{aspect-ratio:1}.paidCheckoutArt .shopIllustration{width:150px;height:128px;margin:0 auto 12px}
.shopCard,.paidPackCard{transition:box-shadow .18s ease,border-color .18s ease}.shopCard:focus-within,.paidPackCard:focus-within{border-color:#9273b6;box-shadow:0 12px 28px #503b2826}.shopCard button:active,.paidPackCard button:active{transform:translateY(1px)}
.shopEffectStage{position:relative;width:176px;height:116px;display:flex;align-items:center;justify-content:center;pointer-events:none}.shopEffectPiece{width:54px;height:54px;border-radius:10px;background:linear-gradient(135deg,#c5abe7,#9373bf);box-shadow:inset 1px 1px 2px #fff9,0 3px 5px #503b2826}.shopEffectPiece+span{background:linear-gradient(135deg,#b5d9ca,#7bab96)}
.shopEffectStage .delightBurst{pointer-events:none}
@media(hover:none){.shopCard:hover .shopIllustration,.shopCard:nth-child(2n):hover .shopIllustration{transform:none}}
@media(prefers-reduced-motion:reduce){.shopCard,.paidPackCard{transition:none}.shopCard button:active,.paidPackCard button:active{transform:none}}
html.reduced-motion .shopIllustration,html.reduced-motion .shopCard:hover .shopIllustration,html.reduced-motion .shopCard:nth-child(2n):hover .shopIllustration{transform:none;transition:none}html.reduced-motion .shopCard,html.reduced-motion .paidPackCard{transition:none}html.reduced-motion .shopCard button:active,html.reduced-motion .paidPackCard button:active{transform:none}html.reduced-motion .completionRewardArt{animation:none}

.packArtCaption{display:block;font-size:12px;line-height:1.4;color:#526256;text-align:center;margin-bottom:8px}.paidCheckout:has(#paidCheckoutArt:empty) .packArtCaption{display:none}

/* Transient G8 debug comparison, never stored in a player profile. */
html.qa-fx-off .snapLight,
html.qa-fx-off .joinGlimpse,
html.qa-fx-off #delightEffects {
  visibility:hidden!important; animation:none!important;
}
.qaFrameHint {font-size:11px;line-height:1.45;color:#c7bda8}
#qaFrameResults {max-height:320px;overflow:auto;white-space:pre-wrap;font-size:10px}

/* Opt-in P0 diagnostics: no blur/filter and no animation while sampling. */
.performancePanel{position:fixed;z-index:100000;right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));width:min(340px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;background:#fffaf0;color:#27362d;border:1px solid #b8b2a4;border-radius:12px;box-shadow:0 2px 8px #0002;font:13px/1.4 system-ui,sans-serif;contain:layout style}
.performancePanel[hidden]{display:none!important}.performanceToggle{width:100%;min-height:44px;background:#27362d;color:white;border:0;padding:8px 12px;text-align:left;cursor:pointer;border-radius:11px}.performanceBody{padding:0 12px 12px}.performancePanel.collapsed{width:auto;max-width:calc(100vw - 16px)}.performancePanel.collapsed .performanceBody{display:none}.performanceActions{display:flex;flex-wrap:wrap;gap:6px}.performanceActions button{min-height:44px;padding:6px 10px;border:1px solid #9d9587;border-radius:8px;background:#f0e9dc;color:#27362d;font:inherit;cursor:pointer}.performanceActions button:disabled{opacity:.5}.performancePanel textarea{width:100%;box-sizing:border-box;color:#27362d;background:white;font:11px/1.4 monospace}.performancePanel p{margin:10px 0}.performancePanel button:focus-visible{outline:3px solid #7648cc;outline-offset:2px}
/* Information stays inside the existing Settings overlay, outside the table. */
#settingsBack .settingsInformation nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:4px 20px}
#settingsBack .settingsInformation a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:7px 2px;color:#6530a3;font-weight:800;text-underline-offset:3px}
#settingsBack .settingsInformation a:focus-visible{outline:3px solid #7330c1;outline-offset:3px;border-radius:4px}