/* ANCHOR:CSS_GLOBAL_START */
:root{
  --bg:#fbf0ff;
  --card:#ffffff;
  --text:#3a2a46;
  --muted:#7d6b8b;
  --primary:#c43dff;
  --primary-2:#7a5cff;
  --success:#2db36b;
  --danger:#ff6464;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:16px;
  --radius-sm:12px;
  --gap:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 50% -100px, #ffe9ff 0, #fbf0ff 40%, #f7eaff 100%);
}
a{color:var(--primary-2);text-decoration:none}
a:hover{text-decoration:underline}

.site-header,.site-footer{display:flex;align-items:center;justify-content:center;padding:16px 12px;}
.logo{height:44px}
.logo.small{height:36px}
.brand-sub{color:var(--muted);font-size:.9rem;margin-top:6px;text-align:center}

main#app{padding:20px 12px 60px;max-width:980px;margin:0 auto}
.card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px;max-width:560px;margin:0 auto;
}
.center{text-align:center}
.title{margin:8px 0 10px;font-size:2rem;background:linear-gradient(45deg,var(--primary),var(--primary-2));-webkit-background-clip:text;color:transparent}
.sub{color:var(--muted);margin:8px 0 18px}

.links{margin-top:10px}
.links .dot{margin:0 8px;color:#b4a6c4}

.section-title{margin:10px 0 16px;font-size:1.6rem;color:#6a2fa3}
.label{display:block;margin:8px 0 14px;color:#6f5a86}
.input{width:100%;padding:12px 14px;border:1px solid #eadcf7;border-radius:12px;background:#fff}

.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.row.center{justify-content:center}
.row.between{justify-content:space-between;align-items:center}

.btn{
  padding:12px 16px;border-radius:12px;border:1px solid #e7d9fb;background:#fff;color:var(--text);
  cursor:pointer;box-shadow:var(--shadow);transition:transform .05s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(45deg,var(--primary),var(--primary-2));color:#fff;border:none}
.btn.danger{background:#ffd7d7;border:1px solid #ffb5b5;color:#7e2a2a}

.screen{display:none;animation:fade .25s ease}
.screen.show{display:block}
@keyframes fade{from{opacity:.01;transform:translateY(4px)}to{opacity:1;transform:none}}

.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:14px 0}
.grid-compact{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.category-card{background:var(--card);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:14px}
.category-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:600}
.option{display:flex;align-items:center;margin:6px 0}
.option input{width:100%;padding:10px;border:1px solid #eadcf7;border-radius:10px}

.badge{padding:2px 8px;background:#efe6ff;border-radius:999px;color:#6b53a1;font-size:.75rem}

.magic-circle{
  width:120px;height:120px;border-radius:999px;margin:18px auto;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;color:#b063ff;border:6px solid #f0dcff;box-shadow:var(--shadow);
}

.elim-option{
  padding:12px;border:1px solid #eadcf7;border-radius:10px;margin:6px 0;background:#fff;
}
.elim-option.eliminated{text-decoration:line-through;color:#bdaacb;background:#fbf6ff}
.elim-option.final{background:#ecfff4;border-color:#9be0bf;box-shadow:0 0 0 2px #d5f6e6 inset}

/* ANCHOR:CSS_GLOBAL_END */

/* ANCHOR:BRANDING_TWEAKS */
.site-header{display:none}

/* Footer logo sits inside the app frame; anchored to main#app */
.site-footer{
  position:absolute;   /* relative to main#app */
  right:12px;
  bottom:16px;
  z-index:1;
  background:transparent;
  box-shadow:none;
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.site-footer a{pointer-events:auto;}
.site-footer .logo{width:120px;height:auto}

/* HIDE logo on the results screen ONLY */
[data-screen="results"] .site-footer{ display:none !important; }

/* Extra space at bottom of results (safe to keep) */
[data-screen="results"] .wrap{ padding-bottom:120px; }


/* ANCHOR:SETUP_TOP_ACTIONS */
.top-actions{margin:8px 0 16px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row.gap{display:flex; gap:10px}

/* ANCHOR:MAGIC_REVEAL */
.magic-big{font-size:42px; font-weight:800; margin:8px 0 12px}

/* ANCHOR:SHARE_LINE */
.share-line{ margin-top:10px; text-align:center; color:#5f5f7b; }
.share-line a{ color:#6b37ff; font-weight:600; text-decoration:none; }
.share-line a:hover{ text-decoration:underline; }

/* ANCHOR:ELIM_HIGHLIGHT_STYLES (visible, overrides earlier rules) */
.elim-option{
  position: relative;
  transition: background-color .12s linear, border-color .12s linear, box-shadow .12s linear;
}
.elim-option.highlight{
  background:#f6f0ff !important;
  border:3px solid #7c3aed !important;
  outline:3px solid rgba(167,139,250,.6) !important;
  box-shadow:
    0 0 0 2px rgba(139,92,246,.35) inset,
    0 0 0 8px rgba(139,92,246,.18) !important;
}
.elim-option.highlight::after{
  content:"";
  position:absolute; inset:0; border-radius:10px;
  box-shadow:0 0 0 0 rgba(124,58,237,.25);
  animation:mashPulse .38s ease-in-out;
  pointer-events:none;
}
@keyframes mashPulse{
  0%{ box-shadow:0 0 0 0 rgba(124,58,237,.25); }
  100%{ box-shadow:0 0 0 12px rgba(124,58,237,0); }
}
/* ANCHOR:ELIM_POP */
@keyframes elimPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.elim-option.eliminated {
  animation: elimPop .28s ease-out;
}