.cmp-root{position:relative; width:100%; height:100%; display:flex; flex-direction:column; gap:8px;}
.cmp-top{display:flex; justify-content:center; align-items:flex-start; padding:8px 16px; color:white; font-family:Lexend, Poppins, sans-serif; gap:24px; flex-wrap:wrap; flex: 0 0 auto;}
.cmp-round{font-weight:700; font-size:24px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 16px; border-radius:12px; background:rgba(0,0,0,.35)}
.cmp-round-label{font-size:12px; opacity:0.7; font-weight:500; text-transform:uppercase; letter-spacing:0.5px}
.cmp-type{font-size:20px; opacity:0.9; text-align:center; font-weight:600; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 16px; border-radius:12px; background:rgba(0,0,0,.35)}
.cmp-type-label{font-size:12px; opacity:0.7; font-weight:500; text-transform:uppercase; letter-spacing:0.5px}
.cmp-score{background:rgba(0,0,0,.35); padding:8px 16px; border-radius:12px; font-size:22px; display:flex; flex-direction:column; align-items:center; gap:4px}
.cmp-score-label{font-size:12px; opacity:0.7; font-weight:500; text-transform:uppercase; letter-spacing:0.5px}
.cmp-arena{position:relative; flex: 1 1 auto; display:grid; grid-template-columns:40% auto 40%; align-items:center; justify-items:center; overflow:hidden; min-height:0;}
.cmp-mid{z-index:3; pointer-events:none; display:flex; justify-content:center; align-items:center}
.cmp-question{color:#fff; font-weight:800; font-size:clamp(18px,5vw,36px); background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.1); padding:12px 20px; border-radius:16px; opacity:0; text-align:center; box-shadow:0 4px 16px rgba(0,0,0,0.4)}
.cmp-result{color:#fff; text-align:center; font-weight:700; padding:8px;}
.cmp-result.hidden{display:none}
.cmp-flag{position:relative; width:100%; height:auto; min-height:300px; max-height:100%; display:flex; justify-content:center; align-items:center; border:none; background:transparent; padding:0; transform:translateX(0); z-index:1; overflow:hidden; border-radius:0}
.cmp-flag.left{position:relative}
.cmp-flag.right{position:relative}
.cmp-flag img{display:block; width:100%; height:auto; max-height:100%; object-fit:contain; pointer-events:none; border-radius:0; transform:scale(1.3)}
.cmp-flag.left{z-index:1}
.cmp-flag.right{z-index:1}
.cmp-flag .cmp-label{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.1); color:#fff; padding:12px 18px; border-radius:12px; text-align:center; box-shadow:0 4px 16px rgba(0,0,0,0.4);}
.cmp-flag .name{font-weight:900; font-size:clamp(16px,3.8vw,26px); letter-spacing:.2px}
.cmp-flag .value{font-weight:900; font-size:clamp(12px,3vw,18px)}
.cmp-flag.correct img{outline:none; box-shadow:none}
.cmp-flag.wrong img{outline:none; box-shadow:none; filter:grayscale(.5)}
.cmp-flag.final-glow{box-shadow:none}

/* Ad Container */
.cmp-ad-container{background:#1a1a1a; border-top:1px solid #333; padding:4px; display:flex; justify-content:center; align-items:center; min-height:50px; flex: 0 0 auto;}
.cmp-ad{background:#2a2a2a; border:1px solid #444; border-radius:8px; padding:8px 12px; text-align:center; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.cmp-ad-content{display:flex; flex-direction:column; align-items:center; gap:4px}
.cmp-ad-text{color:#888; font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:0.5px}
.cmp-ad-placeholder{color:#666; font-size:14px; font-weight:600; background:#333; padding:8px 16px; border-radius:4px; min-width:120px}

/* Game Over Screen */
.cmp-game-over{position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.9); display:flex; justify-content:center; align-items:center; z-index:100}
.cmp-game-over.hidden{display:none}
.cmp-game-over-content{background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:32px; text-align:center; max-width:400px; width:90%; box-shadow:0 4px 16px rgba(0,0,0,0.4)}
.cmp-game-over-title{color:#ff4444; font-size:28px; font-weight:800; margin:0 0 16px 0; text-shadow:0 2px 4px rgba(0,0,0,0.5)}
.cmp-game-over-message{color:#fff; font-size:18px; margin:0 0 24px 0; font-weight:600}
.cmp-game-over-stats{background:rgba(0,0,0,0.5); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px; margin:0 0 24px 0; box-shadow:0 4px 16px rgba(0,0,0,0.4)}
.cmp-final-score{color:#4CAF50; font-size:20px; font-weight:700; margin:0 0 8px 0}
.cmp-rounds-reached{color:#2196F3; font-size:18px; font-weight:600; margin:0}
.cmp-game-over-buttons{display:flex; gap:16px; justify-content:center}
.cmp-play-again-btn, .cmp-exit-btn{background:rgba(76,175,80,0.8); backdrop-filter:blur(10px); color:#fff; border:1px solid rgba(255,255,255,0.2); padding:12px 24px; border-radius:12px; font-size:16px; font-weight:600; cursor:pointer; transition:all 0.2s ease; min-width:120px; box-shadow:0 4px 16px rgba(0,0,0,0.2)}
.cmp-exit-btn{background:rgba(244,67,54,0.8)}
.cmp-play-again-btn:hover{background:#45a049; transform:translateY(-2px)}
.cmp-exit-btn:hover{background:#da190b; transform:translateY(-2px)}

/* Animations */
@keyframes enterLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes enterRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes enterTop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes enterBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideOutLeft{to{transform:translateX(-100%)}}
@keyframes slideOutRight{to{transform:translateX(100%)}}
@keyframes slideOutTop{to{transform:translateY(-100%)}}
@keyframes slideOutBottom{to{transform:translateY(100%)}}

.cmp-flag.enter-left{animation:enterLeft .3s ease-out}
.cmp-flag.enter-right{animation:enterRight .3s ease-out}
.cmp-flag.out.left{animation:slideOutLeft .3s ease-in forwards}
.cmp-flag.out.right{animation:slideOutRight .3s ease-in forwards}

.cmp-question.fade-in{animation:fadeIn .3s ease-out forwards}
.cmp-question.fade-out{opacity:0}

/* Responsive - Mobile layout (768px breakpoint for consistency) */
@media (max-width:768px){
  /* Mobile horizontal animations (keep horizontal slides) */
  .cmp-flag.enter-left{animation:enterLeft .3s ease-out}
  .cmp-flag.enter-right{animation:enterRight .3s ease-out}
  .cmp-flag.out.left{animation:slideOutLeft .3s ease-in forwards}
  .cmp-flag.out.right{animation:slideOutRight .3s ease-in forwards}
  
  /* Force arena to center everything with equal distribution */
  .cmp-arena{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    position:relative !important;
    width:100% !important;
    flex: 1 1 0 !important;
    min-height:0 !important;
    max-height:100% !important;
    padding:12px 0 !important;
    margin:0 !important;
    text-align:center !important;
    gap:clamp(8px, 2vh, 16px) !important;
    overflow:hidden !important;
  }
  
  /* Force flags to be centered with correct aspect ratio */
  .cmp-flag{
    display:block !important;
    width:clamp(180px, 60vw, 280px) !important;
    aspect-ratio:3/2 !important;
    margin:0 auto !important;
    position:relative !important;
    text-align:center !important;
    left:0 !important;
    right:0 !important;
    transform:none !important;
    max-width:80vw !important;
    flex: 0 0 auto !important;
    max-height:clamp(120px, 15vh, 200px) !important;
  }
  
  /* Override JavaScript positioning */
  .cmp-flag.left{
    left:0 !important;
    right:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  
  .cmp-flag.right{
    left:0 !important;
    right:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  
  /* Force override of any JavaScript positioning */
  .cmp-flag[style*="right"] {
    left:0 !important;
    right:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  
  .cmp-flag[style*="left"] {
    left:0 !important;
    right:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  
  
  .cmp-mid{
    display:block !important;
    width:clamp(220px, 70vw, 320px) !important;
    margin:0 auto !important;
    text-align:center !important;
    position:relative !important;
    max-width:80vw !important;
    flex: 0 0 auto !important;
    max-height:clamp(60px, 8vh, 100px) !important;
  }
  
  .cmp-flag .cmp-label{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:10;
  }
  
  .cmp-flag img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    margin:0 auto !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
    border:none !important;
    border-radius:0 !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
    outline:none !important;
    aspect-ratio:unset !important;
    image-rendering:-webkit-optimize-contrast !important;
    image-rendering:crisp-edges !important;
    cursor:pointer !important;
  }
  .cmp-question{font-size:clamp(18px,6vw,28px)}
  .cmp-top{gap:16px; padding:6px 12px; flex: 0 0 auto;}
  .cmp-round{font-size:20px; padding:6px 12px}
  .cmp-round-value{font-size:20px}
  .cmp-type{font-size:16px; padding:6px 12px}
  .cmp-type-value{font-size:16px}
  .cmp-score{font-size:18px; padding:6px 12px}
  .cmp-score-value{font-size:18px}
  .cmp-round-label, .cmp-type-label, .cmp-score-label{font-size:10px}
  .cmp-game-over-content{padding:24px; max-width:350px}
  .cmp-game-over-title{font-size:24px}
  .cmp-game-over-message{font-size:16px}
  .cmp-game-over-buttons{flex-direction:column; gap:12px}
  .cmp-play-again-btn, .cmp-exit-btn{min-width:100%; padding:14px 20px}
  .cmp-ad-container{padding:4px; min-height:45px; flex: 0 0 auto;}
  .cmp-ad{padding:6px 10px; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
  .cmp-ad-text{font-size:10px}
  .cmp-ad-placeholder{font-size:12px; padding:6px 12px; min-width:100px}
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .cmp-flag{
    width:clamp(160px, 65vw, 220px) !important;
    aspect-ratio:3/2 !important;
    margin:0 auto !important;
    max-height:clamp(100px, 12vh, 150px) !important;
  }
  .cmp-mid{
    width:clamp(180px, 75vw, 260px) !important;
    margin:0 auto !important;
    max-height:clamp(50px, 6vh, 80px) !important;
  }
}

/* Small mobile devices */
@media (min-width: 481px) and (max-width: 600px) {
  .cmp-flag{
    width:clamp(180px, 65vw, 280px) !important;
    aspect-ratio:3/2 !important;
    margin:0 auto !important;
    max-height:clamp(110px, 14vh, 180px) !important;
  }
  .cmp-mid{
    width:clamp(200px, 70vw, 300px) !important;
    margin:0 auto !important;
    max-height:clamp(55px, 7vh, 90px) !important;
  }
}

/* Large mobile devices and iPad Mini */
@media (min-width: 601px) and (max-width: 768px) {
  .cmp-flag{
    width:clamp(200px, 65vw, 320px) !important;
    aspect-ratio:3/2 !important;
    margin:0 auto !important;
    max-height:clamp(130px, 16vh, 220px) !important;
  }
  .cmp-mid{
    width:clamp(220px, 70vw, 350px) !important;
    margin:0 auto !important;
    max-height:clamp(60px, 8vh, 100px) !important;
  }
}

/* iPad Air and iPad Pro - use desktop styles (768px breakpoint) */
@media (min-width: 769px) {
  .cmp-flag{
    width:clamp(220px, 60vw, 400px) !important;
    aspect-ratio:3/2 !important;
    margin:0 auto !important;
    max-height:clamp(140px, 18vh, 250px) !important;
  }
  .cmp-mid{
    width:clamp(250px, 65vw, 450px) !important;
    margin:0 auto !important;
    max-height:clamp(70px, 9vh, 120px) !important;
  }
}