/* ========================================================================
   TOORBET — green-on-black CRT terminal theme. Mobile-first.
   ======================================================================== */

:root{
  --bg:        #02050a;
  --bg-soft:   #06120c;
  --panel:     #07140d;
  --panel-2:   #0a1b12;
  --green:     #00ff66;
  --green-dim: #14b859;
  --green-deep:#0a3d24;
  --amber:     #ffcc33;
  --red:       #ff3b54;
  --ink:       #bfffd8;
  --muted:     #5fae84;
  --line:      #103d27;
  --glow:      0 0 4px rgba(0,255,102,.55);
  --radius:    10px;
  --tap:       48px;
  --maxw:      560px;
  --font: ui-monospace, "SFMono-Regular", "Menlo", "Consolas",
          "DejaVu Sans Mono", "Liberation Mono", monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--bg); }

body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #06160e 0%, var(--bg) 60%);
  min-height:100vh;
  line-height:1.45;
  font-size:16px;
  text-shadow:var(--glow);
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

/* ---- CRT overlays ---- */
.crt{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,.16) 3px,
      rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
  animation:flicker 6s infinite steps(60);
}
.vignette{
  position:fixed; inset:0; z-index:9001; pointer-events:none;
  background:radial-gradient(130% 120% at 50% 50%,
    rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}
@keyframes flicker{
  0%,100%{ opacity:.55; }
  48%{ opacity:.5; }
  50%{ opacity:.62; }
  52%{ opacity:.5; }
}

/* ---- layout ---- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px;
  background:linear-gradient(to bottom, rgba(2,5,10,.96), rgba(2,5,10,.78));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(2px);
}
.brand{ font-weight:700; letter-spacing:.5px; font-size:14px; }
.brand .prompt{ color:var(--green); }
.brand .path{ color:var(--muted); }
.cursor{ color:var(--green); animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.topbar-right{ display:flex; align-items:center; gap:8px; }
.badge{
  font-size:11px; padding:3px 7px; border-radius:6px; letter-spacing:1px;
  border:1px solid var(--amber); color:var(--amber); text-shadow:none;
}
.badge-mock{ animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.55; } }
.balance-pill{
  font-size:13px; padding:5px 9px; border:1px solid var(--green-deep);
  border-radius:8px; background:var(--panel); white-space:nowrap;
  box-shadow:inset 0 0 8px rgba(0,255,102,.08);
}
.balance-pill .unit{ color:var(--muted); font-size:11px; margin-left:1px; }
.balance-pill .sep{ color:var(--green-deep); margin:0 4px; }
#balanceBucks{ color:var(--green); }
.balance-pill.flash{ animation:pillflash .5s ease; }
@keyframes pillflash{ 0%{ background:var(--green-deep); } 100%{ background:var(--panel); } }

#app{
  max-width:var(--maxw); margin:0 auto;
  padding:16px 14px calc(28px + env(safe-area-inset-bottom));
}

/* ---- views ---- */
.view{ display:none; animation:viewin .22s ease; }
.view.is-active{ display:block; }
@keyframes viewin{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ---- boot ---- */
.view-boot{ min-height:70vh; display:none; }
.view-boot.is-active{ display:block; }
.boot-log{
  font-size:13px; color:var(--green-dim); margin:8vh 0 0; white-space:pre-wrap;
  word-break:break-word;
}
.boot-cursor{ color:var(--green); animation:blink 1s steps(1) infinite; font-size:14px; }

/* ---- typography / banners ---- */
.ascii-banner{
  color:var(--green); font-size:12px; line-height:1.15; margin:6px 0 2px;
  overflow-x:auto;
}
.tagline{ color:var(--muted); font-size:13px; margin:0 0 16px; }
.card-title{ color:var(--green); font-size:18px; margin:4px 0 6px; letter-spacing:.5px; }
.game-sub,.greeting{ color:var(--muted); font-size:13px; margin:0 0 16px; }

/* ---- cards / forms ---- */
.card{
  background:linear-gradient(180deg, var(--panel) 0%, var(--bg-soft) 100%);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin:0 0 16px;
  box-shadow:inset 0 0 24px rgba(0,255,102,.04);
}
/* The hidden attribute must beat class display rules (e.g. .field/.btn). */
[hidden]{ display:none !important; }

.field{ display:block; margin:0 0 14px; }
.label{ display:block; font-size:12px; color:var(--green-dim); letter-spacing:1px; margin-bottom:6px; }
.label .hint{ color:var(--muted); text-transform:none; letter-spacing:0; font-weight:400; }
input{
  width:100%; min-height:var(--tap);
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; font-family:var(--font); font-size:16px;
  text-shadow:var(--glow); outline:none;
}
input:focus{ border-color:var(--green); box-shadow:0 0 0 2px rgba(0,255,102,.18); }
input::placeholder{ color:#2f6a48; }
.fineprint{ color:var(--muted); font-size:11px; margin:10px 0 0; }

/* ---- buttons ---- */
.btn{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  width:100%; min-height:var(--tap);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-size:16px; font-weight:700; letter-spacing:1px;
  border-radius:10px; border:1px solid var(--green-deep);
  background:var(--panel-2); color:var(--ink);
  padding:12px 16px; margin:6px 0;
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease;
  text-shadow:var(--glow);
}
.btn:active{ transform:translateY(1px) scale(.995); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-primary{
  background:linear-gradient(180deg,#0c3a22,#072115);
  border-color:var(--green); color:var(--green);
  box-shadow:0 0 0 1px rgba(0,255,102,.2), 0 0 18px rgba(0,255,102,.12);
}
.btn-primary:not([disabled]):active{ box-shadow:0 0 22px rgba(0,255,102,.3); }
.btn-cash{ border-color:var(--amber); color:var(--amber); background:linear-gradient(180deg,#2a2208,#16110a); }
.btn-danger{ border-color:var(--red); color:#ffd2da; background:linear-gradient(180deg,#3a0c14,#1a0709);
  box-shadow:0 0 18px rgba(255,59,84,.25); }
.btn-ghost{ background:transparent; color:var(--green-dim); border-color:var(--line); }
.btn-bet{ font-size:18px; min-height:54px; }
.btn.is-busy .btn-label{ visibility:hidden; }
.btn.is-busy::after{
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:spin .7s linear infinite;
}
.btn{ position:relative; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.back{
  background:none; border:none; color:var(--muted); font-family:var(--font);
  font-size:14px; padding:8px 4px; margin:0 0 6px -4px; cursor:pointer; min-height:40px;
}
.back:active{ color:var(--green); }

/* ---- lobby ---- */
.lobby-head{ margin-bottom:14px; }
.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tile{
  cursor:pointer; text-align:left; font-family:var(--font);
  display:flex; flex-direction:column; gap:4px;
  background:linear-gradient(160deg,var(--panel-2),var(--bg-soft));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 14px; min-height:120px; color:var(--ink);
  transition:transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}
.tile:active{ transform:translateY(1px); border-color:var(--green);
  box-shadow:0 0 22px rgba(0,255,102,.15); }
.tile-wide{ grid-column:1 / -1; min-height:96px; }
.tile-glyph{ font-size:28px; text-shadow:0 0 10px rgba(0,255,102,.5); }
.tile-name{ font-size:16px; font-weight:700; color:var(--green); letter-spacing:.5px; }
.tile-sub{ font-size:12px; color:var(--muted); }
.lobby-actions{ margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ---- result lines ---- */
.result-line{ min-height:26px; text-align:center; font-size:15px; margin:10px 0; letter-spacing:.5px; }
.result-line.win{ color:var(--green); animation:popin .3s ease; }
.result-line.lose{ color:var(--red); }
@keyframes popin{ from{ transform:scale(.85); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ---- wager controls ---- */
.wager-row{ display:flex; align-items:center; gap:10px; margin:16px 0 8px; flex-wrap:wrap; }
.wager-label{ font-size:12px; color:var(--green-dim); letter-spacing:1px; }
.stepper{ display:flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.step{
  width:var(--tap); height:var(--tap); border:none; background:var(--panel-2);
  color:var(--green); font-size:24px; font-family:var(--font); cursor:pointer;
}
.step:active{ background:var(--green-deep); }
.wager-input{
  width:84px; text-align:center; border:none; border-left:1px solid var(--line);
  border-right:1px solid var(--line); border-radius:0; min-height:var(--tap); font-size:18px;
}
.chip{
  min-height:var(--tap); padding:0 14px; border-radius:10px; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--green-deep); color:var(--green);
  font-family:var(--font); font-weight:700; letter-spacing:1px;
}
.chip:active{ background:var(--green-deep); }

/* ---- coinflip ---- */
.coin-stage{ display:flex; justify-content:center; padding:18px 0 6px; }
.coin{
  width:120px; height:120px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--green); color:var(--green);
  background:radial-gradient(circle at 35% 30%, #0c3a22, #04160d);
  box-shadow:0 0 24px rgba(0,255,102,.18), inset 0 0 18px rgba(0,255,102,.1);
  transform-style:preserve-3d;
}
.coin-face{ font-size:48px; font-weight:700; }
.coin.flipping{ animation:flip 1s cubic-bezier(.5,.05,.3,1); }
@keyframes flip{
  0%{ transform:rotateX(0); }
  100%{ transform:rotateX(1800deg); }
}
.picker{ display:flex; gap:14px; justify-content:center; margin:8px 0 4px; }
.pick{
  width:84px; height:84px; border-radius:14px; font-size:34px; font-weight:700;
  font-family:var(--font); cursor:pointer; color:var(--green-dim);
  background:var(--panel-2); border:1px solid var(--line);
}
.pick[aria-pressed="true"]{
  color:var(--green); border-color:var(--green);
  box-shadow:0 0 18px rgba(0,255,102,.25); background:linear-gradient(180deg,#0c3a22,#072115);
}

/* ---- slots ---- */
.reels{ display:flex; gap:10px; justify-content:center; padding:18px 0 4px; }
.reel{
  width:88px; height:104px; border-radius:12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--green-deep); background:linear-gradient(180deg,#04160d,#020a06);
  box-shadow:inset 0 0 18px rgba(0,255,102,.12);
}
.reel-glyph{ font-size:46px; line-height:1; }
.reel.spinning .reel-glyph{ animation:reelspin .12s linear infinite; }
@keyframes reelspin{ 0%{ transform:translateY(-12px); opacity:.5; } 100%{ transform:translateY(12px); opacity:.5; } }
.reel.win{ border-color:var(--green); box-shadow:0 0 22px rgba(0,255,102,.35); }

.paytable{ margin-top:18px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.paytable summary{ cursor:pointer; padding:12px 14px; color:var(--green-dim); font-size:14px; min-height:var(--tap);
  display:flex; align-items:center; }
.paytable[open] summary{ border-bottom:1px solid var(--line); }
.paytable-body{ padding:10px 14px; font-size:13px; }
.pt-row{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed var(--green-deep); }
.pt-row:last-child{ border-bottom:none; }
.pt-glyph{ font-size:18px; }
.pt-mult{ color:var(--amber); }
.pt-section{ color:var(--muted); margin:10px 0 4px; font-size:12px; letter-spacing:1px; }

/* ---- crash ---- */
.crash-stage{
  position:relative; height:240px; border:1px solid var(--line); border-radius:12px;
  background:
    linear-gradient(0deg, rgba(0,255,102,.05), rgba(0,0,0,0)),
    repeating-linear-gradient(to right, transparent 0, transparent 31px, rgba(0,255,102,.06) 32px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(0,255,102,.06) 32px),
    var(--bg);
  overflow:hidden; margin:8px 0 4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.crash-graph{
  position:absolute; inset:0; width:100%; height:100%; z-index:1;
}
.crash-multi{
  position:relative; font-size:54px; font-weight:700; color:var(--green);
  text-shadow:0 0 18px rgba(0,255,102,.5); letter-spacing:1px; z-index:2;
}
.crash-status{ position:relative; color:var(--muted); font-size:13px; z-index:2; margin-top:4px; min-height:18px; }
.crash-stage.running .crash-multi{ color:var(--green); }
.crash-stage.cashed{ border-color:var(--green); }
.crash-stage.cashed .crash-multi{ color:var(--green); animation:popin .3s ease; }
.crash-stage.busted{ border-color:var(--red); animation:shake .4s; }
.crash-stage.busted .crash-multi{ color:var(--red); text-shadow:0 0 18px rgba(255,59,84,.6); }
@keyframes shake{
  0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); }
}
.crash-stage.busted::after{
  content:"SEGFAULT (core dumped)"; position:absolute; z-index:3;
  bottom:14px; color:var(--red); font-size:13px; letter-spacing:1px; opacity:.9;
}

/* ---- affiliate / invite ---- */
.locked-banner{
  margin:0 0 14px; padding:10px 12px; border:1px solid var(--amber); border-radius:8px;
  background:rgba(255,176,0,.08); color:var(--amber); font-size:13px; text-align:center; line-height:1.4;
}
.claim-row{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--green-deep); }
.invite-code{ font-size:26px; letter-spacing:5px; color:var(--green); text-shadow:0 0 12px rgba(0,255,102,.4); }

/* ---- fairness ---- */
.kv{ display:flex; flex-direction:column; gap:3px; padding:8px 0; border-bottom:1px dashed var(--green-deep); }
.kv:last-child{ border-bottom:none; }
.kv .k{ font-size:11px; color:var(--green-dim); letter-spacing:1px; }
.kv .v{ font-size:13px; color:var(--ink); }
.mono-wrap{ word-break:break-all; }
.reveal{ border-color:var(--amber); }
.explainer h3{ color:var(--green); font-size:14px; margin:0 0 8px; }
.explainer p{ font-size:13px; color:var(--ink); margin:0 0 8px; }
.explainer code, code{ color:var(--amber); text-shadow:none; }
.code-block, pre.code-block{
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; font-size:12px; color:var(--green); overflow-x:auto; text-shadow:none;
}

/* ---- cashout ---- */
.cashout-amt{ font-size:18px; color:var(--amber); margin:10px 0 16px; }
.success{ border-color:var(--green); }
.ascii-ok{ color:var(--green); font-size:11px; line-height:1.1; }

/* ---- toasts ---- */
.toasts{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom)); z-index:8000;
  width:min(94vw, var(--maxw)); display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast{
  font-size:13px; padding:10px 12px; border-radius:8px;
  border:1px solid var(--line); background:rgba(5,18,11,.96);
  color:var(--ink); box-shadow:0 6px 22px rgba(0,0,0,.5);
  animation:toastin .2s ease; word-break:break-word;
}
.toast::before{ content:"› "; color:var(--green); }
.toast.err{ border-color:var(--red); color:#ffd2da; }
.toast.err::before{ content:"✗ "; color:var(--red); }
.toast.ok{ border-color:var(--green); }
.toast.ok::before{ content:"✓ "; color:var(--green); }
.toast.out{ animation:toastout .25s ease forwards; }
@keyframes toastin{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes toastout{ to{ opacity:0; transform:translateY(8px); } }

/* ---- larger screens ---- */
@media (min-width:600px){
  body{ font-size:17px; }
  .ascii-banner{ font-size:14px; }
  .crash-multi{ font-size:64px; }
  .crash-stage{ height:300px; }
}

/* Animations are intentionally enabled for all users (including those with
   the OS "Reduce Motion" setting) — this is a deliberate product choice so the
   slot spin and crash graph always run on camp phones. */