/* pokok.css - Gaya permainan POKOK ISLAM (diskop .pk). Menggantikan Tailwind CDN dalam sumber asal
   dengan CSS tempatan; warna, kecerunan dan animasi asal dikekalkan. Saiz teks dalam em (Bhg 16A). */
.pk { --pk-hijau: #00ff88; --pk-gelap: #0a1f1a; --pk-teks: #ecfdf5; --pk-pudar: #a7f3d0; --pk-emas: #fde047;
  --iv-sp-latar: #0a1f1a;
  position: relative; overflow: hidden; border-radius: var(--radius, 14px); color: var(--pk-teks);
  background: linear-gradient(160deg, #0a1f1a 0%, #0d2b1f 40%, #132e1c 100%); min-height: 620px;
  font-family: 'DM Sans', Inter, system-ui, sans-serif; display: flex; flex-direction: column; }
.pk *, .pk *::before, .pk *::after { box-sizing: border-box; }
.pk [hidden] { display: none !important; }
svg.pk-i { width: 1.2em; height: 1.2em; flex: 0 0 auto; vertical-align: -.2em; }
.pk button { font: inherit; cursor: pointer; }

/* Bar atas (rangka: tajuk + skrin penuh) */
.pk-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(0,0,0,.35); border-bottom: 1px solid rgba(0,255,136,.18); position: relative; z-index: 5; }
.pk-logo { font-weight: 900; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 6px; color: #fff; margin-right: auto; }
.pk-logo svg { width: 1.4em; height: 1.4em; }
.pk-bar .iv-sp-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(0,255,136,.35); background: rgba(0,0,0,.35); color: #d1fae5; border-radius: 10px; padding: 6px 10px; min-height: 36px; }
.pk-bar .iv-sp-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .pk-bar .iv-sp-btn span { display: none; } }

.pk-skrin { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; position: relative; }
.pk-lajur { width: 100%; max-width: 28rem; position: relative; z-index: 1; }

/* Zarah latar (asal: #start-particles) */
.pk-zarah { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pk-zarah i { position: absolute; border-radius: 50%; background: rgba(0,255,136,.3); animation: pkFloat 4s ease-in-out infinite; }

@keyframes pkSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pkGlow { 0%,100% { box-shadow: 0 0 20px rgba(0,255,136,.4); } 50% { box-shadow: 0 0 40px rgba(0,255,136,.8); } }
@keyframes pkFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pkGrow { 0% { transform: scale(.8); } 100% { transform: scale(1); } }
.pk-slide { animation: pkSlideUp .5s ease-out both; }
.pk-glow { animation: pkGlow 2s ease-in-out infinite; }
.pk-float { animation: pkFloat 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pk-slide, .pk-glow, .pk-float, .pk-zarah i { animation: none; } }

.pk-kad { border-radius: 1.5rem; padding: 2em 1.5em; text-align: center; margin-bottom: 1.5em; background: rgba(10,31,26,.9); border: 1px solid rgba(0,255,136,.3); }
.pk-kad-ikon { display: inline-flex; margin-bottom: .5em; }
.pk-kad-ikon svg { width: 3.4em; height: 3.4em; }
.pk-h1 { font-size: 1.9em; font-weight: 900; letter-spacing: -.02em; margin: 0; color: #fff; line-height: 1.15; }
.pk-sub { margin: .7em 0 0; font-size: 1em; color: var(--pk-pudar); line-height: 1.5; }
.pk-sub b { color: var(--pk-emas); }
.pk-btns { display: grid; gap: .75em; }
.pk-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: .9em 1.2em; border-radius: .9em; font-weight: 700; font-size: 1.05em; border: 0; transition: transform .2s, box-shadow .2s, filter .2s; min-height: 48px; text-decoration: none; }
.pk-btn:hover { transform: scale(1.03); box-shadow: 0 10px 20px rgba(16,185,129,.3); }
.pk-btn.hijau { background: linear-gradient(180deg, #22c55e, #059669); color: #fff; }
.pk-btn.emas { background: linear-gradient(180deg, #fde047, #eab308); color: #3f2d00; }
.pk-btn.gelap { background: rgba(0,0,0,.45); color: #d1fae5; border: 1px solid rgba(0,255,136,.3); font-size: .98em; }
.pk-btn:focus-visible, .pk-slot button:focus-visible, .pk-benih:focus-visible, .pk-opsyen:focus-visible { outline: 3px solid #fde047; outline-offset: 2px; }

/* Borang murid */
.pk-borang { border-radius: 1.5rem; padding: 1.5em; display: grid; gap: 1em; background: rgba(10,31,26,.85); border: 1px solid rgba(0,255,136,.2); }
.pk-borang label { display: block; font-weight: 600; margin-bottom: .3em; color: #d1fae5; }
.pk-borang input { width: 100%; padding: .75em 1em; background: rgba(0,0,0,.4); border: 2px solid #047857; border-radius: .9em; color: #fff; font: inherit; outline: none; min-height: 46px; }
.pk-borang input:focus { border-color: #34d399; }
.pk-borang input::placeholder { color: #9ca3af; }
.pk-pautan { background: none; border: 0; color: var(--pk-pudar); text-decoration: underline; padding: 6px; justify-self: center; }

/* Skrin permainan */
.pk-hud { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: .75em 1em; background: rgba(0,0,0,.5); border-bottom: 1px solid #065f46; }
.pk-hud > div { display: flex; align-items: center; gap: 6px; }
.pk-hud svg { width: 1.5em; height: 1.5em; }
.pk-wang { color: #6ee7b7; font-weight: 800; font-size: 1.3em; }
.pk-hari { color: #fff; font-weight: 800; }
.pk-sasaran { font-size: .9em; color: var(--pk-emas); font-weight: 700; }
.pk-main { flex: 1; display: flex; flex-direction: column; gap: 1em; padding: 1em; background: linear-gradient(180deg, #0a1f1a, #1a3d2a); }
@media (min-width: 1024px) { .pk-main { flex-direction: row; } .pk-kedai { width: 18rem; flex: 0 0 18rem; } }
.pk-taman { flex: 1; min-width: 0; }
.pk-h2 { font-size: 1.22em; font-weight: 800; margin: 0 0 .6em; color: #fff; display: flex; align-items: center; gap: 6px; }
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75em; }
.pk-slot { border-radius: 1em; padding: .8em .4em; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 2px solid #065f46; background: rgba(0,0,0,.3); min-height: 140px; transition: transform .3s; }
.pk-slot:hover { transform: scale(1.04); }
.pk-slot .pk-pokok { display: inline-flex; }
.pk-slot .pk-pokok svg { width: 3em; height: 3em; }
.pk-slot.kosong .pk-pokok { opacity: .4; }
.pk-slot .nm { color: #fff; font-size: .8em; font-weight: 700; margin-top: .3em; }
.pk-slot .st { color: #34d399; font-size: .72em; display: inline-flex; align-items: center; gap: 3px; }
.pk-slot .kos { color: #059669; font-size: .78em; margin-top: .2em; }
.pk-slot .dsr { color: #93c5fd; font-size: .72em; display: inline-flex; align-items: center; gap: 3px; margin-top: .2em; }
.pk-slot .bt { display: flex; gap: 4px; margin-top: .45em; }
.pk-slot .bt button { border: 0; color: #fff; font-size: .78em; padding: .35em .6em; border-radius: .5em; display: inline-flex; align-items: center; gap: 3px; min-height: 32px; }
.pk-siram { background: #2563eb; } .pk-siram:hover { background: #3b82f6; }
.pk-jual { background: #ca8a04; } .pk-jual:hover { background: #eab308; }
.pk-esok { margin-top: 1em; width: 100%; padding: .8em; background: #047857; color: #fff; font-weight: 800; border: 0; border-radius: .9em; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform .2s, background .2s; min-height: 48px; }
.pk-esok:hover { background: #059669; transform: scale(1.02); }
.pk-esok svg { width: 1.3em; height: 1.3em; }
.pk-kedai { display: grid; gap: .6em; align-content: start; }
.pk-benih { width: 100%; display: flex; align-items: center; gap: .75em; padding: .75em; border-radius: .9em; background: rgba(0,0,0,.4); border: 1px solid #065f46; color: inherit; text-align: left; transition: border-color .2s, background .2s; }
.pk-benih:hover { border-color: #10b981; background: rgba(0,0,0,.6); }
.pk-benih .pk-pokok svg { width: 2.2em; height: 2.2em; }
.pk-benih .isi { flex: 1; min-width: 0; }
.pk-benih .isi b { display: block; color: #fff; font-size: .9em; }
.pk-benih .isi small { color: #34d399; font-size: .78em; }
.pk-benih .hrg { color: var(--pk-emas); font-weight: 800; font-size: .9em; }
.pk-petua { margin-top: .5em; padding: .75em; border-radius: .9em; background: rgba(0,0,0,.3); border: 1px solid #065f46; }
.pk-petua p { margin: 0; }
.pk-petua .t { font-weight: 800; font-size: .9em; margin-bottom: .25em; display: flex; align-items: center; gap: 5px; color: var(--pk-emas); }
.pk-petua .x { color: #a7f3d0; font-size: .82em; line-height: 1.55; }

/* Lapisan (kuiz, menang, papan skor) - dalam .pk supaya kekal dalam skrin penuh */
.pk-lapis { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.pk-lapis.kuiz { background: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pk-lapis.menang { background: radial-gradient(ellipse at center, rgba(0,80,40,.95), rgba(0,20,10,.98)); }
.pk-lapis.papan { background: radial-gradient(ellipse at center, rgba(0,40,80,.95), rgba(0,10,20,.98)); }
.pk-kotak { width: 100%; max-width: 28rem; border-radius: 1.5rem; padding: 1.75em 1.4em; background: rgba(10,31,26,.95); border: 2px solid rgba(0,255,136,.4); text-align: center; margin: auto; }
.pk-kotak.putih { max-width: 32rem; background: #fff; color: #1f2937; border-color: rgba(0,255,136,.3); box-shadow: 0 25px 50px rgba(0,0,0,.35); }
.pk-kotak .pk-kad-ikon svg { width: 3.6em; height: 3.6em; }
.pk-kuiz-t { font-weight: 800; margin: 0 0 1em; color: #047857; }
.pk-soalan { font-size: 1.12em; font-weight: 700; color: #1f2937; margin: 0 0 1em; line-height: 1.55; }
.pk-opsyen-senarai { display: grid; gap: .6em; }
.pk-opsyen { width: 100%; padding: .75em 1.1em; border-radius: .9em; border: 2px solid #34d399; background: #fff; color: #1f2937; text-align: left; font-weight: 600; transition: background .2s; min-height: 46px; }
.pk-opsyen:hover:not(:disabled) { background: #ecfdf5; }
.pk-opsyen:disabled { cursor: default; opacity: .85; }
.pk-opsyen.betul { background: #d1fae5; border-color: #059669; }
.pk-opsyen.salah { background: #fee2e2; border-color: #ef4444; }
.pk-maklum { margin: 1em 0 0; font-weight: 800; font-size: 1.15em; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pk-maklum.ok { color: #059669; } .pk-maklum.no { color: #ef4444; }
.pk-menang-t { font-size: 1.8em; font-weight: 900; margin: 0; color: #fff; }
.pk-skor-akhir { font-size: 1.1em; margin: .6em 0 0; color: #6ee7b7; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pk-simpan { font-size: .85em; color: var(--pk-pudar); margin: .6em 0 0; min-height: 1.3em; }
.pk-dua { display: flex; gap: .75em; margin-top: 1.5em; }
.pk-dua .pk-btn { flex: 1; font-size: .95em; padding: .75em .6em; }
.pk-papan-desc { margin: .4em 0 1.2em; font-size: .88em; color: var(--pk-pudar); }
.pk-senarai { display: grid; gap: .6em; max-height: 22rem; overflow-y: auto; margin-bottom: .5em; text-align: left; }
.pk-baris { padding: .8em; border-radius: .9em; border: 1px solid #047857; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.pk-baris .kiri { display: flex; align-items: center; gap: .6em; flex: 1; min-width: 0; }
.pk-baris .kiri svg { width: 1.8em; height: 1.8em; flex: 0 0 auto; }
.pk-baris b { color: #fff; display: block; overflow-wrap: anywhere; }
.pk-baris small { color: #34d399; font-size: .78em; overflow-wrap: anywhere; }
.pk-baris .kanan { text-align: right; flex: 0 0 auto; }
.pk-baris .kanan b { color: var(--pk-emas); font-size: 1.1em; }
.pk-kosong { color: #6ee7b7; text-align: center; padding: 1em 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pk-kaki { text-align: center; font-size: .78em; color: rgba(209,250,229,.75); padding: 10px 12px 14px; line-height: 1.5; }

/* Skrin penuh: isi tinggi skrin */
.pk.iv-skrin-penuh { border-radius: 0; min-height: 100%; }