/* Manaforge — Commander deckbuilder. Static build shell.
   Forge palette, sampled from the logo: navy-charcoal ground · molten gold · ember flame · anvil steel. */
@font-face{font-family:'Cinzel';src:url('/fonts/cinzel-latin.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}
:root{
  --ground:#171b22; --surface:#1e232c; --surface-2:#262d38; --surface-3:#303a48; --line:#333e4c;
  --ink:#eef1f3; --ink-dim:#b7c1cb; --muted:#8592a0; --faint:#5c6773;
  /* molten gold — primary accent (--bronze kept as an alias so existing rules inherit the new palette) */
  --gold:#d9a94e; --bronze:#d9a94e; --gold-ink:#eac982; --bronze-ink:#eac982; --gold-deep:#b9822f;
  --ember:#ee6a2b; --ember-deep:#cf541b;   /* the flame — hot accent for energy/action */
  --steel:#3f566c;                          /* the anvil — structural blue-grey */
  --live:#59ac6d; --away:#e6a23c; --dead:#647079; --bad:#df6146; --on-gold:#191307;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:'Cinzel',Georgia,'Times New Roman',serif;
  --r:12px; --r-sm:8px;
}
*{box-sizing:border-box} [hidden]{display:none !important}
html,body{margin:0;height:100%}
body{font-family:var(--sans);color:var(--ink);height:100vh;display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(880px 460px at 79% -12%, rgba(238,106,43,.11), transparent 60%),   /* ember glow, top-right */
    radial-gradient(920px 560px at 8% 112%, rgba(63,86,108,.16), transparent 58%),      /* steel glow, bottom-left */
    var(--ground);
  -webkit-font-smoothing:antialiased}
/* faint forged-metal grain over everything (behind interactive content) */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:150px}
.topbar,.stage{position:relative;z-index:1}

/* top bar */
.topbar{display:flex;align-items:center;gap:16px;padding:9px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(var(--surface),rgba(23,27,34,.4));box-shadow:0 1px 0 rgba(217,169,78,.10)}
.brand{display:flex;align-items:center;gap:11px;background:transparent;border:0;cursor:pointer;color:inherit;font:inherit;padding:2px 4px 2px 0}
.brand-mark{width:34px;height:34px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));transition:transform .2s}
.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.05)}
.brand-txt{display:flex;flex-direction:column;gap:1px;align-items:flex-start;line-height:1.05}
.brand .k{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);opacity:.72}
.brand .wm{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.03em;
  background:linear-gradient(178deg,#f2d79f 8%,var(--gold) 62%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold-ink)}
.brand:hover .k{opacity:1}
.deckbar{display:flex;align-items:center;gap:14px;margin:0 auto 0 8px;min-width:0}
.deckchip{display:inline-flex;align-items:center;gap:8px;max-width:320px;cursor:pointer;font:600 13px var(--sans);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 13px;transition:border-color .15s}
.deckchip:hover{border-color:var(--gold)}
.dc-dot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(89,172,109,.18);flex:0 0 auto}
.dc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dc-meta{font-weight:400;color:var(--muted);font-family:var(--mono);font-size:11px;flex:0 0 auto} .dc-caret{color:var(--muted);font-size:10px}
.facets{display:flex;gap:3px;background:rgba(15,18,23,.55);border:1px solid var(--line);border-radius:999px;padding:3px}
.facets button{font:600 12.5px var(--sans);color:var(--muted);background:transparent;border:0;padding:6px 15px;border-radius:999px;cursor:pointer;transition:color .12s}
.facets button:hover{color:var(--ink-dim)} .facets button[aria-pressed="true"]{color:var(--on-gold);background:linear-gradient(180deg,#e7bd6a,var(--gold));box-shadow:0 1px 6px rgba(217,169,78,.34)}
.topbar-right{display:flex;align-items:center;gap:9px;margin-left:auto;flex:0 0 auto}
.coll-pill{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:500 12px var(--sans);color:var(--ink-dim);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;transition:border-color .15s,color .15s}
.coll-pill:hover{border-color:var(--gold);color:var(--gold-ink)}
.cp-dot{width:7px;height:7px;border-radius:50%;background:var(--muted)} .coll-pill.active{color:var(--live);border-color:color-mix(in srgb,var(--live) 45%,var(--line))} .coll-pill.active .cp-dot{background:var(--live);box-shadow:0 0 0 3px rgba(89,172,109,.18)}
.newdeck{font:600 12.5px var(--sans);color:var(--on-gold);background:linear-gradient(180deg,#e7bd6a,var(--gold));border:0;border-radius:999px;padding:7px 15px;cursor:pointer;white-space:nowrap;box-shadow:0 1px 7px rgba(217,169,78,.30)} .newdeck:hover{filter:brightness(1.07)}

/* collection popover */
.coll-pop{position:fixed;z-index:60;width:min(340px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:0 16px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:9px}
.coll-pop-head{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .opt{text-transform:none;letter-spacing:0;color:var(--muted)}
.dropzone{display:flex;flex-direction:column;gap:4px;text-align:center;padding:14px;border:1.5px dashed var(--line);border-radius:var(--r);cursor:pointer;background:var(--surface)} .dropzone:hover,.dropzone.drag{border-color:var(--bronze);background:var(--surface-2)}
.dz-t{font-size:12.5px;color:var(--ink-dim)} .dz-a{color:var(--bronze-ink);text-decoration:underline} .dz-s{font-size:10.5px;color:var(--muted)}
.coll-foot{display:flex;align-items:center;justify-content:space-between;gap:8px} .coll-foot .hint{flex:1}

/* stage + drawer */
.stage{flex:1;display:flex;min-height:0}
.main{flex:1;min-width:0;position:relative;background:var(--ground);overflow:hidden}
.drawer-scrim{position:absolute;inset:0;z-index:45;background:rgba(6,9,12,.5);opacity:0;transition:opacity .2s} .drawer-scrim.show{opacity:1}
.drawer{position:absolute;top:0;right:0;bottom:0;z-index:46;width:min(380px,92vw);background:var(--surface);border-left:1px solid var(--line);padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:15px;box-shadow:-18px 0 46px rgba(0,0,0,.4);transform:translateX(100%);transition:transform .22s cubic-bezier(.3,.7,.3,1)}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between} .drawer-head h2{margin:0;font-size:16px}
.icon-btn{background:transparent;border:0;color:var(--muted);font-size:15px;cursor:pointer;padding:4px 8px;border-radius:var(--r-sm)} .icon-btn:hover{color:var(--ink);background:var(--surface-2)}
.field{display:flex;flex-direction:column;gap:7px} .field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.divider{height:1px;background:var(--line);margin:2px 0}
.saved-list{display:flex;flex-direction:column;gap:6px} .saved-row{display:flex;gap:6px;align-items:stretch}
.saved-load{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;cursor:pointer} .saved-load:hover{border-color:var(--bronze)} .saved-load b{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .saved-load span{font-size:11px;color:var(--muted)}
.saved-del{flex:0 0 auto;width:34px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--muted);cursor:pointer} .saved-del:hover{border-color:var(--bad);color:var(--bad)}
.row{display:flex;gap:8px} .row>*{flex:1}
select,textarea,input[type=text],input[type=number]{font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 10px}
textarea{resize:vertical;min-height:150px;font-family:var(--mono);font-size:12px;line-height:1.5}
select:focus,textarea:focus,input:focus{outline:2px solid var(--bronze);outline-offset:-1px}
.deck-count{text-transform:none;letter-spacing:0;color:var(--muted);font-weight:500} .deck-count.ok{color:var(--live)}
button.primary,button.ghost{font:600 13px var(--sans);border-radius:var(--r-sm);padding:10px 14px;cursor:pointer;border:1px solid var(--line);transition:filter .12s,border-color .12s,color .12s,box-shadow .12s}
button.primary{background:linear-gradient(180deg,#e7bd6a,var(--gold));color:var(--on-gold);border-color:transparent;box-shadow:0 1px 8px rgba(217,169,78,.28)} button.primary:hover{filter:brightness(1.07);box-shadow:0 2px 14px rgba(238,106,43,.30)} button.primary:disabled{opacity:.5;box-shadow:none}
button.ghost{background:var(--surface-2);color:var(--ink-dim)} button.ghost:hover{border-color:var(--gold);color:var(--gold-ink)} button.ghost.block{width:100%;text-align:center} button.ghost.xs{padding:5px 10px;font-size:11px;flex:0 0 auto}
.filebtn{display:inline-flex;align-items:center;justify-content:center;text-align:center;cursor:pointer}
.hint{font-size:11.5px;color:var(--muted);line-height:1.5}

/* content + states */
#content{position:absolute;inset:0;overflow-y:auto;padding:24px clamp(18px,4vw,40px)}
#content.flush{padding:0;overflow:hidden} #viz-frame{width:100%;height:100%;border:0;display:block}
.state{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:flex-start;overflow:auto;padding:48px 40px} .state.show{display:flex}
#state-loading{align-items:center;justify-content:center;gap:18px}
.load-emblem{position:relative;width:72px;height:72px;display:grid;place-items:center}
.load-emblem img{width:56px;height:56px;object-fit:contain;animation:emblem-pulse 1.8s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(238,106,43,.35))}
.load-emblem .spinner{position:absolute;inset:0;width:72px;height:72px}
@keyframes emblem-pulse{0%,100%{opacity:.72;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.load-emblem img{animation:none}}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold);border-right-color:var(--ember);animation:spin .8s linear infinite;box-shadow:0 0 18px rgba(238,106,43,.18)} @keyframes spin{to{transform:rotate(360deg)}}
.msg{font-size:13px;color:var(--muted);text-align:center;max-width:440px}
@media (prefers-reduced-motion:reduce){.spinner{animation:none} .hero-logo img{animation:none}}
/* forged scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-thumb{background:var(--surface-3);border:3px solid transparent;background-clip:padding-box;border-radius:99px} ::-webkit-scrollbar-thumb:hover{background:var(--steel);background-clip:padding-box} ::-webkit-scrollbar-track{background:transparent}

/* front-door hub */
.hub{width:100%;max-width:800px;display:flex;flex-direction:column;gap:18px}
.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:2px}
.hero-logo{position:relative;width:min(168px,40vw)}
.hero-logo::after{content:"";position:absolute;left:50%;top:42%;width:74%;height:60%;transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(238,106,43,.26),rgba(238,106,43,.05) 60%,transparent);filter:blur(14px)}
.hero-logo img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 26px rgba(0,0,0,.5));
  animation:hero-rise .7s cubic-bezier(.2,.7,.25,1) both}
@keyframes hero-rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(20px,3.4vw,27px);line-height:1.26;margin:18px auto 0;max-width:600px;letter-spacing:.01em;color:var(--ink)}
.hub-sub{font-size:14px;color:var(--muted);margin:12px auto 0;max-width:540px;line-height:1.6}
.hub-q{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:-6px;text-align:center}
/* front-door framing: the two-concept (collection vs deck) explainer above the action cards */
.hub-lead{text-align:center;max-width:600px;margin:2px auto -2px}
.hub-lead .hl-q{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.hub-lead p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-dim)} .hub-lead b{color:var(--ink)}
.k-own{color:var(--live);font-weight:600} .k-buy{color:var(--away);font-weight:600}
/* inline "what's a bracket?" helper, reused in Build + Upgrade forms */
.bracket-help{margin:10px 0 0;font-size:12.5px;max-width:640px}
.bracket-help>summary{cursor:pointer;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.04em;list-style:none;display:inline-flex;align-items:center;gap:6px;padding:3px 0}
.bracket-help>summary::before{content:"ⓘ";color:var(--gold-ink)} .bracket-help>summary::-webkit-details-marker{display:none}
.bracket-help>summary:hover{color:var(--gold-ink)}
.bracket-help[open]>summary{color:var(--ink-dim);margin-bottom:6px}
.bracket-help ul{margin:0;padding:12px 16px;list-style:none;border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:var(--r-sm);background:linear-gradient(180deg,var(--surface),rgba(30,35,44,.5));display:flex;flex-direction:column;gap:6px}
.bracket-help li{color:var(--ink-dim);line-height:1.45} .bracket-help li b{color:var(--gold-ink);font-family:var(--mono);font-size:11.5px} .bracket-help li em{color:var(--muted);font-style:italic}
.hub-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.hub-card{text-align:left;background:linear-gradient(180deg,var(--surface),rgba(30,35,44,.6));border:1px solid var(--line);border-radius:var(--r);padding:18px;cursor:pointer;display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden;transition:border-color .14s,transform .14s,box-shadow .14s}
.hub-card::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--ember));transform:scaleX(0);transform-origin:left;transition:transform .22s}
.hub-card:hover{border-color:color-mix(in srgb,var(--gold) 55%,var(--line));transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.34)}
.hub-card:hover::before{transform:scaleX(1)}
.hub-card .hc-role{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)} .hub-card h3{margin:0;font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink)}.hub-card p{margin:0;font-size:12.5px;color:var(--ink-dim);line-height:1.55;flex:1} .hc-cta{font-size:12px;color:var(--gold-ink);font-weight:600}
@media (max-width:900px){.hub-cards{grid-template-columns:1fr}}
.hub-foot{margin-top:6px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.hub-foot p{margin:0}
.hf-support{font-size:12.5px;color:var(--ink-dim)} .hf-support a{color:var(--bronze-ink);text-decoration:none;font-weight:600} .hf-support a:hover{text-decoration:underline}
.hf-credit{font-size:11.5px;color:var(--muted)} .hf-credit a{color:var(--ink-dim);text-decoration:none} .hf-credit a:hover{color:var(--bronze-ink)}
.hf-legal{font-size:10.5px;color:var(--faint);line-height:1.5;max-width:660px} .hf-legal a{color:var(--faint);text-decoration:underline} .hf-legal a:hover{color:var(--muted)}
/* onboarding nudge + card icons */
.hub-onboard{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px}
.hub-onboard .ob-ic{font-size:18px;flex:0 0 auto;line-height:1}
.hub-onboard .ob-txt{flex:1;font-size:12.5px;color:var(--ink-dim);line-height:1.5} .hub-onboard .ob-txt b{color:var(--ink)}
.hub-onboard.done{border-color:color-mix(in srgb,var(--live) 40%,var(--line))} .hub-onboard.done .ob-ic{filter:none}
.hc-top{display:flex;align-items:center;gap:8px} .hc-ic{font-size:16px;line-height:1}

/* ------- responsive ------- */
@media (max-width:760px){
  .topbar{flex-wrap:wrap;gap:10px;padding:10px 14px}
  .brand .k{display:none}
  .deckbar{order:3;flex-basis:100%;margin:4px 0 0;flex-wrap:wrap;gap:8px}
  .deckchip{max-width:none;flex:1 1 100%}
  .facets{flex:1 1 100%} .facets button{flex:1;text-align:center;padding:8px 4px}
  .state{padding:28px 18px}
  .hub{gap:18px} .hub-head h1{font-size:21px} .hub-sub{font-size:13px}
}
@media (max-width:520px){
  .build-form .ac-wrap{flex:1 1 100%;min-width:0} .build-form select,.build-form .primary{flex:1}
  .hub-onboard{flex-wrap:wrap} .hub-onboard .ob-txt{flex:1 1 100%} .hub-onboard .ghost{width:100%}
}
@media (max-width:440px){ .nd-long{display:none} }

/* facet content: shared bits */
.an-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:4px} .an-head h2{margin:0;font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.01em;color:var(--ink)} .an-head .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.backlink{background:transparent;border:0;color:var(--muted);font:500 12.5px var(--sans);cursor:pointer;padding:4px 0;margin-bottom:6px} .backlink:hover{color:var(--bronze-ink)}
.build-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 8px} .build-form input[type=text]{flex:1;min-width:260px} .chk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-dim)}
.status{font-family:var(--mono);font-size:12px;color:var(--muted)} .bar{height:4px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin:8px 0;max-width:420px} .bar i{display:block;height:100%;background:var(--bronze);width:0;transition:width .2s}
.sec{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:26px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line);position:relative}
.sec::before{content:"";position:absolute;left:0;bottom:-1px;width:34px;height:2px;background:linear-gradient(90deg,var(--gold),var(--ember))}
.tiles{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 6px} .tile{border:1px solid var(--line);border-radius:var(--r-sm);background:linear-gradient(180deg,var(--surface),rgba(30,35,44,.55));padding:11px 15px;min-width:84px} .tile .n{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--gold-ink)} .tile .l{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.tile.good .n,.tile.live .n{color:var(--live)} .tile.warn .n,.tile.away .n{color:var(--away)} .tile.dead .n{color:var(--dead)}
.rtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.rt{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:11px 13px} .rt .n{font-family:var(--mono);font-size:18px;font-weight:600} .rt .n .t{color:var(--muted);font-size:12px} .rt .n .arr{color:var(--muted);font-size:13px;margin:0 3px} .rt.hit .n{color:var(--live)} .rt.miss .n{color:var(--away)} .rt .l{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .role{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:11px 13px} .role .rn{display:flex;justify-content:space-between;align-items:baseline} .role .rn b{font-family:var(--mono);font-size:18px} .role .rn span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .role .rc{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4;max-height:3em;overflow:hidden} .role .sub2{color:var(--bronze-ink)}
.curve{display:flex;flex-direction:column;gap:5px;max-width:560px} .crow{display:grid;grid-template-columns:26px 1fr 30px;align-items:center;gap:10px;font-family:var(--mono);font-size:12px} .crow .mv{color:var(--muted);text-align:right} .crow .barwrap{background:var(--surface-2);border-radius:4px;overflow:hidden;height:16px} .crow .bar2{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold) 60%,var(--ember));border-radius:4px;min-width:3px} .crow.peak .bar2{background:var(--away)} .crow .cn{color:var(--ink)}
.warn{border-radius:var(--r-sm);padding:12px 15px;margin-bottom:10px;font-size:13px;line-height:1.5} .warn.bad{border:1px solid var(--bad);border-left:3px solid var(--bad);background:rgba(223,97,70,.12)} .warn.amber{border:1px solid color-mix(in srgb,var(--away) 50%,var(--line));border-left:3px solid var(--away);background:rgba(230,162,60,.11)} .warn.muted{border:1px solid var(--line);border-left:3px solid var(--steel);background:linear-gradient(180deg,var(--surface),rgba(30,35,44,.5));color:var(--muted)} .warn b{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase} .warn ul{margin:7px 0 0;padding-left:18px}
.spbar{height:6px;border-radius:999px;background:rgba(15,18,23,.6);overflow:hidden;margin-top:8px;box-shadow:inset 0 0 0 1px var(--line)} .spbar span{display:block;height:100%;background:linear-gradient(90deg,var(--live),var(--gold) 55%,var(--ember));box-shadow:0 0 10px rgba(238,106,43,.4)}
.swap.down{border-left:3px solid var(--bad)} .swap.down .add{color:var(--ink-dim)} .overtag{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--bad);border:1px solid var(--bad);border-radius:999px;padding:1px 7px;margin-left:8px} .over{color:var(--bad)}
.hubs{display:flex;gap:8px;flex-wrap:wrap} .chip2{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--ink-dim)} .chip2 b{color:var(--bronze-ink);font-family:var(--mono)}
.combo{border:1px solid var(--line);border-left:3px solid var(--live);border-radius:var(--r-sm);background:var(--surface);padding:12px 14px;margin-bottom:8px} .combo.away{border-left-color:var(--away)} .combo .uses{font-size:13.5px;font-weight:500} .combo .prod{font-size:12.5px;color:var(--bronze-ink);margin-top:3px} .combo .meta{font-size:11.5px;color:var(--muted);margin-top:4px} .combo .add{color:var(--away)}
.sum{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 6px} .s{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:9px 14px} .s .n{font-size:18px;font-weight:600} .s .l{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:2px} .s .cap{color:var(--muted);font-weight:400;font-size:14px}
.swap{padding:9px 4px;border-bottom:1px solid var(--line)} .swap .m{display:flex;align-items:center;gap:10px;font-size:13px} .swap .cut{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--bad)} .swap .arr{color:var(--muted)} .swap .add{color:var(--live);font-weight:500;flex:1} .swap .d{font-family:var(--mono);font-size:11px;color:var(--bronze-ink)} .swap .why{font-size:11.5px;color:var(--muted);margin:3px 0 0} .buytag{font-size:10px;color:var(--away);border:1px solid var(--away);border-radius:4px;padding:0 5px;margin-left:6px}
.combotag{font-size:10px;color:var(--live);border:1px solid var(--live);border-radius:4px;padding:0 5px;margin-left:6px} .swap.combo{border-left:2px solid var(--live);padding-left:8px}
.export{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:2px 0 12px} .export .ex-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.ex-btn{font:600 12px var(--sans);color:var(--ink-dim);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;transition:border-color .12s,color .12s,background .12s} .ex-btn:hover{border-color:var(--gold);color:var(--gold-ink)} .ex-btn.ok{border-color:var(--live);color:var(--live);background:color-mix(in srgb,var(--live) 12%,transparent)}
.ex-sep{width:1px;height:18px;background:var(--line);margin:0 3px}
.copy-fallback{position:fixed;inset:0;z-index:80;background:rgba(6,9,12,.6);display:flex;align-items:center;justify-content:center;padding:24px} .cf-box{width:min(560px,94vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden} .cf-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)} .cf-x{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:14px} .cf-x:hover{color:var(--ink)} .cf-box textarea{border:0;border-radius:0;min-height:280px;background:var(--ground);font-family:var(--mono);font-size:12px}
.decklist{columns:230px 3;column-gap:26px;margin-top:6px} .grp{break-inside:avoid;margin-bottom:14px} .grp h4{margin:0 0 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-ink)} .grp .c{font-size:13px;color:var(--muted);line-height:1.6}
.buy{color:var(--away)} .decklist .c.buy{color:var(--away)} .decklist .c.buy::before{content:"◇ ";font-size:11px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 22px}
.ac-wrap{position:relative;flex:1;min-width:260px} .ac-wrap>input[type=text]{width:100%;min-width:0} .ac-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;max-height:240px;overflow-y:auto;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 12px 32px rgba(0,0,0,.45)} .ac-list[hidden]{display:none} .ac-item{padding:8px 12px;font-size:13px;color:var(--ink-dim);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ac-item:hover,.ac-item.active{background:var(--surface);color:var(--bronze-ink)}

/* Front-door "how it works" link */
.hub-how{background:transparent;border:0;cursor:pointer;margin-top:16px;padding:6px 4px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.hub-how .t{text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.hub-how:hover{color:var(--gold-ink)} .hub-how:hover .t{text-decoration-color:var(--gold)}

/* How-it-works modal — matches the copy-fallback overlay language, richer body */
.how-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .2s}
.how-modal.show{opacity:1} .how-modal[hidden]{display:none}
.how-scrim{position:absolute;inset:0;background:rgba(6,9,12,.66);backdrop-filter:blur(2px)}
.how-box{position:relative;z-index:1;width:min(720px,96vw);max-height:88vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 24px 64px rgba(0,0,0,.55);overflow:hidden;transform:translateY(10px) scale(.99);transition:transform .2s}
.how-modal.show .how-box{transform:none}
.how-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface-2),var(--surface));flex:0 0 auto}
.how-head-t{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:18px;font-weight:700;color:var(--gold-ink)} .how-head-t img{border-radius:6px}
.how-x{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:4px} .how-x:hover{color:var(--ink)}
.how-body{padding:4px 24px 26px;overflow-y:auto}
.how-body .sec:first-of-type{margin-top:24px}
.hw-lead{font-size:14.5px;line-height:1.65;color:var(--ink-dim);margin:18px 0 2px} .hw-lead b{color:var(--ink)}
.hw-p{font-size:13.5px;line-height:1.62;color:var(--ink-dim);margin:10px 0} .hw-p b{color:var(--ink)} .hw-p i{color:var(--ink-dim);font-style:italic}
.hw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 4px}
.hw-card{border:1px solid var(--line);border-radius:var(--r-sm);background:linear-gradient(180deg,var(--surface),rgba(30,35,44,.55));padding:12px 13px}
.hw-card h4{margin:0 0 5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink)}
.hw-card p{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.hw-formula{margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-sm);background:var(--ground);font-family:var(--mono);font-size:13.5px;color:var(--ink);text-align:center;overflow-x:auto}
.hw-formula .w{color:var(--ember)} .hw-formula sub{font-size:.72em}
.hw-list{margin:8px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.hw-list li{font-size:13px;line-height:1.55;color:var(--ink-dim);padding-left:18px;position:relative} .hw-list li b{color:var(--ink)} .hw-list li i{font-style:italic}
.hw-list li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--gold),var(--ember))}
.hw-trust li::before{background:var(--live)}
@media (max-width:640px){ .hw-grid{grid-template-columns:1fr} .how-modal{padding:0} .how-box{width:100vw;height:100vh;max-height:100vh;border-radius:0;border:0} .how-body{padding:4px 18px 24px} .hw-formula{font-size:12px} }

/* inline link-styled button (used inside warn/hint text) */
.linkbtn{background:transparent;border:0;padding:0;cursor:pointer;color:var(--gold-ink);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.linkbtn:hover{color:var(--ember)}