/* Fish Trade Fun — shared UI kit.
   Single source of truth implementing DESIGN.md tokens. Use these classes on the
   standalone pages (login, register, account, top-up) so styling lives in one place. */

:root {
  /* colors */
  --c-primary: #4dff8c;
  --c-primary-soft: #b7ffd4;
  --c-bg-deep: #03070a;
  --c-bg: #050d09;
  --c-surface: #08160e;
  --c-surface-input: #04100a;
  --c-border: #1f5f3a;
  --c-border-soft: #15331f;
  --c-border-strong: #4dff8c;
  --c-text: #d7f7e3;
  --c-text-strong: #eafff2;
  --c-text-muted: #9ccfb0;
  --c-text-dim: #6f9a82;
  --c-text-inverse: #06120b;
  --c-danger: #ff9a9a;
  --c-warning: #ffd28a;
  --c-success: #14f195;
  /* radii */
  /* Square by house style — see CLAUDE.md. These stay as tokens rather than being
     deleted because older rules still reference them; zeroing here squares every
     card, input, tile, package row, modal and button in one place instead of
     leaving a dialog with three different corner treatments. Genuine circles use
     border-radius: 50% directly and are unaffected. */
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 0;
  /* spacing */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px; --sp-2xl: 32px;
  /* type + effects */
  --c-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --c-shadow-card: 0 24px 70px rgba(0, 0, 0, 0.55);
  --glow: 0 0 26px rgba(77, 255, 142, 0.26);
  --fill-soft: rgba(77, 255, 142, 0.06);
  --fill-soft-2: rgba(77, 255, 142, 0.13);
  --fill-primary-tint: rgba(77, 255, 142, 0.10);
  --scrim: rgba(2, 10, 6, 0.82);
}

* { box-sizing: border-box; }

/* ---- page shell ---- */
.ui-page {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-xl);
  background: radial-gradient(74% 56% at 50% 12%, rgba(77, 255, 142, 0.10), transparent 64%), var(--c-bg);
  color: var(--c-text); font-family: var(--c-font-mono);
}

/* ---- card ---- */
.ui-card {
  width: min(420px, 96vw); background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 26px 26px 22px; box-shadow: var(--c-shadow-card);
}
.ui-card--narrow { width: min(380px, 94vw); }
.ui-card--wide { width: min(640px, 96vw); }

.ui-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-lg); }
.ui-back { font-size: 12px; color: var(--c-text-muted); text-decoration: none; }
.ui-back:hover { color: #cfe9d6; }
.ui-brand { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-primary); }

.ui-h1 { margin: 0 0 6px; font-size: 22px; color: var(--c-text-strong); }
.ui-sub { margin: 0 0 18px; font-size: 12px; color: var(--c-text-muted); line-height: 1.5; }
.ui-hint { margin: 0 0 18px; font-size: 11px; color: var(--c-text-dim); line-height: 1.5; }

/* ---- form ---- */
.ui-label { display: block; font-size: 11px; color: var(--c-text-muted); margin: 0 0 5px; letter-spacing: 0.04em; }
.ui-input {
  width: 100%; margin-bottom: 13px; padding: 12px 13px; border-radius: var(--r-md); border: 1px solid var(--c-border);
  background: var(--c-surface-input); color: var(--c-text-strong); font-family: inherit; font-size: 13px;
}
.ui-input:focus { outline: none; border-color: var(--c-border-strong); }
.ui-input-hint { margin: -8px 0 13px; font-size: 10.5px; color: var(--c-text-dim); }
.ui-err { min-height: 16px; margin: 2px 0 10px; font-size: 11.5px; color: var(--c-danger); }

/* ---- buttons ---- */
.ui-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 10px;
  text-decoration: none; text-align: center; padding: 12px; border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--fill-soft); color: var(--c-text);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ui-btn:hover { border-color: var(--c-border-strong); background: var(--fill-soft-2); }
.ui-btn:disabled { opacity: 0.6; cursor: default; }
.ui-btn--primary { border-color: var(--c-border-strong); background: var(--c-primary); color: var(--c-text-inverse); box-shadow: var(--glow); }
.ui-btn--primary:hover { background: var(--c-primary-soft); }
.ui-btn--ghost { background: none; color: var(--c-text-muted); font-weight: 500; }
.ui-btn--ghost:hover { color: var(--c-danger); border-color: #6b2a2a; background: none; }
/* Destructive confirm. Lives here, not in a page stylesheet: ui.css loads last, so a
   .ui-btn variant defined anywhere else loses to .ui-btn on load order alone. */
.ui-btn--danger { border-color: #6b2a2a; background: rgba(255, 154, 154, 0.1); color: var(--c-danger); }
.ui-btn--danger:hover { border-color: var(--c-danger); background: rgba(255, 154, 154, 0.18); }

.ui-alt { margin-top: var(--sp-lg); font-size: 12.5px; color: var(--c-text-muted); text-align: center; }
.ui-alt a { color: var(--c-primary); font-weight: 600; }

/* actions row: side-by-side on desktop, stacked on mobile */
.ui-actions { display: flex; gap: 10px; }
.ui-actions .ui-btn { flex: 1; margin-bottom: 0; }
.ui-actions .ui-btn--primary { flex: 1.4; }

/* ---- detail rows ---- */
.ui-rows { border: 1px solid var(--c-border-soft); border-radius: var(--r-md); margin-bottom: var(--sp-md); }
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: 12px 15px; border-top: 1px solid var(--c-border-soft); }
.ui-row:first-child { border-top: none; }
.ui-k { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-dim); }
.ui-v { font-size: 13.5px; color: var(--c-text-strong); font-weight: 600; max-width: 64%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- token tiles ---- */
.ui-tokens { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); margin-bottom: 18px; }
.ui-tile { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 14px 12px 12px; text-align: center; background: var(--fill-soft); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ui-tile--primary { border-color: var(--c-border-strong); background: var(--fill-primary-tint); }
.ui-tile img { width: 26px; height: 26px; object-fit: contain; margin-bottom: 2px; }
.ui-tile-dot { width: 26px; height: 26px; border-radius: 50%; margin-bottom: 2px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--c-text-inverse); background: var(--c-primary); }
.ui-tile-code { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #cfe9d6; }
.ui-tile-val { font-size: 20px; font-weight: 700; color: var(--c-text-strong); line-height: 1.1; }
.ui-tile--primary .ui-tile-val { color: var(--c-primary); }
.ui-tile-sub { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-dim); }

/* ---- balance line (top-up) ---- */
.ui-balance { margin: 0 0 4px; font-size: 13px; color: #cfe9d6; }
.ui-balance b { color: var(--c-text-strong); }

/* ---- package picker (top-up) ---- */
.ui-packages { display: grid; gap: 10px; }
.ui-pkg { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: 15px 16px; border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--fill-soft); color: var(--c-text-strong); font-family: inherit; cursor: pointer; }
.ui-pkg:hover { background: var(--fill-soft-2); border-color: var(--c-border-strong); }
.ui-pkg-zxt { font-size: 16px; font-weight: 700; }
.ui-pkg-price { font-size: 13px; color: var(--c-primary); }
.ui-muted { opacity: 0.6; font-size: 12px; }
.ui-bad { color: var(--c-danger); font-size: 12px; }
.ui-warn { color: var(--c-warning); font-size: 12px; }

/* ---- QR view (top-up) ---- */
.ui-qr { text-align: center; }
.ui-qr-amount { font-size: 13px; color: var(--c-text-muted); margin-bottom: var(--sp-md); }
.ui-qr-img { width: 240px; max-width: 80%; height: auto; aspect-ratio: 1 / 1; background: #fff; border-radius: var(--r-md); padding: 8px; }
.ui-qr-status { margin-top: 14px; font-size: 13px; color: #cfe9d6; min-height: 18px; }
.ui-qr-back { margin-top: var(--sp-lg); background: none; border: 1px solid var(--c-border); color: var(--c-text-muted); border-radius: var(--r-pill); padding: 9px 18px; font-family: inherit; font-size: 12px; cursor: pointer; }
.ui-qr-back:hover { color: #cfe9d6; border-color: var(--c-border-strong); }

/* ---- mobile ---- */
@media (max-width: 560px) {
  .ui-page { padding: var(--sp-lg); align-items: flex-start; }
  .ui-card, .ui-card--narrow, .ui-card--wide { width: 100%; padding: 20px 18px 18px; }
  .ui-h1 { font-size: 21px; }
  .ui-tokens { grid-template-columns: repeat(2, 1fr); }
  .ui-tile-val { font-size: 18px; }
  .ui-actions { flex-direction: column; }
  .ui-actions .ui-btn, .ui-actions .ui-btn--primary { flex: none; width: 100%; }
}

/* ============================================================
   In-game surfaces (server-browser 0xT bar + alert modal).
   Same tokens as the auth pages so /FishTrade stays on-brand.
   ============================================================ */

/* section heading */
.ui-h2 { margin: 0 0 8px; font-size: 18px; color: var(--c-text-strong); }

/* compact inline button + right-push utility (for the 0xT bar) */
.ui-btn--sm { width: auto; margin-bottom: 0; padding: 5px 12px; font-size: 12px; }
.ui-push { margin-left: auto; }

/* modal overlay — JS toggles inline display:flex/none, so no display here */
.ui-modal {
  position: fixed; inset: 0; z-index: 2100; align-items: center; justify-content: center; padding: var(--sp-lg);
  background: var(--scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-family: var(--c-font-mono);
}
.ui-modal-card {
  width: min(360px, 92vw); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: 24px; color: var(--c-text); box-shadow: var(--c-shadow-card); text-align: center;
}

/* inline account / 0xT balance bar (in-game server browser) */
.ui-acctbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--c-font-mono); font-size: 13px; color: var(--c-text); }
.ui-acctbar-label { color: var(--c-primary-soft); letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; }
.ui-acctbar-val { color: var(--c-text-strong); font-size: 16px; }
.ui-acctbar-unit { color: var(--c-primary-soft); }
.ui-acctbar-who { margin-left: 8px; opacity: 0.6; font-size: 11px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the four balance chips (0xT / 0xG / 0xS / 0xB) in the bar */
/* The account bar carries TWO books. They are separated by a rule and a tag rather
   than by spacing alone, and the demo book takes the same amber every other demo
   surface uses (.scan-arena-tag-demo, .hud-primary-label.is-demo), so 0xD never reads
   like money on any screen. */
.ui-acctbar-book { display: inline-flex; align-items: center; gap: 10px; }
.ui-acctbar-book + .ui-acctbar-book { margin-left: 4px; padding-left: 14px; border-left: 1px solid rgba(120, 200, 150, 0.22); }
.ui-acctbar-book-tag { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text-dim); border: 1px solid rgba(120, 200, 150, 0.28); padding: 2px 6px; }
.ui-acctbar-book.is-demo .ui-acctbar-book-tag { color: #ffc85a; border-color: rgba(255, 200, 90, 0.45); }
.ui-acctbar-book.is-demo .ui-acctbar-tok b { color: #ffc85a; }
.ui-acctbar-book.is-demo .ui-acctbar-tok i { color: rgba(255, 200, 90, 0.7); }
/* display:inline-flex above would otherwise beat the UA's [hidden] rule, exactly as it
   did on the wallet page. */
.ui-acctbar-book[hidden] { display: none; }

.ui-acctbar-tok { display: inline-flex; align-items: center; gap: 4px; }
.ui-acctbar-tok img { width: 16px; height: 16px; object-fit: contain; }
.ui-acctbar-tok b { color: var(--c-text-strong); font-size: 14px; }
.ui-acctbar-tok i { font-style: normal; font-size: 10px; color: var(--c-text-dim); }
/* defensive: bar buttons stay compact even if a future one forgets .ui-btn--sm */
.ui-acctbar .ui-btn { width: auto; margin-bottom: 0; }


/* ============================================================
   TERMINAL SATU LAYAR PENUH
   Sebelumnya halaman ini berupa kartu 380–560px melayang di tengah layar,
   sehingga terasa sempit dan tidak menyatu dengan landing bergaya terminal.
   Sekarang seluruh viewport menjadi satu jendela terminal: bilah judul
   menempel di atas selebar layar, isinya mengalir dari kiri seperti shell.
   Di-scope ke .ui-page (hanya login/register/topup/swap/account) —
   halaman game tidak memakai kelas ini sama sekali.
   ============================================================ */
.ui-page {
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(77,255,142,.10), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(77,255,142,.06), transparent 60%),
    linear-gradient(rgba(90,255,150,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,255,150,.04) 1px, transparent 1px),
    var(--c-bg-deep, #03070a);
  background-size: auto, auto, 34px 34px, 34px 34px, auto;
  background-attachment: fixed;
  color: var(--c-text);
  font-family: var(--c-font-mono);
}
/* scanline CRT halus */
.ui-page::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity: .45;
}

/* KARTU -> jendela terminal penuh layar */
.ui-page .ui-card,
.ui-page .ui-card--narrow,
.ui-page .ui-card--wide {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

/* BILAH JUDUL: menempel di atas, selebar layar */
.ui-page .ui-top {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(90,255,150,.28);
  background: rgba(4,12,8,.92);
  backdrop-filter: blur(8px);
}
.ui-page .ui-top::before {
  content: "";
  flex: 0 0 auto;
  width: 34px; height: 10px;
  background:
    radial-gradient(circle 5px at 5px 5px, #3f7a58 98%, transparent),
    radial-gradient(circle 5px at 17px 5px, #3f7a58 98%, transparent),
    radial-gradient(circle 5px at 29px 5px, #4dff8c 98%, transparent);
}
.ui-page .ui-back { order: 2; font-size: 12px; }
.ui-page .ui-brand { order: 3; margin-left: auto; font-size: 10.5px; letter-spacing: .18em; }

/* ISI: dashboard mengisi layar, form tetap ramping (lihat blok di bawah) */
.ui-page .ui-card > .ui-top + * { margin-top: 30px; }
.ui-page .ui-card > *:last-child { margin-bottom: 40px; }

/* judul dengan prompt, subjudul bergaya keluaran shell */
.ui-page .ui-h1 {
  font-size: 20px;
  letter-spacing: .01em;
  color: var(--c-text-strong);
}
.ui-page .ui-h1::before { content: "$ "; color: var(--c-primary); font-weight: 400; }
.ui-page .ui-sub::before,
.ui-page .ui-hint::before { content: "> "; color: var(--c-text-dim); }

/* form bergaya terminal: kotak, bukan pill */
.ui-page .ui-label { text-transform: lowercase; letter-spacing: .06em; }
.ui-page .ui-label::before { content: "· "; color: var(--c-text-dim); }
.ui-page .ui-input { border-radius: 0; background: rgba(3,12,7,.8); }
.ui-page .ui-btn { border-radius: 0; letter-spacing: .04em; }
.ui-page .ui-btn--primary::before { content: "$ "; font-weight: 400; }
.ui-page .ui-alt::before { content: "> "; color: var(--c-text-dim); }

@media (max-width: 640px) {
  .ui-page .ui-card > *:not(.ui-top) {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .ui-page .ui-top { padding: 9px 14px; }
  .ui-page .ui-card > .ui-top + * { margin-top: 22px; }
  .ui-page .ui-h1 { font-size: 17px; }
  .ui-page .ui-brand { font-size: 9px; letter-spacing: .12em; }
}

/* ============================================================
   LEBAR ISI — dibedakan menurut jenis halaman
   Sebelumnya semua isi dikunci 620px sehingga di layar lebar
   halaman terlihat kosong melompong di sebelah kanan.
   · dashboard (account / topup / swap) -> MENGISI layar
   · form (login / register)            -> tetap ramping agar tidak aneh
   ============================================================ */

/* dasar: isi selebar layar dengan padding tepi */
.ui-page .ui-card > *:not(.ui-top) {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 28px;
  padding-right: 28px;
}

/* teks panjang tetap nyaman dibaca walau wadahnya penuh */
.ui-page .ui-sub,
.ui-page .ui-hint,
.ui-page .ac-hint,
.ui-page .ui-alt { max-width: 78ch; }

/* FORM (login / register): ramping, tetap di kiri seperti shell */
.ui-page .ui-card--narrow > *:not(.ui-top) {
  max-width: 460px;
}

/* DASHBOARD: kartu & grid melebar penuh */
.ui-page .ac-card > *:not(.ui-top),
.ui-page .sw-card > *:not(.ui-top) { max-width: none; }

.ui-page .ac-wallet,
.ui-page .ac-actions,
.ui-page .ui-packages {
  width: 100%;
}
/* petak dompet & aksi ikut melebar, tidak mengecil di pojok */
.ui-page .ac-wallet { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ui-page .ac-actions { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ui-page .ui-packages { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ui-page .ac-player { width: 100%; }

/* di layar sangat lebar, beri batas agar tidak melar berlebihan */
@media (min-width: 1500px) {
  .ui-page .ui-card > *:not(.ui-top) {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
  .ui-page .ui-card--narrow > *:not(.ui-top) { max-width: 460px; margin-left: 0; }
}

@media (max-width: 640px) {
  .ui-page .ui-card > *:not(.ui-top) { padding-left: 16px; padding-right: 16px; }
  .ui-page .ac-wallet { grid-template-columns: repeat(2, 1fr); }
  .ui-page .ac-actions { grid-template-columns: 1fr; }
  .ui-page .ui-packages { grid-template-columns: 1fr; }
}