@font-face {
  font-family: "PressStart";
  src: url("assets/PressStart2P.ttf") format("truetype");
  font-display: block;
}

:root {
  --bg: #0d1712;
  --panel: #15241b;
  --panel-2: #1c3125;
  --line: #2d4a37;
  --text: #f4f1de;
  --muted: #9fb3a5;
  --gold: #ffd75e;
  --gold-dark: #b8860b;
  --green: #7ddf64;
  --green-dark: #3f8f2f;
  --red: #ff5a5a;
  --discord: #5865f2;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(ellipse at top, #18301f 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font-family: "PressStart", monospace;
  font-size: 10px;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button { font-family: inherit; color: inherit; cursor: pointer; }
img { image-rendering: pixelated; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 8px; }
.error { color: var(--red); }

.screen { max-width: 560px; margin: 0 auto; padding: 12px 16px 24px; }

/* ---- logo ---- */
.logo { margin: 0; font-size: 22px; color: var(--green); text-shadow: 3px 3px 0 #10301a, 0 0 18px rgba(125, 223, 100, .25); letter-spacing: 1px; }
.logo span { color: var(--gold); font-size: .55em; margin: 0 6px; vertical-align: middle; }
.small-logo { font-size: 12px; text-shadow: 2px 2px 0 #10301a; white-space: nowrap; }

/* ---- login ---- */
#login { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.login-box { text-align: center; background: var(--panel); border: 3px solid var(--line); padding: 32px 22px; box-shadow: 0 8px 0 #07100b; width: 100%; }
.login-book { width: 96px; height: 96px; animation: bob 1.6s ease-in-out infinite; }
.login-box .logo { margin: 14px 0 10px; }
.login-box p { margin: 14px 0; }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* ---- buttons ---- */
.btn {
  display: inline-block; border: 0; padding: 12px 16px; font-size: 10px; color: #10200f; background: var(--green);
  box-shadow: inset 0 -4px 0 var(--green-dark), 0 4px 0 #07100b; text-decoration: none; transition: transform .05s;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--green-dark), 0 1px 0 #07100b; }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }
.btn-discord { background: var(--discord); color: #fff; box-shadow: inset 0 -4px 0 #3c45a5, 0 4px 0 #07100b; padding: 14px 18px; margin: 8px 0; }
.btn-small { padding: 8px 12px; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; font-size: 8px; padding: 6px 0; }

/* ---- top bar ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.who { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 8px; }
.who img { width: 22px; height: 22px; border-radius: 50%; image-rendering: auto; background: var(--panel-2); }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icons { display: flex; gap: 6px; flex: 1; justify-content: flex-end; }
.icon { width: 30px; height: 30px; background: var(--panel); border: 2px solid var(--line); font-size: 12px; padding: 0; display: grid; place-items: center; }
.icon img { width: 18px; height: 18px; }
.icon.off { opacity: .45; }

/* ---- ticker ---- */
.ticker { overflow: hidden; white-space: nowrap; font-size: 8px; color: var(--gold); background: #0a130e; border: 2px solid var(--line); padding: 5px 0; margin-bottom: 8px; }
.ticker span { display: inline-block; padding-left: 100%; animation: ticker 28s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }

/* ---- machine ---- */
.machine { background: linear-gradient(#24402d, #15241b); border: 3px solid #3d6247; padding: 8px; box-shadow: 0 6px 0 #07100b, inset 0 0 0 3px #10200f; }
.status { height: 30px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 9px; color: var(--gold); background: #0a130e; border: 2px solid #10200f; margin-bottom: 8px; overflow: hidden; padding: 0 6px; }
#reels { display: block; width: 100%; height: auto; aspect-ratio: 320 / 184; background: #0b1610; border: 3px solid #10200f; image-rendering: pixelated; }
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.meter { background: #0a130e; border: 2px solid #10200f; padding: 6px 8px; text-align: center; display: flex; flex-direction: column; font-size: 13px; }
.meter small { font-size: 7px; color: var(--muted); }
.meter b { color: var(--gold); font-weight: normal; }
.meter.wallet { position: relative; cursor: pointer; }
.meter.wallet i { position: absolute; right: 6px; top: 6px; font-style: normal; font-size: 7px; color: var(--green); }
.meter.wallet:hover { border-color: var(--green-dark); }

/* ---- controls ---- */
.controls { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 10px; margin-top: 14px; }
.bet { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 2px solid var(--line); padding: 8px; }
.bet-value { flex: 1; text-align: center; display: flex; flex-direction: column; }
.bet-value b { font-size: 14px; color: var(--gold); font-weight: normal; }
.bet-value small { font-size: 7px; color: var(--muted); }
.btn-spin { grid-row: span 2; font-size: 16px; padding: 0 22px; min-width: 120px; background: var(--gold); box-shadow: inset 0 -5px 0 var(--gold-dark), 0 5px 0 #07100b; }
.btn-spin.stop { background: var(--red); box-shadow: inset 0 -5px 0 #a33232, 0 5px 0 #07100b; color: #fff; }
.btn-auto { padding: 9px; font-size: 9px; background: var(--panel-2); color: var(--text); box-shadow: inset 0 -3px 0 #0f1d14, 0 3px 0 #07100b; }
.btn-auto.on { background: var(--green); color: #10200f; }

/* ---- gamble ---- */
.gamble { margin-top: 14px; display: flex; gap: 14px; align-items: center; background: var(--panel); border: 3px solid var(--gold-dark); padding: 12px; }
.gamble-card { perspective: 400px; }
.gamble-card img { width: 112px; height: 112px; display: block; transition: transform .18s ease-in; }
.gamble-card img.flip { transform: rotateY(90deg); }
.gamble-side { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.gamble-side p { margin: 0; font-size: 9px; }
.gamble-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-red { background: var(--red); color: #fff; box-shadow: inset 0 -4px 0 #a33232, 0 4px 0 #07100b; }
.btn-black { background: #2b2b33; color: #fff; box-shadow: inset 0 -4px 0 #15151a, 0 4px 0 #07100b; }
.btn-collect { background: var(--gold); box-shadow: inset 0 -4px 0 var(--gold-dark), 0 4px 0 #07100b; }

.footer-note { text-align: center; margin-top: 16px; }

/* ---- modals ---- */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.modal-box { background: var(--panel); border: 3px solid var(--line); padding: 18px; width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; box-shadow: 0 8px 0 #07100b; }
.modal-box.wide { max-width: 520px; }
.modal h2 { margin: 0 0 8px; font-size: 14px; color: var(--green); }
.modal h3 { margin: 16px 0 8px; font-size: 9px; color: var(--gold); }
.modal p { font-size: 8px; margin: 6px 0; }
.wallet-chips { background: #0a130e; border: 2px solid #10200f; padding: 8px; text-align: center; display: flex; flex-direction: column; margin-top: 10px; }
.wallet-chips small { font-size: 7px; color: var(--muted); }
.wallet-chips b { font-size: 16px; color: var(--gold); font-weight: normal; }
.row { display: flex; gap: 8px; }
.row input { flex: 1; min-width: 0; font-family: inherit; font-size: 10px; background: #0a130e; color: var(--text); border: 2px solid var(--line); padding: 8px; }
.row input:focus { outline: none; border-color: var(--green); }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.quick button { background: var(--panel-2); border: 2px solid var(--line); padding: 6px 0; font-size: 8px; }
.status-line { color: var(--gold); }
.status-line.bad { color: var(--red); }
.status-line.good { color: var(--green); }
.modal-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }

#paytable-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.pay { display: flex; align-items: center; gap: 10px; background: #0a130e; border: 2px solid #10200f; padding: 6px; }
.pay .sym { width: 40px; height: 40px; display: grid; place-items: center; font-size: 16px; flex: none; }
.pay .sym img { width: 40px; height: 40px; }
.pay .letter { color: var(--gold); text-shadow: 2px 2px 0 #06100a; }
.pay ul { list-style: none; margin: 0; padding: 0; font-size: 7px; }
.pay li b { color: var(--gold); font-weight: normal; }
.rules p { line-height: 1.8; }
.rules img { width: 16px; height: 16px; vertical-align: middle; }

/* ---- toast ---- */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: #0a130e; border: 2px solid var(--gold); color: var(--gold); padding: 10px 14px; font-size: 9px; z-index: 20; max-width: 90vw; text-align: center; }

@media (max-width: 420px) {
  .screen { padding: 8px 10px 20px; }
  .small-logo { font-size: 9px; }
  .btn-spin { min-width: 96px; font-size: 13px; padding: 0 12px; }
  .gamble-card img { width: 80px; height: 80px; }
}