/* თამაშის ეკრანებს საკუთარი, უფრო ხალისიანი პალიტრა აქვთ — იმავე ფერთა
   ოჯახში, რაც საიტს (ქავერი: თბილი ქაღალდი, პენალის ლურჯი, ოხრა). */
.game-page {
  --bg: #faf8f5;
  --surface: #ffffff;
  --surface-2: #f5f0e8;
  --border: #ebe4d7;
  --text: #253645;
  --text-dim: #66737e;
  --primary: #2f6a9e;
  --primary-dark: #24557f;
  --primary-light: #e3edf6;
  --accent: #ffde68;
  --accent-ink: #253645;
  --c-red: #ff91ac;
  --c-blue: #69dcda;
  --c-yellow: #ffdf75;
  --c-green: #a9c9a0; /* მწვანე წიგნის ყდა */
  --success: #217450;
  --success-bg: #e2f8d9;
  --danger: #a23753;
  --danger-bg: #ffe7ee;
  --shadow: 0 5px 0 rgba(52,81,106,.06);
  background: radial-gradient(circle at 8% 10%, #f5f1e9 0, transparent 28%), radial-gradient(circle at 95% 80%, #dcebee 0, transparent 24%), var(--bg);
  color: var(--text);
}
.game-page .app-header { background: rgba(255,255,255,.92); border-bottom: 1px solid var(--border); }
.game-header-inner { display: flex; align-items: center; gap: 20px; width: min(1180px, 100%); padding: 0 24px; margin: auto; }
.game-header-inner .brand { font-size: 23px; letter-spacing: -.7px; }
.game-live-label { display: flex; align-items: center; gap: 7px; color: #5e6f7d; font-size: 12px; font-weight: 750; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #70be75; box-shadow: 0 0 0 4px #edf9ea; }
.game-home-link { display: flex; align-items: center; gap: 7px; margin-left: auto; color: var(--text-dim); font-size: 13px; font-weight: 700; }
.game-page .host-shell, .game-page .play-shell { min-height: calc(100dvh - var(--header-h)); padding: 28px 20px 40px; gap: 18px; }
.game-page .host-shell { width: min(1120px, 100%); margin: auto; }
.game-page .play-shell { justify-content: center; }
.game-page .btn { border: 2px solid transparent; border-radius: 14px; min-height: 44px; }
.game-page .btn-primary { background: var(--primary); box-shadow: 0 4px 0 #1d4469; color: white; }
.game-page .btn-primary:hover { background: var(--primary-dark); }
.game-page .btn-accent { background: var(--accent); box-shadow: 0 4px 0 #d5ad39; color: var(--text); }
.game-page .btn-outline { border-color: var(--border); background: white; }
.game-page .btn:disabled { box-shadow: none; }
.game-page button:focus-visible, .game-page a:focus-visible { outline: 3px solid #548bbc; outline-offset: 4px; }
.game-page .input { background: #fdfcfa; border: 2px solid var(--border); min-height: 48px; color: var(--text); }
.game-page .input:focus { box-shadow: 0 0 0 4px #f5f0e8; }
.game-page .input-pin { color: var(--primary); background: #f9f6f2; font-variant-numeric: tabular-nums; }
.game-page .card { border-radius: 24px; border-color: var(--border); }
.game-page .game-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .3px; color: var(--primary); }

/* One prominent PIN and a separate, growing player list. */
.game-lobby { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; width: 100%; align-items: stretch; }
.game-lobby-title { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.game-lobby-title h1 { font-size: clamp(24px, 3vw, 36px); overflow-wrap: anywhere; margin-top: 7px; }
.game-mode-badge { background: #f5f1e9; color: #4e799f; padding: 9px 13px; border-radius: 12px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.game-page .pin-card { position: relative; overflow: hidden; background: #2b4760; border: 0; padding: 32px 24px; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 330px; }
.game-page .pin-card::before { content: '✦'; position: absolute; font-size: 120px; color: #ffdf75; top: -58px; right: 12px; transform: rotate(12deg); opacity: .9; }
.game-page .pin-card::after { content: ''; position: absolute; width: 130px; height: 130px; border: 22px solid #73a0c8; border-radius: 50%; left: -65px; bottom: -65px; opacity: .65; }
.game-page .pin-label { color: #d0e0ee; font-size: 13px; letter-spacing: 0; text-transform: none; }
.game-page .pin-value { font-size: clamp(40px, 5.5vw, 66px); letter-spacing: 7px; line-height: 1.1; color: #ffdf75; margin: 24px 0; font-variant-numeric: tabular-nums; }
.game-page .join-url { color: #f0e9dd; font-size: 14px; line-height: 1.7; margin: 0; overflow-wrap: anywhere; }
.game-page .join-url strong { color: white; }
.game-lobby-players { padding: 26px; display: flex; flex-direction: column; min-width: 0; }
.lobby-player-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lobby-player-heading h2 { font-size: 19px; margin: 0; }
.game-page .player-count-badge { background: #f6f2ec; color: #4f82af; padding: 7px 12px; }
.game-page .player-chip-grid { justify-content: flex-start; align-content: flex-start; gap: 10px; margin: 22px 0; }
.game-page .player-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: #f9f6f2; border-radius: 12px; font-size: 14px; color: #3b5063; max-width: 100%; overflow-wrap: anywhere; }
.player-chip-initial { display: grid; place-items: center; width: 30px; height: 30px; background: #bedcf7; border-radius: 9px; color: #385268; flex-shrink: 0; }
.game-page .player-chip:nth-child(4n+2) .player-chip-initial { background: #ffe49a; }
.game-page .player-chip:nth-child(4n+3) .player-chip-initial { background: #a0e9dc; }
.game-page .player-chip:nth-child(4n) .player-chip-initial { background: #ffb5c7; }
.lobby-start { width: 100%; margin-top: auto; }
.lobby-note { margin: 14px 0 0; font-size: 12px; line-height: 1.6; text-align: center; }
.game-page .team-lobby-group { background: #fdfcfa; }

/* Shared host/player question stage. */
.game-question { position: relative; background: #2b4760; color: white; padding: 24px 30px; border-radius: 26px; width: 100%; overflow: hidden; text-align: center; }
.game-question::before { content: ''; position: absolute; width: 180px; height: 180px; border: 30px solid rgba(168,209,244,.12); border-radius: 45px; transform: rotate(25deg); right: -85px; bottom: -120px; pointer-events: none; }
.game-question-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.game-question-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 5px; }
.round-label { color: #f5f1e9; font-weight: 750; font-size: 13px; background: rgba(255,255,255,.1); padding: 8px 11px; border-radius: 10px; }
.points-label { display: inline-flex; align-items: center; gap: 5px; color: #ffe27b; font-size: 12px; font-weight: 700; }
.game-timer { flex-shrink: 0; display: grid; justify-items: center; gap: 4px; }
.game-page .timer-ring { --timer-progress: 100%; width: 58px; height: 58px; font-size: 25px; color: #ffdf75; background: radial-gradient(closest-side, #2b4760 78%, transparent 81%), conic-gradient(#ffdf75 var(--timer-progress), #53728e 0); box-shadow: none; font-variant-numeric: tabular-nums; }
.timer-caption { color: #ccdbe9; font-size: 10px; }
.game-timer.is-urgent .timer-ring { color: #ffadbc; background: radial-gradient(closest-side, #2b4760 78%, transparent 81%), conic-gradient(#ff91ac var(--timer-progress), #53728e 0); }
.game-page .host-question-text { font-size: clamp(23px, 3.4vw, 38px); line-height: 1.4; font-weight: 800; margin: 0 auto; max-width: 850px; overflow-wrap: anywhere; }
.game-question-hint { margin-top: 18px; color: #ccddeb; font-size: 13px; }
.game-question-image { display: block; margin: 18px auto 0; max-height: 280px; max-width: 100%; border-radius: 14px; object-fit: contain; }
.player-question-layout { width: min(720px, 100%); }
.player-question-layout > .game-question { margin-bottom: 18px; }
.game-page .answer-shapes-grid { max-width: none; gap: 14px; }
.game-page .answer-shape { position: relative; color: #253645; border: 2px solid rgba(37,54,69,.12); border-bottom-width: 6px; border-radius: 20px; padding: 20px; min-width: 0; min-height: 94px; font-size: 18px; line-height: 1.45; overflow-wrap: anywhere; box-shadow: 0 4px 8px rgba(37,54,69,.04); }
.game-page .answer-shape > span:not(.shape-icon):not(.count-badge) { min-width: 0; }
.game-page .answer-shape .shape-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.36); font-size: 19px; }
.game-page button.answer-shape:hover { filter: none; transform: translateY(-3px); box-shadow: 0 7px 0 rgba(37,54,69,.09); }
.game-page button.answer-shape:active { transform: translateY(1px); box-shadow: none; }
.game-page .answer-shape:disabled { cursor: default; }
.game-page .answer-shape.correct-reveal { outline: 3px solid #263d51; outline-offset: 3px; box-shadow: none; }
.game-page .answer-shape.dimmed { opacity: .45; }
.game-page .answer-shape .count-badge { color: #253645; background: rgba(255,255,255,.45); }
.game-page .answer-progress { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; color: #667481; font-size: 14px; margin: 0; }
.game-page .answer-progress strong { color: #3c6080; }
.game-page .host-controls { margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.game-page .host-question-header { margin: 0; }
.game-reveal-heading { text-align: center; width: 100%; padding: 14px 0; }
.game-reveal-heading h2 { font-size: clamp(23px, 3vw, 32px); margin: 7px 0 12px; }
.game-page .answer-shape .text-dim { color: #49525a; }
.game-page .game-answer-help { font-size: 13px; margin: 12px 0; line-height: 1.6; }
.game-page .matching-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.game-page .matching-columns .answer-shape { width: 100%; font-size: 15px; padding: 14px 12px; }
.game-page .order-controls .btn { min-width: 44px; padding: 6px; }

/* Friendly waiting, answer feedback and results. */
.game-state-card { width: min(520px, 100%); padding: 38px 28px; background: white; border: 1px solid var(--border); border-radius: 28px; box-shadow: 0 7px 0 #f1ebe1; text-align: center; }
.game-state-symbol { display: grid; place-items: center; width: 90px; height: 90px; background: #ffdf75; border: 3px solid #2b4760; border-radius: 28px; margin: 0 auto 24px; transform: rotate(-7deg); box-shadow: 5px 5px 0 #f0e9dc; color: #2b4760; }
.game-state-symbol > * { transform: rotate(7deg); }
.game-state-card .status-msg { font-size: clamp(24px, 3vw, 32px); line-height: 1.35; margin: 8px 0 12px; overflow-wrap: anywhere; }
.game-state-card .status-sub { line-height: 1.7; font-size: 14px; }
.game-state-card .avatar-badge { font-size: 55px; }
.game-state-card .waiting-dots { margin-top: 25px; }
.game-state-card.correct .game-state-symbol { background: #b7e989; }
.game-state-card.incorrect .game-state-symbol { background: #ffbdcf; }
.game-page .result-flash { background: transparent; font-size: 28px; padding: 0; margin: 8px 0 18px; }
.game-score-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.game-score-panel > div { padding: 18px 10px; border-radius: 17px; background: #faf7f3; }
.game-score-panel .score-label { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 5px; }
.game-score-panel .score-value { font-size: 29px; font-weight: 900; color: var(--primary); font-variant-numeric: tabular-nums; }
.game-page .player-score-big { color: var(--primary); }
.game-page .game-join-card { max-width: 450px; width: 100%; padding: 28px; text-align: left; }
.game-join-card .game-state-symbol { width: 70px; height: 70px; margin-bottom: 22px; border-radius: 23px; }
.game-join-card h1 { font-size: 27px; text-align: center; margin-bottom: 8px; }
.game-join-card > .status-sub { text-align: center; line-height: 1.6; margin-bottom: 24px; font-size: 14px; }
.game-join-card .field { margin-bottom: 20px; }
.game-join-card .auth-switch { line-height: 1.7; }
.game-page .leaderboard-list { max-width: 620px; }
.game-page .leaderboard-row { border: 1px solid var(--border); border-radius: 15px; padding: 14px 18px; margin-bottom: 8px; box-shadow: none; gap: 12px; }
.game-page .leaderboard-row.rank-1 { background: #fff8d8; border-color: #ecd36d; }
.game-page .rank-num { display: grid; place-items: center; border-radius: 10px; width: 33px; height: 33px; background: #f6f2eb; color: #547898; flex-shrink: 0; }
.game-page .leaderboard-row.rank-1 .rank-num { color: #735716; background: #ffe89b; }
.game-page .leaderboard-name { min-width: 0; overflow-wrap: anywhere; }
.game-page .leaderboard-score { white-space: nowrap; }
.game-page .leaderboard-row.is-me { outline: 2px solid #7ea3c4; }
.game-podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; width: min(600px,100%); margin: 8px auto 26px; padding-top: 12px; }
.podium-place { flex: 1; min-width: 0; max-width: 190px; text-align: center; }
.podium-avatar { width: 52px; height: 52px; border: 3px solid #2b4760; border-radius: 19px; margin: 0 auto 10px; display: grid; place-items: center; font-size: 26px; font-weight: 900; color: #2b4760; background: #a6e8dd; }
.podium-1 .podium-avatar { background: #ffdf75; transform: rotate(-8deg); width: 66px; height: 66px; font-size: 34px; }
.podium-3 .podium-avatar { background: #ffc2d3; }
.podium-name { font-size: 14px; font-weight: 800; padding: 0 4px; overflow-wrap: anywhere; line-height: 1.4; }
.podium-score { font-size: 12px; color: var(--text-dim); padding: 5px 0 11px; }
.podium-block { display: grid; place-items: center; height: 76px; border-radius: 19px 19px 8px 8px; background: #89ddd0; font-size: 36px; font-weight: 900; color: #304e53; border-bottom: 5px solid rgba(0,0,0,.1); }
.podium-1 .podium-block { height: 110px; background: #ffdf75; color: #654e21; }
.podium-3 .podium-block { height: 56px; background: #ffb0c6; color: #6e3149; }
.game-leaderboard { width: min(700px,100%); text-align: center; }
.game-leaderboard > h1, .game-leaderboard > h2 { font-size: clamp(25px, 3vw, 36px); margin: 8px 0; }
.game-page .grid-cell { background: #5e91bd; color: white; border-radius: 14px; border-bottom: 5px solid #365e81; }
.game-page .grid-cell.answered { background: #efe9df; color: #7a8b9a; border-color: transparent; }
.game-page .grid-col-head { background: #ffdf75; color: #38444e; }
.game-page .team-pick-card { color: white; border-radius: 15px; }
.game-page .team-pick-card.selected { outline-color: #417caf; }

@media (max-width: 700px) {
  .game-header-inner { padding: 0 16px; gap: 12px; }
  .game-header-inner .brand { font-size: 20px; }
  .game-home-link span:not(.ico) { display: none; }
  .game-home-link { padding: 10px; }
  .game-page .host-shell, .game-page .play-shell { padding: 20px 14px 28px; }
  .game-lobby { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .game-lobby-title { flex-direction: column; gap: 10px; }
  .game-page .pin-card { min-height: 260px; padding: 28px 20px; }
  .game-page .pin-value { font-size: 49px; letter-spacing: 6px; }
  .game-question { padding: 18px; border-radius: 22px; }
  .game-question-top { margin-bottom: 14px; }
  .game-page .host-question-text { font-size: 23px; }
  .game-page .answer-shape { font-size: 16px; padding: 15px; gap: 10px; min-height: 94px; border-radius: 17px; }
  .game-page .answer-shape .shape-icon { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
  .game-page .answer-shapes-grid { gap: 12px; }
  .game-question-image { max-height: 200px; }
  .game-state-card { padding: 30px 22px; }
  .game-podium { gap: 8px; }
  .podium-name { font-size: 12px; }
  .podium-score { font-size: 10px; }
}
@media (max-width: 440px) {
  .game-page .answer-shapes-grid { grid-template-columns: minmax(0,1fr); }
  .game-page .answer-shape { min-height: 64px; padding: 12px 14px; }
  .game-question-meta { flex-direction: column; align-items: flex-start; gap: 7px; }
  .game-page .timer-ring { width: 51px; height: 51px; font-size: 23px; }
  .game-page .game-join-card { padding: 24px 20px; }
  .game-page .matching-columns .answer-shape { padding: 10px; font-size: 14px; }
  .game-page .order-controls { flex-direction: column; }
  .game-live-label { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-page *, .game-page *::before, .game-page *::after { animation: none !important; transition: none !important; }
}

.game-page .input:not(.input-pin) { font-size: 16px; }
.game-page .timer-ring.timer-long { font-size: 20px; }
.game-page .grid-board { justify-content: flex-start; padding: 4px 2px 10px; }
.game-page .grid-col { flex: 1; min-width: 110px; }

/* Selectable, shared player characters. Animations are short and state-specific. */
.game-avatar { display: inline-flex; flex-shrink: 0; vertical-align: middle; width: 56px; height: 56px; border-radius: 20px; background: linear-gradient(145deg, #fff9, transparent 70%), var(--avatar-color); line-height: 1; box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 #35234812; }
.game-avatar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.game-avatar.avatar-small { width: 36px; height: 36px; border-radius: 12px; }
.game-avatar.avatar-large { width: 78px; height: 78px; border-radius: 24px; }
.game-avatar.avatar-hero { width: 112px; height: 112px; border-radius: 34px; }
.avatar-character, .avatar-head, .avatar-hand, .avatar-eyes { transform-box: view-box; }
.avatar-character { transform-origin: 54px 95px; }
.avatar-head { transform-origin: 54px 65px; }
.avatar-hand { transform-origin: 79px 85px; }
.avatar-eyes { transform-origin: 54px 47px; }
.avatar-celebration { opacity: 0; }
.avatar-wave .avatar-hand { animation: avatar-wave-hand .5s ease-in-out 4; }
.avatar-happy .avatar-character { animation: avatar-cheer .65s ease-in-out 3; }
.avatar-win .avatar-character { animation: avatar-victory .8s ease-in-out 4; }
.avatar-win .avatar-celebration, .avatar-happy .avatar-celebration { animation: avatar-sparkle .8s ease-in-out 3; }
.avatar-encourage .avatar-head { animation: avatar-nod .7s ease-in-out 2; }
.avatar-picker { min-width: 0; border: 0; margin: 24px 0; padding: 0; }
.avatar-picker legend { font-size: 14px; font-weight: 800; padding: 0; }
.avatar-picker-preview { display: flex; align-items: center; gap: 18px; padding: 16px; margin: 12px 0; border-radius: 21px; background: linear-gradient(130deg,#f7f4ee,#fdfcfa); border: 1px solid #ece6dc; }
.avatar-picker-preview .avatar-hero { width: 96px; height: 96px; border-radius: 28px; }
.avatar-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.avatar-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; position: relative; min-height: 110px; padding: 10px 4px; border: 2px solid var(--border); border-radius: 16px; background: #fdfdfc; color: var(--text); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.avatar-option .game-avatar { width: 64px; height: 64px; border-radius: 20px; }
.avatar-option[aria-pressed="true"] { border-color: var(--primary); background: #f7f3ed; box-shadow: 0 3px 0 #c4d8ea; }
.avatar-option:hover { border-color: var(--primary); }
.avatar-selection-status { color: var(--primary); font-size: 12px; text-align: center; margin: 12px 0 0; }
.game-state-avatar { display: flex; justify-content: center; margin: 0 auto 22px; }
.game-page .round-label { display: inline-flex; align-items: center; gap: 7px; }
.game-page .round-label .game-avatar { width: 28px; height: 28px; border-radius: 9px; }
.podium-character { position: relative; display: flex; justify-content: center; margin: 12px auto 10px; }
.podium-1 .podium-character { margin-top: 0; }
.podium-1 .podium-character .game-avatar { width: 96px; height: 96px; border-radius: 30px; }
.avatar-crown { position: absolute; top: -19px; z-index: 1; color: #b27b13; background: #ffe07b; width: 28px; height: 28px; border: 2px solid #263543; border-radius: 10px; font-size: 19px; line-height: 24px; transform: rotate(-10deg); }
.team-player-avatar { margin: 16px 0; }
@keyframes avatar-wave-hand { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-28deg); } }
@keyframes avatar-cheer { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-9px) rotate(-5deg); } 70% { transform: translateY(-3px) rotate(4deg); } }
@keyframes avatar-victory { 0%,100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-10px) rotate(-9deg); } 70% { transform: translateY(-5px) rotate(9deg); } }
@keyframes avatar-sparkle { 0%,100% { opacity: 0; } 40%,65% { opacity: 1; } }
@keyframes avatar-nod { 0%,100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@media (max-width:440px) {
  .game-page .leaderboard-row { gap: 8px; padding: 12px 10px; }
  .game-page .leaderboard-row .game-avatar { width: 30px; height: 30px; border-radius: 10px; }
  .podium-character .avatar-large { width: 64px; height: 64px; border-radius: 21px; }
  .podium-1 .podium-character .game-avatar { width: 80px; height: 80px; border-radius: 25px; }
}
@media (prefers-reduced-motion:reduce) {
  .game-page .game-avatar *, .game-page .game-avatar *::before, .game-page .game-avatar *::after { animation: none !important; transition: none !important; }
}

/* Browse a larger collection without lengthening the join form. */
.avatar-preview-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; line-height: 1.5; }
.avatar-preview-copy strong { font-size: 19px; overflow-wrap: anywhere; }
.avatar-preview-copy > span { font-size: 11px; color: var(--text-dim); }
.avatar-preview-copy .avatar-preview-label { color: var(--primary); font-weight: 750; }
.avatar-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.avatar-filter { border: 1px solid var(--border); padding: 8px 10px; min-height: 40px; border-radius: 12px; background: white; color: var(--text-dim); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.avatar-filter[aria-pressed="true"] { background: #446888; border-color: #446888; color: white; }
.avatar-option > span:last-child { overflow-wrap: anywhere; line-height: 1.4; }
.avatar-option[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: white; font-size: 12px; line-height: 20px; }
.avatar-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.avatar-page-range { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.avatar-page-button { min-width: 44px; min-height: 40px; border: 1px solid var(--border); border-radius: 12px; background: #fdfbf9; color: var(--primary); font: inherit; font-size: 19px; cursor: pointer; }
.avatar-page-button:disabled { opacity: .35; cursor: default; }
@media(max-width:380px) {
  .avatar-picker-preview { padding: 12px; gap: 12px; }
  .avatar-picker-preview .avatar-hero { width: 78px; height: 78px; border-radius: 24px; }
  .avatar-preview-copy strong { font-size: 16px; }
  .avatar-option { font-size: 11px; }
  .avatar-option .game-avatar { width: 55px; height: 55px; border-radius: 18px; }
}

.game-connection-notice { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:1000; width:max-content; max-width:calc(100% - 32px); padding:12px 18px; border-radius:14px; background:#fff3cf; color:#513c00; border:1px solid #e2c66c; box-shadow:0 4px 20px #0002; text-align:center; font-weight:700; pointer-events:none; }
.game-connection-notice[hidden] { display:none; }

/* რუკის კითხვა: წამყვანის ეკრანზე რუკა ზომიერ სიგანეზე, მოთამაშესთან — სრულ სიგანეზე */
.game-page .host-map { width: 100%; max-width: min(860px, calc((100vh - 280px) * 1.25)); min-width: min(100%, 420px); margin: 0 auto; }
.game-page .player-map-layout { width: min(860px, 100%); }
/* სრულ ეკრანზე ტაიმერი რუკის ზედა ზოლშია — უფრო კომპაქტური */
.game-page .map-fs-top .timer-ring { width: 44px; height: 44px; font-size: 19px; }
.game-page .map-fs-top .timer-caption { display: none; }