@font-face { font-family: 'Lilita One'; src: url('../assets/fonts/lilita.woff2') format('woff2'); font-display: block; }
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --krim: #fff4dc; --coklat: #4a2a12; --garis: #3a1c08; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #2a1446; font-family: 'Lilita One', sans-serif; color: #fff; user-select: none; }
#cv { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.skrin { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(10px + var(--sat)) calc(10px + var(--sar)) calc(10px + var(--sab)) calc(10px + var(--sal)); }
.hidden { display: none !important; }

/* Butang: teks putih, garis 1px, kandungan di tengah */
.btn { font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #fff; border: 2px solid var(--garis); border-radius: 14px;
  padding: 10px 18px; font-size: 18px; cursor: pointer; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; box-shadow: 0 4px 0 rgba(0,0,0,.35); line-height: 1; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn.besar { font-size: 26px; padding: 16px 34px; border-width: 3px; }
.btn.bulat { width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 20px; flex: none; }
.btn.kecilbtn { font-size: 14px; padding: 7px 12px; border-radius: 10px; }
.hijau { background: linear-gradient(#4ade80, #16a34a); } .merah { background: linear-gradient(#f87171, #dc2626); } .ungu { background: linear-gradient(#c084fc, #7c3aed); }
.biru { background: linear-gradient(#60a5fa, #2563eb); } .oren { background: linear-gradient(#fdba74, #ea580c); } .kelabu { background: linear-gradient(#a8a29e, #57534e); }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 18px; border: 2px solid var(--garis);
  background: rgba(30,10,40,.75); color: #fff; font-size: 17px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill.bintang { color: #ffd23f; }

/* Panel krim: teks coklat gelap tanpa garis */
.panel { margin: auto; flex: none; width: min(420px, 100%); background: var(--krim); color: var(--coklat); border: 3px solid var(--garis); border-radius: 22px; padding: 22px 18px; text-align: center; box-shadow: 0 10px 0 rgba(0,0,0,.3); }
.panel h2 { font-size: 28px; margin-bottom: 6px; font-weight: normal; }
.panel p { font-size: 16px; margin: 6px 0; } .panel .kecil { font-size: 14px; opacity: .85; }
.baris2 { display: flex; gap: 10px; justify-content: center; margin-top: 12px; } .baris2 .btn { flex: 1; }
.meter { height: 18px; border-radius: 9px; border: 2px solid var(--garis); background: #e9d8b6; overflow: hidden; margin: 14px 0 6px; }
#micMeter { height: 100%; width: 0; background: linear-gradient(90deg, #22c55e, #facc15, #ef4444); transition: width .06s; }
.notaBesar { font-size: 54px; margin: 4px 0; }

/* Tajuk */
#tajuk { justify-content: center; gap: 40px; background: #2a1446 url('../assets/img/ui/title_bg.jpg') center / cover no-repeat; z-index: 2; }
.logoImg { width: min(96vw, 640px); height: auto; display: block; margin: 0 auto; }
.logo { text-align: center; line-height: .9; filter: drop-shadow(0 6px 0 rgba(0,0,0,.4)); }
.logo .l3 { margin-top: 14px; font-size: 20px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

/* Senarai lagu */
.atas { width: min(520px, 100%); display: flex; align-items: center; gap: 8px; }
.seg { display: flex; justify-content: center; }
.seg button { font-family: inherit; font-size: 15px; color: #fff; padding: 8px 12px; border: 2px solid var(--garis); background: #4c2a6e; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.seg button:first-child { border-radius: 12px 0 0 12px; } .seg button:last-child { border-radius: 0 12px 12px 0; } .seg button + button { border-left: 0; }
.seg button.on { background: linear-gradient(#fbbf24, #f59e0b); }
.tajukSenarai { margin: 14px 0 10px; font-size: 26px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 3px 0 #000; }
.kadLagu { width: min(520px, 100%); flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; }
.kad { display: flex; align-items: center; gap: 12px; background: var(--krim); color: var(--coklat); border: 2px solid var(--garis); border-radius: 18px; padding: 10px 12px; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.kad .ikon { width: 54px; height: 54px; border-radius: 14px; border: 2px solid var(--garis); display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; flex: none; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.kad .isi { flex: 1; min-width: 0; } .kad .t { font-size: 20px; } .kad .s { font-size: 13px; opacity: .8; } .kad .b { color: #9a3412; font-size: 16px; letter-spacing: 1px; }
.kad .btn { padding: 10px 16px; }

/* Nyanyi */
#nyanyi { padding-left: 0; padding-right: 0; }
#nyanyi .atas { padding: 0 10px; } #nyanyi .tajukLagu { flex: 1; min-width: 0; } #nyanyi .skor { color: #ffd23f; min-width: 70px; }
.suis { display: flex; gap: 8px; margin-top: 8px; }
#bar { width: 100%; height: 34vh; margin-top: 8px; display: block; }
.lirik { position: absolute; left: 0; right: 0; bottom: calc(18px + var(--sab)); padding: 14px 12px; text-align: center; background: linear-gradient(rgba(20,6,30,0), rgba(20,6,30,.85) 30%); }
.lirik .l1 { font-size: clamp(26px, 7vw, 40px); line-height: 1.15; min-height: 1.2em; }
.lirik .l2 { font-size: clamp(18px, 4.6vw, 26px); opacity: .6; margin-top: 6px; min-height: 1.2em; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.kata { color: #fff; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 3px 0 #000; transition: color .08s; }
.kata.on { color: #ffd23f; }
.pujian { position: absolute; top: 44%; left: 0; right: 0; text-align: center; font-size: 34px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 4px 0 #000; }
.pujian.on { opacity: 1; transform: scale(1.15); }
.kira { position: absolute; top: 42%; left: 0; right: 0; text-align: center; font-size: 110px; color: #ffd23f; -webkit-text-stroke: 3px #3a1c08; pointer-events: none; }

/* Keputusan */
.kTajuk { font-size: 24px; }
.bintangBesar { font-size: 50px; letter-spacing: 4px; margin: 6px 0; color: #a8946c; }
.bintangBesar i { font-style: normal; display: inline-block; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.8,.5,1); }
.bintangBesar i.on { color: #f59e0b; }
.bintangBesar i { text-shadow: -1px -1px 0 #5a2d0c, 1px -1px 0 #5a2d0c, -1px 1px 0 #5a2d0c, 1px 1px 0 #5a2d0c; } .bintangBesar i.muncul { transform: scale(1); }
.kPeratus { font-size: 48px; }
.kStat { display: flex; justify-content: space-around; margin: 10px 0; }
.kStat div { display: flex; flex-direction: column; } .kStat span { font-size: 13px; opacity: .8; } .kStat b { font-size: 22px; font-weight: normal; }



.spacer { flex: 1; }
.lobi { width: 100%; height: 30vh; flex: none; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; cursor: pointer; }
.gelembung { background: var(--krim); color: var(--coklat); border: 2px solid var(--garis); border-radius: 16px; padding: 6px 12px; font-size: 15px; position: relative; max-width: 90%; text-align: center; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.gelembung::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--garis); border-bottom: 0; }
.helaian { width: min(560px, 100%); flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; background: rgba(24,8,36,.82); border: 2px solid var(--garis); border-radius: 20px 20px 14px 14px; padding: 10px; }
.pilihBaris { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.pilihBaris .seg { flex: 1; } .pilihBaris .seg button { flex: 1; padding: 8px 6px; }
.seg.lebar button { flex: 1; padding: 9px 4px; font-size: 14px; }
.kadLagu { width: 100%; }
.kad.kunci { filter: saturate(.35); opacity: .85; }
.pill.kecil { height: 30px; font-size: 14px; padding: 0 10px; flex: none; }
.kad.saya { background: #efe3ff; }
.grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; align-content: start; padding-bottom: 6px; }
.item { position: relative; background: var(--krim); color: var(--coklat); border: 2px solid var(--garis); border-radius: 14px; padding: 6px; text-align: center; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.item img { width: 100%; aspect-ratio: 1; display: block; border-radius: 10px; background: radial-gradient(#fff7e6, #f3dfb8); }
.item .n { font-size: 14px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item.on { background: #fde68a; outline: 3px solid #f59e0b; }
.item.kunci img { filter: grayscale(1) brightness(.75); }
.kunciPill { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); }
.botTag { display: inline-flex; align-items: center; font-size: .5em; background: #2563eb; border: 2px solid var(--garis); border-radius: 10px; padding: 2px 8px; vertical-align: middle; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.kata.bot { color: #dbeafe; } .kata.bot.on { color: #60a5fa; }
.lirik .l2.giliran { opacity: 1; color: #fde047; }
.lirik .l2.giliran::before { content: 'Your turn: '; color: #4ade80; }
.medan { display: block; text-align: left; font-size: 15px; margin: 8px 0; }
.medan input, .medan textarea { display: block; width: 100%; margin-top: 4px; font-family: system-ui, sans-serif; font-size: 15px; color: var(--coklat); background: #fff; border: 2px solid var(--garis); border-radius: 10px; padding: 8px; resize: vertical; }
.syncBaris { font-size: 28px; margin: 14px 0 4px; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.syncSeterus { min-height: 1.4em; }
.ketikBesar { width: 100%; height: 96px; font-size: 36px; margin: 12px 0 4px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--sab)); transform: translate(-50%, 40px); opacity: 0; transition: .25s; background: var(--krim); color: var(--coklat); border: 2px solid var(--garis); border-radius: 14px; padding: 10px 16px; font-size: 16px; max-width: 90vw; text-align: center; pointer-events: none; z-index: 9; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) and (orientation: landscape) {
  #bar { height: 38vh; } .lirik .l1 { font-size: 40px; }
  #senarai, #almari { display: grid; grid-template-columns: 1fr min(560px, 46vw); grid-template-rows: auto 1fr; gap: 10px; align-items: stretch; }
  #senarai .atas, #almari .atas { grid-column: 1 / 3; width: 100%; }
  #senarai .lobi, #almari .lobi { height: auto; align-items: center; }
  #senarai .helaian, #almari .helaian { width: 100%; }
}

.kuning { background: linear-gradient(#fde047, #ca8a04); }
#loading { justify-content: center; gap: 28px; background: #2a1446 url('../assets/img/ui/title_bg.jpg') center / cover no-repeat; z-index: 20; }
#loading .bar { width: min(70vw, 360px); height: 18px; border: 2px solid var(--garis); border-radius: 9px; background: rgba(0,0,0,.4); overflow: hidden; }
#loadbar { height: 100%; width: 10%; background: linear-gradient(90deg, #fde047, #f59e0b); transition: width .3s; }
#loadtxt { font-size: 18px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.papanPanel { max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.namaBaris { display: flex; gap: 8px; margin: 10px 0; }
.namaBaris input { flex: 1; min-width: 0; font-family: system-ui, sans-serif; font-size: 16px; color: var(--coklat); background: #fff; border: 2px solid var(--garis); border-radius: 10px; padding: 8px; }
.papanSenarai { text-align: left; overflow-y: auto; flex: 1; min-height: 80px; padding-left: 34px; margin: 6px 0; font-size: 17px; }
.papanSenarai li { padding: 5px 4px; border-bottom: 2px dashed #e9d8b6; }
.papanSenarai li b { float: right; font-weight: normal; }
.papanSenarai li.saya { background: #fde68a; border-radius: 8px; }

.kadLagu, .grid { will-change: scroll-position; overscroll-behavior: contain; }
.kad, .item { contain: layout paint; }

/* ===== Jambatan SistemGuru.My (G108) + kawalan (G3) ===== */
/* Ikon SVG (ganti emoji) */
.ik { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; display: inline-block; vertical-align: -.18em; filter: drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000); }
.btn.bulat .ik { width: 24px; height: 24px; }
.kad .ikon .ik { width: 28px; height: 28px; }
.kunciPill .ik { width: 14px; height: 14px; }
/* Fokus papan kekunci (anak panah / Enter / Esc) */
.btn:focus-visible, .seg button:focus-visible, .kRank:focus-visible, .medan input:focus-visible, .medan textarea:focus-visible, .namaBaris input:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }
.kad:focus-visible, .item:focus-visible { outline: 3px solid #f59e0b; outline-offset: -3px; }
.kad:focus:not(:focus-visible), .item:focus:not(:focus-visible), .btn:focus:not(:focus-visible) { outline: none; }
.kad:focus-visible { background: #fff0c2; }
/* Seret pentas memusing kamera */
#lobiPenyanyi, #aPentas { cursor: grab; }
#lobiPenyanyi:active, #aPentas:active { cursor: grabbing; }
/* Senarai & panel boleh ditatal dengan jari pada skrin rendah (telefon landskap) */
.kadLagu, .grid, .papanSenarai { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#mic, #keputusan, #laguSaya, #sync, #papan { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
/* Ranking di keputusan */
.baris2.rapat .btn { padding: 10px 8px; font-size: 16px; }
.kRank { display: block; margin: 8px auto 0; font-family: inherit; font-size: 15px; color: #7c3aed; background: none; border: 0; padding: 4px 8px; cursor: pointer; text-decoration: underline; }
.kRank:disabled { color: #15803d; text-decoration: none; cursor: default; }
/* Telefon landskap (tinggi rendah): logo mengecil supaya butang Tap to Start tidak terpotong */
@media (max-height: 500px) and (orientation: landscape) {
  .logoImg { width: min(96vw, 640px, 110vh); }
  #tajuk { gap: 16px; } .logo .l3 { margin-top: 8px; }
}
/* Telefon landskap: Senarai/Almari dua lajur (pentas kiri, senarai kanan penuh tinggi) seperti laptop */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 899px) {
  #senarai, #almari { display: grid; grid-template-columns: 1fr min(400px, 52vw); grid-template-rows: auto 1fr; gap: 8px; align-items: stretch; }
  #senarai .atas, #almari .atas { grid-column: 1 / 3; width: 100%; }
  #senarai .lobi, #almari .lobi { height: auto; align-items: center; }
  #senarai .helaian, #almari .helaian { width: 100%; }
}
/* Bar atas Senarai muat di telefon sempit */
#senarai .atas .pill { min-width: 0; flex-shrink: 1; }
@media (max-width: 420px) {
  #senarai .atas { gap: 6px; }
  #senarai .atas .kecilbtn { padding: 7px 9px; }
  #senarai .atas .btn.bulat { width: 40px; height: 40px; }
  #senarai .atas .pill { padding: 0 10px; }
}