/* Red Baron Casino Game - custom styles */
:root {
    --rb-red: #dc2626;
    --rb-gold: #f59e0b;
    --rb-navy: #0a0e1a;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--rb-navy);
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, .font-display {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.02em;
}

/* Logo keeps its aspect ratio: width/height attrs reserve space (CLS), CSS height scales it */
header img[src="/logo.png"] {
    width: auto;
}

/* Tailwind utility absent from the prod build (added after the build) */
.max-w-md { max-width: 28rem; }

.glow {
    box-shadow: 0 0 25px rgba(220, 38, 38, 0.55);
}

.glow-gold {
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.45);
}

.float {
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.plane-trail {
    background: linear-gradient(90deg, transparent, rgba(220,38,38,.35), transparent);
    height: 2px;
}

/* Hero illustration — applied site-wide to the first section of every page */
main > section:first-of-type {
    position: relative;
}
main > section:first-of-type::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/images/hero_plane.svg') no-repeat center / cover;
    opacity: 0.28;
    pointer-events: none;
}
main > section:first-of-type > .container {
    position: relative;
    z-index: 10;
}

.card-hover {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(220,38,38,.25);
    border-color: var(--rb-red);
}

.table-striped tr:nth-child(even) { background: rgba(255,255,255,.04); }

.burger-menu { display: none; flex-direction: column; cursor: pointer; }
@media (max-width: 1023px) {
    .burger-menu { display: flex; }
}

/* FAQ accordion */
details.faq summary { cursor: pointer; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
    content: '+';
    float: right;
    color: var(--rb-gold);
    font-size: 1.4rem;
    line-height: 1;
}
details.faq[open] summary::after { content: '−'; }

/* Crash simulator */
#simCanvas {
    width: 100%;
    height: 260px;
    background: linear-gradient(180deg, #101a33 0%, #0a0e1a 100%);
    border-radius: 0.75rem;
    border: 1px solid rgba(220,38,38,.35);
}
.sim-multiplier {
    font-family: 'Oswald', sans-serif;
    font-variant-numeric: tabular-nums;
}

/* Language switcher */
.lang-switch a.active { color: var(--rb-gold); font-weight: 700; }

/* Stat bars */
.stat-bar {
    height: 10px;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--rb-red), var(--rb-gold));
}