/* GeoVersus — style.css (v final + anuncios laterales fijos) */

:root {
  --bg:      #0b132b;
  --bg2:     #111c3a;
  --surface: rgba(255,255,255,0.06);
  --border:  rgba(255,255,255,0.12);
  --text:    #ffffff;
  --dim:     rgba(255,255,255,0.6);
  --hdr:     60px;
  --act:     130px;
  --gap:     10px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input, select { font-family:inherit; }
a { text-decoration:none; }

body {
  background: #0b132b;
  color: var(--text);
  font-family: 'Barlow Condensed', sans-serif;
  height: 100dvh;
  overflow: hidden;
}

.overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 16px 0 16px 0;
  background: rgba(11,19,43,0.96);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.overlay::-webkit-scrollbar { width: 6px; }
.overlay::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
.overlay.active { opacity:1; pointer-events:all; }

#gameOverScreen,
#top10ResultScreen {
  justify-content: center !important;
  align-items: center !important;
}

.start-wrap {
  width: 100%; max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 20px 16px 20px; box-sizing: border-box;
}

.logo-block { text-align:center; margin-bottom:4px; line-height:1; }
.tagline { font-size: 12px; font-weight: 400; letter-spacing: 4px; color: var(--dim); text-transform: uppercase; margin-bottom: 18px; }

.lang-row { display:flex; gap:10px; margin-bottom:16px; }
.lang-btn {
  padding: 7px 20px; border-radius: 30px; border: 1px solid var(--border);
  color: var(--dim); background: var(--surface); font-size: 13px; font-weight: 700; letter-spacing: 2px;
  transition: all 0.2s;
}
.lang-btn.active, .lang-btn:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; box-shadow: 0 0 16px rgba(124,58,237,0.4); }

.tab-bar {
  display: flex; gap: 4px; background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px; margin-bottom: 16px; width: 100%;
}
.tab-btn {
  flex: 1; padding: 9px; border-radius: 9px;
  font-family: 'Bebas Neue', cursive; font-size: 17px; letter-spacing: 3px; color: var(--dim);
  transition: all 0.2s;
}
.tab-btn.active { background: linear-gradient(135deg, #7c3aed, #3d8bff); color: #fff; box-shadow: 0 2px 16px rgba(124,58,237,0.4); }
.tab-btn:hover:not(.active) { color: #fff; }

.tab-content { width: 100%; display: flex; flex-direction: column; align-items: center; flex: 1 0 auto; min-height: 0; }
.tab-content.hidden { display: none !important; }

.section-label { font-size: 11px; font-weight: 700; letter-spacing: 5px; color: var(--dim); margin-bottom: 12px; text-align: center; }

.cat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; width: 100%; margin-bottom: 24px; overflow: visible; padding: 2px;
}
@media (min-width: 768px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }

.cat-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 10px; border-radius: 20px; border: none;
  background: var(--surface); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  transition: all 0.2s; position: relative; z-index: 1; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.cat-btn:hover { transform: scale(1.03); z-index: 10; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.cat-btn .cat-icon { font-size: 28px; line-height: 1; }
.cat-btn.selected { box-shadow: 0 0 20px currentColor; border: 1px solid rgba(255,255,255,0.3); transform: scale(1.02); }
.cat-btn span { text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }

/* ---- TOP 10 GAME ---- */
#top10CatSelector { width: 100%; }
#top10GameContainer { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.top10-game-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 20px; background: var(--surface); padding: 8px 16px; border-radius: 60px; border: 1px solid var(--border); flex-wrap: wrap; gap: 12px; }
.top10-game-buttons { display: flex; gap: 12px; }
.back-btn-sm, .sec-btn-sm { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 40px; padding: 6px 18px; color: var(--text); font-weight: 700; font-size: 14px; letter-spacing: 1px; cursor: pointer; transition: all 0.2s; }
.back-btn-sm:hover, .sec-btn-sm:hover { background: rgba(124,58,237,0.4); border-color: #a78bfa; color: white; }
.top10-timer-wrapper { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); padding: 4px 16px 4px 20px; border-radius: 50px; border: 1px solid rgba(124,58,237,0.3); box-shadow: 0 0 8px rgba(124,58,237,0.2); }
.top10-timer-display { font-family: 'Bebas Neue', monospace; font-size: 28px; letter-spacing: 3px; color: #a78bfa; text-shadow: 0 0 5px #7c3aed; background: transparent; padding: 4px 0; min-width: 100px; text-align: center; }
.timer-toggle { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid var(--border); font-size: 18px; cursor: pointer; transition: all 0.2s; color: var(--dim); display: flex; align-items: center; justify-content: center; }
.timer-toggle:hover { background: #7c3aed; color: white; border-color: #a78bfa; transform: scale(1.05); }
.top10-input-group { display: flex; gap: 10px; width: 100%; max-width: 500px; }
.top10-input-group input { flex: 3; background: rgba(255,255,255,0.07); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; color: #fff; font-size: 16px; font-weight: 600; outline: none; }
.top10-input-group input::placeholder { color: var(--dim); }
.top10-input-group input:focus { border-color: #a78bfa; }
.guess-submit { flex: 1; background: linear-gradient(135deg, #7c3aed, #3d8bff); border-radius: 14px; padding: 12px 16px; color: #fff; font-weight: 700; letter-spacing: 2px; transition: all 0.2s; }
.guess-submit:hover { transform: scale(1.02); background: linear-gradient(135deg, #6d28d9, #2563eb); }
.top10-progress { font-size: 14px; font-weight: 700; letter-spacing: 2px; color: var(--dim); text-align: center; margin: 5px 0; }
.top10-grid { display: flex; gap: 20px; width: 100%; max-height: 55vh; overflow-y: auto; }
.top10-col { flex: 1; display: flex; flex-direction: column; gap: 12px; }

.top10-card {
  background: linear-gradient(145deg, #1e1e3a, #0f0f28);
  border-radius: 18px; padding: 12px 10px; display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.top10-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1;
  border-radius: 18px;
  pointer-events: none;
}
.top10-rank,
.top10-flag,
.top10-info {
  position: relative;
  z-index: 2;
}
.top10-name,
.top10-value {
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.top10-rank { font-family: 'Bebas Neue', cursive; font-size: 28px; color: #a78bfa; width: 45px; text-align: center; }
.top10-flag { font-size: 32px; }
.top10-info { flex: 1; min-width: 0; }
.top10-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top10-value { font-family: 'Bebas Neue', cursive; font-size: 14px; color: #a78bfa; margin-top: 2px; }
.top10-card.empty { opacity: 0.5; background: rgba(255,255,255,0.02); justify-content: center; }
.top10-card.empty .top10-rank { color: var(--dim); }

/* ---- HIGHER/LOWER CARDS ---- */
.play-btn {
  width: 100%; max-width: 600px; display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 18px 32px; border-radius: 50px;
  background: linear-gradient(135deg, #5a2ea6, #2563eb); color: #fff;
  font-family: 'Bebas Neue', cursive; font-size: 24px; letter-spacing: 5px;
  box-shadow: 0 6px 28px rgba(124,58,237,0.5); transition: all 0.2s;
  margin-top: 4px; margin-bottom: 8px; flex-shrink: 0; border: none;
}
.play-btn:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(124,58,237,0.7); }
.play-btn:active { transform:translateY(0); }
.play-btn-arrow { font-size: 20px; }

.sec-btn {
  width: 100%; padding: 14px; border-radius: 50px; border: 1px solid var(--border);
  color: var(--dim); font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; transition: all 0.2s;
}
.sec-btn:hover { border-color:rgba(255,255,255,0.4); color:#fff; }

.action-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: center;
  margin-top: 10px;
}

.search-sort-row { display: flex; gap: 8px; width: 100%; margin-bottom: 14px; flex-shrink: 0; }
.country-search {
  flex: 7; min-width: 0; background: rgba(255,255,255,0.07); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 16px; color: #fff; font-size: 14px; font-weight: 600; outline: none;
}
.country-search::placeholder { color: var(--dim); }
.country-search:focus { border-color: #a78bfa; }
.sort-select {
  flex: 2.5; background: rgba(255,255,255,0.07); border: 1px solid var(--border); border-radius: 14px;
  padding: 0 12px; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.sort-select option { background: #0d0d24; color: #fff; }

.country-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%;
  overflow-y: auto; flex: 1; padding-right: 2px;
}
@media (min-width: 768px) { .country-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .country-grid { grid-template-columns: repeat(5, 1fr); } }
.cinfo-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px 10px; border-radius: 14px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.03); cursor: pointer; transition: all 0.18s; text-align: center;
}
.cinfo-btn:hover { background: rgba(124,58,237,0.2); border-color: #a78bfa; transform: scale(1.02); }
.cinfo-flag  { font-size: 28px; line-height: 1; }
.cinfo-name  { font-size: 10px; font-weight: 700; color: #fff; }
.cinfo-best  { font-size: 9px; font-weight: 700; color: var(--dim); margin-top: 2px; }

/* ---- COUNTRY MODAL ---- */
#countryModal.overlay { overflow: hidden; align-items: center; justify-content: center; padding: 16px; }
.modal-wrap {
  position: relative; width: 100%; max-width: 650px; max-height: 85vh;
  background: #0d0d24; border: 1px solid rgba(255,255,255,0.1); border-radius: 22px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 0 80px rgba(0,0,0,0.8), 0 0 40px rgba(124,58,237,0.1);
}
.modal-close {
  position: absolute; top: 12px; right: 14px; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(255,255,255,0.1); color: var(--dim);
  font-size: 14px; z-index: 10; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; border: 1px solid var(--border);
}
.modal-close:hover { background:rgba(255,61,90,0.3); color:#fff; }
.modal-header { padding: 28px 24px 22px; display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.modal-flag     { font-size: 56px; line-height: 1; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5)); }
.modal-name     { font-family: 'Bebas Neue', cursive; font-size: 32px; letter-spacing: 3px; text-align:center; line-height:1; }
.modal-continent{ font-size: 9px; font-weight: 700; letter-spacing: 4px; color: var(--dim); text-transform: uppercase; }
.modal-stats {
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  padding: 12px 18px 20px; overflow-y: auto !important; max-height: 60vh;
}
@media (max-width: 640px) { .modal-stats { grid-template-columns: 1fr; } }
.stat-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 12px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.stat-row:hover { background: rgba(255,255,255,0.07); }
.stat-icon  { font-size: 18px; flex-shrink:0; }
.stat-meta  { flex: 1; min-width:0; }
.stat-label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: var(--dim); text-transform: uppercase; }
.stat-val   { font-family: 'Bebas Neue', cursive; font-size: 18px; letter-spacing: 1px; color: #fff; line-height: 1.1; }
.stat-unit  { font-size: 8px; color: rgba(255,255,255,0.3); margin-left:3px; }
.rank-chip { flex-shrink: 0; min-width: 40px; padding: 4px 6px; border-radius: 8px; font-family: 'Bebas Neue', cursive; font-size: 13px; text-align: center; }
.rank-gold   { background: rgba(250,204,21,0.2); color: #facc15; border: 1px solid rgba(250,204,21,0.3); }
.rank-silver { background: rgba(148,163,184,0.2); color: #94a3b8; border: 1px solid rgba(148,163,184,0.3); }
.rank-bronze { background: rgba(180,120,60,0.2);  color: #cd8e4e; border: 1px solid rgba(180,120,60,0.3); }
.rank-normal { background: rgba(255,255,255,0.07); color: var(--dim); border: 1px solid var(--border); }
.rank-na     { background: transparent; color: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.06); }
.rank-sub { font-size: 8px; opacity: 0.55; margin-top: 2px; }

.go-reveal-text { color: #fff; font-size: 18px; line-height: 2; margin-bottom: 20px; background: none; border: none; padding: 0; text-align: center; }

#gameOverScreen { background: rgba(11,19,43,0.97); }
.go-wrap { width: 100%; max-width: 500px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; }
.go-icon   { font-size:60px; margin-bottom:10px; animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1); }
.go-title  { font-family:'Bebas Neue',cursive; font-size: clamp(38px,10vw,58px); letter-spacing:6px; color:#ff3d5a; text-shadow:0 0 30px rgba(255,61,90,0.6); margin-bottom:16px; }
.go-stats-row { display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:24px; }
.go-stat { display:flex; flex-direction:column; align-items:center; gap:2px; }
.go-num  { font-family:'Bebas Neue',cursive; font-size:60px; line-height:1; color:#a78bfa; }
.go-lbl  { font-size:10px; font-weight:700; letter-spacing:4px; color:var(--dim); }
.go-divider { width:1px; height:56px; background:var(--border); }

/* ---- HEADER ---- */
header {
  position:fixed; top:0; left:0; right:0; height:var(--hdr); z-index:100;
  background: rgba(11,19,43,0.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 12px;
}
@media (min-width: 768px) { header { padding: 0 30px; } }
.back-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--dim); font-size: 20px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; margin-right: 8px; }
.back-btn:hover { background: rgba(124,58,237,0.3); border-color: #7c3aed; color: #fff; }
.hdr-logo { font-family:'Bebas Neue',cursive; font-size:25px; letter-spacing:3px; }
.hdr-logo span { color:#a78bfa; }
.hdr-cat  { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:2px; color:var(--dim); text-transform:uppercase; }
.hdr-cat-icon { font-size:16px; }
.hdr-right { display:flex; gap:7px; }
.score-chip { display:flex; align-items:center; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:5px 11px; }
.chip-lbl { font-size:9px; font-weight:700; letter-spacing:2px; color:var(--dim); }
.chip-val { font-family:'Bebas Neue',cursive; font-size:20px; line-height:1; color:#a78bfa; }

/* ---- MAIN GAME ---- */
main { position:fixed; top:var(--hdr); left:0; right:0; bottom:0; display:flex; flex-direction:column; }
.stage { flex:1; position:relative; overflow:hidden; }
.card {
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: calc(50% - var(--gap) - 5px);
  left: 0;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  overflow: visible;
  transition: transform 1.0s cubic-bezier(0.4,0,0.2,1), opacity 0.42s ease;
  will-change: transform, opacity;
}
.card-main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.card-guess-buttons {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.card-guess-buttons .guess-btn {
  width: 70%;
  max-width: 220px;
  padding: 12px 8px;
  font-size: 18px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.card[data-c="africa"]   { background:linear-gradient(150deg,#1a0900,#3d1800,#612800); border:1px solid rgba(255,150,40,0.3); }
.card[data-c="asia"]     { background:linear-gradient(150deg,#10001f,#250040,#400066); border:1px solid rgba(160,80,255,0.3); }
.card[data-c="europe"]   { background:linear-gradient(150deg,#000620,#001445,#001e6b); border:1px solid rgba(60,140,255,0.3); }
.card[data-c="americas"] { background:linear-gradient(150deg,#001510,#002b1e,#003d2a); border:1px solid rgba(0,210,110,0.3); }
.card[data-c="oceania"]  { background:linear-gradient(150deg,#001420,#002640,#003660); border:1px solid rgba(0,190,230,0.3); }

.card-flag   { font-size:clamp(42px,7vw,68px); margin-bottom:9px; filter:drop-shadow(0 4px 14px rgba(0,0,0,0.6)); line-height:1; }
.card-name   { font-family:'Bebas Neue',cursive; font-size:clamp(17px,2.8vw,28px); letter-spacing:2px; text-align:center; margin-bottom:12px; text-shadow:0 2px 10px rgba(0,0,0,0.7); }
.card-sep    { width:44px; height:1px; background:rgba(255,255,255,0.14); margin-bottom:12px; }
.card-stat-lbl { font-size:8.5px; font-weight:700; letter-spacing:2.5px; color:rgba(255,255,255,0.45); text-transform:uppercase; text-align:center; margin-bottom:5px; }
.card-stat-val {
  font-family:'Bebas Neue',cursive;
  font-size:clamp(24px,4vw,48px);
  letter-spacing:2px;
  text-align:center;
  color:#fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  line-height:1;
}
.card-qmark  { font-family:'Bebas Neue',cursive; font-size:clamp(58px,10vw,90px); color:rgba(255,255,255,0.15); text-shadow:0 0 40px rgba(255,255,255,0.06); line-height:1; }

/* Continente fijo */
.card-continent {
  position: absolute;
  top: 12px;
  left: 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.6);
  text-transform: uppercase;
  z-index: 5;
}
@media (max-width: 768px) { .card-continent { font-size: 2.8vw; top: 8px; left: 10px; } }

.btn-up { background: linear-gradient(145deg, #00a86b, #00e676, #00c853); color: #0a2a1a; text-shadow: 0 1px 2px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.3); }
.btn-dn { background: linear-gradient(145deg, #d32f2f, #ff5252, #e53935); color: #2a0a0a; text-shadow: 0 1px 2px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.3); }

@keyframes popIn { 0%{transform:scale(0.3);opacity:0;} 70%{transform:scale(1.15);} 100%{transform:scale(1);opacity:1;} }
@keyframes logoEntrance { 0%{transform:scale(0.15);opacity:0;} 65%{transform:scale(1.10);opacity:1;} 82%{transform:scale(0.96);} 100%{transform:scale(1);opacity:1;} }
.logo-block img { animation: logoEntrance 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes catFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.cat-btn { animation: catFadeIn 0.35s ease both; }

.vs-ring {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background: #0b132b; border:2px solid rgba(255,255,255,0.14);
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',cursive; font-size:14px; letter-spacing:1px; color:rgba(255,255,255,0.4); z-index:10;
  box-shadow:0 0 22px rgba(0,0,0,0.9);
}

.hidden { display:none !important; }

.flags-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: #0b132b; overflow: hidden; pointer-events: none; display: flex; flex-direction: column; justify-content: space-around; }
.flags-line { width: 100%; overflow: hidden; white-space: nowrap; }
.flags-track { display: inline-block; font-size: 90px; line-height: 1.8; opacity: 1.0; filter: blur(0.3px); animation: scrollFlagsLeft 150s linear infinite; padding-left: 20px; }
.flags-line.reverse .flags-track { animation: scrollFlagsRight 150s linear infinite; }
@keyframes scrollFlagsLeft { 0%{transform: translateX(0);} 100%{transform: translateX(-50%);} }
@keyframes scrollFlagsRight { 0%{transform: translateX(-50%);} 100%{transform: translateX(0);} }
.flags-bg.hidden { display: none; }
.flags-bg.hide-flags .flags-line { display: none; }

/* ========== MÓVIL VERTICAL ========== */
@media (max-width: 768px) {
  .flags-bg { display: none; }
  .stage { position: relative; height: 100%; }
  .card { position: absolute !important; top: auto !important; bottom: auto !important; left: 0 !important; right: 0 !important; width: 94% !important; margin: 0 auto !important; overflow-y: auto; padding: 12px 8px; transition: transform 1.0s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease; }
  .card-flag { font-size: 10vw; max-height: 16vw; margin-bottom: 9px; }
  .card-name { font-size: 5vw; word-break: break-word; max-width: 90%; margin-bottom: 12px; }
  .card-stat-val { font-size: 7vw; }
  .card-qmark { font-size: 12vw; }
  .card-stat-lbl { font-size: 3vw; }
  .card-sep { width: 44px; margin-bottom: 6px; }
  .card-guess-buttons .guess-btn { width: 80%; padding: 8px 6px; font-size: 4.5vw; }
  .vs-ring { top: 50%; transform: translate(-50%, -50%); z-index: 20; }
  :root { --hdr: 50px; }
  .go-num { font-size: 50px; }
  .modal-name { font-size: 26px; }
  .modal-stats { grid-template-columns: 1fr; }
  .country-grid { grid-template-columns: repeat(3, 1fr); }
  .sort-select { font-size: 11px; padding: 0 6px; }
  .search-sort-row { gap: 5px; }
  .top10-grid { flex-direction: column; }
  .top10-col { width: 100%; }
  .overlay { padding-bottom: 130px; }
  #tabInfo { padding-bottom: 120px; }
  .cat-grid { padding-bottom: 40px; }
  #top10ResultScreen .go-stats-row { flex-direction: column; gap: 12px; width: 100%; }
  .top10-grid { max-height: none; overflow-y: visible; }
  #gameOverScreen, #top10ResultScreen { display: flex; align-items: center; justify-content: center; }
  #gameOverScreen .play-btn, #gameOverScreen .sec-btn, #top10ResultScreen .play-btn, #top10ResultScreen .sec-btn { width: auto; min-width: 200px; max-width: 280px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 768px) and (orientation: landscape) {
  .card { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 94% !important; margin: auto auto !important; height: 60% !important; max-height: 60% !important; padding: 4px 4px !important; overflow-y: auto !important; }
  .card-flag { font-size: 5vw !important; max-height: 7vw !important; margin-bottom: 1px !important; }
  .card-name { font-size: 2vw !important; margin-bottom: 2px !important; word-break: break-word !important; white-space: normal !important; line-height: 1.1 !important; }
  .card-continent { font-size: 1.5vw !important; top: 2px !important; left: 4px !important; }
  .card-stat-lbl { font-size: 1.5vw !important; margin-bottom: 0 !important; }
  .card-stat-val { font-size: 3vw !important; }
  .card-qmark { font-size: 4vw !important; }
  .card-sep { width: 18px !important; margin-bottom: 2px !important; }
  .card-guess-buttons { gap: 2px !important; margin-top: 2px !important; }
  .card-guess-buttons .guess-btn { padding: 1px 3px !important; font-size: 2vw !important; width: 65% !important; border-radius: 10px !important; }
  .vs-ring { width: 20px !important; height: 20px !important; font-size: 6px !important; }
}

@media (max-width: 480px) {
  .card-flag { font-size: 12vw; }
  .card-name { font-size: 6vw; }
  .card-stat-val { font-size: 8vw; }
  .card-qmark { font-size: 14vw; }
  .card-stat-lbl { font-size: 3.5vw; }
  .card-continent { font-size: 3vw; }
  .card-guess-buttons .guess-btn { font-size: 5vw; }
}
@media (max-width: 360px) { .country-grid { grid-template-columns: repeat(2, 1fr); } }

/* ========== ANUNCIOS (NUEVA POSICIÓN FIJA) ========== */
.game-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Laterales fijos en los extremos de la pantalla */
.ad-sidebar {
  position: fixed;
  top: var(--hdr);               /* Justo debajo del header */
  width: 160px;
  height: calc(100vh - var(--hdr));
  text-align: center;
  z-index: 201;                  /* Por encima de overlays (200) */
  display: none;                 /* JS los muestra cuando debe */
}
.ad-left {
  left: 0;
}
.ad-right {
  right: 0;
}

/* Banner inferior fijo (móvil) */
.ad-mobile-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background-color: transparent;
  z-index: 201;
  padding: 5px 0;
  display: none;
}

/* Comportamiento en móvil */
@media (max-width: 768px) {
  .ad-sidebar {
    display: none !important;     /* Los laterales no se ven en móvil */
    pointer-events: none;
    visibility: hidden;
  }
  .ad-mobile-bottom {
    display: block;               /* Solo se ve el banner inferior */
  }
  body {
    margin-bottom: 70px;          /* Espacio para el banner */
  }
}

/* ========== ACCESIBILIDAD ========== */
.skip-link { position: absolute; top: -40px; left: 6px; background: #7c3aed; color: #fff; padding: 8px 16px; border-radius: 1px; z-index: 500; font-weight: 700; transition: top 0.2s; }
.skip-link:focus { top: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
#top10ResultTitle { color: #ffffff; text-shadow: none; }
#gameAnnouncer { position: fixed; bottom: 0; left: 0; width: 100%; height: 0; overflow: hidden; }