/* ==========================================================================
   slots.irish - Global Styles
   Design System: "The Digital Concierge"
   ========================================================================== */

/* --- Base Typography --- */
body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, .headline {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* --- Material Symbols Configuration --- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

/* --- Glassmorphism Navigation --- */
.glass-nav {
    background: rgba(248, 249, 250, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* --- Gradient Utilities --- */
.cta-gradient,
.primary-gradient,
.content-gradient {
    background: linear-gradient(135deg, #006e26 0%, #09de57 100%);
}

.hero-gradient {
    background: linear-gradient(0deg, rgba(25, 28, 29, 0.9) 0%, rgba(25, 28, 29, 0) 60%);
}

/* --- Ambient Shadow (Tinted, per Design System) --- */
.ambient-shadow {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- Ghost Border (per Design System, outline_variant at 15% opacity) --- */
.ghost-border {
    border: 1px solid rgba(186, 203, 182, 0.15);
}

/* --- Mega Menu --- */
.mega-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s ease;
}

.group:hover .mega-menu,
.mega-menu-trigger:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: block;
}

/* --- Card Hover Lift --- */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: scale(1.02);
    box-shadow: 0 24px 40px rgba(25, 28, 29, 0.06);
}

/* --- Filled Icon Utility --- */
.icon-filled {
    font-variation-settings: 'FILL' 1;
}

/* --- Tables --- */
table {
    border-collapse: collapse;
    width: 100%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    overflow: hidden;
}

table thead {
    background: #006e26 !important;
    border-bottom: none;
}

table th {
    padding: 0.875rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff !important;
    text-align: left;
    border-bottom: none;
}

table td {
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
    border-bottom: 1px solid #e8ede8;
}

table tbody tr:hover {
    background: #f8faf8;
}

table tbody tr:last-child td {
    border-bottom: none;
}

/* --- Stat Cards (Best Slots page) --- */
.stat-card {
    background: linear-gradient(145deg, #ffffff 0%, #f3f4f5 100%);
}

/* --- FAQ Styling --- */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }

/* --- Smooth Scroll --- */
html { scroll-behavior: smooth; }

/* --- Footer border override --- */
.border-slate-100 {
    --tw-border-opacity: 1;
    border-color: rgb(227 230 233);
}

/* ==========================================================================
   Game Page — Ring Stats & Hero
   ========================================================================== */

/* Circle Ring System */
.ring-wrap { display: flex; flex-direction: column; align-items: center; }
.ring-box { position: relative; width: 110px; height: 110px; }
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: #e7e8e9; stroke-width: 5; }
.ring-progress {
    fill: none; stroke: #006e26; stroke-width: 5; stroke-linecap: round;
    stroke-dasharray: 276.46; stroke-dashoffset: 276.46;
}
.ring-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-icon { color: #006e26; font-size: 20px; margin-bottom: 2px; }
.ring-val {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800; font-size: 16px; color: #191c1d; line-height: 1.15; opacity: 0;
}
.ring-label {
    font-family: 'Inter', sans-serif; font-size: 11px; color: #575f6d;
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-top: 8px;
}

/* Ring fill animations */
/* circumference = 2 * PI * 44 = 276.46 */
/* offset = 276.46 * (1 - percentage) */

/* RTP: 96.71% → offset = 276.46 * 0.0329 = 9.10 */
@keyframes fillRTP { 0% { stroke-dashoffset: 276.46; } 100% { stroke-dashoffset: 9.10; } }
/* Volatility High: 75% → offset = 276.46 * 0.25 = 69.12 */
@keyframes fillVol { 0% { stroke-dashoffset: 276.46; } 100% { stroke-dashoffset: 69.12; } }
/* Max Win: 2100x mapped to ~42% → offset = 276.46 * 0.58 = 160.35 */
@keyframes fillWin { 0% { stroke-dashoffset: 276.46; } 100% { stroke-dashoffset: 160.35; } }
/* Paylines: 10 mapped to ~20% → offset = 276.46 * 0.80 = 221.17 */
@keyframes fillPay { 0% { stroke-dashoffset: 276.46; } 100% { stroke-dashoffset: 221.17; } }
/* Value fade in */
@keyframes fadeVal { 0% { opacity: 0; } 100% { opacity: 1; } }

/* Generic fills for different percentage levels */
@keyframes fillRing90 { 0% { stroke-dashoffset: 276.46; } 100% { stroke-dashoffset: 27.65; } }
@keyframes fillRing75 { 0% { stroke-dashoffset: 276.46; } 100% { stroke-dashoffset: 69.12; } }
@keyframes fillRing50 { 0% { stroke-dashoffset: 276.46; } 100% { stroke-dashoffset: 138.23; } }
@keyframes fillRing25 { 0% { stroke-dashoffset: 276.46; } 100% { stroke-dashoffset: 207.35; } }

/* Specific ring classes used by Stitch design */
.ring-rtp { animation: fillRTP 1.5s cubic-bezier(0.4,0,0.2,1) 0.4s forwards; }
.ring-vol { animation: fillVol 1.5s cubic-bezier(0.4,0,0.2,1) 0.6s forwards; }
.ring-win { animation: fillWin 1.5s cubic-bezier(0.4,0,0.2,1) 0.8s forwards; }
.ring-pay { animation: fillPay 1.5s cubic-bezier(0.4,0,0.2,1) 1.0s forwards; }

/* Value fade classes */
.val-rtp { animation: fadeVal 0.4s ease 1.4s forwards; }
.val-vol { animation: fadeVal 0.4s ease 1.6s forwards; }
.val-win { animation: fadeVal 0.4s ease 1.8s forwards; }
.val-pay { animation: fadeVal 0.4s ease 2.0s forwards; }

/* Generic fill/fade classes for other game pages */
.ring-fill-90 { animation: fillRing90 1.5s cubic-bezier(0.4,0,0.2,1) 0.4s forwards; }
.ring-fill-75 { animation: fillRing75 1.5s cubic-bezier(0.4,0,0.2,1) 0.6s forwards; }
.ring-fill-50 { animation: fillRing50 1.5s cubic-bezier(0.4,0,0.2,1) 0.8s forwards; }
.ring-fill-25 { animation: fillRing25 1.5s cubic-bezier(0.4,0,0.2,1) 1.0s forwards; }
.val-fade-1 { animation: fadeVal 0.4s ease 1.4s forwards; }
.val-fade-2 { animation: fadeVal 0.4s ease 1.6s forwards; }
.val-fade-3 { animation: fadeVal 0.4s ease 1.8s forwards; }
.val-fade-4 { animation: fadeVal 0.4s ease 2.0s forwards; }

/* At a Glance Section */
.at-glance-section {
    background: #f8f9fa; border-radius: 1rem; padding: 1.5rem 1rem;
    border: 1px solid rgba(186,203,182,0.2);
}
.info-card-green {
    background: linear-gradient(135deg, #e8f5e9, #f1f8f2);
    border: 1px solid rgba(0,110,38,0.1); border-radius: 1rem;
    padding: 1.25rem; text-align: center;
}

/* Prose sections */
.prose-section h2 {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
    font-size: 1.75rem; letter-spacing: -0.02em; margin-bottom: 1rem; color: #191c1d;
}
.prose-section h3 {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
    font-size: 1.25rem; margin-bottom: 0.5rem; color: #191c1d;
}
.prose-section p {
    color: #3c4b3b; line-height: 1.75; margin-bottom: 1rem; font-size: 0.9375rem;
}
.prose-section strong { color: #191c1d; }

/* Hero Banner — game page */
.hero-banner {
    position: relative; border-radius: 1.5rem; overflow: hidden; aspect-ratio: 21/9;
    background: linear-gradient(135deg, #004d1a 0%, #00802b 40%, #006e26 70%, #003d15 100%);
    background-size: cover; background-position: center;
}
.hero-banner::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.35) 100%);
    z-index: 1;
}
.hero-content {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: center; padding: 2rem 2.5rem; z-index: 2;
}
/* Legacy alias */
.game-hero-banner { position: relative; border-radius: 1.5rem; overflow: hidden; aspect-ratio: 21/9; background-size: cover; background-position: center; }
.game-hero-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.1) 100%); z-index: 1; }
.game-hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 2rem 2.5rem; z-index: 2; }

/* Game Image Card */
.game-img-card {
    border-radius: 1rem; overflow: hidden; position: relative;
    box-shadow: none !important;
}
.game-img-card img {
    width: 100%; height: auto; display: block; border-radius: 1rem;
}
.game-img-card .img-caption,
.game-img-card .img-placeholder {
    font-size: 0.75rem; color: #575f6d; text-align: center;
    font-style: italic; margin-top: 0.5rem;
}
/* Placeholder cards (when no image available) */
.game-img-card .img-placeholder {
    width: 100%; aspect-ratio: 16/10; display: flex; align-items: center;
    justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700; font-size: 0.8rem; color: rgba(255,255,255,0.8);
    text-align: center; padding: 1rem; margin-top: 0;
}