/* ==========================================================================
   Armada Teluk
   Palet teluk malam: air dalam, buih, lampu dermaga. Tiap keadaan petak punya
   GLIF sendiri (segitiga karang, titik luput, silang kena) selain warnanya —
   jadi papan tetap terbaca di layar monokrom dan oleh mata yang tidak
   membedakan merah-hijau.

   --tinta di sini #0d2438. Diperiksa terhadap SEMUA permainan lain di koleksi
   ini sebelum dipakai: tidak ada yang memakainya.
   ========================================================================== */

:root {
  --laut:        #0d2438;
  --laut-dalam:  #071624;
  --laut-garis:  #1b3f5c;
  --buih:        #eef5fa;
  --tinta:       #0d2438;
  --redup:       #93aec4;

  /* Keadaan petak. Rona DAN terang berbeda, dan tiap satu punya glif.

     GLIFNYA DIUKUR, BUKAN DITAKSIR. Glif petak tampil pada 13,12px/700 —
     terukur di Chrome — dan itu BUKAN "teks besar" (butuh >=18,66px tebal),
     jadi yang berlaku lantai 4,5:1, bukan 3:1. Versi pertama memakai tinta
     segelap warna dasarnya sendiri dan jatuh ke 2,51 / 3,96 / 2,88 / 4,36.
     Sekarang semua glif memakai --tinta-glif di atas dasar yang cukup terang:

         kena       #e0803a  6,37:1
         tenggelam  #d9635c  5,12:1
         kapal      #79c6b0  9,15:1
         karang     #8794a0  5,89:1
         luput      #3c5a71  6,59:1  (glif terang --buih)

     --tenggelam dan --karang sengaja DITERANGKAN dari #c8443c dan #5b6b78,
     karena pada dua warna itu tidak ada tinta gelap mana pun yang bisa lolos
     4,5:1 — jadi yang harus berubah dasarnya, bukan ambangnya. */
  --air:        #17384f;
  --air-terang: #21506e;
  --karang:     #8794a0;
  --luput:      #3c5a71;
  --kena:       #e0803a;
  --tenggelam:  #d9635c;
  --kapal:      #79c6b0;
  /* Satu tinta gelap untuk SEMUA glif petak, jadi cuma ada satu angka yang
     perlu dijaga dan tidak ada pasangan yang diam-diam luput diperiksa. */
  --tinta-glif: #071624;

  --lampu:      #f0c452;
  --menang:     #8ad9a8;

  --r-kartu: 12px;
  --r-kotak: 10px;
  --sentuh:  44px;

  --bayang: 0 10px 22px -8px rgba(0,0,0,.65);
  --mulus: cubic-bezier(.2,.7,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  padding-bottom: 2.5rem;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--laut-garis) 0%, transparent 62%),
    var(--laut);
  color: var(--buih);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
               "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.lewati {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 12px 16px;
  min-height: var(--sentuh);
  display: inline-flex;
  align-items: center;
  background: var(--lampu);
  color: var(--laut-dalam);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--r-kotak) 0;
}
.lewati:focus { left: 0; }

/* ------------------------------------------------------------- topbar --- */

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px clamp(12px, 4vw, 28px);
  border-bottom: 1px solid var(--laut-garis);
  background: rgba(7, 22, 36, .82);
}

.balik, .pil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--sentuh);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--laut-garis);
  background: var(--air);
  color: var(--buih);
  font: inherit;
  font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
}
.balik { margin-inline-end: auto; }
.pil-glif { font-size: 1.05em; }

.balik:hover, .pil:hover { background: var(--air-terang); }

:focus-visible {
  outline: 3px solid var(--lampu);
  outline-offset: 2px;
}

/* -------------------------------------------------------------- utama --- */

.teluk {
  width: min(680px, 100%);
  margin: 0 auto;
  padding: clamp(14px, 4vw, 26px) clamp(12px, 4vw, 22px) 0;
}

.kepala {
  margin: .2em 0 .1em;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: .95;
  letter-spacing: -.02em;
}
.kepala span { display: block; }
.kepala span:last-child { color: var(--lampu); }

.slogan {
  margin: 0 0 1.4em;
  color: var(--redup);
  font-size: 1rem;
}

.layar { margin-bottom: 2rem; }
.layar[hidden] { display: none; }

h2 { font-size: 1.4rem; margin: 0 0 .4em; }
h3 { font-size: 1.05rem; margin: 0 0 .5em; }

.petunjuk { margin: 0 0 1.2em; color: var(--redup); }

/* -------------------------------------------------------------- isian --- */

.isian { margin-bottom: 1rem; }
.isian label {
  display: block;
  margin-bottom: .35em;
  font-size: .88rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--redup);
}
.isian input {
  width: 100%;
  min-height: var(--sentuh);
  padding: 11px 13px;
  border-radius: var(--r-kotak);
  border: 1px solid var(--laut-garis);
  background: var(--laut-dalam);
  color: var(--buih);
  font: inherit;
}

.pilih-peta {
  margin: 1.4rem 0;
  padding: 0;
  border: 0;
}
.pilih-peta legend {
  padding: 0;
  margin-bottom: .6em;
  font-size: .88rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--redup);
}

.peta-grid { display: grid; gap: 8px; }

.peta-pilih { position: relative; }
.peta-pilih input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* Labelnya yang jadi sasaran sentuh, dan tingginya jauh di atas 44px. */
.peta-pilih label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: var(--sentuh);
  padding: 11px 13px;
  border-radius: var(--r-kotak);
  border: 1px solid var(--laut-garis);
  background: var(--laut-dalam);
  cursor: pointer;
}
.peta-pilih label span {
  font-size: .86rem;
  color: var(--redup);
}
/* Terpilih ditandai tepi tebal + tanda centang, bukan warna saja. */
.peta-pilih input:checked + label {
  border-color: var(--lampu);
  box-shadow: inset 0 0 0 1px var(--lampu);
}
.peta-pilih input:checked + label strong::after {
  content: " \2713";
  color: var(--lampu);
}
.peta-pilih input:focus-visible + label {
  outline: 3px solid var(--lampu);
  outline-offset: 2px;
}

.galat {
  margin: .8em 0;
  padding: 10px 12px;
  border-radius: var(--r-kotak);
  border: 1px solid var(--tenggelam);
  background: rgba(200, 68, 60, .16);
  color: #ffd9d6;
  font-size: .92rem;
}
.galat[hidden] { display: none; }

/* ------------------------------------------------------------ tombol ---- */

.utama, .kedua {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--sentuh);
  padding: 13px 18px;
  margin-bottom: 10px;
  border-radius: var(--r-kotak);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.utama {
  background: var(--lampu);
  color: var(--laut-dalam);
  box-shadow: var(--bayang);
}
.utama:hover { filter: brightness(1.06); }
.utama:disabled {
  background: var(--laut-garis);
  color: #cfe0ec;
  cursor: not-allowed;
  box-shadow: none;
}
.kedua {
  background: var(--air);
  color: var(--buih);
  border-color: var(--laut-garis);
}
.kedua:hover { background: var(--air-terang); }
.besar { font-size: 1.1rem; min-height: 56px; }

/* ------------------------------------------------------------ ringkas --- */

.ringkas {
  margin-top: 1.6rem;
  padding: 14px 16px;
  border-radius: var(--r-kartu);
  border: 1px solid var(--laut-garis);
  background: rgba(23, 56, 79, .5);
}
.ringkas ol { margin: 0 0 .8em; padding-left: 1.2em; }
.ringkas li { margin-bottom: .5em; }
.ringkas-adil {
  margin: 0;
  padding-top: .7em;
  border-top: 1px solid var(--laut-garis);
  font-size: .92rem;
  color: var(--redup);
}

/* -------------------------------------------------------------- tirai --- */
/* Layar serah terima. Sengaja polos dan penuh: tidak ada satu pun papan di
   sini, dan app.js sudah mengosongkan keduanya dari dokumen sebelum layar ini
   tampil. */

.tirai {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .2rem;
  min-height: 60svh;
  justify-content: center;
  padding: 2rem 1.2rem;
  border-radius: var(--r-kartu);
  border: 2px solid var(--lampu);
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(240, 196, 82, .12) 0%, transparent 70%),
    var(--laut-dalam);
}
/* `display` dari kelas mengalahkan atribut `hidden` yang polos, jadi tirai
   yang ditandai hidden di HTML tetap dilukis dan rahasia pemain lain bocor.
   Dulu persis ini yang kejadian di hangman. */
.tirai[hidden] { display: none; }

.tirai-glif { font-size: 3rem; margin: 0 0 .3em; }
.tirai-judul { font-size: 1.15rem; color: var(--redup); margin: 0; }
.tirai-nama {
  margin: .1em 0 .5em;
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--lampu);
}
.tirai-pesan { margin: 0 0 1em; max-width: 34ch; }
.tirai-larangan {
  margin: 0 0 1.6em;
  padding: 10px 14px;
  border-radius: var(--r-kotak);
  background: rgba(200, 68, 60, .18);
  border: 1px solid var(--tenggelam);
  font-size: .95rem;
  max-width: 34ch;
}
.tirai .utama { max-width: 22rem; }

/* ------------------------------------------------------------ giliran --- */

.giliran {
  margin: 0 0 1rem;
  padding: 11px 14px;
  border-radius: var(--r-kotak);
  border-left: 4px solid var(--lampu);
  background: rgba(23, 56, 79, .6);
  font-weight: 700;
}

/* ------------------------------------------------------------- armada --- */

.armada {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 1rem;
}

.kapal-pil {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: var(--sentuh);
  padding: 10px 12px;
  border-radius: var(--r-kotak);
  border: 1px solid var(--laut-garis);
  background: var(--laut-dalam);
  color: var(--buih);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kapal-nama { font-weight: 700; font-size: .95rem; }
.kapal-ukuran { color: var(--kapal); letter-spacing: .18em; font-size: .8rem; }
.kapal-tanda { font-size: .78rem; color: var(--redup); }
/* Terpilih: tepi lampu + tanda. Sudah ditaruh: teks berubah, bukan warna saja. */
.kapal-pil.terpilih {
  border-color: var(--lampu);
  box-shadow: inset 0 0 0 1px var(--lampu);
}
.kapal-pil.sudah .kapal-tanda { color: var(--kapal); }
.kapal-pil.sudah .kapal-tanda::before { content: "\2713 "; }

.arah-baris {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 1rem;
}
.arah-baris .kedua { margin-bottom: 0; }

/* -------------------------------------------------------------- papan --- */

.papan-bungkus { margin-bottom: 1rem; }

.papan-judul {
  margin: 0 0 .5em;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--redup);
}

.papan {
  display: grid;
  grid-template-columns: repeat(var(--kolom, 8), 1fr);
  gap: 3px;
  width: 100%;
  padding: 6px;
  border-radius: var(--r-kartu);
  border: 1px solid var(--laut-garis);
  background: var(--laut-dalam);
}

/* Petak papan besar. Lantai sentuh 44px dijaga oleh min-height — itulah
   deklarasi yang memegang angka ini — dan aspect-ratio membuatnya tetap
   persegi saat kolomnya melebar. Papan sengaja 6 kolom: di 320px, 7 kolom
   sudah jatuh ke 38px dan 8 kolom ke 33px, jadi lebar papan itulah yang
   membuat lantai ini bisa dipenuhi sama sekali. Lihat catatan di engine.js. */
.petak {
  min-height: var(--sentuh);
  min-width: var(--sentuh);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--laut-garis);
  background: var(--air);
  color: var(--buih);
  font: inherit;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}
.petak:hover:not(:disabled) { background: var(--air-terang); }
.petak:disabled { cursor: default; }

/* Tiap keadaan menyetel --dasar ke warna yang SAMA dengan latarnya. Itu yang
   membuat angka kontras di ui.test.js tetap menggambarkan halamannya setelah
   aset masuk: keping di bawah glif benar-benar dicat dengan token itu, jadi
   glifnya tidak pernah duduk di atas gambar. Lihat .glif di bawah. */
.petak.karang {
  --dasar: var(--karang);
  background: var(--karang);
  color: var(--tinta-glif);
}
.petak.luput {
  --dasar: var(--luput);
  background: var(--luput);
  color: var(--buih);
}
.petak.kena {
  --dasar: var(--kena);
  background: var(--kena);
  color: var(--tinta-glif);
  font-weight: 700;
}
.petak.tenggelam {
  --dasar: var(--tenggelam);
  background: var(--tenggelam);
  color: var(--tinta-glif);
  font-weight: 700;
}
.petak.berkapal {
  --dasar: var(--kapal);
  background: var(--kapal);
  color: var(--tinta-glif);
  font-weight: 700;
}

/* ---------------------------------------------------------------- aset -- */

/* Satu atlas, satu permintaan jaringan. --ax/--ay disetel per petak oleh
   app.js dalam satuan PETAK, bukan piksel, jadi penskalaannya di sini saja:
   atlasnya 4x4 petak, jadi background-size 400% dan posisinya dibagi 3 (n-1
   langkah untuk n petak). Kalau berkasnya hilang, aturan ini tidak
   menampilkan apa-apa dan warna latar di atas yang tetap terlihat — papan
   jadi lebih polos, bukan kosong. */
.petak.beraset {
  background-image: url("aset/teluk.png");
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: calc(var(--ax, 0) * 100% / 3) calc(var(--ay, 0) * 100% / 3);
}

/* Lambung dipotong untuk kapal MENURUN. Kapal mendatar memakai potongan yang
   sama, diputar seperempat — satu set potongan melayani dua arah. */
.petak.lambung-datar { transform: rotate(-90deg); }

/* Keping glif: buram, memakai token keadaannya sendiri. Ini yang menjaga
   janji "keadaan tidak pernah cuma warna" tetap terbaca di atas gambar. */
.glif {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  min-height: 1.5em;
  border-radius: 50%;
  background: var(--dasar, transparent);
  /* Petak tanpa glif tidak boleh menampilkan keping kosong di atas airnya. */
}
.glif:empty { display: none; }
/* Glif pada petak berkapal ikut berputar balik supaya tetap tegak. */
.petak.lambung-datar .glif { transform: rotate(90deg); }

.papan-kecil .petak { font-size: .7rem; border-radius: 3px; }

.papan-pasang {
  display: grid;
  gap: 14px;
  margin: 1.2rem 0;
}
.papan-kolom { min-width: 0; }

/* ------------------------------------------------------------- skorbar -- */

.skorbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 1rem;
}

.skor {
  padding: 10px 12px;
  border-radius: var(--r-kotak);
  border: 1px solid var(--laut-garis);
  background: var(--laut-dalam);
  text-align: center;
}
.skor-nama { display: block; font-size: .85rem; color: var(--redup); }
.skor-angka { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.skor-label { display: block; font-size: .75rem; color: var(--redup); }
/* Giliran ditandai tepi + kata "giliran", bukan warna saja. */
.skor.giliran-dia {
  border-color: var(--lampu);
  box-shadow: inset 0 0 0 1px var(--lampu);
}
.skor.giliran-dia .skor-nama::after {
  content: " \00B7 giliran";
  color: var(--lampu);
}

/* -------------------------------------------------------------- kabar --- */

.kabar {
  min-height: 1.6em;
  margin: 0 0 1rem;
  font-size: .95rem;
  color: var(--lampu);
}

.tenggelam-kotak {
  margin-bottom: 1rem;
  padding: 12px 14px;
  border-radius: var(--r-kartu);
  border: 1px solid var(--laut-garis);
  background: rgba(23, 56, 79, .45);
}
.tenggelam-judul {
  margin: 0 0 .4em;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--redup);
}
.tenggelam-daftar { margin: 0; padding-left: 1.2em; font-size: .92rem; }
.tenggelam-daftar li { margin-bottom: .2em; }
.tenggelam-kosong { list-style: none; margin-left: -1.2em; color: var(--redup); }

/* -------------------------------------------------------------- hasil --- */

.juara {
  margin: 0 0 .3em;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  font-weight: 700;
  color: var(--menang);
  line-height: 1.15;
}
.juara-skor { margin: 0 0 .4em; }
.juara-alasan { margin: 0 0 1.2em; color: var(--redup); font-size: .95rem; }

/* ------------------------------------------------------------- footer --- */

footer {
  width: min(680px, 100%);
  margin: 2rem auto 0;
  padding: 1.2rem clamp(12px, 4vw, 22px) 0;
  border-top: 1px solid var(--laut-garis);
  color: var(--redup);
  font-size: .85rem;
}
footer p { margin: 0 0 .4em; }
/* Tautan atribusi adalah sasaran sentuh sungguhan, jadi ia kena lantai 44px
   yang sama seperti tombol. Dibuat inline-flex supaya tingginya bisa dipaksa
   — sebuah <a> inline biasa cuma setinggi barisnya (terukur 18px di Chrome). */
.kredit a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sentuh);
  padding: 0 2px;
  color: var(--buih);
}

/* ------------------------------------------------------------- dialog --- */

dialog {
  width: min(560px, calc(100% - 24px));
  max-height: 86svh;
  padding: clamp(18px, 5vw, 30px);
  border: 1px solid var(--laut-garis);
  border-radius: var(--r-kartu);
  background: var(--laut);
  color: var(--buih);
}
dialog::backdrop { background: rgba(3, 12, 20, .78); }
.dialog-tutup {
  float: right;
  width: var(--sentuh);
  height: var(--sentuh);
  border-radius: 999px;
  border: 1px solid var(--laut-garis);
  background: var(--air);
  color: var(--buih);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.label-kecil {
  margin: 0 0 .3em;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--redup);
}
.aturan-list { padding-left: 1.2em; }
.aturan-list li { margin-bottom: .7em; }
.aturan-kenapa {
  margin-top: 1.2em;
  padding: 12px 14px;
  border-radius: var(--r-kotak);
  background: rgba(23, 56, 79, .55);
  border: 1px solid var(--laut-garis);
}
.aturan-kenapa h3 { margin-bottom: .35em; }
.aturan-kenapa p { margin: 0 0 .6em; font-size: .92rem; }
.aturan-kenapa p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- lebar kecil - */

@media (min-width: 440px) {
  .papan-pasang { grid-template-columns: 1fr 1fr; }
}

/* 320px: papan 6 kolom tetap muat tanpa gulir mendatar DAN tiap petaknya tetap
   >=44px. Jaraknya dirapatkan ke 2px justru untuk membeli lebar buat petaknya
   — dengan jarak 3px, 6 kolom jatuh ke 44,23px, yang lolos tapi tanpa sisa. */
@media (max-width: 360px) {
  body { font-size: 16px; }
  .papan { gap: 2px; padding: 4px; }
  .petak { font-size: .82rem; }
  .armada { grid-template-columns: 1fr 1fr; }
  .kapal-pil { padding: 9px 10px; }
}

/* ------------------------------------------------------------- gerak --- */

/* Semua gerak di permainan ini dipasang lewat KELAS dari app.js, dan app.js
   memeriksa prefers-reduced-motion SEBELUM menempelkannya (`gerakBoleh()`).
   Jadi ada dua lapis yang saling menutupi: kelasnya tidak pernah terpasang,
   DAN blok di bawah mematikan durasinya andai ada yang lolos. Lapis kedua
   itu bukan hiasan — ia yang menangkap animasi yang ditambahkan nanti oleh
   orang yang lupa lapisan pertama.

   Yang penting: tidak satu pun dari ini menahan jalannya permainan. Yang
   mati cuma hiasannya; tiap tombol tetap bisa ditekan di bingkai pertama. */

/* Tembakan meleset: riak yang menyebar sekali lalu diam. */
@keyframes memercik {
  0%   { transform: scale(.82); filter: brightness(1.5); }
  45%  { transform: scale(1.06); }
  100% { transform: scale(1); filter: brightness(1); }
}
.petak.memercik { animation: memercik .46s var(--mulus) both; }

/* Kena: petaknya tersentak sedikit sementara bingkai apinya berganti. */
@keyframes meledak {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.16); filter: brightness(1.35); }
  60%  { transform: scale(.96); }
  100% { transform: scale(1); filter: brightness(1); }
}
.petak.meledak { animation: meledak .52s var(--mulus) both; }

/* Kapal tenggelam: seluruh papan bergetar sekali. Kecil — 3px — karena ini
   layar yang dipegang di tangan, bukan monitor. */
@keyframes papanGuncang {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}
.papan.papan-guncang { animation: papanGuncang .42s var(--mulus) both; }

/* Papan turun ke tempatnya saat ronde dibuka. */
@keyframes papanTurun {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.papan.papan-turun { animation: papanTurun .62s var(--mulus) both; }

/* Kapal baru diturunkan ke air saat menyusun armada. */
@keyframes kapalTurun {
  0%   { transform: scale(.7); filter: brightness(1.6); }
  55%  { transform: scale(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}
.petak.kapal-turun { animation: kapalTurun .46s var(--mulus) both; }

/* Tirai serah terima — momen tanda permainan ini. Layarnya menutup dari
   dua sisi lebih dulu, lalu isinya muncul, jadi terbaca sebagai tirai yang
   sengaja diturunkan alih-alih layar yang mendadak kosong. */
@keyframes tiraiTutup {
  from { clip-path: inset(0 50% 0 50%); opacity: .2; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes tiraiIsi {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tiraiKunci {
  0%   { transform: scale(.6) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.tirai.tirai-masuk { animation: tiraiTutup .42s var(--mulus) both; }
.tirai.tirai-masuk .tirai-glif { animation: tiraiKunci .5s var(--mulus) .22s both; }
.tirai.tirai-masuk .tirai-nama { animation: tiraiIsi .38s var(--mulus) .34s both; }
.tirai.tirai-masuk .tirai-pesan { animation: tiraiIsi .38s var(--mulus) .42s both; }
.tirai.tirai-masuk .tirai-larangan { animation: tiraiIsi .38s var(--mulus) .5s both; }
/* Tombolnya TIDAK ikut ditunda: ia sudah dapat fokus dari app.js, dan
   tombol yang belum terlihat saat fokusnya pindah adalah cacat, bukan gaya. */

/* Layar hasil: namanya masuk, lalu kedua armada tersingkap petak demi petak. */
@keyframes juaraMasuk {
  0%   { opacity: 0; transform: scale(.86); }
  60%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
.juara-masuk { animation: juaraMasuk .9s var(--mulus) both; }

@keyframes petakSingkap {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
/* Jeda per petak dihitung dari urutannya di grid lewat sibling counting,
   supaya app.js tidak perlu menulis satu pun nilai gaya per petak. */
.hasil-masuk .papan-kecil .petak {
  animation: petakSingkap .34s var(--mulus) both;
}
.hasil-masuk .papan-kecil .petak:nth-child(6n+1) { animation-delay: .10s; }
.hasil-masuk .papan-kecil .petak:nth-child(6n+2) { animation-delay: .16s; }
.hasil-masuk .papan-kecil .petak:nth-child(6n+3) { animation-delay: .22s; }
.hasil-masuk .papan-kecil .petak:nth-child(6n+4) { animation-delay: .28s; }
.hasil-masuk .papan-kecil .petak:nth-child(6n+5) { animation-delay: .34s; }
.hasil-masuk .papan-kecil .petak:nth-child(6n)   { animation-delay: .40s; }

/* Petak yang bisa ditembak membalas sentuhan. Ini transisi, bukan animasi,
   jadi ia tidak pernah menahan apa pun. */
.petak:not(:disabled) { transition: transform .12s var(--mulus), filter .12s var(--mulus); }
.petak:not(:disabled):active { transform: scale(.9); filter: brightness(1.25); }

/* ------------------------------------------------------ gerak dikurangi - */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Blanket di atas mematikan DURASI, bukan nilai akhirnya — sebuah animasi
     `both` yang durasinya nol masih memaku elemennya pada bingkai terakhir,
     dan itu memang yang diinginkan di sini. Yang perlu ditegaskan cuma dua
     hal yang kalau tertinggal akan menyembunyikan isi: clip-path tirai dan
     transform aktif petaknya. */
  .tirai.tirai-masuk,
  .tirai.tirai-masuk .tirai-glif,
  .tirai.tirai-masuk .tirai-nama,
  .tirai.tirai-masuk .tirai-pesan,
  .tirai.tirai-masuk .tirai-larangan {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .petak:not(:disabled):active { transform: none !important; }
}