/* ice «أميرة الجليد» — crystal kingdom under an aurora; palettes switch with body.pal-* (data.js theme.palette) */
:root, .pal-icy {
  --sky1: #081633; --sky2: #1d3f73; --sky3: #5b8cc4;
  --aur1: #6ff5d8; --aur2: #7fb4ff; --aur3: #b99bff;
  --gem1: #f4fdff; --gem2: #ade4ff; --gem3: #58a7ea; --gem4: #2a6fc0;
  --gown: #e4f1fd; --gown-2: #c4def7; --trim: #8fc3ee;
  --snow: #f0f7ff; --snow-2: #d2e3f5; --mount: #8fb0d8; --castle: #cfe6ff;
  --skin: #f1c6a0; --hair: #3a2418;
  --bg: #f3f8ff; --bg-2: #dcebff; --surface: #ffffff; --surface-2: #f2f8ff;
  --text: #1f3150; --muted: #5d7090;
  --accent: #2b67ad; --accent-2: #cfe9ff; --accent-ink: #ffffff;
  --line: rgba(43, 103, 173, .24); --line-soft: rgba(43, 103, 173, .10);
}
.pal-lilac {
  --sky1: #140f33; --sky2: #3b2c6e; --sky3: #8a74c4;
  --aur1: #c6a8ff; --aur2: #8fd8ff; --aur3: #ffb0e0;
  --gem1: #fcf9ff; --gem2: #ddcbff; --gem3: #a684e8; --gem4: #7350c4;
  --gown: #f1e9ff; --gown-2: #dccbfb; --trim: #b59be8;
  --snow: #f7f3ff; --snow-2: #ddd3f2; --mount: #a797d6; --castle: #e6dcff;
  --bg: #f8f4ff; --bg-2: #ebe2ff; --surface-2: #f8f4ff;
  --text: #2e2350; --muted: #6d6290;
  --accent: #6c43b8; --accent-2: #e6d9ff;
  --line: rgba(108, 67, 184, .24); --line-soft: rgba(108, 67, 184, .10);
}
.pal-silverpink {
  --sky1: #1e1426; --sky2: #4d3352; --sky3: #a6809b;
  --aur1: #ffc4dc; --aur2: #cfe6ff; --aur3: #f1c9ff;
  --gem1: #fffafd; --gem2: #f9d5e3; --gem3: #e19bba; --gem4: #b8608a;
  --gown: #fcf0f5; --gown-2: #f2d6e2; --trim: #c9cfda;
  --snow: #fcf7f9; --snow-2: #e6dae1; --mount: #c2a9bb; --castle: #f6e3ec;
  --bg: #fff6f9; --bg-2: #fbe3ec; --surface-2: #fff6f9;
  --text: #3d2633; --muted: #806575;
  --accent: #a9466f; --accent-2: #f9dbe7;
  --line: rgba(169, 70, 111, .24); --line-soft: rgba(169, 70, 111, .10);
}
body.ice { background: linear-gradient(180deg, var(--bg-2), var(--bg) 620px), var(--bg); }

/* ---------- intro (rendered art layers in art/*.webp) ---------- */
.i-intro { padding: 0; background: #0d1f4a; color: #fff; display: grid; place-items: center; }
.i-fill { position: absolute; inset: -30px; background: #0d1f4a url(art/bg.webp) center / cover; filter: blur(20px); transform: scale(1.06); }
.i-scene { position: relative; width: min(100vw, 100dvh * .6); height: 100dvh; overflow: hidden; }
.i-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }

.i-snow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.i-snow i { position: absolute; top: -12px; border-radius: 50%; background: #fff; opacity: .85; animation: snow linear infinite; }
@keyframes snow { to { transform: translate3d(var(--dx), 108dvh, 0); } }

.i-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 12px rgba(5, 20, 70, .8); }
.i-hello { margin: 0; font: 600 17px/1.5 var(--f-ui); }
.i-line { margin: 2px 0 0; font: 900 clamp(24px, 7.4vw, 32px)/1.35 var(--f-display); text-wrap: balance; }

.i-stage { position: absolute; z-index: 4; inset-inline: 0; top: 17dvh; height: 38dvh; display: grid; place-items: center; pointer-events: none; }
.i-stage > * { grid-area: 1 / 1; }
.i-crystal { pointer-events: auto; position: relative; width: min(74vw, 40dvh, 320px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; animation: iHover 4s ease-in-out infinite; transition: opacity .25s ease, transform .3s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.i-crystal:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@keyframes iHover { 50% { transform: translateY(-9px); } }
.i-halo { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(190, 235, 255, .85), rgba(120, 190, 255, .35) 55%, rgba(120,190,255,0)); animation: iHalo 2.6s ease-in-out infinite; }
@keyframes iHalo { 50% { opacity: .55; transform: scale(.9); } }
.i-flake { position: absolute; inset: 0; width: 100%; height: 100%; animation: iTurn 40s linear infinite; filter: drop-shadow(0 0 18px rgba(170, 225, 255, .9)); }
@keyframes iTurn { to { transform: rotate(360deg); } }

.i-reveal { text-align: center; opacity: 0; filter: blur(8px); transition: opacity .8s ease, filter .9s ease; max-width: 92%; }
.i-name { margin: 0; font: 900 clamp(50px, 16vw, 68px)/1.3 var(--f-display); color: #fff; overflow-wrap: anywhere; text-shadow: 0 3px 0 #1c4a9e, 0 0 22px #2a6fc0, 0 0 44px #2a6fc0; }
.i-age { margin: 0; font: 700 19px/1.5 var(--f-display); color: #fff; text-shadow: 0 2px 0 #1c4a9e, 0 0 14px #2a6fc0; }

.i-hint { position: absolute; z-index: 4; inset-inline: 0; top: calc(17dvh + 38dvh + 4px); margin: 0; text-align: center; font: 600 15px/1.4 var(--f-ui); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); animation: iHint 1.8s ease-in-out infinite; transition: opacity .3s; }
@keyframes iHint { 50% { opacity: .55; transform: translateY(-3px); } }

.i-girl { position: absolute; z-index: 5; left: 4%; bottom: 3dvh; width: min(42%, 200px, 33dvh); pointer-events: none; animation: iBob 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.i-girl img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 6px rgba(0, 20, 60, .45)); transition: opacity .4s; }
.i-girl-b { position: absolute !important; left: 0; top: 0; opacity: 0; }
@keyframes iBob { 50% { transform: translateY(-5px); } }
.i-fox { position: absolute; z-index: 5; right: 5%; bottom: 2dvh; width: min(30%, 140px, 20dvh); height: auto; pointer-events: none; animation: iFox 4s ease-in-out infinite; filter: drop-shadow(0 8px 6px rgba(0, 20, 60, .45)); }
@keyframes iFox { 50% { transform: translateY(-4px) rotate(2deg); } }
.no-princess .i-girl, .no-princess .i-fox { display: none; }

.i-frost { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(ellipse 70% 52% at 50% 35%, transparent 38%, rgba(225, 242, 255, .32) 72%, rgba(240, 249, 255, .62) 100%); clip-path: circle(0% at 50% 35%); transition: clip-path 1.5s cubic-bezier(.3, .6, .3, 1) .25s; }
.i-frost svg { width: 100%; height: 100%; }
.i-frost .fr-glow { fill: none; stroke: #fff; stroke-opacity: .22; stroke-width: 3.4; stroke-linecap: round; }
.i-frost .fr { fill: none; stroke: #fff; stroke-opacity: .64; stroke-width: 1.2; stroke-linecap: round; }
.i-frost .fr-star { color: #fff; opacity: .8; }
.i-flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 35%, #fff 0%, color-mix(in srgb, var(--gem2) 70%, transparent) 22%, transparent 55%); }
.i-shards, .i-dust { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.i-shards i { position: absolute; left: 0; top: 0; width: 34px; height: 40px; margin: -20px 0 0 -17px; background: linear-gradient(135deg, var(--gem1), var(--gem2) 45%, var(--gem3)); opacity: .95; transition: transform .95s cubic-bezier(.15, .7, .3, 1), opacity .95s ease; }
.i-dust i { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px var(--gem2), 0 0 12px 2px color-mix(in srgb, var(--gem3) 60%, transparent); transition: transform 1s cubic-bezier(.2, .8, .25, 1), opacity .6s ease; }
.i-dust i.big { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
.i-dust.is-settled i { animation: dustTw 1.6s ease-in-out infinite; }
@keyframes dustTw { 50% { opacity: .25; } }

/* --- touched / opened states --- */
.i-intro.is-touched .i-greet { opacity: 0; transform: translateY(-14px); }
.i-intro.is-touched .i-hint { opacity: 0; animation: none; }
.i-intro.is-touched .i-crystal { animation: none; cursor: default; }
.i-intro.is-touched .i-flake { animation: spin 1.25s cubic-bezier(.55, 0, .35, 1) forwards; }
.i-intro.is-touched .i-halo { animation: haloUp 1.25s ease-in forwards; }
@keyframes spin { to { transform: rotate(720deg) scale(1.08); } }
@keyframes haloUp { to { transform: scale(1.35); opacity: 1; } }
.i-intro.is-touched .i-frost { clip-path: circle(120% at 50% 35%); }
.i-intro.is-touched .i-girl-a { opacity: 0; } .i-intro.is-touched .i-girl-b { opacity: 1; }
.i-intro.is-shattered .i-crystal { opacity: 0; transform: scale(1.3); }
.i-intro.is-shattered .i-flash { animation: flash .9s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.i-intro.is-named .i-reveal { opacity: 1; filter: none; }
.i-intro.is-named .i-dust i { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .i-snow i, .i-flake, .i-halo, .i-crystal, .i-hint, .i-girl, .i-fox { animation: none !important; }
  .i-snow { display: none; }
  .i-frost, .i-reveal, .i-girl img { transition-duration: .01s !important; transition-delay: 0s !important; }
}

.ice .card-hero img { width: 150px; height: auto; margin-inline: auto; filter: drop-shadow(0 0 14px rgba(120,190,255,.7)); }
/* ---------- details card skin ---------- */
.ice .card-frame {
  background: linear-gradient(180deg, #fff, var(--surface-2)); border: 1.5px solid var(--line);
  box-shadow: 0 18px 44px rgba(40, 80, 140, .14), inset 0 0 0 7px #fff, inset 0 0 0 8.5px var(--line-soft);
}
.ice .card-frame::before, .ice .card-frame::after {
  --flake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath id='a' d='M0 -2.6V-10.6M0 -6.2L-2.6 -8.6M0 -6.2L2.6 -8.6'/%3E%3Cpath transform='rotate(60)' d='M0 -2.6V-10.6M0 -6.2L-2.6 -8.6M0 -6.2L2.6 -8.6'/%3E%3Cpath transform='rotate(120)' d='M0 -2.6V-10.6M0 -6.2L-2.6 -8.6M0 -6.2L2.6 -8.6'/%3E%3Cpath transform='rotate(180)' d='M0 -2.6V-10.6M0 -6.2L-2.6 -8.6M0 -6.2L2.6 -8.6'/%3E%3Cpath transform='rotate(240)' d='M0 -2.6V-10.6M0 -6.2L-2.6 -8.6M0 -6.2L2.6 -8.6'/%3E%3Cpath transform='rotate(300)' d='M0 -2.6V-10.6M0 -6.2L-2.6 -8.6M0 -6.2L2.6 -8.6'/%3E%3Cpath d='M0 -2.6L2.25 -1.3V1.3L0 2.6L-2.25 1.3V-1.3Z'/%3E%3C/g%3E%3C/svg%3E");
  content: ''; position: absolute; top: 16px; width: 38px; height: 38px; opacity: .5; pointer-events: none; background: var(--accent);
  -webkit-mask: var(--flake) center / contain no-repeat; mask: var(--flake) center / contain no-repeat;
}
.ice .card-frame::before { inset-inline-start: 14px; }
.ice .card-frame::after { inset-inline-end: 14px; }
.ice .card-hero { margin-top: -8px; }
.ice .card-hero svg { width: 128px; overflow: visible; }
.ice .kid { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--gem3))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ice .age-badge { background: var(--accent-2); color: var(--accent); border: 1.5px solid var(--line); }
.ice .facts li { background: var(--surface-2); border-color: var(--line-soft); }
.ice .cd { background: linear-gradient(180deg, #fff, var(--surface-2)); }
.ice .h2::after { width: 56px; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }