/* Kebun Angka — tanah, daun, dan matahari sore.
   Sekeluarga dengan Lelang Yuk dan Adu Angka (garis tebal, bayangan keras,
   tanpa font atau aset dari internet) tetapi paletnya sendiri: kertas benih
   hangat, bedeng tanah cokelat, hijau daun. Yang boleh mencolok hanya satu:
   deret ubin yang tumbuh dari benih ke bunga emas. Sisanya sengaja tenang. */
:root{
  --page:#f4efe0;
  --page-deep:#e7dfc9;
  --ink:#2e2a1c;
  --ink-soft:#5f573f;
  --soil:#8a7551;
  --soil-dark:#6d5a3d;
  --plot:#a4906b;
  --leaf:#4f9e3f;
  --leaf-dark:#33702a;
  --sun:#f2c14e;
  --bloom:#d1497a;
  --card:#fffdf6;
  --line:3px solid var(--ink);
  --radius:16px;
  /* Serif kebun untuk judul, humanis untuk antarmuka dan angka ubin.
     Dua keluarga yang jelas berbeda, keduanya sudah ada di perangkat. */
  --display:Georgia,"Palatino Linotype",Palatino,"Book Antiqua",serif;
  --ui:Optima,Candara,"Gill Sans","Gill Sans MT","Trebuchet MS",sans-serif;
  font-family:var(--ui);
  color:var(--ink);
  background:var(--page);
  color-scheme:light;
}
*{box-sizing:border-box}
/* Tidak ada gulir mendatar: papan persegi selalu menyesuaikan lebar layar. */
html{overflow-x:hidden}
body{
  margin:0;min-height:100svh;display:flex;flex-direction:column;
  overflow-x:hidden;
  background-color:var(--page);
  /* Garis bedeng samar: dua sapuan lurus, bukan gradien dekoratif. */
  background-image:repeating-linear-gradient(90deg,#2e2a1c07 0 1px,transparent 1px 34px);
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
:focus-visible{outline:4px solid var(--leaf);outline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* ---------- rangka ---------- */
.topbar{min-height:78px;padding:12px clamp(14px,4vw,52px);display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:var(--line);background:var(--page)}
.wordmark{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:clamp(1.35rem,4vw,2.1rem);font-weight:700;letter-spacing:-.035em;color:var(--ink);text-decoration:none}
.wordmark span{color:var(--leaf-dark)}
.sprout{width:clamp(26px,5vw,34px);height:auto;flex:none}
.s-stem{fill:none;stroke:var(--leaf-dark);stroke-width:2.6;stroke-linecap:round}
.s-leaf{fill:var(--leaf);stroke:var(--leaf-dark);stroke-width:1.6;stroke-linejoin:round}
.s-right{fill:var(--leaf-dark)}
.s-seed{fill:var(--soil-dark)}
.top-actions{display:flex;align-items:center;gap:16px}
.offline-note{font-size:.8rem;font-weight:600;color:var(--ink-soft)}
/* Sasaran sentuh tombol atas minimal 44px (WCAG 2.5.5 AAA). Garis bawah
   dipindah dari border ke text-decoration supaya tetap menempel di teks
   walau kotak tombolnya lebih tinggi dari tulisannya. */
.text-button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0;
  border:0;background:none;color:inherit;font-size:.85rem;font-weight:700;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;
}

main{
  width:min(1120px,calc(100% - 24px));margin:0 auto;flex:1;
  padding:clamp(16px,3vw,32px) 0 40px;
  display:grid;gap:clamp(18px,3vw,38px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:start;
}
footer{display:flex;justify-content:space-between;gap:10px;padding:18px clamp(14px,4vw,52px);border-top:var(--line);font-size:.76rem;font-weight:600;color:var(--ink-soft)}

/* ---------- papan nilai ---------- */
.scorerow{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin-bottom:14px}
.packet{
  position:relative;flex:1 1 0;min-width:110px;padding:9px 14px 11px;
  border:var(--line);border-radius:12px;background:var(--card);
  box-shadow:4px 4px 0 var(--ink);
}
.packet-best{background:var(--sun)}
.packet-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--ink-soft)}
.packet-best .packet-label{color:#5f4a0f}
.packet-value{display:block;font-family:var(--display);font-size:clamp(1.5rem,4.4vw,2rem);font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums}
.packet-note{flex-basis:100%;margin:2px 0 0;font-size:.74rem;font-weight:600;color:var(--ink-soft)}
/* Tambahan poin melayang naik dari kartu skor saat ada gabungan.
   Dua hal yang pernah salah dan sekarang dikunci:
   1. Warnanya harus terbaca di atas alas kartu yang sebenarnya (--card),
      bukan hijau pucat yang hanya 1.3:1. --leaf-dark di atas --card = 5.9:1.
   2. Geraknya harus selesai di dalam kartu. Naik 20px dari top:10px menembus
      garis tepi atas kartu, jadi glifnya terpotong. Sekarang tumpuannya
      dipasang lebih ke bawah (top:26px) dan naiknya dibatasi 14px, sehingga
      posisi paling atas = 12px, masih di bawah border 3px + padding. */
.gain{
  position:absolute;right:12px;top:26px;
  font-weight:700;font-size:1rem;color:var(--leaf-dark);
  opacity:0;pointer-events:none;
}
.gain.show{animation:gain-rise .85s ease-out}
@keyframes gain-rise{0%{opacity:0;transform:translateY(4px)}22%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
/* Gerak dikurangi: tetap muncul dan terbaca, hanya tanpa perjalanan naik. */
@media(prefers-reduced-motion:reduce){
  @keyframes gain-rise{0%{opacity:0;transform:none}22%{opacity:1;transform:none}100%{opacity:0;transform:none}}
  /* Aturan global memaksa durasi animasi jadi .001ms, jadi angka +N tidak
     boleh mengandalkan animasi: ditahan terbaca lewat opacity biasa. */
  .gain.show{animation:none!important;opacity:1;transition:none}
}

/* ---------- bedeng dan papan ---------- */
.bed{position:relative}
.board{
  position:relative;width:100%;aspect-ratio:1;
  padding:var(--gap);
  --gap:clamp(7px,2vw,12px);
  border:var(--line);border-radius:var(--radius);
  background:var(--soil);
  box-shadow:7px 7px 0 var(--ink),inset 0 3px 10px #00000026;
  /* Geseran jari di dalam papan dipakai untuk bermain, bukan menggulung.
     Hanya papan yang dikunci; halaman di luar ini tetap bisa digulung. */
  touch-action:none;
  overscroll-behavior:contain;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.plots{position:absolute;inset:var(--gap);display:grid;grid-template:repeat(4,1fr)/repeat(4,1fr);gap:var(--gap)}
.tiles{position:absolute;inset:var(--gap);pointer-events:none}
.plot{border-radius:11px;background:var(--plot);box-shadow:inset 0 2px 5px #00000026}

/* Ubin diletakkan mutlak lalu digeser dengan transform. Persen pada translate
   mengacu ke ukuran ubin itu sendiri — yang persis sebesar satu petak — jadi
   "maju satu petak" cukup ditulis 100% + jarak antar petak, tanpa menghitung
   piksel dan tanpa mengukur ulang saat layar berubah ukuran.
   Kotak posisi (.tile) dan wajah ubin (.face) sengaja dipisah: transform di
   .tile mengurus perpindahan, transform di .face mengurus denyut tumbuh,
   sehingga keduanya tidak saling menimpa. */
.tile{
  position:absolute;top:0;left:0;
  width:calc((100% - 3 * var(--gap)) / 4);
  height:calc((100% - 3 * var(--gap)) / 4);
  transform:translate(calc((100% + var(--gap)) * var(--x)),calc((100% + var(--gap)) * var(--y)));
  transition:transform .11s ease-in;
}
.face{
  width:100%;height:100%;display:grid;place-items:center;
  border-radius:11px;border:2px solid var(--ink);
  font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.face span{display:block;padding:2px}

/* Deret pertumbuhan: benih pucat, tunas hijau, bunga, lalu emas.
   Ukuran angka mengecil saat digitnya bertambah supaya tetap muat di 320px.

   Tingkat rendah (2/4/8/16/32/64) sengaja dibuat sebagai tangga terang-gelap,
   bukan sekadar beda rona. Sebelumnya 2→4 hanya 1.15:1 dan 4→8 hanya 1.08:1;
   pada deuteranopia/protanopia keduanya runtuh ke ~1.01:1, sehingga dua per
   tiga papan terbaca sebagai satu gumpalan krem. Sekarang luminansi tiap
   tingkat turun sekitar 40% dari tingkat sebelumnya, jadi pemisahannya
   bertahan walau ronanya hilang sama sekali:

     2 →4  1.46:1  (deuteran 1.44, protan 1.50)
     4 →8  1.57:1  (deuteran 1.66, protan 1.44)
     8 →16 1.73:1  (deuteran 1.74, protan 1.69)
     16→32 1.44:1  (deuteran 1.45, protan 1.44)
     32→64 1.69:1  (deuteran 1.67, protan 1.73)

   Kontras digit di tiap tingkat tetap >= 4.5:1 (terendah v16 = 4.93:1).
   Rona tetap keluarga kebun: kertas benih hangat → tanah → daun makin tua. */
.face.v2{background:#efe6cd;color:#0f1405;font-size:clamp(1.5rem,7.4vw,2.5rem)}
.face.v4{background:#d9bd84;color:#12180a;font-size:clamp(1.5rem,7.4vw,2.5rem)}
.face.v8{background:#7ca630;color:#0e1a05;font-size:clamp(1.5rem,7.4vw,2.5rem)}
.face.v16{background:#437e2b;color:#ffffff;font-size:clamp(1.35rem,6.6vw,2.3rem)}
.face.v32{background:#24651f;color:#ffffff;font-size:clamp(1.35rem,6.6vw,2.3rem)}
.face.v64{background:#133f11;color:#ffffff;font-size:clamp(1.35rem,6.6vw,2.3rem)}
.face.v128{background:#e88ab0;color:#4d1027;font-size:clamp(1.05rem,5.2vw,1.85rem)}
.face.v256{background:#df6f9c;color:#4d1027;font-size:clamp(1.05rem,5.2vw,1.85rem)}
.face.v512{background:#b73765;color:#fff1f5;font-size:clamp(1.05rem,5.2vw,1.85rem)}
.face.v1024{background:#f2c14e;color:#4a3607;font-size:clamp(.85rem,4.2vw,1.5rem)}
.face.v2048{
  background:linear-gradient(150deg,#ffd76b,#f0a92c);color:#402d04;
  font-size:clamp(.85rem,4.2vw,1.5rem);
  border-color:#5f4405;box-shadow:0 0 0 3px #ffe9a8 inset;
}
/* 4096 ke atas: tetap terbaca, tidak perlu warna baru tiap kelipatan. */
.face.vbig{background:linear-gradient(150deg,#4a3f2a,#2e2a1c);color:var(--sun);font-size:clamp(.8rem,3.8vw,1.35rem);border-color:#1b180f}

/* Benih baru muncul; ubin hasil gabungan berdenyut sekali. */
@keyframes seed-in{from{transform:scale(.35);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes sprout{0%{transform:scale(1)}42%{transform:scale(1.16)}100%{transform:scale(1)}}
.face.is-new{animation:seed-in .16s ease-out both}
.face.is-merged{animation:sprout .2s ease-out}
/* Ubin yang sedang meluncur digambar di atas ubin yang diam. */
.tile.is-moving{z-index:2}

/* ---------- hasil di atas papan ---------- */
.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:14px;border-radius:var(--radius);background:#f4efe0f2;z-index:5}
/* Kartu diberi alas sendiri supaya teks tidak pernah beradu dengan angka ubin
   yang masih terlihat samar di belakangnya. */
.overlay-card{max-width:32ch;text-align:center;padding:18px 20px;border:var(--line);border-radius:14px;background:var(--card);box-shadow:5px 5px 0 var(--ink)}
.overlay-kicker{margin:0 0 4px;font-size:.74rem;font-weight:700;letter-spacing:.05em;color:var(--ink-soft)}
.overlay-card h2{margin:0 0 6px;font-family:var(--display);font-size:clamp(1.6rem,5.6vw,2.4rem);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.overlay-card p{margin:0 0 16px;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
.overlay .button-row{justify-content:center}

/* ---------- kolom keterangan ----------
   Sumber HTML diurutkan untuk layar sempit: pad, batal/tanam ulang, hitungan,
   baru keterangan. Di layar lebar (>=861px) keterangan dinaikkan kembali ke
   atas dengan order supaya judul tetap membuka kolom kanan seperti semula. */
.panel{padding-top:4px;display:flex;flex-direction:column}
.panel-copy{order:-1}
.kicker{margin:0 0 6px;font-size:.78rem;font-weight:700;letter-spacing:.03em;color:var(--leaf-dark)}
.panel-title{margin:0 0 10px;font-family:var(--display);font-size:clamp(1.6rem,4.4vw,2.5rem);font-weight:700;letter-spacing:-.035em;line-height:1.06}
.lede{margin:0 0 22px;max-width:46ch;font-size:clamp(.95rem,1.7vw,1.04rem);line-height:1.55;color:var(--ink-soft)}
.lede b{color:var(--ink)}

/* ---------- tombol arah ---------- */
.pad-wrap{margin-bottom:20px}
.pad{display:grid;grid-template-columns:repeat(3,minmax(0,64px));grid-template-rows:repeat(2,minmax(0,64px));gap:8px;justify-content:start}
.pad-key{
  display:grid;place-items:center;padding:0;
  border:var(--line);border-radius:12px;background:var(--card);color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .1s,box-shadow .1s,background-color .1s;
}
.pad-key svg{width:60%;height:60%;fill:currentColor}
.pad-key.up{grid-area:1/2}
.pad-key.left{grid-area:2/1}
.pad-key.down{grid-area:2/2}
.pad-key.right{grid-area:2/3}
.pad-key:hover{background:var(--sun)}
.pad-key:active,.pad-key.is-pressed{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);background:var(--sun)}
.pad-hint{margin:10px 0 0;font-size:.82rem;font-weight:600;color:var(--ink-soft)}

/* ---------- tombol ---------- */
.button-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.primary,.secondary,.ghost{border:var(--line);border-radius:12px;padding:12px 18px;font-size:.88rem;font-weight:700;box-shadow:4px 4px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.primary{background:var(--leaf-dark);color:#fff}
.secondary{background:var(--sun);color:var(--ink)}
.ghost{background:var(--card);color:var(--ink)}
.primary:active,.secondary:active,.ghost:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.ghost:disabled{opacity:.42;box-shadow:2px 2px 0 var(--ink);cursor:not-allowed}

/* ---------- hitungan kecil ---------- */
.tally{display:flex;gap:26px;margin:22px 0 0;padding-top:16px;border-top:2px dashed var(--soil)}
.tally div{display:grid;gap:2px}
.tally dt{font-size:.74rem;font-weight:700;color:var(--ink-soft)}
.tally dd{margin:0;font-family:var(--display);font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- dialog ---------- */
dialog{width:min(640px,calc(100% - 22px));border:var(--line);border-radius:var(--radius);padding:clamp(20px,4vw,36px);background:var(--page);color:var(--ink);box-shadow:9px 9px 0 var(--ink)}
dialog::backdrop{background:#2e2a1cc4}
.dialog-close{position:absolute;top:8px;right:12px;border:0;background:none;font-size:1.8rem;line-height:1;color:var(--ink)}
dialog h2{margin:0 0 14px;font-family:var(--display);font-size:clamp(1.5rem,4vw,2.1rem);font-weight:700;letter-spacing:-.035em;line-height:1.08}
dialog p{font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.rules-list{margin:0 0 18px;padding-left:20px;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.rules-list li{padding:6px 0}
.rules-list strong{color:var(--ink)}
.rules-example{margin-bottom:18px;padding:16px;border:2px solid var(--ink);border-radius:13px;background:var(--card)}
.example-head{margin:0 0 12px;font-size:.85rem;font-weight:700;color:var(--ink)}
.example-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:12px 0;border-top:2px dashed var(--page-deep)}
.example-row:first-of-type{border-top:0;padding-top:0}
.example-label{font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.example-line{display:flex;gap:4px}
.example-line i{width:30px;height:30px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:7px;font-style:normal;font-weight:700;font-size:.9rem}
/* Contoh di dialog memakai warna ubin yang sama persis dengan papan. */
.example-line i.v2{background:#efe6cd;color:#0f1405}
.example-line i.v4{background:#d9bd84;color:#12180a}
.example-line i.e{background:var(--plot);color:#00000055;border-style:dashed}
.example-arrow{font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.example-note{flex-basis:100%;margin:0;font-size:.85rem;line-height:1.5;color:var(--ink-soft)}
.rule-note{margin:12px 0 0;padding:11px;border-radius:10px;background:var(--sun);font-size:.84rem;line-height:1.5;color:var(--ink)}
.rule-note strong{color:var(--ink)}

/* ---------- pesan sementara ---------- */
/* Pesan sementara. Disembunyikan dengan visibility juga, bukan hanya digeser
   ke bawah — kalau tidak, ujungnya masih mengintip di tepi layar. */
.feedback{
  position:fixed;z-index:50;left:50%;bottom:22px;margin:0;
  max-width:calc(100% - 24px);padding:11px 17px;
  border:2px solid var(--page);border-radius:12px;
  background:var(--ink);color:var(--page);font-size:.85rem;font-weight:700;
  transform:translate(-50%,calc(100% + 40px));
  visibility:hidden;opacity:0;
  transition:transform .2s,opacity .2s,visibility 0s .2s;
}
.feedback.show{transform:translate(-50%,0);visibility:visible;opacity:1;transition:transform .2s,opacity .2s}

/* ---------- layar sempit ---------- */
@media(max-width:860px){
  main{grid-template-columns:minmax(0,1fr);gap:22px}
  .offline-note{display:none}
  /* Papan persegi: lebarnya tidak boleh melebihi layar, dan tingginya tidak
     boleh melebihi ruang yang tersisa. Yang terkecil dari keduanya yang dipakai. */
  .bed-column{width:100%;max-width:min(100%,72svh);margin-inline:auto}
  /* Layar sempit memakai urutan sumber apa adanya: pad → batal/tanam ulang →
     hitungan → keterangan. Batal adalah pemulihan dari salah usap, jadi ia
     harus terjangkau tanpa menggulung melewati paragraf. */
  .panel-copy{order:0}
  .pad-hint-keys{display:none}
  .pad{grid-template-columns:repeat(4,minmax(44px,1fr));grid-template-rows:48px;gap:8px}
  .pad .pad-key{grid-area:auto}
  .pad-key.left{order:0}.pad-key.up{order:1}.pad-key.down{order:2}.pad-key.right{order:3}
  .panel-title{font-size:clamp(1.45rem,6vw,1.9rem)}
  .tally{gap:20px}
  /* Keterangan turun ke bawah hitungan, jadi ia butuh jaraknya sendiri. */
  .panel-copy{margin-top:22px;padding-top:16px;border-top:2px dashed var(--soil)}
  .panel-copy .lede{margin-bottom:0}
  footer{flex-direction:column;gap:4px}
}
/* 320px–430px: judul dan tombol atas tidak muat berdampingan, jadi header
   dibiarkan membungkus ke bawah alih-alih memaksa halaman melebar. */
@media(max-width:430px){
  .topbar{min-height:0;flex-wrap:wrap;gap:6px 12px;padding:10px 14px}
  .wordmark{font-size:1.25rem;gap:7px}
  .sprout{width:24px}
  .top-actions{gap:14px;flex:1 1 100%}
  .text-button{font-size:.8rem}
  .scorerow{gap:8px}
  .packet{min-width:0;padding:7px 11px 9px}
  .packet-value{font-size:1.35rem}
  .pad{grid-template-rows:48px;justify-content:stretch}
  .button-row .ghost{flex:1 1 auto;text-align:center}
  .tally{gap:16px}
}

/* Short landscape: score and board share one column; controls stay alongside. */
@media(orientation:landscape) and (max-height:600px){
  /* Tombol atas tetap 44px; padding dikecilkan supaya tinggi header di
     lanskap pendek tidak ikut tumbuh (44 + 2×4 = 52 < min-height 54). */
  .topbar{min-height:54px;padding-block:4px}
  main{grid-template-columns:minmax(0,min(44vw,calc(100svh - 138px))) minmax(0,1fr);gap:24px;padding-top:10px}
  .bed-column{max-width:none}
  .scorerow{gap:8px;margin-bottom:10px}
  .packet{min-width:0;padding:5px 10px}
  .packet-value{font-size:1.25rem}
  /* Lanskap pendek juga memakai urutan sumber: kendali dulu, keterangan akhir. */
  .panel-copy{order:0;margin-top:14px;padding-top:12px;border-top:2px dashed var(--soil)}
  .pad-hint-keys{display:none}
  .pad-wrap{margin-bottom:12px}
  .pad{grid-template-columns:repeat(4,minmax(44px,1fr));grid-template-rows:44px}
  .pad .pad-key{grid-area:auto}
  .pad-key.left{order:0}.pad-key.up{order:1}.pad-key.down{order:2}.pad-key.right{order:3}
  .panel-title{font-size:1.5rem}
  .lede{margin-bottom:12px}
}
.board{container-type:inline-size}
.face span{font-size:min(1em,8cqw)}
.face.v128,.face.v256,.face.v512{font-size:clamp(12px,6.5cqw,29px)}
.face.v1024,.face.v2048{font-size:clamp(12px,5.5cqw,24px)}
.face.vbig{font-size:clamp(11px,4.5cqw,21px)}
.overlay{overflow:auto;align-items:safe center}
.overlay-card{max-width:100%}
dialog{max-height:calc(100svh - 24px);overflow:auto}
#rules-dialog[open]{display:flex;flex-direction:column;gap:16px}
.rules-body{min-height:0;overflow:auto;padding-right:8px}
#understand{flex:none;align-self:flex-start}
:focus-visible{outline-color:var(--leaf-dark)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}