.flagmatch-root{
  width:100%;
  height:100%;
  background:#1c1c1c;
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display:flex;
  flex-direction:column;
  border-radius:8px;
  overflow:hidden;
}
.flagmatch-main{
  flex:1;
  display:flex;
  min-height:0;
}
.flagmatch-panel{
  width:260px;
  border-right:1px solid #444;
  background:#1c1c1c;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.flagmatch-panel.right{
  border-right:none;
  border-left:1px solid #444;
  padding:18px;
}
.flagmatch-panel .section{
  padding:16px;
  border-bottom:1px solid #444;
}
.flagmatch-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:8px;
  background:#313131;
  color:#fff;
  border:0;
  cursor:pointer;
  font-weight:600;

  font-size:18px;
}
.flagmatch-btn:hover{ opacity:.9; }
.flagmatch-btn:disabled{ opacity:.5; cursor:not-allowed; }

.flagmatch-continent-btn{
  width:100%;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 10px;
  border-radius:8px;
  border:0;
  cursor:pointer;
  background:#313131;
  color:#fff;
  font-weight:700;
  font-size:18px;
  
}
.flagmatch-continent-btn:hover{ background:#3a3a3a; }
.flagmatch-continent-btn.active{ background:#4a4a4a; }
.flagmatch-continent-btn.locked{ opacity:.5; cursor:not-allowed; }
.flagmatch-list{
  padding:14px;
  overflow:auto;
  flex:1;
}
.flagmatch-country{
  padding:8px 10px;
  border-radius:8px;
  background:#313131;
  margin-bottom:8px;
  font-size:13px;
  cursor:grab;
  user-select:none;
}
.flagmatch-country:hover{ background:#3a3a3a; }
.flagmatch-country.locked{ opacity:.5; cursor:not-allowed; }
.flagmatch-grid{
  flex:1;
  padding:18px;
  overflow:auto;
  background:#1c1c1c;
}
.flagmatch-grid-inner{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 1100px){
  .flagmatch-grid-inner{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .flagmatch-main{ flex-direction:column; }
  .flagmatch-panel{ width:100%; border-right:none; border-bottom:1px solid #444; }
  .flagmatch-panel.right{ border-left:none; border-top:1px solid #444; }
  .flagmatch-grid-inner{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.flagmatch-flag{
  aspect-ratio:3/2;
  border-radius:8px;
  background:#313131;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:64px;
  border:2px solid transparent;
  transition: transform .15s ease, border-color .15s ease, opacity .15s ease, filter .15s ease;
}
.flagmatch-flag:hover{ border-color:#666; }
.flagmatch-flag.locked{ opacity:.3; filter:grayscale(1); }

.flagmatch-flag.highlight{ 
    border-color:#4ade80; 
    /*transform:scale(1.08) rotate(6deg);*/
    transform:scale(1.08);
    box-shadow:0 0 18px rgba(74,222,128,.35); 
    
}

.flagmatch-flag.wrong{ background:#000; border-color:#000; }
.flagmatch-flag.matched{ opacity:0; transform:scale(0); pointer-events:none; }

.flagmatch-timer{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:44px;
  margin-bottom:14px;
  text-align:center;
}
.flagmatch-muted{ color:#bdbdbd; font-size:13px; }
.flagmatch-title{ font-size:18px; font-weight:800; margin-bottom:10px; color:#ffffff; }
.flagmatch-subtitle{ font-size:13px; color:#bdbdbd; margin-bottom:10px; }

.flagmatch-leaderboard{
  margin-top:10px;
  overflow:auto;
  flex:1;
}
.flagmatch-entry{
  background:#313131;
  border-radius:10px;
  padding:10px;
  margin-bottom:10px;
  font-size:13px;
}
.flagmatch-entry .row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:800;
}
.flagmatch-entry .name{ color:#bdbdbd; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:4px; }

.flagmatch-mistakes{
  background:#313131;
  border-radius:8px;
  padding:12px;
  margin-top:14px;
}
.flagmatch-mistakes .label{ color:#bdbdbd; font-size:12px; margin-bottom:6px; }
.flagmatch-mistakes .value{ font-size:34px; font-weight:900; }
.flagmatch-mistakes .value.low{ color:#f87171; }

.flagmatch-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999999;
}
.flagmatch-card{
  background:#313131;
  border-radius:8px;
  padding:32px;
  width:min(520px, 92vw);
  text-align:center;
  animation: flagmatch-bounce-in .5s ease-out;
}
@keyframes flagmatch-bounce-in{
  0%{ transform:scale(.3); opacity:0; }
  50%{ transform:scale(1.05); }
  70%{ transform:scale(.92); }
  100%{ transform:scale(1); opacity:1; }
}
.flagmatch-card .emoji{ font-size:56px; margin-bottom:12px; }
.flagmatch-card h2{ font-size:34px; margin:0 0 8px; }
.flagmatch-card p{ font-size:18px; margin:0 0 18px; }
.flagmatch-input{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:0;
  margin:10px 0 12px;
  font-size:16px;
}
.flagmatch-actions{
  display:flex;
  gap:10px;
}
.flagmatch-actions .flagmatch-btn{ flex:1; 
  font-size:18px;
}
.flagmatch-badge{
  font-size:12px;
  color:#4ade80;
  font-weight:900;
  margin-left:10px;
}


/* --- Requested UI improvements (v1.1.0) --- */
.flagmatch-country{ color:#ffffff; }
.flagmatch-list{
  overflow-y:auto;
  min-height:0;
}

.flagmatch-flag{
  /* keep cell styling, but let emoji control size */
}
.flagmatch-emoji{
  display:inline-block;
  line-height:1;
  /* Big and responsive; visually ~70% of the cell thanks to padding + scale */
  font-size: clamp(44px, 6.5vw, 96px);
  transform: scale(1.30);
  transform-origin: center;
}

/* Correct-match bounce */
@keyframes flagmatch-bounce {
  0%   { transform: scale(1.30); }
  25%  { transform: scale(1.63); }
  75%  { transform: scale(1.46); }
  100% { transform: scale(1.30); }
}


.flagmatch-flag.bounce .flagmatch-emoji{
  animation: flagmatch-bounce 770ms ease-out;
}

/* Locked continent preview (greyed out) */
.flagmatch-flag.locked{
  opacity: .35;
  filter: grayscale(100%);
}

/* Desaturated padlocks on continent buttons */
.flagmatch-lock-icon{
  filter: grayscale(100%) ;
  opacity: .75;
}
.flagmatch-continent-btn span {
  filter: grayscale(100%) ;
  opacity: .75;
}

/* Continents toggle title size */
.flagmatch-continents-toggle{ font-size:18px;  }

/* Restore scrollbar for country list inside flex layouts */
.flagmatch-left,
.flagmatch-panel-left,
.flagmatch-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;   /* critical: allows children to shrink + scroll */
}

/* Make the list occupy remaining height so overflow can happen */
.flagmatch-list{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Make the section that holds the country list fill the panel */
.flagmatch-panel .section:last-child{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Now the list can actually scroll within that section */
.flagmatch-panel .section:last-child .flagmatch-list{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.flagmatch-country.selected{
  outline: 2px solid #4ade80;
  background:#3a3a3a;
}




/* === Mobile layout fixes === */
@media (max-width: 760px){

  /* Country list: 2 columns */
  .flagmatch-list{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .flagmatch-list > .flagmatch-title{
    flex: 0 0 100%;
    width: 100%;
    order: -1;
    margin-bottom: 8px;
  }

  .flagmatch-country{
    width: calc(50% - 4px);
    padding: 10px 8px;
    font-size: 12px;
    text-align: center;
  }

  .flagmatch-country.selected{
    background: #4ade80;
    color: #000;
    font-weight: 700;
  }

  /* Panels tighter */
  .flagmatch-panel,
  .flagmatch-panel.right,
  .flagmatch-panel .section{
    padding: 10px;
  }

  /* Sticky action panel */
  .flagmatch-panel.right{
    position: sticky;
    bottom: 0;
    background: #1c1c1c;
    z-index: 5;
  }

  /* Protect flags from being covered */
  .flagmatch-grid{
    padding-bottom: 180px;
  }
  
   /* Limit Continents expanded height and make it scroll */
  .flagmatch-panel .section{
    max-height: 45vh;
    overflow: auto;
  }

  /* Keep your sticky panel if you want */
  .flagmatch-panel.right{
    position: sticky;
    bottom: 0;
    background: #1c1c1c;
    z-index: 5;
  }

  .flagmatch-grid{
    padding-bottom: 180px;
  }
  
  .flagmatch-panel{
    padding-top: 8px;   /* creates space above the section */
  }

  .flagmatch-panel .section:first-child{
    min-height: 64px;   /* prevents collapse clipping */
    
  }
  
  
}

/* Smaller phones: fewer flag columns */
@media (max-width: 480px){
  .flagmatch-grid-inner{
    grid-template-columns: 33.333% 33.333% 33.333%;
  }
  
 
}