/* ==========================================================================
   Haze Watch SG: styles
   The whole look is driven by three attributes JS sets on <html>:
     data-state = good | moderate | sensitive | unhealthy | very | hazard   (from AQI band)
     data-theme = light | mid | dark                            (text/glass colours)
     data-pose  = good | moderate | mask | cough | oxygen | passout (which panda shows)
   ========================================================================== */

:root {
  --font: 'Hanken Grotesk', system-ui, sans-serif;
  --grain: 0.4;               /* film grain strength, 0 to 1 */
  --glass-blur: 28px;
}

/* ---- Theme: text + glass colours ---------------------------------------- */
[data-theme="light"] {
  --ink: #1C1B19; --muted: #4F4D47; --hair: rgba(28, 27, 25, 0.22);
  --glass-bg: rgba(255, 255, 255, 0.10); --glass-border: rgba(255, 255, 255, 0.75);
  --glass-hi: rgba(255, 255, 255, 0.9); --glass-shadow: rgba(60, 55, 45, 0.10);
  --pill-bg: rgba(255, 255, 255, 0.22); --pill-border: rgba(255, 255, 255, 0.85);
  --map-dot: rgba(28, 27, 25, 0.14);
  --map-filter: drop-shadow(0 16px 22px rgba(60, 55, 45, 0.28));
}
[data-theme="mid"] {
  --ink: #151412; --muted: #2B2A27; --hair: rgba(21, 20, 18, 0.30);
  --glass-bg: rgba(255, 255, 255, 0.10); --glass-border: rgba(255, 255, 255, 0.55);
  --glass-hi: rgba(255, 255, 255, 0.7); --glass-shadow: rgba(30, 28, 25, 0.20);
  --pill-bg: rgba(255, 255, 255, 0.22); --pill-border: rgba(255, 255, 255, 0.7);
  --map-dot: rgba(21, 20, 18, 0.18);
  --map-filter: drop-shadow(0 16px 22px rgba(30, 28, 25, 0.32));
}
[data-theme="dark"] {
  --ink: #F4F2EE; --muted: #D2CFC9; --hair: rgba(244, 242, 238, 0.28);
  --glass-bg: rgba(255, 255, 255, 0.10); --glass-border: rgba(255, 255, 255, 0.18);
  --glass-hi: rgba(255, 255, 255, 0.22); --glass-shadow: rgba(0, 0, 0, 0.35);
  --pill-bg: rgba(24, 24, 26, 0.55); --pill-border: rgba(255, 255, 255, 0.22);
  --map-dot: rgba(255, 255, 255, 0.16);
  --map-filter: brightness(0.92) drop-shadow(0 16px 26px rgba(0, 0, 0, 0.55));
}

/* ---- Band colours (readable on light vs dark pages) --------------------- */
[data-theme="light"], [data-theme="mid"] {
  --c-good: #1F7A4A; --c-moderate: #8A5C00; --c-sensitive: #B84A12; --c-unhealthy: #A81F3A; --c-very: #6B2A7A; --c-hazard: #7A1030;
}
[data-theme="dark"] {
  --c-good: #6FD99B; --c-moderate: #F2C14E; --c-sensitive: #FF9A5C; --c-unhealthy: #FF7A8F; --c-very: #D79BE8; --c-hazard: #E04660;
}

/* ---- State: background scene -------------------------------------------- */
[data-state="good"]      { --bg: #EEF4EC; --wash: #CFE6C4; --wash2: #F3EDC4; --haze-c: #DDE8DD; --haze: 0.08; --sun-c: #FFF3C4; --sun: 1;    --halo: 0.3;  --band-size: 120px; --part-a: #8A7A66; --part-b: #B08A5E; }
[data-state="moderate"]  { --bg: #DAD9D2; --wash: #E9DDB4; --wash2: #CBD6C0; --haze-c: #CBC9C0; --haze: 0.3;  --sun-c: #FFEBB0; --sun: 0.7;  --halo: 0.3;  --band-size: 120px; --part-a: #8A7A66; --part-b: #B08A5E; }
[data-state="sensitive"] { --bg: #A3A19C; --wash: #C0A98E; --wash2: #8F9A93; --haze-c: #B5B1A8; --haze: 0.45; --sun-c: #FFD9A0; --sun: 0.3;  --halo: 0.35; --band-size: 84px;  --part-a: #5C5648; --part-b: #7A6A52; }
[data-state="unhealthy"] { --bg: #5A5957; --wash: #7A6A66; --wash2: #4A4D50; --haze-c: #6E6C69; --haze: 0.55; --sun-c: #F5B98A; --sun: 0.15; --halo: 0.5;  --band-size: 92px;  --part-a: #D8D2C8; --part-b: #B9B2A6; }
[data-state="very"]      { --bg: #3B393B; --wash: #5A4560; --wash2: #343840; --haze-c: #4A484B; --haze: 0.58; --sun-c: #E8A08A; --sun: 0.1;  --halo: 0.55; --band-size: 92px;  --part-a: #D8D2C8; --part-b: #B9B2A6; }
[data-state="hazard"]    { --bg: #1E1C1F; --wash: #4A2F3A; --wash2: #2E3036; --haze-c: #2E2E31; --haze: 0.65; --sun-c: #D98A7A; --sun: 0.06; --halo: 0.6;  --band-size: 108px; --part-a: #D8D2C8; --part-b: #B9B2A6; }

/* ---- Base --------------------------------------------------------------- */
* { box-sizing: border-box; }
body { margin: 0; }
.stage {
  position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh;
  background-color: var(--bg); color: var(--ink); font-family: var(--font);
  transition: background-color 1.6s ease, color 1.6s ease;
}

/* ---- Animated background ------------------------------------------------- */
.bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wash, .haze, .sun { position: absolute; border-radius: 50%; transition: background-color 1.6s ease, opacity 1.6s ease, box-shadow 1.6s ease; }
.wash { filter: blur(80px); animation: drift 40s ease-in-out infinite alternate; }
.wash--a { top: -80px; right: -6%; width: 760px; height: 560px; background: var(--wash); opacity: 0.8; }
.wash--b { top: 620px; left: -10%; width: 820px; height: 480px; background: var(--wash2); opacity: 0.6; animation-duration: 58s; }
.haze { filter: blur(60px); background: var(--haze-c); opacity: var(--haze); animation: drift 54s ease-in-out infinite alternate-reverse; }
.haze--a { top: 140px; left: -14%; width: 1000px; height: 320px; }
.haze--b { top: 560px; left: 26%; width: 1100px; height: 340px; animation-duration: 66s; }
.haze--c { top: 1000px; left: -16%; width: 1200px; height: 340px; animation-duration: 72s; }
.sun { top: 70px; right: 14%; width: 96px; height: 96px; filter: blur(6px); background: var(--sun-c); box-shadow: 0 0 80px 26px var(--sun-c); opacity: var(--sun); animation: pulse 7s ease-in-out infinite; }
.part { position: absolute; border-radius: 50%; opacity: 0; animation: float ease-in-out infinite; }

@keyframes drift { from { transform: translate(-90px, 0) scale(1); } to { transform: translate(120px, 30px) scale(1.12); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes float { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 0.5; } 85% { opacity: 0.5; } 100% { transform: translate(46px, -180px); opacity: 0; } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(3); opacity: 0; } }

/* ---- Layout -------------------------------------------------------------- */
.page { position: relative; max-width: 1120px; margin: 0 auto; padding: 24px 32px 80px; display: flex; flex-direction: column; gap: 56px; }

/* ---- Glass --------------------------------------------------------------- */
.glass {
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7) brightness(1.04);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7) brightness(1.04);
  border: 1px solid var(--glass-border);
  box-shadow: 0 14px 44px var(--glass-shadow), inset 0 1px 0 var(--glass-hi), inset 1px 0 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.10), inset 0 0 22px rgba(255,255,255,.07);
  transition: background-color 1.6s ease, border-color 1.6s ease, box-shadow 1.6s ease;
}

/* ---- Nav ----------------------------------------------------------------- */
.nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 8px 8px 28px; border-radius: 999px; }
.nav__brand { font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }
.nav__right { display: flex; align-items: center; gap: 20px; }
.nav__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.live { width: 8px; height: 8px; border-radius: 50%; background: #3FBF7F; animation: ping 2.4s ease-out infinite; }
.btn { height: 44px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--hair); background: transparent; color: var(--ink); font: 500 14px var(--font); cursor: pointer; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 32px; align-items: center; }
.hero__text { display: flex; flex-direction: column; gap: 22px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.dot { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.dot--state { width: 10px; height: 10px; background: var(--state-color); }
.bandword { margin: 0; font-weight: 200; font-size: var(--band-size); line-height: 0.98; letter-spacing: -0.045em; }
.tip { margin: 0; max-width: 440px; font-size: 19px; line-height: 1.5; font-weight: 300; text-wrap: pretty; }

.cards { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.card { display: flex; padding: 22px 32px; border-radius: 28px; }
.col { flex: 1 1 0; min-width: 0; padding: 0 28px; }
.col + .col { border-left: 1px solid var(--hair); }
.col:first-child { padding-left: 0; }
.col:last-child { padding-right: 0; }
.label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.num { font-weight: 200; font-size: 60px; line-height: 1.1; letter-spacing: -0.03em; }
.sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.sub .dot { width: 8px; height: 8px; }

/* Panda */
.hero__panda { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 470px; }
.halo { position: absolute; bottom: 20px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 66%); opacity: var(--halo); transition: opacity 1.6s ease; }
.panda-shadow { position: absolute; bottom: 6px; width: 380px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, 0.14); filter: blur(10px); }
.panda { position: relative; width: 440px; height: 440px; }
.pose { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.8s ease; }
[data-pose="good"] .pose--good, [data-pose="moderate"] .pose--moderate,
[data-pose="mask"] .pose--mask, [data-pose="cough"] .pose--cough { opacity: 1; }

/* ---- Island view --------------------------------------------------------- */
.isle { display: flex; flex-direction: column; gap: 22px; padding: 32px; border-radius: 36px; }
.isle__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.isle h2 { margin: 0; font-weight: 300; font-size: 28px; letter-spacing: -0.02em; }
.isle__sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 8px; }

.map { position: relative; width: 100%; max-width: 940px; margin: 0 auto; aspect-ratio: 1025 / 645; }
.map__img { position: absolute; inset: 0; width: 100%; height: 100%; filter: var(--map-filter); }
.isle-mask { position: absolute; inset: 0; mix-blend-mode: multiply; -webkit-mask-image: url(assets/island.webp); mask-image: url(assets/island.webp); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.isle-mask svg { display: block; }
.zone { fill-opacity: 0.6; }
.zone-lines { fill: none; stroke: #fff; stroke-opacity: 0.7; stroke-width: 2; stroke-dasharray: 6 8; }

/* Band colour hooks: JS sets data-band on dots and zones */
[data-band="good"] { --band: var(--c-good); }
[data-band="moderate"] { --band: var(--c-moderate); }
[data-band="sensitive"] { --band: var(--c-sensitive); }
[data-band="unhealthy"] { --band: var(--c-unhealthy); }
[data-band="very"] { --band: var(--c-very); }
[data-band="hazard"] { --band: var(--c-hazard); }
.dot[data-band], .dot[data-band-for] { background: var(--band); }
.zone[data-band] { fill: var(--band); }
.pin[data-band] { --pin: var(--band); }
[data-state="good"] { --state-color: var(--c-good); }
[data-state="moderate"] { --state-color: var(--c-moderate); }
[data-state="sensitive"] { --state-color: var(--c-sensitive); }
[data-state="unhealthy"] { --state-color: var(--c-unhealthy); }
[data-state="very"] { --state-color: var(--c-very); }
[data-state="hazard"] { --state-color: var(--c-hazard); }

.pin { position: absolute; width: 0; height: 0; }
.ping { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--pin); opacity: 0.5; animation: ping 2.8s ease-out infinite; }
.pin__dot { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--pin); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.pill { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 9px 14px 10px; border-radius: 16px; background-color: var(--pill-bg); border-color: var(--pill-border); font-variant-numeric: tabular-nums; }
.pill__name { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pill__vals { display: flex; gap: 16px; margin-top: 3px; }
.pill b { font-size: 22px; font-weight: 300; letter-spacing: -0.02em; }
.pill small { font-size: 11px; color: var(--muted); }
.pin--north .pill { transform: translate(-50%, calc(-100% - 18px)); }
.pin--east .pill { transform: translate(18px, calc(-100% + 8px)); }
.pin--west .pill { transform: translate(calc(-100% - 18px), -50%); }
.pin--south .pill { transform: translate(-50%, 18px); }
.pin--central .pill { transform: translate(18px, -50%); }

.pinlist { display: none; grid-template-columns: 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pinlist li { display: grid; grid-template-columns: 1fr repeat(3, 58px); align-items: center; gap: 4px; padding: 12px 16px; border-radius: 16px; background-color: var(--pill-bg); border: 1px solid var(--pill-border); font-variant-numeric: tabular-nums; }
.pinlist .n { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.foot { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---- Grain --------------------------------------------------------------- */
.grain { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: var(--grain); }

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 720px) {
  .page { padding: 16px 16px 56px; gap: 36px; }
  .nav { padding-left: 20px; }
  .nav__meta { font-size: 11px; letter-spacing: 0.04em; gap: 6px; }
  .nav__right { gap: 10px; }
  .btn { padding: 0 16px; }
  /* Phone: headline + tip on the left, panda on the right, both cards underneath,
     so the panda and every reading fit on the first screen. */
  .hero { grid-template-columns: minmax(0, 1fr) 160px; grid-template-areas: "eyebrow panda" "band panda" "tip panda" "cards cards"; column-gap: 4px; row-gap: 10px; align-items: start; }
  .hero__text { display: contents; }
  .eyebrow { grid-area: eyebrow; font-size: 11px; letter-spacing: 0.12em; padding-top: 6px; }
  .bandword { grid-area: band; font-size: min(9.8vw, 42px); align-self: end; }
  .tip { grid-area: tip; font-size: 14px; line-height: 1.45; max-width: none; }
  .cards { grid-area: cards; gap: 10px; margin-top: 4px; }
  .hero__panda { grid-area: panda; order: 0; height: 200px; align-self: start; margin-right: -10px; }
  .panda { width: 190px; height: 190px; }
  .panda-shadow { width: 120px; height: 28px; }
  .halo { width: 220px; height: 220px; bottom: 10px; }
  .card { padding: 14px 14px; border-radius: 22px; }
  .col { padding: 0 10px; }
  .num { font-size: 32px; }
  .label { font-size: 10px; }
  .sub { font-size: 11px; }
  .page { gap: 36px; padding-top: 16px; }
  .isle { padding: 20px; border-radius: 28px; }
  .pill { display: none; }
  .pinlist { display: grid; }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .wash, .haze, .sun, .part, .ping, .live { animation: none; }
  .part { opacity: 0.35; }
  .stage, .wash, .haze, .sun, .glass, .halo, .pose { transition: none; }
}


/* ---- Live-data states ---- */
.zone:not([data-band]){fill:transparent}
.pin:not([data-band]){--pin:var(--muted)}
.live.is-stale{background:#E0A800;animation:none}
.live.is-off{background:#C0392B;animation:none}
.btn:disabled{opacity:.6;cursor:default}
#status:empty{display:none}
.nav__brand{white-space:nowrap}

/* ---- Panda: gentle bob when the air is good, shakier as haze rises ---- */
html { --amp: 0; --rot: 0; --shake-dur: 4s; }
html[data-state="good"]      { --amp: 0;   --rot: 0;   --shake-dur: 4s; }
html[data-state="moderate"]  { --amp: 1;   --rot: .6;  --shake-dur: 2.4s; }
html[data-state="sensitive"] { --amp: 2.5; --rot: 1.6; --shake-dur: 1.1s; }
html[data-state="unhealthy"] { --amp: 4;   --rot: 2.8; --shake-dur: .6s; }
html[data-state="very"]      { --amp: 5;   --rot: 3.4; --shake-dur: .45s; }
html[data-state="hazard"]    { --amp: 6;   --rot: 4;   --shake-dur: .38s; }
.panda { animation: shake var(--shake-dur) ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(calc(var(--amp) * -1px), calc(var(--amp) * .4px)) rotate(calc(var(--rot) * -1deg)); }
  40% { transform: translate(calc(var(--amp) * 1px), calc(var(--amp) * -.4px)) rotate(calc(var(--rot) * 1deg)); }
  60% { transform: translate(calc(var(--amp) * -.8px), 0) rotate(calc(var(--rot) * -.7deg)); }
  80% { transform: translate(calc(var(--amp) * .8px), calc(var(--amp) * .3px)) rotate(calc(var(--rot) * .7deg)); }
}
html[data-state="good"] .panda { animation-name: bob; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .panda { animation: none; } }

@media (max-width: 720px) { :root { --glass-blur: 18px; } }

/* ---- Panda extras: small movements per pose (all in code) ---- */
.fx { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
html[data-pose="good"] .fx--good, html[data-pose="cough"] .fx--cough { opacity: 1; }

/* Good: sparkles twinkle around the panda */
.fx--good i { position: absolute; width: 14px; height: 14px; --d: 0s; animation: twinkle 3.2s ease-in-out infinite; animation-delay: var(--d); }
.fx--good i::before, .fx--good i::after { content: ""; position: absolute; left: 50%; top: 50%; background: #F2C14E; border-radius: 2px; transform: translate(-50%, -50%); }
.fx--good i::before { width: 3px; height: 14px; }
.fx--good i::after { width: 14px; height: 3px; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 40%, 60% { opacity: .95; transform: scale(1) rotate(45deg); } }

/* Moderate: a slow, tired breath */
html[data-pose="moderate"] .pose--moderate { transform-origin: 50% 95%; animation: sigh 4.5s ease-in-out infinite; }
@keyframes sigh { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015, .985); } }

/* Mask pose: chest heaves with each breath */
html[data-pose="mask"] .pose--mask { transform-origin: 50% 95%; animation: heave 1.8s ease-in-out infinite; }
@keyframes heave { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03, .97); } }

/* Cough pose: coughing fits, with grey puffs drifting off */
html[data-pose="cough"] .pose--cough { transform-origin: 50% 90%; animation: cough 3s ease-in-out infinite; }
@keyframes cough {
  0%, 55%, 100% { transform: translateY(0) rotate(0) scale(1); }
  60% { transform: translateY(-9px) rotate(-1.5deg) scale(1.02, .98); }
  64% { transform: translateY(3px) rotate(1deg) scale(.99, 1.01); }
  68% { transform: translateY(-7px) rotate(-1deg) scale(1.02, .98); }
  74% { transform: translateY(0) rotate(0) scale(1); }
}
.fx--cough i { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle, rgba(150,155,165,.75), rgba(150,155,165,0) 70%); opacity: 0; --d: 0s; animation: puff 3s ease-out infinite; animation-delay: var(--d); }
.fx--cough i:nth-child(2) { --dx: 70px; }
.fx--cough i:nth-child(1) { --dx: -80px; }
.fx--cough i:nth-child(3) { --dx: 10px; }
@keyframes puff {
  0%, 56% { opacity: 0; transform: translate(0, 0) scale(.4); }
  62% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -130px) scale(2.4); }
}
@media (prefers-reduced-motion: reduce) { .fx i, .pose { animation: none !important; } }


.pinlist .s { text-align: center; line-height: 1.1; }
.pinlist .s b { display: block; font-size: 22px; font-weight: 300; }
.pinlist .s:nth-child(2) b { font-weight: 500; }
.pinlist .s small { display: block; margin-top: 3px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.credit { margin: 8px 0 0; padding-top: 24px; border-top: 1px solid var(--hair); text-align: center; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ======================================================================
   Six pandas + temperature effects (all movement is done in code)
   ====================================================================== */
.panda__body { position: absolute; inset: 0; }
html[data-pose="oxygen"] .pose--oxygen, html[data-pose="passout"] .pose--passout { opacity: 1; }

/* Where the forehead / mouth / mask are on each picture (% of the panda box) */
html { --fx: 47%; --fy: 25%; --mx: 49%; --my: 40%; }
html[data-pose="good"]      { --fx: 46%; --fy: 24%; --mx: 49%; --my: 38%; }
html[data-pose="moderate"]  { --fx: 50%; --fy: 25%; --mx: 49%; --my: 42%; }
html[data-pose="mask"] { --fx: 47%; --fy: 23%; --mx: 49%; --my: 40%; }
html[data-pose="cough"]    { --fx: 49%; --fy: 35%; --mx: 49%; --my: 48%; }
html[data-pose="oxygen"]    { --fx: 55%; --fy: 24%; --mx: 57%; --my: 40%; }
html[data-pose="passout"]   { --fx: 39%; --fy: 58%; --mx: 38%; --my: 70%; }

/* ---- Oxygen mask pose: slow, heavy breaths and rising bubbles ---- */
html[data-pose="oxygen"] .pose--oxygen { transform-origin: 50% 95%; animation: gasp 2.6s ease-in-out infinite; }
@keyframes gasp { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.04, .965); } }
.fx--oxygen { opacity: 0; }
html[data-pose="oxygen"] .fx--oxygen { opacity: 1; }
.fx--oxygen i { position: absolute; left: var(--mx); top: var(--my); width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; border: 1.5px solid rgba(150, 205, 235, .95); background: rgba(255, 255, 255, .45); opacity: 0; animation: bubble 3s ease-out infinite; animation-delay: var(--d); }
@keyframes bubble { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 20% { opacity: .95; } 100% { opacity: 0; transform: translate(26px, -70px) scale(1.5); } }

/* ---- Passed out: no shaking, just slow shallow breathing ---- */
html[data-pose="passout"] .panda { animation: none; }
html[data-pose="passout"] .pose--passout { transform-origin: 50% 95%; animation: breathe 4.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.035); } }
html[data-pose="passout"] .panda-shadow { width: 300px; }

/* ---- Temperature: cold (shivering, icy glow, snow, breath) ---- */
html[data-temp="cold"] .panda__body { animation: shiver .16s linear infinite; filter: drop-shadow(0 0 14px rgba(125, 195, 255, .9)); }
@keyframes shiver { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.6px) rotate(-.4deg); } 75% { transform: translateX(1.6px) rotate(.4deg); } }
.fx--cold { opacity: 0; }
html[data-temp="cold"] .fx--cold { opacity: 1; }
.fx--cold b { position: absolute; top: -4%; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(160, 215, 255, .95); opacity: 0; animation: snow 3.4s linear infinite; animation-delay: var(--d); }
@keyframes snow { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(14px, 330px); } }
.fx--cold em { position: absolute; left: var(--mx); top: var(--my); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%); opacity: 0; animation: breath 2.2s ease-out infinite; animation-delay: var(--d); }
@keyframes breath { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 25% { opacity: .85; } 100% { opacity: 0; transform: translate(-30px, -34px) scale(1.8); } }

/* ---- Temperature: warm / hot (sweating) ----
   Sweat beads form on the panda's face, grow, slide a little and fade. They can never leave the face:
   each bead is placed inside the head oval of the current pose (--hx --hy --hrx --hry, % of the panda box)
   and the whole layer is clipped to that oval. Bead size (--s) is a percent of the panda's width (cqw), so beads
   shrink with the panda on phones. Warm shows 5 beads, hot shows 11 and moves faster. */
html { --hx: 49%; --hy: 40%; --hrx: 21%; --hry: 15%; }
html[data-pose="good"]     { --hx: 49%; --hy: 40%; --hrx: 23%; --hry: 17%; }
html[data-pose="moderate"] { --hx: 52%; --hy: 37%; --hrx: 23%; --hry: 16%; }
html[data-pose="mask"]     { --hx: 48%; --hy: 24%; --hrx: 20%; --hry: 8%; }   /* above the face mask */
html[data-pose="cough"]    { --hx: 50%; --hy: 45%; --hrx: 13%; --hry: 10%; }
html[data-pose="oxygen"]   { --hx: 58%; --hy: 20%; --hrx: 19%; --hry: 9%; }   /* above the oxygen mask */
html[data-pose="passout"]  { --hx: 42%; --hy: 68%; --hrx: 19%; --hry: 11%; }
.panda { container-type: inline-size; }
.fx--sweat { opacity: 0; clip-path: ellipse(var(--hrx) var(--hry) at var(--hx) var(--hy)); }
html[data-temp="warm"] .fx--sweat, html[data-temp="hot"] .fx--sweat { opacity: 1; }
.fx--sweat s {
  position: absolute; display: none; text-decoration: none;
  left: calc(var(--hx) + var(--u) * var(--hrx) * .85); top: calc(var(--hy) + var(--v) * var(--hry) * .85);
  --bead: max(6px, calc(var(--s, 2.1) * 1cqw));   /* scales with the panda, never below 6px */
  width: var(--bead); height: var(--bead); margin: calc(var(--bead) / -2) 0 0 calc(var(--bead) / -2);
  border-radius: 50% 0 50% 50%; transform: rotate(-45deg);
  background: linear-gradient(135deg, rgba(214, 240, 254, .98), rgba(120, 190, 238, .97));
  border: max(1px, .3cqw) solid rgba(70, 140, 205, .85); box-shadow: 0 1px 2px rgba(40, 90, 140, .3);
  opacity: 0; animation: bead 3.4s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.fx--sweat s::after { content: ""; position: absolute; left: 22%; top: 40%; width: 24%; height: 30%; border-radius: 50%; background: rgba(255, 255, 255, .95); transform: rotate(20deg); }
.fx--sweat .hot-only { display: none; }
.fx--sweat s:not(.hot-only), html[data-temp="hot"] .fx--sweat s { display: block; }
html[data-temp="hot"] .fx--sweat s { animation-duration: 2.4s; }
@keyframes bead {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-45deg) scale(.3); }
  18%  { opacity: 1; transform: translate(0, 0) rotate(-45deg) scale(1); }
  70%  { opacity: 1; transform: translate(0, 1.6cqw) rotate(-45deg) scale(1.05); }
  100% { opacity: 0; transform: translate(0, 3.6cqw) rotate(-45deg) scale(.9); }
}
/* Hot: the whole panda pants a little (only when it is not shivering) */
html[data-temp="hot"] .panda__body { transform-origin: 50% 95%; animation: pant .7s ease-in-out infinite; }
@keyframes pant { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012, .988); } }

html[data-temp="hot"] .panda-shadow { filter: blur(10px); }

@media (prefers-reduced-motion: reduce) {
  .panda__body, .fx b, .fx em, .fx u, .fx s, .fx i { animation: none !important; }
  .fx--cold b, .fx--cold em, .fx--oxygen i, .fx--sweat u, .fx--sweat s { opacity: .6; }
}

/* ======================================================================
   Mascot picker + per-mascot face positions
   ====================================================================== */
.mascot-picker { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--hair); }
.mascot-picker button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid transparent; background: transparent; cursor: pointer; }
.mascot-picker button img { width: 28px; height: 28px; object-fit: cover; object-position: 50% 12%; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.mascot-picker button[aria-checked="true"] { background: rgba(255, 255, 255, .55); border-color: var(--ink); }
.mascot-picker button:not([aria-checked="true"]) img { opacity: .75; }
.mascot-picker button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 720px) {
  .nav { padding: 8px 10px 8px 18px; gap: 8px; }
  .nav__brand { font-size: 15px; }
  .nav__right { gap: 8px; min-width: 0; }
  .nav__meta { gap: 6px; max-width: 72px; line-height: 1.2; min-width: 0; }
  .mascot-picker { padding: 2px; }
  .mascot-picker button { width: 30px; height: 30px; }
  .mascot-picker button img { width: 24px; height: 24px; }
}

/* Where the face, mask and mouth are on each otter picture (% of the picture box).
   hx/hy/hrx/hry = oval the sweat beads stay inside; mx/my = mask or mouth (bubbles, breath) */
html[data-mascot="otter"][data-pose="good"]    { --hx: 51%; --hy: 37%; --hrx: 17%; --hry: 11%; --mx: 53%; --my: 43%; }
html[data-mascot="otter"][data-pose="moderate"]{ --hx: 55%; --hy: 39%; --hrx: 17%; --hry: 11%; --mx: 56%; --my: 43%; }
html[data-mascot="otter"][data-pose="mask"]    { --hx: 53%; --hy: 32%; --hrx: 16%; --hry: 7%;  --mx: 52%; --my: 49%; }
html[data-mascot="otter"][data-pose="cough"]   { --hx: 49%; --hy: 40%; --hrx: 14%; --hry: 9%;  --mx: 49%; --my: 49%; }
html[data-mascot="otter"][data-pose="oxygen"]  { --hx: 56%; --hy: 30%; --hrx: 15%; --hry: 6%;  --mx: 57%; --my: 47%; }
html[data-mascot="otter"][data-pose="passout"] { --hx: 30%; --hy: 84%; --hrx: 14%; --hry: 8%;  --mx: 29%; --my: 88%; }

.refresh-row { display: flex; margin-top: -18px; }   /* sits just under the data note */
.refresh-row .btn { background: var(--glass-bg); }

.live { flex: none; }   /* never squash the status dot into an oval */
@media (max-width: 350px) { .nav__meta { display: none; } }