/* KELAS MAIN · shell (UI luar game). Sistem reka bentuk: kertas krim hangat, dakwat biru gelap,
 * aksen karang; Fredoka (paparan) + Nunito (teks), kedua-duanya tempatan. Kad "mainan" tebal dengan bayang tapak. */
@font-face{font-family:'Fredoka';src:url(core/tema/fon/fredoka.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Nunito';src:url(core/tema/fon/nunito.woff2) format('woff2');font-weight:200 1000;font-display:swap}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --kertas:#fff6ea;--kertas-2:#fdebd3;--putih:#fff;
  --dakwat:#1f2a44;--dakwat-2:#55607a;--dakwat-3:#8a93a8;--garis:#efe3d1;
  --utama:#ff6b4a;--utama-gelap:#df4b2c;--emas:#ffc23d;--emas-gelap:#e09b0f;--hijau:#22b07d;--hijau-gelap:#13865d;--langit:#4aa8ff;
  --s-matematik:#ff7a45;--s-bahasa-melayu:#e8445a;--s-english:#3f7cff;--s-sains:#19b37d;--s-geografi:#5c8f1f;--s-sejarah:#8d5a3b;--s-pemikiran:#8b5cf6;--s-kehidupan:#f5a524;--s-pendidikan-islam:#0e9aa7;--s-bahasa-arab:#a86b16;--s-pendidikan-jasmani:#c2255c;
  --f-papar:'Fredoka',system-ui,sans-serif;--f-teks:'Nunito',system-ui,sans-serif;
  --bayang:0 6px 0 rgba(31,42,68,.08),0 18px 36px -12px rgba(31,42,68,.22);
  --bayang-kecil:0 4px 0 rgba(31,42,68,.08),0 10px 20px -10px rgba(31,42,68,.25);
  --jejari:28px;--pad:clamp(16px,4vw,40px);
  --atas:env(safe-area-inset-top,0px);--bawah:env(safe-area-inset-bottom,0px);
}
html{-webkit-text-size-adjust:100%;background:var(--kertas);overflow-x:clip;overscroll-behavior-x:none}
body{min-height:100vh;min-height:100dvh;font-family:var(--f-teks);font-weight:600;color:var(--dakwat);-webkit-tap-highlight-color:transparent;overflow-x:clip}
body.terkunci{overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;touch-action:manipulation}
img{display:block;max-width:100%}
svg{display:block}
:focus-visible{outline:3px solid var(--langit);outline-offset:3px;border-radius:12px}
.tanpa-js{padding:40px;text-align:center;font-size:18px}

/* ---------- latar ---------- */
.latar{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background-image:radial-gradient(rgba(31,42,68,.07) 1.2px,transparent 1.3px);background-size:22px 22px}
.latar i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.latar__a{width:46vmax;height:46vmax;left:-14vmax;top:-18vmax;background:#ffd2b8}
.latar__b{width:40vmax;height:40vmax;right:-14vmax;top:8vmax;background:#cfe6ff}
.latar__c{width:44vmax;height:44vmax;left:24vw;bottom:-26vmax;background:#c9f0dc}

.app{position:relative;min-height:100dvh;padding:calc(var(--atas) + 14px) var(--pad) calc(var(--bawah) + 28px);max-width:1240px;margin:0 auto}

/* ---------- komponen asas ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:18px;
  font:600 18px/1 var(--f-papar);background:var(--putih);color:var(--dakwat);box-shadow:0 4px 0 #e5d9c6,0 10px 18px -10px rgba(31,42,68,.3);
  transition:transform .12s,box-shadow .12s,filter .15s;white-space:nowrap}
.btn svg{width:22px;height:22px;flex:none}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #e5d9c6}
.btn--utama{background:var(--utama);color:#fff;box-shadow:0 4px 0 var(--utama-gelap),0 12px 22px -10px rgba(223,75,44,.55)}
.btn--utama:active{box-shadow:0 1px 0 var(--utama-gelap)}
.btn--hijau{background:var(--hijau);color:#fff;box-shadow:0 4px 0 var(--hijau-gelap),0 12px 22px -10px rgba(19,134,93,.5)}
.btn--hijau:active{box-shadow:0 1px 0 var(--hijau-gelap)}
.btn--bahaya{background:#fff0ee;color:#c4321a;box-shadow:0 4px 0 #f3c9c1}
.btn--besar{min-height:62px;font-size:21px;padding:0 28px;border-radius:20px}
.btn--ikon{width:52px;padding:0}
.btn--lut{background:transparent;box-shadow:none}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.cip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;font:600 14px/1 var(--f-papar);background:var(--kertas-2);color:var(--dakwat-2);white-space:nowrap}
.cip svg{width:16px;height:16px}
.cip--tahap{background:var(--utama);color:#fff;font-weight:700;box-shadow:0 3px 0 var(--utama-gelap)}
.tajuk{font:700 clamp(28px,4.4vw,44px)/1.08 var(--f-papar);letter-spacing:-.01em}
.tajuk-2{font:700 clamp(21px,2.6vw,27px)/1.15 var(--f-papar)}
.sub{color:var(--dakwat-2);font-size:clamp(15px,1.6vw,18px);font-weight:600;line-height:1.45}
.kad{background:var(--putih);border-radius:var(--jejari);box-shadow:var(--bayang)}

/* ---------- jenama ---------- */
.jenama{display:flex;align-items:center;gap:12px;min-width:0}
.jenama img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(31,42,68,.18))}
.jenama b{font:700 25px/1 var(--f-papar);letter-spacing:-.01em;white-space:nowrap}
.jenama small{display:block;font:600 13px/1.2 var(--f-teks);color:var(--dakwat-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- bar atas shell ---------- */
.atas{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:clamp(18px,3.4vw,36px)}
.atas__kanan{display:flex;align-items:center;gap:10px}

/* ---------- pintu ibu bapa (tekan lama) ---------- */
.pintu{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px 0 8px;border-radius:999px;background:rgba(255,255,255,.8);
  color:var(--dakwat-2);font:600 15px/1.1 var(--f-papar);box-shadow:var(--bayang-kecil);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pintu__cincin{position:relative;width:34px;height:34px;flex:none}
.pintu__cincin svg{width:34px;height:34px;transform:rotate(-90deg)}
.pintu__cincin circle{fill:none;stroke-width:4}
.pintu__trek{stroke:#eadfcd}
.pintu__isi{stroke:var(--utama);stroke-linecap:round;stroke-dasharray:88;stroke-dashoffset:88}
.pintu__kunci{position:absolute;inset:0;display:grid;place-items:center}
.pintu__kunci svg{width:16px;height:16px;transform:none}
.pintu small{display:block;font:600 11px/1 var(--f-teks);color:var(--dakwat-3);margin-top:2px}
.pintu.tekan{color:var(--dakwat)}

/* ---------- skrin pilih anak ---------- */
.pilih{display:flex;flex-direction:column;align-items:center;text-align:center}
.pilih__kepala{margin:clamp(6px,2vw,24px) 0 clamp(20px,3.6vw,40px)}
.pilih__kepala .sub{margin-top:8px}
.senarai-anak{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2.4vw,28px);width:100%}
.kad-anak{position:relative;width:clamp(150px,22vw,210px);padding:18px 14px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;
  border-radius:32px;background:var(--putih);box-shadow:var(--bayang);transition:transform .18s cubic-bezier(.3,1.5,.5,1)}
@media (hover:hover){.kad-anak:hover{transform:translateY(-4px) rotate(-1deg)}}
.kad-anak:active{transform:translateY(2px) scale(.98)}
.kad-anak__nama{font:700 22px/1.1 var(--f-papar);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.potret{position:relative;width:var(--s,128px);height:var(--s,128px);flex:none;border-radius:50%;background:var(--w,#ffe2cc);
  box-shadow:0 0 0 5px #fff,0 0 0 9px var(--w2,var(--emas)),0 10px 22px -6px rgba(31,42,68,.35);overflow:hidden}
.potret img{width:100%;height:100%;object-fit:cover}
.potret--avatar img{object-fit:contain;transform:translateY(8%) scale(.98)}
.kad-anak--tambah{background:transparent;box-shadow:none;border:3px dashed #e3d3bb;color:var(--dakwat-2)}
.kad-anak--tambah .potret{background:var(--kertas-2);box-shadow:none;display:grid;place-items:center;color:var(--utama)}
.kad-anak--tambah .potret svg{width:48px;height:48px}
.pilih__kaki{margin-top:clamp(26px,5vw,52px);display:flex;flex-direction:column;align-items:center;gap:10px}
.sambut{display:flex;align-items:center;gap:clamp(18px,4vw,48px);text-align:left;max-width:860px;padding:clamp(20px,4vw,44px)}
.sambut img{width:clamp(130px,22vw,230px);flex:none;filter:drop-shadow(0 18px 18px rgba(31,42,68,.2))}
.sambut .tajuk{margin-bottom:10px}
.sambut .btn{margin-top:22px}
.sambut__ciri{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* ---------- laman utama anak ---------- */
.salam{display:flex;align-items:center;gap:clamp(12px,2vw,20px);min-width:0}
.salam .potret{--s:clamp(58px,8vw,76px)}
.salam .potret{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--w2,var(--emas)),0 8px 16px -6px rgba(31,42,68,.35)}
.salam__teks{min-width:0}
.salam__teks .tajuk{font-size:clamp(25px,3.6vw,38px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.salam__kecil{display:none;font:600 15px/1.1 var(--f-papar);color:var(--dakwat-2)}
.salam__teks .sub{margin-top:2px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bintang-pil{display:inline-flex;align-items:center;gap:6px;height:52px;padding:0 16px 0 12px;border-radius:18px;background:#fff;box-shadow:0 4px 0 #e5d9c6,0 10px 18px -10px rgba(31,42,68,.3);font:700 18px/1 var(--f-papar)}
.bintang-pil svg{width:24px;height:24px;color:var(--emas)}

.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(14px,2vw,22px);margin-bottom:clamp(34px,4vw,44px)}
.hero__kad{position:relative;display:flex;align-items:center;gap:clamp(12px,2vw,22px);min-height:150px;padding:clamp(16px,2.4vw,26px);overflow:hidden;text-align:left;
  border-radius:var(--jejari);color:#fff;box-shadow:var(--bayang);transition:transform .18s cubic-bezier(.3,1.5,.5,1)}
@media (hover:hover){.hero__kad:hover{transform:translateY(-3px)}}
.hero__kad:active{transform:translateY(2px)}
.hero__kad::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 0,rgba(255,255,255,.28),transparent 45%),radial-gradient(rgba(255,255,255,.14) 1.2px,transparent 1.3px) 0 0/18px 18px;pointer-events:none}
.hero__kad img{width:clamp(84px,11vw,124px);flex:none;filter:drop-shadow(0 12px 12px rgba(0,0,0,.25));position:relative;z-index:1}
.hero__isi{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.hero__isi>span{display:block}
.hero__isi>.hero__label,.hero__isi>.hero__aksi,.hero__isi>.lencana{display:inline-flex}
.hero__label{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--f-papar);letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.hero__label svg{width:16px;height:16px}
.hero__tajuk{font:700 clamp(22px,2.6vw,30px)/1.1 var(--f-papar);margin:6px 0 4px}
.hero__sub{font-size:15px;opacity:.92}
.hero__aksi{display:inline-flex;align-items:center;gap:8px;margin-top:12px;height:42px;padding:0 18px;border-radius:999px;background:#fff;color:var(--dakwat);font:600 16px/1 var(--f-papar);box-shadow:0 3px 0 rgba(0,0,0,.15)}
.hero__aksi svg{width:18px;height:18px}
.hero__kad--sambung{background:linear-gradient(135deg,var(--warna,#ff6b4a),color-mix(in srgb,var(--warna,#ff6b4a) 62%,#1f2a44))}
.hero__kad--cabaran{background:linear-gradient(135deg,#7b5cff,#4a3bd1)}
.hero__kad--kosong{background:linear-gradient(135deg,#ffb36b,#ff6b4a)}
.hero__kad[aria-disabled="true"]{filter:saturate(.55);cursor:default}
@media (hover:hover){.hero__kad[aria-disabled="true"]:hover{transform:none}}
.lencana{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.22);font:600 13px/1 var(--f-papar)}
.lencana svg{width:14px;height:14px}

.perpustakaan__kepala{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.tab-subjek{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin:0 calc(var(--pad) * -1) 8px;padding-left:var(--pad);padding-right:var(--pad);scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad)}
.tab-subjek::-webkit-scrollbar{display:none}
/* Hujung kanan = pad yang sama dengan kiri (padding-right dalam bekas skrol flex diabaikan oleh Safari): spacer ::after */
.tab-subjek{padding-right:0}
.tab-subjek::after{content:"";flex:0 0 calc(var(--pad) - 8px)}
.tab-subjek-bungkus{position:relative}
.tab-subjek-bungkus::before,.tab-subjek-bungkus::after{content:"";position:absolute;top:0;bottom:10px;width:calc(var(--pad) + 28px);pointer-events:none;z-index:2;opacity:0;transition:opacity .2s;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.tab-subjek-bungkus::before{left:calc(var(--pad) * -1);-webkit-mask-image:linear-gradient(90deg,#000 35%,transparent);mask-image:linear-gradient(90deg,#000 35%,transparent)}
.tab-subjek-bungkus::after{right:calc(var(--pad) * -1);-webkit-mask-image:linear-gradient(270deg,#000 35%,transparent);mask-image:linear-gradient(270deg,#000 35%,transparent)}
.tab-subjek-bungkus.ada-kiri::before,.tab-subjek-bungkus.ada-kanan::after{opacity:1}
.tab-subjek button{flex:none;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px 0 8px;border-radius:999px;background:#fff;font:600 16px/1 var(--f-papar);color:var(--dakwat-2);box-shadow:var(--bayang-kecil);scroll-snap-align:start;transition:background-color .15s,color .15s,transform .12s}
.tab-subjek button:active{transform:translateY(2px)}
.tab-subjek .bulat{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--sw) 16%,#fff);color:var(--sw)}
.tab-subjek .bulat svg{width:20px;height:20px}
.tab-subjek button[aria-pressed="true"]{background:var(--sw);color:#fff}
.tab-subjek button[aria-pressed="true"] .bulat{background:rgba(255,255,255,.22);color:#fff}
.suis{display:inline-flex;align-items:center;gap:10px;font:600 15px/1.2 var(--f-papar);color:var(--dakwat-2);cursor:pointer;user-select:none}
.suis input{position:absolute;opacity:0;width:1px;height:1px}
.suis__trek{position:relative;width:52px;height:30px;flex:none;border-radius:999px;background:#e6dccb;transition:background-color .2s;box-shadow:inset 0 2px 3px rgba(31,42,68,.12)}
.suis__trek::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(31,42,68,.25);transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.suis input:checked+.suis__trek{background:var(--hijau)}
.suis input:checked+.suis__trek::after{transform:translateX(22px)}
.suis input:focus-visible+.suis__trek{outline:3px solid var(--langit);outline-offset:2px}

.grid-game{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,18vw,200px),1fr));gap:clamp(12px,1.8vw,20px)}
.kad-game{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:left;border-radius:26px;background:#fff;box-shadow:var(--bayang);overflow:hidden;transition:transform .18s cubic-bezier(.3,1.5,.5,1)}
@media (hover:hover){.kad-game:hover{transform:translateY(-4px)}}
.kad-game:active{transform:translateY(2px) scale(.985)}
.kad-game__seni{position:relative;aspect-ratio:1.15;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--warna) 30%,#fff),color-mix(in srgb,var(--warna) 62%,#fff) 72%)}
.kad-game__seni::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.35) 1.2px,transparent 1.3px) 0 0/16px 16px}
.kad-game__seni img{position:relative;z-index:1;width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 12px 10px rgba(31,42,68,.28));transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
@media (hover:hover){.kad-game:hover .kad-game__seni img{transform:scale(1.06) rotate(-3deg)}}
.kad-game__subjek{position:absolute;left:10px;top:10px;z-index:2;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--sw);box-shadow:0 3px 0 rgba(31,42,68,.1)}
.kad-game__subjek svg{width:20px;height:20px}
.kad-game__umur{position:absolute;right:10px;top:10px;z-index:2;height:26px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.92);font:600 12px/26px var(--f-papar);color:var(--dakwat-2)}
.kad-game__isi{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.kad-game__nama{font:700 18px/1.15 var(--f-papar)}
.bintang3{display:flex;gap:2px}
.bintang3 i{display:block;color:#e6dccb}
.bintang3 svg{width:22px;height:22px}
.bintang3 i.ada{color:var(--emas);filter:drop-shadow(0 2px 0 var(--emas-gelap))}
.kosong{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 20px;text-align:center;border:3px dashed #e8dac4;border-radius:var(--jejari);color:var(--dakwat-2)}
.kosong img{width:110px;filter:drop-shadow(0 10px 10px rgba(31,42,68,.18))}
.kosong b{font:700 21px/1.2 var(--f-papar);color:var(--dakwat)}
.kaki{display:flex;justify-content:center;margin-top:clamp(28px,4vw,48px)}

/* ---------- hos game ---------- */
.hos{position:fixed;inset:0;z-index:50;background:#14161a}
.hos__iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;opacity:0;transition:opacity .35s}
.hos.sedia .hos__iframe{opacity:1}
.hos__muat{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:22px;background:var(--warna,#ff6b4a);transition:opacity .35s}
.hos__muat img{width:min(42vmin,200px);filter:drop-shadow(0 18px 18px rgba(0,0,0,.28))}
.hos.sedia .hos__muat{opacity:0;pointer-events:none}
.hos__muat img[hidden]{display:none}
.hos__pulau{display:block;width:min(46vmin,220px);animation:hos-apung 2.4s ease-in-out infinite;filter:drop-shadow(0 22px 18px rgba(0,0,0,.25))}
.hos__pulau svg{display:block;width:100%;height:auto}
@keyframes hos-apung{50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.hos__pulau{animation:none}}
.pemutar{width:44px;height:44px;border-radius:50%;border:5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:pusing .8s linear infinite;justify-self:center}
@keyframes pusing{to{transform:rotate(360deg)}}

/* ---------- lapisan (modal, skrin tamat) ---------- */
.lapisan{position:fixed;inset:0;z-index:80;pointer-events:none}
.lapisan>*{pointer-events:auto}
.modal{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:calc(var(--atas) + 16px) 16px calc(var(--bawah) + 16px);background:rgba(24,30,52,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:auto;overscroll-behavior:contain}
.modal__kad{position:relative;width:min(560px,100%);padding:clamp(20px,3vw,32px);border-radius:32px;background:var(--kertas);box-shadow:0 30px 70px rgba(10,14,30,.4)}
.modal__tutup{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#fff;box-shadow:var(--bayang-kecil)}
.modal__tutup svg{width:22px;height:22px}
.modal__kad .tajuk-2{padding-right:52px}
.medan{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.medan>label,.medan__label{font:600 16px/1 var(--f-papar)}
.medan input[type=text]{height:58px;padding:0 18px;border-radius:18px;border:3px solid #eadfcd;background:#fff;font:700 21px/1 var(--f-papar);color:var(--dakwat);outline:none;transition:border-color .15s}
.medan input[type=text]:focus{border-color:var(--langit)}
.medan__nota{font-size:14px;color:var(--dakwat-3)}
.pilihan-tahap{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.pilihan-tahap button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:62px;padding:6px 2px;border-radius:16px;background:#fff;box-shadow:0 3px 0 #eadfcd;font:700 19px/1 var(--f-papar)}
.pilihan-tahap button small{font:600 11px/1 var(--f-teks);color:var(--dakwat-3)}
.pilihan-tahap button[aria-pressed="true"]{background:var(--dakwat);color:#fff;box-shadow:0 3px 0 #0e1527}
.pilihan-tahap button[aria-pressed="true"] small{color:#c9d1e6}
.pilihan-umur{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin-top:20px}
.pilihan-umur button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:104px;padding:20px 6px 14px;border-radius:20px;background:#fff;box-shadow:0 4px 0 #eadfcd}
.pilihan-umur button img{width:min(72px,100%);aspect-ratio:1;height:auto;border-radius:50%;object-fit:cover;margin-bottom:4px}
.pilihan-umur button[aria-pressed="true"] img{box-shadow:0 0 0 3px #fff}
.pilihan-umur button b{font:700 28px/1 var(--f-papar);white-space:nowrap}
.pilihan-umur button span{font:700 13px/1 var(--f-teks);margin-top:-2px}
.pilihan-umur button small{font:600 13px/1.2 var(--f-teks);color:var(--dakwat-3)}
.pilihan-umur button[aria-pressed="true"]{background:var(--dakwat);color:#fff;box-shadow:0 4px 0 #0e1527}
.pilihan-umur button[aria-pressed="true"] small{color:#c9d1e6}
.pilihan-umur__cadang{position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:3px 9px;border-radius:99px;background:#ffc93c;color:#3a2a00;font:700 11px/1.2 var(--f-teks);font-style:normal;white-space:nowrap}
.pilihan-umur button:active{transform:translateY(2px);box-shadow:0 2px 0 #eadfcd}
.segmen{display:inline-flex;padding:4px;border-radius:18px;background:#efe4d3;gap:4px}
.segmen button{min-height:44px;padding:0 18px;border-radius:14px;font:600 16px/1 var(--f-papar);color:var(--dakwat-2);display:inline-flex;align-items:center;gap:8px}
.segmen button svg{width:20px;height:20px}
.segmen--penuh{display:flex}.segmen--penuh button{flex:1 1 0;justify-content:center}
.segmen button[aria-pressed="true"]{background:#fff;color:var(--dakwat);box-shadow:0 2px 0 #e0d3bf}
.grid-avatar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.grid-avatar button{aspect-ratio:1;border-radius:50%;background:var(--w);display:grid;place-items:end center;overflow:hidden;box-shadow:0 0 0 3px #fff,0 4px 10px -4px rgba(31,42,68,.3);transition:transform .15s}
.grid-avatar button img{width:96%;height:96%;object-fit:contain;transform:translateY(6%)}
.grid-avatar button[aria-pressed="true"]{box-shadow:0 0 0 4px #fff,0 0 0 8px var(--utama);transform:scale(1.04)}
.foto-aksi{display:flex;gap:10px;flex-wrap:wrap}
.foto-aksi .btn{flex:1}
.foto-pratonton{display:flex;align-items:center;gap:14px}
.modal__aksi{display:flex;gap:10px;margin-top:26px}
.modal__aksi .btn{flex:1;min-width:0}
.pangkas{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:18px}
.pangkas__bingkai{position:relative;width:min(300px,76vw);aspect-ratio:1;border-radius:24px;overflow:hidden;background:#222;touch-action:none;cursor:grab}
.pangkas__bingkai canvas{width:100%;height:100%;display:block}
.pangkas__bingkai::after{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 49.5%,rgba(20,24,40,.62) 50%)}
.pangkas__bingkai::before{content:"";position:absolute;inset:0;margin:auto;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.9);z-index:1;pointer-events:none}
.pangkas input[type=range]{width:min(300px,76vw);accent-color:var(--utama);height:32px}

/* ---------- skrin tamat standard ---------- */
.tamat{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:calc(var(--atas) + 14px) 14px calc(var(--bawah) + 14px);background:rgba(24,30,52,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:auto}
.tamat__kad{position:relative;width:min(520px,100%);padding:clamp(22px,3vw,32px) clamp(18px,3vw,30px) clamp(18px,2.6vw,26px);border-radius:36px;background:var(--kertas);text-align:center;box-shadow:0 8px 0 rgba(31,42,68,.1),0 40px 80px rgba(10,14,30,.4)}
.tamat__game{position:absolute;left:50%;top:0;width:96px;height:96px;transform:translate(-50%,-56%);object-fit:contain;filter:drop-shadow(0 10px 12px rgba(31,42,68,.3))}
.tamat__bintang{display:flex;justify-content:center;align-items:flex-end;gap:4px;margin-top:22px}
.tamat__bintang span{width:70px;height:70px;color:#e3d8c6;filter:drop-shadow(0 3px 0 rgba(31,42,68,.1))}
.tamat__bintang span:nth-child(2){width:90px;height:90px;margin-bottom:12px}
.tamat__bintang span.ada{color:var(--emas);filter:drop-shadow(0 4px 0 var(--emas-gelap)) drop-shadow(0 10px 16px rgba(255,170,0,.4))}
.tamat__bintang svg{width:100%;height:100%}
.tamat__tajuk{font:700 clamp(30px,5vw,40px)/1.05 var(--f-papar);margin-top:6px}
.tamat__ringkasan{margin-top:6px;color:var(--dakwat-2);font-size:16px}
.tamat__angka{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.tamat__angka div{padding:12px 10px;border-radius:20px;background:#fff;box-shadow:0 3px 0 #eee2cf}
.tamat__angka small{display:block;font:600 12px/1 var(--f-papar);letter-spacing:.1em;text-transform:uppercase;color:var(--dakwat-3)}
.tamat__angka b{display:block;margin-top:6px;font:700 30px/1 var(--f-papar);font-variant-numeric:tabular-nums}
.tamat__baru{display:inline-flex;align-items:center;gap:5px;margin-top:8px;height:26px;padding:0 10px;border-radius:999px;background:var(--emas);color:#5a3a00;font:700 13px/1 var(--f-papar)}
.tamat__baru svg{width:14px;height:14px}
.tamat__kemahiran{margin-top:16px;text-align:left;display:grid;gap:8px}
.tamat__kemahiran p{font:600 13px/1 var(--f-papar);letter-spacing:.1em;text-transform:uppercase;color:var(--dakwat-3)}
.baris-kemahiran{display:grid;grid-template-columns:minmax(0,1fr) 90px 44px;align-items:center;gap:10px;font-size:15px}
.baris-kemahiran span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baris-kemahiran b{font:700 15px/1 var(--f-papar);text-align:right}
.palang{height:10px;border-radius:999px;background:#ece2d2;overflow:hidden}
.palang i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--hijau),#7ddc8f)}
.palang i.rendah{background:linear-gradient(90deg,#ff8a5c,#ffb36b)}
.tamat__aksi{display:flex;gap:10px;margin-top:20px}
.tamat__aksi .btn{flex:1;min-width:0;padding:0 12px}

/* ---------- kawasan ibu bapa ---------- */
.ib__kepala{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.ib__kepala .tajuk{font-size:clamp(26px,3.6vw,38px)}
.ib__tab{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin-bottom:16px;scrollbar-width:none}
.ib__tab::-webkit-scrollbar{display:none}
.ib__tab button{flex:none;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px;border-radius:16px;background:#fff;font:600 16px/1 var(--f-papar);color:var(--dakwat-2);box-shadow:var(--bayang-kecil)}
.ib__tab button svg{width:20px;height:20px}
.ib__tab button[aria-pressed="true"]{background:var(--dakwat);color:#fff}
.ib__panel{display:grid;gap:16px}
.pilih-anak-cip{display:flex;gap:8px;flex-wrap:wrap}
.pilih-anak-cip button{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px 0 5px;border-radius:999px;background:#fff;box-shadow:var(--bayang-kecil);font:600 16px/1 var(--f-papar)}
.pilih-anak-cip button .potret{--s:38px;box-shadow:0 0 0 2px #fff}
.pilih-anak-cip button[aria-pressed="true"]{background:var(--dakwat);color:#fff}
.jubin{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.jubin>div{padding:16px;border-radius:22px;background:#fff;box-shadow:var(--bayang-kecil)}
.jubin small{display:flex;align-items:center;gap:6px;font:600 13px/1.1 var(--f-papar);color:var(--dakwat-3)}
.jubin small svg{width:16px;height:16px}
.jubin b{display:block;margin-top:8px;font:700 30px/1 var(--f-papar);font-variant-numeric:tabular-nums}
.subjek-lapor{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.subjek-lapor>div{padding:16px;border-radius:22px;background:#fff;box-shadow:var(--bayang-kecil);display:grid;gap:10px;align-content:start}
.subjek-lapor h3{display:flex;align-items:center;gap:10px;font:700 18px/1.1 var(--f-papar)}
.subjek-lapor h3 .bulat{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--sw) 16%,#fff);color:var(--sw)}
.subjek-lapor h3 .bulat svg{width:20px;height:20px}
.subjek-lapor h3 em{margin-left:auto;font-style:normal;font-size:22px}
.subjek-lapor .nota{font-size:14px;color:var(--dakwat-3)}
.kad-panel{padding:18px;border-radius:24px;background:#fff;box-shadow:var(--bayang-kecil)}
.kad-panel h3{font:700 19px/1.2 var(--f-papar);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.kad-panel h3 svg{width:22px;height:22px}
.senarai-salah{list-style:none;display:grid;gap:8px}
.senarai-salah li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--kertas)}
.senarai-salah li b{font:700 18px/1.1 var(--f-papar);font-variant-numeric:tabular-nums}
.senarai-salah li span{font-size:13px;color:var(--dakwat-3)}
.senarai-salah li em{margin-left:auto;font-style:normal;font:700 14px/1 var(--f-papar);color:#c4321a;white-space:nowrap}
.urus-anak{display:grid;gap:10px}
.urus-anak>div{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:22px;background:#fff;box-shadow:var(--bayang-kecil)}
.urus-anak .potret{--s:56px;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--w2,var(--emas))}
.urus-anak__nama{min-width:0;flex:1}
.urus-anak__nama b{display:block;font:700 19px/1.1 var(--f-papar);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urus-anak__nama span{font-size:14px;color:var(--dakwat-3)}
.urus-anak .btn{min-height:46px;padding:0 14px;font-size:15px}
.baris-tetapan{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:2px solid var(--kertas)}
.baris-tetapan:last-child{border-bottom:0}
.baris-tetapan b{display:block;font:700 17px/1.2 var(--f-papar)}
.baris-tetapan span{font-size:14px;color:var(--dakwat-3)}
.segerak{display:flex;gap:18px;align-items:flex-start}
.segerak__ikon{width:64px;height:64px;flex:none;border-radius:20px;display:grid;place-items:center;background:#eaf3ff;color:var(--langit)}
.segerak__ikon svg{width:34px;height:34px}
.segerak__status{margin-top:12px;padding:12px 14px;border-radius:16px;background:#fff4e0;color:#8a5a00;font-size:15px}
.segerak__status[hidden]{display:none}
.ib-versi{margin:14px 0 0;text-align:center;font-size:12px;color:#8a8fa3}.ib-versi[hidden]{display:none}.ib-versi code{font:inherit;font-weight:700;letter-spacing:.04em}
.ib-versi button{font:inherit;color:inherit;background:none;border:0;padding:6px 8px;cursor:pointer;-webkit-tap-highlight-color:transparent}.ib-versi button:disabled{opacity:.6}
.ib-versi u{margin-left:6px;color:#3f7cff;font-weight:700;text-decoration:none}.ib-versi small{display:block;margin-top:2px;color:#5d6377;font-size:12px}.ib-versi small[hidden]{display:none}
.ib-cips__t{margin:0 0 6px;font-size:12px;font-weight:700;color:#8a8fa3}
.angka-kecil{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---------- konfeti ---------- */
.konfeti{position:fixed;inset:0;width:100%;height:100%;z-index:90;pointer-events:none}

/* ---------- responsif ---------- */
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:28px;margin-bottom:25px} /* +3px ruang baris tajuk = 28px nampak, sama dengan jarak antara kad */
  .hero__kad{min-height:124px}
  .jubin{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .jenama b{font-size:21px}.jenama img{width:44px;height:44px}.jenama small{display:none}
  .atas{margin-bottom:16px}
  .pintu{padding:0 12px 0 7px;font-size:14px}
  .pintu .pintu__label small{display:none}
  .kad-anak{width:calc(50% - 8px);padding:16px 10px 18px;border-radius:28px}
  .kad-anak .potret{--s:108px}
  .kad-anak__nama{font-size:20px}
  .sambut{flex-direction:column;text-align:center}
  .sambut__ciri{justify-content:center}
  .sambut .btn{width:100%}
  .salam__teks .sub .cip:nth-child(n+2){display:none}
  .salam__kecil{display:block}
  .salam__salam{display:none}
  .salam__teks .tajuk{font-size:27px}
  .bintang-pil{font-size:17px;padding:0 14px 0 10px}
  .grid-game{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .kad-game__nama{font-size:16px}
  .bintang3 svg{width:19px;height:19px}
  .pilihan-tahap{grid-template-columns:repeat(4,1fr)}
  .grid-avatar{grid-template-columns:repeat(4,1fr);gap:8px}
  .modal__kad{padding:20px 16px;border-radius:28px}
  .tamat__bintang span{width:58px;height:58px}.tamat__bintang span:nth-child(2){width:74px;height:74px}
  .urus-anak>div{flex-wrap:wrap}
  .urus-anak__aksi{display:flex;gap:8px;width:100%}
  .urus-anak__aksi .btn{flex:1}
  .segerak{flex-direction:column}
  .perpustakaan__kepala .suis{font-size:14px}
}
@media (max-height:500px) and (orientation:landscape){
  .app{padding-top:calc(var(--atas) + 10px)}
  .atas{margin-bottom:14px}
  .pilih__kepala{margin:0 0 16px}
  .pilih__kepala .tajuk{font-size:28px}
  .kad-anak{width:150px;padding:12px 10px 14px}
  .kad-anak .potret{--s:92px}
  .kad-anak__nama{font-size:18px}
  .hero{grid-template-columns:1.2fr 1fr}
  .hero__kad{min-height:108px;padding:14px 16px}
  .hero__kad img{width:76px}
  .hero__tajuk{font-size:20px}
  .hero__aksi{height:36px;margin-top:8px}
  .grid-game{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .tamat__kad{padding:16px 18px 14px;width:min(760px,100%);display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;text-align:left;align-items:start}
  .tamat__game{display:none}
  .tamat__bintang{margin-top:0;justify-content:flex-start}
  .tamat__bintang span{width:50px;height:50px}.tamat__bintang span:nth-child(2){width:62px;height:62px;margin-bottom:8px}
  .tamat__kiri,.tamat__kanan{min-width:0}
  .tamat__tajuk{font-size:28px}
  .tamat__angka{margin-top:10px}
  .tamat__angka b{font-size:24px}
  .tamat__kemahiran{margin-top:0}
  .tamat__aksi{margin-top:12px}
  .modal{place-items:start center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* Rasa app sebenar (owner 18 Okt): teks tidak boleh dipilih, gambar tidak boleh ditekan lama untuk simpan / diseret.
   Medan input kekal boleh ditaip & dipilih. */
html{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
img,svg,video,canvas,picture{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable],[contenteditable] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.kad-game__saya{display:inline-block;align-self:flex-start;margin-top:2px;padding:2px 8px;border-radius:999px;background:var(--warna,#1b5fa8);color:#fff;font:700 11px/1.4 var(--f-papar)}
.hos__iframe[hidden]{display:none}
.hos__gagal{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:var(--warna,#1b5fa8);z-index:5}
.hos__gagal>div{background:#fff;border-radius:24px;padding:24px;max-width:360px;text-align:center;display:grid;gap:10px}
.hos__gagal b{font:700 20px/1.2 var(--f-papar)}.hos__gagal p{margin:0;color:var(--dakwat-2)}
.kem-dipadam{color:var(--dakwat-2);font-weight:600}

/* ---------- watak logo (3 budak sekolah) ganti maskot lama ----------
   Potret kepala + bahu dalam bulatan bersaiz tetap (tidak diregang), badan penuh hanya di skrin sambutan. */
/* Skrin sambutan: tiada kad. Watak berdiri atas bulatan (kepala keluar sedikit dari bulatan, tidak dipotong). */
.pilih:has(>.sambut){flex:1;justify-content:center;min-height:calc(100dvh - 140px)}
.sambut.sambut{display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:clamp(20px,4vw,48px);max-width:1080px;width:100%;padding:0 clamp(0px,3vw,40px) 4vh;text-align:left;background:none;box-shadow:none}
.sambut__watak{justify-self:center;position:relative;width:min(34vw,360px);aspect-ratio:1;display:flex;align-items:flex-end;justify-content:center}
.sambut__watak::before{content:"";position:absolute;inset:6% 4% 0;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff,#ffe0cc)}
.sambut .sambut__watak img{position:relative;width:auto;height:96%;max-width:none;filter:drop-shadow(0 12px 12px rgba(120,70,20,.2))}
.sambut .tajuk{font-size:clamp(28px,3.6vw,48px);line-height:1.04;margin-bottom:12px}
.sambut .sub{max-width:44ch}
.sambut__langkah{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 4px}
.sambut__langkah li{padding:14px;border-radius:22px;background:#fff;box-shadow:0 3px 0 var(--garis)}
.sambut__langkah i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font:600 16px/1 var(--f-papar);font-style:normal;margin-bottom:8px}
.sambut__langkah b{display:block;font:600 16px/1.15 var(--f-papar)}
.sambut__langkah small{display:block;margin-top:3px;font-size:12.5px;line-height:1.3;color:var(--dakwat-2)}
.sambut .btn{margin-top:22px}
@media (max-width:700px) and (orientation:portrait){
  .sambut.sambut{grid-template-columns:1fr;gap:8px;padding:0 0 20px;text-align:center}
  .sambut__watak{width:min(64vw,260px)}
  .sambut .sub{margin:0 auto}
  .sambut__langkah{grid-template-columns:1fr;gap:8px;text-align:left}
  .sambut__langkah li{display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:center;padding:12px 14px}
  .sambut__langkah i{grid-row:span 2;margin:0}
  .sambut .btn{width:100%}
}
@media (max-height:520px) and (orientation:landscape){
  .pilih:has(>.sambut){min-height:0}
  .sambut.sambut{gap:14px;padding:0 0 10px}
  .sambut__watak{width:min(30vw,42vh)}
  .sambut .tajuk{font-size:24px;margin-bottom:6px}.sambut .sub{font-size:13.5px}
  .sambut__langkah{margin:10px 0 0;gap:8px}.sambut__langkah li{padding:8px 10px}.sambut__langkah i{width:26px;height:26px;margin-bottom:4px;font-size:13px}.sambut__langkah small{display:none}
  .sambut .btn{margin-top:12px;min-height:50px}
}
.kosong img.kosong__watak,.hero__kad img.hero__watak{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 10%;background:radial-gradient(circle at 50% 35%,#fff,#ffe9d6);box-shadow:0 0 0 4px #fff,0 6px 0 4px #efe3d1;filter:none}

/* ---------- jalur game baru (laman anak) ---------- */
.baru-jalur{display:flex;align-items:center;gap:14px;margin:0 0 clamp(22px,3vw,30px);padding:12px 14px;border-radius:26px;background:linear-gradient(110deg,#fff4cf,#ffe6a3);box-shadow:0 5px 0 #f0cf7a}
.baru-jalur__watak{flex:none;width:58px;height:58px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#fff,#fff1c4);box-shadow:0 0 0 3px #fff}
.baru-jalur__watak img{width:100%;height:100%;object-fit:cover;object-position:50% 10%}
.baru-jalur__teks{flex:none}.baru-jalur__teks b{display:block;font:700 21px/1.05 var(--f-papar)}.baru-jalur__teks small{display:block;margin-top:3px;font-size:13px;color:#8a6a1e}
.baru-jalur__senarai{flex:1;min-width:0;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.baru-jalur__senarai>:first-child{margin-left:auto} /* rapat kanan bila muat; bila melimpah, tatal dari mula (flex-end memotong kad pertama) */
.baru-jalur__senarai::-webkit-scrollbar{display:none}
.baru-jalur__game{flex:none;position:relative;display:flex;align-items:center;gap:10px;max-width:250px;padding:7px 14px 7px 7px;border-radius:20px;background:#fff;box-shadow:0 3px 0 #ead6a0;text-align:left}
.baru-jalur__game:active{transform:translateY(2px)}
.baru-jalur__ikon{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--warna) 25%,#fff),color-mix(in srgb,var(--warna) 58%,#fff))}
.baru-jalur__ikon img{width:84%;height:84%;object-fit:contain}
.baru-jalur__nama{min-width:0}.baru-jalur__nama b{display:block;font:700 15px/1.1 var(--f-papar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.baru-jalur__nama small{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:12px;color:var(--dakwat-2)}.baru-jalur__nama i{width:9px;height:9px;border-radius:50%;background:var(--sw)}
.baru-jalur .mc-lencana{display:none}
.baru-jalur__semua{flex:none;min-height:44px;padding:0 16px;font-size:15px;background:var(--dakwat);color:#fff;box-shadow:0 3px 0 #0f1628}

/* ---------- dunia subjek (W2: kotak, 4 + 3 di skrin lebar) ---------- */
.dunia-laman__kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.dunia-laman__semua{min-height:44px;padding:0 16px 0 12px;font-size:15px;border-radius:999px}
.dunia-laman__semua svg{width:18px;height:18px;color:var(--dakwat-2)}
.dunia-grid{display:flex;flex-wrap:wrap;gap:clamp(12px,1.8vw,18px)}
.dunia-kad{position:relative;flex:1 1 calc(50% - 9px);min-width:0;height:clamp(176px,24vh,240px);border-radius:28px;padding:16px 16px 14px;color:#fff;text-align:left;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(135deg,color-mix(in srgb,var(--sw) 72%,#fff),var(--sw) 70%);box-shadow:0 7px 0 color-mix(in srgb,var(--sw) 62%,#000);transition:transform .15s}
.dunia-kad:active{transform:translateY(3px)}
@media (hover:hover){.dunia-kad:hover{transform:translateY(-3px)}}
.dunia-kad::before{content:"";position:absolute;right:-30%;top:-40%;width:90%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.dunia-kad__nama{position:relative;z-index:1;max-width:58%;font:700 clamp(19px,2vw,25px)/1.05 var(--f-papar)}
.dunia-kad__bil{position:relative;z-index:1;margin-top:4px;font-size:13px;opacity:.92}
.dunia-kad__baru{position:absolute;z-index:3;right:12px;top:12px;height:26px;padding:0 10px;border-radius:999px;background:var(--emas);color:#5a3a00;font:700 13px/26px var(--f-papar);box-shadow:0 0 0 2px #fff,0 3px 0 2px var(--emas-gelap)}
.dunia-kad__kipas{position:absolute;right:10px;left:36%;top:40%;bottom:50px}
/* Saiz ikon ikut TINGGI kawasan (bukan lebar): kad lebar tidak membesarkan ikon sampai menindih nama dunia. */
.dunia-kad__kipas span{position:absolute;bottom:4%;height:84%;aspect-ratio:1;border-radius:22%;background:#fff;display:grid;place-items:center;box-shadow:0 5px 0 rgba(0,0,0,.14)}
.dunia-kad__kipas img{width:84%;height:84%;object-fit:contain}
.dunia-kad__kipas span:nth-child(1){left:4%;transform:rotate(-9deg)}
.dunia-kad__kipas span:nth-child(2){left:50%;bottom:0;height:100%;z-index:2;transform:translateX(-50%)}
.dunia-kad__kipas span:nth-child(3){right:4%;transform:rotate(9deg)}
.dunia-kad__kipas span:only-child{left:auto;right:8%;bottom:0;height:100%;transform:none}
.dunia-kad__kipas span:first-child:nth-last-child(2){left:auto;right:34%;transform:rotate(-7deg)}
.dunia-kad__kipas span:nth-child(2):last-child{left:auto;right:6%;transform:rotate(7deg)}
.perpustakaan--dunia .mc-lencana .mc-baru{display:none}
.dunia-kad__kaki{position:absolute;z-index:3;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:10px}
.dunia-kad__bar{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.32);overflow:hidden}.dunia-kad__bar i{display:block;height:100%;background:#fff;border-radius:4px}
.dunia-kad__bintang{display:flex;align-items:center;gap:4px;font:600 13px/1 var(--f-papar)}.dunia-kad__bintang svg{width:15px;height:15px;color:#ffe08a}
@media (min-width:700px){.dunia-kad{flex-basis:calc(33.33% - 12px)}}
@media (min-width:840px) and (orientation:landscape){.dunia-kad{flex-basis:calc(25% - 14px)}}

/* ---------- dalam dunia (G3: sorot + jubin) ---------- */
.perpustakaan--dunia .perpustakaan__kepala{margin-bottom:12px}
.dunia-kepala{display:flex;align-items:center;gap:12px;min-width:0}
.dunia-kepala .btn--ikon{width:48px;min-height:48px;border-radius:16px}
.dunia-kepala .tajuk-2{color:var(--sw);font-size:clamp(24px,3vw,32px)}
.dunia-isi{display:grid;gap:clamp(14px,2vw,22px);align-items:start}
.dunia-senarai{display:flex;flex-direction:column;gap:18px;min-width:0;max-width:100%}
.sorot{display:grid;grid-template-columns:96px 1fr;column-gap:14px;align-items:center;padding:14px;border-radius:28px;color:#fff;
  background:linear-gradient(165deg,color-mix(in srgb,var(--sw) 62%,#fff),var(--sw));box-shadow:0 7px 0 color-mix(in srgb,var(--sw) 62%,#000)}
.sorot__label{grid-column:2;justify-self:start;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.24);font:700 12px/20px var(--f-papar);letter-spacing:.05em;text-transform:uppercase}
.sorot__nama{grid-column:2;font:700 21px/1.08 var(--f-papar);margin:4px 0}
.sorot .bintang3{grid-column:2}.sorot .bintang3 i{color:rgba(255,255,255,.4)}.sorot .bintang3 i.ada{color:#ffe08a}
.sorot__seni{grid-column:1;grid-row:1/5;display:grid;place-items:center;aspect-ratio:1;border-radius:24px;background:rgba(255,255,255,.22)}
.sorot__seni img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(0,0,0,.22))}
.sorot__teks{display:none}
.sorot__main{grid-column:1/-1;margin-top:12px;min-height:50px;border-radius:999px;background:#fff;color:var(--sw);font-size:18px;box-shadow:0 4px 0 rgba(0,0,0,.14)}
.sorot__main svg{color:var(--sw)}
.perpustakaan--dunia .grid-game{grid-template-columns:repeat(auto-fill,minmax(clamp(104px,13vw,140px),1fr));gap:18px 12px}
.perpustakaan--dunia .kad-game{background:none;box-shadow:none;overflow:visible;border-radius:0}
.perpustakaan--dunia .kad-game__seni{aspect-ratio:1;border-radius:28%;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--warna) 22%,#fff),color-mix(in srgb,var(--warna) 60%,#fff));box-shadow:0 5px 0 color-mix(in srgb,var(--warna) 38%,#d9ccb8)}
.perpustakaan--dunia .kad-game__seni::after{inset:4% 6% auto;height:34%;border-radius:40% 40% 50% 50%;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0))}
.perpustakaan--dunia .kad-game__seni img{width:80%;height:80%}
.perpustakaan--dunia .kad-game__isi{padding:8px 2px 0;align-items:center;text-align:center;gap:4px}
.perpustakaan--dunia .kad-game__nama{font-size:14.5px}
.perpustakaan--dunia .kad-game__baris{flex-direction:column;align-items:center;justify-content:center;gap:4px}
.perpustakaan--dunia .bintang3 svg{width:16px;height:16px}
.perpustakaan--dunia .kad-game--pilih .kad-game__seni{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--sw)}
.perpustakaan--dunia[style*="--s-"] .kad-game__subjek{display:none}
.perpustakaan--dunia .kad-game--baru .kad-game__seni{box-shadow:0 0 0 3px var(--emas),0 5px 0 3px var(--emas-gelap),0 0 22px rgba(255,194,61,.55)}
.grid-game__sek{grid-column:1/-1;display:flex;align-items:center;gap:8px;font:700 17px/1.1 var(--f-papar);color:var(--dakwat)}
.grid-game__sek small{font:700 13px var(--f-teks);color:var(--dakwat-2)}
.grid-game__sek--baru{color:#8a5a00}.grid-game__sek--baru i{width:10px;height:10px;border-radius:50%;background:var(--emas);box-shadow:0 0 0 3px #fff1c4}
.grid-game__sek:not(:first-child){margin-top:10px}
@media (min-width:900px){
  .dunia-isi{grid-template-columns:minmax(280px,.85fr) 2fr}
  .sorot{position:sticky;top:calc(var(--atas) + 14px);display:flex;flex-direction:column;align-items:stretch;padding:18px}
  .sorot__label{align-self:flex-start}
  .sorot__nama{font-size:26px}
  .sorot__seni{order:5;aspect-ratio:1.25;margin:10px 0 12px}
  .sorot__teks{display:block;order:6;font-size:14px;line-height:1.4;opacity:.95}
  .sorot__main{order:7;margin-top:14px;min-height:54px}
}
@media (max-width:560px){
  .baru-jalur{flex-wrap:wrap;padding:12px}
  .baru-jalur__teks{flex:1}
  .baru-jalur__senarai{order:3;flex:none;width:100%;justify-content:flex-start}
  .baru-jalur__semua{order:2}
  .dunia-kad{height:186px}
  .dunia-kad__nama{max-width:100%;font-size:20px}
  .dunia-kad__kipas{left:24%}
  .dunia-grid>.dunia-kad:last-child:nth-child(odd){height:150px}
  .dunia-grid>.dunia-kad:last-child:nth-child(odd) .dunia-kad__nama{max-width:55%}
  .dunia-grid>.dunia-kad:last-child:nth-child(odd) .dunia-kad__kipas{left:auto;right:14px;top:12px;bottom:40px;width:36%}
  .perpustakaan--dunia .grid-game{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px}
  .perpustakaan--dunia .kad-game__nama{font-size:13px}
}
@media (max-height:500px) and (orientation:landscape){
  .baru-jalur{padding:7px 10px;margin-bottom:14px}.baru-jalur__watak{width:40px;height:40px}.baru-jalur__teks b{font-size:16px}.baru-jalur__teks small{display:none}
  .baru-jalur__ikon{width:38px;height:38px;border-radius:11px}.baru-jalur__game{padding:4px 10px 4px 4px}
  .dunia-kad{height:150px;border-radius:22px;padding:11px 12px}
  .dunia-kad__nama{font-size:16px;max-width:60%}.dunia-kad__bil{display:none}
  .dunia-kad__kipas{left:auto;right:8px;width:46%;top:30%;bottom:30px}.dunia-kad__kipas span{border-radius:14px}
  .dunia-kad__kaki{left:12px;right:12px;bottom:10px}
  .dunia-kad__baru{top:8px;right:8px;height:22px;padding:0 7px;font-size:11px;line-height:22px}
}

/* =================== laman anak ikut sample (menu sisi / tab bawah) =================== */
.app:has(.anak-susun){max-width:none;padding:0}
.anak-susun{display:grid;grid-template-columns:96px minmax(0,1fr);min-height:100dvh}
.rel{position:sticky;top:calc(var(--atas) + 12px);z-index:20;height:calc(100dvh - var(--atas) - var(--bawah) - 24px);margin:calc(var(--atas) + 12px) 0 12px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0 14px;border-radius:30px;
  background:rgba(255,255,255,.62);border:1px solid rgba(0,0,0,.06);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 10px 30px -18px rgba(31,42,68,.35)}
.rel__potret .potret{--s:56px;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--w2,var(--emas))}
.rel__potret .mc-bingkai{margin:6px}
.rel__nm{max-width:84px;margin-bottom:10px;font:600 13px/1.1 var(--f-papar);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel__item{position:relative;width:72px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0;border-radius:20px;font:600 11px/1.1 var(--f-teks);color:var(--dakwat-2);transition:background-color .15s,color .15s}
.rel__item svg{width:22px;height:22px}
.rel__item:active{transform:translateY(1px)}
.rel__item.on{background:var(--dakwat);color:#fff}
.rel__ruang{flex:1}
.rel__siap{position:absolute;top:4px;right:12px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--hijau);color:#fff}.rel__siap svg{width:11px;height:11px}
.rel .mc-lencana{display:none}
.rel__item[data-mc="muat"]::after,.rel__item[data-mc="kunci"]::after,.rel__item[data-mc="sedang"]::after{content:"";position:absolute;top:6px;right:16px;width:9px;height:9px;border-radius:50%;background:var(--langit);box-shadow:0 0 0 2px #fff}
.rel__cincin{position:relative;width:26px;height:26px;display:grid;place-items:center}
.rel__cincin svg:first-child{position:absolute;inset:-4px;width:34px;height:34px;transform:rotate(-90deg)}
.rel__cincin .pintu__trek{fill:none;stroke:transparent;stroke-width:3}
.rel__cincin .pintu__isi{fill:none;stroke:var(--utama);stroke-width:3;stroke-linecap:round;stroke-dasharray:88;stroke-dashoffset:88}
.rel__cincin>svg:last-child{width:18px;height:18px}
.rel__pintu.tekan{color:var(--utama)}
.anak-utama{min-width:0;display:flex;flex-direction:column;padding:calc(var(--atas) + 14px) 22px calc(var(--bawah) + 22px)}

/* kepala laman */
.anak-utama .atas{margin-bottom:14px;gap:12px}
.salam__watak{flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#fff,#ffe3d3);box-shadow:0 0 0 3px #fff,0 3px 0 3px var(--garis)}
.salam__watak img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.anak-utama .salam{justify-content:flex-start}
.anak-utama .salam__teks{flex:1}
.anak-utama .salam__teks .tajuk{font-size:26px;line-height:1.1}
.anak-utama .salam__teks .sub{margin-top:2px;font-size:13px;font-weight:700}
.anak-utama .bintang-pil{height:40px;font-size:16px}
.anak-utama .mc-hadiah-jalur{margin-bottom:14px}

/* dunia memenuhi skrin lebar (4 + 3) */
.dunia-laman{flex:1;display:flex;flex-direction:column}
.dunia-grid{flex:1;align-content:flex-start}
@media (min-width:900px) and (orientation:landscape){
  .dunia-kad{height:clamp(180px,calc((100dvh - var(--atas) - var(--bawah) - 140px) / 2),330px)}
  .anak-utama:has(.baru-jalur) .dunia-kad{height:clamp(170px,calc((100dvh - var(--atas) - var(--bawah) - 250px) / 2),300px)}
  .anak-utama:has(.mc-hadiah-jalur) .dunia-kad{height:clamp(165px,calc((100dvh - var(--atas) - var(--bawah) - 230px) / 2),300px)}
}

/* kepala paparan dunia */
.dk{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dk__balik{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--dakwat);box-shadow:0 3px 0 var(--garis)}
.dk__balik svg{width:20px;height:20px}
.dk__tajuk{font:700 clamp(22px,2.6vw,28px)/1.1 var(--f-papar);color:var(--sw)}
.dk__bil{font:700 13px var(--f-teks);color:var(--dakwat-2);margin-right:auto}
.dk__titik{display:flex;gap:8px}
.dk__titik button{width:26px;height:26px;border-radius:50%;background:var(--sw);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.dk__titik button[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--sw)}
.perpustakaan--dunia{margin:0}
.perpustakaan--dunia .sorot{position:relative}
.sorot__label{background:none!important;padding:0!important;font:700 12px/1 var(--f-teks)!important;letter-spacing:.02em!important;text-transform:none!important;opacity:.9}
.sorot__fav{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);color:#fff}
.sorot__fav svg{width:22px;height:22px}.sorot__fav[aria-pressed="true"]{background:#fff;color:#ff4d7a}
.sorot__nama{padding-right:44px}
.perpustakaan--dunia .grid-game{grid-template-columns:repeat(auto-fill,minmax(clamp(104px,11vw,132px),1fr))}

/* telefon landskap: menu sisi sempit */
@media (max-height:520px) and (orientation:landscape){
  .anak-susun{grid-template-columns:78px minmax(0,1fr)}
  .rel{margin:calc(var(--atas) + 8px) 0 8px 8px;height:calc(100dvh - var(--atas) - var(--bawah) - 16px);top:calc(var(--atas) + 8px);padding:10px 0;gap:2px}
  .rel__potret .potret{--s:40px}.rel__nm{display:none}
  .rel__item{width:60px;padding:5px 0;font-size:10px}.rel__item svg{width:19px;height:19px}
  .anak-utama{padding:calc(var(--atas) + 8px) 14px calc(var(--bawah) + 12px)}
  .salam__watak{width:40px;height:40px}.anak-utama .salam__teks .tajuk{font-size:20px}
  .anak-utama .atas{margin-bottom:8px}
  .dk__titik button{width:20px;height:20px}
}
/* telefon & tablet potret sempit: tab bawah kaca */
@media (max-width:700px) and (orientation:portrait){
  .anak-susun{display:block}
  .rel{position:fixed;top:auto;left:12px;right:12px;bottom:calc(var(--bawah) + 12px);height:auto;margin:0;flex-direction:row;justify-content:space-between;gap:2px;padding:8px;border-radius:28px;
    background:rgba(255,255,255,.62);border:1px solid rgba(0,0,0,.08);-webkit-backdrop-filter:blur(40px) saturate(200%);backdrop-filter:blur(40px) saturate(200%)}
  .rel__potret,.rel__nm,.rel__ruang{display:none}
  .rel__item{flex:1;width:auto;padding:7px 0;font-size:10.5px}
  .rel__siap{right:calc(50% - 20px)}
  .anak-utama{padding:calc(var(--atas) + 12px) 16px calc(var(--bawah) + 120px)}
  .anak-utama .salam__teks .tajuk{font-size:24px}
  .dk__titik{width:100%;justify-content:space-between}
  .mc-toast{bottom:calc(var(--bawah) + 96px)}
}
/* kipas ikon: saiz ikut kotak tetap (nisbah 2.1:1) supaya kad tinggi tidak membesarkan ikon */
.dunia-kad__kipas{left:auto!important;top:auto!important;right:12px!important;bottom:42px!important;width:min(64%,250px)!important;height:auto!important;aspect-ratio:2.1/1}
.dunia-kad__kipas span{height:auto!important;width:42%!important;aspect-ratio:1}
.dunia-kad__kipas span:nth-child(1){left:2%!important;right:auto!important;bottom:6%!important;transform:rotate(-9deg)!important}
.dunia-kad__kipas span:nth-child(2){left:50%!important;right:auto!important;bottom:14%!important;width:46%!important;transform:translateX(-50%)!important}
.dunia-kad__kipas span:nth-child(3){right:2%!important;left:auto!important;bottom:6%!important;transform:rotate(9deg)!important}
.dunia-kad__kipas span:only-child{left:auto!important;right:8%!important;width:50%!important;bottom:8%!important;transform:none!important}
.dunia-kad__kipas span:first-child:nth-last-child(2){left:auto!important;right:36%!important;transform:rotate(-7deg)!important}
.dunia-kad__kipas span:nth-child(2):last-child{left:auto!important;right:4%!important;width:42%!important;transform:rotate(7deg)!important}
.dunia-kad__nama{max-width:100%}
/* Owner 26 Okt: lencana "N baru" duduk sebaris dengan kiraan (bukan di penjuru atas), supaya nama kategori tidak terpotong */
.dunia-kad__bil .dunia-kad__baru{position:static;display:inline-block;vertical-align:1px;margin-left:7px;height:20px;padding:0 8px;font-size:11.5px;line-height:20px;opacity:1;box-shadow:0 0 0 1.5px #fff,0 2px 0 1.5px var(--emas-gelap)}
@media (max-height:500px) and (orientation:landscape){.dunia-kad__bil:has(.dunia-kad__baru){display:block;font-size:0}.dunia-kad__bil .dunia-kad__baru{margin-left:0;font-size:11px}}
@media (max-width:560px){.dunia-grid>.dunia-kad:last-child:nth-child(odd) .dunia-kad__kipas{width:min(40%,160px)!important;bottom:34px!important}.dunia-grid>.dunia-kad:last-child:nth-child(odd) .dunia-kad__nama{max-width:55%}}
/* padanan sample: kepala telefon, titik subjek, kad Dipilih penuh di telefon potret, tag BARU */
.anak-utama .atas.salam{flex-wrap:nowrap;text-align:left}
.anak-utama .atas.salam .atas__kanan{margin-left:auto}
.dk{justify-content:flex-start;text-align:left}
.sorot__label--baru{align-self:flex-start;padding:2px 10px!important;border-radius:999px;background:var(--emas)!important;color:#5a3a00;font:700 12px/20px var(--f-papar)!important;letter-spacing:.05em!important;opacity:1!important}
.kad-game__rb{position:absolute;z-index:3;top:6px;left:50%;transform:translateX(-50%);padding:1px 8px;border-radius:999px;background:var(--emas);color:#5a3a00;font:700 11px/17px var(--f-papar);letter-spacing:.04em}
.kad-game__blm{font:700 11.5px var(--f-teks);color:#8a6a1e;font-style:normal}
.perpustakaan--dunia .kad-game--baru .mc-lencana .mc-baru{display:none}
@media (max-width:700px) and (orientation:portrait){
  .rel{background:rgba(255,255,255,.84)}
  .dk__titik{width:100%;justify-content:space-between;padding:6px 8px;border-radius:999px;background:#fff;box-shadow:0 3px 0 var(--garis)}
  .sorot{display:flex;flex-direction:column;align-items:stretch;padding:18px}
  .sorot__label{align-self:flex-start}
  .sorot__nama{font-size:26px}
  .sorot__seni{order:5;aspect-ratio:1.25;margin:10px 0 12px}
  .sorot__teks{display:block;order:6;font-size:14px;line-height:1.4;opacity:.95}
  .sorot__main{order:7;margin-top:14px;min-height:54px}
}
.anak-utama .atas{display:flex!important}
.anak-utama .atas__kanan{flex-direction:row!important}
.anak-utama .salam__teks .tajuk{display:block!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis!important}
/* telefon landskap: kad Dipilih di sebelah grid seperti sample, dunia memenuhi skrin */
@media (max-height:520px) and (orientation:landscape) and (min-width:640px){
  .dunia-isi{grid-template-columns:minmax(200px,.62fr) 2fr;gap:12px}
  .sorot{position:sticky;top:calc(var(--atas) + 8px);display:flex;flex-direction:column;align-items:stretch;padding:12px 14px}
  .sorot__label{align-self:flex-start}.sorot__nama{font-size:18px;margin:2px 0}
  .sorot__seni{order:5;aspect-ratio:1.5;margin:8px 0}
  .sorot__teks{display:none}
  .sorot__main{order:7;margin-top:8px;min-height:42px;font-size:16px}
  .sorot__fav{top:8px;right:8px;width:34px;height:34px}
  .perpustakaan--dunia .grid-game{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px 10px}
  .dunia-kad{height:calc((100dvh - var(--atas) - var(--bawah) - 96px) / 2);min-height:118px}
  .anak-utama:has(.baru-jalur) .dunia-kad{height:calc((100dvh - var(--atas) - var(--bawah) - 160px) / 2);min-height:110px}
  .dunia-kad{flex-basis:calc(25% - 14px)}
  .rel__potret .potret{--s:40px}
  .mc-pintu--log .mc-pintu__kad{width:100%}
}
.rel__potret .potret{--s:56px}
@media (max-height:520px) and (orientation:landscape){
  .rel__potret .potret{--s:40px}
  .dunia-kad__kipas{width:min(44%,150px)!important;bottom:28px!important;right:8px!important}
  .dunia-kad__kaki{bottom:9px}
}
.perpustakaan--dunia .mc-lencana{white-space:nowrap}
@media (max-width:900px),(max-height:520px){.perpustakaan--dunia .mc-lencana{padding:4px 7px 4px 6px;font-size:11px;gap:4px;right:6px;bottom:6px}.perpustakaan--dunia .mc-lencana svg{width:14px;height:14px}}
.rel__potret{display:grid;place-items:center;margin:2px 0 4px}
.rel__potret .potret{display:block}
.app:has(.sambut) .jenama small{display:none}
@media (max-width:700px) and (orientation:portrait){.rel__potret{display:none}}

/* kepala laman: potret anak berbingkai (bila bingkai dipakai) */
.salam__anak{flex:none;display:grid;place-items:center}
.salam__anak .potret{--s:52px;display:block}
.anak-utama .salam .salam__anak .mc-bingkai{margin:8px 10px 8px 8px}
@media (max-height:500px) and (orientation:landscape){.salam__anak .potret{--s:38px}.anak-utama .salam .salam__anak .mc-bingkai{margin:5px 7px 5px 5px}}

/* Cabaran Harian: jalur di atas kad dunia */
.cabaran-jalur{position:relative;display:flex;align-items:center;gap:14px;width:100%;margin:0 0 clamp(16px,2.4vw,22px);padding:10px 12px 10px 10px;border-radius:24px;text-align:left;color:#fff;background:linear-gradient(110deg,#ff8a3d,#ff5f6d);box-shadow:0 5px 0 #d9473f}
.cabaran-jalur:active{transform:translateY(3px);box-shadow:0 2px 0 #d9473f}
.cabaran-jalur--siap{background:linear-gradient(110deg,#2fbf8f,#1fa37a);box-shadow:0 5px 0 #17845f}
.cabaran-jalur__ikon{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.22)}
.cabaran-jalur__ikon img{width:82%;height:82%;object-fit:contain}
.cabaran-jalur__teks{flex:1;min-width:0}
.cabaran-jalur__teks b{display:block;font:700 21px/1.05 var(--f-papar)}
.cabaran-jalur__teks small{display:block;margin-top:3px;font-size:13px;font-weight:700;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cabaran-jalur__main{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;color:#e2484f;font:700 16px var(--f-papar);box-shadow:0 3px 0 rgba(0,0,0,.12)}
.cabaran-jalur--siap .cabaran-jalur__main{color:#17845f}
.cabaran-jalur__main svg{width:18px;height:18px}
.cabaran-jalur .mc-lencana{display:none}
@media (max-width:560px){.cabaran-jalur__teks b{font-size:18px}.cabaran-jalur__main{padding:0 14px}}
@media (max-height:500px) and (orientation:landscape){
  .cabaran-jalur{padding:6px 8px;margin-bottom:12px;gap:10px}.cabaran-jalur__ikon{width:38px;height:38px;border-radius:12px}
  .cabaran-jalur__teks b{font-size:16px}.cabaran-jalur__main{min-height:36px;font-size:14px}
}
/* kad dunia mengecil sedikit supaya jalur Cabaran + 2 baris kad muat satu skrin */
@media (min-width:900px) and (orientation:landscape){
  .anak-utama:has(.cabaran-jalur) .dunia-kad{height:clamp(165px,calc((100dvh - var(--atas) - var(--bawah) - 230px) / 2),310px)}
  .anak-utama:has(.cabaran-jalur):has(.baru-jalur) .dunia-kad{height:clamp(150px,calc((100dvh - var(--atas) - var(--bawah) - 335px) / 2),290px)}
}
@media (max-height:520px) and (orientation:landscape) and (min-width:640px){
  .anak-utama:has(.cabaran-jalur) .dunia-kad{height:calc((100dvh - var(--atas) - var(--bawah) - 150px) / 2);min-height:112px}
  .anak-utama:has(.cabaran-jalur):has(.baru-jalur) .dunia-kad{height:calc((100dvh - var(--atas) - var(--bawah) - 210px) / 2);min-height:106px}
}
/* elak kad Dipilih melimpah keluar skrin di telefon */
.anak-utama,.perpustakaan--dunia,.dunia-isi,.sorot,.grid-game{min-width:0;max-width:100%}
@media (max-width:700px) and (orientation:portrait){.dunia-isi{display:grid;grid-template-columns:minmax(0,1fr)}.sorot__teks{overflow-wrap:anywhere}}
/* jarak: bayang kad Dipilih (7px) + cincin jubin dipilih (7px) makan jurang; beri ruang sebenar */
.dunia-isi{row-gap:clamp(30px,4vw,36px)}
.perpustakaan--dunia .grid-game{gap:26px 18px;padding:8px 8px 4px}
@media (max-width:700px) and (orientation:portrait){.perpustakaan--dunia .grid-game{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px}}
@media (max-height:520px) and (orientation:landscape){.perpustakaan--dunia .grid-game{gap:20px 14px}}

/* =================== reka Y: pilih anak, kawasan ibu bapa, halaman lencana =================== */
.km-bunyi{flex:none;width:42px;height:42px;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:#fff;color:var(--dakwat);display:grid;place-items:center;box-shadow:0 2px 0 var(--garis);cursor:pointer}
.km-bunyi svg{width:22px;height:22px}
.km-bunyi[aria-pressed="true"]{background:var(--dakwat);color:#fff}
.ib2__kepala .km-bunyi{order:1}
.bhs-suis{padding:4px;border-radius:999px;background:#fff;box-shadow:0 2px 0 var(--garis);gap:2px}
.bhs-suis button{min-width:44px;height:34px;padding:0 12px;border-radius:999px;font:600 14px/1 var(--f-papar);color:var(--dakwat-2)}
.bhs-suis button[aria-pressed="true"]{background:var(--dakwat);color:#fff}
/* Y2 pilih anak */
.app:has(.pilih2){max-width:none}
.pilih2{min-height:calc(100dvh - var(--atas) - var(--bawah) - 42px);display:flex;flex-direction:column}
.pilih2__atas{display:flex;align-items:center;gap:10px}.pilih2__ruang{flex:1}
.pilih2__tengah{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 0 20px}
.pilih2__sapa{display:flex;align-items:flex-end;gap:14px;margin-bottom:26px}
.pilih2__sapa img{height:128px;width:auto;flex:none;filter:drop-shadow(0 8px 10px rgba(31,42,68,.15))}
.pilih2__bual{position:relative;margin-bottom:46px;padding:14px 20px;border-radius:24px 24px 24px 6px;background:#fff;box-shadow:0 4px 0 var(--garis);text-align:left}
.pilih2__bual .tajuk{font-size:clamp(22px,2.8vw,32px)}.pilih2__bual .sub{margin-top:2px;font-size:14px}
.pilih2__anak{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,210px));justify-content:center;gap:18px;width:100%}
.ak2{width:auto!important;justify-content:flex-start;padding:18px 14px 16px;border-radius:30px;background:#fff;box-shadow:0 6px 0 var(--garis);gap:0}
.ak2 .potret{--s:clamp(96px,11vw,124px);box-shadow:0 0 0 5px #fff,0 0 0 9px var(--c)}
.ak2 .mc-bingkai{margin:14px 0 6px}
.ak2 .kad-anak__nama{margin-top:14px}
.ak2__gel{margin-top:3px;font:700 12.5px/1.2 var(--f-teks);color:#8a5a00}
.ak2__th{margin-top:4px;font:700 13px/1.2 var(--f-teks);color:var(--dakwat-3)}
.ak2__st{display:flex;gap:6px;margin:10px 0 14px;flex-wrap:wrap;justify-content:center}
.ak2__cip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:999px;background:#f6efe4;font:700 13px var(--f-papar);color:var(--dakwat)}
.ak2__cip svg{width:14px;height:14px}.ak2__cip--emas{background:#fff1c9;color:#7a5200}.ak2__cip--emas svg{color:var(--emas-gelap)}
.ak2__main{margin-top:auto;width:100%;height:46px;border-radius:999px;background:var(--c);color:#fff;font:600 17px var(--f-papar);display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 4px 0 color-mix(in srgb,var(--c) 70%,#000)}
.ak2__main svg{width:18px;height:18px}
@media (max-width:700px) and (orientation:portrait){
  .pilih2__atas .jenama b,.pilih2__atas .jenama small{display:none}
  .pilih2__atas .pintu__label small{display:none}
  .pilih2__sapa img{height:96px}.pilih2__bual{margin-bottom:34px;padding:12px 16px}
  .pilih2__anak{grid-template-columns:1fr 1fr;gap:14px}
  .ak2{padding:14px 10px}.ak2 .potret{--s:92px}.ak2 .kad-anak__nama{font-size:19px}
}
@media (max-height:520px) and (orientation:landscape){
  .pilih2{min-height:0}.pilih2__tengah{justify-content:flex-start;padding-top:4px}
  .pilih2__sapa{margin-bottom:10px}.pilih2__sapa img{height:62px}.pilih2__bual{margin-bottom:10px;padding:8px 14px}.pilih2__bual .tajuk{font-size:20px}.pilih2__bual .sub{display:none}
  .ak2{padding:10px}.ak2 .potret{--s:64px;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--c)}.ak2 .kad-anak__nama{margin-top:8px;font-size:17px}
  .ak2__st{margin:6px 0 8px}.ak2__main{height:38px;font-size:15px}
}

/* Y5/Y6 kawasan ibu bapa */
.app:has(.ib2){max-width:none;padding:0}
.ib2{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100dvh}
.ib2__nav{position:sticky;top:calc(var(--atas) + 12px);height:calc(100dvh - var(--atas) - var(--bawah) - 24px);margin:calc(var(--atas) + 12px) 0 12px 12px;display:flex;flex-direction:column;gap:4px;padding:18px 12px;border-radius:30px;background:var(--dakwat);color:#c9d0e2;overflow:auto;scrollbar-width:none}
.ib2__jenama{display:flex;align-items:center;gap:10px;padding:0 6px 4px;color:#fff;font:600 17px var(--f-papar)}
.ib2__jenama img{width:36px;height:36px;border-radius:10px;background:#fff;padding:2px}
.ib2__lbl{padding:0 8px 14px;font-size:12.5px;color:#8c95ad}
.ib2__nav [data-tab]{display:flex;align-items:center;gap:12px;flex:none;height:48px;padding:0 14px;border-radius:16px;font:600 15px/1 var(--f-papar);color:inherit;text-align:left}
.ib2__nav [data-tab] svg{width:22px;height:22px;flex:none}
.ib2__nav [data-tab][aria-pressed="true"]{background:#fff;color:var(--dakwat)}
.ib2__ruang{flex:1}
.ib2__balik{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font:600 15px var(--f-papar)}
.ib2__balik svg{width:18px;height:18px}
.ib2__isi{min-width:0;padding:calc(var(--atas) + 20px) 26px calc(var(--bawah) + 30px)}
.ib2__kepala{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ib2__tajuk{flex:1;font:600 30px/1.1 var(--f-papar)}.ib2__tajuk small{display:block;margin-top:2px;font:700 14px var(--f-teks);color:var(--dakwat-3)}
.ib2__tutup{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 2px 0 var(--garis);color:var(--dakwat)}
.ib2__tutup svg{width:20px;height:20px}
.ib2 .ib__panel{gap:18px}
.ib2 .kad-panel{border-radius:26px;box-shadow:0 4px 0 var(--garis);padding:6px 18px 10px}
.ib2 .jubin>div,.ib2 .subjek-lapor>div,.ib2 .urus-anak>div{box-shadow:0 4px 0 var(--garis);border-radius:24px}
.ib-blok__h{padding:14px 0 4px;font:600 12.5px var(--f-papar);color:var(--dakwat-3);text-transform:uppercase;letter-spacing:.06em}
.ib2 .kad-panel>h3:not(.ib-blok__h){padding-top:12px}
.ib2 .baris-tetapan{border-bottom:0;border-top:1px solid #f3eadc}.ib2 .ib-blok__h+.baris-tetapan{border-top:0}
.ib2 .baris-tetapan .segerak__ikon{background:#fff1e4;color:#e35d2f}
.ib2 .baris-tetapan b{font-size:16px}.ib2 .baris-tetapan span{font-size:13px}
.ib2 .ib__panel[data-tab-kini="tetapan"]{grid-template-columns:1fr 1fr;align-items:start}
@media (max-width:1000px){.ib2 .ib__panel[data-tab-kini="tetapan"]{grid-template-columns:1fr}}
@media (max-height:520px) and (orientation:landscape){
  .ib2{grid-template-columns:190px minmax(0,1fr)}
  .ib2__nav{margin:calc(var(--atas) + 8px) 0 8px 8px;height:calc(100dvh - var(--atas) - var(--bawah) - 16px);top:calc(var(--atas) + 8px);padding:12px 8px}
  .ib2__lbl{display:none}.ib2__nav [data-tab]{height:40px;font-size:14px}.ib2__balik{height:40px;font-size:13px}
  .ib2__isi{padding:calc(var(--atas) + 10px) 16px calc(var(--bawah) + 20px)}.ib2__tajuk{font-size:22px}.ib2__kepala{margin-bottom:10px}
}
@media (max-width:700px) and (orientation:portrait){
  .ib2{display:block}
  .ib2__nav{position:fixed;z-index:20;top:auto;left:12px;right:12px;bottom:calc(var(--bawah) + 12px);height:auto;margin:0;flex-direction:row;gap:2px;padding:8px;border-radius:28px;background:rgba(31,42,68,.92);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);overflow:visible}
  .ib2__jenama,.ib2__lbl,.ib2__ruang,.ib2__balik{display:none}
  .ib2__nav [data-tab]{flex:1;min-width:0;flex-direction:column;justify-content:center;gap:3px;height:auto;padding:8px 0;font-size:10.5px;border-radius:20px;text-align:center}
  .ib2__nav [data-tab] span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ib2__isi{padding:calc(var(--atas) + 14px) 16px calc(var(--bawah) + 120px)}
  .ib2__kepala{flex-wrap:wrap}.ib2__tajuk{font-size:26px}
  .ib2 .kad-panel{padding:4px 14px 8px}
}

/* Y4 halaman lencana (isi oleh core/ganjaran.js) */
.lencana-laman{display:block}
.lc-kepala{display:flex;align-items:center;gap:12px}
.lc-kepala__teks{flex:1;min-width:0}.lc-kepala .tajuk{font-size:26px;line-height:1.1}.lc-kepala .sub{margin-top:2px;font-size:13px;font-weight:700}
@media (max-height:520px) and (orientation:landscape){.lc-kepala .tajuk{font-size:20px}}
.ib2__nav [data-tab],.ib2__nav .ib2__balik{box-shadow:none}
.ib2__nav [data-tab]:not([aria-pressed="true"]){background:none;color:#c9d0e2}
.ib2__nav .ib2__balik{background:rgba(255,255,255,.1);color:#fff}
.ib2 .kad-panel h3.ib-blok__h,.ib2 h3.ib-blok__h{margin:0;padding:14px 0 4px;font:600 12.5px/1.2 var(--f-papar);color:var(--dakwat-3);text-transform:uppercase;letter-spacing:.06em}
.app:has(.pilih2) .jenama small{display:none}
.ib2__nav .ib2__balik{white-space:nowrap}
@media (max-height:520px) and (orientation:landscape){.ib2__nav .ib2__balik{font-size:12.5px;gap:5px;padding:0 8px}}
@media (max-width:700px) and (orientation:portrait){.ib2__nav .ib2__balik{display:none}.ib2__tajuk small{font-size:12.5px}}
/* pilih anak: kad di tengah walau seorang anak; telefon potret mula dari atas (bukan tengah skrin) */
.pilih2__anak{display:flex;flex-wrap:wrap;justify-content:center}
.pilih2__anak .ak2{flex:0 1 210px}
@media (max-width:700px) and (orientation:portrait){
  .pilih2__tengah{justify-content:flex-start;padding-top:clamp(12px,4vh,32px)}
  .pilih2__anak .ak2{flex:0 1 calc(50% - 7px)}
}
/* telefon potret: nav bawah melekat di tepi skrin (bukan terapung) */
@media (max-width:700px) and (orientation:portrait){
  .rel,.ib2__nav{left:0!important;right:0!important;bottom:0!important;border-radius:24px 24px 0 0!important;padding:6px 8px calc(var(--bawah) + 6px)!important;border-width:1px 0 0!important}
  .anak-utama{padding-bottom:calc(var(--bawah) + 116px)}
  .ib2__isi{padding-bottom:calc(var(--bawah) + 100px)}
  .mc-toast{bottom:calc(var(--bawah) + 84px)}
}
/* butang tutup selepas suis bahasa (semua saiz) */
.ib2__kepala .bhs-suis{order:2}.ib2__kepala .ib2__tutup{order:3}
/* seorang anak sahaja: cip pilihan anak di tengah */
.pilih-anak-cip:has(>button:only-child){justify-content:center}
/* telefon potret: tiada kad besar "Dipilih" di paparan dunia (tekan jubin terus main / pratonton) */
@media (max-width:700px) and (orientation:portrait){.perpustakaan--dunia .sorot{display:none!important}.dunia-isi{row-gap:0}}
/* nav bawah: ruang garis Home iPhone dikurangkan (tab tidak lagi nampak tinggi) */
@media (max-width:700px) and (orientation:portrait){.rel,.ib2__nav{padding:6px 8px max(8px,calc(var(--bawah) - 14px))!important}}
/* telefon potret: tiada kad Dipilih, jadi tiada cincin "dipilih" pada jubin */
@media (max-width:700px) and (orientation:portrait){.perpustakaan--dunia .kad-game--pilih{box-shadow:none!important;outline:0!important}.perpustakaan--dunia .kad-game--pilih *{box-shadow:revert-layer}}
/* titik subjek -> ikon subjek sebenar (putih atas warna subjek) */
.dk__titik button{display:grid;place-items:center;color:#fff;width:34px!important;height:34px!important}
.dk__titik button svg{width:60%;height:60%}
@media (max-height:520px) and (orientation:landscape){.dk__titik button{width:28px!important;height:28px!important}}
/* leret tukar subjek */
.grid-game.leret-kiri{animation:leret-kiri .28s ease-out}.grid-game.leret-kanan{animation:leret-kanan .28s ease-out}
@keyframes leret-kiri{from{opacity:.3;transform:translateX(40px)}}@keyframes leret-kanan{from{opacity:.3;transform:translateX(-40px)}}
@media (prefers-reduced-motion:reduce){.grid-game.leret-kiri,.grid-game.leret-kanan{animation:none}}
.perpustakaan--dunia{touch-action:pan-y}

/* =================== reka Z: tiada menu sisi / tab bawah anak; Tukar di kepala; butang ibu bapa terapung =================== */
.anak-susun{display:block!important}
.anak-utama{width:100%;max-width:1280px;margin:0 auto;padding:calc(var(--atas) + 14px) clamp(16px,3vw,28px) calc(var(--bawah) + 96px)!important}
@media (max-height:520px) and (orientation:landscape){.anak-utama{padding:calc(var(--atas) + 8px) 14px calc(var(--bawah) + 12px) calc(var(--kiri,0px) + 14px)!important;padding-right:calc(var(--kanan,0px) + 76px)!important}}
.tukar-anak{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 11px;border-radius:999px;background:#fff;color:var(--dakwat);font:600 15px/1 var(--f-papar);box-shadow:0 1px 2px rgba(31,42,68,.06),0 8px 18px -10px rgba(31,42,68,.35)}
.tukar-anak svg{width:18px;height:18px}
.anak-utama .atas__kanan{display:flex;align-items:center;gap:8px}
@media (max-width:420px){.tukar-anak span{display:none}.tukar-anak{width:40px;padding:0;justify-content:center}}
.pintu-apung-w{position:fixed;z-index:30;right:calc(var(--kanan,0px) + 16px);bottom:calc(var(--bawah) + 16px)}
.pintu-apung{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#1f2a44;color:#fff;box-shadow:0 2px 4px rgba(31,42,68,.2),0 14px 28px -10px rgba(31,42,68,.55);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pintu-apung__cincin{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);transform:rotate(-90deg)}
.pintu-apung__cincin circle{fill:none;stroke-width:2.6}
.pintu-apung__cincin .pintu__trek{stroke:rgba(255,255,255,.18)}
.pintu-apung__cincin .pintu__isi{stroke:#ffc23d;stroke-linecap:round;stroke-dasharray:88;stroke-dashoffset:88}
.pintu-apung__kunci{display:grid;place-items:center}.pintu-apung__kunci svg{width:24px;height:24px}
.pintu-apung.tekan{transform:scale(.94)}
@media (max-height:520px) and (orientation:landscape){.pintu-apung{width:50px;height:50px}.pintu-apung-w{bottom:calc(var(--bawah) + 10px);right:calc(var(--kanan,0px) + 12px)}}
.mc-toast{bottom:calc(var(--bawah) + 90px)!important}
/* kad Kegemaran di laman dunia */
.dunia-kad__hati{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.25)}.dunia-kad__hati svg{width:18px;height:18px;color:#fff}
/* paparan dunia: suis Semua umur + cip Kegemaran */
.dk__umur{flex:none;font:600 13px/1 var(--f-papar);gap:8px;white-space:nowrap}
.dk{flex-wrap:wrap;row-gap:10px}
.dk__titik{overflow-x:auto;scrollbar-width:none;max-width:100%}.dk__titik::-webkit-scrollbar{display:none}
.dk__titik button{flex:none}
@media (max-width:700px) and (orientation:portrait){.dk__umur{margin-left:auto}}
/* kad tanpa bayang blok tebal di bawah: bayang lembut + kilat atas */
.dunia-kad{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 28px -16px color-mix(in srgb,var(--sw) 85%,#000)!important}
.dunia-kad:active{transform:scale(.98)}
.dunia-kad__kipas span{box-shadow:0 8px 16px -8px rgba(0,0,0,.35)!important}
.cabaran-jalur{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 26px -14px #d9473f}
.cabaran-jalur:active{transform:scale(.985);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 16px -10px #d9473f}
.cabaran-jalur--siap{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 26px -14px #17845f}
.cabaran-jalur__main{box-shadow:0 6px 12px -6px rgba(0,0,0,.3)}
.baru-jalur{box-shadow:0 14px 26px -16px #c99a2e}
.bintang-pil{box-shadow:0 1px 2px rgba(31,42,68,.06),0 8px 18px -10px rgba(31,42,68,.35)!important}
.pilih2__bual{box-shadow:0 1px 2px rgba(31,42,68,.05),0 10px 22px -14px rgba(31,42,68,.3)}
.ak2{box-shadow:0 1px 2px rgba(31,42,68,.06),0 16px 30px -16px rgba(31,42,68,.35)}
.ib2 .kad-panel,.ib2 .jubin>div,.ib2 .subjek-lapor>div,.ib2 .urus-anak>div{box-shadow:0 1px 2px rgba(31,42,68,.05),0 10px 24px -14px rgba(31,42,68,.28)!important}
@media (max-width:700px) and (orientation:portrait){.dk__titik{width:100%;gap:4px!important;justify-content:space-between}.dk__titik button{width:32px!important;height:32px!important}}
@media (max-width:700px) and (orientation:portrait){.perpustakaan--dunia .kad-game--pilih .kad-game__seni{box-shadow:0 5px 0 color-mix(in srgb,var(--warna) 38%,#d9ccb8)!important}}
/* hati kegemaran pada kad game: telefon potret sahaja (skrin lebar guna hati pada kad Dipilih) */
.kad-game__fav{display:none}
@media (max-width:700px) and (orientation:portrait){
  .perpustakaan--dunia .kad-game__fav{position:absolute;z-index:3;left:6px;top:6px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#ff4f7b;box-shadow:0 4px 10px -4px rgba(31,42,68,.35)}
  .perpustakaan--dunia .kad-game__fav svg{width:16px;height:16px}
  .perpustakaan--dunia .kad-game__fav[aria-pressed="false"]{color:#9aa3b8}
  .perpustakaan--dunia .kad-game__umur{right:5px;top:6px;height:22px;padding:0 6px;font-size:10.5px;line-height:22px}
}
@media (max-width:700px) and (orientation:portrait){.perpustakaan--dunia .kad-game__fav[aria-pressed="true"]{background:#ff4f7b!important;color:#fff!important}}
@media (pointer:coarse){.perpustakaan--dunia .kad-game__fav{width:36px;height:36px;left:4px;top:4px}.perpustakaan--dunia .kad-game__fav svg{width:19px;height:19px}}
/* landskap telefon: ruang kiri = kanan (ruang butang ibu bapa di kanan, simetri di kiri) */
@media (max-height:520px) and (orientation:landscape){.anak-utama{padding-left:calc(max(var(--kiri,0px),var(--kanan,0px)) + 76px)!important;padding-right:calc(max(var(--kiri,0px),var(--kanan,0px)) + 76px)!important}}
/* semua saiz: tiada kad besar Dipilih; grid penuh lebar; hati pada setiap kad game */
.perpustakaan--dunia .sorot{display:none!important}
.perpustakaan--dunia .dunia-isi{grid-template-columns:minmax(0,1fr)!important;row-gap:0!important}
.perpustakaan--dunia .kad-game--pilih .kad-game__seni{box-shadow:0 5px 0 color-mix(in srgb,var(--warna) 38%,#d9ccb8)!important}
.perpustakaan--dunia .kad-game__fav{display:grid;position:absolute;z-index:3;left:7px;top:7px;width:30px;height:30px;border-radius:50%;place-items:center;background:rgba(255,255,255,.92);color:#9aa3b8;box-shadow:0 4px 10px -4px rgba(31,42,68,.35)}
.perpustakaan--dunia .kad-game__fav svg{width:17px;height:17px}
.perpustakaan--dunia .kad-game__fav[aria-pressed="true"]{background:#ff4f7b;color:#fff}
@media (min-width:701px),(orientation:landscape){.perpustakaan--dunia .grid-game{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))!important}}
@media (max-height:520px) and (orientation:landscape){.perpustakaan--dunia .grid-game{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))!important;gap:16px 12px!important}}
/* kepala dunia: tiada "N game" (sudah ada di kad dunia); Semua umur sebaris tajuk, kanan atas */
.dk__bil{display:none!important}
.dk__tajuk{margin-right:auto}
@media (max-width:700px) and (orientation:portrait){.dk__umur{order:1;margin-left:auto}.dk__titik{order:2}.dk__tajuk{margin-right:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media (max-width:700px) and (orientation:portrait){
  .perpustakaan--dunia .dk{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px}
  .perpustakaan--dunia .dk__titik{grid-column:1/-1}
  .perpustakaan--dunia .dk__tajuk{font-size:clamp(20px,6vw,26px)}
  .dk__umur{gap:6px;font-size:12px}.dk__umur .suis__trek{width:40px;height:24px}
  .dk__umur .suis__trek::after{width:18px!important;height:18px!important;top:3px!important;left:3px!important}
  .dk__umur input:checked+.suis__trek::after{transform:translateX(16px)!important}
}
@media (max-width:380px) and (orientation:portrait){.perpustakaan--dunia .dk__tajuk{font-size:18px}.perpustakaan--dunia .dk{column-gap:8px}.dk__umur{font-size:11px;gap:5px}.perpustakaan--dunia .dk__balik{width:40px;height:40px}}
/* skrin lebar: kad dunia muat atas butang ibu bapa (tiada tindih, tiada skrol) */
@media (min-width:701px) and (min-height:521px){
  .anak-utama .dunia-kad{height:clamp(150px,calc((100dvh - var(--atas) - var(--bawah) - 230px) / 2),300px)}
  .anak-utama:has(.cabaran-jalur) .dunia-kad{height:clamp(140px,calc((100dvh - var(--atas) - var(--bawah) - 320px) / 2),300px)}
  .anak-utama:has(.cabaran-jalur):has(.baru-jalur) .dunia-kad{height:clamp(130px,calc((100dvh - var(--atas) - var(--bawah) - 425px) / 2),280px)}
}
@media (min-width:701px) and (min-height:521px) and (orientation:portrait){
  .anak-utama .dunia-kad,.anak-utama:has(.cabaran-jalur) .dunia-kad{height:clamp(150px,calc((100dvh - var(--atas) - var(--bawah) - 340px) / 3),280px)}
  .anak-utama:has(.cabaran-jalur):has(.baru-jalur) .dunia-kad{height:clamp(140px,calc((100dvh - var(--atas) - var(--bawah) - 440px) / 3),260px)}
}
/* tiada butang ibu bapa terapung (masuk melalui Tukar → Ibu bapa): ruang bawah/sisi biasa semula */
.anak-utama{padding-bottom:calc(var(--bawah) + 28px)!important}
@media (max-height:520px) and (orientation:landscape){.anak-utama{padding-left:calc(max(var(--kiri,0px),var(--kanan,0px)) + 20px)!important;padding-right:calc(max(var(--kiri,0px),var(--kanan,0px)) + 20px)!important;padding-bottom:calc(var(--bawah) + 14px)!important}}
@media (min-width:701px) and (min-height:521px){
  .anak-utama .dunia-kad{height:clamp(150px,calc((100dvh - var(--atas) - var(--bawah) - 170px) / 2),320px)}
  .anak-utama:has(.cabaran-jalur) .dunia-kad{height:clamp(140px,calc((100dvh - var(--atas) - var(--bawah) - 255px) / 2),320px)}
  .anak-utama:has(.cabaran-jalur):has(.baru-jalur) .dunia-kad{height:clamp(130px,calc((100dvh - var(--atas) - var(--bawah) - 360px) / 2),300px)}
}
@media (min-width:701px) and (min-height:521px) and (orientation:portrait){
  .anak-utama .dunia-kad,.anak-utama:has(.cabaran-jalur) .dunia-kad{height:clamp(150px,calc((100dvh - var(--atas) - var(--bawah) - 275px) / 3),300px)}
  .anak-utama:has(.cabaran-jalur):has(.baru-jalur) .dunia-kad{height:clamp(140px,calc((100dvh - var(--atas) - var(--bawah) - 375px) / 3),280px)}
}
/* skrin lebar/landskap: ruang untuk gelang aktif cip subjek (overflow-x memotongnya) */
@media (min-width:701px),(orientation:landscape){.perpustakaan--dunia .dk__titik{padding:8px!important;margin:-8px!important;max-width:calc(100% + 16px)}}
/* gambar kad game ikut gaya kad dunia: bayang lembut + kilat atas, tiada blok tebal di bawah */
.perpustakaan--dunia .kad-game__seni,.perpustakaan--dunia .kad-game--pilih .kad-game__seni{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 24px -14px color-mix(in srgb,var(--warna) 80%,#000)!important}
.perpustakaan--dunia .kad-game:active .kad-game__seni{transform:scale(.97)}
/* kad pilih anak ikut gaya kad dunia: warna penuh, teks putih, bulatan hiasan, bayang lembut.
   Foto sama saiz dengan/tanpa bingkai: tiada gelang warna; bingkai dilukis di sekeliling dalam ruang tetap. */
.ak2{--P:clamp(84px,9vw,100px);padding:14px 14px 16px!important;gap:0;border-radius:28px;overflow:hidden;color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 78%,#fff),var(--c))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 28px -16px color-mix(in srgb,var(--c) 85%,#000)!important}
.ak2::before{content:"";position:absolute;right:-30%;top:-40%;width:90%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.ak2>*{position:relative;z-index:1}
.ak2__pot{width:calc(var(--P) * 1.74);height:calc(var(--P) * 1.74);display:grid;place-items:center;flex:none}
.ak2 .potret{--s:var(--P)!important;margin:0!important;box-shadow:none!important}
.ak2 .mc-bingkai,.kad-anak.ak2 .mc-bingkai{width:var(--P);height:var(--P);margin:0!important}
.ak2 .mc-bingkai__img{width:173.6%!important;height:173.6%!important}
.ak2 .kad-anak__nama{margin-top:2px!important;color:#fff}
.ak2__th{color:rgba(255,255,255,.88)}.ak2__gel{color:#fff3c4}
.ak2__st{margin:10px 0 0!important}
.ak2__cip{background:rgba(255,255,255,.22)!important;color:#fff!important}
.ak2__cip--emas{background:#fff!important;color:#7a5200!important}
@media (max-width:700px) and (orientation:portrait){.ak2{--P:76px}}
@media (max-height:520px) and (orientation:landscape){.ak2{--P:52px;padding:10px 10px 12px!important}.ak2 .kad-anak__nama{font-size:17px}.ak2__st{margin-top:6px!important}}
/* gambar kad game: lengkung sama nisbah dengan kad dunia (28px pada kad ~170px) */
.perpustakaan--dunia .kad-game__seni{border-radius:17%!important}
/* Cabaran Harian: ikon kekal dalam bekas */
.cabaran-jalur__ikon{position:relative;overflow:hidden}
.cabaran-jalur__ikon img{position:absolute;left:12%;top:12%;width:76%!important;height:76%!important;max-width:none;object-fit:contain;animation:none!important;transform:none!important}
/* landskap telefon: ruang kiri = kanan, termasuk kawasan takuk (notch) */
@media (max-height:520px) and (orientation:landscape){.anak-utama{padding-left:calc(max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)) + 24px)!important;padding-right:calc(max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)) + 24px)!important}}
/* kad dunia: ikon subjek besar & pudar di latar (petunjuk kategori) */
.dunia-kad__hint{position:absolute;z-index:0;right:-6%;top:-10%;width:58%;max-width:180px;aspect-ratio:1;color:#fff;opacity:.17;transform:rotate(-12deg);pointer-events:none}
.dunia-kad__hint svg{width:100%;height:100%;display:block}
.dunia-kad__kipas{z-index:1}
@media (max-height:520px) and (orientation:landscape){.dunia-kad__hint{width:50%;top:-14%}}
/* kad pilih anak: gambar profil anak besar & pudar di latar (macam ikon subjek kad dunia) */
.ak2>.ak2__hint{position:absolute;z-index:0;right:-18%;top:-8%;width:78%;aspect-ratio:1;border-radius:50%;overflow:hidden;opacity:.2;transform:rotate(-10deg);pointer-events:none;mix-blend-mode:luminosity}
.ak2__hint img{width:100%;height:100%;object-fit:cover;display:block}
.ak2::before{z-index:0}
/* jalur Game baru & Cabaran Harian: jarak bawah = jarak antara kad dunia */
.anak-utama .baru-jalur,.anak-utama .cabaran-jalur{margin-bottom:clamp(12px,1.8vw,18px)!important}

/* Owner 20 Okt: senarai game = petunjuk kategori di latar (macam kad dunia) + penukar subjek skrol mendatar dengan tepi pudar */
.perpustakaan--dunia{position:relative;isolation:isolate}
/* ikon kategori besar & pudar: kanan bawah skrin, tetap (tidak ikut skrol), warna ikut subjek */
.dk__hint{position:fixed;z-index:-1;right:calc(var(--kanan,0px) - 46px);bottom:calc(var(--bawah,0px) - 40px);width:min(64vw,300px);aspect-ratio:1;color:var(--sw);opacity:.08;transform:rotate(-12deg);pointer-events:none;transition:color .3s}
.dk__hint svg{width:100%;height:100%;display:block}
.dk__hint[data-s="semua"]{opacity:.05}
@media (min-width:701px){.dk__hint{width:min(34vw,400px);right:calc(var(--kanan,0px) - 40px);bottom:calc(var(--bawah,0px) - 50px);opacity:.07}}
@media (max-height:520px) and (orientation:landscape){.dk__hint{width:min(30vw,240px);bottom:-36px}}
.dk__jalur{position:relative;min-width:0;max-width:100%;transition:--pk .2s,--pn .2s}
/* gelang aktif = 5px di luar butang: jarak 14px + padding 12px supaya gelang tak makan ruang jiran / tak terpotong */
.dk .dk__jalur .dk__titik{display:flex;justify-content:flex-start!important;gap:14px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:56px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;width:auto;max-width:100%;margin:0!important;padding:9px 12px!important}
.dk .dk__jalur .dk__titik::-webkit-scrollbar{display:none}
.dk .dk__jalur .dk__titik button{flex:none;scroll-snap-align:center;width:40px!important;height:40px!important}
/* tepi: cip sendiri dipudarkan dengan topeng pada penskrol (tiada lengkung tajam), + lapisan kabur nipis; hanya di sisi yang ada item tersorok */
.dk__jalur{--pk:0px;--pn:0px}
.dk__jalur[data-kiri]{--pk:52px}.dk__jalur[data-kanan]{--pn:52px}
.dk .dk__jalur .dk__titik{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--pk),#000 calc(100% - var(--pn)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--pk),#000 calc(100% - var(--pn)),transparent 100%)}
.dk__jalur::before,.dk__jalur::after{content:"";position:absolute;z-index:2;top:2px;bottom:2px;width:34px;pointer-events:none;opacity:0;transition:opacity .2s;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.dk__jalur::before{left:0;border-radius:999px 0 0 999px;-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
.dk__jalur::after{right:0;border-radius:0 999px 999px 0;-webkit-mask-image:linear-gradient(270deg,#000,transparent);mask-image:linear-gradient(270deg,#000,transparent)}
.dk__jalur[data-kiri]::before,.dk__jalur[data-kanan]::after{opacity:1}
/* gelang aktif lebih nipis (4px) + jarak 16px: ruang nampak sekata di sebelah cip aktif */
.dk .dk__jalur .dk__titik{gap:16px!important}
.dk .dk__jalur .dk__titik button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sw)!important}
@media (max-width:700px) and (orientation:portrait){
  .perpustakaan--dunia .dk__jalur{grid-column:1/-1;order:2;border-radius:999px;background:#fff;box-shadow:0 3px 0 var(--garis)}
  .perpustakaan--dunia .dk__jalur .dk__titik{width:100%!important;background:none!important;box-shadow:none!important;border-radius:999px;padding:9px 14px!important}
  .dk .dk__jalur .dk__titik button{width:42px!important;height:42px!important}
}
@media (min-width:701px),(orientation:landscape){.perpustakaan--dunia .dk__jalur{--tepi:var(--kertas);flex:0 1 auto}}
@media (max-height:520px) and (orientation:landscape){.dk .dk__jalur .dk__titik button{width:34px!important;height:34px!important}.dk .dk__jalur .dk__titik{gap:13px!important;padding:8px 10px!important}}

/* Owner 20 Okt: kad senarai game tidak terangkat semasa hover (tiada kesan naik ke atas) */
@media (hover:hover){.perpustakaan--dunia .kad-game:hover{transform:none}.perpustakaan--dunia .kad-game:hover .kad-game__seni img{transform:none}}

/* Owner 21 Okt: tiada kesan terangkat pada kad kategori & kad pilih anak */
@media (hover:hover){.dunia-kad:hover{transform:none}.kad-anak:hover{transform:none}}
.dunia-kad:active{transform:scale(.98)}
.kad-anak:active{transform:scale(.98)}
/* bar atas skrin anak: nama/gelaran panjang -> Tukar ikon sahaja; teks yang masih panjang dipotong "…" */
.anak-utama .atas--padat .tukar-anak span{display:none}
.anak-utama .atas--padat .tukar-anak{width:44px;padding:0;justify-content:center}
.salam__teks .sub{min-width:0;max-width:100%}
.salam__teks .cip{max-width:100%;min-width:0;overflow:hidden}
.salam__teks .cip>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.salam__teks .cip svg{flex:none}

/* Owner 21 Okt: rak "Pelajaran" (reka bentuk 5) — kad besar "sambung belajar" + jalur bulat "seterusnya",
   kemudian tajuk "Game" dengan reka bentuk kepala yang sama sebelum senarai game. */
.rak{grid-column:1/-1;min-width:0;margin:0 0 clamp(10px,1.6vw,16px)}
.rak__kepala{display:flex;align-items:center;gap:10px;margin:0 0 10px 2px}
.rak__kepala--game{margin:18px 0 0 2px}
[data-game-head]{grid-column:1/-1;min-width:0;margin:0 0 -14px}
.rak__ikon{flex:none;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--dakwat);box-shadow:inset 0 0 0 2px var(--garis)}
.rak__ikon svg{width:21px;height:21px}
.rak__tajuk{min-width:0;display:block}
.rak__tajuk b{display:block;font:700 19px/1.15 var(--f-papar);color:var(--dakwat)}
.rak__tajuk span{display:block;font:600 12.5px/1.3 var(--f-teks);color:var(--dakwat-2)}
/* kad besar */
.rak5{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) 44px;align-items:center;gap:12px;width:100%;
  padding:12px;border-radius:20px;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(135deg,var(--sw),color-mix(in srgb,var(--sw) 66%,#1f2a44))}
.rak5:active{transform:translateY(1px)}
.rak5__seni{position:relative;width:76px;height:76px;border-radius:18px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--warna2,var(--sw)) 28%,#fff),color-mix(in srgb,var(--warna2,var(--sw)) 10%,#fff))}
.rak5__seni::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(rgba(255,255,255,.38) 1.2px,transparent 1.3px) 0 0/12px 12px}
.rak5__seni img{position:relative;z-index:1;width:60px;height:60px;object-fit:contain;filter:drop-shadow(0 9px 7px rgba(31,42,68,.28))}
.rak5__atas{display:flex;align-items:center;gap:6px;min-width:0}
.rak5__umur{flex:0 0 auto;height:15px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.24);color:#fff;
  font:700 9px/15px var(--f-papar);font-style:normal;letter-spacing:.02em}
.rak5__isi{min-width:0;display:flex;flex-direction:column;gap:3px}
.rak5__label{font:700 9.5px/1 var(--f-papar);letter-spacing:.1em;opacity:.92}
.rak5__isi b{font:700 16.5px/1.12 var(--f-papar);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rak5__meta{font:600 11.5px/1.25 var(--f-teks);opacity:.94;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.rak5__cip{font:700 10px/1.6 var(--f-teks);font-style:normal;padding:0 7px;border-radius:99px;background:rgba(0,0,0,.24)}
.rak5__baris{display:flex;align-items:center;gap:8px;margin-top:4px;min-height:12px}
.rak5__bar{display:block;height:5px;flex:1;border-radius:99px;background:rgba(255,255,255,.32);overflow:hidden}
.rak5__bar i{display:block;height:100%;border-radius:99px;background:#fff}
.rak5__bts{display:inline-flex;gap:1.5px;flex:none}
.rak5__bts i{display:grid;place-items:center;color:rgba(255,255,255,.42)}
.rak5__bts i.ada{color:#ffd23f}
.rak5__bts svg{width:12px;height:12px}
.rak5__cta{width:44px;height:44px;border-radius:50%;background:#fff;color:color-mix(in srgb,var(--sw) 70%,#1f2a44);display:grid;place-items:center}
.rak5__cta svg{width:20px;height:20px}
.rak5__cta--muat{border-radius:15px;background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
/* Owner 21 Okt: pelajaran belum dimuat turun = gambar pudar; sedang muat turun = cincin peratus pada butang. */
.rak5--muat .rak5__seni img{opacity:.6;filter:grayscale(.35) drop-shadow(0 7px 6px rgba(31,42,68,.18))}
.rak5__cta--sedang{position:relative;background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.3) 0);color:#fff}
.rak5__cta--sedang::after{content:"";position:absolute;inset:5px;border-radius:inherit;background:color-mix(in srgb,var(--sw) 58%,#1f2a44)}
.rak5__cta--sedang b{position:relative;z-index:1;font:700 12px/1 var(--f-papar);font-variant-numeric:tabular-nums}
.rak5s--sedang .rak5s__cincin{background:conic-gradient(rgba(31,42,68,.55) calc(var(--p)*1%),rgba(31,42,68,.12) 0)}
/* jalur bulat */
.rak__baris{display:flex;align-items:baseline;gap:6px;margin:14px 2px 8px}
.rak__baris b{font:700 13px var(--f-papar);color:var(--dakwat-2)}
.rak__baris i{font:600 11.5px var(--f-teks);color:var(--dakwat-3);font-style:normal}
.rak__jalur{display:grid;grid-auto-flow:column;grid-auto-columns:66px;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 4px 4px} /* cincin inset -3px + 4px tebal: ruang atas 6px supaya tak terpotong */
.rak__jalur::-webkit-scrollbar{display:none}
.rak5i{position:relative;display:flex;justify-content:center}
.rak5s--muat .rak5s__seni img{opacity:.45;filter:grayscale(.3) drop-shadow(0 5px 5px rgba(31,42,68,.16))}
.ketuk-hati{position:absolute;z-index:9;display:grid;place-items:center;width:56px;height:56px;margin:-28px 0 0 -28px;color:#ff4d6d;pointer-events:none;
  animation:letup .72s cubic-bezier(.2,.7,.3,1) forwards}
.ketuk-hati svg{width:44px;height:44px;filter:drop-shadow(0 6px 12px rgba(255,77,109,.45))}
.ketuk-hati--off{color:#8e97ab;animation:letupKeluar .58s cubic-bezier(.4,0,.6,1) forwards}
.ketuk-hati--off svg{filter:drop-shadow(0 4px 8px rgba(31,42,68,.28))}
@keyframes letupKeluar{0%{transform:scale(1);opacity:0}22%{transform:scale(1.02);opacity:.92}100%{transform:scale(.32);opacity:0}}
@keyframes letup{0%{transform:scale(.3);opacity:0}28%{transform:scale(1.16);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(1.04) translateY(-10px);opacity:0}}
.rak5s{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:0;background:none;cursor:pointer;
  scroll-snap-align:start;-webkit-tap-highlight-color:transparent}
.rak5s:active .rak5s__seni{transform:scale(.94)}
.rak5s__seni{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--sw) 24%,#fff),color-mix(in srgb,var(--sw) 8%,#fff));
  box-shadow:inset 0 0 0 2px var(--garis),0 2px 6px -3px rgba(31,42,68,.3);transition:transform .12s}
.rak5s__seni::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(rgba(255,255,255,.4) 1.1px,transparent 1.2px) 0 0/9px 9px}
.rak5s__seni img{position:relative;z-index:1;width:33px;height:33px;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(31,42,68,.22))}
.rak5s__cincin{position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(var(--sw) calc(var(--p)*1%),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}
.rak5s__siap{position:absolute;right:-2px;bottom:-1px;width:18px;height:18px;border-radius:50%;background:var(--emas);color:#5a3d00;
  display:grid;place-items:center;box-shadow:0 0 0 2px var(--kertas)}
.rak5s__siap svg{width:10px;height:10px}
.rak5s__awan{position:absolute;left:-4px;bottom:-3px;width:20px;height:20px;border-radius:50%;background:#fff;color:var(--dakwat-2);
  display:grid;place-items:center;box-shadow:0 0 0 2px var(--kertas),0 2px 5px -1px rgba(31,42,68,.35)}
.rak5s__awan svg{width:12px;height:12px}
.rak5s__umur{display:inline-block;align-self:center;margin:0;padding:0 5px;border-radius:5px;background:rgba(31,42,68,.13);color:var(--dakwat-2);
  font-style:normal;vertical-align:1px;
  font:700 8.5px/16px var(--f-papar);font-style:normal}
.rak5s__teks{display:flex;flex-direction:column;align-items:center;gap:2px;width:64px}
.rak5s__nama{font:700 9.5px/1.06 var(--f-papar);color:var(--dakwat);width:64px;text-align:center;height:21px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rak5s .rak5__bts i{color:#d8cfc0}
.rak5s .rak5__bts i.ada{color:var(--emas)}
.rak5s .rak5__bts svg{width:9px;height:9px}
@media (max-width:380px){
  .rak5{grid-template-columns:66px minmax(0,1fr) 40px;gap:10px;padding:10px}
  .rak5__seni{width:66px;height:66px}.rak5__seni img{width:46px;height:46px}
  .rak5__isi b{font-size:15.5px}
  .rak5__cta{width:40px;height:40px}
  .rak__jalur{grid-auto-columns:62px;gap:8px}
  .rak5s__seni{width:48px;height:48px}.rak5s__seni img{width:30px;height:30px}
  .rak5s__nama{width:60px}
}
@media (min-width:701px){.rak__jalur{grid-auto-columns:74px}.rak5s__seni{width:60px;height:60px}.rak5s__seni img{width:38px;height:38px}}

/* Owner 21 Okt: tiada cincin fokus pada peranti sentuh (Android tunjuk sempadan sekejap selepas tekan / .focus()). */
@media (hover:none) and (pointer:coarse){:focus,:focus-visible{outline:none!important}}
/* ---------- Owner 21 Okt: "Lihat semua" pada rak + perpustakaan pelajaran (#/pelajaran) ---------- */
.rak__semua{margin-left:auto;padding:4px 11px;border:0;border-radius:99px;background:#fff;color:var(--dakwat);font:700 12px/1.3 var(--f-papar);
  box-shadow:inset 0 0 0 2px var(--garis);cursor:pointer}
.rak5s--semua .rak5s__seni{background:var(--dakwat);box-shadow:0 4px 0 #0f1729}
.rak5s--semua .rak5s__seni::after{display:none}
.rak5s--semua .rak5s__seni b{position:relative;z-index:1;color:#fff;font:700 15px/1 var(--f-papar);font-variant-numeric:tabular-nums}
.rak5s--semua .rak5s__nama{color:var(--dakwat)}
.rak5s__umur--kosong{visibility:hidden}
/* halaman */
.pp{display:flex;flex-direction:column;gap:0;padding-bottom:28px;margin:0}
.pp__alat{margin-bottom:12px}.pp__alat[hidden]{display:none}
/* kepala pustaka = markup .atas.dk sama dengan halaman game (owner 22 Okt): tiada gaya kepala/cip sendiri */
/* carian + tapis sebaris */
.pp__alat{display:flex;align-items:center;gap:9px}
.pp__cari{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:46px;padding:0 15px;border-radius:16px;background:#fff;color:var(--dakwat-2);
  box-shadow:inset 0 0 0 2px var(--garis)}
.pp__cari svg{width:18px;height:18px;flex:none}
.pp__cari input{flex:1;min-width:0;border:0;outline:0;background:none;font:600 16px var(--f-teks);color:var(--dakwat)}
.pp__cari:focus-within{box-shadow:inset 0 0 0 2px var(--sw)}
.pp__tapis-bekas{position:relative;flex:none}
.pp__tapis{position:relative;width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:16px;background:#fff;color:var(--dakwat);cursor:pointer;
  box-shadow:inset 0 0 0 2px var(--garis)}
.pp__tapis svg{width:21px;height:21px}
.pp__tapis[aria-expanded="true"]{background:var(--sw);color:#fff;box-shadow:inset 0 0 0 2px var(--sw)}
.pp__tapis-titik{position:absolute;right:8px;top:8px;width:8px;height:8px;border-radius:50%;background:#ff4f7b;box-shadow:0 0 0 2px #fff}
.pp__menu{position:absolute;z-index:30;right:0;top:calc(100% + 8px);min-width:184px;padding:6px;border-radius:18px;background:#fff;
  box-shadow:inset 0 0 0 2px var(--garis)}
.pp__menu[hidden]{display:none}
.pp__menu button{display:flex;align-items:center;gap:8px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:12px;background:none;
  color:var(--dakwat);font:700 14px/1 var(--f-papar);text-align:left;cursor:pointer}
.pp__menu button[aria-checked="true"]{background:color-mix(in srgb,var(--sw) 12%,#fff);color:var(--sw)}
.pp__menu .pp__semak{margin-left:auto;width:16px;height:16px;display:grid;place-items:center}
.pp__menu .pp__semak svg{width:14px;height:14px}
/* isi: kumpulan ikut subjek */
.pp__kumpulan{margin-top:4px}
.pp__kumpulan+.pp__kumpulan{margin-top:18px}
.pp__kumpulan h2{display:flex;align-items:center;gap:9px;margin:0 0 10px;font:700 17px/1.2 var(--f-papar);color:var(--dakwat)}
.pp__kumpulan h2 small{font:700 11.5px var(--f-teks);color:var(--dakwat-2);padding:2px 8px;border-radius:99px;background:#efe6d6}
.pp__ikon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--sw);color:#fff}
.pp__ikon svg{width:17px;height:17px}
/* lencana awan (belum dimuat turun) dalam gaya lencana umur kad game */
.kad-game__muat{display:grid;place-items:center;width:26px;padding:0;border-radius:999px}
.kad-game__muat svg{width:14px;height:14px;color:var(--dakwat-2)}
.perpustakaan--dunia .kad-game--siap .kad-game__seni{box-shadow:0 0 0 3px var(--emas),0 5px 0 0 color-mix(in srgb,var(--emas) 55%,#a97500)}
@media (max-width:380px){.pp__alat{gap:7px}.pp__cari{min-height:44px;padding:0 12px}.pp__tapis{width:44px;height:44px}}

/* ---------- mod Game / Belajar (owner 22 Okt) ---------- */
html{transition:background-color .35s ease}
html.mod-belajar{--kertas:#eef0ff;--kertas-2:#dfe2ff;--garis:#dcdcf5;background:#eef0ff}
.latar i{transition:background-color .5s ease}
html.mod-belajar .latar__a{background:#c9c4ff}
html.mod-belajar .latar__b{background:#bfe3ff}
html.mod-belajar .latar__c{background:#e4cfff}
html.mod-belajar .latar{background-image:radial-gradient(rgba(70,60,170,.09) 1.2px,transparent 1.3px)}
/* kad pelajaran: seni bertona ungu lembut supaya senarai Belajar jelas berbeza dari senarai game */
html.mod-belajar .pp .kad-game__seni{background:linear-gradient(160deg,color-mix(in srgb,var(--warna) 14%,#f1efff),color-mix(in srgb,var(--warna) 38%,#c9c5ff));box-shadow:0 5px 0 color-mix(in srgb,var(--warna) 22%,#b3aef0)}
/* tab Game | Belajar */
.mod-tab{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(100%,420px);margin:0 auto clamp(14px,2.4vw,20px);padding:3px;border:2px solid var(--garis);border-radius:999px;background:#fff;isolation:isolate}
.mod-tab__pil{position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:#ff6b4a;transition:transform .42s cubic-bezier(.5,1.6,.45,1),background .3s}
.mod-tab[data-aktif="belajar"] .mod-tab__pil{transform:translateX(100%);background:#5b57ea}
.mod-tab button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--dakwat-2);font:700 17px/1 var(--f-papar);cursor:pointer;transition:color .25s}
.mod-tab button svg{width:24px;height:24px;flex:none}
.mod-tab button[aria-selected="true"]{color:#fff}
.mod-tab button:active{transform:scale(.97)}
@media (max-height:520px) and (orientation:landscape){.mod-tab{margin-bottom:10px}.mod-tab button{min-height:40px;font-size:15px}}
/* kad Kegemaran: tona lebih pekat supaya teks putih jelas (kad muncul juga bila belum ada kegemaran) */
.dunia-kad--fav{background:linear-gradient(135deg,#ff87ab,#f0396b 72%);box-shadow:0 7px 0 #c92a55}
.dunia-kad--fav .dunia-kad__bil{opacity:1;font-weight:700}
/* kad Kegemaran tanpa kegemaran */
.dunia-kad__kosong{display:grid!important;place-items:center;background:rgba(255,255,255,.28)!important;box-shadow:none!important;border:2px dashed rgba(255,255,255,.75)}
.dunia-kad__kosong svg{width:46%;height:46%;color:#fff}
/* pintu lendir semasa tukar mod */
.lendir{position:fixed;inset:0;z-index:2147483000;pointer-events:all}
.lendir svg{display:block;width:100%;height:100%;overflow:visible}
.lendir__kilat{fill:none;stroke:rgba(255,255,255,.62);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70 26 14 26;transition:opacity .12s}
.lendir__kilat--2{stroke:rgba(255,255,255,.38);stroke-width:4;stroke-dasharray:22 30}
.lendir__rim{fill:none;stroke:rgba(90,20,0,.16);stroke-width:8;stroke-linejoin:round;transition:opacity .12s}
.lendir svg{will-change:transform}
.lendir__kelim{fill:none;stroke:rgba(255,255,255,.95);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.lendir__gelembung circle{fill:rgba(255,255,255,.22);stroke:rgba(255,255,255,.55);stroke-width:1.5}
html.mod-belajar .latar::after{height:150px;background:linear-gradient(#fff6ea 0%,rgba(244,243,248,.9) 40%,rgba(238,240,255,0) 100%)!important}

/* bar status + tab bawah ikut mod: Android guna theme_color manifest (manifest-belajar.webmanifest),
   tab bawah kaca diberi tona mod supaya jelas bukan warna Game */
html.mod-belajar{color-scheme:light}
html.mod-belajar .rel{background:rgba(233,235,255,.72);border-color:rgba(70,60,170,.16)}
html.mod-belajar .rel__item{color:#5b57ea}
html.mod-belajar .rel__item.on{background:#5b57ea;color:#fff}

/* tab bawah ikut mod */

/* Owner 22 Okt (percubaan bar status lutsinar iOS): game dalam iframe tidak dapat safe-area sendiri,
   jadi iframe dimulakan di bawah jam; jalur atas diwarna ikut warna atas game. --atas = 0 di Android/desktop. */
.hos{background:var(--warna-bar,#14161a)}
.hos__iframe{top:var(--atas);height:calc(100% - var(--atas))}

/* Owner 22 Okt: tab mod + titisan lendir "Semua umur" (bawah kanan, melekat pada tab). Warna ikut mod aktif. */
.mod-tab-wrap{--mw:#ff6b4a;display:flex;flex-direction:column;width:min(100%,420px);margin:0 auto clamp(12px,2.2vw,18px)}
.mod-tab-wrap[data-aktif="belajar"]{--mw:#5b57ea}.mod-tab-wrap[data-aktif="ujian"]{--mw:#0f9d76}
.mod-tab-wrap:has([data-mod="ujian"]){width:min(100%,470px)}
.mod-tab-wrap>.mod-tab{width:100%;margin:0;z-index:1}
.titis-umur{--c:#fff;--b:var(--garis);--t:var(--dakwat-2);position:relative;z-index:2;align-self:center;display:inline-flex;align-items:center;gap:7px;
  margin:-2px 0 0;min-height:34px;padding:5px 14px 7px 10px;border:2px solid var(--b);border-top:0;border-radius:0 0 18px 18px;background:var(--c);color:var(--t);
  font:700 13px/1 var(--f-papar);cursor:pointer;transform-origin:50% 0;transition:background-color .25s,color .25s,border-color .25s;-webkit-tap-highlight-color:transparent}
/* sudut cekung kiri/kanan: bingkai tab menyambung ke titisan (garis bingkai ikut lengkung) */
.titis-umur::before,.titis-umur::after{content:'';position:absolute;top:0;width:14px;height:14px;pointer-events:none}
.titis-umur::before{left:-16px;background:radial-gradient(circle at 0 100%,transparent 11.5px,var(--b) 12px 13.5px,var(--c) 14px)}
.titis-umur::after{right:-16px;background:radial-gradient(circle at 100% 100%,transparent 11.5px,var(--b) 12px 13.5px,var(--c) 14px)}
.titis-umur__manik{position:relative;width:16px;height:16px;flex:none;border-radius:50% 50% 50% 50%/58% 58% 42% 42%;border:2.5px solid currentColor;transition:background .25s,border-color .25s}
.titis-umur__titik{position:absolute;left:50%;bottom:-7px;width:9px;height:11px;margin-left:-4.5px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:var(--c);transition:background .25s;animation:titis-jatuh 3.4s ease-in infinite;box-shadow:inset 0 0 0 1.5px rgba(31,42,68,.06)}
.titis-umur[aria-pressed="true"]{--c:var(--mw);--b:var(--mw);--t:#fff}
.titis-umur[aria-pressed="true"] .titis-umur__manik{background:#fff;border-color:#fff}
.titis-umur[aria-pressed="true"] .titis-umur__manik::after{content:'';position:absolute;left:3.5px;top:1px;width:3px;height:6.5px;border:solid var(--mw);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.titis-umur:active{transform:scaleY(1.08) scaleX(.96)}
.titis-umur:focus-visible{outline:3px solid var(--langit);outline-offset:2px}
.titis-umur.goyang{animation:titis-goyang .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes titis-goyang{0%{transform:scaleY(1)}25%{transform:scaleY(1.22) scaleX(.9)}55%{transform:scaleY(.92) scaleX(1.05)}100%{transform:none}}
@keyframes titis-jatuh{0%,62%{transform:translateY(-6px) scale(.5);opacity:0}70%{transform:translateY(0) scale(1);opacity:1}88%{transform:translateY(3px) scaleY(1.15);opacity:1}100%{transform:translateY(16px) scale(.6);opacity:0}}
@media (max-width:360px){.titis-umur{font-size:12px;padding:5px 11px 7px 8px}}
@media (prefers-reduced-motion:reduce){.titis-umur__titik{animation:none;opacity:0}.titis-umur.goyang{animation:none}}

/* Owner 22 Okt: tab terasa seperti lendir bila disentuh: picit semasa tekan, pil meregang & bergoyang bila bertukar */
.mod-tab{transition:scale .35s cubic-bezier(.3,1.8,.5,1)}
.mod-tab.tekan{scale:1.025 .93;transition-duration:.12s}
.mod-tab.tekan .mod-tab__pil{scale:1.06 .9}
.mod-tab__pil{transition:transform .42s cubic-bezier(.5,1.6,.45,1),background .3s,scale .3s cubic-bezier(.3,1.8,.5,1)}
.mod-tab__pil.regang{animation:pil-regang .62s cubic-bezier(.3,1.4,.5,1)}
@keyframes pil-regang{0%{scale:1 1}22%{scale:1.32 .78}48%{scale:.9 1.1}70%{scale:1.05 .96}100%{scale:1 1}}
.mod-tab.kenyal{animation:tab-kenyal .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes tab-kenyal{0%{scale:1.025 .93}40%{scale:.985 1.045}70%{scale:1.008 .99}100%{scale:1 1}}
@media (prefers-reduced-motion:reduce){.mod-tab,.mod-tab__pil{transition:none}.mod-tab.tekan,.mod-tab.tekan .mod-tab__pil{scale:none}.mod-tab__pil.regang,.mod-tab.kenyal{animation:none}}

/* Owner 22 Okt: carian + tapis di kepala halaman (dulu tempat suis Semua umur). Carian kembang ke kiri. */
.dk__alat{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.dk__alat .pp__tapis{width:42px;height:42px;border-radius:50%}
.dk__cari-slot{position:relative;width:42px;height:42px;flex:none}
.dk__cari{position:absolute;right:0;top:0;z-index:6;display:flex;align-items:center;width:42px;height:42px;border-radius:21px;background:#fff;
  box-shadow:inset 0 0 0 2px var(--garis);overflow:hidden;transition:width .34s cubic-bezier(.3,1.25,.5,1),box-shadow .2s}
.dk__cari.buka{box-shadow:inset 0 0 0 2px var(--sw)}
.dk__cari-ikon,.dk__cari-tutup{flex:none;width:42px;height:42px;display:grid;place-items:center;border:0;background:none;color:var(--dakwat);cursor:pointer}
.dk__cari-ikon svg{width:19px;height:19px}.dk__cari-tutup svg{width:18px;height:18px}
.dk__cari input{flex:1;min-width:0;width:0;border:0;outline:0;background:none;font:600 16px var(--f-teks);color:var(--dakwat);opacity:0;transition:opacity .2s .1s}
.dk__cari input::-webkit-search-cancel-button{display:none}
.dk__cari.buka input{opacity:1}
.dk__cari-tutup{display:none}.dk__cari.buka .dk__cari-tutup{display:grid}
.dk--cari .pp__tapis-bekas{z-index:7}
@media (max-width:700px) and (orientation:portrait){.dk__alat{order:1}}
@media (prefers-reduced-motion:reduce){.dk__cari{transition:none}}

/* Owner 22 Okt (v2): satu garis tepi sahaja keliling tab + titisan (filter pada pembalut, bukan border berasingan),
   sudut cekung guna mask supaya warna on/off beralih licin, titisan jatuh diganti bonjol kecil yang melendut & melantun. */
.mod-tab-wrap{filter:drop-shadow(1.5px 0 0 var(--garis)) drop-shadow(-1.5px 0 0 var(--garis)) drop-shadow(0 1.5px 0 var(--garis)) drop-shadow(0 -1.5px 0 var(--garis))}
.mod-tab-wrap>.mod-tab{border-color:transparent}
.titis-umur{border-color:transparent!important;transition:background-color .3s ease,color .3s ease}
.titis-umur::before,.titis-umur::after{width:14px;height:14px;background:var(--c)!important;transition:background-color .3s ease}
.titis-umur::before{left:-16px;-webkit-mask:radial-gradient(circle at 0 100%,transparent 13.5px,#000 14px);mask:radial-gradient(circle at 0 100%,transparent 13.5px,#000 14px)}
.titis-umur::after{right:-16px;-webkit-mask:radial-gradient(circle at 100% 100%,transparent 13.5px,#000 14px);mask:radial-gradient(circle at 100% 100%,transparent 13.5px,#000 14px)}
.titis-umur__manik{transition:background-color .3s ease,border-color .3s ease}
.titis-umur__titik{display:none}
.titis-umur__bonjol{position:absolute;left:50%;top:calc(100% - 1px);width:18px;height:7px;margin-left:-9px;border-radius:0 0 50% 50%/0 0 100% 100%;
  background:var(--c);transform-origin:50% 0;transition:background-color .3s ease;animation:bonjol-lendut 3.6s cubic-bezier(.3,1.5,.5,1) infinite}
@keyframes bonjol-lendut{0%,58%{transform:none}70%{transform:scale(.72,2.3)}78%{transform:scale(1.18,.62)}85%{transform:scale(.92,1.28)}91%{transform:scale(1.04,.9)}96%,100%{transform:none}}
.titis-umur.goyang .titis-umur__bonjol{animation:bonjol-lendut .9s cubic-bezier(.3,1.5,.5,1) -2.16s 1}
@media (prefers-reduced-motion:reduce){.titis-umur__bonjol{animation:none}}

/* Owner 22 Okt (v3): tab + titisan = satu bentuk SVG (.mt-bentuk, dilukis oleh bentukTab). Elemen HTML lutsinar. */
.mod-tab-wrap{position:relative;filter:none;transform-origin:50% 0}
.mt-bentuk{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.mt-bentuk__isi{fill:#fff}
.mt-bentuk__warna{fill:var(--mw);opacity:0;transition:opacity .3s ease}
.mt-bentuk__garis{fill:none;stroke:var(--garis);stroke-width:2;stroke-linejoin:round}
.mt-bentuk__titik{fill:#fff;stroke:var(--garis);stroke-width:1.5;transition:fill .3s ease}
.mod-tab-wrap:has(.titis-umur[aria-pressed="true"]) .mt-bentuk__warna{opacity:1}
.mod-tab-wrap:has(.titis-umur[aria-pressed="true"]) .mt-bentuk__titik{fill:var(--mw);stroke:var(--mw)}
.mod-tab-wrap>.mod-tab{background:transparent!important;border-color:transparent!important}
.titis-umur{background:transparent!important;border:0!important;margin-top:0;padding-top:7px;transform:none!important;animation:none!important}
.titis-umur::before,.titis-umur::after{content:none!important}
.titis-umur__manik{width:17px;height:17px;border-radius:50%}
.titis-umur[aria-pressed="true"] .titis-umur__manik::after{content:'';position:absolute;inset:0;left:auto;top:auto;width:auto;height:auto;border:0;transform:none;
  background:var(--mw);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 5 8.6 9.4 3.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 5 8.6 9.4 3.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.mod-tab.tekan,.mod-tab.kenyal{scale:none;animation:none}
.mod-tab-wrap{transition:scale .35s cubic-bezier(.3,1.8,.5,1)}
.mod-tab-wrap.tekan{scale:1.025 .94;transition-duration:.12s}
.mod-tab-wrap.tekan .mod-tab__pil{scale:1.06 .9}
.mod-tab-wrap.kenyal{animation:tab-kenyal .5s cubic-bezier(.3,1.6,.5,1)}
@media (prefers-reduced-motion:reduce){.mod-tab-wrap{transition:none}.mod-tab-wrap.tekan{scale:none}.mod-tab-wrap.kenyal{animation:none}}

.mt-bentuk__warna{fill:url(#mtGrad)}
.mt-bentuk__grad stop{stop-color:var(--mw)}
.titis-umur[aria-pressed="true"] .titis-umur__manik::after{left:0!important;top:0!important;right:0;bottom:0;width:100%!important;height:100%!important}

/* Owner 22 Okt: gred + markah di tengah bawah gambar kad kertas; hanya bila kertas sudah dimuat turun */
.kad-game__seni .uj-gred-seni{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:2;white-space:nowrap;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.kad-game[data-mc]:not([data-mc="siap"]) .uj-gred-seni{display:none}

/* Owner 22 Okt (v4): titisan "Semua umur" dialih ke ATAS tab (bentuk SVG dilukis bentukTab, menonjol ke atas). */
.mod-tab-wrap .titis-umur{order:-1;margin:0 0 -2px;padding:7px 14px 5px 10px;border-radius:18px 18px 0 0;transform-origin:50% 100%}
.mod-tab-wrap{transform-origin:50% 100%}

/* Owner 22 Okt: kumpulan "Baru untuk kamu" (Game/Belajar/Ujian Semua): tajuk sudah sebut Baru; kad kecil tak muat
   pil BARU di sebelah hati & x, jadi pil disorok di sini (bingkai emas + x kekal). */
.pp__kumpulan--baru .kad-game__rb{display:none}
.pp__kumpulan--baru .grid-game__sek{margin-bottom:2px}
/* Titik merah: tab ada item baharu yang belum dilihat */
.mod-tab button>span{position:relative}
.mod-tab__titik{position:absolute;top:-5px;right:-11px;width:10px;height:10px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 2px #fff;pointer-events:none;animation:mtTitik .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes mtTitik{from{transform:scale(0)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.mod-tab__titik{animation:none}}

/* Modal versi baru (owner 26 Okt): tengah skrin, gambar maskot sebagai latar (640x400 webp, 14 KB) */
.kemaskini{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:calc(var(--atas,0px) + 20px) 24px calc(var(--bawah,0px) + 20px);background:rgba(24,30,52,.55)}
.kemaskini__kad{width:min(330px,100%);border-radius:28px;overflow:hidden;background:#fff;text-align:center}
.kemaskini__gambar{aspect-ratio:8/5;background:#ff8a5c url(core/tema/gambar/kemaskini.webp) center/cover}
.kemaskini__isi{padding:20px 22px 14px}
.kemaskini h2{margin:0;font:700 24px/1.15 var(--f-papar);color:var(--dakwat)}
.kemaskini p{margin:8px 0 0;font:600 15px/1.45 var(--f-teks);color:var(--dakwat-2)}
.kemaskini .btn{width:100%;margin-top:18px}
.kemaskini__nanti{display:block;width:100%;min-height:44px;margin-top:6px;border:0;background:none;font:700 15px var(--f-teks);color:var(--dakwat-2)}

/* Owner 30 Okt: butang terapung Pulau Ceria. Bentuk pulau terapung (potongan SVG, outline & bayang ikut bentuk, bukan bulatan) */
.pulau-fab{position:fixed;right:max(8px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + var(--pulau-fab-bawah,10px));z-index:60;
  width:92px;height:96px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.pulau-fab[hidden]{display:none}
.pulau-fab__pulau{position:absolute;left:0;right:0;top:0;height:86px;display:block;animation:pulau-apung 3.4s ease-in-out infinite;transition:transform .12s;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1.5px 0 0 var(--dakwat)) drop-shadow(-1.5px 0 0 var(--dakwat)) drop-shadow(0 1.5px 0 var(--dakwat)) drop-shadow(0 -1.5px 0 var(--dakwat))}
.pulau-fab__pulau svg{width:100%;height:100%;display:block}
.pulau-fab__bayang{position:absolute;left:50%;bottom:2px;width:46px;height:9px;margin-left:-23px;border-radius:50%;background:radial-gradient(closest-side,rgba(31,42,68,.38),rgba(31,42,68,0));animation:pulau-bayang 3.4s ease-in-out infinite}
.pulau-fab__label{position:absolute;left:50%;top:60px;transform:translateX(-50%);padding:3px 9px 4px;border-radius:999px;background:var(--dakwat);color:#fff;font:700 12px/1 var(--f-papar);letter-spacing:.02em;animation:pulau-apung 3.4s ease-in-out infinite;pointer-events:none}
.pulau-fab:active .pulau-fab__pulau{transform:scale(.92)}
.pulau-fab:focus-visible{outline:none}.pulau-fab:focus-visible .pulau-fab__pulau{filter:drop-shadow(0 0 0 #fff) drop-shadow(3px 0 0 #4aa8ff) drop-shadow(-3px 0 0 #4aa8ff) drop-shadow(0 3px 0 #4aa8ff) drop-shadow(0 -3px 0 #4aa8ff)}
@keyframes pulau-apung{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes pulau-bayang{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.78);opacity:.65}}
@media (prefers-reduced-motion:reduce){.pulau-fab__pulau,.pulau-fab__label,.pulau-fab__bayang{animation:none}}

/* Pintu Pulau Ceria: pilih offline / online, izin ibu bapa, soalan matematik */
.pulau-pintu{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(31,42,68,.62);animation:pp-latar .2s ease-out}
.pulau-pintu.tutup{animation:pp-latar .2s ease-in reverse forwards;pointer-events:none}
@keyframes pp-latar{from{opacity:0}}
:where(.pulau-pintu) .pp{position:relative;width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;padding:22px 20px 20px;border-radius:28px;background:var(--kertas);box-shadow:0 2px 0 rgba(31,42,68,.08),0 24px 60px -16px rgba(31,42,68,.6);animation:pp-naik .32s cubic-bezier(.2,.9,.3,1.15)}
@keyframes pp-naik{from{transform:translateY(24px) scale(.97);opacity:0}}
.pp__tutup{position:absolute;right:12px;top:12px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:0;background:rgba(31,42,68,.06);color:var(--dakwat-2);cursor:pointer}
.pp__tutup svg{width:20px;height:20px}
:where(.pulau-pintu) .pp__isi{display:flex;flex-direction:column;align-items:stretch;gap:12px;text-align:center}
:where(.pulau-pintu) .pp__isi.masuk{animation:pp-isi .25s ease-out}
@keyframes pp-isi{from{opacity:0;transform:translateX(14px)}}
.pp__hero{width:132px;height:122px;margin:-4px auto -6px;filter:drop-shadow(0 10px 10px rgba(31,42,68,.18))}
.pp__hero svg{width:100%;height:100%;animation:pulau-apung 3.4s ease-in-out infinite}
.pp h2{margin:0;font:700 24px/1.15 var(--f-papar);color:var(--dakwat)}
.pp__sub{margin:-4px 0 2px;font:600 15px/1.4 var(--f-teks);color:var(--dakwat-2)}
.pp__pilihan{display:grid;gap:10px}
.pp-pilih{position:relative;overflow:hidden;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;min-height:76px;padding:12px 14px;border-radius:20px;border:2.5px solid var(--dakwat);background:#fff;color:var(--dakwat);text-align:left;cursor:pointer;box-shadow:0 4px 0 var(--dakwat);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.pp-pilih:active,.pp-pilih.tekan{transform:translateY(3px);box-shadow:0 1px 0 var(--dakwat)}
.pp-pilih__ikon{position:relative;z-index:1;width:52px;height:52px;border-radius:16px;display:grid;place-items:center}
.pp-pilih__ikon svg{width:28px;height:28px}
.pp-pilih--offline .pp-pilih__ikon{background:#e9f0fa;color:#55607a}
.pp-pilih--online .pp-pilih__ikon{background:#e4f7ef;color:var(--hijau-gelap)}
.pp-pilih__teks{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.pp-pilih__teks b{font:700 18px/1.1 var(--f-papar)}
.pp-pilih__teks small{font:600 13px/1.3 var(--f-teks);color:var(--dakwat-2)}
.pp-pilih__tag{position:relative;z-index:1;padding:6px 10px;border-radius:999px;background:var(--kertas-2);font:700 12px/1 var(--f-papar);color:var(--dakwat-2)}
.pp-pilih--online .pp-pilih__tag{background:var(--hijau);color:#fff}
/* isian tahan: menyapu dari kiri */
.pp-tahan::before{content:"";position:absolute;inset:0;width:calc(var(--p,0) * 100%);background:linear-gradient(90deg,rgba(34,176,125,.18),rgba(34,176,125,.32));pointer-events:none}
.pp-tahan.goyang{animation:pp-goyang .35s}
@keyframes pp-goyang{25%{translate:-6px 0}75%{translate:6px 0}}
.pp__nota{margin:0;font:600 13px/1.4 var(--f-teks);color:var(--dakwat-3)}
.pp__nota.amaran{color:var(--utama-gelap)}.pp__nota.ok{color:var(--hijau-gelap)}
.pp__lencana{align-self:center;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:999px;background:#e8f1ff;color:#2a6fd6;font:700 13px/1 var(--f-papar)}
.pp__lencana svg{width:20px;height:20px}
.pp__senarai{list-style:none;margin:0;padding:12px 14px;display:grid;gap:9px;border-radius:18px;background:#fff;text-align:left}
.pp__senarai li{position:relative;padding-left:26px;font:600 14px/1.4 var(--f-teks);color:var(--dakwat-2)}
.pp__senarai li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--hijau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.pp__senarai b{color:var(--dakwat)}
.pp__aksi{display:grid;grid-template-columns:1fr 1.25fr;gap:10px}
.pp-btn{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;padding:8px 12px;border-radius:18px;font:700 16px/1.1 var(--f-papar);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pp-btn small{font:600 11.5px/1 var(--f-teks);opacity:.85}
.pp-btn span,.pp-btn small{position:relative;z-index:1}
.pp-btn--kedua{background:#fff;color:var(--dakwat);border:2.5px solid #d9cdb9}
.pp-btn--utama{background:var(--hijau);color:#fff;border:2.5px solid var(--hijau-gelap);box-shadow:0 4px 0 var(--hijau-gelap);touch-action:none}
.pp-btn--utama.pp-tahan::before{background:rgba(255,255,255,.28)}
.pp-btn--utama.tekan{transform:translateY(3px);box-shadow:0 1px 0 var(--hijau-gelap)}
.pp__soalan{margin:4px 0 0;font:700 34px/1 var(--f-papar);color:var(--dakwat);letter-spacing:.02em}
.pp__jawapan{align-self:center;min-width:150px;padding:12px 18px;border-radius:16px;background:#fff;border:2.5px solid var(--dakwat);font:700 30px/1 var(--f-papar);color:var(--dakwat);min-height:58px}
.pp__jawapan.kosong{border-style:dashed;border-color:#cbbfa9}
.pp__jawapan.goyang{animation:pp-goyang .35s;border-color:var(--utama)}
.pp__pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pp__pad button{min-height:52px;border-radius:14px;border:0;background:#fff;color:var(--dakwat);font:700 22px/1 var(--f-papar);box-shadow:0 3px 0 #e5d9c6;cursor:pointer;display:grid;place-items:center}
.pp__pad button:active{transform:translateY(2px);box-shadow:0 1px 0 #e5d9c6}
.pp__pad button svg{width:24px;height:24px}
.pp__pad .ok{background:var(--hijau);color:#fff;box-shadow:0 3px 0 var(--hijau-gelap)}
@media (max-height:640px){:where(.pulau-pintu) .pp{padding:16px 14px 14px}.pp__hero{width:96px;height:88px}.pp__pad button{min-height:42px}.pp__soalan{font-size:28px}:where(.pulau-pintu) .pp__isi{gap:9px}}
/* ruang bawah supaya kad terakhir boleh diskrol keluar dari bawah butang terapung */
body.ada-pulau-fab #app{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}

/* pintu pulau, landskap rendah (telefon melintang): dua lajur supaya semua butang nampak tanpa skrol */
@media (orientation:landscape) and (max-height:520px){
  .pulau-pintu{padding:10px}
  :where(.pulau-pintu) .pp{width:min(780px,100%);padding:16px 18px;max-height:calc(100dvh - 20px)}
  :where(.pulau-pintu) .pp__isi{display:grid;grid-template-columns:1.25fr 1fr;column-gap:20px;row-gap:8px;text-align:left;align-items:start}
  :where(.pulau-pintu) .pp__isi>*{grid-column:1}
  .pp__isi>.pp__lencana{justify-self:start}
  .pp__isi--izin>.pp__aksi{grid-column:2;grid-row:1/span 4;align-self:center;grid-template-columns:1fr;margin-top:30px}
  .pp__isi--izin .pp__senarai{padding:8px 12px;gap:5px}.pp__isi--izin .pp__senarai li{font-size:13px}
  .pp__isi--math{text-align:center}.pp__isi--math>.pp__lencana{justify-self:center}
  .pp__isi--math>.pp__pad{grid-column:2;grid-row:1/span 5;align-self:center;margin-top:30px}
  .pp__isi--math .pp__pad button{min-height:44px}
  .pp__isi--math>.pp__jawapan{justify-self:center;width:200px}
  .pp__isi--pilih{grid-template-columns:150px 1fr}
  .pp__isi--pilih>.pp__hero{grid-row:1/span 4;width:140px;height:130px;margin:0;align-self:center}
  .pp__isi--pilih>*:not(.pp__hero){grid-column:2}
  .pp__isi--pilih .pp__pilihan{grid-template-columns:repeat(3,1fr)}
  .pp__isi--bilik{grid-template-columns:120px 1fr}
  .pp__isi--bilik>.pp__hero{grid-row:1/span 4;width:110px;height:100px;margin:0;align-self:center}
  .pp__isi--bilik>*:not(.pp__hero){grid-column:2}
  .pp__isi--pilih .pp-pilih{grid-template-columns:44px 1fr;grid-template-rows:auto auto;min-height:0}
  .pp__isi--pilih .pp-pilih__tag{grid-column:1/span 2;justify-self:start}
  .pp__isi--pilih .pp-pilih__ikon{width:44px;height:44px}
  .pp h2{font-size:21px;padding-right:44px}
}

/* pintu Pulau: main dengan kawan (owner 30 Okt) */
.pp-pilih--kawan .pp-pilih__ikon{background:#fff2d9;color:#b8730a}
.pp-pilih--kawan .pp-pilih__tag{background:#f5a524;color:#fff}
.pp-pilih--baru{grid-template-columns:52px 1fr}
.pp-pilih--baru .pp-pilih__ikon{background:#e4f7ef;color:var(--hijau-gelap)}
.pp__hero--kecil{width:96px;height:88px}
.pp-kod{display:grid;gap:8px;text-align:left}
.pp-kod__label{font:700 15px/1.2 var(--f-papar);color:var(--dakwat)}
.pp-kod__baris{display:grid;grid-template-columns:1fr auto;gap:8px}
.pp-kod input{min-width:0;height:54px;padding:0 14px;border-radius:16px;border:2.5px solid var(--dakwat);background:#fff;font:700 24px/1 var(--f-papar);letter-spacing:6px;text-transform:uppercase;color:var(--dakwat)}
.pp-kod input::placeholder{letter-spacing:4px;color:#b3bccb}
.pp-kod input:focus{outline:3px solid #2f9be8;outline-offset:2px}
.pp-kod .pp-btn{height:54px;padding:0 18px}
.pp-kod .pp-btn:disabled{opacity:.45;box-shadow:none}

/* Pintu Pulau Ceria ikut tema app (owner 30 Okt: buang bayang). Sama dengan .modal: latar kabur, kad kertas,
 * pilihan kad putih rata dengan sempadan krim (tiada sempadan dakwat gelap, tiada bayang bawah). */
.pulau-pintu{background:rgba(24,30,52,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:where(.pulau-pintu) .pp{border-radius:32px;box-shadow:none}
.pp__tutup{border-radius:14px;background:#fff;color:var(--dakwat)}
.pp__hero{filter:none}
.pp-pilih{border:2px solid #eadfcd;box-shadow:none}
.pp-pilih:active,.pp-pilih.tekan{transform:scale(.98);box-shadow:none;border-color:#d9cdb9}
.pp-btn--kedua{border:2px solid #eadfcd}
.pp-btn--utama{border:0;box-shadow:none}
.pp-btn--utama.tekan{transform:scale(.98);box-shadow:none}
.pp-kod input{border:2px solid #eadfcd}
.pp-kod input:focus{outline:0;border-color:#2f9be8}

/* tirai pindah pulau <-> game 3D: rupa sama dengan skrin muat hos, menutup laman utama */
.hos-tirai{position:fixed;inset:0;z-index:70;display:grid;place-items:center;align-content:center;gap:22px;background:var(--warna,#ff6b4a);transition:opacity .28s}
.hos-tirai img{width:min(42vmin,200px);filter:drop-shadow(0 18px 18px rgba(0,0,0,.28))}
.hos-tirai--pergi{opacity:0;pointer-events:none}

/* Owner 31 Okt: jubin Pulau Ceria di atas grid tab Game (ganti butang terapung). Ikut tema kad dunia (.dunia-kad): kecerunan --sw,
   bulatan hiasan, Fredoka 700, butang pil putih seperti Cabaran. Tanpa bayang (owner). */
.pulau-jubin{--sw:#1e9be6;position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:140px;margin:0 0 clamp(12px,1.8vw,18px);padding:16px 16px 14px;border:0;border-radius:28px;text-align:left;color:#fff;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,color-mix(in srgb,var(--sw) 72%,#fff),var(--sw) 70%);box-shadow:none;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.pulau-jubin::before{content:"";position:absolute;right:-12%;top:-60%;width:46%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.pulau-jubin:active{transform:scale(.98)}
.pulau-jubin:focus-visible{outline:3px solid var(--dakwat);outline-offset:3px}
.pulau-jubin__teks{position:relative;z-index:1;display:grid;gap:4px;min-width:0}
.pulau-jubin__teks b{font:700 clamp(19px,2vw,25px)/1.05 var(--f-papar)}
.pulau-jubin__teks small{font-size:13px;font-weight:700;opacity:.92}
.pulau-jubin__teks em{justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin-top:8px;padding:0 18px;border-radius:999px;background:#fff;color:color-mix(in srgb,var(--sw) 80%,#000);font:700 16px/1 var(--f-papar);font-style:normal}
.pulau-jubin__seni{position:relative;z-index:1;flex:0 0 auto;width:150px;height:140px;margin:-16px -8px -16px 0;animation:pulau-apung 3.4s ease-in-out infinite}
.pulau-jubin__seni svg{width:100%;height:100%;display:block}
@media (max-width:560px){.pulau-jubin__teks b{font-size:20px}.pulau-jubin__teks em{padding:0 14px}}
@media (orientation:landscape) and (max-height:600px){.pulau-jubin{min-height:96px;padding:10px 14px}.pulau-jubin__teks em{min-height:36px;margin-top:4px;font-size:14px}.pulau-jubin__seni{width:110px;height:100px}}
@media (prefers-reduced-motion:reduce){.pulau-jubin__seni{animation:none}}

/* Owner 31 Okt (pilihan B): butang bulat di kanan kad. TAHAN = cincin terisi ikut --p (pasangTahan),
 * TEKAN = bulat kelabu. Butang izin ibu bapa guna bulatan yang sama di kiri. */
@property --p{syntax:"<number>";inherits:true;initial-value:0}
.pp__isi--pilih .pp-pilih{grid-template-columns:48px 1fr 64px;grid-template-rows:auto;row-gap:0;align-items:center;min-height:84px}
.pp__isi--pilih .pp-pilih__ikon{grid-row:auto;width:48px;height:48px}
.pp-pilih.pp-tahan::before{display:none}
.pp-pilih--online{--c:#1fa774}.pp-pilih--kawan{--c:#f29a13}
.pp-bulat{position:relative;z-index:1;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--c) calc(var(--p,0) * 360deg),color-mix(in srgb,var(--c) 22%,#fff) 0)}
.pp-bulat::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--c);transition:background .15s}
.pp-bulat>span{position:relative;display:grid;justify-items:center;gap:2px;color:#fff}
.pp-bulat svg{width:22px;height:22px}
.pp-bulat b{font:800 10px/1 var(--f-papar);letter-spacing:.04em}
.pp-bulat--tekan{background:#e9f0fa}.pp-bulat--tekan::before{background:#e9f0fa}.pp-bulat--tekan>span{color:#55607a}.pp-bulat--tekan svg{width:20px;height:20px}
.pp-pilih:not(.tekan):not([data-fasa="awal"]) .pp-bulat:not(.pp-bulat--tekan) svg{animation:pp-jari 2.6s ease-in-out infinite}
@keyframes pp-jari{0%,55%,100%{transform:none}12%,40%{transform:translateY(2px) scale(.86)}}
.pp-pilih[data-fasa="tahan"] .pp-bulat::before{background:color-mix(in srgb,var(--c) 80%,#000)}
.pp-pilih[data-fasa="awal"] .pp-bulat{--c:#e8445a}
/* butang izin ibu bapa */
.pp-btn--bulat{--c:var(--hijau-gelap);flex-direction:row;justify-content:flex-start;gap:12px;min-height:66px;padding:7px 16px 7px 7px}
.pp-btn--bulat.pp-tahan::before{display:none}
.pp-bulat--putih{width:52px;height:52px;background:conic-gradient(#fff calc(var(--p,0) * 360deg),rgba(255,255,255,.3) 0)}
.pp-bulat--putih::before{inset:4px;background:var(--hijau)}
.pp-btn__teks{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
.pp-btn--bulat:not(.tekan):not([data-fasa="awal"]) .pp-bulat svg{animation:pp-jari 2.6s ease-in-out infinite}
.pp-btn--bulat[data-fasa="awal"]{background:#e8445a}.pp-btn--bulat[data-fasa="awal"] .pp-bulat--putih::before{background:#e8445a}
@media (prefers-reduced-motion:reduce){.pp-bulat svg{animation:none!important}}
/* izin: butang Benarkan lebar penuh di atas, Kekal offline di bawah (tidak sesak) */
.pp__isi--izin .pp__aksi{grid-template-columns:1fr}
.pp__isi--izin .pp-btn--bulat{order:-1;justify-content:center;font-size:18px}
.pp__isi--izin .pp-btn--kedua{min-height:50px}

/* jubin Pulau ikut status muat turun (owner 31 Okt) */
.pulau-jubin__teks em{position:relative;overflow:hidden;gap:7px;isolation:isolate}
.pulau-jubin__teks em svg{width:18px;height:18px;flex:0 0 auto}
.pulau-jubin__teks em b{font:inherit}
.pulau-jubin__isi{position:absolute;inset:0;z-index:-1;width:calc(var(--p,0) * 1%);background:color-mix(in srgb,var(--sw) 22%,#fff);transition:width .25s linear}
.pulau-jubin[data-st="sedang"] .pulau-jubin__teks em{min-width:190px;font-variant-numeric:tabular-nums}
.pulau-jubin[data-st="muat"] .pulau-jubin__seni,.pulau-jubin[data-st="sedang"] .pulau-jubin__seni{filter:saturate(.75)}
.pulau-jubin__teks em{white-space:nowrap}
.pulau-jubin[data-st="muat"] .pulau-jubin__teks em,.pulau-jubin[data-st="sedang"] .pulau-jubin__teks em{font-size:15px;padding:0 16px}
.pulau-jubin__isi{background:color-mix(in srgb,var(--sw) 38%,#fff)}
.pulau-jubin__teks{z-index:2}
@media (max-width:400px){.pulau-jubin[data-st="muat"] .pulau-jubin__seni,.pulau-jubin[data-st="sedang"] .pulau-jubin__seni{width:118px;margin-right:-22px}}