/* ============================================================
   css/responsive.css
   Target: TV widescreen 16:9 (HD/FHD/4K), proyektor, laptop, tablet
   1920x1080, 2560x1440, 3840x2160 (4K TV), 1366x768, 1280x720, 1024x768
   ============================================================ */

/* Wadah konten dibatasi lebarnya & dipusatkan agar tidak melebar
   berlebihan di TV ultra-lebar / layar 4K, tapi tetap mengisi layar
   dengan nyaman di ukuran TV standar 16:9. */
.screen{
  max-width:1900px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}

/* Layar FHD / TV standar (1920x1080 dst.) */
@media (min-width:1400px){
  .question-text{font-size:clamp(1.8rem,2.6vw,2.4rem);}
  .answer-btn{font-size:clamp(1.1rem,1.4vw,1.35rem); padding:20px 16px;}
  .answer-btn .opt-label{width:32px; height:32px; font-size:1rem;}
  .game-logo{font-size:clamp(3.4rem,5vw,4.6rem);}
  .game-tagline{font-size:clamp(1.2rem,1.8vw,1.6rem);}
  .timer-circle{width:clamp(90px,7vw,110px); height:clamp(90px,7vw,110px); font-size:clamp(2rem,2.4vw,2.6rem);}
  .question-icon{font-size:clamp(2.6rem,4vw,3.6rem);}
  .question-topic-tag{font-size:clamp(.9rem,1.1vw,1.1rem);}
  .round-info{font-size:clamp(1.1rem,1.5vw,1.5rem);}
  .score-pill{font-size:clamp(1.1rem,1.5vw,1.5rem); padding:10px 22px;}
  .lock-tag{font-size:clamp(.9rem,1.1vw,1.1rem);}
  .btn-big{font-size:clamp(1.3rem,1.6vw,1.6rem); padding:22px 30px;}
}

/* Layar sangat besar: TV 4K / layar > 2200px */
@media (min-width:2200px){
  .question-text{font-size:clamp(2.4rem,2.2vw,3.2rem);}
  .answer-btn{font-size:clamp(1.4rem,1.3vw,1.8rem); padding:26px 20px;}
  .game-logo{font-size:clamp(4.6rem,4.2vw,6rem);}
  .panel{max-width:820px; padding:40px;}
  .panel-title{font-size:2.2rem;}
  .help-item p{font-size:1.3rem;}
}

/* Layar sedang (laptop umum 1366x768 / 1280x720) */
@media (min-width:900px) and (max-width:1399px){
  .question-text{font-size:1.6rem;}
  .answer-btn{font-size:1.05rem;}
}

/* Orientasi lebar pendek (TV/proyektor dengan tinggi terbatas, mis. 1920x1080 di jarak dekat) */
@media (min-width:1400px) and (max-height:800px){
  .tug-arena{padding:8px 10px; margin-bottom:8px;}
  .question-card{padding:12px 16px;}
  .game-topbar{margin-bottom:4px;}
}

/* Tablet & layar kecil (1024x768 ke bawah, mode landscape diasumsikan) */
@media (max-width:899px){
  .answer-zones{flex-direction:column;}
  .panel{padding:20px;}
  .game-logo{font-size:2rem;}
  .timer-circle{width:60px; height:60px; font-size:1.4rem;}
  .tug-char{font-size:2rem;}
  .tug-rope-knot{font-size:1.7rem;}
  .result-cards{flex-direction:column;}
}

/* Mode potrait sempit (HP darurat) */
@media (max-width:480px){
  .screen{padding:14px;}
  .question-card{padding:14px 10px;}
  .btn-big{font-size:1.05rem; padding:16px 20px;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}