/* STAKHON — dark app shell, PRC red & gold */
:root {
  --bg: #151312;
  --panel: #1d1917;
  --raised: #262120;
  --hover: #2e2826;
  --border: #332b27;
  --text: #ece5da;
  --dim: #a2988c;
  --red: #de2910;       /* PRC flag red */
  --red-hi: #f04329;
  --red-deep: #8f1a0a;
  --gold: #ffde00;      /* PRC flag gold — stars & small accents */
  --gold-soft: #d4af37; /* muted gold — text, borders */
  --font-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--gold-soft); }
code, pre, .mono { font-family: var(--font-mono); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--text);
  padding: 0.55em 1.1em;
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:hover { background: var(--hover); border-color: var(--dim); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary {
  background: linear-gradient(180deg, var(--red-hi), var(--red));
  border-color: var(--red);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #ff5238, var(--red-hi));
  border-color: var(--red-hi);
  box-shadow: 0 0 0 1px rgba(255, 222, 0, 0.25);
}

input[type='text'], input[type='password'], input[type='number'], textarea, select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.55em 0.75em;
  border-radius: 6px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(222, 41, 16, 0.22);
}
::placeholder { color: var(--dim); opacity: 0.75; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--panel); }
::-webkit-scrollbar-thumb { background: #3f362f; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

.star { color: var(--red); }
.star-gold { color: var(--gold); }