/* Arenora "arena" skin — the black Stitch design (project "Arenora Gamer Chat Platform",
   screen "Arenora Desktop Home"). Loaded after theme.css and scoped to the dark theme,
   which is the default. Character art is official Clash Royale card art only. */
html[data-theme="dark"]{
  --ar-bg:#05080f;--ar-panel:#0d1428;--ar-panel2:#111b36;--ar-sunk:#070b17;--ar-line:#1b2747;--ar-line2:#273863;
  --ar-text:#eef3ff;--ar-muted:#8fa3c7;--ar-faint:#5d7096;--ar-gold:#f5c445;--ar-gold2:#e9a52a;--ar-blue:#2f7cff;--ar-blue2:#1747c8;
  --dark-panel:var(--ar-panel);--dark-line:var(--ar-line);--dark-text:var(--ar-text);--dark-muted:var(--ar-muted)
}
html[data-theme="dark"] body{background:radial-gradient(1200px 520px at 70% -120px,rgba(47,124,255,.20),transparent 60%),radial-gradient(900px 500px at 0% 0%,rgba(245,196,69,.06),transparent 60%),var(--ar-bg);color:var(--ar-text)}
html[data-theme="dark"] body:before,html[data-theme="dark"] .topbar:before,html[data-theme="dark"] .search-band:after{display:none}

/* Header */
html[data-theme="dark"] .topbar{background:rgba(5,8,15,.92);box-shadow:inset 0 -1px var(--ar-line),0 1px 0 rgba(245,196,69,.45);backdrop-filter:blur(14px)}
html[data-theme="dark"] .topbar nav button{color:var(--ar-muted);font-weight:800;letter-spacing:.2px;border-radius:0;background:none}
html[data-theme="dark"] .topbar nav button:hover{color:var(--ar-text)}
html[data-theme="dark"] .topbar nav button.active{color:var(--ar-text);box-shadow:inset 0 -3px var(--ar-gold)}
html[data-theme="dark"] .brand-copy>b{color:var(--ar-text)}html[data-theme="dark"] .brand-copy small{color:var(--ar-gold)}
html[data-theme="dark"] .header-icon{background:var(--ar-panel);border:1px solid var(--ar-line);color:var(--ar-text)}

/* Hero: "SEARCH A REAL PLAYER / TO BEGIN" over an Archer Queen banner */
html[data-theme="dark"] .search-band{position:relative;overflow:visible;border:0;background:linear-gradient(100deg,#060b18 0%,#0a1633 48%,#13245a 100%)}
html[data-theme="dark"] .search-band:before{content:"";position:absolute;top:8px;bottom:8px;right:max(16px,calc(50% - 620px));width:min(30%,300px);pointer-events:none;background:url("https://api-assets.clashroyale.com/cards/300/p7OQmOAFTery7zCzlpDdm-LOD1kINTm42AwIHchZfWk.png") right center/contain no-repeat;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(47,124,255,.35))}
html[data-theme="dark"] .search-band .search-hero.panel{background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding-inline:0}
html[data-theme="dark"] .search-intro .crumb{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid rgba(245,196,69,.35);border-radius:999px;background:rgba(245,196,69,.08);color:var(--ar-gold);font-weight:900;letter-spacing:1.6px}
html[data-theme="dark"] .search-intro h1{max-width:640px;margin-top:12px;font-size:clamp(30px,4.4vw,54px);line-height:1;font-weight:900;letter-spacing:-1px;text-transform:uppercase;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.5)}
html[data-theme="dark"] .search-intro h1 span{display:block;color:var(--ar-gold)}
html[data-theme="dark"] .search-band form{max-width:860px;background:rgba(7,11,23,.88);border:1px solid var(--ar-line2);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
html[data-theme="dark"] #searchSubmit{background:linear-gradient(180deg,var(--ar-blue),var(--ar-blue2));border:0;border-bottom:3px solid #0e2f8a;border-radius:12px;font-weight:900;color:#fff}

/* Buttons */
html[data-theme="dark"] button.primary,html[data-theme="dark"] .primary{background:linear-gradient(180deg,var(--ar-blue),var(--ar-blue2));border-color:transparent;color:#fff;font-weight:900;box-shadow:inset 0 -3px rgba(0,0,0,.25)}
html[data-theme="dark"] button.outline{background:transparent;border:1px solid rgba(245,196,69,.45);color:var(--ar-gold);font-weight:800}
html[data-theme="dark"] button.outline:hover{background:rgba(245,196,69,.1)}
html[data-theme="dark"] button.outline.danger{border-color:rgba(215,68,62,.5);color:#ff7a74}

/* Panels and labels */
html[data-theme="dark"] .panel,html[data-theme="dark"] .player,html[data-theme="dark"] .game-card,html[data-theme="dark"] .metrics article,html[data-theme="dark"] .collection-summary article{background:linear-gradient(180deg,var(--ar-panel2),var(--ar-panel));border:1px solid var(--ar-line);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
html[data-theme="dark"] .panel small,html[data-theme="dark"] .section-title small,html[data-theme="dark"] .panel header small{color:var(--ar-gold);letter-spacing:1.6px;font-weight:900}
html[data-theme="dark"] .section-title h2{font-weight:900;letter-spacing:-.5px}
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{background:var(--ar-sunk)!important;border-color:var(--ar-line2)!important;border-radius:10px}

/* Home cards with official card art */
html[data-theme="dark"] .home-card{position:relative;overflow:hidden}
html[data-theme="dark"] .home-card:after{content:"";position:absolute;right:-26px;bottom:-34px;width:150px;height:180px;pointer-events:none;background:var(--ar-art) center/contain no-repeat;opacity:.3;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
html[data-theme="dark"] .home-card>*{position:relative;z-index:1}
html[data-theme="dark"] .home-card:nth-child(1){--ar-art:url("https://api-assets.clashroyale.com/cards/300/WJd207D0O1sN-l1FTb8P9KhYL2oF5jY26vRUfTUW3FQ.png");background:linear-gradient(140deg,#11306b,#0b1a3f 60%,#0a1022);border-color:#2a4a8f}
html[data-theme="dark"] .home-card:nth-child(1):after{opacity:.75;width:210px;height:250px}
html[data-theme="dark"] .home-card:nth-child(2){--ar-art:url("https://api-assets.clashroyale.com/cards/300/MlArURKhn_zWAZY-Xj1qIRKLVKquarG25BXDjUQajNs.png")}
html[data-theme="dark"] .home-card:nth-child(3){--ar-art:url("https://api-assets.clashroyale.com/cards/300/RsFaHgB3w6vXsTjXdPr3x8l_GbV9TbOUCvIx07prbrQ.png")}
html[data-theme="dark"] .home-card:nth-child(4){--ar-art:url("https://api-assets.clashroyale.com/cards/300/O2NycChSNhn_UK9nqBXUhhC_lILkiANzPuJjtjoz0CE.png")}
html[data-theme="dark"] .home-card h2,html[data-theme="dark"] .home-card h3{font-weight:900;max-width:78%}
html[data-theme="dark"] .home-card p{max-width:76%}
html[data-theme="dark"] .home-card-status{background:rgba(245,196,69,.1);color:var(--ar-gold);border:1px solid rgba(245,196,69,.3)}

/* Score accents */
html[data-theme="dark"] .score-ring b,html[data-theme="dark"] #score,html[data-theme="dark"] .admin-stats b,html[data-theme="dark"] .admin-stat b{color:var(--ar-gold)}

/* Admin */
html[data-theme="dark"] .admin-tabs{background:var(--ar-panel);border-color:var(--ar-line)}
html[data-theme="dark"] .admin-tabs button.active{background:var(--ar-gold);color:#1b1200}

html[data-theme="dark"] .footer{border-top:1px solid var(--ar-line);color:var(--ar-faint)}

@media(max-width:700px){
  html[data-theme="dark"] .search-band:before{width:42%;opacity:.3}
  html[data-theme="dark"] .search-intro h1{font-size:30px}
  html[data-theme="dark"] .home-card:after,html[data-theme="dark"] .home-card:nth-child(1):after{width:110px;height:130px;opacity:.28}
}

/* Full-width layout on big screens: the content stretches edge to edge and the
   whole interface scales up with the screen, so text is never tiny on a 1080p+
   monitor. Phones and tablets keep the theme's own sizes. Applies to both themes. */
@media(min-width:761px){.wrap{width:min(1880px,calc(100% - 64px));max-width:none}}
@media(min-width:1280px){body{zoom:1.12}}
@media(min-width:1500px){body{zoom:1.22}}
@media(min-width:1800px){body{zoom:1.32}}
@media(min-width:2300px){body{zoom:1.5}}

/* Feedback box at the bottom of the account dialog */
.feedback-form{display:grid;gap:8px;margin:14px 0 6px;padding:12px;border:1px solid rgba(245,196,69,.3);border-radius:14px;background:rgba(245,196,69,.05)}
.feedback-form small{color:#f5c445;font-weight:900;letter-spacing:1.6px}
.feedback-form textarea{min-height:86px;resize:vertical;font:inherit;padding:10px;border-radius:10px}
.feedback-form em{font-size:12px;opacity:.8}

/* Golem brand mark: the red eyes pulse */
.brand-mark img{border-radius:22%;animation:golemGlow 2.6s ease-in-out infinite}
@keyframes golemGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(255,40,30,.35))}50%{filter:drop-shadow(0 0 12px rgba(255,40,30,.8))}}
@media(prefers-reduced-motion:reduce){.brand-mark img{animation:none}}

/* Friends in the account dialog */
.account-friends{display:grid;gap:8px;margin-top:14px}
.account-friends:empty{display:none}
.account-friends>small{color:#f5c445;font-weight:900;letter-spacing:1.6px}
.account-friends h4{margin:6px 0 0;font-size:13px;display:flex;align-items:center;gap:6px}
.friend-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid rgba(143,163,199,.25);border-radius:12px;background:rgba(255,255,255,.03)}
.friend-row>span:first-child{display:grid;min-width:0}
.friend-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-row code{font-size:11px;opacity:.7}
.friend-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.friend-actions button{padding:6px 10px;font-size:12px}
.friend-chip{font-style:normal;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(245,196,69,.12);color:#f5c445}
.friend-chip.declined{background:rgba(215,68,62,.14);color:#ff7a74}
.friend-count{font-style:normal;background:#e5342b;color:#fff;border-radius:999px;padding:1px 7px;font-size:11px}
.friend-empty{font-size:12px;opacity:.75;margin:0}
.account-button.has-friend-requests #accountDot{background:#e5342b!important;box-shadow:0 0 0 2px rgba(229,52,43,.35)}

/* Platinum members: gold glowing name, like Pass Royale in the game. */
.platinum-name {
  color: #ffd54a !important;
  text-shadow: 0 0 8px rgba(255, 190, 0, 0.85), 0 0 2px rgba(255, 220, 120, 0.9);
}

/* "Load a player first" must be noticed, or the menu feels dead. */
#notice.notice-flash {
  color: #ffd54a;
  font-weight: 800;
  font-size: 13px;
  animation: notice-flash 0.9s ease-out 2;
}
@keyframes notice-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Phones: the menu is a second row of the sticky header, scrollable sideways. */
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: 0; padding-top: 8px; row-gap: 4px; }
  .topbar .header-nav-slot { display: flex; order: 3; width: 100%; height: 42px; overflow-x: auto; scrollbar-width: none; }
  .topbar .header-nav-slot::-webkit-scrollbar { display: none; }
  .topbar nav { display: flex !important; height: 42px; margin-left: 0; }
  .topbar nav button { padding: 0 12px; white-space: nowrap; flex: 0 0 auto; }
  .player-context-actions #playerNavMount { display: none; }
}

/* The header (and its menu) stays on top while scrolling, on every screen.
   overflow-x:hidden on html/body turned body into a scroll box and broke sticky;
   clip hides sideways overflow without that side effect. */
html, body { overflow-x: clip; }
.topbar { position: sticky !important; top: 0; z-index: 40; }

/* Admin/moderator menu item; hidden for everyone else */
#navAdmin[hidden] { display: none !important; }
#navAdmin { color: #ffd54a; }

/* Admin centre tabs stay pinned right under the sticky header */
#adminTabs { position: sticky; top: var(--topbar-h, 88px); z-index: 35; }
#adminView, #adminContent { overflow: visible; }

/* ---------- Player card in Clash Royale style: one blue panel, gold frame,
   chunky white-lettered buttons. Every player thing lives in this one card. ---------- */
#playerHero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "banner bench" "actions bench";
  background: #2a63c4; border: 3px solid #f5c542; border-radius: 16px;
  box-shadow: inset 0 0 0 3px #0d2a66, 0 6px 0 #0d2a66; padding: 6px;
  font-family: var(--cr-font); letter-spacing: .3px;
}
#playerHero .profile-overview-grid { display: contents; }
#playerHero #profileBanner, #playerHero .player-context-actions {
  background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
}
#playerHero #profileBanner { grid-area: banner; min-height: 0; padding: 14px 16px 6px; }
#playerHero .player-context-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 14px; margin: 0; min-height: 0; }
#playerHero .benchmark-mini {
  grid-area: bench; margin: 10px; min-height: 0; padding: 12px 16px;
  background: #173c85 !important; border: 2px solid #0d2a66 !important; border-radius: 12px; box-shadow: none !important;
}
#playerHero, #playerHero small, #playerHero h3, #playerHero p, #playerHero span, #playerHero code, #playerHero b, #playerHero a, #playerHero strong {
  color: #fff; -webkit-text-stroke: .6px #0b1a3a; paint-order: stroke fill;
}
#playerHero #playerName { font-family: var(--cr-font); font-weight: 800; font-size: 30px; color: #ffd34a; -webkit-text-stroke: 1.5px #3a2300; }
#playerHero #playerName .platinum-name { color: #ffd54a !important; }
#playerHero .benchmark-mini small:first-child, #playerHero .benchmark-mini h3 { color: #ffd34a; font-weight: 400; }
#playerHero code#tagText { background: none; color: #9cd2ff; font-family: inherit; }
#playerHero .clan-link { background: #0d2a66; border-radius: 6px; padding: 2px 8px; }
#playerHero #archetype { display: inline-block; background: #5a2d91; border: 2px solid #f5c542; border-radius: 8px; padding: 2px 10px; font-weight: 400; }
#playerHero #grade, #playerHero #percentile { background: #0d2a66; border-radius: 6px; padding: 2px 8px; }
#playerHero #grade { background: #5a2d91; }
#playerHero .avatar { background: #ffd34a; border: 3px solid #1a1206; border-radius: 12px; }
#playerHero .avatar #level {
  background: #3d9cff; border: 2px solid #06264f; border-radius: 7px; transform: rotate(45deg);
  font-style: normal; color: #fff; -webkit-text-stroke: .6px #06264f;
}
#playerHero #score { color: #fff; font-size: 30px; -webkit-text-stroke: 1px #0b1a3a; }
#playerHero #playerNavMount { display: none; }
/* Chunky game buttons: dark outline, thick bottom edge that squashes when pressed */
#playerHero .player-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
#playerHero .player-quick-actions button, #playerHero #changePlayer, #playerHero #refreshBenchmark {
  font-family: var(--cr-font); font-weight: 800; font-size: 15px; color: #fff !important;
  -webkit-text-stroke: 1px #0b1a3a; paint-order: stroke fill;
  border: 2px solid #0b1a3a !important; border-bottom-width: 5px !important; border-radius: 10px;
  padding: 7px 14px; min-height: 0; background: #3d9cff !important; box-shadow: none !important;
  transition: transform .06s;
}
#playerHero .player-quick-actions button span, #playerHero #changePlayer span, #playerHero #refreshBenchmark span, #playerHero #refreshBenchmark small { color: #fff !important; }
#playerHero #friendPlayer, #playerHero #addPlayerFromHero { background: #4cc23a !important; }
#playerHero #refreshBenchmark { background: #f2b51d !important; -webkit-text-stroke-color: #3a2300; }
#playerHero #refreshBenchmark small { -webkit-text-stroke: .5px #3a2300; }
#playerHero .player-quick-actions button:active, #playerHero #changePlayer:active, #playerHero #refreshBenchmark:active {
  transform: translateY(3px); border-bottom-width: 2px !important;
}
#playerHero .quick-player-search { margin-left: auto; }
@media (max-width: 760px) {
  #playerHero { grid-template-columns: 1fr; grid-template-areas: "banner" "bench" "actions"; }
  #playerHero .benchmark-mini { margin: 4px 10px; }
  #playerHero #playerName { font-size: 24px; }
  #playerHero .player-quick-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  #playerHero .quick-player-search { margin-left: 0; width: 100%; }
}
/* The card belongs to this player only: searching someone else is done from the logo / home search */
#playerHero .quick-player-search { display: none !important; }
#playerHero .player-quick-actions { position: static !important; transform: none !important; inset: auto !important; width: auto; }
#playerHero .avatar #level { transform: none; min-width: 28px; height: 26px; padding: 0 5px; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }

/* ---------- My profile page (person icon) ---------- */
.me-page .me-email { margin: 4px 0 0; opacity: .75; font-size: 13px; }
.me-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.me-box { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.me-box > small { color: var(--ar-gold, #ffc928); font-weight: 800; letter-spacing: .8px; }
.me-box h3 { margin: 0; }
.me-box p { margin: 0; }
.me-box > button { align-self: flex-start; }
.me-wide { grid-column: 1 / -1; }
.me-box .account-inbox { max-height: 320px; overflow: auto; }
@media (max-width: 760px) { .me-grid { grid-template-columns: 1fr; } }
#playerHero.is-me .player-quick-actions { display: none !important; }

/* ---------- Home dashboard ---------- */
.home-dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; margin: 18px 0 28px; }
.dash-main, .dash-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-box { padding: 16px 18px; }
.dash-box > header small { color: var(--ar-gold, #ffc928); font-weight: 800; letter-spacing: .8px; }
.dash-box > header h3 { margin: 2px 0 12px; }
.dash-empty { opacity: .6; font-size: 13px; list-style: none; }
.dash-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dash-video { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.dash-video img, .dash-video i { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; border: 2px solid rgba(255, 201, 40, .35); display: block; }
.dash-video b, .dash-news-item b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
.dash-video em, .dash-news-item em { display: block; font-style: normal; font-size: 11px; opacity: .65; }
.dash-news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dash-news-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; color: inherit; text-decoration: none; padding: 6px; border-radius: 10px; }
.dash-news-item:hover, .dash-video:hover b { background: rgba(255, 255, 255, .04); }
.dash-news-item img, .dash-news-item i { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.dash-topic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.dash-topic em { grid-column: 1; font-style: normal; font-size: 12px; opacity: .65; }
.dash-topic i { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-size: 12px; opacity: .7; }
.dash-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-rank button { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; background: none; border: 0; color: inherit; text-align: left; padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.dash-rank button:hover { background: rgba(255, 255, 255, .05); }
.dash-rank b { font-family: var(--cr-font); font-weight: 800; color: #ffd34a; text-align: center; }
.dash-rank strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.dash-rank em { display: block; font-style: normal; font-size: 11px; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-rank i { font-style: normal; font-weight: 800; font-size: 12px; color: #9cd2ff; }
@media (max-width: 1000px) { .home-dash { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .dash-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-news { grid-template-columns: 1fr; } }

/* ---------- Clan profile: one CR-style hero card ---------- */
#clanView .clan-profile-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "badge main" "stats stats"; gap: 16px 22px; align-items: center; padding: 20px 22px; background: #2a63c4; border: 3px solid #f5c542; box-shadow: inset 0 0 0 3px #0d2a66, 0 10px 30px rgba(0, 0, 0, .35); border-radius: 18px; overflow: visible; }
#clanView .clan-profile-hero::before, #clanView .clan-profile-hero::after { display: none; }
#clanView .clan-profile-badge { grid-area: badge; width: 120px; height: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; box-shadow: none; }
#clanView .clan-profile-badge img#clanHeroBadge { width: 104px; height: auto; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
#clanView .clan-war-trophy { display: flex; align-items: center; gap: 4px; background: #9aa6d8; border-radius: 10px; padding: 3px 10px 3px 4px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
#clanView .clan-war-trophy img { width: 26px; height: 26px; }
#clanView .clan-war-trophy b { font-family: var(--cr-font); font-weight: 800; font-size: 18px; color: #fff; -webkit-text-stroke: 1px #3b2a7a; }
#clanView .clan-hero-main { grid-area: main; min-width: 0; }
#clanView .clan-hero-main small { color: #ffd34a; font-weight: 800; letter-spacing: 1px; }
#clanView #clanTitle { font-family: var(--cr-font); font-weight: 800; font-size: clamp(28px, 4vw, 42px); color: #fff; -webkit-text-stroke: 1.5px #0d2a66; text-shadow: 0 3px 0 #0d2a66; margin: 2px 0 4px; letter-spacing: .5px; }
#clanView .clan-tagline { color: #d6e4ff; margin: 0 0 8px; font-weight: 700; }
#clanView .clan-desc { color: #fff; background: rgba(13, 42, 102, .45); border-radius: 10px; padding: 10px 12px; margin: 0; font-weight: 600; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
#clanView .clan-stat-strip { grid-area: stats; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: #1b8ae6; border-radius: 12px; box-shadow: inset 0 -4px 0 #0f5fb0, 0 0 0 2px #0d2a66; overflow: hidden; }
#clanView .clan-stat-strip > div { padding: 10px 8px; text-align: center; border-right: 2px solid rgba(13, 42, 102, .35); min-width: 0; }
#clanView .clan-stat-strip > div:last-child { border-right: 0; }
#clanView .clan-stat-strip small { display: block; color: #ffe27a; font-family: var(--cr-font); font-size: 13px; letter-spacing: .4px; text-transform: uppercase; -webkit-text-stroke: .5px #0d2a66; }
#clanView .clan-stat-strip b { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cr-font); font-weight: 800; font-size: 22px; color: #fff; -webkit-text-stroke: 1px #0d2a66; text-shadow: 0 2px 0 #0d2a66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#clanView .clan-stat-strip b img { width: 24px; height: 24px; object-fit: contain; }
#clanView .clan-layout-full { grid-template-columns: 1fr !important; }
#clanView .clan-member .clan-member-trophies { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 800; color: #ffd34a; margin-left: auto; margin-right: 12px; }
#clanView .clan-member .clan-member-trophies img { width: 18px; height: 18px; }
#clanView .clan-member small { text-transform: none; letter-spacing: 0; }
#clanView .clan-member.top1 > i { background: #f5c542; color: #5a3b00; }
#clanView .clan-member.top2 > i { background: #d9dfe8; color: #3a4252; }
#clanView .clan-member.top3 > i { background: #e08a4a; color: #4a2208; }
@media (max-width: 900px) { #clanView .clan-stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } #clanView .clan-stat-strip > div:nth-child(3) { border-right: 0; } #clanView .clan-stat-strip > div:nth-child(-n+3) { border-bottom: 2px solid rgba(13, 42, 102, .35); } }
@media (max-width: 560px) { #clanView .clan-profile-hero { grid-template-columns: 1fr; grid-template-areas: "badge" "main" "stats"; text-align: center; } #clanView .clan-profile-badge { margin: 0 auto; } #clanView .clan-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } #clanView .clan-member code { display: none; } }
#clanView .clan-member { grid-template-columns: 38px minmax(0, 1fr) auto auto auto; }
#clanView .clan-member small b.clan-role { font-weight: 800; color: #ffd34a; }
#clanView .clan-member small em { font-style: normal; }
#clanView .clan-stat-strip small { -webkit-text-stroke: 0; text-shadow: 0 1px 0 #0d2a66; }
@media (max-width: 560px) { #clanView .clan-member { grid-template-columns: 38px minmax(0, 1fr) auto auto; } }

/* ---------- In-game style profile sheet ---------- */
.cr-profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 22px; font-family: var(--cr-font); }
.cr-profile[hidden] { display: none; }
.cr-sheet { --cr-a: #2f6fd6; --cr-b: #2763c8; position: relative; padding: 18px 18px 20px; border-radius: 16px; border: 3px solid #0d2a66; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12), 0 8px 24px rgba(0, 0, 0, .35); background:
  repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 56px),
  repeating-linear-gradient(-45deg, rgba(0, 0, 0, .10) 0 2px, transparent 2px 56px),
  linear-gradient(180deg, var(--cr-a), var(--cr-b)); color: #fff; min-width: 0; }
.cr-sheet.purple { --cr-a: #6a4bd8; --cr-b: #5537b8; }
.cr-sheet b, .cr-sheet h3 { font-family: var(--cr-font); font-weight: 800; }
.cr-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 14px 0 10px; text-align: center; }
.cr-head:first-child { margin-top: 0; }
.cr-head i { height: 5px; border-radius: 4px; background: #ffc928; box-shadow: 0 2px 0 #a86a00; }
.cr-head .cr-crown { width: 40px; height: 26px; }
.cr-head h3 { grid-column: 1 / -1; margin: 2px 0 0; font-size: 24px; letter-spacing: .5px; color: #fff; -webkit-text-stroke: 1.2px #0d2a66; text-shadow: 0 3px 0 #0d2a66; }
.cr-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cr-pill { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 10px 10px; background: rgba(13, 42, 102, .55); border-radius: 12px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .25); text-align: center; min-width: 0; }
.cr-pill img { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; object-fit: contain; }
.cr-pill small { color: #9fe0ff; font-size: 15px; letter-spacing: .3px; }
.cr-pill.hot small { color: #ffd34a; }
.cr-pill b { font-size: 26px; -webkit-text-stroke: 1px #0d2a66; text-shadow: 0 2px 0 #0d2a66; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cr-leagues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cr-league { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; background: rgba(40, 20, 110, .45); border-radius: 12px; text-align: center; }
.cr-league small { color: #ffe27a; font-size: 14px; }
.cr-league img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); }
.cr-league b { font-size: 17px; -webkit-text-stroke: .8px #2a1470; text-shadow: 0 2px 0 #2a1470; }
.cr-league em { font-style: normal; font-size: 13px; color: #e6dcff; }
.cr-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cr-badges figure { margin: 0; display: grid; justify-items: center; gap: 2px; }
.cr-badges figure.more { display: none; }
.cr-badges.open figure.more { display: grid; }
.cr-badges img { width: 100%; max-width: 92px; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); }
.cr-badges figcaption { font-size: 13px; color: #ffe27a; }
.cr-btn { display: block; margin: 12px auto 0; padding: 8px 18px; border: 2px solid #0d2a66; border-radius: 10px; background: #2b5fb4; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); color: #fff !important; font-family: var(--cr-font); font-size: 16px; text-decoration: none; cursor: pointer; width: max-content; }
.cr-btn:active { transform: translateY(2px); }
.cr-deck { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cr-deck figure { margin: 0; position: relative; }
.cr-deck img { width: 100%; display: block; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.cr-deck figcaption { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-family: var(--cr-font); font-size: 17px; color: #fff; -webkit-text-stroke: 1px #2a1470; text-shadow: 0 2px 0 #2a1470; }
.cr-deck figure.evo figcaption { color: #e6b3ff; }
.cr-elixir { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 10px; background: rgba(13, 42, 102, .55); border-radius: 12px; }
.cr-elixir img { width: 28px; height: 28px; }
.cr-elixir span { font-size: 17px; }
.cr-elixir b { font-size: 20px; margin-right: auto; }
.cr-elixir .cr-btn { margin: 0; padding: 5px 12px; font-size: 14px; }
.cr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px; background: #eef1fb; border-radius: 12px; box-shadow: 0 4px 0 rgba(13, 42, 102, .5); }
.cr-stats.one { grid-template-columns: 1fr; }
.cr-stat small { display: block; color: #1f5fc8; font-size: 15px; margin-bottom: 3px; }
.cr-stat.violet small { color: #6a3fd0; }
.cr-stat.gold small { color: #c07a12; }
.cr-stat.green small { color: #2c9a2c; }
.cr-stat b { display: flex; align-items: center; gap: 6px; padding: 5px 12px; min-height: 38px; background: #c9cddb; border-radius: 10px; font-size: 22px; color: #fff; -webkit-text-stroke: 1px #222a3a; text-shadow: 0 2px 0 #222a3a; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cr-stat b img { width: 26px; height: 32px; object-fit: contain; -webkit-text-stroke: 0; }
.cr-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .cr-profile { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cr-leagues { grid-template-columns: 1fr; } .cr-league { grid-template-columns: 64px 1fr; justify-items: start; text-align: left; } .cr-league img { width: 60px; height: 60px; grid-row: span 3; } .cr-split, .cr-stats { grid-template-columns: 1fr; } }
.cr-profile { display: block; columns: 2; column-gap: 16px; }
.cr-profile > .cr-sheet { break-inside: avoid; margin-bottom: 16px; }
@media (max-width: 900px) { .cr-profile { columns: 1; } }

/* ---------- Clan chat: emotes + Clash Royale look ---------- */
.chat-thread { position: relative; }
.chat-emote-panel { position: absolute; left: 14px; right: 14px; bottom: 74px; z-index: 20; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 300px; overflow-y: auto; padding: 12px; border-radius: 16px; border: 3px solid #0d2a66; background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 40px), linear-gradient(180deg, #2f6fd6, #2763c8); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.chat-emote-panel[hidden] { display: none; }
.chat-emote-panel button { background: rgba(255, 255, 255, .12); border: 0; border-radius: 12px; padding: 4px; cursor: pointer; transition: transform .12s; }
.chat-emote-panel button:hover { transform: scale(1.12); background: rgba(255, 255, 255, .25); }
.chat-emote-panel img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.chat-emote-toggle { flex: 0 0 auto; width: 46px; height: 46px; padding: 3px; border-radius: 12px; border: 2px solid #0d2a66; background: #ffc928; box-shadow: inset 0 -4px 0 #c98a00; cursor: pointer; }
.chat-emote-toggle img { width: 100%; height: 100%; object-fit: contain; }
.chat-emote-toggle:active { transform: translateY(2px); }
.chat-emote { display: block; background: none; border: 0; padding: 0; cursor: pointer; }
.chat-emote img { width: 120px; height: 120px; object-fit: contain; display: block; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .25)); }
.chat-bubble:has(.chat-emote) { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
.chat-bubble:has(.chat-emote) > span { padding: 0 6px; }
#chatView .chat-thread > header { background: linear-gradient(180deg, #2f6fd6, #2557b8); border-bottom: 3px solid #0d2a66; border-radius: 14px 14px 0 0; }
#chatView .chat-thread > header b { font-family: var(--cr-font); font-weight: 800; font-size: 20px; color: #fff; -webkit-text-stroke: 1px #0d2a66; text-shadow: 0 2px 0 #0d2a66; }
#chatView .chat-bubble.theirs { background: #f2f5fc; color: #1d2a44; border-radius: 4px 14px 14px 14px; box-shadow: 0 3px 0 rgba(13, 42, 102, .35); }
#chatView .chat-bubble.theirs span, #chatView .chat-bubble.theirs .chat-report { color: #5b6a86; }
#chatView .chat-bubble.mine { background: linear-gradient(180deg, #57b4ff, #2b8cf0); color: #fff; border-radius: 14px 4px 14px 14px; box-shadow: 0 3px 0 #1a5fb0; }
#chatView .chat-sender { font-family: var(--cr-font); font-weight: 800; }
#chatView #chatComposer button.primary { font-family: var(--cr-font); font-weight: 800; font-size: 17px; background: #4cc23a; border: 2px solid #1f5c14; box-shadow: inset 0 -4px 0 #2f8a22; color: #fff; }
#chatView .section-title h2 { font-family: var(--cr-font); font-weight: 800; letter-spacing: .5px; }

/* Compact search band: welcome chip + search in one row, no big headline or card art */
html[data-theme="dark"] .search-band:before { display: none !important; }
.search-band { padding: 14px 0 !important; }
.search-band .search-hero { display: flex !important; align-items: center; gap: 16px; flex-wrap: wrap; padding: 6px 0 !important; }
.search-band .search-intro { margin: 0 !important; flex: 0 0 auto; }
.search-band .search-intro h1 { display: none; }
.search-band .search-hero form { flex: 1 1 520px; margin: 0 !important; }
.search-band #notice { flex-basis: 100%; margin: 0; }
.search-band #notice:empty { display: none; }

/* ---------- Readable game font (all scripts) + compact profile sheet ---------- */
:root { --cr-font: "Rubik", Inter, "Noto Sans", "Noto Sans Arabic", "Noto Sans JP", "Noto Sans SC", "Noto Sans KR", system-ui, sans-serif; }
.cr-sheet b, .cr-sheet h3, #playerHero, .cr-profile, .cr-btn { font-weight: 800; }
#playerHero *, .cr-profile *, #clanView .clan-hero *, #clanView .clan-stat-strip *, #chatView *, .dash-rank * { -webkit-text-stroke: 0 !important; }
#playerHero, #playerHero small, #playerHero h3, #playerHero p, #playerHero span, #playerHero code, #playerHero b, #playerHero a, #playerHero strong { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); letter-spacing: 0; }
#playerHero { background: linear-gradient(180deg, #2f6ccf, #2459b5); }
#playerHero #playerName { font-weight: 800; color: #ffd34a; text-shadow: 0 2px 0 #3a2300; }
#playerHero code#tagText { color: #cfe8ff; }
#playerHero .benchmark-mini { background: #0f2f6e !important; padding: 14px 18px; min-width: 300px; }
#playerHero .benchmark-mini small:first-child { font-size: 13px; letter-spacing: .6px; }
#playerHero .benchmark-mini h3 { font-size: 20px; margin: 2px 0 6px; }
#playerHero .benchmark-mini #grade, #playerHero .benchmark-mini #percentile { font-size: 15px; padding: 3px 10px; }
#playerHero #score { font-size: 34px; text-shadow: 0 2px 0 #0b1a3a; }
#playerHero .score-ring small { font-size: 13px; color: #cfe8ff; }
#playerHero #refreshBenchmark span { font-size: 15px; }
#playerHero #refreshBenchmark small { font-size: 12px; color: #3a2300 !important; text-shadow: none; font-weight: 700; }
#playerHero .player-quick-actions button, #playerHero #changePlayer, #playerHero #refreshBenchmark { font-weight: 800; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
#playerHero #refreshBenchmark span { color: #3a2300 !important; text-shadow: none; }
@media (max-width: 760px) { #playerHero .benchmark-mini { min-width: 0; } }

/* Profile sheet: same look, about half the height */
.cr-profile { gap: 10px; margin-bottom: 16px; }
.cr-sheet { padding: 10px 12px 12px; border-radius: 12px; border-width: 2px; }
.cr-head { margin: 8px 0 6px; gap: 6px; }
.cr-head .cr-crown { width: 26px; height: 17px; }
.cr-head i { height: 3px; }
.cr-head h3 { font-size: 15px; text-shadow: 0 2px 0 #0d2a66; }
.cr-pair { gap: 6px; }
.cr-pill { padding: 4px 8px 6px; border-radius: 9px; }
.cr-pill img { width: 22px; height: 22px; left: 6px; }
.cr-pill small { font-size: 11px; }
.cr-pill b { font-size: 16px; text-shadow: 0 1px 0 #0d2a66; }
.cr-leagues { gap: 6px; }
.cr-league { padding: 5px 4px; gap: 1px; border-radius: 9px; }
.cr-league small { font-size: 11px; }
.cr-league img { width: 44px; height: 44px; }
.cr-league b { font-size: 12px; }
.cr-league em { font-size: 11px; }
.cr-badges { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.cr-badges img { max-width: 52px; }
.cr-badges figcaption { font-size: 10px; }
.cr-btn { margin-top: 8px; padding: 4px 12px; font-size: 12px; border-radius: 8px; }
.cr-deck { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.cr-deck figcaption { font-size: 11px; bottom: 2px; }
.cr-elixir { margin-top: 8px; padding: 4px 8px; gap: 6px; border-radius: 9px; }
.cr-elixir img { width: 20px; height: 20px; }
.cr-elixir span { font-size: 12px; }
.cr-elixir b { font-size: 14px; }
.cr-elixir .cr-btn { padding: 3px 10px; font-size: 12px; }
.cr-stats { gap: 5px 8px; padding: 8px; border-radius: 9px; }
.cr-stat small { font-size: 11px; margin-bottom: 2px; }
.cr-stat b { min-height: 26px; padding: 2px 8px; font-size: 14px; border-radius: 7px; text-shadow: 0 1px 0 #222a3a; }
.cr-stat b img { width: 18px; height: 20px; }
@media (max-width: 560px) { .cr-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cr-deck { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- In-site dialog (replaces browser alert/confirm/prompt) ---------- */
.ar-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; background: rgba(5, 12, 30, .6); backdrop-filter: blur(3px); animation: arFade .15s ease-out; }
.ar-modal.out { opacity: 0; transition: opacity .15s; }
.ar-modal-box { position: relative; width: min(420px, 100%); padding: 34px 22px 18px; text-align: center; color: #fff; font-family: var(--cr-font); background: linear-gradient(180deg, #2f6ccf, #2459b5); border: 3px solid #f5c542; border-radius: 18px; box-shadow: inset 0 0 0 3px #0d2a66, 0 10px 0 #0d2a66, 0 24px 60px rgba(0, 0, 0, .5); animation: arPop .22s cubic-bezier(.2, 1.4, .4, 1); }
.ar-modal-emote { position: absolute; top: -38px; left: 50%; width: 68px; height: 68px; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); }
.ar-modal-box h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: #ffd34a; text-shadow: 0 2px 0 #3a2300; }
.ar-modal-box p { margin: 0 0 16px; font-size: 15px; line-height: 1.45; font-weight: 600; white-space: pre-line; }
.ar-modal-box textarea { width: 100%; margin: 0 0 14px; padding: 10px; border: 2px solid #0d2a66; border-radius: 10px; font: 500 14px Inter, system-ui, sans-serif; resize: vertical; color: #111; background: #fff; }
.ar-modal-actions { display: flex; justify-content: center; gap: 10px; }
.ar-modal-actions button { min-width: 110px; padding: 8px 18px; font-family: var(--cr-font); font-weight: 800; font-size: 16px; color: #fff; border: 2px solid #0b1a3a; border-bottom-width: 5px; border-radius: 10px; background: #4cc23a; cursor: pointer; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.ar-modal-actions button.outline { background: #8a94a8; }
.ar-modal-actions button:active { transform: translateY(3px); border-bottom-width: 2px; }
@keyframes arFade { from { opacity: 0; } }
@keyframes arPop { from { transform: scale(.85); opacity: 0; } }
.cr-stat b { background: #7d89a6; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .55); }

/* Player key numbers inside the blue hero card */
#playerHero .hero-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 10px 10px; }
#playerHero .hero-metrics article { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; align-items: center; min-height: 0; padding: 8px 12px; background: #0f2f6e !important; border: 2px solid #0d2a66 !important; border-radius: 12px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .25) !important; }
#playerHero .hero-metrics img { grid-row: 1 / 4; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }
#playerHero .hero-metrics small { font-size: 12px; color: #9fe0ff; letter-spacing: .3px; }
#playerHero .hero-metrics strong { font-size: 24px; line-height: 1.1; color: #fff; font-weight: 800; }
#playerHero .hero-metrics span { font-size: 12px; color: #cfe8ff; font-weight: 600; }
#playerHero .hero-metrics span span { font-size: inherit; }
@media (max-width: 900px) { #playerHero .hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Site-wide cards in the in-game sheet look (blue default, colour per card type) ---------- */
html[data-theme="dark"] :is(.panel:not(.search-hero, .benchmark-mini, .player-context-actions, .profile-banner, .clan-profile-hero, .chat-emote-panel), .metrics article, .collection-summary article) {
  --cr-a: #2f6fd6; --cr-b: #2763c8;
  --ar-text: #fff; --ar-muted: #d6e6ff; --ar-faint: #b9cdf2; --ar-line: rgba(255, 255, 255, .18); --ar-line2: rgba(255, 255, 255, .26);
  --dark-text: #fff; --dark-muted: #d6e6ff; --dark-line: rgba(255, 255, 255, .18); --muted: #d6e6ff; --ink: #fff;
  --ar-panel: rgba(13, 42, 102, .5); --ar-panel2: rgba(13, 42, 102, .5); --dark-panel: rgba(13, 42, 102, .5);
  color: #fff;
  border: 3px solid #0d2a66 !important; border-radius: 16px !important;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12), 0 8px 24px rgba(0, 0, 0, .35) !important;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 56px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .10) 0 2px, transparent 2px 56px),
    linear-gradient(180deg, var(--cr-a), var(--cr-b)) !important;
}
html[data-theme="dark"] :is(.verdict, .recent-comparisons, .comment-form, .chat-list, .metrics article:nth-child(4n+2), .dash-box:nth-of-type(4n+2)) { --cr-a: #6a4bd8; --cr-b: #5537b8; }
html[data-theme="dark"] :is(.rank, .rules, .metrics article:nth-child(4n+3), .dash-box:nth-of-type(4n+3)) { --cr-a: #1f9a8f; --cr-b: #177f78; }
html[data-theme="dark"] :is(.card-tools, .metrics article:nth-child(4n), .dash-box:nth-of-type(4n)) { --cr-a: #e07b2a; --cr-b: #c9631c; }
html[data-theme="dark"] :is(.panel, .metrics article, .collection-summary article) :is(h2, h3, strong) { font-family: var(--cr-font); font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(13, 42, 102, .75); }
html[data-theme="dark"] :is(.panel, .metrics article, .collection-summary article) small { color: #ffd34a; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
html[data-theme="dark"] :is(.panel, .metrics article) :is(p, span, em, li, td, th) { text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .panel :is(article, li, .nearby-player, button[data-nearby-tag]):not(.primary):not(.outline) { border-color: rgba(255, 255, 255, .16); }
html[data-theme="dark"] .panel button.outline { border-color: #ffd34a; color: #ffd34a; background: rgba(13, 42, 102, .35); }
html[data-theme="dark"] .panel button:not(.primary, .outline, .cr-btn, [aria-label]), html[data-theme="dark"] .rank.panel > p { background: rgba(13, 42, 102, .55) !important; border: 1px solid rgba(255, 255, 255, .14) !important; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .2); color: #fff; }
html[data-theme="dark"] .panel button:not(.primary, .outline, .cr-btn, [aria-label]):hover { background: rgba(13, 42, 102, .8) !important; }
html[data-theme="dark"] .panel button:not(.primary, .outline, .cr-btn) > b { color: #ffd34a !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }

/* ---------- Readability pass: minimum text sizes (both themes) ---------- */
.section-title small, .panel > small, .panel header small, .panel article > small, .metrics small { font-size: 11px !important; }
.recent-comparisons header small, .nearby-players header small { font-size: 11px !important; }
#nearbyPlayersCount, .rank p, .panel footer span, .verdict footer span { font-size: 12px !important; }
.nearby-players button strong, .recent-comparisons button strong { font-size: 13px !important; }
.nearby-players button small, .nearby-players button em, .recent-comparisons button > em, .recent-comparisons button small { font-size: 11px !important; letter-spacing: 0 !important; }
.recent-comparisons button b { font-size: 15px !important; }
.recent-comparisons > div > button { padding-right: 12px !important; grid-template-rows: auto auto; }
.recent-comparisons > div > button > small { position: static !important; grid-column: 1 / -1; justify-self: center; transform: none !important; }
.bar span, .radar .bar span { font-size: 12px !important; }
.cr-badges figcaption { font-size: 11px !important; }
.collection-lead small, .collection-lead span { font-size: 12px !important; }
.collection-stats header b, .panel header > b { font-size: 13px !important; }
.collection-stats header small { font-size: 11px !important; }
.panel dt, .panel dd { font-size: 13px !important; }
.level-filters button { font-size: 12px !important; }
#cardSort { font-size: 13px !important; }
#cardSortStatus { font-size: 11px !important; letter-spacing: 0 !important; }
.card-level-heading small { font-size: 11px !important; }
.game-card .card-level { font-size: 11px !important; }
.game-card .art em { font-size: 9px !important; }
.game-card-name { font-size: 11px !important; }
label.compare-player-field { font-size: 12px !important; }
label.compare-player-field input { font-size: 14px !important; }
.comment p, .comment-list p { font-size: 14px; }
.rules li, aside.panel li { font-size: 13px !important; line-height: 1.45; }
.rules h3, aside.panel h3 { line-height: 1.25; margin-bottom: 10px; }

/* ---------- Readability pass: colours on the coloured sheets (dark theme) ---------- */
html[data-theme="dark"] .panel :is(p, li, label, dt, dd, td, th, footer span, .list-placeholder, legend) { color: #eef4ff; }
html[data-theme="dark"] .panel :is(label small, .muted, .hint, .help, .admin-note) { color: #d9e6ff; }
html[data-theme="dark"] .panel header > i, html[data-theme="dark"] .panel .info { color: #fff; border-color: rgba(255, 255, 255, .6); }
html[data-theme="dark"] .panel article > span, html[data-theme="dark"] .rank span { color: #e3eeff; }
html[data-theme="dark"] :is(.rank, .rules, .metrics article:nth-child(4n+3), .dash-box:nth-of-type(4n+3)) { --cr-a: #17796f; --cr-b: #105c55; }
html[data-theme="dark"] .recent-comparisons button b, html[data-theme="dark"] .nearby-players button b { color: #ffd34a !important; }
html[data-theme="dark"] .card-search { border: 2px solid rgba(13, 42, 102, .7) !important; background: rgba(13, 42, 102, .6) !important; color: #fff !important; }
html[data-theme="dark"] .card-search input { background: transparent !important; border: 0 !important; color: #fff; }
html[data-theme="dark"] .card-search input::placeholder { color: #d6e6ff; }
html[data-theme="dark"] .level-filters button { background: rgba(13, 42, 102, .55) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .2) !important; }
html[data-theme="dark"] .level-filters button.active { background: #ffd34a !important; color: #3a2300 !important; }
html[data-theme="dark"] #cardSortStatus { color: #fff !important; }
html[data-theme="dark"] .panel :is(input, textarea, select)::placeholder { color: #9fb3d6; opacity: 1; }
html[data-theme="dark"] .panel textarea, html[data-theme="dark"] .panel input:not([type="checkbox"], [type="radio"]), html[data-theme="dark"] .panel select { color: #fff; }
html[data-theme="dark"] .comment-form textarea { padding: 12px 14px; }
.rank small { font-size: 11px !important; } .rank div > span { font-size: 12px !important; }
.collection-economy header b { font-size: 13px !important; } .collection-economy header small { font-size: 11px !important; }
.collection-economy dt, .collection-economy dd { font-size: 13px !important; }
.collection-summary :is(dt, dd) { color: inherit; }
html[data-theme="dark"] :is(.card-tools, .metrics article:nth-child(4n), .dash-box:nth-of-type(4n)) { --cr-a: #cf6a1e; --cr-b: #ad5412; }
html[data-theme="dark"] .cr-stat.gold small { color: #a5620a; }
/* Light theme: grey helper text was too pale on white */
html:not([data-theme="dark"]) { --muted: #56637a; }
html:not([data-theme="dark"]) .collection-lead span { color: #d6e6ff !important; }
html:not([data-theme="dark"]) .collection-lead small { color: #ffd34a !important; }
html:not([data-theme="dark"]) .card-search { color: #56637a; }
.cr-stat.gold small { color: #a5620a !important; }
html:not([data-theme="dark"]) :is(.rank small, .rank div > span, .panel footer span, .list-placeholder, .panel header > i) { color: #44516a !important; }

/* ============ v323 UI/UX pass: design tokens + contrast, focus, type, inputs ============ */
/* Measured WCAG ratios: light #111827/#F6F8FB 16.7, #5F6B7A/#F1F4F8 4.9; dark #F3F6F9/#111820 16.5, #9CA8B5/#18212B 6.7 */
:root {
  --bg-primary: #F6F8FB; --bg-secondary: #EEF2F7;
  --surface-primary: #FFFFFF; --surface-secondary: #F1F4F8; --surface-hover: #E8EEF6;
  --text-primary: #111827; --text-secondary: #374151; --text-muted: #5F6B7A;
  --border-primary: #D7DEE8; --border-strong: #BCC6D2;
  --accent: #155BD0; --accent-hover: #0F4AAF; --accent-label: #8A5A00;
  --success: #0E7A4F; --warning: #8A5A00; --danger: #B42318;
  --focus-ring: #1D6FF2;
  --fs-display: 30px; --fs-h2: 22px; --fs-h3: 16px; --fs-body: 15px; --fs-small: 13px; --fs-label: 12px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-control: 8px; --r-input: 10px; --r-card: 14px; --r-modal: 18px;
}
html[data-theme="dark"] {
  --bg-primary: #0B0F14; --bg-secondary: #0F151C;
  --surface-primary: #111820; --surface-secondary: #18212B; --surface-hover: #202B37;
  --text-primary: #F3F6F9; --text-secondary: #CBD3DC; --text-muted: #9CA8B5;
  --border-primary: #2B3642; --border-strong: #3D4B59;
  --accent: #4C8DFF; --accent-hover: #6FA3FF; --accent-label: #FFD34A;
  --success: #3DD68C; --warning: #FFD34A; --danger: #FF7A70;
  --focus-ring: #FFD34A;
}

/* Keyboard focus: visible ring on every interactive element (not on mouse click) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring) !important; outline-offset: 2px;
}
#searchForm:focus-within { box-shadow: 0 0 0 3px var(--focus-ring) !important; }
#searchForm input:focus-visible { outline: 0 !important; }

/* Fixed 6-9px text -> readable minimum */
.brand-copy small, .brand small { font-size: 10px !important; letter-spacing: 1.4px; }
#searchCrumb, .crumb { font-size: 11px !important; }
.footer p, .footer > span, .footer p a { font-size: 12px !important; line-height: 1.6; }
#clanView .clan-hero-main small { font-size: 12px !important; }
.game-card span.art > em { font-size: 11px !important; }

/* Main nav: active = background + contrast + indicator; hover distinct */
.topbar nav button { transition: background .15s, color .15s; }
html:not([data-theme="dark"]) .topbar nav button { color: var(--text-secondary); }
html:not([data-theme="dark"]) .topbar nav button:hover { background: var(--surface-hover); color: var(--text-primary); }
html:not([data-theme="dark"]) .topbar nav button.active { background: #EAF1FF; color: var(--accent); }
html[data-theme="dark"] .topbar nav button { color: var(--text-secondary); }
html[data-theme="dark"] .topbar nav button:hover { background: var(--surface-hover); color: var(--text-primary); }
html[data-theme="dark"] .topbar nav button.active { background: rgba(255, 211, 74, .10); color: #fff; box-shadow: inset 0 -3px var(--ar-gold); }

/* Light theme contrast fixes */
html:not([data-theme="dark"]) .brand-copy small { color: var(--text-muted) !important; }
html:not([data-theme="dark"]) #searchCrumb { color: var(--accent) !important; }
html:not([data-theme="dark"]) #searchTypeButton i, html:not([data-theme="dark"]) .search-glyph { color: var(--text-muted) !important; }
html:not([data-theme="dark"]) .footer p, html:not([data-theme="dark"]) .footer > span { color: var(--text-muted) !important; }
html:not([data-theme="dark"]) .footer p a { color: var(--accent) !important; }
html:not([data-theme="dark"]) .dash-box header small { color: var(--accent-label) !important; }
html:not([data-theme="dark"]) .dash-rank b { color: var(--accent-label) !important; }
html:not([data-theme="dark"]) .dash-rank i { color: var(--accent) !important; font-weight: 800; }
html:not([data-theme="dark"]) .dash-rank em { color: var(--text-muted) !important; }
html:not([data-theme="dark"]) .rank p { color: var(--text-secondary) !important; }
html:not([data-theme="dark"]) .level-filters button.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
html:not([data-theme="dark"]) .collection-lead small { color: #fff !important; }
html:not([data-theme="dark"]) .collection-lead span { color: #fff !important; }
html:not([data-theme="dark"]) :is(.section-title, .radar header, .rules, .recent-comparisons header) small { color: var(--accent) !important; }
html:not([data-theme="dark"]) .verdict > small, html:not([data-theme="dark"]) .verdict footer span { color: #cfe0ff !important; }
html:not([data-theme="dark"]) .rules li { color: var(--text-secondary) !important; }

/* Profile CR sheet (both themes): darker gray badge and blue small text */
.cr-stat b { background: #56627d !important; }
.cr-stat small { color: #174FAE; }
.cr-stat.gold small { color: #7a4f00 !important; }
.cr-stat.green small { color: #0b6b3f !important; }
html:not([data-theme="dark"]) :is(.nearby-players, .recent-comparisons, .compare-result) b { color: #155bd0; }
html[data-theme="dark"] :is(.modal, .account-dialog) label { color: var(--text-secondary); }
.cr-badges figcaption { color: #fff !important; }
#clanView .clan-stat-strip small { color: #fff !important; }
#clanView #clanWarTrophies { color: #fff; }

/* Dark theme: CR sheet palette slightly darker -> gold labels >=4.5, white >=5.9 */
html[data-theme="dark"] :is(.panel:not(.search-hero, .benchmark-mini, .player-context-actions, .profile-banner, .clan-profile-hero, .chat-emote-panel), .metrics article, .collection-summary article) { --cr-a: #1f52b3; --cr-b: #1a479c; }
html[data-theme="dark"] :is(.verdict, .recent-comparisons, .comment-form, .chat-list, .metrics article:nth-child(4n+2), .dash-box:nth-of-type(4n+2)) { --cr-a: #5a3cc4; --cr-b: #4a2fa6; }
html[data-theme="dark"] :is(.rank, .rules, .metrics article:nth-child(4n+3), .dash-box:nth-of-type(4n+3)) { --cr-a: #11695f; --cr-b: #0c5049; }
html[data-theme="dark"] :is(.card-tools, .metrics article:nth-child(4n), .dash-box:nth-of-type(4n)) { --cr-a: #a14c0c; --cr-b: #853d08; }
html[data-theme="dark"] .panel button.outline.danger { border-color: #ffb4ad; color: #ffd9d5; }
html[data-theme="dark"] .text-button { color: #8fb8ff; }

/* Modals: one design language (title, description, form, actions) */
.modal label, .account-dialog label, .link-player-dialog label { font-size: var(--fs-small) !important; }
.modal p, .account-dialog p, .link-player-dialog p { font-size: 14px !important; line-height: 1.55; }
html:not([data-theme="dark"]) :is(.modal, .account-dialog, .link-player-dialog) p { color: var(--text-muted); }
html[data-theme="dark"] :is(.modal, .account-dialog, .link-player-dialog) p { color: var(--text-secondary); }
.modal form > small, .account-dialog small { font-size: var(--fs-label) !important; }
.modal em { font-size: 12px !important; }
html[data-theme="dark"] .modal form { background: var(--surface-secondary); border: 1px solid var(--border-primary); }
html[data-theme="dark"] .account-dialog, html[data-theme="dark"] .link-player-dialog { background: var(--surface-primary); border-color: var(--border-strong); }

/* Input system: same height, size, radius, focus, error, disabled */
:is(.modal, .account-dialog, .link-player-dialog, .compare-form, .chat-link, .admin-login, #chatComposer) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  min-height: 44px; font-size: 15px; border-radius: var(--r-input);
}
:is(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; }
:is(input, select, textarea):disabled, button:disabled { opacity: .55; cursor: not-allowed; }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger) !important; }
:is(.modal, .account-dialog, .link-player-dialog, .compare-form, .chat-link, #chatComposer) :is(input, select, textarea):focus { border-color: var(--focus-ring) !important; }
@media (max-width: 600px) { input, select, textarea { font-size: 16px !important; } }

/* Chat: signed out -> hide the empty thread panel and its Block button */
.chat-layout.signed-out { grid-template-columns: 1fr !important; }
.chat-layout.signed-out .chat-thread { display: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* v326: welcome label removed; the player search sits centred in the header band */
.search-band .search-hero { justify-content: center; }
.search-band .search-hero form { flex: 0 1 860px; margin-inline: auto !important; }
.search-band .search-hero #notice { flex: 1 1 100%; text-align: center; }

/* v327: admin section menu at the top of the admin centre, stays under the header while scrolling */
#adminContent > #adminTabs { position: sticky; top: var(--header-h, 72px); z-index: 15; margin: 0 0 16px; }

/* v328: collection level chip under the player name */
.collection-chip { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 6px; padding: 4px 12px 4px 6px; border-radius: 10px; background: #0d2a66; border: 2px solid #ffd34a; color: #fff; font-family: var(--cr-font); font-weight: 800; width: fit-content; }
.collection-chip[hidden] { display: none; }
.collection-chip img { width: 26px; height: 26px; object-fit: contain; }
.collection-chip span { font-size: 12px; color: #dce8ff; }
.collection-chip b { font-size: 20px; color: #ffd34a; line-height: 1; }

/* v329: collection level sits right of the name (icon + number, tooltip); avatar = favourite card */
#playerHero .name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#playerHero .name-row h1 { margin: 0; }
.collection-chip { margin: 0; padding: 3px 10px 3px 4px; cursor: help; }
#playerHero .avatar img#avatarImage { object-fit: contain; padding: 4px; }
#playerHero #collectionChip { background: #0d2a66 !important; border: 2px solid #ffd34a !important; }
#playerHero #collectionLevelValue { color: #ffd34a !important; font-size: 20px; text-shadow: 0 2px 0 #3a2300; }
#clanLink[hidden], #noClan[hidden] { display: none !important; }
/* v331: clean name row + avatar fill */
#playerHero #playerName { background: none !important; padding: 0 !important; box-shadow: none !important; }
#playerHero #collectionLevelValue { background: none !important; padding: 0 !important; }
#playerHero #profileBanner .avatar { background: #0d2a66 !important; }
#playerHero #profileBanner .avatar #avatarImage { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; padding: 3px !important; object-fit: contain; }
#playerHero #profileBanner .avatar #level { z-index: 2; }
/* v332: game-style collection level: fanned cards icon + gold number, no box */
#playerHero #collectionChip { background: none !important; border: 0 !important; padding: 0 !important; gap: 4px; }
#playerHero #collectionChip img { width: 38px; height: 36px; }
#playerHero #collectionLevelValue { font-size: 26px; color: #ffd34a !important; -webkit-text-stroke: 1.5px #3a2300; paint-order: stroke fill; text-shadow: 0 2px 0 #3a2300; }

/* v333: avatar = uploaded picture or initials on a game-style blue tile */
#playerHero #profileBanner .avatar { background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 6px, transparent 6px 12px), linear-gradient(160deg, #3d8bff, #1d4fc4 55%, #163a94) !important; }
#playerHero #profileBanner .avatar #avatarText { font-family: var(--cr-font); font-weight: 800; font-size: 28px; color: #fff; -webkit-text-stroke: 1.5px #0b1a3a; paint-order: stroke fill; text-shadow: 0 2px 0 #0b1a3a; text-transform: uppercase; }
#playerHero #profileBanner .avatar #avatarImage.is-upload { padding: 0 !important; object-fit: cover; border-radius: 9px; }
.me-avatar-row { display: flex; gap: 16px; align-items: center; margin-top: 8px; }
.me-avatar-row p { margin: 0 0 10px; }
.me-avatar-preview { flex: 0 0 84px; height: 84px; border-radius: 14px; border: 3px solid #1a1206; display: grid; place-items: center; font-family: var(--cr-font); font-weight: 800; font-size: 28px; color: #fff; text-transform: uppercase; -webkit-text-stroke: 1.5px #0b1a3a; paint-order: stroke fill; background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 6px, transparent 6px 12px), linear-gradient(160deg, #3d8bff, #1d4fc4 55%, #163a94); background-size: cover; background-position: center; }
.me-avatar-preview.has-image { color: transparent; -webkit-text-stroke: 0; }
.me-avatar-upload { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-control); cursor: pointer; }
.me-avatar-upload[hidden] { display: none; }
.me-avatar em { display: block; margin-top: 6px; font-style: normal; font-size: 13px; }

/* v334 header: brand · Home/Community · search · tools. Search lives in the header now. */
.topbar { gap: 14px; }
.topbar .header-search { flex: 1 1 420px; min-width: 0; max-width: 640px; display: flex; align-items: center; }
.topbar .header-search #searchForm { position: relative; flex: 1; display: flex; align-items: center; gap: 6px; height: 42px; margin: 0 !important; padding: 3px 4px 3px 4px; max-width: none; border-radius: 12px; box-shadow: none; }
html[data-theme="dark"] .topbar .header-search #searchForm { background: rgba(7,11,23,.88); border: 1px solid var(--ar-line2); }
html:not([data-theme="dark"]) .topbar .header-search #searchForm { background: #fff; border: 1px solid var(--border, #d9e1ee); }
.topbar .header-search #playerTag { flex: 1; min-width: 0; height: 34px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 6px; font-size: 14px; }
.topbar .header-search #searchSubmit { height: 34px; padding: 0 14px; font-size: 13px; white-space: nowrap; border-radius: 9px; }
.topbar .header-search .search-selector > button { height: 34px; padding: 0 10px; font-size: 13px; }
.topbar .header-search .search-glyph { display: none; }
.topbar .header-search .search-suggestions { top: calc(100% + 6px); left: 0; right: 0; }
.topbar .brand-copy small { letter-spacing: 2px; }
/* the band under the header only carries notices now */
.search-band { padding: 0 !important; background: none !important; border: 0 !important; }
.search-band:has(#notice:empty) { display: none; }
.search-band .search-hero { padding: 10px 0 !important; }

/* flags as images */
.flag { display: block; width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
#activeFlag { display: inline-flex; align-items: center; }
#languageDropdown button span { display: inline-flex; align-items: center; }

/* messages icon: grey, gold and blinking when something new waits */
.messages-button { position: relative; display: inline-grid; place-items: center; }
.messages-button[hidden] { display: none !important; }
.messages-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.messages-button { color: var(--text-secondary, #8a94a8); }
.messages-button.has-unread { color: #f5c445; animation: msg-blink 1.1s ease-in-out infinite; }
.messages-button.has-unread svg { fill: rgba(245,196,69,.22); }
.messages-button .nav-badge { position: absolute; top: -4px; right: -4px; }
@keyframes msg-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .messages-button.has-unread { animation: none; } }

/* profile dropdown */
.account-menu { position: relative; }
.account-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 190px; display: grid; padding: 6px; border-radius: 12px; }
.account-dropdown[hidden] { display: none; }
html[data-theme="dark"] .account-dropdown { background: #0b1324; border: 1px solid var(--ar-line2); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
html:not([data-theme="dark"]) .account-dropdown { background: #fff; border: 1px solid #d9e1ee; box-shadow: 0 14px 34px rgba(16,24,40,.16); }
.account-dropdown button { text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: none; font-weight: 700; color: inherit; cursor: pointer; }
html[data-theme="dark"] .account-dropdown button:hover { background: rgba(255,255,255,.06); }
html:not([data-theme="dark"]) .account-dropdown button:hover { background: #f1f5fb; }
.account-dropdown button.danger { color: #e5534b; }

/* staff rail: right edge, vertically centred, vertical text */
.admin-rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px 0 0 10px; background: #0b1324; border: 1px solid rgba(245,196,69,.45); border-right: 0; box-shadow: -6px 0 18px rgba(0,0,0,.3); }
.admin-rail[hidden] { display: none !important; }
.admin-rail button { writing-mode: vertical-rl; transform: rotate(180deg); border: 0; background: none; color: #f5c445; font-weight: 900; font-size: 12px; letter-spacing: 1px; padding: 6px 2px; cursor: pointer; }
.admin-rail .admin-update-indicator { color: #7fe3a0; }
.admin-rail .admin-update-indicator[hidden] { display: none; }

@media (max-width: 900px) {
  .topbar .header-search { order: 4; flex: 1 1 100%; max-width: none; padding-bottom: 8px; }
  .topbar .header-search #searchSubmit { padding: 0 10px; }
}

/* v335 forum, player page sections, top members */
.forum-topics { display: grid; gap: 12px; align-content: start; }
.forum-topic { display: block; width: 100%; text-align: left; padding: 16px 18px; cursor: pointer; color: inherit; }
.forum-topic h3 { margin: 0 0 4px; font-size: 18px; }
.forum-topic p { margin: 0 0 8px; opacity: .75; }
.forum-topic footer { display: flex; gap: 14px; font-size: 13px; opacity: .8; }
.forum-topic:hover { border-color: var(--ar-gold, #f5c445); }
#forumBack { margin-bottom: 12px; }
#forumReply { margin-top: 14px; }
#forumReply[hidden], #forumTopic[hidden], #forumList[hidden] { display: none; }
.player-cards, .player-wall, .player-topics { margin-top: 28px; }
.player-topics { display: grid; gap: 10px; }
.forum-topic-link { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(128,140,170,.25); background: none; color: inherit; cursor: pointer; text-align: left; }
.forum-topic-link:hover { border-color: var(--ar-gold, #f5c445); }
.top-members { margin-top: 20px; }
.top-members-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 520px; overflow: auto; }
.top-members-list button { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; width: 100%; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(128,140,170,.2); background: none; color: inherit; cursor: pointer; text-align: left; }
.top-members-list button:hover { border-color: var(--ar-gold, #f5c445); }
.top-members-list i { font-style: normal; opacity: .6; font-weight: 800; }
.top-members-list small { opacity: .65; }
.top-members-list strong { color: var(--ar-gold, #f5c445); }

/* v336 big screens (2560x1440): no magnifying zoom, use the width to show more cards at once. */
@media (min-width: 1800px) { body { zoom: 1.08; } }
@media (min-width: 2300px) { body { zoom: 1.12; } .wrap { width: min(2200px, calc(100% - 80px)); } }

/* v338 zoom slider in the staff rail: up = bigger, down = smaller */
.zoom-control { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid rgba(245,196,69,.3); color: #f5c445; font-weight: 900; }
.zoom-control span { font-size: 14px; line-height: 1; }
.zoom-control .zoom-small { font-size: 9px; }
.zoom-control input[type=range] { writing-mode: vertical-lr; direction: rtl; width: 18px; height: 110px; margin: 0; accent-color: #f5c445; cursor: pointer; }
.admin-rail .zoom-control button { writing-mode: horizontal-tb; transform: none; font-size: 15px; padding: 2px 4px; }

/* v339 user panel: the side rail is for everyone (messages, profile, language, theme, zoom);
   the admin version tab sits on top and only the admin sees it. Menus open to the left. */
.topbar .header-search { margin-left: auto; flex: 0 1 640px; }
.user-rail { padding: 10px 6px; gap: 8px; max-height: 96vh; }
.user-rail button { writing-mode: horizontal-tb; transform: none; }
.user-rail .staff-tab { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid rgba(245,196,69,.3); }
.user-rail .staff-tab[hidden] { display: none; }
.user-rail .staff-tab button { writing-mode: vertical-rl; transform: rotate(180deg); }
.rail-tools { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rail-tools .header-icon { width: 38px; height: 38px; display: inline-grid; place-items: center; color: var(--ar-text, #e8eefc); font-size: 18px; letter-spacing: 0; font-weight: 400; padding: 0; }
html:not([data-theme="dark"]) .user-rail { background: #fff; border-color: #cfd9ea; box-shadow: -6px 0 18px rgba(16,24,40,.12); }
html:not([data-theme="dark"]) .rail-tools .header-icon { color: #24324d; }
html:not([data-theme="dark"]) .user-rail .zoom-control { color: #8a6a00; }
.user-rail .language-menu, .user-rail .account-menu { position: relative; }
.user-rail .account-dropdown, .user-rail .language-dropdown { position: absolute !important; right: calc(100% + 12px) !important; left: auto !important; top: 0 !important; bottom: auto !important; width: auto; min-width: 190px; max-height: 70vh; overflow: auto; z-index: 300; }
.user-rail .language-dropdown { min-width: 200px; }
.user-rail .zoom-control input[type=range] { height: clamp(60px, 12vh, 110px); }
.user-rail .nav-badge { position: absolute; top: -2px; right: -2px; }
@media (max-width: 900px) {
  .user-rail { top: auto; bottom: 0; left: 0; right: 0; transform: none; flex-direction: row; justify-content: center; max-height: none; padding: 6px 8px; border-radius: 0; border: 0; border-top: 1px solid rgba(245,196,69,.45); }
  .user-rail .rail-tools { flex-direction: row; }
  .user-rail .zoom-control { display: none; }
  .user-rail .staff-tab { flex-direction: row; border-bottom: 0; padding: 0 8px 0 0; border-right: 1px solid rgba(245,196,69,.3); }
  .user-rail .staff-tab button { writing-mode: horizontal-tb; transform: none; }
  .user-rail .account-dropdown, .user-rail .language-dropdown { right: 0 !important; top: auto !important; bottom: calc(100% + 10px) !important; }
  body { padding-bottom: 60px; }
}
.user-rail .language-dropdown { top: auto !important; bottom: -80px !important; max-height: min(460px, 78vh); }
@media (max-width: 900px) { .user-rail .language-dropdown { bottom: calc(100% + 10px) !important; } }

/* v341 version + update live inside the admin panel */
.admin-version-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.admin-version-bar[hidden] { display: none; }
.admin-version-bar button { writing-mode: horizontal-tb !important; transform: none !important; border: 1px solid rgba(245,196,69,.45); border-radius: 999px; background: none; color: #f5c445; font-weight: 800; padding: 6px 14px; cursor: default; }
.admin-version-bar .admin-update-indicator { cursor: pointer; color: #7fe3a0; border-color: rgba(127,227,160,.5); }
.admin-version-bar .admin-update-indicator[hidden] { display: none; }

/* v342 header auth buttons + collapsible side panel */
.header-auth { display: flex; align-items: center; gap: 8px; margin-right: 4px; }
.header-auth button { height: 36px; padding: 0 14px; font-size: 13px; white-space: nowrap; border-radius: 10px; }
.header-auth button[hidden] { display: none; }
.rail-collapse { width: 38px; height: 24px; border: 0; border-radius: 8px; background: rgba(245,196,69,.14); color: #f5c445; font-size: 18px; font-weight: 900; line-height: 1; cursor: pointer; }
.rail-collapse:hover { background: rgba(245,196,69,.28); }
.rail-handle { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 45; width: 22px; height: 56px; border: 1px solid rgba(245,196,69,.55); border-right: 0; border-radius: 10px 0 0 10px; background: #0b1324; color: #f5c445; font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: -4px 0 14px rgba(0,0,0,.3); animation: handle-nudge 2.4s ease-in-out 3; }
.rail-handle[hidden] { display: none; }
html:not([data-theme="dark"]) .rail-handle { background: #fff; border-color: #cfd9ea; color: #8a6a00; }
@keyframes handle-nudge { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(-5px); } }
@media (max-width: 900px) {
  .header-auth { order: 3; margin-left: auto; }
  .rail-collapse { display: none; }
  .rail-handle { top: auto; bottom: 8px; transform: none; height: 40px; animation: none; }
}
.topbar nav button { white-space: nowrap; }
.topbar .header-search { min-width: 200px; }

/* v344 the side panel owns a strip on the right, so no page content runs under it */
@media (min-width: 901px) {
  body.rail-open { padding-right: 64px; }
  .rail-handle { width: 18px; }
}

/* v345 sticky footer, compact forum, footer admin bar, legal dialog */
body { display: flex; flex-direction: column; min-height: calc(100vh / var(--bodyzoom, 1)); }
body > main { flex: 1 0 auto; width: min(1880px, calc(100% - 64px)); }
body > .footer { margin-top: auto; flex: 0 0 auto; }
.footer { grid-template-columns: auto 1fr auto; }
.footer-end { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.footer-end .admin-version-bar { margin: 0; }
.footer-link { background: none; border: 0; color: var(--ar-faint, #8c97a9); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; }
.footer-link:hover { color: var(--ar-gold, #f5c445); }
#forumList .forum-head { margin: 18px 0 10px; }
#forumList .forum-head h2 { font-size: 20px; letter-spacing: -.2px; }
#forumList .social-layout { align-items: start; }
#forumList .forum-topics { gap: 8px; }
#forumList .forum-topic { padding: 11px 14px; }
#forumList .forum-topic h3 { font-size: 15px; margin-bottom: 2px; }
#forumList .forum-topic p { font-size: 12px; margin-bottom: 4px; }
#forumList .forum-topic footer { font-size: 11px; }
#forumList .rules { margin-top: 0; padding: 14px 16px; top: 78px; }
#forumList .rules h3 { font-size: 15px; margin: 4px 0 8px; }
#forumList .rules ul { gap: 8px; margin: 0; }
.legal-dialog { max-width: 460px; }
.legal-dialog h2 { margin: 6px 0 10px; font-size: 20px; }
.legal-dialog ul { padding-left: 18px; display: grid; gap: 8px; font-size: 13px; line-height: 1.5; }
.modal.open { display: grid; }
@media (max-width: 900px) { .footer { grid-template-columns: 1fr; } .footer-end { justify-content: flex-start; } }

/* v346 media pop-up, clickable home topics */
.dash-topic { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); color: inherit; font: inherit; cursor: pointer; }
.dash-topic:hover b { color: var(--ar-gold, #f5c445); }
.media-dialog { width: min(1100px, 94vw); background: #0d1730; border: 1px solid rgba(245,196,69,.35); border-radius: 14px; padding: 12px; display: grid; gap: 10px; max-height: 94vh; overflow: auto; }
.media-dialog header { display: flex; align-items: center; gap: 12px; }
.media-dialog header b { flex: 1; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-dialog header .outline { text-decoration: none; white-space: nowrap; font-size: 12px; padding: 7px 12px; }
.media-dialog header button { background: none; border: 0; color: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
#mediaBody iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; display: block; }
.media-article { display: grid; gap: 12px; justify-items: start; }
.media-article img { max-width: 100%; max-height: 50vh; border-radius: 10px; }
.media-article .primary { text-decoration: none; }

/* v347 */
.media-dialog header .outline { color: #0d1730; background: #fff; font-weight: 800; }
.dash-box[hidden] { display: none; }
#mediaBody iframe.media-page { aspect-ratio: auto; height: 78vh; background: #fff; }
.media-dialog { width: min(1200px, 96vw); }

/* v349 rankings on top: world row, then country row */
.home-dash { grid-template-columns: minmax(0, 1fr); }
.dash-ranks { display: grid; gap: 14px; }
.dash-rank-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dash-group-title { margin: 0 0 8px; font-size: 13px; letter-spacing: 1.4px; color: var(--ar-gold, #ffc928); font-weight: 900; }
.dash-group-title b { color: inherit; margin-left: 6px; }
@media (max-width: 800px) { .dash-rank-row { grid-template-columns: 1fr; } }

/* v350 videos on the left, ranking blocks on the right */
.home-dash { grid-template-columns: minmax(0, 1fr) minmax(560px, 700px); align-items: start; }
.home-dash > .dash-main { grid-column: 1; grid-row: 1; }
.home-dash > .dash-ranks { grid-column: 2; grid-row: 1; }
@media (max-width: 1250px) {
  .home-dash { grid-template-columns: minmax(0, 1fr); }
  .home-dash > .dash-main, .home-dash > .dash-ranks { grid-column: 1; grid-row: auto; }
  .home-dash > .dash-ranks { order: -1; }
}

/* v351 blocked-video card */
.media-blocked { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: center; padding: 6px; }
.media-blocked img { width: 100%; border-radius: 10px; aspect-ratio: 16 / 9; object-fit: cover; filter: brightness(.7); }
.media-blocked p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.media-blocked .primary { display: inline-block; text-decoration: none; }
.media-loading { text-align: center; padding: 40px; opacity: .6; }
@media (max-width: 700px) { .media-blocked { grid-template-columns: 1fr; } }

/* v352 videos that can only play on YouTube */
.dash-video.external b::after { content: " ↗"; opacity: .7; }

/* v353 discuss buttons, forum media card, start-discussion dialog */
.dash-video, .dash-news-item { position: relative; }
.dash-discuss, .discuss-btn { font: inherit; cursor: pointer; border-radius: 999px; border: 1px solid rgba(255,211,74,.55); background: rgba(8,16,40,.55); color: #ffd34a; font-size: 12px; font-weight: 800; padding: 4px 12px; }
.dash-discuss:hover, .discuss-btn:hover { background: #ffd34a; color: #0d1730; }
.dash-video .dash-discuss { position: absolute; right: 4px; bottom: 2px; }
.dash-news-item .dash-discuss { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.media-dialog header .discuss-btn { white-space: nowrap; padding: 7px 14px; background: transparent; color: #ffd34a; }
.media-dialog header .discuss-btn:hover { color: #0d1730; }
.forum-media { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 8px; margin: 8px 0; }
.forum-media:hover { border-color: #ffd34a; }
.forum-media img { width: 160px; max-height: 90px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.forum-media span { display: grid; gap: 4px; min-width: 0; }
.forum-media b { font-size: 14px; }
.forum-media em { font-style: normal; font-size: 12px; opacity: .7; }
.discuss-dialog { max-width: 520px; display: grid; gap: 10px; }
.discuss-dialog h2 { margin: 0; font-size: 20px; }
.discuss-dialog p { margin: 0; font-size: 13px; opacity: .8; }
.discuss-dialog textarea { width: 100%; min-height: 90px; resize: vertical; }
.discuss-dialog em { color: #ff8a8a; font-style: normal; font-size: 13px; }

/* v354 globe / flag icons in the ranking headers */
.dash-box > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-ico { flex: 0 0 auto; margin: 0 0 10px; }
.dash-globe { font-size: 22px; line-height: 1; display: inline-block; animation: dash-spin 8s linear infinite; }
.dash-flag { width: 30px; height: auto; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
@keyframes dash-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dash-globe { animation: none; } }

/* v355 language pop-up */
.language-dialog { width: min(560px, 92vw); display: grid; gap: 14px; position: relative; }
.language-dialog h2 { margin: 0; font-size: 20px; }
.language-dialog #closeLanguage { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.language-dialog .language-dropdown { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; background: none; border: 0; box-shadow: none; padding: 0; width: auto; min-width: 0; }
.language-dialog .language-dropdown button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-align: left; }
.language-dialog .language-dropdown button i { margin-left: auto; visibility: hidden; }
.language-dialog .language-dropdown button.active i { visibility: visible; }
@media (max-width: 420px) { .language-dialog .language-dropdown { grid-template-columns: 1fr; } }

/* v356 emotes float on the chat: no button box, only the character with a soft 3D shadow */
button.chat-emote, button.chat-emote:hover, button.chat-emote:focus { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
.chat-emote img { filter: drop-shadow(0 6px 3px rgba(0, 0, 0, .35)) drop-shadow(0 1px 0 rgba(255, 255, 255, .25)); transition: transform .15s; }
.chat-emote:hover img { transform: scale(1.06) rotate(-2deg); }

/* v357 clan voice / video room */
.chat-call-tools { margin-left: auto; display: inline-flex; gap: 6px; }
.chat-call-tools[hidden] { display: none; }
.chat-call-btn { width: 38px; height: 38px; border-radius: 10px; border: 2px solid #0d2a66; background: #ffc928; box-shadow: inset 0 -3px 0 #c98a00; font-size: 18px; cursor: pointer; line-height: 1; }
.chat-call-btn:active { transform: translateY(2px); }
.chat-join-call { margin-left: 6px; border: 0; border-radius: 999px; background: #3bb54a; color: #fff; font: inherit; font-size: 12px; font-weight: 800; padding: 3px 12px; cursor: pointer; }
.call-panel { position: fixed; inset: 0; z-index: 1200; background: rgba(5, 10, 24, .96); display: grid; grid-template-rows: auto 1fr auto; }
.call-panel[hidden] { display: none; }
.call-panel header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; color: #fff; font-size: 16px; }
.call-panel header button { background: none; border: 0; color: #fff; font-size: 30px; cursor: pointer; line-height: 1; }
.call-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: minmax(180px, 1fr); gap: 10px; padding: 10px 18px; overflow: auto; }
.call-tile { position: relative; background: #12204a; border: 3px solid #0d2a66; border-radius: 14px; overflow: hidden; display: grid; place-items: center; }
.call-tile.speaking { border-color: #3bb54a; box-shadow: 0 0 0 2px #3bb54a; }
.call-tile video { width: 100%; height: 100%; object-fit: cover; }
.call-avatar { width: 84px; height: 84px; border-radius: 50%; background: #2f6fd6; color: #fff; display: grid; place-items: center; font-size: 38px; font-weight: 800; }
.call-tile span { position: absolute; left: 8px; bottom: 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 8px; }
.call-panel footer { display: flex; justify-content: center; gap: 12px; padding: 14px; }
.call-ctl { border: 0; border-radius: 12px; padding: 12px 22px; font: inherit; font-weight: 800; background: #2f6fd6; color: #fff; cursor: pointer; }
.call-ctl[aria-pressed="false"] { background: #5b6478; }
.call-ctl.danger { background: #d33a3a; }
.call-note { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1300; background: #0d1730; color: #fff; border: 1px solid #ffc928; border-radius: 12px; padding: 10px 16px; max-width: 90vw; font-size: 14px; }
.call-note[hidden] { display: none; }

/* v358 friends page */
.friends-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .friends-page { grid-template-columns: 1fr; } }
.friend-activity { display: grid; gap: 8px; margin-top: 10px; }
.friend-act { text-align: left; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 10px 12px; color: inherit; font: inherit; font-size: 14px; cursor: pointer; display: block; }
.friend-act:hover { border-color: #ffc928; }
.friend-act u { text-decoration: none; color: #ffc928; }
.friend-act time { display: block; font-size: 11px; opacity: .6; margin-top: 3px; }

/* v359 beat the dark-theme .panel button rule: emotes have no box at all */
html[data-theme] .panel button.chat-emote, html[data-theme] .chat-bubble button.chat-emote, html[data-theme] .chat-messages button.chat-emote { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; outline: 0; }

/* v360 search: short placeholder, animated analyse icon instead of a text button */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topbar .header-search #playerTag { font-size: 13px; }
.topbar .header-search #playerTag::placeholder { font-size: 12.5px; opacity: .6; }
.topbar .header-search #searchSubmit { width: 42px; padding: 0; display: inline-grid; place-items: center; }
.analyze-ico { width: 20px; height: 20px; fill: #fff; overflow: visible; }
.analyze-ico rect { transform-box: fill-box; transform-origin: 50% 100%; animation: analyze-bar 1.6s ease-in-out infinite; }
.analyze-ico .b2 { animation-delay: -.5s; }
.analyze-ico .b3 { animation-delay: -1s; }
@keyframes analyze-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .analyze-ico rect { animation: none; } }

/* v361 readable time / report line under chat bubbles (emotes especially) */
html[data-theme] .chat-bubble > span { font-size: 12px !important; opacity: 1 !important; color: #eef4ff !important; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .75); }
html[data-theme] .chat-bubble button.chat-report { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; font-size: 12px !important; color: #ffd34a !important; text-decoration: underline; cursor: pointer; }
html[data-theme] .chat-bubble:has(.chat-emote) > span { display: block; padding: 2px 6px; background: rgba(8, 16, 40, .55); border-radius: 8px; width: max-content; margin-top: 2px; }
html[data-theme] .chat-bubble.mine:has(.chat-emote) > span { margin-left: auto; }

/* v363 centred loading circle */
.busy-spinner { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; background: rgba(5, 10, 24, .45); pointer-events: all; }
.busy-spinner[hidden] { display: none; }
.busy-spinner i { width: 64px; height: 64px; border-radius: 50%; border: 6px solid rgba(255, 255, 255, .2); border-top-color: #ffc928; animation: busy-spin .8s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }

/* v364 compact clan page: stats fill the hero's right side, members in 2-3 columns, Analyze beside the name */
#clanView .clan-profile-hero { grid-template-columns: auto minmax(0, 1fr) minmax(340px, 46%); grid-template-areas: "badge main stats"; padding: 14px 18px; gap: 14px 20px; }
#clanView .clan-profile-badge { width: 96px; }
#clanView .clan-profile-badge img#clanHeroBadge { width: 80px; }
#clanView #clanTitle { font-size: clamp(24px, 3vw, 34px); margin: 0 0 2px; }
#clanView .clan-desc { padding: 6px 10px; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#clanView .clan-stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: stretch; }
#clanView .clan-stat-strip > div { padding: 7px 6px; border-right: 2px solid rgba(13, 42, 102, .35) !important; border-bottom: 2px solid rgba(13, 42, 102, .35) !important; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#clanView .clan-stat-strip > div:nth-child(3n) { border-right: 0 !important; }
#clanView .clan-stat-strip > div:nth-child(n+4) { border-bottom: 0 !important; }
#clanView .clan-stat-strip small { font-size: 11px; }
#clanView .clan-stat-strip b { font-size: 18px; }
#clanView .clan-stat-strip b img { width: 20px; height: 20px; }
#clanView .clan-layout { margin-top: 10px; }
#clanView .clan-roster { padding: 12px 14px; }
#clanView #clanMembers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; }
#clanView .clan-member { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px; min-height: 0; }
#clanView .clan-member > i { width: 28px; height: 28px; font-size: 13px; }
#clanView .clan-member .cm-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
#clanView .clan-member .cm-line strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#clanView .clan-member .cm-line button { flex: none; padding: 2px 9px; font-size: 11px; min-height: 0; height: 22px; line-height: 1; }
#clanView .clan-member small { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#clanView .clan-member .clan-member-trophies { margin: 0; }
@media (max-width: 1400px) { #clanView #clanMembers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { #clanView .clan-profile-hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "badge main" "stats stats"; } #clanView .clan-stat-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } #clanView .clan-stat-strip > div { border-bottom: 0 !important; border-right: 2px solid rgba(13, 42, 102, .35) !important; } #clanView .clan-stat-strip > div:last-child { border-right: 0 !important; } }
@media (max-width: 700px) { #clanView #clanMembers { grid-template-columns: 1fr; } #clanView .clan-stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } #clanView .clan-stat-strip > div:nth-child(3n) { border-right: 0 !important; } #clanView .clan-stat-strip > div:nth-child(-n+3) { border-bottom: 2px solid rgba(13, 42, 102, .35) !important; } }
@media (max-width: 560px) { #clanView .clan-profile-hero { grid-template-columns: 1fr; grid-template-areas: "badge" "main" "stats"; } }

/* v365 clan members: column-first order, dividers between columns, donations + last seen */
#clanView #clanMembers { grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 17), auto); column-gap: 0; }
#clanView .clan-member { padding-left: 12px; padding-right: 12px; }
#clanView .clan-member.col-start { border-left: 2px solid rgba(255, 211, 74, .45); }
#clanView .clan-member .cm-ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
@media (max-width: 700px) { #clanView .clan-member.col-start { border-left: 0; } }

/* v366 clan roster: one-line header, clock + time by the name, animated analyse icon */
#clanView .roster-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
#clanView .roster-head h3 { margin: 0; font-size: 15px; letter-spacing: 1.2px; }
#clanView #clanRosterCount { color: #ffd34a; font-weight: 800; font-size: 15px; }
#clanView .clan-member .cm-seen { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: #bcd3ff; white-space: nowrap; flex: none; }
#clanView .clan-member .cm-seen svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] #clanView .clan-member .cm-line button.cm-analyze { width: 26px; height: 24px; padding: 0; display: inline-grid; place-items: center; background: #1b8ae6 !important; border: 0 !important; border-radius: 7px; box-shadow: inset 0 -2px 0 #0f5fb0; cursor: pointer; }
#clanView .clan-member .cm-analyze .analyze-ico { width: 14px; height: 14px; }

/* v367 player hero: on wide screens the four stat cards fill the empty middle (2x2), below that they drop under the hero */
@media (min-width: 1850px) {
  #playerHero { grid-template-columns: auto minmax(460px, 1fr) auto; grid-template-areas: "banner stats bench" "actions stats bench"; }
  #playerHero .hero-metrics { grid-area: stats; grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; margin: 10px 4px; }
  #playerHero .hero-metrics article { padding: 8px 12px; }
  #playerHero .player-context-actions { flex-wrap: wrap; }
}

/* v368 forum: compact posts, quote button, quotes, inline emotes, images, video cards, composer tools */
#forumTopic .comments { display: grid; gap: 8px; }
#forumTopic .comment.panel { padding: 10px 14px; margin: 0; }
#forumTopic .comment header { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
#forumTopic .comment header h3 { margin: 0; font-size: 14px; }
#forumTopic .comment header time { font-size: 11px; opacity: .7; margin-left: 2px; }
#forumTopic .comment p { margin: 0 0 6px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
html[data-theme] #forumTopic .comment header button.fr-quote { margin-left: auto; width: 28px; height: 24px; padding: 0; border-radius: 7px; background: rgba(255, 255, 255, .12) !important; border: 0 !important; color: #ffd34a !important; font-size: 16px; line-height: 1; cursor: pointer; }
#forumTopic blockquote { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #ffd34a; background: rgba(13, 42, 102, .45); border-radius: 0 8px 8px 0; font-size: 13px; opacity: .92; white-space: pre-line; overflow-wrap: anywhere; }
#forumTopic .comment .chat-emote { display: inline-block; vertical-align: middle; width: 56px; height: 56px; padding: 0; margin: 0 2px; }
html[data-theme] #forumTopic .comment .chat-emote { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#forumTopic .comment .chat-emote img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }
#forumTopic .fr-img { display: inline-block; margin: 4px 6px 4px 0; }
#forumTopic .fr-img img { max-width: min(100%, 420px); max-height: 320px; border-radius: 10px; display: block; border: 2px solid rgba(13, 42, 102, .6); }
#forumTopic .fr-video { position: relative; display: inline-block; margin: 4px 6px 4px 0; }
#forumTopic .fr-video img { width: 280px; max-width: 100%; border-radius: 10px; display: block; }
#forumTopic .fr-video i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 34px; color: #fff; text-shadow: 0 2px 8px #000; }
#forumReply { padding: 10px 12px; }
#forumReply textarea { min-height: 64px; }
#forumReply footer { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
#forumReply footer #forumReplyNote { margin-left: auto; font-size: 12px; opacity: .8; }
#forumReply footer .primary { flex: none; }
.fr-tools { display: flex; gap: 6px; }
html[data-theme] #forumReply .fr-tools button { width: 34px; height: 30px; padding: 0; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .14) !important; border: 0 !important; border-radius: 8px; color: #ffd34a !important; font-size: 18px; cursor: pointer; }
.fr-tools svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fr-emote-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 4px; max-height: 190px; overflow-y: auto; margin-top: 8px; padding: 8px; background: rgba(13, 42, 102, .5); border-radius: 10px; }
.fr-emote-panel[hidden] { display: none; }
html[data-theme] .fr-emote-panel button { background: rgba(255, 255, 255, .1) !important; border: 0 !important; border-radius: 10px; padding: 3px; cursor: pointer; }
.fr-emote-panel img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }

/* v369 comparison: one tug-of-war bar per dimension, 2-3 columns, winner obvious */
#compareResult .comparison-summary { padding: 10px 18px; }
#compareResult .comparison-summary > small { margin: 0 0 4px; }
#compareResult .comparison-summary > div { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
#compareResult .comparison-summary article { display: flex; align-items: baseline; justify-content: center; gap: 12px; padding: 6px 12px; min-height: 0; }
#compareResult .comparison-summary article:first-child { border-bottom: 4px solid #f5a524; }
#compareResult .comparison-summary article:last-child { flex-direction: row-reverse; border-bottom: 4px solid #2f8cff; }
#compareResult .comparison-summary strong { font-size: 40px; line-height: 1; }
#compareResult .comparison-summary article.winner strong { color: #ffd34a; }
#compareResult .comparison-factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 10px; }
@media (min-width: 1900px) { #compareResult .comparison-factors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { #compareResult .comparison-factors { grid-template-columns: 1fr; } }
#compareResult .comparison-factor { padding: 8px 12px 10px; background: rgba(13, 42, 102, .55); border: 2px solid #0d2a66; border-radius: 12px; }
#compareResult .comparison-factor header { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 0; background: none; }
#compareResult .comparison-factor header b { font-size: 14px; }
#compareResult .comparison-factor header small { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #cfe0ff; }
#compareResult .cf-lead { margin-left: auto; font-style: normal; font-weight: 800; font-size: 12px; padding: 1px 8px; border-radius: 999px; color: #08122b; }
#compareResult .cf-a .cf-lead, #compareResult .cf-a header .cf-lead { background: #f5a524; }
#compareResult .cf-b header .cf-lead { background: #2f8cff; color: #fff; }
#compareResult .cf-bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 2px #0d2a66; }
#compareResult .cf-bar span { display: flex; align-items: center; gap: 6px; padding: 0 8px; min-width: 0; font-size: 12px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; }
#compareResult .cf-bar .cf-a { background: linear-gradient(#ffb840, #e68f0c); color: #3a2300; }
#compareResult .cf-bar .cf-b { flex: 1; justify-content: flex-end; background: linear-gradient(#4aa0ff, #1f6fe0); }
#compareResult .cf-bar b { font-size: 14px; flex: none; }
#compareResult .cf-bar i { font-style: normal; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
#compareResult .cf-bar span { transition: width .6s ease; }
#compareResult .cf-a .cf-a, #compareResult .cf-b .cf-b { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }

/* v370 ranking boxes: pager arrows left of the globe / flag */
.dash-box header { align-items: center; }
.dash-pager { margin-left: auto; margin-right: 8px; display: inline-flex; align-items: center; gap: 4px; }
.dash-pager i { font-style: normal; font-size: 11px; font-weight: 800; min-width: 32px; text-align: center; opacity: .85; }
html[data-theme] .dash-box .dash-pager button { width: 24px; height: 24px; padding: 0; display: inline-grid; place-items: center; font-size: 18px; line-height: 1; border-radius: 7px; background: rgba(255, 255, 255, .14) !important; border: 0 !important; color: #ffd34a !important; cursor: pointer; }
html[data-theme] .dash-box .dash-pager button:disabled { opacity: .3; cursor: default; }

/* v371 home forum list: each topic a soft rounded card with breathing room */
.dash-forum { display: grid; gap: 8px; padding: 4px 2px 2px; }
html[data-theme] .dash-forum .dash-topic { padding: 10px 18px; border: 0 !important; border-radius: 14px; background: rgba(255, 255, 255, .08) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: background .15s, transform .15s; }
html[data-theme] .dash-forum .dash-topic:hover { background: rgba(255, 255, 255, .15) !important; transform: translateY(-1px); }
.dash-forum .dash-topic i { padding: 3px 11px; border-radius: 999px; background: rgba(0, 0, 0, .25); opacity: .9; white-space: nowrap; }

/* v373 player hero: the action buttons stack in a column beside the name instead of a wide row under it */
@media (min-width: 761px) {
  #playerHero { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "banner actions bench"; }
  #playerHero .player-context-actions { align-self: center; padding: 8px 6px; }
  #playerHero .player-quick-actions { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  #playerHero .player-quick-actions button { white-space: nowrap; justify-content: center; }
  #playerHero .hero-metrics { grid-area: auto; grid-column: 1 / -1; }
}
@media (min-width: 1850px) {
  #playerHero { grid-template-columns: auto auto minmax(460px, 1fr) auto; grid-template-areas: "banner actions stats bench"; }
  #playerHero .hero-metrics { grid-area: stats; grid-column: auto; }
}

/* v374 player page tabs: one section at a time instead of one very long page */
.player-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; padding: 5px; background: rgba(13, 42, 102, .55); border: 2px solid #0d2a66; border-radius: 14px; }
html[data-theme] .player-tabs button { flex: 1 1 0; min-width: 0; padding: 9px 14px; border: 0 !important; border-radius: 10px; background: transparent !important; color: #cfe0ff !important; font-family: var(--cr-font); font-weight: 800; font-size: 15px; white-space: nowrap; cursor: pointer; transition: background .15s; }
html[data-theme] .player-tabs button:hover { background: rgba(255, 255, 255, .1) !important; }
html[data-theme] .player-tabs button.active { background: linear-gradient(#ffc933, #e89a0c) !important; color: #3a2300 !important; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
#analysisView[data-ptab="profile"] > [data-ptab]:not([data-ptab="profile"]),
#analysisView[data-ptab="analysis"] > [data-ptab]:not([data-ptab="analysis"]),
#analysisView[data-ptab="near"] > [data-ptab]:not([data-ptab="near"]),
#analysisView[data-ptab="cards"] > [data-ptab]:not([data-ptab="cards"]),
#analysisView[data-ptab="wall"] > [data-ptab]:not([data-ptab="wall"]) { display: none !important; }
@media (max-width: 600px) { .player-tabs { flex-wrap: nowrap; overflow-x: auto; } html[data-theme] .player-tabs button { flex: 0 0 auto; padding: 8px 12px; font-size: 14px; } }

/* v375 player tabs: chunky game-style buttons with icons, centred, no bar behind them */
.player-tabs { justify-content: center; gap: 10px; padding: 0; background: none; border: 0; margin: 4px 0 14px; }
html[data-theme] .player-tabs button { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 9px; padding: 8px 20px 8px 14px; min-width: 130px; justify-content: center; border: 2px solid #0d2a66 !important; border-radius: 14px; background: linear-gradient(#3b86e6, #2160c4) !important; color: #fff !important; -webkit-text-stroke: .6px #0d2a66; text-shadow: 0 2px 0 #0d2a66; font-size: 16px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 #0d2a66; transition: transform .1s, box-shadow .1s; }
html[data-theme] .player-tabs button:hover { background: linear-gradient(#4a96f5, #2a6ad4) !important; transform: translateY(-1px); }
html[data-theme] .player-tabs button:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 1px 0 #0d2a66; }
html[data-theme] .player-tabs button.active { background: linear-gradient(#ffd24a, #f0a010) !important; color: #fff !important; border-color: #5a3b00 !important; -webkit-text-stroke: .6px #5a3b00; text-shadow: 0 2px 0 #5a3b00; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 4px 0 #5a3b00; }
.player-tabs button img, .player-tabs button svg { width: 26px; height: 26px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
@media (max-width: 600px) { .player-tabs { justify-content: flex-start; } html[data-theme] .player-tabs button { min-width: 0; padding: 7px 14px 7px 10px; font-size: 14px; } .player-tabs button img, .player-tabs button svg { width: 22px; height: 22px; } }