:root{--color-bg:#0E0E10;--color-surface:#1A1A1C;--color-primary:#E25822;--color-primary-hover:#FF5A36;--color-secondary:#CDAA5C;--color-accent:#00A79D;--color-highlight:#FF5A36;--color-text-main:#E2E2E2;--color-text-muted:#9CA3AF;--color-border-light:#292929;--gradient-title:linear-gradient(90deg,#E25822,#CDAA5C,#00A79D);--bg-dark:var(--color-bg);--surface:var(--color-surface);--primary:var(--color-primary);--accent:var(--color-secondary);--highlight:var(--color-highlight);--text-main:var(--color-text-main);--text-muted:var(--color-text-muted);--border-light:var(--color-border-light);--danger:#FF5252}
.about-wrap{row-gap:2rem}
.about-media{background:none;padding:0;border-radius:16px}
.about-media .about-img{display:block;width:100%;height:auto;border-radius:14px;background:transparent}
.about-card{background:rgba(20,20,25,0.45);border:none;border-radius:20px;padding:2.25rem}
.section-lead{font-size:1.25rem;line-height:1.6;color:var(--text-main)}
.about-points{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:.75rem}
.about-points li{display:flex;align-items:center;gap:.75rem;color:var(--text-main)}
.about-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--primary);border-radius:8px;color:var(--primary);background:rgba(255,255,255,0.03)}
.about-icon svg{width:18px;height:18px;stroke:var(--primary);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media screen and (min-width: 1024px){
  .about-points{grid-template-columns:1fr 1fr}
  .about-media{max-width:520px;margin-left:auto;margin-right:auto}
  .about-card{padding:2rem}
}

/* Media frame and unique clipped imagery */
.media-frame{background:none;padding:0;border-radius:16px}
.media-frame img{background:transparent;border-radius:14px}
.about-img{border-radius:20px;box-shadow:0 0 20px rgba(255,150,50,0.4), 0 0 40px rgba(0,167,157,0.2); border:2px solid transparent; border-image:linear-gradient(135deg,#FF6A00,#FFD166,#00A79D) 1; transition:transform .3s ease}
.about-img:hover{transform:translateY(-4px)}
.clip-notch{clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.clip-nordic{clip-path:polygon(20px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 24px),calc(100% - 28px) 100%,12px 100%,0 calc(100% - 12px),0 20px)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(12,12,14,0.85);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,0.05)}
.nav-container{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0}
.site-nav{display:flex;gap:1rem;align-items:center}
.site-nav a{color:var(--text-main);padding:0.5rem 0.75rem;border-radius:8px;transition:background .2s ease}
.site-nav a:hover{background:rgba(255,255,255,0.05)}
/* Nav underline hover */
.nav-link{position:relative}
.nav-link::after{content:"";display:block;height:2px;width:0;background:linear-gradient(90deg,#FF6A00,#FFD166);transition:width .3s ease}
.nav-link:hover::after{width:100%}
.header-cta{margin-left:1rem}
.nav-toggle{display:none;background:transparent;border:1px solid var(--border-light);color:var(--text-main);border-radius:8px;padding:0.5rem 0.75rem}

@media screen and (max-width: 768px){
  .site-nav{position:fixed;inset:56px 0 auto 0;background:rgba(17,24,39,0.98);backdrop-filter:blur(8px);flex-direction:column;gap:0;border-top:1px solid var(--border-light);padding:0.75rem;display:none}
  .site-header[data-open="true"] .site-nav{display:flex}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .header-cta{display:none}
}
/* Global Styles & Font Initialization */
:root{
    /* Runic Flame design tokens */
    --color-bg:#0E0E10;             /* Obsidian background */
    --color-surface:#1A1A1C;        /* Surface panels */
    --color-primary:#E25822;        /* Dragon Flame orange */
    --color-primary-hover:#FF5A36;  /* Ember hover */
    --color-secondary:#CDAA5C;      /* Rune gold */
    --color-accent:#00A79D;         /* Gemstone teal */
    --color-highlight:#FF5A36;      /* Ember red */
    --color-text-main:#E2E2E2;
    --color-text-muted:#9CA3AF;
    --color-border-light:#292929;
    --gradient-title:linear-gradient(90deg,#E25822,#CDAA5C,#00A79D);

    /* Backwards-compat mapping for existing variables */
    --bg-dark:var(--color-bg);
    --surface:var(--color-surface);
    --primary:var(--color-primary);
    --accent:var(--color-secondary);
    --highlight:var(--color-highlight);
    --text-main:var(--color-text-main);
    --text-muted:var(--color-text-muted);
    --border-light:var(--color-border-light);
    --danger:#FF5252;
}
html{scroll-behavior:smooth;}
body {font-family:'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif; background-color:var(--bg-dark); color:var(--text-main); line-height:1.6;}

/* Material Symbols Initialization */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Custom Colors & Bulma Overrides */
.has-text-primary { color: var(--primary) !important; }

/* Button global styles */
.button { text-transform: none; letter-spacing: 0.2px; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); }

.button.is-primary { background:linear-gradient(90deg,var(--color-primary),var(--color-primary-hover)); border:2px solid transparent; color:#0B0B0B; border-radius:8px; font-weight:600; box-shadow:none; }
.button.is-primary:hover { box-shadow:0 0 12px var(--color-primary); transform:translateY(-1px); }
/* Pill primary variant */
.btn-primary{ border-radius:9999px !important; background:linear-gradient(90deg,#FF6A00,#FF9A3C) !important; box-shadow:0 0 12px rgba(255,106,0,0.4) !important; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 20px rgba(255,150,50,0.6) !important; }

.button.is-danger {
    background-color: var(--danger); /* danger */
    border-color: transparent;
    color: #0B0C10;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.button.is-danger:hover {
    background-color: #ff6b6b; /* slightly lighter */
    transform: translateY(-2px);
}

.button.is-link { background:transparent; border:1px solid var(--border-light); color:var(--text-main); border-radius:8px; }
.button.is-link:hover { background:rgba(255,255,255,0.04); }

.button.is-success {
    background-color: #4CAF50; /* Green for save selection */
    border-color: transparent;
    color: #F5F5F5;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.button.is-success:hover { background-color: #388E3C; transform: translateY(-1px); box-shadow: 0 0 12px rgba(56,142,60,0.45); }

.title, .subtitle { font-family:'Cinzel Decorative', serif; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; }
.title { background:var(--gradient-title); -webkit-background-clip:text; background-clip:text; color:transparent; }
.subtitle { color:var(--text-main); text-transform:none; letter-spacing:0.01em; font-weight:600; font-family:'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif; }

.title.is-1 { font-size:50px; line-height:1.1; }
.title.is-2 { font-size:32px; line-height:1.2; }

/* Header */
.custom-header { background-color:transparent; padding:1rem 0; }

.logo-link { display:flex; justify-content:center; align-items:center; gap:10px; color:var(--text-main); font-family:'Cinzel Decorative', serif; font-weight:700; letter-spacing:1.5px; }
.logo-link:hover{ color: var(--primary); }
.logo-img { display:inline-block; width:24px; height:24px; object-fit:contain; }

/* Hero Section */
.custom-hero-section { position:relative; display:flex; align-items:center; justify-content:center; min-height:80vh; background: linear-gradient(270deg, #0C2024, #0A0B0F, #1E1B18); background-size:400% 400%; animation: heroAurora 20s ease infinite; }
.custom-hero-section::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(14,14,16,0.6), rgba(14,14,16,0.6)); clip-path:polygon(0 0,100% 0,95% 100%,5% 100%); }
@keyframes heroAurora { 0% { background-position:0% 50%; } 100% { background-position:100% 50%; } }

.aurora-beam{background:var(--gradient-title);height:3px;border-radius:2px;margin:0.75rem auto 2rem auto;max-width:240px;box-shadow:0 0 12px rgba(226,88,34,0.35)}

/* Plain hero variant for legal pages (no background image) */
.hero-plain {
    background: var(--bg-dark) !important;
    background-image: none !important;
    min-height: auto;
}

/* Tighten hero spacing on legal pages */
.hero-plain .hero-body { padding: 2rem 0; }
.hero-plain .hero-body .title { margin-bottom: 0.5rem; }
.hero-plain .hero-body .subtitle { margin-top: 0.25rem; }

/* Section Backgrounds */
.custom-section-dark { background-color: var(--bg-dark); padding: 4rem 0; }

.custom-section-light { background-color: var(--surface); padding: 4rem 0; }
@media screen and (min-width: 1024px){
  .custom-section-dark, .custom-section-light{ padding:5rem 0 }
}
@media screen and (max-width: 768px){
  .custom-section-dark, .custom-section-light{ padding:3rem 0 }
}

/* About Section */
.custom-section-dark .is-rounded {
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Game Showcase */
.custom-game-card { background: var(--surface); border:1px solid var(--border-light); border-radius:24px; overflow:hidden; transition: all .3s ease; height:100%; display:flex; flex-direction:column; }
.custom-game-card:hover { transform: translateY(-4px) scale(1.02); box-shadow:0 8px 30px rgba(255,106,0,0.3); }

.custom-game-card .card-image{background-color:#0A0A0A;border-top-left-radius:24px;border-top-right-radius:24px;overflow:hidden}
.custom-game-card .card-image img {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    object-fit: contain;
    height: 100%;
    width: 100%;
}

.custom-game-card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to expand */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.custom-game-card .title,
.custom-game-card .content {
    color: var(--text-main); /* Light text for dark card */
}

.custom-game-card .button {
    margin-top: 1rem;
}

/* Game card primary buttons → pill gradient + glow */
.custom-game-card .button.is-primary{
    width:100%;
    border-radius:9999px;
    background:linear-gradient(90deg,#FF6A00,#FF9A3C) !important;
    color:#0B0B0B;
    font-weight:700;
    box-shadow:0 0 12px rgba(255,106,0,0.4);
}
.custom-game-card .button.is-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 0 20px rgba(255,150,50,0.6);
}

.game-link {
    display: block;
    height: 100%;
}

.game-image { transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; }
.custom-game-card:hover .game-image { transform: scale(1.03); filter: brightness(1.05); box-shadow:0 0 25px rgba(255,150,50,0.3); }
.custom-game-card{border:2px solid transparent}
.custom-game-card:hover{border-image:linear-gradient(135deg,#FF6A00,#FFD166,#00A79D) 1}

/* Features & Benefits */
/* Refined Why-section */
.why-section{ background: rgba(17,17,20,0.6); border-radius:20px; padding:3rem 1.5rem; text-align:center }
.why-item{ display:flex; align-items:center; justify-content:flex-start; background:rgba(255,255,255,0.03); border-radius:16px; padding:1.5rem; margin-bottom:1.5rem; transition: background .3s ease }
.why-item:hover{ background:rgba(255,255,255,0.06) }
.why-icon{ font-size:2rem; color:#FF6A00; margin-right:1.25rem }
.section-title{ text-align:center }
.section-subtext{ color:#E5E7EB; line-height:1.6 }
.section-divider{ height:1px; width:100%; background:linear-gradient(90deg,#FF6A00,#00A79D); opacity:.35; margin-top:2.5rem }

/* Testimonials refined */
.testimonial-grid{ display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center }
.testimonial{ background:rgba(255,255,255,0.03); border-radius:16px; padding:1.5rem; margin:0.75rem; flex:1 1 280px; transition: transform .3s ease, background .3s ease }
.testimonial:hover{ background:rgba(255,255,255,0.06); transform:translateY(-3px) }
.testimonial-author{ font-weight:600; color:#FFD166; margin-bottom:.25rem }
.testimonial-location{ font-size:.9rem; color:#9CA3AF }
.testimonial-text{ font-size:1rem; color:#F3F4F6; line-height:1.6; margin-top:.75rem }

/* Support banner */
.support-banner{ text-align:center; padding:3rem 1rem; background: linear-gradient(90deg, rgba(255,106,0,0.1), rgba(0,167,157,0.1)); border-top:1px solid rgba(255,255,255,0.05); border-radius:20px; box-shadow:0 0 20px rgba(255,106,0,0.15); }
.support-banner p{ margin-bottom:1rem; color:var(--text-main); font-size:1.125rem }
.support-banner .btn-primary{ margin-top:.5rem }
.support-banner .support-icon{ margin-right:.5rem }

.custom-cta-button { border:2px solid transparent; }
.custom-cta-button:hover { border-color: var(--primary); background: var(--surface) !important; color: var(--text-main) !important; }

/* Disclaimer Block */
.custom-disclaimer-section { background-color: var(--bg-dark); padding: 3rem 0; }

.custom-disclaimer-box { background-color: var(--surface); border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.custom-disclaimer-box .title { color: var(--primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-disclaimer-box .material-symbols-outlined {
    color: var(--primary); /* icon */
    font-size: 2.5rem;
    margin-right: 10px;
}

.custom-disclaimer-box p {
    color: var(--text-main);
    margin-bottom: 0.8rem;
}

.custom-disclaimer-box a { color: var(--primary);
    text-decoration: underline;
    transition: color 0.3s ease;
}

@media (max-width:575px) {
    .custom-disclaimer-box a{
        font-size: 12px;
    }
}
.custom-disclaimer-box a:hover {
    color: #8ffcf6;
}

/* Footer */
.custom-footer { background-color:#000000; padding:3rem 0; color:var(--color-secondary); border-top:2px solid transparent; border-image: linear-gradient(90deg, #FF6A00, #00A79D) 1; position:relative }
.footer-org-logos::before{content:"";position:absolute;left:0;right:0;transform:translateY(-12px);height:1px;background:linear-gradient(90deg,#FF6A00,#00A79D);opacity:.25}

.custom-footer .logo-img {
    max-height: 50px;
}

.custom-footer .footer-links a {
    color: var(--color-secondary);
    margin: 0 0.75rem;
    transition: color 0.3s ease;
}

.custom-footer .footer-links a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.footer-org-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem; /* Spacing between logos */
    margin-top: 2rem;
}

.footer-org-logo {
    max-width: 130px; /* Adjusted width for 4 images */
    height: auto;
    object-fit: contain;
    filter: none; /* Ensure no grayscale */
}

.footer-18-plus-icon {
    max-width: 90px; /* Smaller size for 18+ icon */
    height: auto;
    vertical-align: middle;
    filter: brightness(0) invert(1) grayscale(100%);
}


/* Modals */
.modal-content.p-4 { padding: 1.5rem; backdrop-filter: blur(8px); }

.custom-modal-box {
    background-color: var(--surface);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
    color: var(--text-main);
    padding: 2.5rem;
}

.custom-modal-box .title,
.custom-modal-box .subtitle { color: var(--text-main); }

.modal-background {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Cookie consent switch styling */
.switch[type="checkbox"] {
    opacity: 0;
    position: absolute;
}

.switch[type="checkbox"] + label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding-left: 3.5rem; /* Space for the switch */
    line-height: 1.5rem; /* Align text vertically */
    color: var(--text-main);
}

.switch[type="checkbox"] + label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 2.5rem;
    height: 1rem;
    background-color: var(--text-muted); /* Grey for off state */
    border-radius: 0.5rem;
    transition: background-color 0.3s;
}

.switch[type="checkbox"] + label::after {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: 0.35rem;
    width: 0.8rem;
    height: 0.8rem;
    background-color: var(--text-main);
    border-radius: 50%;
    transition: transform 0.3s;
}

.switch[type="checkbox"]:checked + label::before {
    background-color: var(--primary); /* on state */
}

/* Intersection Observer fade utility */
.io-fade{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease;}
.io-fade.in-view{opacity:1;transform:none;}

.switch[type="checkbox"]:checked + label::after {
    transform: translateX(1.5rem);
}

.switch[type="checkbox"]:disabled + label {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Game Modal */
.game-modal-content {
    width: 90%;
    max-width: 1200px;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-iframe-container {
    width: 100%;
    height: 100%;
    padding: 0; /* Remove padding from Bulma box */
    border-radius: 8px;
    overflow: hidden;
    background-color: #0A0A0A; /* Dark background for iframe container */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9);
}

#game-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.modal-close {
    background-color: rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease;
}

.modal-close:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .title.is-1 {
        font-size: 2.5rem;
    }
    .title.is-2 {
        font-size: 2rem;
    }
    .custom-hero-section {
        min-height: 70vh;
    }
    .custom-modal-box {
        padding: 1.5rem;
    }
    .game-modal-content {
        width: 95%;
        height: 70vh;
    }
    .footer-org-logos {
        gap: 1rem;
    }
    .footer-org-logo {
        max-width: 100px;
    }
}/* Parent container styling */
.dataTrustFrame {
    padding-top: 3rem;    /* Top padding for the main content block */
    padding-right: 1.5rem; /* Right padding for the main content block */
    padding-left: 1.5rem;  /* Left padding for the main content block */
    /* Add any other base styles for this frame if needed, e.g., background-color */
    /* background-color: #1A1A1A; */ /* Example: if this frame has its own dark background */
}

/* Game grid spacing */
#game-showcase .columns.is-multiline.is-centered > .column{ padding:16px 20px }
/* Tablet typography adjustments */
@media screen and (min-width: 769px) and (max-width: 1023px) {
    .title.is-1 {
        font-size: 3rem;
    }
    .title.is-2 {
        font-size: 2.25rem;
    }
}
/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Heading styles within .dataTrustFrame */
.dataTrustFrame h1 {
    font-size: 2.2rem;       /* Moderate size for main heading */
    font-weight: 700;        /* Bold font weight */
    color: #F5F5F5;          /* Light text color for dark background */
    margin-bottom: 1.5rem;   /* Space below the heading */
    line-height: 1.2;        /* Line height for readability */
}

.dataTrustFrame h2 {
    font-size: 1.8rem;       /* Slightly smaller than h1 */
    font-weight: 700;
    color: #F5F5F5;
    margin-bottom: 1.2rem;
    line-height: 1.3;
}

.dataTrustFrame h3 {
    font-size: 1.5rem;       /* Standard heading size */
    font-weight: 600;        /* Slightly less bold */
    color: #F5F5F5;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.dataTrustFrame h4 {
    font-size: 1.2rem;       /* Smaller heading */
    font-weight: 600;
    color: #F5F5F5;
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

.dataTrustFrame h5 {
    font-size: 1rem;         /* Smallest heading, often used for sub-sections or labels */
    font-weight: 600;
    color: #F5F5F5;
    margin-bottom: 0.6rem;
    line-height: 1.6;
}

/* Paragraph styles within .dataTrustFrame */
.dataTrustFrame p {
    font-size: 1rem;         /* Standard paragraph font size */
    color: #F5F5F5;          /* Light text color */
    margin-bottom: 1rem;     /* Space between paragraphs */
    line-height: 1.6;        /* Good line height for readability */
}

/* List styles within .dataTrustFrame */
.dataTrustFrame ul {
    list-style-type: disc;   /* Default disc bullet points */
    margin-left: 1.5rem;     /* Indent for bullet points */
    margin-bottom: 1rem;     /* Space below the list */
    color: #F5F5F5;          /* Ensure bullet points inherit color */
}

.dataTrustFrame ol {
    list-style-type: decimal; /* Default decimal numbering */
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    color: #F5F5F5;
}

.dataTrustFrame li {
    font-size: 1rem;         /* Standard list item font size */
    color: #F5F5F5;          /* Light text color */
    margin-bottom: 0.5rem;   /* Space between list items */
    line-height: 1.6;
}

/* Last list item or paragraph might not need bottom margin */
.dataTrustFrame p:last-child,
.dataTrustFrame ul:last-child,
.dataTrustFrame ol:last-child,
.dataTrustFrame li:last-child {
    margin-bottom: 0;
}.hero-body{
    padding: 0;
}
.container{
    padding: 0px 15px;
}
strong{
    color: var(--text-main);
}

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }