/**
 * HitStop, played in page.
 *
 * Ported from the HitStop theme's own stylesheet, with its values kept so the
 * game looks like itself: the purple screen, the metal arcade button, the
 * bracketed timer and the target rows.
 *
 * Everything is scoped under .hs-game. The shell's class names — .target,
 * .coin, .targets, .star — are generic enough to collide with a whole site,
 * and this file loads on a page that already has its own .star and .target.
 */

.hs-game {
    --hs-cyan: #4ed8ff;
    --hs-yellow: #ffd83a;
    --hs-orange: #ff9500;
    --hs-red: #ff3b5c;
    --hs-green: #2ed573;
    --hs-dim: #b3acd1;
    --hs-faint: #7d779a;
    --hs-play: 420px;   /* how wide the gameplay itself runs */
    display: block;
}
.hs-game * { box-sizing: border-box; }

/* The screen spans the whole card so the starfield does, and the gameplay is
   held to its own width inside it rather than the panel being narrow. */
.hs-game .phone-screen {
    position: relative;
    width: 100%;
    padding: 24px 20px 28px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 45% at 50% 100%, #5a21a3 0%, transparent 62%),
        radial-gradient(ellipse 90% 60% at 50% 0%, #3a1a6e 0%, transparent 58%),
        linear-gradient(180deg, #2a1454 0%, #1d0e3d 55%, #140a30 100%);
}
.hs-game .targets,
.hs-game .score-banner { max-width: var(--hs-play); margin-inline: auto; }

/* ─── Starfield ───────────────────────────────── */
.hs-game .starfield-mini { position: absolute; inset: 0; pointer-events: none; }
.hs-game .star {
    position: absolute; width: 2px; height: 2px;
    background: #fff; border-radius: 50%; opacity: 0.6;
}
.hs-game .star.cyan    { background: #6fe2ff; box-shadow: 0 0 6px #6fe2ff; }
.hs-game .star.magenta { background: #ff7fc1; box-shadow: 0 0 6px #ff7fc1; }
.hs-game .star.twinkle { animation: hs-twinkle 3s ease-in-out infinite; }
@keyframes hs-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) {
    .hs-game .star.twinkle { animation: none; opacity: 0.6; }
}

/* ─── Coins ───────────────────────────────────── */
.hs-game .coin-counter {
    position: absolute; top: 12px; right: 16px; z-index: 2;
    display: flex; align-items: center; gap: 7px;
    font-family: var(--hs-pixel); font-size: 11px;
    color: var(--hs-yellow);
    border: 2px solid var(--hs-yellow); border-radius: 10px;
    padding: 6px 9px; background: rgba(0,0,0,0.25);
}
.hs-game .coin {
    width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe580, #d4a017 80%);
    box-shadow: 0 0 8px rgba(255, 216, 58, 0.5);
}

/* ─── Timer ───────────────────────────────────── */
.hs-game .timer-frame {
    position: relative; width: 240px; height: 76px;
    margin: 34px auto 0;
    display: flex; align-items: center; justify-content: center;
}
.hs-game .timer-corner { position: absolute; width: 18px; height: 18px; border-color: var(--hs-red); border-style: solid; }
.hs-game .timer-corner.tl { top: 0; left: 0;  border-width: 3px 0 0 3px; }
.hs-game .timer-corner.tr { top: 0; right: 0; border-width: 3px 3px 0 0; }
.hs-game .timer-corner.bl { bottom: 0; left: 0;  border-width: 0 0 3px 3px; }
.hs-game .timer-corner.br { bottom: 0; right: 0; border-width: 0 3px 3px 0; }
.hs-game .timer-display {
    position: relative;
    font-family: var(--hs-pixel); font-size: 40px;
    color: #fff; letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 14px rgba(255,255,255,0.45), 0 0 28px rgba(78, 216, 255, 0.35);
}
.hs-game .timer-display .dim  { position: absolute; left: 0; opacity: 0.18; }
.hs-game .timer-display .live { position: relative; }

/* ─── The button ──────────────────────────────── */
.hs-game .arcade-btn {
    width: 170px; height: 170px; margin: 20px auto;
    border: none; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #d8d8e0 0%, #888894 65%, #4a4a55 100%);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; user-select: none;
    transition: transform 0.08s;
    box-shadow:
        0 12px 30px rgba(0,0,0,0.5),
        inset 0 -8px 12px rgba(0,0,0,0.4),
        inset 0 6px 8px rgba(255,255,255,0.18);
}
.hs-game .arcade-btn:active { transform: scale(0.97); }
.hs-game .arcade-btn[disabled],
.hs-game .arcade-btn[disabled]:active { cursor: not-allowed; opacity: 0.55; transform: none; }

.hs-game .arcade-btn-inner {
    position: relative;
    width: 78%; height: 78%; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, box-shadow 0.15s;
}
.hs-game .arcade-btn-inner.green {
    background: radial-gradient(circle at 35% 30%, #6cf09a 0%, #2ed573 55%, #0f7a3d 100%);
    box-shadow: inset 0 -10px 14px rgba(0,0,0,0.35), inset 0 8px 10px rgba(255,255,255,0.25), 0 0 30px rgba(46, 213, 115, 0.4);
}
.hs-game .arcade-btn-inner.red {
    background: radial-gradient(circle at 35% 30%, #ff7a93 0%, #ff3b5c 55%, #8a142a 100%);
    box-shadow: inset 0 -10px 14px rgba(0,0,0,0.35), inset 0 8px 10px rgba(255,255,255,0.25), 0 0 30px rgba(255, 59, 92, 0.45);
}
.hs-game .arcade-btn-inner::before {
    content: ""; position: absolute;
    top: 14%; left: 28%; width: 26%; height: 18%;
    background: rgba(255,255,255,0.55); border-radius: 50%; filter: blur(4px);
}
.hs-game .arcade-btn-label {
    position: relative; z-index: 1;
    font-family: var(--hs-pixel); color: #fff;
    font-size: 22px; letter-spacing: 0.05em;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.35);
}

/* ─── Targets ─────────────────────────────────── */
.hs-game .targets { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.hs-game .target {
    display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;
    border-radius: 12px; padding: 10px 12px;
    font-family: var(--hs-pixel); font-size: 11px; color: #fff;
    background: rgba(0,0,0,0.25);
    border: 1.5px solid rgba(255,255,255,0.12);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.hs-game .target.pending { color: var(--hs-dim); background: rgba(255,255,255,0.04); }
.hs-game .target.active {
    border-color: var(--hs-yellow); background: rgba(255, 216, 58, 0.26);
    color: var(--hs-yellow); box-shadow: 0 0 20px rgba(255, 216, 58, 0.38);
}
/* Solid, not laid over the purple at 0.78 — through the panel those read as
   olive and brick rather than the game's own green and red. */
.hs-game .target.tier-green  { background: var(--hs-green);  border-color: #6cf09a; color: #06301a; }
.hs-game .target.tier-yellow { background: var(--hs-yellow); border-color: #ffe88a; color: #1a1230; }
.hs-game .target.tier-orange { background: var(--hs-orange); border-color: #ffbe5c; color: #2b1400; }
.hs-game .target.tier-red    { background: var(--hs-red);    border-color: #ff7a93; color: #fff; }
.hs-game .target-time   { letter-spacing: 0.03em; }
.hs-game .target-actual { text-align: center; opacity: 0.95; }
.hs-game .target-delta  { text-align: right; font-size: 10px; }

/* ─── Score ───────────────────────────────────── */
.hs-game .score-banner {
    margin-top: 16px; padding: 14px; text-align: center;
    border: 2px solid var(--hs-cyan); border-radius: 14px;
    background: rgba(78, 216, 255, 0.12);
}
.hs-game .score-banner[hidden] { display: none; }
.hs-game .score-banner-lbl { font-family: var(--hs-pixel); font-size: 9px; color: var(--hs-cyan); letter-spacing: 0.14em; }
.hs-game .score-banner-num { font-family: var(--hs-pixel); font-size: 28px; color: var(--hs-yellow); margin: 8px 0 4px; text-shadow: 0 0 14px rgba(255, 216, 58, 0.5); }
.hs-game .score-banner-sub { font-family: var(--hs-pixel); font-size: 8px; color: var(--hs-dim); letter-spacing: 0.12em; }
.hs-game .score-banner-btn {
    margin-top: 12px; display: inline-block;
    font-family: var(--hs-pixel); font-size: 10px; color: #fff;
    background: var(--hs-red); border: none; border-radius: 10px;
    padding: 11px 20px; cursor: pointer; letter-spacing: 0.08em;
    box-shadow: 0 4px 0 #8a142a, 0 8px 18px rgba(255,59,92,0.4);
    transition: transform 0.08s, box-shadow 0.08s;
}
.hs-game .score-banner-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #8a142a, 0 4px 10px rgba(255,59,92,0.4); }
.hs-game .paywall-banner { border-color: var(--hs-yellow); background: rgba(255, 216, 58, 0.10); }
.hs-game .paywall-banner .score-banner-lbl { color: var(--hs-yellow); }

@media (max-width: 420px) {
    .hs-game .arcade-btn { width: 140px; height: 140px; }
    .hs-game .arcade-btn-label { font-size: 18px; }
    .hs-game .timer-frame { width: 200px; height: 64px; }
    .hs-game .timer-display { font-size: 32px; }
}