/* ============================================================
   MANA & SPELL — styling
   Two distinct hand-built themes: Gwen (Anodite pink mana) +
   Wizard (parchment / candlelight gold). Deliberately not the
   generic "AI gradient card" look — comic energy vs. old magic.
   ============================================================ */

:root {
  --gwen-1:   #ff2bb1;   /* hot mana pink   */
  --gwen-2:   #b714ff;   /* anodite violet  */
  --gwen-ink: #1a0322;
  --harry-1:  #f4c95d;   /* candle gold     */
  --harry-2:  #7a1f1f;   /* gryffindor red  */
  --harry-ink:#120d07;
  --paper:    #f5efe1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #05030a;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.screen { position: fixed; inset: 0; }
.hidden { display: none !important; }

/* =========================================================
   CHARACTER SELECT
   ========================================================= */
.select-screen {
  display: flex;                    /* flex + margin:auto child = centers but
                                       still scrolls to the top when too tall */
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 28px 16px;
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(255,43,177,.22), transparent 60%),
    radial-gradient(1100px 700px at 90% 110%, rgba(244,201,93,.18), transparent 55%),
    #05030a;
}

.select-inner { width: min(940px, 92vw); text-align: center; margin: auto; }

.kicker {
  font-weight: 800;
  letter-spacing: .42em;
  font-size: 13px;
  color: #b9a7d8;
  margin-bottom: 10px;
}

.brand {
  font-family: 'Bangers', cursive;
  font-size: clamp(52px, 11vw, 132px);
  line-height: .9;
  letter-spacing: 2px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, #fff, #d6c7ff 60%, #ff8fe0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 8px 40px rgba(183,20,255,.35);
}
.brand span { color: var(--harry-1); -webkit-text-fill-color: var(--harry-1); }

.brand-line {
  font-size: 15px;
  color: #c7b8e6;
  margin-bottom: 34px;
  letter-spacing: .01em;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 x 3 roster (8 heroes + coming soon) */
  gap: 16px;
  max-width: 720px; margin: 0 auto;
}
@media (max-width: 680px) { .cards { grid-template-columns: repeat(2, 1fr); max-width: 480px; } }
@media (max-width: 380px) { .cards { grid-template-columns: 1fr; max-width: 300px; } }

.hero-card {
  position: relative;
  isolation: isolate;
  cursor: pointer;
  border: none;
  border-radius: 22px;
  padding: 26px 20px 24px;
  min-height: 280px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transition: transform .18s cubic-bezier(.2,.9,.3,1.3), box-shadow .25s;
}
.hero-card:hover { transform: translateY(-8px) rotate(-.6deg); }
.hero-card:active { transform: translateY(-2px) scale(.99); }

/* circular character portrait at the top of each card */
.card-portrait {
  position: relative;
  width: 92px; height: 92px;
  border-radius: 50%;
  margin-bottom: 6px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.25);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 8px 22px rgba(0,0,0,.4);
  overflow: hidden;
}
.card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;                /* cover the fallback emoji when a photo loads */
}
.card-gwen    .card-portrait { box-shadow: inset 0 0 0 2px rgba(255,160,235,.6), 0 8px 22px rgba(183,20,255,.45); }
.card-harry   .card-portrait { box-shadow: inset 0 0 0 2px rgba(244,201,93,.6), 0 8px 22px rgba(0,0,0,.5); }
.card-goku    .card-portrait { box-shadow: inset 0 0 0 2px rgba(120,200,255,.6), 0 8px 22px rgba(20,120,255,.45); }
.card-ironman .card-portrait { box-shadow: inset 0 0 0 2px rgba(120,225,255,.65), 0 8px 22px rgba(20,150,255,.4); }
.card-spider  .card-portrait { box-shadow: inset 0 0 0 2px rgba(255,90,90,.65), 0 8px 22px rgba(200,20,40,.4); }
.card-elsa    .card-portrait { box-shadow: inset 0 0 0 2px rgba(170,224,255,.7), 0 8px 22px rgba(120,180,255,.4); }
.card-thanos  .card-portrait { box-shadow: inset 0 0 0 2px rgba(196,150,255,.7), 0 8px 22px rgba(150,90,230,.4); }
.card-naruto  .card-portrait { box-shadow: inset 0 0 0 2px rgba(120,180,255,.65), 0 8px 22px rgba(40,120,245,.4); }

.card-gwen {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(255,43,177,.9), transparent 55%),
    linear-gradient(160deg, #2a0530, #5a067a 55%, #2a0530);
  box-shadow: 0 20px 60px rgba(183,20,255,.4), inset 0 0 0 1px rgba(255,160,235,.35);
}
.card-harry {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(244,201,93,.6), transparent 55%),
    linear-gradient(160deg, #170f06, #3a2410 55%, #120c05);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(244,201,93,.4);
}

.card-goku {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(74,168,255,.7), transparent 55%),
    linear-gradient(160deg, #06182e, #0a3b6b 55%, #07182c);
  box-shadow: 0 20px 60px rgba(20,120,255,.42), inset 0 0 0 1px rgba(120,200,255,.4);
}

.card-ironman {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(90,214,255,.45), transparent 52%),
    linear-gradient(160deg, #2a0808, #6e1414 55%, #240707);
  box-shadow: 0 20px 60px rgba(180,30,30,.4), inset 0 0 0 1px rgba(255,200,120,.4);
}

.card-spider {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(60,110,220,.5), transparent 52%),
    linear-gradient(160deg, #2a0710, #8a1226 55%, #140a2a);
  box-shadow: 0 20px 60px rgba(160,20,40,.42), inset 0 0 0 1px rgba(120,160,255,.35);
}

.card-elsa {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(180,225,255,.55), transparent 55%),
    linear-gradient(160deg, #0b2138, #1c4a73 55%, #0a1c30);
  box-shadow: 0 20px 60px rgba(80,160,255,.4), inset 0 0 0 1px rgba(190,228,255,.45);
}

.card-thanos {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(196,150,255,.5), transparent 54%),
    linear-gradient(160deg, #1c0f33, #4a2a86 55%, #160a2a);
  box-shadow: 0 20px 60px rgba(120,60,220,.42), inset 0 0 0 1px rgba(210,170,255,.4);
}

.card-naruto {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(255,150,40,.5), transparent 54%),
    linear-gradient(160deg, #2a1505, #7a3c0c 55%, #241204);
  box-shadow: 0 20px 60px rgba(230,120,20,.42), inset 0 0 0 1px rgba(255,190,110,.4);
}

.card-aura {
  position: absolute; inset: -40% -10% auto auto;
  width: 260px; height: 260px; border-radius: 50%;
  filter: blur(40px); opacity: .8; z-index: -1;
}
.card-gwen    .card-aura { background: var(--gwen-1); }
.card-harry   .card-aura { background: var(--harry-1); }
.card-goku    .card-aura { background: #4aa8ff; }
.card-ironman .card-aura { background: #ffb24a; }
.card-spider  .card-aura { background: #ff4d4d; }
.card-elsa    .card-aura { background: #aee0ff; }
.card-thanos  .card-aura { background: #b483ff; }
.card-naruto  .card-aura { background: #ff9e3d; }

.card-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .22em;
  opacity: .85;
}
.card-title {
  font-family: 'Bangers', cursive;
  font-size: 46px; letter-spacing: 1.5px; line-height: .95;
  margin-top: 4px;
}
.card-harry .card-title { font-family: 'Cinzel', serif; font-weight: 800; font-size: 34px; color: var(--harry-1); }
.card-goku  .card-title { color: #ff9b3d; }   /* Goku gi orange */
.card-ironman .card-title { color: #ffcf6a; font-size: 40px; }   /* Stark gold */
.card-spider  .card-title { color: #ff5a5a; font-size: 32px; }   /* spidey red */
.card-elsa    .card-title { color: #bfe6ff; }                    /* icy blue */
.card-thanos  .card-title { color: #c9a6ff; }                    /* gauntlet purple */
.card-naruto  .card-title { color: #ffb24a; }                    /* ninja orange */
.card-sub { font-size: 13px; opacity: .9; line-height: 1.45; margin-top: 4px; }
.card-emoji {
  font-size: 52px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
}

/* locked "more coming soon" card */
.card-soon {
  cursor: default;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #15101f, #1d1730 55%, #130e1d);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12);
}
.card-soon .card-aura { background: #6b5ca0; opacity: .35; }
.card-soon .card-portrait { box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.card-soon .card-title { font-size: 40px; color: #d7ccff; }
.card-soon, .card-soon .card-tag, .card-soon .card-sub { opacity: .78; }
.card-soon:hover { transform: none; }

.share-cta {
  margin-top: 26px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 14px;
  letter-spacing: .02em; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--gwen-1), var(--gwen-2));
  border: 1px solid rgba(255,160,235,.4);
  box-shadow: 0 10px 30px rgba(183,20,255,.4);
  transition: transform .15s, box-shadow .2s;
}
.share-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(183,20,255,.55); }
.share-cta:active { transform: translateY(0); }

.select-foot { margin-top: 18px; font-size: 12.5px; color: #8d7fb0; letter-spacing: .03em; }
.credit { margin-top: 8px; font-size: 11px; color: #6f6391; letter-spacing: .12em; }
.credit a {
  color: #c7b8e6; font-weight: 700; letter-spacing: .04em;
  text-decoration: none; border-bottom: 1px solid rgba(199,184,230,.35);
  transition: color .15s, border-color .15s;
}
.credit a:hover { color: #fff; border-color: #fff; }

/* =========================================================
   STAGE
   ========================================================= */
.stage-screen { background: #000; }
.stage-wrap { position: absolute; inset: 0; display: grid; place-items: center; }

#cam, #fx {
  position: absolute;
  width: 100%; height: 100%;
  object-fit: cover;
}
#cam { transform: scaleX(-1); }      /* selfie mirror */
#fx  { pointer-events: none; }

/* ---- top HUD ---- */
.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  z-index: 5;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
}
.ghost-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-weight: 700; font-size: 13px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .15s, transform .12s;
}
.ghost-btn:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }

.hud-title { display: flex; align-items: center; gap: 14px; }
.hud-right { display: flex; align-items: center; gap: 8px; }

.rec-btn { color: #ff5a5a; font-weight: 800; letter-spacing: .04em; }
.rec-btn.recording {
  background: #e21b1b;
  border-color: #ff7a7a;
  color: #fff;
  animation: recPulse 1s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226,27,27,.6); }
  50%      { box-shadow: 0 0 0 8px rgba(226,27,27,0); }
}
#hudName {
  font-family: 'Bangers', cursive; font-size: 30px; letter-spacing: 1.5px;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
.theme-harry #hudName { font-family: 'Cinzel', serif; font-weight: 800; font-size: 22px; }
.hud-score {
  font-weight: 900; font-size: 20px;
  min-width: 44px; text-align: center;
  padding: 4px 12px; border-radius: 12px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.2);
}
.theme-gwen    .hud-score { color: var(--gwen-1);  box-shadow: 0 0 18px rgba(255,43,177,.5); }
.theme-harry   .hud-score { color: var(--harry-1); box-shadow: 0 0 18px rgba(244,201,93,.4); }
.theme-goku    .hud-score { color: #4aa8ff;        box-shadow: 0 0 18px rgba(74,168,255,.5); }
.theme-ironman .hud-score { color: #5ad6ff;        box-shadow: 0 0 18px rgba(90,214,255,.5); }
.theme-spider  .hud-score { color: #ff5a5a;        box-shadow: 0 0 18px rgba(255,60,60,.5); }
.theme-elsa    .hud-score { color: #aee0ff;        box-shadow: 0 0 18px rgba(140,200,255,.5); }
.theme-thanos  .hud-score { color: #c9a6ff;        box-shadow: 0 0 18px rgba(150,90,230,.5); }
.theme-naruto  .hud-score { color: #5aa9ff;        box-shadow: 0 0 18px rgba(90,170,255,.5); }

/* ---- gesture coach ---- */
.coach {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 5; width: min(560px, 92vw);
  transition: opacity .4s, transform .4s;
}
.coach.dim { opacity: 0; transform: translate(-50%, 12px); }
.coach-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 16px;
  background: rgba(10,5,18,.62);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
}
.coach-icon { font-size: 34px; line-height: 1; }
.coach-text { display: flex; flex-direction: column; gap: 2px; }
.coach-text strong { font-size: 15px; }
.coach-text span { font-size: 13px; color: #c9bfe0; }

/* ---- big status flash ---- */
.flash {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%,-50%) scale(.6);
  z-index: 6; pointer-events: none;
  font-family: 'Bangers', cursive; font-size: clamp(40px, 10vw, 96px);
  letter-spacing: 2px; opacity: 0;
  text-align: center; white-space: nowrap;
}
.theme-harry .flash { font-family: 'Cinzel', serif; font-weight: 800; }
.flash.show { animation: flashPop 1s ease-out forwards; }
@keyframes flashPop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.5) rotate(-4deg); }
  18%  { opacity: 1; transform: translate(-50%,-50%) scale(1.08) rotate(-2deg); }
  70%  { opacity: 1; transform: translate(-50%,-55%) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%,-72%) scale(1) rotate(-2deg); }
}

/* ---- loading ---- */
.loading {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  background: #05030a; color: #c9bfe0; font-size: 14px; letter-spacing: .04em;
}
.loading.hidden { display: none; }
.spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--gwen-1);
  animation: spin 0.9s linear infinite;
}
.theme-harry .spinner { border-top-color: var(--harry-1); }
.theme-goku  .spinner { border-top-color: #4aa8ff; }
.theme-ironman .spinner { border-top-color: #5ad6ff; }
.theme-spider  .spinner { border-top-color: #ff5a5a; }
.theme-elsa    .spinner { border-top-color: #aee0ff; }
.theme-thanos  .spinner { border-top-color: #c9a6ff; }
.theme-naruto  .spinner { border-top-color: #ff9e3d; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   MOBILE / PHONE TUNING
   ========================================================= */
@media (max-width: 640px) {
  /* --- select screen --- */
  .kicker { letter-spacing: .26em; font-size: 11px; }
  .brand { margin-bottom: 8px; }
  .brand-line { font-size: 13px; margin-bottom: 20px; }

  .hero-card { min-height: 0; padding: 18px 14px; gap: 5px; border-radius: 18px; }
  .card-portrait { width: 64px; height: 64px; margin-bottom: 2px; }
  .card-emoji { font-size: 36px; }
  .card-tag { font-size: 9.5px; letter-spacing: .16em; }
  .card-title { font-size: 34px; }
  .card-harry .card-title { font-size: 26px; }
  .card-soon  .card-title { font-size: 30px; }
  .card-sub { font-size: 12px; }
  .select-foot { font-size: 11px; margin-top: 18px; }
  /* no hover-lift on touch (it sticks awkwardly) */
  .hero-card:hover { transform: none; }

  /* --- stage HUD: compact so buttons never overflow --- */
  .hud-top { padding: 10px 10px; }
  .ghost-btn { font-size: 11px; padding: 7px 10px; }
  .hud-title { gap: 8px; }
  .hud-right { gap: 5px; }
  #hudName { font-size: 22px; }
  .theme-harry #hudName { font-size: 17px; }
  .hud-score { font-size: 16px; min-width: 32px; padding: 3px 8px; }

  /* --- coach + flash --- */
  .coach { bottom: 14px; width: 94vw; }
  .coach-card { padding: 11px 13px; gap: 10px; }
  .coach-icon { font-size: 26px; }
  .coach-text strong { font-size: 13px; }
  .coach-text span { font-size: 11.5px; }

  .flash { font-size: clamp(30px, 9vw, 64px); white-space: normal; max-width: 92vw; }
}