/* =====================================================================
   UpPlay V6: font serif, tombol kembali di bawah garis waktu,
   uji coba game untuk Master/Admin, akun Master/Admin, grafik seragam,
   popup Join Room, kontras mode gelap.
   ===================================================================== */
:root{
  --upz-serif:'Lora',Georgia,'Times New Roman',serif;
  --upz-display:'Playfair Display','Lora',Georgia,serif;
}

/* ---------- 1. FONT SERIF di seluruh halaman, 4 jenis user, dan semua popup ---------- */
html body *:not(#upz1):not(#upz2):not(#upz3):not(#upz4){font-family:var(--upz-serif)!important}
html body :is(h1,h2,h3,.brand,.upx-brandtext b,.hero h1,.section-heading h2,.subject-card h2,.level-card h2,.cp-bubble h2,.cp-bubble h3,.level-outcome-card h2,#cpRoomInter h2,.room-vnext-result h2,.ad-md h3,.modal h2,.modal h3,.tg4-head h1,.ad-main > h1,.portal-top h1,.up-chart-title,.cd-timebar strong,.tg4-room-code,.countdown-number,.cp-count-ov b):not(#upz1):not(#upz2):not(#upz3):not(#upz4){
  font-family:var(--upz-display)!important;letter-spacing:-.005em
}
html body :is(h1):not(#upz1):not(#upz2):not(#upz3):not(#upz4){font-weight:800!important}
html body :is(input,select,textarea,button)::placeholder{font-family:var(--upz-serif)}

/* ---------- 2. tombol kembali saat bermain: di bawah garis waktu, bukan melayang ---------- */
#upxFback{display:none!important}
html body.upx-play .app-view:not(.hidden) :is(.back-btn,#safeExitArrow):not(#upz1){
  display:inline-grid!important;place-items:center!important;flex:0 0 42px!important;
  width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;margin:0 14px 0 0!important;
  border-radius:14px!important;border:1px solid var(--upx-line,#e5e0d9)!important;
  background:var(--upx-surface,#fff)!important;color:var(--upx-ink,#2a2a29)!important;
  font-size:1.15rem!important;line-height:1!important;cursor:pointer!important;position:static!important;
  box-shadow:0 8px 18px -12px rgba(58,57,54,.55)!important;transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s!important
}
html body.upx-play .app-view:not(.hidden) :is(.back-btn,#safeExitArrow):hover{transform:translateX(-2px);border-color:var(--upx-brand,#1e1f1f)!important}
html body.upx-play .app-view:not(.hidden) .page-head{align-items:center!important}

/* ---------- 3. aturan tidak tampil di Join Room (dilewati otomatis) ---------- */
body.cp-room-mode :is(#cpRulesModal,#lgRulesModal,#ttRulesModal,#gameTutorialModal){opacity:0!important;pointer-events:none!important}

/* ---------- 4. popup ronde & hasil Join Room ---------- */
#cpRoomInter{animation:upzFade .35s ease both}
#cpRoomInter > div{animation:upzPop .5s cubic-bezier(.16,1,.3,1) both;min-width:min(360px,90vw)}
#cpRoomInter .cpi-ic{font-size:2.8rem;line-height:1;margin-bottom:6px}
#cpRoomInter .cpi-kick{display:block;font-weight:800;color:#ba9d7f;letter-spacing:.02em}
#cpRoomInter .cpi-sub{color:#4a4a49;font-weight:700}
#cpRoomInter .cpi-go{margin-top:12px;display:inline-block;padding:8px 18px;border-radius:999px;background:#efe9e1;color:#1e1f1f;font-weight:800;animation:upzPulse 1s ease-in-out infinite}
@keyframes upzFade{from{opacity:0}to{opacity:1}}
@keyframes upzPop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes upzPulse{50%{transform:scale(1.05)}}
.room-vnext-result .cp-mypos{font-size:1.05rem}
.room-vnext-result .cp-myscore{display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin:12px auto 4px;padding:16px 26px;border-radius:20px;border:1px solid #e5e0d9;background:#f6f3ee}
.room-vnext-result .cp-myscore .cp-av{font-size:2.3rem;line-height:1}
.room-vnext-result .cp-myscore small{font-weight:700;color:#4a4a49}
.room-vnext-result .cp-myscore{display:flex!important;width:max-content;margin:12px auto 4px!important}
.room-vnext-result #cpBackRoom{display:block;margin:16px auto 0!important}
#cpRoomHud{top:46px!important;right:22px!important;left:auto!important}
.room-vnext-result .cp-wait{color:#84817d;font-weight:700}

/* ---------- 5. Pengaturan akun Master & Admin ---------- */
#adminPortalPage .ad-acc{margin-top:16px}
#adminPortalPage .ad-accf{display:grid!important;gap:12px}
#adminPortalPage .ad-fl{display:grid;gap:6px;font-size:.84rem;font-weight:700;color:var(--upx-muted,#84817d)}
#adminPortalPage .ad-fl input{width:100%;box-sizing:border-box}
#adminPortalPage .ad-fl input[readonly]{background:var(--upx-surface-2,#f6f3ee);font-weight:800;color:var(--upx-ink,#2a2a29);cursor:default}
#adminPortalPage .ad-accb{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
#adminPortalPage .ad-accb .ad-b{min-width:96px;justify-content:center}
#adminPortalPage .ad-accf input{max-width:none!important;width:100%!important}
#adminPortalPage :is(.ad-2,.ad-games) > .ad-card + .ad-card{margin-top:0!important}

/* ---------- 6. menu Game Master/Admin: kartu yang bisa dimainkan ---------- */
#adminPortalPage .ad-play{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:6px 0 22px}
#adminPortalPage .ad-play .subject-card{min-height:230px;text-align:left;cursor:pointer}
#adminPortalPage .ad-gm-h h2{font-size:1.05rem}

/* ---------- 7. grafik siswa & guru identik ---------- */
.up-chart-card .up-kicker{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:800;letter-spacing:.08em;color:#1e1f1f}
.up-chart-card .up-chart-title{margin:6px 0 10px;font-size:1.25rem}
.up-chart-card .up-legend,#studentDashboard .sd-legend{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem;color:var(--upx-muted,#84817d);margin-top:8px}
.up-chart-card .up-dot{width:12px;height:12px;border-radius:50%;background:#1e1f1f;display:inline-block}
html body :is(#sdClassChart,#teacherGuruV4 .tg4-chart-wrap){width:100%!important;overflow-x:auto}
html body :is(#sdClassChart,#teacherGuruV4 .tg4-chart-wrap) svg.up-class-chart{display:block;width:100%!important;height:auto!important;min-width:480px;max-width:100%}
svg.up-class-chart :is(line,path,circle){vector-effect:non-scaling-stroke}
svg.up-class-chart path[fill="none"]{stroke-width:3.4px}
svg.up-class-chart circle{stroke-width:2.6px}
svg.up-class-chart line{stroke-width:1px}

/* ---------- 8. transisi klik ---------- */
@media (prefers-reduced-motion:no-preference){
  html body :is(button,.subject-card,.level-card,.upx-item,.ad-b,.btn){transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .25s,background-color .25s,color .25s,border-color .25s}
}

/* ---------- 9. MODE GELAP: popup & panel game ---------- */
html.upx-dark :is(.cp-bubble,.level-outcome-card,#cpRoomInter > div,.room-vnext-result .cp-myscore,#quizRoomModalV2 .modal,.cp-count-ov > div){
  background:var(--upx-surface)!important;color:var(--upx-ink)!important;border-color:var(--upx-line)!important
}
html.upx-dark :is(.cp-bubble,.level-outcome-card,#cpRoomInter > div) :is(h1,h2,h3,h4,b,strong,p,li,span,small,label){color:inherit}
html.upx-dark #cpRoomInter .cpi-go{background:rgba(186,157,127,.22)!important;color:#e5e0d9!important}
html.upx-dark #cpRoomInter .cpi-kick{color:#d4ccc1!important}
html.upx-dark .up-chart-card .up-kicker{color:#ba9d7f}
html.upx-dark body.upx-play .app-view:not(.hidden) :is(.back-btn,#safeExitArrow){background:var(--upx-surface)!important;color:var(--upx-ink)!important;border-color:var(--upx-line)!important}
html.upx-dark #upzToast{background:var(--upx-surface-2)}
html.upx-dark body .app-view:not(#upz1):not(#upz2):not(#upz3):not(#upz4) .subject-card.math :is(h2,p,span,small,.play-label){color:#ffffff!important}
html.upx-dark body .app-view:not(#upz1):not(#upz2):not(#upz3):not(#upz4) .subject-card.logic :is(h2,p,span,small,.play-label){color:#0f2440!important}
html.upx-dark body .app-view:not(#upz1):not(#upz2):not(#upz3):not(#upz4) .subject-card.picture :is(h2,p,span,small,.play-label){color:#3a2200!important}
html.upx-dark #adminPortalPage .ad-lv i{background:#1e1f1f!important;color:#fff!important}
html.upx-dark .cd-timebar strong{color:#e5e0d9!important}
html.upx-dark .cd-timebar .cd-track{background:rgba(255,255,255,.12)!important}