/* DANA · the house of Gulf pearls. Sea teal, pearl white, sand, a thread of gold; El Messiri for Arabic display,
   Cormorant for Latin display. */
:root {
  --sea: #0B3F46; --sea-2: #11717A; --aqua: #7FD3CF; --pearl: #F6F1EA; --sand: #E8DCC6; --gold: #E8CB8C; --ink: #13272A;
  --ar-d: 'El Messiri', serif; --ar: 'Noto Kufi Arabic', sans-serif; --en-d: 'Cormorant Garamond', serif; --en: Inter, sans-serif;
  --gut: clamp(18px, 3vw, 48px); --ease: cubic-bezier(.2,.75,.2,1);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--sea); color: var(--pearl); -webkit-text-size-adjust: 100%; }
body { font-family: var(--ar); line-height: 1.7; overflow-x: hidden; }
html[lang="en"] body { font-family: var(--en); }
html.story-open { overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.loader { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--sea); transition: opacity .9s, visibility .9s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-pearl, .brand-pearl { width: 34px; height: 34px; border-radius: 50%; background: url(assets/pearl/pearl.png) center / cover; }
.loader-pearl { animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(.88); opacity: .7; } }
.loader-name { font-family: var(--ar-d); font-size: 32px; }

.bar { position: absolute; inset: 0 0 auto; z-index: 10; height: 74px; padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-pearl { width: 18px; height: 18px; }
.brand-ar { font-family: var(--ar-d); font-size: 26px; font-weight: 600; }
.brand-en { font-family: var(--en-d); font-size: 15px; letter-spacing: .4em; opacity: .8; }
.lang { font-family: var(--en); font-size: 13px; letter-spacing: .1em; text-decoration: none; padding: 6px 12px; border: 1px solid rgba(246,241,234,.45); border-radius: 18px; }
html[lang="en"] .lang { font-family: var(--ar); }

/* --- the hero: the strand over a calm, deep sea */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.sea { position: absolute; inset: -6%; background: url(assets/dive/z0.webp?v=20261010220000) 4% 6% / 260% auto; filter: blur(6px) saturate(.9) brightness(.5); transform: scale(1.08); animation: drift 40s ease-in-out infinite alternate; }
.sea::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(11,63,70,0), rgba(6,34,38,.6)); }
@keyframes drift { to { transform: scale(1.14) translate(-2%, 1.5%); } }
.h-words { position: absolute; z-index: 1; left: 0; right: 0; top: 13%; text-align: center; pointer-events: none; }
.kick { font-size: 13px; letter-spacing: .08em; color: var(--gold); }
html[lang="en"] .kick { letter-spacing: .3em; text-transform: uppercase; font-size: 11.5px; }
.h-words h1 { font-family: var(--ar-d); font-weight: 600; font-size: clamp(120px, 19vw, 300px); line-height: 1; color: rgba(246,241,234,.92); text-shadow: 0 10px 60px rgba(0,0,0,.25); }
html[lang="en"] .h-words h1 { font-family: var(--en-d); font-weight: 500; letter-spacing: .28em; margin-inline-start: .28em; font-size: clamp(80px, 13vw, 210px); }
.h-hint { position: absolute; z-index: 3; left: 50%; bottom: 96px; translate: -50% 0; width: min(560px, 88vw); text-align: center; font-size: 14px; font-weight: 300; color: rgba(246,241,234,.78); pointer-events: none; }
.pearl-tag { position: absolute; z-index: 3; left: 0; top: 0; padding: 4px 12px; border-radius: 14px; background: rgba(6,34,38,.7); border: 1px solid rgba(232,203,140,.5); color: var(--gold); font-size: 13px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s; }
.pearl-tag.on { opacity: 1; }
.tales { position: absolute; z-index: 3; left: 50%; bottom: 30px; translate: -50% 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; width: min(720px, 94vw); }
.tales button { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 20px; border: 1px solid rgba(246,241,234,.25); background: rgba(6,34,38,.35); font-size: 13px; cursor: pointer; transition: border-color .2s, background .2s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[dir="rtl"] .tales button { padding: 6px 8px 6px 14px; }
.tales button i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: url(assets/pearl/pearl.png) center / cover; color: var(--ink); }
.tales button:hover, .tales button:focus-visible { border-color: var(--gold); background: rgba(6,34,38,.6); }

/* --- a story, opened out of its pearl */
.story { position: fixed; inset: 0; z-index: 40; background: var(--sea); clip-path: circle(0 at 50% 50%); }
.story[hidden] { display: none; }
.st-img { position: absolute; inset: 0; background: center / cover no-repeat; transform: scale(1.12); transition: transform 2.4s var(--ease); }
.story.in .st-img { transform: none; }
.story::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(4,26,30,.78)); pointer-events: none; }
.st-words { position: absolute; z-index: 1; inset-inline-start: var(--gut); bottom: clamp(40px, 9vh, 90px); max-width: min(560px, 88vw); opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease) .45s, transform .8s var(--ease) .45s; }
.story.in .st-words { opacity: 1; transform: none; }
.st-num { font-family: var(--en-d); font-size: 22px; color: var(--gold); }
.st-title { font-family: var(--ar-d); font-weight: 600; font-size: clamp(40px, 5vw, 76px); line-height: 1.15; margin: 4px 0 10px; }
html[lang="en"] .st-title { font-family: var(--en-d); font-weight: 500; }
.st-text { font-size: clamp(16px, 1.4vw, 19px); font-weight: 300; line-height: 1.85; color: rgba(246,241,234,.9); }
.st-x { position: absolute; z-index: 2; top: 18px; inset-inline-end: var(--gut); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(246,241,234,.5); background: rgba(6,34,38,.4); font-size: 26px; line-height: 1; cursor: pointer; }

.after { min-height: 60vh; display: grid; place-items: center; background: var(--pearl); color: var(--ink); }
.foot { padding: 26px var(--gut); text-align: center; font-size: 13px; background: var(--pearl); color: rgba(19,39,42,.6); }
@media (max-width: 760px) {
  .h-words { top: 11%; }
  .h-hint { bottom: 118px; font-size: 13px; }
  .tales { bottom: 20px; gap: 5px; }
  .tales button { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sea, .loader-pearl { animation: none; } .st-img, .st-words { transition: none; } }

/* ============ below the necklace: pearl-white and sand */
.sec { padding: clamp(80px, 10vw, 140px) 0; }
.light { background: var(--pearl); color: var(--ink); }
.sand { background: var(--sand); color: var(--ink); }
.wrap { width: min(1240px, calc(100% - 2 * var(--gut))); margin: 0 auto; }
.sec .kick, .v-card .kick { color: #9a7a3c; }
.s-head { max-width: 660px; margin-bottom: clamp(36px, 4vw, 60px); }
.sec h2, .v-card h2 { font-family: var(--ar-d); font-weight: 600; font-size: clamp(38px, 4.6vw, 72px); line-height: 1.2; margin: 8px 0 12px; }
html[lang="en"] .sec h2, html[lang="en"] .v-card h2 { font-family: var(--en-d); font-weight: 500; line-height: 1.05; }
.s-note { font-size: 13px; color: rgba(19,39,42,.6); }
.rv { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease) var(--d, 0ms), transform 1s var(--ease) var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }

/* the collection, with a loupe */
.pieces { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.ph { position: relative; aspect-ratio: 1; border-radius: 22px; overflow: hidden; cursor: none; background: #efe8dc; box-shadow: 0 30px 50px -36px rgba(19,39,42,.5); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.lens { position: absolute; left: 0; top: 0; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; pointer-events: none; opacity: 0; scale: .6; background-repeat: no-repeat;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.9), 0 0 0 4px rgba(154,122,60,.45), 0 20px 40px rgba(0,0,0,.35); transition: opacity .25s, scale .3s var(--ease); }
.ph.on .lens { opacity: 1; scale: 1; }
.piece h3 { margin-top: 16px; font-family: var(--ar-d); font-weight: 600; font-size: 24px; }
html[lang="en"] .piece h3 { font-family: var(--en-d); font-weight: 600; font-size: 26px; }
.piece > p { font-size: 14px; color: rgba(19,39,42,.7); }
.pc-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; gap: 10px; }
.pc-row b { font-weight: 600; }
.pc-row a { font-size: 13.5px; color: #9a7a3c; text-underline-offset: 4px; }

/* design your piece */
.b-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.b-stage { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #133f45, #072a2f 70%); display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 40px 70px -40px rgba(7,42,47,.8); }
.b-stage::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--metal, #d9b56a) 55%, transparent); transition: border-color .6s; }
.b-pearl, .b-sheen { grid-area: 1 / 1; width: calc(var(--mm, 9) / 14 * 62%); aspect-ratio: 1; transition: width .6s var(--ease), filter .6s, opacity .6s; }
.b-pearl { z-index: 1; filter: drop-shadow(0 24px 30px rgba(0,0,0,.45)); }
.b-sheen { z-index: 2; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at var(--lx, 32%) var(--ly, 28%), rgba(255,255,255,.6), rgba(255,255,255,0) 26%); }
.b-rule { position: absolute; left: 19%; right: 19%; bottom: 14%; height: 18px; display: flex; justify-content: space-between; border-top: 1px solid rgba(246,241,234,.45); }
.b-rule i { width: 1px; height: 6px; background: rgba(246,241,234,.5); position: relative; }
.b-rule i:nth-child(5n+1) { height: 11px; }
.b-rule span { position: absolute; top: 12px; left: 50%; translate: -50% 0; font-size: 10px; color: rgba(246,241,234,.6); font-family: var(--en); }
.b-size { position: absolute; top: 12%; font-family: var(--en-d); font-size: 22px; color: var(--pearl); }
.b-row { margin-top: 18px; }
.b-l { font-size: 13px; font-weight: 600; color: rgba(19,39,42,.65); margin-bottom: 8px; }
.b-l b { color: var(--ink); margin-inline-start: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 20px; border: 1px solid rgba(19,39,42,.18); background: rgba(255,255,255,.55); font-size: 14px; cursor: pointer; transition: background .2s, border-color .2s; color: var(--ink); }
.chips button small { font-size: 11.5px; opacity: .7; }
.chips [aria-checked="true"] { background: var(--ink); color: var(--pearl); border-color: var(--ink); }
.sw { width: 18px; height: 18px; border-radius: 50%; background: center / cover; }
.mt { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #ffffff88, transparent 50%), var(--m); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
#bSize { width: 100%; accent-color: var(--sea-2); }
.b-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(19,39,42,.15); }
.b-total b { font-family: var(--en-d); font-size: 34px; font-weight: 600; }
html[lang="ar"] .b-total b { font-family: var(--ar-d); }
.btn { display: inline-grid; place-items: center; padding: 15px 22px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: background .25s; }
.btn.ink { background: var(--ink); color: var(--pearl); }
.btn.ink:hover { background: var(--sea-2); }
.btn.line { border: 1px solid currentColor; }
.b-form .btn { width: 100%; margin: 16px 0 10px; }

/* visit */
.visit { position: relative; min-height: 92vh; display: grid; align-items: end; color: var(--ink); }
.v-photo { position: absolute; inset: 0; margin: 0; }
.v-photo img { width: 100%; height: 100%; object-fit: cover; }
.v-card { position: relative; margin: 0 var(--gut) clamp(40px, 6vh, 80px); max-width: 460px; padding: 30px; border-radius: 26px; background: rgba(246,241,234,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.5); }
.v-card h2 { font-size: clamp(32px, 3.4vw, 50px); }
.v-hours { margin-top: 8px; font-size: 14px; color: rgba(19,39,42,.7); }
.v-btns { display: flex; gap: 10px; margin-top: 18px; }

@media (max-width: 900px) {
  .pieces { grid-template-columns: 1fr 1fr; }
  .b-grid { grid-template-columns: 1fr; }
  .b-stage { max-width: 420px; margin: 0 auto; width: 100%; }
}
@media (max-width: 520px) { .pieces { grid-template-columns: 1fr; } .ph { cursor: default; } }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ============ the dive (game.js): one screen, its states on data-state: surface, down, bed, up, result */
.game { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: #0b3f46; color: var(--pearl); touch-action: manipulation; }
#water { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.game .bar, .bar { z-index: 20; }

.g-intro { position: absolute; z-index: 3; inset-inline: var(--gut); bottom: clamp(60px, 11vh, 120px); max-width: 620px; transition: opacity .8s var(--ease), transform .8s var(--ease); text-shadow: 0 2px 24px rgba(0,30,34,.55); }
.g-intro .kick { color: var(--gold); }
.g-intro h1 { font-family: var(--ar-d); font-weight: 700; font-size: clamp(54px, 7.4vw, 120px); line-height: 1.05; margin: 8px 0 16px; }
.g-intro h1 span { display: block; }
html[lang="en"] .g-intro h1 { font-family: var(--en-d); font-weight: 500; font-size: clamp(48px, 6.4vw, 104px); line-height: 1; }
.g-lede { font-size: clamp(15px, 1.25vw, 18px); font-weight: 300; line-height: 1.9; max-width: 520px; color: rgba(246,241,234,.92); }
.g-dive { position: relative; margin-top: 26px; display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 10px 10px; border-radius: 40px; border: 1px solid rgba(246,241,234,.55); background: rgba(6,40,46,.45); color: var(--pearl); font-size: 17px; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s, transform .3s var(--ease); }
html[dir="rtl"] .g-dive { padding: 10px 10px 10px 26px; }
.g-dive:hover { background: rgba(6,40,46,.7); transform: translateY(-2px); }
.g-dive-ring { width: 44px; height: 44px; border-radius: 50%; background: url(assets/pearl/pearl.png) center / cover; box-shadow: 0 0 0 0 rgba(246,241,234,.6); animation: breath 2.6s ease-in-out infinite; }
@keyframes breath { 0% { box-shadow: 0 0 0 0 rgba(246,241,234,.55); transform: scale(.94); } 50% { transform: scale(1.04); } 100% { box-shadow: 0 0 0 18px rgba(246,241,234,0); transform: scale(.94); } }
.game:not([data-state="surface"]) .g-intro { opacity: 0; transform: translateY(30px); pointer-events: none; }

/* the hud: depth, breath, oysters left */
.g-hud { position: absolute; z-index: 4; top: 86px; inset-inline: var(--gut); display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; opacity: 0; transition: opacity .6s; }
.game[data-state="down"] .g-hud, .game[data-state="bed"] .g-hud, .game[data-state="up"] .g-hud { opacity: 1; }
.g-depth { font-family: var(--en-d); font-size: clamp(48px, 6vw, 84px); line-height: 1; font-weight: 600; text-shadow: 0 2px 20px rgba(0,30,34,.5); font-variant-numeric: tabular-nums; }
.g-depth small { font-size: .4em; margin-inline-start: 6px; color: var(--gold); }
.g-breath { position: relative; width: 74px; height: 74px; display: grid; place-content: center; justify-items: center; text-align: center; line-height: 1; }
.g-breath svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.g-breath circle { fill: rgba(6,40,46,.45); stroke: rgba(246,241,234,.22); stroke-width: 3; }
.g-breath circle.b { fill: none; stroke: var(--pearl); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: calc(119.4 * (1 - var(--b, 1))); transition: stroke-dashoffset .3s linear; }
.g-breath bdi { font-family: var(--en); font-weight: 600; font-size: 22px; }
.g-breath small { font-size: 10px; opacity: .8; margin-top: 2px; }
.game[data-state="bed"] .g-breath { animation: none; }
.g-tries { display: grid; justify-items: center; gap: 6px; font-size: 12px; }
.g-tries span { display: flex; gap: 6px; }
.g-tries i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(246,241,234,.5); }
.g-tries i.on { background: url(assets/pearl/pearl.png) center / cover; border: 0; }

/* the oysters: invisible buttons over their shells; opened, the open shell grows out of them */
.g-oysters { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity 1.2s 1s; }
.game:not([data-state="bed"]) .g-oysters { opacity: 0; }
.game[data-state="down"] .g-oysters { transition: none; }
.game[data-state="bed"] .g-oysters { transition: opacity .4s; }
.oy { position: absolute; translate: -50% -50%; border: 0; padding: 0; background: none; cursor: pointer; pointer-events: none; border-radius: 50%; }
.game[data-state="bed"] .oy:not(.opened) { pointer-events: auto; }
.oy-ring { position: absolute; inset: -8%; border-radius: 50%; border: 1.5px solid rgba(246,241,234,.0); transition: border-color .3s, transform .3s var(--ease); }
.game[data-state="bed"] .oy:not(.opened) .oy-ring { animation: call 2.4s ease-in-out infinite; }
.game[data-state="bed"] .oy:hover .oy-ring { border-color: rgba(246,241,234,.95); transform: scale(1.06); animation: none; }
@keyframes call { 50% { border-color: rgba(246,241,234,.55); transform: scale(1.04); } }
.oy-open { position: absolute; left: 50%; top: 42%; width: 150%; translate: -50% -50%; opacity: 0; scale: .4; transition: opacity .5s, scale .7s cubic-bezier(.3,1.5,.5,1); pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0,30,34,.45)); }
.oy.opened .oy-open { opacity: 1; scale: 1; }
.oy.empty .oy-open { filter: grayscale(.4) brightness(.85) drop-shadow(0 10px 18px rgba(0,30,34,.45)); }
.oy-pearl { position: absolute; left: 53%; top: 57%; width: 34%; translate: -50% -50%; opacity: 0; scale: 0; transition: opacity .4s .45s, scale .8s .45s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.oy.pearl .oy-pearl { opacity: 1; scale: 1; }
.oy.dana .oy-pearl { width: 42%; filter: drop-shadow(0 0 14px rgba(255,248,230,.9)); }
.oy.pearl { z-index: 2; }

.g-msg { position: absolute; z-index: 5; left: 50%; top: 24%; translate: -50% 0; padding: 10px 22px; border-radius: 30px; background: rgba(6,40,46,.62); border: 1px solid rgba(246,241,234,.25); font-family: var(--ar-d); font-size: clamp(20px, 2vw, 28px); white-space: nowrap; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s var(--ease); pointer-events: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html[lang="en"] .g-msg { font-family: var(--en-d); }
.g-msg.on { opacity: 1; transform: none; }

/* the result: the pearl turning, and its certificate */
.g-result { position: absolute; z-index: 6; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 60px); padding: 90px var(--gut) 40px;
  background: radial-gradient(ellipse 60% 70% at 30% 50%, rgba(6,40,46,.2), rgba(4,26,30,.82)); opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 1s; }
html[dir="rtl"] .g-result { background: radial-gradient(ellipse 60% 70% at 70% 50%, rgba(6,40,46,.2), rgba(4,26,30,.82)); }
.g-result.on { opacity: 1; visibility: visible; }
.r-pearl { position: relative; height: min(70vh, 560px); display: grid; place-items: center; }
#pearlCv { width: 100%; height: 100%; cursor: grab; touch-action: pan-y; filter: drop-shadow(0 40px 50px rgba(0,0,0,.45)); }
.r-turn { position: absolute; bottom: 4%; font-size: 12px; color: rgba(246,241,234,.6); }
.r-card { max-width: 500px; padding: 28px 30px; border-radius: 28px; background: rgba(246,241,234,.95); color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); transform: translateY(20px); transition: transform 1s var(--ease) .2s; }
.g-result.on .r-card { transform: none; }
.r-card .kick { color: #9a7a3c; }
.r-card h2 { font-family: var(--ar-d); font-weight: 600; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.3; margin: 4px 0 14px; }
html[lang="en"] .r-card h2 { font-family: var(--en-d); }
.r-card h2 bdi { font-family: var(--en); font-size: .7em; letter-spacing: .08em; color: #9a7a3c; }
.r-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(19,39,42,.12); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.r-specs div { background: #fbf8f3; padding: 10px 12px; }
.r-specs dt { font-size: 11.5px; color: rgba(19,39,42,.6); }
.r-specs dd { margin: 0; font-weight: 600; font-size: 14.5px; }
.r-l { font-size: 13px; font-weight: 600; color: rgba(19,39,42,.65); margin-bottom: 6px; }
.r-card .chips { margin-bottom: 8px; }
.r-card .chips i { width: 14px; height: 14px; border-radius: 50%; background: var(--m); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.r-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(19,39,42,.14); font-size: 13px; color: rgba(19,39,42,.65); }
.r-total b { font-family: var(--en-d); font-size: 30px; color: var(--ink); }
html[lang="ar"] .r-total b { font-family: var(--ar-d); }
.r-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.r-btns .btn.pearl { grid-column: 1 / -1; background: var(--ink); color: var(--pearl); }
.r-btns .btn.line { border: 1px solid rgba(19,39,42,.3); background: none; color: var(--ink); cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; padding: 12px; }

@media (max-width: 820px) {
  .g-intro { bottom: 40px; }
  .g-hud { top: 74px; }
  .g-depth { font-size: 46px; }
  .g-result { grid-template-columns: 1fr; grid-template-rows: 34vh auto; align-content: start; padding: 64px 12px 14px; overflow: auto; }
  .r-pearl { height: 34vh; }
  .r-card { padding: 18px; border-radius: 22px; }
  .r-specs { grid-template-columns: repeat(2, 1fr); }
  .g-msg { top: 20%; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .g-dive-ring, .oy-ring { animation: none !important; } .oy-open, .oy-pearl, .g-result, .r-card { transition: none; } }

/* ============ the speaker (sound.js) */
.bar-r { display: flex; align-items: center; gap: 10px; }
.snd { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(246,241,234,.45); background: none; cursor: pointer; }
.snd svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.snd .spk { fill: currentColor; stroke: none; }
.snd .x, .snd.off .wv { display: none; }
.snd.off .x { display: inline; }

/* ============ «عقدك» (strand.js): her pearls on a gold chain, on teal velvet */
.r-strand { margin: -6px 0 14px; font-size: 13px; color: rgba(19,39,42,.7); }
.r-strand a { color: #9a7a3c; font-weight: 600; }
.r-strand[hidden] { display: none; }
.strand-sec { position: relative; padding: clamp(70px, 9vw, 120px) 0 clamp(56px, 7vw, 96px); overflow: hidden; color: var(--pearl);
  background: radial-gradient(ellipse 75% 65% at 50% 45%, #145c63 0%, #0c434a 48%, #062a2f 100%); }
.strand-sec::before { content: ''; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.st-head { position: relative; text-align: center; max-width: 720px; }
.st-head h2 { font-family: var(--ar-d); font-weight: 600; font-size: clamp(36px, 4.4vw, 66px); line-height: 1.2; margin: 8px 0 12px; }
html[lang="en"] .st-head h2 { font-family: var(--en-d); font-weight: 500; }
.st-text { font-weight: 300; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.9; color: rgba(246,241,234,.85); max-width: 600px; margin: 0 auto; }
.st-stage { position: relative; height: clamp(300px, 46vh, 440px); margin-top: clamp(16px, 3vw, 36px); }
#sCv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.st-tag { position: absolute; left: 0; top: 0; z-index: 2; display: grid; justify-items: center; gap: 2px; padding: 10px 14px 12px; border-radius: 16px; background: rgba(246,241,234,.96); color: var(--ink); box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); text-align: center; white-space: nowrap; }
.st-tag[hidden] { display: none; }
.st-tag b { font-family: var(--en); font-size: 13px; letter-spacing: .08em; color: #9a7a3c; }
.st-tag span { font-size: 13px; }
.st-cert { margin-top: 6px; padding: 6px 14px; border-radius: 16px; border: 0; background: var(--ink); color: var(--pearl); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.st-foot { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; }
.st-count { font-size: 14px; color: rgba(246,241,234,.8); }
.st-count b { font-family: var(--en-d); font-size: 34px; font-weight: 600; color: var(--pearl); }
.st-count span { display: block; font-size: 13px; color: var(--gold); }
.strand-sec .chips button { background: rgba(246,241,234,.08); border-color: rgba(246,241,234,.3); color: var(--pearl); }
.strand-sec .chips [aria-checked="true"] { background: var(--pearl); color: var(--ink); border-color: var(--pearl); }
.strand-sec .chips i { width: 14px; height: 14px; border-radius: 50%; background: var(--m); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.st-total { font-size: 13px; color: rgba(246,241,234,.7); }
.st-total b { font-family: var(--en-d); font-size: 28px; color: var(--pearl); margin-inline-start: 8px; }
html[lang="ar"] .st-total b { font-family: var(--ar-d); }
.st-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.st-btns [hidden] { display: none; }
.strand-sec .btn.ink { background: var(--pearl); color: var(--ink); border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.strand-sec .btn.ink:hover { background: #fff; }
.strand-sec .btn.line { color: var(--pearl); border-color: rgba(246,241,234,.55); }
.st-new { background: none; border: 0; padding: 6px; font-size: 13px; color: rgba(246,241,234,.7); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; flex-basis: 100%; }
.st-hint { font-size: 12.5px; color: rgba(246,241,234,.55); }
@media (max-width: 700px) {
  .st-stage { height: 250px; }
  .st-btns .btn { width: 100%; }
}

/* ============ the pearl in its setting (setting.js), and the story image's button (card.js) */
.r-pearl .rs-img, .r-pearl .rs-front, .r-pearl .rs-twin { position: absolute; pointer-events: none; }
.r-pearl .rs-twin[hidden] { display: none; }
.r-pearl #pearlCv { position: absolute; filter: drop-shadow(0 16px 20px rgba(0,0,0,.4)); }
.r-pearl .rs-img { filter: drop-shadow(0 18px 26px rgba(0,0,0,.35)); }
.r-pearl .rs-twin { filter: drop-shadow(0 16px 20px rgba(0,0,0,.4)); }
.r-btns .btn.r-story { grid-column: 1 / -1; }
.r-btns .btn.busy { opacity: .6; cursor: progress; }
@media (max-width: 820px) {
  .g-result { grid-template-rows: 40vh auto; }
  .r-pearl { height: 40vh; }
}
.r-pearl .r-turn { z-index: 2; text-shadow: 0 1px 8px rgba(0,20,24,.9); }