/* Sky Stack — a window onto a soft sky on the Arcade kit's paper page. */
.ss-page .ss-k { color: var(--cbx-accent); }

/* ---- mode tabs ---- */
.ss-tabs { display: flex; gap: 6px; padding: 5px; margin: 0 0 12px; background: var(--cbx-soft); border-radius: 16px; }
.ss-tabs button { flex: 1; min-height: 44px; border: 0; border-radius: 12px; background: transparent; font: 900 14px var(--cbx-body); color: var(--cbx-muted); cursor: pointer; padding: 6px 4px; }
.ss-tabs button[aria-selected="true"] { background: #fff; color: var(--cbx-ink); box-shadow: 0 2px 0 var(--cbx-line), 0 6px 14px rgba(42,29,23,.08); }

/* ---- the card + stage ---- */
.ss-card { min-width: 0; background: #fff; border-radius: 24px; padding: 8px; box-shadow: 0 1px 0 var(--cbx-line), 0 18px 40px rgba(42,29,23,.12); }
.ss-stage {
  --sky-top: #8fd0ff; --sky-bot: #fff0dc; --stars: 0; --rise: 0px;
  position: relative; overflow: hidden; border-radius: 18px; outline: none;
  height: clamp(380px, calc(100vh - 84px), 620px);
  height: clamp(380px, calc(100svh - 84px), 620px);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bot));
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: pointer;
}
.ss-stage.playing { touch-action: none; }
.ss-stage:focus-visible { box-shadow: 0 0 0 3px var(--cbx-accent); }
.ss-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; z-index: 1; }
.ss-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ss-stars, .ss-clouds { position: absolute; inset: 0; }
.ss-stars {
  opacity: var(--stars);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 28% 62%, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 46% 12%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 63% 38%, #fff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 82% 22%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 90% 70%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 8% 84%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 72% 88%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 38% 90%, #fff 50%, transparent 52%), radial-gradient(1.3px 1.3px at 55% 55%, #fff 50%, transparent 52%);
  background-size: 260px 300px;
  background-position: 0 calc(var(--rise) * .15);
}
.ss-clouds {
  opacity: calc(1 - var(--stars) * 1.2);
  background-image:
    radial-gradient(60px 22px at 20% 30%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(80px 26px at 30% 32%, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(70px 24px at 78% 64%, rgba(255,255,255,.65), transparent 70%),
    radial-gradient(50px 18px at 86% 61%, rgba(255,255,255,.55), transparent 70%);
  background-size: 100% 520px;
  background-position: 0 var(--rise);
}

/* ---- HUD ---- */
.ss-hud { position: absolute; top: 12px; left: 0; right: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; pointer-events: none; color: #fff; }
.ss-tag { font: 900 11px var(--cbx-body); letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: rgba(20,24,60,.22); }
.ss-score { font: 900 64px/1 var(--cbx-display); font-variant-numeric: tabular-nums; margin-top: 4px; text-shadow: 0 3px 0 rgba(40,30,90,.18), 0 10px 26px rgba(40,30,90,.25); }
.ss-score.bump { animation: ss-bump .25s cubic-bezier(.2,1.6,.4,1); }
.ss-streak { margin-top: 2px; font: 900 13px var(--cbx-body); padding: 3px 10px; border-radius: 99px; background: linear-gradient(90deg, #ffd84d, #ff9f43); color: #3a2200; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.ss-mute { position: absolute; top: 8px; right: 8px; z-index: 4; width: 44px; height: 44px; border: 0; border-radius: 14px; background: rgba(255,255,255,.45); font-size: 19px; cursor: pointer; }
.ss-pop { position: absolute; left: 0; right: 0; top: 34%; margin: 0; z-index: 3; text-align: center; pointer-events: none; font: 900 34px var(--cbx-display); color: #fff; text-shadow: 0 3px 0 rgba(108,92,231,.55), 0 8px 24px rgba(108,92,231,.5); opacity: 0; }
.ss-pop.on { animation: ss-pop 1s ease-out forwards; }
.ss-pop small { display: block; font: 900 15px var(--cbx-body); text-shadow: 0 2px 6px rgba(60,40,140,.5); }
.ss-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- start / end overlay ---- */
.ss-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: center; padding: 60px 14px 14px; background: linear-gradient(180deg, rgba(30,24,70,.16), transparent 55%); }
.ss-stage.idle .ss-hud { opacity: 0; }
.ss-overlay[hidden] { display: none; }
.ss-panel { width: 100%; max-width: 380px; background: rgba(255,255,255,.93); border-radius: 20px; padding: 16px 16px 14px; text-align: center; box-shadow: 0 14px 40px rgba(30,24,70,.25); animation: ss-rise .35s ease; }
.ss-o-kick { margin: 0; font: 900 11.5px var(--cbx-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cbx-accent); }
.ss-o-title { margin: 2px 0 6px; font: 900 24px/1.15 var(--cbx-display); color: var(--cbx-ink); }
.ss-o-line { margin: 0 0 12px; font-weight: 800; font-size: 15px; line-height: 1.4; color: var(--cbx-ink-2); }
.ss-o-note { margin: 8px 0 0; font-weight: 800; font-size: 13px; color: var(--cbx-muted); }
.ss-o-note:empty { display: none; }
.ss-banner { margin: 0 0 10px; padding: 9px 12px; border-radius: 14px; background: #fff4cf; border: 1px solid #ffd76a; font-weight: 800; font-size: 14px; line-height: 1.4; color: #5a3d00; }
.ss-o-stats { display: flex; justify-content: center; gap: 8px; margin: 0 0 12px; }
.ss-o-stats span { flex: 1; max-width: 110px; background: var(--cbx-paper); border-radius: 12px; padding: 7px 4px; font-weight: 800; font-size: 12px; color: var(--cbx-muted); }
.ss-o-stats b { display: block; font: 900 20px var(--cbx-body); color: var(--cbx-ink); }
.ss-go { min-height: 54px; }

.ss-nogl { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg, #8fd0ff, #fff0dc); }
.ss-nogl p { max-width: 320px; margin: 0; background: #fff; border-radius: 18px; padding: 16px; font-weight: 800; line-height: 1.45; color: var(--cbx-ink-2); text-align: center; }
.ss-nogl b { display: block; font: 900 20px var(--cbx-display); color: var(--cbx-ink); margin-bottom: 4px; }

/* ---- results ---- */
.ss-result { padding: 16px 10px 8px; }
.ss-result .cbx-big small { margin-left: -4px; }
.ss-vs { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; font-weight: 900; line-height: 1.4; background: var(--cbx-paper); }
.ss-vs.win { background: var(--cbx-good-soft); color: #136b3b; } .ss-vs.lose { background: #fff1cc; color: #7a5600; } .ss-vs.tie { background: #e6ecff; color: #2f47a8; }
.ss-tower { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 4px 0 14px; font-size: 22px; line-height: 1.12; letter-spacing: .04em; }
.ss-result .cbx-chips { grid-template-columns: repeat(2, 1fr); }
.ss-res-actions { display: flex; gap: 8px; margin-top: 4px; }
.ss-res-actions .cbx-btn { flex: 1; }

@keyframes ss-bump { from { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes ss-pop { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 15% { opacity: 1; transform: translateY(0) scale(1.08); } 30% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes ss-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 520px) {
  .ss-page .cbx-hero { margin: 0 0 10px; }
  .ss-page .cbx-sub { display: none; }   /* the start panel carries the one-line how-to */
}
@media (min-width: 560px) {
  .ss-card { padding: 10px; }
  .ss-result .cbx-chips { grid-template-columns: repeat(4, 1fr); }
  .ss-score { font-size: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-score.bump, .ss-panel { animation: none; }
  .ss-pop.on { animation: ss-fade 1s linear forwards; }
  @keyframes ss-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
}