/* ===========================

   Neuromarketing Housepoints UI

   Style: "Brain Buddy" (matches badge art)

   =========================== */



/* ---------- Design tokens ---------- */

:root{

  /* Core palette (from images) */

  --brain-rose-1:#FF8AA8;   /* mid pink */

  --brain-rose-2:#FF6B8B;   /* deep pink */

  --brain-rose-hi:#FFD3E0;  /* highlight */

  --eye-blue-1:#BDE2FF;

  --eye-blue-2:#4FC3FF;

  --eye-blue-3:#0067FF;



  --sky-1:#DFF3FF;

  --sky-2:#BFE7FF;

  --mint:#74F7D2;

  --reef-coral:#FF725E;

  --reef-purple:#8A6CFF;

  --reef-turq:#1EC9BB;

  --lime-fin:#B6FF3B;

  --lime-fin-2:#77E04E;

  --gold-1:#F7B500;

  --gold-2:#FFDE59;



  --ink:#152232;

  --ink-soft:#2B3B4F;

  --white:#FFFFFF;



  /* Surfaces & shadows (soft "toy" look) */

  --surface:#FFFFFF;

  --surface-2:#F7FBFF;

  --shadow-sm: 0 2px 6px rgba(13, 37, 62, .10);

  --shadow-md: 0 8px 24px rgba(13, 37, 62, .16);

  --shadow-lg: 0 16px 40px rgba(13, 37, 62, .18);



  /* Radii & spacing */

  --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-2xl:48px;

  --pad-1:8px; --pad-2:12px; --pad-3:16px; --pad-4:24px; --pad-5:32px;



  /* Motion */

  --ease: cubic-bezier(.2,.8,.2,1);

  --speed-fast: 160ms;

  --speed: 260ms;

  --speed-slow: 600ms;



  /* Typography */

  --font-ui: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --font-num: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

}



@media (prefers-color-scheme: dark){

  :root{

    --surface:#101825;

    --surface-2:#0B1220;

    --ink:#EAF4FF;

    --ink-soft:#C7D6EA;

    --shadow-sm: 0 2px 6px rgba(0,0,0,.35);

    --shadow-md: 0 8px 24px rgba(0,0,0,.45);

    --shadow-lg: 0 16px 44px rgba(0,0,0,.55);

    --sky-1:#142238;

    --sky-2:#0E1A2C;

  }

}



/* ---------- Base ---------- */

*{box-sizing:border-box}

html,body{height:100%}

body{

  margin:0;

  background: radial-gradient(120% 120% at 50% -10%, var(--sky-1), var(--sky-2) 60%, var(--surface-2) 100%);

  color:var(--ink);

  font-family:var(--font-ui);

  -webkit-font-smoothing:antialiased;  text-rendering:optimizeLegibility;

}



img{

  max-width:100%;

  height:auto;

  display:block;

}



/* Utility */

.rounded{border-radius:var(--r-lg)}

.shadow{box-shadow:var(--shadow-md)}

.center{display:grid;place-items:center}

.hidden{display:none !important}



/* ---------- Cards & containers ---------- */

.card{

  background:linear-gradient(180deg, var(--white), var(--surface));

  border-radius:var(--r-xl);

  padding:var(--pad-5);

  box-shadow:var(--shadow-lg);

  border:1px solid rgba(255,255,255,.6);

  backdrop-filter: blur(6px);

}



.header{

  display:flex;align-items:center;gap:12px;

}

.header__title{

  font-weight:900; letter-spacing:.2px; font-size:clamp(22px, 2.2vw, 28px);

}



/* ---------- Brain avatar (matches character) ---------- */

.avatar-brain{

  --size: 88px;

  width:var(--size); height:var(--size);

  border-radius:50%;

  position:relative;

  background:

    radial-gradient(90% 90% at 30% 25%, var(--brain-rose-hi), transparent 60%),

    radial-gradient(100% 100% at 70% 65%, rgba(0,0,0,.08), transparent 60%),

    linear-gradient(145deg, var(--brain-rose-1), var(--brain-rose-2));

  box-shadow: inset 0 8px 14px rgba(255,255,255,.35),

              inset 0 -10px 20px rgba(0,0,0,.10),

              var(--shadow-md);

  animation: floaty 3.6s var(--ease) infinite;

}

.avatar-brain::before, .avatar-brain::after{

  content:""; position:absolute; border-radius:50%;

  background: radial-gradient(70% 70% at 40% 40%, var(--eye-blue-1), var(--eye-blue-2) 60%, var(--eye-blue-3) 100%);

  width:28px; height:28px; top:28px; box-shadow: inset 0 2px 2px rgba(255,255,255,.6);

}

.avatar-brain::before{ left:18px }

.avatar-brain::after{ right:18px }

.avatar-mouth{

  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);

  width:36px; height:18px; border-radius:0 0 18px 18px;

  background:linear-gradient(180deg, #2E0B25, #5A123F);

  box-shadow: inset 0 -2px 0 rgba(0,0,0,.2);

}



/* ---------- Housepoints counter ---------- */

.points{

  display:flex; align-items:center; gap:10px;

  padding:10px 14px;

  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));

  border:1px solid rgba(255,255,255,.7);

  border-radius:999px;

  box-shadow:var(--shadow-sm), inset 0 2px 6px rgba(255,255,255,.65);

}

.points__dot{

  width:14px;height:14px;border-radius:50%;

  background: radial-gradient(70% 70% at 30% 30%, var(--gold-2), var(--gold-1) 60%);

  box-shadow: inset 0 2px 2px rgba(255,255,255,.8), 0 0 0 2px rgba(247,181,0,.15);

}

.points__value{

  font-family:var(--font-num);

  font-variant-numeric:tabular-nums;

  font-size:18px; font-weight:800;

}



/* ---------- Progress (level/XP bar) ---------- */

.progress{

  width:100%; background:linear-gradient(180deg, #EDF7FF, #DFF0FF);

  border-radius:999px; padding:4px;

  box-shadow:inset 0 2px 8px rgba(13,37,62,.10);

  border:1px solid rgba(255,255,255,.7);

}

.progress__bar{

  --p: 42%;

  height:14px; width:var(--p);

  border-radius:999px;

  background:

    linear-gradient(90deg, var(--mint), var(--eye-blue-2), var(--reef-purple));

  box-shadow: inset 0 2px 6px rgba(255,255,255,.6), 0 6px 16px rgba(0,115,255,.25);

  transition: width var(--speed-slow) var(--ease);

}



/* ---------- Badge chips ---------- */

.badges{ display:flex; flex-wrap:wrap; gap:10px }

.badge{

  --bg: var(--brain-rose-1);

  display:inline-flex; align-items:center; gap:8px;

  padding:8px 12px;

  border-radius:999px;

  background:linear-gradient(160deg, var(--bg), color-mix(in oklab, var(--bg), #fff 22%));

  color:#fff; font-weight:800; letter-spacing:.25px;

  box-shadow:var(--shadow-sm), inset 0 2px 8px rgba(255,255,255,.35);

  border:1px solid rgba(255,255,255,.4);

}

.badge__icon{

  width:22px;height:22px;border-radius:50%;

  background:radial-gradient(70% 70% at 40% 35%, #fff, rgba(255,255,255,.4));

  mix-blend-mode:screen;

}



/* Themed badges matching artwork props */

.badge--gold { --bg: linear-gradient(140deg, var(--gold-2), var(--gold-1)); }

.badge--reef { --bg: linear-gradient(140deg, var(--reef-turq), var(--reef-coral)); }

.badge--mint { --bg: linear-gradient(140deg, var(--mint), var(--eye-blue-2)); }

.badge--brain{ --bg: linear-gradient(140deg, var(--brain-rose-1), var(--brain-rose-2)); }



/* ---------- Buttons ---------- */

.btn{

  appearance:none; border:0; cursor:pointer;

  padding:12px 18px; border-radius:999px; font-weight:900;

  color:#fff; background:linear-gradient(160deg, var(--eye-blue-2), var(--reef-purple));

  box-shadow:var(--shadow-md), inset 0 2px 10px rgba(255,255,255,.35);

  transform:translateY(0); transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);

}

.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg) }

.btn:active{ transform:translateY(0) scale(.98) }

.btn--ghost{

  color:var(--ink); background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6));

  border:1px solid rgba(255,255,255,.8);

}



/* ---------- Leaderboard ---------- */

.leaderboard{

  display:grid; gap:12px;

}

.leaderboard__row{

  display:flex; align-items:center; gap:12px;

  padding:10px 12px; border-radius:var(--r-lg);

  background:linear-gradient(180deg, var(--white), var(--surface));

  box-shadow:var(--shadow-sm);

  white-space:nowrap;

}

.leaderboard__rank{

  width:34px;height:34px;border-radius:50%;

  display:grid;place-items:center;

  background:linear-gradient(140deg, var(--gold-2), var(--gold-1));

  color:#3b2b00; font-weight:900;

  box-shadow:inset 0 2px 6px rgba(255,255,255,.6);

}

.leaderboard__name{ flex:1; font-weight:800; overflow:hidden; text-overflow:ellipsis }

.leaderboard__score{ font-family:var(--font-num); font-weight:900 }



/* ---------- Speech bubble (for onboarding / “welkom”) ---------- */

.speech{

  position:relative; display:inline-block; max-width:min(520px, 90vw);

  background:linear-gradient(180deg, #FFFFFF, #F3FBFF);

  color:var(--ink); padding:14px 18px; border-radius:22px;

  box-shadow:var(--shadow-md); border:1px solid rgba(255,255,255,.75);

  font-weight:800;

}

.speech::after{

  content:""; position:absolute; left:28px; bottom:-14px;

  width:20px; height:20px; background:inherit; border:inherit; box-shadow:inherit;

  clip-path: polygon(0 0, 100% 0, 0 100%); transform: rotate(45deg);

}



/* ---------- Sticker-like tokens ---------- */

.sticker{

  display:inline-grid; place-items:center;

  width:72px; height:72px;

  border-radius:20px;

  background: conic-gradient(from 220deg, var(--brain-rose-1), var(--reef-purple), var(--eye-blue-2), var(--mint), var(--brain-rose-1));

  box-shadow: 0 10px 20px rgba(13,37,62,.18), inset 0 3px 10px rgba(255,255,255,.6);

  -webkit-mask:radial-gradient(circle at 40% 35%, #000 58%, transparent 60%) top left/58% 58% no-repeat,

                radial-gradient(circle at 65% 70%, #000 52%, transparent 54%) bottom right/56% 56% no-repeat,

                linear-gradient(#000,#000);

  mask:radial-gradient(circle at 40% 35%, #000 58%, transparent 60%) top left/58% 58% no-repeat,

       radial-gradient(circle at 65% 70%, #000 52%, transparent 54%) bottom right/56% 56% no-repeat,

       linear-gradient(#000,#000);

}



/* ---------- Toast / notification ---------- */

.toast{

  position:fixed; inset:auto 16px 16px auto;

  display:flex; align-items:center; gap:10px;

  padding:12px 14px; border-radius:16px;

  background:linear-gradient(180deg, #FFFFFF, #F1FAFF);

  box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.7);

  z-index:9999; animation: pop-in var(--speed) var(--ease);

}



/* ---------- Focus visibility ---------- */

:focus-visible{

  outline:3px solid color-mix(in oklab, var(--eye-blue-2), #fff 10%);

  outline-offset:2px; border-radius:12px;

}



/* ---------- Micro-animations ---------- */

@keyframes floaty{

  0%,100%{ transform:translateY(0) }

  50%{ transform:translateY(-6px) }

}

@keyframes pop-in{

  from{ transform:translateY(6px) scale(.98); opacity:0 }

  to{ transform:translateY(0) scale(1); opacity:1 }

}

/* Hand wave utility for an SVG/emoji/element inside buttons or avatar */

.wave{ display:inline-block; transform-origin:70% 70%; animation: wave 1.1s ease-in-out infinite }

@keyframes wave{

  0%,100%{ transform:rotate(0deg) }

  25%{ transform:rotate(16deg) }

  50%{ transform:rotate(-10deg) }

  75%{ transform:rotate(12deg) }

}



/* ---------- Responsive (mobile-first, 2:3-friendly) ---------- */

.container{

  width:min(900px, 92vw);

  margin-inline:auto;

  padding:clamp(16px, 3vw, 28px);

}

.grid{

  display:grid; gap:16px;

  grid-template-columns:1fr;

}

@media (min-width:720px){

  .grid{ grid-template-columns:1.2fr .8fr }

}



/* Example helper for a mobile 2:3 stage (useful for your Sora intro or badge reels) */

.stage-2x3{

  aspect-ratio: 2 / 3;

  width:100%;

  border-radius:var(--r-2xl);

  background: radial-gradient(140% 120% at 50% -10%, var(--sky-1), var(--sky-2) 60%, var(--surface) 100%);

  box-shadow:var(--shadow-lg);

  overflow:hidden;

  position:relative;

}

.stage-2x3 .ground-shadow{

  position:absolute; left:50%; bottom:8%;

  width:46%; height:10%;

  transform:translateX(-50%);

  background: radial-gradient(60% 100% at 50% 50%, rgba(0,0,0,.18), transparent 70%);

  filter: blur(6px);

  border-radius:50%;

}



/* ---------- Score dial (optional compact component) ---------- */

.score{

  --size: 120px;

  width:var(--size); height:var(--size); border-radius:50%;

  display:grid; place-items:center; position:relative;

  background:conic-gradient(from 220deg, var(--reef-purple) 0 20%, var(--eye-blue-2) 20% 55%, var(--mint) 55% 100%);

  box-shadow:var(--shadow-md), inset 0 3px 10px rgba(255,255,255,.45);

}

.score::after{

  content:""; position:absolute; inset:10px; border-radius:50%;

  background:linear-gradient(180deg, var(--white), var(--surface));

  box-shadow:inset 0 2px 12px rgba(0,0,0,.08);

}

.score__value{

  position:relative; z-index:1;

  font-family:var(--font-num); font-weight:900; font-size:28px;

}



/* ---------- Lightweight icon bubbles (to echo sticker clouds) ---------- */

.icon-bubble{

  width:36px; height:36px; border-radius:50%;

  display:grid; place-items:center;

  background:linear-gradient(180deg, #FFFFFF, #F1FAFF);

  box-shadow:var(--shadow-sm), inset 0 2px 6px rgba(255,255,255,.6);

  border:1px solid rgba(255,255,255,.75);

}

.icon-bubble--good{ background:linear-gradient(180deg, #E9FFF2, #D4FFEA); }

.icon-bubble--warn{ background:linear-gradient(180deg, #FFF7E6, #FFE9B8); }

.icon-bubble--info{ background:linear-gradient(180deg, #E8F4FF, #D6ECFF); }



/* Ensure overlay is always transparent */

.overlay {

  background: transparent;

  opacity: 1;

}



.overlay:hover {

  background: transparent;

}



/* Explicitly size delete icon instead of scaling */

.delete-icon {

  width: 12px;

  height: 12px;

}