/* =====================================================================
   Dasar: warna, ukuran, reset
   Variabel warna (:root), reset elemen, dan kelas bantu umum.
   ===================================================================== */

:root {
  --night: #0F3D42;
  --night2: #176A66;
  --ink: #17322F;
  --muted: #557470;
  --sky: #EDF5EE;
  --line: #CFE2D6;
  --paper: #FFFFFF;
  --sun: #E8B63A;
  --sun-d: #B8860B;
  --mint: #12936F;
  --mint-d: #0A6B52;
  --coral: #D9653B;
  --coral-d: #B84A26;
  --grape: #4B5FB8;
  --grape-d: #34469A;
  --ok: #17A673;
  --ok-bg: #DDF7EC;
  --bad: #E5484D;
  --bad-bg: #FFE4E4;
  --r: 20px;
  --r-sm: 14px;
  --f-ui: 'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-disp: 'Baloo 2','Nunito',system-ui,sans-serif;
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%230A6B52' stroke-opacity='.11' stroke-width='1.4'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='3'/%3E%3C/g%3E%3C/svg%3E");
  --pat-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.08' stroke-width='1.4'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='3'/%3E%3C/g%3E%3C/svg%3E");
  --strip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' viewBox='0 0 16 9'%3E%3Cpath d='M8 0.5L14 4.5 8 8.5 2 4.5z' fill='%23E0AE2E'/%3E%3C/svg%3E");
  --strip2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M7 1L12 5 7 9 2 5z' fill='none' stroke='%23E0AE2E' stroke-width='1.4'/%3E%3C/svg%3E");
  --star-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.0,2.0 64.1,16.1 83.9,16.1 83.9,35.9 98.0,50.0 83.9,64.1 83.9,83.9 64.1,83.9 50.0,98.0 35.9,83.9 16.1,83.9 16.1,64.1 2.0,50.0 16.1,35.9 16.1,16.1 35.9,16.1' fill='%23F7CF55' stroke='%23B8860B' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --star-e: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.0,2.0 64.1,16.1 83.9,16.1 83.9,35.9 98.0,50.0 83.9,64.1 83.9,83.9 64.1,83.9 50.0,98.0 35.9,83.9 16.1,83.9 16.1,64.1 2.0,50.0 16.1,35.9 16.1,16.1 35.9,16.1' fill='%2319A27D' stroke='%230A6B52' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --star-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.0,2.0 64.1,16.1 83.9,16.1 83.9,35.9 98.0,50.0 83.9,64.1 83.9,83.9 64.1,83.9 50.0,98.0 35.9,83.9 16.1,83.9 16.1,64.1 2.0,50.0 16.1,35.9 16.1,16.1 35.9,16.1' fill='%23E3ECE7' stroke='%23B7C8BF' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --star-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.0,2.0 64.1,16.1 83.9,16.1 83.9,35.9 98.0,50.0 83.9,64.1 83.9,83.9 64.1,83.9 50.0,98.0 35.9,83.9 16.1,83.9 16.1,64.1 2.0,50.0 16.1,35.9 16.1,16.1 35.9,16.1' fill='%23FFFFFF' stroke='%23E0AE2E' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --f-ar: 'Scheherazade New','Traditional Arabic','Geeza Pro','Al Bayan',serif;
  --ar-w: 600;
  --ar-lh: 2.5;
  --ar-ws: .22em;
  --ar-scale: 1.15;
  --ar-s2: 1.09;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  padding-bottom: calc(84px + env(safe-area-inset-bottom,0px));
  -webkit-tap-highlight-color: transparent;
}

body.in-game {
  padding-bottom: 24px;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-disp);
  margin: 0;
  line-height: 1.15;
}

.hidden {
  display: none!important;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

:focus-visible {
  outline: 3px solid var(--grape);
  outline-offset: 2px;
  border-radius: 10px;
}

.noselect,
.btn,
.opt,
.chip-w,
.gcard,
.tab {
  user-select: none;
  -webkit-user-select: none;
}