/* Kilang Nombor (Matematik Tambahan T4, Bab 1 Fungsi). Warna dan fon sama dengan Babak; latar dunia matematik. */
/* ===== Kilang Nombor: warna Babak, dunia matematik ===== */
:root{
  color-scheme:light;
  --ink:#1B2A5C; --ink2:#4D5B8C;
  --laut:#2BA9E8; --laut-d:#1B8FD2;
  --emas:#FFC933; --emas-d:#E8971A; --emas-t:#FFF3C4;
  --merah:#F94F55; --merah-d:#C9323F;
  --teal:#21BFAE; --teal-d:#14917F; --teal-teks:#0E7C6C;
  --ungu:#7B57E0; --ungu-d:#5537A8;
  --hijau:#1A9A5C; --betul-bg:#E5FAEF; --betul-teks:#0F6B40;
  --salah-bg:#FFE9EA; --salah-teks:#A3222E;
  --kertas:#F3F7FF; --garis:#DDE5F5; --grid:#D2DEF3;
  --lip:0 5px 0 rgba(27,42,92,.2);
  --bayang:0 5px 0 rgba(27,42,92,.22),0 14px 26px rgba(27,42,92,.18);
  --f:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kertas);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.4;font-weight:700;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px}
h1,h2,h3,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:0;background:none;padding:0}
button[disabled]{cursor:default}
svg{display:block}
:focus-visible{outline:3px solid #0B57D0;outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
.angka{font-variant-numeric:tabular-nums}
sup{font-size:.66em;line-height:0;vertical-align:baseline;position:relative;top:-.55em}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:-.5em;margin:0 .12em;line-height:1.05;font-size:.92em;text-align:center}
.frac-atas{border-bottom:2px solid currentColor;padding:0 .25em .06em}
.frac-bawah{padding:.06em .25em 0}

@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes goncang{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes pusing{to{transform:rotate(360deg)}}
@keyframes denyut{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes apung{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-38px);opacity:0}}
@keyframes tabur{0%{transform:translateY(-10vh) rotate(0)}100%{transform:translateY(110vh) rotate(540deg)}}
@keyframes naik{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}

#app{max-width:520px;margin-inline:auto;padding:0 16px calc(28px + env(safe-area-inset-bottom,0px));position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
/* ---- latar kilang ---- */
.latar{position:relative;height:92px;margin:0 -16px -6px;pointer-events:none;overflow:hidden}
.latar svg{width:100%;height:100%}
#app > *{position:relative;z-index:1}

/* ---- bar atas ---- */
.atas{display:flex;align-items:center;gap:10px;padding:12px 0 8px}
.jenama{font-size:1.25rem;font-weight:900;letter-spacing:-.02em;color:inherit;text-decoration:none;display:block}
.jenama i{color:var(--teal);font-style:normal}
.jenama small{display:block;font-size:.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-top:-2px}
.stesen-bar{margin-left:auto;display:flex;gap:5px;align-items:center}
.stesen-bar i{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--garis);display:block}
.stesen-bar i.siap{background:var(--emas);box-shadow:inset 0 0 0 2px var(--emas-d)}
.stesen-bar i.kini{background:var(--laut);box-shadow:inset 0 0 0 2px var(--laut-d);animation:denyut 1.2s infinite}
.bulat{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:var(--lip),inset 0 0 0 2px var(--garis);display:grid;place-items:center;flex:none}
.bulat svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bulat[aria-pressed="false"] .gelombang{display:none}
.bulat[aria-pressed="true"] .palang{display:none}

/* ---- kad arahan (maskot + gelembung) ---- */
.arahan{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:end;margin-top:6px}
.arahan .watak{width:64px;height:auto}
.gelembung{position:relative;background:#fff;border-radius:18px;padding:12px 14px;box-shadow:var(--lip),inset 0 0 0 2px var(--garis);font-size:1rem;line-height:1.35;font-weight:800;min-height:56px;animation:naik .25s ease-out}
.gelembung::before{content:"";position:absolute;left:-9px;bottom:18px;border:9px solid transparent;border-right-color:#fff;border-left:0}
.gelembung.betul{background:var(--betul-bg);color:var(--betul-teks);box-shadow:var(--lip),inset 0 0 0 2px #9FE0BF}
.gelembung.betul::before{border-right-color:var(--betul-bg)}
.gelembung.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:var(--lip),inset 0 0 0 2px #F7B5BA}
.gelembung.salah::before{border-right-color:var(--salah-bg)}
.gelembung b{color:var(--laut-d)}
.gelembung.betul b{color:var(--betul-teks)}
.tajuk-stesen{font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin:14px 0 4px;display:flex;align-items:center;gap:8px}
.tajuk-stesen span{background:#fff;border-radius:999px;padding:3px 10px;box-shadow:inset 0 0 0 2px var(--garis)}

/* ---- mesin ---- */
.kilang{display:grid;gap:10px;margin-top:10px}
.mesin-wrap{position:relative;background:#fff;border-radius:24px;padding:14px 10px 12px;box-shadow:var(--bayang)}
.mesin-wrap.rahsia{background:#F4EFFF}
.mesin-nama{position:absolute;top:-11px;left:16px;background:var(--ink);color:#fff;font-size:.6875rem;font-weight:900;letter-spacing:.06em;padding:2px 10px;border-radius:999px}
.mesin-wrap.rahsia .mesin-nama{background:var(--ungu)}
.mesin-wrap.undur .mesin-nama{background:var(--merah)}
.mesin{position:relative;display:grid;grid-template-columns:56px 1fr 56px;grid-template-rows:auto 54px;align-items:start;gap:4px 6px}
.corong,.saluran{position:relative;grid-row:1 / 3;height:100%;display:grid;justify-items:center;align-content:end;gap:4px;padding-bottom:4px}
.corong{grid-column:1}.saluran{grid-column:3}
.badan{grid-row:1;grid-column:2}
.trek{grid-row:2;grid-column:2;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 8px;align-items:center;height:100%}
.trek::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:0;border-top:3px dashed var(--garis)}
.trek i{position:relative;justify-self:center;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--garis)}
.corong .label,.saluran .label{font-size:.625rem;font-weight:900;letter-spacing:.08em;color:var(--ink2)}
.lubang{width:46px;height:46px;border-radius:14px;background:#EEF2FA;box-shadow:inset 0 0 0 2px var(--garis)}
.badan{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 8px;border-radius:20px;background:var(--laut);box-shadow:0 6px 0 var(--laut-d)}
.slot .op.aktif{box-shadow:0 0 0 4px rgba(255,201,51,.75),0 3px 0 rgba(0,0,0,.18);transform:translateY(-2px)}
.mesin-wrap.rahsia .badan{background:var(--ungu);box-shadow:0 6px 0 var(--ungu-d)}
.mesin-wrap.undur .badan{background:var(--merah);box-shadow:0 6px 0 var(--merah-d)}
.badan::before{content:"";position:absolute;left:50%;top:-8px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:#fff;opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8a4 4 0 1 0 0 8a4 4 0 0 0 0-8zm0-6l1.6 2.6 3-.6 1 2.9 2.9 1-.6 3L22 12l-2.1 2.1.6 3-2.9 1-1 2.9-3-.6L12 22l-1.6-2.6-3 .6-1-2.9-2.9-1 .6-3L2 12l2.1-2.1-.6-3 2.9-1 1-2.9 3 .6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8a4 4 0 1 0 0 8a4 4 0 0 0 0-8zm0-6l1.6 2.6 3-.6 1 2.9 2.9 1-.6 3L22 12l-2.1 2.1.6 3-2.9 1-1 2.9-3-.6L12 22l-1.6-2.6-3 .6-1-2.9-2.9-1 .6-3L2 12l2.1-2.1-.6-3 2.9-1 1-2.9 3 .6z'/%3E%3C/svg%3E") center/contain no-repeat}
.mesin-wrap.proses .badan::before{animation:pusing 1.6s linear infinite}
.slot{display:grid;grid-template-rows:auto auto auto;justify-items:center;gap:2px;background:rgba(255,255,255,.16);border-radius:14px;padding:4px 4px 6px;min-height:78px}
.slot .op{min-width:56px;height:36px;padding:0 8px;border-radius:10px;background:#fff;color:var(--ink);display:grid;place-items:center;font-weight:900;font-size:1.125rem;box-shadow:0 3px 0 rgba(0,0,0,.18);white-space:nowrap}
.slot .op.rahsia{background:#fff;color:var(--ungu)}
.slot .dail{width:36px;height:22px;border-radius:8px;background:rgba(255,255,255,.28);color:#fff;display:grid;place-items:center}
.slot .dail svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.slot .dail:active{background:rgba(255,255,255,.5)}
.slot.kunci .dail{visibility:hidden}
.slot .op.undur-btn{cursor:pointer;background:var(--emas);box-shadow:0 4px 0 var(--emas-d);transition:transform .08s}
.slot .op.undur-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--emas-d)}
.slot .op.undur-btn[disabled]{background:#fff;opacity:.55;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.slot .op.undur-btn.siap{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 3px 0 #9FE0BF}
.slot .label-slot{font-size:.625rem;font-weight:900;letter-spacing:.06em;color:#fff;opacity:.9}
.cip{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:13px;background:var(--emas);color:var(--ink);display:grid;place-items:center;font-weight:900;font-size:1.125rem;box-shadow:0 4px 0 var(--emas-d);z-index:3;transition:transform .85s cubic-bezier(.45,.05,.35,1);will-change:transform;white-space:nowrap;padding:0 4px;min-width:44px}
.cip .nilai{display:block}
.cip.masuk-anim .nilai{animation:pop .35s ease-out}
.cip.getar{animation:getar .5s linear}
.cip .nilai.tukar{animation:tukar .35s ease-out}
.cip.keluar{background:var(--teal);color:#fff;box-shadow:0 4px 0 var(--teal-d)}
.cip.salah{background:var(--merah);color:#fff;box-shadow:0 4px 0 var(--merah-d)}
.cop{position:absolute;left:0;top:0;z-index:4;background:var(--emas-t);color:var(--ink);font-weight:900;font-size:.8125rem;padding:2px 9px;border-radius:999px;box-shadow:0 2px 0 var(--emas-d),inset 0 0 0 2px var(--emas);transition:transform .45s cubic-bezier(.3,.1,.3,1);pointer-events:none;white-space:nowrap}
.cop.lekat{animation:lekat .45s ease-out forwards}
@keyframes getar{0%,100%{margin-left:0}10%{margin-left:-4px}20%{margin-left:4px}30%{margin-left:-4px}40%{margin-left:4px}50%{margin-left:-3px}60%{margin-left:3px}70%{margin-left:-2px}80%{margin-left:2px}90%{margin-left:-1px}}
@keyframes tukar{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1)}}
@keyframes lekat{0%{opacity:1}70%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cip{transition-duration:.01s!important}.cip.getar,.cip .nilai.tukar,.cop,.cip.masuk-anim .nilai{animation:none!important}}
.dulang{display:flex;flex-wrap:wrap;gap:6px;min-height:34px;margin-top:8px}
.dulang span{background:#EEF2FA;border-radius:999px;padding:5px 12px;font-weight:900;font-size:.875rem;box-shadow:inset 0 0 0 2px var(--garis);animation:pop .3s ease-out}
.dulang span.kena{background:var(--betul-bg);color:var(--betul-teks);box-shadow:inset 0 0 0 2px #9FE0BF}
.dulang span.lari{background:var(--salah-bg);color:var(--salah-teks);box-shadow:inset 0 0 0 2px #F7B5BA}
.tag{position:absolute;font-size:.6875rem;font-weight:900;padding:2px 8px;border-radius:999px;color:#fff;background:var(--ink);animation:pop .3s ease-out;z-index:4}

/* ---- plat nama (tatatanda) ---- */
.plat{background:#fff;border-radius:18px;padding:10px 14px;box-shadow:var(--lip),inset 0 0 0 2px var(--garis);display:grid;gap:4px;animation:naik .3s ease-out}
.plat .label{font-size:.6875rem;font-weight:900;letter-spacing:.1em;color:var(--ink2);text-transform:uppercase}
.plat .rumus{font-size:1.25rem;font-weight:900}
.plat .kira{font-size:1rem;font-weight:800;color:var(--laut-d);min-height:1.4em}
.plat .kira.betul{color:var(--betul-teks)}
.plat .kira.salah{color:var(--salah-teks)}

/* ---- sasaran ---- */
.sasaran{display:flex;flex-wrap:wrap;gap:8px}
.sasaran .sas{background:#fff;border-radius:14px;padding:8px 12px;font-weight:900;box-shadow:var(--lip),inset 0 0 0 2px var(--garis);display:flex;align-items:center;gap:8px;font-size:1.0625rem}
.sasaran .sas i{width:22px;height:22px;border-radius:50%;background:#EEF2FA;display:grid;place-items:center;font-style:normal;font-size:.75rem;color:var(--ink2)}
.sasaran .sas.kena{background:var(--betul-bg);color:var(--betul-teks);box-shadow:var(--lip),inset 0 0 0 2px #9FE0BF}
.sasaran .sas.kena i{background:var(--hijau);color:#fff}
.sasaran .sas.lari{background:var(--salah-bg);color:var(--salah-teks);box-shadow:var(--lip),inset 0 0 0 2px #F7B5BA}
.sasaran .sas.lari i{background:var(--merah);color:#fff}

/* ---- token nombor ---- */
.token-baris{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.token{height:46px;border-radius:14px;background:#fff;font-weight:900;font-size:1.125rem;box-shadow:var(--lip),inset 0 0 0 2px var(--garis);display:grid;place-items:center;transition:transform .08s,box-shadow .08s}
.token:active:not([disabled]){transform:translateY(3px);box-shadow:0 2px 0 rgba(27,42,92,.2),inset 0 0 0 2px var(--garis)}
.token[disabled]{opacity:.45}
.token.sorot{background:var(--emas-t);box-shadow:var(--lip),inset 0 0 0 2px var(--emas)}
.token-label{font-size:.75rem;font-weight:800;color:var(--ink2);margin-bottom:6px}

/* ---- algebra ---- */
.algebra{background:#fff;border-radius:18px;padding:10px 14px;box-shadow:var(--lip),inset 0 0 0 2px var(--garis);display:grid;gap:3px}
.algebra .label{font-size:.6875rem;font-weight:900;letter-spacing:.1em;color:var(--ink2);text-transform:uppercase}
.algebra .baris{font-size:1.125rem;font-weight:900;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;animation:naik .25s ease-out}
.algebra .baris small{font-size:.75rem;font-weight:800;color:var(--ink2);white-space:nowrap}
.algebra .baris.pudar{opacity:.45}

/* ---- pad agak ---- */
.agak{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:#fff;border-radius:16px;padding:8px 8px 8px 14px;box-shadow:var(--lip),inset 0 0 0 2px var(--garis)}
.agak .papar{font-size:1.25rem;font-weight:900;min-height:1.4em}
.agak .papar.kosong{color:var(--ink2);font-size:.9375rem;font-weight:800}
.pad-mini{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:6px}
.pad-mini button{height:40px;border-radius:12px;background:#fff;font-weight:900;font-size:1rem;box-shadow:var(--lip),inset 0 0 0 2px var(--garis);display:grid;place-items:center}
.pad-mini button.fn{background:#EEF2FA;color:var(--ink2)}

/* ---- butang ---- */
.btn{min-height:50px;padding:0 20px;border-radius:16px;font-weight:900;font-size:1.0625rem;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .08s,box-shadow .08s;width:100%}
.btn.utama{background:var(--emas);color:var(--ink);box-shadow:0 6px 0 var(--emas-d)}
.btn.utama:active{transform:translateY(4px);box-shadow:0 2px 0 var(--emas-d)}
.btn.kedua{background:#fff;color:var(--ink);box-shadow:var(--lip),inset 0 0 0 2px var(--garis)}
.btn.kedua:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(27,42,92,.2),inset 0 0 0 2px var(--garis)}
.btn.teal{background:var(--teal);color:#fff;box-shadow:0 6px 0 var(--teal-d)}
.btn.teal:active{transform:translateY(4px);box-shadow:0 2px 0 var(--teal-d)}
.btn[disabled]{opacity:.5;transform:none!important}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.baris-btn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.baris-btn .satu{grid-column:1 / -1}
.pautan{font-weight:800;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;font-size:.875rem;background:none}
.kaki{margin-top:auto;padding-top:22px;font-size:.75rem;font-weight:700;color:var(--ink2);text-align:center;line-height:1.4;display:grid;gap:8px}
.kaki p{margin:0}
.kaki-pautan{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pil{min-height:34px;padding:0 14px;border-radius:17px;background:#fff;color:var(--ink);font-size:.8125rem;font-weight:800;display:inline-flex;align-items:center;gap:6px;box-shadow:0 3px 0 rgba(27,42,92,.18),inset 0 0 0 2px var(--garis);text-decoration:none}
.pil:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(27,42,92,.18),inset 0 0 0 2px var(--garis)}
a.bulat{color:var(--ink);text-decoration:none}
a.btn{text-decoration:none}
/* ---- dialog (feedback, privasi) ---- */
.tirai{position:fixed;inset:0;z-index:90;display:flex;padding:16px;background:rgba(14,24,64,.62);overflow:auto;overscroll-behavior:contain}
body.ada-dialog{overflow:hidden}
.dialog{width:min(100%,540px);margin:auto;background:#fff;border-radius:26px;padding:22px 20px 20px;box-shadow:0 24px 60px rgba(14,24,64,.45);display:grid;gap:12px;animation:naik .25s ease-out}
.dialog h2{font-size:1.5rem;color:var(--ink);margin:0}
.dialog > p{font-weight:700;color:var(--ink2);line-height:1.5;font-size:.9375rem}
.dialog .baris-btn{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px}
.dialog .btn{width:auto;min-height:44px;padding:0 18px;font-size:1rem}
.privasi-suis{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;background:#F0F5FF;border-radius:16px;padding:12px 14px}
.privasi-suis .privasi-status{color:var(--ink2);font-size:.9375rem;font-weight:700;margin:0}
.privasi-suis .privasi-status b{color:var(--ink);font-weight:900}
.fb{display:grid;gap:16px}
.fb-kump{display:grid;gap:8px;min-width:0}
.fb-label{font-weight:900;font-size:1rem;color:var(--ink);margin:0}
.fb-label small{font-weight:700;font-size:.8125rem;color:var(--ink2)}
.fb-cip-baris{display:flex;flex-wrap:wrap;gap:8px}
.fb-cip{min-height:42px;padding:6px 14px;border-radius:21px;background:#fff;font-weight:800;color:var(--ink);box-shadow:inset 0 0 0 2px #C5D0EA;transition:background-color .12s ease,box-shadow .12s ease}
.fb-cip[aria-checked="true"]{background:var(--emas);box-shadow:inset 0 0 0 2px var(--emas-d),inset 0 -4px 0 var(--emas-d)}
.fb-btg-baris{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fb-btg-kump{display:flex;gap:2px}
.fb-btg{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.fb-btg svg{width:32px;height:32px;opacity:.28;filter:grayscale(1);transition:opacity .12s ease,filter .12s ease,transform .12s ease}
.fb-btg.isi svg{opacity:1;filter:none}
.fb-btg:active svg{transform:scale(.9)}
.fb-btg-teks{font-weight:800;color:var(--ink2);font-size:.9375rem;min-height:1.4em}
.fb textarea,.fb input[type="text"]{width:100%;font:inherit;font-size:1rem;font-weight:600;color:var(--ink);padding:12px 14px;border-radius:16px;border:2px solid #C5D0EA;background:#fff;line-height:1.5}
.fb textarea{min-height:120px;resize:vertical}
.fb textarea:focus,.fb input[type="text"]:focus{outline:none;border-color:#0B57D0;box-shadow:0 0 0 3px rgba(11,87,208,.18)}
.fb ::placeholder{color:#8A96B8;font-weight:500}
.fb-kira{justify-self:end;font-size:.75rem;font-weight:800;color:var(--ink2);margin-top:-4px}
.fb-dua{display:grid;gap:14px}
@media (min-width:480px){.fb-dua{grid-template-columns:1fr 1fr}}
.fb-nota{font-size:.8125rem;font-weight:700;color:var(--ink2);margin:-6px 0 0}
.fb-madu{position:absolute;left:-9999px;top:auto;width:1px;height:1px;opacity:0}
.fb-butir{background:#F0F5FF;border-radius:16px;padding:10px 14px;font-size:.8125rem;font-weight:700;color:var(--ink2)}
.fb-butir summary{cursor:pointer;font-weight:900;color:var(--ink);padding:2px 0}
.fb-butir ul{margin:8px 0 6px;padding-left:18px;display:grid;gap:6px;list-style:disc}
.fb-butir p{margin:6px 0 0}
.fb-butir code{display:block;margin-top:4px;padding:8px 10px;border-radius:10px;background:#fff;font:600 .75rem/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.fb-status{min-height:1.4em;font-weight:800;font-size:.9375rem;color:var(--ink2);margin:0}
.fb-status.salah{color:var(--salah-teks);background:var(--salah-bg);border-radius:12px;padding:8px 12px}
.fb .btn.utama{width:100%;min-height:52px;font-size:1.0625rem}
.fb-terima{display:grid;justify-items:center;text-align:center;gap:12px}
.fb-terima .watak{width:120px;height:auto}
.fb-terima h2{font-size:1.5rem}
.fb-terima p{max-width:44ch;font-weight:700;color:var(--ink2);margin:0}
.ringkas .baris-btn.dua{grid-template-columns:1fr 1fr}

/* ---- skrin ringkasan ---- */
.ringkas{display:grid;gap:10px;margin-top:10px}
.ringkas .kad{background:#fff;border-radius:18px;padding:12px 14px;box-shadow:var(--lip),inset 0 0 0 2px var(--garis);display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;animation:naik .3s ease-out}
.ringkas .kad i{width:34px;height:34px;border-radius:50%;background:var(--betul-bg);color:var(--betul-teks);display:grid;place-items:center;font-style:normal;font-weight:900}
.ringkas .kad b{display:block;font-size:1rem}
.ringkas .kad span{font-size:.875rem;font-weight:700;color:var(--ink2)}
.tabur{position:fixed;inset:0;pointer-events:none;z-index:50}
.tabur i{position:absolute;top:0;width:10px;height:14px;border-radius:3px;animation:tabur 1.6s linear forwards}
.apung{position:absolute;font-weight:900;color:var(--hijau);animation:apung .8s ease-out forwards;pointer-events:none;z-index:5}

@media (min-width:700px){
  #app{max-width:560px}
  .arahan .watak{width:74px}
  .gelembung{font-size:1.0625rem}
}

/* ---- petua (i) ---- */
.tajuk-stesen .tajuk-teks{flex:1}
.tip-btn{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--laut-d);font-weight:900;font-size:1rem;font-style:italic;font-family:Georgia,"Times New Roman",serif;display:grid;place-items:center;box-shadow:var(--lip),inset 0 0 0 2px var(--laut);flex:none;transition:transform .08s}
.tip-btn:active{transform:translateY(2px)}
.tip-btn.buka{background:var(--laut);color:#fff}
.tip-panel{background:#fff;border-radius:18px;padding:12px 14px;box-shadow:var(--lip),inset 0 0 0 2px var(--laut);margin-top:10px;font-size:.9375rem;line-height:1.4;font-weight:700;animation:naik .25s ease-out}
.tip-panel .tip-tajuk{font-size:.6875rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--laut-d);margin-bottom:4px}
.tip-panel b{color:var(--laut-d)}
/* ---- cip betul/salah, agakan ---- */
.cip.betul{background:var(--hijau);color:#fff;box-shadow:0 4px 0 #0F6139}
.agakan-cip{justify-self:start;font-size:.8125rem;font-weight:900;padding:3px 10px;border-radius:999px;animation:pop .3s ease-out}
.agakan-cip.betul{background:var(--betul-bg);color:var(--betul-teks);box-shadow:inset 0 0 0 2px #9FE0BF}
.agakan-cip.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:inset 0 0 0 2px #F7B5BA}
/* ---- persamaan tarik-tarik ---- */
.petua-tarik{font-size:.8125rem;font-weight:800;color:var(--ink2);text-align:center;min-height:1.2em}
.persamaan{display:flex;justify-content:center;align-items:center;gap:6px;background:#fff;border-radius:22px;padding:14px 8px;box-shadow:var(--bayang);min-height:84px;transition:opacity .3s}
.persamaan.tukar-sisi{opacity:.25}
.sisi{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;min-height:56px;min-width:60px;border-radius:14px;padding:4px;transition:background .2s,box-shadow .2s}
.sisi.sasar{background:var(--emas-t);box-shadow:inset 0 0 0 2px var(--emas)}
.sama{font-size:1.5rem;font-weight:900;color:var(--ink2);padding:0 4px}
.jubin{min-width:46px;height:48px;padding:0 12px;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:1.125rem;user-select:none;-webkit-user-select:none;touch-action:none;white-space:nowrap;transition:transform .2s,box-shadow .2s,opacity .2s;position:relative}
.jubin.x{background:var(--ungu);color:#fff;box-shadow:0 4px 0 var(--ungu-d);font-style:italic;font-family:Georgia,"Times New Roman",serif;font-size:1.375rem}
.jubin.op{background:var(--emas);color:var(--ink);box-shadow:0 4px 0 var(--emas-d)}
.jubin.num{background:var(--teal);color:#fff;box-shadow:0 4px 0 var(--teal-d)}
.jubin.kunci{opacity:.55;filter:saturate(.6)}
.jubin.boleh{cursor:grab;animation:denyut 1.4s infinite}
.jubin.boleh::after{content:"";position:absolute;inset:-5px;border-radius:18px;border:2px dashed var(--ink2);opacity:.5;pointer-events:none}
.jubin.seret{opacity:.35;animation:none}
.jubin.hantu{position:fixed;z-index:60;pointer-events:none;animation:none;transform:scale(1.08);box-shadow:0 10px 24px rgba(27,42,92,.35)}
.jubin.hantu::after{display:none}
.jubin.goncang{animation:goncang .45s}
.jubin.balik{animation:balik .4s ease-in-out}
.jubin.terima{box-shadow:0 0 0 4px rgba(255,201,51,.8),0 4px 0 var(--teal-d)}
.jubin.tukar{animation:tukar .4s ease-out}
.jubin.siap{box-shadow:0 0 0 4px rgba(26,154,92,.35),0 4px 0 var(--teal-d);animation:none}
.jubin.x.siap{box-shadow:0 0 0 4px rgba(26,154,92,.35),0 4px 0 var(--ungu-d)}
@keyframes balik{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}