/* ---------- the mirror ---------- */

.mirror
{
    position: relative;
    width: min(52vw, 34vh, 290px);
    aspect-ratio: 640 / 960;
    margin: 0 auto;
    -webkit-user-select: none;
    user-select: none;
}

.mirror.big { width: min(50vw, 32vh, 400px); }

#addMirror.mirror { width: min(34vw, 22vh, 180px); }

.mirror img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.6)); pointer-events: none; }

.mirror .glass-wave { position: absolute; left: 32.5%; width: 35%; top: 47%; height: 32%; }

.mirror .glass-text
{
    position: absolute;
    left: 33%;
    width: 34%;
    top: 25%;
    height: 19%;
    display: grid;
    place-items: center;
    text-align: center;
    font-family: var(--script);
    font-style: italic;
    color: var(--gold-1);
    font-size: clamp(13px, 3.4vw, 21px);
    line-height: 1.15;
    text-shadow: 0 0 12px rgba(120, 160, 255, 0.95), 0 1px 2px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

.mirror .glass-glow
{
    position: absolute;
    left: 31%;
    width: 38%;
    top: 17%;
    height: 67%;
    border-radius: 50% 50% 3% 3% / 26% 26% 2% 2%;
    background: radial-gradient(ellipse at 50% 62%, rgba(120, 170, 255, 0.4), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    mix-blend-mode: screen;
    pointer-events: none;
}

.mirror[data-glow] .glass-glow { opacity: 1; animation: glass-pulse 1.3s ease-in-out infinite alternate; }

.mirror[data-glow="record"] .glass-glow { background: radial-gradient(ellipse at 50% 62%, rgba(255, 96, 96, 0.45), transparent 70%); }

.mirror[data-glow="reverse"] .glass-glow { background: radial-gradient(ellipse at 50% 62%, rgba(255, 214, 120, 0.55), transparent 70%); }

.mirror.flip .glass-wave, .mirror.flip .glass-text { animation: glass-flip 0.9s ease-in-out; }

@keyframes glass-pulse { from { filter: brightness(0.8); } to { filter: brightness(1.35); } }

@keyframes glass-flip { 0% { transform: scaleX(1); } 50% { transform: scaleX(0); filter: brightness(3); } 100% { transform: scaleX(1); } }

/* ---------- buttons and chips ---------- */

.spell-btn { min-width: 220px; }

.btn.rec { background: linear-gradient(180deg, #ffb3a6 0%, #e2563f 50%, #b8321f 54%, #e8705b 100%); border-color: #ffd0c6; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }

.btn.rec.on { animation: rec-pulse 1s ease-in-out infinite; }

@keyframes rec-pulse { 50% { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), 0 0 34px rgba(255, 90, 70, 0.9); } }

.btn.toggle.on { background: rgba(233, 199, 102, 0.22); color: var(--gold-1); border-color: var(--gold-1); }

.buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.choice { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }

.choice button
{
    min-width: 46px;
    height: 46px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: rgba(10, 14, 34, 0.6);
    color: var(--gold-2);
    font-family: var(--caps);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

.choice button.on { background: linear-gradient(180deg, #fff0b3, #e0b54f); color: #2a1a05; border-color: #f8e3a0; }

.choice button:disabled { opacity: 0.45; cursor: default; }

.choice .label { margin: 0 6px 0 0; }

.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }

.tabs button
{
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid var(--panel-border);
    background: rgba(10, 14, 34, 0.55);
    color: var(--gold-2);
    font-family: var(--caps);
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.tabs button.on { background: rgba(233, 199, 102, 0.18); color: var(--gold-1); border-color: var(--gold-1); }

textarea.field { min-height: 90px; resize: vertical; font-weight: 700; line-height: 1.3; }

.timer { font-family: var(--caps); font-weight: 700; color: var(--gold-1); font-size: 18px; letter-spacing: 0.1em; min-height: 24px; }

/* ---------- pack library ---------- */

.spell-list { display: flex; flex-direction: column; gap: 8px; }

.spell-row
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    border-radius: 14px;
    border: 1px solid rgba(233, 199, 102, 0.22);
    background: rgba(255, 255, 255, 0.05);
}

.spell-row .num { font-family: var(--caps); font-weight: 700; color: var(--gold-2); min-width: 28px; }

.spell-row .info { flex: 1 1 auto; min-width: 0; }

.spell-row .secret { font-weight: 700; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: filter 0.3s; }

.spell-row .meta { font-size: 14px; color: var(--ink-dim); }

.hide-secrets .secret, .hide-secrets .answer-line { filter: blur(7px); }

.spell-row .mini-btn
{
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--panel-border);
    background: rgba(10, 14, 34, 0.6);
    color: var(--gold-1);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 17px;
    padding: 0;
}

.spell-row .mini-btn.play-game { width: auto; padding: 0 14px; border-radius: 999px; font-family: var(--caps); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; background: linear-gradient(180deg, #fff0b3, #e0b54f); color: #2a1a05; border-color: #f8e3a0; }

.spell-row.editing { flex-wrap: wrap; }

.edit-box { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; padding: 6px 0 4px; }

.banner { border-color: rgba(120, 170, 255, 0.5); background: linear-gradient(180deg, rgba(30, 50, 110, 0.85), rgba(10, 16, 40, 0.9)); }

/* ---------- the game ---------- */

.game { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }

.game .head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.game .head .eyebrow { text-align: left; }

.step-title { font-family: var(--caps); font-weight: 700; font-size: clamp(17px, 4.6vw, 24px); color: var(--gold-1); letter-spacing: 0.06em; margin: 0; }

.step-hint { margin: 0; color: var(--ink-dim); font-size: 18px; max-width: 520px; }

.part-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

.part-tabs button
{
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: rgba(10, 14, 34, 0.6);
    color: var(--ink);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}

.part-tabs button.on { border-color: var(--gold-1); box-shadow: 0 0 0 1px var(--gold-1); color: var(--gold-1); }

.part-tabs button.done::after { content: ' ✓'; color: #8fe39c; }

.reveal-card { width: 100%; max-width: 560px; }

.reveal-card .secret-name { font-family: var(--title); font-weight: 700; font-size: clamp(30px, 8.5vw, 54px); line-height: 1.1; word-break: break-word; animation: house-in 0.9s cubic-bezier(.2, 1.5, .35, 1) both; }

.reveal-card .answer-big { font-family: var(--script); font-style: italic; font-size: clamp(22px, 6vw, 34px); color: #fff; margin-top: 6px; animation: fade-up 0.7s ease 0.5s both; }

.game-step { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }

@media (min-width: 900px)
{
    .game.wide { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; align-items: center; gap: 28px; text-align: center; }
    .game.wide .head { grid-column: 1 / -1; }
}

/* ---------- big screen ---------- */

.rv-big .page { padding-top: 20px; padding-bottom: 20px; }

.rv-screen
{
    width: 100%;
    max-width: 1800px;
    min-height: calc(100dvh - 40px);
    display: grid;
    grid-template-columns: minmax(250px, 22%) 1fr;
    gap: 26px;
    align-items: center;
}

.rv-side { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.rv-side .title { font-size: clamp(26px, 2.4vw, 46px); }

.rv-pair { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }

.rv-pair .qr { width: 100%; max-width: 300px; transition: max-width 0.5s ease; }

.paired .rv-pair .qr { max-width: 140px; }

.rv-pair-text { font-size: 19px; }

.paired .rv-pair-text { font-size: 15px; color: var(--ink-dim); }

.rv-code { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 16px; }

.rv-code b { color: var(--gold-1); }

.rv-code-chip { font-size: clamp(26px, 2.4vw, 44px); padding: 8px 22px; letter-spacing: 0.22em; }

.paired .rv-code { font-size: 14px; }

.paired .rv-code-chip { font-size: clamp(20px, 1.6vw, 30px); }

.code-row { gap: 10px; }

.code-row .code-field { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: 0.25em; font-weight: 700; text-align: center; }

.rv-phone { display: inline-flex; align-items: center; gap: 10px; font-family: var(--caps); font-weight: 700; font-size: clamp(14px, 1.15vw, 24px); color: var(--gold-1); letter-spacing: 0.04em; white-space: nowrap; padding: 8px 16px; border: 1px solid var(--panel-border); border-radius: 999px; }

.rv-phone .dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: #7ee08f; box-shadow: 0 0 12px #7ee08f; }

.rv-phone.asleep { color: var(--ink-dim); }

.rv-phone.asleep .dot { background: var(--ink-dim); box-shadow: none; }

.rv-pack-title { font-family: var(--caps); font-weight: 700; color: var(--gold-1); font-size: clamp(20px, 1.7vw, 30px); letter-spacing: 0.04em; }

.rv-room { font-size: 14px; color: var(--ink-dim); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }

.link-btn { background: none; border: 0; padding: 0; color: var(--gold-2); text-decoration: underline; cursor: pointer; font: inherit; }

.rv-stage { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(20px, 3vw, 60px); min-width: 0; }

.mirror.huge { width: min(30vw, 60vh, 560px); }

.mirror.huge .glass-text { font-size: clamp(18px, 2vw, 40px); }

.rv-words { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; min-width: 0; }

.rv-title { font-family: var(--title); font-weight: 700; font-size: clamp(40px, 5vw, 104px); line-height: 1.05; margin: 0; }

.rv-hint { margin: 0; font-size: clamp(20px, 1.9vw, 36px); max-width: 900px; }

.rv-parts span
{
    padding: 10px 24px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: rgba(10, 14, 34, 0.6);
    font-weight: 700;
    font-size: clamp(18px, 1.5vw, 28px);
}

.rv-parts span.on { border-color: var(--gold-1); box-shadow: 0 0 0 1px var(--gold-1); color: var(--gold-1); }

.rv-parts span.done::after { content: ' ✓'; color: #8fe39c; }

.rv-rec { display: inline-flex; align-items: center; gap: 12px; font-family: var(--caps); font-weight: 700; font-size: clamp(22px, 2vw, 38px); color: #ffd0c6; letter-spacing: 0.08em; }

.rv-rec .dot { width: 0.8em; height: 0.8em; border-radius: 50%; background: #ff4d3a; box-shadow: 0 0 18px #ff4d3a; animation: rec-blink 1s ease-in-out infinite; }

@keyframes rec-blink { 50% { opacity: 0.25; } }

.rv-big .reveal-card { max-width: 900px; }

.rv-big .reveal-card .secret-name { font-size: clamp(44px, 5.4vw, 110px); }

.rv-big .reveal-card .answer-big { font-size: clamp(26px, 2.6vw, 52px); }

@media (max-width: 900px)
{
    .rv-screen, .rv-stage { grid-template-columns: 1fr; }
    .mirror.huge { width: min(60vw, 40vh, 360px); }
}

/* the phone's big screen button */

.screen-chip.live { color: var(--gold-1); border-color: var(--gold-1); box-shadow: 0 0 16px rgba(233, 199, 102, 0.45); }