/* Birthday Security Archive — festive edition */
:root {
    --bg-1: #170a2e;
    --bg-2: #0b0618;
    --gold: #ffd166;
    --pink: #ff6ec7;
    --violet: #a78bfa;
    --cyan: #67e8f9;
    --text: #f4f0ff;
    --dim: #9d94c4;
    --card: rgba(30, 18, 60, 0.72);
    --border: rgba(255, 209, 102, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    font-family: 'Courier New', monospace;
    background: radial-gradient(ellipse at 20% -10%, var(--bg-1) 0%, var(--bg-2) 60%, #05030d 100%);
    color: var(--text);
    overflow-x: hidden;
    min-height: 100vh;
    user-select: none;
}

/* ---------- ambient glows ---------- */
.glow {
    position: fixed; border-radius: 50%; filter: blur(90px); opacity: .35;
    pointer-events: none; z-index: 0;
}
.glow-1 { width: 420px; height: 420px; background: var(--pink); top: -120px; right: -80px; }
.glow-2 { width: 380px; height: 380px; background: var(--violet); bottom: -140px; left: -100px; }

/* ---------- confetti ---------- */
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.confetto {
    position: absolute; top: -20px;
    border-radius: 2px;
    animation: fall linear infinite;
}
@keyframes fall {
    0%   { transform: translateY(-10vh) rotate(0deg); }
    100% { transform: translateY(110vh) rotate(720deg); }
}

/* ---------- balloons ---------- */
#balloons { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.balloon {
    position: absolute; bottom: -160px;
    border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
    animation: rise linear infinite;
    opacity: .8;
}
.balloon::after {
    content: ""; position: absolute; left: 50%; top: 100%;
    width: 1px; height: 70px; background: rgba(255,255,255,.35);
    transform: translateX(-50%);
}
@keyframes rise {
    0%   { transform: translateY(0) translateX(0) rotate(-2deg); }
    50%  { transform: translateY(-55vh) translateX(24px) rotate(2deg); }
    100% { transform: translateY(-115vh) translateX(-10px) rotate(-2deg); }
}

/* ---------- stage / cards ---------- */
.stage {
    position: relative; z-index: 2;
    max-width: 760px; margin: 0 auto;
    padding: 8vh 1rem 6vh;
    display: flex; flex-direction: column; align-items: center;
}

.card {
    width: 100%;
    background: var(--card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 2.6rem 2.2rem 2.2rem;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
    position: relative;
    animation: cardin .7s ease both;
}
@keyframes cardin { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }

.ribbon {
    display: inline-block;
    font-size: .62rem; letter-spacing: .35em; text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .35rem 1rem .28rem;
    margin-bottom: 1.4rem;
    background: rgba(255, 209, 102, .06);
}

.title {
    font-size: clamp(1.9rem, 6vw, 3.2rem);
    line-height: 1.12;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 0 26px rgba(255, 209, 102, .45);
}
.title span {
    background: linear-gradient(90deg, var(--pink), var(--violet) 45%, var(--cyan));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 18px rgba(255, 110, 199, .35));
}

.divider { display: flex; justify-content: center; gap: .5rem; margin: 1.6rem 0; }
.divider i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.divider i:nth-child(2) { background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.divider i:nth-child(3) { background: var(--violet); box-shadow: 0 0 10px var(--violet); }

/* ---------- specs ---------- */
.specs { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 2rem; text-align: left; }
.spec {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px; padding: .7rem 1rem;
}
.spec-label { font-size: .66rem; letter-spacing: .28em; color: var(--dim); text-transform: uppercase; }
.spec-value { font-weight: 700; letter-spacing: .04em; }
.spec-value.locked { color: #ff7b7b; text-shadow: 0 0 14px rgba(255,123,123,.5); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- button ---------- */
#start-btn {
    cursor: pointer; border: none; background: none; padding: 0;
    margin: 0 auto;
}
#start-btn .btn-inner {
    display: block;
    font-family: inherit; font-weight: 700; font-size: 1.02rem; letter-spacing: .12em;
    color: #241238;
    background: linear-gradient(90deg, var(--gold), #ffb347);
    padding: .95rem 2.4rem;
    border-radius: 999px;
    box-shadow: 0 10px 34px rgba(255, 209, 102, .45), 0 0 0 0 rgba(255,209,102,.6);
    transition: transform .15s ease, box-shadow .3s ease;
    animation: breathe 2.4s infinite;
}
@keyframes breathe {
    0%,100% { box-shadow: 0 10px 34px rgba(255,209,102,.45), 0 0 0 0 rgba(255,209,102,.55); }
    50%     { box-shadow: 0 10px 34px rgba(255,209,102,.65), 0 0 0 14px rgba(255,209,102,0); }
}
#start-btn:hover .btn-inner { transform: translateY(-2px) scale(1.03); }
#start-btn:disabled .btn-inner { animation: none; opacity: .7; }
#start-btn:focus-visible { outline: 2px dashed var(--gold); outline-offset: 6px; border-radius: 999px; }

.tiny { margin-top: 1.1rem; font-size: .68rem; letter-spacing: .18em; color: var(--dim); text-transform: uppercase; }

/* ---------- briefing ---------- */
.briefing-card { text-align: left; }
.briefing-text {
    font-size: .92rem; line-height: 1.75; white-space: pre-wrap;
    color: var(--text); margin: 1rem 0 1.4rem; min-height: 220px;
}
.line { font-size: .8rem; line-height: 1.7; color: var(--text); }
.line.dim { color: var(--dim); }
.cursor { animation: blink 1s step-end infinite; color: var(--gold); }
@keyframes blink { 50% { opacity: 0; } }

.target-box {
    margin: 1.2rem 0 1.4rem; padding: 1.1rem 1.3rem;
    text-align: center;
    border: 1px dashed var(--pink);
    border-radius: 14px;
    background: rgba(255, 110, 199, .06);
    display: flex; flex-direction: column; gap: .45rem;
}
.target-host {
    font-size: clamp(1.05rem, 4.2vw, 1.6rem); font-weight: 700; letter-spacing: .05em;
    color: var(--cyan);
    text-shadow: 0 0 18px rgba(103, 232, 249, .5);
    word-break: break-all;
}

.hidden { display: none !important; }

/* toast */
#cheat-toast {
    position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%);
    background: rgba(30,18,60,.95);
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: .6rem 1.2rem; font-size: .8rem; border-radius: 999px;
    z-index: 10; box-shadow: 0 0 24px rgba(255,209,102,.3);
    transition: opacity .3s;
}
#cheat-toast.fade-out { opacity: 0; }

@media (max-width: 560px) {
    .card { padding: 1.9rem 1.2rem 1.6rem; }
    .briefing-text { min-height: 260px; }
}