/* ClickWar file version: 1.1.5 */
/* ClickWar file version: 1.0.16 */
:root{
  --bg:#0f0f10;
  --panel:#222;
  --panel2:#262626;
  --input:#3a3a3a;
  --accent:#7c1d23;
  --text:#f2f2f2;
  --muted:#b9b9b9;
  --border:#343434;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 Inter,system-ui,sans-serif;
}

a{color:inherit;text-decoration:none}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}

.site-header{
  border-bottom:1px solid var(--border);
  background:#151516;
  position:sticky;
  top:0;
  z-index:40;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:68px;
  gap:16px;
  position:relative;
}

.nav nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-text {
  font-weight: 700;
  letter-spacing: 2px;
  position:relative;
  top:-5px;
}
.brand-logo {
  width: 40px;
  height: 40px;
}
.brand,
.eyebrow,
h1,
h2,
h3{
  font-family:"Press Start 2P",monospace;
}

h3 {
    color: #32a86a;
}

.brand{
  font-size:18px;
  min-width:0;
}

.main-content {
    padding: 24px 16px 48px;
    max-width: 1024px;
    width:100%;
    margin: 0 auto;
    flex: 1 0 auto;
}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:18px;
  margin:10px 0;
}

.dark-panel{background:var(--panel2)}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
}

.grid-2 > .card{min-width:0}


.grid-2.admin-form-grid {
    margin-top: 9px !important;
}
.hero{
  display:grid;
  grid-template-columns:1.4fr .9fr;
  gap:16px;
  align-items:start;
}

.hero-text{
  max-width:60ch;
  color:var(--muted);
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 16px;
  border-radius:6px;
  background:var(--accent);
  color:#fff;
  border:1px solid transparent;
  font-weight:700;
  cursor:pointer;
}

.button-ghost{
  background:transparent;
  border-color:var(--accent);
}

.button-ghost:hover {
    background: var(--accent);
}

.button-small{
  min-height:36px;
  padding:8px 12px;
  font-size:14px;
  border-radius:6px;
}

.form-card{
  max-width:760px;
  margin:0 auto;
}

.stack{
  display:grid;
  gap:14px;
}

label{display:grid;gap:8px}

input,
select,
button,
textarea{font:inherit}

input,
select,
textarea{
  width:100%;
  background:var(--input);
  border:1px solid #4a4a4a;
  color:var(--text);
  border-radius:6px;
  padding:12px 14px;
}

input[type="datetime-local"] {
    width: 90%;
}
.recommend-box{
  display:grid;
  gap:8px;
  padding:12px 14px;
  background:#1a1a1b;
  border:1px solid var(--border);
  border-radius:6px;
}

.flag-with-text{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.flag-with-text > span,
.flag-with-text > strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.country-picker{
  position:relative;
}

.country-picker__trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid #4a4a4a;
  border-radius:6px;
  background:var(--input);
  color:var(--text);
  cursor:pointer;
  text-align:left;
}

.country-picker__trigger:hover,
.country-picker.is-open .country-picker__trigger{
  border-color:var(--accent);
}

.country-picker__trigger .flag-with-text{
  min-width:0;
  flex:1 1 auto;
}

.country-picker__chevron{
  flex:0 0 auto;
  font-size:14px;
}

.country-picker__menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  z-index:30;
  padding:12px;
  background:#1a1a1b;
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 18px 40px rgba(0,0,0,.36);
}

.country-picker__search{
  margin-bottom:10px;
}

.country-picker__list{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  max-height:320px;
  overflow-y:auto;
  padding-right:2px;
}

.country-picker__option{
  width:100%;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:6px;
  background:#262628;
  color:var(--text);
  cursor:pointer;
  text-align:left;
}

.country-picker__option:hover,
.country-picker__option:focus-visible{
  border-color:var(--accent);
  background:#2c2123;
  outline:none;
}

.country-picker__option.is-selected{
  border-color:#ffc766;
  background:#37281d;
}

.country-picker__option .flag-with-text{
  width:100%;
}

.country-picker__empty{
  padding:12px 4px 4px;
  color:var(--muted);
}

.alert{
  padding:12px 14px;
  border-radius:6px;
  margin:0 0 16px;
}

.alert.success{
  background:#19331f;
  border:1px solid #285435;
}

.alert.error{
  background:#3d1719;
  border:1px solid #6f2529;
}

.ranking{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.ranking li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  background:#1a1a1b;
  border-radius:6px;
  min-width:0;
}

.ranking li span{
  min-width:0;
  overflow-wrap:anywhere;
}

.site-footer {
    position: relative;
    margin-top: auto;
    padding: 0;
    background: rgba(15, 15, 16, .96);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(8px);
}

.muted{color:var(--muted)}

table{
  width:100%;
  border-collapse:collapse;
}

th,
td{
  padding:10px;
  border-bottom:1px solid var(--border);
  text-align:left;
}

.center{text-align:center}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

.footer-note{
  font-size:14px;
  color:var(--muted);
}

/* spacing helpers */
.grid-2,
.grid-2 + section.card,
.grid-2 + .grid-2{
  margin-top:18px;
}

@media (max-width:900px){
.card + .card,
section.card + section.card,
section.card + .grid-2,
.grid-2 + section.card,
.grid-2 + .grid-2{
  margin-top:18px;
}
}
/* game page */
.game-grid{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(320px,2fr);
  gap:16px;
}

.stat-panel,
.play-panel{
  min-width:0;
}

.stats-list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}

.stats-list li,
.profile-stats li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 12px;
  background:#1a1a1b;
  border-radius:6px;
}

.counter-blocks{
  /*display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:16px 0;*/
}

.counter-box{
  /*background:#1a1a1b;
  border:1px solid var(--border);
  border-radius:6px;
  padding:12px;
  display:grid;
  gap:6px;*/
}

.counter-box span{
  /*color:var(--muted);
  font-size:14px;*/
}

.counter-box strong{
  /*font-size:28px;
  line-height:1;*/
}

#readyClicks, #remainderClicks {
    display: none;
}

.counter-blocks{
  margin:40px 0 18px;
  text-align:center;
}

.counter-blocks strong{
  display:inline-block;
  font-family:"Press Start 2P", monospace;
  font-size:clamp(56px, 5vw, 56px);
  line-height:1.1;
  color:#fff;
  letter-spacing:1px;
}

.big-red-button,
.big-button{
  width:min(420px,100%);
  min-width:260px;
  aspect-ratio:1/1;
  border-radius:999px;
  background:radial-gradient(circle at 35% 30%, #d41919 0%, #b11212 35%, #8e0f0f 70%, #6f0c0c 100%);
  border:10px solid #6f0c0c;
  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    inset 0 10px 22px rgba(255,255,255,.12),
    inset 0 -12px 24px rgba(0,0,0,.20);
  display:flex !important;
  align-items:center;
  justify-content:center;
  font-family:"Press Start 2P",monospace;
  font-size:clamp(22px,4.5vw,38px);
  color:#fff;
  margin:0 auto 20px;
  user-select:none;
  cursor:pointer;
  transition:transform .04s ease,filter .12s ease,box-shadow .16s ease;
  -webkit-tap-highlight-color:transparent;
}

.big-red-button::before{
  content:"CLICK";
  display:block;
  text-align:center;
  line-height:1.15;
  text-shadow:0 2px 0 rgba(0,0,0,.18);
}

.big-red-button:hover{filter:brightness(1.05)}

.big-red-button:active{
  transform:translateY(3px) scale(.992);
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 8px 18px rgba(255,255,255,.08),
    inset 0 -8px 20px rgba(0,0,0,.18);
}

.big-red-button.pulse-ready{
  animation:clickwarPulse 1.2s ease-in-out infinite;
}

@keyframes clickwarPulse{
  0%,100%{
    box-shadow:
      0 18px 40px rgba(0,0,0,.35),
      inset 0 10px 22px rgba(255,255,255,.12),
      inset 0 -12px 24px rgba(0,0,0,.20),
      0 0 0 rgba(168,16,16,0);
  }
  50%{
    box-shadow:
      0 18px 40px rgba(0,0,0,.35),
      inset 0 10px 22px rgba(255,255,255,.12),
      inset 0 -12px 24px rgba(0,0,0,.20),
      0 0 26px rgba(200,26,26,.35);
  }
}

#submitBatchButton,
.submit-button,
button[type="submit"]{
  transition:background-color .18s ease,box-shadow .18s ease,opacity .18s ease,transform .04s ease;
}

#submitBatchButton.is-idle{
  background:#4b4b4d !important;
  color:#d9d9da !important;
  box-shadow:none !important;
  opacity:.82;
}

#submitBatchButton.is-ready{
  background:#a81010 !important;
  color:#fff !important;
  box-shadow:0 0 24px rgba(168,16,16,.28);
  animation:submitGlow 1.15s ease-in-out infinite;
  opacity:1;
  cursor:pointer;
}

#submitBatchButton:disabled{cursor:not-allowed}

@keyframes submitGlow{
  0%,100%{box-shadow:0 0 0 rgba(168,16,16,0)}
  50%{box-shadow:0 0 24px rgba(168,16,16,.34)}
}

#submitResponse{min-height:24px}

#submitResponse.is-text {
    min-height: 40px;
    line-height: 40px;
    text-align: center;
    background: #ffc76666;
    margin: 10px;
    border-radius: 5px;
    color: #222;
    font-size: 14px;
}

/* leaderboard / tabs */
.leaderboard-filters,
.filter-tabs,
.period-tabs,
.period-filter,
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  align-items:center;
}

.leaderboard-filters{
  margin-top:14px;
  margin-bottom:18px;
}

.leaderboard-filters a,
.filter-tabs a,
.period-tabs a,
.period-filter a,
.tabs a,
.tabs .tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:10px 14px;
  border-radius:6px;
  background:#171719;
  border:1px solid var(--border);
  white-space:nowrap;
  text-decoration:none;
}

.tabs .tab.active,
.leaderboard-filters a.active,
.filter-tabs a.active,
.period-tabs a.active,
.period-filter a.active{
  background:#7c1d23;
  border-color:#7c1d23;
  color:#fff;
}

/* contact */
.contact-list{
  display:grid;
  gap:14px;
  margin-top:18px;
}

.contact-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  background:#171719;
  border:1px solid var(--border);
  border-radius:6px;
}

.contact-item:hover{
  border-color:#7c1d23;
}

.contact-icon{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#7c1d23;
  color:#fff;
  font-size:20px;
  flex:0 0 44px;
  border-radius:6px;
}

.contact-copy{
  display:grid;
  gap:4px;
  min-width:0;
}

.contact-copy strong{
  font-family:"Press Start 2P",monospace;
  font-size:12px;
}

.contact-copy span{
  overflow-wrap:anywhere;
}

/* navigation */
.site-nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  min-width:0;
}

.site-nav a{
  min-width:0;
}

.nav-toggle{
  display:none;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid var(--border);
  background:#171719;
  color:#fff;
  cursor:pointer;
  flex:0 0 46px;
  border-radius:6px;
}

.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  margin:5px auto;
  transition:transform .18s ease,opacity .18s ease;
}

.nav-toggle.is-active span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2){
  opacity:0;
}

.nav-toggle.is-active span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

body.menu-open{overflow:hidden}

@media (max-width:900px){
  .hero,
  .grid-3,
  .stats-grid,
  .grid-2,
  .game-grid{
    grid-template-columns:1fr;
  }

  .counter-blocks{
    /*grid-template-columns:1fr;*/
  }

  .nav{
    align-items:center;
    min-height:68px;
    padding:10px 0;
  }

  .brand{font-size:16px}

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:auto;
  }

  .site-nav{
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:30;
    padding:14px 16px 16px;
    background:#151516;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    box-shadow:0 16px 32px rgba(0,0,0,.25);
  }

  .site-nav.is-open{
    display:flex;
  }

  .site-nav a,
  .site-nav .button{
    width:100%;
    justify-content:flex-start;
  }

  .big-red-button,
  .big-button{
    width:min(320px,92vw);
    min-width:220px;
    font-size:clamp(20px,7vw,28px);
    margin-bottom:16px;
  }

  h1{
    font-size:clamp(22px,9vw,48px);
    line-height:1.1;
    overflow-wrap:anywhere;
  }

  h2{
    font-size:clamp(22px,7vw,30px);
    line-height:1.15;
    overflow-wrap:anywhere;
  }

  .leaderboard-filters,
  .filter-tabs,
  .period-tabs,
  .period-filter,
  .tabs{
    gap:8px;
  }

  .leaderboard-filters a,
  .filter-tabs a,
  .period-tabs a,
  .period-filter a,
  .tabs a,
  .tabs .tab{
    min-height:36px;
    padding:8px 12px;
    font-size:14px;
  }

  .ranking li{
    align-items:flex-start;
  }
}

@media (max-width:520px){
  .container{padding:0 12px}

  .main-content{
    padding:18px 12px 40px;
  }

  .card{
    padding:14px;
  }

  .tabs{gap:8px}

  .tabs .tab{
    font-size:13px;
    padding:8px 10px;
  }

  .contact-item{padding:14px}

  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 18px;
  }
  h3 {
    font-size: 14px;
  }
}
}

@media (min-width:901px){
  .site-nav{
    display:flex !important;
    position:static;
    padding:0;
    border:0;
    box-shadow:none;
    background:transparent;
    flex-direction:row;
    align-items:center;
  }

  .nav-toggle{display:none}
}
@media (max-width:900px){
  .play-panel{ order:1; }
  .stat-panel{ order:2; }
}

/* ===== Header / navigation rewrite ===== */

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:#121214;
  border-bottom:1px solid var(--border);
  transition:transform .22s ease;
  will-change:transform;
}

.site-header-inner{
  min-height:76px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  position:relative;
}

.brand{
  display:inline-block;
  font-family:"Press Start 2P",monospace;
  font-size:clamp(18px,2.4vw,24px);
  line-height:1;
  letter-spacing:0;
}

.site-nav{
  min-width:0;
}

.site-nav-list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:0;
}

.site-nav-item{
  margin:0;
  padding:0;
}

.site-nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border:1px solid transparent;
  border-radius:4px;
  background:transparent;
  color:var(--text);
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}

.site-nav-link:hover{
  border-color:var(--border);
  background:#1a1a1c;
}

.site-nav-link.is-active{
  border-color:#4d171b;
  background:#241416;
  color:#fff;
}

.site-nav-link-button{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.site-nav-link-button:hover{
  background:#912129;
  border-color:#912129;
}

.site-nav-item--has-dropdown{
  position:relative;
}

.site-nav-link--has-caret{
  gap:8px;
}

.site-nav-link-caret{
  display:none;
  width:10px;
  height:10px;
  margin-left:2px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(2px) rotate(225deg);
  transform-origin:center;
  flex:0 0 auto;
}

.site-nav-item--has-dropdown::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:14px;
}

.site-nav-dropdown{
  position:absolute;
  top:calc(100% + 2px);
  right:0;
  min-width:190px;
  padding:14px 0;
  border:1px solid var(--border);
  border-radius:14px;
  background:#0d0d16;
  box-shadow:0 16px 38px rgba(0,0,0,.42);
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity .15s ease,visibility .15s ease,transform .15s ease;
  z-index:120;
}

.site-nav-dropdown-link{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 22px;
  color:var(--text);
  white-space:nowrap;
}

.site-nav-dropdown-link:hover,
.site-nav-dropdown-link.is-active{
  background:#181822;
  color:#fff;
}

.site-nav-item--has-dropdown:hover .site-nav-dropdown,
.site-nav-item--has-dropdown:focus-within .site-nav-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.site-nav-item--has-dropdown:hover .site-nav-link-caret,
.site-nav-item--has-dropdown:focus-within .site-nav-link-caret,
.site-nav-item--has-dropdown > .site-nav-link.is-active .site-nav-link-caret{
  transform:translateY(1px) rotate(45deg);
}

.nav-toggle{
  display:none;
  width:54px;
  height:54px;
  margin:0;
  padding:0;
  border:1px solid var(--border);
  border-radius:6px;
  background:#18181a;
  color:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.nav-toggle span{
  position:absolute;
  width:24px;
  height:2px;
  background:#fff;
  transition:transform .18s ease,opacity .18s ease;
}

.nav-toggle{
  position:relative;
}

.nav-toggle span:nth-child(1){ transform:translateY(-8px); }
.nav-toggle span:nth-child(2){ transform:translateY(0); }
.nav-toggle span:nth-child(3){ transform:translateY(8px); }

.nav-toggle.is-active span:nth-child(1){ transform:translateY(0) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform:translateY(0) rotate(-45deg); }

body.menu-open{
  overflow:hidden;
}

@media (max-width:900px){
  .site-header.site-header--hidden{
    transform:translateY(calc(-100% - 1px));
  }

  .brand{
    font-size:clamp(16px,6vw,22px);
    max-width:100%;
  }

  .nav-toggle{
    display:inline-flex;
  }

  .site-nav{
    position:absolute;
    top:calc(100% + 1px);
    left:0;
    right:0;
    background:#121214;
    border-bottom:1px solid var(--border);
    box-shadow:0 18px 36px rgba(0,0,0,.32);
  }

  .site-nav[hidden]{
    display:none !important;
  }

  .site-nav.is-open{
    display:block;
  }

  .site-nav-list{
    display:grid;
    gap:0;
    padding:10px 0;
  }

  .site-nav-item{
    border-top:1px solid rgba(255,255,255,.05);
  }

  .site-nav-item:first-child{
    border-top:0;
  }

  .site-nav-link,
  .site-nav-link-button{
    width:100%;
    min-height:56px;
    padding:0 20px;
    justify-content:flex-start;
    border:0;
    border-radius:0;
    background:transparent;
  }

  .site-nav-link:hover,
  .site-nav-link-button:hover{
    background:#1a1a1d;
    border:0;
  }

  .site-nav-link.is-active{
    background:#201214;
    border:0;
  }

  .site-nav-link-button{
    background:transparent;
    color:#fff;
  }
}

@media (min-width:901px){
  .site-nav{
    display:block !important;
    position:static;
    background:transparent;
    border:0;
    box-shadow:none;
  }

  .site-nav-list{
    justify-content:flex-end;
    flex-wrap:wrap;
  }
}
/* leaderboard one-line rows */

.ranking-inline li{
  align-items:center;
}

.ranking-main-inline{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  overflow:hidden;
}

.ranking-rank{
  flex:0 0 auto;
  font-weight:700;
  white-space:nowrap;
}

.ranking-player-name{
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:700;
}

.flag-inline{
  width:18px;
  height:12px;
  object-fit:cover;
  border-radius:2px;
  flex:0 0 auto;
  display:block;
}

.ranking-country-name{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ranking-code-pixel {
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
    line-height: 1;
    color: var(--muted);
    padding: 4px 0 0 0;
}

.flag-icon {
    width: 30px;
    height: 20px;
    position: relative;
    left: 4px;
    border-radius: 4px;
    margin-right: 5px;
    margin-left: 5px;
    flex: 0 0 auto;
}


.homepage-leaderboard-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:nowrap;
  margin:10px 0 14px;
}

.homepage-leaderboard-filter-group{
  min-width:0;
  display:flex;
  align-items:center;
  gap:2px;
  flex-wrap:nowrap;
}

.homepage-leaderboard-filter-label{
  flex:0 0 auto;
  font-size:10px;
  line-height:1;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.homepage-leaderboard-filter-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:#161618;
  color:#fff;
  text-decoration:none;
  font-size:11px;
  line-height:1;
  white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
  cursor:pointer;
}

.homepage-leaderboard-filter-button:hover,
.homepage-leaderboard-filter-button:focus-visible,
.homepage-leaderboard-filter-button.is-active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.homepage-leaderboard-player-label{
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  overflow:hidden;
}

.homepage-leaderboard-player-label .flag-icon{
  margin-left:0;
}

@media (max-width:640px){
  .homepage-leaderboard-toolbar{
    gap:8px;
  }

  .homepage-leaderboard-filter-group{
    gap:3px;
  }

  .homepage-leaderboard-filter-label{
    font-size:9px;
  }

  .homepage-leaderboard-filter-button{
    min-height:24px;
    padding:0 6px;
    font-size:9px;
  }

  .homepage-leaderboard-player-label{
    gap:5px;
  }
}

.leaderboard-country-list{
  gap:12px;
}

.leaderboard-country-item{
  align-items:center;
}

.leaderboard-country-item--rank-1{
  background:#b5852ad6 !important;
}

.leaderboard-country-item--rank-2{
  background:#9797977a !important;
}

.leaderboard-country-item--rank-3{
  background:#551e11a8 !important;
}

.leaderboard-country-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:0;
  flex:1 1 auto;
}

.leaderboard-country-rank{
  flex:0 0 auto;
  min-width:34px;
  font-weight:700;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.leaderboard-country-label{
  min-width:0;
  display:inline-flex;
  align-items:center;
}

.leaderboard-country-label > span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.leaderboard-cup-icon{
  width:22px;
  height:22px;
  object-fit:contain;
  display:inline-block;
  vertical-align:middle;
}

.leaderboard-cup-fallback{
  font-size:20px;
  line-height:1;
}

.leaderboard-more-button{
  margin-top:14px;
  width:100%;
  text-transform:uppercase;
}

@media (max-width:640px){
  .ranking-main-inline{
    gap:8px;
  }

  .flag-inline{
    width:16px;
    height:11px;
  }

  .ranking-code-pixel{
    font-size:10px;
  }
  .leaderboard-country-rank{
    min-width:30px;
  }

  .leaderboard-cup-icon{
    width:20px;
    height:20px;
  }

}

/* ===== Footer restore fix ===== */

body{
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-footer{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  z-index:20;
  margin-top:auto;
  padding:0;
  background:rgba(15,15,16,.96);
  border-top:1px solid var(--border);
  backdrop-filter:blur(8px);
}

.site-footer .container{
  max-width:1100px;
}

.site-footer-inner{
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.site-footer-left,
.site-footer-right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.site-footer-left{
  color:var(--muted);
  font-size:12px;
}

.site-footer-right{
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
  font-size:12px;
}

.site-footer-link,
.footer-inline-link{
  color:#fff;
  text-decoration:none;
  transition:color .15s ease, opacity .15s ease;
  font-size:12px;
}

.site-footer-link:hover,
.footer-inline-link:hover{
  color:#ffc766;
}

.footer-modal{
  position:fixed;
  inset:0;
  z-index:120;
}

.footer-modal[hidden]{
  display:none !important;
}

.footer-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}

.footer-modal__dialog{
  position:relative;
  z-index:1;
  width:min(92vw,640px);
  margin:8vh auto 0;
  background:#222;
  border:1px solid var(--border);
  border-radius:8px;
  padding:22px 20px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.42);
}

.footer-modal__dialog h2{
  margin:0 0 18px;
  font-size:20px;
  line-height:1.3;
}

.footer-modal__content{
  display:grid;
  gap:12px;
  color:var(--muted);
}

.footer-modal__content p{
  margin:0;
}

.footer-modal__content a {
    color:#ffc766;
}
.footer-modal__content a:hover {
    color:#a81010;
}

.footer-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border:1px solid var(--border);
  border-radius:6px;
  background:#171719;
  color:#fff;
  cursor:pointer;
}

.footer-modal__close:hover{
  border-color:#7c1d23;
  background:#241416;
}

.footer-feedback-form{
  margin-top:4px;
}

.footer-feedback-form textarea{
  min-height:160px;
  resize:vertical;
}

.footer-feedback-meta{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top:-4px;
}

.footer-feedback-counter{
  font-size:13px;
  color:var(--muted);
}

.footer-feedback-success{
  margin-bottom:0;
}

@media (max-width:900px){
  body{
    padding-bottom:0px;
  }

  .site-footer-inner{
    min-height:72px;
    padding:8px 0;
    align-items:center;
    flex-direction:column;
    justify-content:center;
  }

  .site-footer-right{
    width:100%;
    justify-content:center;
  }

  .footer-modal__dialog{
    width:min(94vw,640px);
    margin:6vh auto 0;
    padding:20px 16px 16px;
  }
}

@media (max-width:520px){
  body{
    padding-bottom:0px;
  }

  .site-footer-left{
    font-size:12px;
    line-height:1.4;
    flex-wrap:wrap;
  }

  .site-footer-right{
    gap:12px;
  }
}


/* game country flag */

.game-country-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.game-country-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.country-code-pixel{
  font-family:"Press Start 2P", monospace;
  font-size:11px;
  line-height:1;
  color:var(--muted);
  white-space:nowrap;
}

.flag-inline{
  width:18px;
  height:12px;
  object-fit:cover;
  border-radius:2px;
  flex:0 0 auto;
  display:block;
}

@media (max-width:640px){
  .flag-inline{
    width:16px;
    height:11px;
  }

  .country-code-pixel{
    font-size:10px;
  }
}

/* ===== PROFILE STATS CARDS ===== */

.profile-stats-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

.stat-card{
  position:relative;
  min-height:140px;
  padding:16px;
  background:#1a1a1b;
  border:1px solid var(--border);
  border-radius:6px;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.stat-label{
  position:absolute;
  top:12px;
  left:12px;
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.04em;
}

.stat-value{
  font-family:"Press Start 2P",monospace;
  font-size:clamp(14px,1.8vw,20px);
  line-height:1.4;
  color:#fff;
  text-transform:uppercase;
  word-break:break-word;
}

.stat-value-email{
  font-size:clamp(11px,1.2vw,15px);
  text-transform:none;
  line-height:1.6;
}

.stat-value-country{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  text-transform:none;
}

/* country_flag_img kompatibilitás */
.stat-value-country img{
  width:48px;
  height:auto;
  border-radius:2px;
}

/* mobil */
@media (max-width:900px){
  .profile-stats-grid{
    grid-template-columns:1fr;
  }

  .stat-card{
    min-height:120px;
    padding:14px;
  }

  .stat-label{
    top:10px;
    left:10px;
    font-size:11px;
  }

  .stat-value{
    font-size:clamp(13px,4.5vw,18px);
  }

  .stat-value-email{
    font-size:clamp(10px,3.5vw,14px);
  }

  .stat-value-country img{
    width:24px;
  }
}



.profile-delete-wrap{
  margin-top:20px;
  display:grid;
  gap:12px;
  justify-items:center;
}

.profile-delete-note{
  margin:0;
  max-width:760px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

.profile-delete-button{
  min-width:220px;
  background:#6f2529;
  border-color:#8e2f34;
}

.profile-delete-button:hover{
  background:#8e2f34;
}


.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,15,16,0.82);
  backdrop-filter:blur(8px);
}

.modal-backdrop[hidden]{
  display:none;
}

.modal-card{
  position:relative;
  width:min(100%, 560px);
  background:#222;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
  padding:28px 24px 24px;
}

.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  background:#3a3a3a;
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}

.modal-close:hover{
  background:#4a4a4a;
}

body.modal-open{
  overflow:hidden;
}

.profile-delete-modal{
  max-width:560px;
}

.profile-delete-modal h2{
  margin:0 0 12px;
}

.profile-delete-modal p{
  margin:0 0 12px;
}

.profile-delete-modal-note{
  color:#ffc766;
}

.profile-delete-modal-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-top:20px;
}

@media (max-width: 640px){
  .modal-backdrop{
    padding:16px;
  }

  .modal-card{
    padding:24px 18px 18px;
  }

  .profile-delete-modal-actions{
    flex-direction:column-reverse;
  }

  .profile-delete-modal-actions .button{
    width:100%;
  }
}

/* ===== INFO / WARNING BLOCKS ===== */

.info-block{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:10px;
}

.info-block .muted {
    margin: 0;
    font-size: 12px;
    line-height: 22px;
}

/* közös ikon */
.info-icon{
  flex:0 0 22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
}

/* INFO (i ikon - karika) */
.info-block-info .info-icon{
  border:1px solid var(--muted);
  border-radius:50%;
  color:var(--muted);
}

/* WARNING (sárga háromszög) */
.info-block-warning .info-icon{
  width:0;
  height:0;
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-bottom:20px solid #ffc766;
  position:relative;
}

.info-block-warning .info-icon::after{
  content:"!";
  position:absolute;
  top:5px;
  left:-3px;
  font-size:11px;
  font-weight:700;
  color:#000;
}

.info-block.info-block-warning {
    margin-top: -10px;
}

/* ===== SUBMIT BUTTON CLICK PROGRESS ===== */
#submitBatchButton,
.submit-button,
button[type="submit"]{
  transition:
    background 0.12s linear,
    background-color 0.12s linear,
    box-shadow 0.18s ease,
    opacity 0.18s ease,
    transform 0.04s ease;
}

#submitBatchButton.is-idle{
  color:#ffffff !important;
  opacity:1 !important;
}

#submitBatchButton.is-ready{
  color:#ffffff !important;
  opacity:1 !important;
}

#submitBatchButton:disabled{
  cursor:not-allowed;
  opacity:1 !important;
}


/* ===== CLICKWAR LIVE EFFECTS ===== */
body{
  transition:background 0.18s linear;
}

.play-panel{
  position:relative;
  overflow:hidden;
}

.clickwar-play-stage{
  backdrop-filter:blur(12px);
  background:rgba(34,34,34,0.75);
}

.floating-score{
  position:absolute;
  left:50%;
  top:120px;
  transform:translate(-50%,-50%);
  font-family:"Press Start 2P",monospace;
  font-size:clamp(26px,4vw,42px);
  color:#fff;
  text-shadow:0 3px 0 rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  z-index:2;
}

.floating-score.show{
  animation:floatUp 1.4s ease forwards;
}

@keyframes floatUp{
  0%{
    transform:translate(-50%,-50%) scale(0.8);
    opacity:1;
  }
  30%{
    opacity:1;
  }
  100%{
    transform:translate(-50%,-130%) scale(1.2);
    opacity:0;
  }
}

.auto-submit-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--muted);
  cursor:pointer;
  margin-top:2px;
  user-select:none;
}

.auto-submit-label input{
  appearance:none;
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border:1px solid var(--border);
  border-radius:4px;
  background:#2a2a2a;
  display:inline-grid;
  place-content:center;
  cursor:pointer;
  transition:all .12s ease;
  margin:0;
}

.auto-submit-label input:hover{
  border-color:#555;
  background:#303030;
}

.auto-submit-label input:checked{
  background:#a81010;
  border-color:#a81010;
}

.auto-submit-label input:checked::after{
  content:"";
  width:8px;
  height:8px;
  background:#fff;
  border-radius:2px;
}

.auto-submit-label input:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(168,16,16,.35);
}

.main-content.clickwar-shake{
  animation:shakeAnim 0.25s linear;
  will-change:transform;
}

@keyframes shakeAnim{
  0%{transform:translate(0,0)}
  20%{transform:translate(var(--shakeX,2px), var(--shakeY,2px))}
  40%{transform:translate(calc(var(--shakeX,2px) * -1), calc(var(--shakeY,2px) * -1))}
  60%{transform:translate(calc(var(--shakeX,2px) * 1.2), calc(var(--shakeY,2px) * -1.2))}
  80%{transform:translate(calc(var(--shakeX,2px) * -1.2), calc(var(--shakeY,2px) * 1.2))}
  100%{transform:translate(0,0)}
}

@media (max-width:680px){
  .floating-score{
    top:96px;
  }
}

.video-intro-text {
    padding: 0 20px;
    text-align: left;
    margin: 7px auto 25px;
}
  
.hero-intro-video-wrap{
  margin-top:18px;
  width:300px;
  max-width:100%;
  display:flex;
}

.hero-intro-video {
    display: block;
    width: 250px;
    height: 250px;
    max-width: 100%;
    max-height: none;
    border-radius: 10px;
    background: #000;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

@media (max-width:640px){
  .hero-intro-video-wrap{
    width:100%;
    display: flex;
    flex-direction: column-reverse !important;
  }

  .hero-intro-video{
    width:100%;
    height:100%;
    aspect-ratio:1 / 1;
  }
  
  .video-intro-text {
    font-size:7vw !important;
  }
}



.leaderboard-filter-card h2{
  margin-bottom:0;
}

.leaderboard-card-head{
  display:grid;
  gap:14px;
  margin-bottom:18px;
}

.leaderboard-card-tabs{
  margin-top:0;
}

.leaderboard-card-tabs .tab{
  min-height:36px;
  padding:8px 12px;
}

@media (max-width:640px){
  .leaderboard-card-head{
    gap:12px;
  }

  .leaderboard-card-tabs{
    gap:8px;
  }

  .leaderboard-card-tabs .tab{
    min-height:34px;
    padding:8px 10px;
    font-size:12px;
  }
}

/* leaderboard pagination */
.leaderboard-pagination{
  margin-top:18px;
  display:flex;
  justify-content:center;
}

.leaderboard-pagination-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-wrap:wrap;
}

.leaderboard-pagination-item{
  margin:0;
  padding:0;
}

.leaderboard-pagination-link,
.leaderboard-pagination-current,
.leaderboard-pagination-ellipsis{
  width:32px;
  min-width:32px;
  height:32px;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid var(--border);
  background:#101114;
  color:#fff;
  font-weight:700;
  line-height:1;
}

.leaderboard-pagination-link:hover{
  border-color:#4b4b50;
  background:#17181c;
}

.leaderboard-pagination-current{
  background:var(--accent);
  border-color:var(--accent);
}

.leaderboard-pagination-item.is-disabled .leaderboard-pagination-link{
  opacity:.45;
  pointer-events:none;
}

.leaderboard-pagination-arrow{
  font-size:20px;
  position:relative;
  top:-1px;
}

.leaderboard-pagination-ellipsis{
  background:transparent;
  border-color:transparent;
  color:var(--muted);
}

@media (max-width:640px){
  .leaderboard-pagination-list{
    gap:6px;
  }

  .leaderboard-pagination-link,
  .leaderboard-pagination-current,
  .leaderboard-pagination-ellipsis{
    width:38px;
    min-width:38px;
    height:38px;
    border-radius:9px;
  }
}


.share-panel{
  margin-top:18px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(58,58,58,0.28);
}

.share-panel-head h3{
  margin:6px 0 8px;
  font-size:18px;
}

.share-panel-text{
  margin:0;
}

.share-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}

.share-button{
  width:100%;
  cursor:pointer;
}

.share-preview{
  margin-top:14px;
  padding:12px;
  border-radius:10px;
  background:rgba(15,15,16,0.6);
  border:1px solid rgba(255,255,255,0.06);
}

.share-preview-label{
  display:inline-block;
  margin-bottom:6px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.share-preview-text{
  margin:0;
  color:#f2f2f2;
  word-break:break-word;
}

#shareResponse{
  min-height:24px;
  margin-top:10px;
}

#shareResponse.is-text{
  min-height:40px;
  line-height:40px;
  text-align:center;
  background:#ffc76666;
  border-radius:5px;
  color:#222;
  font-size:14px;
  padding:0 10px;
}

@media (max-width:640px){
  .share-actions{
    grid-template-columns:1fr;
  }
}


/* ===== ADMIN ACTION BUTTONS ===== */

.admin-card-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.icon-button{
  width:36px;
  min-width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  border:1px solid var(--border);
  background:#262626;
  color:#fff;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}

.icon-button:hover{
  background:#303030;
  border-color:#5a5a5a;
  transform:translateY(-1px);
}

.icon-button:focus-visible{
  outline:2px solid #ffc766;
  outline-offset:2px;
}

.icon-button svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.icon-button-danger:hover{
  background:#7c1d23;
  border-color:#7c1d23;
}

.admin-action-modal{
  max-width:560px;
}

.admin-action-modal h2{
  margin:0 0 12px;
}

.admin-action-modal p{
  margin:0 0 12px;
}

.admin-action-modal-note{
  color:#ffc766;
}


/* ===== ADMIN DASHBOARD LAYOUT (1.0.13) ===== */

.admin-dashboard-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,460px);
  gap:18px;
  align-items:start;
}

.admin-dashboard-left,
.admin-dashboard-right{
  display:grid;
  gap:18px;
  align-content:start;
}

.admin-dashboard-left .card,
.admin-dashboard-right .card{
  margin:0;
}

.admin-create-user-card{
  min-width:0;
}

@media (max-width:900px){
  .admin-dashboard-layout{
    grid-template-columns:1fr;
  }
}

/* ===== ADMIN USER MANAGEMENT (1.0.13) ===== */

.admin-search-form{
  margin-bottom:14px;
}

.admin-inline-form{
  align-items:center;
}

.admin-create-user-form .admin-form-grid{
  gap:14px;
}

.admin-checkbox-grid{
  display:grid;
  gap:10px;
  align-content:start;
}

.admin-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:6px;
  background:#1a1a1b;
}

.admin-checkbox input[type="checkbox"]{
  width:auto;
  margin:0;
}

.admin-points-form{
  display:grid;
  gap:8px;
  min-width:180px;
}

.admin-points-form input[type="number"]{
  min-width:0;
}

.admin-points-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

@media (max-width:900px){
  .admin-points-form{
    min-width:140px;
  }
}

@media (max-width:640px){
  .admin-form-grid,
  .admin-points-actions{
    grid-template-columns:1fr;
  }
}


/* ===== ADMIN USERS TABLE WIDE LAYOUT (1.0.14) ===== */

.main-content-wide{
  max-width:min(1680px, calc(100vw - 48px));
}

.admin-users-page{
  margin-left:auto;
  margin-right:auto;
}

.admin-users-table-wrap{
  overflow-x:auto;
}

.admin-users-table{
  width:100%;
  min-width:1380px;
}

.admin-users-table th,
.admin-users-table td{
  vertical-align:middle;
}

.admin-users-table th.is-center,
.admin-users-table td.is-center{
  text-align:center;
}

.admin-users-table th.is-left,
.admin-users-table td.is-left{
  text-align:left;
}

.admin-email-cell{
  word-break:break-word;
}

.admin-country-cell{
  min-width:110px;
}

.admin-country-badge{
  justify-content:center;
  white-space:nowrap;
}

.admin-country-badge .flag-icon{
  width:30px;
  height:20px;
  border-radius:4px;
  object-fit:cover;
  flex:0 0 auto;
}

.admin-actions-cell{
  min-width:220px;
}

.admin-status-form,
.admin-points-form--inline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:nowrap;
}

.admin-status-form select{
  min-width:92px;
}

.admin-points-form--inline{
  min-width:0;
}

.admin-points-form--inline input[type="number"]{
  width:96px;
  min-width:96px;
  margin:0;
}

.admin-points-actions--inline{
  display:flex;
  gap:8px;
  grid-template-columns:none;
}

.admin-points-actions--inline .button{
  min-width:74px;
}

@media (max-width:900px){
  .main-content-wide{
    max-width:calc(100vw - 24px);
  }
}


/* ===== ACHIEVEMENTS / PROFILE REFRESH ===== */
.game-achievements-panel{
  margin-top:16px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(26,26,27,0.96) 0%, rgba(22,22,23,0.96) 100%);
}

.game-achievements-panel h3{
  margin:0 0 14px;
  color:#fff;
  font-size:18px;
}

.game-achievement-track + .game-achievement-track{
  margin-top:14px;
}

.game-achievement-track-head{
  margin-bottom:8px;
  font-family:"Press Start 2P",monospace;
  font-size:12px;
  color:#fff;
}

.game-achievement-card-inner{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  background:#151516;
}

.game-achievement-badge{
  width:64px;
  min-width:64px;
  height:64px;
  display:grid;
  place-items:center;
}

.game-achievement-copy{
  min-width:0;
  flex:1 1 auto;
}

.game-achievement-name{
  font-family:"Press Start 2P",monospace;
  font-size:12px;
  line-height:1.45;
  color:#fff;
  margin-bottom:6px;
}

.game-achievement-subtitle,
.game-achievement-remaining{
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

.game-achievement-remaining{
  margin-top:6px;
}

.game-achievement-progress{
  position:relative;
  height:8px;
  margin-top:8px;
  overflow:hidden;
  border-radius:0;
  background:#5f5f5f;
}

.game-achievement-progress-bar{
  display:block;
  height:100%;
  background:#a81010;
}

#submitResponse.is-text-error,
#submitResponse.is-text-success{
  min-height:40px;
  line-height:1.4;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8px 12px;
}

#submitResponse.is-text-success{
  background:rgba(80, 177, 110, 0.24);
  color:#d9ffe2;
}

#submitResponse.is-text-error{
  background:rgba(255, 199, 102, 0.4);
  color:#221b10;
}

.achievement-popups{
  position:fixed;
  left:50%;
  top:10vh;
  transform:translateX(-50%);
  z-index:1500;
  pointer-events:none;
}

.achievement-popup{
  position:relative;
  width:min(420px, calc(100vw - 32px));
  display:flex;
  gap:14px;
  align-items:center;
  padding:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  background:rgba(18,18,19,0.96);
  box-shadow:0 18px 40px rgba(0,0,0,.42);
  opacity:0;
  transform:translateY(-28px);
}

.achievement-popup.is-visible{
  animation:achievementPopupIn .22s ease forwards;
}

.achievement-popup.is-hiding{
  animation:achievementPopupOut .25s ease forwards;
}

.achievement-popup__badge{
  width:84px;
  min-width:84px;
  display:grid;
  place-items:center;
}

.achievement-popup__copy{
  min-width:0;
}

.achievement-popup__eyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#ffc766;
  margin-bottom:6px;
}

.achievement-popup__title{
  font-family:"Press Start 2P",monospace;
  font-size:13px;
  line-height:1.5;
  color:#fff;
  margin-bottom:8px;
}

.achievement-popup__text{
  font-size:13px;
  color:var(--muted);
}

.achievement-confetti-piece{
  position:absolute;
  top:-10px;
  width:7px;
  height:7px;
  image-rendering:pixelated;
  animation:achievementConfettiFall 1.2s linear forwards;
}

@keyframes achievementPopupIn{
  from{opacity:0;transform:translateY(-28px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes achievementPopupOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-14px) scale(.97)}
}

@keyframes achievementConfettiFall{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:1}
  100%{transform:translate3d(calc((var(--drift, 0.5) - .5) * 60px), 140px, 0) rotate(180deg);opacity:0}
}

.profile-layout-card > h1{
  margin-top:4px;
  margin-bottom:20px;
}

.profile-stats-grid--new{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
}

.profile-stats-grid--new .stat-card{
  min-height:138px;
}

.profile-stats-grid--new .stat-card--wide{
  grid-column:span 3;
}

.profile-achievement-card{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  text-align:left;
}

.profile-achievement-badge{
  width:92px;
  min-width:92px;
  display:grid;
  place-items:center;
}

.profile-achievement-name{
  font-family:"Press Start 2P",monospace;
  font-size:20px;
  line-height:1.4;
  color:#fff;
  text-transform:none;
}

.profile-achievement-desc{
  margin-top:8px;
  color:#d7d7d7;
  font-size:18px;
  line-height:1.5;
  text-transform:none;
}

.stat-value-country--large{
  gap:12px;
  font-size:clamp(16px,1.9vw,22px);
}

.stat-value-country--large img{
  width:42px;
}

.profile-stats-grid--new .stat-label{
  text-transform:none;
}

@media (max-width:980px){
  .profile-stats-grid--new{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .profile-stats-grid--new .stat-card--wide{
    grid-column:span 2;
  }
}

@media (max-width:700px){
  .game-achievement-card-inner{
    align-items:flex-start;
  }

  .game-achievement-badge{
    width:56px;
    min-width:56px;
    height:56px;
  }

  .profile-stats-grid--new{
    grid-template-columns:1fr;
  }

  .profile-stats-grid--new .stat-card--wide{
    grid-column:span 1;
  }

  .profile-achievement-card{
    align-items:flex-start;
    gap:12px;
  }

  .profile-achievement-badge{
    width:76px;
    min-width:76px;
  }

  .profile-achievement-name{
    font-size:16px;
  }

  .profile-achievement-desc{
    font-size:14px;
  }

  .achievement-popups{
    left:50%;
    top:10vh;
    right:auto;
    bottom:auto;
    transform:translateX(-50%);
  }

  .achievement-popup{
    width:100%;
  }
}


/* Changelog page */
.changelog-tabs__panel{display:none;}
.changelog-tabs__panel.is-active{display:block;}
.changelog-tabs__panel[hidden]{display:none !important;}

.changelog-page-card{
  display:grid;
  gap:18px;
}

.changelog-page-header{
  display:grid;
  gap:10px;
}

.changelog-page-header h1{
  margin:0;
}

.changelog-page-header .muted{
  margin:0;
}

.changelog-tabs{
  display:grid;
  gap:18px;
}

.changelog-tabs__nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:6px;
  background:#1a1a1b;
  border:1px solid var(--border);
  border-radius:8px;
}

.changelog-tabs__button{
  appearance:none;
  border:1px solid var(--border);
  background:#181818;
  color:var(--text);
  min-height:42px;
  padding:10px 14px;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
}

.changelog-tabs__button:hover{
  border-color:#7c1d23;
}

.changelog-tabs__button.is-active{
  background:#7c1d23;
  border-color:#7c1d23;
  color:#fff;
}

.changelog-tabs__panel{
  display:block;
}

.changelog-list{
  display:grid;
  gap:14px;
}

.changelog-entry{
  background:#1a1a1b;
  border:1px solid var(--border);
  border-radius:8px;
  padding:16px;
}

.changelog-entry h2,
.changelog-entry h3{
  margin:0;
}

.changelog-entry h2{
  font-size:15px;
  line-height:1.5;
  margin-bottom:12px;
  color:#ffc766;
}

.changelog-entry h3{
  font-size:12px;
  line-height:1.5;
  margin:14px 0 8px;
  color:#fff;
}

.changelog-entry ul{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
  color:var(--muted);
}

.changelog-entry__subitem{
  list-style-type:circle;
  margin-left:12px;
}

@media (max-width:640px){
  .changelog-tabs__nav{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .changelog-tabs__button{
    width:100%;
  }
}


/* ===== MERGED FROM style-badge-fix.css ===== */

/* leaderboard one-line rows */

.ranking-inline li{
  align-items:center;
}

.ranking-main-inline{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  overflow:hidden;
}

.ranking-rank{
  flex:0 0 auto;
  font-weight:700;
  white-space:nowrap;
}


.ranking-player-name{
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:700;
}

.leaderboard-player-badges{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
  white-space:nowrap;
}

.leaderboard-badge-tooltip{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.leaderboard-badge-tooltip .achievement-badge-sprite{
  width:16px;
  height:16px;
  display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
  cursor: pointer;
}

.leaderboard-badge-bubble{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translate(-50%, 6px);
  opacity:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:190px;
  max-width:240px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:#222;
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  z-index:50;
  transition:opacity .16s ease, transform .16s ease;
}

.leaderboard-badge-bubble::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:6px solid #222;
}

.leaderboard-badge-bubble__badge{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.leaderboard-badge-bubble__badge .achievement-badge-sprite,
.leaderboard-badge-bubble__badge .achievement-badge-sprite--large{
  width:42px;
  height:42px;
}

.leaderboard-badge-bubble__copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.leaderboard-badge-bubble__eyebrow{
  font-family:"Press Start 2P", monospace;
  font-size:8px;
  line-height:1.4;
  color:#ffc766;
  text-transform:uppercase;
}

.leaderboard-badge-bubble__title{
  font-size:14px;
  line-height:1.2;
  font-weight:700;
}

.leaderboard-badge-bubble__text{
  font-size:11px;
  line-height:1.35;
  color:rgba(255,255,255,.76);
}

.leaderboard-badge-tooltip:hover .leaderboard-badge-bubble,
.leaderboard-badge-tooltip:focus-within .leaderboard-badge-bubble{
  opacity:1;
  transform:translate(-50%, 0);
}


.ranking-inline li,
.ranking-main-inline-player,
.ranking-main-inline-player .leaderboard-player-badges,
.ranking-main-inline-player .leaderboard-badge-tooltip{
  overflow:visible;
}

.ranking-main-inline-player .ranking-player-name{
  min-width:0;
}

.flag-inline{
  width:18px;
  height:12px;
  object-fit:cover;
  border-radius:2px;
  flex:0 0 auto;
  display:block;
}

.ranking-country-name{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ranking-code-pixel {
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
    line-height: 1;
    color: var(--muted);
    padding: 4px 0 0 0;
}

.flag-icon {
    width: 30px;
    height: 20px;
    position: relative;
    left: 4px;
    border-radius: 4px;
    margin-right: 5px;
    margin-left: 5px;
    flex: 0 0 auto;
}

.leaderboard-country-list{
  gap:12px;
}

.leaderboard-country-item{
  align-items:center;
}

.leaderboard-country-item--rank-1{
  background:#b5852ad6 !important;
}

.leaderboard-country-item--rank-2{
  background:#9797977a !important;
}

.leaderboard-country-item--rank-3{
  background:#551e11a8 !important;
}

.leaderboard-country-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:0;
  flex:1 1 auto;
}

.leaderboard-country-rank{
  flex:0 0 auto;
  min-width:34px;
  font-weight:700;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.leaderboard-country-label{
  min-width:0;
  display:inline-flex;
  align-items:center;
}

.leaderboard-country-label > span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.leaderboard-cup-icon{
  width:22px;
  height:22px;
  object-fit:contain;
  display:inline-block;
  vertical-align:middle;
}

.leaderboard-cup-fallback{
  font-size:20px;
  line-height:1;
}

.leaderboard-more-button{
  margin-top:14px;
  width:100%;
  text-transform:uppercase;
}

@media (max-width:640px){
  .ranking-main-inline{
    gap:8px;
  }

  .flag-inline{
    width:16px;
    height:11px;
  }

  .ranking-code-pixel{
    font-size:10px;
  }
  .leaderboard-country-rank{
    min-width:30px;
  }

  .leaderboard-cup-icon{
    width:20px;
    height:20px;
  }

}

/* ===== ACHIEVEMENTS / PROFILE REFRESH ===== */

.achievement-badge-sprite{
  display:block;
  width:56px;
  height:56px;
  background-repeat:no-repeat;
  background-size:400% 300%;
  image-rendering:pixelated;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
}

.achievement-badge-sprite--large{
  width:84px;
  height:84px;
}

.achievement-badge-sprite--placeholder{
  position:relative;
  border:2px solid rgba(255,255,255,0.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%),
    #1a1a1b;
  box-shadow:inset 0 0 0 2px rgba(15,15,16,0.9);
}

.achievement-badge-sprite--placeholder::before,
.achievement-badge-sprite--placeholder::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  background:#a81010;
  image-rendering:pixelated;
}

.achievement-badge-sprite--placeholder::before{
  width:32%;
  height:8%;
}

.achievement-badge-sprite--placeholder::after{
  width:8%;
  height:32%;
}

.game-achievements-panel{
  margin-top:16px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(26,26,27,0.96) 0%, rgba(22,22,23,0.96) 100%);
}

.game-achievements-panel h3{
  margin:0 0 14px;
  color:#fff;
  font-size:18px;
}

.game-achievement-track + .game-achievement-track{
  margin-top:14px;
}

.game-achievement-track-head{
  margin-bottom:8px;
  font-family:"Press Start 2P",monospace;
  font-size:12px;
  color:#fff;
}

.game-achievement-card-inner{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  background:#151516;
}

.game-achievement-badge{
  width:64px;
  min-width:64px;
  height:64px;
  display:grid;
  place-items:center;
}

.game-achievement-copy{
  min-width:0;
  flex:1 1 auto;
}

.game-achievement-name{
  font-family:"Press Start 2P",monospace;
  font-size:12px;
  line-height:1.45;
  color:#fff;
  margin-bottom:6px;
}

.game-achievement-subtitle,
.game-achievement-remaining{
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

.game-achievement-remaining{
  margin-top:6px;
}

.game-achievement-progress{
  position:relative;
  height:8px;
  margin-top:8px;
  overflow:hidden;
  border-radius:0;
  background:#5f5f5f;
}

.game-achievement-progress-bar{
  display:block;
  height:100%;
  background:#a81010;
}

#submitResponse.is-text-error,
#submitResponse.is-text-success{
  min-height:40px;
  line-height:1.4;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8px 12px;
}

#submitResponse.is-text-success{
  background:rgba(80, 177, 110, 0.24);
  color:#d9ffe2;
}

#submitResponse.is-text-error{
  background:rgba(255, 199, 102, 0.4);
  color:#221b10;
}

.achievement-popups{
  position:fixed;
  left:50%;
  top:10vh;
  transform:translateX(-50%);
  z-index:1500;
  pointer-events:none;
}

.achievement-popup{
  position:relative;
  pointer-events:auto;
  width:min(420px, calc(100vw - 32px));
  display:flex;
  gap:14px;
  align-items:center;
  padding:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  background:rgba(18,18,19,0.96);
  box-shadow:0 18px 40px rgba(0,0,0,.42);
  opacity:0;
  transform:translateY(-28px);
}

.achievement-popup.is-visible{
  animation:achievementPopupIn .22s ease forwards;
}

.achievement-popup.is-hiding{
  animation:achievementPopupOut .25s ease forwards;
}

.achievement-popup__badge{
  width:84px;
  min-width:84px;
  display:grid;
  place-items:center;
}

.achievement-popup__copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.achievement-popup__eyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#ffc766;
  margin-bottom:6px;
}

.achievement-popup__title{
  font-family:"Press Start 2P",monospace;
  font-size:13px;
  line-height:1.5;
  color:#fff;
  margin-bottom:8px;
}

.achievement-popup__text{
  font-size:13px;
  color:var(--muted);
}

.achievement-popup__claim{
  margin-top:12px;
  min-width:120px;
  align-self:flex-start;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:#7c1d23;
  color:#fff;
  font-family:"Press Start 2P", monospace;
  font-size:10px;
  line-height:1;
  padding:12px 14px;
  cursor:pointer;
  transition:transform .16s ease, filter .16s ease, background .16s ease;
}

.achievement-popup__claim:hover,
.achievement-popup__claim:focus-visible{
  transform:translateY(-1px);
  filter:brightness(1.08);
  outline:none;
}

.achievement-confetti-piece{
  position:absolute;
  top:-10px;
  width:7px;
  height:7px;
  image-rendering:pixelated;
  animation:achievementConfettiFall 1.2s linear forwards;
}

@keyframes achievementPopupIn{
  from{opacity:0;transform:translateY(-28px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes achievementPopupOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-14px) scale(.97)}
}

@keyframes achievementConfettiFall{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:1}
  100%{transform:translate3d(calc((var(--drift, 0.5) - .5) * 60px), 140px, 0) rotate(180deg);opacity:0}
}

.profile-layout-card > h1{
  margin-top:4px;
  margin-bottom:20px;
}

.profile-stats-grid--new{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
}

.profile-stats-grid--new .stat-card{
  min-height:138px;
}

.profile-stats-grid--new .stat-card--wide{
  grid-column:span 3;
}

.profile-stats-grid--new > .stat-card:not(.stat-card--wide){
  grid-column:span 2;
}

.profile-achievement-card{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  text-align:left;
}

.profile-achievement-badge{
  width:92px;
  min-width:92px;
  display:grid;
  place-items:center;
}

.profile-achievement-name{
  font-family:"Press Start 2P",monospace;
  font-size:20px;
  line-height:1.4;
  color:#fff;
  text-transform:none;
}

.profile-achievement-desc{
  margin-top:8px;
  color:#d7d7d7;
  font-size:18px;
  line-height:1.5;
  text-transform:none;
}

.stat-value-country--large{
  gap:12px;
  font-size:clamp(16px,1.9vw,22px);
}

.stat-value-country--large img{
  width:42px;
}

.profile-stats-grid--new .stat-label{
  text-transform:none;
}

@media (max-width:980px){
  .profile-stats-grid--new{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .profile-stats-grid--new .stat-card--wide{
    grid-column:span 2;
  }

  .profile-stats-grid--new > .stat-card:not(.stat-card--wide){
    grid-column:span 1;
  }
}

@media (max-width:700px){
  .game-achievement-card-inner{
    align-items:flex-start;
  }

  .game-achievement-badge{
    width:56px;
    min-width:56px;
    height:56px;
  }

  .profile-stats-grid--new{
    grid-template-columns:1fr;
  }

  .profile-stats-grid--new .stat-card--wide{
    grid-column:span 1;
  }

  .profile-achievement-card{
    align-items:flex-start;
    gap:12px;
  }

  .profile-achievement-badge{
    width:76px;
    min-width:76px;
  }

  .profile-achievement-name{
    font-size:16px;
  }

  .profile-achievement-desc{
    font-size:14px;
  }

  .achievement-popups{
    left:50%;
    top:10vh;
    right:auto;
    bottom:auto;
    transform:translateX(-50%);
  }

  .achievement-popup{
    width:100%;
  }
}

/* ===== MERGED FROM style-ui-fix.css (applied last) ===== */

/* === Leaderboard badge layout fixes === */
.leaderboard-player-badges {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
}

.ranking-main-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* IMPORTANT: remove inline override */
.ranking li span {
    /* display: inline;  <-- REMOVED */
    min-width: 0;
    overflow-wrap: anywhere;
}

/* === Tooltip === */
.badge-tooltip {
    display: flex;
    align-items: center;
    gap: 10px;

    background: #222;
    border: 1px solid #444;
    border-radius: 6px;

    padding: 10px 12px;
    min-width: 180px;
    max-width: 240px;

    white-space: normal;
    z-index: 9999;
}

.badge-tooltip-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.badge-tooltip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.badge-tooltip-rank {
    font-size: 10px;
    color: #ffc766;
    text-transform: uppercase;
}

.badge-tooltip-name {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.badge-tooltip-desc {
    font-size: 11px;
    color: #aaa;
}


/* ===== Recent batch ticker ===== */

body{
  padding-bottom:40px;
}

.site-batch-ticker{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:95;
  height:40px;
  background:rgba(15,15,16,.96);
  border-top:1px solid var(--border);
  box-shadow:0 -8px 24px rgba(0,0,0,.24);
  overflow:hidden;
  backdrop-filter:blur(8px);
}

.site-batch-ticker__viewport{
  width:100%;
  height:100%;
  overflow:hidden;
}

.site-batch-ticker__track{
  --ticker-duration:32s;
  display:flex;
  align-items:center;
  width:max-content;
  height:100%;
  will-change:transform;
  animation:site-batch-ticker-scroll var(--ticker-duration) linear infinite;
}

.site-batch-ticker__sequence{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  min-width:max-content;
}

.site-batch-ticker__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:100%;
  padding:0 12px;
  white-space:nowrap;
  font-size:12px;
  line-height:1;
  color:#fff;
}

.site-batch-ticker__flag{
  width:18px;
  height:12px;
  object-fit:cover;
  border-radius:2px;
  flex:0 0 auto;
}

.site-batch-ticker__username{
  font-weight:700;
  color:#ffc766;
}

.site-batch-ticker__text strong{
  color:#fff;
}

.site-batch-ticker__separator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.45);
  padding-right:6px;
}

@keyframes site-batch-ticker-scroll{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

@media (max-width:640px){
  body{
    padding-bottom:30px;
  }

  .site-batch-ticker{
    height:30px;
  }

  .site-batch-ticker__item{
    gap:6px;
    padding:0 10px;
    font-size:11px;
  }

  .site-batch-ticker__flag{
    width:16px;
    height:10px;
  }
}

/* leaderboard winner cards */
.leaderboard-winners-stack{
  display:grid;
  gap:16px;
  margin-top:18px;
}

.leaderboard-winner-row{
  display:grid;
  gap:10px;
}

.leaderboard-winner-row-title{
  margin:0;
  font-size:16px;
}

.leaderboard-winner-grid{
  gap:18px;
}

.leaderboard-winner-card{
  margin:0;
}

.leaderboard-winner-card-label{
  margin:0 0 12px;
  font-size:11px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.leaderboard-winner-card-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.leaderboard-winner-card-name{
  min-width:0;
  flex:1 1 auto;
}

.leaderboard-winner-card-name > span:last-child{
  font-weight:700;
}

.leaderboard-winner-card-value{
  flex:0 0 auto;
  font-size:20px;
  line-height:1;
}

.leaderboard-winner-card-empty{
  color:var(--muted);
}

@media (max-width:640px){
  .leaderboard-winner-card-main{
    gap:10px;
  }

  .leaderboard-winner-card-value{
    font-size:18px;
  }
}

#profileShareButton {
    background: #a81010;
    border: none;
    border-radius: 5px;
    width: 32px;
    height: 30px;
}

#profileShareButton:hover {
    background: #ffc766;
    cursor:pointer;
}

#profileShareButton img {
    width: 20px;
    filter: invert(1);
    height: 20px;
    margin: auto;
    vertical-align: text-top;
}

#profileShareButton:hover img {
    filter: none;
}

/* ===== ADMIN STATISTICS (1.1.7) ===== */
.admin-page-toolbar,
.profile-header-row{
  display:flex;
  justify-content:space-between;
  align-items: center;
  margin-bottom:16px;
}

/* ===== HOMEPAGE FEATURE CARDS ===== */
.homepage-feature-grid{
  align-items:stretch;
}

.homepage-feature-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:190px;
  overflow:hidden;
}

.homepage-feature-card h3{
  margin:0;
  color:#49c77a;
}

.homepage-feature-card p{
  margin:0;
  font-size:15px;
  line-height:1.45;
  max-width:34ch;
}

.homepage-feature-badges{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:auto;
}

.homepage-feature-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:74px;
  height:74px;
  flex:0 0 74px;
}

.homepage-feature-badge .achievement-badge-sprite,
.homepage-feature-badge .achievement-badge-sprite--large{
  width:74px;
  height:74px;
}

.homepage-feature-ribbon{
  position:absolute;
  top:14px;
  right:-34px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:148px;
  padding:7px 10px;
  background:#7c1d23;
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  transform:rotate(34deg);
  box-shadow:0 8px 18px rgba(0,0,0,.26);
  pointer-events:none;
}

.homepage-feature-card--clans p{
  max-width:29ch;
}

@media (max-width:900px){
  .homepage-feature-card{
    min-height:unset;
  }
}


/* ===== HOMEPAGE MUSIC PLAYER (1.1.11) ===== */
.homepage-music-player{
  display:flex;
  align-items:stretch;
  gap:14px;
  margin-top:14px;
  background:var(--panel2);
}

.homepage-music-player__controls{
  display:flex;
  align-items:stretch;
  gap:10px;
  flex:0 0 auto;
}

.homepage-music-player__play,
.homepage-music-player__icon-button{
  appearance:none;
  border:0;
  border-radius:6px;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}

.homepage-music-player__play{
  width:82px;
  min-height:82px;
  background:#a81010;
  position:relative;
  flex:0 0 82px;
}

.homepage-music-player__play-icon{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.homepage-music-player__play-icon svg{
  width:38px;
  height:38px;
}

.homepage-music-player__play-icon--pause{
  display:none;
}

.homepage-music-player__play.is-playing .homepage-music-player__play-icon--play{
  display:none;
}

.homepage-music-player__play.is-playing .homepage-music-player__play-icon--pause{
  display:flex;
}

.homepage-music-player__side-buttons{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.homepage-music-player__volume-wrap{
  position:relative;
}

.homepage-music-player__icon-button{
  width:42px;
  height:37px;
  background:#7c1d23;
}

.homepage-music-player__icon-button svg{
  width:18px;
  height:18px;
}

.homepage-music-player__meta{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
}

.homepage-music-player__title{
  min-height:20px;
  color:#fff;
  font-family:"Press Start 2P", monospace;
  font-size:13px;
  line-height:1.5;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.homepage-music-player__progress{
  appearance:none;
  position:relative;
  width:100%;
  height:12px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
  cursor:pointer;
  padding:0;
}

.homepage-music-player__progress-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  background:#a81010;
  border-radius:inherit;
}

.homepage-music-player__volume-panel{
  position:absolute;
  left:52px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  min-width:158px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#111;
  box-shadow:0 10px 24px rgba(0,0,0,.36);
  z-index:8;
}

.homepage-music-player__volume-panel[hidden]{
  display:none !important;
}

.homepage-music-player__volume-slider{
  width:100px;
  accent-color:#a81010;
  cursor:pointer;
  padding:0 !important;
}

.homepage-music-player__volume-value{
  min-width:28px;
  color:#fff;
  font-weight:700;
  font-size:13px;
  text-align:right;
}

@media (max-width:900px){
  .homepage-music-player{
    flex-wrap:wrap;
  }

  .homepage-music-player__meta{
    width:100%;
  }
}

@media (max-width:640px){
  .homepage-music-player{
    align-items:flex-start;
  }

  .homepage-music-player__controls{
    width:100%;
  }

  .homepage-music-player__play{
    width:72px;
    min-height:72px;
    flex-basis:72px;
  }

  .homepage-music-player__play-icon svg{
    width:34px;
    height:34px;
  }

  .homepage-music-player__meta{
    gap:10px;
  }

  .homepage-music-player__title{
    font-size:11px;
    white-space:normal;
  }

  .homepage-music-player__volume-panel{
    left:0;
    top:calc(100% + 8px);
    transform:none;
  }
}


/* ===== GAME JUKEBOX (1.1.12) ===== */
.homepage-music-player--jukebox{
  margin-top:16px;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}

.homepage-music-player--jukebox h3{
  margin:0;
}

.homepage-music-player--jukebox .homepage-music-player__meta{
  width:100%;
  gap:10px;
}

.homepage-music-player--jukebox .homepage-music-player__title{
  min-height:0;
  white-space:nowrap;
}

.homepage-music-player--jukebox .homepage-music-player__controls{
  width:100%;
  justify-content:flex-start;
  align-items:center;
  gap:8px;
}

.homepage-music-player--jukebox .homepage-music-player__play{
  width:52px;
  min-height:52px;
  flex:0 0 52px;
}

.homepage-music-player--jukebox .homepage-music-player__play-icon svg{
  width:26px;
  height:26px;
}

.homepage-music-player--jukebox .homepage-music-player__icon-button{
  width:52px;
  height:52px;
  flex:0 0 52px;
}

.homepage-music-player--jukebox .homepage-music-player__icon-button svg{
  width:20px;
  height:20px;
}

.homepage-music-player--jukebox .homepage-music-player__volume-panel{
  left:auto;
  right:0;
  top:calc(100% + 8px);
  transform:none;
}

@media (max-width:640px){
  .homepage-music-player--jukebox .homepage-music-player__title{
    white-space:normal;
  }

  .homepage-music-player--jukebox .homepage-music-player__controls{
    flex-wrap:wrap;
  }
}