/* Tunas Cerdik: gaya game interaktif dikongsi (GAME-PLAN.md §1–§2, Fasa G0). Dimuat oleh kedua-dua app SELEPAS tema
   (App #1: v4.css, html.v4 terang; App #2: malam.css, html.malam). Warna hanya dari token tema di bawah; komponen
   ikut gaya jubin app (kad putih + bayang bawah, sudut 20–22 px, Andika untuk teks bacaan, Baloo 2 untuk tajuk).
   Gerakan: transform/opacity sahaja. html.kurang-gerak (tetapan ibu bapa) mematikan animasi CSS (lihat v2.css). */

.g-stage {
  --g-kad: #fff; --g-kad-b: var(--kertas-3, #EADBC0); --g-teks: var(--dakwat, #1E3A2C); --g-teks-2: var(--dakwat-2, #56695D);
  --g-lekuk: var(--kertas-2, #F6EBD6); --g-garis: var(--kertas-3, #EADBC0); --g-aksen: var(--tunas, #2EBD59); --g-aksen-d: var(--tunas-gelap, #1E9A47);
  --g-betul-bg: var(--tunas-muda, #DDF5E3); --g-salah-bg: var(--oren-muda, #FFEBDC); --g-salah: var(--oren-lembut, #FF8A3D); --g-salah-d: var(--oren-gelap, #D9661A);
  --g-sinar: var(--kunyit, #FFB627); --g-sinar-d: var(--kunyit-gelap, #DB8D06); --g-sinar-bg: var(--kunyit-muda, #FFF0CC);
  --g-pilih: var(--blue, #2B9CF2); --g-pilih-bg: var(--langit-muda, #E2F1FE); --g-air: #BFE3FB; --g-air-d: #7CC4F2;
  --g-baca: var(--baca, "Andika", "Lexend", system-ui, sans-serif); --g-tajuk: var(--tajuk, "Baloo 2", "Lexend", system-ui, sans-serif);
  --g-min: 56px; /* sasaran sentuh minimum App #1 */
  flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; color: var(--g-teks);
  user-select: none; -webkit-user-select: none; /* (G2) seret dengan tetikus tidak memilih teks */
}
html.malam .g-stage {
  --g-kad: var(--m2); --g-kad-b: #0B1530; --g-teks: #fff; --g-teks-2: var(--ink2); --g-lekuk: rgba(255, 255, 255, .04); --g-garis: var(--m3);
  --g-betul-bg: rgba(46, 189, 89, .18); --g-salah-bg: rgba(255, 138, 61, .16); --g-salah: var(--oren); --g-salah-d: #FFB98A;
  --g-sinar: var(--kunyit); --g-sinar-d: var(--kunyit-d); --g-sinar-bg: rgba(255, 182, 39, .16); --g-pilih: var(--kunyit-c); --g-pilih-bg: rgba(255, 182, 39, .12);
  --g-air: #1E4F86; --g-air-d: #2C6CB0; --g-baca: var(--font); --g-min: 48px;
}

/* Skrin soalan game: App #1 (.q.q-game) dan App #2 (.mq.mq-game) */
.q.q-game { gap: 10px; }
.q.q-game .g-stage { margin-top: 4px; }
.mq.mq-game .mq-stage { justify-content: flex-start; flex: 1; }
.mq.mq-game .qtext { font-size: 19px; font-weight: 700; }
.mq-game .g-status { margin: -4px 0 0; min-height: 22px; font-size: 15px; font-weight: 700; color: var(--ink2); transition: color .15s; }
.mq-game .g-status.no { color: var(--red-d, #FFB98A); }
.mq-game .g-status.hint { color: var(--kunyit-c, #FFD15C); }

/* ---------- Gerak kecil dikongsi ---------- */
.g-goncang { animation: g-goncang .42s ease-in-out; }
@keyframes g-goncang { 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.g-stage .hint { animation: g-sinar 1s ease-in-out infinite; }
@keyframes g-sinar { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 182, 39, .75), 0 5px 0 var(--g-sinar-d); } 50% { box-shadow: 0 0 0 10px rgba(255, 182, 39, 0), 0 5px 0 var(--g-sinar-d); } }
.g-stage .masuk { animation: g-masuk .42s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes g-masuk { from { opacity: 0; transform: translateY(18px) scale(.86); } }

/* ---------- E1 · seret & susun ---------- */
.g-e1 { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.g-sasaran-baris { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-mod-bakul .g-sasaran-baris { flex: 1; max-height: 290px; min-height: 150px; } /* bakul besar = sasaran lepas yang mudah */
.g-sasaran-baris.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-mod-slot .g-sasaran-baris { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 4px; padding-top: 8px; }
.g-sasaran { position: relative; border-radius: 22px; transition: background .15s, box-shadow .15s, transform .12s; -webkit-tap-highlight-color: transparent; }
.g-bakul { min-height: 150px; height: 100%; background: var(--g-lekuk); box-shadow: inset 0 0 0 3px var(--g-garis); display: flex; flex-direction: column; padding: 10px 10px 0; }
.g-bakul-isi { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 6px; min-height: 64px; }
.g-bakul-kepala { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px -10px 0; padding: 10px 8px 12px; border-radius: 0 0 22px 22px; background: var(--g-kad); box-shadow: 0 5px 0 var(--g-kad-b); }
.g-bakul-kepala b { font-family: var(--g-tajuk); font-weight: 800; font-size: 20px; letter-spacing: .01em; }
.g-bakul-kepala .illus { width: 32px; height: 32px; }
.g-sasaran.g-atas { transform: scale(1.04); box-shadow: inset 0 0 0 3px var(--g-pilih); background: var(--g-pilih-bg); }
.g-sasaran.hint { box-shadow: inset 0 0 0 3px var(--g-sinar); background: var(--g-sinar-bg); animation: g-sinar-dalam 1s ease-in-out infinite; }
@keyframes g-sinar-dalam { 50% { transform: scale(1.03); } }
.g-petak { flex: 1 1 0; min-width: 56px; max-width: 92px; aspect-ratio: 1; background: var(--g-lekuk); box-shadow: inset 0 0 0 3px var(--g-garis); display: grid; place-items: center; }
.g-petak.g-penuh { box-shadow: inset 0 0 0 3px var(--g-pilih); background: var(--g-pilih-bg); }
.g-petak-ph { opacity: .35; }
.g-panah { width: 16px; height: 16px; color: var(--g-teks-2); flex: none; }

.g-dulang { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 4px 0 6px; min-height: 92px; }
.g-benda { position: relative; min-width: 76px; min-height: 76px; padding: 6px; border: 0; border-radius: 22px; background: var(--g-kad); box-shadow: 0 5px 0 var(--g-kad-b);
  display: grid; place-items: center; gap: 2px; font-family: var(--g-baca); font-weight: 700; font-size: 16px; color: var(--g-teks); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.g-benda .illus { width: 62px; height: 62px; pointer-events: none; }
.g-benda-lbl { display: none; }
.g-benda.g-angkat { opacity: .25; transform: scale(.94); }
.g-benda.g-pilih { box-shadow: 0 0 0 3px var(--g-pilih), 0 5px 0 var(--g-pilih); transform: translateY(-3px); }
.g-benda.g-dalam { min-width: 0; min-height: 0; width: 56px; height: 56px; padding: 4px; border-radius: 16px; box-shadow: 0 3px 0 var(--g-kad-b); cursor: default; }
.g-benda.g-dalam .illus { width: 44px; height: 44px; }
.g-petak .g-benda.g-dalam { width: 100%; height: 100%; border-radius: 22px; }
.g-petak .g-benda.g-dalam .illus { width: 80%; height: 80%; }
.g-benda.g-betul { box-shadow: 0 0 0 3px var(--g-aksen), 0 3px 0 var(--g-aksen-d); background: var(--g-betul-bg); }
.g-benda.g-salah { box-shadow: 0 0 0 3px var(--g-salah), 0 3px 0 var(--g-salah-d); background: var(--g-salah-bg); }
.g-benda.hint { background: var(--g-sinar-bg); }
.g-benda:disabled { cursor: default; color: var(--g-teks); opacity: 1; }
/* Klon terapung yang ikut jari (diletak dalam <body>) */
.g-klon { position: fixed; z-index: 80; margin: 0; pointer-events: none; transform-origin: 50% 50%; box-shadow: 0 16px 28px -10px rgba(0, 0, 0, .35), 0 5px 0 var(--g-kad-b, #EADBC0) !important;
  border: 0; border-radius: 22px; background: var(--g-kad, #fff); display: grid; place-items: center; }
.v4 .g-klon { --g-kad: #fff; --g-kad-b: var(--kertas-3); }
html.malam .g-klon { --g-kad: var(--m2); --g-kad-b: #0B1530; }
.g-klon .illus { width: 64px; height: 64px; }

/* ---------- E2 · garis nombor ---------- */
.g-e2 { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.g-garis-wrap { padding: 96px 22px 18px; }
.g-garis { position: relative; height: 64px; touch-action: none; }
.g-trek { position: absolute; left: -10px; right: -10px; top: 14px; height: 8px; border-radius: 99px; background: var(--g-teks-2); opacity: .55; }
.g-tanda { position: absolute; top: 0; width: 44px; margin-left: -22px; height: 64px; border: 0; background: none; padding: 0; color: var(--g-teks); font-family: var(--g-baca); font-weight: 700; font-size: 17px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.g-tanda i { width: 4px; height: 28px; border-radius: 2px; background: var(--g-teks); opacity: .7; }
.g-tanda.kecil i { height: 18px; margin-top: 5px; opacity: .5; }
.g-tanda.hint i { background: var(--g-sinar); opacity: 1; width: 6px; }
.g-tanda.hint { animation: none; box-shadow: none; }
.g-tanda.hint span { background: var(--g-sinar-bg); box-shadow: 0 0 0 3px var(--g-sinar); border-radius: 10px; padding: 0 6px; animation: g-sinar-dalam 1s ease-in-out infinite; }
.g-tanda.g-betul span { color: var(--g-aksen-d); }
.g-mod-tekan .g-tanda { height: 76px; } .g-mod-tekan .g-tanda span { min-width: 40px; min-height: 40px; display: grid; place-items: center; border-radius: 14px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); }
.g-mod-tekan .g-tanda.g-pilih span { box-shadow: 0 0 0 3px var(--g-pilih), 0 4px 0 var(--g-pilih); }
.g-pin { position: absolute; bottom: 42px; width: 64px; margin-left: -32px; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; cursor: grab; touch-action: none; transition: left .06s linear; }
.g-pin-kepala { min-width: 58px; height: 58px; padding: 0 8px; border-radius: 20px; background: var(--g-pilih); color: #fff; font-family: var(--g-tajuk); font-weight: 800; font-size: 26px; display: grid; place-items: center; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--blue-d, #1E7BC4); }
html.malam .g-pin-kepala { color: #3A2400; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 5px 0 var(--kunyit-d); }
.g-pin-batang { width: 6px; height: 26px; margin-top: 2px; border-radius: 3px; background: var(--g-pilih); }
.g-pin.g-angkat .g-pin-kepala { transform: scale(1.1) translateY(-4px); }
.g-pin.g-betul .g-pin-kepala { background: var(--g-aksen); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--g-aksen-d); color: #fff; }
.g-pin.g-betul .g-pin-batang { background: var(--g-aksen); }
.g-pin.g-salah .g-pin-kepala { background: var(--g-salah); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--g-salah-d); color: #fff; }

/* ---------- E3 · grid & laluan ---------- */
.g-e3 { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.g-ungkapan { min-height: 34px; font-family: var(--g-tajuk); font-weight: 800; font-size: 24px; color: var(--g-teks); text-align: center; }
.g-ungkapan i { font-style: normal; color: var(--g-teks-2); margin: 0 4px; font-size: 20px; }
.g-grid { position: relative; display: grid; grid-template-columns: repeat(var(--lajur), 1fr); gap: 12px; width: min(100%, calc(var(--lajur) * 96px)); touch-action: none; }
.g-garisan { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.g-garisan polyline { fill: none; stroke: var(--g-pilih); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.g-sel { aspect-ratio: 1; min-height: var(--g-min); border: 0; border-radius: 22px; background: var(--g-kad); box-shadow: 0 5px 0 var(--g-kad-b); font-family: var(--g-baca); font-weight: 700; font-size: clamp(28px, 9vw, 40px); color: var(--g-teks); user-select: none; -webkit-user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.g-sel.g-on { background: var(--g-pilih-bg); box-shadow: 0 0 0 3px var(--g-pilih), 0 5px 0 var(--g-pilih); }
.g-sel.g-betul { background: var(--g-betul-bg); box-shadow: 0 0 0 3px var(--g-aksen), 0 5px 0 var(--g-aksen-d); color: var(--g-aksen-d); }
.g-sel.g-salah { background: var(--g-salah-bg); box-shadow: 0 0 0 3px var(--g-salah), 0 5px 0 var(--g-salah-d); }
.g-sel.hint { background: var(--g-sinar-bg); }
html.malam .g-sel.g-betul { color: #fff; }

/* ---------- E4 · arked (buih) ---------- */
.g-e4 { flex: 1; position: relative; min-height: 300px; overflow: hidden; border-radius: 24px; background: linear-gradient(180deg, var(--langit-muda, #E2F1FE), var(--g-lekuk)); touch-action: manipulation; contain: layout paint; }
html.malam .g-e4 { background: linear-gradient(180deg, #16295A, var(--m1)); }
.g-kiraan { position: absolute; top: 10px; right: 10px; z-index: 3; padding: 4px 12px; border-radius: 99px; background: var(--g-kad); box-shadow: 0 3px 0 var(--g-kad-b); font-family: var(--g-tajuk); font-weight: 800; font-size: 18px; color: var(--g-teks-2); }
.g-kiraan b { color: var(--g-aksen-d); }
html.malam .g-kiraan b { color: var(--green, #2EBD59); }
.g-buih { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); padding: 0; border: 0; background: none; will-change: transform; -webkit-tap-highlight-color: transparent; }
.g-buih-b { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(ellipse 16% 11% at 27% 20%, rgba(255, 255, 255, .95) 0 60%, transparent 100%), radial-gradient(circle at 38% 34%, rgba(255, 255, 255, .3) 0 30%, rgba(150, 210, 255, .26) 55%, rgba(110, 180, 245, .5) 100%);
  box-shadow: inset 0 0 0 3px rgba(80, 160, 230, .55), 0 6px 14px -6px rgba(30, 80, 140, .35); }
.g-buih-b > span { font-family: var(--g-baca); font-weight: 700; font-size: calc(var(--s) * .46); color: var(--g-teks); line-height: 1; }
html.malam .g-buih-b { box-shadow: inset 0 0 0 3px rgba(150, 200, 255, .6), 0 6px 14px -6px rgba(0, 0, 0, .5); }
.g-buih.hint { animation: none; box-shadow: none; }
.g-buih.hint .g-buih-b { box-shadow: inset 0 0 0 4px var(--g-sinar), 0 0 0 6px rgba(255, 182, 39, .35); }
.g-buih-b.g-goncang { animation: g-goncang .42s ease-in-out; }
.g-buih.g-pecah .g-buih-b { animation: g-pecah .32s ease-out forwards; }
@keyframes g-pecah { 40% { transform: scale(1.25); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- E5 · makmal ---------- */
.g-e5 { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.g-langkah-bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.g-langkah-bar li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px; border-radius: 12px; background: var(--g-lekuk); color: var(--g-teks-2); font-size: 13px; min-width: 0; text-align: center; }
.g-langkah-bar li b { font-family: var(--g-tajuk); font-weight: 800; line-height: 1.1; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-langkah-bar .n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--g-garis); color: var(--g-teks); font-weight: 800; font-size: 12px; }
.g-langkah-bar li.on { background: var(--g-pilih-bg); color: var(--g-teks); box-shadow: inset 0 0 0 2px var(--g-pilih); }
.g-langkah-bar li.on .n { background: var(--g-pilih); color: #fff; }
.g-langkah-bar li.siap .n { background: var(--g-aksen); color: #fff; }
.g-kerja { display: flex; flex-direction: column; gap: 10px; }
.g-kerja.g-masuk { animation: g-masuk .38s cubic-bezier(.34, 1.56, .64, 1) both; }
.g-kps { align-self: flex-start; padding: 3px 10px; border-radius: 99px; background: var(--g-sinar-bg); color: var(--g-sinar-d); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
html.malam .g-kps { color: var(--kunyit-c); }
.g-soalan { margin: 0; font-family: var(--g-tajuk); font-weight: 800; font-size: 20px; line-height: 1.25; }
.g-nota { margin: 6px 0; padding: 12px 14px; border-radius: 18px; background: var(--g-betul-bg); font-family: var(--g-tajuk); font-weight: 800; font-size: 19px; text-align: center; }
.g-pilihan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.g-pilihan-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-pilihan { min-height: var(--g-min); padding: 10px 8px; border: 0; border-radius: 20px; background: var(--g-kad); box-shadow: 0 5px 0 var(--g-kad-b); color: var(--g-teks); font-family: var(--g-tajuk); font-weight: 800; font-size: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.g-pilihan .illus { width: 44px; height: 44px; }
.g-pilihan:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--g-kad-b); }
.g-pilihan.g-pilih { background: var(--g-pilih-bg); box-shadow: 0 0 0 3px var(--g-pilih), 0 5px 0 var(--g-pilih); }
.g-pilihan.g-betul { background: var(--g-betul-bg); box-shadow: 0 0 0 3px var(--g-aksen), 0 5px 0 var(--g-aksen-d); }
.g-pilihan.g-salah { background: var(--g-salah-bg); box-shadow: 0 0 0 3px var(--g-salah), 0 5px 0 var(--g-salah-d); opacity: .75; }
.g-pilihan.hint { background: var(--g-sinar-bg); }
.g-pilihan:disabled { cursor: default; }
.g-pilihan-grid.kecil { gap: 6px; }
.g-pilihan-grid.kecil .g-pilihan { min-height: 44px; font-size: 15px; padding: 6px; border-radius: 14px; }
.g-uji { align-self: center; min-width: 180px; }
.g-pentas { border-radius: 22px; background: var(--g-kad); box-shadow: 0 5px 0 var(--g-kad-b); padding: 10px; }
.g-tangki { position: relative; height: 150px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, transparent 0 36%, var(--g-air) 36%); box-shadow: inset 0 0 0 3px var(--g-air-d); }
.g-air { position: absolute; left: 0; right: 0; top: 36%; height: 4px; background: var(--g-air-d); opacity: .6; }
.g-objek { position: absolute; top: 4px; width: 52px; height: 52px; }
.g-objek .illus { width: 52px; height: 52px; }
.g-jadual { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.g-jadual th { text-align: left; font-size: 13px; color: var(--g-teks-2); font-weight: 700; padding: 0 8px; }
.g-jadual td { background: var(--g-kad); padding: 6px 8px; vertical-align: middle; }
.g-jadual td:first-child { border-radius: 16px 0 0 16px; } .g-jadual td:last-child { border-radius: 0 16px 16px 0; width: 62%; }
.g-jd-benda { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.g-jd-benda .illus { width: 34px; height: 34px; }
.g-jd-isi.g-betul { background: var(--g-betul-bg); }
.g-jd-tulis { font-family: var(--g-tajuk); font-weight: 800; font-size: 18px; color: var(--g-aksen-d); }
html.malam .g-jd-tulis { color: #fff; }


/* ===================== G1 · App #1 gelombang 1 ===================== */
/* Letupan kecil (teras.letupan, ikut belon pecah Pesta) */
.g-letup-garis { position: absolute; width: 18px; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--g-sinar); transform-origin: 0 50%; pointer-events: none; z-index: 6; }
.g-letup-serpih { position: absolute; width: 10px; height: 8px; border-radius: 40% 60% 30% 70%; pointer-events: none; z-index: 6; }

/* E4 · lencana sasaran (Pecah Buih) */
.g-sasaran-buih { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 2px 12px 4px; border-radius: 18px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); pointer-events: none; }
.g-sb-glyph { font-family: var(--g-baca); font-weight: 700; font-size: 38px; line-height: 1.1; color: var(--g-pilih); }
.g-sb-glyph.ar, .g-buih-b > span.ar { font-family: var(--ar); font-weight: 700; }
.g-sb-glyph.kecil { font-size: 30px; color: var(--g-teks-2); }
.g-sb-panah { font-family: var(--g-tajuk); font-weight: 800; font-size: 22px; color: var(--g-teks-2); }

/* E2 · Katak Lompat: kolam, daun teratai berzigzag, katak, lengkung lompatan */
.g-katak { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 0; }
.g-ayat { align-self: center; padding: 2px 20px 4px; border-radius: 20px; background: var(--g-kad); box-shadow: 0 5px 0 var(--g-kad-b); font-family: var(--g-baca); font-weight: 700; font-size: 36px; line-height: 1.25; color: var(--g-teks); white-space: nowrap; }
.g-ayat b { color: var(--g-pilih); }
.g-ayat b.g-betul { color: var(--g-aksen-d); }
.g-kolam { display: flex; flex-direction: column; justify-content: center; border-radius: 26px; overflow: hidden; background: radial-gradient(ellipse 60% 22% at 22% 88%, rgba(255, 255, 255, .45), transparent 70%), linear-gradient(180deg, #D7F1FF, #A8DCF7); }
.g-kolam .g-e2 { justify-content: center; }
.g-teratai .g-garis-wrap { padding: 66px 24px 22px; }
.g-teratai .g-garis { height: 96px; }
.g-teratai .g-trek { display: none; }
.g-teratai .g-tanda { top: 0; width: 48px; height: 48px; margin-left: -24px; gap: 0; z-index: 1; -webkit-tap-highlight-color: transparent; }
.g-teratai .g-tanda.ganjil { top: 44px; }
.g-teratai .g-tanda i { display: none; }
.g-teratai .g-tanda span { width: 48px; height: 48px; min-width: 0; min-height: 0; padding: 0 0 3px; border-radius: 50%; display: flex; align-items: flex-end; justify-content: center; font-family: var(--g-baca); font-weight: 700; font-size: 18px; line-height: 1; color: #17482A;
  background: conic-gradient(from 18deg, transparent 0 30deg, #8DD99D 30deg 360deg); box-shadow: inset 0 -5px 0 rgba(30, 110, 60, .22); filter: drop-shadow(0 3px 0 #3FA65E); }
.g-teratai .g-tanda.g-mula span { background: conic-gradient(from 18deg, transparent 0 30deg, #B8EBC2 30deg 360deg); }
.g-teratai .g-tanda.g-pilih span { background: conic-gradient(from 18deg, transparent 0 30deg, #BFE3FF 30deg 360deg); filter: drop-shadow(0 0 0 var(--g-pilih)) drop-shadow(0 3px 0 var(--g-pilih)); }
.g-teratai .g-tanda.g-betul span { background: conic-gradient(from 18deg, transparent 0 30deg, var(--g-aksen) 30deg 360deg); color: #fff; filter: drop-shadow(0 3px 0 var(--g-aksen-d)); }
.g-teratai .g-tanda.g-salah span { background: conic-gradient(from 18deg, transparent 0 30deg, #FFC9A6 30deg 360deg); filter: drop-shadow(0 3px 0 var(--g-salah-d)); }
.g-teratai .g-tanda.hint span { padding: 0 0 3px; border-radius: 50%; background: conic-gradient(from 18deg, transparent 0 30deg, var(--g-sinar) 30deg 360deg); box-shadow: 0 0 0 4px rgba(255, 182, 39, .45); }
.g-katak-img { position: absolute; left: 0; top: 0; width: 44px; height: 44px; z-index: 3; pointer-events: none; will-change: transform; filter: drop-shadow(0 3px 2px rgba(20, 70, 40, .25)); }
.g-katak-img .illus { width: 44px; height: 44px; display: block; }
.g-lengkung { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.g-lengkung path { fill: none; stroke: var(--g-pilih); stroke-width: 3; stroke-dasharray: 5 6; stroke-linecap: round; }
.g-kira-terapung { position: absolute; left: 0; top: 0; z-index: 4; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--g-pilih); color: #fff; font-family: var(--g-tajuk); font-weight: 800; font-size: 18px; pointer-events: none; }

/* E1 · Masuk Bakul: kepala bakul (huruf / saiz), benda kecil */
.g-bakul-huruf { font-family: var(--g-baca); font-weight: 700; font-size: 34px; line-height: 1; color: var(--g-pilih); }
.g-bakul-saiz { display: grid; place-items: center; width: 36px; height: 36px; }
.g-bakul-saiz .illus { width: auto; height: auto; }
.g-bakul-saiz.besar .illus { width: 34px; height: 34px; } .g-bakul-saiz.kecil .illus { width: 18px; height: 18px; }
.g-benda.g-kecil .illus, .g-klon.g-kecil .illus { width: 30px; height: 30px; }
.g-benda.g-dalam.g-kecil .illus { width: 22px; height: 22px; }

/* E1 · Kedai Buah: pelanggan, beg petak sepuluh, longgok buah */
.g-kedai { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.g-pelanggan { display: flex; align-items: center; gap: 8px; align-self: center; }
.g-pelanggan > .illus { width: 56px; height: 56px; }
.g-pesanan { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 14px 8px; border-radius: 20px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); }
.g-pesanan::before { content: ""; position: absolute; left: -7px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 0; border-right-color: var(--g-kad); }
.g-pesanan b { font-family: var(--g-tajuk); font-weight: 800; font-size: 17px; color: var(--g-teks-2); }
.g-pesanan-isi { display: flex; align-items: center; gap: 4px; }
.g-pesanan-isi em { font-style: normal; font-family: var(--g-baca); font-weight: 700; font-size: 34px; line-height: 1; color: var(--g-pilih); }
.g-pesanan-isi .illus { width: 34px; height: 34px; }
.g-kedai-main { flex: 1; display: flex; min-height: 0; }
.g-kira { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.g-beg { width: min(100%, 330px); padding: 12px 12px 14px; border-radius: 28px 28px 34px 34px; background: #F3D9A8; box-shadow: inset 0 0 0 3px #D9A85C, 0 6px 0 #C08A3E; }
.g-beg.g-atas { background: #F8E6C2; box-shadow: inset 0 0 0 3px var(--g-pilih), 0 6px 0 #C08A3E; transform: scale(1.03); }
.g-petak10 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.g-p10 { position: relative; aspect-ratio: 1; border-radius: 14px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 2px rgba(192, 138, 62, .35); display: grid; place-items: center; }
.g-p10.hint { animation: g-sinar-dalam 1s ease-in-out infinite; box-shadow: inset 0 0 0 3px var(--g-sinar); background: var(--g-sinar-bg); }
.g-p10 .g-benda.g-dalam { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 2px; border-radius: 12px; cursor: pointer; }
.g-p10 .g-benda.g-dalam .illus { width: 82%; height: 82%; }
.g-p10 .g-benda[data-n]:not([data-n=""])::after { content: attr(data-n); position: absolute; right: -4px; top: -6px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: var(--g-pilih); color: #fff; font-family: var(--g-tajuk); font-weight: 800; font-size: 12px; line-height: 20px; text-align: center; }
.g-sumber { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 132px; padding: 8px 18px 8px; border: 0; border-radius: 24px; background: var(--g-kad); box-shadow: 0 5px 0 var(--g-kad-b); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.g-sumber:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--g-kad-b); }
.g-longgok { position: relative; width: 104px; height: 62px; }
.g-longgok > span { position: absolute; bottom: 0; } .g-longgok .illus { width: 50px; height: 50px; }
.g-longgok-0 { left: 0; } .g-longgok-1 { left: 27px; bottom: 12px !important; } .g-longgok-2 { left: 54px; }
.g-sumber-lbl { font-family: var(--g-tajuk); font-weight: 800; font-size: 16px; color: var(--g-teks-2); }
.g-klon .g-longgok { display: none; } .g-klon.g-sumber .g-sumber-lbl { display: none; }

/* E3 · Cari Pasangan: kad ingatan (terbalik 3D: transform sahaja) */
.g-ingat { justify-content: center; padding-bottom: 8px; }
.g-kad-grid { display: grid; grid-template-columns: repeat(var(--lajur), minmax(0, 1fr)); gap: 10px; width: min(100%, calc(var(--lajur) * 88px)); }
.g-kad { position: relative; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 18px; background: none; perspective: 700px; -webkit-tap-highlight-color: transparent; }
.g-kad-dalam { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .34s cubic-bezier(.3, 1.25, .55, 1); }
.g-kad.buka .g-kad-dalam, .g-kad.siap .g-kad-dalam { transform: rotateY(180deg); }
.g-kad-blk, .g-kad-muka { position: absolute; inset: 0; border-radius: 18px; display: grid; place-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.g-kad-blk { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .25), transparent 55%), var(--g-aksen); box-shadow: 0 5px 0 var(--g-aksen-d); }
.g-kad-blk svg { width: 46%; height: auto; }
.g-kad-muka { transform: rotateY(180deg); background: var(--g-kad); box-shadow: 0 5px 0 var(--g-kad-b); color: var(--g-teks); }
.g-kad-teks { font-family: var(--g-baca); font-weight: 700; font-size: clamp(30px, 9vw, 40px); line-height: 1; }
.g-kad-teks.pjg { font-size: clamp(18px, 5.4vw, 24px); } .g-kad-teks.pjg2 { font-size: clamp(14px, 4.2vw, 18px); }
.g-kad-teks.ar { font-family: var(--ar); font-size: clamp(34px, 10vw, 46px); }
.g-kad.siap .g-kad-muka { background: var(--g-betul-bg); box-shadow: 0 0 0 3px var(--g-aksen), 0 5px 0 var(--g-aksen-d); color: var(--g-aksen-d); }
.g-kad.siap { transform: scale(.94); transition: transform .3s ease; }
.g-kad.hint { animation: none; box-shadow: none; }
.g-kad.hint .g-kad-blk { background: var(--g-sinar); box-shadow: 0 0 0 4px rgba(255, 182, 39, .45), 0 5px 0 var(--g-sinar-d); animation: g-sinar-dalam 1s ease-in-out infinite; }
.g-kad.g-goncang { animation: g-goncang .42s ease-in-out; }
.g-titik { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 78%; }
.g-titik i { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--g-garis); }
.g-titik i.on { background: var(--g-pilih); box-shadow: none; }
.g-kad.siap .g-titik i.on { background: var(--g-aksen); }
html.kurang-gerak .g-kad-dalam { transition: none; }

/* Tangan tunjuk cara: mod seret (App #1, engine.js demo 'drag') */
.demo-hand.drag { animation: handdrag 1.8s ease-in-out 2; }
@keyframes handdrag { 0% { transform: translate(0, 14px); opacity: 0; } 12% { transform: translate(0, 0); opacity: 1; } 22% { transform: translate(0, 0) scale(.9); } 72% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.9); } 84% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1); opacity: 1; } 100% { transform: translate(var(--dx, 0), var(--dy, 0)); opacity: 0; } }

/* Telefon pendek (360×640, 375×667): kecilkan ruang supaya game muat tanpa skrol */
@media (max-height: 700px) {
  .g-bakul, .g-mod-bakul .g-sasaran-baris { min-height: 124px; }
  .g-benda { min-width: 70px; min-height: 70px; }
  .g-benda .illus, .g-klon .illus { width: 54px; height: 54px; }
  .g-garis-wrap { padding-top: 84px; }
  .g-tangki { height: 128px; }
  .g-soalan { font-size: 18px; }
  .g-e4 { min-height: 250px; }
  .g-ayat { font-size: 30px; }
  .g-teratai .g-garis-wrap { padding-top: 60px; padding-bottom: 16px; }
  .g-kad-grid { gap: 8px; width: min(100%, calc(var(--lajur) * 76px)); }
  .g-pelanggan > .illus { width: 46px; height: 46px; }
  .g-kira { gap: 10px; }
  .g-petak10 { gap: 4px; }
}
/* kurangkan gerakan: pilihan ibu bapa (fx.js setGerak), bukan tetapan telefon. Animasi CSS dimatikan oleh v2.css; sinar kekal sebagai warna tetap. */
html.kurang-gerak .g-pin { transition: none; }
html.kurang-gerak .g-stage .hint, html.kurang-gerak .g-sasaran.hint { box-shadow: 0 0 0 4px var(--g-sinar), 0 5px 0 var(--g-sinar-d); }


/* ===================== G2 · App #2 gelombang 1 (tema malam; token sama untuk tema terang) ===================== */
.g-langkah-bar { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.g-langkah-bar[hidden] { display: none; }
.g-tersuai { display: flex; flex-direction: column; gap: 8px; }

/* E1 · label, dek (Asingkan Pantas), nod tetap & siratan (Rantai Makanan) */
.g-benda.g-lbl { grid-template-rows: auto auto; align-content: center; }
.g-benda.g-lbl .g-benda-lbl { display: block; max-width: 112px; font-size: 13px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.g-benda.g-lbl.g-dalam .g-benda-lbl { display: none; }
.g-benda.g-tanpa-gambar .g-benda-lbl { display: block; font-family: var(--g-tajuk); font-weight: 800; font-size: 18px; line-height: 1.15; }
.g-benda.g-tanpa-gambar.g-dalam { width: auto; min-width: 56px; max-width: 96px; padding: 4px 7px; }
.g-benda.g-tanpa-gambar.g-dalam .g-benda-lbl { display: block; font-size: 11px; font-weight: 700; }
.g-petak.g-penuh .g-petak-ph { display: none; }
.g-mod-slot .g-sasaran-baris { min-height: 96px; }

.g-dek .g-dulang { position: relative; align-items: center; min-height: 150px; }
.g-dek .g-dulang > .g-benda { position: relative; z-index: 1; width: 150px; min-height: 136px; padding: 10px 8px; gap: 6px; }
.g-dek .g-dulang > .g-benda:not(:first-of-type) { display: none; }
.g-dek .g-dulang > .g-benda .illus { width: 74px; height: 74px; }
.g-dek .g-dulang > .g-benda .g-benda-lbl { max-width: 134px; font-family: var(--g-tajuk); font-weight: 800; font-size: 16px; }
.g-dek .g-dulang > .g-benda.g-tanpa-gambar .g-benda-lbl { font-size: 21px; }
.g-dek .g-dulang.g-dek-tinggal::before, .g-dek .g-dulang.g-dek-tinggal::after { content: ""; position: absolute; left: 50%; top: 50%; width: 150px; height: 136px; margin: -68px 0 0 -75px; border-radius: 22px; background: var(--g-kad); box-shadow: 0 5px 0 var(--g-kad-b); pointer-events: none; }
.g-dek .g-dulang.g-dek-tinggal::before { transform: rotate(-6deg) translate(-6px, 5px); opacity: .45; }
.g-dek .g-dulang.g-dek-tinggal::after { transform: rotate(4deg) translate(5px, 3px); opacity: .7; }
.g-dek-baki { position: absolute; z-index: 2; left: calc(50% + 58px); top: calc(50% - 80px); min-width: 30px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--g-pilih); color: #fff; font-family: var(--g-tajuk); font-weight: 800; font-size: 15px; line-height: 26px; text-align: center; }
html.malam .g-dek-baki { color: #3A2400; }
.g-dek-baki:empty { display: none; }
.g-dek .g-sasaran-baris.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-dek .g-sasaran-baris.n3 .g-bakul-kepala b, .g-dek .g-sasaran-baris.n4 .g-bakul-kepala b { font-size: 15px; line-height: 1.1; text-align: center; }
.g-dek .g-sasaran-baris.n4 .g-bakul { min-height: 96px; }
.g-dek.g-mod-bakul .g-sasaran-baris { flex: 0 0 auto; max-height: none; min-height: 176px; }
.g-dek .g-sasaran-baris.n4 { min-height: 0; }
.g-dek .g-benda.g-dalam { width: 44px; height: 44px; padding: 3px; border-radius: 12px; }
.g-dek .g-benda.g-dalam .illus { width: 34px; height: 34px; }
.g-dek .g-benda.g-tanpa-gambar.g-dalam { width: auto; height: auto; min-height: 44px; max-width: 86px; }
.g-dek .g-benda.g-tanpa-gambar.g-dalam .g-benda-lbl { font-size: 10px; }
.g-dek .g-bakul-kepala { min-height: 46px; }

.g-sasaran-baris.g-bebas { display: block; position: relative; height: var(--tinggi, 240px); padding: 0; }
.g-bebas > .g-petak { position: absolute; width: 60px; height: 60px; min-width: 0; max-width: none; margin: -30px 0 0 -30px; border-radius: 50%; flex: none; aspect-ratio: auto; }
.g-bebas > .g-sasaran { box-shadow: inset 0 0 0 3px var(--g-garis); background: var(--g-lekuk); outline: 2px dashed var(--g-teks-2); outline-offset: -9px; }
.g-bebas > .g-sasaran.g-penuh { outline: 0; }
.g-bebas > .g-petak .g-benda.g-dalam { border-radius: 50%; }
.g-tetap { display: grid; place-items: center; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); }
.g-tetap .illus { width: 40px; height: 40px; }
.g-tetap .g-benda-lbl, .g-bebas > .g-petak .g-benda-lbl { display: block; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--g-teks-2); }
.g-siratan-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--g-teks-2); pointer-events: none; }
.g-siratan-svg line { stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

/* Rantai Makanan */
.g-rantai { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g-rantai-nota { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 700; color: var(--g-teks-2); }
.g-rantai-nota svg { width: 20px; height: 20px; color: var(--g-teks); }
.g-rantai-papan { display: flex; flex-direction: column; }
.g-rantai .g-dulang { min-height: 0; }
.g-fasa-ramal .g-dulang { display: none; }
.g-hilang { position: relative; }
.g-hilang .illus { filter: grayscale(1); opacity: .55; }
.g-hilang::after { content: ""; position: absolute; inset: 30%; opacity: .9; background: linear-gradient(45deg, transparent 44%, var(--g-salah) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--g-salah) 44% 56%, transparent 56%); pointer-events: none; }
.g-petak.g-ditanya, .g-tetap.g-ditanya { outline: 3px solid var(--g-sinar); outline-offset: 3px; }
.g-rantai-ramal { display: flex; flex-direction: column; gap: 8px; }
.g-rantai-ramal .g-soalan { font-size: 17px; }
.g-rantai-ramal .g-pilihan { font-size: 16px; }

/* Laluan Nombor */
.g-laluan-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; }
.g-lal-sasaran { display: flex; align-items: center; gap: 10px; padding: 2px 18px 4px; border-radius: 18px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); }
.g-lal-sasaran > span { font-size: 14px; font-weight: 700; color: var(--g-teks-2); }
.g-lal-sasaran b { font-family: var(--g-tajuk); font-weight: 800; font-size: 34px; line-height: 1.2; color: var(--g-sinar); }
.g-lal-tip { margin: 2px 0 0; font-size: 13px; color: var(--g-teks-2); text-align: center; }
.g-lal-papan { width: 100%; flex: 1; display: flex; }
.g-lal-papan .g-e3 { gap: 6px; justify-content: flex-start; }
.g-lal .g-grid { gap: 9px; width: min(100%, calc(var(--lajur) * 90px), 46vh); }
.g-lal .g-sel { font-size: clamp(24px, 7.4vw, 34px); border-radius: 18px; }
.g-lal.g-sel-kecil .g-sel { font-size: clamp(17px, 5.2vw, 24px); }
.g-lal.g-sel-pecahan .g-sel { font-size: clamp(19px, 5.8vw, 26px); }
.g-lal .g-ungkapan { min-height: 40px; font-size: 22px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 2px; }
.g-lal .g-ungkapan b { color: var(--g-sinar); margin-left: 2px; }

/* Sasar Garis Nombor (E2 mod anggar) */
.g-anggar { position: relative; justify-content: flex-start; gap: 4px; padding-top: 2px; }
.g-anggar-papan { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.g-anggar-lencana { align-self: center; display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 4px 18px; border-radius: 20px; background: var(--g-kad); box-shadow: 0 5px 0 var(--g-kad-b); }
.g-anggar-nilai { font-family: var(--g-tajuk); font-weight: 800; font-size: 34px; line-height: 1.1; color: var(--g-sinar); white-space: nowrap; }
.g-anggar-bintang { display: flex; gap: 3px; }
.g-anggar-bintang i { width: 20px; height: 20px; background: var(--g-garis); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.g-anggar-bintang i.on { background: var(--g-sinar); }
.g-anggar .g-garis-wrap { padding: 90px 34px 46px; }
.g-anggar .g-tanda { pointer-events: none; }
.g-anggar .g-tanda span { white-space: nowrap; font-size: 18px; }
.g-anggar.g-panjang .g-garis-wrap { padding-left: 46px; padding-right: 46px; }
.g-anggar.g-panjang .g-tanda span { font-size: 15px; }
.g-pin-anggar .g-pin-kepala { white-space: nowrap; }
.g-anggar .g-tengah i { height: 20px; margin-top: 4px; opacity: .45; }
.g-anggar .g-tengah span { font-size: 13px; font-weight: 700; color: var(--g-teks-2); }
.g-pin-anggar .g-pin-kepala { min-width: 56px; height: 56px; font-size: 24px; }
.g-pin-anggar .g-pin-kepala .fr i { font-size: .72em; }
.g-pin-anggar { transition: none; }
.g-bahagi { position: absolute; left: 0; right: 0; top: 4px; height: 26px; pointer-events: none; }
.g-bahagi i { position: absolute; top: 0; width: 3px; height: 26px; margin-left: -1.5px; border-radius: 2px; background: var(--g-aksen); opacity: .85; }
.g-bendera { position: absolute; top: 24px; width: 0; height: 0; z-index: 3; pointer-events: none; }
.g-bendera-tiang { position: absolute; left: -2px; top: 0; width: 4px; height: 44px; border-radius: 2px; background: var(--g-aksen); }
.g-bendera-kain { position: absolute; left: 2px; top: 22px; width: 30px; height: 22px; background: var(--g-aksen); clip-path: polygon(0 0, 100% 0, 76% 50%, 100% 100%, 0 100%); }
.g-anggar-pilih { display: flex; flex-direction: column; gap: 8px; }
.g-anggar-pilih:empty { display: none; }
.g-anggar-pilih .g-soalan { font-size: 17px; text-align: center; }
.g-anggar-pilih .g-pilihan { font-size: 22px; }

/* Juruwang Cilik: kaunter, resit, dulang baki, laci wang (not & syiling digayakan, bukan reka bentuk wang sebenar) */
.g-juruwang { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g-jw-kaunter { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px 8px 8px; border-radius: 20px; background: var(--g-kad); box-shadow: 0 5px 0 var(--g-kad-b); }
.g-jw-pelanggan { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; text-align: center; }
.g-jw-pelanggan .illus { width: 46px; height: 46px; }
.g-jw-resit { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.g-jw-resit li { display: flex; align-items: center; gap: 6px; min-height: 26px; transition: opacity .2s; }
.g-jw-resit li > span:not(.g-not) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-jw-resit li > b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-jw-resit .illus { flex: none; width: 24px; height: 24px; }
.g-jw-resit li[hidden] { display: none; }
.g-jw-resit li[data-b] + .g-jw-jumlah, .g-jw-diskaun + .g-jw-jumlah { margin-top: 2px; }
.g-jw-diskaun b { color: var(--g-salah); }
.g-jw-jumlah { padding-top: 3px; border-top: 2px dashed var(--g-garis); font-weight: 800; }
.g-jw-resit li[hidden] + .g-jw-jumlah, .g-jw-resit .g-jw-jumlah:first-child { border-top: 0; padding-top: 0; }
.g-jw-jumlah b { font-family: var(--g-tajuk); font-size: 17px; }
.g-jw-jumlah b.g-isi { color: var(--g-sinar); }
.g-jw-bayar { color: var(--g-teks-2); }
.g-jw-bayar .g-not { width: 58px; height: 30px; font-size: 13px; }
.g-jw-kerja .g-e5 { gap: 8px; }
.g-jw-kerja .g-soalan { font-size: 16px; }
.g-jw-kerja .g-pilihan { font-size: 17px; }
.g-jw-dulang { min-height: 56px; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 10px 12px; padding: 8px 6px 6px; border-radius: 16px; background: var(--g-lekuk); box-shadow: inset 0 0 0 2px var(--g-garis); }
.g-jw-dulang.ada .g-jw-kosong { display: none; }
.g-jw-dulang.g-betul { background: var(--g-betul-bg); box-shadow: inset 0 0 0 3px var(--g-aksen); }
.g-jw-kosong { font-size: 13px; color: var(--g-teks-2); }
.g-jw-dulang .g-wang { position: relative; min-height: 0; padding: 2px; }
.g-wang-n { position: absolute; right: -6px; top: -7px; min-width: 22px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--g-pilih); color: #3A2400; font-style: normal; font-family: var(--g-tajuk); font-weight: 800; font-size: 12px; line-height: 18px; text-align: center; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.v4 .g-wang-n { color: #fff; }
.g-jw-dulang .g-not { width: 50px; height: 27px; font-size: 11px; }
.g-jw-dulang .g-syiling { --d: 30px !important; }
.g-jw-diberi { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; font-size: 14px; font-weight: 700; color: var(--g-teks-2); }
.g-jw-diberi b { font-family: var(--g-tajuk); font-weight: 800; font-size: 20px; color: var(--g-teks); font-variant-numeric: tabular-nums; }
.g-jw-laci { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 18px; background: linear-gradient(180deg, #74502F, #5E4027); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .1), 0 4px 0 #3E2A18; }
.g-wang { min-height: 48px; padding: 0; border: 0; background: none; display: grid; place-items: center; border-radius: 10px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.g-wang:active:not(:disabled) { transform: translateY(2px); }
.g-wang:disabled { cursor: default; }
.g-jw-laci .g-wang.hint { animation: none; box-shadow: 0 0 0 3px var(--g-sinar); background: rgba(255, 182, 39, .18); }
.g-not { position: relative; overflow: hidden; width: 66px; height: 36px; border-radius: 6px; display: grid; place-items: center; background: var(--c, #3D7DD8); color: #fff; font-family: var(--g-tajuk); font-weight: 800; font-size: 14px; letter-spacing: .01em; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 2px 0 rgba(0, 0, 0, .3); }
.g-not::before { content: ""; position: absolute; right: -9px; top: -11px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.g-not::after { content: ""; position: absolute; left: 6px; bottom: 5px; width: 14px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.g-not b { position: relative; }
.g-not.n100 { --c: #3D7DD8; } .g-not.n500 { --c: #2E9E57; } .g-not.n1000 { --c: #D9443C; } .g-not.n2000 { --c: #E0861C; } .g-not.n5000 { --c: #19958C; } .g-not.n10000 { --c: #7A4FC9; }
.g-syiling { --d: 36px; width: var(--d); height: var(--d); border-radius: 50%; display: grid; place-items: center; color: #3A4250;
  background: radial-gradient(circle at 34% 30%, #FBFCFD, #C9D0D8 58%, #9AA4B0); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65), 0 2px 0 rgba(0, 0, 0, .3); }
.g-syiling b { display: flex; flex-direction: column; align-items: center; font-family: var(--g-tajuk); font-weight: 800; font-size: 13px; line-height: .95; }
.g-syiling small { font-size: 8px; font-weight: 700; }
.g-syiling.s10 { --d: 34px; } .g-syiling.s20 { --d: 38px; }
.g-syiling.s50 { --d: 42px; color: #5A3A00; background: radial-gradient(circle at 34% 30%, #FFF2C4, #E9BE55 58%, #C8922B); }

@media (max-height: 700px) {
  .g-dek .g-dulang { min-height: 128px; }
  .g-dek.g-mod-bakul .g-sasaran-baris { min-height: 150px; }
  .g-dek .g-dulang > .g-benda { width: 136px; min-height: 116px; padding: 8px 6px; }
  .g-dek .g-dulang > .g-benda .illus { width: 58px; height: 58px; }
  .g-dek .g-dulang.g-dek-tinggal::before, .g-dek .g-dulang.g-dek-tinggal::after { width: 136px; height: 116px; margin: -58px 0 0 -68px; }
  .g-dek-baki { left: calc(50% + 52px); top: calc(50% - 70px); }
  .g-sasaran-baris.g-bebas { height: calc(var(--tinggi, 240px) * .9); }
  .g-bebas > .g-petak { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .g-tetap .illus { width: 34px; height: 34px; }
  .g-lal-sasaran b { font-size: 28px; }
  .g-lal-tip { display: none; }
  .g-lal .g-grid { gap: 7px; width: min(100%, calc(var(--lajur) * 90px), 41vh); }
  .g-lal .g-ungkapan { min-height: 34px; font-size: 20px; }
  .g-anggar .g-garis-wrap { padding: 82px 30px 40px; }
  .g-anggar-lencana { min-height: 54px; }
  .g-anggar-nilai { font-size: 30px; }
  .g-jw-pelanggan .illus { width: 36px; height: 36px; }
  .g-jw-resit { font-size: 13px; }
  .g-jw-resit li { min-height: 21px; }
  .g-jw-resit .illus { width: 20px; height: 20px; }
  .g-jw-kaunter { padding: 6px 10px 6px 6px; }
  .g-jw-kerja .g-soalan:has(+ .g-tersuai) { display: none; }
  .g-jw-dulang { min-height: 46px; padding: 4px; }
  .g-jw-kerja .g-langkah-bar li { flex-direction: row; justify-content: center; gap: 5px; padding: 3px 2px; }
  .g-juruwang { gap: 6px; }
  .g-jw-laci { gap: 4px; padding: 6px; }
  .g-wang { min-height: 44px; }
  .g-rantai-ramal .g-pilihan { min-height: 46px; padding: 6px; }
}
.g-bebas > .g-petak .g-benda.g-dalam .illus { width: 40px; height: 40px; }
@media (max-height: 700px) { .g-bebas > .g-petak .g-benda.g-dalam .illus { width: 34px; height: 34px; } }

/* ===================== G4 · Makmal Ujian Adil & Litar Lampu (E5 penuh; App #2 tema malam, token terang sebagai sandaran) ===================== */
/* Atribut hidden mesti menang ke atas gaya butang (.b3 display) dalam game, cth. butang Teruskan gelangsar */
.g-stage [hidden] { display: none !important; }
/* Enjin E5: pilihan satu lajur (ayat KPS panjang), gelangsar masa, jadual data terisi sendiri */
.g-pilihan-grid.g-lajur { grid-template-columns: 1fr; gap: 8px; }
.g-pilihan-grid.g-lajur .g-pilihan { min-height: 48px; padding: 9px 14px; font-family: var(--g-baca); font-weight: 700; font-size: 15.5px; line-height: 1.3; align-items: flex-start; text-align: left; border-radius: 16px; }
.g-masa { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.g-masa output { flex: none; min-width: 88px; text-align: right; font-family: var(--g-tajuk); font-weight: 800; font-size: 19px; color: var(--g-sinar); white-space: nowrap; }
.g-kps-baris { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-kps-n { font-family: var(--g-tajuk); font-weight: 800; font-size: 14px; color: var(--g-teks-2); }
.g-masa input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; width: 100%; height: 48px; margin: 0; background: transparent; touch-action: none; cursor: pointer; --p: 0%; }
.g-masa input[type=range]::-webkit-slider-runnable-track { height: 14px; border-radius: 99px; background: linear-gradient(90deg, var(--g-sinar) var(--p), var(--g-lekuk) var(--p)); box-shadow: inset 0 0 0 2px var(--g-garis); }
.g-masa input[type=range]::-moz-range-track { height: 14px; border-radius: 99px; background: var(--g-lekuk); box-shadow: inset 0 0 0 2px var(--g-garis); }
.g-masa input[type=range]::-moz-range-progress { height: 14px; border-radius: 99px; background: var(--g-sinar); }
.g-masa input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 40px; margin-top: -13px; border-radius: 50%; background: var(--g-sinar); border: 4px solid #fff; box-shadow: 0 4px 0 var(--g-sinar-d), 0 6px 14px rgba(0, 0, 0, .3); }
.g-masa input[type=range]::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: var(--g-sinar); border: 4px solid #fff; box-shadow: 0 4px 0 var(--g-sinar-d); }
.g-masa input[type=range]:not(.g-digerak)::-webkit-slider-thumb { animation: g-tarik 1.4s ease-in-out infinite; }
@keyframes g-tarik { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
.g-masa input[type=range]:disabled { opacity: .55; }
.g-data { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 13.5px; }
.g-data th { text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--g-teks-2); padding: 0 8px 2px; }
.g-data td { background: var(--g-lekuk); padding: 5px 8px; font-weight: 700; line-height: 1.2; }
.g-data td:first-child { border-radius: 12px 0 0 12px; font-family: var(--g-tajuk); font-weight: 800; width: 34px; text-align: center; color: var(--g-sinar); }
.g-data td:last-child { border-radius: 0 12px 12px 0; }
.g-data td.g-akhir { background: var(--g-betul-bg); color: var(--g-teks); }
.g-data td.g-tulis { animation: g-tulis .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes g-tulis { from { opacity: .2; transform: translateY(4px); } }

/* Makmal: rak radas + jadual (pentas berubah ikut fasa langkah) */
.g-mk .g-pentas { padding: 8px 8px 6px; display: flex; flex-direction: column; gap: 6px; }
.g-mk-pentas { display: flex; flex-direction: column; gap: 6px; }
.g-mk-rak { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.g-mk-rak.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.g-mk-set { margin: 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.g-mk-set svg { width: 100%; max-width: 104px; height: auto; aspect-ratio: 90 / 110; display: block; overflow: visible; }
.g-mk-set figcaption { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--g-teks-2); line-height: 1.15; text-align: center; min-height: 30px; }
.g-mk-set figcaption b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--g-sinar); color: #3A2400; font-family: var(--g-tajuk); font-size: 13px; }
.g-mk-hud svg { display: block; width: 100%; height: auto; }
.g-mk-data { display: none; }
.g-mk[data-fasa="uji"] .g-mk-data, .g-mk[data-fasa="kps"] .g-mk-data { display: block; }
.g-mk[data-fasa="kps"] .g-mk-rak, .g-mk:not([data-fasa="uji"]) .g-mk-hud { display: none; }
.g-mk[data-fasa="uji"] .g-mk-set svg { max-width: 92px; }
.g-mk .g-kerja { gap: 8px; }
.g-mk .g-soalan { font-size: 17.5px; }
.g-mk .g-nota { font-size: 17px; }
.g-mk-huruf { font-family: var(--g-tajuk); font-size: 24px; line-height: 1; color: var(--g-sinar); }
.g-mk .g-pilihan-grid:not(.g-lajur) .g-pilihan { font-size: 14.5px; font-family: var(--g-baca); font-weight: 700; line-height: 1.2; padding: 8px 6px; }
/* Radas SVG (warna sama di kedua-dua tema; kaca & garis ikut tema) */
.mk-kaca { fill: rgba(255, 255, 255, .07); stroke: rgba(220, 235, 255, .85); stroke-width: 2.2; }
.mk-kaca-kilat { fill: none; stroke: none; }
.mk-air { fill: #4FA9F5; opacity: .55; } .mk-air-karat { fill: #C8742F; }
.mk-minyak { fill: #F2C14E; } .mk-gabus { fill: #C9A06A; } .mk-butir { fill: #E8EEF6; } .mk-garam { fill: #fff; }
.mk-karat { fill: #B5531F; }
.mk-kotak { fill: rgba(201, 154, 94, .2); stroke: #C99A5E; stroke-width: 2.2; }
.mk-lubang-kotak { fill: #FFF3B0; }
.mk-cahaya { fill: #FFE27A; opacity: .3; } .mk-matahari { fill: #FFD15C; }
.mk-sinar-garis { stroke: #FFD15C; stroke-width: 2; stroke-linecap: round; }
.mk-pasu { fill: #D9773A; }
.mk-kertas { fill: #E9E4D4; opacity: .55; } .mk-garis-kertas { stroke: rgba(30, 40, 60, .35); stroke-width: 1; }
.mk-span { fill: #F2D16B; opacity: .9; } .mk-lubang { fill: rgba(120, 80, 0, .35); }
.mk-jam { fill: #F45B69; } .mk-muka { fill: #fff; } .mk-jarum { fill: none; stroke: #33384A; stroke-width: 1.6; stroke-linecap: round; }
.mk-gelombang { fill: none; stroke: #FFD15C; stroke-width: 2.6; stroke-linecap: round; }
.mk-senyap { fill: none; stroke: #FF8A3D; stroke-width: 2.6; stroke-linecap: round; }
.mk-pembaris { fill: none; stroke: var(--g-teks-2); stroke-width: 2; stroke-linecap: round; }
.mk-teks { fill: var(--g-teks-2); font: 800 9px var(--g-tajuk); }
.mk-orang { fill: #FFB627; } .mk-mata { stroke: #3A2400; stroke-width: 2; stroke-linecap: round; }
.mk-logam { fill: #AEB8C2; } .mk-plastik { fill: #6FC3F7; opacity: .85; } .mk-polis { fill: #F4F1EA; } .mk-polis-titik { fill: rgba(150, 140, 120, .45); }
.mk-kilat { stroke: rgba(255, 255, 255, .65); stroke-width: 3; stroke-linecap: round; }
.mk-termo { fill: #F7FAFF; stroke: #9AA6B8; stroke-width: 1; } .mk-merah { fill: #E5484D; }
.mk-suhu { fill: var(--g-teks); font-size: 10px; }
.mk-wap { fill: none; stroke: rgba(220, 235, 255, .75); stroke-width: 2; stroke-linecap: round; }
.mk-wayar { fill: none; stroke: #F39A3A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mk-mentol { fill: rgba(255, 255, 255, .12); stroke: #E8EEF6; stroke-width: 1.8; } .mk-mentol.nyala { fill: #FFF3B0; }
.mk-filamen { fill: none; stroke: #7A6A4A; stroke-width: 1.2; } .mk-tapak { fill: #9AA6B8; }
.mk-sinar { fill: #FFE27A; transform-box: fill-box; transform-origin: center; }
.mk-sel { fill: #3A4256; stroke: #9AA6B8; stroke-width: 1.2; } .mk-sel-jalur { fill: #FFB627; } .mk-sel-hujung { fill: #9AA6B8; }
.mk-terminal { fill: #E8EEF6; } .mk-suis { stroke: #E8EEF6; stroke-width: 3; stroke-linecap: round; }
.mk-larutan { fill: #F2D58A; opacity: .7; } .mk-buih { fill: rgba(255, 255, 255, .8); }
.mk-belon-A { fill: #7CC4F2; } .mk-belon-B { fill: #FF8FA3; } .mk-belon-C { fill: #A99BFF; }
.mk-salji { fill: none; stroke: #BFE3FB; stroke-width: 1.6; stroke-linecap: round; }
.mk-pinggan { fill: #E9EEF5; } .mk-peti { fill: rgba(124, 196, 242, .12); stroke: #7CC4F2; stroke-width: 2; }
.mk-meja { stroke: #C99A5E; stroke-width: 3; stroke-linecap: round; }
.mk-retak { stroke: rgba(120, 70, 20, .55); stroke-width: 1.4; stroke-linecap: round; }
.mk-buku-1 { fill: #FF8FA3; } .mk-buku-2 { fill: #7CC4F2; } .mk-buku-3 { fill: #8EE07A; }
.mk-landasan { stroke: #C99A5E; stroke-width: 4; stroke-linecap: round; }
.mk-penamat { stroke: #E8EEF6; stroke-width: 1.5; stroke-dasharray: 3 3; } .mk-bendera { fill: #F45B69; }
.mk-troli { fill: #FFB627; } .mk-roda { fill: #3A4256; stroke: #E8EEF6; stroke-width: 1; }
.mk-sampai { fill: #2EBD59; } .mk-tanda { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html:not(.malam) .mk-kaca { fill: rgba(43, 156, 242, .06); stroke: #8FA3B8; }
html:not(.malam) .mk-mentol { fill: #F4F7FB; stroke: #8FA3B8; }
html:not(.malam) .mk-terminal, html:not(.malam) .mk-suis { stroke: #56695D; fill: #56695D; }
@media (max-height: 700px) {
  .g-mk .g-pentas { padding: 6px 6px 4px; }
  .g-mk-set svg { max-width: 80px; }
  .g-mk[data-fasa="sedia"] .g-mk-set svg { max-width: 58px; }
  .g-mk[data-fasa="uji"] .g-mk-set svg { max-width: 60px; }
  .g-mk-set figcaption { min-height: 22px; font-size: 11.5px; }
  .g-mk .g-soalan { font-size: 15.5px; }
  .g-mk[data-fasa="uji"] .g-kps-baris { display: none; }
  .g-mk .g-kerja { gap: 6px; }
  .g-mk .g-e5 { gap: 8px; }
  .g-pilihan-grid.g-lajur { gap: 6px; }
  .g-pilihan-grid.g-lajur .g-pilihan { min-height: 40px; padding: 6px 12px; font-size: 14px; }
  .g-mk[data-fasa="kps"] .g-data th { display: none; }
  .g-mk .g-langkah-bar li { flex-direction: row; justify-content: center; gap: 5px; padding: 3px 2px; }
  .g-data { font-size: 12.5px; border-spacing: 0 3px; }
  .g-data td { padding: 3px 8px; }
  .g-data th { font-size: 11px; padding-bottom: 0; }
  .g-masa input[type=range] { height: 42px; }
  .mq.mq-game:has(.g-mk) .qtext { font-size: 17px; }
}
/* Litar Lampu */
.g-data.g-data-teks td:first-child { width: auto; text-align: left; font-size: 12.5px; color: var(--g-teks); }
.g-lt .g-pentas { align-items: center; }
.g-lt-papan { position: relative; width: min(100%, 330px); }
.g-lt-wayar { display: block; width: 100%; height: auto; overflow: visible; }
.g-lt-potong { fill: var(--g-kad); }
.mk-klip-buaya { fill: #E5484D; } .mk-gigi { fill: none; stroke: #fff; stroke-width: 1; }
.mk-soket { fill: #9AA6B8; } .mk-sambung { fill: #F39A3A; } .mk-ulir { stroke: #6B7688; stroke-width: 1; }
.g-lt-tambah { fill: #fff; font: 800 13px var(--g-tajuk); }
.g-lt-slot { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 16px; border: 2.5px dashed var(--g-garis); background: rgba(255, 255, 255, .03); transition: border-color .15s, background .15s; touch-action: none; }
.g-lt-s-mentol { left: 50%; top: 18%; width: 64px; height: 72px; }
.g-lt-s-sel { left: 29.7%; top: 85.2%; width: 88px; height: 52px; }
.g-lt-s-celah { left: 70.3%; top: 85.2%; width: 84px; height: 60px; }
.g-lt-slot.g-penuh { border-color: transparent; background: none; }
.g-lt-slot.g-atas, .g-lt-slot.g-sedia { border-color: var(--g-pilih); background: var(--g-pilih-bg); }
.g-lt-s-celah.g-celah-on:not(:has(.g-lt-komp)) { border-color: var(--g-sinar); animation: g-sinar 1s ease-in-out infinite; }
.g-lt-bayang { opacity: .28; pointer-events: none; }
.g-lt-bayang .g-lt-ikon { width: 54px; }
.g-lt-celah-lbl { font-size: 12px; font-weight: 800; color: var(--g-teks-2); }
.g-lt-ikon { display: block; width: 52px; height: auto; overflow: visible; }
.g-lt-mentol { width: 40px; }
.g-lt-dulang { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.g-lt-komp { position: relative; min-width: 84px; min-height: 76px; padding: 6px 8px; border: 0; border-radius: 18px; background: var(--g-kad); box-shadow: 0 5px 0 var(--g-kad-b); color: var(--g-teks); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12.5px; font-weight: 700; line-height: 1.15; touch-action: none; cursor: grab; }
html.malam .g-lt-komp { background: var(--m3, #22305E); }
.g-lt-komp .illus { width: 40px; height: 40px; pointer-events: none; }
.g-lt-komp.g-pilih { box-shadow: 0 0 0 3px var(--g-pilih), 0 5px 0 var(--g-pilih); }
.g-lt-komp.g-angkat { opacity: .35; }
.g-lt-komp.g-dalam { min-width: 0; min-height: 0; padding: 0; background: none; box-shadow: none; cursor: default; }
.g-lt-s-celah .g-lt-komp.g-dalam { cursor: grab; }
.g-lt-s-celah .g-lt-komp.g-dalam [data-lbl], .g-lt-s-celah .g-lt-komp.g-dalam .g-lt-titik { display: none; }
.g-lt-s-mentol .g-lt-komp .g-lt-ikon { width: 52px; }
.g-lt-s-sel .g-lt-komp .g-lt-ikon { width: 74px; }
.g-lt-bahan-dulang .g-lt-komp { width: calc((100% - 16px) / 3); min-width: 0; max-width: 110px; }
.g-lt-titik { position: absolute; top: 5px; right: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--g-garis); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.g-lt-titik.on { background: #FFE27A; box-shadow: 0 0 0 3px rgba(255, 226, 122, .35), 0 0 10px 2px rgba(255, 226, 122, .7); }
.g-jd-benda .g-lt-titik { position: static; flex: none; width: 11px; height: 11px; }
.g-lt-ringkas { display: none; width: 100%; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.g-lt-ringkas p { margin: 2px 0; display: flex; gap: 8px; align-items: baseline; }
.g-lt-ringkas .g-lt-titik { position: static; flex: none; transform: translateY(2px); }
.g-lt[data-fasa="kps"] .g-lt-papan, .g-lt[data-fasa="kelas"] .g-lt-papan, .g-lt[data-fasa="jadual"] .g-lt-papan { display: none; }
.g-lt[data-fasa="kps"] .g-lt-ringkas { display: block; }
.g-lt[data-fasa="kelas"] .g-pentas, .g-lt[data-fasa="jadual"] .g-pentas { display: none; }
/* Mod litar: dua papan bersebelahan */
.g-lt-dua { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g-lt-litar { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.g-lt-kotak { position: relative; width: 100%; max-width: 160px; }
.g-lt-svg svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-lt-tajuk { font-family: var(--g-tajuk); font-weight: 800; font-size: 14px; color: var(--g-teks); }
.g-lt-suis, .g-lt-tekan-mentol, .g-lt-tambah-sel { position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid transparent; background: transparent; padding: 0; }
.g-lt-suis.hint, .g-lt-tekan-mentol.hint { border-color: var(--g-sinar); animation: g-sinar-bulat 1.2s ease-in-out infinite; }
@keyframes g-sinar-bulat { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 182, 39, .6); } 50% { box-shadow: 0 0 0 8px rgba(255, 182, 39, 0); } }
.g-lt-tambah-sel { width: 40px; height: 40px; background: var(--g-sinar); color: #3A2400; font: 800 26px/1 var(--g-tajuk); box-shadow: 0 4px 0 var(--g-sinar-d); border: 0; }
.g-lt-tambah-sel.hint { animation: g-sinar 1s ease-in-out infinite; }
.g-lt[data-fasa="kps"] .g-lt-dua { display: none; }
html.kurang-gerak .g-lt-suis.hint, html.kurang-gerak .g-lt-tekan-mentol.hint { box-shadow: 0 0 0 4px var(--g-sinar); }
.g-lt .g-jadual td { padding: 4px 6px; }
.g-lt .g-jd-benda { font-size: 13.5px; line-height: 1.15; }
@media (max-height: 700px) {
  .g-lt-papan { width: min(100%, 240px); }
  .g-lt-s-mentol { width: 50px; height: 56px; }
  .g-lt-s-mentol .g-lt-komp .g-lt-ikon { width: 44px; }
  .g-lt-s-sel { width: 70px; height: 42px; }
  .g-lt-s-sel .g-lt-komp .g-lt-ikon { width: 62px; }
  .g-lt-s-celah { width: 64px; height: 46px; }
  .g-lt-komp { min-height: 58px; padding: 3px 6px; font-size: 11.5px; border-radius: 14px; }
  .g-lt-komp .illus { width: 30px; height: 30px; }
  .g-lt-bahan-dulang { gap: 6px; }
  .g-lt-kotak { max-width: 132px; }
  .g-lt .g-jadual { border-spacing: 0 4px; }
  .g-lt .g-jd-benda { font-size: 12.5px; }
  .g-lt .g-jd-benda .illus { width: 26px; height: 26px; }
  .g-lt .g-pilihan-grid.kecil .g-pilihan { min-height: 40px; font-size: 13px; padding: 4px; }
  .g-lt .g-data { font-size: 12px; }
}

/* ===================== G5 · Math gelombang 2 (App #2 tema malam; token terang sebagai sandaran) ===================== */
@keyframes g-kelip { 50% { opacity: .35; } }
@keyframes g-denyut { 50% { transform: scale(1.18); } }
.g-stage .g-kiraan { pointer-events: none; }

/* Putar Jam: kad soalan, muka jam (seret jarum), bacaan digital, jalur hari 24 jam */
.g-jam { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g-jam-kad { position: relative; padding: 8px 10px 8px 12px; border-radius: 18px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); }
.g-jam-kad p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.g-jam-tanya-baris { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.g-jam-tanya-baris > b { font-family: var(--g-tajuk); font-weight: 800; font-size: 17px; color: var(--g-sinar); }
.g-jam-kad .g-kiraan { position: static; flex: none; padding: 1px 10px; font-size: 15px; }
.g-jam-badan { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g-jam-muka { width: min(64vw, 236px, 33vh); aspect-ratio: 1; touch-action: none; border-radius: 50%; cursor: grab; -webkit-tap-highlight-color: transparent; transition: width .25s ease; }
.g-jam-muka:focus-visible { outline: 3px solid var(--g-pilih); outline-offset: 4px; }
.g-jam-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.jm-bingkai { fill: var(--g-sinar); transition: fill .2s; }
.jm-muka { fill: #FFFBF2; }
.jm-tik { stroke: #A7AEBD; stroke-width: 1.4; }
.jm-tik5 { stroke: #2B3550; stroke-width: 3; stroke-linecap: round; }
.jm-no { font: 800 19px var(--g-tajuk); fill: #1F2A44; text-anchor: middle; }
.jm-mn { font: 800 10.5px var(--g-tajuk); fill: var(--g-teks-2); text-anchor: middle; }
.jm-j-jam path { stroke: #1F2A44; stroke-width: 8; stroke-linecap: round; }
.jm-j-minit path { stroke: #2B9CF2; stroke-width: 5; stroke-linecap: round; }
.jm-j-minit circle { fill: #2B9CF2; stroke: #fff; stroke-width: 3; }
.jm-tengah { fill: #1F2A44; }
.jm-hantu path { stroke: #FFB627; stroke-dasharray: 5 6; }
.jm-hantu circle { fill: none; stroke: #FFB627; stroke-width: 3; stroke-dasharray: 3 3; }
.jm-hantu.hint { animation: g-kelip 1s ease-in-out infinite; box-shadow: none; }
.g-jam-muka.g-pegang-minit .jm-a.jm-j-minit path, .g-jam-muka.g-pegang-jam .jm-a.jm-j-jam path { filter: drop-shadow(0 0 4px rgba(43, 156, 242, .7)); }
.g-jam-muka.g-betul .jm-bingkai { fill: var(--green, #2EBD59); }
.g-jam-bacaan { min-height: 30px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; }
.g-jam-bacaan b { font-family: var(--g-tajuk); font-weight: 800; font-size: 22px; color: var(--g-teks); font-variant-numeric: tabular-nums; }
.g-jam-lalu { padding: 2px 10px; border-radius: 99px; background: var(--g-sinar-bg); color: var(--g-sinar); font-family: var(--g-tajuk); font-weight: 800; font-size: 14px; }
.g-jam-hari { width: min(100%, 330px); }
.g-jh { position: relative; padding: 4px 16px 0; }
.g-jh-trek { position: relative; height: 18px; border-radius: 99px; overflow: hidden; background: linear-gradient(90deg, #1B2550 0%, #3F5FA8 24%, #9FD3F7 50%, #3F5FA8 76%, #1B2550 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.g-jh-malam .g-jh-trek { background: linear-gradient(90deg, #9FD3F7 0%, #3F5FA8 26%, #1B2550 50%, #3F5FA8 74%, #9FD3F7 100%); }
.g-jh-ap { position: absolute; top: 0; bottom: 0; width: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--g-tajuk); font-weight: 800; font-size: 10.5px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.g-jh-ap[data-ap="0"] { left: 0; } .g-jh-ap[data-ap="1"] { right: 0; }
.g-jh-mthr, .g-jh-bln { position: absolute; top: 3px; left: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; }
.g-jh-mthr { background: #FFD15C; box-shadow: 0 0 6px 2px rgba(255, 209, 92, .7); }
.g-jh-bln { display: none; background: #F4F1EA; box-shadow: inset -4px -2px 0 #1B2550; }
.g-jh-malam .g-jh-mthr { display: none; } .g-jh-malam .g-jh-bln { display: block; }
.g-jh-tanda { position: absolute; top: 0; width: 6px; height: 26px; margin-left: -3px; border-radius: 3px; background: var(--g-sinar); box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); transition: left .08s linear; }
.g-jh .g-jh-tanda { left: 16px; }
.g-jh-lbl { position: relative; height: 15px; margin-top: 3px; }
.g-jh-lbl span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--g-tajuk); font-weight: 800; font-size: 10.5px; color: var(--g-teks-2); }
.g-jam-pilih { display: flex; flex-direction: column; gap: 8px; }
.g-jam-pilih:empty { display: none; }
.g-jam-pilih .g-soalan { font-size: 17px; text-align: center; }
.g-jam-pilih .g-pilihan { font-size: 15.5px; line-height: 1.15; }
.g-jam-tanya .g-jam-muka { width: min(44vw, 168px, 25vh); }
.g-jam-tanya .g-jam-hari { display: none; }
html.kurang-gerak .g-jam-muka { transition: none; } html.kurang-gerak .jm-hantu.hint { animation: none; }

/* Kek Lapis Pecahan: kek berjalur (model pecahan), pinggan sama lebar dengan kek, pisau */
.g-kek .g-pentas { padding: 8px 8px 10px; }
.g-kek-pentas { display: flex; flex-direction: column; gap: 8px; }
.g-kek-nota { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 13.5px; font-weight: 700; color: var(--g-teks-2); line-height: 1.25; }
.g-kek-nota .g-kek-org b { display: none; }
.g-kek-kek { display: flex; gap: 3px; height: 50px; margin: 0 6px; border-radius: 8px; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, .06) 6px 12px); box-shadow: inset 0 0 0 2px var(--g-garis); }
.g-kek-hiris { flex: none; width: calc((100% - (var(--n) - 1) * 3px) / var(--n)); height: 100%; padding: 0; border: 0; border-radius: 4px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, #F7E3B5 0 11%, #2EBD59 11% 24%, #FFC53D 24% 37%, #FF8A1F 37% 50%, #F7E3B5 50% 61%, #2EBD59 61% 74%, #FFC53D 74% 87%, #FF8A1F 87% 100%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16), inset 0 2px 0 rgba(255, 255, 255, .35); }
.g-kek-hiris[style*="--n:1;"], .g-kek-hiris[style$="--n:1"] { border-radius: 8px; }
.g-kek-hiris:disabled { cursor: default; }
.g-kek-kek .g-kek-hiris:not(:disabled):active { transform: translateY(-3px); }
.g-kek-pinggan { display: flex; flex-direction: column; gap: 4px; padding: 4px 6px 10px; border-radius: 16px; background: var(--g-lekuk); box-shadow: inset 0 0 0 2px var(--g-garis); transition: background .15s, box-shadow .15s; }
.g-kek-pinggan.g-aktif { background: var(--g-pilih-bg); box-shadow: inset 0 0 0 3px var(--g-pilih); }
.g-kek-pinggan.g-betul { background: var(--g-betul-bg); box-shadow: inset 0 0 0 3px var(--green, #2EBD59); }
.g-kek-tag { display: flex; align-items: center; gap: 6px; min-height: 30px; font-size: 13px; font-weight: 700; }
.g-kek-org { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.g-kek-org .illus { width: 26px; height: 26px; }
.g-kek-pesan { padding: 1px 8px; border-radius: 10px; background: var(--g-kad); font-family: var(--g-tajuk); font-weight: 800; font-size: 16px; color: var(--g-sinar); white-space: nowrap; }
.g-kek-pesan.hint { animation: g-sinar-dalam 1s ease-in-out infinite; box-shadow: 0 0 0 3px var(--g-sinar); }
.g-kek-isi { margin-left: auto; font-family: var(--g-tajuk); font-weight: 800; font-size: 16px; color: var(--g-teks); white-space: nowrap; }
.g-kek-isi i { font-style: normal; color: var(--g-teks-2); margin: 0 2px; }
.g-kek-dulang { position: relative; display: flex; flex-wrap: wrap; align-content: flex-end; gap: 3px; height: 40px; }
.g-kek-dulang.g-dua { height: 83px; }
.g-kek-dulang::before { content: ""; position: absolute; left: -6px; right: -6px; bottom: -7px; height: 12px; border-radius: 50%; background: rgba(233, 238, 245, .9); box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.g-kek-dulang .g-kek-hiris { position: relative; height: 40px; }
.g-kek-agih { display: flex; gap: 6px; justify-content: center; }
.g-kek-agih[hidden] { display: none; }
.g-kek-kecil { flex: 1; max-width: 84px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: var(--g-lekuk); box-shadow: inset 0 0 0 2px var(--g-garis); }
.g-kek-kecil .illus { width: 22px; height: 22px; }
.g-kek-org-titik { width: 18px; height: 18px; border-radius: 50%; background: var(--g-garis); }
.g-kek-kecil-isi { display: flex; gap: 2px; height: 28px; justify-content: center; }
.g-kek-kecil-isi .g-kek-hiris { width: 12px; height: 28px; }
.g-kek-pisau { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.g-kek-pisau-b { min-width: 54px; min-height: 54px; padding: 4px 6px; border: 0; border-radius: 16px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); color: var(--g-teks); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--g-tajuk); font-weight: 800; font-size: 19px; line-height: 1; -webkit-tap-highlight-color: transparent; }
html.malam .g-kek-pisau-b { background: var(--m3, #22305E); }
.g-kek-pisau-b svg { width: 20px; height: 20px; fill: var(--g-teks-2); margin-bottom: 2px; }
.g-kek-pisau-b:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--g-kad-b); }
.g-kek-pisau-b.g-pilih { box-shadow: 0 0 0 3px var(--g-pilih), 0 4px 0 var(--g-pilih); }
.g-kek-pisau-b.g-betul { background: var(--g-betul-bg); box-shadow: 0 0 0 3px var(--green, #2EBD59), 0 4px 0 var(--g-aksen-d); }
.g-kek-pisau-b.g-salah { background: var(--g-salah-bg); box-shadow: 0 0 0 3px var(--g-salah), 0 4px 0 var(--g-salah-d); opacity: .7; }
.g-kek-pisau-b.hint { background: var(--g-sinar-bg); }
.g-kek-pisau-b:disabled { cursor: default; }
.g-kek-pisau-lbl { margin: 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--g-teks-2); }
.g-kek .g-pilihan .fr, .g-kek-fr { font-size: 24px; }
.g-kek-pesan .fr, .g-kek-isi .fr { font-size: 17px; }
.g-kek .g-soalan { font-size: 17px; }

/* Neraca Seimbang: rasuk berputar di paksi, piring tergantung, anak timbang (warna besi / tembaga / perak) */
.g-neraca .g-pentas { padding: 6px; }
.g-nr { display: flex; flex-direction: column; gap: 4px; }
.g-nr-atas { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 32px; }
.g-nr-papan { position: relative; height: 188px; overflow: hidden; }
.g-nr-ayat { padding: 2px 10px; border-radius: 12px; background: var(--g-lekuk); font-family: var(--g-tajuk); font-weight: 800; font-size: 15px; white-space: nowrap; }
.g-nr-kotak-kecil { display: inline-grid; place-items: center; width: 22px; height: 20px; border-radius: 5px; background: #B57EDC; color: #fff; font-size: 13px; vertical-align: -3px; }
.g-nr-tiang { position: absolute; left: 0; top: 0; width: 12px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, #7D5F3B, #B88C58); }
.g-nr-tapak { position: absolute; left: 50%; bottom: 2px; width: 120px; height: 12px; margin-left: -60px; border-radius: 8px; background: #7D5F3B; }
.g-nr-rasuk { position: absolute; left: 0; top: 0; height: 10px; border-radius: 5px; background: linear-gradient(180deg, #E8BE73, #B8863E); transform-origin: 50% 50%; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); transition: transform .7s cubic-bezier(.34, 1.3, .64, 1); z-index: 2; }
.g-nr-paksi { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--g-sinar); box-shadow: inset 0 0 0 3px #B8863E; z-index: 3; }
.g-nr-piring { position: absolute; left: 0; top: 0; width: 38%; max-width: 140px; height: 124px; transition: transform .7s cubic-bezier(.34, 1.3, .64, 1); z-index: 1; }
.g-nr-tali { position: absolute; left: 4%; top: 0; width: 92%; height: 102px; overflow: visible; }
.g-nr-tali path { fill: none; stroke: #C9A06A; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.g-nr-pinggan { position: absolute; left: 0; right: 0; top: 100px; height: 12px; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(180deg, #D7DEE8, #9FAABB); }
.g-nr-isi { position: absolute; left: 4px; right: 4px; bottom: 24px; display: flex; flex-wrap: wrap-reverse; justify-content: center; align-items: flex-end; gap: 2px; }
.g-nr-jumlah { position: absolute; left: -10px; right: -10px; top: 112px; text-align: center; font-family: var(--g-tajuk); font-weight: 800; font-size: 13px; color: var(--g-teks); white-space: nowrap; }
.g-nr-status { align-self: center; padding: 2px 12px; border-radius: 99px; background: var(--g-lekuk); font-family: var(--g-tajuk); font-weight: 800; font-size: 13px; color: var(--g-teks-2); white-space: nowrap; }
.g-nr-status.g-ok { background: var(--g-betul-bg); color: var(--green, #2EBD59); }
.g-nr-w { position: relative; flex: none; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.g-nr-w svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-nr-w b { position: relative; margin-top: 30%; font-family: var(--g-tajuk); font-weight: 800; font-size: 10px; color: #fff; white-space: nowrap; letter-spacing: -.02em; }
.nr-badan, .nr-tombol { fill: #4A5468; }
.g-nr-w.w1000 { width: 46px; height: 46px; } .g-nr-w.w500 { width: 42px; height: 42px; } .g-nr-w.w200 { width: 38px; height: 38px; } .g-nr-w.w100 { width: 35px; height: 35px; }
.g-nr-w.w50 { width: 33px; height: 33px; } .g-nr-w.w20 { width: 31px; height: 31px; } .g-nr-w.w10 { width: 30px; height: 30px; }
.g-nr-w.w200 .nr-badan, .g-nr-w.w200 .nr-tombol, .g-nr-w.w100 .nr-badan, .g-nr-w.w100 .nr-tombol { fill: #C9973A; }
.g-nr-w.w50 .nr-badan, .g-nr-w.w50 .nr-tombol, .g-nr-w.w20 .nr-badan, .g-nr-w.w20 .nr-tombol, .g-nr-w.w10 .nr-badan, .g-nr-w.w10 .nr-tombol { fill: #B9C3CE; }
.g-nr-w.w50 b, .g-nr-w.w20 b, .g-nr-w.w10 b { color: #263045; font-size: 9px; }
.g-nr-w.w200 b, .g-nr-w.w100 b { color: #3A2400; }
.g-nr-isi .g-nr-w:disabled { cursor: default; }
.g-nr-dulang { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.g-nr-dulang.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .g-nr-dulang.n7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.g-nr-dulang .g-nr-w { width: auto; height: 56px; border-radius: 14px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); }
html.malam .g-nr-dulang .g-nr-w { background: var(--m3, #22305E); }
.g-nr-dulang .g-nr-w svg { inset: 6px 4px 4px; width: calc(100% - 8px); height: calc(100% - 10px); }
.g-nr-dulang .g-nr-w b { font-size: 11px; }
.g-nr-dulang .g-nr-w:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--g-kad-b); }
.g-nr-dulang .g-nr-w.hint { background: var(--g-sinar-bg); }
.g-nr-bungkus { display: grid; place-items: center; min-width: 50px; height: 40px; padding: 0 6px; border-radius: 12px 12px 8px 8px; background: #E8C58C; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); color: #4A3410; font-family: var(--g-tajuk); font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.g-nr-bungkus.besar { min-width: 62px; height: 50px; font-size: 14px; }
.g-nr-slot { display: grid; place-items: center; }
.g-nr-kotak { display: grid; place-items: center; width: 44px; height: 40px; border-radius: 8px; background: #B57EDC; color: #fff; font-family: var(--g-tajuk); font-weight: 800; font-size: 22px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
.g-nr-parkir { display: flex; align-items: center; gap: 6px; font-family: var(--g-tajuk); font-weight: 800; font-size: 15px; white-space: nowrap; }
.g-nr-parkir[hidden] { display: none; }
.g-nr-parkir .g-nr-kotak { width: 34px; height: 30px; font-size: 18px; }
.g-nr-benda .illus { width: 62px; height: 62px; display: block; }
.g-nr-tip { margin: 0; text-align: center; font-size: 12.5px; color: var(--g-teks-2); }
.g-nr.g-seimbang .g-nr-rasuk { background: linear-gradient(180deg, #7BE08F, #2EBD59); }
html.kurang-gerak .g-nr-rasuk, html.kurang-gerak .g-nr-piring { transition-duration: .2s; transition-timing-function: ease-out; }

/* Pagar Kebun: rumput, tanah bertunas (luas), pagar bertiang (perimeter), bucu kuning untuk diseret */
.g-pagar { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.g-pg-tugas { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 16px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); font-family: var(--g-tajuk); font-weight: 800; font-size: 15.5px; line-height: 1.25; }
.g-pg-luas { flex: none; color: var(--g-sinar); }
.g-pg-papan { display: flex; justify-content: center; border-radius: 16px; transition: box-shadow .2s; }
.g-satah { width: 100%; max-width: 380px; height: auto; display: block; touch-action: none; overflow: visible; -webkit-tap-highlight-color: transparent; }
.st-grid { stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
html:not(.malam) .st-grid { stroke: rgba(30, 58, 44, .16); }
.pg-rumput { fill: #2C6B3D; } html:not(.malam) .pg-rumput { fill: #CDEBC8; }
.pg-tanah { fill: #8A5A35; stroke: rgba(0, 0, 0, .14); stroke-width: 1; }
.pg-tunas { fill: none; stroke: #8EE89D; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pg-pagar { fill: none; stroke: #FFD15C; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pg-tiang { fill: #FFF3D6; stroke: #B8863E; stroke-width: 1.5; }
.pg-ukur { font-family: var(--g-tajuk); font-weight: 800; font-size: 14px; fill: var(--g-teks); }
.pg-bucu-sentuh { fill: transparent; }
.pg-bucu-b { fill: var(--g-sinar); stroke: #fff; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: g-denyut 1.4s ease-in-out infinite; }
.pg-bucu-p { fill: none; stroke: #3A2400; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.pg-bucu.g-mati .pg-bucu-b, .g-pagar.g-selesai .pg-bucu-b { animation: none; }
.pg-hint { fill: rgba(255, 182, 39, .12); stroke: #FFB627; stroke-width: 3; stroke-dasharray: 7 5; pointer-events: none; animation: g-kelip 1.1s ease-in-out infinite; }
.g-pg-papan.g-betul .pg-pagar { stroke: #7BE08F; }
.g-pg-jadual { width: min(100%, 300px); margin: 0 auto; }
.g-pg-jadual td:first-child { width: auto; text-align: left; font-family: var(--g-baca); color: var(--g-teks); }
.g-pg-jadual tbody:empty { display: none; }
.g-pg-jadual tr.g-pg-terbaik td { background: var(--g-betul-bg); }
.g-pg-pilih { display: flex; flex-direction: column; gap: 8px; }
.g-pg-pilih:empty { display: none; }
.g-pg-pilih .g-soalan { font-size: 17px; text-align: center; }
.g-pg-tanya .g-satah { max-width: 290px; }
html.kurang-gerak .pg-bucu-b, html.kurang-gerak .pg-hint { animation: none; }

/* Harta Karun Koordinat: laut + pulau, paksi berlabel, peti harta, bot & arahan */
.g-harta { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.g-ht-kad { position: relative; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 56px 4px 6px; border-radius: 16px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); }
.g-ht-kapten { flex: none; width: 44px; height: 44px; object-fit: contain; }
.g-ht-kad p { margin: 0; font-family: var(--g-tajuk); font-weight: 800; font-size: 16px; line-height: 1.25; }
.g-ht-kad .g-kiraan { top: 50%; right: 8px; transform: translateY(-50%); }
.g-ht-peta { display: flex; justify-content: center; }
.ht-laut { fill: #1C5F92; }
.ht-pulau { fill: #D8B26B; }
.ht-satah .st-grid { stroke: rgba(255, 255, 255, .42); }
.st-paksi { stroke: #fff; stroke-width: 2.6; }
html:not(.malam) .st-paksi { stroke: var(--g-teks); }
.st-panah { fill: none; stroke: var(--g-teks); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.st-lbl { font-family: var(--g-tajuk); font-weight: 800; font-size: 12.5px; fill: var(--g-teks); }
.st-paksi-nama { font-family: var(--g-tajuk); font-weight: 800; font-style: italic; font-size: 14px; fill: var(--g-sinar); }
.ht-silang { stroke: #FF8A3D; stroke-width: 3.5; stroke-linecap: round; }
.ht-panduan { fill: none; stroke: #FFD15C; stroke-width: 3.5; stroke-dasharray: 6 5; stroke-linecap: round; animation: g-kelip 1.1s ease-in-out infinite; }
.ht-muncul > .ht-pop { transform-box: fill-box; transform-origin: 50% 100%; animation: ht-muncul .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes ht-muncul { from { transform: scale(.2) translateY(10px); opacity: 0; } }
.ht-batu { fill: #77839A; stroke: #4E596E; stroke-width: 1.2; }
.ht-batu-k { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; stroke-linecap: round; }
.ht-bot-badan { fill: #FF8A3D; stroke: #B85A1F; stroke-width: 1; }
.ht-bot-tiang { stroke: #fff; stroke-width: 2; }
.ht-bot-layar { fill: #fff; }
.ht-jejak { fill: none; stroke: #FFD15C; stroke-width: 3; stroke-dasharray: 1 6; stroke-linecap: round; stroke-linejoin: round; }
.ht-hantu { fill: none; stroke: #FFD15C; stroke-width: 6; opacity: .55; stroke-linecap: round; stroke-linejoin: round; animation: g-kelip 1.1s ease-in-out infinite; }
.g-ht-bawah { display: flex; flex-direction: column; gap: 8px; }
.g-ht-tip { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--g-teks-2); }
.g-ht-prog { display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 4px 8px; border-radius: 14px; background: var(--g-lekuk); box-shadow: inset 0 0 0 2px var(--g-garis); overflow-x: auto; scrollbar-width: none; }
.g-ht-prog-kosong { font-size: 13px; font-weight: 700; color: var(--g-teks-2); }
.g-ht-prog.ada .g-ht-prog-kosong { display: none; }
.g-ht-cip { flex: none; padding: 3px 10px; border-radius: 10px; background: var(--g-pilih); color: #3A2400; font-family: var(--g-tajuk); font-weight: 800; font-size: 18px; white-space: nowrap; }
.v4 .g-ht-cip { color: #fff; }
.g-ht-arah { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.g-ht-ab { min-height: 52px; border: 0; border-radius: 16px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); color: var(--g-teks); font-family: var(--g-tajuk); font-weight: 800; font-size: 28px; line-height: 1; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
html.malam .g-ht-ab { background: var(--m3, #22305E); }
.g-ht-ab:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--g-kad-b); }
.g-ht-padam { color: var(--g-teks-2); }
.g-ht-padam svg { width: 26px; height: 26px; }
.g-ht-bawah .g-soalan { font-size: 17px; text-align: center; }
.g-ht-bawah .g-pilihan { font-size: 20px; }
html.kurang-gerak .ht-panduan, html.kurang-gerak .ht-hantu { animation: none; }

/* Bina Carta: carta palang boleh ditarik (skala 10 selang berlabel), gundal / kekerapan di bawah setiap lajur, piktograf */
.g-carta { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.g-ct-tajuk { margin: 0; text-align: center; font-family: var(--g-tajuk); font-weight: 800; font-size: 15px; line-height: 1.2; }
.g-ct-carta { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 4px; height: 318px; padding: 26px 8px 6px 2px; border-radius: 18px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); transition: height .3s ease; }
.g-ct-paksi { position: relative; }
.g-ct-paksi span { position: absolute; right: 2px; transform: translateY(50%); font-family: var(--g-tajuk); font-weight: 800; font-size: 11px; color: var(--g-teks-2); line-height: 1; }
.g-ct-plot { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; padding: 0 4px; border-left: 2px solid var(--g-teks-2); border-bottom: 2px solid var(--g-teks-2); }
.g-ct-garis { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(255, 255, 255, .16); pointer-events: none; }
html:not(.malam) .g-ct-garis { border-top-color: rgba(30, 58, 44, .16); }
.g-ct-lajur { position: relative; display: flex; align-items: flex-end; justify-content: center; touch-action: none; cursor: ns-resize; border-radius: 8px 8px 0 0; -webkit-tap-highlight-color: transparent; }
.g-ct-lajur:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--g-pilih); }
.g-ct-lajur.g-angkat { background: rgba(255, 255, 255, .05); }
.g-ct-palang { position: relative; width: 72%; max-width: 48px; border-radius: 8px 8px 0 0; background: var(--g-pilih); transition: height .08s linear; }
.g-ct-nilai { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -12px); font-family: var(--g-tajuk); font-weight: 800; font-size: 14px; color: var(--g-teks); white-space: nowrap; }
.g-ct-kosong .g-ct-nilai { opacity: .55; }
.g-ct-pegang { position: absolute; left: 50%; top: -6px; width: 30px; height: 12px; margin-left: -15px; border-radius: 6px; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.g-ct-kosong .g-ct-pegang { animation: g-tarik-naik 1.4s ease-in-out infinite; }
@keyframes g-tarik-naik { 50% { transform: translateY(-6px); } }
.g-ct-lajur.g-betul .g-ct-palang { background: var(--green, #2EBD59); }
.g-ct-lajur.g-betul .g-ct-pegang { display: none; }
.g-ct-lajur.g-salah .g-ct-palang { background: var(--g-salah); }
.g-ct-hantu { position: absolute; bottom: 0; left: 50%; width: 72%; max-width: 48px; transform: translateX(-50%); border: 3px dashed #FFB627; border-bottom: 0; border-radius: 8px 8px 0 0; pointer-events: none; box-sizing: border-box; }
.g-ct-hantu.hint { animation: g-kelip 1s ease-in-out infinite; box-shadow: none; }
.g-ct-label { grid-column: 2; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; padding: 5px 4px 0; }
.g-ct-lbl { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.1; }
.g-ct-lbl .illus { width: 22px; height: 22px; }
.g-ct-lbl b { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-ct-lbl em { font-style: normal; font-family: var(--g-tajuk); font-weight: 800; font-size: 15px; color: var(--g-sinar); }
.g-ct-gundal { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; max-width: 52px; }
.g-ct-gundal svg { height: 18px; width: auto !important; stroke: var(--g-teks); stroke-width: 2; stroke-linecap: round; flex: none; }
.g-ct-pilih { display: flex; flex-direction: column; gap: 8px; }
.g-ct-pilih:empty { display: none; }
.g-ct-pilih .g-soalan { font-size: 17px; text-align: center; }
.g-ct-siap .g-ct-carta { height: 236px; }
.g-ct-baris { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 18px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); }
.g-ct-row { display: grid; grid-template-columns: 58px 46px minmax(0, 1fr) 42px 42px; align-items: center; gap: 4px; min-height: 46px; padding: 2px 4px; border-radius: 12px; transition: background .15s; }
.g-ct-nama { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-ct-ikon-isi { display: flex; flex-wrap: wrap; gap: 1px; min-height: 22px; align-items: center; }
.g-ct-ikon { width: 20px; height: 20px; flex: none; }
.g-ct-tambah, .g-ct-tolak { width: 42px; height: 42px; border: 0; border-radius: 12px; font-family: var(--g-tajuk); font-weight: 800; font-size: 24px; line-height: 1; -webkit-tap-highlight-color: transparent; }
.g-ct-tolak { background: var(--g-lekuk); color: var(--g-teks); box-shadow: inset 0 0 0 2px var(--g-garis); }
.g-ct-tambah { background: var(--g-pilih); color: #3A2400; box-shadow: 0 3px 0 var(--g-sinar-d); }
.v4 .g-ct-tambah { color: #fff; }
.g-ct-tambah:active, .g-ct-tolak:active { transform: translateY(2px); }
.g-ct-tambah.hint, .g-ct-tolak.hint { animation: g-sinar 1s ease-in-out infinite; }
.g-ct-row.g-betul { background: var(--g-betul-bg); } .g-ct-row.g-betul button { visibility: hidden; }
.g-ct-row.g-salah { background: var(--g-salah-bg); }
.g-ct-kunci { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--g-teks-2); }
html.kurang-gerak .g-ct-kosong .g-ct-pegang, html.kurang-gerak .g-ct-hantu.hint { animation: none; }

@media (max-height: 700px) {
  .g-jam { gap: 5px; }
  .g-jam-kad { padding: 6px 10px; }
  .g-jam-kad p { font-size: 13.5px; } .g-jam-tanya-baris > b { font-size: 15px; }
  .g-jh-lbl { display: none; } .g-jh { padding-top: 2px; }
  .g-jam-muka { width: min(52vw, 178px, 27vh); }
  .g-jam-bacaan { min-height: 24px; } .g-jam-bacaan b { font-size: 18px; }
  .g-jam-tanya .g-jam-muka { width: min(36vw, 128px, 20vh); }
  .g-jam-pilih .g-pilihan { min-height: 44px; padding: 6px; font-size: 14px; }
  .g-kek-kek { height: 42px; }
  .g-kek-dulang { height: 34px; } .g-kek-dulang.g-dua { height: 71px; } .g-kek-dulang .g-kek-hiris { height: 34px; }
  .g-kek-tag { min-height: 26px; }
  .g-kek-pisau-b { min-width: 48px; min-height: 48px; font-size: 17px; }
  .g-kek-pisau-b svg { width: 16px; height: 16px; }
  .g-kek .g-pentas { padding: 6px 6px 8px; } .g-kek-pentas { gap: 6px; }
  .g-kek .g-soalan { font-size: 15.5px; }
  .g-kek .g-langkah-bar li { flex-direction: row; justify-content: center; gap: 5px; padding: 3px 2px; }
  .g-nr-papan { height: 168px; } .g-nr-atas { min-height: 28px; } .g-nr-ayat, .g-nr-parkir { font-size: 13.5px; }
  .g-nr-piring { height: 112px; } .g-nr-tali { height: 90px; } .g-nr-pinggan { top: 88px; } .g-nr-jumlah { top: 100px; }
  .g-nr-dulang .g-nr-w { height: 50px; }
  .g-neraca .g-soalan { font-size: 15.5px; }
  .g-neraca .g-langkah-bar li { flex-direction: row; justify-content: center; gap: 5px; padding: 3px 2px; }
  .g-pg-tugas { padding: 6px 10px; font-size: 14px; }
  .g-satah { max-width: 330px; }
  .g-pg-tanya .g-satah { max-width: 230px; }
  .g-ht-kapten { width: 36px; height: 36px; } .g-ht-kad { min-height: 44px; } .g-ht-kad p { font-size: 14.5px; }
  .g-ht-ab { min-height: 46px; font-size: 24px; }
  .g-ht-prog { min-height: 38px; }
  .g-ct-carta { height: 262px; }
  .g-ct-siap .g-ct-carta { height: 186px; }
  .g-ct-row { min-height: 42px; }
}

/* ===================== G6 · Sains gelombang 2: Putar Bulan, Tuas Ajaib, Menara Stabil (App #2 tema malam) ===================== */
/* Kad soalan dikongsi G6 (rupa sama dengan kad Putar Jam) */
.g-bl-kad, .g-tu-kad { position: relative; padding: 8px 10px 8px 12px; border-radius: 18px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); display: flex; flex-direction: column; gap: 3px; }
.g-bl-kad p, .g-tu-kad p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.g-bl-tanya-baris, .g-tu-tanya-baris { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-bl-tanya-baris > b, .g-tu-tanya-baris > b { font-family: var(--g-tajuk); font-weight: 800; font-size: 17px; color: var(--g-sinar); }
.g-bl-kad .g-kiraan, .g-tu-kad .g-kiraan { position: static; flex: none; margin-left: auto; padding: 1px 10px; font-size: 15px; }
.g-bl-kad .g-kps-baris[hidden], .g-tu-kad .g-kps-baris[hidden] { display: none; }

/* Putar Bulan: pandangan dari atas (Matahari, Bumi, orbit), tetingkap "Dari Bumi" */
.g-bl { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g-bl > * { flex: none; } /* papan tidak dihimpit (overflow hidden memotong bahagian bawah) */
.g-bl-papan { width: 100%; max-width: 380px; margin: 0 auto; border-radius: 20px; background: radial-gradient(120% 90% at 0% 50%, rgba(255, 209, 92, .16), transparent 55%), #0A1430; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06); touch-action: none; cursor: grab; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.g-bl-papan.g-pegang { cursor: grabbing; }
.g-bl-papan:focus-visible { outline: 3px solid var(--g-pilih); outline-offset: 3px; }
.g-bl-svg { display: block; width: 100%; height: auto; }
.bl-mthr { fill: #FFD15C; } .bl-mthr-cahaya { fill: #FFD15C; opacity: .18; }
.bl-sinar { fill: none; stroke: #FFD15C; stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .45; }
.bl-lbl { font: 800 11px var(--g-tajuk); fill: rgba(255, 255, 255, .78); text-anchor: middle; }
.bl-lbl-mthr { fill: #FFD15C; text-anchor: start; }
.bl-orbit { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; stroke-dasharray: 4 5; }
.bl-titik { fill: rgba(255, 255, 255, .35); }
.bl-arah { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bl-laut { fill: #2F80ED; } .bl-darat { fill: #3DBE6A; } .bl-malam { fill: #050B1E; opacity: .62; }
.bl-tompok { fill: #000; opacity: .75; }
.bl-umbra { fill: #000; opacity: .42; }
.bl-sentuh { fill: transparent; }
.bl-gelap { fill: #39415A; } .bl-terang { fill: #F4F1EA; transition: fill .3s; } .bl-garis { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; }
.bl-cincin { fill: none; stroke: transparent; stroke-width: 2.5; stroke-dasharray: 4 3; }
.g-pegang .bl-cincin, .bl-bulan.g-pilih-bl .bl-cincin { stroke: var(--g-sinar); }
.bl-bulan.g-pilih-bl .bl-cincin { animation: g-kelip 1s ease-in-out infinite; }
.bl-bulan.g-betul-bl .bl-cincin { stroke: var(--green, #2EBD59); stroke-dasharray: none; animation: none; }
.g-bl[data-gerhana="gb"] .bl-terang { fill: #A8462A; }
.bl-hantu { fill: rgba(255, 182, 39, .15); stroke: #FFB627; stroke-width: 2.5; stroke-dasharray: 4 3; pointer-events: none; }
.bl-hantu.hint { animation: g-kelip 1s ease-in-out infinite; box-shadow: none; }
.g-bl-pandang { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; }
.g-bl-tt { width: 64px; height: 64px; flex: none; }
.g-bl-tt-svg { display: block; width: 100%; height: 100%; }
.bl-tt-langit { fill: #050B1E; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
.bl-bintang { fill: #fff; opacity: .7; }
.bl-tt-gelap { fill: #2A3350; } .bl-tt-terang { fill: #F4F1EA; transition: fill .3s; } .bl-tt-garis { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1; }
.g-bl-ikon .bl-tt-garis { stroke: rgba(255, 255, 255, .45); }
.g-bl[data-gerhana="gb"] .bl-tt-terang { fill: #A8462A; }
.bl-tt-korona { fill: #FFF3B0; opacity: .55; } .bl-tt-mthr-cakera { fill: #FFD15C; } .bl-tt-penutup { fill: #050B1E; }
.bl-tt-tanya { font: 800 26px var(--g-tajuk); fill: var(--g-sinar); text-anchor: middle; }
.g-bl-tt-lbl { display: flex; flex-direction: column; min-width: 0; }
.g-bl-tt-lbl small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--g-teks-2); }
.g-bl-tt-lbl b { font-family: var(--g-tajuk); font-weight: 800; font-size: 20px; line-height: 1.15; color: var(--g-teks); min-height: 23px; }
.g-bl-ikon { width: 34px; height: 34px; }
.g-bl-pilih .g-pilihan { font-size: 15px; line-height: 1.15; }
.g-bl-pilih .g-pilihan-grid.n2 .g-pilihan { flex-direction: row; gap: 8px; }
@media (max-height: 700px) {
  .g-bl-kad, .g-tu-kad { padding: 6px 10px; }
  .g-bl-kad p, .g-tu-kad p { font-size: 13.5px; } .g-bl-tanya-baris > b, .g-tu-tanya-baris > b { font-size: 15px; }
  .g-bl-pandang { min-height: 50px; } .g-bl-tt { width: 50px; height: 50px; }
  .g-bl-tt-lbl b { font-size: 17px; }
  .g-bl-pilih .g-pilihan { min-height: 44px; padding: 6px; font-size: 14px; }
  .g-bl-ikon { width: 26px; height: 26px; }
}

/* Tuas Ajaib: papan tuas (ungkit) dan alat harian (label Fulkrum / Beban / Daya) */
.g-tu { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g-tu > * { flex: none; }
.g-tu-papan { position: relative; width: 100%; max-width: 380px; margin: 0 auto; border-radius: 20px; background: linear-gradient(180deg, #13214A 0%, #0E1838 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06); -webkit-tap-highlight-color: transparent; }
.g-tu-ungkit { touch-action: none; cursor: grab; } .g-tu-ungkit.g-pegang { cursor: grabbing; }
.g-tu-papan:focus-visible { outline: 3px solid var(--g-pilih); outline-offset: 3px; }
.g-tu-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tu-tanah { stroke: rgba(255, 255, 255, .28); stroke-width: 2; fill: none; }
.tu-papan { fill: #C99A5E; stroke: #8A6234; stroke-width: 1.5; } .tu-tanda { fill: #8A6234; }
.tu-fulkrum-sgt { fill: #FFB627; stroke: #DB8D06; stroke-width: 2; stroke-linejoin: round; }
.tu-daya-batang { stroke: #2EBD59; stroke-width: 7; stroke-linecap: round; } .tu-daya-kepala { fill: #2EBD59; stroke: #2EBD59; stroke-width: 3; stroke-linejoin: round; }
.tu-lbl { font: 800 11.5px var(--g-tajuk); text-anchor: middle; } .tu-lbl-f { fill: #FFD15C; } .tu-lbl-b { fill: #7CC4F2; } .tu-lbl-d { fill: #6FE29A; }
.tu-boleh { cursor: grab; }
.g-tu-ungkit .tu-boleh > :first-child { filter: drop-shadow(0 0 5px rgba(255, 209, 92, .75)); }
.tu-hantu { fill: rgba(255, 182, 39, .15); stroke: #FFB627; stroke-width: 2.5; stroke-dasharray: 4 3; pointer-events: none; }
.tu-hantu.hint { animation: g-kelip 1s ease-in-out infinite; box-shadow: none; }
.g-tu-meter { padding: 6px 4px 0; }
.g-tu-meter-trek { position: relative; height: 14px; border-radius: 99px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.g-tu-meter-isi { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--g-salah); transition: width .18s ease, background .18s; }
.g-tu-meter.g-cukup .g-tu-meter-isi { background: var(--green, #2EBD59); }
.g-tu-meter-had { position: absolute; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.g-tu-meter-lbl { position: relative; height: 18px; margin-top: 4px; font-size: 12.5px; font-weight: 800; color: var(--g-teks-2); }
.g-tu-meter-lbl [data-perlu] { position: absolute; right: 0; }
.g-tu-meter-lbl [data-had] { position: absolute; transform: translateX(-50%); white-space: nowrap; color: #fff; }
/* Alat harian */
.tu-kayu { fill: #C99A5E; stroke: #8A6234; stroke-width: 1.5; } .tu-urat { stroke: #8A6234; stroke-width: 1; opacity: .6; }
.tu-fulkrum-alat { fill: #6B7895; }
.tu-kotak { fill: #6FC3F7; stroke: #2B9CF2; stroke-width: 2; } .tu-garis-kotak { stroke: rgba(255, 255, 255, .55); stroke-width: 2; stroke-linecap: round; }
.tu-anak-panah { stroke: #2EBD59; stroke-width: 6; stroke-linecap: round; } .tu-anak-panah-k { fill: #2EBD59; }
.tu-tangan { fill: #F2C39B; }
.tu-paku { stroke: #AEB8C2; stroke-width: 4; stroke-linecap: round; } .tu-paku-k { fill: #AEB8C2; }
.tu-logam-tebal { fill: none; stroke: #AEB8C2; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.tu-logam-cakar { fill: none; stroke: #AEB8C2; stroke-width: 7; stroke-linecap: round; }
.tu-pemegang { fill: none; stroke: #FF8A3D; stroke-width: 10; stroke-linecap: round; }
.tu-pemegang-blok { fill: #FF8A3D; }
.tu-bilah { fill: #DCE3EC; stroke: #9AA6B8; stroke-width: 1.2; } .tu-bilah-2 { fill: #C3CCD8; }
.tu-gelung { fill: none; stroke: #FF8A3D; stroke-width: 7; }
.tu-skru { fill: #6B7895; stroke: #E8EEF6; stroke-width: 1.5; }
.tu-kertas { fill: #E9E4D4; opacity: .9; }
.tu-rangka { stroke: #8D97AA; stroke-width: 6; stroke-linecap: round; }
.tu-tong { fill: #2B9CF2; stroke: #1B6FB0; stroke-width: 2; stroke-linejoin: round; } .tu-pasir { fill: #D9A55A; }
.tu-roda { fill: #2A3350; stroke: #39415A; stroke-width: 6; } .tu-roda-dalam { fill: none; stroke: #8D97AA; stroke-width: 2; }
.tu-botol { fill: rgba(46, 189, 89, .55); stroke: #2EBD59; stroke-width: 2; } .tu-penutup { fill: #E5484D; }
.tu-makanan { fill: #C8742F; stroke: #8A4A1A; stroke-width: 2; }
.g-tu-zon { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 0; border: 0; border-radius: 50%; background: rgba(10, 20, 48, .55); box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .7); display: grid; place-items: center; color: #fff; -webkit-tap-highlight-color: transparent; }
.g-tu-zon-tanya { font: 800 18px var(--g-tajuk); opacity: .85; }
.g-tu-papan.g-sedia .g-tu-zon:not(.g-penuh) { box-shadow: 0 0 0 3px var(--g-pilih); }
.g-tu-zon.g-atas { transform: scale(1.12); box-shadow: 0 0 0 3px var(--g-pilih); }
.g-tu-zon.hint { box-shadow: 0 0 0 3px var(--g-sinar); animation: g-sinar-dalam 1s ease-in-out infinite; }
.g-tu-zon.g-penuh { width: auto; height: auto; margin: 0; transform: translate(-50%, -50%); background: none; box-shadow: none; }
.g-tu-cip-baris { display: flex; justify-content: center; gap: 8px; }
.g-tu-cip { min-height: 48px; padding: 6px 12px 6px 8px; border: 0; border-radius: 16px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); color: var(--g-teks); font-family: var(--g-tajuk); font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.g-tu-cip svg { width: 22px; height: 22px; flex: none; }
.g-tu-cip.g-pilih { box-shadow: 0 0 0 3px var(--g-pilih), 0 4px 0 var(--g-pilih); }
.g-tu-cip.g-dalam { min-height: 34px; padding: 3px 9px 3px 6px; font-size: 13.5px; border-radius: 12px; gap: 4px; box-shadow: 0 0 0 2.5px currentColor; }
.g-tu-cip.g-dalam svg { width: 16px; height: 16px; }
.g-tu-cip.tu-c-f.g-dalam { color: #FFD15C; } .g-tu-cip.tu-c-b.g-dalam { color: #7CC4F2; } .g-tu-cip.tu-c-d.g-dalam { color: #6FE29A; }
.g-tu-cip.g-dalam span { color: var(--g-teks); }
.tu-ikon-f { fill: #FFB627; } .tu-ikon-b { fill: #6FC3F7; } .tu-ikon-b-g { fill: none; stroke: #6FC3F7; stroke-width: 2.5; }
.tu-ikon-d { stroke: #2EBD59; stroke-width: 4; stroke-linecap: round; } .tu-ikon-d-k { fill: #2EBD59; }
.g-tu-bawah .g-pilihan { font-size: 15px; line-height: 1.15; }
@media (max-height: 700px) {
  .g-tu-cip { min-height: 44px; font-size: 15px; }
  .g-tu-bawah .g-pilihan { min-height: 44px; padding: 6px; font-size: 14px; }
}

/* Menara Stabil: meja goncang, tiga menara eksperimen + jadual, bina menara sendiri */
.g-mn .g-pentas { padding: 6px 8px; }
.g-mn-uji, .g-mn-bina { display: flex; flex-direction: column; gap: 6px; }
.g-mn:not([data-fasa="bina"]) .g-mn-bina, .g-mn[data-fasa="bina"] .g-mn-uji { display: none; }
.g-mn.g-mn-ringkas .g-mn-uji { display: none; } .g-mn.g-mn-ringkas .g-mn-bina { display: flex; }
.g-mn[data-fasa="ramal"] .g-mn-data { display: none; }
.g-mn-svg { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; overflow: visible; }
.mn-meja { fill: #6B7895; } .mn-spring { stroke: #8D97AA; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 2; }
.mn-kayu { fill: #C99A5E; stroke: #8A6234; stroke-width: 1.2; } .mn-urat { stroke: #8A6234; stroke-width: 1; opacity: .55; }
.mn-batu { fill: #8D97AA; stroke: #5D677C; stroke-width: 1.2; } .mn-bintik { fill: #5D677C; }
.mn-span { fill: #F2D16B; stroke: #C9A43A; stroke-width: 1.2; } .mn-lubang { fill: rgba(120, 80, 0, .35); }
.mn-huruf { font: 800 13px var(--g-tajuk); fill: var(--g-sinar); text-anchor: middle; }
.mn-bayang-tapak { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; stroke-dasharray: 5 5; cursor: pointer; }
.mn-goncang.on { animation: mn-goncang .16s linear infinite alternate; }
@keyframes mn-goncang { from { transform: translateX(calc(var(--amp, 2px) * -1)); } to { transform: translateX(var(--amp, 2px)); } }
.mn-goyang { transform-box: fill-box; transform-origin: 50% 100%; animation: mn-goyang .32s ease-in-out infinite alternate; }
@keyframes mn-goyang { from { transform: rotate(calc(var(--g, 1deg) * -1)); } to { transform: rotate(var(--g, 1deg)); } }
html.kurang-gerak .mn-goncang.on, html.kurang-gerak .mn-goyang { animation: none; }
.g-mn-sasaran { margin: 0; text-align: center; font-family: var(--g-tajuk); font-weight: 800; font-size: 15px; color: var(--g-sinar); }
.g-mn-dulang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.g-mn-blok { min-height: 52px; padding: 6px 8px; border: 0; border-radius: 16px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); color: var(--g-teks); font-family: var(--g-baca); font-weight: 700; font-size: 13.5px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.g-mn-blok svg { width: 64px; height: 22px; }
.g-mn-blok.g-angkat { opacity: .35; }
.g-mn-gempa { width: 100%; }
.g-mn-ikon { width: 52px; height: 56px; }
.g-mn .g-pilihan-grid:not(.g-lajur) .g-pilihan { gap: 2px; }
@media (max-height: 700px) {
  .g-mn-svg { max-width: 260px; }
  .g-mn-blok { min-height: 46px; padding: 4px 6px; font-size: 12.5px; }
  .g-mn-ikon { width: 40px; height: 44px; }
}

/* ===================== G7 · App #1 gelombang 2: Laluan Suku Kata, Kereta Api Corak, Sambung Titik, Memancing Suku Kata, Susun Kitar Hidup ===================== */
/* Warna perkataan dijumpai (Laluan Suku Kata): hijau, biru, oren, ungu */
.g-sukukata .w0, .g-sk-kata.w0 { --w: var(--g-aksen); --w-d: var(--g-aksen-d); --w-bg: var(--g-betul-bg); }
.g-sukukata .w1 { --w: #2B9CF2; --w-d: #1E7BC4; --w-bg: #E2F1FE; }
.g-sukukata .w2 { --w: #FF8A3D; --w-d: #D9661A; --w-bg: #FFEBDC; }
.g-sukukata .w3 { --w: #8E6CF0; --w-d: #6B4CC9; --w-bg: #EEE7FF; }

/* Laluan Suku Kata: jalur gambar sasaran + grid suku kata (E3 mod cari) */
.g-sukukata { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 0; }
.g-sk-jalur { display: flex; justify-content: center; gap: 8px; width: 100%; }
.g-sk-kata { flex: 0 1 92px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px; border-radius: 18px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); transition: background .2s, box-shadow .2s, transform .2s; }
.g-sk-kata .illus { width: 52px; height: 52px; }
.g-sk-kotak { display: flex; gap: 3px; }
.g-sk-kotak i { min-width: 24px; height: 24px; padding: 0 3px; border-radius: 7px; background: var(--g-lekuk); box-shadow: inset 0 0 0 2px var(--g-garis); font-style: normal; font-family: var(--g-baca); font-weight: 700; font-size: 15px; line-height: 24px; text-align: center; color: var(--g-teks); }
.g-sukukata.huruf .g-sk-kotak { gap: 2px; } .g-sukukata.huruf .g-sk-kotak i { min-width: 15px; padding: 0 1px; font-size: 13px; }
.g-sk-kata.jumpa { background: var(--w-bg); box-shadow: 0 0 0 3px var(--w), 0 4px 0 var(--w-d); transform: translateY(-2px); }
.g-sk-kata.jumpa .g-sk-kotak i { background: #fff; box-shadow: none; color: var(--w-d); }
.g-sk-jalur.n4 .g-sk-kata .illus { width: 44px; height: 44px; }
.g-sk-papan { flex: 1; display: flex; justify-content: center; width: 100%; min-height: 0; }
.g-sk.g-e3 { justify-content: flex-start; }
.g-sk .g-grid { width: min(100%, 282px); gap: 10px; }
.g-sk.g-sk4 .g-grid { width: min(100%, 296px); gap: 8px; }
.g-sk .g-sel { font-size: clamp(26px, 8vw, 34px); }
.g-sk.g-sk4 .g-sel { font-size: clamp(22px, 6.4vw, 28px); border-radius: 18px; }
.g-sel.g-jumpa { background: var(--w-bg); box-shadow: 0 0 0 3px var(--w), 0 5px 0 var(--w-d); color: var(--w-d); }
.g-sel.g-jumpa.g-on { background: var(--g-pilih-bg); box-shadow: 0 0 0 3px var(--g-pilih), 0 5px 0 var(--g-pilih); color: var(--g-teks); }
.g-garisan polyline.g-jumpa-garis { stroke: var(--w); opacity: .45; }

/* Kereta Api Corak: kepala kereta api (SVG), gerabak CSS (badan berwarna + tingkap krim + roda), landasan */
.g-kereta-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 0; }
.g-kr-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.g-kereta.g-e1 { justify-content: center; gap: 26px; }
.g-kereta .g-dulang, .g-kitar .g-dulang { margin-top: 0; } /* kereta api / bulatan & dulang berkumpul di tengah (bukan dulang di bawah skrin) */
.g-kitar.g-e1 { justify-content: center; gap: 18px; }
.g-kereta .g-sasaran-baris { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 16px 0 12px; }
.g-kereta .g-sasaran-baris::after { content: ""; position: absolute; left: -16px; right: -16px; bottom: 0; height: 9px; z-index: 0;
  background: linear-gradient(#8C6A4A, #8C6A4A) 0 0 / 100% 3px no-repeat, repeating-linear-gradient(90deg, #C79A68 0 7px, transparent 7px 15px) 0 3px / 100% 6px no-repeat; }
.g-kereta .g-petak, .g-kereta .g-tetap { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; max-width: 62px; aspect-ratio: auto; display: block; padding: 0; border-radius: 12px; background: none; box-shadow: none; }
.g-kereta .g-tetap[data-nod="enjin"] { flex: 0 0 64px; max-width: none; margin-right: 1px; }
.g-enjin-svg { display: block; width: 100%; height: auto; }
.g-asap { position: absolute; left: 13%; top: -6px; width: 18px; height: 18px; pointer-events: none; }
.g-asap i { position: absolute; left: 0; bottom: 0; width: 14px; height: 14px; border-radius: 50%; background: #E9EEF0; opacity: 0; }
.g-jalan .g-asap i { animation: g-asap 1s ease-out infinite; } .g-jalan .g-asap i:nth-child(2) { animation-delay: .33s; } .g-jalan .g-asap i:nth-child(3) { animation-delay: .66s; }
@keyframes g-asap { 0% { transform: translate(0, 0) scale(.5); opacity: .9; } 100% { transform: translate(14px, -34px) scale(1.6); opacity: 0; } }
.g-gerabak { position: relative; display: block; width: 100%; aspect-ratio: .92; margin-bottom: 9px; border-radius: 12px 12px 8px 8px; background: var(--w, #2B9CF2); box-shadow: inset 0 -7px 0 rgba(0, 0, 0, .16); }
.g-gerabak::before, .g-gerabak::after { content: ""; position: absolute; bottom: -9px; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #D8D8D8 0 24%, #3C3C3C 27%); }
.g-gerabak::before { left: 7%; } .g-gerabak::after { right: 7%; }
.g-gb-kotak { position: absolute; left: 11%; right: 11%; top: 11%; bottom: 24%; border-radius: 8px; background: #FFF8EA; display: grid; place-items: center; overflow: hidden; }
.g-gb-kotak .illus { width: 88%; height: auto; }
.g-gb-kotak b { font-family: var(--g-baca); font-weight: 700; font-size: clamp(19px, 5.8vw, 27px); line-height: 1; color: var(--g-teks); }
.g-gerabak.kosong { background: var(--g-lekuk); box-shadow: none; outline: 3px dashed var(--g-teks-2); outline-offset: -3px; opacity: .6; }
.g-gerabak.kosong::before, .g-gerabak.kosong::after { background: var(--g-garis); }
.g-gerabak.kosong .g-gb-kotak { background: transparent; }
.g-kereta .g-sasaran.g-atas, .g-kereta .g-petak.g-penuh, .g-kereta .g-sasaran.hint { background: none; box-shadow: none; }
.g-kereta .g-sasaran.g-atas { transform: translateY(-4px); }
.g-kereta .g-sasaran.g-atas .g-gerabak.kosong { outline-color: var(--g-pilih); background: var(--g-pilih-bg); opacity: 1; }
.g-kereta .g-sasaran.hint .g-gerabak { outline: 3px solid var(--g-sinar); outline-offset: 1px; opacity: 1; }
.g-kereta:not(.g-kereta-ordinal) .g-penuh > .g-petak-ph, .g-kereta:not(.g-kereta-ordinal) .g-penuh > .g-gerabak.kosong { display: none; }
/* Gerabak di dulang & dalam slot (kelas g-bd-kereta; klon terapung dalam <body> juga) */
.g-benda.g-bd-kereta { width: 62px; min-width: 0; min-height: 0; padding: 0; display: block; border-radius: 12px; background: none; box-shadow: none; }
.g-benda.g-bd-kereta .illus, .g-klon.g-bd-kereta .illus { width: 88%; height: auto; }
.g-klon.g-bd-kereta { background: none !important; box-shadow: none !important; display: block; }
.g-kereta .g-petak .g-benda.g-bd-kereta.g-dalam { width: 100%; height: auto; padding: 0; border-radius: 12px; background: none; box-shadow: none; }
.g-benda.g-bd-kereta.g-pilih { box-shadow: none; } .g-benda.g-bd-kereta.g-pilih .g-gerabak { outline: 3px solid var(--g-pilih); outline-offset: 2px; }
.g-benda.g-bd-kereta.g-betul, .g-benda.g-bd-kereta.g-salah, .g-benda.g-bd-kereta.hint { background: none; box-shadow: none; }
.g-benda.g-bd-kereta.g-betul .g-gerabak { outline: 3px solid var(--g-aksen); outline-offset: 1px; }
.g-benda.g-bd-kereta.g-salah .g-gerabak { outline: 3px solid var(--g-salah); outline-offset: 1px; }
.g-benda.g-bd-kereta.hint .g-gerabak { outline: 3px solid var(--g-sinar); outline-offset: 2px; }
.g-kereta .g-dulang { gap: 12px; }
/* Ordinal: tiket arahan, gerabak bertempat duduk, penumpang duduk di tingkap */
.g-kr-arahan { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.g-kr-tiket { display: flex; align-items: center; gap: 6px; padding: 4px 14px 6px 8px; border-radius: 18px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); }
.g-kr-tiket .illus { width: 34px; height: 34px; }
.g-kr-tiket b { font-family: var(--g-baca); font-weight: 700; font-size: 18px; color: var(--g-pilih); }
.g-kereta-ordinal .g-petak .g-benda.g-dalam { position: absolute; left: 8%; right: 8%; top: 4%; z-index: 2; width: auto; height: auto; aspect-ratio: 1; padding: 0; background: none; box-shadow: none; border-radius: 10px; }
.g-kereta-ordinal .g-petak .g-benda.g-dalam .illus { width: 100%; height: auto; }
.g-kereta-ordinal .g-petak .g-benda.g-betul, .g-kereta-ordinal .g-petak .g-benda.g-salah { background: none; }
.g-kereta-ordinal .g-petak .g-benda.g-betul { box-shadow: 0 0 0 3px var(--g-aksen); } .g-kereta-ordinal .g-petak .g-benda.g-salah { box-shadow: 0 0 0 3px var(--g-salah); }
.g-kereta-ordinal .g-sasaran.g-atas .g-gerabak { outline: 3px solid var(--g-pilih); outline-offset: 1px; }

/* Susun Kitar Hidup: bulatan peringkat (E1 susun bebas + anak panah) */
.g-kitar .g-sasaran-baris.g-bebas { width: min(100%, 330px); margin: 0 auto; }
.g-kitar .g-bebas > .g-petak { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
.g-kitar .g-tetap .illus, .g-kitar .g-bebas > .g-petak .g-benda.g-dalam .illus { width: 58px; height: 58px; }
.g-kitar .g-tetap { box-shadow: 0 0 0 3px var(--g-aksen), 0 4px 0 var(--g-aksen-d); }
.g-kitar .g-tetap .g-benda-lbl, .g-kitar .g-bebas > .g-petak .g-benda-lbl { font-size: 12px; }
.g-kitar .g-siratan-svg line { stroke-width: 3; }
.g-kitar .g-dulang .g-benda { min-width: 84px; }
.g-kitar .g-dulang .g-benda .g-benda-lbl { font-size: 12px; max-width: 92px; }
/* Anak & induk */
.g-rupa { position: relative; display: block; width: 62px; height: 62px; }
.g-benda .g-rupa > .illus, .g-klon .g-rupa > .illus { width: 62px; height: 62px; }
.g-rupa-induk { position: absolute; right: -10px; bottom: -6px; width: 32px; height: 32px; border-radius: 50%; background: var(--g-kad); box-shadow: 0 0 0 2px var(--g-garis); display: grid; place-items: center; }
.g-benda .g-rupa-induk .illus, .g-klon .g-rupa-induk .illus { width: 26px; height: 26px; }
.g-benda.g-dalam .g-rupa, .g-benda.g-dalam .g-rupa > .illus { width: 42px; height: 42px; }
.g-benda.g-dalam .g-rupa-induk { width: 20px; height: 20px; right: -6px; bottom: -4px; } .g-benda.g-dalam .g-rupa-induk .illus { width: 16px; height: 16px; }
.g-rupa-ikon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--g-betul-bg); color: var(--g-aksen-d); }
.g-rupa-ikon.tidak { background: var(--g-salah-bg); color: var(--g-salah-d); }
.g-rupa-ikon svg { width: 22px; height: 22px; }

/* Sambung Titik: papan kertas, titik bernombor (saiz piksel tetap, dikira JS), garisan, gambar pelekat muncul */
.g-titik-wrap { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; }
.g-tt-main { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; }
.g-sambung { width: 100%; }
.g-tt-papan { width: min(100%, 340px); aspect-ratio: 1; padding: 6px; border-radius: 26px; background: var(--g-kad); box-shadow: 0 5px 0 var(--g-kad-b); }
.g-tt-svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: none; }
.g-tt-gambar { opacity: 0; transition: opacity .7s ease .2s; }
.g-sambung.g-selesai .g-tt-gambar { opacity: 1; }
.g-tt-isi { fill: var(--g-sinar-bg); opacity: 0; }
.g-tt-garis { fill: none; stroke: var(--g-pilih); stroke-linecap: round; stroke-linejoin: round; transition: opacity .5s ease .9s; }
.g-tt-jari { stroke: var(--g-pilih); stroke-linecap: round; opacity: .35; }
.g-sambung.g-selesai .g-tt-garis, .g-sambung.g-selesai .g-tt-semua { opacity: 0; }
.g-tt-semua { transition: opacity .4s ease .6s; }
.g-tt-bulat { fill: var(--g-teks); }
.g-tt-t.mula .g-tt-bulat { fill: var(--g-aksen); }
.g-tt-t.on .g-tt-bulat { fill: var(--g-pilih); }
.g-tt-sinar { fill: transparent; }
.g-tt-t.hint { animation: none; box-shadow: none; } .g-tt-t.hint .g-tt-sinar { fill: rgba(255, 182, 39, .5); } .g-tt-t.hint .g-tt-bulat { fill: var(--g-sinar-d); }
.g-tt-lbl { fill: var(--g-teks); font-family: var(--g-baca); font-weight: 700; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--g-kad); stroke-width: calc(var(--tt-u, 3) * 3.5); stroke-linejoin: round; }
.g-tt-t.on .g-tt-lbl { fill: var(--g-teks-2); }
.g-tt-t.mula .g-tt-lbl { fill: var(--g-aksen-d); }
.g-tt-hadiah { position: absolute; left: 50%; top: 4px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 18px 8px; border-radius: 18px; background: var(--g-sinar-bg); box-shadow: 0 0 0 3px var(--g-sinar), 0 5px 0 var(--g-sinar-d); transform: translateX(-50%); white-space: nowrap; animation: g-hadiah .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.g-tt-hadiah b { font-family: var(--g-tajuk); font-weight: 800; font-size: 18px; color: var(--g-teks); }
.g-tt-hadiah span { font-family: var(--g-baca); font-weight: 700; font-size: 15px; color: var(--g-teks-2); }
.g-tt-hadiah span:empty { display: none; }
@keyframes g-hadiah { from { opacity: 0; transform: translate(-50%, 16px) scale(.8); } }

/* Memancing Suku Kata: joran + kad perkataan + baldi di atas, kolam berlorong (E4 kolam), tali dilukis SVG */
.g-pancing { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.g-pc-atas { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 100px; padding-bottom: 6px; }
.g-pc-joran { align-self: flex-start; flex: none; width: 84px; height: 84px; margin-top: -4px; }
.g-pc-joran .illus { display: block; width: 84px; height: 84px; }
.g-pc-kad { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 20px; background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); transition: box-shadow .2s; }
.g-pc-gambar .illus { display: block; width: 58px; height: 58px; }
.g-pc-kotak { position: relative; display: flex; gap: 4px; }
.g-pc-kotak i { min-width: 40px; height: 42px; padding: 0 5px; border-radius: 12px; background: var(--g-lekuk); box-shadow: inset 0 0 0 2px var(--g-garis); font-style: normal; font-family: var(--g-baca); font-weight: 700; font-size: 23px; line-height: 42px; text-align: center; color: var(--g-teks); }
.g-pancing.huruf .g-pc-kotak { gap: 3px; } .g-pancing.huruf .g-pc-kotak i { min-width: 28px; padding: 0 2px; }
.g-pc-kotak i.kini { background: var(--g-pilih-bg); box-shadow: inset 0 0 0 3px var(--g-pilih); }
.g-pc-kotak i.isi { background: var(--g-betul-bg); box-shadow: inset 0 0 0 2px var(--g-aksen); color: var(--g-aksen-d); }
.g-pc-kad.siap { box-shadow: 0 0 0 3px var(--g-aksen), 0 4px 0 var(--g-aksen-d); }
.g-pc-baldi { position: relative; flex: none; }
.g-pc-baldi .illus { display: block; width: 56px; height: 56px; }
.g-pc-bil { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--g-pilih); color: #fff; font-family: var(--g-tajuk); font-weight: 800; font-size: 13px; line-height: 22px; text-align: center; }
.g-pc-tali { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.g-pc-tali line { stroke: #4E5D55; stroke-width: 1.8; }
.g-pc-kail { position: absolute; left: 0; top: 0; z-index: 5; width: 40px; pointer-events: none; will-change: transform; }
.g-pc-kail .illus { display: block; width: 40px; height: 40px; }
.g-pc-kolam { flex: 1; display: flex; min-height: 0; }
.g-kolam-air { min-height: 270px; background: radial-gradient(ellipse 70% 14% at 50% 0, rgba(255, 255, 255, .5), transparent 70%), linear-gradient(180deg, #A6DCF8, #6CC0EF 55%, #4AA8E2); }
.g-ombak { position: absolute; left: 0; right: 0; top: 0; height: 10px; background: radial-gradient(circle at 10px -4px, transparent 9px, rgba(255, 255, 255, .55) 10px, transparent 12px) 0 0 / 20px 10px repeat-x; pointer-events: none; }
.g-ikan { position: absolute; left: 0; top: 0; width: var(--s); height: calc(var(--s) * .8); padding: 0; border: 0; background: none; will-change: transform; -webkit-tap-highlight-color: transparent; }
.g-ikan-b { position: relative; display: block; width: 100%; height: 100%; }
.g-ikan-b > .illus { display: block; width: 100%; height: 100%; object-fit: contain; }
.g-ikan.kiri .g-ikan-b > .illus { transform: scaleX(-1); }
.g-ikan-lbl { position: absolute; left: 40%; top: 54%; min-width: 36px; padding: 0 7px 2px; border-radius: 13px; background: #fff; box-shadow: 0 3px 0 rgba(30, 90, 150, .28); transform: translate(-50%, -50%); font-family: var(--g-baca); font-weight: 700; font-size: 21px; line-height: 1.2; color: #1E3A2C; white-space: nowrap; }
.g-ikan.kiri .g-ikan-lbl { left: 60%; } /* ikan menghadap kiri: label di badan, bukan di muka */
.g-ikan.hint { animation: none; box-shadow: none; }
.g-ikan.hint .g-ikan-lbl { box-shadow: 0 0 0 4px var(--g-sinar), 0 0 0 9px rgba(255, 182, 39, .35); }
.g-ikan-b.g-goncang { animation: g-goncang .42s ease-in-out; }
.g-ikan-naik { position: absolute; z-index: 6; pointer-events: none; }

@media (max-height: 700px) {
  .g-sk-kata .illus { width: 44px; height: 44px; } .g-sk-jalur.n4 .g-sk-kata .illus { width: 38px; height: 38px; }
  .g-sk .g-grid { width: min(100%, 246px); gap: 8px; } .g-sk.g-sk4 .g-grid { width: min(100%, 262px); gap: 7px; }
  .g-sukukata { gap: 8px; }
  /* Bulatan 5 peringkat + 5 kad dulang (aras 3) mesti muat di atas butang SIAP pada 360×640 */
  .g-kitar .g-sasaran-baris.g-bebas { height: 214px; }
  .g-kitar .g-bebas > .g-petak { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
  .g-kitar .g-tetap .illus, .g-kitar .g-bebas > .g-petak .g-benda.g-dalam .illus { width: 44px; height: 44px; }
  .g-kitar.g-e1 { gap: 12px; }
  .g-kitar .g-dulang { gap: 6px; min-height: 0; padding-bottom: 0; }
  .g-kitar .g-dulang .g-benda { min-width: 64px; min-height: 0; padding: 4px 4px 2px; }
  .g-kitar .g-dulang .g-benda .illus { width: 42px; height: 42px; }
  .g-kitar .g-dulang .g-benda .g-benda-lbl { font-size: 11px; max-width: 76px; }
  .g-tt-papan { width: min(100%, 300px); }
  .g-pc-atas { height: 86px; } .g-pc-joran, .g-pc-joran .illus { width: 72px; height: 72px; } .g-pc-gambar .illus { width: 48px; height: 48px; }
  .g-pc-kotak i { min-width: 36px; height: 38px; line-height: 38px; font-size: 21px; }
  .g-kolam-air { min-height: 220px; }
  .g-kereta.g-e1 { gap: 14px; }
}
html.kurang-gerak .g-jalan .g-asap i { animation: none; }

/* ---------- E3 · silang (G8 · Teka Kira Harian): grid silang kira 3 × 3 ----------
   Papan 7 × 7 dalam unit fr (nombor 1fr, operasi .42fr) supaya muatSkrin boleh mengecilkan papan; saiz fon ikut lebar papan (cqi). */
.g-silang { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 0; --g-cip: #fff; --g-cip-t: var(--g-teks); --g-cip-b: var(--g-kad-b); }
html.malam .g-silang { --g-cip: #F4F7FF; --g-cip-t: #13203D; --g-cip-b: #93A3C8; }
.g-sl-papan { width: min(100%, 360px); aspect-ratio: 1; flex: none; container-type: inline-size; display: grid; grid-template-columns: 1fr .42fr 1fr .42fr 1fr .42fr 1fr; grid-template-rows: 1fr .42fr 1fr .42fr 1fr .42fr 1fr; }
.g-sl-papan > * { min-width: 0; min-height: 0; }
.g-sl-n { margin: 3px; border-radius: 16px; display: grid; place-items: center; font: 800 clamp(20px, 9.5cqi, 34px)/1 var(--g-tajuk); }
.g-sl-beri { background: var(--g-kad); box-shadow: 0 4px 0 var(--g-kad-b); color: var(--g-teks-2); }
.g-sl-slot { position: relative; background: var(--g-lekuk); outline: 2.5px dashed var(--g-garis); outline-offset: -2.5px; cursor: pointer; transition: background .15s, outline-color .15s; -webkit-tap-highlight-color: transparent; }
.g-sl-slot.g-pilih { outline: 3px solid var(--g-pilih); background: var(--g-pilih-bg); }
.g-sl-slot.g-atas { outline: 3px solid var(--g-pilih); background: var(--g-pilih-bg); transform: scale(1.06); }
.g-sl-slot:has(.g-sl-cip) { outline: 0; background: none; }
.g-sl-op { display: grid; place-items: center; font: 800 clamp(15px, 6cqi, 24px)/1 var(--g-tajuk); color: var(--g-teks-2); }
.g-sl-sama { color: var(--g-teks-2); opacity: .8; }
.g-sl-tegak { transform: rotate(90deg); }
.g-sl-h { margin: 3px; border-radius: 16px; display: grid; place-items: center; font: 800 clamp(17px, 7.6cqi, 28px)/1 var(--g-tajuk); color: var(--g-sinar); background: var(--g-sinar-bg); transition: background .2s, color .2s, box-shadow .2s; }
.g-sl-h.g-sl-betul { background: var(--g-betul-bg); color: var(--g-aksen-d); box-shadow: inset 0 0 0 2.5px var(--g-aksen); }
html.malam .g-sl-h.g-sl-betul { color: #7BE39B; }
.g-sl-h.g-sl-salah { background: var(--g-salah-bg); color: var(--g-salah-d); box-shadow: inset 0 0 0 2.5px var(--g-salah); }
.g-sl-cip { width: 50px; height: 50px; padding: 0; border: 0; border-radius: 15px; display: grid; place-items: center; background: var(--g-cip); color: var(--g-cip-t); box-shadow: 0 4px 0 var(--g-cip-b); font: 800 26px/1 var(--g-tajuk); cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.g-sl-slot > .g-sl-cip { width: 100%; height: 100%; border-radius: inherit; font-size: inherit; }
.g-sl-cip.g-angkat { opacity: .25; }
.g-sl-cip.kunci { cursor: default; background: var(--g-sinar-bg); color: var(--g-sinar); box-shadow: inset 0 0 0 2.5px var(--g-sinar), 0 4px 0 var(--g-sinar-d); }
.g-sl-garis-salah > .g-sl-cip:not(.kunci) { box-shadow: inset 0 0 0 3px var(--g-salah), 0 4px 0 var(--g-salah-d); }
.g-klon.g-sl-cip { z-index: 60; }
.g-sl-bawah { width: min(100%, 360px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.g-sl-dulang { width: 100%; min-height: 64px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 8px; padding: 7px; border-radius: 20px; background: var(--g-lekuk); box-shadow: inset 0 0 0 2px var(--g-garis); }
.g-sl-petunjuk { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 2px solid var(--g-garis); background: transparent; color: var(--g-sinar); font: 700 15px/1 var(--g-baca); cursor: pointer; }
.g-sl-petunjuk svg { width: 20px; height: 20px; }
.g-sl-petunjuk:disabled { opacity: .4; cursor: default; }
.g-sl-petunjuk.hint { border-color: var(--g-sinar); background: var(--g-sinar-bg); }
.g-silang.g-selesai .g-sl-n { background: var(--g-betul-bg); box-shadow: inset 0 0 0 2.5px var(--g-aksen); color: var(--g-teks); }
.g-silang.g-selesai .g-sl-slot > .g-sl-cip { background: transparent; box-shadow: none; color: inherit; }
.g-sl-ombak { animation: g-sl-ombak .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes g-sl-ombak { 40% { transform: scale(1.14) translateY(-4px); } }
html.kurang-gerak .g-sl-ombak, html.kurang-gerak .g-sl-slot.g-atas { animation: none; transform: none; }
@media (max-height: 700px) { .g-sl-cip { width: 46px; height: 46px; font-size: 24px; } .g-sl-dulang { min-height: 58px; padding: 5px; } .g-silang { gap: 8px; } .g-sl-bawah { gap: 6px; } }

/* G8 (regresi): skrin tamat Pondok Main / Arked / Teka Kira abaikan tekanan 700 ms pertama, supaya jari yang masih menekan
   buih atau ikan bila masa tamat tidak terkena MAIN LAGI / Pondok Main */
.g-tunggu, .g-tunggu * { pointer-events: none !important; }