html,body,
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100vh;
background: radial-gradient(circle at top left, #ffdaed 0%, transparent 80%),
radial-gradient(circle at top right, #ffdaed 0%, transparent 80%),
radial-gradient(circle at bottom left, #ffdaed 0%, transparent 80%),
radial-gradient(circle at bottom right, #ffdaed 0%, transparent 80%);
}
.title{
font-size: 1.2rem;
color: #333;
background: linear-gradient(to right, rgba(255, 176, 176, 0.523) 0%, rgba(255, 192, 203, 0.518) 100%);
padding: 10px;
border-radius: 999px;
width: 95%;
text-align: center;
border: 2px solid hsl(0, 100%, 86%);
box-shadow: inset 0 0 10px rgba(255, 254, 254, 0.1);
margin-bottom: 1rem;
}
.res-q{
display: flex;
width: 80%;
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 1rem;
border: 2px solid white;
box-shadow: inset 0 0 10px rgb(255, 254, 254),
0 0 10px rgb(255, 254, 254);
background: linear-gradient(to left, rgba(255, 0, 0, 0.408) 2%, rgba(255, 192, 203, 0.562) 100%);
padding: 10px;
border-radius: 50px;
}
.res-q input{
width: 90%;
padding: 8px;
border-radius: 999px;
border: 2px solid hsl(0, 100%, 86%);
box-shadow: inset 0 0 10px rgba(255, 254, 254, 0.1);
}
.res-q input:focus{
outline: none;
border-color: hsl(0, 100%, 76%);
box-shadow: inset 0 0 10px rgba(255, 254, 254, 0.3);
}
.res-q .roll-btn{
padding: 8px 20px;
border-radius: 999px;
border: 2px solid hsl(0, 0%, 90%);
background: linear-gradient(to right, rgba(255, 0, 0, 0.408) 2%, rgba(255, 192, 203, 0.562) 100%);
box-shadow: inset 0 0 10px rgb(255, 255, 255);
cursor: pointer;
transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
}
.res-q .roll-btn:hover{
background: linear-gradient(to right, rgba(255, 0, 0, 0.608) 2%, rgba(255, 192, 203, 0.762) 100%);
transform: scale(1.05);
}
.results-container{
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 95%;
background: radial-gradient(
circle at 30% 20%,
rgb(245, 182, 150) 0%, /* Neon Pink Center Burst */
rgb(236, 55, 0) 45%, /* Vibrant Crimson Red */
rgb(254, 243, 245) 100% /* Deep Rich Maroon/Burgundy Edge */
);
padding: 10px;
border-radius: 10px;
box-shadow: inset 0 0 10px rgb(255, 254, 254);
border: 2px solid hsl(0, 100%, 86%);
}
.results-container.hidden{
display: none;
}
.results-container img{
width: 120px;
object-fit: contain;
}
.results-container strong{
border: 2px solid white;
padding: 4px 20px;
min-width: 200px;
min-height: 25px;
text-align: center;
border-radius: 999px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.408) 2%,
rgba(255, 192, 203, 0.562) 100%);
box-shadow: inset 0 0 10px rgb(255, 255, 255),
0 0 10px rgba(255, 255, 255);
}
.loading{
animation: loadingAnimation 1s infinite;
}
/* shimmer loading animatio */
@keyframes loadingAnimation {
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
}
/* ==========================================
FCC RESULT DIALOG
========================================== */
#fcc-result-dialog {
position: fixed;
inset: 0;
z-index: 999999;
font-family: inherit;
}
.fcc-result-dialog-backdrop {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: fccDialogFade 0.2s ease;
}
.fcc-result-dialog-box {
width: min(420px, 100%);
padding: 30px 25px 25px;
text-align: center;
background: linear-gradient(
145deg,
#ffffff,
#f5f7fb
);
border-radius: 22px;
box-shadow:
0 25px 70px rgba(0, 0, 0, 0.35),
0 5px 20px rgba(0, 0, 0, 0.15);
animation: fccDialogPop 0.25s ease;
}
.fcc-result-dialog-icon {
width: 65px;
height: 65px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(
135deg,
#ff4d4d,
#ff7b54
);
color: #ffffff;
font-size: 30px;
font-weight: 900;
box-shadow:
0 8px 25px rgba(255, 77, 77, 0.3);
}
.fcc-result-dialog-box h2 {
margin: 0 0 10px;
color: #172033;
font-size: 23px;
font-weight: 800;
}
.fcc-result-dialog-box p {
margin: 0 auto 23px;
max-width: 340px;
color: #5d6678;
font-size: 15px;
line-height: 1.6;
}
.fcc-result-dialog-btn {
width: 100%;
min-height: 46px;
padding: 11px 20px;
border: none;
border-radius: 13px;
background: linear-gradient(
135deg,
#4f7cff,
#7048ff
);
color: #ffffff;
font-size: 15px;
font-weight: 700;
cursor: pointer;
box-shadow:
0 7px 18px rgba(79, 124, 255, 0.3);
transition:
transform 0.15s ease,
box-shadow 0.15s ease;
}
.fcc-result-dialog-btn:hover {
transform: translateY(-2px);
box-shadow:
0 10px 25px rgba(79, 124, 255, 0.4);
}
.fcc-result-dialog-btn:active {
transform: translateY(0);
}
@keyframes fccDialogFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fccDialogPop {
from {
opacity: 0;
transform: scale(0.85) translateY(15px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* ==========================================
RESULT LOADING
========================================== */
.results-container.loading-state {
position: relative;
}
.results-container.loading-state::after {
content: "";
position: absolute;
width: 35px;
height: 35px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 4px solid rgba(0, 0, 0, 0.12);
border-top-color: #4f7cff;
border-radius: 50%;
animation: fccSpin 0.8s linear infinite;
}
.results-container.loading-state img,
.results-container.loading-state strong {
opacity: 0.35;
}
@keyframes fccSpin {
to {
transform:
translate(-50%, -50%)
rotate(360deg);
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 480px) {
.fcc-result-dialog-backdrop {
padding: 15px;
}
.fcc-result-dialog-box {
padding: 27px 20px 20px;
border-radius: 19px;
}
.fcc-result-dialog-icon {
width: 60px;
height: 60px;
font-size: 28px;
}
.fcc-result-dialog-box h2 {
font-size: 21px;
}
}