/* ==========================================================================
   The Orator's Orb - style.css (v2.7 Final Branding)
   ========================================================================== */
:root {
    --color-bg: #0c0a18; --color-text: #e0e0e0; --color-primary-glow: #a855f7;
    --color-secondary-glow: #00d4ff; --color-banish-glow: #ff4747;
    --font-title: 'Cinzel Decorative', serif; --font-body: 'Montserrat', sans-serif;
    --ball-size: 350px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: -webkit-fill-available; }
body {
    font-family: var(--font-body); background-color: var(--color-bg);
    background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px);
    background-size: 550px 550px, 350px 350px; background-position: 0 0, 40px 60px;
    animation: star-shimmer 15s linear infinite; color: var(--color-text); display: flex;
    justify-content: center; align-items: center; min-height: 100vh; min-height: 100dvh; 
    overflow: hidden;
}
@keyframes star-shimmer { from { background-position: 0 0; } to { background-position: -550px -550px; } }

.container { 
    width: 100%; max-width: 800px; text-align: center; padding: 1rem; 
    display: flex; flex-direction: column; justify-content: center; 
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; 
    position: relative; /* Anchor for copyright */
    height: 100dvh;
}
.container.hidden { display: none !important; }

#main-container { justify-content: flex-start; padding-bottom: 1.5rem; }
#crystal-ball-area { flex-shrink: 0; }
#spoken-spirits-container { flex-grow: 1; min-height: 50px; overflow-y: auto; }
#controls-area { flex-shrink: 0; }

.title { font-family: var(--font-title); font-size: clamp(2.5rem, 8vw, 3rem); text-shadow: 0 0 10px var(--color-primary-glow), 0 0 20px var(--color-secondary-glow); margin-bottom: 0.5rem; }
.subtitle { font-size: clamp(1.1rem, 4vw, 1.2rem); color: #aaa; margin-bottom: 1.5rem; font-family: var(--font-title); }
.input-group { display: flex; margin-bottom: 1.5rem; }
#name-input { flex-grow: 1; padding: 1rem; font-size: 1.1rem; background: rgba(255,255,255,0.05); border: 2px solid var(--color-primary-glow); border-radius: 8px 0 0 8px; color: var(--color-text); outline: none; }
#add-name-btn { padding: 0 1.5rem; font-size: 2rem; background: var(--color-primary-glow); color: white; border: 2px solid var(--color-primary-glow); border-left: none; border-radius: 0 8px 8px 0; cursor: pointer; }
#participant-runes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; min-height: 50px; margin-bottom: 1rem; }
.rune { padding: 0.5rem 1rem; background: transparent; border: 1px solid var(--color-secondary-glow); color: var(--color-secondary-glow); border-radius: 20px; animation: fadeInRune 0.5s; cursor: pointer; }
@keyframes fadeInRune { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.setup-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
.secondary-btn { padding: 0.5rem 1rem; font-family: var(--font-body); font-size: 0.9rem; background: transparent; border: 1px solid #666; color: #888; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; }
.secondary-btn:hover { color: var(--color-banish-glow); border-color: var(--color-banish-glow); }
.timer-setup { display: flex; align-items: center; gap: 1rem; }
.timer-setup label { color: #aaa; }
.timer-setup select { padding: 0.5rem; background: rgba(255,255,255,0.05); color: var(--color-text); border: 1px solid var(--color-secondary-glow); border-radius: 4px; }
.primary-btn { padding: 1rem 2rem; font-family: var(--font-title); font-size: 1.2rem; background: transparent; border: 2px solid var(--color-primary-glow); color: var(--color-primary-glow); border-radius: 8px; cursor: pointer; text-shadow: 0 0 5px var(--color-primary-glow); transition: all 0.3s ease; }
.primary-btn:not(:disabled):hover { background: var(--color-primary-glow); color: white; box-shadow: 0 0 20px var(--color-primary-glow); }
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: #555; color: #555; text-shadow: none; }
#digital-timer { position: absolute; top: 1rem; right: 1rem; font-size: 1.5rem; font-family: var(--font-body); font-weight: 600; opacity: 0.3; transition: opacity 0.5s ease; z-index: 5; }
#crystal-ball-area { position: relative; display: flex; flex-direction: column; align-items: center; margin: 1rem 0; }
#crystal-ball { width: var(--ball-size); height: var(--ball-size); position: relative; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), rgba(255,255,255,0.05) 40%, transparent 60%); box-shadow: inset 0 0 50px #fff, inset 20px 0 80px var(--color-primary-glow), inset -20px 0 80px var(--color-secondary-glow), 0 0 50px #fff, -10px 0 80px var(--color-primary-glow), 10px 0 80px var(--color-secondary-glow); cursor: pointer; overflow: hidden; }
#orb-chamber { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.name-orb { position: absolute; color: white; background: radial-gradient(circle, var(--color-secondary-glow), transparent 70%); padding: 8px 12px; border-radius: 50%; font-size: 12px; font-weight: 600; text-shadow: 0 0 5px black; box-shadow: 0 0 15px white; opacity: 0.8; transition: opacity 0.5s, transform 0.5s; user-select: none; will-change: transform; }
#mist-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: inset(0% 0 0 0); transition: clip-path 1s linear; }
.mist { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; border-radius: 40%; background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, rgba(168, 85, 247, 0) 60%); animation: swirl 20s linear infinite; }
.mist.layer2 { animation-duration: 25s; animation-direction: reverse; background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, rgba(0, 212, 255, 0) 55%); }
.mist.layer3 { animation-duration: 30s; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%); }
#ball-stand { width: calc(var(--ball-size) * 0.5); height: 30px; background: #1a1a2e; border-radius: 5px; box-shadow: 0 5px 15px #000; position: relative; top: -15px; z-index: -2; }
#revealed-name-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; pointer-events: none; }
#revealed-name { font-family: var(--font-title); font-size: clamp(2.5rem, 10vw, 3.5rem); color: white; text-shadow: 0 0 10px white, 0 0 25px var(--color-secondary-glow); opacity: 0; transform: scale(0.5); transition: opacity 0.5s ease-out, transform 0.5s ease-out; z-index: 10; }
#revealed-name.visible { opacity: 1; transform: scale(1.2); }
#revealed-name.dissolving { animation: dissolve 0.8s forwards; }
@keyframes dissolve { from { opacity: 1; transform: scale(1.2) rotate(0deg); } to { opacity: 0; transform: scale(0) rotate(90deg); } }
#prompt-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; background: rgba(12, 10, 24, 0.9); border: 2px solid var(--color-secondary-glow); border-radius: 10px; padding: 2rem; box-shadow: 0 0 30px var(--color-secondary-glow); color: white; z-index: 100; cursor: pointer; animation: fadeInPrompt 0.5s forwards; }
@keyframes fadeInPrompt { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
#prompt-text { font-family: var(--font-title); font-size: clamp(1.5rem, 5vw, 1.8rem); line-height: 1.4; }
#spoken-spirits-container { background: rgba(255,255,255,0.05); border-radius: 8px; padding: 1rem; width: 100%; }
#spoken-spirits-container h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; color: #888; margin-bottom: 0.5rem; }
#spoken-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; color: #aaa; }
#controls-area { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; padding-top: 1rem; }
#instructions { color: #777; font-style: italic; transition: opacity 0.5s; width: 100%; }
.hidden { display: none !important; }
#banish-btn { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; color: var(--color-banish-glow); transition: all 0.3s ease; padding: 0.5rem; }
#banish-btn:hover { transform: scale(1.1); filter: brightness(1.5); }
#banish-btn span { font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.banish-svg { width: 30px; height: 30px; }
.banish-svg .banish-path, .banish-svg line { stroke: var(--color-banish-glow); transition: stroke 0.3s; }
.sigil-btn { background: transparent; border: none; padding: 0; cursor: pointer; width: 45px; height: 45px; }
.sigil-btn svg { width: 100%; height: 100%; stroke: var(--color-secondary-glow); transition: all 0.3s ease; }
.sigil-btn:hover svg { stroke: white; filter: drop-shadow(0 0 5px var(--color-secondary-glow)); transform: scale(1.1); }
#mute-btn.muted .speaker-path { stroke: #666; }
#mute-btn.muted:hover .speaker-path { stroke: #888; }
#mute-btn.muted #mute-slash { display: block; stroke: var(--color-banish-glow); }

/* BRANDING: Style for the copyright notice */
.copyright-notice {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: #888;
    opacity: 0.6;
    font-family: var(--font-body);
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    :root { --ball-size: clamp(250px, 70vw, 280px); }
    .setup-actions { flex-direction: column; gap: 1.5rem; }
    .timer-setup { flex-direction: column; gap: 0.5rem; }
}