/* Find the Treasure — page styles */
.scene.sea { background:linear-gradient(180deg,#8FCBEA 0%, #A9D9F0 45%, #5FA8CE 46%, #7FBCDD 100%); }
.wave-band { position:absolute; left:0; right:0; top:45.2%; height:16px; z-index:1; opacity:.4;
  background:radial-gradient(14px 9px at 20px 0, rgba(255,255,255,.9) 0 60%, transparent 62%);
  background-size:44px 16px; background-repeat:repeat-x; }
.ship-el { position:absolute; right:-4%; top:12%; width:clamp(200px,38vw,380px); aspect-ratio:420/300; z-index:2; animation:ship-rock 5s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes ship-rock { 0%,100%{transform:rotate(-2deg) translateY(0)} 50%{transform:rotate(2deg) translateY(-6px)} }
.ship-el svg { width:100%; height:100%; }

.intro-cluster { position:absolute; left:4%; bottom:26%; z-index:4; display:flex; flex-direction:column; gap:16px; max-width:min(320px,60vw); }
.pirate-el { width:clamp(120px,22vw,200px); flex:none; aspect-ratio:220/310; animation:pirate-bob 2.6s ease-in-out infinite; }
@keyframes pirate-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.pirate-el svg, .pirate-el img { width:100%; height:100%; }
.pirate-bubble { font-size:.98rem; }

.intro-panel { position:absolute; right:3%; bottom:4%; z-index:5; background:rgba(255,251,245,.92); border-radius:22px; box-shadow:var(--shadow); padding:20px 22px; text-align:center; width:min(360px, 60vw); }
.intro-panel h1 { font-size:clamp(1.5rem,4.6vw,2.2rem); }
.intro-panel .tagline { color:var(--body); font-size:.95rem; line-height:1.45; margin:8px 0 14px; }
.intro-panel .micro { margin-top:10px; font-size:.78rem; color:var(--muted); }
@media (max-width:620px) {
  .intro-cluster { left:4%; bottom:auto; top:12%; max-width:70vw; flex-direction:row; align-items:flex-end; }
  .pirate-el { order:-1; }
  .pirate-bubble { align-self:flex-start; }
  .intro-panel { left:50%; right:auto; transform:translateX(-50%); bottom:3%; width:min(420px, calc(100vw - 24px)); }
  .ship-el { right:-14%; top:6%; }
}

/* beach board */
.scene.beach { background:
  radial-gradient(120% 60% at 50% -8%, #A9D9F0 0%, #A9D9F0 34%, transparent 35%),
  linear-gradient(180deg, #7FBCDD 0%, #92CBE6 26%, #F5DFA9 27%, #EFD494 60%, #E8C983 100%); }
.beach-props .prop { position:absolute; z-index:1; pointer-events:none; }
.prop.palm { width:clamp(80px,13vw,150px); aspect-ratio:180/220; }
.prop.palm.p1 { left:-2%; top:14%; } .prop.palm.p2 { right:-2%; bottom:6%; transform:scaleX(-1); display:none; }
@media (min-width:760px){ .prop.palm.p2 { display:block; } }
.prop.map-scrap { width:clamp(70px,10vw,120px); aspect-ratio:200/160; right:2%; top:16%; transform:rotate(8deg); }
.prop svg { width:100%; height:100%; }

.board-wrap { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; padding:14px; padding-top:20px; }
.dig-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(6px,1.6vw,14px); width:100%; max-width:560px; max-height:100%; }
@media (min-aspect-ratio:5/4) { .dig-grid { grid-template-columns:repeat(5,1fr); max-width:760px; } }
.dig-cell { position:relative; aspect-ratio:6/5; border-radius:16px; background:rgba(255,251,245,.28); transition:transform .12s; contain:layout paint; will-change:transform; }
.dig-cell:active { transform:scale(.94); }
.dig-cell .art { position:absolute; inset:4%; pointer-events:none; }
.dig-cell .art svg, .dig-cell .art img { width:100%; height:100%; }
.dig-cell .num { position:absolute; top:4px; left:8px; font-weight:800; font-size:.78rem; color:#8A6A3C; opacity:.85; pointer-events:none; }
.dig-cell.dug { background:transparent; }
.dig-cell .found { position:absolute; inset:2%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; background:var(--cream); border:2px solid #D9B25F; border-radius:14px; box-shadow:0 3px 10px rgba(138,90,60,.28); animation:found-pop .4s cubic-bezier(.34,1.56,.64,1); pointer-events:none; overflow:hidden; padding:2px; }
.dig-cell .found .fimg { font-size:clamp(1rem,4.2vw,1.7rem); line-height:1; }
.dig-cell .found img.fimg { width:56%; height:56%; object-fit:cover; border-radius:8px; font-size:0; }
.dig-cell .found .flab { font-weight:700; font-size:clamp(.5rem,1.9vw,.72rem); color:var(--navy); max-width:96%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@keyframes found-pop { 0%{transform:scale(.3); opacity:0} 100%{transform:scale(1); opacity:1} }

/* dig animation bits */
.dig-cell.digging .art { animation:dig-shake .35s ease-in-out; }
@keyframes dig-shake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-7deg)} 75%{transform:rotate(7deg)} }
.sand-burst { position:absolute; width:8px; height:8px; border-radius:50%; background:#E8C983; pointer-events:none; z-index:20; }

/* pirate corner peek */
.pirate-peek { position:absolute; left:-4px; bottom:-12px; width:clamp(90px,15vw,150px); aspect-ratio:220/300; z-index:8; transform:translateY(105%); transition:transform .5s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
.pirate-peek.show { transform:translateY(12%); }
.pirate-peek svg, .pirate-peek img { width:100%; height:100%; }
.pirate-peek .bubble { position:absolute; left:64%; top:-10%; width:max-content; max-width:52vw; font-size:.88rem; }

/* chest celebration */
.chest-stage { position:absolute; inset:0; z-index:52; display:flex; align-items:center; justify-content:center; background:rgba(30,42,74,.35); opacity:0; transition:opacity .4s; }
.chest-stage.show { opacity:1; }
.chest-holder { width:min(300px,64vw); aspect-ratio:260/220; transform:translateY(60vh) scale(.6); transition:transform .8s cubic-bezier(.4,.1,.3,1.2); }
.chest-stage.show .chest-holder { transform:none; }
.chest-holder.shake { animation:chest-shake .5s ease-in-out 2; }
@keyframes chest-shake { 0%,100%{rotate:0deg} 25%{rotate:-4deg} 75%{rotate:4deg} }
.chest-holder svg, .chest-holder img { width:100%; height:100%; }
.gold-ray { position:absolute; left:50%; top:50%; width:6px; height:120px; background:linear-gradient(180deg,#FFF7DC,transparent); transform-origin:top center; pointer-events:none; animation:ray-spin 2.4s linear infinite; opacity:.85; }
@keyframes ray-spin { to { transform:rotate(360deg); } }