/* RingCricket — 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(5, 1fr);
  gap: 6px;
}
.hud .stat { text-align: center; padding: 8px 2px; }
.hud .stat .k { font-size: 0.6rem; color: var(--rc-ink-dim); letter-spacing: 0.5px; }
.hud .stat .v { font-size: 1.1rem; font-weight: 800; }
.hud .stat .v#score { color: var(--rc-orange); }
.hud .stat .v#target { color: var(--rc-cyan); }
.hud .stat .v#wkts { color: var(--rc-green); letter-spacing: 1px; }

.stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 480 / 640;
}
#game {
  width: 100%;
  height: 100%;
  border-radius: var(--rc-radius);
  background:
    linear-gradient(180deg, #0e2a45 0%, var(--rc-navy-2) 55%, #0a2e1e 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--rc-shadow);
  touch-action: none;
  cursor: pointer;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 26px;
  background: rgba(6, 18, 31, 0.85);
  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: 340px; line-height: 1.55; }

.rules { text-align: left; font-size: 0.88rem; line-height: 1.7; color: var(--rc-ink); }
.rules b { color: var(--rc-orange-bright); }

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