/* =========================================
   CLANMETRIC
   ОБЩИЕ НАСТРОЙКИ
========================================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --bg:#0b0d12;

  --panel:#13161d;
  --panel-soft:#171b23;
  --panel-dark:#101218;

  --border:#232833;
  --border-soft:rgba(255,255,255,.055);

  --text:#f5f6f8;
  --muted:#8b93a1;
  --muted-dark:#68717e;

  --accent:#7c5cff;
  --accent-light:#a997ff;
  --accent-soft:rgba(124,92,255,.14);

  --green:#48d17c;
  --green-soft:rgba(72,209,124,.09);

  --gold:#ffc857;
  --gold-soft:rgba(255,200,87,.09);

  --red:#ff6977;
  --red-soft:rgba(255,101,116,.09);

  --nav-height:76px;
}

html{
  min-height:100%;
  background:var(--bg);
}

body{
  min-height:100vh;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:
    radial-gradient(
      circle at top right,
      rgba(124,92,255,.10),
      transparent 28%
    ),
    var(--bg);

  color:var(--text);

  padding-bottom:
    calc(
      var(--nav-height) +
      20px +
      env(safe-area-inset-bottom)
    );
}

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

button{
  -webkit-tap-highlight-color:transparent;
}

button,
a{
  touch-action:manipulation;
}

a{
  color:inherit;
}

img{
  max-width:100%;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid rgba(124,92,255,.75);
  outline-offset:2px;
}



/* =========================================
   HEADER
========================================= */

.header{
  padding:18px 16px;

  background:
    rgba(11,13,18,.94);

  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}

.header-row{
  width:100%;
  max-width:1050px;

  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:14px;
}

.clan{
  min-width:0;

  display:flex;
  align-items:center;

  gap:12px;
}

.clan-icon{
  width:56px;
  height:56px;

  flex-shrink:0;

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

  border-radius:16px;

  background:#181c25;

  border:
    1px solid
    rgba(255,255,255,.06);

  font-size:29px;
}

.clan-info{
  min-width:0;
}

.clan-info h1{
  overflow:hidden;

  font-size:20px;
  font-weight:800;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.clan-info p{
  margin-top:4px;

  color:var(--muted);

  font-size:13px;
}



/* =========================================
   PROFILE BUTTON
========================================= */

.profile-btn{
  height:44px;

  padding:0 14px;

  flex-shrink:0;

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

  gap:7px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:13px;

  background:#171a21;

  color:#f1f2f5;

  text-decoration:none;

  font-size:12px;
  font-weight:700;
}

.profile-icon{
  font-size:18px;
}

.profile-btn.active{
  color:#b2a2ff;

  border-color:
    rgba(124,92,255,.16);

  background:
    rgba(124,92,255,.09);
}



/* =========================================
   CONTENT
========================================= */

.content{
  width:100%;
  max-width:1050px;

  margin:0 auto;

  padding:22px 16px 30px;
}



/* =========================================
   HOME
========================================= */

.welcome{
  margin-bottom:22px;
}

.welcome-small{
  margin-bottom:6px;

  color:var(--accent);

  font-size:10px;
  font-weight:800;

  letter-spacing:1.5px;
}

.welcome h2{
  font-size:29px;
  font-weight:850;

  letter-spacing:-.6px;
}

.welcome-text{
  margin-top:6px;

  color:var(--muted);

  font-size:13px;
}



/* =========================================
   HOME STATS
========================================= */

.stats{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:11px;
}

.stat-card{
  min-width:0;
  min-height:142px;

  padding:16px;

  border-radius:18px;

  background:var(--panel);

  border:
    1px solid
    var(--border-soft);
}

.stat-top{
  display:flex;
  align-items:center;

  gap:10px;

  margin-bottom:20px;
}

.stat-icon{
  width:39px;
  height:39px;

  flex-shrink:0;

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

  border-radius:12px;

  background:var(--panel-soft);

  font-size:21px;
}

.stat-name{
  color:#a5abb6;

  font-size:12px;
  font-weight:700;
}

.stat-value{
  overflow-wrap:anywhere;

  font-size:21px;
  font-weight:850;

  letter-spacing:-.4px;
}

.stat-description{
  margin-top:6px;

  color:#707887;

  font-size:11px;

  line-height:1.4;
}

.green{
  color:var(--green);
}

.gold{
  color:var(--gold);
}



/* =========================================
   HOME SEASON
========================================= */

.season{
  margin-top:28px;
}

.section-heading{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:15px;

  margin-bottom:12px;
}

.section-heading span{
  display:block;

  margin-bottom:5px;

  color:#676f7c;

  font-size:9px;
  font-weight:800;

  letter-spacing:1.5px;
}

.section-heading h2{
  font-size:18px;
  font-weight:800;
}

.season-month{
  padding:6px 10px;

  flex-shrink:0;

  border-radius:9px;

  background:var(--accent-soft);

  color:var(--accent-light);

  font-size:11px;
  font-weight:700;
}

.season-card{
  padding:18px;

  border-radius:18px;

  background:var(--panel);

  border:
    1px solid
    var(--border-soft);
}

.season-row{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;
}

.season-row p{
  margin-bottom:5px;

  color:var(--muted);

  font-size:12px;
}

.season-row strong{
  font-size:17px;
  font-weight:800;
}

.season-percent{
  flex-shrink:0;

  color:#51d983;

  font-size:20px;
  font-weight:850;
}

.progress{
  width:100%;
  height:7px;

  margin-top:16px;

  overflow:hidden;

  border-radius:100px;

  background:#262a33;
}

.progress-fill{
  width:87%;
  height:100%;

  border-radius:100px;

  background:
    linear-gradient(
      90deg,
      #6b4cff,
      #927cff
    );
}



/* =========================================
   HOME INFO
========================================= */

.info-block{
  margin-top:12px;

  padding:15px;

  display:flex;
  align-items:flex-start;

  gap:12px;

  border-radius:17px;

  background:rgba(124,92,255,.045);

  border:
    1px solid
    rgba(124,92,255,.07);
}

.info-icon{
  width:39px;
  height:39px;

  flex-shrink:0;

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

  border-radius:12px;

  background:var(--accent-soft);

  font-size:19px;
}

.info-block h3{
  margin-bottom:5px;

  font-size:13px;
}

.info-block p{
  color:#747c8a;

  font-size:11px;

  line-height:1.5;
}



/* =========================================
   BOTTOM NAV
========================================= */

.bottom-nav{
  position:fixed;

  left:0;
  right:0;
  bottom:0;

  z-index:100;

  min-height:var(--nav-height);

  padding-bottom:
    env(safe-area-inset-bottom);

  display:grid;

  grid-template-columns:
    repeat(6,minmax(0,1fr));

  background:#101218;

  border-top:
    1px solid
    rgba(255,255,255,.06);
}

.nav-item{
  position:relative;

  min-width:0;
  min-height:var(--nav-height);

  border:0;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:4px;

  background:transparent;

  color:#707786;

  text-decoration:none;

  -webkit-tap-highlight-color:transparent;
}

.nav-icon{
  font-size:20px;
}

.nav-text{
  max-width:100%;

  overflow:hidden;

  font-size:9px;
  font-weight:700;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.nav-item.active{
  color:#ffffff;
}

.nav-item.active .nav-icon{
  color:var(--accent);
}

.nav-item.active::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  width:28px;
  height:3px;

  transform:
    translateX(-50%);

  border-radius:3px 3px 0 0;

  background:var(--accent);
}



/* =========================================
   WARS
========================================= */

.wars-head{
  margin-bottom:20px;
}

.wars-head h1{
  font-size:30px;
  font-weight:850;

  letter-spacing:-.6px;
}

.wars-head > p:last-child{
  margin-top:6px;

  color:var(--muted);

  font-size:13px;
}

.war-tabs{
  width:100%;

  margin-bottom:18px;

  padding:4px;

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:5px;

  border-radius:15px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}
.war-progress-tabs{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.war-progress-tabs .war-progress-tab{
  padding:0 3px;
  line-height:1.15;
  font-size:11px;
}
.season-period-caption{
  margin:-8px 0 16px;
  color:var(--muted);
  font-size:12px;
  text-transform:capitalize;
}

.war-tab,
.war-progress-tab{
  height:43px;

  border:0;
  border-radius:12px;

  background:transparent;

  color:#797f8c;

  font-size:13px;
  font-weight:750;
}

.war-tab.active,
.war-progress-tab.active{
  background:#23202e;

  color:var(--accent-light);
}

.war-page{
  display:none;
}

.war-page.active{
  display:block;
}

.war-main-card,
.league-card{
  min-height:115px;

  padding:19px;

  display:flex;
  align-items:center;

  gap:16px;

  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      #171b24,
      #12151c
    );

  border:
    1px solid
    var(--border-soft);
}

.war-main-icon,
.league-icon{
  width:58px;
  height:58px;

  flex-shrink:0;

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

  border-radius:17px;

  background:
    rgba(124,92,255,.12);

  font-size:29px;
}

.war-label{
  display:block;

  margin-bottom:6px;

  color:#757d8b;

  font-size:9px;
  font-weight:850;

  letter-spacing:1.3px;
}

.war-main-card h2,
.league-card h2{
  font-size:22px;
  font-weight:850;
}

.war-main-card p,
.league-card p{
  margin-top:6px;

  color:#7f8795;

  font-size:12px;
}

.wars-section-title{
  margin-top:28px;
  margin-bottom:12px;
}

.wars-section-title span{
  display:block;

  margin-bottom:5px;

  color:#676f7c;

  font-size:9px;
  font-weight:800;

  letter-spacing:1.4px;
}

.wars-section-title h2{
  font-size:18px;
  font-weight:800;
}

.wars-list-title{
  margin-top:27px;
}


.war-current-card{
  background:var(--card);
  border-radius:20px;
  padding:20px;
  margin-bottom:20px;
}

.war-current-title{
  text-align:center;
  font-size:18px;
  font-weight:700;
  margin-bottom:20px;
}

.war-battle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.war-team{
  flex:1;
  text-align:center;
}

.war-team img{
  width:55px;
  height:55px;
  object-fit:contain;
}

.war-team h3{
  font-size:14px;
  margin:8px 0;
}

.war-stars{
  font-size:28px;
  font-weight:800;
}

.war-attacks{
  margin-top:8px;
  font-size:14px;
  opacity:.8;
}

.war-vs{
  font-size:30px;
}

.war-prediction{
  margin-top:22px;
  text-align:center;
}

.war-prediction span{
  display:block;
  font-size:14px;
  opacity:.8;
}

.war-prediction strong{
  display:block;
  font-size:34px;
  margin:8px 0;
}

.war-progress{
  height:10px;
  background:#222;
  border-radius:10px;
  overflow:hidden;
}

.war-progress div{
  width:50%;
  height:100%;
  background:var(--green);
  border-radius:10px;
}

@media(max-width:600px){
  .war-current-card{
    padding:16px;
  }

  .war-stars{
    font-size:22px;
  }

  .war-vs{
    font-size:22px;
  }
}

.war-stat-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:9px;
}

.war-stat{
  min-height:91px;

  padding:14px 8px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:6px;

  text-align:center;

  border-radius:17px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.war-stat strong{
  font-size:23px;
  font-weight:850;
}

.war-stat span{
  color:#7c8491;

  font-size:11px;
}

.war-green{
  color:var(--green);
}

.war-red{
  color:var(--red);
}

.war-progress-card{
  margin-top:10px;

  padding:17px;

  border-radius:18px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.war-progress-top{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:10px;
}

.war-progress-top span{
  display:block;

  margin-bottom:5px;

  color:#717987;

  font-size:9px;
  font-weight:800;

  letter-spacing:1.2px;
}

.war-progress-top strong{
  font-size:22px;
  font-weight:850;
}

.war-progress-number{
  color:#9a91c5;

  font-size:12px;
  font-weight:700;
}

.war-progress{
  width:100%;
  height:7px;

  margin-top:15px;

  overflow:hidden;

  border-radius:100px;

  background:#272a32;
}

.war-progress-fill{
  height:100%;

  border-radius:100px;

  background:
    linear-gradient(
      90deg,
      #6b4cff,
      #927cff
    );
}

.war-progress-card > p{
  margin-top:8px;

  color:#747b88;

  font-size:10px;
}

.war-list,
.player-war-list{
  display:flex;
  flex-direction:column;

  gap:8px;
}

.war-history-card,
.player-war-card{
  min-height:70px;

  padding:11px 13px;

  display:flex;
  align-items:center;

  gap:11px;

  border-radius:17px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.war-history-card{
  min-height:74px;

  gap:12px;

  padding:12px 13px;
}

.war-result{
  width:38px;
  height:38px;

  flex-shrink:0;

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

  border-radius:12px;

  font-size:20px;
  font-weight:900;
}

.war-result.win{
  color:#52da84;

  background:
    rgba(72,209,124,.11);
}

.war-result.loss{
  color:var(--red);

  background:
    rgba(255,101,116,.1);
}

.war-history-info,
.player-war-info{
  min-width:0;

  flex:1;
}

.war-history-info strong,
.player-war-info strong{
  display:block;

  overflow:hidden;

  font-size:13px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.war-history-info span{
  display:block;

  margin-top:4px;

  color:#767e8b;

  font-size:10px;
}

.player-war-info span{
  display:block;

  margin-top:3px;

  color:#737b89;

  font-size:10px;
}

.war-score,
.player-war-result{
  flex-shrink:0;

  text-align:right;
}

.war-score strong{
  display:block;

  font-size:15px;
}

.war-score span{
  display:block;

  margin-top:4px;

  font-size:10px;
}

.player-war-result strong{
  display:block;

  font-size:14px;
}

.player-war-result span{
  display:block;

  margin-top:4px;

  color:#777f8b;

  font-size:10px;
}

.win-text{
  color:var(--green);
}

.lose-text{
  color:var(--red);
}

.cwl-result-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:9px;
}

.cwl-result{
  min-height:90px;

  padding:13px 7px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:7px;

  text-align:center;

  border-radius:17px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.cwl-result span{
  color:#777f8d;

  font-size:10px;
}

.cwl-result strong{
  color:var(--text);

  font-size:18px;
  font-weight:850;
}

.player-place{
  width:34px;
  height:34px;

  flex-shrink:0;

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

  border-radius:11px;

  background:#1b1f28;

  color:#949ba8;

  font-size:12px;
  font-weight:850;
}

.player-place.first{
  color:#b9a8ff;

  background:
    rgba(124,92,255,.13);
}



/* =========================================
   ACTIVITY
========================================= */

.activity-head{
  margin-bottom:20px;
}

.activity-head h1{
  font-size:30px;
  font-weight:850;

  letter-spacing:-.6px;
}

.activity-head > p:last-child{
  margin-top:6px;

  color:var(--muted);

  font-size:13px;
}

.activity-tabs{
  width:100%;

  margin-bottom:18px;

  padding:4px;

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:5px;

  border-radius:15px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.activity-tab{
  height:43px;

  padding:0 4px;

  border:0;
  border-radius:12px;

  background:transparent;

  color:#797f8c;

  font-size:12px;
  font-weight:750;
}

.activity-tab.active{
  color:var(--accent-light);

  background:#23202e;
}

.activity-page{
  display:none;
}

.activity-page.active{
  display:block;
}

.period-switch{
  width:100%;

  margin-bottom:14px;

  padding:4px;

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:5px;

  border-radius:14px;

  background:#101218;

  border:
    1px solid
    rgba(255,255,255,.045);
}
.raid-period-switch{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.raid-period-switch .period-btn{
  padding:0 3px;
  line-height:1.15;
}
.donation-period-switch{
  max-width:360px;
}

.period-btn{
  height:38px;

  border:0;
  border-radius:11px;

  background:transparent;

  color:#717987;

  font-size:11px;
  font-weight:750;

  transition:
    background .15s ease,
    color .15s ease;
}

.period-btn.active{
  color:#f4f1ff;

  background:#24202f;

  box-shadow:
    inset 0 0 0 1px
    rgba(124,92,255,.12);
}

.period-content{
  display:none;
}

.period-content.active{
  display:block;
}

.activity-main-card{
  position:relative;

  min-height:115px;

  padding:18px;

  display:flex;
  align-items:center;

  gap:15px;

  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      #171b24,
      #12151c
    );

  border:
    1px solid
    var(--border-soft);
}

.activity-main-icon{
  width:58px;
  height:58px;

  flex-shrink:0;

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

  border-radius:17px;

  background:
    rgba(124,92,255,.12);

  font-size:29px;
}

.donation-icon{
  background:
    rgba(255,200,87,.10);
}

.games-icon{
  background:
    rgba(72,209,124,.10);
}

.activity-main-info{
  min-width:0;

  flex:1;
}

.activity-label{
  display:block;

  margin-bottom:6px;

  color:#757d8b;

  font-size:9px;
  font-weight:850;

  letter-spacing:1.3px;
}

.activity-main-info h2{
  overflow-wrap:anywhere;

  font-size:21px;
  font-weight:850;
}

.activity-main-info p{
  margin-top:6px;

  color:#7f8795;

  font-size:11px;
}

.activity-status{
  flex-shrink:0;

  padding:6px 8px;

  border-radius:8px;

  font-size:8px;
  font-weight:900;

  letter-spacing:1px;
}

.activity-status.live{
  color:#55db85;

  background:
    rgba(72,209,124,.1);
}

.activity-section-title{
  margin-top:27px;
  margin-bottom:12px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:10px;
}

.activity-section-title span{
  display:block;

  margin-bottom:5px;

  color:#676f7c;

  font-size:9px;
  font-weight:800;

  letter-spacing:1.4px;
}

.activity-section-title h2{
  font-size:18px;
  font-weight:800;
}

.activity-count{
  min-width:30px;
  height:30px;

  padding:0 8px;

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

  border-radius:10px;

  color:#ff7180;

  background:
    rgba(255,101,116,.09);

  font-size:12px;
  font-weight:850;
}

.activity-stat-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:9px;
}

.activity-stat{
  min-height:91px;

  padding:12px 6px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:6px;

  text-align:center;

  border-radius:17px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.activity-stat strong{
  overflow-wrap:anywhere;

  font-size:21px;
  font-weight:850;
}

.activity-stat span{
  color:#7c8491;

  font-size:10px;
}

.activity-green{
  color:var(--green);
}

.activity-gold{
  color:var(--gold);
}

.attention-list,
.activity-player-list,
.donation-list,
.games-player-list{
  display:flex;
  flex-direction:column;

  gap:8px;
}

.attention-player,
.activity-player-card,
.donation-player,
.games-player{
  min-height:69px;

  padding:11px 13px;

  display:flex;
  align-items:center;

  gap:11px;

  border-radius:17px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.attention-player{
  background:#161418;

  border-color:
    rgba(255,101,116,.09);
}

.attention-icon{
  width:36px;
  height:36px;

  flex-shrink:0;

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

  border-radius:11px;

  color:#ff6d7b;

  background:
    rgba(255,101,116,.1);

  font-size:18px;
  font-weight:900;
}

.attention-info,
.activity-player-info,
.donation-player-info,
.games-player-info{
  min-width:0;

  flex:1;
}

.attention-info strong,
.activity-player-info strong,
.donation-player-info strong,
.games-player-info strong{
  display:block;

  overflow:hidden;

  font-size:13px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.attention-info span{
  display:block;

  margin-top:4px;

  color:#767e8b;

  font-size:10px;
}

.attention-status{
  flex-shrink:0;

  color:#ff7582;

  font-size:10px;
  font-weight:700;
}

.activity-place{
  width:34px;
  height:34px;

  flex-shrink:0;

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

  border-radius:11px;

  background:#1b1f28;

  color:#949ba8;

  font-size:12px;
  font-weight:850;
}

.activity-place.first{
  color:#b9a8ff;

  background:
    rgba(124,92,255,.13);
}

.activity-player-info span,
.donation-player-info span,
.games-player-info span{
  display:block;

  margin-top:3px;

  color:#737b89;

  font-size:10px;
}

.activity-player-result,
.games-player-progress{
  flex-shrink:0;

  text-align:right;
}

.activity-player-result strong{
  display:block;

  font-size:14px;
}

.activity-player-result span{
  display:block;

  margin-top:4px;

  color:#777f8b;

  font-size:10px;
}

.donation-summary{
  min-height:95px;

  padding:16px;

  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:center;

  border-radius:18px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.donation-summary-item{
  text-align:center;
}

.donation-summary-item span{
  display:block;

  margin-bottom:6px;

  color:#777f8d;

  font-size:10px;
}

.donation-summary-item strong{
  overflow-wrap:anywhere;

  font-size:19px;
  font-weight:850;
}

.donation-divider{
  width:1px;
  height:45px;

  background:
    rgba(255,255,255,.07);
}

.donation-player{
  min-height:74px;

  gap:10px;
}

.donation-numbers{
  flex-shrink:0;

  display:flex;

  gap:15px;
}

.donation-numbers div{
  text-align:right;
}

.donation-numbers strong{
  display:block;

  font-size:13px;
}

.donation-numbers span{
  display:block;

  margin-top:3px;

  color:#717987;

  font-size:9px;
}

.low-activity-card{
  padding:15px;

  display:flex;
  align-items:center;

  gap:12px;

  border-radius:17px;

  background:#161418;

  border:
    1px solid
    rgba(255,101,116,.08);
}

.low-activity-icon{
  width:40px;
  height:40px;

  flex-shrink:0;

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

  border-radius:12px;

  background:
    rgba(255,101,116,.09);

  font-size:19px;
}

.low-activity-card strong{
  font-size:13px;
}

.low-activity-card p{
  margin-top:4px;

  color:#787f8c;

  font-size:10px;
}

.games-percent{
  flex-shrink:0;

  color:#51d983;

  font-size:20px;
  font-weight:850;
}

.games-progress-card{
  margin-top:10px;

  padding:16px;

  border-radius:18px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.games-progress-top{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;
}

.games-progress-top span{
  color:#777f8d;

  font-size:10px;
}

.games-progress-top strong{
  font-size:13px;
}

.games-progress{
  width:100%;
  height:7px;

  margin-top:13px;

  overflow:hidden;

  border-radius:100px;

  background:#272a32;
}

.games-progress-fill{
  height:100%;

  border-radius:100px;

  background:
    linear-gradient(
      90deg,
      #38bd6e,
      #64e391
    );
}

.games-player-progress strong{
  display:block;

  font-size:12px;
}

.games-player-progress span{
  display:block;

  margin-top:4px;

  color:#747c89;

  font-size:9px;
}

.games-player-progress .completed{
  color:#4fd881;
}

.games-player-progress .not-started{
  color:var(--red);
}



/* =========================================
   ANNOUNCEMENTS
========================================= */

.announcements-head{
  margin-bottom:20px;

  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:15px;
}

.announcements-head h1{
  font-size:30px;
  font-weight:850;

  letter-spacing:-.6px;
}

.announcements-subtitle{
  margin-top:6px;

  color:var(--muted);

  font-size:13px;
}

.add-announcement-btn,
.add-base-btn{
  height:42px;

  padding:0 13px;

  flex-shrink:0;

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

  gap:5px;

  border:0;
  border-radius:12px;

  color:#fff;

  background:#7657ef;

  font-size:11px;
  font-weight:750;
}

.add-announcement-btn span,
.add-base-btn span{
  font-size:18px;
}

.announcement-filters{
  width:100%;

  margin-bottom:22px;

  padding:4px;

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:5px;

  border-radius:15px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.announcement-filter{
  height:40px;

  border:0;
  border-radius:11px;

  color:#777f8c;

  background:transparent;

  font-size:11px;
  font-weight:750;
}

.announcement-filter.active{
  color:var(--accent-light);

  background:#23202e;
}

.announcement-list{
  display:flex;
  flex-direction:column;

  gap:11px;
}

.announcement-card{
  position:relative;

  padding:17px;

  border-radius:19px;

  background:var(--panel);

  border:
    1px solid
    var(--border-soft);
}

.announcement-card.important{
  border-color:
    rgba(255,101,116,.11);
}

.announcement-card.pinned{
  background:
    linear-gradient(
      145deg,
      #171723,
      #13161d
    );
}

.announcement-top{
  margin-bottom:13px;

  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:10px;
}

.announcement-badges{
  display:flex;
  flex-wrap:wrap;

  gap:6px;
}

.announcement-label,
.announcement-badge{
  display:inline-flex;
  align-items:center;

  padding:5px 8px;

  border-radius:8px;

  font-size:8px;
  font-weight:850;

  white-space:nowrap;
}

.announcement-label.important,
.announcement-badge.important{
  color:#ff7986;

  background:
    rgba(255,101,116,.11);
}

.announcement-label.normal,
.announcement-badge.normal{
  color:#aa94ff;

  background:
    rgba(124,92,255,.12);
}

.announcement-badge.pinned{
  color:var(--gold);

  background:
    rgba(255,200,87,.09);
}

.announcement-right{
  display:flex;

  align-items:center;

  gap:5px;

  flex-shrink:0;
}

.announcement-date{
  color:#686f7c;

  font-size:9px;
}

.announcement-card h2{
  margin-bottom:8px;

  overflow-wrap:anywhere;

  color:#f4f5f7;

  font-size:17px;
  font-weight:800;
}

.announcement-card > p{
  overflow-wrap:anywhere;

  color:#89909d;

  font-size:12px;

  line-height:1.6;
}

.announcement-footer{
  margin-top:17px;
  padding-top:13px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

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

.announcement-author{
  min-width:0;

  display:flex;
  align-items:center;

  gap:9px;
}

.announcement-author-icon{
  width:34px;
  height:34px;

  flex-shrink:0;

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

  border-radius:10px;

  background:#1c2029;

  font-size:17px;
}

.announcement-author strong{
  display:block;

  overflow:hidden;

  font-size:11px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.announcement-author span{
  display:block;

  margin-top:2px;

  color:#707887;

  font-size:9px;
}

.announcement-read{
  flex-shrink:0;

  color:#717986;

  font-size:9px;
}

.announcement-menu-wrap{
  position:relative;

  flex-shrink:0;
}

.announcement-menu-btn,
.base-menu-btn{
  width:30px;
  height:30px;

  padding:0;

  border:0;
  border-radius:9px;

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

  background:transparent;

  color:#747b88;

  font-size:20px;

  line-height:1;
}

.announcement-menu-btn:active,
.base-menu-btn:active{
  background:#20232b;
}

.announcement-card-menu,
.base-card-menu{
  position:absolute;

  top:34px;
  right:0;

  width:170px;

  display:none;

  padding:5px;

  z-index:50;

  border-radius:13px;

  background:#1b1e26;

  border:
    1px solid
    rgba(255,255,255,.08);

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.45);
}

.announcement-card-menu.active,
.base-card-menu.active{
  display:block;
}

.announcement-card-menu button,
.base-card-menu button{
  width:100%;
  height:42px;

  padding:0 10px;

  border:0;
  border-radius:9px;

  display:flex;
  align-items:center;

  gap:9px;

  background:transparent;

  color:#d8dbe1;

  text-align:left;

  font-size:11px;
  font-weight:650;
}

.announcement-card-menu button:active,
.base-card-menu button:active{
  background:#252832;
}

.announcement-card-menu button span{
  width:20px;

  text-align:center;

  font-size:15px;
}

.announcement-card-menu
.announcement-delete-btn,
.base-card-menu
.base-delete-btn{
  color:#ff747f;

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

.announcement-empty,
.bases-empty,
.roster-empty{
  min-height:190px;

  padding:30px 20px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  text-align:center;

  border-radius:19px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.announcement-empty-icon,
.bases-empty-icon{
  margin-bottom:12px;

  font-size:30px;
}

.announcement-empty strong,
.bases-empty strong,
.roster-empty strong{
  font-size:14px;
}

.announcement-empty span,
.bases-empty span{
  margin-top:6px;

  color:#747c89;

  font-size:11px;
}



/* =========================================
   ANNOUNCEMENT MODAL
========================================= */

.announcement-modal,
.base-modal{
  position:fixed;

  inset:0;

  z-index:500;

  display:none;

  align-items:flex-end;
  justify-content:center;
}

.announcement-modal.active,
.base-modal.active{
  display:flex;
}

.announcement-modal-backdrop,
.base-modal-backdrop{
  position:absolute;

  inset:0;

  background:
    rgba(0,0,0,.68);

  backdrop-filter:
    blur(4px);
}

.announcement-modal-card,
.base-modal-card{
  position:relative;

  z-index:2;

  width:100%;
  max-width:600px;

  max-height:
    min(
      88vh,
      760px
    );

  overflow:auto;

  overscroll-behavior:contain;

  padding:20px;

  border-radius:
    24px 24px 0 0;

  background:#14171e;

  border:
    1px solid
    rgba(255,255,255,.07);
}

.announcement-modal-head,
.base-modal-head{
  margin-bottom:20px;

  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:12px;
}

.announcement-modal-head span,
.base-modal-head span{
  display:block;

  margin-bottom:5px;

  color:#7760e9;

  font-size:9px;
  font-weight:850;

  letter-spacing:1.2px;
}

.announcement-modal-head h2,
.base-modal-head h2{
  font-size:21px;
}

.announcement-modal-close,
.base-modal-close{
  width:36px;
  height:36px;

  flex-shrink:0;

  border:0;
  border-radius:11px;

  background:#20232b;

  color:#aaaeba;

  font-size:22px;
}

.announcement-form-label,
.base-form-label{
  display:block;

  margin-bottom:15px;

  color:#989eaa;

  font-size:10px;
  font-weight:700;
}

.announcement-form-label input,
.announcement-form-label textarea,
.announcement-form-label select,
.base-form-label input,
.base-form-label textarea,
.base-form-label select{
  width:100%;

  margin-top:7px;

  padding:13px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:13px;

  outline:none;

  background:#0f1217;

  color:#f2f3f5;

  font-family:inherit;

  font-size:12px;
}

.announcement-form-label textarea{
  min-height:120px;

  resize:vertical;
}

.base-form-label textarea{
  min-height:100px;

  resize:vertical;
}

.announcement-form-label input:focus,
.announcement-form-label textarea:focus,
.announcement-form-label select:focus,
.base-form-label input:focus,
.base-form-label textarea:focus,
.base-form-label select:focus{
  border-color:
    rgba(124,92,255,.55);
}

.announcement-pin-option{
  margin-bottom:18px;

  display:flex;
  align-items:center;

  gap:9px;

  color:#9299a5;

  font-size:11px;
}

.announcement-pin-option input{
  width:18px;
  height:18px;

  accent-color:#7657ef;
}

.announcement-publish-btn,
.base-save-btn{
  width:100%;
  height:48px;

  border:0;
  border-radius:14px;

  background:#7657ef;

  color:#fff;

  font-size:12px;
  font-weight:800;
}



/* =========================================
   BASES
========================================= */

.bases-head{
  margin-bottom:22px;

  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:15px;
}

.bases-head h1{
  font-size:30px;
  font-weight:850;

  letter-spacing:-.6px;
}

.bases-subtitle{
  margin-top:6px;

  color:var(--muted);

  font-size:13px;
}

.base-filter-block{
  margin-bottom:12px;
}

.base-filter-heading{
  margin-bottom:8px;

  display:flex;
  align-items:center;
}

.base-filter-label{
  display:block;

  color:#666f7e;

  font-size:9px;
  font-weight:850;

  letter-spacing:1.4px;
}

.townhall-filters,
.roster-th-list{
  width:100%;

  display:flex;
  flex-wrap:nowrap;

  gap:7px;

  overflow-x:auto;
  overflow-y:hidden;

  padding:2px 1px 8px;

  scroll-behavior:smooth;

  scroll-snap-type:
    x proximity;

  scrollbar-width:none;

  -webkit-overflow-scrolling:
    touch;

  touch-action:pan-x;

  overscroll-behavior-x:contain;
}

.townhall-filters::-webkit-scrollbar,
.roster-th-list::-webkit-scrollbar{
  display:none;
}

.townhall-filter,
.roster-th{
  min-width:64px;
  height:37px;

  flex:0 0 auto;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:11px;

  background:var(--panel);

  color:#7e8592;

  font-size:10px;
  font-weight:750;

  scroll-snap-align:center;
}

.townhall-filter.active,
.roster-th.active{
  color:#b4a4ff;

  border-color:
    rgba(124,92,255,.18);

  background:
    rgba(124,92,255,.11);
}

.base-type-filters{
  width:100%;

  margin-bottom:24px;

  padding:4px;

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:5px;

  border-radius:15px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.base-type-filter{
  height:39px;

  border:0;
  border-radius:11px;

  background:transparent;

  color:#777f8c;

  font-size:10px;
  font-weight:750;
}

.base-type-filter.active{
  color:var(--accent-light);

  background:#23202e;
}

.bases-result-head,
.roster-result-head{
  margin-bottom:12px;

  

  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:10px;
}

.bases-result-head span,
.roster-result-head
> div:first-child
> span{
  display:block;

  margin-bottom:5px;

  color:#676f7c;

  font-size:9px;
  font-weight:800;

  letter-spacing:1.4px;
}

.bases-result-head h2,
.roster-result-head h2{
  font-size:18px;
  font-weight:800;
}

.bases-count,
.roster-result-count{
  min-width:30px;
  height:30px;

  padding:0 8px;

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

  border-radius:10px;

  color:#aa96ff;

  background:
    rgba(124,92,255,.10);

  font-size:11px;
  font-weight:800;
}

.bases-grid{
  display:grid;

  grid-template-columns:1fr;

  gap:13px;
}

.base-card{
  overflow:hidden;

  border-radius:20px;

  background:var(--panel);

  border:
    1px solid
    var(--border-soft);
}

.base-preview{
  position:relative;

  width:100%;

  aspect-ratio:16 / 9;

  overflow:hidden;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:6px;

  background:
    radial-gradient(
      circle at center,
      rgba(124,92,255,.13),
      transparent 55%
    ),
    #0e1117;

  color:#747c89;
}

.base-preview img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}

.base-placeholder-icon{
  font-size:35px;
}

.base-preview > span{
  font-size:12px;
  font-weight:800;
}

.base-preview-badges{
  position:absolute;

  left:10px;
  right:10px;
  top:10px;

  display:flex;

  justify-content:space-between;

  gap:8px;
}

.base-th-badge,
.base-type-badge{
  padding:6px 9px;

  border-radius:9px;

  backdrop-filter:
    blur(10px);

  font-size:9px;
  font-weight:850;
}

.base-th-badge{
  color:#fff;

  background:
    rgba(10,12,16,.8);
}

.base-type-badge{
  color:#b6a7ff;

  background:
    rgba(57,42,104,.82);
}

.base-card-body{
  padding:15px;
}

.base-card-head{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:10px;
}

.base-card-head > div:first-child{
  min-width:0;
}

.base-card-head h2{
  overflow-wrap:anywhere;

  font-size:16px;

  line-height:1.3;
}

.base-card-head
> div:first-child
> span{
  display:block;

  margin-top:5px;

  color:#717986;

  font-size:9px;
}

.base-description{
  margin-top:11px;

  overflow-wrap:anywhere;

  color:#858d9a;

  font-size:11px;

  line-height:1.55;
}

.base-copy-btn{
  width:100%;
  height:43px;

  margin-top:15px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(124,92,255,.13);

  border-radius:12px;

  background:
    rgba(124,92,255,.11);

  color:#dcd6ff;

  text-decoration:none;

  font-size:11px;
  font-weight:750;
}

.base-copy-btn:disabled{
  opacity:.55;

  cursor:not-allowed;
}

.base-form-hint{
  margin-top:-5px;
  margin-bottom:17px;

  color:#686f7c;

  font-size:9px;

  line-height:1.5;
}



/* =========================================
   BASE IMAGE
========================================= */

.base-image-field{
  margin-bottom:16px;
}

.base-image-title{
  display:block;

  margin-bottom:7px;

  color:#989eaa;

  font-size:10px;
  font-weight:700;
}

.base-image-input{
  display:none;
}

.base-image-upload{
  min-height:125px;

  padding:18px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:6px;

  border:
    1px dashed
    rgba(124,92,255,.30);

  border-radius:15px;

  background:
    rgba(124,92,255,.055);

  text-align:center;
}

.base-image-upload.hidden{
  display:none;
}

.base-image-upload-icon{
  margin-bottom:2px;

  font-size:28px;
}

.base-image-upload strong{
  color:#c9c1ff;

  font-size:11px;
  font-weight:800;
}

.base-image-upload span{
  color:#6f7784;

  font-size:9px;
}

.base-image-preview-box{
  display:none;
}

.base-image-preview-box.active{
  display:block;
}

.base-image-preview-box img{
  width:100%;
  max-height:300px;

  display:block;

  object-fit:contain;

  border-radius:15px;

  background:#0d0f14;

  border:
    1px solid
    rgba(255,255,255,.06);
}

.base-image-remove{
  width:100%;
  height:40px;

  margin-top:8px;

  border:0;
  border-radius:11px;

  background:
    rgba(255,92,107,.08);

  color:#ff7d88;

  font-size:10px;
  font-weight:750;
}



/* =========================================
   ROSTER
========================================= */

.roster-head{
  margin-bottom:20px;

  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:15px;
}

.roster-head h1{
  font-size:30px;
  font-weight:850;

  letter-spacing:-.6px;
}

.roster-subtitle{
  margin-top:6px;

  color:var(--muted);

  font-size:13px;
}

.roster-total{
  min-width:70px;

  padding:10px 12px;

  display:flex;
  flex-direction:column;

  align-items:center;

  border-radius:14px;

  background:
    rgba(124,92,255,.10);

  border:
    1px solid
    rgba(124,92,255,.12);
}

.roster-total strong{
  color:#b3a3ff;

  font-size:18px;
}

.roster-total span{
  margin-top:2px;

  color:#777f8c;

  font-size:8px;
}

.roster-search-wrap{
  position:relative;

  width:100%;

  margin-bottom:12px;
}

.roster-search-icon{
  position:absolute;

  left:13px;
  top:50%;

  transform:
    translateY(-50%);

  font-size:13px;

  pointer-events:none;
}

.roster-search{
  width:100%;
  height:46px;

  padding:
    0 15px
    0 40px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:14px;

  outline:none;

  background:var(--panel);

  color:#f3f4f6;

  font-family:inherit;

  font-size:12px;
}

.roster-search::placeholder{
  color:#646c78;
}

.roster-search:focus{
  border-color:
    rgba(124,92,255,.4);
}

.roster-filters{
  width:100%;

  margin-bottom:19px;

  padding:4px;

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:5px;

  border-radius:15px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.roster-filter{
  min-width:0;
  height:39px;

  padding:0 4px;

  border:0;
  border-radius:11px;

  background:transparent;

  color:#777f8c;

  font-size:9px;
  font-weight:750;
}

.roster-filter.active{
  color:#aa97ff;

  background:#23202e;
}

.roster-th-block{
  margin-bottom:22px;
}

.roster-section-label{
  display:block;

  margin-bottom:8px;

  color:#666f7e;

  font-size:9px;
  font-weight:850;

  letter-spacing:1.4px;
}

.roster-list{
  display:grid;

  grid-template-columns:1fr;

  gap:12px;
}

.player-card{
  position:relative;

  padding:15px;

  overflow:hidden;

  border-radius:19px;

  background:var(--panel);

  border:
    1px solid
    var(--border-soft);
}

.player-card.needs-attention{
  border-color:
    rgba(255,97,110,.13);
}

.player-card-top{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:10px;
}

.player-main-info{
  min-width:0;

  display:flex;
  align-items:center;

  gap:11px;
}

.player-th-icon{
  width:48px;
  height:48px;

  flex-shrink:0;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      rgba(124,92,255,.23),
      rgba(124,92,255,.07)
    );

  border:
    1px solid
    rgba(124,92,255,.17);
}

.player-th-icon strong{
  color:#c1b5ff;

  font-size:16px;

  line-height:1;
}

.player-th-icon span{
  margin-top:3px;

  color:#776d9e;

  font-size:7px;
  font-weight:850;
}

.player-name-box{
  min-width:0;
}

.player-name-row{
  min-width:0;

  display:flex;
  align-items:center;

  gap:5px;
}

.player-name-row h2{
  min-width:0;

  overflow:hidden;

  color:#f3f4f6;

  font-size:15px;
  font-weight:800;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.player-crown{
  flex-shrink:0;

  font-size:12px;
}

.player-tag{
  display:block;

  margin-top:3px;

  color:#6e7683;

  font-size:8px;
}

.player-role-row{
  margin-top:6px;
}

.player-role{
  display:inline-flex;

  padding:4px 7px;

  border-radius:7px;

  font-size:7px;
  font-weight:800;
}

.player-role.leader{
  color:#ffd270;

  background:
    rgba(255,194,70,.10);
}

.player-role.coleader{
  color:#aa98ff;

  background:
    rgba(124,92,255,.11);
}

.player-role.elder{
  color:#6fdb9a;

  background:
    rgba(72,209,124,.09);
}

.player-role.member{
  color:#8c94a1;

  background:
    rgba(255,255,255,.05);
}

.player-attention{
  flex-shrink:0;

  padding:5px 7px;

  border-radius:8px;

  color:#ff7b86;

  background:
    rgba(255,91,105,.09);

  font-size:7px;
  font-weight:800;
}

.player-league-row{
  margin-top:14px;
  padding-top:12px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  border-top:
    1px solid
    rgba(255,255,255,.045);
}

.player-league-row > div{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.player-league-label{
  margin-bottom:3px;

  color:#5f6875;

  font-size:7px;
  font-weight:800;

  letter-spacing:1px;
}

.player-league-row strong{
  overflow:hidden;

  color:#a7adb8;

  font-size:9px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.player-trophies{
  flex-shrink:0;

  color:#d7b85a;

  font-size:9px;
  font-weight:800;
}

.player-stats-grid{
  margin-top:12px;

  display:grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  gap:5px;
}

.player-stat{
  min-width:0;

  padding:9px 3px;

  display:flex;
  flex-direction:column;

  align-items:center;

  border-radius:10px;

  background:#101218;
}

.player-stat > span{
  max-width:100%;

  overflow:hidden;

  color:#68717e;

  font-size:7px;
  font-weight:750;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.player-stat strong{
  width:100%;
  flex:1;
  margin-top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  overflow-wrap:anywhere;

  color:#e7e8eb;

  font-size:10px;
}

.player-stat small{
  width:100%;
  margin-top:auto;
  padding-top:4px;
  text-align:center;

  color:#616a77;

  font-size:6px;
}

.player-stat{
  min-height:72px;
  display:grid;
  grid-template-rows:auto auto auto;
  align-content:center;
  row-gap:4px;
  align-items:center;
  text-align:center;
}

.player-stat > span{
  width:100%;
  text-align:center;
}

.player-stat strong{
  width:100%;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.player-stat small{
  width:100%;
  margin:0;
  padding:0;
  text-align:center;
}

.player-details-btn{
  width:100%;
  height:38px;

  margin-top:12px;

  padding:0 3px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  border:0;

  border-top:
    1px solid
    rgba(255,255,255,.045);

  background:transparent;

  color:#9788e7;

  font-size:9px;
  font-weight:750;
}

.player-details-btn span{
  font-size:20px;

  color:#686078;
}

.roster-empty > div{
  margin-bottom:10px;

  font-size:28px;
}

.roster-empty span{
  margin-top:6px;

  color:#747c89;

  font-size:10px;
}



/* =========================================
   PLAYER PAGE
========================================= */

.player-page{
  padding-bottom:105px;
}

.player-back-btn{
  display:inline-flex;
  align-items:center;

  margin-bottom:16px;

  color:#8d82cf;

  text-decoration:none;

  font-size:10px;
  font-weight:750;
}

.player-profile-hero{
  padding:17px;

  border-radius:21px;

  background:var(--panel);

  border:
    1px solid
    var(--border-soft);
}

.player-profile-main{
  display:flex;
  align-items:center;

  gap:13px;
}

.player-profile-th{
  width:62px;
  height:62px;

  flex-shrink:0;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      rgba(124,92,255,.28),
      rgba(124,92,255,.08)
    );

  border:
    1px solid
    rgba(124,92,255,.19);
}

.player-profile-th strong{
  color:#c4b9ff;

  font-size:22px;

  line-height:1;
}

.player-profile-th span{
  margin-top:4px;

  color:#796fa0;

  font-size:8px;
  font-weight:850;
}

.player-profile-name{
  min-width:0;
}

.player-profile-name > div{
  min-width:0;

  display:flex;
  align-items:center;

  gap:6px;
}

.player-profile-name h1{
  min-width:0;

  overflow:hidden;

  font-size:22px;
  font-weight:850;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.player-profile-crown{
  flex-shrink:0;

  font-size:15px;
}

.player-profile-tag{
  display:block;

  margin-top:4px;

  color:#6f7784;

  font-size:9px;
}

.player-profile-role{
  display:inline-flex;

  margin-top:7px;

  padding:4px 8px;

  border-radius:7px;

  font-size:7px;
  font-weight:850;
}

.player-profile-role.leader{
  color:#ffd16b;

  background:
    rgba(255,195,65,.10);
}

.player-profile-role.coleader{
  color:#ad9bff;

  background:
    rgba(124,92,255,.11);
}

.player-profile-role.elder{
  color:#71dc9d;

  background:
    rgba(72,209,124,.09);
}

.player-profile-role.member{
  color:#969daa;

  background:
    rgba(255,255,255,.05);
}

.player-profile-warning{
  margin-top:15px;

  padding:11px;

  display:flex;
  align-items:flex-start;

  gap:9px;

  border-radius:12px;

  background:
    rgba(255,92,107,.07);

  border:
    1px solid
    rgba(255,92,107,.10);
}

.player-profile-warning > span{
  font-size:14px;
}

.player-profile-warning strong{
  color:#ff858f;

  font-size:9px;
}

.player-profile-warning p{
  margin-top:3px;

  color:#8b7075;

  font-size:8px;

  line-height:1.4;
}

.player-profile-league{
  margin-top:15px;
  padding-top:13px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  border-top:
    1px solid
    rgba(255,255,255,.045);
}

.player-profile-league
> div:first-child{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.player-profile-league span{
  margin-bottom:4px;

  color:#626b78;

  font-size:7px;
  font-weight:850;

  letter-spacing:1px;
}

.player-profile-league strong{
  overflow:hidden;

  color:#b9bec7;

  font-size:10px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.player-profile-trophies{
  flex-shrink:0;

  display:flex;
  align-items:center;

  gap:5px;

  color:#d8b855;
}

.player-profile-trophies strong{
  color:#d8b855;

  font-size:12px;
}



/* =========================================
   PLAYER SWITCHES
========================================= */

.player-main-switch{
  width:100%;

  margin-top:15px;
  margin-bottom:15px;

  padding:4px;

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:5px;

  border-radius:15px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.player-main-switch-btn{
  height:43px;

  padding:0 5px;

  border:0;
  border-radius:11px;

  background:transparent;

  color:#777f8c;

  font-size:10px;
  font-weight:750;
}

.player-main-switch-btn.active{
  color:#b4a3ff;

  background:#252131;
}

.player-mode-content{
  display:none;
}

.player-mode-content.active{
  display:block;
}

.player-profile-tabs{
  width:100%;

  margin-top:15px;
  margin-bottom:17px;

  padding:4px;

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:5px;

  border-radius:15px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.player-profile-tab{
  height:40px;

  border:0;
  border-radius:11px;

  background:transparent;

  color:#777f8c;

  font-size:10px;
  font-weight:750;
}

.player-profile-tab.active{
  color:#b09eff;

  background:#23202e;
}

.player-profile-content{
  display:none;
}

.player-profile-content.active{
  display:block;
}



/* =========================================
   PLAYER SECTION HEAD
========================================= */

.player-profile-section-head{
  margin-bottom:11px;
}

.player-profile-section-head.second{
  margin-top:24px;
}

.player-profile-section-head > span{
  display:block;

  margin-bottom:5px;

  color:#666e7b;

  font-size:8px;
  font-weight:850;

  letter-spacing:1.3px;
}

.player-profile-section-head h2{
  font-size:17px;
  font-weight:800;
}



/* =========================================
   PLAYER MEMBERSHIP
========================================= */

.player-membership-card{
  margin-top:12px;

  overflow:hidden;

  border-radius:17px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.player-membership-row{
  min-height:70px;

  padding:12px 14px;

  display:flex;
  align-items:center;

  gap:11px;

  border-bottom:
    1px solid
    rgba(255,255,255,.045);
}

.player-membership-row:last-child{
  border-bottom:0;
}

.player-membership-icon{
  width:39px;
  height:39px;

  flex:0 0 auto;

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

  border-radius:12px;

  background:
    rgba(124,92,255,.10);

  font-size:18px;
}

.player-membership-row.tracking
.player-membership-icon{
  background:
    rgba(72,209,124,.08);
}

.player-membership-info{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.player-membership-info > span{
  color:#696f7d;

  font-size:7px;
  font-weight:850;

  letter-spacing:1.1px;
}

.player-membership-info > strong{
  margin-top:4px;

  color:#d2d5db;

  font-size:10px;

  line-height:1.35;
}

.player-membership-info > small{
  margin-top:4px;

  color:#6e7582;

  font-size:8px;

  line-height:1.35;
}

.player-membership-status{
  min-height:35px;

  margin:
    10px 12px 12px;

  padding:8px 10px;

  display:flex;
  align-items:center;

  gap:7px;

  border-radius:10px;

  font-size:8px;
  font-weight:750;
}

.player-membership-status.online{
  color:#74dc9e;

  background:
    rgba(72,209,124,.065);
}

.player-membership-status.online span{
  color:var(--green);
}

.player-membership-status.offline{
  color:#ff848e;

  background:
    rgba(255,105,118,.065);
}

.player-membership-status.offline span{
  color:var(--red);
}

.player-last-return{
  margin:
    -4px 12px 12px;

  padding:9px 10px;

  border-radius:10px;

  background:#101218;

  color:#707886;

  font-size:8px;
}

.player-last-return strong{
  color:#aaa2d3;
}



/* =========================================
   PLAYER OVERVIEW
========================================= */

.player-overview-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:9px;
}

.player-overview-card{
  min-height:110px;

  padding:13px;

  display:flex;
  flex-direction:column;

  border-radius:16px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.player-overview-card.games-wide{
  grid-column:span 2;
}

.player-overview-icon{
  margin-bottom:10px;

  font-size:18px;
}

.player-overview-card > span{
  color:#6f7784;

  font-size:8px;
  font-weight:750;
}

.player-overview-card strong{
  margin-top:5px;

  overflow-wrap:anywhere;

  color:#f0f1f4;

  font-size:17px;
}

.player-overview-card small{
  margin-top:3px;

  color:#757d89;

  font-size:8px;
}

.player-overview-card strong.no-data{
  color:#777f8b;

  font-size:11px;
}

.player-tracking-note,
.membership-history-note,
.general-info-note{
  margin-top:12px;

  padding:11px 12px;

  display:flex;
  align-items:flex-start;

  gap:8px;

  border-radius:13px;

  background:
    rgba(124,92,255,.045);

  border:
    1px solid
    rgba(124,92,255,.07);
}

.player-tracking-note > span,
.membership-history-note > span,
.general-info-note > span{
  flex-shrink:0;

  font-size:13px;
}

.player-tracking-note p,
.membership-history-note p,
.general-info-note p{
  color:#707786;

  font-size:8px;

  line-height:1.55;
}

.player-tracking-note strong{
  color:#9788e6;
}



/* =========================================
   PLAYER DETAILS
========================================= */

.player-detail-main-card{
  min-height:105px;

  padding:17px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(124,92,255,.11),
      rgba(19,22,29,1) 55%
    );

  border:
    1px solid
    rgba(124,92,255,.10);
}

.player-detail-main-card
> div:first-child{
  display:flex;
  flex-direction:column;
}

.player-detail-main-card span{
  margin-bottom:7px;

  color:#726992;

  font-size:8px;
  font-weight:850;

  letter-spacing:1px;
}

.player-detail-main-card strong{
  color:#f4f4f7;

  font-size:30px;
}

.player-detail-main-card strong small{
  color:#737b88;

  font-size:12px;
}

.player-detail-main-icon{
  flex-shrink:0;

  font-size:32px;
}

.player-detail-stats{
  margin-top:9px;

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:7px;
}

.player-detail-stats.two{
  grid-template-columns:
    repeat(2,minmax(0,1fr));
}

.player-detail-stats > div{
  min-height:72px;

  padding:10px 5px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  border-radius:13px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.045);
}

.player-detail-stats span{
  color:#6e7683;

  font-size:7px;
}

.player-detail-stats strong{
  margin-top:5px;

  color:#e1e3e6;

  font-size:11px;
}

.player-detail-stats strong.danger{
  color:#ff7783;
}

.player-activity-big-stat{
  margin-top:9px;

  padding:14px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  border-radius:14px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.045);
}

.player-activity-big-stat span{
  color:#747c89;

  font-size:9px;
}

.player-activity-big-stat strong{
  color:#c2b7ff;

  font-size:14px;
}

.player-donation-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:9px;
}

.player-donation-card{
  min-width:0;

  padding:15px;

  display:flex;
  flex-direction:column;

  border-radius:16px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.045);
}

.player-donation-card span{
  color:#707885;

  font-size:8px;
}

.player-donation-card strong{
  margin-top:7px;

  overflow-wrap:anywhere;

  font-size:19px;
}

.player-donation-card small{
  margin-top:4px;

  color:#656e7b;

  font-size:7px;
}

.player-games-card{
  padding:15px;

  border-radius:17px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.player-games-top{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;
}

.player-games-top
> div:first-child{
  display:flex;
  flex-direction:column;
}

.player-games-top span{
  color:#707885;

  font-size:8px;
}

.player-games-top strong{
  margin-top:5px;

  font-size:19px;
}

.player-games-top strong small{
  color:#69717e;

  font-size:9px;
}

.player-games-percent{
  flex-shrink:0;

  color:#ae9cff;

  font-size:15px;
  font-weight:850;
}

.player-games-progress{
  width:100%;
  height:7px;

  margin-top:14px;

  overflow:hidden;

  border-radius:20px;

  background:#252832;
}

.player-games-progress div{
  height:100%;

  border-radius:20px;

  background:var(--accent);
}

.player-no-data{
  min-height:105px;

  padding:16px;

  display:flex;
  align-items:center;

  gap:12px;

  border-radius:17px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.player-no-data-icon{
  width:44px;
  height:44px;

  flex-shrink:0;

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

  border-radius:13px;

  background:#181b23;

  font-size:20px;
}

.player-no-data strong{
  color:#b3b7c0;

  font-size:11px;
}

.player-no-data p{
  margin-top:4px;

  color:#6f7784;

  font-size:9px;

  line-height:1.45;
}



/* =========================================
   MEMBERSHIP HISTORY
========================================= */

.player-membership-history{
  width:100%;
}

.membership-history-card{
  padding:
    4px 14px 12px;

  overflow:hidden;

  border-radius:17px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.membership-history-event{
  position:relative;

  min-height:67px;

  padding:
    13px 0
    13px 31px;

  display:flex;
  align-items:center;

  border-bottom:
    1px solid
    rgba(255,255,255,.045);
}

.membership-history-event::before{
  content:"";

  position:absolute;

  left:8px;
  top:0;
  bottom:0;

  width:1px;

  background:
    rgba(255,255,255,.07);
}

.membership-history-dot{
  position:absolute;

  left:3px;
  top:50%;

  width:11px;
  height:11px;

  transform:
    translateY(-50%);

  border-radius:50%;

  border:
    2px solid
    var(--panel);
}

.membership-history-dot.joined{
  background:var(--green);

  box-shadow:
    0 0 0 3px
    rgba(72,209,124,.08);
}

.membership-history-dot.left{
  background:var(--red);

  box-shadow:
    0 0 0 3px
    rgba(255,105,118,.08);
}

.membership-history-dot.neutral{
  background:var(--accent);

  box-shadow:
    0 0 0 3px
    rgba(124,92,255,.09);
}

.membership-history-event
> div:last-child{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.membership-history-event span{
  color:#676f7c;

  font-size:7px;
  font-weight:850;

  letter-spacing:1px;
}

.membership-history-event strong{
  margin-top:4px;

  color:#d3d6dc;

  font-size:10px;
}

.membership-history-event small{
  margin-top:4px;

  color:#69717e;

  font-size:8px;

  line-height:1.4;
}

.membership-history-current{
  margin:
    11px 0
    0 31px;

  padding:8px 10px;

  display:flex;
  align-items:center;

  gap:7px;

  border-radius:10px;

  color:#74dc9e;

  background:
    rgba(72,209,124,.065);

  font-size:8px;
  font-weight:750;
}

.membership-history-current span{
  color:var(--green);

  font-size:9px;
}

.membership-history-current.outside{
  color:#ff848e;

  background:
    rgba(255,105,118,.065);
}

.membership-history-current.outside span{
  color:var(--red);
}

.membership-history-empty{
  padding:20px 5px;

  color:#737b88;

  font-size:9px;

  text-align:center;
}



/* =========================================
   GENERAL PLAYER STATS
========================================= */

.general-profile-info{
  margin-bottom:13px;
}

.general-profile-info
> div
> span{
  display:block;

  margin-bottom:5px;

  color:#676f7c;

  font-size:8px;
  font-weight:850;

  letter-spacing:1.3px;
}

.general-profile-info h2{
  font-size:18px;
  font-weight:800;
}

.general-profile-info > p{
  max-width:500px;

  margin-top:7px;

  color:#747c89;

  font-size:9px;

  line-height:1.5;
}

.general-stats-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:9px;
}

.general-stat-card{
  min-width:0;
  min-height:120px;

  padding:14px;

  display:flex;
  flex-direction:column;

  border-radius:17px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.general-stat-icon{
  width:34px;
  height:34px;

  margin-bottom:12px;

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

  border-radius:10px;

  background:
    rgba(124,92,255,.09);

  font-size:17px;
}

.general-stat-card > span{
  color:#707885;

  font-size:8px;
  font-weight:750;
}

.general-stat-card strong{
  margin-top:6px;

  overflow-wrap:anywhere;

  color:#eeeef2;

  font-size:18px;
}

.general-stat-card small{
  margin-top:4px;

  color:#646c79;

  font-size:7px;
}

.general-long-card{
  padding:0 14px;

  border-radius:17px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.general-long-row{
  min-height:62px;

  display:flex;
  align-items:center;

  border-bottom:
    1px solid
    rgba(255,255,255,.045);
}

.general-long-row:last-child{
  border-bottom:0;
}

.general-long-row > div{
  min-width:0;

  display:flex;
  align-items:center;

  gap:11px;
}

.general-long-icon{
  width:35px;
  height:35px;

  flex-shrink:0;

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

  border-radius:10px;

  background:#181b23;

  font-size:16px;
}

.general-long-row
> div
> div{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.general-long-row small{
  color:#666f7c;

  font-size:7px;
}

.general-long-row strong{
  margin-top:4px;

  overflow:hidden;

  color:#c8cbd1;

  font-size:10px;

  white-space:nowrap;
  text-overflow:ellipsis;
}



/* =========================================
   PROFILE PAGE
========================================= */

.profile-page{
  padding-bottom:110px;
}

.profile-page-head{
  margin-bottom:18px;
}

.profile-page-head h1{
  font-size:30px;
  font-weight:850;

  letter-spacing:-.6px;
}

.profile-page-head
> div
> p:last-child{
  margin-top:6px;

  color:#818996;

  font-size:12px;
}

.my-profile-card{
  padding:16px;

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      rgba(124,92,255,.10),
      #13161d 58%
    );

  border:
    1px solid
    rgba(124,92,255,.10);
}

.my-profile-main{
  min-width:0;

  display:flex;
  align-items:center;

  gap:12px;
}

.my-profile-avatar{
  width:58px;
  height:58px;

  flex-shrink:0;

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

  border-radius:17px;

  color:#ded8ff;

  background:
    linear-gradient(
      145deg,
      #8062f3,
      #5940c4
    );

  font-size:23px;
  font-weight:900;
}

.my-profile-name{
  min-width:0;
}

.my-profile-name > span{
  color:#756b9b;

  font-size:7px;
  font-weight:850;

  letter-spacing:1px;
}

.my-profile-name h2{
  min-width:0;

  margin-top:3px;

  overflow:hidden;

  color:#f4f5f7;

  font-size:20px;
  font-weight:850;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.my-profile-name p{
  margin-top:4px;

  color:#777f8c;

  font-size:9px;
}

.my-profile-status{
  margin-top:14px;
  padding-top:12px;

  display:flex;
  align-items:center;

  gap:7px;

  border-top:
    1px solid
    rgba(255,255,255,.045);

  color:#70db9b;

  font-size:8px;
  font-weight:750;
}

.my-profile-status span{
  color:var(--green);

  font-size:8px;
}

.profile-section-head{
  margin-top:24px;
  margin-bottom:10px;
}

.profile-section-head > span{
  display:block;

  margin-bottom:5px;

  color:#666e7b;

  font-size:8px;
  font-weight:850;

  letter-spacing:1.3px;
}

.profile-section-head h2{
  font-size:17px;
  font-weight:800;
}



/* =========================================
   LINKED PLAYER
========================================= */

.linked-player-card{
  padding:15px;

  border-radius:19px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.linked-player-top{
  min-width:0;

  display:flex;
  align-items:center;

  gap:11px;
}

.linked-player-th{
  width:50px;
  height:50px;

  flex-shrink:0;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  border-radius:14px;

  background:
    rgba(124,92,255,.12);

  border:
    1px solid
    rgba(124,92,255,.15);
}

.linked-player-th strong{
  color:#c2b5ff;

  font-size:17px;

  line-height:1;
}

.linked-player-th span{
  margin-top:3px;

  color:#766c9e;

  font-size:7px;
  font-weight:850;
}

.linked-player-info{
  min-width:0;
}

.linked-player-name{
  min-width:0;

  display:flex;
  align-items:center;

  gap:5px;
}

.linked-player-name h2{
  min-width:0;

  overflow:hidden;

  font-size:16px;
  font-weight:850;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.linked-player-name span{
  flex-shrink:0;

  font-size:12px;
}

.linked-player-info > p{
  margin-top:3px;

  color:#6c7481;

  font-size:8px;
}

.linked-player-role{
  display:inline-flex;

  margin-top:6px;

  padding:4px 7px;

  border-radius:7px;

  color:#ffd16c;

  background:
    rgba(255,193,62,.09);

  font-size:7px;
  font-weight:800;
}

.linked-player-clan{
  margin-top:14px;
  padding-top:12px;

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:8px;

  border-top:
    1px solid
    rgba(255,255,255,.045);
}

.linked-player-clan > div{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:4px;
}

.linked-player-clan span{
  color:#626a77;

  font-size:7px;
  font-weight:850;

  letter-spacing:.8px;
}

.linked-player-clan strong{
  min-width:0;

  overflow:hidden;

  color:#b8bdc6;

  font-size:9px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.open-player-profile{
  width:100%;
  height:42px;

  margin-top:14px;

  padding:0 10px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  border-radius:11px;

  background:
    rgba(124,92,255,.08);

  color:#ae9eff;

  text-decoration:none;

  font-size:9px;
  font-weight:750;
}

.open-player-profile span{
  font-size:18px;
}



/* =========================================
   PROFILE ACCESS
========================================= */

.profile-access-card{
  padding:14px;

  border-radius:18px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.profile-access-main{
  display:flex;
  align-items:center;

  gap:11px;

  padding-bottom:13px;

  border-bottom:
    1px solid
    rgba(255,255,255,.045);
}

.profile-access-icon{
  width:40px;
  height:40px;

  flex-shrink:0;

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

  border-radius:12px;

  background:
    rgba(255,193,62,.08);

  font-size:17px;
}

.profile-access-main
> div:last-child{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.profile-access-main strong{
  color:#e2e3e7;

  font-size:11px;
}

.profile-access-main span{
  margin-top:3px;

  color:#707885;

  font-size:8px;
}

.profile-access-list{
  padding-top:3px;
}

.profile-access-list > div{
  min-height:43px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  border-bottom:
    1px solid
    rgba(255,255,255,.035);
}

.profile-access-list
> div:last-child{
  border-bottom:0;
}

.profile-access-list span{
  color:#7d8591;

  font-size:8px;
}

.profile-access-list strong{
  color:#9d90e5;

  font-size:8px;

  text-align:right;
}



/* =========================================
   PROFILE SETTINGS
========================================= */

.profile-settings-card{
  overflow:hidden;

  border-radius:18px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.profile-setting-row{
  min-height:64px;

  padding:10px 13px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  border-bottom:
    1px solid
    rgba(255,255,255,.04);
}

.profile-setting-row:last-child{
  border-bottom:0;
}

.profile-setting-info{
  min-width:0;

  display:flex;
  align-items:center;

  gap:10px;
}

.profile-setting-icon{
  width:36px;
  height:36px;

  flex-shrink:0;

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

  border-radius:11px;

  background:#191c24;

  font-size:15px;
}

.profile-setting-info
> div:last-child{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.profile-setting-info strong{
  color:#cdd0d6;

  font-size:9px;
}

.profile-setting-info span{
  margin-top:4px;

  color:#686f7c;

  font-size:7px;
}



/* Notification help */

.notification-title-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
}

.profile-setting-info .notification-title-row strong{
  margin:0;
}

.profile-setting-info .notification-help-button{
  width:15px;
  height:15px;
  margin:0;

  flex:0 0 15px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(174,158,255,.45);
  border-radius:50%;

  background:rgba(124,92,255,.08);
  color:#ae9eff;

  font-size:9px;
  font-weight:800;
  line-height:1;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.profile-setting-info .notification-help-button:focus-visible{
  outline:1px solid #ae9eff;
  outline-offset:2px;
}

.profile-setting-info .notification-help-text{
  max-width:330px;
  margin-top:7px;

  padding:7px 9px;

  border:1px solid rgba(124,92,255,.14);
  border-radius:8px;

  background:rgba(124,92,255,.06);
  color:#8d93a0;

  font-size:8px;
  line-height:1.45;
}

.profile-setting-info .notification-help-text[hidden]{
  display:none;
}


/* =========================================
   PROFILE SWITCH
========================================= */

.profile-switch{
  position:relative;

  width:42px;
  height:24px;

  flex-shrink:0;
}

.profile-switch input{
  position:absolute;

  opacity:0;

  pointer-events:none;
}

.profile-switch > span{
  position:absolute;

  inset:0;

  border-radius:30px;

  background:#292d36;

  transition:
    background .2s ease;
}

.profile-switch > span::before{
  content:"";

  position:absolute;

  left:3px;
  top:3px;

  width:18px;
  height:18px;

  border-radius:50%;

  background:#747b87;

  transition:
    transform .2s ease,
    background .2s ease;
}

.profile-switch
input:checked
+ span{
  background:
    rgba(124,92,255,.34);
}

.profile-switch
input:checked
+ span::before{
  transform:
    translateX(18px);

  background:#9f8bff;
}



/* =========================================
   PROFILE PUSH NOTIFICATIONS
========================================= */

.profile-notification-control{
  padding:13px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.profile-notification-status{
  display:flex;
  align-items:center;
  gap:8px;
}

.profile-notification-status > span{
  width:8px;
  height:8px;
  flex-shrink:0;
  border-radius:50%;
  background:#666d78;
}

.profile-notification-status > span.active{
  background:var(--green);
}

.profile-notification-status > span.error{
  background:var(--red);
}

.profile-notification-status strong{
  color:#8b93a1;
  font-size:8px;
  font-weight:750;
}

.profile-notification-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}

.profile-notification-actions button{
  min-height:38px;
  padding:0 13px;
  border:1px solid rgba(124,92,255,.18);
  border-radius:11px;
  background:rgba(124,92,255,.10);
  color:#b9a8ff;
  font:inherit;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

.profile-notification-actions button:last-child{
  background:#191c24;
  border-color:rgba(255,255,255,.06);
  color:#9299a5;
}

.profile-notification-actions button:disabled{
  opacity:.45;
  cursor:default;
}

/* =========================================
   PROFILE LINK STATUS
========================================= */

.profile-link-card{
  min-height:68px;

  padding:13px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  border-radius:17px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.05);
}

.profile-link-status{
  min-width:0;

  display:flex;
  align-items:center;

  gap:10px;
}

.profile-link-icon{
  width:39px;
  height:39px;

  flex-shrink:0;

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

  border-radius:11px;

  background:
    rgba(72,209,124,.07);

  font-size:16px;
}

.profile-link-status
> div:last-child{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.profile-link-status strong{
  color:#ced1d7;

  font-size:9px;
}

.profile-link-status span{
  margin-top:4px;

  color:#6b7380;

  font-size:8px;
}

.profile-linked-badge{
  flex-shrink:0;

  padding:5px 7px;

  border-radius:8px;

  color:#71dc9d;

  background:
    rgba(72,209,124,.08);

  font-size:7px;
  font-weight:800;
}

.profile-linked-badge.warning{
  color:#e7be60;

  background:
    rgba(255,200,87,.08);
}

.profile-linked-badge.error{
  color:#ff7d88;

  background:
    rgba(255,105,118,.08);
}



/* =========================================
   PROFILE LOGOUT
========================================= */

.profile-logout-btn{
  width:100%;
  height:47px;

  margin-top:25px;

  display:flex;

  align-items:center;
  justify-content:center;

  gap:8px;

  border:
    1px solid
    rgba(255,92,107,.09);

  border-radius:14px;

  background:
    rgba(255,92,107,.055);

  color:#ff7b86;

  font-size:9px;
  font-weight:750;
}

.profile-logout-btn span{
  font-size:15px;
}

.profile-version{
  margin-top:15px;

  color:#4f5661;

  font-size:7px;

  text-align:center;
}

.profile-version span{
  margin:0 4px;
}



/* =========================================
   AUTH
========================================= */

.auth-body{
  min-height:100vh;

  padding-bottom:0;

  background:
    radial-gradient(
      circle at top right,
      rgba(124,92,255,.12),
      transparent 35%
    ),
    #0b0d12;
}

.auth-page{
  width:100%;
  min-height:100vh;
  max-width:470px;

  margin:0 auto;

  padding:
    42px 17px 30px;
}

.auth-brand{
  margin-bottom:27px;

  display:flex;
  flex-direction:column;

  align-items:center;

  text-align:center;
}

.auth-logo{
  width:67px;
  height:67px;

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

  border-radius:21px;

  background:
    linear-gradient(
      145deg,
      rgba(124,92,255,.28),
      rgba(124,92,255,.08)
    );

  border:
    1px solid
    rgba(124,92,255,.18);

  font-size:31px;

  box-shadow:
    0 15px 50px
    rgba(0,0,0,.22);
}

.auth-brand h1{
  margin-top:13px;

  color:#f4f5f7;

  font-size:25px;
  font-weight:900;
}

.auth-brand p{
  margin-top:5px;

  color:#69717e;

  font-size:9px;
}

.auth-card{
  padding:5px;

  border-radius:22px;

  background:#11141a;

  border:
    1px solid
    rgba(255,255,255,.055);

  box-shadow:
    0 20px 70px
    rgba(0,0,0,.20);
}

.auth-tabs{
  padding:3px;

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:4px;

  border-radius:15px;

  background:#0d0f14;
}

.auth-tab{
  height:42px;

  border:0;
  border-radius:11px;

  background:transparent;

  color:#646c79;

  font-size:9px;
  font-weight:800;
}

.auth-tab.active{
  color:#b7a8ff;

  background:#24202f;
}

.auth-content{
  display:none;

  padding:
    21px 13px 15px;
}

.auth-content.active{
  display:block;
}

.auth-title{
  margin-bottom:19px;
}

.auth-title > span{
  display:block;

  margin-bottom:5px;

  color:#74699d;

  font-size:7px;
  font-weight:900;

  letter-spacing:1.2px;
}

.auth-title h2{
  color:#f0f1f4;

  font-size:20px;
  font-weight:850;
}

.auth-title p{
  margin-top:5px;

  color:#707885;

  font-size:9px;
}

.auth-form{
  display:flex;
  flex-direction:column;

  gap:14px;
}

.auth-field{
  display:flex;
  flex-direction:column;

  gap:6px;
}

.auth-field > span{
  color:#858c97;

  font-size:8px;
  font-weight:750;
}

.auth-field input{
  width:100%;
  height:48px;

  padding:0 13px;

  outline:none;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius:13px;

  background:#181b22;

  color:#eef0f3;

  font-size:10px;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.auth-field input::placeholder{
  color:#515965;
}

.auth-field input:focus{
  border-color:
    rgba(124,92,255,.40);

  background:#191c25;

  box-shadow:
    0 0 0 3px
    rgba(124,92,255,.06);
}

.auth-password-field{
  position:relative;
}

.auth-password-field input{
  padding-right:48px;
}

.auth-password-toggle{
  position:absolute;

  top:50%;
  right:5px;

  width:39px;
  height:38px;

  transform:
    translateY(-50%);

  border:0;
  border-radius:10px;

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

  background:transparent;

  font-size:13px;

  opacity:.65;
}

.auth-main-btn{
  width:100%;
  min-height:48px;

  margin-top:3px;

  border:0;
  border-radius:13px;

  color:#f7f5ff;

  background:
    linear-gradient(
      135deg,
      #7c5cff,
      #6747dc
    );

  font-size:10px;
  font-weight:850;

  box-shadow:
    0 10px 30px
    rgba(124,92,255,.15);
}

.auth-main-btn:active{
  transform:
    scale(.985);
}

.auth-main-btn:disabled{
  opacity:.35;

  cursor:not-allowed;

  box-shadow:none;
}

.auth-secondary-btn{
  width:100%;
  min-height:44px;

  margin-top:9px;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:12px;

  color:#808895;

  background:#171a21;

  font-size:9px;
  font-weight:750;
}

.auth-forgot-btn,
.auth-back-btn{
  width:100%;

  margin-top:15px;

  border:0;

  background:transparent;

  color:#7669ad;

  font-size:8px;
  font-weight:750;

  text-align:center;
}

.auth-clash-icon{
  width:58px;
  height:58px;

  margin:
    5px auto 20px;

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

  border-radius:18px;

  background:
    rgba(124,92,255,.09);

  border:
    1px solid
    rgba(124,92,255,.11);

  font-size:27px;
}

.auth-tag-help,
.auth-small-note{
  padding:10px 11px;

  display:flex;
  align-items:flex-start;

  gap:8px;

  border-radius:11px;

  background:
    rgba(124,92,255,.045);

  border:
    1px solid
    rgba(124,92,255,.07);
}

.auth-small-note{
  margin-top:-4px;

  padding:9px 10px;
}

.auth-tag-help > span,
.auth-small-note > span{
  flex-shrink:0;

  font-size:11px;
}

.auth-tag-help p,
.auth-small-note p{
  color:#69717e;

  font-size:7px;

  line-height:1.5;
}



/* =========================================
   AUTH FOUND PLAYER
========================================= */

.auth-found-player{
  padding:14px;

  display:flex;
  align-items:center;

  gap:11px;

  border-radius:16px;

  background:#171a21;

  border:
    1px solid
    rgba(255,255,255,.05);
}

.auth-found-th{
  width:49px;
  height:49px;

  flex-shrink:0;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  border-radius:14px;

  background:
    rgba(124,92,255,.11);
}

.auth-found-th strong{
  color:#c1b5fb;

  font-size:17px;
}

.auth-found-th span{
  margin-top:2px;

  color:#746b99;

  font-size:7px;
  font-weight:900;
}

.auth-found-info{
  min-width:0;
}

.auth-found-info > div{
  min-width:0;

  display:flex;
  align-items:center;

  gap:5px;
}

.auth-found-info h3{
  min-width:0;

  overflow:hidden;

  color:#e8e9ec;

  font-size:15px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.auth-found-info > p{
  margin-top:3px;

  color:#6f7783;

  font-size:8px;
}

.auth-found-info > small{
  display:block;

  margin-top:6px;

  color:#9a90c8;

  font-size:8px;
}

.auth-found-details{
  margin:
    10px 0 16px;

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:6px;
}

.auth-found-details > div{
  min-height:58px;

  padding:8px;

  display:flex;
  flex-direction:column;

  justify-content:center;

  border-radius:11px;

  background:#15181f;

  border:
    1px solid
    rgba(255,255,255,.04);
}

.auth-found-details span{
  color:#606875;

  font-size:7px;
}

.auth-found-details strong{
  margin-top:4px;

  overflow:hidden;

  color:#adb2bb;

  font-size:8px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.auth-verification-note{
  margin-top:14px;

  padding:10px;

  display:flex;
  align-items:flex-start;

  gap:8px;

  border-radius:11px;

  background:
    rgba(72,209,124,.04);

  border:
    1px solid
    rgba(72,209,124,.06);
}

.auth-verification-note > span{
  font-size:11px;
}

.auth-verification-note p{
  color:#68756d;

  font-size:7px;

  line-height:1.5;
}

.auth-footer{
  margin-top:20px;

  color:#454c57;

  font-size:7px;

  text-align:center;
}

.auth-footer span{
  margin:0 5px;
}



/* =========================================
   BACKUP / RECOVERY
========================================= */

.backup-code-icon,
.recovery-icon{
  width:62px;
  height:62px;

  margin:
    4px auto 18px;

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

  border-radius:19px;

  background:
    rgba(124,92,255,.09);

  border:
    1px solid
    rgba(124,92,255,.12);

  font-size:28px;
}

.backup-code-icon.success{
  background:
    rgba(72,209,124,.07);

  border-color:
    rgba(72,209,124,.10);
}

.backup-code-card{
  padding:17px;

  display:flex;
  flex-direction:column;

  align-items:center;

  border-radius:17px;

  background:#171a21;

  border:
    1px solid
    rgba(124,92,255,.12);
}

.backup-code-card > span{
  color:#71679b;

  font-size:7px;
  font-weight:900;

  letter-spacing:1.2px;
}

.backup-code-card > strong{
  margin-top:10px;

  overflow-wrap:anywhere;

  color:#d8d1ff;

  font-size:21px;
  font-weight:900;

  letter-spacing:2px;

  text-align:center;
}

.backup-code-card > button{
  min-height:36px;

  margin-top:14px;

  padding:0 13px;

  border:0;
  border-radius:10px;

  color:#9e8cf3;

  background:
    rgba(124,92,255,.09);

  font-size:8px;
  font-weight:800;
}

.backup-warning{
  margin-top:11px;

  padding:11px;

  display:flex;
  align-items:flex-start;

  gap:8px;

  border-radius:12px;

  background:
    rgba(255,193,62,.045);

  border:
    1px solid
    rgba(255,193,62,.07);
}

.backup-warning > span{
  flex-shrink:0;

  font-size:12px;
}

.backup-warning p{
  color:#807761;

  font-size:8px;

  line-height:1.5;
}

.backup-confirm{
  min-height:45px;

  margin-top:11px;

  padding:10px;

  display:flex;
  align-items:center;

  gap:9px;

  border-radius:11px;

  background:#15181f;

  border:
    1px solid
    rgba(255,255,255,.04);
}

.backup-confirm input{
  width:17px;
  height:17px;

  accent-color:var(--accent);
}

.backup-confirm span{
  color:#8b929d;

  font-size:8px;
  font-weight:750;
}

#recoveryCode{
  text-transform:uppercase;

  letter-spacing:1px;
}



/* =========================================
   CLASH VERIFICATION
========================================= */

.verification-shield{
  width:64px;
  height:64px;

  margin:
    3px auto 18px;

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

  border-radius:20px;

  background:
    rgba(124,92,255,.09);

  border:
    1px solid
    rgba(124,92,255,.13);

  font-size:29px;
}

.verification-player-card{
  padding:13px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  border-radius:15px;

  background:#171a21;

  border:
    1px solid
    rgba(255,255,255,.05);
}

.verification-player-card
> div:first-child{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.verification-player-card
> div:first-child
> span{
  color:#686f7e;

  font-size:7px;
  font-weight:850;

  letter-spacing:1px;
}

.verification-player-card strong{
  margin-top:4px;

  overflow:hidden;

  color:#e4e6e9;

  font-size:14px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.verification-player-card small{
  margin-top:3px;

  color:#717986;

  font-size:8px;
}

.verification-clan-badge{
  flex-shrink:0;

  padding:6px 8px;

  border-radius:9px;

  color:#aa9bec;

  background:
    rgba(124,92,255,.08);

  font-size:7px;
  font-weight:750;
}

.verification-steps{
  margin:
    12px 0 16px;

  padding:4px 12px;

  border-radius:15px;

  background:var(--panel);

  border:
    1px solid
    rgba(255,255,255,.045);
}

.verification-steps > div{
  min-height:53px;

  display:flex;
  align-items:center;

  gap:10px;

  border-bottom:
    1px solid
    rgba(255,255,255,.04);
}

.verification-steps
> div:last-child{
  border-bottom:0;
}

.verification-steps
> div
> span{
  width:25px;
  height:25px;

  flex-shrink:0;

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

  border-radius:8px;

  color:#aa9cff;

  background:
    rgba(124,92,255,.09);

  font-size:8px;
  font-weight:900;
}

.verification-steps p{
  color:#7b838f;

  font-size:8px;

  line-height:1.45;
}

.verification-security{
  padding:10px;

  display:flex;
  align-items:flex-start;

  gap:8px;

  border-radius:11px;

  background:
    rgba(72,209,124,.04);

  border:
    1px solid
    rgba(72,209,124,.07);
}

.verification-security > span{
  flex-shrink:0;

  font-size:12px;
}

.verification-security p{
  color:#6d7d72;

  font-size:7px;

  line-height:1.5;
}

.verification-demo{
  margin-top:14px;

  padding:10px;

  border-radius:11px;

  background:
    rgba(255,193,62,.035);

  border:
    1px dashed
    rgba(255,193,62,.10);
}

.verification-demo span{
  display:block;

  color:#8e805d;

  font-size:6px;
  font-weight:900;

  letter-spacing:1px;
}

.verification-demo p{
  margin-top:4px;

  color:#736c59;

  font-size:7px;

  line-height:1.5;
}

.verification-success-icon{
  width:72px;
  height:72px;

  margin:
    5px auto 17px;

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

  border-radius:50%;

  color:#7ae0a2;

  background:
    rgba(72,209,124,.08);

  border:
    1px solid
    rgba(72,209,124,.14);

  font-size:30px;
  font-weight:900;
}

.verification-success-title{
  text-align:center;
}

.verification-success-title > span{
  color:#68a87f;

  font-size:7px;
  font-weight:900;

  letter-spacing:1.2px;
}

.verification-success-title h2{
  margin-top:5px;

  color:#edf0f1;

  font-size:20px;
}

.verification-success-title p{
  max-width:280px;

  margin:
    7px auto 0;

  color:#727b86;

  font-size:8px;

  line-height:1.5;
}

.verified-player{
  margin:
    19px 0 16px;

  padding:13px;

  display:flex;
  align-items:center;

  gap:10px;

  border-radius:15px;

  background:#171a21;

  border:
    1px solid
    rgba(72,209,124,.08);
}

.verified-player-icon{
  width:39px;
  height:39px;

  flex-shrink:0;

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

  border-radius:11px;

  background:
    rgba(124,92,255,.08);

  font-size:17px;
}

.verified-player
> div:nth-child(2){
  min-width:0;

  flex:1;

  display:flex;
  flex-direction:column;
}

.verified-player strong{
  overflow:hidden;

  color:#d9dce0;

  font-size:11px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.verified-player
> div:nth-child(2)
> span{
  margin-top:3px;

  color:#6e7682;

  font-size:8px;
}

.verified-badge{
  flex-shrink:0;

  padding:5px 7px;

  border-radius:8px;

  color:#72dc9c;

  background:
    rgba(72,209,124,.07);

  font-size:7px;
  font-weight:800;
}



/* =========================================
   TABLET
========================================= */

@media(min-width:700px){

  :root{
    --nav-height:82px;
  }

  .header{
    padding:20px 28px;
  }

  .content{
    padding:28px;
  }

  .clan-icon{
    width:64px;
    height:64px;

    font-size:34px;
  }

  .clan-info h1{
    font-size:25px;
  }

  .profile-btn{
    height:48px;

    padding:0 17px;

    font-size:13px;
  }

  .welcome h2{
    font-size:34px;
  }

  .stats{
    grid-template-columns:
      repeat(4,minmax(0,1fr));

    gap:13px;
  }

  .stat-card{
    min-height:155px;
  }

  .stat-value{
    font-size:23px;
  }

  .nav-icon{
    font-size:23px;
  }

  .nav-text{
    font-size:11px;
  }

  .wars-head h1,
  .activity-head h1,
  .announcements-head h1,
  .bases-head h1,
  .roster-head h1,
  .profile-page-head h1{
    font-size:35px;
  }

  .war-tabs{
    max-width:420px;
  }

  .activity-tabs{
    max-width:520px;
  }

  .period-switch{
    max-width:360px;

    margin-bottom:17px;
  }

  .period-btn{
    height:41px;

    font-size:12px;
  }

  .war-main-card,
  .league-card,
  .activity-main-card{
    min-height:130px;

    padding:22px;
  }

  .war-main-icon,
  .league-icon,
  .activity-main-icon{
    width:66px;
    height:66px;

    font-size:34px;
  }

  .war-main-card h2,
  .league-card h2{
    font-size:26px;
  }

  .activity-main-info h2{
    font-size:25px;
  }

  .war-stat,
  .activity-stat{
    min-height:105px;
  }

  .war-stat strong,
  .activity-stat strong{
    font-size:26px;
  }

  .war-history-card{
    min-height:82px;

    padding:14px 16px;
  }

  .war-history-info strong{
    font-size:14px;
  }

  .war-score strong{
    font-size:17px;
  }

  .activity-player-card,
  .donation-player,
  .games-player,
  .attention-player{
    min-height:80px;

    padding:14px 16px;
  }

  .announcement-filters{
    max-width:430px;
  }

  .announcement-card{
    padding:20px;
  }

  .announcement-card h2{
    font-size:19px;
  }

  .announcement-card > p{
    font-size:13px;
  }

  .announcement-card-menu,
  .base-card-menu{
    width:185px;
  }

  .announcement-card-menu button,
  .base-card-menu button{
    height:45px;

    font-size:12px;
  }

  .announcement-modal,
  .base-modal{
    align-items:center;

    padding:
      20px;
  }

  .announcement-modal-card,
  .base-modal-card{
    border-radius:24px;
  }

  .bases-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:15px;
  }

  .base-type-filters{
    max-width:440px;
  }

  .roster-list{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:14px;
  }

  .roster-filters{
    max-width:520px;
  }

  .player-card{
    padding:17px;
  }

  .player-profile-hero{
    padding:21px;
  }

  .player-main-switch,
  .player-profile-tabs{
    max-width:500px;
  }

  .player-overview-grid{
    grid-template-columns:
      repeat(5,minmax(0,1fr));
  }
  .player-overview-card.games-wide{
    grid-column:auto;
  }

  .player-overview-card{
    min-height:120px;
  }

  .general-stats-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .general-stat-card{
    min-height:130px;
  }

  .player-membership-row{
    min-height:76px;

    padding:14px 16px;
  }

  .player-membership-info > strong{
    font-size:11px;
  }

  .membership-history-card{
    padding:
      5px 17px 14px;
  }

  .membership-history-event{
    min-height:72px;
  }

  .membership-history-event strong{
    font-size:11px;
  }

  .membership-history-event small{
    font-size:9px;
  }

  .my-profile-card{
    padding:20px;
  }

  .profile-settings-card,
  .profile-access-card,
  .linked-player-card,
  .profile-link-card{
    max-width:700px;
  }

  .auth-page{
    max-width:500px;

    padding-top:60px;
  }

  .auth-card{
    padding:6px;
  }

  .auth-content{
    padding:
      25px 20px 20px;
  }

  .auth-title h2{
    font-size:22px;
  }

  .backup-code-card > strong{
    font-size:24px;
  }

}



/* =========================================
   VERY SMALL PHONES
========================================= */

@media(max-width:370px){

  .header{
    padding-left:12px;
    padding-right:12px;
  }

  .content{
    padding-left:12px;
    padding-right:12px;
  }

  .clan-icon{
    width:48px;
    height:48px;

    font-size:25px;
  }

  .clan-info h1{
    font-size:17px;
  }

  .profile-btn{
    padding:0 10px;
  }

  .profile-btn > span:last-child{
    display:none;
  }

  .nav-text{
    font-size:8px;
  }

  .activity-tab{
    font-size:10px;
  }

  .roster-filter{
    font-size:8px;
  }

  .player-stats-grid{
    gap:3px;
  }

  .player-stat{
    padding-left:2px;
    padding-right:2px;
  }

}



/* =========================================
   REDUCED MOTION
========================================= */

@media(
  prefers-reduced-motion:
  reduce
){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;

    transition:none !important;

    animation:none !important;
  }

}

/* =========================================
   CLANMETRIC FOOTER
========================================= */

.site-footer{
  width:100%;
  max-width:1050px;

  margin:8px auto 0;
  padding:18px 16px 28px;

  color:var(--muted-dark);
  text-align:center;
}

.site-footer-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 14px;

  margin-bottom:10px;
}

.site-footer-links a{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-decoration:none;
}

.site-footer-links a:hover{
  color:var(--text);
}

.site-footer p{
  max-width:720px;
  margin:0 auto;

  font-size:10px;
  line-height:1.55;
}

.auth-footer a{
  color:#68717e;
  text-decoration:none;
}

.auth-footer a:hover{
  color:#aab1bd;
}

.auth-footer-note{
  max-width:360px;
  margin:10px auto 0;
  line-height:1.55;
}

/* =========================================
   ЮРИДИЧЕСКИЕ СТРАНИЦЫ
========================================= */

.legal-body{
  padding-bottom:0;
}

.legal-header{
  position:sticky;
  top:0;
  z-index:20;

  border-bottom:1px solid var(--border-soft);
  background:rgba(11,13,18,.94);
  backdrop-filter:blur(14px);
}

.legal-header-inner{
  width:100%;
  max-width:880px;
  margin:0 auto;
  padding:14px 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.legal-brand{
  font-size:17px;
  font-weight:900;
  text-decoration:none;
}

.legal-back{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}

.legal-page{
  width:100%;
  max-width:880px;
  margin:0 auto;
  padding:34px 16px 44px;
}

.legal-page h1{
  margin-bottom:8px;
  font-size:30px;
  line-height:1.15;
}

.legal-updated{
  margin-bottom:26px;
  color:var(--muted-dark);
  font-size:11px;
}

.legal-card{
  margin-bottom:14px;
  padding:18px;

  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel);
}

.legal-card h2{
  margin-bottom:9px;
  font-size:16px;
}

.legal-card p,
.legal-card li{
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

.legal-card ul{
  padding-left:18px;
}

.legal-card li + li{
  margin-top:5px;
}

.legal-note{
  border-color:rgba(124,92,255,.25);
  background:var(--accent-soft);
}

.legal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.legal-button{
  min-height:42px;
  padding:0 14px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--border);
  border-radius:11px;
  background:var(--panel-soft);

  color:var(--text);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}

@media (max-width:600px){
  .legal-page h1{
    font-size:25px;
  }

  .site-footer-links{
    gap:8px 11px;
  }
}

/* ClanMetric production additions */
#rotateRecoveryButton{
  margin-top:14px;
  border-color:rgba(124,92,255,.13);
  background:rgba(124,92,255,.07);
  color:#b9aaff;
}
.auth-runtime-message{
  margin:0 0 12px;
}
#deleteAccountBox{
  margin-top:14px;
  display:grid;
  gap:12px;
}
#deleteAccountStatus{
  min-height:1.4em;
}

/* Empty announcements */
.announcements-empty{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:3px;align-items:start;padding:18px 16px;border:1px solid rgba(124,92,255,.08);border-radius:16px;background:rgba(124,92,255,.045)}
.announcements-empty>div:first-child{grid-column:1;grid-row:1/span 2}
.announcements-empty>strong{grid-column:2;grid-row:1;display:block}
.announcements-empty>span{grid-column:2;grid-row:2;display:block;color:rgba(255,255,255,.58)}


/* Announcement actions dropdown */
.announcement-menu-wrap{
  position:relative;
}

.announcement-menu-btn{
  width:38px;
  height:34px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.045);
  color:inherit;
  font-size:23px;
  line-height:1;
  cursor:pointer;
}

.announcement-menu-btn:hover{
  background:rgba(255,255,255,.09);
}

.announcement-menu{
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  z-index:50;
  display:none;
  min-width:190px;
  padding:6px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:#171a22;
  box-shadow:0 16px 45px rgba(0,0,0,.4);
}

.announcement-menu-wrap.open .announcement-menu{
  display:grid;
  gap:2px;
}

.announcement-menu button{
  width:100%;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
}

.announcement-menu button:hover{
  background:rgba(255,255,255,.07);
}

.announcement-menu .announcement-delete-btn{
  color:#ff8796;
}


@media (max-width: 600px){
  .cwl-result{
    display:grid;
    grid-template-rows:28px 24px;
    align-content:center;
    justify-items:center;
    gap:5px;
  }

  .cwl-result span{
    width:100%;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1.2;
  }

  #cwlPlaceLabel{
    white-space:nowrap;
    font-size:9px;
  }

  .cwl-result strong{
    display:flex;
    align-items:center;
    justify-content:center;
    height:24px;
  }
}

.war-current-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px;
  padding:24px 18px;
  margin:20px 0;
}

.war-current-title{
  text-align:center;
  font-size:20px;
  font-weight:800;
  margin-bottom:24px;
  color:#fff;
}

.war-current-teams{
  display:grid;
  grid-template-columns:1fr 60px 1fr;
  align-items:center;
  gap:10px;
}

.war-current-team{
  text-align:center;
}

.war-current-team img{
  width:70px;
  height:70px;
  object-fit:contain;
  margin-bottom:10px;
}

.war-current-team h3{
  margin:5px 0;
  font-size:18px;
}

.war-current-stars{
  font-size:32px;
  font-weight:900;
  margin:8px 0;
}

.war-current-attacks{
  color:#aaa;
  font-size:15px;
}

.war-current-vs{
  font-size:32px;
  text-align:center;
}

.war-prediction{
  margin-top:28px;
  text-align:center;
}

.war-prediction-title{
  color:#aaa;
  font-size:16px;
}

.war-prediction-value{
  font-size:42px;
  font-weight:900;
}

.war-prediction-bar{
  height:10px;
  border-radius:20px;
  background:#292b38;
  overflow:hidden;
  margin-top:15px;
}

.war-prediction-fill{
  height:100%;
  width:70%;
  background:#54d88b;
  border-radius:20px;
}


.war-result.draw{
  color:#8b93a1;
  background:rgba(139,147,161,.11);
}

/* ===== Вероятность исхода КВ ===== */
.war-probability{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.07);
}

.war-probability-title{
  margin-bottom:12px;
  text-align:center;
  color:#9da3b3;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.war-probability-values{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

.war-probability-side{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.war-probability-side span{
  color:#9298a8;
  font-size:12px;
  font-weight:600;
}

.war-probability-side b{
  font-size:22px;
  font-weight:900;
}

.war-probability-our{
  align-items:flex-start;
}

.war-probability-our b{
  color:var(--green);
}

.war-probability-enemy{
  align-items:flex-end;
  text-align:right;
}

.war-probability-enemy b{
  color:var(--red);
}

.war-probability-bar{
  display:flex;
  width:100%;
  height:8px;
  margin-top:10px;
  overflow:hidden;
  border-radius:999px;
  background:#292b38;
}

.war-probability-fill-our{
  width:50%;
  height:100%;
  background:var(--green);
  transition:width .35s ease;
}

.war-probability-fill-enemy{
  width:50%;
  height:100%;
  background:var(--red);
  transition:width .35s ease;
}

.war-enemy-placeholder{
  width:55px;
  height:55px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:46px;
  line-height:1;
}

/* CWL result: 4 cards */
.cwl-result-grid{
  grid-template-columns: repeat(4,minmax(0,1fr));
}

@media (max-width: 700px){
  .cwl-result-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

/* =========================================
   ИСТОРИЯ ЛВК
========================================= */

.cwl-history-season{
  flex:1;
  min-width:0;

  font-size:13px;
  font-weight:800;
  color:var(--text);
}

.cwl-history-place{
  flex-shrink:0;

  padding:7px 10px;

  border-radius:10px;

  background:rgba(124,92,255,.12);

  color:#b9a8ff;

  font-size:12px;
  font-weight:850;
}

.cwl-history-result{
  flex-shrink:0;

  text-align:right;
}

.cwl-history-result strong{
  display:block;

  font-size:15px;
  font-weight:850;
  color:var(--text);
}

.cwl-history-result span{
  display:block;

  margin-top:3px;

  color:#737b89;

  font-size:10px;
}

@media (max-width:600px){

  .cwl-history-place{
    padding:6px 8px;
  }

  .cwl-history-season{
    font-size:12px;
  }

  .cwl-history-result strong{
    font-size:14px;
  }

}


.cwl-history-season-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:7px 10px;

  border-radius:10px;

  background:#1b1f28;

  color:#949ba8;

  font-size:12px;
  font-weight:850;
}


.cwl-history-card{
  position:relative;
}

.cwl-history-card .cwl-history-place{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}


/* =========================================
   ТОП-3 МЕСТА
========================================= */

.activity-place.first,
.player-place.first{
  color:#f4d06f;
  background:rgba(212,175,55,.16);
}

.activity-place.second,
.player-place.second{
  color:#c9ced8;
  background:rgba(190,198,210,.14);
}

.activity-place.third,
.player-place.third{
  color:#c58a5a;
  background:rgba(176,110,58,.16);
}



.player-league-value{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.player-league-icon{
  width:22px;
  height:22px;
  flex-shrink:0;
  object-fit:contain;
}

.player-league-value strong{
  min-width:0;
}


.player-profile-league-value,
.general-league-value{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

.player-profile-league-icon,
.general-league-icon{
  width:24px;
  height:24px;
  flex-shrink:0;
  object-fit:contain;
}

.player-profile-league-value strong,
.general-league-value strong{
  min-width:0;
}


.profile-league-value{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.profile-league-icon{
  width:22px;
  height:22px;
  flex-shrink:0;
  object-fit:contain;
}


.home-cwl-value-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.home-cwl-league-icon{
  width:30px;
  height:30px;
  flex-shrink:0;
  object-fit:contain;
}

.home-cwl-value-wrap .stat-value{
  min-width:0;
}

.home-info-date{
  color:#9788e6;
  font-weight:700;
}

.stat-card{
  display:flex;
  flex-direction:column;
}

.stat-card .stat-description{
  margin-top:auto;
  padding-top:6px;
}

.season .games-progress-top{
  margin-top:8px;
}

@media(max-width:699px){
  .player-stats-grid{
    width:calc(100% - 24px);
    margin-left:auto;
    margin-right:auto;
  }
}

.roster-result-head{
  margin-top:14px;
}



.games-player{
  min-height:74px;
  gap:10px;
}

.games-player-progress strong{
  font-size:13px;
}

.home-games-main{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}

.home-games-icon{
  width:42px;
  height:42px;
  flex-shrink:0;

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

  border-radius:13px;

  background:rgba(72,209,124,.10);

  font-size:22px;
  line-height:1;
}

/* =========================================
   ОДНОРАЗОВОЕ УВЕДОМЛЕНИЕ ПОСЛЕ РЕГИСТРАЦИИ
========================================= */

body.registration-notice-open{
  overflow:hidden;
}

.registration-notice-overlay{
  position:fixed;
  inset:0;
  z-index:10000;

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

  padding:20px;

  background:rgba(5,7,12,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.registration-notice{
  width:min(100%, 470px);
  max-height:calc(100vh - 40px);
  overflow-y:auto;

  padding:26px 22px 22px;

  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      rgba(255,194,72,.07),
      rgba(255,255,255,.015) 34%
    ),
    var(--panel, #161922);

  border:1px solid rgba(255,194,72,.22);

  box-shadow:
    0 24px 70px rgba(0,0,0,.55);
}

.registration-notice-icon{
  width:54px;
  height:54px;

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

  margin-bottom:14px;

  border-radius:17px;

  background:rgba(255,194,72,.12);

  font-size:27px;
}

.registration-notice-label{
  margin-bottom:7px;

  color:#ffc248;

  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
}

.registration-notice h2{
  margin:0 0 17px;

  color:var(--text, #fff);

  font-size:22px;
  line-height:1.22;
  font-weight:850;
}

.registration-notice p{
  margin:0 0 13px;

  color:var(--muted, #9ba3b4);

  font-size:14px;
  line-height:1.55;
}

.registration-notice-button{
  width:100%;

  margin-top:9px;
  padding:15px 18px;

  border:0;
  border-radius:15px;

  background:var(--accent, #7c5cff);
  color:#fff;

  font:inherit;
  font-size:15px;
  font-weight:850;

  cursor:pointer;
}

.registration-notice-button:disabled{
  opacity:.65;
  cursor:default;
}

.registration-notice-error{
  margin-top:12px;

  color:#ff7575;

  font-size:13px;
  line-height:1.4;
  text-align:center;
}

@media (max-width:520px){
  .registration-notice-overlay{
    padding:14px;
    align-items:flex-end;
  }

  .registration-notice{
    width:100%;
    max-height:calc(100vh - 28px);

    padding:23px 19px 20px;

    border-radius:24px 24px 18px 18px;
  }

  .registration-notice h2{
    font-size:20px;
  }
}

/* =========================================
   ПЕРЕКЛЮЧАТЕЛЬ АККАУНТОВ
========================================= */

.account-switcher{
  margin:18px 0 26px;
  border:1px solid rgba(124,92,255,.13);
  border-radius:18px;
  background:rgba(124,92,255,.035);
  overflow:hidden;
}

.account-switcher-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  cursor:pointer;
  list-style:none;
  user-select:none;

  background:
    rgba(124,92,255,.08);
}

.account-switcher-summary::-webkit-details-marker{
  display:none;
}

.account-switcher-summary > div{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.account-switcher-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  color:#ae9eff;
}

.account-switcher-summary strong{
  font-size:15px;
  font-weight:750;
  color:#e4ddff;
}

.account-switcher-arrow{
  flex:0 0 auto;
  font-size:25px;
  line-height:1;
  color:#ae9eff;

  transform:rotate(90deg);
  transition:transform .18s ease;
}

.account-switcher[open] .account-switcher-arrow{
  transform:rotate(-90deg);
}

.account-switcher-body{
  padding:12px;
  border-top:1px solid rgba(124,92,255,.10);
}

.account-switcher-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.account-switcher-item{
  width:100%;
  min-height:58px;

  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;

  padding:8px 12px;

  border:0;
  border-radius:11px;

  background:
    rgba(124,92,255,.045);

  color:#fff;
  text-align:left;
  font:inherit;
  cursor:pointer;

  transition:
    background .18s ease,
    transform .15s ease;
}

.account-switcher-item.current{
  background:
    rgba(124,92,255,.08);

  cursor:default;
}

.account-switcher-item:not(.current):hover{
  background:
    rgba(124,92,255,.08);
}

.account-switcher-item:not(.current):active{
  transform:scale(.99);
}

.account-switcher-avatar{
  width:42px;
  height:42px;

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

  border-radius:11px;

  background:
    rgba(124,92,255,.18);

  color:#c7baff;

  font-size:17px;
  font-weight:800;
}

.account-switcher-item.current
.account-switcher-avatar{
  background:
    rgba(124,92,255,.24);

  color:#d7ceff;
}

.account-switcher-info{
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:3px;
}

.account-switcher-info strong,
.account-switcher-info span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.account-switcher-info strong{
  font-size:14px;
  font-weight:750;
  color:#f3f0ff;
}

.account-switcher-info span{
  font-size:11px;
  color:#8e92a0;
}

.account-switcher-side{
  font-size:11px;
  font-weight:750;
  color:#ae9eff;
  white-space:nowrap;
}

.account-switcher-add{
  width:100%;
  height:42px;

  margin-top:10px;
  padding:0 10px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  border:0;
  border-radius:11px;

  background:
    rgba(124,92,255,.08);

  color:#ae9eff;

  text-decoration:none;

  font-size:13px;
  font-weight:750;

  transition:
    background .18s ease,
    transform .15s ease;
}

.account-switcher-add:hover{
  background:
    rgba(124,92,255,.13);
}

.account-switcher-add:active{
  transform:scale(.99);
}

.account-switcher-add span{
  font-size:18px;
  line-height:1;
}

@media(max-width:600px){

  .account-switcher{
    margin:14px 0 22px;
  }

  .account-switcher-summary{
    padding:16px;
  }

  .account-switcher-body{
    padding:10px;
  }
}


/* Кнопка назад только в режиме добавления аккаунта */
.auth-account-mode-back{
  width:auto;
  min-height:34px;

  margin:10px auto;
  padding:7px 14px;

  display:block;

  border-radius:10px;
  background:rgba(124,92,255,.08);

  color:#ae9eff;

  font-size:11px;
  font-weight:750;
  line-height:1.2;

  text-align:center;
}

.auth-account-mode-back:hover{
  background:rgba(124,92,255,.13);
}

.auth-account-mode-back[hidden]{
  display:none !important;
}

/* iPhone: не даём Safari увеличивать страницу при фокусе на полях авторизации */
@media (max-width:600px){
  .auth-field input{
    font-size:16px;
  }
}