@font-face {
  font-family: 'LG';
  src: url('/fonts/LuckiestGuy.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'FR';
  src: url('/fonts/Fredoka.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --aspal: #0b0820;
  --aspal2: #18224a;
  --kartu: #1f2b5c;
  --kartu2: #283670;
  --garis: rgba(255, 255, 255, 0.14);
  --teks: #ffffff;
  --redup: #a9b4d6;
  --kuning: #ffc81f;
  --merah: #e8262b;
  --biru: #1e7bff;
  --hijau: #2fcb5a;
  --oranye: #ff8a1f;
  --ungu: #8a5cf6;
  --opsi1: #e8262b;
  --opsi2: #1e6fe8;
  --opsi3: #e59a00;
  --opsi4: #23a047;
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--aspal);
  color: var(--teks);
  font-family: 'FR', system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(30, 123, 255, 0.25), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 22px, transparent 22px 44px),
    var(--aspal);
}

button,
input,
select {
  font-family: inherit;
}

.tersembunyi {
  display: none !important;
}

/* ---------- logo ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  font-family: 'LG', sans-serif;
  font-size: 64px;
  line-height: 1;
  transform: skewX(-8deg);
  letter-spacing: 0.02em;
  user-select: none;
}
.logo .lab {
  color: #fff;
  -webkit-text-stroke: 0.09em #0a0f24;
  paint-order: stroke fill;
  text-shadow: 0 0.08em 0 #0a0f24;
}
.logo .ikon-logo {
  transform: skewX(8deg);
  font-size: 0.8em;
  margin-right: 0.15em;
}
.logo .racing {
  background: linear-gradient(#ffe9a8, #ff9a1f 50%, #e8262b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.09em #0a0f24;
  paint-order: stroke fill;
  filter: drop-shadow(0 0.08em 0 #0a0f24);
}
.logo .bendera {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.1em;
  transform: skewX(8deg) rotate(-12deg);
}

/* ---------- tombol ---------- */
.tombol {
  appearance: none;
  border: 0;
  border-radius: 16px;
  padding: 14px 26px;
  font-family: 'LG', sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--merah);
  box-shadow: 0 6px 0 #8e1018, 0 10px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
  touch-action: manipulation;
}
.tombol:hover {
  filter: brightness(1.08);
}
.tombol:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #8e1018, 0 4px 10px rgba(0, 0, 0, 0.35);
}
.tombol:disabled {
  filter: grayscale(0.8) brightness(0.7);
  cursor: not-allowed;
}
.tombol.kuning {
  background: var(--kuning);
  color: #1b1300;
  box-shadow: 0 6px 0 #a87b00, 0 10px 24px rgba(0, 0, 0, 0.35);
}
.tombol.biru {
  background: var(--biru);
  box-shadow: 0 6px 0 #0d47a8, 0 10px 24px rgba(0, 0, 0, 0.35);
}
.tombol.hijau {
  background: var(--hijau);
  box-shadow: 0 6px 0 #17803a, 0 10px 24px rgba(0, 0, 0, 0.35);
}
.tombol.abu {
  background: #3a4678;
  box-shadow: 0 6px 0 #232c55, 0 10px 24px rgba(0, 0, 0, 0.35);
}
.tombol.kecil {
  padding: 9px 16px;
  font-size: 16px;
  border-radius: 12px;
}

.kartu {
  background: linear-gradient(180deg, var(--kartu2), var(--kartu));
  border: 2px solid var(--garis);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

input.isian,
select.isian {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 3px solid #2e3b78;
  background: #0d1430;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  outline: none;
}
input.isian:focus,
select.isian:focus {
  border-color: var(--kuning);
}

.galat {
  color: #ff9a9a;
  font-weight: 600;
}

.papan-catur {
  background-image: conic-gradient(#111 25%, #fff 0 50%, #111 0 75%, #fff 0);
  background-size: 16px 16px;
}