/* Home dashboard and shared navigation */
:root .in {
  --shell-header:58px;
  --shell-nav:176px;
  --shell-rail:252px;
  --home-link:#8dcaff;
  --home-active:#154b89;
  --home-hero:#102343;
}
:root[data-theme="light"] .in {
  --home-link:#164e92;
  --home-active:#155bb4;
  --home-hero:#e9f2ff;
}
:root .in > header { position:fixed; inset:0 0 auto; margin:0; }
:root .in { padding-top:var(--shell-header); }
:root .in > header .brand-wordmark { margin-right:auto; }
:root .in #side { padding:8px; }
:root .in #side::after { display:none; }
:root[data-theme="light"] .in #side { background:#fff!important; border-color:#c5d4e5; }
:root .in #side .tabs { padding:0; background:transparent!important; }
:root .in #side .tabs button,
:root .in #side #inviteInbox {
  color:var(--ink)!important; min-width:0; min-height:42px; font-size:14px!important;
  font-weight:600; line-height:1.25; text-align:left;
}
:root .in #side .tabs button.on {
  color:#fff!important; background:var(--home-active)!important; border-color:transparent!important;
}
:root .in #side #inviteInbox {
  width:100%; display:flex; align-items:center; gap:8px; margin-top:8px;
  background:transparent; border-color:var(--line);
}
:root .in #side #inviteInbox[hidden] { display:none; }
:root .in #side #inviteInbox b { margin-left:auto; color:var(--home-link); }

:root .clash-dashboard { display:grid; gap:14px; font-size:14px; line-height:1.45; }
:root .clash-dashboard .welcome-banner {
  position:relative; isolation:isolate; overflow:hidden; min-height:144px;
  padding:20px; gap:16px; margin:0; border-radius:16px;
  background:var(--home-hero)!important; color:var(--ink);
}
:root .clash-dashboard .welcome-banner > .mountain-art {
  display:block; position:absolute; inset:0; z-index:-1; width:auto; height:auto;
  background:url('mountains.svg') 90% bottom / auto 120% no-repeat; opacity:.17;
}
:root .clash-dashboard .welcome-copy h2 { font-size:clamp(24px,2.1vw,34px); line-height:1.12; margin:5px 0 8px; }
:root .clash-dashboard .welcome-copy h2 span,
:root .clash-dashboard .welcome-copy .eyebrow { color:var(--home-link); }
:root .clash-dashboard .welcome-copy .eyebrow { font-size:10px; letter-spacing:.08em; }
:root .clash-dashboard .welcome-copy p { color:var(--mute); font-size:14px; margin:0; }
:root .clash-dashboard .welcome-stats {
  background:color-mix(in srgb,var(--s1) 88%,transparent);
  border:1px solid var(--line); border-radius:12px; padding:8px 4px;
}
:root .clash-dashboard .welcome-stats > div { padding:4px; min-width:0; }
:root .clash-dashboard .welcome-stats .ico { color:var(--home-link); width:19px; height:19px; }
:root .clash-dashboard .welcome-stats b { font-size:22px; line-height:1.2; }
:root .clash-dashboard .welcome-stats small { font-size:11px; color:var(--mute); }
:root .clash-dashboard .arena-toolbar { display:grid; gap:9px; margin:0; }
:root .clash-dashboard .arena-heading { gap:9px; }
:root .clash-dashboard .arena-heading h2 { font-size:20px; margin:0; }
:root .clash-dashboard .arena-heading .ico { width:23px; height:23px; }
.home-subjects { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
:root .home-subjects .home-subject {
  display:flex; align-items:center; justify-content:center; gap:8px; min-width:0;
  min-height:42px; padding:6px; background:var(--s1); color:var(--ink);
  border:1px solid var(--line); border-radius:9px; font-size:13px; white-space:nowrap;
}
:root .home-subjects .home-subject.on { background:var(--home-active); color:#fff; border-color:transparent; }
.home-subject .subject-symbol { flex:none; display:grid; width:18px; height:18px; }
.home-subject svg { width:100%; height:100%; }
:root .clash-dashboard .clash-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
:root .clash-dashboard .clash-mode-card {
  --mode:#409ce6; min-width:0; grid-template-columns:40px minmax(0,1fr);
  gap:8px 10px; padding:12px!important; margin:0; border-radius:12px;
  border-color:color-mix(in srgb,var(--mode) 26%,var(--line));
  background:linear-gradient(115deg,color-mix(in srgb,var(--mode) 10%,var(--s1)),var(--s1))!important;
}
:root .clash-dashboard [data-mode="strike"] { --mode:#a27ae4; }
:root .clash-dashboard [data-mode="speed"] { --mode:#2ab49b; }
:root .clash-dashboard [data-mode="royale"] { --mode:#d58a46; }
:root .clash-dashboard .clash-mode-card::before,
:root .clash-dashboard .clash-mode-card::after { display:none; }
:root .clash-dashboard .clash-mode-card .ic {
  width:40px!important; height:40px!important; border-radius:9px;
  background:color-mix(in srgb,var(--mode) 15%,var(--s1))!important;
}
:root .clash-dashboard .clash-mode-card .ic .ico { width:22px!important; height:22px!important; color:var(--mode)!important; }
:root[data-theme="light"] .clash-dashboard .clash-mode-card .ic .ico { color:color-mix(in srgb,var(--mode) 64%,#152640)!important; }
:root .clash-dashboard .mode-copy b { font-size:17px; line-height:1.2; }
:root .clash-dashboard .mode-copy p { font-size:13px; line-height:1.35; margin:3px 0; color:var(--mute); }
:root .clash-dashboard .mode-detail { font-size:11px; background:none; padding:0; color:var(--mute); }
:root .clash-dashboard .clash-mode-card > button,
:root .clash-dashboard .mode-actions > button { min-height:36px; padding:6px 10px; font-size:12px; }
:root .clash-dashboard .clash-mode-card .pri { background:#155bb4!important; color:white!important; box-shadow:none!important; }

.home-rating-panel { border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--s1); }
.home-rating-title h3 { margin:0; font-size:16px; }
:root .home-rating-panel .meath-ratings { margin:8px 0 0; gap:0; grid-template-columns:repeat(4,minmax(0,1fr)); }
:root .home-rating-panel .rating-card {
  border:0; border-radius:0; box-shadow:none; min-width:0; padding:8px 10px;
  background:transparent; border-inline-start:1px solid var(--line);
}
:root .home-rating-panel .rating-card:first-child { border-inline-start:0; }
:root .home-rating-panel .rating-card-heading { flex-direction:row; align-items:center; gap:6px; }
:root .home-rating-panel .rating-card-heading small { font-size:13px; }
:root .home-rating-panel .rating-card-value b { font-size:26px; color:var(--ink)!important; font-variant-numeric:tabular-nums; }
:root .home-rating-panel .rating-card-caption { font-size:11px; }
:root .clash-dashboard .meath-summary-actions { margin:0; gap:8px; }
:root .clash-dashboard .meath-summary-actions button { min-height:36px; padding:6px 10px; font-size:12px; }

:root .clash-dashboard .online-section { padding:14px; border-radius:14px; }
:root .clash-dashboard .online-section .panel-heading { margin:0 0 8px; gap:6px; }
:root .clash-dashboard .online-section h3 { font-size:16px; margin:0; }
:root .clash-dashboard .online-section .panel-actions { display:flex; gap:4px; }
:root .clash-dashboard .online-section .text-action { min-height:36px; padding:4px 6px; font-size:12px; }
:root .online-player-list { gap:0; }
:root .online-player {
  grid-template-columns:40px minmax(0,1fr) auto; gap:10px;
  background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; padding:9px 0;
}
:root .online-player:hover { transform:none; border-color:var(--line); }
:root .online-player > .av { width:40px!important; height:40px!important; overflow:hidden; }
:root .online-player-id b { font-size:14px!important; }
:root .online-player-id small { font-size:12px!important; color:var(--mute); white-space:normal; line-height:1.35; }
:root .online-player-actions {
  display:flex; flex-wrap:nowrap; align-items:center; width:auto; justify-content:flex-end; gap:6px;
}
:root .online-player-actions button,
:root .online-player-actions .player-status {
  display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:36px;
  padding:5px 8px; font-size:12px; white-space:nowrap;
}
:root .online-player-actions .player-status { color:var(--mute); }
:root .online-player-actions .ico { width:15px; height:15px; flex:none; }
:root .online-player-actions .pri { background:#155bb4!important; color:#fff!important; border-color:transparent!important; }
:root .clash-dashboard .panel-footnote { font-size:11px; color:var(--mute); }
:root .in #right .card, :root .in #right .dashboard-panel,
:root .in #right #quests, :root .in #right #coinTasks { padding:14px; border-radius:14px; }

@media(max-width:780px) {
  :root .in > header { height:var(--shell-header); min-height:var(--shell-header); }
  :root .in #side .tabs button { min-height:44px; }
  :root .clash-dashboard .welcome-banner { grid-template-columns:minmax(0,1fr); padding:14px; gap:12px; }
  :root .home-subjects { gap:5px; }
  :root .home-subjects .home-subject { flex-direction:column; gap:3px; font-size:12px; min-height:49px; }
  :root .home-rating-panel .meath-ratings { grid-template-columns:repeat(2,minmax(0,1fr)); }
  :root .home-rating-panel .rating-card:nth-child(odd) { border-inline-start:0; }
}
@media(max-width:540px) {
  :root .clash-dashboard .clash-modes { grid-template-columns:minmax(0,1fr); }
  :root .clash-dashboard .clash-mode-card > .mode-practice { grid-row:2; grid-column:2; justify-self:end; }
  :root .online-player { grid-template-columns:40px minmax(0,1fr); }
  :root .online-player-actions { grid-column:2; justify-content:flex-start; }
}
:root .clash-dashboard .welcome-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
:root .clash-dashboard .welcome-stats small { white-space:normal; }
:root .in #side #inviteInbox .ico { width:18px; height:18px; flex:none; }
:root .in #side .tabs button:focus-visible,
:root .home-subject:focus-visible,
:root .online-player-actions button:focus-visible { outline:2px solid var(--home-link); outline-offset:2px; }