/* ==========================================================
   EchoByte Network
   Blocky, flat, game-UI styling. Hard edges and offset
   shadows on purpose - no soft rounded SaaS cards.
   No external fonts or CDNs.
   ========================================================== */

:root{
  --bg:#0c0b12;
  --bg2:#14121d;
  --panel:#191725;
  --panel2:#1f1c2e;
  --line:#332f47;
  --line2:#48425f;
  --cyan:#3fe6ff;
  --cyan-d:#16b8d8;
  --purple:#a97bff;
  --gold:#ffc93f;
  --green:#5ddc7f;
  --red:#ff6b6b;
  --text:#e6e9f4;
  --dim:#979fb0;
  --dim:#98a0bb;
  --dim2:#6d7490;
  --shadow:4px 4px 0 rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  line-height:1.6;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--cyan);text-decoration:none}
code{
  font-family:ui-monospace,Consolas,monospace;background:#0c0b12;
  border:1px solid var(--line);padding:1px 6px;font-size:.9em;color:var(--cyan);
}

/* blocky backdrop */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(120,150,255,.035) 2px,transparent 2px),
    linear-gradient(90deg,rgba(120,150,255,.035) 2px,transparent 2px);
  background-size:32px 32px;
}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px;position:relative;z-index:1}

/* ---------------- nav ---------------- */
nav{position:sticky;top:0;z-index:50;background:#100e18;border-bottom:2px solid var(--line)}
.nav-in{max-width:1060px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;letter-spacing:.06em}
.brand img{width:30px;height:30px;image-rendering:pixelated}
.brand span{color:var(--cyan)}
.brand span i{color:var(--purple);font-style:normal}
.nav-links{display:flex;gap:20px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--dim);font-size:13.5px;font-weight:600}
.nav-links a:hover{color:var(--text)}
.nav-links a.on{color:var(--cyan)}
.nav-cta{
  background:var(--cyan);color:#06171d!important;padding:7px 15px;
  border:2px solid #0c0b12;box-shadow:3px 3px 0 rgba(0,0,0,.5);font-weight:800!important;
}
.nav-cta:hover{background:#fff}

/* ---------------- type ---------------- */
.eyebrow{color:var(--cyan);letter-spacing:.28em;text-transform:uppercase;font-size:11px;font-weight:800;margin:0 0 12px}
h1{font-size:clamp(30px,5.4vw,48px);line-height:1.08;margin:0 0 14px;font-weight:800}
h2{font-size:clamp(22px,3.2vw,30px);margin:0 0 12px;font-weight:800}
h3{font-size:16.5px;margin:0 0 6px;font-weight:700}
p{color:var(--dim);margin:0 0 14px}
.lead{font-size:16px;max-width:62ch}
section{padding:56px 0;position:relative;z-index:1}
section.tight{padding:38px 0}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.divider{height:2px;background:var(--line);margin:0}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block;padding:12px 24px;font-weight:800;font-size:14.5px;cursor:pointer;
  border:2px solid #0c0b12;box-shadow:var(--shadow);transition:transform .1s,box-shadow .1s;
  font-family:inherit;
}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 rgba(0,0,0,.45)}
.btn-primary{background:var(--cyan);color:#06171d}
.btn-primary:hover{background:#7ff0ff}
.btn-ghost{background:var(--panel2);color:var(--text);border-color:var(--line2)}
.btn-ghost:hover{background:#282438}
.btn-gold{background:var(--gold);color:#241b02}
.btn-gold:hover{background:#ffd970}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:var(--shadow);transform:none}

/* ---------------- panels ---------------- */
.card{background:var(--panel);border:2px solid var(--line);box-shadow:var(--shadow);padding:22px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* ---------------- hero ---------------- */
.hero{padding:56px 0 40px;text-align:center;border-bottom:2px solid var(--line);background:var(--bg2)}
.hero .logo{width:min(140px,30vw);margin:0 auto 16px;image-rendering:pixelated}
.tagline{color:var(--dim2);letter-spacing:.18em;text-transform:uppercase;font-size:12px;margin:0 0 20px;font-weight:700}

.ipbox{
  display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  border:2px solid var(--line2);background:#0c0b12;box-shadow:var(--shadow);
  padding:12px 18px;margin:4px 0 8px;cursor:pointer;
}
.ipbox:hover{border-color:var(--cyan)}
.ipbox .ip{font-family:ui-monospace,Consolas,monospace;font-size:clamp(16px,3.4vw,21px);font-weight:800;color:var(--cyan)}
.ipbox .hint{font-size:10.5px;color:var(--dim2);letter-spacing:.14em;text-transform:uppercase}
.live{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);margin-top:4px}
.pip{width:9px;height:9px;background:var(--dim2)}
.pip.up{background:var(--green)}
.pip.down{background:var(--red)}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* ---------------- hub tiles ---------------- */
.hub{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.tile{
  display:flex;align-items:center;gap:14px;background:var(--panel);
  border:2px solid var(--line);box-shadow:var(--shadow);padding:16px 18px;
  text-decoration:none;color:inherit;transition:transform .1s,box-shadow .1s,border-color .1s;
}
.tile:hover{border-color:var(--cyan);transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(0,0,0,.45)}
.tile .tk{
  flex:0 0 8px;align-self:stretch;background:var(--line2);
}
.tile.k-cyan .tk{background:var(--cyan)}
.tile.k-purple .tk{background:var(--purple)}
.tile.k-gold .tk{background:var(--gold)}
.tile.k-green .tk{background:var(--green)}
.tile.k-blue .tk{background:#7289da}
.tile .tbody{flex:1;min-width:0}
.tile .tbody h3{margin:0 0 2px;font-size:16px;color:var(--text)}
.tile .tbody p{margin:0;font-size:13px;color:var(--dim);line-height:1.45}
.tile .tarrow{color:var(--dim2);font-family:ui-monospace,monospace;font-size:16px}
.tile:hover .tarrow{color:var(--cyan)}

/* ---------------- numbered steps ---------------- */
.feat .ico{
  width:34px;height:34px;display:grid;place-items:center;font-size:15px;font-weight:800;
  margin-bottom:12px;background:#0c0b12;border:2px solid var(--line2);color:var(--cyan);
  font-family:ui-monospace,monospace;
}
.feat h3{color:var(--text)}
.feat p{margin:0;font-size:14px}

/* ---------------- store ---------------- */
.tiers{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));align-items:stretch}
.tier{
  background:var(--panel);border:2px solid var(--line);box-shadow:var(--shadow);
  padding:0;display:flex;flex-direction:column;position:relative;
}
.tier .tbar{height:6px;background:var(--line2)}
.tier.t-byte .tbar{background:#8bd6ff}
.tier.t-kilo .tbar{background:var(--green)}
.tier.t-mega .tbar{background:var(--cyan)}
.tier.t-giga .tbar{background:var(--purple)}
.tier.t-tera .tbar{background:var(--gold)}
.tier .inner{padding:20px 18px;display:flex;flex-direction:column;flex:1}
.tier.pop{border-color:var(--cyan)}
.tier .flag{
  position:absolute;top:-2px;right:-2px;background:var(--cyan);color:#06171d;
  font-size:10px;font-weight:800;letter-spacing:.12em;padding:4px 10px;text-transform:uppercase;
}
.tier .tname{font-size:17px;font-weight:800;letter-spacing:.06em;margin-bottom:2px;font-family:ui-monospace,monospace}
.tier .tsub{font-size:11px;color:var(--dim2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.tier .price{font-size:30px;font-weight:800;font-family:ui-monospace,monospace}
.tier .price small{font-size:13px;color:var(--dim);font-weight:600}
.tier .once{font-size:11px;color:var(--dim2);margin-bottom:16px}
.tier ul{list-style:none;padding:0;margin:0 0 18px;flex:1}
.tier li{font-size:13.2px;color:var(--dim);padding:5px 0 5px 18px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;background:var(--cyan)}
.tier li b{color:var(--text);font-weight:700}
.tier .btn{width:100%;text-align:center}

.note{border:2px solid var(--gold);background:rgba(255,201,63,.06);padding:16px 18px;box-shadow:var(--shadow)}
.note b{color:var(--gold)}

/* ---------------- forms ---------------- */
.field{margin-bottom:16px}
label{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;font-weight:800}
input,select,textarea{
  width:100%;background:#0c0b12;border:2px solid var(--line);color:var(--text);
  padding:11px 12px;font-family:inherit;font-size:14.5px;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--cyan)}
textarea{min-height:140px;resize:vertical}
.hintline{font-size:12px;color:var(--dim2);margin-top:5px}
.formmsg{margin-top:14px;padding:12px 14px;font-size:13.5px;display:none;border:2px solid}
.formmsg.ok{display:block;background:rgba(93,220,127,.08);border-color:var(--green);color:var(--green)}
.formmsg.bad{display:block;background:rgba(255,107,107,.08);border-color:var(--red);color:#ff9b9b}

/* ---------------- faq ---------------- */
details{border:2px solid var(--line);background:var(--panel);margin-bottom:10px;box-shadow:var(--shadow)}
summary{padding:14px 18px;cursor:pointer;font-weight:700;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"[+]";color:var(--cyan);font-family:ui-monospace,monospace;font-size:13px}
details[open] summary::after{content:"[-]"}
details .body{padding:0 18px 16px;color:var(--dim);font-size:14px}

/* ---------------- rules ---------------- */
.rule{display:flex;gap:14px;padding:15px 0;border-bottom:2px solid var(--line)}
.rule:last-child{border-bottom:0}
.rule .n{
  flex:0 0 30px;height:30px;display:grid;place-items:center;background:#0c0b12;
  border:2px solid var(--line2);color:var(--cyan);font-weight:800;font-size:13px;font-family:ui-monospace,monospace;
}
.rule h3{margin:2px 0 3px;font-size:15.5px}
.rule p{margin:0;font-size:14px}
.warnbox{border:2px solid var(--red);background:rgba(255,107,107,.07);padding:16px 18px;margin-top:22px;box-shadow:var(--shadow)}
.warnbox b{color:#ff9b9b}

/* ---------------- footer ---------------- */
footer{border-top:2px solid var(--line);padding:28px 0;margin-top:26px;position:relative;z-index:1}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot p{margin:0;font-size:12.5px;color:var(--dim2)}
.foot .links{display:flex;gap:18px;flex-wrap:wrap}
.foot .links a{color:var(--dim);font-size:12.5px}

/* ---------------- mobile ----------------
   A lot of players arrive from Bedrock on phones, so this is a real
   audience rather than an afterthought. Below 720px the nav collapses
   to a menu button - six links plus a CTA wrapped onto three lines and
   ate a third of the screen on a sticky header. */

.nav-toggle{
  display:none;margin-left:auto;background:var(--panel2);color:var(--text);
  border:2px solid var(--line2);width:42px;height:38px;cursor:pointer;
  font-size:17px;line-height:1;padding:0;font-family:inherit;
}
.nav-toggle:hover{border-color:var(--cyan)}

@media (max-width:720px){
  .nav-toggle{display:block}
  .nav-in{gap:10px;position:relative}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:#100e18;border-bottom:2px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:4px 0;margin:0;
    box-shadow:0 8px 0 rgba(0,0,0,.35);
  }
  .nav-links.open{display:flex}
  /* 44px tall targets - fingers are not mouse pointers */
  .nav-links a{padding:13px 20px;font-size:15px;border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:0}
  .nav-cta{margin:8px 20px 10px;text-align:center;padding:12px 15px}
}

@media (max-width:640px){
  section{padding:38px 0}
  section.tight{padding:28px 0}
  .wrap{padding:0 16px}
  h1{font-size:clamp(26px,7.4vw,40px)}
  h2{font-size:clamp(20px,5.4vw,26px)}
  .lead{font-size:15px}
  /* comfortable thumb targets */
  .btn{padding:14px 22px;font-size:15px}
  .tile{padding:14px 15px;gap:12px}
  .tile .tbody h3{font-size:15.5px}
  .tile .tbody p{font-size:12.5px}
  .ipbox{width:100%;justify-content:space-between;padding:14px 16px}
  .ipbox .ip{font-size:16px;word-break:break-all}
  .hero{padding:38px 0 30px}
  .hero .logo{width:110px}
  .card{padding:18px}
  .tier .inner{padding:18px 16px}
  input,select,textarea{font-size:16px} /* 16px stops iOS zooming the page on focus */
  .foot{flex-direction:column;align-items:flex-start;gap:12px}
  .foot .links{gap:14px}
  details summary{padding:13px 15px;font-size:14px}
  details .body{padding:0 15px 14px}
  .rule{gap:11px}
  /* nothing below 12px on a phone - the store card labels were 11px
     and genuinely hard to read at arm's length */
  .tier .tsub,.tier .once{font-size:12.5px}
  .tier li{font-size:14px}
  .hintline,.foot p,.foot .links a{font-size:13px}
  .ipbox .hint{font-size:12.5px}
  .eyebrow{font-size:12px}
  label{font-size:12.5px}
  .tier .flag{font-size:11px;padding:5px 11px}
}

@media (max-width:380px){
  .nav-links a{font-size:14.5px}
  .tier .price{font-size:26px}
}

/* ============ cart ============ */
.cart-fab{position:fixed;right:16px;bottom:16px;z-index:60}
.cart-fab button span{background:#08070d;color:var(--dim2)}
.cart-fab.full button span{color:var(--cyan)}
.cart-fab button{font:inherit;font-weight:700;letter-spacing:.04em;cursor:pointer;
  background:var(--cyan);color:#08070d;border:2px solid #000;box-shadow:var(--shadow);padding:12px 18px}
.cart-fab button span{display:inline-block;min-width:20px;margin-left:6px;padding:1px 6px;
  background:#08070d;color:var(--cyan);font-size:12px}
.cart-wrap[hidden]{display:none}
.cart-scrim{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:70}
.cart{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:71;display:flex;flex-direction:column;
  background:var(--panel);border-left:2px solid #000;box-shadow:-6px 0 0 rgba(0,0,0,.45)}
.cart-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:2px solid #000;background:var(--panel2)}
.cart-head b{letter-spacing:.06em;text-transform:uppercase;font-size:14px}
.cart-x{background:none;border:0;color:var(--dim);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.cart-x:hover{color:var(--text)}
.cart-body{flex:1;overflow-y:auto;padding:10px 18px}
.cart-empty{color:var(--dim2);font-size:14px;padding:22px 0;text-align:center}
.cart-row{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.cart-row b{font-size:14px}
.cart-note{display:block;font-style:normal;font-size:11px;color:var(--dim2);margin-top:2px}
.cart-qty{display:flex;align-items:center;gap:8px;margin-top:8px}
.cart-qty button{width:26px;height:26px;font:inherit;cursor:pointer;
  background:var(--panel2);color:var(--text);border:2px solid #000}
.cart-qty button:hover{background:var(--cyan);color:#08070d}
.cart-qty>span{font-family:ui-monospace,monospace;font-size:13px;min-width:16px;text-align:center}
.cart-one{color:var(--dim2);font-size:12px}
.cart-price{margin-left:auto;font-family:ui-monospace,monospace;font-size:14px;color:var(--text)}
.cart-rm{border:0!important;background:none!important;color:var(--dim2)!important;font-size:18px;width:auto!important}
.cart-rm:hover{color:#ff6b6b!important}
.cart-foot{border-top:2px solid #000;padding:16px 18px;background:var(--panel2)}
.cart-gift{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
/* The global label{} rule forces uppercase, .1em tracking and weight 800
   because it is written for form field captions. These are sentences, so
   every one of those has to be undone explicitly or they shout and wrap. */
.cart-gift label{display:flex;align-items:center;justify-content:flex-start;gap:10px;
  font-size:13.5px;font-weight:600;letter-spacing:normal;text-transform:none;
  text-align:left;line-height:1.35;margin:0;color:var(--dim);cursor:pointer}
.cart-gift label:hover{color:var(--text)}
/* A native radio paints itself white on a dark panel, which is what made
   these read as odd floating dots. Drawn by hand instead. */
.cart-gift input[type=radio]{appearance:none;-webkit-appearance:none;
  flex:0 0 16px;width:16px;height:16px;margin:0;position:relative;
  border:2px solid #000;border-radius:50%;background:var(--bg);cursor:pointer}
.cart-gift input[type=radio]:hover{border-color:var(--cyan)}
.cart-gift input[type=radio]:checked{border-color:var(--cyan)}
.cart-gift input[type=radio]:checked::after{content:"";position:absolute;
  inset:2px;border-radius:50%;background:var(--cyan)}
.cart-gift input[type=radio]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cart-gift input[type=text]{font:inherit;font-size:14px;padding:9px 11px;margin:2px 0 2px 24px;
  background:var(--bg);color:var(--text);border:2px solid #000;width:calc(100% - 24px)}
.cart-hint{font-size:12px;color:var(--dim2);margin:4px 0 0;line-height:1.5}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;
  padding:12px 0;margin-bottom:12px;border-top:1px solid rgba(255,255,255,.08)}
.cart-total span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2)}
.cart-total b{font-family:ui-monospace,monospace;font-size:22px;color:var(--cyan)}
.cart-msg{font-size:13px;color:var(--dim);margin:10px 0 0;min-height:1em}
.cart-msg.bad{color:#ff8080}
@media(max-width:720px){
  .cart-fab{right:12px;bottom:12px}
  .cart{width:100%;border-left:0}
}

/* ============ account: codes + history ============ */
.codes{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.coderow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 13px;background:var(--bg);border:2px solid #000}
.coderow code{font-size:16px;letter-spacing:.12em;color:var(--cyan);font-weight:700}
.coderow span{font-size:13px;color:var(--dim)}
.coderow i{margin-left:auto;font-style:normal;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green)}
.coderow.spent{opacity:.5}
.coderow.spent code{color:var(--dim2)}
.coderow.spent i{color:var(--dim2)}
.histrow{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}
.histrow:last-child{border-bottom:0}
.histrow span{font-family:ui-monospace,monospace;color:var(--dim);white-space:nowrap}
@media(max-width:720px){
  .coderow i{margin-left:0;width:100%}
}

/* Sign-in / link prompt inside the cart */
.cart-auth{border:2px solid #000;background:var(--bg);padding:13px 14px;margin:10px 0 4px}
.cart-auth b{display:block;font-size:14px;margin-bottom:5px}
.cart-auth p{font-size:12.5px;color:var(--dim2);line-height:1.55;margin:0 0 11px}
.cart-auth .btn{display:block;text-align:center;text-decoration:none}
/* Discount code */
.cart-promo{display:flex;gap:8px;margin-bottom:6px}
.cart-promo input{flex:1;min-width:0;font:inherit;font-size:14px;padding:9px 11px;
  background:var(--bg);color:var(--text);border:2px solid #000;text-transform:uppercase}
.cart-promo input::placeholder{text-transform:none;color:var(--dim2)}
.cart-promo button{font:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;cursor:pointer;
  padding:9px 15px;background:var(--panel);color:var(--text);border:2px solid #000}
.cart-promo button:hover{background:var(--cyan);color:#08070d}
.cart-promo-msg{font-size:12.5px;margin:0 0 8px;min-height:1em;color:var(--dim2)}
.cart-promo-msg.good{color:var(--green)}
.cart-promo-msg.bad{color:#ff8080}
.cart-price s{color:var(--dim2);font-size:12px;margin-right:2px}
/* Mojang brand-guideline disclaimer - must stay legible, not hidden away */
.legal{font-size:11px;letter-spacing:.06em;color:var(--dim2);line-height:1.6;
  text-transform:uppercase;margin:8px 0 0;max-width:640px}
.legal-top{margin:0 auto 18px;padding:9px 12px;border:2px solid #000;background:var(--panel);
  text-align:center;color:var(--dim)}
@media(max-width:720px){ .legal{font-size:10px} }
/* Terabyte supporters on the front page */
.sup-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sup{display:flex;align-items:center;gap:9px;padding:9px 14px;
  background:var(--panel);border:2px solid #000;box-shadow:var(--shadow)}
.sup img{width:22px;height:22px;image-rendering:pixelated;border:1px solid #000}
.sup b{font-size:14px;color:var(--text)}
.sup i{font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--purple);text-transform:uppercase}
/* Account data / deletion - quiet by default, loud only at the confirm */
.data-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-quiet{background:none;border:0;padding:4px 2px;font:inherit;font-size:12.5px;
  color:var(--dim2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.btn-quiet:hover{color:#ff8080}
.danger{border:2px solid #000;border-left:5px solid #ff6b6b;background:var(--bg);
  padding:14px 15px;margin-top:14px}
.danger b{display:block;font-size:13.5px;color:#ff8080;margin-bottom:6px}
.danger p{font-size:12.5px;color:var(--dim2);line-height:1.55;margin:0 0 12px}
.danger input[type=password]{width:100%;max-width:280px;font:inherit;font-size:14px;
  padding:9px 11px;background:var(--panel);color:var(--text);border:2px solid #000}
.danger-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.btn-danger{background:#ff6b6b;color:#1a0505;border:2px solid #000;box-shadow:var(--shadow);
  font-weight:700;letter-spacing:.04em;cursor:pointer;font:inherit}
.btn-danger:hover{background:#ff8080}
/* Name Color picker */
.colorrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.colorrow input[type=color]{width:52px;height:38px;padding:0;border:2px solid #000;background:var(--bg);cursor:pointer}
.colorrow input[type=text]{width:110px;font:inherit;font-size:14px;padding:9px 11px;background:var(--bg);color:var(--text);border:2px solid #000;text-transform:uppercase}

/* ============ Terabyte welcome flow ============ */
.steps{display:flex;gap:8px;justify-content:center;margin-bottom:26px}
.step{width:44px;height:5px;background:var(--panel2);border:2px solid #000;transition:background .2s}
.step.on{background:var(--cyan)}
.slide{display:none}
.slide.on{display:block;animation:slidein .25s ease}
@keyframes slidein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.navrow{display:flex;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}
.navrow .btn{min-width:150px;text-align:center}
.chatprev{margin-top:8px;padding:12px 14px;background:var(--bg);border:2px solid #000;
  font-family:ui-monospace,monospace;font-size:14px}
.chatprev .tag{color:var(--purple);font-weight:700}
.chatprev .pipe{color:var(--dim2);font-weight:700}
.chatprev .dim{color:var(--dim)}
#wTag{width:100%;font:inherit;font-size:15px;padding:11px 13px;margin-top:6px;
  background:var(--bg);color:var(--text);border:2px solid #000}
.perks{margin:10px 0 0;padding-left:20px}
.perks li{font-size:13.5px;color:var(--dim);line-height:1.75}
.perks li b{color:var(--text)}
.codewhat{font-size:12.5px;color:var(--dim2);margin:-2px 0 10px 2px}
@media(max-width:560px){ .navrow .btn{flex:1} .step{width:32px} }
/* A perk the player's rank already includes. Left visible on purpose so
   the value of Terabyte is obvious, rather than the card disappearing. */
.btn.is-included,.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ---------- support tickets ---------- */
[hidden]{display:none!important}
.tk-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tk-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tk-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tk-tabs .btn.on{background:var(--cyan);color:#06171d;border-color:var(--cyan)}
.tk-row{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:14px 16px;
  border:2px solid var(--line);background:var(--panel);box-shadow:var(--shadow);margin-bottom:10px;
  color:var(--text);text-decoration:none}
.tk-row:hover{border-color:var(--line2);background:var(--panel2)}
.tk-main{min-width:0}
.tk-sub{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-meta{font-size:12.5px;color:var(--dim2);margin-top:3px}
.tk-empty{color:var(--dim2);text-align:center;padding:26px 10px}
.pill{display:inline-block;flex:none;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border:2px solid currentColor;white-space:nowrap}
.pill.open{color:var(--cyan)}
.pill.waiting{color:var(--gold)}
.pill.closed{color:var(--dim2)}
.pill.new{color:var(--green)}
.tk-msg{border:2px solid var(--line);background:var(--panel);padding:14px 16px;margin-bottom:12px}
.tk-msg.staff{border-color:var(--cyan-d);background:#122431}
.tk-who{font-size:12.5px;color:var(--dim2);margin-bottom:8px;display:flex;justify-content:space-between;gap:10px}
.tk-who b{color:var(--text)}
.tk-msg.staff .tk-who b{color:var(--cyan)}
.tk-body{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}