/* Combo — the site, built on homepage 01 Versus (fighting-game HUD). Tokens in combo.css. */
.skip{position:absolute;left:8px;top:8px;transform:translateY(-300%);background:var(--y);color:var(--k);padding:10px 14px;z-index:50;font-weight:700}
.skip:focus{transform:none}
.mute{color:var(--mute)}
main{display:block}
/* ---- top bar ---- */
.top{position:sticky;top:0;z-index:20;background:rgba(14,14,16,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:68px}
.logo{font:400 22px/1 var(--display);color:var(--y);text-decoration:none;letter-spacing:.02em;flex:none}
.logo b{color:var(--m);font-weight:400}
.tabs{display:flex;gap:2px;margin-left:12px}
.tabs a{font:600 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:10px 12px;text-decoration:none;color:var(--mute);transition:color .2s}
.tabs a:hover,.tabs a[aria-current]{color:var(--w)}.tabs a[aria-current]{box-shadow:inset 0 -3px var(--y)}
.top .end{margin-left:auto;display:flex;gap:10px;align-items:center}
.menu{display:none}
@media (max-width:1100px){
  .menu{display:grid}
  .tabs{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--k);border-bottom:2px solid var(--y);margin:0;padding:8px var(--gut) 16px}
  .tabs.open{display:flex}.tabs a{padding:14px 4px;font-size:15px}.tabs a[aria-current]{box-shadow:inset 3px 0 var(--y);padding-left:12px}
}
@media (max-width:760px){.top .wrap{height:60px}.top .btn-launch{padding:0 16px;min-height:42px}}
/* ---- shared blocks ---- */
section.blk{padding-block:clamp(56px,8vw,110px)}
.sh{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.sh h2{font-size:clamp(28px,4.2vw,54px);max-width:18ch}
.sh p{max-width:48ch;color:var(--mute)}
.pagehead{padding-block:clamp(36px,6vw,72px) 8px;display:grid;gap:14px}
.pagehead h1{font-size:clamp(34px,6vw,76px)}
.pagehead h1 span{color:var(--y)}
.pagehead p{color:var(--mute);max-width:64ch}
.panel{border:2px solid var(--line);background:var(--k2);padding:20px;display:grid;gap:12px;align-content:start;min-width:0}
.panel h2,.panel h3{font-size:16px;letter-spacing:.03em}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.kv div{border-top:2px solid var(--line);padding-top:8px;min-width:0}
.kv dt{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.kv dd{font:400 22px/1.15 var(--display);margin-top:6px;overflow-wrap:anywhere}
.copy{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;border:2px solid var(--line);padding:9px 12px;transition:border-color .2s,color .2s}
.copy:hover{border-color:var(--y);color:var(--y)}.copy svg{width:15px;height:15px}
.copy.ok{border-color:var(--y);color:var(--y)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;border:2px solid var(--line);padding:9px 12px;color:var(--mute);transition:border-color .2s,color .2s}
.chip:hover{color:var(--w);border-color:var(--mute)}.chip[aria-pressed="true"]{background:var(--y);border-color:var(--y);color:var(--k)}
select,.field input,.field textarea{background:var(--k);border:2px solid var(--line);padding:11px 12px;min-width:0;width:100%;transition:border-color .2s}
select:hover,.field input:hover,.field textarea:hover{border-color:var(--mute)}
select:focus,.field input:focus,.field textarea:focus{border-color:var(--y);outline:none}
/* ---- hero HUD ---- */
.hero{min-height:calc(100svh - 68px);display:grid;grid-template-rows:auto 1fr auto;padding-block:22px 26px;position:relative;gap:8px}
.hero.short{min-height:0}
.hud{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.bar{display:grid;gap:8px;min-width:0}
.bar .lab{display:flex;justify-content:space-between;gap:10px;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.bar .lab b{color:var(--w);font-weight:600}
.meter{height:22px;background:var(--k3);border:2px solid var(--w);position:relative;overflow:hidden;transform:skewX(-14deg)}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--y);transition:width .5s var(--ease)}
.meter.r i{left:auto;right:0;background:var(--m)}
.meter .ticks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),var(--k) calc(10% - 2px) 10%)}
.bar.right .lab{flex-direction:row-reverse}
.vs{font:400 15px/1 var(--display);color:var(--k);background:var(--y);padding:10px 12px;text-align:center;min-width:112px}
.vs small{display:block;font:600 11px/1 var(--mono);letter-spacing:.08em;margin-top:5px}
.stage{position:relative;min-height:340px}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage .h1{position:absolute;left:0;right:0;bottom:4%;text-align:center;font-size:clamp(28px,4.6vw,64px);color:var(--w);pointer-events:none}
.stage .h1 span{color:var(--y)}
.stage .who{position:absolute;top:8px;left:0;display:flex;gap:10px;align-items:center;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.stage .who a{color:var(--w)}
.under{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:end}
.card-k{border-top:3px solid var(--w);padding-top:12px;display:grid;gap:6px;min-width:0}
.card-k .k{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.card-k .v{font:500 16px/1.35 var(--mono)}
.card-k.warn{border-color:var(--m)}.card-k.warn .v b{color:var(--m)}
.cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.right-al{text-align:right}
/* ---- move list ---- */
.moves{border-block:2px solid var(--w);background:var(--k2);overflow:hidden;white-space:nowrap;min-height:44px}
.moves ul{display:inline-flex;gap:34px;padding:13px 0;list-style:none;animation:slide 70s linear infinite}
.moves:hover ul{animation-play-state:paused}
.moves li{font:500 13px/1 var(--mono);display:inline-flex;gap:8px;align-items:center}
.moves li b{font-weight:700}.moves .b{color:var(--y)}.moves .s{color:var(--m)}.moves .n{color:var(--mute)}
@keyframes slide{to{transform:translateX(-50%)}}
/* ---- 12 slices ---- */
.rounds{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;align-items:end;list-style:none;padding:0}
.rd{display:grid;gap:10px;justify-items:center;min-width:0}
.rd .pip{width:100%;border:2px solid var(--w);background:var(--k2);display:grid;place-items:center;font:400 18px/1 var(--display);transition:transform .3s var(--ease)}
.rd:hover .pip{transform:translateY(-4px)}
.rd[data-w="1"] .pip{height:70px}.rd[data-w="2"] .pip{height:112px}.rd[data-w="3"] .pip{height:154px}
.rd.burned .pip{background:var(--y);color:var(--k);border-color:var(--y)}
.rd.pending .pip{background:repeating-linear-gradient(-45deg,var(--y-dim) 0 6px,var(--k) 6px 12px);border-color:var(--y);color:var(--y)}
.rd.void .pip{background:var(--k);border-color:var(--m);color:var(--m)}
.rd.void .s{color:var(--m);font-weight:700}
.rd.current .pip{border-color:var(--y);color:var(--y);background:linear-gradient(to top,var(--y-dim) var(--fill,0%),var(--k2) 0)}
.rd .meta{font:500 11px/1.3 var(--mono);text-align:center;color:var(--mute);overflow-wrap:anywhere}
.rd .meta b{display:block;color:var(--w);font-weight:600}
.rd.burned .s{color:var(--y)}
.legend{display:flex;gap:22px;margin-top:22px;font:500 12px/1 var(--mono);color:var(--mute);flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:12px;margin-right:7px;vertical-align:-1px;border:2px solid var(--w)}
.legend .lb i{background:var(--y);border-color:var(--y)}.legend .lv i{border-color:var(--m)}
/* ---- journal rows ---- */
.log{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.log h3{font-size:20px;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.log h3 svg{width:22px;height:22px}
.rows{list-style:none;padding:0;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.rows .c{font:400 20px/1 var(--display);overflow-wrap:anywhere}
.rows .ok .c,.rows li.ok .c{color:var(--y)}.rows .ko .c,.rows li.ko .c{color:var(--m)}
.rows .what{min-width:0;overflow-wrap:anywhere}
.rows .who{color:var(--mute)}.rows .who b{color:var(--w);font-weight:500}
.rows a{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--y);text-decoration:none;border-bottom:1px solid transparent}
.rows a:hover{border-color:var(--y)}.rows a svg{width:14px;height:14px}
.rows a.coin{font-size:14px;color:var(--w);font-weight:700}
.rows .t{font-size:12px;color:var(--mute);text-align:right}
.rows .k-devbreak b,.rows .k-devsell b,.rows .k-void b{color:var(--m)}
.rows .tw{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mute);border-bottom:1px solid transparent;cursor:pointer}
.rows .tw:hover{color:var(--y)}
/* ---- dev bag ---- */
.bag{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.bigbar{height:64px;display:flex;border:2px solid var(--w);margin-block:18px 14px}
.bigbar span{display:grid;place-items:center;font:600 13px/1 var(--mono);transition:flex-basis .6s var(--ease);overflow:hidden;white-space:nowrap;min-width:0}
.bigbar .rs{background:var(--y);color:var(--k)}.bigbar .bn{background:repeating-linear-gradient(-45deg,var(--y-dim) 0 6px,var(--k) 6px 12px);color:var(--y)}.bigbar .fr{background:var(--k3)}.bigbar .sd{background:var(--m);color:var(--k)}
.bagnums{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:8px 34px}
.bagnums dt{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.bagnums dd{font:400 28px/1.1 var(--display)}
.bagnums .sold dd{color:var(--m)}
.lesson{background:var(--k2);padding:24px;border:1px solid var(--line);min-width:0}
.lesson h3{font-size:19px;margin-bottom:10px;color:var(--y)}
.lesson p{color:var(--mute);margin-bottom:14px}
.sells{list-style:none;padding:0}
.sells li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13px}
.sells .red{font-weight:600}
/* ---- select screen (coins) ---- */
.select{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;background:var(--line);border:3px solid var(--line)}
.fighter{background:var(--k);padding:14px;display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px 12px;align-items:center;text-decoration:none;position:relative;transition:background-color .2s;min-width:0}
.fighter:hover{background:var(--k2)}
.fighter:hover::after{content:"";position:absolute;inset:0;border:3px solid var(--y);pointer-events:none}
.av{width:56px;height:56px;object-fit:cover;border:2px solid var(--line)}
.av-none{display:grid;place-items:center;background:var(--k3);font:400 18px/1 var(--display);color:var(--y)}
.fighter .id{display:grid;gap:4px;min-width:0;justify-items:start}
.fighter .nm{font:400 16px/1.1 var(--display);overflow-wrap:anywhere}
.fighter .sub{font-size:12px;color:var(--mute);overflow-wrap:anywhere}
.fighter .cb{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:12px}
.fighter .cb b{font:400 22px/1 var(--display);color:var(--y);min-width:52px}
.fighter .mini{flex:1;height:8px;background:var(--k3)}.fighter .mini i{display:block;height:100%;background:var(--y)}
.fighter .st{grid-column:1/-1;font-size:11px;color:var(--mute)}
.fighter.hot .cb b{color:var(--m)}.fighter.hot .mini i{background:var(--m)}
.fighter em{font-style:normal}
.empty{background:var(--k);padding:28px;color:var(--mute);grid-column:1/-1}
/* ---- explore controls ---- */
.tools{display:grid;grid-template-columns:minmax(0,1.4fr) auto auto;gap:14px;align-items:end;margin-bottom:22px}
.tools label{display:grid;gap:8px;font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.count{font:600 12px/1 var(--mono);color:var(--mute);margin-bottom:12px}
/* ---- coin page ---- */
.coinhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;padding-block:28px 6px}
.coinhead .av{width:84px;height:84px}
.coinhead h1{font-size:clamp(30px,5vw,60px);overflow-wrap:anywhere}
.coinhead h1 span{color:var(--y)}
.coinhead .ids{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:13px;color:var(--mute)}
.coinhead code{font:500 13px/1 var(--mono);color:var(--w);overflow-wrap:anywhere}
.cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px}
.you dl{display:grid;grid-template-columns:1fr auto;gap:8px 18px;font-size:14px}
.you dt{color:var(--mute)}.you dd{font-weight:600;text-align:right}
.hash{font:500 12px/1.4 var(--mono);color:var(--mute);overflow-wrap:anywhere}
.hash b{color:var(--w)}
/* ---- event page ---- */
.event{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:clamp(36px,6vw,72px);align-items:start}
.event h1{font-size:clamp(34px,6vw,72px)}
.event.k-break h1,.event.k-devbreak h1,.event.k-void h1{color:var(--m)}
.event.k-burn h1,.event.k-pending h1{color:var(--y)}
.event .lede{font-size:18px;margin-top:16px;max-width:52ch}
.event .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;align-items:center}
.event textarea{width:100%;min-height:150px;background:var(--k);border:2px solid var(--line);padding:12px;resize:vertical;font-size:14px}
.event img.card{width:100%;height:auto;border:2px solid var(--line);margin-top:6px}
/* ---- how: sandbox ---- */
.steps{list-style:none;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;background:var(--line);border:3px solid var(--line)}
.steps li{background:var(--k);padding:22px;counter-increment:s;display:grid;gap:10px;align-content:start}
.steps li::before{content:counter(s,decimal-leading-zero);font:400 28px/1 var(--display);color:var(--y)}
.steps h3{font-size:18px}.steps p{color:var(--mute);font-size:14px}
.sandbox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.sandbox .stage{min-height:260px;border:2px solid var(--line);background:var(--k2)}
.pad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pad button{border:2px solid var(--line);padding:12px;text-align:left;font:600 13px/1.25 var(--mono);transition:border-color .2s,background-color .2s}
.pad button:hover{border-color:var(--y)}.pad button small{display:block;color:var(--mute);font-weight:500;margin-top:4px}
.pad .sell{border-color:#5a2440}.pad .sell:hover{border-color:var(--m)}
.said{min-height:48px;border-left:3px solid var(--y);padding:8px 12px;background:var(--k2);font-size:14px}
.said.bad{border-color:var(--m)}
/* ---- faq ---- */
.faq{max-width:900px}
.faq details{border-top:2px solid var(--line)}
.faq details:last-child{border-bottom:2px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font:400 clamp(17px,2vw,22px)/1.2 var(--display);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--y)}
.faq summary svg{width:24px;height:24px;flex:none;transition:transform .3s var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg);color:var(--m)}
.faq details p{padding:0 0 18px;max-width:68ch;color:var(--mute)}
.faq details p:last-child{padding-bottom:24px}
/* ---- studio ---- */
.studio{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;padding-bottom:clamp(56px,8vw,110px)}
.form{display:grid;gap:18px;background:var(--k2);padding:clamp(18px,3vw,28px);border:1px solid var(--line);min-width:0}
.form fieldset{border:0;padding:0;display:grid;gap:14px;min-width:0}
.form legend{font:400 18px/1 var(--display);color:var(--y);margin-bottom:14px}
.field{display:grid;gap:8px;min-width:0}
.field label,.field .lab{display:flex;justify-content:space-between;gap:10px;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.field label output{color:var(--y)}
.field textarea{min-height:90px;resize:vertical}
.field input[type=file]{padding:9px;font-size:13px}
.hint{font-size:12px;color:var(--mute)}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;background:var(--k3);accent-color:var(--y);width:100%;border:0;padding:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;background:var(--y);border:3px solid var(--k);cursor:grab}
input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--y);border:3px solid var(--k);border-radius:0;cursor:grab}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.screen{border:2px solid var(--w);padding:20px;display:grid;gap:12px;min-width:0}
.screen h3{font-size:16px}
.screen dl{display:grid;grid-template-columns:1fr auto;gap:10px 18px;font-size:14px}
.screen dt{color:var(--mute)}.screen dd{font-weight:600;text-align:right}
.preview{position:sticky;top:84px;display:grid;gap:16px;min-width:0}
.pv-id{display:flex;gap:12px;align-items:center;min-width:0}
.pv-id .av{width:64px;height:64px;flex:none}
.pv-id b{display:block;font:400 22px/1.1 var(--display);overflow-wrap:anywhere}
.pv-banner{aspect-ratio:3/1;border:2px dashed var(--line);display:grid;place-items:center;color:var(--mute);font-size:12px;background:center/cover var(--k2)}
.tslices{width:100%;border-collapse:collapse;font-size:13px}
.tslices th,.tslices td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:right}
.tslices th:first-child,.tslices td:first-child{text-align:left}
.tslices th{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.err{min-height:22px;font-size:14px;color:var(--m)}
.err .okm{color:var(--y)}
.acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.prog{list-style:none;padding:0;display:grid}
.prog li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.prog li span:last-child{color:var(--mute);font-size:13px}.prog li.done span:last-child{color:var(--y)}.prog li.bad span:last-child{color:var(--m)}
.why{list-style:none;padding:0;display:grid;gap:12px}
.why li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;font-size:14px;color:var(--mute)}
.why li svg{width:22px;height:22px;color:var(--y)}.why b{color:var(--w);font-weight:600}
.banner-note{border:2px solid var(--y);padding:14px 16px;font-size:14px}
.banner-note.admin{border-color:var(--m)}
/* ---- footer ---- */
footer.site{background:var(--y);color:var(--k);padding-block:64px 28px;margin-top:clamp(40px,6vw,80px)}
footer.site .big{font:400 clamp(40px,10.5vw,160px)/.88 var(--display);letter-spacing:-.02em}
footer.site .fgrid{display:flex;justify-content:space-between;gap:28px;margin-top:40px;flex-wrap:wrap;font-weight:600;font-size:14px}
footer.site nav{display:flex;gap:22px;flex-wrap:wrap}footer.site a{text-decoration:none}footer.site a:hover{text-decoration:underline}
footer.site .fine{margin-top:28px;font-size:12px;max-width:80ch}
/* ---- responsive ---- */
@media (max-width:1100px){.select{grid-template-columns:repeat(2,minmax(0,1fr))}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.studio,.event,.cols,.sandbox{grid-template-columns:minmax(0,1fr)}.preview{position:static}.tools{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .hero{min-height:auto}
  .hud{grid-template-columns:minmax(0,1fr);gap:12px}.vs{order:-1;justify-self:start;display:flex;gap:10px;align-items:center}.vs small{margin:0}
  .bar.right .lab{flex-direction:row}.meter.r i{left:0;right:auto}
  .stage{min-height:280px}.under{grid-template-columns:minmax(0,1fr)}.right-al{text-align:left}.cta{justify-content:stretch}.cta .btn{flex:1}
  .rounds{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:20px}
  .log,.bag{grid-template-columns:minmax(0,1fr)}.select,.steps{grid-template-columns:minmax(0,1fr)}
  .rows li{grid-template-columns:52px minmax(0,1fr)}.rows .t{grid-column:2;text-align:left}
  .bagnums{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}.bagnums dd{font-size:22px}
  .row2,.row3{grid-template-columns:minmax(0,1fr)}
  .coinhead{grid-template-columns:auto minmax(0,1fr)}.coinhead .acts{grid-column:1/-1}.coinhead .av{width:60px;height:60px}
  .pad{grid-template-columns:minmax(0,1fr)}
}