/* MAX terminal. Dark locked. Mint is the accent, coral is reserved for sell and loss. */

:root{
  --ink:      #050506;
  --ink-2:    #0b0b0e;
  --ink-3:    #101014;
  --paper:    #f1f1f4;
  /* re-tuned 2026-08-27: previous values (#7c7e86 / #4d4f56) measured
     5.03:1 / 2.49:1 against --ink, and the second failed WCAG AA outright */
  --dim:      #9a9ca4;
  --dimmer:   #787a82;
  --line:     rgba(255,255,255,.085);
  --line-lit: rgba(255,255,255,.19);
  --mint:     #97fce4;
  --coral:    #ff8b7a;

  --chat-w: min(360px, 88vw);

  --r: 8px;
  --frame: clamp(12px, 1.5vw, 20px);
  --pad:   clamp(18px, 2.6vw, 34px);

  --ease: cubic-bezier(.16,1,.3,1);
  --sans: "General Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --disp: "Big Shoulders Display", "General Sans", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--ink); color-scheme:dark; }

body{
  margin:0;
  min-height:100dvh;
  background:var(--ink);
  color:var(--paper);
  font:400 15px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
}

button,input{ font:inherit; color:inherit; }
button{ cursor:pointer; }
::selection{ background:var(--mint); color:#04140f; }
:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; border-radius:3px; }

/* ── stage furniture ─────────────────────────────────── */

.frame{ position:fixed; inset:0; pointer-events:none; z-index:6; }
.rule{ position:absolute; background:var(--line); }
.rule-t,.rule-b{ left:var(--frame); right:var(--frame); height:1px; }
.rule-l,.rule-r{ top:var(--frame); bottom:var(--frame); width:1px; }
.rule-t{ top:var(--frame); } .rule-b{ bottom:var(--frame); }
.rule-l{ left:var(--frame); } .rule-r{ right:var(--frame); }

#chrome{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; opacity:.9;
}

.glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(74vw 50vh at 74% 108%, rgba(151,252,228,.09), transparent 62%),
    radial-gradient(56vw 44vh at 10% -10%, rgba(255,255,255,.05), transparent 66%);
}

.grain{
  position:fixed; inset:0; z-index:30; pointer-events:none;
  opacity:.14; mix-blend-mode:overlay;
  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='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── nav ─────────────────────────────────────────────── */

.nav{
  position:fixed; z-index:12;
  top:calc(var(--frame) + 13px);
  left:calc(var(--frame) + 16px);
  right:calc(var(--frame) + 16px);
  height:40px;
  display:flex; align-items:center; gap:10px;
}

.mark{
  font:600 15px/1 var(--sans);
  letter-spacing:.16em;
}

.net{
  display:inline-flex; align-items:center; gap:7px;
  height:26px; padding:0 11px;
  border:1px solid var(--line);
  border-radius:6px;
  font:500 11px/1 var(--mono);
  letter-spacing:.06em;
  color:var(--dim);
}
.net i{ width:5px; height:5px; border-radius:50%; background:var(--dimmer); }
.net[data-state="on"] i{ background:var(--mint); }
.net[data-state="wrong"] i{ background:var(--coral); }
.net[data-state="wrong"]{ color:var(--coral); border-color:rgba(255,139,122,.34); }

.chat-toggle{
  margin-left:auto;
  height:34px; padding:0 15px;
  border:1px solid var(--line-lit);
  border-radius:6px;
  background:transparent;
  font:500 13px/1 var(--sans);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.chat-toggle:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.3); }
.chat-toggle[aria-expanded="true"]{ color:var(--mint); border-color:rgba(151,252,228,.4); }

.wallet{
  height:34px; padding:0 15px;
  border:1px solid var(--line-lit);
  border-radius:6px;
  background:transparent;
  font:500 13px/1 var(--sans);
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .1s var(--ease);
}
.wallet:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.3); }
.wallet:active{ transform:translateY(1px); }
.wallet[data-state="on"]{ font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--dim); }

/* ── stage grid ──────────────────────────────────────── */

.stage{
  position:relative; z-index:2;
  height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,1fr) 392px;
  gap:clamp(20px,3vw,48px);
  align-items:center;
  padding:82px calc(var(--frame) + var(--pad)) 62px;
}

/* ── market ──────────────────────────────────────────── */

.market{ display:flex; flex-direction:column; min-width:0; height:min(660px, 74dvh); }

.ticker{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 16px; }

.pair{
  margin:0; width:100%;
  font:500 11px/1 var(--mono);
  letter-spacing:.22em;
  color:var(--dim);
  text-transform:uppercase;
}
.pair span{ color:var(--dimmer); margin:0 2px; }

.price{
  /* line-height sits well under this font's natural ascent+descent, so the
     margin above has to absorb that overshoot rather than just look tidy —
     too tight here and the glyph tops crowd the "AI / HYPE" label above,
     worse on engines with taller ascent metrics than Chromium's */
  margin:clamp(14px, 2.2vh, 22px) 0 0;
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(3.2rem, 8.4vw, 7.4rem);
  line-height:.88;
  letter-spacing:.004em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(176deg,#fbfbfd 4%,#babcc3 28%,#6d6f77 52%,#dcdee3 70%,#909299 90%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

.delta{
  margin:0 0 0 auto;
  display:flex; align-items:baseline; gap:9px;
  font:500 14px/1 var(--mono);
  font-variant-numeric:tabular-nums;
}
.delta[data-dir="up"]{ color:var(--mint); }
.delta[data-dir="down"]{ color:var(--coral); }
.delta[data-dir="flat"]{ color:var(--dim); }

.chart-wrap{
  position:relative;
  flex:1; min-height:180px;
  margin-top:clamp(24px,3.4vh,34px);
  border-top:1px solid var(--line);
  padding-top:12px;
}
#chart{ width:100%; max-width:100%; height:100%; display:block; touch-action:pan-y; }

.chart-note{
  position:absolute; left:0; top:-18px;
  margin:0;
  font:500 10px/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--dimmer);
}

.ranges{ display:flex; gap:2px; margin-top:10px; }
.range{
  height:26px; padding:0 11px;
  border:0; border-radius:6px;
  background:transparent;
  color:var(--dimmer);
  font:500 11px/1 var(--mono);
  letter-spacing:.08em;
  transition:color .22s var(--ease), background .22s var(--ease);
}
.range:hover{ color:var(--paper); background:rgba(255,255,255,.05); }
.range.is-on{ color:#04140f; background:var(--mint); }

/* ── trade ───────────────────────────────────────────── */

.trade{
  display:flex; flex-direction:column; gap:14px;
  min-width:0;
  padding:var(--pad);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(9,9,12,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}

.pay{ display:flex; flex-direction:column; gap:8px; }

.pay-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pay-head label{
  font:500 11px/1 var(--sans);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim);
}
.bal{
  border:0; background:transparent; padding:0;
  font:500 11px/1 var(--mono);
  color:var(--dimmer);
  transition:color .22s var(--ease);
}
.bal:hover{ color:var(--mint); }

.pay-row{
  display:flex; align-items:center;
  border:1px solid var(--line-lit);
  border-radius:var(--r);
  background:var(--ink-2);
  transition:border-color .22s var(--ease), background .22s var(--ease);
}
.pay-row:focus-within{ border-color:var(--mint); background:var(--ink-3); }
.pay-row.is-bad{ border-color:var(--coral); }

#amount{
  flex:1; min-width:0;
  height:58px; padding:0 0 0 16px;
  border:0; background:transparent;
  font:500 24px/1 var(--mono);
  letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
}
#amount::placeholder{ color:#6c6e76; }
#amount:focus{ outline:none; }

.pay-unit{
  padding:0 16px;
  font:500 12px/1 var(--mono);
  letter-spacing:.14em;
  color:var(--dim);
}

.err{ margin:0; font-size:12px; color:var(--coral); }

/* the two big buttons */
.acts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.big{
  height:clamp(76px, 11vh, 104px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  border:1px solid var(--line-lit);
  border-radius:var(--r);
  background:transparent;
  color:var(--dim);
  transition:background .22s var(--ease), border-color .22s var(--ease),
             color .22s var(--ease), transform .1s var(--ease), opacity .22s var(--ease);
}
.big:hover:not(:disabled){ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3); color:var(--paper); }
.big:active:not(:disabled){ transform:translateY(1px); }
.big:disabled{ opacity:.55; cursor:not-allowed; }

.big-verb{
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(30px, 3.4vw, 42px);
  line-height:.9;
  letter-spacing:.012em;
}
.big-sub{
  font:500 10.5px/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
  opacity:.72;
  max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.buy.is-armed{ background:var(--mint); border-color:var(--mint); color:#04140f; }
.buy.is-armed:hover:not(:disabled){ background:#b3fdea; border-color:#b3fdea; color:#04140f; }
.sell.is-armed{ background:var(--coral); border-color:var(--coral); color:#2a0b05; }
.sell.is-armed:hover:not(:disabled){ background:#ffa294; border-color:#ffa294; color:#2a0b05; }

.quote{
  margin:0; min-height:1.5em;
  font:400 12.5px/1.45 var(--sans);
  color:var(--dim);
}
.quote b{ color:var(--paper); font-weight:500; font-family:var(--mono); font-size:12px; }

/* ── footer ──────────────────────────────────────────── */

.foot{
  position:fixed; z-index:12;
  left:calc(var(--frame) + 16px);
  right:calc(var(--frame) + 16px);
  bottom:calc(var(--frame) + 11px);
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
}
.foot > *{ pointer-events:auto; }

.stats{ margin:0; display:flex; gap:20px; }
.stat{
  font:500 10px/1 var(--sans);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dimmer);
}
.stat b{
  font:500 11px/1 var(--mono);
  letter-spacing:.02em;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
}

.x{ color:var(--dimmer); line-height:0; transition:color .22s var(--ease); }
.x:hover{ color:var(--paper); }

/* ── toast ───────────────────────────────────────────── */

.toast{
  position:fixed; z-index:40;
  left:50%; bottom:calc(var(--frame) + 54px);
  transform:translate(-50%, 8px);
  max-width:min(460px, calc(100vw - 40px));
  padding:11px 15px;
  border:1px solid var(--line-lit);
  border-radius:var(--r);
  background:#0d0d11;
  font:400 12.5px/1.4 var(--sans);
  color:var(--paper);
  opacity:0;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.is-on{ opacity:1; transform:translate(-50%, 0); }
.toast[data-kind="bad"]{ border-color:rgba(255,139,122,.42); color:var(--coral); }
.toast[data-kind="good"]{ border-color:rgba(151,252,228,.42); }
.toast a{ color:inherit; }

/* ── chat ────────────────────────────────────────────── */

.scrim{
  position:fixed; inset:0; z-index:18;
  background:rgba(0,0,0,.5);
  opacity:0; pointer-events:none;
  transition:opacity .28s var(--ease);
}
.scrim.is-on{ opacity:1; pointer-events:auto; }

.chat{
  position:fixed; z-index:19;
  top:0; right:0; bottom:0;
  width:var(--chat-w);
  display:flex; flex-direction:column;
  border-left:1px solid var(--line);
  background:rgba(9,9,12,.92);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  transform:translateX(100%);
  transition:transform .32s var(--ease);
}
.chat.is-open{ transform:translateX(0); }

.chat-head{
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
  height:calc(var(--frame) + 53px);
  padding:0 var(--pad);
  border-bottom:1px solid var(--line);
}
.chat-title{
  font:500 11px/1 var(--sans);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim);
}
.chat-close{
  border:0; background:transparent; padding:0;
  font:500 11px/1 var(--mono);
  letter-spacing:.06em;
  color:var(--dimmer);
  transition:color .22s var(--ease);
}
.chat-close:hover{ color:var(--paper); }

.chat-log{
  flex:1; min-height:0; overflow-y:auto;
  padding:16px var(--pad);
  display:flex; flex-direction:column; gap:12px;
}
.chat-msg{ margin:0; font:400 13px/1.5 var(--sans); color:var(--paper); overflow-wrap:anywhere; }
.chat-msg b{ font-weight:500; color:var(--mint); margin-right:6px; }
.chat-empty{ margin:auto 0; text-align:center; font:400 12.5px/1.5 var(--sans); color:var(--dimmer); }

.chat-foot{ flex-shrink:0; padding:var(--pad); border-top:1px solid var(--line); }

.chat-gate[hidden], .chat-form[hidden]{ display:none; }
.chat-gate{ display:flex; flex-direction:column; gap:12px; }
.chat-note{ margin:0; font:400 12.5px/1.45 var(--sans); color:var(--dim); }
.chat-connect{
  height:42px;
  border:1px solid var(--line-lit);
  border-radius:var(--r);
  background:transparent;
  font:500 13px/1 var(--sans);
  transition:background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.chat-connect:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.3); color:var(--paper); }

.chat-form{ display:flex; flex-direction:column; gap:10px; }
.chat-me{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.chat-me span{ font:500 12px/1 var(--mono); color:var(--dim); }
.chat-logout{
  border:0; background:transparent; padding:0;
  font:500 11px/1 var(--mono);
  color:var(--dimmer);
  transition:color .22s var(--ease);
}
.chat-logout:hover{ color:var(--coral); }

.chat-input-row{
  display:flex; align-items:center;
  border:1px solid var(--line-lit);
  border-radius:var(--r);
  background:var(--ink-2);
  transition:border-color .22s var(--ease), background .22s var(--ease);
}
.chat-input-row:focus-within{ border-color:var(--mint); background:var(--ink-3); }
#chat-input{
  flex:1; min-width:0;
  height:42px; padding:0 0 0 14px;
  border:0; background:transparent;
  font:400 13px/1 var(--sans);
}
#chat-input::placeholder{ color:#6c6e76; }
#chat-input:focus{ outline:none; }
.chat-send{
  height:42px; padding:0 15px;
  border:0; border-left:1px solid var(--line);
  background:transparent;
  font:500 12px/1 var(--sans);
  color:var(--dim);
  transition:color .22s var(--ease);
}
.chat-send:hover:not(:disabled){ color:var(--mint); }
.chat-send:disabled{ opacity:.5; cursor:not-allowed; }

.chat-err{ margin:0; font-size:11.5px; color:var(--coral); }

/* Below this the chart+trade layout is already tight on its own (see the
   1080px and 900px breakpoints above), so the chat stays a toggled drawer,
   same as mobile. Only once there is real spare width does it become a
   permanent column: reserving --chat-w by squeezing .stage any earlier
   crushes the chart down to a sliver. */
@media (min-width:1400px){
  .chat-toggle{ display:none; }
  .scrim{ display:none; }
  .chat{ transform:translateX(0); }
  .stage{ padding-right:calc(var(--frame) + var(--pad) + var(--chat-w) + 20px); }
  .nav{ right:calc(var(--frame) + 16px + var(--chat-w) + 20px); }
  .foot{ right:calc(var(--frame) + 16px + var(--chat-w) + 20px); }
}

/* ── responsive ──────────────────────────────────────── */

@media (max-width:1080px){
  .stage{ grid-template-columns:minmax(0,1fr) 344px; }
}

@media (max-width:900px){
  body{ overflow-y:auto; }
  .stage{
    height:auto; min-height:100dvh;
    grid-template-columns:minmax(0,1fr);
    align-content:start;
    gap:22px;
    padding:76px 20px 74px;
  }
  .market{ height:auto; }
  /* .chart-note flows statically here (see below) instead of sitting
     absolute like on desktop, so the wrap needs padding-bottom to make
     room for it — otherwise its text renders past the wrap's fixed
     height, over the range buttons underneath. Reserved whether or not
     the note is showing, so toggling it never shifts the layout. */
  .chart-wrap{ height:min(46dvh, 320px); flex:none; margin-top:16px; padding-bottom:24px; }
  .chart-note{ position:static; margin:10px 0 0; }
  #chrome{ display:none; }
  .delta{ margin-left:0; width:100%; margin-top:8px; }
  .price{ font-size:clamp(3rem,13vw,5rem); }
  .foot{ position:static; margin:0 20px 18px; }
  .toast{ bottom:20px; }
}

@media (max-width:520px){
  .nav{ left:16px; right:16px; gap:6px; }
  .chat-toggle, .wallet{ padding:0 10px; font-size:12px; }
  .acts{ gap:8px; }
  .big{ height:88px; }
  .stats{ gap:14px; }
}

@media (max-height:620px) and (min-width:901px){
  .market{ height:auto; }
  .chart-wrap{ height:34dvh; flex:none; }
  .big{ height:72px; }
}

/* ── reduced motion / transparency ───────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}
@media (prefers-reduced-transparency:reduce){
  .trade{ background:#0a0a0d; backdrop-filter:none; -webkit-backdrop-filter:none; }
}