/* Segel Tambah demo v2.1.0 — pentas WebGL + UI DOM.
   Kad soalan sengaja guna .qcard/.question/.answers/.ans yang sedia ada,
   supaya soalan sebenar dari bank kelihatan sama macam dalam battle. */

#segelDemo.on{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  /* .screen membawa padding sendiri — demo ini mahu penuh sampai tepi */
  margin:0;padding:0;background:#071729;overflow:hidden;
}
body[data-screen="segelDemo"] .appHeader{display:none}

/* ---------- pentas ---------- */
/* Pentas mengambil bahagian skrin yang TETAP. Portrait diketatkan sedikit
   kepada 40% supaya rajah/soalan visual Tahun 1 mempunyai ruang lebih besar,
   tanpa mengubah komposisi landscape. Arena kekal stabil antara soalan. */
.segelStage{position:relative;flex:0 0 40%;min-height:174px;max-height:50vh;
  overflow:hidden;background:#0d2136}
/* canvas mutlak: kalau ia dalam aliran, tingginya disuap balik ke flex
   melalui ResizeObserver dan pentas membesar tanpa henti. */
.segelStage canvas{position:absolute;inset:0;width:100%;height:100%}
.segelStage.loading::after{
  content:"Memuatkan pentas…";position:absolute;inset:auto 0 44% 0;text-align:center;
  font-size:13px;color:#9fc6e4;letter-spacing:.4px
}

.segelTop{
  position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 10px 0;
}
.segelBanner{
  flex:1;min-width:0;text-align:center;padding:7px 22px;
  background:linear-gradient(#17335c,#0d1f3a);
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);
  box-shadow:0 3px 10px #0006
}
.segelBanner b{display:block;font-size:15px;font-weight:900;line-height:1.15;color:#f7f2e4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.segelBanner small{display:block;font-size:10.5px;color:#a9c4e0}
.segelCount{
  flex:none;padding:9px 10px;border-radius:12px;font-weight:900;font-size:13.5px;color:#f7f2e4;
  font-variant-numeric:tabular-nums;background:linear-gradient(#17335c,#0d1f3a);
  box-shadow:inset 0 0 0 1.5px #ffffff2e,0 3px 10px #0006
}
/* Header app disembunyikan pada skrin ini, jadi butang bunyi mesti ada di sini. */
.segelSound{
  flex:none;width:36px;height:36px;border:0;border-radius:12px;font-size:16px;line-height:1;
  background:linear-gradient(#17335c,#0d1f3a);color:#f7f2e4;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px #ffffff2e,0 3px 10px #0006
}
.segelSound[aria-pressed="true"]{opacity:.55}

/* Warna tier ikut kanun: Gangsa -> Perak -> Emas.
   Rujukan: docs/WORLD-BIBLE-NEW-ERA-v1.md:219-243, Unity RescueLightSeals.cs */
[data-tier="gangsa"]{--tier:#ff6e29}
[data-tier="perak"] {--tier:#bde0ff}
[data-tier="emas"]  {--tier:#ffb838}

/* Bar kesihatan segel: satu ketul = satu hentaman. Warna sudah memberitahu
   tier mana, jadi tiada teks langsung di sini. */
/* left/top ditetapkan oleh JS daripada unjuran kamera, jadi bar sentiasa
   berada betul-betul di atas kubah pada mana-mana nisbah skrin. */
.segelTag{
  position:absolute;left:50%;top:18%;transform:translate(-50%,-100%);
  padding:6px 8px;border-radius:10px;
  background:#0b1d38dd;box-shadow:inset 0 0 0 1.5px #ffffff22;pointer-events:none;
  transition:opacity .35s,left .25s,top .25s
}
.segelBar{display:flex;gap:4px}
.segelBar i{
  width:17px;height:9px;border-radius:3px;background:var(--tier,#9fd8ff);
  box-shadow:0 0 9px color-mix(in srgb,var(--tier) 60%,transparent);
  transition:background .3s,opacity .3s,box-shadow .3s
}
.segelBar i.out{background:#ffffff1a;box-shadow:none;opacity:.7}

.segelToast{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.9);
  font-size:20px;font-weight:950;color:#ffe9b0;text-shadow:0 3px 12px #000c;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s
}
.segelToast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Finisher Wira ialah klip menegak 9:16 penuh. Ia dimainkan selepas
   jawapan terakhir diterima tetapi SEBELUM hitSeal() memecahkan Gembok Emas.
   Jambatan visual di bawah mengelakkan hard-cut "game -> video -> game":
   arena charge -> flash -> video -> flash -> seal shatter. */
#segelStage.finisher-video-prep::before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(circle at 70% 58%,rgba(183,239,255,.68) 0 4%,rgba(55,190,255,.34) 12%,transparent 31%),
    radial-gradient(circle at 28% 69%,rgba(65,213,255,.24),transparent 29%),
    linear-gradient(rgba(2,10,23,.08),rgba(2,10,23,.38));
  animation:segelVideoPrep 340ms cubic-bezier(.18,.72,.2,1) both
}
.segelFinisherVideoLayer{
  position:fixed;inset:0;z-index:2147483647;display:block;
  background:transparent;opacity:0;visibility:hidden;pointer-events:none;
}
.segelFinisherVideoLayer.active{opacity:1;visibility:visible}
.segelFinisherVideo{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;background:#000;opacity:0;transform:scale(1.012);
  transition:opacity 70ms linear,transform 220ms ease-out
}
.segelFinisherVideoLayer.playing .segelFinisherVideo{opacity:1;transform:scale(1)}
.segelFinisherVideoLayer::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:
    radial-gradient(circle at 52% 48%,#fff 0 12%,rgba(213,248,255,.98) 26%,rgba(76,203,255,.76) 48%,rgba(15,91,155,.24) 72%,transparent 100%);
  mix-blend-mode:screen
}
.segelFinisherVideoLayer.flash-in::after{
  animation:segelVideoFlashIn 300ms cubic-bezier(.12,.72,.18,1) both
}
.segelFinisherVideoLayer.flash-out::after{
  animation:segelVideoFlashOut 345ms cubic-bezier(.12,.74,.2,1) both
}
@keyframes segelVideoPrep{
  0%{opacity:0}
  45%{opacity:.72}
  100%{opacity:1}
}
@keyframes segelVideoFlashIn{
  0%{opacity:0;transform:scale(.82)}
  42%{opacity:1;transform:scale(1.04)}
  63%{opacity:.98}
  100%{opacity:0;transform:scale(1.12)}
}
@keyframes segelVideoFlashOut{
  0%{opacity:0;transform:scale(.9)}
  28%{opacity:1;transform:scale(1.02)}
  55%{opacity:1}
  100%{opacity:0;transform:scale(1.14)}
}
@media (orientation:landscape){
  .segelFinisherVideo{object-fit:contain}
}
.segelCutIn{position:absolute;inset:0;z-index:6;display:grid;grid-template-columns:52% 48%;align-items:center;visibility:hidden;opacity:0;background:linear-gradient(108deg,rgba(1,7,15,.98) 0 45%,rgba(43,160,203,.9) 45.5% 46.2%,rgba(3,13,27,.97) 46.8% 100%);clip-path:polygon(0 0,100% 0,92% 100%,0 100%);pointer-events:none}
.segelCutIn .cutInHero{width:72%;height:82%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 20px rgba(64,215,255,.7));transform:translateX(10%)}
.segelCutIn{display:none!important}
.cutInCopy{display:grid;gap:5px;align-content:center;padding:0 8% 0 0}.cutInCopy small{color:#49d9ff;font-size:10px;font-weight:900;letter-spacing:.24em}.cutInCopy b{font-size:clamp(26px,5vw,62px);letter-spacing:.08em;color:#fff;text-shadow:0 0 18px rgba(87,220,255,.8)}.cutInCopy span{font-size:11px;letter-spacing:.16em;color:#d8eaff}.cutInLine{position:absolute;left:44%;top:0;bottom:0;width:3px;background:#ffd36a;box-shadow:0 0 15px #49d9ff;transform:skewX(-5deg)}
#segelStage.finisher-cutin .segelCutIn{visibility:visible;opacity:1;animation:liveCutInEnter 880ms cubic-bezier(.18,.8,.18,1) both}
#segelStage.finisher-dash .segelCutIn{visibility:visible;animation:liveCutInExit 360ms ease-in both}
.segelFinalFocus{position:absolute;inset:0;z-index:9;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 28% 38%,rgba(23,78,126,.28),rgba(1,7,18,.9) 58%,rgba(0,0,0,.98))}
.finalEyePortrait{position:absolute;left:0;top:0;width:100%;height:100%;background-image:url('../assets/fx/wira/final-v2/wira-eye-focus-v1.webp');background-repeat:no-repeat;background-size:cover;background-position:center 54%;filter:saturate(1.12) brightness(.9) drop-shadow(0 0 18px rgba(78,210,255,.72));transform:scale(1.02);transform-origin:50% 54%;opacity:.95}
.finalEyePortrait:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 72%,rgba(0,0,0,.5)),radial-gradient(ellipse at 54% 25%,transparent 0 20%,rgba(0,0,0,.4) 54%,rgba(0,0,0,.82) 100%)}
.finalFocusGlint{position:absolute;left:12%;top:22%;width:34%;height:17%;border-radius:50%;background:radial-gradient(ellipse,rgba(211,250,255,.75),rgba(53,190,255,.18) 38%,transparent 72%);filter:blur(8px);opacity:.65}
.segelChargeAura{position:absolute;left:1%;bottom:2%;width:43%;height:43%;z-index:7;opacity:0;visibility:hidden;pointer-events:none;background:url('../assets/fx/math-auras-approved/numbers-normalized.webp') center/contain no-repeat;mix-blend-mode:screen;filter:saturate(1.08) brightness(1.03) drop-shadow(0 0 12px rgba(74,214,255,.78))}
#segelStage.finisher-charge:after{content:"";position:absolute;inset:0;z-index:5;background:radial-gradient(ellipse at 28% 68%,rgba(33,113,168,.26),rgba(1,8,18,.72) 68%,rgba(0,0,0,.88));pointer-events:none;animation:segelChargeDim 1180ms ease-out both}
#segelStage.finisher-charge .segelChargeAura{visibility:visible;animation:segelChargeAuraLoop 2400ms ease-in-out infinite}
#segelStage.finisher-charge .segelFinisherAttack{opacity:1;z-index:8;animation:liveFinalmoveCharge 1180ms steps(1,end) forwards}
#segelStage.finisher-release .segelChargeAura{visibility:visible;opacity:1;animation:segelAuraRelease 420ms cubic-bezier(.18,.78,.18,1) both}
@keyframes segelChargeAuraLoop{0%{opacity:.55;transform:translateY(6px) scale(.96) rotate(-2deg)}50%{opacity:.88;transform:translateY(-3px) scale(1.03) rotate(1deg)}100%{opacity:.62;transform:translateY(4px) scale(.98) rotate(-1deg)}}
.segelFinisherCallout{position:absolute;left:50%;top:53%;z-index:2;transform:translate(-50%,-50%) skewX(-7deg);text-align:center;opacity:0;filter:drop-shadow(0 0 16px rgba(72,218,255,.85));white-space:nowrap}
.segelFinisherCallout small{display:block;margin-bottom:4px;color:#a9efff;font-size:clamp(8px,1.4vw,14px);font-weight:950;letter-spacing:.34em;text-shadow:0 0 10px #42dfff}
.segelFinisherCallout b{display:block;color:#f7fdff;font-size:clamp(15px,3.4vw,36px);font-weight:1000;line-height:.9;letter-spacing:.04em;text-shadow:0 3px 0 #18548b,0 0 7px #fff,0 0 22px #39cfff}
.segelFinisherCallout:before,.segelFinisherCallout:after{content:"";position:absolute;top:52%;width:9vw;height:3px;background:linear-gradient(90deg,transparent,#d8fbff,transparent);box-shadow:0 0 12px #42dfff;opacity:.9}
.segelFinisherCallout:before{right:105%;transform:rotate(-5deg)}.segelFinisherCallout:after{left:105%;transform:rotate(5deg)}
#segelStage.finisher-focus .segelFinisherCallout{animation:segelCalloutIn 720ms cubic-bezier(.12,.8,.18,1) 260ms both}
/* Anticipation beat khas sebelum video: guna callout sedia ada tanpa membuka
   portrait mata. Ia muncul selepas aura mula charge dan hilang tepat sebelum
   flash match-cut. */
#segelStage.finisher-video-cue .segelFinisherCallout{
  opacity:1;
  animation:segelVideoCueIn 720ms cubic-bezier(.12,.8,.18,1) 120ms both
}
@keyframes segelVideoCueIn{
  0%{opacity:0;transform:translate(-50%,-50%) skewX(-7deg) scale(1.28);filter:blur(5px) drop-shadow(0 0 0 transparent)}
  42%{opacity:1;transform:translate(-50%,-50%) skewX(-7deg) scale(.97);filter:blur(0) drop-shadow(0 0 24px rgba(72,218,255,1))}
  100%{opacity:1;transform:translate(-50%,-50%) skewX(-7deg) scale(1);filter:drop-shadow(0 0 16px rgba(72,218,255,.85))}
}
#segelStage.finisher-focus .segelFinalFocus{visibility:visible;opacity:1;animation:segelFinalFocusIn 720ms cubic-bezier(.18,.8,.18,1) both}
#segelStage.finisher-focus .finalEyePortrait{animation:segelEyeCharge 720ms ease-out both}
.segelMathBurst{position:absolute;left:63%;bottom:3%;width:41%;height:73%;z-index:8;opacity:0;visibility:hidden;pointer-events:none;filter:drop-shadow(0 0 11px rgba(73,207,255,.9))}
.segelMathBurst:after{content:"";position:absolute;left:12%;right:8%;bottom:0;height:42%;border-radius:50%;background:radial-gradient(ellipse,rgba(110,226,255,.44),rgba(67,168,255,.16) 38%,transparent 72%);filter:blur(12px);opacity:0}
.segelMathBurst span{display:block;position:absolute;width:42%;height:29%;color:transparent;font-size:0;line-height:1;opacity:0;background-repeat:no-repeat;background-size:400% 100%;background-position:0 50%;filter:drop-shadow(0 0 8px rgba(73,207,255,.92))}
.segelMathBurst span:nth-child(1){left:0%;bottom:13%}.segelMathBurst span:nth-child(2){left:53%;bottom:30%}.segelMathBurst span:nth-child(3){left:24%;bottom:51%}.segelMathBurst span:nth-child(4){right:0%;bottom:63%}
#segelStage.finisher-math .segelMathBurst{visibility:visible;opacity:1;animation:segelMathRise 680ms cubic-bezier(.12,.78,.18,1) both}
#segelStage.finisher-math .segelMathBurst:after{animation:segelMathHalo 680ms ease-out both}
#segelStage.finisher-math .segelMathBurst span:nth-child(1){animation:segelMathGlyph 680ms ease-out .02s both}
#segelStage.finisher-math .segelMathBurst span:nth-child(2){animation:segelMathGlyph 680ms ease-out .12s both}
#segelStage.finisher-math .segelMathBurst span:nth-child(3){animation:segelMathGlyph 680ms ease-out .2s both}
#segelStage.finisher-math .segelMathBurst span:nth-child(4){animation:segelMathGlyph 680ms ease-out .28s both}
.segelFinisherAttack,.segelFinisherImpact{position:absolute;z-index:10;opacity:0;pointer-events:none;filter:drop-shadow(0 14px 10px rgba(0,0,0,.38))}
.segelFinisherAttack{left:28%;bottom:6%;height:66%;aspect-ratio:678/1280;background-repeat:no-repeat;background-size:500% 400%;background-position:0 0}
#segelStage.finisher-dash .segelFinisherAttack{opacity:1;animation:liveFinalmoveSheet 1800ms steps(1,end) forwards}
#segelStage.finisher-charge .segelFinisherAttack,#segelStage.finisher-dash .segelFinisherAttack{display:none!important}
.segelFinisherImpact{left:65%;top:50%;bottom:auto;width:min(58vw,520px);height:min(58vw,520px);transform:translate(-50%,-50%) scale(.2);filter:drop-shadow(0 0 18px rgba(255,222,98,.9))}
#segelStage.finisher-impact .segelFinisherImpact{opacity:1;animation:liveFinisherImpact 650ms cubic-bezier(.12,.8,.2,1) both}
@keyframes segelFinalFocusIn{0%{opacity:0;transform:scale(1.08)}18%{opacity:1}100%{opacity:1;transform:scale(1)}}@keyframes segelEyeCharge{0%{transform:scale(1.14);filter:saturate(.9) brightness(.55) drop-shadow(0 0 4px rgba(78,210,255,.35))}55%{transform:scale(1.04);filter:saturate(1.25) brightness(1.1) drop-shadow(0 0 24px rgba(78,210,255,.95))}100%{transform:scale(1.04);filter:saturate(1.18) brightness(.92) drop-shadow(0 0 18px rgba(78,210,255,.72))}}@keyframes segelMathRise{0%{opacity:0;transform:translateY(18px) scale(.72)}32%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:1;transform:translateY(-4px) scale(1)}}@keyframes segelMathGlyph{0%{opacity:0;transform:translateY(36px) rotate(-18deg) scale(.4)}35%{opacity:1;transform:translateY(0) rotate(0) scale(1.08)}100%{opacity:.92;transform:translateY(-7px) rotate(8deg) scale(1)}}@keyframes liveCutInEnter{0%{opacity:0;transform:translateX(100%)}100%{opacity:1;transform:translateX(0)}}@keyframes liveCutInExit{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-100%)}}@keyframes liveFinisherImpact{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-16deg)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.03) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18) rotate(8deg)}}
@keyframes liveFinalmoveSheet{0%,5%{background-position:0% 0%}10%{background-position:25% 0%}15%{background-position:50% 0%}20%{background-position:75% 0%}25%{background-position:100% 0%}30%{background-position:0% 33.333%}35%{background-position:25% 33.333%}40%{background-position:50% 33.333%}45%{background-position:75% 33.333%}50%{background-position:100% 33.333%}55%{background-position:0% 66.666%}60%{background-position:25% 66.666%}65%{background-position:50% 66.666%}70%{background-position:75% 66.666%}75%{background-position:100% 66.666%}80%{background-position:0% 100%}85%{background-position:25% 100%}90%{background-position:50% 100%}95%{background-position:75% 100%}100%{background-position:100% 100%}}
@media(max-width:640px){.segelCutIn{grid-template-columns:54% 46%}.cutInCopy{padding-right:6%}.cutInCopy b{font-size:clamp(22px,8vw,34px)}.cutInCopy span{font-size:8px}.segelFinalFocus .finalEyePortrait{width:100%;background-size:cover;background-position:center 54%}.segelFinisherCallout{top:53%}.segelMathBurst{left:57%;width:48%;height:66%}.segelFinisherAttack{left:27%;height:64%}.segelFinisherImpact{left:72%;width:76vw;height:76vw}}

@keyframes segelChargeDim{0%{opacity:0}18%{opacity:1}100%{opacity:1}}@keyframes segelChargeAuraIn{0%{opacity:0;transform:translateY(24px) scale(.28) rotate(-18deg)}35%{opacity:.72;transform:translateY(0) scale(.82) rotate(4deg)}72%{opacity:1;transform:translateY(-5px) scale(1.04) rotate(-3deg)}100%{opacity:.92;transform:translateY(-2px) scale(1) rotate(0)}}@keyframes segelAuraRelease{0%{opacity:.95;transform:translate(0,-2px) scale(1) rotate(0)}35%{opacity:1;transform:translate(32%,-12px) scale(.82) rotate(8deg)}100%{opacity:0;transform:translate(174%,-21px) scale(.22) rotate(22deg)}}@keyframes liveFinalmoveCharge{0%,18%{background-position:0% 0%}30%{background-position:25% 0%}42%{background-position:50% 0%}54%{background-position:75% 0%}66%{background-position:100% 0%}78%{background-position:0% 33.333%}90%{background-position:25% 33.333%}100%{background-position:50% 33.333%}}@keyframes segelMathHalo{0%{opacity:0;transform:scale(.45)}35%{opacity:.95;transform:scale(1.08)}100%{opacity:.35;transform:scale(1.18)}}
@keyframes segelCalloutIn{0%{opacity:0;transform:translate(-50%,-50%) skewX(-7deg) scale(1.55);filter:blur(7px) drop-shadow(0 0 0 transparent)}42%{opacity:1;transform:translate(-50%,-50%) skewX(-7deg) scale(.96);filter:blur(0) drop-shadow(0 0 23px rgba(72,218,255,1))}58%{transform:translate(-50%,-50%) skewX(-7deg) scale(1.04)}100%{opacity:1;transform:translate(-50%,-50%) skewX(-7deg) scale(1);filter:drop-shadow(0 0 16px rgba(72,218,255,.85))}}

/* ---------- panel soalan ---------- */
.segelPanel{
  flex:1 1 0;min-height:0;display:flex;flex-direction:column;
  padding:0 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(#0b1d38,#071729)
}
.segelQHead{flex:0 0 auto;display:flex;align-items:center;gap:9px;margin:-15px 0 9px;position:relative}
.segelQHead b{font-size:18px;font-weight:950;color:#f7f2e4;text-shadow:0 2px 6px #000a}
.segelSpk{
  width:34px;height:34px;flex:none;border:0;border-radius:50%;display:grid;place-items:center;
  background:#12294b;box-shadow:inset 0 0 0 1.5px #ffffff2e;cursor:pointer
}
.segelSpk svg{width:15px;height:15px;fill:#f7f2e4}
.segelSpk[aria-pressed="true"]{background:#5fcdf5;box-shadow:0 0 14px #5fcdf5aa}
.segelSpk[aria-pressed="true"] svg{fill:#062033}

.segelCard{
  flex:1 1 0;min-height:0;display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 2px #e9b94955,0 10px 24px #0007
}
/* Soalan menatal di dalam kad; jawapan sentiasa kekal di tempatnya. */
.segelCard .question{
  flex:1 1 0;min-height:0;font-size:23px;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-gutter:stable;
  align-items:stretch;justify-items:stretch
}
.segelCard .question .segelPrompt{min-height:0;width:100%;box-sizing:border-box;display:block;padding:10px 12px}
/* Cerita panjang (cth. ayat panjang lensa 4.8): saiz lebih tenang dan rata kiri, supaya seluruh soalan muat. */
.segelCard[data-question-layout="long"] .question{font-size:clamp(16px,2.3dvh,20px)}
.segelCard[data-question-layout="long"] .question .segelPrompt{text-align:left;line-height:1.4}
.segelCard .answers{flex:0 0 auto}
.segelCard .feedback{flex:0 0 auto;min-height:32px}

/* Butang jawapan gaya premium: ivori dengan bibir emas dan tepi tebal,
   bukan kotak rata. Diskopkan kepada demo — .ans global masih dipakai oleh
   skrin battle sedia ada dan tidak boleh diubah dari sini. */
.segelCard .answers{gap:11px}
.segelCard .ans{
  border:0;border-radius:14px;padding:15px 8px;
  font-size:19px;font-weight:950;color:#14314f;
  background:linear-gradient(180deg,#fffef8 0%,#f8f0dc 55%,#eee1c0 100%);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 2px #dcc48f,
             0 4px 0 #b59a5f, 0 9px 18px rgba(4,16,30,.42);
  transition:transform .08s,box-shadow .08s,filter .15s
}
.segelCard .ans:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 2px #dcc48f,
             0 1px 0 #b59a5f, 0 4px 10px rgba(4,16,30,.4)
}
.segelCard .ans:focus-visible{outline:3px solid #5fcdf5;outline-offset:3px}
/* Betul = biru tema app (bukan hijau), salah = merah.
   Biru mockup jauh lebih terang daripada biru chrome app, jadi ia dinaikkan
   tepu dan cerahnya dan diberi cahaya luar supaya betul-betul menyala. */
.segelCard .ans.ok{
  color:#fff;background:linear-gradient(180deg,#59c8ff 0%,#1f93f5 48%,#0b6fe0 100%);
  text-shadow:0 2px 7px rgba(3,24,58,.6);
  box-shadow:inset 0 1px 0 #dff2ff, inset 0 0 0 2px #8fd8ff,
             0 4px 0 #0a4fa5, 0 0 22px rgba(60,170,255,.55),
             0 10px 26px rgba(20,110,210,.55)
}
.segelCard .ans.no{
  color:#fff;background:linear-gradient(180deg,#f47f8e,#c2314a);
  text-shadow:0 2px 6px rgba(52,6,16,.5);
  box-shadow:inset 0 1px 0 #ffd2d8, inset 0 0 0 2px #ffb3bc,
             0 4px 0 #8a1e30, 0 9px 22px rgba(176,45,70,.45)
}
.segelCard .ans:disabled:not(.ok):not(.no){filter:brightness(.88) saturate(.8);opacity:.75}

/* butang petunjuk, sepadan dengan .hintBtn dalam battle */
.segelHint{
  margin-left:auto;display:flex;align-items:center;gap:5px;border:0;cursor:pointer;
  padding:7px 11px;border-radius:20px;font-size:12px;font-weight:800;color:#0b1d38;
  background:#e9b949;box-shadow:0 3px 10px #0006
}
.segelHint svg{width:14px;height:14px;fill:none;stroke:#0b1d38;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.segelHint:disabled,.segelHint.used{background:#2a4166;color:#8fa8c4;cursor:default}
.segelHint.used svg{stroke:#8fa8c4}

.segelLock{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:9px;
  font-size:12.5px;color:#c8b98e;font-weight:800
}
.segelLock::before,.segelLock::after{
  content:"";height:1px;flex:1;max-width:58px;
  background:linear-gradient(90deg,#0000,#c8b98e88,#0000)
}

/* ---------- penamat ---------- */
/* Skrin keputusan — susunan mengikut prototaip Unity RescuePayoff.cs:
   watak > bintang > sepanduk > statistik > cara menjawab > cikgu > CTA. */
/* Skrin keputusan duduk DI ATAS arena yang masih hidup: Wira dan Aurora
   terus bersorak di belakangnya, jadi tiada salinan watak di dalam kad. */
.segelDone{
  position:absolute;left:0;right:0;bottom:0;top:0;z-index:5;overflow-y:auto;
  padding:clamp(32px,18dvh,140px) 16px calc(16px + env(safe-area-inset-bottom,0px));
  /* Legap penuh selepas peralihan pendek. Kecerunan lama berhenti pada .985,
     cukup untuk teks kad soalan di belakang menembus sebagai bayang hantu. */
  background:linear-gradient(180deg,
    rgba(7,18,34,0) 0%, rgba(7,18,34,.2) 22%, rgba(7,18,34,.94) 34%, rgba(7,18,34,1) 44%, rgba(7,18,34,1) 100%)
}
.segelDone[hidden]{display:none}
.segel-result-active .segelPanel,.segel-result-active .segelTop{visibility:hidden;pointer-events:none}
.segelTop>.iconBtn{min-width:44px;min-height:44px;flex-shrink:0}

/* Palet diambil terus daripada mockup Berjaya prototaip Unity
   (Docs/Verification/BerjayaMockup/390x844-*.png): muka navy #162a47,
   bingkai emas #b78b47, kotak krim #fff3d6, CTA emas #f2cd78. */
.segelResult{
  --rNavy:#162a47; --rNavyTop:#1b3354; --rGold:#b78b47;
  --rCream:#fff3d6; --rGoldFill:#f2cd78; --rTitle:#ffe5a6;
  width:100%;max-width:360px;margin:0 auto;text-align:center
}

/* Bintang guna sprite peta Unity (map_star_earned/empty). Bintang tengah lebih
   besar dan barisan ini bertindih sedikit dengan sepanduk, sama seperti mockup. */
.resultStars{
  display:flex;justify-content:center;align-items:flex-end;gap:2px;
  padding-top:2px;margin-bottom:-14px;position:relative;z-index:2
}
.resultStars i{
  width:42px;height:42px;display:block;
  background:url("../assets/ui/star-empty-v1.webp") center/contain no-repeat
}
.resultStars i:nth-child(2){width:56px;height:56px}
.resultStars i.on{
  background-image:url("../assets/ui/star-earned-v1.webp");
  filter:drop-shadow(0 2px 9px rgba(242,205,120,.55))
}

.resultBanner{
  margin:0 0 7px;padding:11px 18px;border-radius:14px;
  background:linear-gradient(var(--rNavyTop),#132845);
  border:2px solid var(--rGold);
  box-shadow:inset 0 0 0 2px #ffffff14,0 10px 26px #0009
}
.resultBanner b{
  font-size:30px;font-weight:950;letter-spacing:1px;color:var(--rTitle);
  text-shadow:0 3px 10px #000a
}
.resultLead{
  margin:0 0 14px;font-size:13.5px;font-weight:800;color:#f2f6fb;
  text-shadow:0 2px 7px #000b
}

/* Satu kad tunggal berbingkai emas — statistik di atas, Cikgu di bawah garis,
   bukan tiga kad berasingan seperti versi lama. */
.resultCard{
  margin-bottom:14px;padding:14px 14px 16px;border-radius:16px;
  background:linear-gradient(#182e4d,#132644);
  border:2px solid var(--rGold);
  box-shadow:0 12px 28px #0007,inset 0 0 0 1px #ffffff10
}
.resultStats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px 2px 13px}
.resultStats small{display:block;font-size:12px;font-weight:700;color:#a8c3e2;margin-bottom:3px}
.resultStats b{
  display:block;font-size:22px;font-weight:950;color:#fff6df;
  font-variant-numeric:tabular-nums
}
.segelDemoSummary{
  margin:0 2px 13px;padding:9px 10px;border-radius:10px;
  background:#0d2039;border:1px solid #b78b4766;
  font-size:11px;line-height:1.4;font-weight:700;color:#d9e5f3;text-align:left
}

.resultCoach{
  display:flex;align-items:flex-start;text-align:left;
  border-top:1px solid #b78b4755;padding-top:17px
}
.resultCoach img{
  width:72px;height:72px;flex:none;object-fit:contain;
  margin:4px -16px 0 -4px;position:relative;z-index:2;
  filter:drop-shadow(0 4px 10px #0009)
}
.coachSay{
  position:relative;flex:1;min-width:0;
  padding:15px 12px 12px 24px;border-radius:12px;
  background:var(--rCream);border:2px solid var(--rGold)
}
.coachChip{
  position:absolute;top:-12px;left:20px;
  padding:3px 11px;border-radius:9px;white-space:nowrap;
  background:var(--rNavy);border:2px solid var(--rGold);
  font-size:11px;font-weight:800;color:#fff6df
}
.coachSay p{margin:0;font-size:13px;line-height:1.5;font-weight:600;color:#2b2416}

/* Dua CTA sahaja, tinggi sentuh >=48px dan >=16px daripada tepi skrin,
   mengikut BerjayaResultContract.cs. */
.resultCta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rcBtn{
  min-height:48px;padding:0 10px;border-radius:12px;cursor:pointer;
  border:2px solid var(--rGold);
  font-family:inherit;font-size:14.5px;font-weight:800;line-height:1.25;letter-spacing:.2px
}
/* Hanya warna teks di sini. Shorthand `background` dahulu menetapkan semula
   background-size kepada `auto` dan background-repeat kepada `repeat`, dan
   kerana `.rcBtn.navy` lebih khusus daripada `.rcBtn`, PNG 512x192 itu
   dilukis pada saiz asalnya lalu berjubin di dalam kotak 175x65 — itulah
   butang yang kelihatan rosak. Imej datang daripada blok aset di bawah. */
.rcBtn.navy{color:#fff6df}
.rcBtn.gold{color:#2a2410}
.rcBtn:active{transform:translateY(1px)}

.resultFoot{
  display:flex;align-items:center;gap:10px;margin-top:14px;
  font-size:12px;color:#e2dbc6
}
.resultFoot::before,.resultFoot::after{content:"";flex:1;height:1px;background:#d5ad5a66}
.resultFoot span{flex:none}

@media (max-height:680px){
  .resultBanner{padding:9px 16px}
  .resultBanner b{font-size:25px}
  .resultLead{margin-bottom:11px}
  .resultStars i{width:36px;height:36px}
  .resultStars i:nth-child(2){width:48px;height:48px}
  .resultCard{padding:12px 12px 13px;margin-bottom:11px}
  .resultStats{padding-bottom:10px}
  .resultCoach{padding-top:14px}
  .resultCoach img{width:62px;height:62px}
  .resultFoot{margin-top:11px}
}

/* Landskap: tinggi yang tinggal terlalu pendek untuk satu lajur — CTA
   "Main Semula" jatuh di bawah skrin dan murid terpaksa menykrol untuk
   mencarinya. Sepanduk dan kad diletak bersebelahan supaya kedua-dua CTA
   sentiasa kelihatan. */
@media (orientation:landscape) and (max-height:560px){
  .segelResult{
    max-width:none;width:min(100%,680px);
    display:grid;align-items:center;gap:0 16px;
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)
  }
  .resultStars{grid-column:1;grid-row:1;margin-bottom:-12px}
  .resultBanner{grid-column:1;grid-row:2}
  .resultLead{grid-column:1;grid-row:3;margin-bottom:0}
  .resultCard{grid-column:2;grid-row:1/4;margin-bottom:0;align-self:stretch}
  .resultCta{grid-column:2;grid-row:4;margin-top:10px}
  .resultFoot{grid-column:1/-1;grid-row:5;margin-top:10px}
  .resultCoach{padding-top:13px}
}

/* Bintang berjaya: timbul besar, terlajak, kemudian duduk. Hanya pada
   bintang yang diperoleh — lihat popStars() dalam modul demo. */
@keyframes paStarPop{
  0%  {transform:scale(.25);opacity:0}
  55% {transform:scale(1.30);opacity:1}
  78% {transform:scale(.93)}
  100%{transform:scale(1);opacity:1}
}
.resultCrest .resultStars.stars-pending i:not(.on){opacity:0;transform:scale(.55)}
.resultCrest .resultStars.stars-pending i.on.pop{animation:paGoldStarReveal .72s cubic-bezier(.16,.9,.24,1) both;animation-delay:var(--popDelay,0ms)}
@keyframes paGoldStarReveal{
  0%{opacity:0;transform:scale(1.85) rotate(-9deg);filter:drop-shadow(0 0 22px rgba(255,231,135,1))}
  28%{opacity:1;transform:scale(1.36) rotate(4deg);filter:drop-shadow(0 0 18px rgba(255,218,91,.95))}
  64%{transform:scale(1.08) rotate(-2deg)}
  100%{opacity:1;transform:scale(1) rotate(0);filter:drop-shadow(0 2px 9px rgba(242,205,120,.55))}
}
.resultCrest .resultStars.stars-ready i:not(.on){animation:paStarPlaceholderIn .24s ease-out both}
@keyframes paStarPlaceholderIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
.resultCrest .resultStars i.on.pop{
  animation:paStarPop .48s cubic-bezier(.22,.9,.28,1) both;
  animation-delay:var(--popDelay,0ms)
}
@media (prefers-reduced-motion:reduce){
.resultCrest .resultStars i.on.pop{animation:none}
}

/* Borang taip gembok emas: `#segelAnswers` ialah grid dua lajur untuk butang
   MCQ, jadi borang ini menjadi satu item dan hanya dapat separuh lebar.
   Ia mesti merentang kedua-dua lajur. */
.segelCard .answers > .paTypedAnswer{grid-column:1 / -1}

.segelPrompt{width:100%}

/* Kit aset result Unity: crest tajuk, crest sisi, summary-frame dan butang. */
.segelResult{max-width:390px}
/* Bintang tengah menjulur kira-kira 24px di atas kotak crest. `.segelDone`
   ialah bekas skrol, jadi apa-apa di atas tepinya DIKERAT — itu sebabnya
   bintang tengah kelihatan terpotong. Margin atas ini memberi ruang itu. */
.resultCrest{position:relative;width:calc(100% - 56px);aspect-ratio:4/1;margin:32px auto 2px;isolation:isolate}
.resultCrestFrame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-1}
/* Sayap dahulu 38% lebar pada `top:15%`: hujungnya terkeluar 21px di kiri dan
   kanan skrin, dan pusatnya 10px lebih rendah daripada sepanduk. Kini ia
   dipusatkan pada paksi sepanduk (53.5% tinggi crest) dan ditarik masuk. */
/* Sayap perlu ruang di luar crest untuk kelihatan. Sebab itu crest sendiri
   dikecilkan (100% - 56px): lebar yang dilepaskan itu menjadi ruang julur
   sayap, tanpa mana-mana bahagiannya terkeluar skrin. */
.resultCrestSide{position:absolute;top:53.5%;transform:translateY(-50%);width:40%;height:auto;z-index:-2;pointer-events:none}
.resultCrestSideLeft{right:76%}.resultCrestSideRight{left:76%}
.resultCrest .resultStars{position:absolute;left:50%;bottom:69%;transform:translateX(-50%);width:max-content;margin:0;padding:0;z-index:2}
.resultCrest .resultStars i{width:38px;height:38px;background-image:url("../assets/ui/victory-result/star-empty.webp")}.resultCrest .resultStars i:nth-child(2){width:50px;height:50px}
.resultCrest .resultStars i.on{background-image:url("../assets/ui/victory-result/star-earned.webp")}
.resultCrest .resultBanner{position:absolute;inset:15% 10% 8%;display:grid;place-items:center;margin:0;padding:0;border:0;background:none;box-shadow:none}
.resultCrest .resultBanner b{font-size:clamp(28px,8.5vw,39px);color:#fff7da;text-shadow:0 3px 0 #71420a,0 6px 14px #000b}
.resultCard{position:relative;min-height:235px;margin-bottom:14px;padding:0;border:0;background:none;box-shadow:none;overflow:hidden}
.resultSummaryFrame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.resultCardContent{position:relative;z-index:1;display:flex;min-height:235px;flex-direction:column;padding:38px 27px 25px}
.resultStats{padding:2px 4px 13px}.resultStats small{color:#a8c3e2}.resultCoach{margin-top:auto}
.resultCta{gap:9px}.rcBtn{min-height:0;aspect-ratio:512/192;padding:0 12px;display:grid;place-items:center;border:0;border-radius:0;background-color:transparent!important;background-size:100% 100%;background-repeat:no-repeat;background-position:center;box-shadow:none}
.rcBtn.navy{background-image:url("../assets/ui/victory-result/button-navy-rest.webp")!important;color:#fff6df}
.rcBtn.gold{background-image:url("../assets/ui/victory-result/button-gold-rest.webp")!important;color:#2a2410}
.resultCta .rcBtn{min-height:48px;aspect-ratio:auto}
.segelDone .resultCta{position:sticky;bottom:0;z-index:3;padding:8px 0;background:linear-gradient(180deg,rgba(7,18,34,.9),#071222)}
.rcBtn.navy:active{background-image:url("../assets/ui/victory-result/button-navy-press.webp")!important}
.rcBtn.gold:active{background-image:url("../assets/ui/victory-result/button-gold-press.webp")!important}
@media (max-height:680px){
  .resultCard{min-height:186px}
  .resultCardContent{min-height:186px;padding:26px 20px 16px}
  /* Bintang tengah 44px menjulur kira-kira 19px, jadi 20px sudah melepasinya. */
  .resultCrest{width:calc(100% - 60px);margin-top:20px}
  .resultCrest .resultStars i{width:34px;height:34px}
  .resultCrest .resultStars i:nth-child(2){width:44px;height:44px}
  .resultStats{padding-bottom:9px}
  .resultStats b{font-size:20px}
  .resultCoach{padding-top:13px}
  .resultCoach img{width:56px;height:56px}
  .coachSay{padding:13px 10px 10px 20px}
  .coachSay p{font-size:12.5px;line-height:1.45}
  .resultLead{margin-bottom:7px}
  .resultFoot{margin-top:8px}}
/* Landskap ditulis semula untuk markup crest. Peraturan lama menetapkan baris
   grid pada `.resultStars` dan `.resultBanner`, tetapi kedua-duanya kini berada
   DI DALAM `.resultCrest`, jadi penempatan itu tidak lagi terpakai. Lebih
   penting, `.segelResult{max-width:390px}` dalam blok aset datang selepas
   pertanyaan landskap dan mempunyai kekhususan yang sama, jadi ia menang:
   dua lajur dimampatkan ke dalam 390px dan kad menjadi turus tinggi yang
   melimpah keluar skrin. Lebar dibuka semula di sini. */
@media (orientation:landscape) and (max-height:560px){
  .segelResult{
    max-width:none;width:min(100%,700px);
    display:grid;align-items:center;gap:0 18px;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)
  }
  .resultCrest{grid-column:1;grid-row:1;width:min(100%,330px);margin:26px auto 0}
  .resultCrest .resultStars,.resultCrest .resultBanner{grid-column:auto;grid-row:auto}
  .resultLead{grid-column:1;grid-row:2;margin:6px 0 0}
  .resultCard{grid-column:2;grid-row:1/3;min-height:0;margin:0}
  .resultCardContent{min-height:0;padding:30px 22px 20px}
  .resultCta{grid-column:2;grid-row:3;margin-top:10px}
  .resultFoot{grid-column:1/-1;grid-row:4;margin-top:8px}
}

/* ---------- butang hub ---------- */
.hubSegelDemo{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:12px 14px;
  border:0;border-radius:18px;cursor:pointer;color:#eaf4fa;
  background:linear-gradient(120deg,#123a5e,#0d2444);
  box-shadow:inset 0 0 0 1.5px #5fcdf540,0 6px 18px #0006
}
.hubSegelDemo .segelThumb{
  width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;
  font-size:23px;background:radial-gradient(circle at 50% 40%,#ffe9b055,#0d244400)
}
.hubSegelDemo .segelCopy{flex:1;min-width:0}
.hubSegelDemo b{display:block;font-size:15px;font-weight:900}
.hubSegelDemo small{display:block;font-size:11.5px;color:#a9c4e0}
.hubSegelDemo .segelNew{
  flex:none;font-size:10px;font-weight:900;letter-spacing:1px;color:#062033;
  background:#5fcdf5;border-radius:20px;padding:4px 9px
}

@media (max-width:360px){
  .segelBanner b{font-size:13.5px}
  .segelCard .question{font-size:20px}
}


/* ---------- skrin selain telefon menegak ---------- */
/* Demo ini direka untuk telefon. Pada tablet dan desktop, lajur dipusatkan
   supaya kad soalan tidak merentang selebar skrin dan arena tidak jadi jalur
   panjang; kamera pentas pula sudah mengunci lebar dunia, jadi komposisi
   kekal sama. */
@media (min-width:760px){
  #segelDemo.on{background:radial-gradient(circle at 50% 22%,#0e2745,#04101e)}
  .segelStage,.segelPanel{width:100%;max-width:720px;margin-inline:auto}
  .segelStage{border-radius:0 0 20px 20px}
}

/* Tablets in landscape and desktop use the available width for both the
   battlefield and readable questions. Portrait keeps its familiar stack. */
@media (min-width:960px) and (orientation:landscape) and (min-height:561px){
  #segelDemo.on{flex-direction:row}
  .segelStage{flex:1 1 0;width:auto;max-width:none;max-height:none;min-height:0;margin:0;border-radius:0}
  .segelPanel{flex:0 0 42%;width:auto;max-width:600px;margin:0;
    padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(20px + env(safe-area-inset-bottom,0px))}
  .segelQHead{margin:0 0 14px}
  .segelCard .question{font-size:clamp(23px,2vw,28px)}
  .segelCard .ans{min-height:54px;font-size:21px}
}

/* Leave a readable question slot when long answer choices fill a short screen.
   The card then owns one scroll instead of clipping the prompt to zero height. */
@media (max-height:680px){
  .segelCard{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .segelCard .question{min-height:96px;flex:1 0 auto;overflow-y:visible}
}
.segelSound,.segelSpk{min-width:44px;min-height:44px}
.segelHint{min-height:44px}
@media(max-width:480px), (orientation:landscape) and (max-height:560px){
  .segelTop{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:6px}
  .segelTop>.iconBtn{grid-column:1;grid-row:1;min-width:44px;min-height:44px}
  .segelBanner{grid-column:2;grid-row:1;padding:7px 16px}
  .segelBanner small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .segelSound{grid-column:3;grid-row:1}
  .segelCount{grid-column:2;grid-row:2;justify-self:start;padding:6px 9px}
  .segelTop>.paPageLockButton{grid-column:2/4;grid-row:2;justify-self:end;min-height:32px}
  .segelDevControls{grid-column:1/-1}
}

/* Telefon melintang: pentas di kiri, soalan di kanan. Tanpa ini pentas 44%
   tinggi tinggal sejalur dan kad soalan hilang di bawah skrin. */
@media (orientation:landscape) and (max-height:560px){
  #segelDemo.on{flex-direction:row}
  .segelStage{flex:1 1 50%;max-width:none;min-height:0;max-height:none}
  .segelPanel{flex:1 1 50%;min-width:0;max-width:none;
    padding:calc(8px + env(safe-area-inset-top,0px)) 12px calc(8px + env(safe-area-inset-bottom,0px))}
  .segelQHead{margin:0 0 7px}
  .segelCard .question{font-size:19px}
  /* Melintang mengecilkan soalan tetapi tidak butang jawapan, jadi soalan
     berpilihan panjang (corak bentuk, padanan cerita) menolak baris bawah
     ke luar skrin. Butang dikecilkan juga di sini; potret tidak berubah. */
  .segelCard .answers{gap:8px}
  .segelCard .ans{font-size:16px;padding:11px 7px;border-radius:12px}
  .segelLock{display:none}
  .segelTag{top:10%}
  /* Melintang: tiada ruang untuk helaian separa, jadi ia menutup penuh. */
  .segelDone{top:0;padding-top:calc(12px + env(safe-area-inset-top,0px));
    background:rgb(7,18,34)}
}

/* ---------- final web/tablet overrides ----------
   These rules intentionally live after the historical phone/tablet rules
   above so the wide composition wins at its target breakpoints. */
@media (min-width:760px) and (orientation:landscape) and (min-height:561px){
  #segelDemo.on{flex-direction:row;align-items:stretch}
  .segelStage{
    flex:0 1 38%;width:auto;min-width:300px;max-width:none;min-height:0;
    max-height:none;margin:0;border-radius:0
  }
  .segelPanel{
    flex:1 1 62%;width:auto;min-width:400px;max-width:none;box-sizing:border-box;
    padding:clamp(18px,3vw,32px) clamp(12px,2.4vw,28px)
      calc(16px + env(safe-area-inset-bottom,0px))
  }
  .segelQHead{margin:0 0 clamp(9px,1.6vh,16px)}
  .segelCard .question{font-size:clamp(23px,2.2vw,30px)}
  .segelCard .ans{min-height:54px;font-size:clamp(19px,1.7vw,22px)}
  .segelTop{
    display:grid;grid-template-columns:44px minmax(0,1fr) 44px;
    gap:6px;box-sizing:border-box;max-width:100%;padding-inline:clamp(8px,1.5vw,18px)
  }
  .segelTop>.iconBtn{grid-column:1;grid-row:1;min-width:44px;min-height:44px}
  .segelBanner{grid-column:2;grid-row:1;padding-inline:clamp(12px,1.8vw,22px)}
  .segelBanner b{font-size:clamp(13px,1.5vw,16px)}
  .segelSound{grid-column:3;grid-row:1;min-width:44px;min-height:44px}
  .segelCount{grid-column:2;grid-row:2;justify-self:start;width:max-content;white-space:nowrap;font-size:clamp(11px,1.2vw,13.5px);padding-inline:8px}
  .segelTop>.paPageLockButton{grid-column:3;grid-row:2;justify-self:end;min-width:44px;min-height:44px}
}

@media (min-width:600px) and (orientation:portrait){
  .segelStage{flex-basis:clamp(190px,32dvh,300px);max-height:36dvh}
  .segelPanel{padding-inline:clamp(18px,4vw,32px)}
  .segelCard .question{font-size:clamp(23px,3.2vw,29px)}
}

/* Potret menggunakan satu garis battle yang stabil. Menukar tinggi arena pada
   setiap soalan membuat seluruh skrin melompat, jadi semua jenis soalan kini
   berkongsi tinggi responsif yang sama. Soalan pendek dikumpulkan di tengah
   kad; soalan panjang memakai ruang prompt dan hanya prompt itu yang menatal. */
@media (orientation:portrait){
  .segelStage{
    flex:0 0 clamp(230px,37dvh,350px);width:100%;height:auto;
    min-height:230px;max-height:350px
  }
  .segelPanel{
    flex:1 1 0;width:100%;min-height:0;max-height:none;overflow:visible
  }
  /* Header soalan dahulu dinaikkan 15px ke atas arena. Pada telefon ia
     menutup bahagian bawah artwork dan boleh membuat Petunjuk terasa seperti
     terapung di atas gambar. Simpan seluruh bar di dalam panel gelap. */
  .segelQHead{margin:0 0 9px}
  .segelCard{
    flex:1 1 0;min-height:0;max-height:none;overflow:visible;
    overscroll-behavior:contain
  }
  .segelCard .question{
    flex:1 1 0;min-height:84px;overflow-y:auto;overflow-x:hidden
  }
  .segelCard[data-question-layout="compact"]{justify-content:center}
  .segelCard[data-question-layout="compact"] .question{
    flex:0 0 auto;max-height:160px;overflow:visible
  }
}
@media (min-width:600px) and (orientation:portrait){
  .segelStage{flex-basis:clamp(280px,37dvh,380px);min-height:280px;max-height:380px}
}

/* Wide web question composition. Keep the card sized to its content so a
   short prompt does not leave a large empty stage between it and the answers.
   This is deliberately scoped to the existing wide layout; phone and tablet
   portrait keep the stacked composition above. */
@media (min-width:760px) and (orientation:landscape) and (min-height:561px){
  .segelPanel{justify-content:center}
  .segelQHead{width:min(100%,880px);margin-inline:auto}
  .segelCard{
    flex:0 1 auto;width:min(100%,880px);max-height:calc(100% - 48px);
    margin-block:0;margin-inline:auto;overflow-y:auto;overflow-x:hidden;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch
  }
  .segelCard .question{
    flex:0 0 auto;min-height:0;display:block;overflow:visible;
    padding:0;text-align:center
  }
  #segelDemo .segelCard #segelQuestion{overflow-x:clip;overflow-y:visible}
  .segelCard .question .segelPrompt{
    width:min(100%,700px);max-width:65ch;margin-inline:auto;
    padding:clamp(16px,2.2vh,28px) clamp(16px,2.5vw,30px) 0;
    text-align:center
  }
  .segelCard .question .segelPrompt > img,
  .segelCard .question .segelPrompt svg{max-width:100%}
  .segelCard .answers{
    width:min(100%,640px);max-width:640px;margin:clamp(18px,3vh,30px) auto 0;
    align-self:center;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px
  }
  .segelCard .ans{min-width:0;min-height:58px;padding-inline:14px;line-height:1.2}
  .segelCard .feedback{width:min(100%,640px);margin-inline:auto}

  /* Keep visual prompts large enough to read without changing their source
     proportions. The later fraction stylesheet has narrower mobile rules;
     this higher-specificity selector is the intentional wide override. */
  #segelDemo .segelCard #segelQuestion .segelPrompt .fraction-art{
    width:min(100%,380px);max-width:100%;margin:10px auto
  }
  #segelDemo .segelCard #segelQuestion .segelPrompt .fraction-art .fraction-svg{max-height:190px}
  #segelDemo .segelCard #segelQuestion .segelPrompt .paWrittenArithmetic{
    width:min(100%,390px);max-width:100%;margin:12px auto
  }

  /* Data visuals are teaching evidence and need room to be read. These
     selectors are semantic so icons, coin rows, and fraction art keep their
     existing sizing. The renderer's old inline max-width is overridden only
     for these chart types on the wide web layout. */
  #segelDemo .segelCard #segelQuestion .segelPrompt .paQuestionPictograph{
    display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;
    width:min(100%,480px) !important;max-width:480px !important;margin:12px auto 18px;
    font:700 clamp(18px,1.8vw,24px)/1.3 sans-serif !important;text-align:left
  }
  #segelDemo .segelCard #segelQuestion .segelPrompt .paQuestionPictograph > span:nth-child(2n){
    letter-spacing:.08em;white-space:normal;overflow-wrap:anywhere
  }
  #segelDemo .segelCard #segelQuestion .segelPrompt svg.paQuestionChart{
    display:block;width:min(100%,440px);max-width:440px !important;height:auto;
    margin:12px auto 18px
  }

  /* Interactive answer panels need their own internal flow and controls;
     never compress them into the two-column MCQ grid. */
  .segelCard:has(#segelAnswers .d1-fraction-answer) .answers{
    display:block;max-width:100%;overflow:visible;margin-top:12px
  }
  .segelCard:has(#segelAnswers .d1-fraction-answer) .d1-fraction-answer{
    max-width:640px;margin-inline:auto
  }
  #segelDemo .segelCard #segelAnswers.paGameAnswers{
    display:block;width:min(100%,640px);max-width:640px;overflow:visible;margin:12px auto 0
  }

  /* fraction-visuals-v2.css deliberately makes visual prompts a flexible
     scroll slot for short phones. On the wide card the card itself owns the
     scroll, so the prompt must retain its natural height. */
  #segelDemo .segelCard:has(#segelQuestion.hasFractionVisual) .question{
    flex:0 0 auto;min-height:0;max-height:none;overflow:visible
  }
}

/* Once the result is ready, give the result sheet the entire stage. The
   question panel must leave the flex layout so it cannot reserve a blank
   column behind the full-screen result backdrop. */
#segelDemo.segel-result-active .segelStage{
  flex:1 1 auto;width:100%;max-width:none;min-width:0;min-height:0;max-height:none;margin:0
}
#segelDemo.segel-result-active .segelPanel{display:none!important}

/* Darjah 1: sukatan cawan. Rajah dan arahan ringkas mesti muat pada
   telefon menegak supaya pilihan jawapan tidak menyembunyikan arahan. */
@media (orientation:portrait){
  #segelDemo .segelCard .question:has(.paCapacityCups){
    font-size:clamp(18px,5vw,21px);line-height:1.3;
    scrollbar-width:thin;scrollbar-color:#a7b5c8 transparent
  }
  #segelDemo .segelCard .question .segelPrompt .paCapacityCups{
    width:min(100%,310px);max-width:310px;margin:4px auto 10px
  }
  #segelDemo .segelCard .question .segelPrompt .paCapacityCups svg{
    width:100%;height:auto;max-height:142px
  }
}

/* Tahun 1 Unit 6: original 2.5D vector scenes, kept readable on mobile. */
.paU6Scene{width:min(100%,340px);max-width:340px;margin:5px auto 11px}
.paU6Scene svg{display:block;width:100%;height:auto;max-height:167px;filter:drop-shadow(0 3px 5px rgba(40,77,116,.10))}
.paU6Scene svg text{font:900 16px "Nunito",system-ui,sans-serif;fill:#243d5e;text-anchor:middle}
@media (orientation:portrait){
  #segelDemo .segelCard .question:has(.paU6Scene){
    font-size:clamp(18px,4.9vw,21px);line-height:1.28;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain
  }
  #segelDemo .segelCard .question .segelPrompt:has(.paU6Scene){padding:7px 12px 9px}
  #segelDemo .segelCard .question .segelPrompt .paU6Scene{margin:2px auto 9px}
  #segelDemo .segelCard .question .segelPrompt .paU6Scene svg{max-height:151px}
}
/* Telefon pendek (cth. 320×568): kecilkan sedikit visual dan teks supaya soalan, rajah dan
   jawapan muat tanpa skrol dalam kad (2026-10-26). */
@media (orientation:portrait) and (max-height:600px){
  #segelDemo .segelCard .question:has(.paU6Scene){font-size:16px;line-height:1.22}
  #segelDemo .segelCard .question .segelPrompt .paU6Scene{margin:0 auto 6px}
  #segelDemo .segelCard .question .segelPrompt .paU6Scene svg{max-height:104px}
}
@media (prefers-reduced-motion:reduce){
  .paU6Scene svg,.paU6Scene *{animation:none!important;transition:none!important}
}

/* Persistent, explicit incorrect-answer feedback. */
#segelAnswers .ans.no{position:relative;padding-right:2.6rem}
#segelAnswers .ans.no::after{content:'✕';position:absolute;right:.65rem;top:50%;transform:translateY(-50%);font-size:2rem;font-weight:900;color:#fff}
#segelAnswers .paTypedInput[aria-invalid="true"]{border:3px solid #bb2445;background:#fff0f3;color:#8e1932;text-decoration-line:underline;text-decoration-color:#bb2445;text-decoration-thickness:3px;text-underline-offset:7px}
#segelAnswers .paTypedAnswer:has([aria-invalid="true"]) .paTypedNote{color:#a01936;font-size:1rem;font-weight:800}

/* ---------- Kilauan crest BERJAYA + bintang emas ----------
   Satu jujukan sahaja: crest masuk, bintang emas timbul sekali (tiada pop
   kedua bila placeholder muncul), kemudian bintang terus berkilau dan
   sepanduk disapu cahaya secara berkala. */
#segelDemo .segelDone:not([hidden]) .resultCrest{animation:paCrestIn .62s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes paCrestIn{0%{opacity:0;transform:translateY(14px) scale(.72)}60%{opacity:1;transform:translateY(0) scale(1.05)}100%{opacity:1;transform:none}}
#segelDemo .resultCrest .resultBanner{overflow:hidden;border-radius:10px}
#segelDemo .resultCrest .resultBanner::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:18%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,246,206,0) 0,rgba(255,246,206,.18) 30%,rgba(255,250,225,.62) 50%,rgba(255,246,206,.18) 70%,rgba(255,246,206,0) 100%);filter:blur(2px);
  transform:translateX(-140%) skewX(-18deg);mix-blend-mode:screen;
  animation:paBannerSheen 3.4s ease-in-out .9s infinite
}
@keyframes paBannerSheen{0%{transform:translateX(-160%) skewX(-18deg)}38%,100%{transform:translateX(700%) skewX(-18deg)}}
#segelDemo .resultCrest .resultBanner b{animation:paBannerGlow 3.4s ease-in-out .9s infinite}
@keyframes paBannerGlow{0%,100%{text-shadow:0 3px 0 #71420a,0 6px 14px #000b}18%{text-shadow:0 3px 0 #71420a,0 0 18px rgba(255,226,140,.85),0 6px 14px #000b}}

#segelDemo .resultCrest .resultStars i{position:relative}
#segelDemo .resultCrest .resultStars i.on.pop,
#segelDemo .resultCrest .resultStars.stars-pending i.on.pop{
  animation:paGoldStarReveal .72s cubic-bezier(.16,.9,.24,1) both,
            paGoldStarShine 2.6s ease-in-out infinite;
  animation-delay:var(--popDelay,0ms),calc(var(--popDelay,0ms) + .75s)
}
@keyframes paGoldStarShine{
  0%,100%{transform:scale(1);filter:drop-shadow(0 2px 9px rgba(242,205,120,.55)) brightness(1)}
  50%{transform:scale(1.07);filter:drop-shadow(0 0 16px rgba(255,222,110,.95)) brightness(1.12)}
}
#segelDemo .resultCrest .resultStars i.on::after{
  content:"";position:absolute;top:-6%;right:-4%;width:42%;height:42%;pointer-events:none;opacity:0;
  background:
    linear-gradient(90deg,transparent 44%,#fff 50%,transparent 56%),
    linear-gradient(0deg,transparent 44%,#fff 50%,transparent 56%),
    radial-gradient(circle,#fff 0 9%,rgba(255,240,180,.7) 16%,transparent 40%);
  filter:drop-shadow(0 0 4px rgba(255,236,160,1));
  animation:paStarTwinkle 2.6s ease-in-out infinite;
  animation-delay:calc(var(--popDelay,0ms) + 1.1s)
}
#segelDemo .resultCrest .resultStars i.on:nth-child(2)::after{top:4%;right:auto;left:-6%}
@keyframes paStarTwinkle{0%,62%,100%{opacity:0;transform:scale(.2) rotate(0)}74%{opacity:1;transform:scale(1) rotate(45deg)}86%{opacity:0;transform:scale(.3) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){
  #segelDemo .segelDone:not([hidden]) .resultCrest,
  #segelDemo .resultCrest .resultBanner::after,
  #segelDemo .resultCrest .resultBanner b,
  #segelDemo .resultCrest .resultStars i.on.pop,
  #segelDemo .resultCrest .resultStars i.on::after{animation:none}
  #segelDemo .resultCrest .resultBanner::after,#segelDemo .resultCrest .resultStars i.on::after{display:none}
}