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

html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

#app {
    height: 100svh;
    width: 100svw;
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

main {
    height: 100%;
    width: 100%;
}

body {
    background-color: var(--primaryDarkColor);
    color: white;
}

dialog {
    background-color: var(--dialogColor);
    color: white;
}

ul {
    list-style: none;
}

svg {
    height: 20px;
    width: 20px;
}

[l] {
    height: 32px;
    width: 32px;
}

/* Sparkle effect (used by Component/Common/Sparkle.razor) */
.sparkle-host {
    display: contents;
}

.sparkle-host.sparkling img {
    animation: shiny-wiggle 1.5s ease-in-out;
}

.sparkle {
    position: absolute;
    pointer-events: none;
    color: gold;
    font-size: var(--sparkle-size, 1.8rem);
    text-shadow: 0 0 10px rgba(255, 215, 0, .9), 0 0 20px rgba(255, 255, 255, .6);
    animation: sparkle-burst 1.5s ease-out forwards;
    opacity: 0;
}

.sparkle-0 { top: 12%; left: 12%; animation-delay: 0ms; }
.sparkle-1 { top: 18%; right: 14%; animation-delay: 80ms; }
.sparkle-2 { top: 45%; left: 6%; animation-delay: 160ms; }
.sparkle-3 { top: 50%; right: 8%; animation-delay: 240ms; }
.sparkle-4 { bottom: 18%; left: 18%; animation-delay: 320ms; }
.sparkle-5 { bottom: 22%; right: 22%; animation-delay: 400ms; }
.sparkle-6 { top: 30%; left: 45%; animation-delay: 480ms; }
.sparkle-7 { bottom: 40%; left: 55%; animation-delay: 560ms; }

@keyframes shiny-wiggle {
    0%   { transform: scale(1) rotate(0deg); filter: brightness(1); }
    15%  { transform: scale(1.08) rotate(-6deg); filter: brightness(1.3) drop-shadow(0 0 12px gold); }
    30%  { transform: scale(1.12) rotate(6deg); filter: brightness(1.4) drop-shadow(0 0 14px gold); }
    50%  { transform: scale(1.1) rotate(-4deg); filter: brightness(1.4) drop-shadow(0 0 16px gold); }
    70%  { transform: scale(1.08) rotate(4deg); filter: brightness(1.3) drop-shadow(0 0 12px gold); }
    85%  { transform: scale(1.04) rotate(-2deg); filter: brightness(1.15) drop-shadow(0 0 6px gold); }
    100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

@keyframes sparkle-burst {
    0%   { opacity: 0; transform: scale(0) rotate(0deg); }
    25%  { opacity: 1; transform: scale(1.4) rotate(180deg); }
    60%  { opacity: 1; transform: scale(1) rotate(300deg); }
    100% { opacity: 0; transform: scale(0.3) rotate(540deg); }
}