/* versus.css — bento layout on top of seele.css. Structure only; the look is seele's. */

.versus-page{
  --theme-accent-primary:#ff9900;
  --theme-accent-secondary:#71e392;
  --vs-a-accent:#ff9900;
  --vs-b-accent:#4141ff;
  --bento-gap:10px;
  --score-h:158px;
  --hist-h:236px;
  /* chart tile: height from the viewport budget (480 floor, 780 cap); width fills the screen up to 1.6:1,
     so a 1440p monitor gets 780px squares and a 1080p one gets 768x480 rectangles instead of small squares */
  --chart-h:max(480px, min(780px, calc(100dvh - 20px - 58px - 10px - var(--score-h) - var(--hist-h) - var(--bento-gap) * 2 - 20px)));
  --sq:min(780px, calc((100vw - 40px - var(--bento-gap)) / 2), calc(var(--chart-h) * 1.6));
  --shake-distance:2px;
  display:flex;flex-direction:column;
}
.versus-page .sol-perp-page__shake-layer,.versus-page .sol-perp-page__parallax{flex:1 1 auto;min-height:0}

/* header */
.vs-controls{gap:6px}
.vs-control-label{color:var(--ash);font-size:11px;letter-spacing:.55px;margin:0 2px 0 6px}
.vs-controls .trade-slippage__option{flex:0 0 auto;min-width:44px;padding:6px 8px}
.vs-controls .app-footer__divider{height:16px}

/* bento: score / chart chart / history, centred */
.bento{
  width:calc(var(--sq) * 2 + var(--bento-gap));
  margin:0 auto;
  display:grid;
  grid-template-columns:var(--sq) var(--sq);
  grid-template-rows:var(--score-h) var(--chart-h) var(--hist-h);
  gap:var(--bento-gap);
  flex:0 0 auto;
}
.bento__score,.bento__bottom{grid-column:1 / -1}
.bento__bottom{display:grid;grid-template-columns:1fr 1fr;gap:var(--bento-gap);min-height:0}

/* chart tiles: seele chart-shell, square. The frame is ONE box (accent background + 4px padding,
   2px radius = the cut-pixel corner) instead of rails + 3x3 PNG corners, so it never shows seams on fractional DPR. */
.side{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.side .chart-shell{flex:1 1 auto;min-height:0;height:100%;background:var(--chart-shell-outer-accent);border-radius:2px;padding:0 4px 4px;grid-template-rows:58px 1fr}
.side .chart-top-rail{min-height:58px}
.side .chart-top-rail__side,.side .chart-body__side,.side .chart-footer{display:none}
.side .chart-body{background:var(--black)}
.side .ticker-dark-frame{background:var(--black);border-radius:4px;padding:0 6px}
.side .ticker-dark-frame__side{display:none}
.trade-panel.vs-history-panel,.trade-panel.vs-teams-panel{background:var(--trade-panel-accent);border-radius:2px;padding:4px}
.vs-history-panel .trade-panel__top,.vs-history-panel .trade-panel__bottom,.vs-history-panel .trade-panel__side{display:none}
.side .chart-body__center{min-height:0}
.side .chart-image--lightweight{min-height:0;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}
.side .chart-top-bar{gap:12px}
.side .top-stats__item{gap:3px}
.side .top-stats__label{margin:0;line-height:1}
.side .top-stats__value{padding-top:0;line-height:1}
.side .top-stats{scrollbar-width:none}
.side .top-stats::-webkit-scrollbar{display:none}

/* the tile never grows past its grid column: the top bar is nowrap, so every wrapper needs min-width:0 and
   the tile clips. Below ~520px (1080p, where height caps --sq) the ticker shrinks a step. */
.side{container-type:inline-size;overflow:hidden}
.side .chart-shell,.side .chart-top-rail,.side .chart-top-bar,.side .ticker-dark-frame,.side .ticker-pill,.side .ticker-inner{min-width:0}
.side .chart-top-bar{overflow:hidden}
.side .ticker-pill{padding:3px 12px}
.side .top-stats__item:nth-child(2){display:none}   /* HOLDERS: no per-token holder count yet, never show a dash */
@container (max-width:540px){
  .side .ticker-pill{padding:3px 8px}
  .side .chart-top-bar{gap:8px}
  .side .ticker-inner{gap:10px}
  .side .ticker-pair,.side .ticker-price{font-size:19px;letter-spacing:.9px}
  .side .ticker-change{font-size:13px}
  .side .ticker-quote{font-size:11px}
  .side .top-stats{gap:8px}
  .side .top-stats__value{font-size:15px}
}
@container (max-width:470px){
  .side .ticker-pair,.side .ticker-price{font-size:17px;letter-spacing:.7px}
  .side .ticker-change{font-size:12px}
  .side .ticker-quote{display:none}
  .side .ticker-inner{gap:8px}
}
/* tables: fixed-width labels never ellipsize; the row text steps down with the tile */
.vs-history-panel .portfolio-grid,.vs-team .portfolio-grid{font-size:13px;letter-spacing:.5px}
.vs-history-panel .portfolio-grid{grid-template-columns:44px 1fr 1fr 1.2fr 1fr .8fr;column-gap:6px}
.vs-history-panel,.vs-teams-panel{container-type:inline-size}
@container (max-width:440px){
  .vs-team__tag{display:none}
  .vs-team__name{font-size:16px}
  .vs-history-panel .portfolio-grid,.vs-team .portfolio-grid{font-size:12px;letter-spacing:.4px}
}

/* 1080p and shorter: the height budget caps --sq, so the score and bottom rows give back some height */
@media (min-width:981px) and (max-height:1000px){
  .versus-page{--score-h:140px;--hist-h:210px}
  .vs-score__countdown{font-size:36px}
  .vs-score__mid-inner{gap:6px;padding:6px 16px}
}

/* per-side accent (frames, axis, volume): SPLIT = A orange / B blue, SAME = both orange */
.versus-page[data-palette="split"] .side--a{--chart-shell-outer-accent:var(--vs-a-accent)}
.versus-page[data-palette="split"] .side--b{--chart-shell-outer-accent:var(--vs-b-accent)}
.versus-page[data-palette="same"] .side{--chart-shell-outer-accent:var(--vs-a-accent)}
.versus-page[data-palette="split"] .side--b .chart-top-bar,
.versus-page[data-palette="split"] .side--b .chart-top-bar .top-stats__label,
.versus-page[data-palette="split"] .side--b .chart-top-bar .top-stats__value{color:var(--bone)}


/* scoreboard row: three separate tiles (A | middle | B), same one-piece frame as the charts */
.bento__score{display:grid;grid-template-columns:1fr 480px 1fr;gap:var(--bento-gap);min-height:0}
.vs-tile{--tile-accent:var(--vs-a-accent);background:var(--tile-accent);border-radius:2px;padding:4px;display:flex;min-height:0}
.vs-tile>*{flex:1 1 auto;background:var(--black);border-radius:2px;min-width:0}
.versus-page[data-palette="split"] .vs-tile--b{--tile-accent:var(--vs-b-accent)}
.vs-tile--mid{--tile-accent:var(--ash)}
.vs-score{display:flex;flex-direction:column;justify-content:space-between;gap:6px;padding:12px 16px;min-height:0;overflow:hidden}
.vs-score--b{align-items:flex-end;text-align:right}
.vs-score__tag{color:var(--ash);font-size:13px;letter-spacing:.9px;line-height:1}
/* title strip (seele ORDER_BOOK header): moving diagonal band behind a black label, letters wave */
.vs-score .vs-title{min-height:32px}
.vs-title{--theme-orderbook-title-stripe:color-mix(in oklab,var(--tile-accent,var(--vs-a-accent)) 62%,#101110);--theme-orderbook-title-glow:color-mix(in oklab,var(--tile-accent,var(--vs-a-accent)) 85%,transparent);min-height:34px;border-bottom:0;width:100%}
.vs-title h2{margin:0;padding:6px 10px 5px;color:var(--tile-accent,var(--vs-a-accent))}
.vs-score--b .vs-title{justify-content:flex-end}
.vs-score--b .vs-title h2{margin:0 10px 0 0}
.vs-title--history{--tile-accent:var(--bone);min-height:36px;margin-bottom:6px}
.vs-title--history h2{color:var(--bone);font-size:20px}
.vs-title__tab{position:relative;z-index:1;margin-left:10px;background:var(--black);padding:6px 8px 5px;font-size:16px;color:var(--ash);cursor:pointer}
.vs-title__tab.portfolio-tab--active{color:var(--bone)}
.vs-title__h2{cursor:pointer}
.vs-title__h2.is-dim{color:var(--ash)}
.vs-history-panel .portfolio-grid.is-payouts{grid-template-columns:44px 1.1fr 1.2fr 1.5fr 1fr}
.vs-history-panel .portfolio-grid.is-payouts a{color:var(--bone);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--ash) 50%,transparent)}
.vs-history-panel .portfolio-grid.is-payouts a:hover{color:var(--green)}
.vs-score__name{font-size:24px;font-weight:700;letter-spacing:1.2px;line-height:1}
/* seamless band: seele slides a 200% track by -50%, which only tiles when the bar width is a multiple of the
   stripe period; here the tiles vary in width, so scroll the background instead by exact periods
   (45deg stripes of 15px → horizontal period 30/cos45 = 42.4264px) */
.vs-title .orderbook-content__title-strip-track{width:100%;animation:none}
.vs-title .orderbook-content__title-strip-bar{flex:0 0 100%;background-size:424.264px 100%;background-repeat:repeat-x;animation:vs-strip-scroll 10s linear infinite}
.vs-title .orderbook-content__title-strip-bar+.orderbook-content__title-strip-bar{display:none}
@keyframes vs-strip-scroll{from{background-position-x:0}to{background-position-x:424.264px}}
.wave-char{display:inline-block;transition:transform .22s cubic-bezier(.23,1,.32,1)}
.wave-char.is-wave-active{transform:translateY(-2px)}
/* slot-text hosts (rolling digits) */
.slot-text{display:inline-flex;white-space:pre;align-items:baseline}
.char-slot{position:relative;display:inline-flex;flex:none;justify-content:center;align-items:baseline;overflow:hidden;overflow-x:visible;overflow-y:clip;line-height:1.15}
.char-slot.is-resizing{overflow-x:clip}
.char-sizer{visibility:hidden;white-space:pre}
.char-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:pre;will-change:transform}
.vs-score__pct{font-size:32px;font-weight:700;letter-spacing:1.6px;line-height:1;font-variant-numeric:tabular-nums;color:var(--ash)}
.vs-score__pct.is-up{color:var(--green)}
.vs-score__pct.is-down{color:var(--crimson)}
.vs-score__sub{color:var(--ash);font-size:13px;letter-spacing:.65px;line-height:1;padding-top:2px}
.vs-score.is-leading .vs-title h2{text-shadow:0 0 12px var(--tile-accent)}
.vs-score__mid-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px 16px;overflow:hidden}
.vs-score__label{color:var(--ash);font-size:11px;letter-spacing:.55px}
.vs-score__label span{color:var(--bone)}
.vs-score__countdown{color:var(--bone);font-size:40px;font-weight:700;letter-spacing:2px;line-height:1;font-variant-numeric:tabular-nums}
.vs-score__meta{display:flex;gap:18px;font-size:12px;letter-spacing:.6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.vs-score__meta>span{display:inline-flex;gap:5px}
.vs-score__meta>span:nth-child(1){min-width:120px}
.vs-score__meta>span:nth-child(2){min-width:100px}
.vs-score__meta>span:nth-child(3){min-width:150px}
.vs-score__meta strong{color:var(--bone);font-weight:700}
.vs-score__pool{flex:0 0 auto;color:var(--ash);font-size:11px;letter-spacing:.55px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.vs-score__pool b{color:var(--bone);font-weight:400}

/* history tile */
.vs-history-panel{--trade-panel-accent:var(--ash);min-height:0}
.vs-history-panel .trade-panel__center{min-height:0}
.vs-history__content{padding:6px 12px 10px;gap:0;overflow:hidden}
.vs-history-panel .portfolio-grid{display:grid;grid-template-columns:72px 1fr 1fr 1.1fr 1.1fr 1fr;column-gap:10px;align-items:center}
.vs-history-panel .portfolio-grid>span:nth-child(n){flex:none;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-history-panel .portfolio-grid--row{font-size:13px}
.vs-history-panel .portfolio-rows{overflow:hidden}
/* teams tile: the two hash-dealt sides and their wallets */
.vs-teams-panel{--trade-panel-accent:var(--ash);min-height:0}
.vs-teams-panel .trade-panel__center{min-height:0;height:100%}
.vs-teams__content{flex-direction:row;gap:0;padding:8px 10px;min-height:0;height:100%;overflow:hidden}
.vs-team{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column}
.vs-team--b{padding-left:12px}
.vs-team--a{padding-right:12px}
.vs-teams__divider{width:1px;flex:0 0 1px;background:color-mix(in oklab,var(--ash) 45%,transparent);margin:4px 0}
.vs-team__head{display:flex;align-items:baseline;gap:8px;padding:2px 0 6px;white-space:nowrap;min-width:0}
.vs-team__tag{color:var(--ash);font-size:11px;letter-spacing:.55px}
.vs-team__name{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:18px;font-weight:700;letter-spacing:.9px;color:var(--vs-a-accent)}
.vs-team--b .vs-team__name{color:var(--vs-b-accent)}
.versus-page[data-palette="same"] .vs-team--b .vs-team__name{color:var(--vs-a-accent)}
.vs-team__count{flex:0 0 auto;margin-left:auto;color:var(--bone);font-size:12px;letter-spacing:.6px}
.vs-team__count b{color:var(--ash);font-weight:400}
.vs-team__grid{padding:3px 0;font-size:12px}
.vs-team .portfolio-grid{display:grid;grid-template-columns:24px 1.7fr 1fr 1fr;column-gap:8px;align-items:center}
.vs-team .portfolio-grid>span:nth-child(n){flex:none;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-team__rows{flex:1 1 auto;min-height:0;overflow:hidden;gap:0}
.vs-team__rows .portfolio-grid--row{padding:4px 0;font-size:12px}
.vs-team__rows .portfolio-grid--row.is-you{color:var(--green)}
.vs-win-a{color:var(--vs-a-accent)}
.vs-win-b{color:var(--vs-b-accent)}
.versus-page[data-palette="same"] .vs-win-b{color:var(--vs-a-accent)}

@media (max-width:980px){
  html,body{overflow-x:hidden}
  .versus-page{--bento-gap:8px}
  .bento{width:100%;max-width:100%;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;min-width:0}
  .bento__score,.bento__bottom,.side{grid-column:1;min-width:0}
  /* score: middle tile full width on top, A | B under it */
  .bento__score{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}
  .vs-tile--mid{grid-column:1 / -1;grid-row:1;width:100%;min-width:0}
  .bento__score .vs-tile:not(.vs-tile--mid){min-width:0}
  /* charts: full width squares */
  .side{width:100%;aspect-ratio:1/1;height:auto}
  /* bottom: history over teams */
  .bento__bottom{grid-template-columns:1fr;height:auto}
  .bento__bottom>*{min-height:200px;min-width:0}
  /* header: brand row + actions wrap below */
  .top-nav,.vs-header-right{flex-wrap:wrap;row-gap:8px;min-width:0}
  .vs-header-right{gap:10px;justify-content:flex-start}
  .vs-myside__input{width:130px}
  .vs-ca__addr{display:none}
  .brand-name{font-size:22px}
}
@media (max-width:560px){
  .bento__score{grid-template-columns:1fr}
  .vs-tile--mid{grid-column:1}
  .vs-myside{width:100%}
  .vs-myside__input{flex:1 1 auto;width:auto;min-width:0}
}

/* chart tile while the feed connects: frame + top bar visible, message in the body */
.vs-loading{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ash);font-size:12px;letter-spacing:.6px;pointer-events:none}
.vs-loading strong{color:var(--bone);font-size:16px;letter-spacing:.8px}
.vs-loading__bar{width:160px;height:4px;background:color-mix(in oklab,var(--ash) 35%,transparent);overflow:hidden}
.vs-loading__bar i{display:block;height:100%;width:40%;background:var(--chart-shell-outer-accent);animation:vs-loading-slide 1.1s ease-in-out infinite alternate}
@keyframes vs-loading-slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

/* modals (seele deposit-modal DNA: dark backdrop, one-piece accent frame, black inside) */
[hidden]{display:none!important}
.vs-modal-backdrop{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;background:#080a0bd1;animation:deposit-modal-backdrop-fade .17s ease-out}
.vs-modal{width:min(100%,640px);background:var(--vs-a-accent);border-radius:2px;padding:4px;animation:deposit-modal-enter .18s cubic-bezier(.22,1,.36,1)}
.vs-modal--result{width:min(100%,760px)}
.vs-modal__inner{background:var(--black);border-radius:2px;padding:18px 22px 20px;display:flex;flex-direction:column;gap:16px}
.vs-modal__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid color-mix(in oklab,var(--ash) 45%,transparent);padding-bottom:10px}
.vs-modal__title{color:var(--bone);font-size:20px;font-weight:700;letter-spacing:1px}
.vs-modal__title span{color:var(--vs-a-accent)}
.vs-modal__brand{color:var(--green);font-family:Ari W9500 Condensed,Ari W9500,monospace;font-size:24px;font-weight:700;letter-spacing:1.2px}
.vs-howto{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:10px;color:var(--bone);font-size:14px;letter-spacing:.5px;line-height:1.45}
.vs-howto li::marker{color:var(--vs-a-accent)}
.vs-howto b{color:var(--vs-a-accent);font-weight:700}
.vs-modal__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.vs-modal__check{display:inline-flex;align-items:center;gap:8px;color:var(--ash);font-size:12px;letter-spacing:.6px;cursor:pointer}
.vs-modal__check input{width:15px;height:15px;margin:0;-webkit-appearance:none;appearance:none;border:2px solid var(--ash);background:transparent;cursor:pointer}
.vs-modal__check input:checked{background:var(--green);border-color:var(--green)}
.vs-modal__btn{border:0;background:var(--green);color:var(--black);font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.8px;padding:10px 22px;cursor:pointer;border-radius:2px}
.vs-modal__btn:hover{filter:brightness(1.06)}
.vs-modal__label{color:var(--ash);font-size:11px;letter-spacing:.55px}
.vs-result{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding:6px 0}
.vs-result__side{display:flex;flex-direction:column;gap:6px}
.vs-result__side--b{align-items:flex-end;text-align:right}
.vs-result__tag{color:var(--ash);font-size:11px;letter-spacing:.55px}
.vs-result__name{font-size:22px;font-weight:700;letter-spacing:1.1px;color:var(--bone)}
.vs-result__side--a .vs-result__name{color:var(--vs-a-accent)}
.vs-result__side--b .vs-result__name{color:var(--vs-b-accent)}
.vs-result__pct{font-size:30px;font-weight:700;letter-spacing:1.5px;line-height:1;font-variant-numeric:tabular-nums}
.vs-result__pct.is-up{color:var(--green)}
.vs-result__pct.is-down{color:var(--crimson)}
.vs-result__mid{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 24px}
.vs-result__winlabel{color:var(--ash);font-size:11px;letter-spacing:.55px}
.vs-result__winner{font-size:36px;font-weight:700;letter-spacing:1.8px;line-height:1;color:var(--bone)}
.vs-result__winner.is-a{color:var(--vs-a-accent)}
.vs-result__winner.is-b{color:var(--vs-b-accent)}
.vs-result__pot{color:var(--bone);font-size:12px;letter-spacing:.6px;white-space:nowrap}
.vs-result__next{display:flex;align-items:baseline;gap:10px;border-top:1px solid color-mix(in oklab,var(--ash) 45%,transparent);padding-top:12px;color:var(--bone);font-size:13px;letter-spacing:.6px}
.vs-result__next b{color:var(--vs-a-accent)}
.vs-result__count{margin-left:auto;color:var(--ash);font-variant-numeric:tabular-nums}

/* header right: contract address + copy + X (dev toggles live behind ?dev=1) */
.vs-header-right{display:flex;align-items:center;gap:14px}
.vs-ca{display:flex;align-items:center;gap:10px}
.vs-ca__label{color:var(--ash);font-size:12px;letter-spacing:.6px}
.vs-ca__addr{color:var(--bone);font-size:13px;letter-spacing:.7px;font-variant-numeric:tabular-nums}
.vs-btn{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 12px;border:0;border-radius:2px;background:var(--green);color:var(--black);font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;text-decoration:none;cursor:pointer}
.vs-btn:hover{filter:brightness(1.04)}
.vs-btn:active{transform:translateY(2px) scale(.97);filter:brightness(.88)}
.vs-myside{display:inline-flex;align-items:center;gap:8px;margin:0}
.vs-myside__input{width:150px;min-height:30px;padding:0 10px;border:2px solid var(--ash);border-radius:2px;background:transparent;color:var(--bone);font-family:inherit;font-size:13px;letter-spacing:.4px;outline:0}
.vs-myside__input:focus{border-color:var(--bone)}
.vs-myside__input::placeholder{color:var(--ash)}
.vs-myside__out{font-size:13px;font-weight:700;letter-spacing:.7px;white-space:nowrap}
.vs-myside__out[data-side="a"]{color:var(--vs-a-accent,var(--neo))}
.vs-myside__out[data-side="b"]{color:var(--vs-b-accent,#4141ff)}
.vs-btn--x{background:transparent;color:var(--bone);border:2px solid var(--ash);min-width:30px;padding:0 8px}
.vs-btn--x:hover{border-color:var(--bone)}
.vs-score__status{display:flex;align-items:center;gap:8px;color:var(--ash);font-size:11px;letter-spacing:.55px;white-space:nowrap}
.vs-score__status .app-footer__status{font-size:11px}
.vs-score__status-sep{color:color-mix(in oklab,var(--ash) 50%,transparent)}

/* brand: vsvs, a step below seele's 32px */
.brand-name{font-size:26px;letter-spacing:1.3px;text-transform:lowercase}