/* Smash front: Space-Invaders-style arcade hub. WAR status stays modular above this page. */
:root{--smash-ui-font:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono","Courier New",monospace}
body[data-page="smash"]{overflow:hidden;overscroll-behavior:none}
.smash-launch-shell{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:8px;
  height:calc(100dvh - 90px - env(safe-area-inset-bottom));
  min-height:0;
  padding:6px 10px;
  overflow:hidden;
}
.smash-hero{
  display:grid;
  grid-template-columns:62px minmax(0,1fr) 62px;
  align-items:center;
  gap:8px;
  height:clamp(88px,14dvh,106px);
  min-height:0;
  margin:0;
  border:1px solid color-mix(in srgb,var(--active-faction) 78%,#6b4c37);
  background:color-mix(in srgb,var(--active-faction) 8%,#171411);
  padding:9px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--active-faction) 12%,transparent),0 0 18px color-mix(in srgb,var(--active-faction) 10%,transparent);
}
.smash-hero-copy{display:grid;justify-items:center;min-width:0}
.smash-hero-copy h1{display:grid;width:min(100%,230px);gap:5px;margin:0;color:var(--active-faction);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--active-faction) 34%,transparent))}
.pixel-title-line{display:block;width:100%;height:26px}
.pixel-word{display:block;fill:currentColor;overflow:visible}
.pixel-title-svg{width:100%;height:100%}
.smash-hero-copy p{margin:6px 0 0;color:var(--active-faction);font-family:var(--smash-ui-font);font-size:8px;font-weight:900;letter-spacing:.08em;text-align:center;text-transform:uppercase;text-shadow:0 0 8px color-mix(in srgb,var(--active-faction) 30%,transparent)}
.smash-hero-sprite{position:relative;display:block;width:clamp(48px,8dvh,58px);height:clamp(48px,8dvh,58px);justify-self:center;filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 12px currentColor)}
.smash-hero-sprite.home{color:var(--haunted)}
body[data-home-faction="damned"] .smash-hero-sprite.home{color:var(--damned)}
.smash-hero-sprite.target[data-sprite-kind="skull"]{color:var(--damned)}
.smash-hero-sprite.target[data-sprite-kind="pumpkin"]{color:var(--haunted)}
.neon-sprite{position:absolute;inset:0;width:100%;height:100%;overflow:visible;image-rendering:pixelated;image-rendering:crisp-edges}
.neon-sprite .sprite-hole{fill:#171411}
.smash-hero-sprite.target{animation:neon-sign-flicker 3.4s steps(1,end) infinite}
.smash-hero-sprite.target .sprite-intact{animation:sprite-intact-loop 3.4s steps(1,end) infinite}
.smash-hero-sprite.target .sprite-smashed{animation:sprite-smashed-loop 3.4s steps(1,end) infinite}
@keyframes sprite-intact-loop{0%,43%{opacity:1}44%,49%{opacity:.12}50%,75%{opacity:0}76%,79%{opacity:.18}80%,100%{opacity:1}}
@keyframes sprite-smashed-loop{0%,47%{opacity:0}48%{opacity:.6}50%,74%{opacity:1}75%,100%{opacity:0}}
@keyframes neon-sign-flicker{0%,8%,11%,40%,43%,52%,68%,72%,82%,100%{opacity:1;filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 14px currentColor)}9%,42%,70%{opacity:.38;filter:drop-shadow(0 0 2px currentColor)}10%,44%,71%{opacity:.72;filter:drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor)}49%,77%{opacity:.18;filter:none}}

/* The launchers are part of the fixed screen. They never scroll; only the score rows do. */
.smash-launchers{min-height:0;padding-top:4px}
.smash-launchers [data-games]{display:grid;gap:6px}
.smash-game-button{
  display:grid;
  grid-template-columns:1fr 24px;
  height:clamp(48px,8.2dvh,60px);
  min-height:0;
  align-items:center;
  border:1px solid color-mix(in srgb,var(--active-faction) 76%,var(--line));
  background:color-mix(in srgb,var(--active-faction) 7%,#171411);
  padding:7px 14px;
  color:var(--active-faction);
  text-decoration:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--active-faction) 10%,transparent),0 0 14px color-mix(in srgb,var(--active-faction) 8%,transparent)
}
.smash-game-button strong{display:block;width:min(58%,150px);justify-self:center;color:var(--active-faction);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--active-faction) 36%,transparent))}
.pixel-button-svg{width:100%;height:clamp(20px,3.6dvh,25px)}
.smash-game-button .chev{justify-self:end;color:var(--muted)!important;font-size:25px;line-height:1}
.smash-game-button:active{transform:translateY(1px);background:color-mix(in srgb,var(--active-faction) 14%,#171411)}

/* Score board is visually integrated with the launchers, but only its rows scroll. */
.recent-scores{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  min-height:0;
  margin:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid color-mix(in srgb,var(--active-faction) 28%,var(--line));
  padding:6px 0 7px;
  overflow:hidden;
}
.score-feed-tabs{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border:1px solid var(--line);background:#111419}
.score-feed-tabs button{min-width:0;min-height:34px;border:0;background:#15181c;padding:5px 3px;color:#efefef;font-size:11px;font-weight:900;white-space:nowrap}
.score-feed-tabs button+button{border-left:1px solid var(--line)}
.score-feed-tabs button[aria-selected="true"]{background:color-mix(in srgb,var(--active-faction) 15%,#15181c);color:var(--active-faction);box-shadow:inset 0 -2px var(--active-faction)}
.score-column-head,
.score-board-row{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) .62fr .78fr .48fr;
  gap:7px;
  align-items:center;
}
.score-column-head{min-height:21px;padding:4px 5px 3px 3px;color:#777;font-family:var(--smash-ui-font);font-size:8px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.score-column-head span:nth-child(3),.score-column-head span:nth-child(4){text-align:right}
.recent-score-feed{
  display:block;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--active-faction) 55%,#40454d) #111419;
}
.recent-score-feed::-webkit-scrollbar{width:5px}
.recent-score-feed::-webkit-scrollbar-track{background:#111419}
.recent-score-feed::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--active-faction) 55%,#40454d)}
.score-board-row{--score-faction:var(--active-faction);min-height:39px;border-top:1px solid #252a30;padding:5px 5px 5px 3px}
.score-board-row[data-score-faction="haunted"]{--score-faction:var(--haunted)}
.score-board-row[data-score-faction="damned"]{--score-faction:var(--damned)}
.score-board-row:first-child{border-top:0}
.score-player{min-width:0;overflow:hidden;color:var(--ink);font-size:13px;font-weight:950;line-height:1.05;text-overflow:ellipsis;white-space:nowrap}
.score-game{min-width:0;overflow:hidden;color:#c8c4bf;font-size:10px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}
.score-result,.score-smash{color:var(--score-faction);font-family:var(--smash-ui-font);font-variant-numeric:tabular-nums;text-align:right;text-shadow:0 0 7px color-mix(in srgb,var(--score-faction) 25%,transparent);white-space:nowrap}
.score-result{font-size:12px;font-weight:900}
.score-smash{font-size:14px;font-weight:1000}
.score-board-empty{padding:18px 8px;color:var(--muted);font-size:11px;text-align:center}

@media(prefers-reduced-motion:reduce){.smash-hero-sprite.target,.sprite-intact,.sprite-smashed{animation:none}.sprite-smashed{display:none}}
@media(max-width:380px){
  .smash-launch-shell{gap:7px;padding-inline:8px}
  .smash-hero{grid-template-columns:50px minmax(0,1fr) 50px;height:clamp(84px,13dvh,96px);padding:8px 6px}
  .smash-hero-sprite{width:46px;height:46px}
  .smash-hero-copy h1{width:min(100%,205px)}
  .pixel-title-line{height:22px}
  .smash-hero-copy p{font-size:7px}
  .smash-game-button{height:clamp(46px,7.7dvh,55px);padding:6px 11px}
  .smash-game-button strong{width:min(60%,140px)}
  .pixel-button-svg{height:21px}
  .score-feed-tabs button{font-size:10px}
  .score-column-head,.score-board-row{grid-template-columns:minmax(0,1.05fr) .58fr .75fr .45fr;gap:5px}
  .score-player{font-size:12px}
  .score-game{font-size:9px}
  .score-result{font-size:11px}
  .score-smash{font-size:13px}
}
