/* ═══ Kalkulator SIRQu — gaya (3D glossy, terang & gelap) ═══ */
@font-face{ font-family:"Baloo 2"; font-weight:700; font-display:swap; src:url(aset/font/baloo-2-latin-700-normal.woff2) format("woff2"); }
@font-face{ font-family:"Baloo 2"; font-weight:800; font-display:swap; src:url(aset/font/baloo-2-latin-800-normal.woff2) format("woff2"); }
@font-face{ font-family:"Plus Jakarta Sans"; font-weight:500; font-display:swap; src:url(aset/font/plus-jakarta-sans-latin-500-normal.woff2) format("woff2"); }
@font-face{ font-family:"Plus Jakarta Sans"; font-weight:700; font-display:swap; src:url(aset/font/plus-jakarta-sans-latin-700-normal.woff2) format("woff2"); }
@font-face{ font-family:"Plus Jakarta Sans"; font-weight:800; font-display:swap; src:url(aset/font/plus-jakarta-sans-latin-800-normal.woff2) format("woff2"); }

:root{
  --navy:#14498C; --navy-tua:#0D3266; --lime:#9BC53D; --cyan:#22D3EE;
  --bg:#E8F1FB; --bg2:#F6FAFE; --kartu:#FFFFFF; --teks:#0F2747; --redup:#5B6E8A; --samar:#8A9BB4; --garis:#D3E0EF; --lembut:#EEF4FB;
  /* tombol angka */
  --k1:#FFFFFF; --k2:#E6EDF7; --k3:#B8C7DB; --kt:#14498C;
  --bayang:rgba(13,50,102,.38);
  --layar1:#0E2A57; --layar2:#0A1D3E;
  --judul:"Baloo 2","Plus Jakarta Sans",system-ui,sans-serif;
  --teksf:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-tema="terang"]){
  --bg:#0A1630; --bg2:#0D1C3B; --kartu:#12244A; --teks:#E8F0FB; --redup:#A3B5D0; --samar:#7489A8; --garis:#22365E; --lembut:#172C55;
  --k1:#2C4777; --k2:#1D335F; --k3:#0A1734; --kt:#FFFFFF; --bayang:rgba(0,0,0,.55);
  --layar1:#071430; --layar2:#040C20; color-scheme:dark; } }
:root[data-tema="gelap"]{
  --bg:#0A1630; --bg2:#0D1C3B; --kartu:#12244A; --teks:#E8F0FB; --redup:#A3B5D0; --samar:#7489A8; --garis:#22365E; --lembut:#172C55;
  --k1:#2C4777; --k2:#1D335F; --k3:#0A1734; --kt:#FFFFFF; --bayang:rgba(0,0,0,.55);
  --layar1:#071430; --layar2:#040C20; color-scheme:dark; }

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none!important; }
html,body{ height:100%; }
body{ margin:0; color:var(--teks); font:500 15px/1.45 var(--teksf); overscroll-behavior:none;
  background:radial-gradient(120% 60% at 50% -10%, color-mix(in srgb,var(--cyan) 22%,transparent), transparent 60%),
             radial-gradient(90% 50% at 100% 100%, color-mix(in srgb,var(--lime) 16%,transparent), transparent 60%), var(--bg); background-attachment:fixed; }
button{ font:inherit; color:inherit; }
svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
img{ display:block; }
:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; } }

.app{ max-width:520px; margin:0 auto; min-height:100%; display:flex; flex-direction:column; padding:0 14px calc(86px + env(safe-area-inset-bottom)); }

/* ── atas ── */
.atas{ display:flex; align-items:center; gap:8px; padding:calc(10px + env(safe-area-inset-top)) 2px 6px; }
.merek{ display:flex; align-items:center; gap:8px; margin-right:auto; font:700 19px/1 var(--judul); color:var(--teks); }
.merek b{ color:var(--navy); font-weight:800; }
:root[data-tema="gelap"] .merek b{ color:var(--cyan); }
@media (prefers-color-scheme:dark){ :root:not([data-tema="terang"]) .merek b{ color:var(--cyan); } }
.merek img{ width:34px; height:34px; filter:drop-shadow(0 4px 6px var(--bayang)); }
.ib{ width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:14px; cursor:pointer; color:var(--teks);
  background:linear-gradient(180deg,var(--k1),var(--k2)); box-shadow:0 3px 0 var(--k3), inset 0 1px 0 rgba(255,255,255,.6); }
.ib:active{ transform:translateY(3px); box-shadow:0 0 0 var(--k3); }
#btnSuara .off{ display:none; } #btnSuara[aria-pressed="false"] .on{ display:none; } #btnSuara[aria-pressed="false"] .off{ display:inline; }
#btnTema .mentari{ display:none; }
:root[data-tema="gelap"] #btnTema .bulan{ display:none; } :root[data-tema="gelap"] #btnTema .mentari{ display:inline; }
@media (prefers-color-scheme:dark){ :root:not([data-tema="terang"]) #btnTema .bulan{ display:none; } :root:not([data-tema="terang"]) #btnTema .mentari{ display:inline; } }

.isi{ flex:1; display:flex; flex-direction:column; }
.hal{ flex:1; display:flex; flex-direction:column; gap:12px; animation:masuk .28s ease-out; }
@keyframes masuk{ from{ opacity:0; transform:translateY(8px); } }

/* ── pemandu Umar ── */
.pemandu{ display:flex; align-items:center; gap:10px; min-height:62px; }
.ava-umar{ flex:none; width:58px; height:58px; border-radius:50%; overflow:hidden; background:linear-gradient(160deg,#FFFFFF,#DCEBFA); box-shadow:0 0 0 3px var(--kartu), 0 6px 14px -6px var(--bayang); }
.ava-umar img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; transform:scale(1.55); transform-origin:50% 20%; }
.ava-umar.kecil{ width:64px; height:64px; } .ava-umar.sedang{ width:74px; height:74px; }
.ava-umar.besar{ width:auto; height:200px; border-radius:0; overflow:visible; background:none; box-shadow:none; margin:0 auto; }
.ava-umar.besar img{ height:100%; width:auto; object-fit:contain; transform:none; clip-path:inset(0 0 21% 0); margin-bottom:-42px; }
.ava-umar.senang{ animation:lompat .5s cubic-bezier(.3,1.6,.5,1); } .ava-umar.goyang{ animation:goyang .45s ease; }
@keyframes lompat{ 40%{ transform:translateY(-10px) scale(1.06); } }
@keyframes goyang{ 25%{ transform:rotate(-8deg); } 75%{ transform:rotate(8deg); } }
.balon{ position:relative; flex:1; margin:0; padding:10px 14px; border-radius:18px 18px 18px 6px; background:var(--kartu); border:1px solid var(--garis);
  font:700 14px/1.35 var(--teksf); color:var(--teks); box-shadow:0 8px 18px -12px var(--bayang); min-height:42px; }
.balon b{ color:var(--navy); } :root[data-tema="gelap"] .balon b{ color:var(--cyan); }
@media (prefers-color-scheme:dark){ :root:not([data-tema="terang"]) .balon b{ color:var(--cyan); } }

/* ── layar ── */
.layar{ position:relative; padding:14px 18px 12px; border-radius:26px; color:#fff; overflow:hidden; isolation:isolate;
  background:linear-gradient(165deg,var(--layar1),var(--layar2)); box-shadow:inset 0 2px 0 rgba(255,255,255,.12), inset 0 -10px 30px rgba(0,0,0,.35), 0 14px 28px -16px rgba(5,20,50,.8); }
.layar::before{ content:""; position:absolute; inset:0 0 55% 0; z-index:-1; background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0)); border-radius:26px 26px 60% 60%/26px 26px 30px 30px; }
.riw-btn{ position:absolute; top:10px; left:10px; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:12px; background:rgba(255,255,255,.08); color:#9FD9EA; cursor:pointer; }
.riw-btn svg{ width:18px; height:18px; }
.ekspr{ min-height:24px; padding-left:40px; text-align:right; font:700 19px/1.25 var(--judul); color:#8FC6E0; letter-spacing:.02em; overflow-wrap:anywhere; }
.hasil{ text-align:right; font:800 clamp(44px,13vw,60px)/1.05 var(--judul); color:#E9FBFF; text-shadow:0 0 18px rgba(34,211,238,.45); white-space:nowrap; overflow-x:auto; scrollbar-width:none; letter-spacing:.01em; }
.hasil::-webkit-scrollbar{ display:none; }
.hasil.kecil{ font-size:clamp(30px,9vw,40px); }
.hasil.pesan{ font-size:22px; white-space:normal; color:#FFD36B; text-shadow:none; }
.hasil.muncul{ animation:muncul .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes muncul{ from{ transform:scale(.85); opacity:.3; } }
.bantu{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:30px; margin-top:4px; }
#sisa{ font:700 15px var(--judul); color:#C6EE7E; }
.lihat{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 8px; border:0; border-radius:99px; background:rgba(155,197,61,.18); color:#D7F59A; font:800 12.5px var(--teksf); cursor:pointer; }
.lihat img{ width:20px; height:20px; }

/* ── tombol 3D glossy ── */
.papan-tombol{ display:grid; grid-template-columns:repeat(4,1fr); gap:11px; padding-bottom:6px; }
.k{ --d:6px; --k1x:var(--k1); --k2x:var(--k2); --k3x:var(--k3); --ktx:var(--kt);
  position:relative; overflow:hidden; display:grid; place-items:center; height:clamp(54px,9.4vh,80px); border:0; border-radius:20px; cursor:pointer; user-select:none; touch-action:manipulation;
  color:var(--ktx); font:800 30px/1 var(--judul);
  background:linear-gradient(180deg,var(--k1x) 0%,var(--k2x) 100%);
  box-shadow:0 var(--d) 0 var(--k3x), 0 calc(var(--d) + 7px) 16px -8px var(--bayang), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.07);
  transition:transform .07s ease, box-shadow .07s ease, filter .15s; margin-bottom:var(--d); }
.k::before{ content:""; position:absolute; left:9%; right:9%; top:5%; height:44%; border-radius:16px 16px 50% 50%/16px 16px 22px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.05)); pointer-events:none; opacity:.85; }
.k svg{ width:28px; height:28px; stroke-width:2.4; position:relative; }
.k.tekan,.k:active{ transform:translateY(var(--d)); box-shadow:0 0 0 var(--k3x), 0 3px 8px -4px var(--bayang), inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.08); }
.k-op{ --k1x:#5CE6FA; --k2x:#13B5D6; --k3x:#0A7E97; --ktx:#FFFFFF; font-size:36px; text-shadow:0 2px 0 rgba(6,80,100,.45); }
.k-sama{ --k1x:#C4E86A; --k2x:#8BB82B; --k3x:#5C8416; --ktx:#FFFFFF; font-size:40px; text-shadow:0 2px 0 rgba(60,90,10,.5); grid-row:span 2; height:auto; }
.k-hapus{ --k1x:#FF9C9C; --k2x:#EE5468; --k3x:#AE2E44; --ktx:#FFFFFF; text-shadow:0 2px 0 rgba(140,20,40,.45); }
.k-mundur{ --k1x:#FFE08A; --k2x:#F5B42A; --k3x:#B67B0B; --ktx:#5A3A00; }
.k-nol{ grid-column:span 2; }
.k.op-aktif{ filter:brightness(1.12) saturate(1.2); box-shadow:0 var(--d) 0 var(--k3x), 0 0 0 3px rgba(34,211,238,.5), inset 0 2px 0 rgba(255,255,255,.55); }

/* ── tombol umum 3D ── */
.btn3d{ --d:5px; position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 18px; border:0; border-radius:16px; cursor:pointer;
  font:800 16px/1 var(--teksf); color:var(--kt); background:linear-gradient(180deg,var(--k1),var(--k2));
  box-shadow:0 var(--d) 0 var(--k3), 0 calc(var(--d) + 6px) 14px -8px var(--bayang), inset 0 2px 0 rgba(255,255,255,.55); margin-bottom:var(--d); transition:transform .07s, box-shadow .07s; }
.btn3d::before{ content:""; position:absolute; left:6%; right:6%; top:6%; height:42%; border-radius:12px 12px 40% 40%; background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,0)); pointer-events:none; }
.btn3d:active{ transform:translateY(var(--d)); box-shadow:0 0 0 var(--k3), inset 0 2px 0 rgba(255,255,255,.4); }
.btn3d.lime{ color:#fff; background:linear-gradient(180deg,#C4E86A,#8BB82B); box-shadow:0 var(--d) 0 #5C8416, 0 calc(var(--d) + 6px) 14px -8px var(--bayang), inset 0 2px 0 rgba(255,255,255,.55); text-shadow:0 1px 0 rgba(60,90,10,.45); }
.btn3d.lime:active{ box-shadow:0 0 0 #5C8416; }
.btn3d.merah-muda{ color:#fff; background:linear-gradient(180deg,#FF9C9C,#EE5468); box-shadow:0 var(--d) 0 #AE2E44, 0 calc(var(--d) + 6px) 14px -8px var(--bayang), inset 0 2px 0 rgba(255,255,255,.5); }
.btn3d.merah-muda:active{ box-shadow:0 0 0 #AE2E44; }
.btn3d.besar{ min-height:60px; font-size:19px; width:100%; }
.btn3d svg{ width:20px; height:20px; position:relative; }

/* ── tab bawah ── */
.tab{ position:fixed; left:50%; bottom:0; z-index:20; width:min(520px,100%); transform:translateX(-50%); display:grid; grid-template-columns:repeat(3,1fr);
  padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--kartu) 88%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--garis); border-radius:22px 22px 0 0; box-shadow:0 -10px 30px -18px var(--bayang); }
.tab button{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 0; border:0; background:none; cursor:pointer; color:var(--redup); font:800 12px/1.2 var(--teksf); border-radius:14px; }
.tab img{ width:30px; height:30px; transition:transform .25s cubic-bezier(.3,1.6,.5,1); filter:grayscale(.55) opacity(.75); }
.tab button[aria-current="page"]{ color:var(--teks); background:var(--lembut); }
.tab button[aria-current="page"] img{ transform:translateY(-3px) scale(1.12); filter:none; }

/* ── latihan ── */
.lt-pilih,.lt-main,.lt-hasil{ display:flex; flex-direction:column; gap:12px; }
.lt-sapa{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:22px; background:var(--kartu); border:1px solid var(--garis); box-shadow:0 10px 24px -18px var(--bayang); }
.lt-sapa h2{ margin:0; font:800 23px/1.1 var(--judul); } .lt-sapa p{ margin:2px 0 0; color:var(--redup); font-weight:700; font-size:13.5px; }
.sub{ margin:4px 2px -2px; font:800 15px var(--judul); color:var(--redup); }
.opsi-op{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.op3d{ --d:5px; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:0; padding:10px 4px 8px; border:0; border-radius:18px; cursor:pointer;
  color:var(--kt); background:linear-gradient(180deg,var(--k1),var(--k2)); box-shadow:0 var(--d) 0 var(--k3), inset 0 2px 0 rgba(255,255,255,.55); margin-bottom:var(--d); transition:transform .07s; }
.op3d b{ font:800 32px/1 var(--judul); } .op3d span{ font:800 11.5px var(--teksf); color:var(--redup); }
.op3d.lebar{ grid-column:1/-1; flex-direction:row; justify-content:center; gap:12px; } .op3d.lebar b{ font-size:24px; }
.op3d[aria-checked="true"]{ color:#fff; background:linear-gradient(180deg,#5CE6FA,#13B5D6); box-shadow:0 var(--d) 0 #0A7E97, 0 0 0 3px color-mix(in srgb,var(--cyan) 40%,transparent), inset 0 2px 0 rgba(255,255,255,.55); }
.op3d[aria-checked="true"] span{ color:#E6FBFF; }
.op3d:active{ transform:translateY(var(--d)); box-shadow:0 0 0 var(--k3); }
.opsi-lv{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.opsi-lv button{ display:flex; flex-direction:column; align-items:center; padding:10px 4px; border:2px solid var(--garis); border-radius:16px; background:var(--kartu); cursor:pointer; font:800 15px var(--judul); color:var(--teks); }
.opsi-lv small{ font:700 11px var(--teksf); color:var(--samar); }
.opsi-lv button[aria-checked="true"]{ border-color:var(--lime); background:color-mix(in srgb,var(--lime) 16%,var(--kartu)); }
.lt-rekor{ min-height:20px; text-align:center; font:700 13px var(--teksf); color:var(--redup); }
.lt-rekor img{ display:inline-block; width:18px; height:18px; vertical-align:-3px; }
.lt-progres{ display:flex; gap:5px; justify-content:center; }
.lt-progres i{ width:22px; height:8px; border-radius:99px; background:var(--garis); transition:background .3s, transform .3s; }
.lt-progres i.kini{ background:var(--cyan); transform:scaleY(1.3); } .lt-progres i.benar{ background:var(--lime); } .lt-progres i.salah{ background:#F0566A; }
.lt-soal-wrap{ display:flex; align-items:flex-end; gap:8px; }
.lt-soal-wrap .ava-umar{ margin-bottom:6px; }
.lt-kartu{ flex:1; position:relative; padding:12px 16px 12px; border-radius:24px; text-align:center; color:#fff; overflow:hidden;
  background:linear-gradient(165deg,var(--layar1),var(--layar2)); box-shadow:inset 0 2px 0 rgba(255,255,255,.12), 0 14px 28px -16px rgba(5,20,50,.8); }
.lt-no{ font:700 12.5px var(--teksf); color:#8FC6E0; }
.lt-soal{ font:800 clamp(38px,11vw,50px)/1.1 var(--judul); color:#E9FBFF; }
.lt-jawab{ display:inline-block; min-width:110px; margin-top:4px; padding:2px 16px; border-radius:16px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 2px rgba(34,211,238,.35);
  font:800 34px/1.25 var(--judul); color:#C6EE7E; }
.lt-kartu.benar .lt-jawab{ background:rgba(155,197,61,.25); box-shadow:inset 0 0 0 2px #9BC53D; }
.lt-kartu.salah .lt-jawab{ background:rgba(240,86,106,.2); box-shadow:inset 0 0 0 2px #F0566A; animation:goyang .4s; }
.lt-pesan{ min-height:20px; margin:6px 0 0; font:700 13.5px var(--teksf); color:#FFE08A; }
.papan-tombol.jawab{ grid-template-columns:repeat(3,1fr); }
.papan-tombol.jawab .k-sama{ grid-row:auto; height:clamp(54px,8.6vh,68px); }
.lt-keluar{ align-self:center; border:0; background:none; color:var(--samar); font:700 13px var(--teksf); text-decoration:underline; cursor:pointer; padding:4px; }
.lt-hasil{ align-items:center; text-align:center; padding-top:10px; }
.lt-hasil h2{ margin:0; font:800 32px/1.1 var(--judul); } .lt-hasil p{ margin:0; font-weight:700; color:var(--redup); }
.bintang3{ display:flex; gap:6px; align-items:flex-end; min-height:84px; }
.bintang3 img{ width:70px; height:70px; filter:drop-shadow(0 6px 8px rgba(160,110,0,.35)); animation:bintang .5s cubic-bezier(.3,1.7,.5,1) both; }
.bintang3 img:nth-child(2){ width:84px; height:84px; animation-delay:.18s; } .bintang3 img:nth-child(3){ animation-delay:.36s; }
.bintang3 img.mati{ filter:grayscale(1) opacity(.25); }
@keyframes bintang{ from{ transform:scale(0) rotate(-40deg); opacity:0; } }
.baris-btn{ display:flex; gap:10px; width:100%; margin-top:30px; } .baris-btn .btn3d{ flex:1; }

/* ── papan poin ── */
.pp-alat{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pp-alat h2{ margin:0 auto 0 2px; font:800 22px/1 var(--judul); }
.chip{ display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 11px; border:1px solid var(--garis); border-radius:99px; background:var(--kartu); color:var(--teks); font:800 12.5px var(--teksf); cursor:pointer; }
.chip svg{ width:16px; height:16px; } .chip[aria-pressed="true"]{ background:var(--lembut); border-color:var(--cyan); } .chip:disabled{ opacity:.45; cursor:default; }
.pp-langkah{ display:flex; align-items:center; gap:6px; font:700 12.5px var(--teksf); color:var(--redup); }
.pp-langkah button{ min-width:44px; height:32px; border:2px solid var(--garis); border-radius:12px; background:var(--kartu); color:var(--teks); font:800 15px var(--judul); cursor:pointer; }
.pp-langkah button[aria-checked="true"]{ border-color:var(--lime); background:color-mix(in srgb,var(--lime) 18%,var(--kartu)); }
.pp-papan{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.tim{ --w:#14498C; --w2:#0D3266; position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 10px 12px; border-radius:24px; background:var(--kartu); border:1px solid var(--garis);
  box-shadow:0 14px 26px -18px var(--bayang); overflow:hidden; isolation:isolate; transition:transform .3s; }
.tim::before{ content:""; position:absolute; inset:0 0 auto 0; height:58px; z-index:-1; background:linear-gradient(180deg,var(--w),color-mix(in srgb,var(--w) 70%,transparent)); }
.tim.juara{ box-shadow:0 0 0 3px #FFC83A, 0 14px 26px -14px rgba(200,140,0,.6); }
.tim .mahkota{ position:absolute; top:6px; right:8px; width:28px; height:28px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.tim-ava{ width:64px; height:64px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:linear-gradient(160deg,#fff,#DCEBFA); box-shadow:0 0 0 3px var(--kartu), 0 6px 12px -6px var(--bayang);
  font:800 28px var(--judul); color:var(--w); border:0; cursor:pointer; padding:0; }
.tim-ava img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; transform:scale(1.55); transform-origin:50% 18%; }
.tim-nama{ max-width:100%; border:0; background:none; cursor:pointer; font:800 15px/1.2 var(--teksf); color:var(--teks); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 6px; border-radius:8px; }
.tim-skor{ font:800 clamp(46px,13vw,60px)/1 var(--judul); color:var(--teks); font-variant-numeric:tabular-nums; position:relative; }
.tim-skor.naik{ animation:naik .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes naik{ 40%{ transform:scale(1.18); color:var(--w); } }
.terbang{ position:absolute; left:50%; top:30%; transform:translateX(-50%); font:800 26px var(--judul); color:var(--lime); pointer-events:none; animation:terbang .8s ease-out forwards; text-shadow:0 2px 0 rgba(0,0,0,.15); }
.terbang.min{ color:#F0566A; }
@keyframes terbang{ to{ transform:translate(-50%,-46px); opacity:0; } }
.turus{ display:flex; flex-wrap:wrap; justify-content:center; gap:3px 8px; min-height:22px; max-width:100%; }
.turus svg{ width:auto; height:20px; stroke:var(--w); stroke-width:2.6; }
:root[data-tema="gelap"] .turus svg{ stroke:color-mix(in srgb,var(--w) 55%,#fff); }
@media (prefers-color-scheme:dark){ :root:not([data-tema="terang"]) .turus svg{ stroke:color-mix(in srgb,var(--w) 55%,#fff); } }
.turus .lebih{ font:800 12px var(--teksf); color:var(--samar); align-self:center; }
.tim-tombol{ display:grid; grid-template-columns:1fr 1.6fr; gap:8px; width:100%; margin-top:4px; }
.tim-tombol .k{ height:52px; font-size:24px; --d:5px; border-radius:16px; }
.tim-tombol .tambah{ --k1x:color-mix(in srgb,var(--w) 70%,#fff); --k2x:var(--w); --k3x:var(--w2); --ktx:#fff; text-shadow:0 2px 0 rgba(0,0,0,.25); }
.pp-bawah{ display:flex; gap:10px; margin-top:4px; } .pp-bawah .btn3d{ flex:1; }
.pp-kosong{ grid-column:1/-1; text-align:center; color:var(--redup); padding:30px 10px; font-weight:700; }

/* layar penuh (proyektor / TV kelas) */
.hal.penuh{ position:fixed; inset:0; z-index:40; padding:18px 22px; background:var(--bg); overflow:auto; }
.hal.penuh .pp-papan{ grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:18px; flex:1; align-content:center; }
.hal.penuh .tim-skor{ font-size:clamp(70px,12vw,140px); }
.hal.penuh .tim-ava{ width:96px; height:96px; } .hal.penuh .tim-nama{ font-size:22px; }
.hal.penuh .tim-tombol .k{ height:64px; font-size:30px; } .hal.penuh .turus svg{ height:28px; }
.hal.penuh .pp-bawah,.hal.penuh .pp-langkah{ display:none; }

/* ── lembar bawah ── */
.lapis{ position:fixed; inset:0; z-index:50; background:rgba(4,12,32,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:pudar .2s; }
@keyframes pudar{ from{ opacity:0; } }
.lembar{ position:fixed; left:50%; bottom:0; z-index:60; width:min(520px,100%); max-height:82vh; overflow:auto; transform:translateX(-50%); padding:14px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0; background:var(--bg2); box-shadow:0 -20px 50px -20px rgba(0,0,0,.5); animation:naikLb .3s cubic-bezier(.2,.9,.3,1); }
@keyframes naikLb{ from{ transform:translate(-50%,100%); } }
.lb-kepala{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.lb-kepala h3{ margin:0; font:800 21px var(--judul); }
.lb-teks{ margin:0 0 14px; color:var(--redup); font-weight:600; }
.lb-aksi{ display:flex; gap:10px; margin-top:14px; } .lb-aksi .btn3d{ flex:1; }
.riw{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; width:100%; padding:11px 12px; border:0; border-radius:14px; background:var(--kartu); margin-bottom:8px; cursor:pointer; text-align:left; border:1px solid var(--garis); }
.riw span{ color:var(--redup); font:700 15px var(--judul); overflow-wrap:anywhere; } .riw b{ font:800 22px var(--judul); color:var(--teks); white-space:nowrap; }
.tautan{ display:block; margin:8px auto 0; border:0; background:none; color:var(--samar); font:700 13px var(--teksf); text-decoration:underline; cursor:pointer; }
.kosong{ text-align:center; padding:24px 6px; color:var(--redup); font-weight:700; }
.fl{ display:block; margin:12px 2px 6px; font:800 13px var(--teksf); color:var(--redup); }
.in{ width:100%; height:50px; padding:0 14px; border-radius:14px; border:2px solid var(--garis); background:var(--kartu); color:var(--teks); font:800 18px var(--teksf); }
.in:focus{ outline:none; border-color:var(--cyan); }
.warna{ display:flex; flex-wrap:wrap; gap:10px; }
.warna button{ width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; box-shadow:inset 0 -4px 0 rgba(0,0,0,.2), inset 0 3px 0 rgba(255,255,255,.4); }
.warna button[aria-checked="true"]{ outline:3px solid var(--teks); outline-offset:3px; }
.pilih-ava{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.pilih-ava button{ aspect-ratio:1; border-radius:50%; overflow:hidden; border:3px solid transparent; padding:0; cursor:pointer; background:linear-gradient(160deg,#fff,#DCEBFA); display:grid; place-items:center; font:800 20px var(--judul); color:var(--navy); }
.pilih-ava img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; transform:scale(1.55); transform-origin:50% 18%; }
.pilih-ava button[aria-checked="true"]{ border-color:var(--lime); }

/* ── lihat bendanya ── */
.vis{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:6px 0 4px; }
.vis-baris{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; }
.vis-grup{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; max-width:220px; padding:8px; border-radius:16px; background:var(--kartu); border:1px solid var(--garis); }
.vis-grup img{ width:26px; height:26px; animation:pop .3s both; }
.vis-grup img.coret{ opacity:.25; filter:grayscale(1); }
.vis-op{ font:800 34px var(--judul); color:var(--redup); }
.vis-kisi{ display:grid; gap:4px; padding:10px; border-radius:16px; background:var(--kartu); border:1px solid var(--garis); }
.vis-kisi img{ width:22px; height:22px; animation:pop .25s both; }
.vis-ket{ margin:0; text-align:center; font:700 15px/1.5 var(--teksf); color:var(--teks); } .vis-ket b{ font:800 20px var(--judul); color:var(--navy); }
:root[data-tema="gelap"] .vis-ket b{ color:var(--cyan); }
@media (prefers-color-scheme:dark){ :root:not([data-tema="terang"]) .vis-ket b{ color:var(--cyan); } }
@keyframes pop{ from{ transform:scale(0); } }

/* ── konfeti ── */
.konfeti{ position:fixed; inset:0; pointer-events:none; z-index:80; overflow:hidden; }
.konfeti i{ position:absolute; top:-12px; width:9px; height:14px; border-radius:2px; animation:jatuh 1.6s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes jatuh{ to{ transform:translate(var(--x),105vh) rotate(var(--r)); opacity:.9; } }

/* ── layar lebar ── */
@media (min-width:760px){
  .app{ max-width:620px; }
  #hal-poin:not(.penuh){ } .app:has(#hal-poin:not([hidden])){ max-width:1000px; }
}
@media (max-height:640px){ .pemandu{ display:none; } .k{ height:50px; } }

/* fokus wajah per tokoh pada avatar bulat */
.tim-ava img[src*="fatimah"],.pilih-ava img[src*="fatimah"]{ object-position:42% 40%; transform-origin:42% 42%; transform:scale(1.7); }
.tim-ava img[src*="abah_salman"],.pilih-ava img[src*="abah_salman"]{ object-position:55% 20%; transform-origin:55% 22%; transform:scale(1.9); }
.tim-ava img[src*="utsman"],.pilih-ava img[src*="utsman"]{ object-position:45% 20%; transform-origin:45% 22%; }