/* BracketIt — dark fight-night / tournament-arena aesthetic */
/* Palette: ink #0c0f17, surface #151a24 / #1b2230, electric lime #c8ff3d, hot pink #ff2e7e */

:root{
  --ink:#0c0f17;
  --surface:#151a24;
  --surface-2:#1b2230;
  --line:#2a3344;
  --line-2:#384458;
  --lime:#c8ff3d;
  --pink:#ff2e7e;
  --text:#eef2f8;
  --muted:#8a93a6;
  --muted-2:#5d6678;
}

*,*::before,*::after{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{font-size:18px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  background:var(--ink);
  line-height:1.6;
  background-image:radial-gradient(circle at 20% -10%, rgba(200,255,61,.06), transparent 45%),radial-gradient(circle at 90% 0%, rgba(255,46,126,.07), transparent 40%);
  background-attachment:fixed;
}
h1,h2,h3,.champ-name,.band-title{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em;line-height:1}
a{color:inherit}
em{font-style:normal;color:var(--lime)}

/* Ticker */
.ticker{background:var(--lime);color:#0c0f17;overflow:hidden;white-space:nowrap;border-bottom:2px solid #0c0f17}
.ticker-track{display:inline-flex;gap:1.4rem;align-items:center;padding:.4rem 0;font-family:'Space Mono',monospace;font-weight:700;font-size:.72rem;letter-spacing:.12em;animation:ticker 22s linear infinite}
.ticker-track span{flex:none}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Header */
.site-header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:90;background:rgba(12,15,23,.82);backdrop-filter:blur(10px)}
.header-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:1.4rem;padding:1rem 1.6rem}
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-family:'Anton',sans-serif;font-size:1.35rem;letter-spacing:.02em;text-transform:uppercase}
.logo b{color:var(--lime);font-weight:400}
.header-inner nav{margin-left:auto;display:flex;gap:1.5rem}
.site-header nav a{text-decoration:none;color:var(--muted);font-size:.82rem;font-weight:600;transition:color .15s}
.site-header nav a:hover{color:var(--text)}
.btn-ghost{padding:.5rem 1.05rem;border:1.5px solid var(--lime);border-radius:8px;color:var(--lime);text-decoration:none;font-size:.78rem;font-weight:700;transition:all .15s;white-space:nowrap}
.btn-ghost:hover{background:var(--lime);color:#0c0f17}
.site-header nav+.btn-ghost{margin-left:0}

/* Hero / arena */
.hero{max-width:1080px;margin:0 auto;padding:3.4rem 1.6rem 2rem;display:grid;gap:2rem}
.eyebrow,.band-eyebrow,.board-label{font-family:'Space Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--pink)}
.hero-copy{text-align:center;max-width:760px;margin:0 auto}
.hero h1{font-size:clamp(2.8rem,9vw,5.5rem);text-transform:uppercase;margin:.6rem 0 1rem}
.hero h1 .hl{color:var(--lime)}
.lede{font-size:1.05rem;color:var(--muted);max-width:620px;margin:0 auto}

/* Arena shell */
.arena-shell{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.03);overflow:hidden}
.stage{padding:2rem clamp(1.1rem,4vw,2.4rem)}

/* Stage 1 — setup */
.board-label{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.3rem}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot-lime{background:var(--lime);box-shadow:0 0 10px var(--lime)}
.field-label{display:block;font-size:.82rem;font-weight:700;margin:1rem 0 .4rem;color:var(--text)}
.field-label .muted{color:var(--muted-2);font-weight:500}
#contextInput,#optionsInput,#subEmail{width:100%;background:#0c0f17;border:1.5px solid var(--line-2);border-radius:10px;color:var(--text);font:inherit;padding:.7rem .85rem;transition:border-color .15s}
#optionsInput{resize:vertical;min-height:130px;line-height:1.7}
#contextInput:focus,#optionsInput:focus,#subEmail:focus{outline:none;border-color:var(--lime)}
.setup-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;margin:.9rem 0 .2rem}
.opt-count{font-family:'Space Mono',monospace;font-size:.78rem;color:var(--lime)}
.examples{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.examples .muted{font-size:.76rem;color:var(--muted-2)}
.chip{background:var(--surface-2);border:1px solid var(--line-2);color:var(--muted);border-radius:20px;padding:.3rem .75rem;font-size:.74rem;font-weight:600;cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--pink);color:var(--text)}
.setup-error{color:var(--pink);font-size:.82rem;font-weight:600;margin:.7rem 0 0}
.btn-fight{display:block;width:100%;margin-top:1.3rem;padding:.95rem;border:none;border-radius:12px;background:var(--lime);color:#0c0f17;font-family:'Anton',sans-serif;font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:transform .12s,box-shadow .15s;box-shadow:0 0 0 rgba(200,255,61,0)}
.btn-fight:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(200,255,61,.5)}
.btn-fight:active{transform:translateY(0)}

/* Stage 2 — duel */
.duel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.round-label{font-family:'Anton',sans-serif;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;color:var(--lime)}
.match-progress{font-family:'Space Mono',monospace;font-size:.78rem;color:var(--muted)}
.round-bar{display:flex;gap:.3rem;margin-bottom:1.4rem}
.round-bar i{flex:1;height:5px;border-radius:3px;background:var(--line);transition:background .2s}
.round-bar i.done{background:var(--pink)}
.round-bar i.active{background:var(--lime)}
.duel-question{text-align:center;font-size:1rem;color:var(--muted);margin-bottom:1.3rem}
.duel-question b{color:var(--text)}
.duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:.6rem}
.fighter{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;min-height:190px;padding:1.6rem 1rem;background:#0c0f17;border:2px solid var(--line-2);border-radius:14px;cursor:pointer;transition:transform .12s,border-color .15s,box-shadow .15s;text-align:center}
.fighter-a:hover{border-color:var(--lime);transform:translateY(-3px);box-shadow:0 16px 36px -14px rgba(200,255,61,.55)}
.fighter-b:hover{border-color:var(--pink);transform:translateY(-3px);box-shadow:0 16px 36px -14px rgba(255,46,126,.55)}
.fighter-seed{position:absolute;top:.6rem;left:.7rem;font-family:'Space Mono',monospace;font-size:.72rem;color:var(--muted-2)}
.fighter-name{font-family:'Anton',sans-serif;font-size:clamp(1.3rem,4.5vw,2rem);text-transform:uppercase;line-height:1.05;word-break:break-word}
.fighter-a .fighter-name{color:var(--text)}
.fighter-b .fighter-name{color:var(--text)}
.pick-tag{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.14em;color:var(--muted-2);opacity:0;transition:opacity .15s}
.fighter:hover .pick-tag{opacity:1}
.fighter-a:hover .pick-tag{color:var(--lime)}
.fighter-b:hover .pick-tag{color:var(--pink)}
.vs{display:flex;align-items:center;justify-content:center;padding:0 .2rem}
.vs span{font-family:'Anton',sans-serif;font-size:1.1rem;color:#0c0f17;background:var(--text);border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px var(--surface),0 0 0 6px var(--line-2)}
.duel-controls{display:flex;justify-content:center;gap:1.4rem;margin-top:1.5rem}
.link-btn{background:none;border:none;color:var(--muted);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:color .15s}
.link-btn:hover:not(:disabled){color:var(--text)}
.link-btn:disabled{opacity:.4;cursor:default}

/* fighter advance flash */
.fighter.win{animation:flash .4s ease}
@keyframes flash{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}

/* Stage 3 — champion */
.stage-champ{text-align:center}
.champ-burst{padding:1rem 0 1.6rem;position:relative}
.crown{font-size:2.4rem;color:var(--lime);display:block;filter:drop-shadow(0 0 14px rgba(200,255,61,.6))}
.champ-label{font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.22em;color:var(--pink);margin:.5rem 0}
.champ-name{font-size:clamp(2.4rem,8vw,4rem);text-transform:uppercase;color:var(--lime);text-shadow:0 0 30px rgba(200,255,61,.35);word-break:break-word}
.verdict{background:#0c0f17;border:1px solid var(--line);border-radius:14px;padding:1.5rem;text-align:left;max-width:620px;margin:0 auto}
.verdict-loading{display:flex;align-items:center;gap:.7rem;justify-content:center;color:var(--muted);font-size:.9rem}
.spinner{width:18px;height:18px;border:2.5px solid var(--line-2);border-top-color:var(--lime);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.verdict-headline{font-size:1.15rem;font-weight:800;margin-bottom:.9rem;color:var(--text)}
.verdict-why{list-style:none;display:grid;gap:.6rem;margin-bottom:1rem}
.verdict-why li{position:relative;padding-left:1.6rem;color:var(--muted);font-size:.92rem}
.verdict-why li::before{content:"▸";position:absolute;left:0;color:var(--lime)}
.runner-note{font-size:.88rem;color:var(--muted-2);font-style:italic;margin-bottom:1rem}
.share-box{border-top:1px dashed var(--line-2);padding-top:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;justify-content:space-between}
.share-line{flex:1;min-width:220px;font-size:.9rem;color:var(--text);font-weight:600}
.btn-copy{background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);border-radius:8px;padding:.5rem .9rem;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}
.btn-copy:hover{border-color:var(--lime);color:var(--lime)}
.runner-up{margin:1.4rem auto 0;display:inline-flex;align-items:center;gap:.6rem;background:var(--surface-2);border:1px solid var(--line);border-radius:30px;padding:.4rem 1rem}
.ru-label{font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.12em;color:var(--muted-2);text-transform:uppercase}
.ru-name{font-weight:700;color:var(--text)}
.champ-controls{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.champ-controls .btn-fight{width:auto;margin-top:0;padding:.8rem 1.6rem}
.btn-ghost-lg{padding:.8rem 1.5rem;border:1.5px solid var(--line-2);border-radius:12px;background:none;color:var(--text);font-family:'Anton',sans-serif;font-size:1rem;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:border-color .15s}
.btn-ghost-lg:hover{border-color:var(--pink)}

/* Bands */
.band{max-width:1080px;margin:0 auto;padding:3.6rem 1.6rem}
.band-alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:none;padding:3.6rem 0}
.band-alt>*{max-width:1080px;margin-left:auto;margin-right:auto;padding-left:1.6rem;padding-right:1.6rem}
.band-eyebrow{text-align:center}
.band-title{font-size:clamp(1.8rem,5vw,2.8rem);text-transform:uppercase;margin:.5rem auto 1.4rem;text-align:center}
.band-body{font-size:1.05rem;color:var(--muted);max-width:720px;margin:0 auto;text-align:center}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.step{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:1.4rem}
.step-num{font-family:'Anton',sans-serif;font-size:1.6rem;color:var(--pink)}
.step h3{font-size:1.15rem;text-transform:uppercase;margin:.4rem 0 .5rem;color:var(--text)}
.step p{font-size:.9rem;color:var(--muted)}
.use-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.use{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:1.1rem}
.use-ico{font-size:1.5rem}
.use h4{font-size:.98rem;margin:.5rem 0 .3rem;color:var(--text)}
.use p{font-size:.82rem;color:var(--muted)}

/* Plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.plan{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:1.6rem;display:flex;flex-direction:column}
.plan-feature{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 20px 50px -24px rgba(200,255,61,.4)}
.plan-flag{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);background:var(--lime);color:#0c0f17;font-family:'Space Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .7rem;border-radius:20px}
.plan h3{font-size:1.3rem;text-transform:uppercase;color:var(--text)}
.price{font-family:'Anton',sans-serif;font-size:2.4rem;color:var(--lime);margin:.3rem 0}
.price small{font-size:.9rem;color:var(--muted)}
.plan-for{font-size:.82rem;color:var(--muted);margin-bottom:1rem}
.plan ul{list-style:none;display:grid;gap:.5rem;margin-bottom:1.3rem;flex:1}
.plan li{position:relative;padding-left:1.4rem;font-size:.88rem;color:var(--muted)}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--lime);font-weight:700}
.plan-btn{display:block;text-align:center;padding:.7rem;border-radius:10px;border:1.5px solid var(--line-2);background:none;color:var(--text);font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;text-decoration:none;transition:all .15s}
.plan-btn:hover:not(:disabled){border-color:var(--text)}
.plan-btn:disabled{opacity:.5;cursor:default}
.plan-btn-go{background:var(--lime);color:#0c0f17;border-color:var(--lime)}
.plan-btn-go:hover{filter:brightness(1.08)}

/* sig */
.sig{margin-top:1.6rem;display:flex;flex-direction:column;align-items:center;gap:.1rem}
.sig b{font-size:1rem;color:var(--text)}
.sig span{font-family:'Space Mono',monospace;font-size:.78rem;color:var(--muted-2)}

/* FAQ */
.faq{display:grid;gap:.7rem;max-width:760px;margin-left:auto;margin-right:auto}
.faq details{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.3rem 1.1rem}
.faq summary{cursor:pointer;font-weight:700;padding:.8rem 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--lime);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 .9rem;color:var(--muted);font-size:.92rem}

/* CTA newsletter */
.cta-band{text-align:center;padding:3.6rem 1.6rem;background:linear-gradient(180deg,var(--surface),var(--ink));border-top:1px solid var(--line)}
.cta-band h2{font-family:'Anton',sans-serif;font-size:clamp(1.8rem,5vw,2.6rem);text-transform:uppercase}
.cta-band p{color:var(--muted);max-width:520px;margin:.6rem auto 1.4rem}
.sub-form{display:flex;gap:.5rem;max-width:430px;margin:0 auto}
.sub-form input{flex:1}
.sub-form button{padding:.7rem 1.3rem;border:none;border-radius:10px;background:var(--lime);color:#0c0f17;font-family:'Anton',sans-serif;font-size:.95rem;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:filter .15s}
.sub-form button:hover{filter:brightness(1.08)}
.sub-msg{margin-top:.9rem;font-size:.86rem;font-weight:600}
.sub-msg.ok{color:var(--lime)}
.sub-msg.err{color:var(--pink)}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:2.6rem 0 2rem;display:grid;gap:1.6rem}
.site-footer>*{max-width:1080px;width:100%;margin-left:auto;margin-right:auto;padding-left:1.6rem;padding-right:1.6rem}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:2rem}
.foot-brand .logo-mini{font-family:'Anton',sans-serif;font-size:1.2rem;text-transform:uppercase}
.foot-brand b{color:var(--lime);font-weight:400}
.foot-brand small{display:block;color:var(--muted-2);margin-top:.2rem;font-size:.8rem}
.foot-cols{display:flex;flex-wrap:wrap;gap:2.8rem}
.foot-cols h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.6rem}
.foot-cols a{display:block;text-decoration:none;color:var(--muted-2);font-size:.86rem;margin-bottom:.35rem;transition:color .15s}
.foot-cols a:hover{color:var(--lime)}
.foot-fine{font-size:.74rem;color:var(--muted-2);border-top:1px solid var(--line);padding-top:1.2rem}

/* Legal pages */
.legal{max-width:720px;margin:0 auto;padding:3rem 1.6rem}
.legal h1{font-size:2.2rem;text-transform:uppercase;margin-bottom:1rem}
.legal h2{font-family:'Inter',sans-serif;font-weight:800;font-size:1.1rem;margin:1.6rem 0 .5rem}
.legal p{color:var(--muted);margin-bottom:.8rem}
.legal a{color:var(--lime)}
.legal .back{font-size:.85rem;color:var(--muted);text-decoration:none}

/* Responsive */
@media(max-width:760px){
  .site-header nav{display:none}
  .steps,.plans{grid-template-columns:1fr}
  .use-grid{grid-template-columns:repeat(2,1fr)}
  .fighter{min-height:150px}
  .vs span{width:38px;height:38px;font-size:.95rem}
}