﻿/* style-tablet_public.css - iPad size overrides. */

body.tablet-mode .ui-btn {
  height: 70px;
  padding: 14px 22px;
  font-size: 22px;
  margin: 8px;
  border-radius: 8px;
}
body.tablet-mode .ui-btn.small-btn {
  height: 48px;
  font-size: 16px;
  padding: 8px 14px;
  margin: 0;
}
body.tablet-mode .tab-btn {
  font-size: 20px;
  padding: 10px 18px;
}

body.tablet-mode .top-header {
  padding: 12px 16px;
}
body.tablet-mode .top-header .ui-btn {
  height: 56px;
  font-size: 18px;
  padding: 10px 14px;
  margin: 3px;
}
body.tablet-mode .top-header #leaveBtn {
  padding: 10px 12px;
}

body.tablet-mode #throwTypeBtn,
body.tablet-mode #passBtn {
  height: 48px;
  font-size: 16px;
  padding: 8px 14px;
}

body.tablet-mode #playBtn {
  width: 110px;
  height: 110px;
  border-radius: 22px;
  right: 50px;
  bottom: -200px;
  font-size: 24px;
}
body.tablet-mode #playBtn .pb-line1 {
  font-size: 24px;
}
body.tablet-mode #playBtn .pb-line2 {
  font-size: 16px;
  margin-top: 2px;
}

body.tablet-mode .chat-toggle-btn {
  left: 16px;
  top: 220px;
  width: 60px;
  height: 60px;
  min-width: 60px;
  font-size: 30px;
  border-radius: 50%;
}
body.tablet-mode .chat-toggle-btn .chat-icon {
  font-size: 30px;
}

body.tablet-mode .p-info {
  padding: 5px 14px 10px 14px;
  min-width: 150px;
}
body.tablet-mode .p-name {
  font-size: 20px;
}
body.tablet-mode .p-title {
  font-size: 13px;
}
body.tablet-mode .p-amount {
  font-size: 16px;
}

body.tablet-mode .turn-indicator {
  font-size: 28px;
  padding: 8px 20px;
  min-height: 34px;
}
body.tablet-mode .turn-indicator.error {
  font-size: 22px;
}

body.tablet-mode .combo-text {
  font-size: 30px;
}
body.tablet-mode .combo-text.winner-celebration {
  font-size: 40px;
  padding: 14px 30px;
}

body.tablet-mode .hand .card {
  width: 100px;
  height: 145px;
  font-size: 26px;
  padding: 10px;
}

body.tablet-mode .lobby-title {
  font-size: 60px;
}
body.tablet-mode .auth-title {
  font-size: 32px;
}
body.tablet-mode .auth-input,
body.tablet-mode .swish-receiver-input,
body.tablet-mode .swish-input,
body.tablet-mode .history-filter {
  font-size: 22px;
  padding: 14px 20px;
}
body.tablet-mode .room-header h3 {
  font-size: 30px;
}
body.tablet-mode .room-item {
  font-size: 16px;
  padding: 14px 12px;
}
body.tablet-mode .room-item > div {
  font-size: 16px;
}
body.tablet-mode .room-item .ui-btn {
  height: 44px;
  font-size: 14px;
  padding: 6px 12px;
}
body.tablet-mode .user-info {
  font-size: 22px;
}
body.tablet-mode .player-list {
  font-size: 20px;
}
body.tablet-mode .room-actions .ui-btn {
  height: 48px;
  font-size: 16px;
  padding: 8px 14px;
}
body.tablet-mode #startBtn {
  height: 52px;
  font-size: 18px;
  padding: 10px 16px;
}

body.tablet-mode .modal-content h2 {
  font-size: 40px;
  margin-bottom: 18px;
}
body.tablet-mode .stat-row {
  font-size: 22px;
  padding: 12px 0;
}
body.tablet-mode .tab-row {
  gap: 8px;
  margin-bottom: 18px;
}
body.tablet-mode .history-filter {
  width: 350px;
  font-size: 20px;
  padding: 10px 16px;
}

body.tablet-mode .settings-row {
  gap: 16px;
  margin-bottom: 22px;
}
body.tablet-mode .settings-row input[type="range"] {
  height: 44px;
}
body.tablet-mode .settings-row label {
  width: 140px;
  font-size: 22px;
}
body.tablet-mode .settings-row .settings-value {
  width: 60px;
  font-size: 20px;
}

body.tablet-mode .shop-item {
  min-height: 150px;
  padding: 16px;
}
body.tablet-mode .shop-item-name {
  font-size: 18px;
}
body.tablet-mode .shop-item-status {
  font-size: 14px;
}

body.tablet-mode .shop-cb-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

body.tablet-mode .swish-result-item {
  font-size: 20px;
  padding: 14px 20px;
}

body.tablet-mode #winnerModal {
  width: 300px;
  padding: 12px 18px;
}
body.tablet-mode #winnerModal #winnerText {
  font-size: 24px;
}
body.tablet-mode #winnerModal.winner-expanded #winnerText {
  font-size: 36px;
}
body.tablet-mode #winnerModal.winner-expanded #payoutBreakdown {
  font-size: 22px;
}
body.tablet-mode #winnerModal.winner-expanded #readyStatusText {
  font-size: 18px;
}
body.tablet-mode #winnerModal.winner-expanded #readyNextBtn {
  height: 48px;
  padding: 8px 18px;
  font-size: 18px;
  min-width: 160px;
}

body.tablet-mode.chat-open .chat-close-btn {
  width: 90px;
  height: 90px;
  font-size: 40px;
  top: 12px;
  right: 12px;
}
body.tablet-mode.chat-open .chat-tabs {
  padding-right: 110px;
}
body.tablet-mode.chat-open .chat-messages {
  font-size: 16px;
}
body.tablet-mode.chat-open .chat-msg {
  margin-bottom: 10px;
}
body.tablet-mode.chat-open .chat-input-area {
  padding: 12px;
}
body.tablet-mode.chat-open .chat-input-area input {
  font-size: 22px;
  padding: 12px;
}
body.tablet-mode.chat-open .chat-input-area button {
  font-size: 16px;
  padding: 10px 14px;
}
body.tablet-mode.chat-open .chat-tab {
  font-size: 16px;
  padding: 10px;
}

body.tablet-mode .spectator-badge {
  top: 90px;
  font-size: 12px;
  padding: 5px 10px;
}

/* Tablet: shop centered, preview to the left, smaller preview card. */
body.tablet-mode #shopModal { justify-content: center; padding-left: 320px; }
body.tablet-mode #shopModal .modal-content { width: 720px; }
body.tablet-mode #cardBackPreviewModal { justify-content: center; padding-right: 760px; }
body.tablet-mode #cardBackPreviewModal .modal-content { width: 320px; padding: 16px; }
body.tablet-mode .shop-cb-equipped { width: 280px; height: 420px; }

/* Profile modal sectioned layout - tablet sizes */
body.tablet-mode .profile-title-badge {
  font-size: 20px;
  padding: 12px 20px;
  margin-bottom: 20px;
}
body.tablet-mode .profile-section {
  padding: 20px 24px;
  margin-bottom: 22px;
}
body.tablet-mode .profile-section-title {
  font-size: 17px;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
body.tablet-mode .profile-section .stat-row {
  font-size: 19px;
  padding: 12px 0;
}
body.tablet-mode .profile-record-num {
  font-size: 44px;
}
body.tablet-mode .profile-record-label {
  font-size: 13px;
}
body.tablet-mode .profile-record-sep {
  height: 48px;
}

/* Round red X - tablet sizing. */
body.tablet-mode .modal-x {
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  font-size: 28px;
}
body.tablet-mode #scoreModal .modal-content > h2,
body.tablet-mode #swishModal .modal-content > h2,
body.tablet-mode #profileModal .modal-content > h2,
body.tablet-mode #leaderboardModal .modal-content > h2,
body.tablet-mode #settingsModal .modal-content > h2,
body.tablet-mode #shopModal .modal-content > h2 {
  padding-right: 62px;
}

/* Round red X - tablet sizing */
body.tablet-mode .modal-x {
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  font-size: 20px;
}
body.tablet-mode #scoreModal .modal-content > h2,
body.tablet-mode #swishModal .modal-content > h2,
body.tablet-mode #profileModal .modal-content > h2,
body.tablet-mode #leaderboardModal .modal-content > h2,
body.tablet-mode #settingsModal .modal-content > h2,
body.tablet-mode #shopModal .modal-content > h2 {
  padding-right: 60px;
}

/* Tablet: shop centered, preview to left, smaller. Overrides v=84 values. */
body.tablet-mode #shopModal { justify-content: center; padding-left: 0; }
body.tablet-mode #shopModal .modal-content { width: 620px; height: 560px; }
body.tablet-mode #cardBackPreviewModal { justify-content: flex-start; padding-left: 450px; padding-right: 0; }
body.tablet-mode #cardBackPreviewModal .modal-content { width: 180px; padding: 14px 10px; }
body.tablet-mode .shop-cb-equipped { width: 160px; height: 240px; }

/* Modal header/close scaling for tablet */
body.tablet-mode .modal-header { padding-bottom: 16px; margin-bottom: 16px; }
body.tablet-mode .modal-title { font-size: 24px; }
body.tablet-mode .modal-close { width: 36px; height: 36px; font-size: 20px; }
body.tablet-mode #modalHistoryContent { grid-template-columns: 1fr 1fr; gap: 12px; }
body.tablet-mode .history-card { padding: 14px 16px; }
body.tablet-mode .history-date { font-size: 16px; }
body.tablet-mode .history-winner-pill { font-size: 13px; padding: 3px 10px; }
body.tablet-mode .history-change-row { font-size: 16px; }
body.tablet-mode .lb-row { padding: 16px 20px; font-size: 18px; }
body.tablet-mode .lb-rank { font-size: 16px; min-width: 40px; }
body.tablet-mode .lb-medal { font-size: 28px; min-width: 40px; }
body.tablet-mode .profile-record-num { font-size: 40px; }
body.tablet-mode .profile-section { padding: 18px 22px; margin-bottom: 16px; }
body.tablet-mode .profile-section-title { font-size: 15px; }
body.tablet-mode .profile-section .stat-row { font-size: 18px; padding: 10px 0; }

/* Tablet: shop centered, preview smaller + further left. Overrides v=86. */
body.tablet-mode #shopModal { justify-content: center; padding-left: 0; }
body.tablet-mode #shopModal .modal-content { width: 700px; height: 600px; }
body.tablet-mode #cardBackPreviewModal { justify-content: flex-start; padding-left: 220px; padding-right: 0; }
body.tablet-mode #cardBackPreviewModal .modal-content { width: 180px; padding: 10px; }
body.tablet-mode .shop-cb-equipped { width: 160px; height: 240px; }

/* Beg for Credits - tablet */
body.tablet-mode .title-action-card { padding: 18px 22px; gap: 16px; }
body.tablet-mode .title-action-heading { font-size: 18px; }
body.tablet-mode .title-action-sub { font-size: 15px; }
body.tablet-mode .title-action-btn { height: 44px; font-size: 16px; padding: 0 22px; min-width: 110px; }

