/* pirate «كنز القراصنة» — island beach; palettes switch with body.pal-* (data.js theme.palette) */
:root, .pal-ocean {
  --bg: #fbf3e2; --bg-2: #f3e2bf; --surface: #fffcf5; --surface-2: #fbf3e2;
  --text: #3e2c1c; --muted: #7d6650;
  --accent: #0d6e8a; --accent-2: #f2c14e; --accent-ink: #ffffff;
  --line: rgba(62, 44, 28, .18); --line-soft: rgba(62, 44, 28, .09);
  --sky1: #6cc4ee; --sky2: #d9f3ff; --sea1: #2aa6d0; --sea2: #1b7fae; --band: #e63946; --skin: #e0aa7e;
}
.pal-sunset {
  --accent: #b5452a; --sky1: #ff9e6b; --sky2: #ffe1b0; --sea1: #3a8fb4; --sea2: #23698f; --band: #2a9d8f;
  --line: rgba(181, 69, 42, .2);
}
.pal-lagoon {
  --accent: #12796a; --sky1: #7fdcd0; --sky2: #e4fff8; --sea1: #1fb5a8; --sea2: #13897f; --band: #f4a300;
  --line: rgba(18, 121, 106, .2);
}
body.pirate { background: linear-gradient(180deg, var(--bg-2), var(--bg) 560px), var(--bg); }

/* ---------- intro (rendered art layers in art/*.webp) ---------- */
.p-intro { padding: 0; background: #2aa6d0; display: grid; place-items: center; }
.p-fill { position: absolute; inset: -30px; background: #2aa6d0 url(art/bg.webp) center / cover; filter: blur(20px); transform: scale(1.06); }
.p-stage { position: relative; width: min(100vw, 100dvh * .6); height: 100dvh; overflow: hidden; display: flex; flex-direction: column; align-items: center; color: #fff; }
.p-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.p-glints { position: absolute; inset: 0; pointer-events: none; }
.p-glints i { position: absolute; width: 10px; height: 10px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: pTw 2.4s ease-in-out infinite; }
@keyframes pTw { 50% { opacity: .15; transform: scale(.5); } }

.p-greet { position: relative; z-index: 3; text-align: center; margin-top: max(4dvh, calc(env(safe-area-inset-top) + 18px)); padding-inline: 16px; transition: opacity .5s, transform .5s var(--ease); text-shadow: 0 2px 10px rgba(0, 50, 80, .7), 0 0 3px rgba(0,50,80,.5); }
.p-hello { margin: 0; font: 900 clamp(24px, 7.2vw, 31px)/1.4 var(--f-display); text-wrap: balance; }

.p-map { position: relative; z-index: 3; width: min(86%, 360px, 42dvh); margin-top: 4.5dvh; aspect-ratio: 1; transform: rotate(-3deg); animation: pMap 4.6s ease-in-out infinite; transition: transform .7s var(--ease), opacity .6s; }
.p-map > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 12px rgba(30, 40, 20, .45)); }
@keyframes pMap { 50% { transform: rotate(-1deg) translateY(-6px); } }
.p-xbtn { position: absolute; left: 46%; top: 66%; width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.p-xbtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 50%; }
.p-xmark { position: absolute; inset: 14%; }
.p-xmark::before, .p-xmark::after { content: ''; position: absolute; left: 50%; top: -6%; width: 20%; height: 112%; border-radius: 6px; background: #d62839; box-shadow: 0 2px 0 rgba(0,0,0,.25); transform: translateX(-50%) rotate(45deg); }
.p-xmark::after { transform: translateX(-50%) rotate(-45deg); }
.p-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 14px rgba(255,255,255,.8); animation: pRing 1.6s ease-out infinite; }
@keyframes pRing { 0% { transform: scale(.55); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }

.p-pirate { position: absolute; z-index: 4; left: 3%; bottom: 8dvh; width: min(42%, 200px, 30dvh); pointer-events: none; animation: pBob 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.p-pirate img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 6px rgba(30, 40, 20, .4)); transition: opacity .4s; }
.p-pir-b { position: absolute !important; left: 0; top: 0; opacity: 0; }
@keyframes pBob { 50% { transform: translateY(-6px) rotate(-1deg); } }

.p-hint { position: absolute; z-index: 5; bottom: 3.2dvh; inset-inline: 0; margin: 0; padding-inline: 20px; text-align: center; font: 700 15px/1.4 var(--f-ui); color: #fff; text-shadow: 0 1px 8px rgba(0, 40, 70, .7); animation: pHint 1.8s ease-in-out infinite; transition: opacity .3s; }
@keyframes pHint { 50% { opacity: .6; transform: translateY(-3px); } }

.p-dig { --w: min(66vw, 280px, 33dvh); position: absolute; z-index: 3; left: 50%; bottom: 7dvh; width: var(--w); height: calc(var(--w) * .85); transform: translateX(-26%); pointer-events: none; }
.p-sand { position: absolute; left: 6%; right: 6%; bottom: -6%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, #e9c98a, #d3a95d 70%, rgba(211,169,93,0)); opacity: 0; transform: scale(.4); transition: opacity .4s, transform .6s var(--ease); }
.p-rays { position: absolute; left: -40%; right: -40%; top: -60%; bottom: -30%; border-radius: 50%; opacity: 0; transition: opacity 1s;
  background: repeating-conic-gradient(from 0deg at 50% 62%, rgba(255, 236, 150, .55) 0 7deg, rgba(255, 236, 150, 0) 7deg 20deg); -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 100%); mask: radial-gradient(closest-side, #000 25%, transparent 100%); }
.p-chest { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform: translateY(70%) scale(.8); opacity: 0; transform-origin: 50% 100%; transition: transform .9s var(--spring), opacity .3s; }
.p-chest img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; filter: drop-shadow(0 12px 8px rgba(30, 40, 20, .45)); }
.p-ch-open { opacity: 0; transition: opacity .35s; }
.p-crumb { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #d9b676; animation: pCrumb .9s ease-out forwards; }
@keyframes pCrumb { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

.p-scroll { position: absolute; z-index: 7; left: 50%; top: 16dvh; width: min(96%, 420px); transform: translateX(-50%) scale(.2); transform-origin: 50% 80%; opacity: 0; transition: transform .9s var(--spring), opacity .35s; pointer-events: none; }
.p-scroll > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 14px rgba(30, 30, 10, .5)); }
.p-sc-txt { position: absolute; left: 19%; right: 19%; top: 24%; bottom: 24%; display: grid; align-content: center; justify-items: center; text-align: center; color: #4d2f14; overflow: hidden; }
.p-sc-name { margin: 0; font: 900 clamp(32px, 10.5vw, 46px)/1.1 var(--f-display); color: #5a3418; overflow-wrap: anywhere; }
.p-sc-age { margin: 2px 0 0; display: inline-flex; align-items: center; gap: 8px; font: 700 clamp(12.5px, 3.7vw, 16px)/1.3 var(--f-ui); }
.p-coin { display: inline-grid; place-items: center; width: 40px; height: 40px; background: url(art/coin.webp) center / 100% 100% no-repeat; font: 900 21px/1 var(--f-display); color: #6b3f0a; padding-top: 2px; text-shadow: 0 1px 0 rgba(255,240,170,.8); }
.p-sc-line { margin: 2px 0 0; font: 600 clamp(11.5px, 3.3vw, 14px)/1.35 var(--f-ui); color: #6f4a26; text-wrap: balance; }

/* states */
.p-intro.is-dig .p-map { transform: translateY(26dvh) scale(.25) rotate(20deg); opacity: 0; pointer-events: none; animation: none; }
.p-intro.is-dig .p-hint, .p-intro.is-dig .p-greet { opacity: 0; animation: none; }
.p-intro.is-dig .p-sand { opacity: 1; transform: none; }
.p-intro.is-rise .p-chest { transform: none; opacity: 1; }
.p-intro.is-open .p-ch-open { opacity: 1; } .p-intro.is-open .p-ch-closed { opacity: 0; transition: opacity .35s; }
.p-intro.is-open .p-rays { opacity: 1; animation: pSpin 14s linear infinite; }
@keyframes pSpin { to { transform: rotate(360deg); } }
.p-intro.is-scroll .p-scroll { transform: translateX(-50%) scale(1); opacity: 1; }
.p-intro.is-scroll .p-pir-a { opacity: 0; } .p-intro.is-scroll .p-pir-b { opacity: 1; }
.p-intro.is-scroll .p-pirate { animation: pCheer 1s ease-in-out infinite; }
@keyframes pCheer { 50% { transform: translateY(-10px); } }

/* ---------- details card skin ---------- */
.pirate .card-frame { border: 2px solid #d9b77a; background: linear-gradient(180deg, #fffcf5, #fbf1dc); padding-top: 0; overflow: hidden; }
.pirate .card-hero { display: block; margin: 0 -20px 14px; padding: 14px 0 0; background: linear-gradient(180deg, var(--sky2), var(--sea1) 62%, #f1d391 62%); }
.pirate .card-hero img { width: 190px; height: auto; margin-inline: auto; filter: drop-shadow(0 6px 6px rgba(30,40,20,.35)); }
.pirate .kid { color: #5a3418; }
.pirate .age-badge { background: radial-gradient(circle at 35% 30%, #fff1a8, #f2c14e 55%, #c48a1c); color: #5a3418; }
.pirate .facts .fl { display: block; font: 700 12px/1.3 var(--f-ui); color: var(--accent); }
.pirate .facts li { background: #fffaf0; border-color: #ecd9b4; }
.pirate .cd { background: #fffaf0; border-color: #e1c99a; }
.pirate .notes { border-color: #c48a4c; }
.pirate .notes svg { color: #c48a4c; }

@media (prefers-reduced-motion: reduce) {
  .p-map, .p-pirate, .p-hint, .p-ring, .p-glints i, .p-intro.is-open .p-rays, .p-intro.is-scroll .p-pirate { animation: none !important; }
  .p-chest, .p-scroll, .p-map, .p-ch-open, .p-sand, .p-rays, .p-pirate img { transition-duration: .01s !important; transition-delay: 0s !important; }
}