/* =====================================================================
   UpPlay V14 — lapisan tampilan terakhir.
   Palet tetap: #d3b99d #ba9d7f #e5e0d9 #1e1f1f #4a4a49 #84817d
   Satu-satunya warna di luar palet: kuning bintang (--up-star).
   ===================================================================== */
:root{--up-star:#ffc61a;--up-star-edge:rgba(120,78,0,.55);--up-star-off:#cbc3b8}
html.upx-dark{--up-star-off:#57554f;--up-star-edge:rgba(0,0,0,.55)}

/* ---------- 1. bintang ---------- */
html body .game-stars>span{color:var(--up-star-off)!important;-webkit-text-fill-color:currentColor;text-shadow:none!important;transition:color .3s ease}
html body .game-stars>span.earned{color:var(--up-star)!important;text-shadow:0 0 .5px var(--up-star-edge),0 1px 0 var(--up-star-edge)!important}
html body .up-st{display:inline-block;color:var(--up-star-off)!important;-webkit-text-fill-color:currentColor;text-shadow:none!important;line-height:1}
html body .up-st.on{color:var(--up-star)!important;text-shadow:0 0 .6px var(--up-star-edge),0 1.5px 0 var(--up-star-edge)!important}
html body :is(.level-outcome-stars,.cp-pstars,.game-result-stars){letter-spacing:.12em!important;line-height:1.15!important}
html body .level-outcome-overlay :is(.level-outcome-stars,.cp-pstars) .up-st{font-size:2.1rem;margin:0 .04em}
@media (max-width:560px){html body .level-outcome-overlay :is(.level-outcome-stars,.cp-pstars) .up-st{font-size:1.8rem}}

/* ---------- 2. LANDING: tiap bagian penuh satu layar, tidak tertutup header, tanpa intip warna bagian lain ---------- */
#landingPage{--up-land-hdr:72px}
#landingPage>.topbar{position:sticky!important;top:0!important;z-index:60!important}
#landingPage main>section{box-sizing:border-box!important;min-height:calc(100svh - var(--up-land-hdr))!important;scroll-margin-top:var(--up-land-hdr)!important;margin-top:0!important;margin-bottom:0!important}
#landingPage main>section.hero{display:grid!important;align-content:center!important;align-items:center!important}
#landingPage main>section:is(.feature-section,.tutorial-section){display:flex!important;flex-direction:column!important;justify-content:center!important;padding-top:clamp(28px,5vh,56px)!important;padding-bottom:clamp(28px,5vh,56px)!important}
#landingPage main>section>.section-heading{margin-top:0!important}
#landingPage .nav-links a{position:relative;transition:color .25s ease}
#landingPage .nav-links a.on{color:#1e1f1f!important}
#landingPage .nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:#ba9d7f}
/* Cara Bermain: kartu langkah */
#landingPage .tutorial-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important;align-items:stretch!important;width:min(1180px,100%);margin:0 auto!important;box-sizing:border-box}
#landingPage .tutorial-card{display:flex!important;flex-direction:column!important;text-align:left!important;padding:24px 24px 22px!important;border-radius:24px!important;background:#ffffff!important;border:1px solid #ece6dd!important;box-shadow:0 18px 40px -30px rgba(30,31,31,.35)!important;box-sizing:border-box}
#landingPage .tutorial-card .tutorial-number{width:42px!important;height:42px!important;border-radius:12px!important;display:grid!important;place-items:center!important;background:#1e1f1f!important;color:#f6f3ee!important;margin:0 0 16px!important}
#landingPage .tutorial-card .tutorial-number svg{width:22px;height:22px}
#landingPage .tutorial-card h3{margin:0 0 6px!important;font-size:1.15rem!important;color:#1e1f1f!important}
#landingPage .tutorial-card .up-tc-sub{margin:0 0 12px!important;color:#84817d!important;font-size:.92rem!important;line-height:1.55!important}
#landingPage .tutorial-card ol{margin:0!important;padding:0 0 0 1.25em!important;display:grid;gap:9px;color:#4a4a49!important;font-size:.9rem!important;line-height:1.5!important}
#landingPage .tutorial-card ol li::marker{color:#1e1f1f;font-weight:700}
#landingPage .tutorial-card ol b{color:#1e1f1f}
@media (max-width:980px){#landingPage .tutorial-grid{grid-template-columns:1fr!important;max-width:620px}}
/* HP: menu Tentang/Fitur/Cara Bermain jadi baris kedua di header */
@media (max-width:760px){
  #landingPage>.topbar{flex-wrap:wrap!important;row-gap:8px!important;padding-top:10px!important;padding-bottom:10px!important;height:auto!important;min-height:0!important}
  #landingPage>.topbar .nav-links{display:flex!important;order:3;width:100%;justify-content:center;gap:6px!important;margin:0!important}
  #landingPage>.topbar .nav-links a{padding:6px 12px!important;border-radius:999px;background:rgba(229,224,217,.7);font-size:.84rem!important;color:#4a4a49!important}
  #landingPage>.topbar .nav-links a.on{background:#1e1f1f;color:#f6f3ee!important}
  #landingPage>.topbar .nav-links a.on::after{display:none}
  #landingPage main>section:is(.feature-section,.tutorial-section){padding-left:16px!important;padding-right:16px!important}
}
/* carousel spoiler level 1: di tengah pada HP */
@media (max-width:760px){
  #landingPage .hero-visual{display:flex!important;justify-content:center!important;width:100%!important;margin:0 auto!important}
  #landingPage .hero-visual .upz-show{margin:0 auto!important;width:min(100%,420px)!important}
  #landingPage .upz-scene{padding:28px 14px 8px!important;justify-items:center!important}
  #landingPage .upz-scene>*{margin-left:auto!important;margin-right:auto!important;max-width:100%!important}
  #landingPage .sc-pola{transform-origin:center}
  #landingPage .sc-kata{justify-items:center}
  #landingPage .sc-kata .lt{justify-content:center!important}
}

/* ---------- 3. POPUP: rata tengah & jarak tepi yang lega (desktop & HP) ---------- */
html body .modal-overlay:not(.hidden){display:flex!important;align-items:center!important;justify-content:center!important;padding:16px!important;box-sizing:border-box!important}
html body .modal-overlay>.modal{margin:auto!important;box-sizing:border-box!important}
html body :is(.modal,.cp-bubble,.level-outcome-card,.upz-dlg-box,.ad-md,#cpRoomInter>div,.cp-count-ov>div,.up-gate-box) :is(input,select,textarea,button,.btn){box-sizing:border-box;max-width:100%}
html body .cp-pastewrap{display:flex!important;gap:10px!important;width:100%!important;align-items:stretch!important}
html body .cp-pastewrap>input{flex:1 1 auto!important;min-width:0!important;width:auto!important}
html body .cp-pastewrap>.cp-pastebtn{flex:0 0 52px!important;width:52px!important;min-width:0!important}
html body #quizRoomModalV2 #quizRoomCodeV2{flex:1 1 0!important;width:0!important;min-width:0!important}
html body #quizRoomModalV2 .cp-pastewrap{max-width:100%!important;min-width:0!important}
html body #quizRoomModalV2 form>.btn,html body #quizRoomModalV2 .btn-success{width:100%!important}
html body #quizRoomModalV2 :is(.room-vnext-lobby,#quizRoomJoinV2,#quizRoomLobbyV2){grid-template-columns:minmax(0,1fr)!important;min-width:0!important;max-width:100%!important}
html body #quizRoomModalV2 :is(#quizRoomJoinV2,#quizRoomLobbyV2)>*{min-width:0!important;max-width:100%!important}
html body :is(.level-outcome-actions,.cp-actions,.upz-dlg-row,.ad-row,.tg4-actions){flex-wrap:wrap!important;gap:10px!important}
@media (max-width:640px){
  html body :is(.level-outcome-overlay:not(.hidden),.cp-ov.cp-show,.upz-dlg,.ad-ov,#cpRoomInter,.cp-count-ov,#upGate){display:flex!important;align-items:center!important;justify-content:center!important;padding:16px!important;box-sizing:border-box!important}
  html body .modal-overlay>.modal,
  html body :is(.level-outcome-card,.cp-bubble,.upz-dlg-box,.ad-md,#cpRoomInter>div,.cp-count-ov>div,.up-gate-box){width:100%!important;max-width:460px!important;margin:auto!important;padding:24px 20px 22px!important;border-radius:22px!important;box-sizing:border-box!important;max-height:calc(100dvh - 32px)!important;overflow-y:auto!important}
  html body .modal-overlay>.modal{max-width:520px!important}
  html body #quizRoomModalV2 .modal,html body #quizRoomModalV2 .room-vnext-modal{padding:24px 20px 22px!important;width:100%!important;max-width:520px!important}
  html body .modal .modal-top{gap:12px!important}
  html body .modal .modal-top h2{font-size:1.4rem!important;line-height:1.25!important}
  html body :is(.level-outcome-actions,.cp-actions,.upz-dlg-row){display:flex!important;flex-direction:column-reverse!important}
  html body :is(.level-outcome-actions,.cp-actions,.upz-dlg-row)>:is(button,.btn){width:100%!important;margin:0!important;min-width:0!important}
  html body .level-outcome-card :is(h2,h3){font-size:1.4rem!important}
  html body .level-outcome-card p{font-size:.92rem!important}
}
/* teks popup pakai palet (bukan biru/oranye) */
html body .level-outcome-card p{color:#4a4a49!important}
html body .level-outcome-card .lg-level{color:#84817d!important}
html body .level-outcome-card .lg-score{background:#efe9e1!important;color:#4a4a49!important;border:1px solid #e5e0d9}
html.upx-dark body .level-outcome-card p{color:#cfc8bf!important}
html.upx-dark body .level-outcome-card .lg-level{color:#a9a49e!important}
html.upx-dark body .level-outcome-card .lg-score{background:#2a2a29!important;color:#efe9e1!important;border-color:#3a3936}

/* ---------- 4. NOTIFIKASI: panel riwayat di HP muncul di atas ---------- */
#upzHist.sheet .upzh-card{top:max(12px,env(safe-area-inset-top))!important;bottom:auto!important;left:12px!important;right:12px!important;max-height:min(78dvh,620px)!important;transform-origin:top center!important;animation:upNtDrop .32s cubic-bezier(.16,1,.3,1) both}
@keyframes upNtDrop{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}
.upzh-head{padding:16px 16px 12px 20px!important}
.upzh-x{flex:0 0 36px}

/* ---------- 5. HP: logo sidebar diberi latar agar terlihat bisa diketuk ---------- */
@media (max-width:760px){
  html body.upx-app .upx-head button.upx-mlogo{background:#1e1f1f!important;border-radius:14px!important;box-shadow:0 8px 18px -10px rgba(30,31,31,.6)!important;--up-logo-main:#f6f3ee;--up-logo-tab:#d3b99d}
  html.upx-dark body.upx-app .upx-head button.upx-mlogo{background:#d3b99d!important;box-shadow:0 8px 18px -10px rgba(0,0,0,.7)!important;--up-logo-main:#1e1f1f;--up-logo-tab:#4a4a49}
  html body.upx-app .upx-head button.upx-mlogo svg.up-logo .ul-main{stroke:var(--up-logo-main)!important}
  html body.upx-app .upx-head button.upx-mlogo svg.up-logo .ul-tab{stroke:var(--up-logo-tab)!important}
  html body.upx-app .upx-head button.upx-mlogo:active{transform:scale(.95)}
}

/* ---------- 6. KLASEMEN LANGSUNG: warna kepala & baris memenuhi lebar tabel ---------- */
html body .cp-board{overflow-x:auto!important}
html body .cp-bh,html body .cp-brow{min-width:max(100%,780px)!important;width:max-content!important;box-sizing:border-box!important}
html body .cp-board>:is(.cp-bh,#cpRows){min-width:100%}
html body #cpRows{display:block;width:max-content;min-width:100%}
html body .cp-bh{background:linear-gradient(135deg,#1e1f1f,#4a4a49 60%,#ba9d7f)!important}
@media (min-width:1100px){html body .cp-bh,html body .cp-brow{width:100%!important}html body #cpRows{width:100%}}

/* ---------- 7. Logika Sederhana di HP: papan & kepingan saling dekat, tombol BENAR/SALAH muat ---------- */
@media (max-width:860px){
  #lgPlayPage[data-mode="blk"] .lg-bwrap{height:min(46vh,340px)!important}
  #lgPlayPage[data-mode="blk"] #lgBlkCard{padding:14px!important}
  #lgPlayPage[data-mode="blk"] #lgBlkCard .lg-qhead{margin-bottom:8px!important}
  #lgPlayPage[data-mode="blk"] #lgBlkCard .lg-fb{margin-top:8px!important;padding:8px 12px!important;font-size:.84rem!important}
  #lgPlayPage[data-mode="blk"] .lg-layout{gap:10px!important}
  #lgPlayPage[data-mode="blk"] .game-panel{padding:12px 14px!important}
  #lgPlayPage[data-mode="blk"] .game-panel>:is(#lgPanelH,.score-row,.lg-note){display:none!important}
  #lgPlayPage[data-mode="blk"] .lg-trayw{margin-top:0!important}
  #lgPlayPage[data-mode="blk"] .lg-tray{max-height:none!important;min-height:0!important;padding:8px!important;gap:6px!important;justify-content:center}
  #lgPlayPage .lg-qz-opts.tf{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #lgPlayPage .lg-qz-opts .lg-opt.tfb{min-width:0!important;padding:14px 8px!important;font-size:1.05rem!important;gap:8px!important;box-sizing:border-box}
}
/* Labirin di HP: papan dulu, tombol arah tepat di bawahnya */
@media (max-width:860px){
  #mathMazePage:not(.hidden) .maze-card{order:1!important}
  #mathMazePage:not(.hidden) .maze-panel{order:2!important;display:flex!important;flex-direction:column!important}
  #mathMazePage:not(.hidden) .maze-panel .maze-controls{order:-1!important;margin:0 auto 6px!important}
}

/* ---------- 8. POPUP PEMELIHARAAN / AKUN NONAKTIF ---------- */
#upGate{position:fixed;inset:0;z-index:2147482000;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:rgba(30,31,31,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:upGateIn .25s ease both}
@keyframes upGateIn{from{opacity:0}to{opacity:1}}
#upGate .up-gate-box{width:min(420px,100%);box-sizing:border-box;padding:30px 28px 26px;border-radius:24px;background:#f6f3ee;color:#1e1f1f;text-align:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.55);border:1px solid #e5e0d9;animation:upGatePop .35s cubic-bezier(.16,1,.3,1) both}
@keyframes upGatePop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
#upGate .up-gate-ic{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:#1e1f1f;color:#d3b99d}
#upGate h3{margin:0 0 14px;font-size:1.25rem;line-height:1.3;color:#1e1f1f}
#upGate p{margin:0 auto 20px;max-width:340px;color:#4a4a49;font-size:.95rem;line-height:1.55}
#upGate .up-gate-ok{min-width:140px;height:46px;padding:0 26px;border:0;border-radius:14px;background:#1e1f1f;color:#f6f3ee;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;transition:transform .2s ease,background-color .2s ease}
#upGate .up-gate-ok:hover{transform:translateY(-2px)}
#upGate .up-gate-ok:focus-visible{outline:3px solid #ba9d7f;outline-offset:3px}
html.upx-dark #upGate .up-gate-box{background:#1e1f1f;color:#efe9e1;border-color:#3a3936}
html.upx-dark #upGate .up-gate-ic{background:#d3b99d;color:#1e1f1f}
html.upx-dark #upGate h3{color:#efe9e1}
html.upx-dark #upGate p{color:#cfc8bf}
html.upx-dark #upGate .up-gate-ok{background:#d3b99d;color:#1e1f1f}

/* ---------- 9. TARIK TAMBANG: layar penuh saat bermain (tanpa sidebar), tombol bisa ditekan bersamaan ---------- */
body.up-pvp-play #upxSide,body.up-pvp-play .upx-scrim,body.up-pvp-play .upx-head,body.up-pvp-play #upxMenu,body.up-pvp-play #upSideTip{display:none!important}
body.up-pvp-play.upx-app .app-view:not(#landingPage){margin-left:0!important}
body.up-pvp-play #teacherPortalPage .teacher-main{padding:12px!important;max-width:none!important}
body.up-pvp-play #teacherGuruV4>.tg4-head{display:none!important}
@media (min-width:760px){body.up-pvp-play #teacherPortalPage #teacherGuruV4 .tg5-wrap{height:calc(100dvh - 24px)!important}}
html body .tg5-pad,html body .tg5-key,html body .tg5-keys{touch-action:none!important;-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-webkit-tap-highlight-color:transparent}
html body .tg5-key.pressed{transform:scale(.93)}
/* popup aturan tidak terpotong di layar pendek */
html body .cp-ov .cp-bubble{max-height:calc(100dvh - 32px)!important;overflow-y:auto!important;overscroll-behavior:contain}
@media (max-height:700px){
  html body .cp-ov .cp-bubble{padding-top:22px!important;padding-bottom:20px!important}
  html body .cp-ov .cp-list{gap:6px!important}
  html body .cp-ov .cp-list li{padding-top:7px!important;padding-bottom:7px!important;line-height:1.4!important}
  html body .cp-ov .cp-bubble h2{margin:6px 0 4px!important}
}
  #cp5Meta .up-st{font-size:22px;margin:0 2px;vertical-align:-3px}
  #lgTray .lg-ti.lg-tslot{opacity:.22;pointer-events:none;border-style:dashed!important}