/* spartan.css - gaya permainan asal Cabaran Spartan (Canva, Muhammad Fakhrul Mu'iz Bin Mohd Azmy), diskop .sp.
   Saiz teks ditukar ke em (Bhg 16A); glif emoji/Unicode asal ditukar kepada ikon SVG. */
.sp {
  --sp-navy:#071b3a; --sp-maroon:#7e1d32; --sp-maroon2:#a82a42; --sp-gold:#f2c65b; --sp-cream:#fffaf0;
  --sp-ink:#102347; --sp-green:#168451; --sp-red:#bf3044;
  --iv-sp-latar:#071b3a;
  position: relative; border-radius: var(--radius, 16px); overflow: hidden; color: var(--sp-ink);
  background:
    radial-gradient(circle at 7% 10%, rgba(242,198,91,.18), transparent 22%),
    radial-gradient(circle at 94% 84%, rgba(168,42,66,.3), transparent 23%),
    linear-gradient(135deg, #06162f, #102d59 55%, #43162c);
  font-family: Cairo, Tajawal, "Segoe UI", Inter, sans-serif;
}
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
.sp button, .sp input { font: inherit; }
.sp button { cursor: pointer; }
.sp button:focus-visible, .sp input:focus-visible { outline: 3px solid var(--sp-gold); outline-offset: 3px; }
.sp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; color: #fff; }
.sp-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; letter-spacing: .04em; font-size: .9em; color: var(--sp-gold); min-width: 0; }
.sp-logo svg { width: 20px; height: 20px; flex: none; }
.sp .iv-sp-btn { color: #fff; }
.sp-isi { padding: 6px 24px 24px; }
.sp-frame { width: 100%; max-width: 980px; margin: auto; position: relative; }
.sp-bintik { position: absolute; color: var(--sp-gold); opacity: .65; width: 26px; height: 26px; animation: sp-glow 3s ease-in-out infinite; pointer-events: none; }
.sp-bintik.a { left: 1%; top: 3%; } .sp-bintik.b { right: 1%; bottom: 5%; animation-delay: 1s; }
.sp-panel { overflow: hidden; border: 1px solid rgba(255,255,255,.65); border-radius: 30px; background: rgba(255,250,240,.98); box-shadow: 0 24px 58px rgba(0,0,0,.28); position: relative; }
.sp-hero, .sp-arahan, .sp-keputusan, .sp-semakan { padding: 46px 38px; }
.sp-crest { width: 70px; height: 82px; margin: 0 auto 14px; display: grid; place-items: center; color: var(--sp-gold);
  clip-path: polygon(50% 0,94% 16%,88% 70%,50% 100%,12% 70%,6% 16%); background: linear-gradient(145deg, var(--sp-maroon), #481224); box-shadow: 0 8px 18px rgba(126,29,50,.28); }
.sp-crest svg { width: 36px; height: 36px; }
.sp-laurel { display: flex; justify-content: center; gap: 10px; color: #a57613; margin-bottom: 6px; }
.sp-laurel svg { width: 18px; height: 18px; }
.sp h1.sp-tajuk, .sp .sp-tajuk { margin: 0 0 9px; font-size: 2.1em; line-height: 1.14; color: var(--sp-navy); text-align: center; font-weight: 900; }
.sp h2 { margin: 0 0 14px; font-size: 1.7em; color: var(--sp-navy); font-weight: 900; line-height: 1.2; }
.sp h3 { margin: 0; }
.sp p { margin-top: 0; }
.sp .arabic-title, .sp .arabic, .sp .arabic-copy { font-family: "Amiri", Tahoma, "Times New Roman", serif; direction: rtl; text-align: right; }
.sp .arabic-title { text-align: center; color: var(--sp-maroon); font-size: 1.45em; font-weight: 800; line-height: 1.7; }
.sp .subtitle { text-align: center; color: #385576; font-size: 1.08em; font-weight: 800; }
.sp-form-grid { max-width: 690px; margin: 30px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
.sp label { display: block; margin-bottom: 7px; font-weight: 800; color: #193d69; }
.sp input { width: 100%; padding: 14px 15px; border: 2px solid #cad9e8; border-radius: 14px; background: #fff; color: var(--sp-ink); min-height: 48px; }
.sp-error { min-height: 26px; margin: 14px auto 0; max-width: 690px; color: var(--sp-red); font-weight: 800; text-align: center; }
.sp-button-row { margin-top: 24px; display: flex; gap: 11px; align-items: center; justify-content: center; flex-wrap: wrap; }
.sp-btn { border: 0; border-radius: 14px; padding: 13px 18px; font-weight: 900; min-height: 46px; transition: transform .18s, filter .18s, box-shadow .18s; }
.sp-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); }
.sp-btn:disabled { opacity: .52; cursor: not-allowed; }
.sp-btn.utama { color: #fff; background: linear-gradient(135deg, var(--sp-maroon), var(--sp-maroon2)); box-shadow: 0 9px 18px rgba(126,29,50,.28); }
.sp-btn.emas { color: #302009; background: var(--sp-gold); box-shadow: 0 9px 18px rgba(183,133,23,.25); }
.sp-btn.kelabu { color: #17365e; background: #e1eaf2; }
.sp-arahan ol { padding-left: 1.4em; margin: 0; }
.sp-arahan li { margin: 14px 0; line-height: 1.7; }
.sp-arahan b { color: var(--sp-maroon); }
.sp-kepala { padding: 18px 22px; background: linear-gradient(110deg, var(--sp-navy), #174d7b); color: #fff; }
.sp-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.sp-status div { border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 9px; background: rgba(255,255,255,.1); font-size: .9em; font-weight: 800; overflow-wrap: anywhere; }
.sp-trek { height: 11px; background: #dbe7f1; } .sp-trek-isi { height: 100%; background: linear-gradient(90deg, var(--sp-gold), #f5df92); transition: width .4s ease; }
.sp-soalan-kawasan { padding: 33px; }
.sp-label-soalan { font-size: .82em; letter-spacing: .08em; color: var(--sp-maroon); font-weight: 900; text-transform: uppercase; }
.sp-soalan { margin: 10px 0 24px; font-size: 1.55em; font-weight: 900; line-height: 1.85; }
.sp-pilihan { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.sp-opsyen { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px; border: 2px solid #d4e1ed; border-radius: 17px; background: #fff; color: #193a62; text-align: right; font-weight: 800; transition: .18s; min-height: 56px; }
.sp-opsyen .arabic { flex: 1; font-size: 1.2em; line-height: 1.7; }
.sp-opsyen:hover:not(:disabled), .sp-opsyen.selected { border-color: var(--sp-maroon); background: #fff5f5; transform: translateY(-2px); }
.sp-opsyen:disabled { cursor: not-allowed; }
.sp-huruf { flex: none; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--sp-navy); font-size: .86em; }
.sp .correct { border-color: var(--sp-green) !important; background: #e9f8ef !important; color: #12653d !important; }
.sp .wrong { border-color: var(--sp-red) !important; background: #fff0f1 !important; color: #982a3c !important; }
.sp-maklum { margin-top: 20px; padding: 13px 16px; border-radius: 14px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.sp-maklum svg { width: 20px; height: 20px; flex: none; }
.sp-maklum.good { background: #e8f8ed; color: #12643d; } .sp-maklum.bad { background: #fff0f1; color: #a02639; }
.sp-terang { margin-top: 16px; padding: 18px; border-left: 5px solid var(--sp-gold); border-radius: 12px; background: #fff4d7; line-height: 1.7; }
.sp-terang[hidden] { display: none; }
.sp-terang h3 { margin-bottom: 9px; color: #6d5015; font-size: 1.05em; }
.sp-terang p { margin: 8px 0; }
.sp-nav { margin-top: 24px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sp-nav-kanan { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-cincin { width: 156px; height: 156px; margin: 20px auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--sp-maroon) var(--score), #dce7ef 0); position: relative; }
.sp-cincin::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--sp-cream); }
.sp-cincin strong { z-index: 1; color: var(--sp-navy); font-size: 1.5em; }
.sp-keputusan { text-align: center; }
.sp-pangkat { display: inline-block; margin: 12px; padding: 9px 18px; border-radius: 999px; background: #fff0ba; color: #72530a; font-weight: 900; }
.sp-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.sp-stat { padding: 10px 15px; border-radius: 12px; background: #eaf1f7; font-weight: 800; }
.sp-simpan { font-size: .92em; color: #52647f; min-height: 1.4em; }
.sp-item { margin: 14px 0; padding: 18px; border: 1px solid #d8e2eb; border-radius: 16px; background: #fff; }
.sp-item h3 { font-size: 1em; line-height: 1.7; }
.sp-item p { margin: 6px 0; line-height: 1.7; }
.sp-ok, .sp-no { font-weight: 900; display: inline-flex; align-items: center; gap: 6px; }
.sp-ok { color: var(--sp-green); } .sp-no { color: var(--sp-red); }
.sp-ok svg, .sp-no svg { width: 18px; height: 18px; }
.sp .ar-i { font-family: "Amiri", Tahoma, serif; font-size: 1.12em; }
.sp-kaki { text-align: center; color: rgba(255,255,255,.78); font-size: .85em; padding: 0 14px 16px; line-height: 1.55; }
.sp-kaki b { color: var(--sp-gold); }
.sp .shake { animation: sp-shake .34s linear; } .sp .pop { animation: sp-pop .38s ease; }
@keyframes sp-shake { 25% { transform: translateX(7px); } 75% { transform: translateX(-7px); } }
@keyframes sp-pop { 50% { transform: scale(1.015); } }
@keyframes sp-glow { 50% { transform: scale(1.3); opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sp-bintik, .sp .shake, .sp .pop { animation: none; } }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1024px) {
  .sp-isi { padding: 4px 10px 14px; }
  .sp-hero, .sp-arahan, .sp-keputusan, .sp-semakan, .sp-soalan-kawasan { padding: 25px 16px; }
  .sp-panel { border-radius: 22px; }
  .sp h1.sp-tajuk, .sp .sp-tajuk { font-size: 1.6em; }
  .sp h2 { font-size: 1.4em; }
  .sp-soalan { font-size: 1.3em; }
  .sp-form-grid, .sp-pilihan { grid-template-columns: 1fr; }
  .sp-status { grid-template-columns: 1fr 1fr; }
  .sp-nav, .sp-nav-kanan, .sp-nav .sp-btn, .sp-nav-kanan .sp-btn { width: 100%; }
  .sp-bintik { display: none; }
}
/* Skrin penuh: kandungan boleh skrol */
.sp.iv-skrin-penuh { overflow-y: auto; border-radius: 0; }