/* ============================================================
   Inner Beast — styles
   Palette:  ink #14121A · amber #F5B23E · coral #FF5D5D
             mint #3DDC97 · bone #F7F4EC
   ============================================================ */

:root{
  --ink:#14121a;
  --ink-2:#1f1c28;
  --amber:#f5b23e;
  --amber-press:#e09f2c;
  --coral:#ff5d5d;
  --mint:#3ddc97;
  --bone:#f7f4ec;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --sheet-pad: max(20px, env(safe-area-inset-bottom));
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* The panels (reel/hint/actionbar/result) are shown & hidden via the `hidden`
   attribute. Their own `display:flex` rules would otherwise override the
   browser default, so make `hidden` win unconditionally. */
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--ink);color:var(--bone);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none;}
body{overflow:hidden}

#app{position:fixed;inset:0;overflow:hidden;background:var(--ink)}

/* --- Camera + stage ------------------------------------------------ */
#cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* hidden: we paint the mirrored frame onto the canvas ourselves */
  opacity:0;pointer-events:none;}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;
  background:var(--ink);}

/* --- Top wordmark -------------------------------------------------- */
#topbar{position:absolute;top:0;left:0;right:0;z-index:5;
  padding:calc(14px + env(safe-area-inset-top)) 20px 14px;
  display:flex;justify-content:center;pointer-events:none;
  background:linear-gradient(to bottom, rgba(20,18,26,.55), transparent);}
.mark{font-weight:800;letter-spacing:.22em;font-size:14px;
  color:var(--bone);text-shadow:0 1px 8px rgba(0,0,0,.5);}
.mark::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--amber);margin-right:9px;vertical-align:middle;transform:translateY(-1px)}
/* Language toggle (EN/ES), pinned to the right of the top bar */
.lang-toggle{position:absolute;right:16px;top:calc(11px + env(safe-area-inset-top));
  pointer-events:auto;font:700 12px/1 system-ui,-apple-system,sans-serif;letter-spacing:.12em;
  color:var(--bone);background:rgba(20,18,26,.55);border:1px solid rgba(247,244,236,.28);
  border-radius:999px;padding:8px 12px;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.lang-toggle:hover,.lang-toggle:focus-visible{border-color:var(--amber);color:var(--amber);outline:none;}

/* --- Sheets (start / result) -------------------------------------- */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:20;}
.start{top:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(130% 80% at 50% 44%, rgba(38,34,50,.55), rgba(20,18,26,.96));}
.start-inner{width:100%;max-width:440px;margin:0 auto;padding:32px 26px;text-align:center;
  animation:rise .5s cubic-bezier(.2,.9,.3,1) both;}
.start-badge{font-size:52px;line-height:1;margin-bottom:18px;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))}
.start h1{margin:0 0 12px;font-size:clamp(30px,9vw,42px);line-height:1.02;
  font-weight:800;letter-spacing:-.01em;}
.start p{margin:0 auto 22px;max-width:34ch;font-size:15px;line-height:1.5;
  color:rgba(247,244,236,.72)}
.fineprint{font-size:12.5px;color:rgba(247,244,236,.5);margin-top:14px}

/* --- Buttons ------------------------------------------------------- */
.btn{appearance:none;border:0;border-radius:999px;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:16px;letter-spacing:.01em;
  padding:16px 26px;transition:transform .12s ease, background .15s ease, opacity .15s;}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--amber);color:var(--ink);box-shadow:var(--shadow)}
.btn-primary:active{background:var(--amber-press)}
.btn-ghost{background:rgba(247,244,236,.1);color:var(--bone);
  border:1.5px solid rgba(247,244,236,.28)}
.btn:disabled{opacity:1;cursor:default}

/* --- Action bar (reveal) ------------------------------------------ */
.actionbar{position:absolute;left:0;right:0;bottom:0;z-index:15;
  padding:20px 22px var(--sheet-pad);display:flex;justify-content:center;
  background:linear-gradient(to top, rgba(20,18,26,.72), transparent);}
.btn-reveal{min-width:min(360px,88vw);position:relative;overflow:hidden}
.btn-reveal:disabled{background:rgba(247,244,236,.14);color:rgba(247,244,236,.62);
  box-shadow:none;border:1.5px solid rgba(247,244,236,.16)}
.btn-reveal.ready{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,178,62,.0),var(--shadow)}
  50%{box-shadow:0 0 0 10px rgba(245,178,62,.14),var(--shadow)}}

/* --- Center hint --------------------------------------------------- */
.hint{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;pointer-events:none;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}
.hint p{margin:0;font-size:15px;font-weight:600;color:rgba(247,244,236,.9)}
.hint-ring{width:132px;height:170px;border:2.5px dashed rgba(247,244,236,.5);
  border-radius:46% 46% 44% 44%/52% 52% 48% 48%;
  animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.04);opacity:.85}}

/* --- Slot reel ----------------------------------------------------- */
.reel{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  background:rgba(20,18,26,.5);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);pointer-events:none}
.reel-window{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:26px 40px;border-radius:26px;background:rgba(31,28,40,.72);
  border:1.5px solid rgba(247,244,236,.14);box-shadow:var(--shadow);
  min-width:230px}
.reel-emoji{font-size:74px;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.reel-name{font-size:22px;font-weight:800;letter-spacing:.01em}
.reel-caption{margin:0;font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber)}

/* --- Result card --------------------------------------------------- */
.result{z-index:20}
.result-inner{padding:26px 26px var(--sheet-pad);text-align:center;
  background:linear-gradient(to top, var(--ink) 62%, rgba(20,18,26,.0));
  animation:rise .45s cubic-bezier(.2,.9,.3,1) both}
.result-eyebrow{margin:0 0 2px;font-size:13px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(247,244,236,.55)}
.result h2{margin:0;font-size:clamp(34px,11vw,52px);font-weight:800;
  line-height:1;letter-spacing:-.02em;color:var(--amber);
  animation:slam .55s cubic-bezier(.2,1.4,.35,1) both}
.result-tag{margin:8px 0 0;font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mint)}
.result-story{margin:14px auto 22px;max-width:36ch;font-size:15.5px;line-height:1.55;
  color:rgba(247,244,236,.82)}
.result-actions{display:flex;gap:12px;justify-content:center}
.result-actions .btn{flex:0 1 auto;min-width:120px}

/* --- Toast --------------------------------------------------------- */
.toast{position:absolute;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:40;max-width:86vw;
  background:var(--coral);color:#2a0d0d;font-weight:600;font-size:14px;
  padding:12px 18px;border-radius:14px;box-shadow:var(--shadow);text-align:center}

/* --- Animations ---------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes slam{0%{opacity:0;transform:scale(.7)}60%{transform:scale(1.06)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}

/* reel shows the realistic face during the spin */
.reel-emoji img,.reel-img{height:150px;width:150px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}