:root{--serif:"Cormorant Garamond","Cormorant",Georgia,serif;--sans:"Source Sans 3","adelle-sans",system-ui,sans-serif;--btn-r:6.4px;
/* Brand palette (derived tints/shades precomputed as hex for older iOS without color-mix) from bendecidocoffee.com: slate #46525C (site "black"), gold #B88E45 / site accent #BA8D4A, light #E6E9F2, white.
   Everything else is a shade/tint derived from those. */
--slate:#46525C;--slate-d:#30383F;--slate-dd:#22282D;
--gold:#B88E45;--gold2:#BA8D4A;--gold-l:#C6A56A;--gold-t:#D9C09B;--gold-h:#C19C5B;
--light:#E6E9F2;--r:18px;
--bg:radial-gradient(1200px 600px at 50% -10%,rgba(184,142,69,.16) 0%,rgba(184,142,69,0) 55%),radial-gradient(1200px 600px at 50% -10%,var(--slate) 0%,var(--slate) 35%,var(--slate-d) 75%,var(--slate-dd) 100%)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:var(--sans);font-weight:300;line-height:1.5;text-align:center;color:var(--light);background:var(--bg) fixed;min-height:100vh;overflow-x:hidden}
h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:500;letter-spacing:0;color:var(--gold-l)}
a{color:var(--gold-l);text-decoration:none}a:hover{color:var(--gold-t)}
strong,b{font-weight:600}
.hero{text-align:center;padding:28px 20px 10px;position:relative}
.logo{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.35));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.eyebrow{letter-spacing:.18em;text-transform:uppercase;font-size:11px;color:var(--gold-l);margin:10px 0 4px;font-weight:600}
h1{font-size:clamp(44px,13vw,72px);line-height:1;margin:6px 0 12px;font-weight:600;color:var(--gold-l)}
h1 span{background:linear-gradient(100deg,var(--gold),var(--gold-t) 45%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.sub{max-width:440px;margin:0 auto 16px;opacity:.9;line-height:1.5;font-size:17px}
.round-pill{display:inline-flex;gap:8px;align-items:center;padding:8px 16px;border-radius:var(--btn-r);border:1px solid rgba(184,142,69,.6);background:rgba(184,142,69,.12);font-weight:500;font-size:14px;letter-spacing:.02em}
.round-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(184,142,69,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(184,142,69,0)}100%{box-shadow:0 0 0 0 rgba(184,142,69,0)}}
.tabs{position:sticky;top:0;z-index:10;display:flex;gap:8px;padding:12px 16px;overflow-x:auto;background:rgba(34,41,46,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(230,233,242,.08);scrollbar-width:none}
.tab{flex:1 0 auto;min-height:44px;border:1px solid rgba(230,233,242,.18);background:transparent;color:var(--light);padding:12px 16px;border-radius:var(--btn-r);font:500 15px/1.2 var(--sans);letter-spacing:.02em;cursor:pointer;transition:.25s}
.tab[aria-selected=true]{background:linear-gradient(135deg,var(--gold),var(--gold2) 60%,var(--gold-h));border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(184,142,69,.35)}
main{max-width:760px;margin:0 auto;padding:16px}
.section-title{font-size:36px;font-weight:500;line-height:1.1;margin:34px 0 12px;text-align:center}
.section-title::after{content:"";display:block;width:48px;height:2px;margin:10px auto 0;background:var(--gold)}
.matchups{display:grid;gap:16px}
.match{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(230,233,242,.1);border-radius:var(--r);padding:14px;position:relative;animation:rise .5s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.match-head{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-l);margin-bottom:10px;font-weight:500}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}
.vs-badge{align-self:center;font:500 italic 24px var(--serif);color:var(--gold);width:34px;text-align:center}
.pick{position:relative;overflow:hidden;text-align:center;align-items:center;border:1.5px solid rgba(230,233,242,.16);background:rgba(34,41,46,.55);color:var(--light);border-radius:14px;padding:14px 12px 12px;cursor:pointer;transition:transform .15s,border-color .25s,background .25s;min-height:132px;display:flex;flex-direction:column;font:inherit}
.pick:active{transform:scale(.97)}
.pick:disabled{cursor:default}
.pick .name{font:600 21px/1.1 var(--serif);margin-bottom:6px;position:relative}
.pick .desc{font-size:14.5px;line-height:1.4;font-weight:300;opacity:.78;position:relative;flex:1}
.pick .seed{font-size:11px;opacity:.5;letter-spacing:.1em;position:relative;margin-bottom:4px}
.pick .bar{position:absolute;inset:auto 0 0 0;height:0;background:linear-gradient(0deg,rgba(184,142,69,.35),rgba(184,142,69,.08));transition:height 1s cubic-bezier(.2,.8,.2,1)}
.pick .pct{position:relative;margin-top:8px;font:600 26px var(--serif);color:var(--gold-l);animation:fadein .5s both}
@keyframes fadein{from{opacity:0}}
.pick.mine{border-color:var(--gold);background:rgba(184,142,69,.14);box-shadow:0 0 0 3px rgba(184,142,69,.18)}
.pick.mine .name::after{content:" ✓";color:var(--gold)}
.pick.winner{border-color:var(--gold)}
.pick.loser{opacity:.45}
.match .total{text-align:center;font-size:12px;opacity:.6;margin-top:10px}
.empty{text-align:center;padding:30px 20px;border:1px dashed rgba(230,233,242,.2);border-radius:var(--r);opacity:.85;line-height:1.6}
.empty strong{font-family:var(--serif);font-weight:600;font-size:27px;line-height:1.15;color:var(--gold-l);display:block;margin-bottom:6px}
.pop{animation:pop .45s}
@keyframes pop{40%{transform:scale(1.05)}}
/* bracket */
.bracket{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory}
.col{display:flex;flex-direction:column;justify-content:space-around;gap:10px;scroll-snap-align:start}
.col h4{margin:0 0 4px;font:500 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l);text-align:center}
.bm{background:rgba(34,41,46,.6);border:1px solid rgba(230,233,242,.1);border-radius:10px;overflow:hidden;position:relative}
.bm.live{border-color:rgba(184,142,69,.7);box-shadow:0 0 18px rgba(184,142,69,.2)}
.slot{padding:7px 9px;font-size:13px;text-align:left;line-height:1.25;min-height:30px;transition:background .6s,color .6s}
.slot+.slot{border-top:1px solid rgba(230,233,242,.08)}
.slot.w{background:rgba(184,142,69,.22);color:#fff;font-weight:600}
.slot.l{opacity:.4;text-decoration:line-through;text-decoration-color:rgba(230,233,242,.3)}
.slot.tbd{opacity:.35;font-style:italic}
.slot.in{animation:slidein .8s both}
@keyframes slidein{from{opacity:0;transform:translateX(-14px)}}
.champ{display:flex;align-items:center;justify-content:center;text-align:center;min-height:70px;border-radius:12px;padding:10px;font:600 18px/1.15 var(--serif);background:linear-gradient(135deg,rgba(184,142,69,.3),rgba(184,142,69,.08));border:1.5px solid var(--gold)}
.champ.tbd{opacity:.5;border-style:dashed;font-weight:500;font-size:13px}
.champ:not(.tbd){animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 26px rgba(184,142,69,.5)}}
/* finalists */
.finalists{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin-top:20px}
.fin{text-align:center;padding:16px 8px;border-radius:var(--r);background:rgba(255,255,255,.04);border:1px solid rgba(184,142,69,.35)}
.fin small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-l);margin-bottom:6px}
.fin b{font:600 18px/1.15 var(--serif)}
.fin .crown{font-size:22px;color:var(--gold);display:block;margin-bottom:4px}
.muted{text-align:center;opacity:.7;margin-top:-4px}
.btn{border:0;min-height:44px;border-radius:var(--btn-r);padding:1.1rem 1.9rem;text-transform:none;font:500 16px/1.2 var(--sans);letter-spacing:.02em;cursor:pointer;transition:transform .15s}
.btn:active{transform:scale(.96)}
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold2) 60%,var(--gold-h));color:#fff;box-shadow:0 8px 22px rgba(184,142,69,.35)}.btn.gold:hover{color:#fff;box-shadow:0 10px 28px rgba(184,142,69,.5)}
.btn.ghost{background:transparent;color:var(--light);border:1px solid rgba(230,233,242,.3)}
.schedule ol{list-style:none;padding:0;margin:0 auto;max-width:420px;display:grid;gap:8px}
.schedule li{padding:12px 14px;border-left:3px solid rgba(230,233,242,.2);background:rgba(255,255,255,.03);border-radius:0 10px 10px 0;font-size:14px}
.schedule li.now{border-color:var(--gold);background:rgba(184,142,69,.12);font-weight:600}
.schedule li.done{opacity:.5}
footer{text-align:center;padding:40px 20px 50px;opacity:.75;font-size:13px}
.flogo{width:44px;opacity:.8}
.tiny{font-size:11px;opacity:.7}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--light);color:var(--slate-dd);padding:12px 20px;border-radius:99px;font-weight:600;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.2,.9,.3,1.3);z-index:50;max-width:90vw;text-align:center}
.toast.show{transform:translate(-50%,0)}
.steam{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.steam i{position:absolute;bottom:-120px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(184,142,69,.12),transparent 70%);animation:steam 18s linear infinite}
.steam i:nth-child(1){left:5%}.steam i:nth-child(2){left:45%;animation-delay:-6s}.steam i:nth-child(3){left:80%;animation-delay:-12s}
@keyframes steam{to{transform:translateY(-120vh) scale(1.8);opacity:0}}
.confetti{position:fixed;top:-10px;width:8px;height:14px;z-index:60;pointer-events:none;animation:fall 1.6s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.2}}
/* section headings inside matchups */
.round-h{margin:4px 0 0;font:500 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-l);text-align:center}
/* my picks */
.my-picks{margin:0 0 16px}
.my-picks details{background:rgba(184,142,69,.08);border:1px solid rgba(184,142,69,.4);border-radius:var(--r);padding:0 14px}
.my-picks summary,.past-round summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;font:600 21px var(--serif);list-style:none}
.my-picks summary::-webkit-details-marker,.past-round summary::-webkit-details-marker{display:none}
.my-picks summary::after,.past-round summary::after{content:"▾";color:var(--gold);font-size:14px;transition:transform .2s}
.my-picks details:not([open]) summary::after,.past-round:not([open]) summary::after{transform:rotate(-90deg)}
.my-picks summary span{font:400 13px var(--sans);opacity:.7;margin-left:auto}
.mp-b{padding:8px 0;border-top:1px solid rgba(230,233,242,.08)}
.mp-b>b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l);margin-bottom:4px}
.mp-r{text-align:left;display:flex;gap:8px;align-items:baseline;margin:3px 0}
.mp-k{flex:0 0 58px;font-size:11px;opacity:.6}
.mp-v{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.chip{font-size:12px;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(230,233,242,.14);overflow-wrap:anywhere}
.chip.won{border-color:var(--gold);background:rgba(184,142,69,.2)}
.chip.out{opacity:.45}
.mp-note{font-size:11px;opacity:.55;margin:4px 0 10px}
/* earlier rounds */
.past{display:grid;gap:10px;margin-top:16px}
.past:empty{display:none}
.past-round{background:rgba(255,255,255,.04);border:1px solid rgba(230,233,242,.1);border-radius:var(--r);padding:0 14px 4px}
.past-round summary{font-size:15px}
.past-m{padding:8px 0;border-top:1px solid rgba(230,233,242,.08);display:grid;gap:4px}
.pr{text-align:left;position:relative;display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:8px;overflow:hidden;background:rgba(34,41,46,.5);font-size:13px}
.pr .pbar{position:absolute;inset:0 auto 0 0;background:rgba(184,142,69,.22)}
.pr.l .pbar{background:rgba(230,233,242,.08)}
.pr.l{opacity:.7}
.pr.w{font-weight:600}
.pr .pn,.pr .pp{position:relative;min-width:0}
.pr .pp{font-weight:700;color:var(--gold-l)}
.pr em{font-style:normal;font-size:11px;color:var(--gold-l);font-weight:600}
.pr.mine{box-shadow:inset 0 0 0 1.5px var(--gold)}
.pt{font-size:11px;opacity:.55;text-align:right}
/* bracket: your picks */
.slot.my{box-shadow:inset 3px 0 0 var(--gold)}
.mytag{float:right;color:var(--gold);font-weight:700;margin-left:4px}
/* preorders */
.pre-items{display:grid;gap:10px;max-width:420px;margin:12px auto 0}
.pre-btn{display:flex;align-items:center;justify-content:center;text-decoration:none;min-height:48px;text-align:center}
/* small phones: stack the vs cards */
@media (max-width:379px){
  main{padding:12px}
  .vs{grid-template-columns:1fr;gap:6px}
  .vs-badge{width:auto;justify-self:center;font-size:16px;line-height:1}
  .pick{min-height:0;padding:12px}
  .pick .pct{margin-top:6px}
  .finalists{gap:8px}
  .fin{padding:12px 4px}
  .fin b{font-size:13px;overflow-wrap:anywhere}
}
/* embedded in an iframe: the dark game panel sits inside the light site page as a rounded card.
   No viewport-height tricks (they'd fight the auto-height); toast/confetti follow the tapped card. */
html.embed{background:transparent}
.embed body{min-height:0;background:none;position:relative;z-index:0}
.embed body::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:18px;background:var(--bg);background-attachment:scroll;box-shadow:inset 0 0 0 1px rgba(184,142,69,.25)}
.embed .hero .logo,.embed .hero .eyebrow,.embed .hero .sub,.embed .flogo{display:none}
.embed .hero{padding:22px 16px 6px}
.embed h1{font-size:clamp(34px,9vw,52px);margin:0 0 10px}
.embed .tabs{position:static;background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.embed footer{padding:16px 20px 22px}
.embed .toast{position:absolute;bottom:auto;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .25s}
.embed .toast.show{transform:translateX(-50%);opacity:1}
.embed .confetti{position:absolute;animation-name:fallshort}
@keyframes fallshort{to{transform:translateY(420px) rotate(720deg);opacity:0}}
@media (min-width:640px){.pick{min-height:120px}.pick .name{font-size:24px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* round complete */
.done-card{text-align:center;padding:22px 18px;border-radius:var(--r);border:1.5px solid var(--gold);background:linear-gradient(135deg,rgba(184,142,69,.22),rgba(184,142,69,.06));animation:rise .5s both}
.done-card strong{display:block;font:600 27px/1.15 var(--serif);color:var(--gold-l);margin-bottom:6px}
.done-card p{margin:0 0 14px}
.done-card .btn{display:inline-flex;align-items:center;justify-content:center}
.matchups.switching{animation:swap .45s both}
@keyframes swap{from{opacity:0;transform:translateX(24px)}}
#matchups,#preorders,#invite{scroll-margin-top:var(--tabs-h,78px)}
.embed #matchups,.embed #preorders,.embed #invite{scroll-margin-top:8px}
.invite{text-align:center;margin-top:8px}
.invite-line{max-width:440px;margin:0 auto 18px;font-size:17px;opacity:.92}
.invite-btn{display:inline-flex;align-items:center;justify-content:center}
.done-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.done-actions .btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.4rem}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-l)}
.invite-link{margin:12px 0 0;font-size:16px;font-weight:500;overflow-wrap:anywhere}
.invite-link a{display:inline-block;padding:10px 4px;min-height:44px}
.embed .steam{position:absolute;z-index:-1;border-radius:18px}
/* tabs: always all three visible, no horizontal scroll; labels wrap inside the pill */
.tabs{overflow-x:visible;flex-wrap:nowrap}
.tab{flex:1 1 0;min-width:0;white-space:normal;text-align:center;line-height:1.15;display:flex;align-items:center;justify-content:center;padding:8px 10px;overflow-wrap:break-word;hyphens:manual}
@media (max-width:400px){.tabs{gap:6px;padding:10px 12px}.tab{font-size:14px;padding:6px 6px;letter-spacing:.01em}}
@media (max-width:340px){.tabs{gap:5px;padding:10px 8px}.tab{font-size:13px;padding:6px 4px}}