/* ==========================================================
   BASE CSS (theme-agnostic)
   - Layout + components + TV UI + FX foundations
   - Themes override variables + add vibe
   ========================================================== */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

/* ---------- Tokens (single source of truth) ---------- */
:root {
  /* UI */
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;

  --primary: #2563eb;
  --primary-hover: #1d4ed8;

  --radius: 14px;
  --shadow: 0 10px 25px rgba(0, 0, 0, 0.06);

  --chip-bg: var(--bg);

  /* Progress (themeable) */
  --tv-progress-track: rgba(255,255,255,.18);
  --tv-progress-fill: rgba(255,255,255,.75); /* can be gradient */
  --tv-progress-text: var(--muted);
  --tv-progress-height: 12px;
  --tv-progress-radius: 999px;
  --tv-progress-glow: none;

  /* FX general */
  --fx-shadow: rgba(0,0,0,.22);

  /* FX: sparkles */
  --fx-sparkle: rgba(255,255,255,.95);
  --fx-sparkle-glow: 0 0 18px rgba(255,255,255,.25);

  /* FX: bunny */
  --fx-bunny-fur: #ffffff;
  --fx-bunny-fur2: #f6f6f6;
  --fx-bunny-ear-inner: #ffb7c8;
  --fx-bunny-eye: #2d2d2d;
  --fx-bunny-nose: #ff7e93;
  --fx-bunny-tail: #f0f0f0;
  --fx-bunny-line: #2d2d2d;

  /* FX: fog */
  --fx-fog-a: rgba(255,255,255,.10);
  --fx-fog-b: rgba(255,255,255,.06);
  --fx-fog-c: rgba(255,255,255,.08);

  /* FX: balloons */
  --fx-balloon-1: #ff3ea5;
  --fx-balloon-2: #7c3aed;
  --fx-balloon-3: #22c55e;
  --fx-balloon-4: #f59e0b;
  --fx-balloon-5: #38bdf8;
  --fx-balloon-string: rgba(255,255,255,.55);
  --fx-balloon-stroke: rgba(255,255,255,.18);
  --fx-balloon-shadow: rgba(0,0,0,.25);
}

/* Optional baseline dark-mode if no theme loaded */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --surface: #0f172a;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --border: #1e293b;
  }
}

/* ---------- Layout ---------- */
.container { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .container { display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight: 700; letter-spacing: -0.02em; }

.footer {
  margin-top: 4rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Components ---------- */
.hero { padding: 3rem 0 2.5rem; }
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 0.75rem; letter-spacing: -0.03em; }
.subtitle { color: var(--muted); max-width: 600px; }

.actions { display:flex; gap: .75rem; margin-top: 1.5rem; }

.btn {
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); transform: translateY(-1px); }

.btn.ghost { border: 1px solid var(--border); color: var(--text); }
.btn.ghost:hover { background: rgba(0,0,0,.04); }

.btn.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.85rem; }

.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card h3 { margin-top: 0; }

.chip {
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .75rem;
  color: var(--muted);
}

/* Topbar meta */
.meta { display:flex; align-items:center; gap: .6rem; }
.inline-form { margin: 0; }
.chip-email { color: var(--text); background: var(--surface); }

/* Role chips */
.chip-class { color:#fff; border:none; }
.chip-admin { background:#ef4444; }
.chip-user { background: var(--primary); }
.chip-teacher { background:#8b5cf6; }
.chip-student, .chip-customer { background:#22c55e; }

/* Logout button (leave as-is) */
.btn-logout {
  background-color: #C2FBD7;
  border-radius: 50px;
  border-width: 0;
  box-shadow: rgba(25, 25, 25, 0.04) 0 0 1px 0, rgba(0, 0, 0, 0.1) 0 3px 4px 0;
  color: #008000;
  cursor: pointer;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 1em;
  height: 50px;
  padding: 0 25px;
  transition: all 200ms;
}

/* ---------- TV UI ---------- */
.tv-wrap {
  min-height: calc(100vh - 70px);
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.tv-header { display:flex; justify-content:space-between; align-items:center; gap: 1rem; }
.tv-title { font-weight: 800; font-size: 1.25rem; }
.tv-status { color: var(--muted); }

.tv-body { display:grid; grid-template-columns: 1.2fr 1fr; gap: 1.25rem; align-items:center; }
.tv-body-3col { display:grid; grid-template-columns: 1.2fr 1fr 0.8fr; gap: 1.25rem; align-items:start; }

.tv-clue {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  transition: opacity .5s ease;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  transform: translateZ(0);
}
.fade-out { opacity: 0; }

.tv-qr {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
}
.tv-qr img { width: 100%; max-width: 520px; height: auto; }
.tv-qr-label { margin-top: .75rem; color: var(--muted); font-weight: 700; }

body.is-fullscreen .tv-topbar { display:none; }
body.is-fullscreen .container { max-width: 100%; }

/* Code box */
.tv-codebox { margin-top: .75rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.tv-codebox-title { font-weight: 700; color: var(--muted); margin-bottom: .5rem; }
.tv-codebox form { display:flex; gap: .5rem; align-items:center; }
.tv-codebox input { flex: 1; padding: .5rem .75rem; border-radius: 10px; border: 1px solid var(--border); font-size: 1rem; }

/* Sidebar */
.tv-side { display:grid; gap: 1rem; }
.tv-side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.tv-side-title { margin: 0 0 .75rem; font-size: 1rem; }
.tv-side-list { display:grid; gap: .5rem; }
.tv-side-row {
  display:grid;
  grid-template-columns: 28px 1fr 48px;
  gap: .5rem;
  align-items:center;
  padding: .35rem .5rem;
  border-radius: 10px;
  background: rgba(0,0,0,.03);
}
.tv-side-row .tv-rank { font-weight: 800; color: var(--muted); text-align:center; }
.tv-side-row .tv-name { font-weight: 700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tv-side-row .tv-score { font-weight: 800; text-align:right; }
.tv-side-row .tv-mini { font-weight: 700; color: var(--muted); text-align:right; }
.tv-side-empty { color: var(--muted); }

/* ---------- TV Progress (themeable) ---------- */
.tv-progress { position: relative; z-index: 1; width: min(520px, 100%); margin-bottom: 1rem; }
.tv-progress-row { display:flex; align-items:baseline; justify-content:space-between; gap: 1rem; }
.tv-progress-label, .tv-progress-meta { font-size: 1rem; color: var(--tv-progress-text); opacity: .9; }
.tv-progress-bar {
  margin-top: .35rem;
  height: var(--tv-progress-height);
  border-radius: var(--tv-progress-radius);
  background: var(--tv-progress-track);
  overflow: hidden;
}
.tv-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--tv-progress-radius);
  background: var(--tv-progress-fill); /* can be gradient */
  box-shadow: var(--tv-progress-glow);
  transition: width .45s ease;
}

/* ---------- TV Stage + animations ---------- */
.tv-stage{
  position:absolute;
  inset:-30%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%, rgba(108,198,255,.20), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(255,196,223,.18), transparent 40%),
    radial-gradient(circle at 40% 85%, rgba(200,255,212,.16), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0));
  filter: blur(10px);
  animation: stageDrift 16s ease-in-out infinite;
  opacity: .9;
}
@keyframes stageDrift{
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(3%, -2%, 0) scale(1.03); }
}

/* ensure real UI sits above stage */
.tv-header, .tv-codebox, .tv-body, .tv-progress { position: relative; z-index: 1; }

/* pop-in */
.tv-clue.pop-in{ animation: popIn .35s ease-out; }
@keyframes popIn{
  0% { transform: translateY(10px) scale(.98); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* destination slide */
.tv-destination.slide-in{ animation: slideIn .35s ease-out; }
@keyframes slideIn{
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* waiting breathe */
.tv-qr.waiting{ animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe{
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.01); }
}

/* Confetti */
.tv-confetti{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
.tv-confetti i{
  position:absolute;
  top:-10%;
  width: 10px;
  height: 18px;
  border-radius: 3px;
  opacity: .95;
  animation: confettiFall 1.4s linear forwards;
}
@keyframes confettiFall{
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(120vh) rotate(360deg); opacity: 0; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .tv-stage, .tv-qr.waiting{ animation:none !important; }
  .tv-clue.pop-in, .tv-destination.slide-in{ animation:none !important; }
}

/* ---------- Subnav (kit pages) ---------- */
.subnav { display:flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 1.25rem; }
.subnav-link{
  padding: .45rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: .9rem;
  background: var(--surface);
}
.subnav-link:hover{ background: rgba(0,0,0,.04); }
.subnav-link.active{ border-color: var(--primary); color: var(--primary); }

/* ---------- Generic progress component (non-TV) ---------- */
.progress{ height: 10px; border-radius: 999px; background: rgba(0,0,0,.06); overflow:hidden; margin-top: .5rem; }
.progress-bar{ height: 100%; background: var(--primary); border-radius: 999px; }

/* ---------- Mobile enhancements ---------- */
:root { --tap: 48px; }

@media (max-width: 640px){
  .container{ padding: 1rem; }
  .hero{ padding: 2rem 0 1.5rem; }

  .actions{ flex-direction: column; align-items: stretch; }

  .btn{
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 1rem;
  }
  .btn.btn-sm{ min-height: 42px; width: auto; }

  .topbar .container{ gap: .75rem; }
  .meta{ gap: .4rem; }

  .grid{ grid-template-columns: 1fr; gap: 1rem; margin-top: 1.25rem; }
  .card{ padding: 1rem; }

  .chip{ font-size: .8rem; padding: .35rem .65rem; }

  .subnav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
  }
  .subnav::-webkit-scrollbar{ display:none; }
  .subnav-link{ white-space: nowrap; }
}

@media (hover: none){
  .btn.primary:hover,
  .btn.ghost:hover,
  .card:hover{
    transform: none;
    box-shadow: none;
  }
}

/* ---------- Scan page ---------- */
.scan-wrap{
  min-height: calc(100vh - 70px);
  display: grid;
  place-items: center;
  padding: 1rem;
}

.scan-card{
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.scan-badge{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  background: rgba(0,0,0,.04);
  margin-bottom: .9rem;
}

.scan-card h1{
  margin: 0 0 .5rem;
  letter-spacing: -0.02em;
  font-size: 1.6rem;
}

.scan-sub{ margin: 0 0 1rem; color: var(--muted); font-size: 1rem; }

.scan-code{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: .65rem 1rem;
  border-radius: 999px;
  border: 1px dashed var(--border);
  background: rgba(0,0,0,.03);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 1.1rem;
  user-select: all;
}

.scan-actions{ display: grid; gap: .75rem; margin-top: 1rem; }
.scan-actions .btn{ width: 100%; min-height: 52px; }

.scan-meta{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top: 1rem; }

.scan-card.pop-in{ animation: popIn .35s ease-out; }

/* ---------- FX layer (global overlay) ---------- */
.fx-layer{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}
.fx-layer *{ will-change: transform, opacity; }

/* ===================== FX: Sparkle Burst ===================== */
.fx-sparkle-burst{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:grid;
  place-items:center;
}
.fx-sparkle{
  position:absolute;
  border-radius: 999px;
  background: var(--fx-sparkle);
  box-shadow: var(--fx-sparkle-glow);
  animation: fxSparkle var(--fxDur, 1400ms) ease-out forwards;
}
@keyframes fxSparkle{
  0%   { transform: translate(0,0) rotate(0deg) scale(.5); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0); opacity: 0; }
}

/* ===================== FX: Bunny Hop ===================== */
.fx-bunny-hop{ position:absolute; inset:0; }
.fx-bunny-track{
  position:absolute;
  left:0;
  bottom: 14vh;
  width: 100%;
  height: 220px;
  transform: translateX(-35vw);
  animation: fxTrack var(--fxDur, 5200ms) linear forwards;
}
.fx-bunny{
  position:absolute;
  left:0;
  bottom:0;
  width: min(22vw, 220px);
  transform-origin: 50% 90%;
  animation: fxHop var(--fxDur, 5200ms) ease-in-out forwards;
}
.fx-bunny-shadow{
  position:absolute;
  left: 40px;
  bottom: 10px;
  width: 120px;
  height: 26px;
  border-radius: 50%;
  background: var(--fx-shadow);
  filter: blur(2px);
  transform-origin: center center;
  animation: fxShadow var(--fxDur, 5200ms) ease-in-out forwards;
}
.fx-bunny svg{ display:block; }

.fx-bunny .fur{ fill: var(--fx-bunny-fur); }
.fx-bunny .fur2{ fill: var(--fx-bunny-fur2); }
.fx-bunny .ear{ fill: var(--fx-bunny-fur); }
.fx-bunny .ear-inner{ fill: var(--fx-bunny-ear-inner); opacity:.95; }
.fx-bunny .eye{ fill: var(--fx-bunny-eye); }
.fx-bunny .eye-shine{ fill: #fff; opacity:.9; }
.fx-bunny .nose{ fill: var(--fx-bunny-nose); }
.fx-bunny .tail{ fill: var(--fx-bunny-tail); }
.fx-bunny .line{ fill:none; stroke: var(--fx-bunny-line); stroke-width:3.5; stroke-linecap:round; opacity:.8; }
.fx-bunny .whisker{ fill:none; stroke: var(--fx-bunny-line); stroke-width:3; stroke-linecap:round; opacity:.35; }

.fx-bunny .ear.front{ transform-origin: 130px 30px; animation: fxEarFront var(--fxDur, 5200ms) ease-in-out forwards; }
.fx-bunny .ear.back{ transform-origin: 100px 30px; animation: fxEarBack var(--fxDur, 5200ms) ease-in-out forwards; }

@keyframes fxTrack{ from { transform: translateX(-35vw); } to { transform: translateX(120vw); } }
@keyframes fxHop{
  0%{ transform: translateY(0) rotate(0deg) scale(1); }
  10%{ transform: translateY(-65px) rotate(-3deg) scale(1.02,.98); }
  20%{ transform: translateY(0) rotate(1deg) scale(1.06,.92); }
  35%{ transform: translateY(-58px) rotate(-2deg) scale(1.02,.98); }
  45%{ transform: translateY(0) rotate(1deg) scale(1.06,.92); }
  62%{ transform: translateY(-52px) rotate(-2deg) scale(1.02,.98); }
  72%{ transform: translateY(0) rotate(1deg) scale(1.06,.92); }
  100%{ transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes fxShadow{
  0%{ transform: scale(1); opacity:.22; }
  10%{ transform: scale(.65); opacity:.12; }
  20%{ transform: scale(1.05,.9); opacity:.24; }
  35%{ transform: scale(.7); opacity:.13; }
  45%{ transform: scale(1.05,.9); opacity:.24; }
  62%{ transform: scale(.75); opacity:.14; }
  72%{ transform: scale(1.05,.9); opacity:.24; }
  100%{ transform: scale(1); opacity:.22; }
}
@keyframes fxEarFront{ 0%,20%,45%,72%,100%{ transform: rotate(0deg);} 10%{transform:rotate(10deg);} 35%{transform:rotate(8deg);} 62%{transform:rotate(6deg);} }
@keyframes fxEarBack{ 0%,20%,45%,72%,100%{ transform: rotate(0deg);} 10%{transform:rotate(7deg);} 35%{transform:rotate(6deg);} 62%{transform:rotate(5deg);} }

/* ===================== FX: Fog Pulse ===================== */
.fx-fog-pulse{ position:absolute; inset:0; pointer-events:none; }
.fx-fog{
  position:absolute;
  left:-15%;
  width: 130%;
  height: 42vh;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0;
  mix-blend-mode: screen;
}
.fx-fog-1{ bottom:-10vh; background: radial-gradient(circle at 30% 50%, var(--fx-fog-a), transparent 60%); animation: fxFogPulse1 var(--fxDur, 2200ms) ease-in-out forwards; }
.fx-fog-2{ bottom:-6vh;  background: radial-gradient(circle at 60% 50%, var(--fx-fog-b), transparent 62%); filter: blur(22px); animation: fxFogPulse2 var(--fxDur, 2200ms) ease-in-out forwards; }
.fx-fog-3{ bottom:-14vh; background: radial-gradient(circle at 45% 50%, var(--fx-fog-c), transparent 58%); filter: blur(26px); animation: fxFogPulse3 var(--fxDur, 2200ms) ease-in-out forwards; }

@keyframes fxFogPulse1{
  0%{ transform: translateX(0) translateY(10px) scale(1); opacity: 0; }
  20%{ opacity: .75; }
  55%{ transform: translateX(4%) translateY(0) scale(1.05); opacity: .85; }
  100%{ transform: translateX(8%) translateY(-10px) scale(1.10); opacity: 0; }
}
@keyframes fxFogPulse2{
  0%{ transform: translateX(0) translateY(14px) scale(1); opacity: 0; }
  18%{ opacity: .55; }
  55%{ transform: translateX(-3%) translateY(0) scale(1.08); opacity: .70; }
  100%{ transform: translateX(-7%) translateY(-12px) scale(1.12); opacity: 0; }
}
@keyframes fxFogPulse3{
  0%{ transform: translateX(0) translateY(18px) scale(1); opacity: 0; }
  22%{ opacity: .60; }
  55%{ transform: translateX(2%) translateY(0) scale(1.12); opacity: .75; }
  100%{ transform: translateX(5%) translateY(-14px) scale(1.18); opacity: 0; }
}

/* ===================== FX: Balloons Float ===================== */
.fx-balloons-float{ position:absolute; inset:0; pointer-events:none; }
.fx-balloon{
  position:absolute;
  bottom:-28vh;
  width: 140px;
  height: 240px;
  transform-origin: 50% 70%;
  animation: fxBalloonRise var(--fxDur, 5200ms) ease-in-out forwards;
  filter: drop-shadow(0 10px 18px var(--fx-balloon-shadow));
}
.fx-balloon-svg{ width:100%; height:100%; }
.fx-balloon-body{ fill: var(--balloonFill); stroke: var(--fx-balloon-stroke); stroke-width:2; }
.fx-balloon-shine{ fill: url(#shine); opacity:.95; }
.fx-balloon-knot{ fill: rgba(0,0,0,.18); opacity:.25; }
.fx-balloon-string{ fill:none; stroke: var(--fx-balloon-string); stroke-width:2.2; stroke-linecap:round; opacity:.65; }

@keyframes fxBalloonRise{
  0%{ transform: translateX(0) translateY(0) scale(var(--size,1)) rotate(0deg); opacity: 0; }
  10%{ opacity: 1; }
  100%{ transform: translateX(var(--drift,0vw)) translateY(-135vh) scale(var(--size,1)) rotate(var(--wobble,0deg)); opacity: 0; }
}