@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root {
  --bg:       #F4EFE4;
  --surface:  #FFFFFF;
  --surface2: #EDE8DC;
  --text:     #2A1A0A;
  --muted:    #7A5C48;

  --pink:     #F03E7A;
  --blue:     #1A7A8C;
  --yellow:   #ebd357;
  --green:    #5A8A3C;
  --purple:   #7B52D4;
  --orange:   #F07D3E;

  --accent:   #F03E7A;
  --accent-h: #D42E6A;
  --success:  #5A8A3C;
  --warning:  #D4900A;
  --danger:   #D42020;

  --font:         'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Anton', -apple-system, Impact, sans-serif;
  --mono:         ui-monospace, 'Cascadia Code', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

/* ── Circles ──────────────────────────────────────────────────────────────── */

.dot {
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-xs  { width: 10px;  height: 10px  }
.dot-sm  { width: 20px;  height: 20px  }
.dot-md  { width: 48px;  height: 48px  }
.dot-lg  { width: 80px;  height: 80px  }
.dot-xl  { width: 120px; height: 120px }
.dot-pink   { background: var(--pink) }
.dot-yellow { background: var(--yellow) }
.dot-blue   { background: var(--blue) }
.dot-green  { background: var(--green) }
.dot-orange { background: var(--orange) }
.dot-purple { background: var(--purple) }
.dot-surface { background: var(--surface) }
.dot-bg     { background: var(--bg) }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font);
  font-weight: 700;
  transition: filter 0.1s, transform 0.1s;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.btn:hover:not(:disabled)  { filter: brightness(0.88) }
.btn:active:not(:disabled) { transform: scale(0.97) }
.btn:disabled { opacity: 0.35; cursor: not-allowed }

.btn-primary   { background: var(--pink);    color: #fff }
.btn-secondary { background: var(--surface2); color: var(--text) }
.btn-danger    { background: var(--danger);   color: #fff }

.btn-sm { padding: 6px 14px; font-size: 11px }

/* ── Forms ────────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="number"],
input[type="password"],
input[type="file"],
select,
textarea {
  background: var(--surface2);
  border: none;
  color: var(--text);
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font);
  width: 100%;
  outline: none;
  transition: background 0.15s, outline 0.1s;
}
input:focus, select:focus, textarea:focus {
  background: #fff;
  outline: 3px solid var(--accent);
  outline-offset: 0;
}
input[type="file"] { cursor: pointer }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232A1A0A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  appearance: none;
}

label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted) }
.field { margin-bottom: 18px }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  padding: 32px;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; overflow: hidden }
table { width: 100%; border-collapse: collapse }
th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  padding: 12px 16px;
  background: var(--yellow);
  white-space: nowrap;
}
td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--surface2);
  font-size: 14px;
  vertical-align: middle;
}
tr:last-child td { border-bottom: none }
tbody tr:hover td { background: #FAF7F1 }

/* ── Badges ───────────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.badge-ps5    { background: var(--blue);   color: #fff }
.badge-switch { background: var(--pink);   color: #fff }
.badge-steam  { background: var(--green);  color: #fff }
.badge-xbox   { background: var(--green);  color: #fff }
.badge-pc     { background: var(--purple); color: #fff }
.badge-claimed   { background: var(--green);  color: #fff }
.badge-unclaimed { background: var(--yellow); color: var(--text) }

/* ── Pool stat cards ──────────────────────────────────────────────────────── */

.pool-card {
  background: var(--surface2);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 200px;
}
.pool-card .pc-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg);
}
.pool-card .pc-avail    { font-family: var(--font-display); font-size: 36px; line-height: 1 }
.pool-card .pc-platform { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.03em }
.pool-card .pc-region   { font-size: 12px; color: var(--muted); text-transform: capitalize; font-weight: 500; margin-top: 2px }
.pool-card .pc-total    { font-size: 12px; color: var(--muted); margin-top: 4px }

.pool-card.state-ok   { background: #D8EED0 }
.pool-card.state-ok   .pc-circle { background: rgba(255,255,255,0.6) }
.pool-card.state-ok   .pc-avail  { color: var(--green) }
.pool-card.state-low  { background: #FFF3C4 }
.pool-card.state-low  .pc-circle { background: rgba(255,255,255,0.6) }
.pool-card.state-low  .pc-avail  { color: var(--warning) }
.pool-card.state-zero { background: #FFD8D8 }
.pool-card.state-zero .pc-circle { background: rgba(255,255,255,0.6) }
.pool-card.state-zero .pc-avail  { color: var(--danger) }

/* ── Code display ─────────────────────────────────────────────────────────── */

.code-display {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.12em;
  padding: 28px 32px;
  background: var(--yellow);
  text-align: center;
  word-break: break-all;
  user-select: all;
  color: var(--text);
}

/* ── Checker strip ────────────────────────────────────────────────────────── */

.checker-strip {
  height: 32px;
  background-image: repeating-conic-gradient(var(--blue) 0% 25%, var(--bg) 0% 50%);
  background-size: 32px 32px;
}

/* ── Misc ─────────────────────────────────────────────────────────────────── */

.hidden { display: none !important }
.mono { font-family: var(--mono); font-size: 12px }
.text-muted { color: var(--muted) }

.result-box {
  margin-top: 16px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
}
.result-box.success { background: #D8EED0; color: var(--success) }
.result-box.error   { background: #FFD8D8; color: var(--danger) }

/* ── Toast ────────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  z-index: 9999;
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.toast.success { background: var(--yellow); color: var(--text) }
.toast.error   { background: #FFD8D8;       color: var(--danger) }
.toast.info    { background: var(--blue);   color: #fff }