/* ═══════════════════════════════════════════════════
   RESPONSIVE — PORTRAIT KIOSK (9:16)
   Uses cqw (container query width) for fluid scaling
   so everything scales with actual game column width,
   not the browser viewport (important for kiosk letterbox).
════════════════════════════════════════════════════ */
:root {
  --card-w: clamp(100px, 22cqw, 150px);
  --card-h: clamp(125px, 28cqw, 185px);

  /* CTA bar sizing — raised at each breakpoint below */
  --cta-badge-size:  clamp(28px, 8cqw, 48px);
  --cta-btn-height:  clamp(44px, 9.6cqw, 64px);
}

/* Portrait topbar */
#topbar       { height: clamp(56px, 9cqw, 80px); padding: 0 14px; gap: 8px; }
#timer-center { top: clamp(64px, calc(9cqw + 8px), 88px); }
.logo-topbar  { height: clamp(24px, 4.5cqw, 36px); }
.tb-title     { font-size: clamp(9px, 1.8cqw, 13px); letter-spacing: 0.5px; white-space: nowrap; }
.level-badge  { font-size: clamp(7px, 1.4cqw, 10px); padding: 2px 8px; letter-spacing: 1px; gap: 6px; }
#timer-wrap   { width: clamp(48px, 9cqw, 72px); height: clamp(48px, 9cqw, 72px); }
#t-num        { font-size: clamp(16px, 3.2cqw, 24px); }
#timer-wrap.timer-urgent        { width: clamp(72px, 14cqw, 110px); height: clamp(72px, 14cqw, 110px); }
#timer-wrap.timer-urgent #t-num { font-size: clamp(24px, 5cqw, 40px); }

/* Slots: wrap into grid on portrait */
#slots-zone { height: auto; flex-wrap: wrap; padding: 4px 10px; gap: 6px; align-content: center; }
.drop-slot  { flex: 0 0 calc(25% - 6px); max-width: none; aspect-ratio: 11 / 12; height: auto; border-radius: 10px; }
.slot-num   { font-size: clamp(18px, 3.5cqw, 28px); }
.slot-hint  { font-size: clamp(7px, 1.4cqw, 10px); }
.slot-filled-img { width: clamp(32px, 6cqw, 52px); height: clamp(32px, 6cqw, 52px); }

/* Cards */
.card-label { font-size: clamp(10px, 2.2cqw, 14px); padding: 6px 4px; }

/* Countdown */
#cd-num         { font-size: clamp(140px, 28cqw, 260px); }
.cd-instruction { font-size: clamp(14px, 2.8cqw, 20px); }

/* Attract */
.logo-attract  { height: clamp(36px, 7cqw, 56px); }
.attract-title { font-size: clamp(32px, 8.5cqw, 80px); margin-bottom: var(--attract-title-to-desc); }
.attract-sub   { font-size: clamp(16px, 3.8cqw, 24px); max-width: 88cqw; }
.attract-cta   { font-size: clamp(16px, 3.5cqw, 28px); padding: clamp(12px, 2.5cqw, 16px) clamp(32px, 10cqw, 64px); }
.attract-hint  { font-size: clamp(11px, 2.2cqw, 16px); }

/* How-to */
.howto-header h2    { font-size: clamp(32px, 8cqw, 56px); }
.howto-illustration { width: clamp(101px, 41cqw, 202px); }
.hsr-num { width: clamp(36px, 9cqw, 52px); height: clamp(36px, 9cqw, 52px); font-size: clamp(16px, 4cqw, 24px); }

/* Result */
.res-card  { padding: clamp(20px, 4cqw, 44px) clamp(16px, 5cqw, 80px) clamp(18px, 4cqw, 40px); }
.logo-result { height: clamp(32px, 6.5cqw, 52px); }
.res-icon  { font-size: clamp(56px, 11cqw, 88px); }
.res-score { font-size: clamp(40px, 8cqw, 64px); }
.res-msg   { font-size: clamp(18px, 3.8cqw, 26px); max-width: 85cqw; }
.res-btn   { font-size: clamp(16px, 3.2cqw, 22px); padding: 14px 48px; }

/* Failure */
.fail-card  { max-width: 90cqw; padding: clamp(24px, 5cqw, 44px) clamp(16px, 5cqw, 80px) clamp(20px, 4cqw, 40px); }
.fail-title { font-size: clamp(28px, 5.5cqw, 44px); }
.fail-sub   { font-size: clamp(14px, 2.8cqw, 20px); }
.fail-plane { font-size: clamp(64px, 13cqw, 100px); }

/* Feedback toasts */
.feedback-toast { font-size: clamp(10px, 2cqw, 14px); padding: 5px 14px; max-width: min(88cqw, 280px); white-space: normal; text-align: center; line-height: 1.3; }

/* Safari safe-area for notch/home indicator */
@supports (padding: env(safe-area-inset-bottom)) {
  #slots-zone { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}

/* ═══════════════════════════════════════════════════
   DIGITAL SIGNAGE — 55" kiosk large-format scaling
   Raises all clamp ceilings so text scales with cqw
   on wide displays (≥450px window width).
════════════════════════════════════════════════════ */
@media (min-width: 450px) {
  :root {
    --cta-badge-size:  clamp(28px, 8cqw, 128px);
    --cta-btn-height:  clamp(44px, 9.6cqw, 160px);
  }
  .btn-berikutnya { border-radius: clamp(40px, 12cqw, 200px); font-size: clamp(14px, 3.5cqw, 60px); padding: 0.8cqw 0.8cqw 0.8cqw clamp(20px, 5cqw, 86px); }

  .logo-attract   { height: clamp(56px, 10cqw, 220px); }
  .attract-title  { font-size: clamp(44px, 9cqw, 200px); }
  .attract-sub    { font-size: clamp(18px, 3.8cqw, 85px); }
  .attract-cta    { font-size: clamp(20px, 3.8cqw, 85px); padding: clamp(14px, 2.5cqw, 56px) clamp(40px, 10cqw, 220px); }
  .attract-hint   { font-size: clamp(13px, 2.2cqw, 48px); }

  #topbar         { height: clamp(72px, 10cqw, 220px); padding: 0 clamp(14px, 3cqw, 66px); }
  #timer-center   { top: clamp(80px, calc(10cqw + 8px), 228px); }
  .logo-topbar    { height: clamp(30px, 5cqw, 110px); }
  .tb-title       { font-size: clamp(12px, 2cqw, 45px); }
  .level-badge    { font-size: clamp(10px, 1.8cqw, 40px); padding: 3px 12px; gap: 10px; }
  #timer-wrap     { width: clamp(56px, 10cqw, 220px); height: clamp(56px, 10cqw, 220px); }
  #t-num          { font-size: clamp(20px, 3.8cqw, 84px); }
  #timer-wrap.timer-urgent        { width: clamp(80px, 15cqw, 330px); height: clamp(80px, 15cqw, 330px); }
  #timer-wrap.timer-urgent #t-num { font-size: clamp(30px, 5.5cqw, 120px); }

  #slots-zone     { padding: 10px 16px; gap: 8px; }
  .drop-slot      { aspect-ratio: 11 / 14; }
  .slot-num       { font-size: clamp(20px, 4cqw, 90px); }
  .slot-hint      { font-size: clamp(9px, 1.6cqw, 36px); }
  .slot-filled-img { width: clamp(36px, 7cqw, 155px); height: clamp(36px, 7cqw, 155px); }

  :root           { --card-w: clamp(110px, 22cqw, 480px); --card-h: clamp(130px, 28cqw, 610px); }
  .card-label     { font-size: clamp(11px, 2.2cqw, 48px); padding: clamp(5px, 1cqw, 22px) 4px; }

  .cd-instruction { font-size: clamp(16px, 3cqw, 66px); }
  #cd-num         { font-size: clamp(180px, 30cqw, 650px); }
  #cd-num.go-style { font-size: clamp(120px, 22cqw, 480px); }

  .howto-header h2 { font-size: clamp(48px, 10cqw, 220px); }
  .hsr-num         { width: clamp(40px, 9cqw, 200px); height: clamp(40px, 9cqw, 200px); font-size: clamp(18px, 4cqw, 90px); }
  .hsr-arrow       { font-size: clamp(18px, 3cqw, 66px); }
  .howto-cd        { font-size: clamp(13px, 2.2cqw, 48px); }
  .howto-tap       { font-size: clamp(14px, 2.5cqw, 56px); }

  .res-icon   { font-size: clamp(72px, 13cqw, 285px); }
  .res-score  { font-size: clamp(52px, 9cqw, 200px); }
  .res-stars  { font-size: clamp(34px, 6cqw, 132px); }
  .res-msg    { font-size: clamp(22px, 3.8cqw, 84px); max-width: 88cqw; }
  .res-btn    { font-size: clamp(18px, 3.2cqw, 70px); padding: clamp(14px, 2.5cqw, 56px) clamp(40px, 10cqw, 220px); }
  .res-auto   { font-size: clamp(11px, 1.8cqw, 40px); }
  .logo-result { height: clamp(36px, 7cqw, 155px); }

  .fail-plane { font-size: clamp(80px, 14cqw, 305px); }
  .fail-title { font-size: clamp(36px, 7cqw, 155px); }
  .fail-sub   { font-size: clamp(16px, 3cqw, 66px); }
  .fail-btn   { font-size: clamp(18px, 3.2cqw, 52px); padding: clamp(14px, 2.5cqw, 40px) clamp(40px, 10cqw, 160px); }
  .fail-auto  { font-size: clamp(11px, 1.8cqw, 28px); }

  .feedback-toast { font-size: clamp(13px, 2.2cqw, 36px); padding: clamp(7px, 1.2cqw, 20px) clamp(16px, 3cqw, 50px); border-radius: 40px; }
  .correct-toast .ct-label    { font-size: clamp(12px, 2.2cqw, 36px); }
  .correct-toast .ct-feedback { font-size: clamp(10px, 1.8cqw, 28px); }
}

/* ═══════════════════════════════════════════════════
   4K ULTRA-KIOSK — 2160px column (3840×2160 display)
   Raises all clamp ceilings ×1.5 over the 450px block
   so elements continue scaling at 2160px game-column width.
   Breakpoint fires on viewport ≥1800px (body = 2160px at 3840h).
════════════════════════════════════════════════════ */
@media (min-width: 1800px) {
  :root {
    --cta-badge-size:  clamp(28px, 8cqw, 192px);
    --cta-btn-height:  clamp(44px, 9.6cqw, 240px);
  }
  .btn-berikutnya { border-radius: clamp(40px, 12cqw, 300px); font-size: clamp(14px, 3.5cqw, 90px); padding: 0.8cqw 0.8cqw 0.8cqw clamp(20px, 5cqw, 129px); }

  .logo-attract   { height: clamp(56px, 10cqw, 330px); }
  .attract-title  { font-size: clamp(44px, 9cqw, 300px); }
  .attract-sub    { font-size: clamp(18px, 3.8cqw, 128px); }
  .attract-cta    { font-size: clamp(20px, 3.8cqw, 128px); padding: clamp(14px, 2.5cqw, 84px) clamp(40px, 10cqw, 330px); }
  .attract-hint   { font-size: clamp(13px, 2.2cqw, 72px); }

  #topbar         { height: clamp(72px, 10cqw, 330px); padding: 0 clamp(14px, 3cqw, 99px); }
  #timer-center   { top: clamp(80px, calc(10cqw + 8px), 342px); }
  .logo-topbar    { height: clamp(30px, 5cqw, 165px); }
  .tb-title       { font-size: clamp(12px, 2cqw, 68px); }
  .level-badge    { font-size: clamp(10px, 1.8cqw, 60px); padding: 5px 18px; gap: 15px; }
  #timer-wrap     { width: clamp(56px, 10cqw, 330px); height: clamp(56px, 10cqw, 330px); }
  #t-num          { font-size: clamp(20px, 3.8cqw, 126px); }
  #timer-wrap.timer-urgent        { width: clamp(80px, 15cqw, 495px); height: clamp(80px, 15cqw, 495px); }
  #timer-wrap.timer-urgent #t-num { font-size: clamp(30px, 5.5cqw, 180px); }

  #slots-zone      { padding: 15px 24px; gap: 12px; }
  .slot-num        { font-size: clamp(20px, 4cqw, 135px); }
  .slot-hint       { font-size: clamp(9px, 1.6cqw, 54px); }
  .slot-filled-img { width: clamp(36px, 7cqw, 233px); height: clamp(36px, 7cqw, 233px); }

  :root       { --card-w: clamp(110px, 22cqw, 720px); --card-h: clamp(130px, 28cqw, 915px); }
  .card-label { font-size: clamp(11px, 2.2cqw, 72px); padding: clamp(5px, 1cqw, 33px) 4px; }

  .cd-instruction  { font-size: clamp(16px, 3cqw, 99px); }
  #cd-num          { font-size: clamp(180px, 30cqw, 975px); }
  #cd-num.go-style { font-size: clamp(120px, 22cqw, 720px); }

  .howto-header h2    { font-size: clamp(48px, 10cqw, 330px); }
  .howto-illustration { width: clamp(101px, 41cqw, 303px); }
  .hsr-num            { width: clamp(40px, 9cqw, 300px); height: clamp(40px, 9cqw, 300px); font-size: clamp(18px, 4cqw, 135px); }
  .hsr-arrow          { font-size: clamp(18px, 3cqw, 99px); }
  .howto-cd           { font-size: clamp(13px, 2.2cqw, 72px); }
  .howto-tap          { font-size: clamp(14px, 2.5cqw, 84px); }

  .res-icon    { font-size: clamp(72px, 13cqw, 428px); }
  .res-score   { font-size: clamp(52px, 9cqw, 300px); }
  .res-stars   { font-size: clamp(34px, 6cqw, 198px); }
  .res-msg     { font-size: clamp(22px, 3.8cqw, 126px); max-width: 88cqw; }
  .res-btn     { font-size: clamp(18px, 3.2cqw, 105px); padding: clamp(14px, 2.5cqw, 84px) clamp(40px, 10cqw, 330px); }
  .res-auto    { font-size: clamp(11px, 1.8cqw, 60px); }
  .logo-result { height: clamp(36px, 7cqw, 233px); }

  .fail-plane { font-size: clamp(80px, 14cqw, 458px); }
  .fail-title { font-size: clamp(36px, 7cqw, 233px); }
  .fail-sub   { font-size: clamp(16px, 3cqw, 99px); }
  .fail-btn   { font-size: clamp(18px, 3.2cqw, 78px); padding: clamp(14px, 2.5cqw, 60px) clamp(40px, 10cqw, 240px); }
  .fail-auto  { font-size: clamp(11px, 1.8cqw, 42px); }

  .feedback-toast             { font-size: clamp(13px, 2.2cqw, 54px); padding: clamp(7px, 1.2cqw, 30px) clamp(16px, 3cqw, 75px); border-radius: 60px; }
  .correct-toast .ct-label    { font-size: clamp(12px, 2.2cqw, 54px); }
  .correct-toast .ct-feedback { font-size: clamp(10px, 1.8cqw, 42px); }
}