/* ==========================================================================
   Roo's Plate · protein estimation mini game
   Scoped under .rp-root so it can be dropped into any host page without
   leaking variables or colliding with existing class names.

   Fonts are NOT loaded here. The module inherits the host page's brand faces
   via --rp-font-* and falls back to the system stack if they are absent.
   ========================================================================== */

.rp-root{
  /* brand */
  --rp-lime:#C3F400;
  --rp-lime-soft:oklch(0.92 0.20 122 / .16);
  --rp-lime-line:oklch(0.92 0.20 122 / .34);
  --rp-bg:oklch(0.17 0.02 130);
  --rp-bg-2:oklch(0.21 0.024 130);
  --rp-ink:oklch(0.96 0.012 120);
  --rp-mut:oklch(0.72 0.02 125);
  --rp-clay:oklch(0.93 0.018 95);
  --rp-clay-edge:oklch(0.86 0.02 92);
  --rp-clay-shadow:oklch(0.12 0.02 130 / .55);
  --rp-warm:oklch(0.80 0.03 70);

  --rp-r-lg:26px; --rp-r-md:16px; --rp-r-pill:999px;
  --rp-ease:cubic-bezier(.16,1,.3,1);

  --rp-font-display:'Lexend',system-ui,-apple-system,sans-serif;
  --rp-font-num:'Space Grotesk','Lexend',system-ui,monospace;

  /* emoji faces first so food glyphs stay crisp and colored on every platform */
  --rp-font-emoji:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;

  position:relative;
  width:min(440px,100%);
  margin-inline:auto;
  box-sizing:border-box;
  padding:22px 22px 24px;
  border:1px solid oklch(0.5 0.04 130 / .18);
  border-radius:var(--rp-r-lg);
  background:radial-gradient(120% 90% at 50% -10%, var(--rp-bg-2), var(--rp-bg) 70%);
  box-shadow:0 24px 60px -30px oklch(0.05 0.02 130 / .9);
  overflow:hidden;
  color:var(--rp-ink);
  font-family:var(--rp-font-display);
  -webkit-font-smoothing:antialiased;
}
.rp-root *{box-sizing:border-box}
/* An element with display:flex/grid ignores the hidden attribute, which left the
   "Lock it in" button clickable after a plate was already locked. */
.rp-root [hidden]{display:none!important}

/* Roo's breathing spotlight */
.rp-root::before{
  content:"";position:absolute;inset:-30% 0 auto 0;height:64%;
  background:radial-gradient(closest-side, var(--rp-lime-soft), transparent 72%);
  pointer-events:none;
}

/* ---------- header ---------- */
.rp-top{display:flex;align-items:center;justify-content:center;gap:12px;position:relative;z-index:2}
.rp-eyebrow{font:700 11px/1 var(--rp-font-num);letter-spacing:.16em;text-transform:uppercase;color:var(--rp-mut)}
.rp-dots{display:flex;gap:7px}
.rp-dot{width:8px;height:8px;border-radius:50%;background:oklch(0.5 0.03 130 / .35);transition:background .4s var(--rp-ease),box-shadow .4s var(--rp-ease)}
.rp-dot.is-on{background:var(--rp-lime);box-shadow:0 0 0 4px var(--rp-lime-soft)}
.rp-dot.is-done{background:oklch(0.92 0.2 122 / .5)}

/* ---------- Roo ---------- */
.rp-roo-wrap{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
.rp-roo{
  width:128px;height:128px;object-fit:contain;display:block;
  animation:rp-bob 5.4s var(--rp-ease) infinite;
}
@keyframes rp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.rp-bubble{margin-top:2px;max-width:322px;text-align:center;font:500 18px/1.35 var(--rp-font-display)}
.rp-bubble b{color:var(--rp-lime);font-weight:800}

/* ---------- plate ---------- */
.rp-stage{position:relative;z-index:2;margin:14px auto 0;width:250px;height:132px}
.rp-plate{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(120% 150% at 50% 18%, var(--rp-clay), var(--rp-clay-edge));
  box-shadow:0 14px 26px -12px var(--rp-clay-shadow),
             inset 0 3px 0 oklch(1 0 0 / .5),
             inset 0 -8px 18px oklch(0.7 0.02 90 / .5);
}
.rp-plate::after{content:"";position:absolute;inset:12px 26px;border-radius:50%;border:2px solid oklch(0.82 0.02 92 / .7)}
.rp-food{
  position:absolute;inset:10px 30px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
.rp-row{display:flex;justify-content:center;gap:7px}
.rp-row span{
  font-family:var(--rp-font-emoji);line-height:1;
  filter:drop-shadow(0 3px 4px oklch(0.2 0.02 120 / .4));
}
/* always names what is on the plate */
.rp-foodname{
  display:block;text-align:center;margin-top:11px;position:relative;z-index:2;
  font:700 12px/1 var(--rp-font-num);letter-spacing:.18em;text-transform:uppercase;color:var(--rp-mut);
}

/* ---------- controls ---------- */
.rp-controls{position:relative;z-index:2;margin-top:20px}
.rp-count-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.rp-count{font:800 30px/1 var(--rp-font-num)}
.rp-count small{font:500 14px/1 var(--rp-font-display);color:var(--rp-mut);margin-left:6px}
.rp-hint{font:700 11px/1 var(--rp-font-num);letter-spacing:.12em;text-transform:uppercase;color:var(--rp-mut)}

/* The input itself is a transparent 44px touch target; the visible 14px bar is
   drawn by the track pseudo-elements so the hit area never distorts the bar. */
.rp-range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:44px;margin:0;padding:0;
  background:transparent;outline:none;cursor:pointer;
}
.rp-range::-webkit-slider-runnable-track{
  height:14px;border-radius:var(--rp-r-pill);
  background:linear-gradient(var(--rp-lime),var(--rp-lime)) 0/var(--rp-fill,30%) 100% no-repeat,
             oklch(0.3 0.02 130 / .7);
}
.rp-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:30px;height:30px;border-radius:50%;
  background:var(--rp-ink);border:4px solid var(--rp-lime);
  box-shadow:0 6px 14px -4px oklch(0.1 0.02 130 / .7);cursor:grab;
  margin-top:-8px; /* centres the 30px thumb on the 14px track */
}
.rp-range::-webkit-slider-thumb:active{cursor:grabbing}
.rp-range::-moz-range-track{
  height:14px;border-radius:var(--rp-r-pill);background:oklch(0.3 0.02 130 / .7);
}
.rp-range::-moz-range-progress{
  height:14px;border-radius:var(--rp-r-pill);background:var(--rp-lime);
}
.rp-range::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--rp-ink);
  border:4px solid var(--rp-lime);cursor:grab;
}
.rp-range:focus-visible::-webkit-slider-runnable-track{box-shadow:0 0 0 3px var(--rp-lime-line)}
.rp-range:focus-visible::-moz-range-track{box-shadow:0 0 0 3px var(--rp-lime-line)}

/* ---------- buttons ---------- */
.rp-btns{display:flex;flex-direction:column;gap:10px;margin-top:20px;position:relative;z-index:2}
.rp-btn{
  font:800 17px/1 var(--rp-font-display);border:none;border-radius:var(--rp-r-pill);
  padding:17px 20px;min-height:44px;cursor:pointer;
  transition:transform .18s var(--rp-ease),filter .18s var(--rp-ease);
}
.rp-btn:active{transform:translateY(1px) scale(.99)}
.rp-btn:focus-visible{outline:3px solid var(--rp-lime-line);outline-offset:2px}
.rp-btn--go{background:var(--rp-lime);color:#141400;box-shadow:0 12px 26px -10px oklch(0.92 0.2 122 / .55)}
.rp-btn--go:hover{filter:brightness(1.05)}
.rp-btn--ghost{
  background:transparent;color:var(--rp-mut);
  border:1px solid oklch(0.5 0.04 130 / .3);font-weight:700;font-size:15px;padding:14px 20px;
}
.rp-btn--ghost:hover{color:var(--rp-ink);border-color:var(--rp-lime-line)}

/* ---------- reveal ---------- */
.rp-reveal,.rp-final{position:relative;z-index:2;text-align:center}
.rp-reveal{margin-top:6px}
.rp-reveal[hidden],.rp-final[hidden]{display:none}
.rp-reveal:not([hidden]),.rp-final:not([hidden]){animation:rp-rise .5s var(--rp-ease) both}
@keyframes rp-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.rp-grade{display:inline-flex;align-items:center;gap:8px;font:800 15px/1 var(--rp-font-num);padding:9px 16px;border-radius:var(--rp-r-pill)}
.rp-grade--good{background:var(--rp-lime);color:#141400}
.rp-grade--soft{background:oklch(0.8 0.03 70 / .16);color:var(--rp-warm);border:1px solid oklch(0.8 0.03 70 / .3)}

.rp-meter{margin:16px auto 4px;max-width:300px}
.rp-meter-track{position:relative;height:12px;border-radius:var(--rp-r-pill);background:oklch(0.3 0.02 130 / .7)}
.rp-meter-fill{height:100%;border-radius:var(--rp-r-pill);background:var(--rp-lime);width:0;transition:width .7s var(--rp-ease)}
.rp-meter-fill.is-soft{background:var(--rp-warm)}
.rp-meter-tick{position:absolute;top:-5px;bottom:-5px;width:3px;border-radius:2px;background:var(--rp-ink);opacity:.85}
.rp-meter-cap{display:flex;justify-content:space-between;margin-top:7px;font:700 12px/1 var(--rp-font-num);color:var(--rp-mut)}
.rp-meter-cap .rp-you{color:var(--rp-ink)}

.rp-verdict{margin-top:14px;font:800 25px/1.12 var(--rp-font-display)}
.rp-verdict .rp-g{color:var(--rp-lime)}
.rp-fact{margin-top:10px;font:500 15px/1.42 var(--rp-font-display);color:var(--rp-mut);max-width:322px;margin-inline:auto}
.rp-fact b{color:var(--rp-ink);font-weight:700}

/* ---------- final ---------- */
.rp-badge{font-family:var(--rp-font-emoji);font-size:46px;line-height:1;margin-top:6px}
.rp-final h2{margin:10px 0 0;font:900 30px/1.05 var(--rp-font-display)}
.rp-score{margin-top:8px;font:700 13px/1 var(--rp-font-num);letter-spacing:.14em;
  text-transform:uppercase;color:var(--rp-lime)}
.rp-final h2 .rp-g{color:var(--rp-lime)}
.rp-final p{margin-top:14px;font:500 16px/1.5 var(--rp-font-display);color:var(--rp-mut);max-width:332px;margin-inline:auto}
.rp-final p b{color:var(--rp-ink);font-weight:800}

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

/* ---------- narrow phones ---------- */
@media (max-width:400px){
  .rp-root{padding:18px 16px 20px}
  .rp-roo{width:112px;height:112px}
  .rp-bubble{font-size:17px}
  .rp-stage{width:230px;height:124px}
  .rp-verdict{font-size:23px}
  .rp-final h2{font-size:27px}
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  .rp-root *,.rp-root *::before,.rp-root *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;
  }
  .rp-roo{animation:none}
}