/* Sun Bird puzzle experience — isolated from the commerce and gallery systems. */

/* Pointy-top geometry: 3–4–3 rows, with every neighboring edge shared. */
.cover-honeycomb .hc-grid{
  --hc-cell:clamp(115px,11.875vw,170px);
  width:calc(var(--hc-cell) * 4);
  height:calc((var(--hc-cell) / .866) * 2.5);
}
.cover-honeycomb .hc-1{top:0;left:calc(var(--hc-cell) * .5)}
.cover-honeycomb .hc-2{top:0;left:calc(var(--hc-cell) * 1.5)}
.cover-honeycomb .hc-3{top:0;left:calc(var(--hc-cell) * 2.5)}
.cover-honeycomb .hc-4{top:calc((var(--hc-cell) / .866) * .75);left:0}
.cover-honeycomb .hc-5{top:calc((var(--hc-cell) / .866) * .75);left:var(--hc-cell)}
.cover-honeycomb .hc-6{top:calc((var(--hc-cell) / .866) * .75);left:calc(var(--hc-cell) * 2)}
.cover-honeycomb .hc-7{top:calc((var(--hc-cell) / .866) * .75);left:calc(var(--hc-cell) * 3)}
.cover-honeycomb .hc-8{top:calc((var(--hc-cell) / .866) * 1.5);left:calc(var(--hc-cell) * .5);--hc-light:#ffe58a;--hc-base:#f7b51a;--hc-deep:#bd6b09}
.cover-honeycomb .hc-9{top:calc((var(--hc-cell) / .866) * 1.5);left:calc(var(--hc-cell) * 1.5);--hc-light:#ffd876;--hc-base:#eaa018;--hc-deep:#a95508}
.cover-honeycomb .hc-10{top:calc((var(--hc-cell) / .866) * 1.5);left:calc(var(--hc-cell) * 2.5);--hc-light:#fff0a0;--hc-base:#f2bd2f;--hc-deep:#b86a0d}
.cover-honeycomb .hc-cell{font-family:'Shantell Sans',cursive;font-style:normal}
.cover-honeycomb .hc-cell .hc-label{font-family:inherit;font-weight:500;font-size:clamp(.8rem,1.6vw,1rem);line-height:1.08;max-width:90%;overflow-wrap:normal;word-break:normal;hyphens:none;transform:none}
.cover-honeycomb .hc-placeholder{pointer-events:none;filter:saturate(.82);opacity:.82}
.cover-honeycomb .hc-placeholder::after{opacity:.38}

.puzzle-tier{--puzzle-ink:#4e341e;--puzzle-honey:#f2bd2f;--puzzle-paper:#f7efe2;--puzzle-blue:#168eaa;--puzzle-red:#d84923;background:#e7c98f}
.puzzle-tier::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 12% 18%,rgba(255,255,255,.7) 0 2px,transparent 3px),
  radial-gradient(circle at 82% 72%,rgba(78,52,30,.12) 0 1px,transparent 2px),
  linear-gradient(135deg,rgba(255,255,255,.22),transparent 40%);background-size:41px 37px,33px 29px,100% 100%;pointer-events:none}
.puzzle-tier-inner{position:relative;z-index:1;max-width:1320px;padding-top:4.6rem;padding-bottom:2.5rem;display:block}
.puzzle-heading{text-align:center;max-width:720px;margin:0 auto 1.15rem}
.puzzle-heading h2{font-size:clamp(2rem,4.3vw,4rem);line-height:1;margin:.12rem 0 .55rem;color:var(--puzzle-ink)}
.puzzle-heading>p:last-child{font-size:clamp(1rem,1.5vw,1.18rem)}
.puzzle-kicker{color:#8b5109;font-size:1rem;margin:0}
.puzzle-layout{display:grid;grid-template-columns:minmax(430px,1.08fr) minmax(320px,.92fr);gap:clamp(1.2rem,3vw,3rem);align-items:center}

.sun-bird-game,.puzzle-product{background:rgba(247,239,226,.94);color:var(--puzzle-ink);filter:drop-shadow(0 14px 20px rgba(70,53,31,.2));clip-path:polygon(0 2%,3% .5%,7% 2%,12% .4%,18% 1.8%,24% .2%,31% 1.7%,38% .4%,45% 2%,53% .3%,60% 1.8%,68% .2%,76% 1.8%,84% .4%,91% 2%,97% .5%,100% 1.7%,100% 98%,96% 99.4%,90% 98%,84% 99.5%,77% 98.2%,69% 99.6%,61% 98%,53% 99.5%,45% 98.1%,37% 99.6%,29% 98%,21% 99.4%,13% 98%,6% 99.5%,0 98%)}
.sun-bird-game{padding:1.5rem 1.6rem 1.35rem}
.puzzle-game-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.puzzle-game-head h3{font-size:clamp(1.28rem,2vw,1.7rem);margin:0 0 .18rem}
.puzzle-game-head p{font-size:.95rem;line-height:1.4;margin:0;max-width:46ch}
.puzzle-reset{min-height:44px;border:2px solid var(--puzzle-ink);background:#fff8e8;color:var(--puzzle-ink);font:600 .9rem 'Shantell Sans',cursive;padding:.55rem .85rem;cursor:pointer;transform:rotate(1deg);white-space:nowrap}
.puzzle-reset:hover{background:#ffe69a}.puzzle-reset:focus-visible,.sun-bird-piece:focus-visible{outline:4px solid #168eaa;outline-offset:4px}

.puzzle-playground{position:relative;min-height:400px;display:grid;grid-template-columns:minmax(205px,260px) minmax(190px,1fr);gap:clamp(1rem,2.5vw,2rem);align-items:center;isolation:isolate}
.sun-bird-board{position:relative;width:100%;aspect-ratio:2/3;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr);background:#c9aa75;padding:5px;gap:2px;box-shadow:0 12px 23px rgba(66,41,17,.3),inset 0 0 0 2px rgba(255,255,255,.25);transform:rotate(-1deg);border:3px solid #5b3b20}
.sun-bird-board::before{content:"";position:absolute;inset:5px;background:url('sun-bird-puzzle.webp') center/100% 100% no-repeat;opacity:.18;filter:saturate(.65);pointer-events:none}
.puzzle-shape-a{--piece-shape:polygon(0 0,39% 0,39% 10%,47% 18%,55% 15%,61% 8%,61% 0,100% 0,100% 100%,63% 100%,63% 91%,57% 85%,49% 83%,42% 88%,42% 100%,0 100%)}
.puzzle-shape-b{--piece-shape:polygon(0 0,100% 0,100% 39%,90% 39%,82% 47%,85% 55%,92% 61%,100% 61%,100% 100%,0 100%,0 62%,9% 62%,15% 57%,17% 49%,12% 42%,0 42%)}
.puzzle-shape-c{--piece-shape:polygon(0 0,38% 0,38% 9%,43% 15%,51% 17%,58% 12%,58% 0,100% 0,100% 42%,91% 42%,85% 48%,83% 56%,90% 63%,100% 63%,100% 100%,0 100%,0 58%,8% 58%,15% 53%,17% 45%,11% 38%,0 38%)}
.sun-bird-target,.sun-bird-piece{background-image:url('sun-bird-puzzle.webp');background-size:200% 500%;background-position:var(--x) var(--y);background-repeat:no-repeat;clip-path:var(--piece-shape)}
.sun-bird-target{position:relative;background-image:linear-gradient(135deg,rgba(78,52,30,.12),rgba(255,255,255,.32));border:2px dashed rgba(78,52,30,.48);box-shadow:inset 0 3px 10px rgba(78,52,30,.2)}
.sun-bird-target::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;font:600 .72rem 'Shantell Sans',cursive;color:rgba(78,52,30,.54)}
.sun-bird-target.filled{background-image:url('sun-bird-puzzle.webp');border-color:transparent;animation:puzzle-piece-land .3s cubic-bezier(.18,.85,.28,1.35)}
.sun-bird-target.filled::after{display:none}

.puzzle-piece-tray{position:relative;min-height:390px;border:2px dashed rgba(78,52,30,.25);border-radius:34px 16px 31px 19px;background:rgba(255,250,240,.45);box-shadow:inset 0 0 30px rgba(115,72,22,.08)}
.puzzle-tray-label{position:absolute;left:1rem;top:-1.45rem;z-index:6;color:rgba(78,52,30,.68);font-size:.78rem;transform:rotate(-3deg)}
.sun-bird-piece{position:absolute;z-index:4;left:var(--piece-left);top:var(--piece-top);width:clamp(68px,7vw,80px);aspect-ratio:1.67;border:2px solid var(--puzzle-ink);cursor:grab;touch-action:none;box-shadow:0 8px 14px rgba(55,33,12,.35);transition:transform .28s cubic-bezier(.22,.7,.18,1),opacity .2s,filter .18s}
.sun-bird-piece:hover{filter:brightness(1.08) saturate(1.06);z-index:5}.sun-bird-piece:active{cursor:grabbing}.sun-bird-piece.dragging{z-index:12;transition:none;filter:brightness(1.08);box-shadow:0 18px 26px rgba(55,33,12,.46)}
.sun-bird-piece.placed{opacity:0;pointer-events:none}
.sun-bird-game.complete .sun-bird-board{animation:puzzle-board-celebrate .65s cubic-bezier(.18,.85,.28,1.25)}
.puzzle-status{text-align:center;margin:.75rem 0 0;color:#7d4807;font-size:1rem;min-height:1.5em}

.puzzle-product{padding:1.9rem;transition:transform .5s ease,filter .5s ease}
.puzzle-product[data-revealed="true"]{transform:rotate(.3deg) scale(1.015);filter:drop-shadow(0 18px 24px rgba(70,53,31,.28))}
.puzzle-tin{position:relative;width:min(88%,360px);aspect-ratio:1.46;margin:0 auto 1.2rem;perspective:900px;transform:rotate(-2deg)}
.puzzle-tin-lid{position:absolute;inset:0 0 15% 0;border:4px solid #9b8867;border-radius:18px;background:#b9aa8c;padding:9px;box-shadow:0 20px 27px rgba(55,36,17,.28),inset 0 0 0 3px rgba(255,255,255,.35);overflow:hidden;transform:rotateX(4deg)}
.puzzle-tin-lid img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;border-radius:9px;display:block}
.puzzle-tin-side{position:absolute;left:4%;right:4%;bottom:0;height:25%;border:3px solid #75664f;border-radius:0 0 14px 14px;background:linear-gradient(#cbbd9e,#9f8e70);display:flex;align-items:end;justify-content:space-between;padding:.35rem .75rem;color:#3f3020;font:600 .72rem 'Shantell Sans',cursive;box-shadow:0 10px 16px rgba(55,36,17,.3);z-index:-1}
.puzzle-product-copy>p.hand{color:#8b5109;margin:0}.puzzle-product-copy h3{font-size:clamp(1.45rem,2.2vw,2rem);margin:.08rem 0 .55rem}.puzzle-product-copy>p:not(.hand):not(.puzzle-checkout-note){line-height:1.55}
.puzzle-facts{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.4rem}.puzzle-facts li{position:relative;padding-left:1.35rem}.puzzle-facts li::before{content:"";position:absolute;left:0;top:.48em;width:.66rem;height:.66rem;background:var(--puzzle-honey);clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%)}
.puzzle-checkout{display:inline-flex;border:0;font:inherit}
.puzzle-checkout:disabled{opacity:.7;cursor:wait;filter:saturate(.7)}
.puzzle-checkout-note{font-size:.8rem;line-height:1.35;opacity:.7;margin:.55rem 0 0}
.puzzle-checkout-error{max-width:34rem;margin:.75rem 0 0;padding:.7rem .85rem;border:1px solid rgba(139,53,31,.34);border-radius:12px;background:rgba(255,245,231,.84);color:#743220;font-size:.82rem;line-height:1.4}

@keyframes puzzle-piece-land{0%{transform:scale(.76)}70%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes puzzle-board-celebrate{45%{transform:rotate(1deg) scale(1.025)}100%{transform:rotate(-1deg) scale(1)}}

@media(max-width:820px){
  /* Five interlocking pairs: alternate half-cell offsets preserve shared edges. */
  .cover-honeycomb .hc-grid{--hc-cell:clamp(78px,24vw,105px);width:calc(var(--hc-cell) * 2.5);height:calc((var(--hc-cell) / .866) * 4)}
  .cover-honeycomb .hc-1,.cover-honeycomb .hc-5,.cover-honeycomb .hc-9{left:0}
  .cover-honeycomb .hc-2,.cover-honeycomb .hc-6,.cover-honeycomb .hc-10{left:var(--hc-cell)}
  .cover-honeycomb .hc-3,.cover-honeycomb .hc-7{left:calc(var(--hc-cell) * .5)}
  .cover-honeycomb .hc-4,.cover-honeycomb .hc-8{left:calc(var(--hc-cell) * 1.5)}
  .cover-honeycomb .hc-1,.cover-honeycomb .hc-2{top:0}
  .cover-honeycomb .hc-3,.cover-honeycomb .hc-4{top:calc((var(--hc-cell) / .866) * .75)}
  .cover-honeycomb .hc-5,.cover-honeycomb .hc-6{top:calc((var(--hc-cell) / .866) * 1.5)}
  .cover-honeycomb .hc-7,.cover-honeycomb .hc-8{top:calc((var(--hc-cell) / .866) * 2.25)}
  .cover-honeycomb .hc-9,.cover-honeycomb .hc-10{top:calc((var(--hc-cell) / .866) * 3)}
  .cover-honeycomb .hc-cell .hc-label{font-family:inherit;font-size:clamp(.94rem,4.5vw,1.125rem);line-height:1.04;max-width:90%;transform:none}
  /* "Construction" and "Community" are the longest label words; at the small
     cell sizes (cell caps at 105px, label box ~77-89px) they overrun the
     hexagon's inscribed width and the clip-path cuts them off. */
  .cover-honeycomb .hc-8 .hc-label,.cover-honeycomb .hc-10 .hc-label{font-size:clamp(.6rem,2.6vw,.7rem);max-width:96%}
  .puzzle-tier-inner{padding-top:4rem;padding-bottom:2rem}
  .puzzle-heading{margin-bottom:1rem}.puzzle-heading h2{font-size:clamp(2rem,10vw,3.15rem)}
  .puzzle-layout{grid-template-columns:1fr;gap:1rem}
  .puzzle-playground{grid-template-columns:minmax(190px,245px) minmax(180px,1fr);min-height:380px}
  .sun-bird-board{width:100%}
  .puzzle-product{display:grid;grid-template-columns:minmax(135px,.8fr) 1.2fr;gap:1rem;align-items:center}
  .puzzle-tin{width:100%;margin:0}
}

@media(max-width:560px){
  .puzzle-tier-inner{padding-left:1rem;padding-right:1rem}
  .puzzle-heading>p:last-child{font-size:1rem}
  .sun-bird-game{padding:1.25rem 1rem 1.1rem}
  .puzzle-game-head{display:block}.puzzle-reset{margin-top:.7rem}
  .puzzle-playground{grid-template-columns:1fr;min-height:0;gap:1rem}
  .sun-bird-board{width:min(100%,230px);margin:0 auto}
  .puzzle-piece-tray{min-height:250px}
  .sun-bird-piece{width:clamp(64px,20vw,78px)}
  .puzzle-product{display:block;padding:1.5rem 1.2rem}.puzzle-tin{width:min(85%,300px);margin:0 auto 1rem}
}

@media(prefers-reduced-motion:reduce){
  .sun-bird-target,.sun-bird-board{animation:none!important}
  .sun-bird-piece,.puzzle-product{transition:none!important}
}