:root {
    /* palette sampled from logo.png: navy #103050 · crimson #802028
       · gold #F0E8A0 · steel #206080 */
    /* Shield zone — nav + hero */
    --cosmic-1: #0C2138;
    --cosmic-2: #12314F;
    --cosmic-3: #1C4E77;
    --cosmic-text: #EEF4F9;
    --cosmic-text-muted: #A9C0D2;
    --cosmic-border: rgba(216, 198, 126, .30);
    --cosmic-glass: rgba(255, 255, 255, .06);
    --cosmic-glass-border: rgba(255, 255, 255, .14);
    /* Shared accents */
    --gold: #D8C67E;
    --gold-bright: #F0E8A0;
    --gold-deep: #9C8636;
    --violet: #A5303C;
    --violet-deep: #85222E;
    --violet-light: #E39AA2;
    /* Surface zone — tool tiles, footer, policy pages */
    --surface-bg: #F6F8FB;
    --surface-card: #FFFFFF;
    --surface-border: #DCE5EE;
    --surface-text: #12314F;
    --surface-text-muted: #5D7185;
    --nav-height: 64px;
    --font-display: 'Cinzel', 'Georgia', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-padding-top: calc(var(--nav-height) + 16px);
}

body {
    background-color: var(--surface-bg);
    color: var(--surface-text);
    font-family: var(--font-sans);
    line-height: 1.6;
    padding-top: var(--nav-height);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--surface-text);
}

a,
a:hover {
    color: var(--violet-deep);
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: var(--violet);
    text-decoration: underline;
}

.text-muted {
    color: var(--surface-text-muted) !important;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

/* ---------- Header ---------- */

.navbar.bg-dark {
    background: linear-gradient(120deg, var(--cosmic-1) 0%, var(--cosmic-2) 100%) !important;
    min-height: var(--nav-height);
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--cosmic-border);
    flex-wrap: nowrap;
}

.navbar-dark .navbar-brand {
    font-family: var(--font-display);
    color: var(--gold-bright);
    letter-spacing: .03em;
    font-weight: 600;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--cosmic-text-muted);
    font-weight: 500;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--gold-bright);
}

.navbar-toggler {
    flex-shrink: 0;
}

.logo-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(216, 198, 126, .40);
    flex-shrink: 0;
    margin-right: .5rem;
}

@media (max-width: 400px) {
    .navbar-dark .navbar-brand {
        font-size: 1.05rem;
        letter-spacing: .01em;
        margin-right: .5rem;
    }
    .logo-icon {
        width: 26px;
        height: 26px;
    }
}

/* ---------- Hero / jumbotron (the "cosmic" zone) ---------- */

.jumbotron {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 3.5rem;
    margin-bottom: 0;
    color: var(--cosmic-text);
    background: radial-gradient(1.5px 1.5px at 10% 22%, rgba(255, 255, 255, .9), transparent 60%), radial-gradient(1.5px 1.5px at 80% 12%, rgba(255, 255, 255, .7), transparent 60%), radial-gradient(1px 1px at 40% 65%, rgba(255, 255, 255, .8), transparent 60%), radial-gradient(1.5px 1.5px at 65% 78%, rgba(255, 255, 255, .55), transparent 60%), radial-gradient(1px 1px at 92% 60%, rgba(255, 255, 255, .7), transparent 60%), radial-gradient(1px 1px at 22% 85%, rgba(255, 255, 255, .5), transparent 60%), radial-gradient(1px 1px at 55% 30%, rgba(255, 255, 255, .6), transparent 60%), radial-gradient(1.5px 1.5px at 15% 50%, rgba(255, 255, 255, .45), transparent 60%), radial-gradient(ellipse at top, var(--cosmic-3) 0%, var(--cosmic-2) 45%, var(--cosmic-1) 100%);
}

.jumbotron::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--violet-deep), var(--gold));
}

.jumbotron>* {
    position: relative;
    z-index: 1;
}

.jumbotron h1:not(.luckynumber),
.jumbotron .h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.6rem;
    letter-spacing: .01em;
    background: linear-gradient(90deg, var(--gold-bright), var(--violet-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.jumbotron h2,
.jumbotron h3,
.jumbotron h4,
.jumbotron h5,
.jumbotron h6 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--cosmic-text);
}

.jumbotron p {
    color: var(--cosmic-text-muted);
}

.jumbotron .alert p {
    color: inherit;
}

/* The pale wave divider doesn't read against a dark starfield; a slim gradient
   line (.jumbotron::after) replaces it as the hero/content seam. */

.wave {
    display: none;
}

/* ---------- Section heading above the tool tiles ---------- */

.section-heading {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--surface-text-muted);
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ---------- Tool tiles ---------- */

.tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 140px;
    padding: 1.75rem 1rem;
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: 14px;
    color: var(--surface-text);
    font-weight: 600;
    font-size: .95rem;
    text-align: center;
    box-shadow: 0 1px 2px rgba(18, 49, 79, .06);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.tool-card:hover,
.tool-card:focus {
    color: var(--surface-text);
    text-decoration: none;
    transform: translateY(-2px);
    border-color: var(--violet);
    box-shadow: 0 10px 24px rgba(165, 48, 60, .18);
}

.tool-card img {
    width: 42px;
    height: 42px;
}

.tool-card--active {
    background: linear-gradient(160deg, #EFF4F9 0%, #FBF6E6 100%);
    border-color: var(--gold);
    color: var(--violet-deep);
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: 8px;
    font-weight: 600;
}

.btn-primary,
.btn-success,
.form-control.btn-primary,
.form-control.btn-success {
    background: linear-gradient(90deg, var(--gold-deep), var(--gold));
    border-color: var(--gold-deep);
    color: #0C2138;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background: linear-gradient(90deg, var(--gold), var(--gold-bright));
    border-color: var(--gold);
    color: #0C2138;
    box-shadow: 0 0 0 .2rem rgba(232, 184, 75, .3);
}

.btn-outline-success {
    color: var(--cosmic-text);
    border-color: var(--cosmic-glass-border);
    background: var(--cosmic-glass);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background: rgba(216, 198, 126, .16);
    border-color: var(--gold);
    color: var(--gold-bright);
}

.btn-info {
    background: transparent;
    border-color: var(--gold);
    color: var(--gold-bright);
}

.btn-info:hover,
.btn-info:focus {
    background: rgba(216, 198, 126, .16);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}

.form-control:focus,
.custom-select:focus {
    box-shadow: 0 0 0 .2rem rgba(139, 92, 246, .3);
}

/* ---------- Glass panels inside the hero: alerts + ad cards ---------- */

.jumbotron .alert-success {
    background: var(--cosmic-glass);
    border: 1px solid var(--cosmic-glass-border);
    border-left: 3px solid var(--gold);
    color: var(--cosmic-text);
    backdrop-filter: blur(6px);
}

.jumbotron .alert-success a {
    color: var(--gold-bright);
    text-decoration: underline;
}

.jumbotron .card.bg-info {
    background: var(--cosmic-glass) !important;
    border: 1px solid var(--cosmic-glass-border);
    color: var(--cosmic-text) !important;
    backdrop-filter: blur(6px);
}

.jumbotron .card.bg-info .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--cosmic-glass-border);
    color: var(--gold-bright);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.jumbotron .card.bg-info .card-title,
.jumbotron .card.bg-info .card-title a {
    color: var(--cosmic-text) !important;
}

.jumbotron .card.bg-info .card-text {
    color: var(--cosmic-text-muted) !important;
}

.card {
    border-radius: 12px;
}

/* ---------- Forms ---------- */

.form-control,
.custom-select {
    border-color: var(--surface-border);
    border-radius: 8px;
    color: var(--surface-text);
}

.jumbotron .form-control,
.jumbotron .custom-select {
    background-color: rgba(255, 255, 255, .92);
    border-color: var(--cosmic-glass-border);
    color: var(--surface-text);
}

.form-control::placeholder {
    color: var(--surface-text-muted);
}

/* ---------- Icon colour filters. Source SVGs are solid black. ---------- */

.filter-green {
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}

.filter-dark-green {
    /* Repurposed as the tool-tile icon tint: deep violet, matching the light surface zone. */
    filter: invert(19%) sepia(53%) saturate(1723%) hue-rotate(246deg) brightness(87%) contrast(93%);
}

.filter-white {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(244deg) brightness(108%) contrast(97%);
}

.sign {
    width: 150px;
    height: 150px;
    opacity: .9;
    filter: drop-shadow(0 0 14px rgba(232, 184, 75, .45));
}

.sign-icon {
    width: 40px;
    height: 40px;
    background-color: var(--violet-deep);
    box-shadow: 0 0 0 2px rgba(232, 184, 75, .4);
    padding: 3px;
    border-radius: 5px;
    margin-right: 5px;
}

.symbol {
    width: 100px;
    height: 100px;
}

.luckynumber {
    margin: 50px;
    width: 200px;
    height: 200px;
    background-image: url("../images/frame.svg");
    background-size: 200px 200px;
    color: black;
    line-height: 200px;
    text-align: center;
    /* Source frame.svg + text are black; this filter tints both to gold as one unit. */
    filter: invert(70%) sepia(46%) saturate(538%) hue-rotate(1deg) brightness(103%) contrast(96%);
}

.jumbotron h1.luckynumber {
    font-family: var(--font-display);
    font-weight: 700;
}

.img-rotate {
    transform: rotate(180deg);
}

.ico-external-link {
    width: 25px;
    height: 25px;
    filter: invert(1) opacity(30%);
}

.ad-img-card.card-body {
    padding: 5px;
}

.nav-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    text-align: center;
}

/* Bootstrap 4's .container tops out at 1140px from the "xl" breakpoint (1200px)
   onward, so viewports wider than that (1440px, 1920px, ...) get growing empty
   margins with no extra benefit. Give very wide screens a bit more room. */

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ---------- Lottery/lucky number reveal ---------- */

@keyframes numberReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(.5) rotate(-8deg);
    }
    60% {
        opacity: 1;
        transform: translateY(-6px) scale(1.12) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
    }
}

.number-reveal {
    opacity: 0;
    animation: numberReveal .6s cubic-bezier(.34, 1.56, .64, 1) forwards;
    animation-delay: var(--reveal-delay, 0s);
    text-shadow: 0 0 18px rgba(240, 232, 160, .55);
}

@media (prefers-reduced-motion: reduce) {
    .number-reveal {
        opacity: 1;
        animation: none;
    }
}

footer.container {
    border-top: 1px solid var(--surface-border);
    margin-top: 2rem;
    padding-top: 2rem;
}
/* ---------- Additions for the self-contained tools ---------- */

/* Date-of-birth capture panel, shown until a birth date is stored locally. */

.dob-panel {
    max-width: 460px;
    margin: 0 auto;
    padding: 1.5rem;
    background: var(--cosmic-glass);
    border: 1px solid var(--cosmic-glass-border);
    border-radius: 14px;
    backdrop-filter: blur(6px);
}

.dob-panel label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin-bottom: .5rem;
}

.dob-hint {
    font-size: .85rem;
    margin-top: .75rem;
    margin-bottom: 0;
}

/* Only one tool panel is visible at a time; the tiles below switch between them. */

.tool-panel[hidden] {
    display: none;
}

.tool-card--active {
    box-shadow: 0 10px 24px rgba(165, 48, 60, .18);
}

/* Lottery balls */

.ball-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    padding: 1rem 0 .5rem;
}

.ball {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: #0C2138;
    background: linear-gradient(160deg, var(--gold-bright), var(--gold-deep));
    box-shadow: 0 0 18px rgba(246, 211, 116, .35), inset 0 -3px 6px rgba(0, 0, 0, .2);
}

/* Lucky dates */

.date-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    padding: 1rem 0 .5rem;
}

.date-chip {
    min-width: 96px;
    padding: .75rem 1rem;
    border-radius: 12px;
    background: var(--cosmic-glass);
    border: 1px solid var(--cosmic-glass-border);
    border-top: 3px solid var(--gold);
    backdrop-filter: blur(6px);
}

.date-chip .date-day {
    display: block;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gold-bright);
}

.date-chip .date-month {
    display: block;
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cosmic-text-muted);
}

/* Lucky colour */

.swatch {
    width: 150px;
    height: 150px;
    margin: 1rem auto .75rem;
    border-radius: 18px;
    border: 1px solid var(--cosmic-glass-border);
    box-shadow: 0 0 30px rgba(0, 0, 0, .35);
}

.swatch-name {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.swatch-hex {
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* The reveal animation is reused by every tool, staggered per item. */

.ball.number-reveal,
.date-chip.number-reveal {
    text-shadow: none;
}

/* ---------- Inline pickers (lottery format, lucky-date month/year) ---------- */

/* Sentence-style rows: "6 numbers", "in the range from 1 to 59". */

.picker-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-bottom: .9rem;
    color: var(--cosmic-text-muted);
}

.picker-select {
    width: auto;
    min-width: 5.5rem;
    flex: 0 0 auto;
}

.picker-lead {
    color: var(--gold-bright) !important;
}

.picker-error {
    color: var(--violet-light);
    font-size: .9rem;
}

.picker-error[hidden] {
    display: none;
}

/* ---------- Popular lottery games ---------- */

.games-heading {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cosmic-text);
    margin-bottom: 1rem;
}

.game-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
}

.game-btn {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold-bright);
    font-size: .95rem;
    padding: .5rem 1rem;
    white-space: nowrap;
}

.game-btn:hover,
.game-btn:focus {
    background: rgba(216, 198, 126, .15);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}

.game-btn--active {
    background: linear-gradient(90deg, var(--gold-deep), var(--gold));
    border-color: var(--gold-deep);
    color: #0C2138;
}