/* TABLET (≤1100px) */
@media (max-width: 1100px) {
  body {
    zoom: 0.9;
  }

  .game-row { --slide-x: -480px; }

  .logo { height: 80px; }
  .logo-text { font-size: 28px; letter-spacing: -1.12px; }

  .score-bar { max-width: 760px; gap: 40px; margin-bottom: 20px;}
  .score-label { font-size: 23px; }
  .score-value, .highscore-value { font-size: 41px; }

  .card { width: 280px; height: 388px; gap: 22px; }
  .card-img { width: 280px; height: 219px; }
  .info { width: 180px; height: 117px; }
  .info-jp { font-size: 20px; letter-spacing: -1.4px; }
  .info > p { width: 280px; }
  .info-kr { font-size: 15px; letter-spacing: -1.05px; top: 30px; }
  .info-count { font-size: 30px; letter-spacing: -2.1px; top: 61px; }
  .info-label { font-size: 15px; letter-spacing: -1.05px; top: 101px; }

  .vs-section { width: 200px; height: 150px; }
  .vs-frame { gap: 18px; width: 120px; }
  .vs-question { font-size: 15px; letter-spacing: -1.05px; }
  .vs-text { font-size: 40px; letter-spacing: -2.8px; }

  .go-title { font-size: 32px; letter-spacing: -2.24px; }
  .go-header { height: 80px; }
  .go-main { gap: 52px; }
  .go-card { width: 280px; height: 388px; gap: 22px; }
  .go-card-img { width: 280px; height: 219px; }
  .go-info { width: 280px; }
  .go-info > p { width: 280px; }
  .go-info-label { font-size: 15px; letter-spacing: -1.05px; top: 101px; }
  .go-info-count { font-size: 30px; letter-spacing: -2.1px; top: 61px; }
  .go-info-kr { font-size: 15px; letter-spacing: -1.05px; top: 30px; }
  .go-info-jp { font-size: 20px; letter-spacing: -1.4px; }
  .go-right { max-width: 380px; }
  .go-scores { gap: 40px; }
  .go-slabel { font-size: 23px; }
  .go-sval, .go-hsval { font-size: 41px; }
  .go-taglabel { font-size: 23px; }
  .go-tjp { font-size: 20px; }
  .go-tkr { font-size: 15px; }
  .go-thumb { width: 56px; height: 56px; }
  .go-tagitem { min-height: 56px; gap: 16px; }
  .go-btn { font-size: 22px; width: 190px; height: 54px; }

  /* Start screen tablet */
  .start-title { font-size: 44px; }
  #start-btn { font-size: 22px; width: 150px; height: 54px; margin-top: 10px; }
  .start-desc { font-size: 16px; }
  .start-disclaimer { font-size: 10px; white-space: pre-wrap;; max-width: 700px; }
  .floating-tag { font-size: 16px; padding: 9px 18px; border-radius: 12px; }
}

/* MOBILE (≤700px) — vertical stack */
@media (max-width: 700px) {
  body {
    zoom: 0.85;
  }

  .game-row {
    flex-direction: column !important;
    --slide-x: 0px;
    --slide-y: -530px;
  }

  @keyframes leftExit {
    to { opacity: 0; transform: translateY(-40px) scale(0.95); }
  }
  @keyframes rightEnter {
    from { opacity: 0; transform: translateY(60px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes goCardEnter {
    from { opacity: 0; transform: translateY(-40px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .logo { height: 70%; margin-bottom: 10px;}
  .logo-text { font-size: 20px; letter-spacing: -0.96px; size: 70%; }

  .score-bar { max-width: 290px; gap: 32px; padding: 0 16px; margin-bottom: 10px;}
  .score-label { font-size: 19px; }
  .score-value, .highscore-value { font-size: 32px; }

  .main { padding: 0 12px; }

  .card { width: 290px; height: 400px; gap: 22px; border-radius: 18px; }
  .card-img { width: 290px; height: 225px; }
  .info { width: 184px; height: 120px; }
  .info > p { width: 290px; }
  .info-jp { font-size: 21px; letter-spacing: -1.43px; }
  .info-kr { font-size: 15px; letter-spacing: -1.05px; top: 31px; }
  .info-count { font-size: 30px; letter-spacing: -2.1px; top: 62px; }
  .info-label { font-size: 15px; letter-spacing: -1.05px; top: 104px; }

  .vs-section { width: 290px; height: 120px; margin: 15px; margin-bottom: 0px;}
  .vs-frame { gap: 14px; width: 120px; }
  .vs-question { font-size: 15px; letter-spacing: -1.05px; }
  .vs-text { font-size: 36px; letter-spacing: -2.52px; }

  .go-title { font-size: 28px; letter-spacing: -1.96px; }
  .go-header { height: 70px; margin-bottom: 0px;}
  .go-main { flex-direction: column; align-items: center; gap: 24px; padding: 0 12px; }
  .go-card { width: 290px; height: 400px; gap: 22px; border-radius: 18px; margin-bottom: 15px; }
  .go-card-img { width: 290px; height: 225px; }
  .go-info { width: 184px; height: 120px; }
  .g0-info > p { width: 290px; }
  .go-info-label { font-size: 15px; letter-spacing: -1.05px; top: 104px; }
  .go-info-count { font-size: 30px; letter-spacing: -2.1px; top: 62px; }
  .go-info-kr { font-size: 15px; letter-spacing: -1.05px; top: 31px; }
  .go-info-jp { font-size: 21px; letter-spacing: -1.43px; }
  .go-right { width: 100%; max-width: 290px; }
  .go-scores { gap: 24px; }
  .go-slabel { font-size: 16px; margin: 0 0 2px; }
  .go-sval, .go-hsval { font-size: 30px; }
  .go-taglabel { font-size: 16px; }
  .go-tags-section { gap: 12px; }
  .go-taglist { max-height: 200px; gap: 8px; padding: 4px; }
  .go-tagitem { min-height: 52px; gap: 12px; }
  .go-thumb { width: 52px; height: 52px; }
  .go-tjp { font-size: 14px; }
  .go-tkr { font-size: 13px; }
  .go-footer { height: auto; padding: 16px 0 12px;}
  .go-btn { font-size: 18px; width: 160px; height: 48px; border-radius: 14px; }

  /* Start screen mobile */
  .start-content {
    margin-top: 12px;
    gap: 20px;
  }
  .start-title { font-size: 40px; }
  .start-desc { font-size: 14px; }
  #start-btn { font-size: 20px; width: 140px; height: 50px; margin-top: 14px; border-radius: 16px; }
  .start-disclaimer { font-size: 6px; white-space: normal; max-width: 80vw; }
  .floating-tag { display: none; }
}