:root {
  --esp: #15100c; --esp2: #2a1e15; --bronze: #b07a45; --gold: #e0b077; --gold2: #f6d9a8;
  --cream: #f4ebdf; --muted: rgba(244,235,223,.62); --ok: #7fd6a0; --warn: #ff8a6b; --bad: #ff5b45;
  --panel: rgba(42,30,21,.55); --panel-solid: #241a12; --border: rgba(224,176,119,.35);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Markazi Text", system-ui, sans-serif;
  background: radial-gradient(70% 90% at 30% 55%, #3a2a1c 0%, transparent 60%), linear-gradient(180deg, var(--esp2), var(--esp) 70%);
  color: var(--cream);
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  min-height: 100%;
}
input, textarea { user-select: text; -webkit-user-select: text; }
button { font-family: inherit; }

.hidden { display: none !important; }

a { color: var(--gold); text-decoration: none; }

/* ── big touch button ── */
.btn {
  font-family: inherit; font-size: 1.3rem; font-weight: 700; color: var(--cream);
  background: linear-gradient(180deg, rgba(224,176,119,.18), rgba(224,176,119,.06));
  border: 2px solid var(--border); border-radius: 18px; padding: 1.1rem 1.4rem;
  min-height: 64px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: .5rem; transition: transform .08s ease, background .15s ease; text-align: center;
}
.btn:active { transform: scale(.96); background: rgba(224,176,119,.3); }
.btn.primary { background: linear-gradient(180deg, var(--gold2), var(--bronze)); color: #1a1208; border-color: transparent; }
.btn.primary:active { background: linear-gradient(180deg, var(--gold), var(--bronze)); }
.btn.danger { background: linear-gradient(180deg, #ff9a7a, var(--bad)); color: #260a06; border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.small { font-size: 1rem; padding: .6rem .9rem; min-height: 44px; border-radius: 12px; }
.btn:disabled { opacity: .35; cursor: default; }
.btn-grid { display: grid; gap: .7rem; }

.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 99px; font-size: .95rem; font-weight: 700; background: var(--panel); border: 1px solid var(--border); }
.chip.ok { color: var(--ok); border-color: rgba(127,214,160,.5); }
.chip.warn { color: var(--warn); border-color: rgba(255,138,107,.5); }
.chip.bad { color: var(--bad); border-color: rgba(255,91,69,.5); }
.dot { width: .6em; height: .6em; border-radius: 50%; background: currentColor; display: inline-block; }

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 1rem 1.2rem;
}

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

.goldtext {
  background: linear-gradient(180deg, var(--gold2), var(--gold) 55%, var(--bronze));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

.logo { height: 2.4rem; object-fit: contain; }

/* ── disconnected banner ── */
#discBanner {
  position: fixed; inset: 0 0 auto 0; z-index: 999; background: var(--bad); color: #fff;
  text-align: center; font-weight: 800; font-size: 1.1rem; padding: .6rem; letter-spacing: .02em;
  display: none;
}
body.disconnected #discBanner { display: block; }
body.disconnected { animation: discPulse 2s ease-in-out infinite; }
@keyframes discPulse { 50% { filter: brightness(1.04); } }