:root {
  color-scheme: dark;
  --bg: #020805;
  --panel: rgba(5, 29, 16, 0.72);
  --panel-border: rgba(171, 255, 56, 0.2);
  --lime: #aaff2c;
  --lime-soft: #6fdb25;
  --green: #0d7b3f;
  --deep-green: #003c21;
  --cream: #ffe8ba;
  --text: #f4ffe6;
  --muted: #a9b9aa;
  --theme: #aaff2c;
  --theme-rgb: 170, 255, 44;
  --danger: #ff2b2b;
  --orb-size: min(53vw, 500px);
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
}

body {
  min-height: 100svh;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 40%, rgba(25, 116, 54, 0.22), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(125, 255, 48, 0.08), transparent 43%),
    linear-gradient(180deg, #020805 0%, #000 100%);
  isolation: isolate;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, [tabindex]:focus-visible, a:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 4px;
}

#scene-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -4;
  opacity: 0.9;
}

.noise-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

#fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  overflow: hidden;
}

.topbar {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: max(18px, env(safe-area-inset-top)) clamp(18px, 3vw, 44px) 12px;
  pointer-events: none;
}

.brand, .controls { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; }
.brand picture { display: contents; }
.brand img {
  display: block;
  width: clamp(190px, 23vw, 350px);
  height: auto;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.65));
}

.controls { display: flex; gap: 8px; }
.icon-button {
  min-height: 42px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  border: 1px solid rgba(170,255,44,0.22);
  border-radius: 999px;
  background: rgba(2, 13, 7, 0.72);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.icon-button:hover { transform: translateY(-2px); border-color: rgba(170,255,44,.65); background: rgba(8, 37, 18, .9); }
.icon-button[aria-pressed="false"] { opacity: .52; }
.icon-button > span:first-child { font-weight: 900; color: var(--lime); }
.sponsor-button { text-decoration: none; }
.sponsor-button > span:first-child { color: #ea4aaa; }
.sponsor-button:hover { border-color: rgba(234,74,170,.65); }
.control-label { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.experience {
  position: relative;
  min-height: 100svh;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: clamp(104px, 13vh, 140px) 24px calc(86px + var(--safe-bottom));
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
}

.intro { text-align: center; z-index: 2; pointer-events: none; }
.eyebrow {
  margin: 0 0 5px;
  color: var(--lime);
  font-size: clamp(.7rem, 1.2vw, .86rem);
  font-weight: 900;
  letter-spacing: .32em;
}
.intro h1 {
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(2.35rem, 7vw, 6rem);
  line-height: .95;
  letter-spacing: .035em;
  color: var(--cream);
  text-shadow: 0 2px 0 #4f2600, 0 0 36px rgba(170, 255, 44, .12);
}
.instruction {
  margin: 12px auto 0;
  max-width: 650px;
  color: var(--muted);
  font-size: clamp(.92rem, 2vw, 1.1rem);
}

.frog-stage {
  position: relative;
  width: min(100%, 740px);
  min-height: calc(var(--orb-size) + 86px);
  margin: 4px auto 0;
  display: grid;
  place-items: center;
  perspective: 1400px;
  touch-action: none;
  user-select: none;
}

.frog-orb {
  position: relative;
  z-index: 4;
  width: var(--orb-size);
  aspect-ratio: 1;
  cursor: grab;
  border-radius: 50%;
  touch-action: none;
  outline-offset: 8px;
  filter: drop-shadow(0 36px 44px rgba(0,0,0,.64));
  transition: filter .35s ease, scale .22s ease;
  contain: layout paint style;
}
.frog-orb:active,
.frog-orb.is-dragging { cursor: grabbing; }
.frog-orb.is-revealed { cursor: default; }
.frog-orb.is-loading { cursor: wait; pointer-events: none; }
.frog-orb.is-shaking { scale: 1.018; }

.frog-canvas {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  filter: saturate(1.06) contrast(1.02);
}

.orb-loading {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  border-radius: 50%;
  color: var(--lime);
  font-size: clamp(.62rem, 1.25vw, .84rem);
  letter-spacing: .18em;
  text-align: center;
  background: radial-gradient(circle, rgba(5,40,20,.78), rgba(0,8,4,.94));
  transition: opacity .4s ease, visibility .4s ease;
}
.frog-orb.is-ready .orb-loading { opacity: 0; visibility: hidden; }
.loading-orbit {
  width: 64px;
  height: 64px;
  border: 3px solid rgba(170,255,44,.14);
  border-top-color: var(--lime);
  border-radius: 50%;
  animation: loading-spin .8s linear infinite;
  box-shadow: 0 0 28px rgba(170,255,44,.16);
}

.answer-overlay {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  width: 59%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(.68);
  filter: blur(9px);
  pointer-events: none;
  transition: opacity .42s ease, transform .62s cubic-bezier(.18,.82,.2,1), filter .42s ease, visibility .42s;
}
.frog-orb.is-revealed .answer-overlay {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
}

.answer-window {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 21% 10% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  overflow: hidden;
  border-radius: 50%;
}
.answer-triangle {
  position: absolute;
  inset: 5%;
  z-index: -1;
  clip-path: polygon(50% 2%, 96% 88%, 4% 88%);
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--theme-rgb), .34), transparent 57%),
    linear-gradient(180deg, rgba(var(--theme-rgb), .28), rgba(var(--theme-rgb), .04));
  filter: drop-shadow(0 0 16px rgba(var(--theme-rgb), .5));
}
.answer-category {
  margin: 0 0 8px;
  font-size: clamp(.5rem, 1vw, .76rem);
  font-weight: 950;
  letter-spacing: .17em;
  color: rgb(var(--theme-rgb));
  text-shadow: 0 1px 4px #000, 0 0 8px #000, 0 0 12px rgba(0,0,0,0.8);
}
.answer-text {
  margin: 0;
  max-width: 94%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.76rem, 1.8vw, 1.28rem);
  line-height: 1.17;
  font-weight: 700;
  text-wrap: balance;
  text-shadow: 0 2px 8px #000, 0 0 12px #000;
}
.answer-text.is-long { font-size: clamp(.61rem, 1.28vw, .9rem); line-height: 1.14; }
.answer-text.is-very-long { font-size: clamp(.52rem, 1.04vw, .75rem); line-height: 1.1; }

.grip-hint {
  position: absolute;
  z-index: 11;
  left: 50%;
  bottom: 8%;
  display: flex;
  gap: 6px;
  opacity: .52;
  transform: translateX(-50%);
  transition: opacity .25s ease;
  pointer-events: none;
}
.grip-hint span { width: 7px; height: 7px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 9px rgba(255,232,186,.6); }
.frog-orb.is-shaking .grip-hint,
.frog-orb.is-revealed .grip-hint { opacity: 0; }

.model-label {
  position: absolute;
  z-index: 11;
  top: 9%;
  right: 5%;
  padding: 5px 8px;
  border: 1px solid rgba(170,255,44,.32);
  border-radius: 999px;
  color: var(--lime);
  background: rgba(0,15,7,.68);
  font: 800 .52rem/1 ui-monospace, monospace;
  letter-spacing: .12em;
  pointer-events: none;
  opacity: .72;
}
.frog-orb.is-revealed .model-label { opacity: 0; }

.frog-shadow {
  position: absolute;
  z-index: 1;
  top: calc(50% + var(--orb-size) * .42);
  width: calc(var(--orb-size) * .72);
  height: calc(var(--orb-size) * .15);
  border-radius: 50%;
  background: rgba(0,0,0,.82);
  filter: blur(17px);
  box-shadow: 0 0 35px rgba(var(--theme-rgb), .16);
  transform: scaleX(1);
}

.orbit-ring {
  position: absolute;
  z-index: 0;
  width: calc(var(--orb-size) * 1.22);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(var(--theme-rgb), .15);
  box-shadow: inset 0 0 20px rgba(var(--theme-rgb), .03);
}
.orbit-ring--one { transform: rotateX(73deg) rotateZ(8deg); animation: orbit-spin 11s linear infinite; }
.orbit-ring--two { width: calc(var(--orb-size) * 1.08); transform: rotateY(70deg) rotateZ(20deg); animation: orbit-spin-reverse 16s linear infinite; opacity: .55; }

.energy-panel {
  position: absolute;
  z-index: 8;
  bottom: 0;
  width: min(360px, 72vw);
  opacity: .74;
  transition: opacity .25s ease, transform .25s ease;
}
.energy-label { display: flex; justify-content: space-between; font-size: .62rem; font-weight: 900; letter-spacing: .14em; color: var(--muted); }
.energy-track { margin-top: 7px; height: 7px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.energy-fill { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4eab1e, var(--lime), #ffe56c); box-shadow: 0 0 14px rgba(170,255,44,.55); transform: scaleX(0); transform-origin: left center; transition: transform .06s linear; will-change: transform; }

.action-panel {
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.primary-button, .secondary-button {
  min-height: 50px;
  border-radius: 999px;
  padding: 13px 24px;
  font-weight: 950;
  letter-spacing: .08em;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.primary-button {
  color: #071005;
  border: 1px solid #d6ff62;
  background: linear-gradient(180deg, #c8ff48, #7bcd1c);
  box-shadow: 0 10px 25px rgba(82,190,31,.2), inset 0 1px rgba(255,255,255,.7);
}
.secondary-button { color: var(--cream); border: 1px solid rgba(255,232,186,.28); background: rgba(2,13,7,.75); }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px) scale(1.02); }
.primary-button:active, .secondary-button:active { transform: translateY(1px) scale(.98); }
.button-icon { display: inline-block; margin-right: 8px; font-size: 1.2em; }
.status-text { flex-basis: 100%; margin: 1px 0 0; color: var(--muted); font-size: .78rem; }

.footer {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 10px clamp(18px, 3vw, 44px) var(--safe-bottom);
  color: rgba(208,225,208,.55);
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  pointer-events: none;
}
.footer a {
  color: inherit;
  pointer-events: auto;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer a:hover {
  color: var(--text);
}

.help-dialog {
  width: min(560px, calc(100% - 32px));
  color: var(--text);
  border: 1px solid rgba(170,255,44,.3);
  border-radius: 24px;
  background: rgba(2,16,8,.96);
  box-shadow: 0 35px 100px rgba(0,0,0,.72), 0 0 60px rgba(93,205,35,.12);
  padding: 0;
}
.help-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(8px); }
.help-dialog form { padding: 24px; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dialog-header h2 { margin: 0; color: var(--cream); }
.dialog-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: transparent; color: white; font-size: 1.5rem; cursor: pointer; }
.dialog-content { margin: 20px 0; color: #c9d7c9; line-height: 1.55; }
.dialog-content p { margin: 10px 0; }
.dialog-confirm { width: 100%; }
.lang-options { display: flex; flex-direction: column; gap: 12px; }
.lang-option { width: 100%; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.noscript-message {
  position: fixed;
  z-index: 100;
  inset: 20px;
  display: grid;
  place-items: center;
  text-align: center;
  background: #120;
  border: 2px solid var(--lime);
  border-radius: 24px;
  color: white;
  font-size: 1.2rem;
}

@keyframes orbit-spin { to { transform: rotateX(73deg) rotateZ(368deg); } }
@keyframes orbit-spin-reverse { to { transform: rotateY(70deg) rotateZ(-340deg); } }

@keyframes loading-spin { to { transform: rotate(360deg); } }

.frog-orb.webgl-failed {
  background:
    radial-gradient(circle at 50% 50%, rgba(170,255,44,.12), transparent 62%),
    url("../assets/images/beetales-avatar.webp") center / 88% auto no-repeat,
    radial-gradient(circle, #0d4d28, #00140a 72%);
  border: 2px solid rgba(170,255,44,.26);
}
.frog-orb.webgl-failed .orb-loading,
.frog-orb.webgl-failed .model-label,
.frog-orb.webgl-failed .grip-hint { display: none; }

/* --------------------------------------------------------------------------
   Guaranteed browser-rendered 3D frog
   -------------------------------------------------------------------------- */
.frog-canvas { display: none !important; }

.frog-model {
  --eye-x: 0px;
  --eye-y: 0px;
  --shine-x: 0px;
  --shine-y: 0px;
  --energy: 0;
  --frog-theme: #aaff2c;
  position: absolute;
  z-index: 3;
  inset: 4.5%;
  visibility: hidden;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}

.frog-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: clamp(4px, .75vw, 8px) solid #032d18;
  box-shadow:
    inset 22px -28px 44px rgba(0, 28, 13, .58),
    inset -18px 20px 32px rgba(215, 255, 91, .18),
    0 0 calc(18px + 30px * var(--energy)) color-mix(in srgb, var(--frog-theme) 44%, transparent),
    0 26px 35px rgba(0, 0, 0, .58);
}

.frog-front {
  background:
    radial-gradient(circle at 35% 20%, rgba(226,255,109,.68) 0 4%, transparent 21%),
    radial-gradient(circle at 67% 68%, rgba(39,121,8,.30), transparent 38%),
    linear-gradient(145deg, #a9f52a 0%, #70d716 35%, #35a60e 72%, #087039 100%);
}

.frog-front::before {
  content: "";
  position: absolute;
  inset: 2.5%;
  border-radius: 50%;
  border: 2px solid rgba(213,255,95,.22);
  box-shadow: inset 0 0 34px rgba(255,255,255,.10);
}

.frog-front::after {
  content: "";
  position: absolute;
  z-index: 20;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(112deg, rgba(255,255,255,.26), transparent 22% 70%, rgba(0,0,0,.2));
  mix-blend-mode: screen;
  opacity: .45;
}

.frog-back {
  transform: rotateY(180deg) translateZ(1px);
  background:
    radial-gradient(circle at 35% 20%, rgba(207,255,95,.38), transparent 20%),
    radial-gradient(circle at 50% 52%, #268b17 0 46%, #116b2e 72%, #043a20 100%);
}

.frog-equator {
  position: absolute;
  z-index: -1;
  inset: 1.2%;
  border-radius: 50%;
  border: clamp(7px, 1.1vw, 13px) solid #0a4a25;
  box-shadow: 0 0 18px rgba(145,255,44,.22), inset 0 0 20px rgba(0,0,0,.5);
  transform: rotateY(88deg) scaleX(.23);
  opacity: .92;
}

.frog-surface-glow {
  position: absolute;
  left: 16%;
  top: 10%;
  width: 35%;
  height: 19%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.35), transparent 70%);
  filter: blur(5px);
  transform: rotate(-20deg);
}

/* Worker helmet inspired by the supplied BeeTales avatar. */
.helmet {
  position: absolute;
  z-index: 8;
  left: 17%;
  top: -2%;
  width: 66%;
  height: 36%;
  filter: drop-shadow(0 7px 3px rgba(0,0,0,.42));
}
.helmet-dome {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 0;
  height: 82%;
  border: clamp(3px, .5vw, 6px) solid #9b4c00;
  border-bottom-width: 2px;
  border-radius: 52% 52% 18% 18% / 78% 78% 18% 18%;
  background:
    radial-gradient(circle at 38% 18%, #ffe660 0 7%, transparent 27%),
    linear-gradient(112deg, #ffda28 0%, #ffb300 50%, #e77b00 100%);
  box-shadow: inset -12px -8px 15px rgba(150,58,0,.24), inset 9px 8px 12px rgba(255,255,255,.25);
}
.helmet-ridge {
  position: absolute;
  z-index: 2;
  left: 43%;
  top: -2%;
  width: 14%;
  height: 73%;
  border: 3px solid #a65000;
  border-radius: 18px 18px 4px 4px;
  background: linear-gradient(90deg, #dc7200, #ffbb05 45%, #f28b00);
  box-shadow: inset 4px 0 rgba(255,229,89,.34);
}
.helmet-band {
  position: absolute;
  z-index: 3;
  left: 2%;
  right: 2%;
  bottom: 7%;
  height: 15%;
  border: 3px solid #944700;
  border-radius: 45% 45% 20% 20%;
  background: linear-gradient(#ffc116, #e57a00);
}
.helmet-brim {
  position: absolute;
  z-index: 4;
  left: -6%;
  right: -6%;
  bottom: 0;
  height: 13%;
  border: 3px solid #844000;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd02b, #ef8d00);
  box-shadow: 0 5px 6px rgba(0,0,0,.45);
}

.goggle-strap {
  position: absolute;
  z-index: 7;
  left: 1.5%;
  right: 1.5%;
  top: 27%;
  height: 20%;
  border-radius: 38%;
  border: clamp(8px, 1.6vw, 17px) solid #07120c;
  background: rgba(3,8,5,.62);
  box-shadow: inset 0 0 0 4px #314032, 0 7px 9px rgba(0,0,0,.6);
}

.frog-eye {
  position: absolute;
  z-index: 10;
  top: 22.5%;
  width: 36%;
  aspect-ratio: 1.08;
  border-radius: 48% 48% 46% 46%;
  padding: 4.2%;
  background: linear-gradient(145deg, #273329, #020504 64%);
  box-shadow:
    inset 0 0 0 clamp(3px, .55vw, 6px) #4d5f4f,
    0 6px 8px rgba(0,0,0,.58);
}
.frog-eye--left { left: 9.5%; }
.frog-eye--right { right: 9.5%; }

.goggle-lens {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: clamp(3px, .55vw, 6px) solid #8b4b00;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.38), transparent 14%),
    radial-gradient(circle at 50% 55%, #ffc43c, #c46b00 72%);
  box-shadow: inset 0 0 14px rgba(75,24,0,.75), inset 7px 6px 8px rgba(255,225,107,.28);
}

.frog-iris {
  width: 63%;
  height: 69%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 43%, #8b4a0b 0 32%, #5a2800 70%, #241000 100%);
  box-shadow: inset 0 0 0 3px rgba(31,13,0,.45);
}
.frog-pupil {
  position: relative;
  width: 58%;
  height: 68%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 35%, #18200d, #020403 68%);
  transform: translate3d(var(--eye-x), var(--eye-y), 0);
  transition: transform .06s linear;
  box-shadow: 0 0 5px rgba(0,0,0,.8);
}
.eye-shine {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #fffbe9;
  box-shadow: 0 0 5px rgba(255,255,255,.75);
  transform: translate(var(--shine-x), var(--shine-y));
}
.eye-shine--large { left: 8%; top: 4%; width: 31%; aspect-ratio: 1; }
.eye-shine--small { right: 7%; bottom: 16%; width: 13%; aspect-ratio: 1; }
.goggle-bridge {
  position: absolute;
  z-index: 12;
  left: 43%;
  top: 33%;
  width: 14%;
  height: 5.5%;
  border-radius: 999px;
  background: linear-gradient(#354238, #020403);
  box-shadow: 0 3px 4px rgba(0,0,0,.6);
}

.frog-muzzle {
  position: absolute;
  z-index: 6;
  left: 6.5%;
  right: 6.5%;
  top: 42%;
  height: 48%;
  border-radius: 46% 46% 50% 50% / 38% 38% 57% 57%;
  background:
    radial-gradient(circle at 35% 24%, rgba(236,255,116,.38), transparent 21%),
    linear-gradient(145deg, #b6f52c, #76d914 58%, #44ad0c 100%);
  border: 3px solid rgba(18,104,13,.38);
  box-shadow: inset -13px -18px 24px rgba(27,94,6,.26), inset 12px 11px 17px rgba(238,255,130,.24);
}
.nostril {
  position: absolute;
  top: 26%;
  width: 5.2%;
  height: 6.2%;
  border-radius: 50%;
  background: #073a1c;
  box-shadow: inset 1px 1px 2px #001d0e;
}
.nostril--left { left: 43%; transform: translateX(-100%); }
.nostril--right { right: 43%; transform: translateX(100%); }
.frog-smile {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 48%;
  height: 27%;
  border-bottom: clamp(5px, .9vw, 9px) solid #05391a;
  border-radius: 0 0 50% 50%;
  filter: drop-shadow(0 2px 0 rgba(210,255,76,.3));
}
.smile-corner {
  position: absolute;
  top: 59%;
  width: 5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #05391a;
}
.smile-corner--left { left: 16.8%; }
.smile-corner--right { right: 16.8%; }
.frog-belly {
  position: absolute;
  z-index: 5;
  left: 16%;
  right: 16%;
  bottom: -3%;
  height: 22%;
  border-radius: 50% 50% 44% 44%;
  background: radial-gradient(ellipse at 50% 20%, #ddff31, #a5e51f 72%);
  box-shadow: inset 0 8px 14px rgba(255,255,255,.16);
}
.sphere-highlight {
  position: absolute;
  z-index: 19;
  left: 9%;
  top: 18%;
  width: 14%;
  height: 38%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.30), transparent);
  filter: blur(7px);
  transform: rotate(18deg);
  opacity: .52;
}

.back-highlight {
  position: absolute;
  left: 14%;
  top: 11%;
  width: 28%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.23), transparent 70%);
  transform: rotate(-24deg);
}
.oracle-socket {
  position: absolute;
  left: 17%;
  top: 17%;
  width: 66%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #07110c 0 56%, #010302 74%);
  box-shadow:
    inset 0 0 24px #000,
    0 0 0 clamp(5px, .9vw, 9px) #06351d,
    0 0 0 clamp(8px, 1.35vw, 14px) var(--frog-theme),
    0 0 calc(20px + 25px * var(--energy)) color-mix(in srgb, var(--frog-theme) 55%, transparent);
}
.oracle-rim {
  position: absolute;
  inset: 8%;
  border: 2px solid color-mix(in srgb, var(--frog-theme) 70%, #fff 10%);
  border-radius: 50%;
  opacity: .6;
}
.oracle-triangle {
  width: 70%;
  height: 70%;
  clip-path: polygon(50% 5%, 96% 88%, 4% 88%);
  background: radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--frog-theme) 55%, #102318), #10291a 73%);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--frog-theme) 55%, transparent));
  opacity: .92;
}

.frog-orb.is-shaking .frog-face {
  box-shadow:
    inset 22px -28px 44px rgba(0,28,13,.58),
    inset -18px 20px 32px rgba(215,255,91,.18),
    0 0 58px color-mix(in srgb, var(--frog-theme) 50%, transparent),
    0 26px 35px rgba(0,0,0,.58);
}
.frog-orb.is-shaking .eye-shine { filter: blur(.35px); }
.frog-orb.is-revealed .frog-equator { opacity: .55; }

@supports not (color: color-mix(in srgb, red, blue)) {
  .frog-face { box-shadow: inset 22px -28px 44px rgba(0,28,13,.58), inset -18px 20px 32px rgba(215,255,91,.18), 0 0 32px rgba(170,255,44,.25), 0 26px 35px rgba(0,0,0,.58); }
  .oracle-socket { box-shadow: inset 0 0 24px #000, 0 0 0 7px #06351d, 0 0 0 12px #aaff2c, 0 0 28px rgba(170,255,44,.35); }
  .oracle-rim { border-color: #aaff2c; }
  .oracle-triangle { background: radial-gradient(circle at 50% 54%, #5db72d, #10291a 73%); }
}

/* --------------------------------------------------------------------------
   V5 spherical oracle: volumetric shell + independent surface rotation
   -------------------------------------------------------------------------- */
.frog-model {
  inset: 3.4%;
  transform-style: preserve-3d;
  perspective: 1200px;
  overflow: visible;
}

.sphere-volume,
.sphere-shell,
.frog-surface-rotator {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}

.sphere-volume {
  z-index: 0;
  transform-style: preserve-3d;
}

.sphere-slice {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  opacity: var(--slice-opacity);
  transform: translateZ(var(--slice-z)) scale(var(--slice-scale));
  background:
    radial-gradient(circle at 34% 23%, rgba(224,255,103,.38), transparent 22%),
    linear-gradient(145deg, #9bef27 0%, #4ebd13 50%, #08703b 100%);
  box-shadow:
    inset 18px -22px 32px rgba(0,27,13,.33),
    inset -12px 16px 22px rgba(227,255,118,.12);
  backface-visibility: visible;
}

.sphere-shell {
  z-index: 1;
  background:
    radial-gradient(circle at 32% 20%, rgba(255,255,255,.34) 0 4%, transparent 22%),
    radial-gradient(circle at 66% 70%, rgba(0,66,27,.23), transparent 42%),
    linear-gradient(145deg, rgba(174,247,47,.88), rgba(66,181,17,.9) 58%, rgba(4,89,44,.94));
  border: clamp(5px, .8vw, 9px) solid #04331a;
  box-shadow:
    inset 28px -34px 48px rgba(0,28,13,.58),
    inset -20px 24px 34px rgba(224,255,112,.18),
    0 0 calc(20px + 32px * var(--energy)) color-mix(in srgb, var(--frog-theme) 42%, transparent),
    0 30px 40px rgba(0,0,0,.58);
  transform: translateZ(0);
  overflow: hidden;
}

.sphere-shell::before {
  content: "";
  position: absolute;
  inset: 2.2%;
  border-radius: 50%;
  border: 2px solid rgba(220,255,104,.2);
  box-shadow: inset 0 0 38px rgba(255,255,255,.08);
}

.sphere-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(112deg, rgba(255,255,255,.22), transparent 19% 66%, rgba(0,0,0,.26)),
    radial-gradient(ellipse at 50% 103%, rgba(0,35,15,.42), transparent 34%);
  mix-blend-mode: screen;
  opacity: .55;
}

.frog-surface-rotator {
  z-index: 4;
  transition: transform .48s cubic-bezier(.2,.78,.18,1);
  transform: rotateY(0deg);
  will-change: transform;
}

.frog-orb.is-turning .frog-surface-rotator,
.frog-orb.is-revealed .frog-surface-rotator {
  transform: rotateY(180deg);
}

.frog-face {
  inset: 1.2%;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

.frog-front {
  transform: translateZ(var(--sphere-face-z));
  background:
    radial-gradient(circle at 35% 20%, rgba(226,255,109,.48) 0 4%, transparent 21%),
    radial-gradient(circle at 67% 68%, rgba(39,121,8,.18), transparent 38%),
    linear-gradient(145deg, rgba(169,245,42,.96) 0%, rgba(112,215,22,.95) 35%, rgba(53,166,14,.95) 72%, rgba(8,112,57,.96) 100%);
}

.frog-back {
  transform: rotateY(180deg) translateZ(var(--sphere-face-z));
  background:
    radial-gradient(circle at 35% 20%, rgba(207,255,95,.32), transparent 20%),
    radial-gradient(circle at 50% 52%, #268b17 0 46%, #116b2e 72%, #043a20 100%);
}

.frog-equator {
  z-index: 2;
  inset: 1.5%;
  border-width: clamp(8px, 1.15vw, 14px);
  transform: rotateY(90deg) scaleX(.34);
  opacity: .66;
}

.frog-orb.is-shaking .sphere-shell {
  box-shadow:
    inset 28px -34px 48px rgba(0,28,13,.58),
    inset -20px 24px 34px rgba(224,255,112,.18),
    0 0 62px color-mix(in srgb, var(--frog-theme) 48%, transparent),
    0 30px 40px rgba(0,0,0,.62);
}

.frog-orb.is-turning .sphere-shell {
  animation: sphere-answer-pulse .48s ease;
}

@keyframes sphere-answer-pulse {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.22) saturate(1.15); }
  100% { filter: brightness(1); }
}

/* Optional diagnostics, loaded only when the URL contains ?perf=1. */
.performance-panel {
  position: fixed;
  z-index: 90;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: grid;
  gap: 5px;
  min-width: 190px;
  padding: 12px 14px;
  color: #eaffda;
  border: 1px solid rgba(170,255,44,.42);
  border-radius: 12px;
  background: rgba(0,12,6,.92);
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
  font: 700 11px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .04em;
}
.performance-panel strong { color: var(--lime); letter-spacing: .14em; }
.performance-panel span { white-space: nowrap; }
.performance-panel button {
  margin-top: 5px;
  padding: 5px 8px;
  color: var(--cream);
  border: 1px solid rgba(170,255,44,.35);
  border-radius: 7px;
  background: #092315;
  cursor: pointer;
  font: inherit;
}