/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    margin-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .body-content {
        padding: 0;
    }
}

/* Welcome screen */
body {
    overflow-x: hidden;
}

.welcome {
    /* Run edge to edge, out of the master page's centered container. */
    margin: -25px calc(50% - 50vw) 0;
    background:
        radial-gradient(ellipse at 70% 30%, rgba(40, 170, 95, .55), transparent 62%),
        linear-gradient(160deg, #0f6f3a, #06371b);
    color: #fbf6e6;
}

.welcome-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px 72px;
    max-width: 1140px;
    /* Fill the window down to the footer on a typical screen. */
    min-height: calc(100vh - 235px);
    margin: 0 auto;
    padding: 72px 24px 56px;
}

.welcome-copy {
    flex: 1 1 420px;
    min-width: 0;
}

.welcome-eyebrow {
    margin: 0 0 12px;
    color: #e0bd67;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.welcome h1 {
    margin: 0 0 16px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.08;
    text-wrap: balance;
}

.welcome-lead {
    margin: 0 0 28px;
    font-size: 1.2rem;
}

.welcome-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

/* Numbered steps, so the form reads as: 1. pick chips, 2. name your seat, then take a seat. */
.welcome-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 50%;
    background: linear-gradient(#f3d995, #c99a3a);
    color: #241a05;
    font-size: .95rem;
    font-weight: 800;
    vertical-align: middle;
}

.welcome-form .welcome-step-label {
    margin-bottom: 10px;
    font-size: 1.15rem;
}

.welcome-optional {
    color: #b9d3c0;
    font-size: .95rem;
    font-weight: 400;
}

/* Starting chips: four radio buttons drawn as chips on dark tiles, in the same colors as the table's
   chips. The panel and tiles make the choice stand out from the green page. */
.bankroll-picker {
    margin: 0 0 26px;
    padding: 18px 20px 22px;
    background: rgba(0, 0, 0, .38);
    border: 1px solid rgba(224, 189, 103, .55);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}

.bankroll-picker legend {
    float: left;
    width: 100%;
    margin: 0 0 16px;
    padding: 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
}

.bankroll-options {
    clear: both;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 600px) {
    .bankroll-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The real radio buttons stay in the page for keyboards and screen readers, but out of sight. */
.bankroll-options input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.welcome-form .bankroll-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 16px 8px 12px;
    background: #0d1a13;
    border: 2px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    color: #9fb8a7;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.welcome-form .bankroll-option:hover {
    border-color: rgba(224, 189, 103, .7);
    color: #fff;
}

.bankroll-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: repeating-conic-gradient(#0b0c08 0 22.5deg, var(--chip) 22.5deg 45deg);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .45);
    color: var(--chip-ink);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.25rem;
    font-weight: 700;
    filter: saturate(.45) brightness(.7);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.bankroll-chip::before {
    content: '';
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    background: var(--chip-center);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .55);
}

.bankroll-chip::after {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    border: 1px dashed var(--chip);
    opacity: .7;
}

/* Keeps the value above the center circle drawn by ::before. */
.bankroll-option .bankroll-chip { isolation: isolate; }
.bankroll-chip::before { z-index: -1; }

.bankroll-1k { --chip: #ff8a00; --chip-center: #0b0c08; --chip-ink: #ffa333; }
.bankroll-10k { --chip: #ff2f9e; --chip-center: #0b0c08; --chip-ink: #ff62b6; }
.bankroll-100k {
    --chip: #d9a92c;
    --chip-center: conic-gradient(from 210deg, #fff8c9, #d7a322 12%, #9a7012 24%, #f5d254 38%, #fff6c0 50%, #c28e17 62%, #8a6210 74%, #f3cf50 88%, #fff8c9);
    --chip-ink: #2a1a02;
}
.bankroll-1m {
    --chip: #dfe4ea;
    --chip-center: conic-gradient(from 200deg, #ffffff, #8b94a1 10%, #ffffff 20%, #fbfcfe 30%, #58616d 38%, #e8edf2 46%, #ffffff 56%, #79828f 66%, #ffffff 76%, #5f6874 88%, #ffffff);
    --chip-ink: #0d1014;
}

.bankroll-100k .bankroll-chip { font-size: 1rem; }

.bankroll-option:hover .bankroll-chip {
    transform: translateY(-3px);
    filter: saturate(.8) brightness(.9);
}

/* The chosen tile: gold border, lit background, full-color glowing chip and a check mark. */
.bankroll-options input:checked + .bankroll-option {
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--chip) 30%, transparent), #14231a 70%);
    border-color: #f1d27a;
    box-shadow: 0 0 0 1px #f1d27a, 0 0 22px rgba(241, 210, 122, .35);
    color: #fff;
}

.bankroll-options input:checked + .bankroll-option .bankroll-chip {
    transform: translateY(-4px) scale(1.06);
    filter: none;
    box-shadow: 0 0 22px var(--chip), 0 8px 14px rgba(0, 0, 0, .5);
}

.bankroll-options input:checked + .bankroll-option::after {
    content: '\2713';
    position: absolute;
    top: -10px;
    right: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(#f3d995, #c99a3a);
    border: 2px solid #0d1a13;
    color: #241a05;
    font-size: .95rem;
    font-weight: 900;
}

.bankroll-options input:focus-visible + .bankroll-option {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.welcome-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.welcome-form input[type="text"] {
    flex: 1 1 200px;
    max-width: 280px;
    min-width: 0;
    height: 50px;
    padding: 0 14px;
    background: #fbf6e6;
    border: 2px solid #a9863a;
    border-radius: 6px;
    color: #1b1b1f;
    font-size: 1.05rem;
}

.welcome-play {
    height: 50px;
    padding: 0 30px;
    background: linear-gradient(#efd083, #cda24a);
    border: 2px solid #7d5f1e;
    border-radius: 6px;
    color: #241a05;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}

.welcome-play:hover {
    background: linear-gradient(#f7dc98, #dbb15a);
}

.welcome-form input[type="text"]:focus-visible,
.welcome-play:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.welcome-note {
    margin: 14px 0 0;
    color: #d6e6d8;
}

.welcome-fan {
    position: relative;
    flex: 0 0 auto;
    width: 300px;
    height: 300px;
}

.fan-card {
    position: absolute;
    top: 30px;
    width: 170px;
    height: 240px;
    background: linear-gradient(160deg, #fff, #f1ede2);
    border: 1px solid #7f7f78;
    border-radius: 12px;
    box-shadow: -5px 10px 22px rgba(0, 0, 0, .45);
    color: #c3172b;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
}

.fan-black {
    color: #1b1b1f;
}

.fan-left {
    left: 12px;
    transform: rotate(-11deg);
}

.fan-right {
    left: 118px;
    transform: rotate(10deg);
}

.fan-corner {
    position: absolute;
    left: 12px;
    top: 8px;
    font-size: 1.5rem;
    line-height: 1.05;
    text-align: center;
}

.fan-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5.5rem;
}

.welcome-rules {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 56px;
    margin: 0;
    padding: 20px 24px;
    list-style: none;
    background: rgba(0, 0, 0, .28);
    border-top: 1px solid rgba(224, 189, 103, .5);
}

.welcome-rules strong {
    margin-right: 6px;
    color: #e0bd67;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.15rem;
}

@media (max-width: 600px) {
    .welcome-hero {
        padding-top: 40px;
    }

    .welcome-fan {
        width: 240px;
        height: 230px;
    }

    .fan-card {
        top: 12px;
        width: 130px;
        height: 184px;
    }

    .fan-right {
        left: 94px;
    }

    .fan-mark {
        font-size: 4rem;
    }
}