/* Import Fantasy Fonts */

@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans:wght@400;700&display=swap');

/* General Styles */

body {
    margin: 0;
    padding: 0;
    background-color: #1a1a1a;
    /* Slightly lighter than pure black */
    background-image: radial-gradient(circle at 50% 50%, rgba(30, 30, 60, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: overlay;
    /* Changed from #1a1a1a to #000000 */
    height: 100vh;
    width: 100vw;
    position: relative;
    font-family: 'Bubblegum Sans', cursive;
    font-weight: 700;
    /* Changed from 400 to 700 for bolder text */
    overflow: hidden;
    color: #e0e0e0;
    /* Light text color for better readability on dark background */
}


/* Additional global font settings */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Bubblegum Sans', cursive;
    font-weight: 700;
}

p,
span,
button,
input,
select,
textarea {
    font-family: 'Bubblegum Sans', cursive;
    font-weight: 700;
    /* Changed from 400 to 700 for bolder text */
    /* Secondary font for better readability in smaller text */
}


/* Adjust specific elements if needed */

#settings-button,
.close-button,
.player-name,
.scroll-display,
.modal-buttons button {
    font-family: 'Bubblegum Sans', cursive;
    font-weight: 700;
    /* Changed from 400 to 700 for bolder text */
}


/* Central Magic Ball */

#magic-ball {
    --magic-ball-color: rgba(0, 92, 255, 0.72);
    --magic-ball-core: #0877ff;
    --magic-ball-rim: rgba(125, 219, 255, 0.68);
    --magic-ball-shadow: rgba(0, 54, 255, 0.52);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition:
        transform 0.5s ease,
        filter 1.35s cubic-bezier(0.16, 0.84, 0.22, 1),
        box-shadow 1.35s cubic-bezier(0.16, 0.84, 0.22, 1),
        border-color 1.35s cubic-bezier(0.16, 0.84, 0.22, 1);
    background:
        radial-gradient(circle at 31% 24%, rgba(255, 255, 255, 0.92) 0 5%, rgba(255, 255, 255, 0.35) 10%, transparent 26%),
        radial-gradient(circle at 58% 62%, var(--magic-ball-core) 0%, rgba(0, 28, 132, 0.92) 56%, rgba(0, 6, 41, 0.95) 100%);
    box-shadow:
        inset -24px -30px 56px rgba(0, 0, 0, 0.56),
        inset 28px 22px 42px rgba(255, 255, 255, 0.18),
        inset 0 0 78px var(--magic-ball-rim),
        0 0 42px 14px var(--magic-ball-shadow),
        0 18px 60px rgba(0, 0, 0, 0.44);
    animation: pulseGlow 6s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.34);
    overflow: visible;
    position: relative;
    isolation: isolate;
    will-change: transform, filter;
}

#magic-ball::before,
#magic-ball::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

#magic-ball::before {
    inset: 0;
    z-index: 4;
    background:
        radial-gradient(circle at 27% 20%, rgba(255, 255, 255, 0.86) 0 6%, rgba(255, 255, 255, 0.28) 11%, transparent 28%),
        radial-gradient(circle at 73% 78%, rgba(255, 255, 255, 0.18), transparent 30%);
    mix-blend-mode: screen;
}

#magic-ball::after {
    inset: -55%;
    z-index: -1;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, var(--magic-ball-rim) 14%, var(--magic-ball-shadow) 34%, rgba(0, 0, 0, 0) 78%);
    filter: blur(34px);
    opacity: 0.48;
    animation: magicBallAuraDrift 8s ease-in-out infinite;
}

#magic-ball-scene {
    position: absolute;
    inset: -25%;
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
}

#magic-ball-scene canvas {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle, #000 28%, rgba(0, 0, 0, 0.9) 48%, rgba(0, 0, 0, 0.42) 68%, rgba(0, 0, 0, 0) 88%);
    mask-image: radial-gradient(circle, #000 28%, rgba(0, 0, 0, 0.9) 48%, rgba(0, 0, 0, 0.42) 68%, rgba(0, 0, 0, 0) 88%);
}

#magic-ball.webgl-ready {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow:
        0 0 46px 20px color-mix(in srgb, var(--magic-ball-shadow) 62%, transparent),
        0 0 108px 44px color-mix(in srgb, var(--magic-ball-shadow) 34%, transparent),
        0 18px 60px rgba(0, 0, 0, 0.32) !important;
}

#magic-ball.webgl-ready::before {
    /* The rendered scene supplies its own glass reflection.  Keeping this
       flat CSS overlay created a second, visibly sharp circle inside the orb. */
    display: none;
}

#magic-ball.webgl-ready::after {
    display: none;
}

@keyframes magicBallAuraDrift {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.12) rotate(14deg);
        opacity: 0.88;
    }
}

@keyframes legendaryPauseAura {
    0% {
        transform: scale(1.02);
        opacity: 0.28;
    }
    54% {
        transform: scale(1.14);
        opacity: 0.48;
    }
    100% {
        transform: scale(1.05);
        opacity: 0.34;
    }
}

@keyframes legendaryBurstAura {
    0% {
        transform: scale(1.02);
        opacity: 0.34;
    }
    22% {
        transform: scale(1.42);
        opacity: 0.78;
    }
    100% {
        transform: scale(1.12);
        opacity: 0.32;
    }
}


/* Keyframes for pulsating glow */

@keyframes pulseGlow {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}


/* Rarity-specific styles */

#magic-ball.rare {
    --magic-ball-color: rgba(0, 92, 255, 0.74);
    --magic-ball-core: #0877ff;
    --magic-ball-rim: rgba(99, 211, 255, 0.72);
    --magic-ball-shadow: rgba(0, 38, 255, 0.58);
    background: radial-gradient(circle at 30% 30%, #00f, #005);
    box-shadow: inset 0 0 60px rgba(0, 0, 255, 0.9), inset 25px 0 100px rgba(0, 0, 255, 0.6), inset -25px 0 100px rgba(0, 0, 255, 0.6), inset 25px 0 350px rgba(0, 0, 255, 1), inset -25px 0 350px rgba(0, 0, 255, 1), 0 0 80px rgba(0, 0, 255, 1);
}

#magic-ball.elite {
    --magic-ball-color: rgba(155, 70, 255, 0.76);
    --magic-ball-core: #8f38ff;
    --magic-ball-rim: rgba(231, 155, 255, 0.72);
    --magic-ball-shadow: rgba(114, 30, 208, 0.6);
    background: radial-gradient(circle at 30% 30%, #800080, #4B0082);
    box-shadow: inset 0 0 60px rgba(128, 0, 128, 0.9), inset 25px 0 100px rgba(128, 0, 128, 0.6), inset -25px 0 100px rgba(128, 0, 128, 0.6), inset 25px 0 350px rgba(128, 0, 128, 1), inset -25px 0 350px rgba(128, 0, 128, 1), 0 0 80px rgba(128, 0, 128, 1);
}

#magic-ball.legend {
    --magic-ball-color: rgba(255, 200, 64, 0.8);
    --magic-ball-core: #f6c550;
    --magic-ball-rim: rgba(255, 237, 151, 0.76);
    --magic-ball-shadow: rgba(231, 166, 24, 0.66);
    background: radial-gradient(circle at 30% 30%, #D4AF37, #B8860B);
    box-shadow: inset 0 0 60px rgba(212, 175, 55, 0.9), inset 25px 0 100px rgba(212, 175, 55, 0.6), inset -25px 0 100px rgba(212, 175, 55, 0.6), inset 25px 0 350px rgba(212, 175, 55, 1), inset -25px 0 350px rgba(212, 175, 55, 1), 0 0 80px rgba(212, 175, 55, 1);
}

#magic-ball.legend-pause {
    filter: saturate(1.08) contrast(1.03);
}

#magic-ball.legend-pause::after {
    opacity: 0.46;
    filter: blur(19px);
    animation: legendaryPauseAura var(--legend-pause-duration, 1.6s) cubic-bezier(0.22, 0.86, 0.26, 1) both;
}

#magic-ball.legend-burst {
    filter: saturate(1.24) contrast(1.08);
}

#magic-ball.legend-burst::after {
    opacity: 0.78;
    filter: blur(16px);
    animation: legendaryBurstAura 1.35s cubic-bezier(0.12, 0.86, 0.22, 1) both;
}

#magic-ball.light {
    --magic-ball-color: rgba(255, 255, 255, 0.88);
    --magic-ball-core: #ffffff;
    --magic-ball-rim: rgba(186, 239, 255, 0.78);
    --magic-ball-shadow: rgba(164, 227, 255, 0.64);
    background: radial-gradient(circle at 30% 30%, #fff, #f0f0f0);
    box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.9), inset 25px 0 100px rgba(255, 255, 255, 0.6), inset -25px 0 100px rgba(255, 255, 255, 0.6), inset 25px 0 350px rgba(255, 255, 255, 1), inset -25px 0 350px rgba(255, 255, 255, 1), 0 0 80px rgba(255, 255, 255, 1);
}

#magic-ball.dark {
    --magic-ball-color: rgba(255, 38, 38, 0.82);
    --magic-ball-core: #170006;
    --magic-ball-rim: rgba(255, 92, 92, 0.74);
    --magic-ball-shadow: rgba(255, 0, 30, 0.62);
}


/* New class for ready-to-summon state */

#magic-ball.ready-to-summon {
    animation: pulseGlowFast 1.5s ease-in-out infinite;
}


/* Keyframes for fast pulsating glow */

@keyframes pulseGlowFast {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
}


/* Enhanced Magic Ball Animation During Summoning */

#magic-ball.summoning {
    animation: pulseGlowSummon 1.35s cubic-bezier(0.34, 0.08, 0.22, 1) infinite;
    filter: saturate(1.1) brightness(1.04);
}

@keyframes pulseGlowSummon {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.07);
    }
}

#magic-ball.summoning-climax {
    animation: summoningClimax 0.56s cubic-bezier(0.22, 0.61, 0.36, 1) infinite alternate;
    filter: saturate(1.35) brightness(1.18);
}

@keyframes summoningClimax {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Summoning light stays inside the glass.  These broad, offset gradients make
   the flash feel like energized mist and reflected light instead of an opaque
   white sphere or a hard circular ring. */
#summon-energy-overlay {
    position: absolute;
    inset: 5%;
    z-index: 3;
    pointer-events: none;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.82) rotate(-14deg);
    filter: blur(7px) saturate(0.84);
    mix-blend-mode: screen;
    background:
        radial-gradient(ellipse 40% 28% at 32% 25%, rgba(238, 249, 255, 0.42) 0%, rgba(170, 222, 255, 0.3) 36%, transparent 76%),
        radial-gradient(ellipse 52% 42% at 71% 66%, rgba(178, 220, 255, 0.3) 0%, rgba(135, 195, 255, 0.12) 42%, transparent 78%),
        radial-gradient(ellipse 62% 24% at 51% 56%, rgba(255, 255, 255, 0.16) 0%, transparent 76%);
}

#magic-ball.summoning #summon-energy-overlay {
    animation: summonEnergyBreath 1.35s cubic-bezier(0.34, 0.08, 0.22, 1) infinite;
}

#magic-ball.summoning-climax #summon-energy-overlay {
    animation: summonEnergyRelease 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite alternate;
}

@keyframes summonEnergyBreath {
    0%, 100% {
        opacity: 0.13;
        transform: scale(0.82) rotate(-14deg) translate3d(-2%, 1%, 0);
    }
    52% {
        opacity: 0.48;
        transform: scale(1.05) rotate(7deg) translate3d(2%, -2%, 0);
    }
}

@keyframes summonEnergyRelease {
    from {
        opacity: 0.36;
        transform: scale(0.94) rotate(-8deg) translate3d(-1%, 1%, 0);
    }
    to {
        opacity: 0.62;
        transform: scale(1.1) rotate(10deg) translate3d(2%, -2%, 0);
    }
}


/* Settings Button */

/* System Controls Container (Settings and Fullscreen buttons) */
#system-controls {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

#system-controls button {
    background-color: rgba(51, 51, 51, 0.7);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
    margin-left: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

#system-controls button:hover {
    background-color: rgba(70, 70, 70, 0.9);
    transform: scale(1.05);
}

#link-panel-sizes-button.is-active {
    background-color: rgba(46, 126, 216, 0.88);
    border-color: rgba(163, 225, 255, 0.9);
    box-shadow: 0 0 14px rgba(77, 166, 255, 0.75);
}

/* Fullscreen-specific styles */
body.fullscreen {
    overflow: hidden;
}

body.fullscreen #fullscreen-button {
    background-color: rgba(70, 70, 70, 0.8);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Hide scrollbars in fullscreen mode */
body.fullscreen::-webkit-scrollbar {
    display: none;
}

body.fullscreen {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}


/* Settings Modal */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #2a2a2a;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    /* Changed from 400 to 700 for bolder text */
}

/* Secondary power modal - centered over magic ball */
.secondary-power-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.secondary-centered {
    background-color: #2c1810;
    margin: 0;
    padding: 0;
    border: 3px solid #8B4513;
    border-radius: 15px;
    width: 80%;
    max-width: 500px;
    position: relative;
    animation: modalAppear 0.3s ease-out;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.center-display {
    max-height: 80vh;
    overflow-y: auto;
    /* Remove any potential scroll bars styling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.center-display::-webkit-scrollbar {
    display: none; /* WebKit */
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.settings-section {
    margin-bottom: 20px;
}

.settings-section h3 {
    color: #4da6ff;
    /* Light blue color for section headers */
    font-size: 1.2em;
    margin-bottom: 15px;
    text-shadow: 0 0 5px rgba(77, 166, 255, 0.5);
    /* Subtle glow effect */
}

.settings-section label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #e0e0e0;
    /* Light grey for labels */
}

.settings-section input[type="number"] {
    background-color: #3a3a3a;
    color: #ffffff;
    border: 1px solid #4da6ff;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.player-count-section {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #3a3a3a;
    border-radius: 5px;
    border: 1px solid #4da6ff;
}

.player-count-section label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #e0e0e0;
}

#player-count {
    width: 100%;
    background-color: #2a2a2a;
    color: #ffffff;
    border: 1px solid #4da6ff;
    padding: 8px;
    border-radius: 5px;
    font-family: 'Bubblegum Sans', cursive;
    font-weight: 700;
    font-size: 1em;
}

#player-count:focus {
    outline: none;
    border-color: #64b5f6;
    box-shadow: 0 0 5px rgba(100, 181, 246, 0.5);
}

#players-container,
#scrolls-container {
    background-color: #3a3a3a;
    /* Slightly lighter than the modal background */
    border: 1px solid #4da6ff;
    padding: 15px;
    margin-top: 10px;
    border-radius: 10px;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
}

.player-item,
.scroll-item {
    background-color: #4a4a4a;
    /* Even lighter for individual items */
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}

.player-item span,
.scroll-item span {
    color: #ffffff;
    /* Ensure text is white for visibility */
}

.player-item button,
.scroll-item button {
    background-color: #e74c3c;
    border: none;
    color: #fff;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
}

.player-item button:hover,
.scroll-item button:hover {
    background-color: #c0392b;
}

#add-player,
#add-scroll,
#save-rarities {
    background-color: #4da6ff;
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

#add-player:hover,
#add-scroll:hover,
#save-rarities:hover {
    background-color: #3a8ad6;
}


/* Player Display Areas */

/* Once players have arranged their table, changing the available player count
   must not replace that arrangement with the count-specific starting layout. */
#players-container-game.preserve-player-layout {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    min-height: 100svh;
    padding: 0 !important;
    overflow: hidden !important;
}

.player-display {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    z-index: 10;
    transform-origin: center;
}


/* Individual player positioning */


/* Style for when the player is being dragged */

.player-display.dragging {
    opacity: 0.8;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Default positioning for 4 players */
#player-top {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

#player-right {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

#player-bottom {
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
}

#player-left {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

/* Dynamic positioning for 3 players */
.players-3 #player-1 {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.players-3 #player-2 {
    bottom: 100px;
    right: 25%;
    transform: translateX(50%);
}

.players-3 #player-3 {
    bottom: 100px;
    left: 25%;
    transform: translateX(-50%);
}

/* Dynamic positioning for 4 players */
.players-4 #player-1 {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.players-4 #player-2 {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.players-4 #player-3 {
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.players-4 #player-4 {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

/* Dynamic positioning for 5 players */
.players-5 #player-1 {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.players-5 #player-2 {
    top: 25%;
    right: 20px;
    transform: translateY(-50%);
}

.players-5 #player-3 {
    bottom: 100px;
    right: 25%;
    transform: translateX(50%);
}

.players-5 #player-4 {
    bottom: 100px;
    left: 25%;
    transform: translateX(-50%);
}

.players-5 #player-5 {
    top: 25%;
    left: 20px;
    transform: translateY(-50%);
}

/* Dynamic positioning for 6 players */
.players-6 #player-1 {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.players-6 #player-2 {
    top: 25%;
    right: 20px;
    transform: translateY(-50%);
}

.players-6 #player-3 {
    top: 75%;
    right: 20px;
    transform: translateY(-50%);
}

.players-6 #player-4 {
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.players-6 #player-5 {
    top: 75%;
    left: 20px;
    transform: translateY(-50%);
}

.players-6 #player-6 {
    top: 25%;
    left: 20px;
    transform: translateY(-50%);
}

.player-profile {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px 18px;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    width: 232px;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 0, 255, 0.5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 184px;
    justify-content: space-between;
}

.player-name {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 1.6em;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 255, 0.7);
    letter-spacing: 1px;
    line-height: 1.2;
    padding: 6px 12px;
    text-align: center;
}

.scroll-display {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 12px 16px;
    border-radius: 8px;
    min-height: 65px;
    color: #fff;
    overflow: hidden;
    word-wrap: break-word;
    font-size: 1.4em;
    line-height: 1.3;
    text-shadow: 0 0 5px currentColor;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 10px rgba(0, 0, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Rare Counter Styling */
.rare-counter {
    position: absolute;
    /* Leave enough room for the badge's summon pulse and soft glow so the
       number stays completely visible at every panel rotation and size. */
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    background: rgba(20, 96, 186, 0.06);
    border: 1px solid rgba(130, 206, 255, 0.24);
    border-radius: 3px;
    text-align: center;
    font-size: 1em;
    color: #87ceeb;
    transition: all 0.3s ease;
    min-height: 0;
    display: grid;
    place-items: center;
    letter-spacing: 0.5px;
}

.rare-count {
    display: block;
    font-weight: bold;
    font-size: 0.9em;
    color: rgba(139, 197, 238, 0.78);
    text-shadow: 0 0 5px rgba(77, 166, 255, 0.36);
    margin: 0;
    line-height: 1;
}

.rare-label {
    display: none;
}

/* Streak Level Styling */
.rare-counter.streak-1 {
    background: linear-gradient(135deg, rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0.2));
    border-color: rgba(0, 0, 255, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 255, 0.3);
}

.rare-counter.streak-2 {
    background: linear-gradient(135deg, rgba(0, 100, 255, 0.4), rgba(0, 100, 255, 0.3));
    border-color: rgba(0, 100, 255, 0.5);
    box-shadow: 0 0 8px rgba(0, 100, 255, 0.4);
}

.rare-counter.streak-3 {
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.5), rgba(0, 150, 255, 0.4));
    border-color: rgba(0, 150, 255, 0.6);
    box-shadow: 0 0 10px rgba(0, 150, 255, 0.5);
}

.rare-counter.streak-4 {
    background: linear-gradient(135deg, rgba(255, 200, 0, 0.6), rgba(255, 150, 0, 0.5));
    border-color: rgba(255, 200, 0, 0.7);
    box-shadow: 0 0 15px rgba(255, 200, 0, 0.6);
    color: #ffdd44;
}

.rare-counter.streak-4 .rare-count {
    color: #ffcc00;
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
}

.rare-counter.streak-5 {
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.7), rgba(255, 100, 255, 0.6));
    border-color: rgba(255, 0, 255, 0.8);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.7);
    color: #ff88ff;
}

.rare-counter.streak-5 .rare-count {
    color: #ff44ff;
    text-shadow: 0 0 10px rgba(255, 68, 255, 1);
    font-size: 1.4em;
}

/* Keep the count as a single blue corner badge at every streak level. */
.rare-counter.streak-1,
.rare-counter.streak-2,
.rare-counter.streak-3,
.rare-counter.streak-4,
.rare-counter.streak-5 {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #4da6ff;
}

.rare-counter.streak-4 .rare-count,
.rare-counter.streak-5 .rare-count {
    color: #4da6ff;
    text-shadow: 0 0 8px rgba(77, 166, 255, 0.72);
}

/* Rare Counter Animations */
@keyframes rareCounterPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes rareCounterIntense {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 200, 0, 0.6);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 25px rgba(255, 200, 0, 0.9);
    }
}

/* Advanced Summoning Animations */
@keyframes advancedSummoningPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1.3);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
    }
}

@keyframes advancedParticleFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translateY(-15px) scale(1.2);
        opacity: 1;
    }
    50% {
        transform: translateY(-25px) scale(0.8);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-10px) scale(1.1);
        opacity: 0.9;
    }
}

#magic-ball.advanced-summoning {
    z-index: 9998;
}

/* Secondary Power Modal Styling */
.scroll-modal .modal-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.scroll-title-section {
    margin: 20px 0 15px 0;
    text-align: center;
}

.scroll-title-section h3 {
    font-size: 1.5em;
    font-weight: bold;
    color: #2c3e50;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    margin: 0;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.scroll-description {
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.scroll-description p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #2c3e50;
    margin: 0;
    text-align: left;
    font-weight: 500;
}

.scroll-metadata {
    margin: 15px 0;
    text-align: center;
}

.scroll-metadata p {
    margin: 8px 0;
    font-size: 1.1em;
    color: #2c3e50;
}

.rarity-highlight {
    font-weight: bold;
    font-size: 1.2em;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.player-highlight {
    font-weight: bold;
    color: #2c3e50;
    font-size: 1.1em;
}

.primary-button {
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    color: white !important;
    border: none !important;
    padding: 12px 30px !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.primary-button:hover {
    background: linear-gradient(135deg, #2980b9, #3498db) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
}

.discard-button {
    background: linear-gradient(135deg, #c74545, #e74c3c) !important;
    color: white !important;
    border: none !important;
    padding: 12px 30px !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    margin-left: 10px !important;
}

.discard-button:hover {
    background: linear-gradient(135deg, #a93c3c, #c74545) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Enhanced Elite and Legend modal styling */
.scroll-container.elite .scroll-title-section h3 {
    color: #8B008B;
    text-shadow: 0 0 8px rgba(139, 0, 139, 0.6);
}

.scroll-container.legend .scroll-title-section h3 {
    color: #DAA520;
    text-shadow: 0 0 8px rgba(218, 165, 32, 0.6);
}

.scroll-container.elite .rarity-highlight {
    color: #8B008B;
    text-shadow: 0 0 8px rgba(139, 0, 139, 0.8);
}

.scroll-container.legend .rarity-highlight {
    color: #DAA520;
    text-shadow: 0 0 8px rgba(218, 165, 32, 0.8);
}


/* Rarity-based glow effects */

.player-profile[data-rarity="Rare"] {
    box-shadow: 0 0 30px rgba(0, 0, 255, 0.9);
}

.player-profile[data-rarity="Elite"] {
    box-shadow: 0 0 30px rgba(128, 0, 128, 0.9);
}

.player-profile[data-rarity="Legend"] {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.9);
}

.player-profile[data-rarity="Light"] {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.9);
}


/* Scroll Reveal Animation */

@keyframes revealScroll {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.scroll-reveal {
    animation: revealScroll 1s ease-in-out;
}


/* Glowing Effect for Active Player */

.active-player #magic-ball {
    box-shadow: 0 0 30px 10px rgba(0, 255, 255, 0.7);
    transform: translate(-50%, -50%) scale(1.2);
}


/* Full-Screen Glow Overlay */

#summon-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Allows clicks to pass through */
    opacity: 0;
    transition:
        opacity 1.2s cubic-bezier(0.16, 0.84, 0.22, 1),
        background-color 1.45s cubic-bezier(0.16, 0.84, 0.22, 1),
        filter 1.2s cubic-bezier(0.16, 0.84, 0.22, 1);
    z-index: 999;
    /* Below the modal but above other elements */
}

#summon-glow.active {
    opacity: 1;
}


/* Glow Animations Based on Rarity */

@keyframes screenGlowRare {
    0%,
    100% {
        background-color: rgba(0, 0, 255, 0.1);
    }
    50% {
        background-color: rgba(0, 0, 255, 0.4);
    }
}

@keyframes screenGlowElite {
    0%,
    100% {
        background-color: rgba(128, 0, 128, 0.1);
    }
    50% {
        background-color: rgba(128, 0, 128, 0.4);
    }
}

@keyframes screenGlowLegend {
    0%,
    100% {
        background-color: rgba(212, 175, 55, 0.1);
    }
    50% {
        background-color: rgba(212, 175, 55, 0.4);
    }
}

@keyframes screenGlowLight {
    0%,
    100% {
        background-color: rgba(255, 255, 255, 0.1);
    }
    50% {
        background-color: rgba(255, 255, 255, 0.4);
    }
}


/* Active Glow Animations */

#summon-glow.glow-rare {
    animation: screenGlowRare 2s ease-in-out infinite;
}

#summon-glow.glow-elite {
    animation: screenGlowElite 2s ease-in-out infinite;
}

#summon-glow.glow-legend {
    animation: screenGlowLegend 2s ease-in-out infinite;
}

#summon-glow.glow-light {
    animation: screenGlowLight 2s ease-in-out infinite;
}


/* Scroll Reveal Modal Styles */

.scroll-modal {
    background: none;
    border: none;
    padding: 0;
    width: 80%;
    max-width: 600px;
    position: relative;
}

.scroll-container {
    background-image:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.38), transparent 28%),
        linear-gradient(135deg, #fff4c8 0%, #f4d889 48%, #d8a94f 100%);
    background-size: cover;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    transform: scale(0);
    animation: unfurl 1s forwards;
    border: 2px solid #8B4513;
    background-color: rgba(255, 248, 220, 1);
    /* Changed to fully opaque */
}


/* Add these new styles for rarity-specific scroll containers */

.scroll-container.rare {
    box-shadow: 0 0 30px rgba(0, 0, 255, 0.5);
    background-color: rgba(230, 230, 255, 1);
    /* Changed to fully opaque */
}

.scroll-container.elite {
    box-shadow: 0 0 30px rgba(128, 0, 128, 0.5);
    background-color: rgba(255, 230, 255, 1);
    /* Changed to fully opaque */
}

.scroll-container.legend {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
    background-color: rgba(255, 250, 205, 1);
    /* Changed to fully opaque */
}

.scroll-container.light {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 1);
    /* Changed to fully opaque */
}

@keyframes unfurl {
    0% {
        transform: scale(0) rotate(-10deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}


/* Scroll Text Styling */

#scroll-text {
    font-family: 'Bubblegum Sans', cursive;
    font-weight: 700;
    /* Changed from 400 to 700 for bolder text */
    font-size: 1.2em;
    line-height: 1.4;
    max-height: none;
    /* Remove max-height restriction */
    overflow-y: auto;
    /* Add scrollbar if text is too long */
    padding: 10px;
    text-align: center;
    white-space: pre-wrap;
    /* Preserve line breaks and spaces */
    word-wrap: break-word;
    /* Break long words if necessary */
    color: #000;
    /* Ensure text color is black for all rarities */
    text-shadow: none;
    /* Remove any text shadow */
}


/* Rarity-specific text colors for scroll titles */

.player-profile[data-rarity="Rare"] .scroll-title {
    color: #0000FF;
    /* Blue for Rare */
}

.player-profile[data-rarity="Elite"] .scroll-title {
    color: #800080;
    /* Purple for Elite */
}

.player-profile[data-rarity="Legend"] .scroll-title {
    color: #D4AF37;
    /* Gold for Legend */
}

.player-profile[data-rarity="Light"] .scroll-title {
    color: #FFFFFF;
    /* White for Light */
}


/* Adjust text color for better contrast on different backgrounds */

.scroll-container.rare #scroll-text,
.scroll-container.rare h2 {
    color: #00008B;
    /* Dark blue for better contrast on light blue background */
}

.scroll-container.elite #scroll-text,
.scroll-container.elite h2 {
    color: #4B0082;
    /* Indigo for better contrast on light purple background */
}

.scroll-container.legend #scroll-text,
.scroll-container.legend h2 {
    color: #8B4513;
    /* Saddle Brown for better contrast on light gold background */
}

.scroll-container.light #scroll-text,
.scroll-container.light h2 {
    color: #000000;
    /* Black for contrast on white background */
}


/* Modal Buttons Styling */

.modal-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.modal-buttons button {
    color: #fff;
    /* Default text color for buttons */
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Bubblegum Sans', cursive;
    font-weight: 700;
    /* Changed from 400 to 700 for bolder text */
    font-size: 1em;
    transition: opacity 0.3s, transform 0.2s;
}


/* New style for Light rarity buttons */

.scroll-container.light .modal-buttons button {
    color: #000;
    /* Black text for Light rarity */
}

.modal-buttons button:hover {
    opacity: 0.8;
    transform: scale(1.05);
}


/* Close button styling */

.scroll-modal .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
}


/* Hide modal when it has the 'hidden' class */

.modal.hidden {
    display: none;
}

/* Tier color stays clear through the border and page tint without taking a
   separate row above the scroll title. */
.scroll-container {
    padding: 26px 28px;
}

.scroll-container h2 {
    margin: 0 0 10px;
    text-align: center;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.scroll-container #scroll-text {
    margin: 0;
    padding: 8px 4px;
    text-align: center;
}

.scroll-container .modal-buttons {
    margin-top: 12px;
    gap: 10px;
}

.scroll-container.rare,
.scroll-container.elite,
.scroll-container.legend,
.scroll-container.light,
.scroll-container.dark {
    border-width: 3px;
}

.scroll-container.rare {
    border-color: #176ee5;
    background-image: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.62), transparent 28%), linear-gradient(135deg, #e8f5ff 0%, #b8dcff 100%);
}

.scroll-container.elite {
    border-color: #8b38d7;
    background-image: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.62), transparent 28%), linear-gradient(135deg, #faeaff 0%, #dfc0ff 100%);
}

.scroll-container.legend {
    border-color: #da8c10;
    background-image: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.55), transparent 28%), linear-gradient(135deg, #fff5cf 0%, #ffd36b 100%);
}

.scroll-container.light { border-color: #d5ecff; background-image: linear-gradient(135deg, #ffffff 0%, #dff2ff 100%); }

.scroll-container.dark { border-color: #bd3e53; background-image: linear-gradient(135deg, #3a1620 0%, #170810 100%); }
.scroll-container.dark h2,
.scroll-container.dark #scroll-text { color: #fff3f5; }

/* Settings is a full editing surface, not a tall page layered over the game.
   Keep the game controls beneath it and contain its scrolling inside one
   centered, readable panel. */
#settings-modal {
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 28px);
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(2, 5, 15, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Never let persistent game status leak over a modal editing session. */
body.settings-open #connection-status {
    display: none !important;
}

.unsaved-settings-dialog {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(2, 5, 15, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.unsaved-settings-card {
    width: min(420px, 100%);
    padding: 22px;
    border: 1px solid rgba(137, 198, 255, 0.42);
    border-radius: 14px;
    color: #eff7ff;
    background: #1b2231;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.5);
}

.unsaved-settings-card h3,
.unsaved-settings-card p {
    margin: 0;
}

.unsaved-settings-card h3 {
    font-size: 1.2rem;
}

.unsaved-settings-card p {
    margin-top: 8px;
    color: #c4d9ef;
}

.unsaved-settings-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.unsaved-settings-actions button {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    color: #eff7ff;
    background: #354057;
    cursor: pointer;
}

.unsaved-settings-actions [data-settings-action="discard"] {
    background: #a73a36;
}

.unsaved-settings-actions [data-settings-action="save"] {
    background: #397fca;
}

.creation-dialog {
    position: fixed;
    inset: 0;
    z-index: 4100;
    display: grid;
    place-items: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(3, 8, 18, 0.74);
}

.creation-dialog-card {
    width: min(420px, 100%);
    max-height: min(680px, calc(100svh - 40px));
    overflow: auto;
    display: grid;
    gap: 13px;
    padding: 22px;
    border: 1px solid rgba(112, 182, 255, 0.55);
    border-radius: 14px;
    background: #172033;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
    color: #f6f9ff;
}

.creation-dialog-card h3,
.creation-dialog-card p {
    margin: 0;
}

.creation-dialog-card label {
    display: grid;
    gap: 6px;
    color: #bcd9ff;
    font-weight: 700;
}

.creation-dialog-card input,
.creation-dialog-card select,
.creation-dialog-card textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid rgba(128, 187, 255, 0.5);
    border-radius: 8px;
    background: #0c1424;
    color: #f6f9ff;
    font: inherit;
}

.creation-dialog-card textarea {
    resize: vertical;
    min-height: 96px;
}

.creation-dialog-error {
    min-height: 1.25em;
    color: #ffaaa5;
}

.creation-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.creation-dialog-actions button {
    min-height: 38px;
    padding: 8px 13px;
}

.creation-dialog-actions [type="submit"] {
    background: #397fca;
}

#settings-modal .modal-content {
    position: relative;
    box-sizing: border-box;
    width: min(920px, 100%);
    max-height: 100%;
    margin: 0;
    --settings-panel-padding: clamp(16px, 3vw, 28px);
    padding: var(--settings-panel-padding) var(--settings-panel-padding) 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(101, 181, 255, 0.42);
    border-radius: 16px;
    background: linear-gradient(160deg, #202534 0%, #151a26 54%, #101520 100%);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.52), 0 0 32px rgba(58, 135, 255, 0.15);
    scrollbar-color: rgba(93, 172, 255, 0.8) rgba(255, 255, 255, 0.06);
}

#settings-modal h2 {
    margin: 0 42px 18px 0;
    color: #f4f8ff;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    line-height: 1.15;
    letter-spacing: 0.02em;
}

#settings-modal .close-button {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: #eaf4ff;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1.55rem;
    line-height: 1;
}

#settings-modal .settings-section {
    margin: 0 0 14px;
    padding: 15px;
    border: 1px solid rgba(154, 202, 255, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
}

#settings-modal .settings-section h3 {
    margin: 0 0 12px;
    color: #90c7ff;
    font-size: 1.05rem;
    line-height: 1.2;
}

#settings-modal .settings-utilities {
    background: rgba(7, 13, 27, 0.52);
}

#settings-utility-controls,
#settings-voice-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

#settings-voice-controls {
    display: contents;
}

#voice-mode-status {
    margin: 10px 0 2px;
    color: #9ecfff;
    font-weight: 700;
}

.voice-command-guide {
    margin: 0;
    color: #cbd8e8;
    font-size: 0.82rem;
    line-height: 1.35;
}

#settings-modal #settings-utility-controls > button,
#settings-modal #settings-voice-controls > button {
    position: static;
    min-height: 36px;
    margin: 0;
    padding: 8px 11px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 0.88rem;
    box-shadow: none;
}

#settings-modal .player-count-section {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-color: rgba(101, 181, 255, 0.46);
    background: rgba(7, 13, 27, 0.52);
}

#settings-modal #players-container,
#settings-modal #scrolls-container {
    max-height: min(260px, 35vh);
    padding: 9px;
    border-color: rgba(101, 181, 255, 0.3);
    background: rgba(7, 12, 24, 0.68);
}

#settings-modal .player-item,
#settings-modal .scroll-item {
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
}

#settings-modal .player-item span,
#settings-modal .scroll-item span {
    min-width: 0;
    overflow-wrap: anywhere;
}

#settings-modal .scroll-item span {
    font-size: 0.86rem;
    line-height: 1.25;
}

#settings-modal .scroll-item small {
    display: block;
    margin-top: 2px;
    color: #9ecfff;
    font-size: 0.74rem;
}

#settings-modal .player-item > div,
#settings-modal .scroll-item > div {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

#settings-modal .player-item button,
#settings-modal .scroll-item button,
#settings-modal #add-player,
#settings-modal #add-scroll,
#settings-modal #save-settings,
#settings-modal #cancel-settings {
    min-height: 34px;
    border-radius: 7px;
    font-size: 0.88rem;
}

#settings-modal .rarity-slider {
    display: grid;
    grid-template-columns: minmax(92px, 0.38fr) 1fr;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 10px;
}

#settings-modal .rarity-slider label {
    margin: 0;
}

#settings-modal .rarity-slider input[type="range"] {
    margin: 0;
}

#settings-modal .audio-settings label,
#settings-modal .audio-settings input[type="range"] {
    width: 100%;
}

#settings-modal .settings-buttons {
    position: relative;
    margin: 16px calc(-1 * var(--settings-panel-padding)) 0;
    padding: 12px var(--settings-panel-padding);
    border-top: 1px solid rgba(154, 202, 255, 0.14);
    background: #151a26;
    box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.18);
}

@media screen and (max-width: 560px) {
    #settings-modal {
        padding: 8px;
    }

    #settings-modal .modal-content {
        --settings-panel-padding: 12px;
        padding: 16px var(--settings-panel-padding) 0;
        border-radius: 12px;
    }

    #settings-modal .settings-section {
        padding: 12px 10px;
    }

    #settings-modal .rarity-slider {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    #settings-modal .player-item,
    #settings-modal .scroll-item {
        align-items: flex-start;
    }

    #settings-modal .player-item > div,
    #settings-modal .scroll-item > div {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* Center each reveal, then turn the complete scroll toward the player who
   summoned it.  The scroll itself stays intact, so its actions remain part of
   the same viewpoint rather than being left facing a different seat. */
#reveal-modal:not(.hidden) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    overflow: hidden;
}

#reveal-modal .scroll-modal {
    margin: 0;
    max-height: calc(100vh - 48px);
    transition: transform 180ms ease-out;
}

#reveal-modal[data-player-position="1"] .scroll-modal {
    transform: rotate(180deg);
}

#reveal-modal[data-player-position="2"] .scroll-modal {
    transform: rotate(-90deg);
}

#reveal-modal[data-player-position="4"] .scroll-modal {
    transform: rotate(90deg);
}

@media screen and (max-width: 767px) {
    #reveal-modal[data-player-position="2"] .scroll-modal,
    #reveal-modal[data-player-position="4"] .scroll-modal {
        width: min(80vw, 340px);
    }

    #reveal-modal[data-player-position="2"] .scroll-container,
    #reveal-modal[data-player-position="4"] .scroll-container {
        max-height: calc(100vw - 64px);
        overflow: auto;
    }
}


/* Add these styles at the end of your CSS file */


/* Superpower Modal Styles */

#superpowers-modal .modal-content {
    background-color: #2a2a2a;
    color: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 255, 0.3);
}

#superpowers-container {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.superpower-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #3a3a3a;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.superpower-item span {
    color: #ffffff;
}

.superpower-item button {
    background-color: #4da6ff;
    color: #ffffff;
    border: none;
    padding: 5px 10px;
    margin-left: 5px;
    border-radius: 3px;
    cursor: pointer;
}

.superpower-item button:hover {
    background-color: #3a8ad6;
}

#add-superpower {
    background-color: #4da6ff;
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

#add-superpower:hover {
    background-color: #3a8ad6;
}


/* Add this to your existing CSS file */

.settings-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

#save-settings,
#cancel-settings {
    background-color: #4da6ff;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin-left: 10px;
    transition: background-color 0.3s;
}

#save-settings:hover,
#cancel-settings:hover {
    background-color: #3a8ad6;
}

#cancel-settings {
    background-color: #e74c3c;
}

#cancel-settings:hover {
    background-color: #c0392b;
}

@keyframes summoningPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes intensifyGlow {
    0% {
        opacity: 0.26;
    }
    100% {
        opacity: 0.46;
    }
}

/* The badge stays quiet at rest, then briefly wakes up whenever a summon
   changes its number. */
.rare-counter.counter-updating {
    animation: counterAwake 650ms ease-out;
    background: rgba(41, 139, 238, 0.56);
    border-color: rgba(196, 237, 255, 0.95);
    box-shadow: 0 0 12px rgba(77, 166, 255, 0.82);
}

.rare-counter.counter-updating .rare-count {
    color: #e2f5ff;
    text-shadow: 0 0 9px rgba(187, 234, 255, 1);
}

@keyframes counterAwake {
    0%, 100% {
        transform: scale(1);
        background: rgba(41, 139, 238, 0.16);
        box-shadow: 0 0 4px rgba(77, 166, 255, 0.22);
    }
    45% {
        transform: scale(1.22);
        background: rgba(41, 139, 238, 0.72);
        box-shadow: 0 0 16px rgba(77, 166, 255, 0.96);
    }
}

#audio-control-panel {
    position: fixed;
    right: 20px;
    bottom: 74px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 214px;
    padding: 10px;
    border: 1px solid #4da6ff;
    border-radius: 10px;
    background: rgba(26, 26, 26, 0.96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

#audio-control-panel[hidden] {
    display: none;
}

#audio-control-panel button {
    min-width: 32px;
    min-height: 32px;
    border: 1px solid #4da6ff;
    border-radius: 6px;
    color: #fff;
    background: #2a2a2a;
    cursor: pointer;
    font-size: 1rem;
}

#quick-audio-volume {
    flex: 1;
    min-width: 72px;
    accent-color: #4da6ff;
}

@media (max-width: 600px) {
    #audio-control-panel {
        right: 12px;
        bottom: 66px;
    }
}

.audio-settings input[type="range"] {
    width: 100%;
    accent-color: #4da6ff;
}

.audio-settings p {
    margin: 6px 0 0;
    color: #b9c7d8;
    font-size: 0.9em;
}


/* Discard Scroll Button */

.discard-scroll-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: none;
    border: none;
    color: #ff4d4d;
    cursor: pointer;
    font-size: 0.8em;
    padding: 2px 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.player-profile:hover .discard-scroll-btn {
    opacity: 1;
}


/* Confirmation Modal Styles */

.confirm-modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.confirm-modal-content {
    background-color: #2a2a2a;
    color: #ffffff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
    text-align: center;
    border-radius: 10px;
}

.confirm-modal-buttons {
    margin-top: 20px;
}

.confirm-modal-buttons button {
    margin: 0 10px;
    padding: 5px 15px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    font-family: 'Bubblegum Sans', cursive;
    font-weight: 700;
    /* Changed from 400 to 700 for bolder text */
    font-size: 1em;
    transition: background-color 0.3s;
}

#confirm-discard {
    background-color: #e74c3c;
    /* Red for discard */
    color: #ffffff;
}

#confirm-discard:hover {
    background-color: #c0392b;
}

#cancel-discard {
    background-color: #4da6ff;
    /* Blue for cancel */
    color: #ffffff;
}

#cancel-discard:hover {
    background-color: #3a8ad6;
}


/* Add this at the end of your css/styles.css file */

#game-controls {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
}

#game-controls button {
    background-color: rgba(77, 166, 255, 0.7);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
    margin-right: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Bubblegum Sans', cursive;
    font-weight: 700;
    /* Changed from 400 to 700 for bolder text */
    font-size: 1em;
    transition: background-color 0.3s;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

#game-controls button:hover {
    background-color: #3a8ad6;
}


/* Add this to your existing CSS file */

@keyframes legendaryReveal {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(360deg);
        opacity: 0.7;
    }
    100% {
        transform: scale(1) rotate(720deg);
        opacity: 1;
    }
}

.legendary-scroll-reveal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.legendary-scroll-icon {
    width: 150px;
    height: 150px;
    animation: legendaryReveal 3s ease-in-out;
}

.scroll-details-actions {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.discard-scroll-details {
    border: 1px solid rgba(255, 138, 138, 0.78);
    border-radius: 7px;
    padding: 9px 14px;
    color: #fff;
    background: rgba(190, 54, 54, 0.88);
    cursor: pointer;
}

.discard-scroll-details:hover,
.discard-scroll-details:focus-visible {
    background: rgba(222, 67, 67, 0.96);
}

.scroll-display .scroll-title {
    padding-right: 24px;
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1;
    letter-spacing: 0;
}

.legendary-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.legendary-particle {
    position: absolute;
    background: gold;
    border-radius: 50%;
    animation: particleFade 2s ease-out infinite;
}

@keyframes particleFade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.light-scroll-reveal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: all 2s ease-in-out;
}

.light-orb {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.8);
    transition: all 3s ease-in-out;
}

.light-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 0;
    animation: floatParticle 4s ease-in-out infinite;
}

@keyframes floatParticle {
    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    50% {
        transform: translateY(-100px) scale(2);
        opacity: 0.8;
    }
}

.light-scroll-reveal.phase-1 {
    opacity: 1;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.light-scroll-reveal.phase-1 .light-orb {
    width: 50px;
    height: 50px;
    box-shadow: 0 0 30px 15px rgba(255, 255, 255, 0.8);
}

.light-scroll-reveal.phase-2 .light-orb {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 50px 25px rgba(255, 255, 255, 0.9);
}

.light-scroll-reveal.phase-3 {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.light-scroll-reveal.phase-3 .light-orb {
    width: 200px;
    height: 200px;
    box-shadow: 0 0 100px 50px rgba(255, 255, 255, 1);
}

.light-scroll-reveal.fade-out {
    opacity: 0;
}

.lightning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 50ms ease-in-out;
}


/* Add some mystical particle effects */

@keyframes floatingParticles {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

.mystical-particle {
    position: fixed;
    width: 5px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    animation: floatingParticles 10s infinite ease-in-out;
}


/* Add a subtle ambient glow to the entire page */

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(30, 30, 60, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

#webcam {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#webcam-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 128, 0.3) 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

@keyframes smileDetectedPulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 30px 10px rgba(255, 215, 0, 0.7);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 0 40px 15px rgba(255, 215, 0, 0.9);
    }
}

#magic-ball.smile-detected {
    animation: smileDetectedPulse 0.5s ease-in-out infinite;
}

.scroll-title {
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
    letter-spacing: 0.6px;
    line-height: 1.2;
    padding: 4px 6px;
    transition: transform 0.2s ease;
    display: inline-block;
    text-shadow: 0 0 8px currentColor;
}


/* Rarity-specific text colors for scroll titles */

.player-profile[data-rarity="Rare"] .scroll-title {
    color: #0000FF;
    /* Blue for Rare */
}

.player-profile[data-rarity="Elite"] .scroll-title {
    color: #800080;
    /* Purple for Elite */
}

.player-profile[data-rarity="Legend"] .scroll-title {
    color: #D4AF37;
    /* Gold for Legend */
}

.player-profile[data-rarity="Light"] .scroll-title {
    color: #FFFFFF;
    /* White for Light */
}


/* Add these styles to your existing CSS file */

.scroll-item {
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scroll-rare {
    background-color: rgba(0, 0, 255, 0.2);
    border: 1px solid rgba(0, 0, 255, 0.5);
}

.scroll-elite {
    background-color: rgba(128, 0, 128, 0.2);
    border: 1px solid rgba(128, 0, 128, 0.5);
}

.scroll-legend {
    background-color: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.5);
}

.scroll-light {
    background-color: rgba(128, 128, 128, 0.2);
    /* Light gray background */
    border: 1px solid rgba(128, 128, 128, 0.5);
}

.scroll-item span {
    color: #ffffff;
    flex-grow: 1;
    margin-right: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    /* Add text shadow for better visibility */
}

.scroll-light span {
    color: #e0e0e0;
    /* Light gray text color */
}

.scroll-item button {
    background-color: #4da6ff;
    color: #ffffff;
    border: none;
    padding: 5px 10px;
    margin-left: 5px;
    border-radius: 3px;
    cursor: pointer;
}

.scroll-item button:hover {
    background-color: #3a8ad6;
}

.rarity-slider {
    margin-bottom: 15px;
}

.rarity-slider label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.rarity-slider input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #3a3a3a;
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
    border-radius: 5px;
}

.rarity-slider input[type="range"]:hover {
    opacity: 1;
}

.rarity-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #4da6ff;
    cursor: pointer;
    border-radius: 50%;
}

.rarity-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #4da6ff;
    cursor: pointer;
    border-radius: 50%;
}

#total-percentage {
    font-weight: bold;
    margin-top: 10px;
}


/* Add this new style for the active player highlight */

.player-display.active-player .player-profile {
    box-shadow: 0 0 15px 5px rgba(64, 224, 208, 0.7);
    /* Light teal green */
    transition: box-shadow 0.3s ease;
}


/* Modify the existing .player-profile style to include transition */

/* Duplicate player-profile style removed - using the updated version above */


/* Update the player display styles */

.player-display {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    z-index: 10;
    transform-origin: center;
}


/* Style for when the player is being dragged */

.player-display.dragging {
    opacity: 0.8;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}


/* Add rotation handle */

.rotation-handle {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    /* Hide the handle by default */
    transition: opacity 0.3s ease;
    /* Smooth transition for showing/hiding */
}


/* Show the rotation handle when hovering over the player display */

.player-display:hover .rotation-handle {
    opacity: 1;
}

.rotate-button {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 28px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: #333;
    font-weight: bold;
    z-index: 15;
}

.player-display:hover .rotate-button,
.player-display.active-player .rotate-button {
    opacity: 1;
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 255, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}


/* PWA and Mobile Optimizations */

/* Prevent zoom on input focus */
input, select, textarea {
    font-size: 16px !important;
}

/* Safe area insets for devices with notches */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Touch optimizations */
* {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

button, .player-display, #magic-ball {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Responsive layout for tablets (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #magic-ball {
        width: 180px;
        height: 180px;
    }

    .player-display {
        transform: scale(1.1);
    }

    .player-name {
        font-size: 1.8em;
    }

    .scroll-display {
        font-size: 1.4em;
        min-height: 70px;
        padding: 12px;
    }

    #system-controls button {
        font-size: 20px;
        padding: 12px 18px;
    }

    #game-controls button {
        font-size: 18px;
        padding: 12px 18px;
    }

    .modal-content {
        width: 85%;
        max-width: 600px;
        margin: 5% auto;
    }

    #permanent-ownership-panel {
        width: 280px;
        padding: 20px;
    }
}

/* Responsive layout for mobile phones (up to 768px) */
@media screen and (max-width: 768px) {
    #magic-ball {
        width: 140px;
        height: 140px;
    }

    .player-display {
        transform: scale(0.9);
    }

    #system-controls button {
        font-size: 16px;
        padding: 10px 14px;
        margin-left: 8px;
    }

    #game-controls button {
        font-size: 14px;
        padding: 10px 14px;
        margin-right: 8px;
    }

    .player-name {
        font-size: 1.4em;
    }

    .scroll-display {
        font-size: 1.1em;
        min-height: 50px;
        padding: 8px;
    }

    .modal-content {
        width: 95%;
        margin: 2% auto;
        padding: 15px;
    }

    .modal-buttons button {
        font-size: 16px;
        padding: 12px 20px;
        margin: 5px;
    }

    #permanent-ownership-panel {
        width: 200px;
        padding: 12px;
        font-size: 0.9em;
    }

    .voice-control-button {
        font-size: 14px;
        padding: 8px 12px;
    }

    .settings-section {
        margin-bottom: 15px;
    }

    .rarity-slider {
        margin-bottom: 10px;
    }
}

/* Responsive layout for small mobile phones (up to 480px) */
@media screen and (max-width: 480px) {
    body {
        min-height: 100vh;
        overflow-y: auto;
    }

    #players-container-game {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 190px 14px 96px;
        box-sizing: border-box;
    }

    .players-3 .player-display,
    .players-4 .player-display,
    .players-5 .player-display,
    .players-6 .player-display {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .players-3 #player-1,
    .players-3 #player-2,
    .players-3 #player-3,
    .players-4 #player-1,
    .players-4 #player-2,
    .players-4 #player-3,
    .players-4 #player-4,
    .players-5 #player-1,
    .players-5 #player-2,
    .players-5 #player-3,
    .players-5 #player-4,
    .players-5 #player-5,
    .players-6 #player-1,
    .players-6 #player-2,
    .players-6 #player-3,
    .players-6 #player-4,
    .players-6 #player-5,
    .players-6 #player-6 {
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }

    .player-profile {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    #magic-ball {
        width: 120px;
        height: 120px;
        opacity: 0.45;
        z-index: 1;
    }

    .player-display {
        transform: none;
    }

    .player-name {
        font-size: 1.2em;
    }

    .scroll-display {
        font-size: 1em;
        min-height: 45px;
        padding: 6px;
    }

    #system-controls {
        bottom: 10px;
        right: 10px;
    }

    #system-controls button {
        font-size: 14px;
        padding: 8px 10px;
        margin-left: 5px;
    }

    #game-controls {
        bottom: 10px;
        left: 10px;
    }

    #game-controls button {
        font-size: 12px;
        padding: 8px 10px;
        margin-right: 5px;
    }

    .modal-content {
        width: 98%;
        margin: 1% auto;
        padding: 10px;
    }

    .modal-buttons button {
        font-size: 14px;
        padding: 10px 16px;
        margin: 3px;
    }

    #permanent-ownership-panel {
        width: 180px;
        padding: 8px;
        font-size: 0.8em;
    }

    .voice-control-button {
        font-size: 12px;
        padding: 6px 8px;
    }
}

/* Landscape orientation optimizations */
@media screen and (orientation: landscape) and (max-height: 600px) {
    #magic-ball {
        width: 100px;
        height: 100px;
    }

    .player-display {
        transform: scale(0.7);
    }

    #system-controls {
        bottom: 5px;
        right: 5px;
    }

    #game-controls {
        bottom: 5px;
        left: 5px;
    }

    #permanent-ownership-panel {
        width: 160px;
        padding: 6px;
        font-size: 0.7em;
    }

    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #magic-ball {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #0a0a0a;
    }

    .modal-content {
        background-color: #1a1a1a;
        border: 1px solid #333;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #magic-ball {
        animation: none !important;
    }
}


/* Ensure the magic ball stays centered */

#magic-ball {
    position: fixed;
    transform: translate(-50%, -50%);
}

/* This is intentionally hidden during normal play. Its dedicated corner hit
   area keeps resizing separate from dragging the card itself. */
.resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: nwse-resize;
    opacity: 0;
    pointer-events: auto;
    z-index: 16;
    touch-action: none;
}

.resize-handle::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(163, 225, 255, 0.92);
    border-bottom: 2px solid rgba(163, 225, 255, 0.92);
}

.player-display:hover .resize-handle,
.player-display:focus-within .resize-handle,
.player-display.resizing .resize-handle {
    opacity: 1;
    pointer-events: auto;
}

/* The scroll area is the flexible body of the card. It fills any remaining
   space and can shrink with a resized panel instead of keeping its old box. */
.player-profile .scroll-display {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 0;
}

.player-profile {
    overflow: hidden;
    container-type: size;
}

.player-profile .player-name {
    font-size: clamp(0.9rem, min(11cqi, 17cqb), 1.6rem);
    padding-inline: clamp(6px, 5cqi, 12px);
}

.player-profile .scroll-display {
    font-size: clamp(0.75rem, min(9cqi, 14cqb), 1.25rem);
    padding: clamp(6px, min(5cqi, 7cqb), 12px);
}

/* Each player keeps the resize target at their own viewing-direction corner.
   Anchoring the target directly on the card edge makes the visual affordance
   consistent without letting it float away from the panel line. */
@media screen and (min-width: 769px) {
    .players-4 #player-1 .resize-handle,
    .players-4 #player-2 .resize-handle,
    .players-4 #player-3 .resize-handle,
    .players-4 #player-4 .resize-handle {
        top: auto;
        right: 0;
        bottom: 0;
        left: auto;
    }
}


/* Keep the game legible across phone, tablet, and desktop viewports. */
#magic-ball {
    width: clamp(112px, min(22vw, 26vh), 220px);
    height: clamp(112px, min(22vw, 26vh), 220px);
}

/* Keep the orb clear of player controls at compact desktop sizes.  Mobile
   panels use normal document flow below, so they cannot cross the center. */
@media screen and (min-width: 769px) and (max-width: 1180px) {
    #magic-ball {
        width: clamp(116px, min(18vw, 23vh), 190px);
        height: clamp(116px, min(18vw, 23vh), 190px);
    }

    .player-display {
        max-width: min(28vw, 300px);
    }

    .player-profile {
        width: clamp(172px, 21vw, 232px);
        min-height: clamp(156px, 20vh, 184px);
        padding: clamp(12px, 1.8vw, 20px) clamp(12px, 1.6vw, 18px);
        margin: 0;
        box-sizing: border-box;
    }

    .player-name {
        font-size: clamp(1.1rem, 2.3vw, 1.6rem);
    }

    .scroll-display {
        min-height: clamp(48px, 7vh, 65px);
        padding: clamp(8px, 1.2vw, 12px);
        font-size: clamp(0.95rem, 1.8vw, 1.25rem);
    }

    /* Reserve a real center lane between the top and bottom player panels. */
    .players-3 #magic-ball,
    .players-4 #magic-ball {
        top: calc(50% - 48px);
    }

    .players-5 #magic-ball,
    .players-6 #magic-ball {
        top: calc(50% - 62px);
        width: clamp(104px, min(16vw, 21vh), 168px);
        height: clamp(104px, min(16vw, 21vh), 168px);
    }
}

/* Four-player table: one card per side of the orb, with its reading edge
   pointing away from the center so every player sees their own card upright. */
@media screen and (min-width: 769px) {
    /* Side players rotate for their viewing direction. Give their unrotated
       cards the reciprocal dimensions so all four cards present the same
       landscape silhouette around the table. */
    .players-4 #player-2 .player-profile,
    .players-4 #player-4 .player-profile {
        width: clamp(156px, 20vh, 194px);
        min-height: 0;
        height: clamp(172px, 21vw, 232px);
    }

    .players-4 #player-1 {
        transform: translateX(-50%) rotate(180deg);
    }

    .players-4 #player-2 {
        right: 52px;
        transform: translateY(-50%) rotate(-90deg);
    }

    .players-4 #player-3 {
        transform: translateX(-50%);
    }

    .players-4 #player-4 {
        left: 52px;
        transform: translateY(-50%) rotate(90deg);
    }

}

@media screen and (max-width: 767px) {
    #players-container-game {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-inline: max(12px, env(safe-area-inset-left));
        padding-top: 390px;
        padding-bottom: max(92px, env(safe-area-inset-bottom));
        gap: 12px;
    }

    .player-display {
        width: min(100%, 310px);
        min-width: 0;
    }

    /* Player panels are part of the page flow on phones: no scaled or
       absolutely-positioned panel can cover the centered orb. */
    #magic-ball {
        position: fixed;
        opacity: 0.68;
        z-index: 1;
        pointer-events: auto;
    }

    .player-display {
        position: relative;
        transform: none !important;
        z-index: 2;
    }

    .player-profile {
        width: 100%;
        min-height: clamp(154px, 24vh, 196px);
        margin: 0;
        padding: clamp(12px, 4vw, 18px);
        box-sizing: border-box;
    }

    .player-name {
        font-size: clamp(1.15rem, 6vw, 1.45rem);
    }

    .scroll-display {
        min-height: clamp(50px, 9vh, 66px);
        padding: clamp(8px, 3vw, 12px);
        font-size: clamp(1rem, 4.6vw, 1.2rem);
    }

    /* Keep the ownership card in the header lane, above the orb's dedicated
       center lane, instead of letting either obscure the other. */
    #permanent-ownership-panel {
        top: 62px;
        right: 10px;
        width: min(170px, calc(100vw - 20px));
        min-width: 0;
        padding: 8px;
        font-size: 0.78em;
    }
}

/* Keep the player card content compact: the scroll body fills the remaining
   space directly below the player name instead of leaving a large gap. */
.player-profile {
    gap: 4px;
    justify-content: flex-start;
}

.player-profile .player-name {
    margin-bottom: 0;
}

/* Viewing-corner invariant: bottom-right always means the seated player's
   own bottom-right. The player-facing rotation maps that semantic corner to
   a different screen corner for each seat. */
body.players-4 .resize-handle[data-viewing-corner] {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
}

body.players-4 .resize-handle[data-viewing-corner]::after {
    top: auto;
    right: 2px;
    bottom: 2px;
    left: auto;
}

/* Phone four-player table: keep the same outward-facing tabletop layout as
   desktop, but scale each lane into the available handset viewport. */
@media screen and (max-width: 767px) {
    body.players-4 {
        --phone-panel-short: clamp(70px, 10vh, 82px);
        --phone-panel-long: clamp(128px, 38vw, 150px);
        --phone-orb-half: clamp(56px, 15.6vw, 61px);
        --phone-orb-gap: clamp(32px, 11vw, 43px);
        /* Give the top and bottom seats a little more breathing room. */
        --phone-vertical-orb-gap: calc(var(--phone-orb-gap) + clamp(12px, 3vw, 18px));
    }

    body.players-4 #players-container-game {
        position: fixed;
        inset: 0;
        display: block;
        min-height: 100svh;
        padding: 0;
        overflow: hidden;
    }

    body.players-4 #magic-ball {
        position: fixed;
        top: 50% !important;
        left: 50% !important;
        width: calc(var(--phone-orb-half) + var(--phone-orb-half));
        height: calc(var(--phone-orb-half) + var(--phone-orb-half));
        opacity: 0.9;
        /* The full-screen player layout sits above the page background.  Keep
           the selected orb above that transparent layout layer so taps reach
           its summon handler. */
        z-index: 4;
    }

    body.players-4 .player-display {
        position: absolute !important;
        z-index: 3;
        width: auto;
        max-width: none;
        margin: 0;
    }

    body.players-4 .player-profile {
        width: var(--phone-panel-short);
        height: var(--phone-panel-long);
        min-height: 0;
        margin: 0;
        padding: clamp(7px, 2vw, 9px);
    }

    body.players-4 #player-2 .player-profile,
    body.players-4 #player-4 .player-profile {
        /* These cards rotate sideways. Their local dimensions are inverted
           so the visible phone layout stays tall and narrow at each side. */
        width: var(--phone-panel-long);
        height: var(--phone-panel-short);
    }

    /* Top and bottom players are read horizontally in their own seats. */
    body.players-4 #player-1 .player-profile,
    body.players-4 #player-3 .player-profile {
        width: var(--phone-panel-long);
        height: var(--phone-panel-short);
    }

    body.players-4 #player-1 {
        top: calc(50% - var(--phone-panel-short) - var(--phone-orb-half) - var(--phone-vertical-orb-gap)) !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) rotate(180deg) !important;
    }

    body.players-4 #player-2 {
        top: 50% !important;
        right: calc(env(safe-area-inset-right) - 24px) !important;
        bottom: auto !important;
        left: auto !important;
        transform: translateY(-50%) rotate(-90deg) !important;
    }

    body.players-4 #player-3 {
        top: auto !important;
        right: auto !important;
        bottom: calc(50% - var(--phone-panel-short) - var(--phone-orb-half) - var(--phone-vertical-orb-gap)) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    body.players-4 #player-4 {
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        left: calc(env(safe-area-inset-left) - 24px) !important;
        transform: translateY(-50%) rotate(90deg) !important;
    }

    body.players-4 .player-profile .player-name {
        font-size: clamp(0.78rem, 4vw, 1rem);
        padding-inline: 4px;
    }

    body.players-4 .player-profile .scroll-display {
        font-size: clamp(0.68rem, 3.5vw, 0.86rem);
        padding: 5px;
    }

    body.players-4 .rotate-button {
        display: none;
    }
}

.dark-scroll-reveal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: all 2s ease-in-out;
}

.dark-orb {
    width: 10px;
    height: 10px;
    background: #000000;
    border-radius: 50%;
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.8);
    transition: all 3s ease-in-out;
}


.dark-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: #FF0000;
    border-radius: 50%;
    opacity: 0;
    animation: darkParticleFloat 4s ease-in-out infinite;
}

.dark-scroll-reveal.phase-1 {
    opacity: 1;
}

.dark-scroll-reveal.phase-1 .dark-orb {
    width: 50px;
    height: 50px;
}

.dark-scroll-reveal.phase-2 .dark-orb {
    width: 100px;
    height: 100px;
}

.dark-scroll-reveal.phase-3 .dark-orb {
    width: 200px;
    height: 200px;
}

.dark-scroll-reveal.fade-out {
    opacity: 0;
}

@keyframes darkParticleFloat {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    50% {
        transform: translate(calc(100vw * (random() - 0.5)), calc(100vh * (random() - 0.5))) scale(2);
        opacity: 0.8;
    }
}

@keyframes intensifyDarkGlow {
    0% {
        opacity: 0.3;
        box-shadow: 0 0 20px 10px rgba(255, 0, 0, 0.3);
    }
    100% {
        opacity: 0.6;
        box-shadow: 0 0 40px 20px rgba(255, 0, 0, 0.6);
    }
}

.dark-lightning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    z-index: 9998;
    transition: opacity 50ms ease-in-out;
}

/* Audio-synced professional summon VFX */

.rune-container {
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
    overflow: hidden;
    perspective: 900px;
}

.rune {
    position: absolute;
    top: 52%;
    color: rgba(185, 232, 255, 0.92);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    line-height: 1;
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.78),
        0 0 12px rgba(74, 166, 255, 0.6);
    filter: drop-shadow(0 0 6px rgba(112, 210, 255, 0.56));
    animation: runeAscend 5s cubic-bezier(0.15, 0.78, 0.22, 1) forwards;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.65);
    opacity: 0;
}

@keyframes runeAscend {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, -140px) rotate(0deg) scale(0.36);
    }
    18% {
        opacity: 1;
    }
    70% {
        opacity: 0.58;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift-x), var(--drift-y), 180px) rotate(var(--rune-rotate)) scale(0.82);
    }
}

.legendary-pause-scene {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 232, 147, 0.06) 0 18%, rgba(255, 194, 67, 0.035) 28%, rgba(4, 5, 18, 0.16) 54%, transparent 78%);
    opacity: 0;
    animation: legendaryPauseSceneIn 0.6s cubic-bezier(0.16, 0.84, 0.22, 1) both;
    isolation: isolate;
}

.legendary-pause-scene::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(30vmin, 250px);
    height: min(30vmin, 250px);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 42% 35%, rgba(255, 255, 255, 0.12), transparent 16%),
        radial-gradient(circle, rgba(255, 216, 116, 0.035), transparent 68%);
    filter: blur(1px);
}

.legendary-pause-scene.is-releasing {
    animation: legendaryPauseRelease 0.56s cubic-bezier(0.16, 0.84, 0.22, 1) forwards;
}

.legendary-pause-aperture {
    position: relative;
    width: min(30vmin, 250px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 240, 171, 0.16);
    box-shadow:
        0 0 14px rgba(255, 216, 89, 0.11),
        inset 0 0 22px rgba(255, 238, 148, 0.08);
    transform: scale(0.72);
    animation: legendaryPauseAperture 0.6s cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

.legendary-pause-aperture::before,
.legendary-pause-aperture::after,
.legendary-pause-inner-ring,
.legendary-pause-lens {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.legendary-pause-aperture::before {
    inset: 13%;
    border: 1px solid rgba(255, 251, 212, 0.14);
    transform: rotate(18deg);
    animation: legendaryPauseRing 0.6s ease-out both;
}

.legendary-pause-aperture::after {
    inset: 25%;
    border: 1px solid rgba(255, 207, 87, 0.12);
    transform: rotate(-24deg);
    animation: legendaryPauseRing 0.6s ease-out reverse both;
}

.legendary-pause-inner-ring {
    inset: 36%;
    border: 1px solid rgba(255, 246, 188, 0.18);
    box-shadow: 0 0 10px rgba(255, 221, 104, 0.12);
}

.legendary-pause-lens {
    inset: 43%;
    background: radial-gradient(circle, rgba(255, 252, 207, 0.34), rgba(255, 212, 83, 0.1) 58%, transparent 72%);
    filter: blur(0.4px);
    animation: legendaryPauseLens 0.6s ease-out both;
}

.legendary-pause-pulse,
.legendary-pause-beads {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

.legendary-pause-pulse-ring {
    position: absolute;
    inset: 8%;
    border: 1px solid rgba(255, 230, 156, 0.12);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 218, 94, 0.08);
    opacity: 0;
    animation: legendaryPausePulseRing var(--legend-pause-duration, 1.6s) cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

.legendary-pause-bead {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.76), rgba(255, 219, 116, 0.38) 55%, transparent 76%);
    box-shadow: 0 0 7px rgba(255, 224, 123, 0.28);
    transform: rotate(var(--bead-angle)) translateX(42%) scale(0.55);
    opacity: 0;
    animation: legendaryPauseBead var(--legend-pause-duration, 1.6s) cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

.legendary-pause-sparks {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.legendary-pause-spark {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 252, 218, 0.48), rgba(255, 211, 92, 0.24) 46%, rgba(255, 191, 47, 0) 74%);
    box-shadow: 0 0 5px rgba(255, 222, 111, 0.22);
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.4);
    animation: legendaryPauseSpark 0.68s cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

.legendary-scroll-reveal {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 231, 170, 0.12) 0%, rgba(229, 164, 28, 0.08) 24%, rgba(17, 12, 44, 0.3) 68%, rgba(0, 0, 0, 0.38) 100%);
    -webkit-backdrop-filter: blur(0.25px) saturate(1.04);
    backdrop-filter: blur(0.25px) saturate(1.04);
    isolation: isolate;
    opacity: 0;
    animation: legendaryRevealOverlayFade var(--legend-reveal-duration, 6s) cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

.legendary-scroll-reveal::before,
.legendary-scroll-reveal::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(28vmin, 250px);
    height: min(28vmin, 250px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

.legendary-scroll-reveal::before {
    border: 1px solid rgba(255, 236, 161, 0.14);
    box-shadow:
        0 0 12px rgba(255, 219, 87, 0.12),
        inset 0 0 18px rgba(255, 245, 168, 0.08);
    animation: legendaryFineHaloSpin 9s linear infinite;
}

.legendary-scroll-reveal::after {
    width: min(42vmin, 340px);
    height: min(22vmin, 180px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 18px rgba(255, 202, 58, 0.1);
    animation: legendaryFineHaloSpin 12s linear infinite reverse;
}

.legendary-scroll-icon {
    width: min(24vmin, 185px);
    height: min(24vmin, 185px);
    position: relative;
    z-index: 2;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.28) 0 7%, rgba(255, 255, 255, 0.08) 12%, transparent 28%),
        radial-gradient(circle at 52% 54%, rgba(255, 224, 143, 0.09), rgba(255, 202, 83, 0.035) 46%, transparent 70%);
    border: 1px solid rgba(255, 239, 184, 0.16);
    box-shadow:
        0 0 18px rgba(255, 220, 122, 0.18),
        inset -16px -18px 28px rgba(55, 32, 0, 0.1),
        inset 16px 12px 24px rgba(255, 255, 255, 0.1);
    mix-blend-mode: screen;
    animation: legendaryLensReveal 2.8s cubic-bezier(0.12, 0.9, 0.22, 1) both;
}

.legendary-scroll-icon::before,
.legendary-scroll-icon::after {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 1px solid rgba(255, 250, 198, 0.18);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.08);
}

.legendary-scroll-icon::after {
    inset: 36%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), rgba(255, 228, 113, 0.06) 66%, transparent 70%);
    border: 0;
}

.legendary-crest {
    position: absolute;
    width: min(30vw, 270px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 234, 149, 0.12);
    box-shadow:
        0 0 20px rgba(255, 216, 90, 0.09),
        inset 0 0 32px rgba(255, 204, 51, 0.06);
    animation: legendaryFineHaloSpin 14s linear infinite;
}

.legendary-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.legendary-particle {
    background: radial-gradient(circle, rgba(255, 251, 213, 0.42) 0%, rgba(255, 211, 86, 0.22) 42%, rgba(255, 179, 0, 0) 74%);
    box-shadow: 0 0 5px rgba(255, 218, 93, 0.16);
    filter: blur(0.28px);
    mix-blend-mode: screen;
    opacity: 0;
    animation: legendParticleDrift 3.2s ease-out infinite;
}

.legendary-burst-scene {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    overflow: hidden;
    isolation: isolate;
}

.legendary-burst-lens {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(30vmin, 250px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.64);
    background:
        radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.16) 12%, transparent 28%),
        radial-gradient(circle, rgba(255, 232, 154, 0.34), rgba(255, 198, 68, 0.1) 48%, transparent 72%);
    box-shadow:
        0 0 24px rgba(255, 231, 145, 0.28),
        inset 0 0 22px rgba(255, 255, 255, 0.14);
    mix-blend-mode: screen;
    animation: legendaryBurstLens var(--legend-burst-duration, 1.4s) cubic-bezier(0.12, 0.86, 0.22, 1) both;
}

.legendary-burst-shockwaves,
.legendary-burst-particles {
    position: absolute;
    inset: 0;
}

.legendary-burst-wave {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(24vmin, 210px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 239, 183, 0.22);
    box-shadow: 0 0 18px rgba(255, 218, 104, 0.16);
    transform: translate(-50%, -50%) scale(0.45);
    opacity: 0;
    animation: legendaryBurstWave 1.05s cubic-bezier(0.12, 0.86, 0.22, 1) both;
}

.legendary-burst-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 225, 134, 0.72) 42%, rgba(255, 188, 47, 0) 74%);
    box-shadow: 0 0 8px rgba(255, 232, 153, 0.44);
    filter: blur(var(--burst-blur));
    mix-blend-mode: screen;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
    animation: legendaryBurstParticle 1.1s cubic-bezier(0.12, 0.86, 0.22, 1) both;
}

@keyframes legendaryPauseSceneIn {
    0% {
        opacity: 0;
        transform: scale(1.03);
    }
    40% {
        opacity: 0.54;
    }
    100% {
        opacity: 0.46;
        transform: scale(1);
    }
}

@keyframes legendaryPauseRelease {
    0% {
        opacity: 0.46;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.02);
    }
}

@keyframes legendaryPauseAperture {
    0% {
        opacity: 0;
        transform: scale(0.62) rotate(-5deg);
    }
    58% {
        opacity: 0.58;
        transform: scale(0.96) rotate(0deg);
    }
    100% {
        opacity: 0.42;
        transform: scale(0.84) rotate(0deg);
    }
}

@keyframes legendaryPauseRing {
    0% {
        opacity: 0;
        transform: scale(0.74) rotate(0deg);
    }
    100% {
        opacity: 0.28;
        transform: scale(0.96) rotate(20deg);
    }
}

@keyframes legendaryPauseLens {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    46% {
        opacity: 0.42;
        transform: scale(0.96);
    }
    100% {
        opacity: 0.22;
        transform: scale(0.62);
    }
}

@keyframes legendaryPausePulseRing {
    0% {
        opacity: 0;
        transform: scale(1.28);
    }
    42% {
        opacity: 0.34;
    }
    74% {
        opacity: 0.18;
        transform: scale(0.74);
    }
    100% {
        opacity: 0;
        transform: scale(0.42);
    }
}

@keyframes legendaryPauseBead {
    0% {
        opacity: 0;
        transform: rotate(var(--bead-angle)) translateX(49%) scale(0.42);
    }
    34% {
        opacity: 0.38;
    }
    72% {
        opacity: 0.72;
        transform: rotate(calc(var(--bead-angle) + 58deg)) translateX(33%) scale(1);
    }
    100% {
        opacity: 0;
        transform: rotate(calc(var(--bead-angle) + 95deg)) translateX(17%) scale(0.5);
    }
}

@keyframes legendaryPauseSpark {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.24);
    }
    42% {
        opacity: 0.32;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--pause-drift-x), var(--pause-drift-y), 0) scale(1.05);
    }
}

@keyframes legendaryBurstLens {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.54);
    }
    18% {
        opacity: 0.78;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.34);
    }
}

@keyframes legendaryBurstWave {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.44);
    }
    22% {
        opacity: 0.72;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.72);
    }
}

@keyframes legendaryBurstParticle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.35);
    }
    18% {
        opacity: 0.98;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(var(--burst-scale));
    }
}

@keyframes legendaryFineHaloSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes legendaryRevealOverlayFade {
    0% {
        opacity: 0;
    }
    18% {
        opacity: 0.84;
    }
    72% {
        opacity: 0.74;
    }
    100% {
        opacity: 0;
    }
}

@keyframes legendaryLensReveal {
    0% {
        opacity: 0;
        transform: scale(0.82);
    }
    35% {
        opacity: 0.42;
    }
    100% {
        opacity: 0.28;
        transform: scale(1);
    }
}

@keyframes legendaryHaloSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes legendParticleDrift {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.35);
    }
    22% {
        opacity: 0.26;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--spark-x), var(--spark-y), 0) scale(1.05);
    }
}

.light-rays {
    position: absolute;
    width: 1px;
    height: 1px;
    inset: 50% auto auto 50%;
    z-index: 1;
}

.light-ray {
    position: absolute;
    left: -2px;
    top: -48vh;
    width: 4px;
    height: 96vh;
    transform-origin: 50% 100%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.86), rgba(187, 240, 255, 0.18), transparent);
    filter: blur(1px);
    opacity: 0.18;
    animation: lightRayBreathe 3.2s ease-in-out infinite;
}

.light-core-lens {
    position: absolute;
    width: 320px;
    max-width: 70vw;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.95), rgba(219, 249, 255, 0.35) 24%, transparent 48%),
        radial-gradient(circle, rgba(255, 255, 255, 0.24), rgba(111, 211, 255, 0.12) 46%, transparent 70%);
    box-shadow:
        0 0 90px rgba(255, 255, 255, 0.46),
        inset 0 0 54px rgba(178, 239, 255, 0.26);
    opacity: 0.38;
    transform: scale(0.4);
    transition: transform 2.6s ease, opacity 2.6s ease;
}

.light-scroll-reveal.phase-2 .light-core-lens {
    opacity: 0.72;
    transform: scale(0.78);
}

.light-scroll-reveal.phase-3 .light-core-lens {
    opacity: 1;
    transform: scale(1.15);
}

.light-particle {
    background: radial-gradient(circle, #ffffff 0%, rgba(185, 241, 255, 0.9) 45%, rgba(185, 241, 255, 0) 72%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
    animation: lightParticleDrift 4s ease-in-out infinite;
}

@keyframes lightParticleDrift {
    0%,
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.65);
    }
    50% {
        opacity: 0.95;
        transform: translate3d(var(--spark-x), var(--spark-y), 0) scale(2.2);
    }
}

@keyframes lightRayBreathe {
    0%,
    100% {
        opacity: 0.12;
        filter: blur(1px);
    }
    50% {
        opacity: 0.34;
        filter: blur(2px);
    }
}

.dark-scroll-reveal {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 0, 48, 0.2) 0%, rgba(28, 0, 10, 0.64) 32%, rgba(0, 0, 0, 0.94) 100%);
    -webkit-backdrop-filter: contrast(1.2) saturate(1.3);
    backdrop-filter: contrast(1.2) saturate(1.3);
    isolation: isolate;
}

.dark-orb {
    background:
        radial-gradient(circle at 36% 28%, rgba(255, 92, 92, 0.35), transparent 22%),
        radial-gradient(circle, #0b0004 0%, #000 58%, #230006 100%);
    box-shadow:
        0 0 38px 12px rgba(255, 0, 28, 0.72),
        0 0 100px 44px rgba(116, 0, 19, 0.5),
        inset 18px 18px 36px rgba(255, 48, 48, 0.12),
        inset -20px -26px 46px rgba(0, 0, 0, 0.78);
}

.dark-eclipse-ring {
    position: absolute;
    width: min(62vw, 500px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 34, 68, 0.38);
    box-shadow:
        0 0 56px rgba(255, 0, 42, 0.35),
        inset 0 0 74px rgba(120, 0, 28, 0.22);
    animation: darkEclipseSpin 6s linear infinite;
}

.dark-particle {
    background: radial-gradient(circle, #ff4d5d 0%, rgba(255, 0, 44, 0.8) 42%, rgba(255, 0, 44, 0) 74%);
    box-shadow: 0 0 12px rgba(255, 0, 38, 0.9);
    animation: darkParticleFloat 4s ease-in-out infinite;
}

@keyframes darkParticleFloat {
    0%,
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.55);
    }
    50% {
        opacity: 0.9;
        transform: translate3d(var(--spark-x), var(--spark-y), 0) scale(2.15);
    }
}

@keyframes darkEclipseSpin {
    to {
        transform: rotate(-360deg);
    }
}

.voice-control-button {
    position: fixed;
    top: 20px;
    /* Change this from 'bottom' to 'top' */
    left: 20px;
    z-index: 1000;
    background-color: rgba(77, 166, 255, 0.7);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Bubblegum Sans', cursive;
    font-weight: 700;
    font-size: 1em;
    transition: background-color 0.3s;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.voice-control-button:hover {
    background-color: #3a8ad6;
}

.voice-control-button.active {
    background-color: #ff4d4d;
}

.voice-control-button.command-recognized {
    animation: pulse 0.5s;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

#voice-feedback {
    position: fixed;
    top: 120px;
    /* Position it below the Visual Feedback button */
    left: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1001;
    display: none;
    max-width: 300px;
    word-wrap: break-word;
}

.voice-feedback-toggle-button {
    position: fixed;
    top: 70px;
    /* Position it below the Voice Control button */
    left: 20px;
    z-index: 1000;
    background-color: rgba(77, 166, 255, 0.7);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Bubblegum Sans', cursive;
    font-weight: 700;
    font-size: 1em;
    transition: background-color 0.3s;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.voice-feedback-toggle-button:hover {
    background-color: #3a8ad6;
}

.voice-feedback-toggle-button.active {
    background-color: #ff4d4d;
}

/* Permanent Ownership Display Panel */

#permanent-ownership-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(26, 26, 26, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 15px;
    width: min(220px, calc(100vw - 40px));
    min-width: 220px;
    box-shadow: 0 0 20px rgba(0, 0, 255, 0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 100;
    font-family: 'Bubblegum Sans', cursive;
    font-weight: 700;
    box-sizing: border-box;
    cursor: move;
    touch-action: none;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    container-type: inline-size;
}

#permanent-ownership-panel.ownership-dragging,
#permanent-ownership-panel.ownership-resizing {
    user-select: none;
    transition: none;
}

.ownership-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: nwse-resize;
    opacity: 0;
    z-index: 2;
    touch-action: none;
}

.ownership-resize-handle::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(163, 225, 255, 0.92);
    border-bottom: 2px solid rgba(163, 225, 255, 0.92);
}

#permanent-ownership-panel:hover .ownership-resize-handle,
#permanent-ownership-panel:focus-within .ownership-resize-handle,
#permanent-ownership-panel.ownership-resizing .ownership-resize-handle {
    opacity: 1;
}

#permanent-ownership-panel h3 {
    margin: 0 0 10px 0;
    color: #ffffff;
    text-align: center;
    font-size: 1.1em;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 8px;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: clamp(0.56rem, 9cqi, 1.1em);
}

.ownership-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    gap: clamp(3px, 3cqi, 8px);
    margin-bottom: 8px;
    padding: 5px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.ownership-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(2px);
}

.power-name {
    color: #e0e0e0;
    font-size: 0.9em;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    min-width: 0;
    flex: 1 1 50%;
    overflow-wrap: anywhere;
    font-size: clamp(0.5rem, 7cqi, 0.9em);
}

.owner-name {
    color: #4da6ff;
    font-size: 0.9em;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(77, 166, 255, 0.6);
    min-width: 0;
    flex: 1 1 50%;
    text-align: right;
    overflow-wrap: anywhere;
    font-size: clamp(0.5rem, 7cqi, 0.9em);
}

.owner-name.owned {
    color: #00ff00;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
}

.owner-name.unowned {
    color: #888888;
    text-shadow: 0 0 5px rgba(136, 136, 136, 0.4);
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
    #permanent-ownership-panel {
        top: 10px;
        right: 10px;
        min-width: 180px;
        padding: 10px;
        font-size: 0.9em;
    }

    #permanent-ownership-panel h3 {
        font-size: 1em;
    }

    .power-name, .owner-name {
        font-size: 0.8em;
    }
}

/* Advanced Summoning Mechanic Animations */

/* Lightning Strike Animation */
@keyframes lightningStrike {
    0% {
        transform: translateX(-50%) scaleY(0);
        opacity: 0;
    }
    10% {
        transform: translateX(-50%) scaleY(1);
        opacity: 1;
    }
    20% {
        opacity: 0.8;
    }
    30% {
        opacity: 1;
    }
    40% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    70% {
        opacity: 0.9;
    }
    100% {
        transform: translateX(-50%) scaleY(1);
        opacity: 0;
    }
}

/* Advanced zigzag lightning animation for secondary power summoning */
@keyframes advancedLightningStrike {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    20% {
        opacity: 0.9;
        filter: drop-shadow(0 0 10px rgba(135, 206, 250, 0.8))
                drop-shadow(0 0 20px rgba(255, 255, 255, 0.6))
                drop-shadow(0 0 30px rgba(135, 206, 250, 0.4));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 15px rgba(135, 206, 250, 1))
                drop-shadow(0 0 30px rgba(255, 255, 255, 0.8))
                drop-shadow(0 0 45px rgba(135, 206, 250, 0.6));
    }
    80% {
        opacity: 0.8;
        filter: drop-shadow(0 0 20px rgba(135, 206, 250, 1))
                drop-shadow(0 0 40px rgba(255, 255, 255, 1))
                drop-shadow(0 0 60px rgba(135, 206, 250, 0.8));
    }
    100% {
        opacity: 0;
        filter: drop-shadow(0 0 5px rgba(135, 206, 250, 0.3))
                drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
    }
}

@keyframes lightningBranchAppear {
    0% {
        opacity: 0;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
    }
    50% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
    100% {
        opacity: 0.7;
        stroke-dashoffset: 0;
    }
}

/* Screen Shake Animation */
@keyframes screenShake {
    0%, 100% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(-10px) translateY(-5px);
    }
    20% {
        transform: translateX(10px) translateY(5px);
    }
    30% {
        transform: translateX(-8px) translateY(-3px);
    }
    40% {
        transform: translateX(8px) translateY(3px);
    }
    50% {
        transform: translateX(-6px) translateY(-2px);
    }
    60% {
        transform: translateX(6px) translateY(2px);
    }
    70% {
        transform: translateX(-4px) translateY(-1px);
    }
    80% {
        transform: translateX(4px) translateY(1px);
    }
    90% {
        transform: translateX(-2px) translateY(-1px);
    }
}

/* Screen Flash Animation */
@keyframes screenFlash {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    30% {
        opacity: 0.9;
    }
    50% {
        opacity: 0.7;
    }
    70% {
        opacity: 0.4;
    }
    90% {
        opacity: 0.1;
    }
    100% {
        opacity: 0;
    }
}

/* Secondary Power Box Animations */
@keyframes secondaryBoxAppear {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes secondaryBoxDisappear {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.9) translateY(-10px);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
}

/* Secondary Power Box Styling */
.secondary-power-box {
    transition: all 0.3s ease;
}

.secondary-power-box:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(74, 144, 226, 0.8);
}

/* Responsive adjustments for secondary power box */
@media screen and (max-width: 768px) {
    .secondary-power-box {
        height: 60px;
        font-size: 0.7em;
    }
}

/* The visual resize mark is anchored to the profile edge itself. Keep this
   final rule after the seat-specific layout rules so it cannot drift when a
   panel is rotated or resized. */
.player-profile > .resize-handle {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
}

.player-profile > .resize-handle::after {
    top: auto !important;
    right: 4px !important;
    bottom: 4px !important;
    left: auto !important;
}

/* Summoning choreography: activation is a physical expansion and contained
   vibration.  Only the point where the rarity music begins gets the fast beat. */
#magic-ball.summoning {
    animation:
        summonActivation 900ms cubic-bezier(0.16, 0.84, 0.22, 1) both,
        summonVibration 118ms steps(2, end) 900ms infinite;
}

#magic-ball.summoning-climax:not(.rarity-pulse) {
    animation: summonChargedVibration 128ms steps(2, end) infinite;
}

#magic-ball.rarity-pulse {
    animation: rarityMusicPulse 300ms cubic-bezier(0.28, 0.06, 0.22, 1) infinite alternate;
}

#magic-ball.summoning #summon-energy-overlay {
    animation: summonActivationEnergy 900ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

#magic-ball.rarity-pulse #summon-energy-overlay {
    animation: rarityEnergySurge 300ms ease-in-out infinite alternate;
}

/* Carry a little of the physical shake into the music phase, then settle it
   gradually so the motion has a natural release instead of an abrupt stop. */
#magic-ball-scene.vibration-fade {
    animation: sceneVibrationFade 1.25s cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

@keyframes summonActivation {
    0% { transform: translate(-50%, -50%) scale(1); }
    20% { transform: translate(-54.6%, -45.4%) scale(1.08); }
    34% { transform: translate(-45.2%, -53.8%) scale(1.13); }
    48% { transform: translate(-53.7%, -46.1%) scale(1.18); }
    62% { transform: translate(-46.3%, -53.5%) scale(1.21); }
    76% { transform: translate(-52.1%, -47.8%) scale(1.22); }
    100% { transform: translate(-50%, -50%) scale(1.18); }
}

@keyframes summonChargedHold {
    from { transform: translate(-51.5%, -48.5%) scale(1.18); }
    to { transform: translate(-48.5%, -51.5%) scale(1.2); }
}

@keyframes summonVibration {
    0% { transform: translate(-51.7%, -48.4%) scale(1.18); }
    25% { transform: translate(-48.1%, -51.6%) scale(1.19); }
    50% { transform: translate(-51.3%, -51.9%) scale(1.18); }
    75% { transform: translate(-48.5%, -48.2%) scale(1.2); }
    100% { transform: translate(-50.9%, -49.1%) scale(1.19); }
}

@keyframes summonChargedVibration {
    0% { transform: translate(-52%, -48%) scale(1.19); }
    25% { transform: translate(-48%, -52%) scale(1.21); }
    50% { transform: translate(-51.6%, -51.8%) scale(1.2); }
    75% { transform: translate(-48.4%, -48.2%) scale(1.22); }
    100% { transform: translate(-50.8%, -49.2%) scale(1.2); }
}

@keyframes sceneVibrationFade {
    0% { transform: translate3d(-5px, 4px, 0) rotate(-0.7deg); }
    12% { transform: translate3d(5px, -4px, 0) rotate(0.65deg); }
    25% { transform: translate3d(-4px, -3px, 0) rotate(-0.5deg); }
    42% { transform: translate3d(3px, 3px, 0) rotate(0.36deg); }
    62% { transform: translate3d(-2px, 2px, 0) rotate(-0.2deg); }
    82% { transform: translate3d(1px, -1px, 0) rotate(0.08deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes rarityMusicPulse {
    from { transform: translate(-50%, -50%) scale(1.1); }
    to { transform: translate(-50%, -50%) scale(1.23); }
}

@keyframes summonActivationEnergy {
    0% { opacity: 0.06; transform: scale(0.72) rotate(-18deg); }
    62% { opacity: 0.42; transform: scale(1.04) rotate(7deg); }
    100% { opacity: 0.28; transform: scale(0.98) rotate(12deg); }
}

@keyframes rarityEnergySurge {
    from { opacity: 0.26; transform: scale(0.94) rotate(-8deg); }
    to { opacity: 0.56; transform: scale(1.08) rotate(8deg); }
}

/* Compact the supporting phone controls so the four-player table keeps its
   breathing room without hiding any utility panel. */
@media screen and (max-width: 767px) {
    .voice-control-button,
    .voice-feedback-toggle-button {
        left: max(8px, env(safe-area-inset-left));
        padding: 6px 9px;
        border-radius: 5px;
        font-size: 0.76rem;
    }

    .voice-control-button {
        top: max(8px, env(safe-area-inset-top));
    }

    .voice-feedback-toggle-button {
        top: max(48px, calc(env(safe-area-inset-top) + 40px));
    }

    #voice-feedback {
        top: max(86px, calc(env(safe-area-inset-top) + 78px));
        left: max(8px, env(safe-area-inset-left));
        max-width: min(180px, calc(100vw - 16px));
        padding: 7px;
        font-size: 0.72rem;
    }

    #permanent-ownership-panel {
        top: max(8px, env(safe-area-inset-top));
        right: max(8px, env(safe-area-inset-right));
        width: min(142px, calc(100vw - 20px));
        min-width: min(120px, calc(100vw - 20px));
        padding: 6px;
        border-radius: 7px;
        font-size: 0.66rem;
    }

    #permanent-ownership-panel h3 {
        margin-bottom: 4px;
        padding-bottom: 4px;
        font-size: 0.78rem;
    }

    #permanent-ownership-panel .ownership-item {
        margin-bottom: 3px;
        padding: 3px;
    }

    #permanent-ownership-panel .power-name,
    #permanent-ownership-panel .owner-name {
        min-width: 0;
        font-size: 0.64rem;
    }
}