/* RingGuard — game-specific styles, layered on shared/rc-theme.css */

.wrap {
  max-width: 540px;
  margin: 0 auto;
  padding: 18px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

header.game-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.game-head .title { font-size: 1.5rem; }
.game-head .title .sub { display: block; font-size: 0.72rem; color: var(--rc-ink-dim); font-weight: 600; }

.hud {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.hud .stat {
  text-align: center;
  padding: 8px 4px;
}
.hud .stat .k { font-size: 0.66rem; color: var(--rc-ink-dim); letter-spacing: 0.6px; }
.hud .stat .v { font-size: 1.25rem; font-weight: 800; }
.hud .stat .v#lives { color: var(--rc-orange); letter-spacing: 2px; }
.hud .stat .v#combo { color: var(--rc-cyan); }

.stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 480 / 640;
}
#game {
  width: 100%;
  height: 100%;
  border-radius: var(--rc-radius);
  background:
    radial-gradient(120% 80% at 50% 0%, #0e2a45 0%, var(--rc-navy-2) 60%, var(--rc-navy) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--rc-shadow);
  touch-action: none;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 24px;
  background: rgba(6, 18, 31, 0.82);
  border-radius: var(--rc-radius);
  backdrop-filter: blur(3px);
}
.overlay.hidden { display: none; }
.overlay h2 { font-size: 1.7rem; }
.overlay p { color: var(--rc-ink-dim); max-width: 320px; line-height: 1.5; }

.legend { display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; text-align: left; }
.legend .row { display: flex; align-items: center; gap: 10px; }
.legend .chip {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; border: 2px solid; background: rgba(0,0,0,0.3);
}
.legend .spam { color: var(--rc-red); border-color: var(--rc-red); }
.legend .legit { color: var(--rc-green); border-color: var(--rc-green); }
.legend .spoof { color: var(--rc-amber); border-color: var(--rc-amber); border-style: dashed; }

.foot { color: var(--rc-ink-dim); font-size: 0.78rem; text-align: center; }