/* Clash Arena V2 — layout: HUD (desktop), dock (touch), page containers, footer */
.v2-wrap{width:min(100% - 2*var(--v2-gutter),var(--v2-max));margin-inline:auto}
.v2-main{display:block;min-height:60dvh;outline:none}
.v2-section{padding-block:clamp(40px,7vw,88px)}
.v2-section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:clamp(18px,3vw,30px)}
.v2-section-head h2{font:700 var(--v2-fs-h2)/1.05 var(--v2-display)}
.v2-section-head p{max-width:56ch;color:var(--v2-text-2)}
.v2-grid{display:grid;gap:var(--v2-gap)}

/* ---------- HUD ---------- */
.v2-hud{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);height:var(--v2-hud-h);padding:0 var(--v2-gutter);padding-top:env(safe-area-inset-top);
  background:linear-gradient(180deg,rgba(14,10,8,.96),rgba(14,10,8,.82));backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid rgba(242,195,95,.18);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.v2-hud::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(242,195,95,.6),transparent)}
.v2-brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;text-decoration:none}
.v2-brand img{width:44px;height:44px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.v2-hud .v2-brand-logo{width:clamp(68px,6vw,84px);height:clamp(68px,6vw,84px);object-fit:contain}
.v2-brand-word{display:grid;line-height:.86;font-family:var(--v2-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.v2-brand-word b:first-child{font-size:.86rem;color:var(--v2-text-2)}
.v2-brand-word b:last-child{font-size:1.32rem;background:var(--v2-mat-gold);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.v2-hud-nav{display:none;align-items:center;gap:4px;margin-inline:auto;min-width:0}
.v2-hud-link{position:relative;display:inline-flex;align-items:center;gap:8px;height:56px;padding:0 14px;border-radius:14px;color:var(--v2-text-2);text-decoration:none;font:700 .95rem/1 var(--v2-body);white-space:nowrap;transition:color var(--v2-fast),background var(--v2-fast)}
.v2-hud-link img{width:36px;height:36px;object-fit:contain;transition:transform var(--v2-mid) var(--v2-ease-pop)}
.v2-hud-link:hover{color:var(--v2-text);background:rgba(255,236,190,.06)}
.v2-hud-link:hover img{transform:translateY(-2px) rotate(-6deg)}
.v2-hud-link.is-active{color:var(--v2-gold-hi);background:linear-gradient(180deg,rgba(242,195,95,.16),rgba(242,195,95,.04))}
.v2-hud-link.is-active::after{content:"";position:absolute;left:18px;right:18px;bottom:-12px;height:3px;border-radius:3px;background:var(--v2-gold);box-shadow:0 0 12px var(--v2-gold)}
.v2-hud-more>summary{list-style:none}
.v2-hud-discord{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--v2-stone-edge);border-radius:12px;color:#fff;background:#5865f2;overflow:hidden}
.v2-hud-discord img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}
.v2-hud-discord:hover{filter:brightness(1.08);color:#fff}
.v2-hud-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.v2-hud-nav~.v2-hud-actions{margin-left:0}
.v2-lang>summary{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--v2-stone-edge);background:rgba(0,0,0,.3);font:800 .9rem/1 var(--v2-body);letter-spacing:.06em}
.v2-lang svg{width:18px;height:18px;fill:none;stroke:var(--v2-gold);stroke-width:1.8}
.v2-hud-account{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0;border-radius:14px;text-decoration:none;font-weight:700;white-space:nowrap}
.v2-hud-account .v2-avatar{width:44px;height:44px}
.v2-hud-account-label{display:none}
.v2-hud-account-menu button.v2-menu-item{width:100%;cursor:pointer}
.v2-hud-play{display:none}
@media (min-width:1024px){
  .v2-hud-nav{display:flex}
  .v2-hud-play{display:inline-flex;min-height:46px}
  .v2-hud-account{padding:0;border:1px solid var(--v2-stone-edge);background:rgba(0,0,0,.25)}
}
@media (min-width:1600px){.v2-hud-account{padding-right:12px}.v2-hud-account-label{display:inline}}
/* Icon-only primary tabs until there is room for every locale's labels; names stay available to assistive tech */
@media (max-width:1439px) and (min-width:1024px){.v2-hud-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.v2-hud-link{padding:0 13px}.v2-hud-account-label{display:none}}

/* ---------- Dock (touch navigation) ---------- */
.v2-dock{position:fixed;z-index:55;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr 1.25fr 1fr 1fr;align-items:end;height:calc(var(--v2-dock-h) + env(safe-area-inset-bottom));padding:0 max(6px,env(safe-area-inset-left)) env(safe-area-inset-bottom) max(6px,env(safe-area-inset-right));
  background:linear-gradient(180deg,rgba(26,20,15,.94),rgba(12,9,7,.98));backdrop-filter:blur(14px);border-top:1px solid rgba(242,195,95,.28);box-shadow:0 -10px 30px rgba(0,0,0,.45)}
.v2-dock-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:var(--v2-dock-h);min-width:0;padding:6px 2px;border:0;background:none;color:var(--v2-text-3);text-decoration:none;font:700 .8rem/1.1 var(--v2-body);text-align:center}
.v2-dock-link span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-dock-link img{width:40px;height:40px;object-fit:contain;transition:transform var(--v2-mid) var(--v2-ease-pop)}
.v2-dock-link.is-active{color:var(--v2-gold-hi)}
.v2-dock-link.is-active img{transform:translateY(-3px) scale(1.08)}
.v2-dock-play{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;height:var(--v2-dock-h);padding-bottom:10px;color:#fff;text-decoration:none;font:700 .86rem/1 var(--v2-display);text-shadow:0 2px 0 rgba(0,0,0,.6)}
/* Battle button: the team's round green swords icon is the button itself (no extra frame). */
.v2-dock-play-gem{display:grid;place-items:center;flex:0 0 auto;width:68px;height:68px;margin:-38px 0 2px;border-radius:50%;background:radial-gradient(circle at 50% 55%,rgba(12,9,7,.95) 55%,transparent 72%);transition:transform var(--v2-mid) var(--v2-ease-pop)}
.v2-dock-play-gem img{width:64px;height:auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.45)) drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.v2-dock-play:active .v2-dock-play-gem{transform:translateY(2px) scale(.96)}
.v2-dock-play.is-active .v2-dock-play-gem img{filter:drop-shadow(0 4px 0 rgba(0,0,0,.45)) drop-shadow(0 10px 16px rgba(0,0,0,.65))}
body.v2{padding-bottom:calc(var(--v2-dock-h) + env(safe-area-inset-bottom))}
@media (min-width:1024px){.v2-dock{display:none}body.v2{padding-bottom:0}}
/* Landscape phones: keep the dock but slimmer */
@media (max-height:480px) and (orientation:landscape) and (max-width:1023px){
  :root{--v2-dock-h:58px;--v2-hud-h:58px}
  .v2-hud .v2-brand-logo{width:48px;height:48px}
  .v2-dock-link span{display:none}
  .v2-dock-play-gem{width:44px;height:44px;margin:-16px 0 6px}
  .v2-dock-play>span:last-child{display:none}
}

/* ---------- Footer ---------- */
.v2-footer{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--v2-stone-line);background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.4))}
.v2-footer-inner{width:min(100% - 2*var(--v2-gutter),var(--v2-max));margin-inline:auto;display:grid;gap:18px;padding:28px 0 36px}
.v2-footer nav{display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:700;color:var(--v2-text-2)}
.v2-footer nav a{text-decoration:none}
.v2-brand-small img{width:112px;height:112px;object-fit:contain}
.v2-support-action{justify-content:center;min-width:120px}
.v2-brand-small .v2-brand-word b:last-child{font-size:1.05rem}
.v2-fan-notice{font-size:.9rem;color:var(--v2-text-3);max-width:80ch}
.v2-fan-notice a{display:inline-block;max-width:100%}
@media (min-width:900px){.v2-footer-inner{grid-template-columns:auto 1fr;align-items:center}.v2-footer nav{justify-content:flex-end}.v2-fan-notice{grid-column:1/-1}}
/* Clash Bases mark before the Arena brand: everything belongs to clash-bases.com. */
.v2-cb-brand{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:44px;height:44px;margin-right:4px;border-radius:12px;text-decoration:none;transition:transform var(--v2-fast)}
.v2-cb-brand img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.v2-cb-brand::after{content:"";position:absolute;top:8px;right:-6px;width:1px;height:28px;background:var(--v2-stone-edge)}
.v2-cb-brand:hover{transform:translateY(-1px)}
/* Narrow phones: compact Clash Bases mark so the header keeps fitting at 320px. */
@media (max-width:400px){.v2-hud{gap:8px}.v2-cb-brand{width:32px;margin-right:2px}.v2-cb-brand img{width:28px;height:28px}.v2-cb-brand::after{right:-5px;top:10px;height:24px}}