/* ===== Font (disimpan lokal supaya jalan offline) ===== */
@font-face {
  font-family: 'Baloo 2';
  src: url('fonts/baloo-2-latin-600-normal.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'Baloo 2';
  src: url('fonts/baloo-2-latin-800-normal.woff2') format('woff2');
  font-weight: 700 900;
  font-display: swap;
}

/* ===== Dasar ===== */
:root {
  --tinta: #4A2E14;
  --tinta-lembut: #5C4630;
  --biru: #2F6FDB;
  --biru-gelap: #1E4FA6;
  --hijau: #1F7A3A;
  --hijau-gelap: #145528;
  --kuning: #FFC83D;
  --kuning-gelap: #D99A00;
  --krem: #FFF6E0;
  --krem-garis: #F0D9A8;

  --pokok-bg: #FFF1C2; --pokok-chip: #FFD866; --pokok-garis: #E5B53A;
  --lauk-bg:  #FFE0E7; --lauk-chip:  #FFB3C3; --lauk-garis:  #EE8AA1;
  --sayur-bg: #E1F4D3; --sayur-chip: #AEDF8E; --sayur-garis: #79BF57;
  --buah-bg:  #ECE3FB; --buah-chip:  #CDB8F3; --buah-garis:  #A486DD;
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: 'Baloo 2', system-ui, sans-serif;
  color: var(--tinta);
  background: #DDF0FB;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

button { font: inherit; color: inherit; }
img { -webkit-user-drag: none; }

.layar {
  position: fixed;
  inset: 0;
  display: none;
  /* Gambar ruangan + meja, ditutup lapisan putih (--tirai) supaya tidak mengganggu fokus.
     Atur --tirai: makin besar angka terakhir, makin pudar gambarnya. */
  --tirai: rgba(255, 255, 255, .55);
  background:
    linear-gradient(var(--tirai), var(--tirai)),
    url('img/background.png') center / cover no-repeat,
    #DDF0FB;
  --tepi-atas: max(var(--pad, 12px), env(safe-area-inset-top));
  --tepi-kanan: max(var(--pad, 12px), env(safe-area-inset-right));
  --tepi-bawah: max(var(--pad, 12px), env(safe-area-inset-bottom));
  --tepi-kiri: max(var(--pad, 12px), env(safe-area-inset-left));
  padding: var(--tepi-atas) var(--tepi-kanan) var(--tepi-bawah) var(--tepi-kiri);
}
.layar.aktif { display: grid; }

/* ===== Tombol umum: gaya "permen" (bulat, tepi putih, kilau, bayangan tebal) ===== */
.tombol-bulat {
  --ukuran: clamp(44px, 13vh, 72px);
  --warna: #3B82F6; --warna-terang: #7DB3FF; --warna-gelap: #1E56B8;
  position: relative;
  width: var(--ukuran);
  height: var(--ukuran);
  flex: none;
  border-radius: 50%;
  border: max(3px, calc(var(--ukuran) * .07)) solid #fff;
  padding: 0;
  background: radial-gradient(circle at 50% 28%, var(--warna-terang), var(--warna) 68%);
  box-shadow: 0 2px 5px rgba(60, 40, 10, .16);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease-out;
}
.tombol-bulat svg { width: 54%; height: 54%; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .18)); }
.tombol-bulat:active { transform: scale(.9); }

/* Kilau putih di bagian atas tombol */
.tombol-bulat::before,
.tombol-mulai::before,
.tombol-selesai::before,
.tombol-pil::before {
  content: '';
  position: absolute;
  top: 9%;
  left: 18%;
  width: 34%;
  height: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  transform: rotate(-18deg);
  pointer-events: none;
}
.tombol-mulai::before, .tombol-selesai::before, .tombol-pil::before { left: 10%; width: 22%; height: 26%; top: 12%; }

@media (hover: hover) {
  .tombol-bulat:hover { transform: scale(1.06) rotate(-6deg); }
  .tombol-selesai:hover:not(:disabled), .tombol-pil:hover { transform: scale(1.04); }
}

.tombol-suara { --warna: #FF9F1C; --warna-terang: #FFC768; --warna-gelap: #C96F00; }
.tombol-ulangi { --warna: #3B82F6; --warna-terang: #7DB3FF; --warna-gelap: #1E56B8; }
.tombol-home { --warna: #F2559A; --warna-terang: #FF9CC6; --warna-gelap: #B8296A; }

.tombol-suara .ikon-suara-off { display: none; }
.tombol-suara[aria-pressed="false"] .ikon-suara-on { display: none; }
.tombol-suara[aria-pressed="false"] .ikon-suara-off { display: block; }
.tombol-suara[aria-pressed="false"] { --warna: #8A94A6; --warna-terang: #B7BFCC; --warna-gelap: #5F687A; }

:focus-visible { outline: 4px solid #F28C28; outline-offset: 3px; }

/* ===== Menu Utama ===== */
.layar-menu { place-items: center; }

.layar-menu > .tombol-suara {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
}

/* .logo-instansi {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  height: clamp(40px, 13vh, 76px);
  max-width: 30vw;
  object-fit: contain;
} */

.menu-isi {
  display: flex;
  align-items: center;
  gap: clamp(20px, 6vw, 72px);
}

/* Piring menu memakai gaya .piring yang sama dengan layar game (lihat bagian Piring) */
.piring.piring-mini { --plate: min(46vh, 32vw); --rim: .07; }

.pm-kuadran { display: flex; padding: 12%; }
.pm-kuadran img { width: 56%; height: auto; }
.pm-pokok { background: var(--pokok-bg); align-items: flex-end; justify-content: flex-end }
.pm-lauk  { background: var(--lauk-bg);  align-items: flex-end; justify-content: flex-start }
.pm-sayur { background: var(--sayur-bg); align-items: flex-start; justify-content: flex-end }
.pm-buah  { background: var(--buah-bg);  align-items: flex-start; justify-content: flex-start }

.menu-teks { display: flex; flex-direction: column; align-items: flex-start; }
.menu-teks h1 {
  margin: 0;
  font-size: clamp(38px, 13vh, 88px);
  font-weight: 800;
  line-height: 1;
}
.menu-teks p {
  margin: .3em 0 0;
  font-size: clamp(16px, 5vh, 28px);
  font-weight: 600;
  color: var(--tinta-lembut);
}

.tombol-mulai {
  margin-top: clamp(12px, 5vh, 32px);
  height: clamp(54px, 17vh, 96px);
  padding: 0 1.1em 0 .9em;
  position: relative;
  border: max(3px, .6vh) solid #fff;
  border-radius: 999px;
  background: linear-gradient(#4CC46E, #23A04A 70%);
  box-shadow: 0 2px 5px rgba(60, 40, 10, .16);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  font-size: clamp(26px, 9vh, 44px);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: .3em;
  cursor: pointer;
  animation: denyut 1.8s ease-in-out infinite;
}
.tombol-mulai svg { width: .9em; height: .9em; }
.tombol-mulai:active { transform: scale(.94); animation: none; }

@keyframes denyut {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ===== Layar Game ===== */
.layar-game {
  --pad: clamp(8px, 2vmin, 20px);
  --bar: clamp(40px, 12vh, 72px);
  --gap: clamp(5px, 1.4vmin, 14px);
  --sela: clamp(12px, 3vw, 40px);
  --area: calc(100dvh - var(--bar) - var(--tepi-atas) - var(--tepi-bawah) - var(--pad));
  --plate: min(calc(var(--area) / 1.07), 46vw); /* sisakan ruang untuk bayangan piring */
  /* Ubin baki 4x3: diambil yang terkecil dari batas tinggi dan sisa lebar layar */
  --tile: min(
    calc((var(--area) - 4 * var(--gap) - 6px) / 3),
    calc((100vw - var(--tepi-kiri) - var(--tepi-kanan) - var(--sela) - var(--plate) - 5 * var(--gap) - 6px) / 4),
    150px);

  grid-template-columns: var(--plate) auto;
  grid-template-rows: var(--bar) minmax(0, 1fr);
  grid-template-areas:
    "bar bar"
    "piring baki";
  justify-content: space-evenly;
  align-content: center;
  column-gap: var(--sela);
  row-gap: var(--pad);
}

.bar-atas {
  grid-area: bar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 24px);
  min-width: 0;
}

.alat {
  display: flex;
  gap: clamp(6px, 1.4vw, 14px);
  flex: none;
}
.alat .tombol-bulat { --ukuran: calc(var(--bar) - 6px); }

.tombol-selesai {
  position: relative;
  flex: none;
  height: calc(var(--bar) - 4px);
  padding: 0 1.1em 0 .8em;
  border: max(3px, .6vh) solid #fff;
  border-radius: 999px;
  background: linear-gradient(#4CC46E, #23A04A 70%);
  box-shadow: 0 2px 5px rgba(60, 40, 10, .16);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  font-size: clamp(16px, 5vh, 28px);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: .3em;
  cursor: pointer;
  line-height: 1;
  transition: transform .12s ease-out, opacity .2s;
}
.tombol-selesai svg { width: 1.05em; height: 1.05em; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .18)); }
.tombol-selesai:active:not(:disabled) { transform: scale(.94); }
.tombol-selesai:disabled { opacity: .45; filter: grayscale(.5); cursor: default; }

.judul-game {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: .15em 1em;
  background: var(--krem);
  border: 3px solid var(--krem-garis);
  border-radius: 999px;
  font-size: clamp(14px, min(5vh, 2.5vw), 28px);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

/* ----- Piring ----- */
.area-piring {
  grid-area: piring;
  display: grid;
  place-items: start center; /* bayangan piring mengisi sisa ruang di bawah */
}

/* Piring bergaya kartun datar, senada dengan gambar latar dan tombol:
   warna polos, garis luar tipis, bayangan padat tanpa blur.
   Semua ukuran relatif terhadap --plate, jadi dipakai juga untuk piring kecil di menu. */
.piring {
  --rim: .055;
  --garis-piring: #B9C8D8;   /* garis luar */
  --tebal-piring: #D3DEEA;   /* sisi tebal piring di bawah */
  position: relative;
  width: var(--plate);
  height: var(--plate);
  border-radius: 50%;
  padding: calc(var(--plate) * var(--rim));
  background: #F1F6FA;       /* bibir piring */
  box-shadow:
    0 0 0 2px var(--garis-piring),
    0 calc(var(--plate) * .022) 0 2px var(--tebal-piring),
    0 calc(var(--plate) * .022) 0 4px var(--garis-piring);
}
/* Bayangan piring di meja: lingkaran padat bergeser ke bawah */
.piring::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: rgba(150, 95, 40, .16);
  transform: translate(calc(var(--plate) * .015), calc(var(--plate) * .055));
  pointer-events: none;
}
/* Kilau: garis lengkung putih di bibir kiri atas */
.piring::after {
  content: '';
  position: absolute;
  inset: calc(var(--plate) * var(--rim) * .28);
  border-radius: 50%;
  border: calc(var(--plate) * var(--rim) * .3) solid transparent;
  border-top-color: #fff;
  transform: rotate(-50deg);
  pointer-events: none;
}

.piring-dalam {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  clip-path: circle(50%);
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: calc(var(--plate) * .014);
}
/* Cekungan: garis lingkar + bayangan sabit padat di bagian atas */
.piring-dalam::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 calc(var(--plate) * .004) #DCE5EE,
    inset 0 calc(var(--plate) * .016) 0 rgba(150, 170, 195, .22);
}

.kuadran {
  position: relative;
  transition: background-color .15s;
  /* Label dan isi adalah dua baris grid terpisah, jadi makanan tidak pernah menutupi label.
     Padding menjaga isi tetap di sudut dekat pusat piring (di dalam lingkaran). */
  display: grid;
  row-gap: calc(var(--plate) * .01);
}
.tl { padding: 18% 4% 4% 22%; grid-template-rows: auto minmax(0, 1fr); }
.tr { padding: 18% 22% 4% 4%; grid-template-rows: auto minmax(0, 1fr); }
.bl { padding: 4% 4% 26% 22%; grid-template-rows: minmax(0, 1fr) auto; }
.br { padding: 4% 22% 26% 4%; grid-template-rows: minmax(0, 1fr) auto; }
.kuadran[data-zona="pokok"] { background: var(--pokok-bg); --chip: var(--pokok-chip); --garis: var(--pokok-garis); }
.kuadran[data-zona="lauk"]  { background: var(--lauk-bg);  --chip: var(--lauk-chip);  --garis: var(--lauk-garis); }
.kuadran[data-zona="sayur"] { background: var(--sayur-bg); --chip: var(--sayur-chip); --garis: var(--sayur-garis); }
.kuadran[data-zona="buah"]  { background: var(--buah-bg);  --chip: var(--buah-chip);  --garis: var(--buah-garis); }
.kuadran.target { background: var(--chip); box-shadow: inset 0 0 0 calc(var(--plate) * .012) var(--garis); }

.label-kuadran {
  position: relative;
  z-index: 2;
  padding: .12em .6em .05em;
  border-radius: .8em;
  background: var(--chip);
  box-shadow: 0 2px 0 var(--garis);
  font-size: max(10px, calc(var(--plate) * .036));
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  pointer-events: none;
}
.tl .label-kuadran, .bl .label-kuadran { justify-self: end; text-align: right; }
.tr .label-kuadran, .br .label-kuadran { justify-self: start; }
.bl .label-kuadran, .br .label-kuadran { grid-row: 2; align-self: start; }

/* Ukuran makanan di piring per jumlah makanan (diatur lewat data-tingkat dari app.js):
   1-4 = besar (2 kolom x 2 baris), 5-9 = sedang (3 x 3), 10+ = kecil (4 x 3).
   .isi-wadah adalah ruang kosong di bawah/atas label; ukuran makanan dihitung dari situ
   (container query), dan lebar .isi-kuadran dikunci tepat N kolom. */
.kuadran { --g: calc(var(--plate) * .012); --kolom: 2; --baris: 2; }
.kuadran[data-tingkat="sedang"] { --kolom: 3; --baris: 3; }
.kuadran[data-tingkat="kecil"] { --kolom: 4; --baris: 3; }

.isi-wadah {
  container-type: size;
  min-height: 0;
  display: flex;
}
.bl .isi-wadah, .br .isi-wadah { grid-row: 1; }
.tl .isi-wadah { justify-content: flex-end; align-items: flex-end; }
.tr .isi-wadah { justify-content: flex-start; align-items: flex-end; }
.bl .isi-wadah { justify-content: flex-end; align-items: flex-start; }
.br .isi-wadah { justify-content: flex-start; align-items: flex-start; }

.isi-kuadran {
  --mini: min(
    calc((100cqw - (var(--kolom) - 1) * var(--g)) / var(--kolom)),
    calc((100cqh - (var(--baris) - 1) * var(--g)) / var(--baris)));
  width: calc(var(--kolom) * var(--mini) + (var(--kolom) - 1) * var(--g) + 1px);
  display: flex;
  gap: var(--g);
}
.tl .isi-kuadran { flex-wrap: wrap-reverse; justify-content: flex-end; }
.tr .isi-kuadran { flex-wrap: wrap-reverse; justify-content: flex-start; }
.bl .isi-kuadran { flex-wrap: wrap; justify-content: flex-end; }
.br .isi-kuadran { flex-wrap: wrap; justify-content: flex-start; }

/* ----- Baki ----- */
.baki {
  grid-area: baki;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(4, var(--tile));
  grid-auto-rows: var(--tile);
  gap: var(--gap);
  padding: var(--gap);
  background: #FFF9EE;
  border: 3px solid #EAD3A8;
  border-radius: calc(var(--tile) * .3);
}

.slot { position: relative; }
.slot.kosong {
  border: 3px dashed #DCC6A0;
  border-radius: 20%;
  background: #FBF3E4;
}

/* ----- Kartu makanan ----- */
.kartu {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 3px solid #F0E1C6;
  border-radius: 20%;
  box-shadow: 0 3px 0 #E6D3B0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: none;
  cursor: grab;
}
.kartu img { width: 62%; height: 62%; object-fit: contain; pointer-events: none; }
.kartu .nama {
  font-size: calc(var(--tile) * .16);
  font-weight: 700;
  line-height: 1;
  margin-top: 3%;
  pointer-events: none;
}
.kartu.diangkat { opacity: .25; }

.kartu.mini {
  width: calc(var(--mini) - .5px);
  height: calc(var(--mini) - .5px);
  border-width: 2px;
  border-radius: 24%;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}
.kartu.mini img { width: 80%; height: 80%; }
.kartu.mini .nama { display: none; }

.kartu.benar { border-color: #2E9E4F; }
.kartu.salah { border-color: #D93025; }
.tanda {
  position: absolute;
  top: -18%;
  right: -18%;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.tanda svg { width: 64%; height: 64%; }
.benar .tanda { background: var(--hijau); }
.salah .tanda { background: #C5221F; }

.goyang { animation: goyang .5s ease-in-out 3; }
@keyframes goyang {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(12deg); }
}

.mendarat { animation: mendarat .25s ease-out; }
@keyframes mendarat {
  0% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Bayangan kartu yang sedang diseret */
.bayangan {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 10px 8px rgba(60, 40, 10, .3));
}
.bayangan .kartu { cursor: grabbing; }

/* ----- Panel hasil ----- */
.lapisan-hasil {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(30, 40, 60, .5);
  display: grid;
  place-items: center;
  padding: 12px;
}
.lapisan-hasil[hidden] { display: none; }

.kartu-hasil {
  width: min(480px, 86vw);
  max-height: 94dvh;
  overflow: auto;
  padding: clamp(14px, 5vh, 32px) clamp(18px, 4vw, 36px);
  background: #fff;
  border: 4px solid var(--krem-garis);
  border-radius: 28px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .15);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: muncul .3s ease-out;
}
@keyframes muncul {
  from { transform: scale(.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.bintang { display: flex; align-items: flex-end; gap: 6px; }
.bintang svg { width: clamp(40px, 15vh, 64px); height: auto; }
.bintang svg.tengah { width: clamp(50px, 19vh, 82px); }
.bintang svg.nyala { animation: bintang .45s ease-out both; }
.bintang svg:nth-child(2) { animation-delay: .2s; }
.bintang svg:nth-child(3) { animation-delay: .4s; }
@keyframes bintang {
  from { transform: scale(0) rotate(-60deg); }
  to { transform: scale(1) rotate(0); }
}

.kartu-hasil h3 {
  margin: .2em 0 0;
  font-size: clamp(24px, 9vh, 38px);
  font-weight: 800;
  line-height: 1.1;
}
.kartu-hasil p {
  margin: .3em 0 0;
  font-size: clamp(14px, 4.4vh, 18px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta-lembut);
}
.kartu-hasil p:empty { display: none; }

.tombol-hasil { display: flex; gap: 12px; margin-top: clamp(10px, 4vh, 22px); }
.tombol-pil {
  position: relative;
  min-width: clamp(120px, 20vw, 180px);
  height: clamp(48px, 14vh, 64px);
  padding: 0 1em;
  border: 3px solid #fff;
  border-radius: 999px;
  font-size: clamp(18px, 5.6vh, 22px);
  font-weight: 800;
  cursor: pointer;
}
.tombol-pil { transition: transform .12s ease-out; }
.tombol-pil.kuning { background: linear-gradient(#FFDB70, var(--kuning) 70%); box-shadow: 0 2px 5px rgba(60, 40, 10, .16); color: var(--tinta); }
.tombol-pil.hijau { background: linear-gradient(#4CC46E, #23A04A 70%); box-shadow: 0 2px 5px rgba(60, 40, 10, .16); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.tombol-pil:active { transform: scale(.94); }
.tombol-pil[hidden] { display: none; }

/* ----- Konfeti ----- */
.konfeti { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
.konfeti i {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  animation: jatuh linear forwards;
}
@keyframes jatuh {
  to { transform: translate(var(--geser), 110vh) rotate(var(--putar)); }
}

/* ----- Ajakan memutar HP ----- */
.putar-hp {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #DDF0FB;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.putar-hp svg { width: 96px; height: 96px; animation: putar 2s ease-in-out infinite; }
.putar-hp p { margin: 0; font-size: 28px; font-weight: 800; }
@keyframes putar {
  0%, 30% { transform: rotate(0); }
  60%, 100% { transform: rotate(-90deg); }
}
@media (orientation: portrait) {
  .putar-hp { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}