/* ===================================================
   Say It With Idioms - Akıllı Tahta ve Mobil Uyumluluk Stilleri
   =================================================== */

/* --- Akıllı Tahta ve Büyük Ekranlar (1400px+) --- */
@media (min-width: 1440px) {
  .game-main-layout {
    max-width: 1680px;
    padding: 16px;
  }

  .header-logo {
    height: 56px;
  }

  .btn-header {
    font-size: 15px;
    padding: 10px 18px;
  }

  .btn-roll-master {
    font-size: 24px;
    padding: 16px 42px;
  }

  .team-name-text {
    font-size: 28px;
  }

  .pawn-name-badge {
    font-size: 13px;
    padding: 3px 10px;
  }

  .pawn-figure {
    width: 34px;
    height: 54px;
  }

  .pawn-head {
    width: 22px;
    height: 22px;
  }

  .pawn-body {
    width: 18px;
    height: 22px;
  }

  .pawn-base {
    width: 32px;
    height: 10px;
  }

  .card-modal-content {
    max-width: 760px;
  }

  .card-perspective-container {
    width: 320px;
    height: 450px;
  }
}

/* --- Orta Boy Ekranlar & Tabletler (769px - 1024px) --- */
@media (max-width: 1024px) {
  .game-bottom-panel {
    padding: 10px 16px;
    gap: 12px;
  }

  .team-name-text {
    font-size: 18px;
  }

  .dice-scene {
    width: 75px;
    height: 75px;
  }

  .cube-face {
    width: 75px;
    height: 75px;
  }

  .cube-face.front  { transform: rotateY(0deg) translateZ(37.5px); }
  .cube-face.back   { transform: rotateY(180deg) translateZ(37.5px); }
  .cube-face.right  { transform: rotateY(90deg) translateZ(37.5px); }
  .cube-face.left   { transform: rotateY(-90deg) translateZ(37.5px); }
  .cube-face.top    { transform: rotateX(90deg) translateZ(37.5px); }
  .cube-face.bottom { transform: rotateX(-90deg) translateZ(37.5px); }

  .btn-roll-master {
    font-size: 17px;
    padding: 12px 24px;
  }
}

/* --- Cep Telefonları (Portre & Kompakt Ekranlar: <= 768px) --- */
@media (max-width: 768px) {
  .game-header {
    padding: 8px 12px;
  }

  .header-title-text {
    display: none;
  }

  .header-logo {
    height: 38px;
  }

  .btn-header {
    font-size: 11px;
    padding: 6px 10px;
  }

  .game-main-layout {
    padding: 8px;
    gap: 10px;
  }

  .game-bottom-panel {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  .turn-status-card {
    width: 100%;
    justify-content: space-between;
  }

  .dice-container {
    gap: 16px;
  }

  .dice-scene {
    width: 65px;
    height: 65px;
  }

  .cube-face {
    width: 65px;
    height: 65px;
    border-radius: 12px;
    border-width: 3px;
  }

  .cube-face.front  { transform: rotateY(0deg) translateZ(32.5px); }
  .cube-face.back   { transform: rotateY(180deg) translateZ(32.5px); }
  .cube-face.right  { transform: rotateY(90deg) translateZ(32.5px); }
  .cube-face.left   { transform: rotateY(-90deg) translateZ(32.5px); }
  .cube-face.top    { transform: rotateX(90deg) translateZ(32.5px); }
  .cube-face.bottom { transform: rotateX(-90deg) translateZ(32.5px); }

  .face-act .icon, .face-draw .icon, .face-describe .icon {
    font-size: 22px;
  }

  .face-act .text, .face-draw .text, .face-describe .text {
    font-size: 9px;
  }

  .dice2-face .pip {
    width: 12px;
    height: 12px;
  }

  .btn-roll-master {
    width: 100%;
    justify-content: center;
    font-size: 18px;
    padding: 12px 20px;
  }

  .pawn-name-badge {
    font-size: 9px;
    padding: 1px 6px;
  }

  .pawn-figure {
    width: 22px;
    height: 36px;
  }

  .card-perspective-container {
    width: 240px;
    height: 340px;
  }

  .card-modal-content {
    padding: 16px;
  }

  .hud-leaderboard-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 6px 10px;
    gap: 6px;
  }

  .leaderboard-team-card {
    min-width: 130px;
    padding: 4px 10px;
  }
}

/* Yan HUD Panelleri Ekran Uyumluluğu */
@media (max-width: 1280px) {
  .side-team-hud-left,
  .side-team-hud-right {
    display: none !important;
  }
}