/* =================================================================
   MOBILE RESPONSIVE FIXES - Mafia, Sutda, E-Card
   Based on mockup designs for mobile-first responsive layout
   ================================================================= */

/* MAFIA GAME MOBILE FIXES */
@media (max-width: 430px) {
  /* Ensure content scrolls properly */
  .mf-content {
    min-height: 0;
  }

  /* Compact player grid for 10+ players */
  .mf-player-grid.many-players {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .mf-player-card {
    min-height: 100px;
    padding: 8px 4px;
    gap: 4px;
  }

  .mf-player-avatar {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .mf-player-name {
    font-size: 11px;
  }

  /* Night panel compact */
  .mf-night-panel {
    padding: 12px;
  }

  /* Chat panel fixed height with scroll */
  .mf-chat-panel {
    max-height: 160px;
  }

  .mf-chat-messages {
    max-height: 90px;
  }

  /* Timer and phase display prominent but compact */
  .mf-timer-box {
    padding: 5px 10px;
    font-size: 16px;
  }

  .mf-phase-badge {
    padding: 5px 12px;
    font-size: 14px;
  }

  .mf-day-counter {
    font-size: 10px;
  }

  /* Vote buttons - min 44px touch target */
  .mf-vote-btn {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 14px;
    touch-action: manipulation;
  }

  /* Bottom action area */
  .mf-action-area {
    padding: 10px 12px;
  }

  .mf-btn-row {
    gap: 8px;
  }

  .mf-btn-row button {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* SUTDA GAME MOBILE FIXES */
@media (max-width: 430px) {
  .sutda-top-bar { padding: 6px 10px; }
  .sutda-opponents { padding: 4px 0; gap: 6px; }
  .sutda-opp-name { font-size: 9px; max-width: 60px; }
  .sutda-opp-chips { font-size: 8px; }
  .sutda-pot-label { font-size: 10px; }
  .sutda-pot-amount { font-size: 24px; }

  /* Hwatu cards sized for mobile — vw 기반으로 최대화 */
  .hwatu-card { width: 40px; height: 60px; border-radius: 5px; }
  .hwatu-card-big {
    width: min(42vw, 160px);
    height: min(62vw, 235px);
    border-radius: 12px;
  }
  .hwatu-num { font-size: 20px; }
  .hwatu-card-big .hwatu-num { font-size: min(14vw, 52px); }
  .hwatu-card-big .hwatu-month { font-size: min(4vw, 15px); padding-top: 4px; margin-top: 3px; }
  .hwatu-card-big .hwatu-gwang-text { font-size: min(3.5vw, 13px); bottom: 6px; }
  .hwatu-card.gwang::before { width: 11px; height: 11px; top: 3px; right: 3px; }
  .hwatu-card-big.gwang::before { width: min(5.5vw, 20px); height: min(5.5vw, 20px); top: 6px; right: 6px; border-width: 2px; }

  .sutda-my-area { padding: 4px 10px 6px; }
  .sutda-my-cards { gap: min(4vw, 18px); width: 100%; }
  .sutda-my-rank { margin-top: 6px; font-size: 22px; }

  /* Betting bar - 44px min touch targets */
  .sutda-action-bar { padding: 8px; gap: 4px; display: grid; grid-template-columns: repeat(3, 1fr); }
  .sutda-bet-btn { min-height: 44px; padding: 10px 8px; font-size: 13px; touch-action: manipulation; }
  .sutda-bet-btn.sutda-bet-call,
  .sutda-bet-btn.sutda-bet-die { font-size: 14px; }
  .sutda-bet-btn.sutda-bet-allin { grid-column: span 3; font-size: 15px; }

  .sutda-seryuk-panel { padding: 14px; }
  .sutda-seryuk-title { font-size: 15px; }
  .sutda-seryuk-desc { font-size: 11px; }
  .sutda-seryuk-btn { min-height: 52px; padding: 10px; }
  .sutda-seryuk-icon { font-size: 26px; }
  .sutda-result-overlay { padding: 16px; }
  .sutda-result-box { padding: 20px; }
  .sutda-result-title { font-size: 32px; }
}

/* POKER GAME — Portrait mobile 카드 크기 + 중앙 정렬 */
@media (max-width: 430px) and (orientation: portrait) {
  /* 카드 크기: 2장 + gap이 화면 너비 안에 들어오도록 vw 기반 */
  #pokerGame .pk-hero-card {
    width: min(43vw, 175px);
    height: min(62vw, 252px);
  }
  #pokerGame .pk-my-cards {
    width: 100%;
    gap: min(4vw, 18px);
  }
  #pokerGame .pk-hero-corner .pk-hero-rank { font-size: min(9vw, 36px); }
  #pokerGame .pk-hero-corner .pk-hero-suit-sm { font-size: min(6vw, 22px); }
  #pokerGame .pk-hero-center { font-size: min(20vw, 76px); }
  #pokerGame .pk-hand-name { font-size: min(6vw, 28px); letter-spacing: 3px; }
  /* Community cards도 vw 기반 */
  #pokerGame .pk-comm-card {
    width: min(13vw, 52px);
    height: min(19vw, 74px);
  }
  #pokerGame .pk-comm-card .pk-comm-rank { font-size: min(3.5vw, 14px); }
  #pokerGame .pk-comm-card .pk-comm-suit { font-size: min(5vw, 20px); }
  #pokerGame .pk-comm-placeholder {
    width: min(13vw, 52px);
    height: min(19vw, 74px);
  }
}

/* E-CARD GAME MOBILE FIXES */
@media (max-width: 430px) {
  #ecardGame {
    padding: 0;
    gap: 0;
  }

  /* Compact top bar */
  .ecard-top-bar {
    padding: 6px 10px;
  }

  .ecard-title {
    font-size: 16px;
  }

  .ecard-round {
    font-size: 12px;
  }

  /* Score display - compact */
  .ecard-score {
    padding: 5px 12px;
    gap: 10px;
    margin: 2px 8px;
  }

  .score-icon {
    font-size: 18px;
  }

  .score-value {
    font-size: 22px;
  }

  .score-divider {
    font-size: 20px;
  }

  /* Role badge compact */
  .ecard-role-display {
    padding: 2px 8px;
  }

  .role-badge {
    padding: 4px 12px;
  }

  .role-icon {
    font-size: 18px;
  }

  .role-text {
    font-size: 12px;
  }

  .role-text span {
    font-size: 13px;
  }

  /* Opponent area - already compact strip */
  .ecard-opponent-area {
    padding: 4px 10px;
    margin: 0 8px;
  }

  .ecard-opponent-area .opponent-avatar {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .ecard-opponent-area .opponent-name {
    font-size: 11px;
  }

  .opponent-cards-count {
    font-size: 10px;
  }

  /* Battle/reveal area proper sizing */
  .ecard-battle-area {
    padding: 12px;
    gap: 12px;
    min-height: 100px;
  }

  .battle-card {
    transform: scale(1);
  }

  .battle-vs {
    font-size: 20px;
  }

  /* Result text */
  .ecard-result-text {
    font-size: 16px;
    padding: 4px;
  }

  /* Card hand - big cards on mobile */
  .ecard-my-cards-area {
    gap: 4px;
  }

  .my-cards-label {
    font-size: 11px;
  }

  .ecard-cards-hand {
    padding: 8px 4px 14px;
  }

  .ecard-card {
    width: 76px;
    height: 110px;
    margin: 0 -10px;
  }

  .ecard-card:hover {
    transform: translateY(-12px) scale(1.03);
  }

  .ecard-card.selected {
    transform: translateY(-16px) scale(1.05);
  }

  .ecard-card-icon {
    font-size: 36px;
  }

  .ecard-card-name {
    font-size: 12px;
  }

  /* Betting UI compact */
  .ecard-bet-area,
  .ecard-bet-response {
    padding: 14px;
  }

  .bet-label {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .bet-controls {
    gap: 10px;
    margin-bottom: 10px;
  }

  .bet-amount {
    font-size: 18px;
    min-width: 50px;
  }

  .bet-proposal {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .bet-proposal span {
    font-size: 16px;
  }

  .bet-buttons {
    gap: 6px;
  }

  /* Action buttons - 44px touch targets */
  .ecard-action-buttons {
    gap: 6px;
  }

  .ecard-action-buttons button {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 14px;
    touch-action: manipulation;
  }

  /* Waiting state */
  .ecard-waiting {
    padding: 16px;
  }
}

/* Extra small screens (360px and below) */
@media (max-width: 360px) {
  /* Mafia even more compact */
  .mf-player-avatar {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .mf-player-name {
    font-size: 10px;
  }

  .mf-player-card {
    min-height: 90px;
  }

  /* Sutda cards smaller */
  .hwatu-card {
    width: 36px;
    height: 54px;
  }

  .hwatu-card-big {
    width: 60px;
    height: 90px;
  }

  .hwatu-num {
    font-size: 18px;
  }

  .hwatu-card-big .hwatu-num {
    font-size: 28px;
  }

  .sutda-pot-amount {
    font-size: 22px;
  }

  /* E-Card smaller cards */
  .ecard-card {
    width: 58px;
    height: 84px;
    margin: 0 -6px;
  }

  .ecard-card-icon {
    font-size: 28px;
  }

  .ecard-card-name {
    font-size: 11px;
  }
}

/* Mobile-first fixes for all game screens */
@media (max-width: 640px) {
  /* Quick Draw mobile optimizations */
  .qd-tap-zone {
    width: min(260px, 75vw);
    height: min(260px, 75vw);
  }

  .qd-status-text {
    font-size: clamp(32px, 10vw, 56px);
  }

  .qd-tap-zone.fire .qd-status-text {
    font-size: clamp(42px, 13vw, 72px);
  }

  /* Russian Roulette mobile */
  .cylinder-container {
    width: min(220px, 55vw);
    height: min(220px, 55vw);
  }

  .survivors-list {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  }

}

/* ===================================== */
/* YAHTZEE, UPDOWN, TRUTH MOBILE FIXES */
/* ===================================== */

/* YAHTZEE GAME — Landscape layout: scorecard left, dice right */
@media (orientation: landscape), (min-aspect-ratio: 1/1) {
  #yahtzeeGame.active {
    display: grid !important;
    grid-template-columns: 30% 70%;
    grid-template-rows: auto 1fr;
    gap: 0;
    overflow: hidden !important;
    padding: 0 !important;
    height: 100% !important;
  }

  /* Header: thin top bar spanning both columns */
  .yahtzee-header {
    grid-column: 1 / 3;
    grid-row: 1;
    padding: 2px 10px !important;
    min-height: 0 !important;
  }

  .yahtzee-turn-info { gap: 0 !important; }
  .yahtzee-turn-text { font-size: 12px !important; }
  .yahtzee-current-player { font-size: 10px !important; }
  .yahtzee-rolls-left { font-size: 11px !important; padding: 2px 8px !important; }

  /* Hide players bar in landscape to save space */
  .yahtzee-players-bar { display: none !important; }

  /* === LEFT: Scorecard (30%) === */
  .yahtzee-scorecard-area {
    grid-column: 1;
    grid-row: 2;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 3px !important;
    margin: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255,255,255,0.08);
    gap: 2px !important;
  }

  .yahtzee-scorecard-title { font-size: 9px !important; margin-bottom: 1px !important; padding: 0 4px !important; }
  .yahtzee-score-table { font-size: 10px !important; }
  .yahtzee-score-table th { padding: 1px 3px !important; font-size: 8px !important; }
  .yahtzee-score-row td { padding: 1px 3px !important; }
  .yahtzee-cat-name {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 90px !important;
  }
  .yahtzee-cat-score { font-size: 11px !important; min-width: 24px !important; }
  .ysc-cell { padding: 1px 2px !important; font-size: 10px !important; }
  .ysc-player { padding: 1px 2px !important; font-size: 8px !important; }
  .yahtzee-subtotal-row td, .yahtzee-bonus-row td { padding: 1px 3px !important; font-size: 9px !important; }
  .yahtzee-total-row td { padding: 2px 3px !important; font-size: 9px !important; }
  .yahtzee-total-row td:last-child { font-size: 12px !important; }
  .yahtzee-total-row { margin-top: 2px !important; }
  .yahtzee-divider-row { height: 3px !important; }
  .yahtzee-divider-row td { padding: 0 !important; }
  .yahtzee-score-btn {
    min-height: 24px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    margin-top: 2px !important;
  }

  /* === RIGHT: Dice area — canvas + controls side by side === */
  .yahtzee-dice-area {
    grid-column: 2;
    grid-row: 2;
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    padding: 6px !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  /* Three.js canvas: fills left side */
  #yahtzeeThreeContainer {
    flex: 1 !important;
    min-width: 0 !important;
    aspect-ratio: unset !important;
    border-radius: 8px !important;
    min-height: 0 !important;
  }

  /* Controls panel: right side */
  .yahtzee-controls-panel {
    width: 140px !important;
    gap: 8px !important;
    padding: 10px 8px !important;
    border-radius: 10px !important;
  }

  /* Hold bar */
  .yahtzee-hold-bar {
    min-height: 40px !important;
    width: 100% !important;
    padding: 4px !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
  }
  .yahtzee-hold-bar::before { font-size: 7px !important; top: -5px !important; }
  .yahtzee-hold-bar:empty { min-height: 0 !important; height: 0 !important; padding: 0 !important; border: none !important; }
  .yahtzee-hold-bar:empty::after { display: none !important; }

  .yahtzee-held-die { width: 28px !important; height: 28px !important; padding: 4px !important; }
  .yahtzee-held-die .held-pip { width: 4px !important; height: 4px !important; }

  /* Roll hint: hidden in landscape */
  .yahtzee-roll-hint { display: none !important; }

  /* Controls title */
  .yahtzee-controls-title { font-size: 9px !important; letter-spacing: 2px !important; }

  /* Rolls indicator */
  .yahtzee-rolls-indicator { gap: 5px !important; padding: 2px 0 !important; }
  .yahtzee-rolls-indicator .roll-pip { width: 8px !important; height: 8px !important; }

  /* Roll button */
  .yahtzee-roll-btn {
    width: 100% !important;
    padding: 10px 6px !important;
    font-size: 14px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  .yahtzee-combo-label { font-size: 14px !important; }

  /* Game over overlay */
  .yahtzee-game-over {
    grid-column: 1 / 3 !important;
    grid-row: 1 / 3 !important;
    z-index: 10 !important;
  }
}

/* Portrait fallback: show rotate prompt for Yahtzee */
@media (orientation: portrait) and (max-width: 430px) {
  #yahtzeeGame.active::after {
    content: '📱 화면을 가로로 돌려주세요';
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 107, 53, 0.9);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    z-index: 200;
    white-space: nowrap;
    animation: rotatePulse 2s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes rotatePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }
}

/* TRUTH GAME MOBILE FIXES */
@media (max-width: 430px) {
  .truth-top-bar {
    padding: 8px 12px !important;
  }

  .truth-round-badge {
    font-size: 13px !important;
  }

  .truth-questioner-display {
    font-size: 12px !important;
  }

  .truth-content {
    padding: 6px 0 !important;
  }

  .truth-phase-area {
    gap: 14px !important;
    padding: 0 12px !important;
  }

  .truth-your-turn-badge {
    font-size: 20px !important;
  }

  .truth-textarea {
    padding: 14px !important;
    font-size: 15px !important;
  }

  .truth-submit-btn {
    min-height: 48px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
  }

  .truth-question-display {
    padding: 16px !important;
  }

  .truth-question-label {
    font-size: 24px !important;
  }

  .truth-question-text {
    font-size: 18px !important;
  }

  .truth-question-display-small {
    padding: 12px !important;
  }

  .truth-question-display-small .truth-question-text {
    font-size: 15px !important;
  }

  .truth-question-display-small .truth-question-label {
    font-size: 18px !important;
  }

  .truth-vote-buttons {
    gap: 16px !important;
    padding: 8px 0 !important;
  }

  .truth-vote-btn {
    width: 120px !important;
    height: 120px !important;
    min-width: 110px !important;
    min-height: 110px !important;
  }

  .truth-vote-symbol {
    font-size: 44px !important;
  }

  .truth-vote-label {
    font-size: 13px !important;
  }

  .truth-result-container {
    padding: 20px 16px !important;
  }

  .truth-result-title {
    font-size: 16px !important;
  }

  .truth-result-row {
    padding: 10px 14px !important;
    gap: 14px !important;
  }

  .truth-result-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
  }

  .truth-result-count {
    font-size: 24px !important;
  }

  .truth-result-dots {
    gap: 5px !important;
  }

  .truth-dot {
    width: 12px !important;
    height: 12px !important;
  }

  .truth-players-bar {
    padding: 8px 6px !important;
    gap: 6px !important;
  }

  .truth-player-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }

  .truth-player-name {
    font-size: 9px !important;
    max-width: 45px !important;
  }

  .truth-player-avatar.has-voted::after {
    width: 14px !important;
    height: 14px !important;
    font-size: 8px !important;
  }

  .truth-next-btn {
    min-height: 48px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
  }
}

/* UPDOWN GAME MOBILE FIXES */
@media (max-width: 430px) {
  .ud-hero-card {
    width: 140px !important;
    height: 200px !important;
  }
  .ud-hero-corner .ud-hero-rank { font-size: 28px !important; }
  .ud-hero-corner .ud-hero-suit-sm { font-size: 18px !important; }
  .ud-hero-center { font-size: 60px !important; }
  .ud-prev-card {
    width: 44px !important;
    height: 64px !important;
  }
  .ud-prev-placeholder {
    width: 44px !important;
    height: 64px !important;
  }
  .ud-prev-corner .ud-prev-rank { font-size: 12px !important; }
  .ud-prev-center { font-size: 18px !important; }
  .ud-result { font-size: 22px !important; }
  .ud-btn {
    padding: 14px 8px !important;
  }
  .ud-btn-arrow { font-size: 22px !important; }
  .ud-btn-label { font-size: 18px !important; }
  .ud-bet-input { font-size: 12px !important; }
  .ud-penalty-list { max-height: 50px !important; }
  .ud-special-area { padding: 14px !important; }
  .ud-special-title { font-size: 16px !important; }
  .ud-player-select { max-height: 100px !important; gap: 6px !important; }
  .ud-btn-special { padding: 12px !important; font-size: 14px !important; }
  .ud-penalty-content {
    max-width: 320px !important;
    padding: 20px !important;
  }
  .ud-penalty-title { font-size: 28px !important; }
  .ud-penalty-text { font-size: 18px !important; }
  .ud-btn-accept,
  .ud-btn-reject {
    padding: 13px !important;
    font-size: 15px !important;
  }
}

/* Extra small screens for Y/U/T games */
@media (max-width: 360px) {
  .yahtzee-score-table {
    font-size: 8px !important;
  }

  .truth-vote-btn {
    width: 105px !important;
    height: 105px !important;
  }

  .truth-vote-symbol {
    font-size: 38px !important;
  }

  .ud-hero-card {
    width: 120px !important;
    height: 174px !important;
  }
  .ud-hero-corner .ud-hero-rank { font-size: 24px !important; }
  .ud-hero-corner .ud-hero-suit-sm { font-size: 16px !important; }
  .ud-hero-center { font-size: 50px !important; }
  .ud-prev-card { width: 40px !important; height: 58px !important; }
  .ud-prev-placeholder { width: 40px !important; height: 58px !important; }
}

/* =================================================================
   LANDSCAPE MODE — All Games (except Yahtzee which has its own block)
   Reference-matched layouts: left-right splits for card games
   ================================================================= */
@media (orientation: landscape), (min-aspect-ratio: 1/1) {

  /* ───────────────────────────────────────────────
     SUTDA — Left vertical player panel + bigger cards
     ─────────────────────────────────────────────── */
  #sutdaGame .sutda-content {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    grid-template-rows: auto auto 1fr !important;
    padding: 4px !important;
    overflow: hidden !important;
  }
  #sutdaGame .sutda-top-bar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    z-index: 12 !important;
  }
  /* Players: left column spanning rows 2-3, vertical list */
  #sutdaGame .sutda-opponents {
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    align-self: stretch !important;
    gap: 3px !important;
    padding: 3px !important;
    overflow-y: auto !important;
    max-width: none !important;
    z-index: 10 !important;
  }
  #sutdaGame .sutda-me-slot { display: flex !important; }
  /* Each player slot: compact card-style row */
  #sutdaGame .sutda-opp-slot {
    flex-wrap: wrap !important;
    gap: 1px 4px !important;
    padding: 3px 5px !important;
    background: rgba(0,0,0,0.3) !important;
    border-radius: 6px !important;
    border-left: 2px solid transparent !important;
    flex-shrink: 0 !important;
  }
  #sutdaGame .sutda-opp-slot.sutda-me-slot {
    border-left-color: #ffd700 !important;
    background: rgba(255,215,0,0.12) !important;
  }
  #sutdaGame .sutda-opp-avatar { width: 22px !important; height: 22px !important; font-size: 11px !important; }
  #sutdaGame .sutda-opp-name { font-size: 10px !important; max-width: 48px !important; }
  #sutdaGame .sutda-opp-chips { font-size: 9px !important; }
  #sutdaGame .sutda-opp-status { font-size: 9px !important; }
  #sutdaGame .sutda-opp-cards { gap: 2px !important; }
  #sutdaGame .sutda-opp-cards .hwatu-card { transform: scale(0.8) !important; margin: -2px !important; }
  /* Center area: pot + turn indicator */
  #sutdaGame .sutda-center-area {
    grid-column: 2 !important;
    grid-row: 2 !important;
    flex: none !important;
    min-height: auto !important;
    justify-self: center !important;
    align-self: center !important;
    padding: 0 4px !important;
    flex-direction: row !important;
    gap: 8px !important;
  }
  #sutdaGame .sutda-pot-glow { display: none !important; }
  #sutdaGame .sutda-pot-center .sutda-pot-amount { font-size: 18px !important; }
  #sutdaGame .sutda-pot-center .sutda-pot-label { font-size: 10px !important; }
  #sutdaGame .sutda-turn-indicator { font-size: 11px !important; }
  /* My cards — BIGGER, right column row 3 */
  #sutdaGame .sutda-my-area {
    grid-column: 2 !important;
    grid-row: 3 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background: none !important;
    transform: none !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    border-radius: 0 !important;
  }
  #sutdaGame .sutda-my-cards { width: 100% !important; }
  #sutdaGame .hwatu-card-big {
    width: min(50vh, 170px) !important;
    height: min(72vh, 255px) !important;
  }
  #sutdaGame .hwatu-card-big .hwatu-num { font-size: min(17vh, 60px) !important; }
  #sutdaGame .hwatu-card-big .hwatu-month { font-size: min(5vh, 17px) !important; padding-top: 5px !important; }
  #sutdaGame .hwatu-card-big .hwatu-gwang-text { font-size: min(4vh, 14px) !important; }
  #sutdaGame .sutda-my-rank { font-size: min(8vh, 32px) !important; }
  /* Action buttons — absolute bottom-right vertical stack */
  #sutdaGame .sutda-action-bar {
    position: absolute !important;
    bottom: 6px !important;
    right: 6px !important;
    width: 180px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 !important;
  }
  #sutdaGame .sutda-bet-btn {
    font-size: 13px !important;
    padding: 8px 6px !important;
    min-height: auto !important;
  }

  /* ───────────────────────────────────────────────
     E-CARD — 가로 모드 그리드
     Row 1: 컴팩트 헤더 (전체 너비)
     Row 2: 플레이 영역 (전체 너비) — 리빌/제출대기/상태
     Row 3: 카드 패 (좌) + 컨트롤 사이드바 (우)
     ─────────────────────────────────────────────── */
  #ecardGame.active {
    display: grid !important;
    grid-template-columns: 1fr min(220px, 38vw) !important;
    grid-template-rows: auto 1fr auto !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  /* Row 1: Compact header — full width */
  #ecardGame .ecard-compact-header {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    padding: 3px 8px !important;
    min-height: 42px !important;
  }

  /* Row 2: Play area — full width center stage */
  #ecardGame .ecard-play-area {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
  #ecardGame .ecard-result-text {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    z-index: 2 !important;
    font-size: 15px !important;
    padding: 6px 10px !important;
  }
  #ecardGame .ecard-reveal-result {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    z-index: 2 !important;
  }

  /* Row 3 LEFT: Card hand */
  #ecardGame .ecard-my-cards-area {
    grid-column: 1 !important;
    grid-row: 3 !important;
    padding: 4px 8px !important;
  }
  #ecardGame .my-cards-label { font-size: 11px !important; margin-bottom: 2px !important; }
  #ecardGame .ecard-cards-hand { gap: 0 !important; padding: 4px 4px 8px !important; }

  /* Card sizing — vh 기반으로 가로 화면에 최적화 */
  #ecardGame .ecard-card {
    width: min(20vh, 80px) !important;
    height: min(29vh, 116px) !important;
    margin: 0 -10px !important;
  }
  #ecardGame .ecard-card-icon { font-size: min(11vh, 36px) !important; }
  #ecardGame .ecard-card-name { font-size: 11px !important; }

  /* Row 3 RIGHT: 컨트롤 사이드바 (상호배타 — JS가 하나만 표시) */
  /* ⚠️ display 속성에 !important 금지 — JS display 토글과 충돌 */
  #ecardGame .ecard-action-buttons {
    grid-column: 2 !important;
    grid-row: 3 !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    min-width: 0 !important;
    border-left: 2px solid rgba(201,168,76,0.2) !important;
    background: linear-gradient(90deg, rgba(0,0,0,0.10) 0%, transparent 100%) !important;
  }
  #ecardGame .ecard-action-buttons .btn {
    width: 100% !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  #ecardGame .ecard-bet-area {
    grid-column: 2 !important;
    grid-row: 3 !important;
    padding: 8px 10px !important;
    flex-direction: column !important;
    gap: 6px !important;
    border-left: 2px solid rgba(201,168,76,0.2) !important;
    background: linear-gradient(90deg, rgba(0,0,0,0.10) 0%, transparent 100%) !important;
  }
  #ecardGame .ecard-bet-response {
    grid-column: 2 !important;
    grid-row: 3 !important;
    padding: 8px 10px !important;
    border-left: 2px solid rgba(201,168,76,0.2) !important;
    background: linear-gradient(90deg, rgba(0,0,0,0.10) 0%, transparent 100%) !important;
  }
  #ecardGame .ecard-waiting {
    grid-column: 2 !important;
    grid-row: 3 !important;
    border-left: 2px solid rgba(201,168,76,0.2) !important;
    background: linear-gradient(90deg, rgba(0,0,0,0.10) 0%, transparent 100%) !important;
  }

  /* ───────────────────────────────────────────────
     UP/DOWN — Landscape: column layout with compact sizes
     ─────────────────────────────────────────────── */
  #updownGame .ud-content {
    flex-direction: column !important;
  }
  #updownGame .ud-top-bar {
    padding: 3px 10px !important;
    margin-bottom: 2px !important;
  }
  #updownGame .ud-cards-area {
    flex: 1 !important;
    gap: 10px !important;
  }
  #updownGame .ud-hero-card {
    width: min(32vh, 140px) !important;
    height: min(46vh, 200px) !important;
  }
  #updownGame .ud-hero-corner .ud-hero-rank { font-size: min(7vh, 28px) !important; }
  #updownGame .ud-hero-corner .ud-hero-suit-sm { font-size: min(5vh, 18px) !important; }
  #updownGame .ud-hero-center { font-size: min(16vh, 60px) !important; }
  #updownGame .ud-hero-back-pattern {
    width: min(14vh, 60px) !important;
    height: min(14vh, 60px) !important;
  }
  #updownGame .ud-prev-card {
    width: min(10vh, 44px) !important;
    height: min(14vh, 64px) !important;
  }
  #updownGame .ud-prev-placeholder {
    width: min(10vh, 44px) !important;
    height: min(14vh, 64px) !important;
  }
  #updownGame .ud-result {
    display: none !important;
  }
  #updownGame .ud-bottom-panel {
    gap: 6px !important;
    padding: 0 4px !important;
  }
  #updownGame .ud-btn {
    padding: min(4vh, 14px) !important;
  }
  #updownGame .ud-btn-arrow { font-size: min(5vh, 22px) !important; }
  #updownGame .ud-btn-label { font-size: min(5vh, 18px) !important; }
  #updownGame .ud-btn-bet {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  #updownGame .ud-penalty-list {
    max-height: 50px !important;
    padding: 4px 10px !important;
  }
  #updownGame .ud-card-label { font-size: 9px !important; }
  #updownGame .ud-deck-count { font-size: 10px !important; padding: 2px 8px !important; }
  /* Penalty modal */
  #updownGame .ud-penalty-modal {
    position: fixed !important;
    z-index: 150 !important;
  }
  #updownGame .ud-penalty-content {
    max-height: 80vh !important;
    padding: 14px !important;
  }
  #updownGame .ud-penalty-title { font-size: 22px !important; }
  #updownGame .ud-btn-accept,
  #updownGame .ud-btn-reject {
    padding: 10px !important;
    font-size: 14px !important;
  }

  /* ───────────────────────────────────────────────
     MAFIA — Ref: role banner at BOTTOM, compact topbar,
     4-col player grid, content scrollable
     ─────────────────────────────────────────────── */
  #mafiaGame.active {
    display: flex !important;
    flex-direction: column !important;
  }
  #mafiaGame .mf-topbar {
    padding: 4px 10px !important;
    order: 0 !important;
  }
  #mafiaGame .mf-phase-badge { padding: 2px 8px !important; font-size: 11px !important; }
  #mafiaGame .mf-day-counter { font-size: 9px !important; }
  #mafiaGame .mf-timer-box { padding: 2px 8px !important; font-size: 13px !important; }
  /* Role banner → bottom (ref shows it at bottom) */
  #mafiaGame .mf-role-banner {
    order: 10 !important;
    margin: 0 10px 4px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  #mafiaGame .mf-role-emoji { font-size: 24px !important; }
  #mafiaGame .mf-role-name { font-size: 13px !important; }
  #mafiaGame .mf-role-desc { font-size: 10px !important; }
  /* Content: expand to fill */
  #mafiaGame .mf-content {
    order: 1 !important;
    flex: 1 !important;
    padding: 6px 10px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
  }
  /* 4-column grid (ref shows 4×2) */
  #mafiaGame .mf-player-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  #mafiaGame .mf-player-card {
    min-height: 60px !important;
    padding: 6px 4px !important;
    gap: 2px !important;
  }
  #mafiaGame .mf-player-avatar { width: 36px !important; height: 36px !important; font-size: 18px !important; }
  #mafiaGame .mf-player-name { font-size: 10px !important; }
  /* Action area */
  #mafiaGame .mf-action-area {
    order: 5 !important;
    padding: 4px 10px !important;
  }
  #mafiaGame .mf-btn-row { gap: 6px !important; }
  #mafiaGame .mf-btn-row button {
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* ───────────────────────────────────────────────
     TRUTH — Ref: 3D raised O/X buttons, LED panel results
     ─────────────────────────────────────────────── */
  #truthGame .truth-top-bar {
    padding: 4px 10px !important;
  }
  #truthGame .truth-round-badge { font-size: 11px !important; padding: 2px 8px !important; }
  #truthGame .truth-questioner-display { font-size: 10px !important; }
  #truthGame .truth-content {
    padding: 4px 0 !important;
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    gap: 8px !important;
  }
  #truthGame {
    min-height: auto !important;
  }
  #truthGame .truth-phase-area { gap: 8px !important; padding: 0 10px !important; }
  #truthGame .truth-your-turn-badge { font-size: 16px !important; }
  #truthGame .truth-question-display { padding: 10px !important; }
  #truthGame .truth-question-label { font-size: 18px !important; }
  #truthGame .truth-question-text { font-size: 14px !important; }
  /* O/X buttons — 3D raised look matching ref */
  #truthGame .truth-vote-buttons {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 24px !important;
    padding: 8px 0 !important;
  }
  #truthGame .truth-vote-btn {
    width: 100px !important;
    height: 100px !important;
    min-width: 90px !important;
    min-height: 90px !important;
    box-shadow:
      0 6px 0 rgba(0,0,0,0.4),
      0 8px 20px rgba(0,0,0,0.5),
      inset 0 2px 0 rgba(255,255,255,0.25) !important;
    transform: translateY(-2px) !important;
    transition: all 0.1s !important;
  }
  #truthGame .truth-vote-btn:active {
    transform: translateY(2px) !important;
    box-shadow:
      0 2px 0 rgba(0,0,0,0.4),
      0 3px 8px rgba(0,0,0,0.4),
      inset 0 2px 0 rgba(255,255,255,0.15) !important;
  }
  #truthGame .truth-vote-symbol { font-size: 40px !important; }
  #truthGame .truth-vote-label { font-size: 12px !important; }
  /* Result: LED panel style (ref: metal frame + circle indicators) */
  #truthGame .truth-result-container {
    padding: 10px !important;
    background: linear-gradient(135deg, rgba(20,20,25,0.9), rgba(30,30,35,0.9)) !important;
    border: 2px solid #333 !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.5), inset 0 0 20px rgba(0,255,65,0.05) !important;
  }
  #truthGame .truth-result-row {
    padding: 6px 10px !important;
    gap: 10px !important;
    background: rgba(0,0,0,0.3) !important;
    border-radius: 6px !important;
    border: 1px solid #2a2a2a !important;
  }
  #truthGame .truth-result-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }
  #truthGame .truth-result-count { font-size: 20px !important; }
  /* Players bar compact */
  #truthGame .truth-players-bar {
    padding: 4px 6px !important;
    gap: 4px !important;
  }
  #truthGame .truth-player-avatar { width: 24px !important; height: 24px !important; font-size: 12px !important; }
  #truthGame .truth-player-name { font-size: 8px !important; max-width: 32px !important; }
  #truthGame .truth-textarea { padding: 8px !important; font-size: 13px !important; max-height: 15vh !important; }
  #truthGame .truth-submit-btn,
  #truthGame .truth-next-btn {
    min-height: 36px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
  }

  /* ───────────────────────────────────────────────
     POKER — Felt casino layout, landscape: side-by-side
     ─────────────────────────────────────────────── */
  /* ───── POKER — 3-column grid: players | cards | actions ───── */
  #pokerGame .pk-content {
    display: grid !important;
    grid-template-columns: 120px 1fr auto !important;
    grid-template-rows: auto auto 1fr !important;
    padding: 4px !important;
    overflow: hidden !important;
  }
  #pokerGame .pk-top-bar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    z-index: 12 !important;
  }
  /* Players: left column spanning rows 2-3, vertical list */
  #pokerGame .pk-opponent-area {
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    align-self: stretch !important;
    gap: 3px !important;
    padding: 3px !important;
    overflow-y: auto !important;
    max-width: none !important;
    z-index: 10 !important;
  }
  #pokerGame .pk-me-slot { display: flex !important; }
  /* Each player slot: compact card-style row */
  #pokerGame .pk-opp-slot {
    flex-wrap: wrap !important;
    gap: 1px 4px !important;
    padding: 3px 5px !important;
    background: rgba(0,0,0,0.3) !important;
    border-radius: 6px !important;
    border-left: 2px solid transparent !important;
    flex-shrink: 0 !important;
  }
  #pokerGame .pk-opp-slot.pk-me-slot {
    border-left-color: #ffd700 !important;
    background: rgba(255,215,0,0.12) !important;
  }
  #pokerGame .pk-opp-avatar { width: 22px !important; height: 22px !important; font-size: 11px !important; }
  #pokerGame .pk-opp-label { font-size: 10px !important; max-width: 48px !important; }
  #pokerGame .pk-opp-chips { font-size: 9px !important; }
  #pokerGame .pk-opp-bet { font-size: 9px !important; }
  #pokerGame .pk-opp-cards { gap: 2px !important; }
  #pokerGame .pk-opp-card { width: 22px !important; height: 31px !important; }
  #pokerGame .pk-opp-card .pk-small-rank { font-size: 8px !important; }
  #pokerGame .pk-opp-card .pk-small-suit { font-size: 7px !important; }
  /* Community cards: right column, row 2 */
  #pokerGame .pk-community {
    grid-column: 2 !important;
    grid-row: 2 !important;
    z-index: 10 !important;
    justify-self: center !important;
    align-self: center !important;
    padding: 2px 4px !important;
  }
  #pokerGame .pk-comm-card {
    width: min(14vh, 46px) !important;
    height: min(20vh, 66px) !important;
  }
  #pokerGame .pk-comm-card .pk-comm-rank { font-size: min(4vh, 14px) !important; }
  #pokerGame .pk-comm-card .pk-comm-suit { font-size: min(6vh, 18px) !important; }
  #pokerGame .pk-comm-placeholder {
    width: min(14vh, 46px) !important;
    height: min(20vh, 66px) !important;
  }
  /* My hero cards: right column, row 3 — BIGGER + 중앙 정렬 명시 */
  #pokerGame .pk-my-area {
    grid-column: 2 !important;
    grid-row: 3 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #pokerGame .pk-my-cards { width: 100% !important; }
  #pokerGame .pk-hero-card {
    width: min(50vh, 210px) !important;
    height: min(70vh, 294px) !important;
  }
  #pokerGame .pk-hero-corner .pk-hero-rank { font-size: min(11vh, 44px) !important; }
  #pokerGame .pk-hero-corner .pk-hero-suit-sm { font-size: min(7vh, 26px) !important; }
  #pokerGame .pk-hero-center { font-size: min(24vh, 96px) !important; }
  #pokerGame .pk-hand-name { font-size: min(7vh, 32px) !important; }
  /* Action buttons: right column (grid col 3), rows 2-3 */
  #pokerGame .pk-bottom-panel {
    position: relative !important;
    grid-column: 3 !important;
    grid-row: 2 / 4 !important;
    width: 180px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding-bottom: 4px !important;
  }
  #pokerGame .pk-actions {
    flex-direction: column !important;
    gap: 4px !important;
  }
  #pokerGame .pk-action-btn {
    font-size: 13px !important;
    padding: 8px 6px !important;
  }
  #pokerGame .pk-raise-btns {
    flex-direction: column !important;
    gap: 4px !important;
  }
  #pokerGame .pk-raise-area {
    padding: 8px 10px !important;
  }
  #pokerGame .pk-raise-amount {
    font-size: 16px !important;
  }

  /* ───── QUICK DRAW ───── */
  #quickDrawGame .qd-header { padding: 4px 10px !important; }
  #quickDrawGame .qd-title { font-size: 16px !important; }
  #quickDrawGame .qd-round { font-size: 12px !important; }
  #quickDrawGame .qd-main-area { flex: 1 !important; min-height: 0 !important; }
  #quickDrawGame .qd-tap-zone {
    min-height: 0 !important;
    width: min(200px, 55vh) !important;
    height: min(200px, 55vh) !important;
    max-width: none !important;
    max-height: none !important;
  }
  #quickDrawGame .qd-status-text { font-size: clamp(18px, 8vh, 36px) !important; }
  #quickDrawGame .qd-reaction-time { font-size: clamp(24px, 10vh, 48px) !important; }
  #quickDrawGame .qd-rankings {
    max-height: 25vh !important;
    overflow-y: auto !important;
    padding: 4px 10px !important;
  }
  #quickDrawGame .qd-rankings-title { font-size: 12px !important; margin-bottom: 4px !important; }

  /* ───────────────────────────────────────────────
     RUSSIAN ROULETTE — Ref: cylinder+actions center, survivors compact
     ─────────────────────────────────────────────── */
  #rouletteGame.active {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto 1fr auto !important;
    gap: 0 !important;
  }
  #rouletteGame .roulette-header {
    grid-column: 1 / -1 !important;
    padding: 4px 10px !important;
  }
  #rouletteGame .roulette-title { font-size: 16px !important; }
  #rouletteGame .roulette-survivors { font-size: 13px !important; }
  /* LEFT: cylinder area */
  #rouletteGame .cylinder-area {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #rouletteGame .cylinder-container {
    width: min(40vh, 180px) !important;
    height: min(40vh, 180px) !important;
  }
  #rouletteGame .current-turn-display { font-size: 12px !important; margin-bottom: 2px !important; }
  #rouletteGame .cylinder-info { font-size: 11px !important; margin-top: 2px !important; }
  /* RIGHT: survivors list (vertical) */
  #rouletteGame .survivors-list {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 6px 10px !important;
    gap: 4px !important;
    max-height: none !important;
    overflow-y: auto !important;
    min-width: 80px !important;
  }
  /* BOTTOM: action buttons */
  #rouletteGame .roulette-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    padding: 4px 10px !important;
    gap: 6px !important;
    display: flex !important;
    justify-content: center !important;
  }
  #rouletteGame .roulette-actions .btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
    min-height: 36px !important;
  }
  #rouletteGame .roulette-setup {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    padding: 8px 10px !important;
    margin: 4px 10px !important;
  }

  /* LOTTERY — lottery.css에서 반응형 직접 처리 */
}

/* =================================================================
   PHONE LANDSCAPE — aggressive size reductions for short viewports
   Targets mobile phones in landscape (height ≤ 450px)
   ================================================================= */
@media (orientation: landscape) and (max-height: 450px) {

  /* ── Global: all game screens ── */
  .screen.active {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ─── UP/DOWN (small landscape) ─── */
  #updownGame .ud-hero-card {
    width: min(26vh, 110px) !important;
    height: min(38vh, 160px) !important;
  }
  #updownGame .ud-hero-corner .ud-hero-rank { font-size: min(6vh, 22px) !important; }
  #updownGame .ud-hero-corner .ud-hero-suit-sm { font-size: min(4vh, 14px) !important; }
  #updownGame .ud-hero-center { font-size: min(12vh, 44px) !important; }
  #updownGame .ud-hero-back-pattern {
    width: min(10vh, 44px) !important;
    height: min(10vh, 44px) !important;
  }
  #updownGame .ud-prev-card {
    width: min(8vh, 36px) !important;
    height: min(12vh, 52px) !important;
  }
  #updownGame .ud-prev-placeholder {
    width: min(8vh, 36px) !important;
    height: min(12vh, 52px) !important;
  }
  #updownGame .ud-top-bar { padding: 2px 8px !important; }
  #updownGame .ud-turn-name { font-size: 12px !important; }
  #updownGame .ud-deck-count { font-size: 9px !important; }
  #updownGame .ud-result { display: none !important; }
  #updownGame .ud-btn {
    padding: min(3vh, 10px) !important;
    border-radius: 10px !important;
  }
  #updownGame .ud-btn-arrow { font-size: min(4vh, 18px) !important; }
  #updownGame .ud-btn-label { font-size: min(4vh, 14px) !important; letter-spacing: 2px !important; }
  #updownGame .ud-bet-input { padding: 5px 8px !important; font-size: 11px !important; }
  #updownGame .ud-btn-bet { padding: 5px 10px !important; font-size: 11px !important; }
  #updownGame .ud-penalty-list {
    max-height: 36px !important;
    padding: 2px 8px !important;
  }
  #updownGame .ud-penalty-item { font-size: 9px !important; }
  #updownGame .ud-special-area { padding: 8px !important; }
  #updownGame .ud-special-title { font-size: 14px !important; }
  #updownGame .ud-special-desc { font-size: 10px !important; }
  #updownGame .ud-player-select { max-height: 60px !important; gap: 4px !important; }
  #updownGame .ud-btn-special { padding: 8px !important; font-size: 12px !important; }

  /* ─── TRUTH ─── */
  #truthGame {
    padding: 6px 10px !important;
    gap: 4px !important;
  }
  #truthGame .truth-top-bar {
    padding: 2px 8px !important;
  }
  #truthGame .truth-round-badge { font-size: 10px !important; letter-spacing: 1px !important; }
  #truthGame .truth-content {
    gap: 6px !important;
    padding: 2px 0 !important;
  }
  #truthGame .truth-phase-area {
    gap: 6px !important;
  }
  #truthGame .truth-your-turn-badge { font-size: 14px !important; }
  #truthGame .truth-textarea {
    padding: 6px !important;
    font-size: 12px !important;
    max-height: 12vh !important;
  }
  #truthGame .truth-question-display {
    padding: 8px !important;
  }
  #truthGame .truth-question-label {
    font-size: 14px !important;
    margin-bottom: 4px !important;
    letter-spacing: 2px !important;
  }
  #truthGame .truth-question-text {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  #truthGame .truth-vote-buttons {
    gap: 16px !important;
    padding: 4px 0 !important;
  }
  #truthGame .truth-vote-btn {
    width: min(24vh, 85px) !important;
    height: min(24vh, 85px) !important;
    min-width: 70px !important;
    min-height: 70px !important;
    box-shadow:
      0 4px 0 rgba(0,0,0,0.4),
      0 6px 14px rgba(0,0,0,0.5),
      inset 0 1px 0 rgba(255,255,255,0.25) !important;
  }
  #truthGame .truth-vote-btn:active {
    transform: translateY(2px) !important;
    box-shadow:
      0 1px 0 rgba(0,0,0,0.4),
      0 2px 6px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(255,255,255,0.15) !important;
  }
  #truthGame .truth-vote-symbol { font-size: 30px !important; }
  #truthGame .truth-vote-label { font-size: 10px !important; }
  #truthGame .truth-result-container {
    padding: 8px !important;
  }
  #truthGame .truth-result-title { font-size: 14px !important; margin-bottom: 8px !important; }
  #truthGame .truth-result-row {
    padding: 4px 8px !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  #truthGame .truth-result-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
  }
  #truthGame .truth-result-count { font-size: 18px !important; }
  #truthGame .truth-dot {
    width: 18px !important;
    height: 18px !important;
  }
  #truthGame .truth-players-bar {
    padding: 3px 4px !important;
    gap: 3px !important;
  }
  #truthGame .truth-player-avatar {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }
  #truthGame .truth-player-name {
    font-size: 9px !important;
    max-width: 32px !important;
  }
  #truthGame .truth-submit-btn,
  #truthGame .truth-next-btn {
    min-height: 32px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
  }
  #truthGame .truth-waiting-icon { font-size: 36px !important; }
  #truthGame .truth-waiting-text { font-size: 16px !important; }

  /* ─── MAFIA ─── */
  #mafiaGame.active {
    display: flex !important;
    flex-direction: column !important;
  }
  #mafiaGame .mf-role-banner { order: 10 !important; }
  #mafiaGame .mf-content { order: 1 !important; flex: 1 !important; min-height: 0 !important; }
  #mafiaGame .mf-action-area { order: 5 !important; }
  #mafiaGame .mf-topbar {
    padding: 2px 8px !important;
  }
  #mafiaGame .mf-phase-badge { padding: 2px 6px !important; font-size: 10px !important; }
  #mafiaGame .mf-phase-badge span:first-child { font-size: 14px !important; }
  #mafiaGame .mf-timer-box { padding: 2px 6px !important; font-size: 12px !important; }
  #mafiaGame .mf-day-counter { font-size: 8px !important; }
  #mafiaGame .mf-role-banner {
    margin: 0 6px 2px !important;
    padding: 4px 8px !important;
    gap: 6px !important;
  }
  #mafiaGame .mf-role-emoji { font-size: 20px !important; }
  #mafiaGame .mf-role-name { font-size: 11px !important; }
  #mafiaGame .mf-role-desc { font-size: 9px !important; }
  #mafiaGame .mf-content {
    padding: 4px 8px !important;
    gap: 6px !important;
  }
  #mafiaGame .mf-player-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
  }
  #mafiaGame .mf-player-card {
    min-height: 54px !important;
    padding: 4px 2px !important;
    gap: 1px !important;
  }
  #mafiaGame .mf-player-avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }
  #mafiaGame .mf-player-name { font-size: 9px !important; }
  #mafiaGame .mf-night-panel { padding: 8px !important; }
  #mafiaGame .mf-night-title { font-size: 14px !important; }
  #mafiaGame .mf-night-desc { font-size: 12px !important; }
  #mafiaGame .mf-action-area { padding: 2px 8px !important; }
  #mafiaGame .mf-btn-row button {
    min-height: 30px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  #mafiaGame .mf-vote-btn {
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* ─── POKER (short landscape) ─── */
  #pokerGame .pk-content { padding: 3px !important; grid-template-columns: 100px 1fr auto !important; }
  #pokerGame .pk-bottom-panel { width: 160px !important; }
  #pokerGame .pk-hero-card {
    width: min(40vh, 160px) !important;
    height: min(58vh, 240px) !important;
  }
  #pokerGame .pk-hero-corner .pk-hero-rank { font-size: min(8vh, 32px) !important; }
  #pokerGame .pk-hero-corner .pk-hero-suit-sm { font-size: min(5vh, 20px) !important; }
  #pokerGame .pk-hero-center { font-size: min(18vh, 70px) !important; }
  #pokerGame .pk-hand-name { font-size: min(6vh, 26px) !important; }
  #pokerGame .pk-comm-card {
    width: min(12vh, 40px) !important;
    height: min(16vh, 56px) !important;
  }
  #pokerGame .pk-comm-placeholder {
    width: min(12vh, 40px) !important;
    height: min(16vh, 56px) !important;
  }
  #pokerGame .pk-action-btn { padding: 7px 4px !important; font-size: 12px !important; min-height: 30px !important; }
  #pokerGame .pk-chip-value { font-size: 13px !important; }
  #pokerGame .pk-pot-value { font-size: 14px !important; }
  #pokerGame .pk-raise-area { padding: 6px 8px !important; }
  #pokerGame .pk-raise-amount { font-size: 14px !important; }
  #pokerGame .pk-top-bar { padding: 2px 4px !important; }
  #pokerGame .pk-chip-display, #pokerGame .pk-pot-display { padding: 3px 8px !important; }
  #pokerGame .pk-opp-slot { padding: 2px 4px !important; }
  #pokerGame .pk-opp-avatar { width: 18px !important; height: 18px !important; font-size: 9px !important; }
  #pokerGame .pk-opp-label { font-size: 9px !important; max-width: 38px !important; }
  #pokerGame .pk-opp-chips { font-size: 8px !important; }
  #pokerGame .pk-opp-card { width: 18px !important; height: 26px !important; }

  /* ─── QUICK DRAW ─── */
  #quickDrawGame .qd-header { padding: 2px 10px !important; }
  #quickDrawGame .qd-title { font-size: 14px !important; }
  #quickDrawGame .qd-main-area { padding: 4px !important; }
  #quickDrawGame .qd-tap-zone {
    width: min(160px, 45vh) !important;
    height: min(160px, 45vh) !important;
  }
  #quickDrawGame .qd-tap-zone.fire .qd-status-text {
    font-size: clamp(20px, 10vh, 40px) !important;
  }
  #quickDrawGame .qd-reaction-time { font-size: clamp(20px, 8vh, 36px) !important; }
  #quickDrawGame .qd-rankings {
    max-height: 20vh !important;
    padding: 4px 8px !important;
    margin: 0 8px !important;
  }
  #quickDrawGame .qd-rankings-title { font-size: 11px !important; margin-bottom: 3px !important; }
  #quickDrawGame .qd-ranking-item { padding: 6px 8px !important; font-size: 12px !important; }
  #quickDrawGame .qd-ranking-avatar { width: 24px !important; height: 24px !important; font-size: 12px !important; }
  #quickDrawGame .qd-restart-btn { margin: 4px 8px !important; min-height: 36px !important; font-size: 14px !important; }

  /* ─── RUSSIAN ROULETTE ─── */
  #rouletteGame .roulette-header { padding: 2px 8px !important; }
  #rouletteGame .roulette-title { font-size: 14px !important; }
  #rouletteGame .roulette-survivors { font-size: 12px !important; }
  #rouletteGame .cylinder-container {
    width: min(35vh, 150px) !important;
    height: min(35vh, 150px) !important;
  }
  #rouletteGame .cylinder-center { width: 30px !important; height: 30px !important; font-size: 14px !important; }
  #rouletteGame .chamber-indicator { width: 22px !important; height: 22px !important; }
  #rouletteGame .current-turn-display { font-size: 11px !important; padding: 4px 12px !important; }
  #rouletteGame .cylinder-info { font-size: 10px !important; }
  #rouletteGame .survivors-list {
    min-width: 70px !important;
    gap: 3px !important;
  }
  #rouletteGame .survivor-item { padding: 4px 3px !important; }
  #rouletteGame .survivor-avatar-sm { width: 32px !important; height: 32px !important; font-size: 16px !important; }
  #rouletteGame .survivor-name { font-size: 9px !important; }
  #rouletteGame .roulette-actions { padding: 2px 8px 4px !important; }
  #rouletteGame .btn-danger {
    padding: 10px 24px !important;
    font-size: 18px !important;
    min-height: 40px !important;
  }
  #rouletteGame .roulette-setup { padding: 6px 8px !important; margin: 2px 8px !important; }
  #rouletteGame .setup-card { padding: 8px !important; margin-bottom: 6px !important; }

  /* ─── E-CARD (short landscape) ─── */
  #ecardGame { border-width: 3px !important; }
  #ecardGame .ecard-compact-header {
    padding: 2px 6px !important;
    min-height: 36px !important;
    gap: 4px !important;
  }
  #ecardGame .ecard-header-round { font-size: 10px !important; }
  #ecardGame .ecard-hscore-val { font-size: 14px !important; }
  #ecardGame .ecard-hscore-emperor,
  #ecardGame .ecard-hscore-slave { font-size: 12px !important; }
  #ecardGame .ecard-header-role { font-size: 10px !important; padding: 2px 6px !important; }
  #ecardGame .ecard-header-role span:first-child { font-size: 13px !important; }
  #ecardGame .ecard-header-role span:last-child { font-size: 10px !important; }
  #ecardGame .ecard-header-opp .opponent-avatar { width: 20px !important; height: 20px !important; font-size: 11px !important; }
  #ecardGame .ecard-header-opp .opponent-name { font-size: 10px !important; }
  #ecardGame .ecard-header-opp .opponent-cards-count { font-size: 9px !important; }
  /* Cards: vh 기반 — 짧은 화면에서 축소 */
  #ecardGame .ecard-card {
    width: min(18vh, 66px) !important;
    height: min(26vh, 96px) !important;
    margin: 0 -8px !important;
  }
  #ecardGame .ecard-card-icon { font-size: min(10vh, 28px) !important; }
  #ecardGame .ecard-card-name { font-size: 9px !important; }
  #ecardGame .ecard-result-text { font-size: 13px !important; padding: 2px 8px !important; }
  #ecardGame .ecard-bet-area, #ecardGame .ecard-bet-response {
    padding: 6px 8px !important;
  }
  #ecardGame .bet-label { font-size: 11px !important; margin-bottom: 4px !important; }
  #ecardGame .bet-amount { font-size: 14px !important; }
  #ecardGame .ecard-action-buttons {
    padding: 4px 8px !important;
    gap: 4px !important;
  }
  #ecardGame .ecard-action-buttons .btn {
    min-height: min(10vh, 38px) !important;
    padding: min(2.5vh, 8px) min(3vh, 10px) !important;
    font-size: min(4vh, 13px) !important;
  }

  /* ─── SUTDA (small landscape) ─── */
  #sutdaGame .sutda-top-bar { padding: 2px 8px !important; }
  #sutdaGame .sutda-action-bar {
    width: 160px !important;
  }
  #sutdaGame .sutda-bet-btn {
    min-height: 30px !important;
    padding: 6px 4px !important;
    font-size: 12px !important;
  }
  #sutdaGame .hwatu-card-big {
    width: min(36vh, 120px) !important;
    height: min(52vh, 180px) !important;
  }
  #sutdaGame .hwatu-card-big .hwatu-num { font-size: min(12vh, 40px) !important; }
  #sutdaGame .hwatu-card-big .hwatu-month { font-size: min(3.5vh, 12px) !important; }
  #sutdaGame .sutda-my-rank { font-size: min(6vh, 22px) !important; letter-spacing: 3px !important; }
  #sutdaGame .sutda-pot-center .sutda-pot-amount { font-size: 16px !important; }
  #sutdaGame .sutda-seryuk-panel { padding: 12px !important; }
  #sutdaGame .sutda-seryuk-title { font-size: 18px !important; }
  #sutdaGame .sutda-seryuk-btn {
    padding: 12px 20px !important;
    font-size: 16px !important;
  }
  #sutdaGame .sutda-seryuk-icon { font-size: 24px !important; }

  /* LOTTERY — lottery.css에서 반응형 직접 처리 */
}

/* =================================================================
   UI 대형화 — "70대 어르신도 쓸 수 있게"
   모든 게임의 핵심 UI를 크고 명확하게 만듦
   ================================================================= */

/* =============================================
   1. E카드 — 히어로 카드 패턴 (새 HTML 구조)
   ============================================= */

/* Compact Header */
.ecard-compact-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #5c3a1e 0%, #4a2e16 50%, #3a2210 100%);
  border-bottom: 2px solid #8b6914;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 10px rgba(0,0,0,0.5);
  flex-shrink: 0;
  z-index: 10;
  position: relative;
  flex-wrap: nowrap;
  overflow: hidden;
}

.ecard-compact-header .back-btn {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 6px !important;
  color: #d4c4a0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}

.ecard-header-round {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 16px;
  color: #ffd700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  flex-shrink: 0;
}

.ecard-header-score {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(0,0,0,0.3);
  border-radius: 12px;
  border: 1px solid rgba(201,168,76,0.25);
  flex-shrink: 0;
}

.ecard-hscore-emperor,
.ecard-hscore-slave {
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.ecard-hscore-val {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 20px;
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255,215,0,0.4);
}

.ecard-hscore-div {
  font-size: 16px;
  color: rgba(255,255,255,0.3);
  margin: 0 2px;
}

.ecard-header-role {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 12px;
  flex-shrink: 0;
}

.ecard-header-role span:first-child {
  font-size: 18px;
}

.ecard-header-role span:last-child {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 14px;
  color: #ffd700;
  text-shadow: 0 0 6px rgba(255,215,0,0.3);
}

.ecard-header-opp {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.ecard-header-opp .opponent-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 1.5px solid rgba(201,168,76,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  flex-shrink: 0;
}

.ecard-header-opp .opponent-name {
  font-weight: 700;
  font-size: 13px;
  color: #e8dcc8;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecard-header-opp .opponent-cards-count {
  font-size: 12px;
  color: rgba(200,190,160,0.6);
}

.ecard-header-opp .opponent-played-card {
  flex-shrink: 0;
}

/* E카드 카드 대형화: 86x124 → 110x160 */
#ecardGame .ecard-card {
  width: 110px;
  height: 160px;
  border-radius: 12px;
  margin: 0 -14px;
}

#ecardGame .ecard-card-icon {
  font-size: 52px;
  margin-bottom: 6px;
}

#ecardGame .ecard-card-name {
  font-size: 18px;
}

#ecardGame .ecard-card:hover {
  transform: translateY(-18px) scale(1.08);
}

#ecardGame .ecard-card.selected {
  transform: translateY(-24px) scale(1.12);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.6),
    0 0 35px var(--card-gold-glow),
    0 0 60px rgba(255,215,0,0.25);
}

/* My cards area fills screen */
#ecardGame .ecard-my-cards-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: 0 8px;
}

#ecardGame .my-cards-label {
  font-size: 14px;
  font-weight: 700;
  color: rgba(200,190,160,0.6);
  text-align: center;
}

#ecardGame .ecard-cards-hand {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 10px 4px 20px;
  flex: 1;
  min-height: 0;
}

/* Battle Overlay */
.ecard-battle-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.75);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ecard-battle-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  background: radial-gradient(ellipse at center, rgba(255,215,0,0.08) 0%, rgba(0,0,0,0.5) 70%);
  border-radius: 20px;
  border: 2px solid var(--card-gold-border);
  box-shadow: 0 0 40px var(--card-gold-glow);
}

.ecard-battle-inner .battle-card {
  transform: scale(1.15);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.7));
}

.ecard-battle-inner .battle-vs {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 30px;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255,215,0,0.7), 0 2px 4px rgba(0,0,0,0.6);
}

/* E카드 Result text 대형화 */
#ecardGame .ecard-result-text {
  font-size: 22px;
  padding: 6px 12px;
  min-height: 28px;
}

/* E카드 action buttons 대형화 */
#ecardGame .ecard-action-buttons .btn {
  min-height: 56px;
  font-size: 18px;
  padding: 14px 20px;
}

/* E카드 waiting 대형화 */
#ecardGame .ecard-waiting {
  font-size: 16px;
}

/* E카드 Opponent played card in header */
.ecard-header-opp .opponent-played-card .ecard-card {
  width: 36px !important;
  height: 52px !important;
  margin: 0 !important;
  cursor: default !important;
}

.ecard-header-opp .opponent-played-card .ecard-card-icon {
  font-size: 18px !important;
  margin-bottom: 1px !important;
}

.ecard-header-opp .opponent-played-card .ecard-card-name {
  font-size: 7px !important;
}

.ecard-header-opp .opponent-played-card .ecard-card:hover {
  transform: none !important;
}

/* E카드 Mobile 375px */
@media (max-width: 400px) {
  .ecard-compact-header {
    padding: 6px 8px;
    gap: 5px;
    flex-wrap: wrap;
  }
  #ecardGame .ecard-card {
    width: 90px;
    height: 130px;
    margin: 0 -10px;
  }
  #ecardGame .ecard-card-icon {
    font-size: 42px;
  }
  #ecardGame .ecard-card-name {
    font-size: 15px;
  }
  .ecard-header-round { font-size: 14px; }
  .ecard-hscore-val { font-size: 18px; }
}

/* =============================================
   2. 마피아 — 텍스트/플레이어 카드 대형화
   ============================================= */

/* 역할 이름 대형화 */
.mf-role-name {
  font-size: 28px;
}

/* 역할 설명 대형화 */
.mf-role-desc {
  font-size: 17px;
}

/* 역할 이모지 대형화 */
.mf-role-emoji {
  font-size: 60px;
}

/* 타이머 대형화 */
.mf-timer-box {
  font-size: 26px;
  padding: 10px 20px;
}

/* 페이즈 뱃지 대형화 */
.mf-phase-badge {
  font-size: 20px;
  padding: 8px 16px;
}

/* 일수 표시 대형화 */
.mf-day-counter {
  font-size: 16px;
}

/* 플레이어 아바타 대형화 */
.mf-player-avatar {
  width: 56px;
  height: 56px;
  font-size: 28px;
}

/* 플레이어 이름 대형화 */
.mf-player-name {
  font-size: 16px;
}

/* 메시지 박스 대형화 */
.mf-message-box {
  font-size: 18px;
}

/* 액션 버튼 대형화 */
.mf-action-btn {
  min-height: 56px;
  font-size: 17px;
  padding: 16px 24px;
}

/* 야간 패널 대형화 */
.mf-night-title {
  font-size: 22px;
}

.mf-night-desc {
  font-size: 16px;
}

/* 투표 바 이름 대형화 */
.mf-vote-bar-name {
  font-size: 15px;
  width: 70px;
}

/* 채팅 메시지 대형화 */
.mf-chat-msg {
  font-size: 15px;
}

.mf-chat-input {
  font-size: 15px;
}

/* =============================================
   3. 진실게임 — 질문/투표 대형화
   ============================================= */

/* 질문 텍스트 대형화 */
.truth-question-text {
  font-size: 26px;
}

/* Q. 라벨 대형화 */
.truth-question-label {
  font-size: 36px;
}

/* 투표 버튼 대형화 */
.truth-vote-btn {
  width: 160px;
  height: 160px;
}

/* 투표 심볼 대형화 */
.truth-vote-symbol {
  font-size: 72px;
}

/* 투표 라벨 대형화 */
.truth-vote-label {
  font-size: 20px;
}

/* 결과 카운트 대형화 */
.truth-result-count {
  font-size: 36px;
}

/* 라운드 뱃지 대형화 */
.truth-round-badge {
  font-size: 20px;
}

/* 질문자 표시 대형화 */
.truth-questioner-display {
  font-size: 17px;
}

/* 플레이어 바 대형화 */
.truth-player-avatar {
  width: 44px;
  height: 44px;
  font-size: 22px;
}

.truth-player-name {
  font-size: 14px;
  max-width: 56px;
}

/* textarea 대형화 */
.truth-textarea {
  font-size: 20px;
}

.truth-textarea::placeholder {
  font-size: 16px;
}

/* 결과 타이틀 */
.truth-result-title {
  font-size: 22px;
}

/* =============================================
   4. 총잡이 — 소폭 조정
   ============================================= */

/* 순위 항목 텍스트 대형화 */
.qd-ranking-item {
  font-size: 20px;
  padding: 14px;
}

/* 순위 아바타 대형화 */
.qd-ranking-avatar {
  width: 44px;
  height: 44px;
  font-size: 22px;
}

/* 순위 타이틀 대형화 */
.qd-rankings-title {
  font-size: 22px;
}

/* 라운드 표시 대형화 */
.qd-round {
  font-size: 17px;
}

/* 반응속도 표시 대형화 */
.qd-reaction-time {
  font-size: 56px;
}

/* 다시하기 버튼 */
.qd-restart-btn {
  min-height: 56px;
  font-size: 20px;
}

/* 순위 이름 대형화 */
.qd-ranking-name {
  font-size: 18px;
}

.qd-ranking-time {
  font-size: 20px;
}

/* =============================================
   5. 룰렛 — 생존자/정보 대형화
   ============================================= */

/* 생존자 이름 대형화 */
.survivor-name {
  font-size: 16px;
  max-width: 80px;
}

/* 생존자 아바타 대형화 */
.survivor-avatar-sm {
  width: 56px;
  height: 56px;
  font-size: 28px;
}

/* 생존자 수 대형화 */
.roulette-survivors {
  font-size: 22px;
}

/* 현재 턴 표시 대형화 */
.current-turn-display {
  font-size: 22px;
  padding: 10px 24px;
}

/* 실린더 정보 대형화 */
.cylinder-info {
  font-size: 16px;
}

/* 설정 라벨 대형화 */
.setup-label {
  font-size: 18px;
}

/* 설정 값 대형화 */
.setup-value {
  font-size: 28px;
}

/* 챔버 인디케이터 대형화 */
.chamber-indicator {
  width: 40px;
  height: 40px;
}

/* 설정 슬라이더 thumb 대형화 */
.setup-slider::-webkit-slider-thumb {
  width: 32px;
  height: 32px;
}

/* 6. 뽑기 — lottery.css에서 반응형 직접 처리 */

/* =============================================
   7. 야추 — 점수표/주사위 대형화
   ============================================= */

/* 턴 텍스트 대형화 */
.yahtzee-turn-text {
  font-size: 22px;
}

/* 현재 플레이어 대형화 */
.yahtzee-current-player {
  font-size: 16px;
}

/* 남은 굴리기 대형화 */
.yahtzee-rolls-left {
  font-size: 24px;
  padding: 10px 18px;
}

/* 미니 플레이어 대형화 */
.yahtzee-player-mini-avatar {
  width: 40px;
  height: 40px;
  font-size: 20px;
}

.yahtzee-player-mini-name {
  font-size: 14px;
  max-width: 60px;
}

.yahtzee-player-mini-score {
  font-size: 14px;
}

/* 홀드 다이 대형화 */
.yahtzee-held-die {
  width: 60px;
  height: 60px;
  padding: 8px;
}

.yahtzee-held-die .held-pip {
  width: 9px;
  height: 9px;
}

/* 롤 인디케이터 대형화 */
.yahtzee-rolls-indicator .roll-pip {
  width: 14px;
  height: 14px;
}

/* 굴리기 버튼 대형화 */
.yahtzee-roll-btn {
  font-size: 26px;
  padding: 16px 24px;
  min-height: 56px;
}

/* 점수표 카테고리명 대형화 */
.yahtzee-cat-name {
  font-size: 16px;
}

/* 점수 값 대형화 */
.yahtzee-score-table {
  font-size: 16px;
}

.yahtzee-cat-score {
  font-size: 18px;
}

/* 점수표 타이틀 대형화 */
.yahtzee-scorecard-title {
  font-size: 24px;
}

/* 콤보 라벨 대형화 */
.yahtzee-combo-label {
  font-size: 24px;
}

/* 점수 확정 버튼 대형화 */
.yahtzee-score-btn {
  font-size: 20px;
  min-height: 56px;
  padding: 14px 24px;
}

/* 홀드 바 */
.yahtzee-hold-bar {
  min-height: 74px;
}

/* 롤 힌트 */
.yahtzee-roll-hint {
  font-size: 14px;
}

/* Total row 대형화 */
.yahtzee-total-row td {
  font-size: 18px;
}

/* =============================================
   모바일 반응형 보정 (430px)
   대형화된 값이 모바일에서도 충분히 크게 유지
   ============================================= */
@media (max-width: 430px) {
  /* 마피아 모바일 보정 */
  .mf-player-avatar {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }
  .mf-player-name {
    font-size: 14px;
  }
  .mf-timer-box {
    font-size: 22px;
    padding: 8px 14px;
  }
  .mf-phase-badge {
    font-size: 18px;
    padding: 6px 14px;
  }
  .mf-day-counter {
    font-size: 14px;
  }
  .mf-action-btn {
    min-height: 56px;
    font-size: 16px;
  }
  .mf-role-name {
    font-size: 24px;
  }
  .mf-role-desc {
    font-size: 16px;
  }
  .mf-role-emoji {
    font-size: 52px;
  }
  .mf-message-box {
    font-size: 18px;
  }

  /* 진실게임 모바일 보정 */
  .truth-question-text {
    font-size: 22px;
  }
  .truth-question-label {
    font-size: 30px;
  }
  .truth-vote-btn {
    width: 140px;
    height: 140px;
  }
  .truth-vote-symbol {
    font-size: 64px;
  }
  .truth-vote-label {
    font-size: 18px;
  }
  .truth-result-count {
    font-size: 32px;
  }
  .truth-round-badge {
    font-size: 18px;
  }
  .truth-questioner-display {
    font-size: 15px;
  }
  .truth-player-avatar {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .truth-player-name {
    font-size: 13px;
  }
  .truth-textarea {
    font-size: 18px;
  }

  /* 총잡이 모바일 보정 */
  .qd-ranking-item {
    font-size: 18px;
  }
  .qd-ranking-avatar {
    width: 40px;
    height: 40px;
  }
  .qd-rankings-title {
    font-size: 20px;
  }
  .qd-round {
    font-size: 16px;
  }

  /* 룰렛 모바일 보정 */
  .survivor-name {
    font-size: 14px;
  }
  .survivor-avatar-sm {
    width: 52px;
    height: 52px;
    font-size: 26px;
  }
  .roulette-survivors {
    font-size: 20px;
  }
  .current-turn-display {
    font-size: 20px;
  }
  .cylinder-info {
    font-size: 15px;
  }
  .setup-label {
    font-size: 16px;
  }
  .setup-value {
    font-size: 24px;
  }

  /* 야추 모바일 보정 */
  .yahtzee-turn-text {
    font-size: 20px;
  }
  .yahtzee-current-player {
    font-size: 15px;
  }
  .yahtzee-rolls-left {
    font-size: 22px;
  }
  .yahtzee-held-die {
    width: 54px;
    height: 54px;
  }
  .yahtzee-roll-btn {
    font-size: 24px;
  }
  .yahtzee-scorecard-title {
    font-size: 22px;
  }
  .yahtzee-score-btn {
    font-size: 18px;
    min-height: 52px;
  }
}

/* ===== PRACTICE MODE ===== */
.practice-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  overflow-y: auto;
}

.practice-desc {
  color: var(--text-dim);
  font-size: 16px;
}

.practice-game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 380px;
  width: 100%;
}

.practice-game-btn {
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--text);
  padding: 16px 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
  text-align: center;
}

.practice-game-btn:active {
  transform: scale(0.95);
  background: rgba(0, 229, 255, 0.15);
  border-color: var(--accent2);
}

/* =================================================================
   TETRIS / JEWEL / STAIRS — Mobile Responsive
   ================================================================= */

/* ─── Tetris: 430px ─── */
@media (max-width: 430px) {
  .tet-hud { padding: 6px 10px 2px; }
  .tet-hud-value { font-size: 16px; }
  .tet-hud-label { font-size: 8px; }
  .tet-mode-badge { font-size: 9px; padding: 2px 6px; }
  .tet-play-area { gap: 4px; padding: 0 4px; }
  .tet-side { width: 50px; }
  .tet-side-box { padding: 3px; }
  .tet-side-info-val { font-size: 12px; }
  .tet-controls { padding: 6px 8px 16px; }
  .tet-dpad { grid-template-columns: 40px 40px 40px; grid-template-rows: 40px 40px; gap: 2px; }
  .tet-act { width: 44px; height: 44px; font-size: 10px; }
}

/* ─── Tetris: 360px ─── */
@media (max-width: 360px) {
  .tet-hud { padding: 4px 8px 2px; }
  .tet-hud-value { font-size: 14px; }
  .tet-side { width: 44px; }
  .tet-side-label { font-size: 7px; }
  .tet-side-info { font-size: 7px; }
  .tet-side-info-val { font-size: 11px; }
  .tet-play-area { gap: 3px; padding: 0 3px; }
  .tet-dpad { grid-template-columns: 36px 36px 36px; grid-template-rows: 36px 36px; gap: 2px; }
  .tet-dpad-btn { font-size: 14px; border-radius: 8px; }
  .tet-act { width: 40px; height: 40px; font-size: 9px; }
  .tet-controls { padding: 4px 6px 12px; }
}

/* ─── Jewel: 430px ─── */
@media (max-width: 430px) {
  .jwl-hud { padding: 8px 12px 4px; }
  .jwl-score-value { font-size: 20px; }
  .jwl-progress-bar { padding: 0 12px; margin-bottom: 4px; }
  .jwl-timer-bar { padding: 0 12px; margin-bottom: 4px; }
  .jwl-mode-info { margin-bottom: 4px; }
  .jwl-grid-area { padding: 0 6px; }
  .jwl-grid-container { padding: 3px; }
  .jwl-bottom { padding: 8px 0 18px; }
  .jwl-jar { width: 28px; height: 120px; }
  .jwl-jar-wrap { margin-right: 8px; }
}

/* ─── Jewel: 360px ─── */
@media (max-width: 360px) {
  .jwl-hud { padding: 6px 10px 2px; }
  .jwl-score-value { font-size: 18px; }
  .jwl-combo-badge { font-size: 10px; padding: 2px 8px; }
  .jwl-progress-bar { padding: 0 10px; margin-bottom: 3px; }
  .jwl-timer-bar { padding: 0 10px; margin-bottom: 3px; }
  .jwl-grid-area { padding: 0 4px; }
  .jwl-grid-container { padding: 2px; border-radius: 8px; }
  .jwl-bottom { padding: 6px 0 14px; }
  .jwl-hint-btn { padding: 6px 16px; font-size: 11px; }
  .jwl-jar { width: 24px; height: 100px; }
  .jwl-jar-wrap { margin-right: 6px; }
}

/* ─── Stairs: 430px ─── */
@media (max-width: 430px) {
  .st-hud { padding: 6px 10px; }
  .st-hud-score { font-size: 20px; }
  .st-hud-step { font-size: 11px; }
  .st-stamina-bar { height: 6px; }
  .st-stamina-wrap { padding: 0 10px; margin-bottom: 4px; }
  .st-controls { padding: 8px 16px 16px; }
  .st-btn { padding: 14px 24px; font-size: 14px; }
}

/* ─── Stairs: 360px ─── */
@media (max-width: 360px) {
  .st-hud { padding: 4px 8px; gap: 4px; }
  .st-hud-score { font-size: 18px; }
  .st-hud-step { font-size: 10px; }
  .st-stamina-wrap { padding: 0 8px; }
  .st-controls { padding: 6px 12px 14px; }
  .st-btn { padding: 12px 20px; font-size: 13px; border-radius: 10px; }
}

/* ─── Stairs: short screen ─── */
@media (max-height: 600px) {
  .st-hud { padding: 3px 8px; }
  .st-hud-score { font-size: 16px; }
  .st-stamina-wrap { margin-bottom: 2px; }
  .st-controls { padding: 4px 12px 10px; }
  .st-btn { padding: 10px 18px; }
}

/* ─── All 3 games: Landscape ─── */
@media (orientation: landscape) and (max-height: 450px) {

  /* Tetris landscape */
  #tetrisGame .tet-hud { padding: 2px 8px 1px; }
  #tetrisGame .tet-hud-value { font-size: 13px; }
  #tetrisGame .tet-controls { padding: 2px 8px 6px; }
  #tetrisGame .tet-dpad { grid-template-columns: 34px 34px 34px; grid-template-rows: 34px 34px; gap: 1px; }
  #tetrisGame .tet-act { width: 38px; height: 38px; font-size: 9px; }
  #tetrisGame .tet-side { width: 44px; }
  #tetrisGame .tet-side-box { padding: 2px; }

  /* Jewel landscape */
  #jewelGame .jwl-hud { padding: 3px 10px 1px; }
  #jewelGame .jwl-score-value { font-size: 16px; }
  #jewelGame .jwl-progress-bar { margin-bottom: 2px; padding: 0 10px; }
  #jewelGame .jwl-timer-bar { margin-bottom: 2px; padding: 0 10px; }
  #jewelGame .jwl-mode-info { margin-bottom: 2px; }
  #jewelGame .jwl-bottom { padding: 3px 0 8px; }
  #jewelGame .jwl-jar { height: 80px; }

  /* Stairs landscape */
  #stairsGame .st-hud { padding: 2px 8px; }
  #stairsGame .st-hud-score { font-size: 14px; }
  #stairsGame .st-controls { padding: 2px 10px 6px; }
  #stairsGame .st-btn { padding: 8px 16px; font-size: 12px; }
  #stairsGame .st-stamina-wrap { margin-bottom: 2px; }
}

/* ─── Safe Area Insets ─── */
@supports (padding: env(safe-area-inset-top)) {
  /* Tetris */
  #tetrisGame .tet-hud {
    padding-top: max(8px, env(safe-area-inset-top));
  }
  #tetrisGame .tet-controls {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  #tetrisGame .tet-mode-overlay,
  #tetrisGame .tet-gameover,
  #tetrisGame .tet-pause {
    padding-top: max(30px, env(safe-area-inset-top));
    padding-bottom: max(30px, env(safe-area-inset-bottom));
  }

  /* Jewel */
  #jewelGame .jwl-hud {
    padding-top: max(10px, env(safe-area-inset-top));
  }
  #jewelGame .jwl-bottom {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  #jewelGame .jwl-title-overlay,
  #jewelGame .jwl-gameover-overlay,
  #jewelGame .jwl-pause-overlay {
    padding-top: max(40px, env(safe-area-inset-top));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }

  /* Stairs */
  #stairsGame .st-hud {
    padding-top: max(6px, env(safe-area-inset-top));
  }
  #stairsGame .st-controls {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  #stairsGame .st-death-overlay,
  #stairsGame .st-results-overlay,
  #stairsGame .st-countdown-overlay {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* =================================================================
   MAFIA CHAT - portrait mobile overflow/cropping fix
   Keep mafia/spy/lover chat fully visible and scrollable.
   ================================================================= */
@media (max-width: 430px) and (orientation: portrait) {
  #mafiaGame .mf-topbar {
    padding: 6px 10px !important;
  }

  #mafiaGame .mf-role-banner {
    margin: 6px 10px 4px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  #mafiaGame .mf-role-emoji {
    font-size: 30px !important;
  }

  #mafiaGame .mf-role-name {
    font-size: 16px !important;
  }

  #mafiaGame .mf-role-desc {
    font-size: 12px !important;
  }

  #mafiaGame .mf-content {
    padding: 6px 10px !important;
    gap: 8px !important;
  }

  #mafiaGame .mf-content > .mf-chat-panel {
    order: 3 !important;
  }

  #mafiaGame .mf-content > .mf-player-grid {
    order: 5 !important;
  }

  #mafiaGame .mf-chat-panel {
    flex: 0 0 auto !important;
    min-height: clamp(170px, 34dvh, 250px) !important;
    max-height: clamp(220px, 46dvh, 360px) !important;
    overflow: hidden !important;
  }

  #mafiaGame .mf-chat-tabs {
    flex: 0 0 auto !important;
  }

  #mafiaGame .mf-chat-tab {
    max-width: 68vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #mafiaGame .mf-chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #mafiaGame .mf-chat-input-row {
    flex: 0 0 auto !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }

  #mafiaGame .mf-chat-input {
    min-width: 0;
    padding: 8px 10px !important;
  }

  #mafiaGame .mf-chat-send-btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  #mafiaGame .mf-action-area {
    padding: 6px 10px 8px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
  }

  #mafiaGame .mf-message-box {
    font-size: 13px !important;
    line-height: 1.35 !important;
    min-height: 20px !important;
    padding: 2px !important;
  }

  #mafiaGame .mf-btn-row button {
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  #mafiaGame .mf-skip-vote-panel {
    padding: 10px 12px !important;
  }

  #mafiaGame .mf-skip-vote-header {
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1.35;
  }

  #mafiaGame .mf-skip-vote-count {
    font-size: 11px;
  }

  #mafiaGame .mf-skip-vote-status {
    margin-top: 6px;
    font-size: 12px;
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  #mafiaGame .mf-chat-panel {
    min-height: clamp(160px, 32dvh, 220px) !important;
    max-height: clamp(200px, 42dvh, 300px) !important;
  }

  #mafiaGame .mf-chat-tab {
    max-width: 62vw;
    padding: 8px 10px;
  }

  #mafiaGame .mf-chat-input {
    font-size: 14px !important;
  }

  #mafiaGame .mf-skip-vote-panel {
    padding: 8px 10px !important;
  }

  #mafiaGame .mf-skip-vote-header {
    font-size: 11px;
  }

  #mafiaGame .mf-skip-vote-count {
    font-size: 10px;
  }
}

/* =================================================================
   MAFIA CHAT - generic mobile fallback
   Ensures chat panel is visible even when other layout overrides clash.
   ================================================================= */
@media (max-width: 640px) {
  #mafiaGame .mf-content {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  #mafiaGame .mf-chat-panel {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 180px !important;
    max-height: 48vh !important;
    overflow: hidden !important;
  }

  #mafiaGame .mf-chat-tabs {
    flex: 0 0 auto !important;
  }

  #mafiaGame .mf-chat-messages {
    flex: 1 1 auto !important;
    min-height: 90px !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  #mafiaGame .mf-chat-input-row {
    display: flex !important;
    flex: 0 0 auto !important;
  }
}