/* =========================================================
   GAMENIGHT
   FULL ATTRACTION WORLD
   ========================================================= */

:root {
    --black:
        #111114;

    --deep:
        #17171d;

    --cream:
        #f4efe7;

    --orange:
        #ff713c;

    --red:
        #d94743;

    --gold:
        #f3be4f;

    --purple:
        #59449f;

    --blue:
        #3a75b9;

    --light-blue:
        #73b6da;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing:
        border-box;
}

html,
body {
    width:
        100%;

    min-height:
        100%;

    margin:
        0;
}

body {
    min-height:
        100vh;

    overflow-x:
        hidden;

    background:
        var(--black);

    color:
        #171717;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   WORLD
   ========================================================= */

.world {
    position:
        fixed;

    inset:
        0;

    z-index:
        0;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 50% 18%,
            #4d3c70 0%,
            #272338 28%,
            #181820 57%,
            #0e0f13 100%
        );
}


/* =========================================================
   SKY
   ========================================================= */

.sky-glow {
    position:
        absolute;

    width:
        700px;

    height:
        700px;

    border-radius:
        50%;

    filter:
        blur(100px);

    opacity:
        .40;
}

.sky-glow-left {
    left:
        -320px;

    top:
        -200px;

    background:
        #c03b77;
}

.sky-glow-right {
    right:
        -320px;

    top:
        -220px;

    background:
        #3262be;
}


/* stars / dust */

.stars {
    position:
        absolute;

    inset:
        0;

    opacity:
        .28;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .75) 0 1px,
            transparent 1.5px
        );

    background-size:
        48px 48px;
}


/* =========================================================
   BACK WALLS
   ========================================================= */

.back-wall {
    position:
        absolute;

    top:
        7vh;

    overflow:
        hidden;

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    background:
        linear-gradient(
            145deg,
            rgba(85, 73, 120, .65),
            rgba(30, 30, 43, .85)
        );

    box-shadow:
        0 30px 70px
        rgba(
            0,
            0,
            0,
            .42
        );
}

.wall-left {
    width:
        28vw;

    height:
        31vh;

    left:
        -3vw;

    transform:
        perspective(900px)
        rotateY(16deg)
        rotateZ(-2deg);

    border-radius:
        18px;
}

.wall-center {
    width:
        23vw;

    height:
        26vh;

    left:
        50%;

    top:
        4vh;

    transform:
        translateX(-50%);

    border-radius:
        8px 8px 30px 30px;
}

.wall-right {
    width:
        28vw;

    height:
        32vh;

    right:
        -3vw;

    transform:
        perspective(900px)
        rotateY(-16deg)
        rotateZ(2deg);

    border-radius:
        18px;
}


/* =========================================================
   WALL SCREENS
   ========================================================= */

.wall-screen {
    position:
        absolute;

    inset:
        15px;

    overflow:
        hidden;

    border:
        3px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius:
        12px;
}

.screen-board {
    background:
        linear-gradient(
            145deg,
            #d7ac70,
            #8d6548
        );
}

.screen-horror {
    background:
        radial-gradient(
            circle at 50% 80%,
            #353743,
            #090a0d 68%
        );
}


/* little board screen pieces */

.screen-piece {
    position:
        absolute;

    width:
        42px;

    height:
        56px;

    border-radius:
        50% 50% 30% 30%;

    box-shadow:
        0 10px 20px
        rgba(
            0,
            0,
            0,
            .20
        );
}

.screen-piece-one {
    left:
        22%;

    bottom:
        24%;

    background:
        #e14a42;
}

.screen-piece-two {
    left:
        48%;

    bottom:
        39%;

    background:
        #4a78cf;
}

.screen-piece-three {
    right:
        17%;

    bottom:
        18%;

    background:
        #d6bd4a;
}


/* horror */

.horror-door {
    position:
        absolute;

    width:
        30%;

    height:
        72%;

    left:
        50%;

    bottom:
        0;

    transform:
        translateX(-50%);

    background:
        #050506;

    border:
        5px solid
        #24252b;
}

.horror-eyes {
    position:
        absolute;

    left:
        50%;

    bottom:
        36%;

    transform:
        translateX(-50%);

    display:
        flex;

    gap:
        12px;
}

.horror-eyes span {
    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #e9e1cf;

    box-shadow:
        0 0 12px
        #e9e1cf;
}


/* =========================================================
   CENTRAL EMBLEM
   ========================================================= */

.center-emblem {
    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(
            255,
            255,
            255,
            .14
        );

    font-size:
        clamp(
            70px,
            10vw,
            150px
        );

    font-weight:
        1000;

    letter-spacing:
        -10px;

    transform:
        skewX(-7deg);
}


/* =========================================================
   GIANT DIE
   ========================================================= */

.giant-die {
    position:
        absolute;

    width:
        min(
            19vw,
            250px
        );

    aspect-ratio:
        1;

    left:
        2vw;

    top:
        33%;

    border-radius:
        23%;

    background:
        linear-gradient(
            145deg,
            #fffef8,
            #d9d2c7
        );

    border:
        5px solid
        #b7aca0;

    transform:
        rotate(-18deg);

    box-shadow:
        0 35px 55px
        rgba(
            0,
            0,
            0,
            .43
        );
}

.pip {
    position:
        absolute;

    width:
        15%;

    aspect-ratio:
        1;

    border-radius:
        50%;

    background:
        #302f35;
}

.pip-a {
    left:
        17%;

    top:
        17%;
}

.pip-b {
    right:
        17%;

    top:
        17%;
}

.pip-c {
    left:
        42.5%;

    top:
        42.5%;
}

.pip-d {
    left:
        17%;

    bottom:
        17%;
}

.pip-e {
    right:
        17%;

    bottom:
        17%;
}


/* =========================================================
   GIANT MEEPLE
   ========================================================= */

.giant-meeple {
    position:
        absolute;

    width:
        min(
            17vw,
            220px
        );

    height:
        min(
            17vw,
            220px
        );

    left:
        14vw;

    bottom:
        -1vw;

    background:
        linear-gradient(
            145deg,
            #ef5943,
            #a72a2f
        );

    clip-path:
        polygon(
            38% 0%,
            62% 0%,
            67% 18%,
            87% 5%,
            100% 20%,
            73% 43%,
            82% 100%,
            58% 100%,
            50% 70%,
            42% 100%,
            18% 100%,
            27% 43%,
            0 20%,
            13% 5%,
            33% 18%
        );

    transform:
        rotate(11deg);

    filter:
        drop-shadow(
            0 30px 32px
            rgba(
                0,
                0,
                0,
                .42
            )
        );
}

.meeple-face {
    position:
        absolute;

    width:
        100%;

    top:
        35%;

    color:
        rgba(
            255,
            255,
            255,
            .88
        );

    text-align:
        center;

    font-size:
        clamp(
            18px,
            2.4vw,
            34px
        );

    font-weight:
        1000;
}


/* =========================================================
   MAGNIFYING GLASS
   ========================================================= */

.mystery-lens {
    position:
        absolute;

    width:
        150px;

    height:
        240px;

    left:
        24vw;

    top:
        16vh;

    transform:
        rotate(18deg);

    opacity:
        .82;
}

.lens-glass {
    position:
        absolute;

    width:
        115px;

    height:
        115px;

    border:
        15px solid
        #c8aa6d;

    border-radius:
        50%;

    background:
        rgba(
            153,
            213,
            221,
            .13
        );

    box-shadow:
        inset 0 0 20px
        rgba(
            255,
            255,
            255,
            .18
        );
}

.lens-handle {
    position:
        absolute;

    width:
        27px;

    height:
        130px;

    left:
        93px;

    top:
        93px;

    border-radius:
        15px;

    background:
        linear-gradient(
            90deg,
            #8f693b,
            #d0aa6d
        );

    transform:
        rotate(-39deg);

    transform-origin:
        top center;
}


/* =========================================================
   GIANT CARDS
   ========================================================= */

.giant-card {
    position:
        absolute;

    width:
        min(
            12vw,
            175px
        );

    aspect-ratio:
        .68;

    right:
        4vw;

    border:
        4px solid
        #d2cbc0;

    border-radius:
        16px;

    box-shadow:
        0 30px 45px
        rgba(
            0,
            0,
            0,
            .40
        );
}

.card-back {
    top:
        28%;

    right:
        9vw;

    background:
        repeating-linear-gradient(
            45deg,
            #493684 0 10px,
            #5c49a6 10px 20px
        );

    transform:
        rotate(17deg);
}

.card-front {
    top:
        35%;

    background:
        #faf6ec;

    transform:
        rotate(-10deg);

    color:
        #222126;
}

.card-rank {
    position:
        absolute;

    top:
        8%;

    left:
        10%;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            28px,
            3vw,
            48px
        );

    font-weight:
        900;
}

.card-suit {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    font-size:
        clamp(
            50px,
            6vw,
            90px
        );
}


/* =========================================================
   SKATEBOARD
   ========================================================= */

.skateboard {
    position:
        absolute;

    width:
        250px;

    height:
        120px;

    right:
        14vw;

    bottom:
        5vh;

    transform:
        rotate(-14deg);
}

.skateboard-deck {
    position:
        absolute;

    width:
        245px;

    height:
        48px;

    top:
        25px;

    border-radius:
        50% 50% 40% 40%;

    background:
        linear-gradient(
            90deg,
            #3468ac,
            #bd4b7e,
            #e8793d
        );

    box-shadow:
        0 20px 25px
        rgba(
            0,
            0,
            0,
            .35
        );
}

.skate-wheel {
    position:
        absolute;

    width:
        34px;

    height:
        34px;

    border-radius:
        50%;

    bottom:
        11px;

    background:
        #e3dfd4;

    border:
        5px solid
        #5d5b63;
}

.wheel-one {
    left:
        45px;
}

.wheel-two {
    right:
        45px;
}


/* =========================================================
   ARCADE STICK
   ========================================================= */

.arcade-stick {
    position:
        absolute;

    width:
        190px;

    height:
        170px;

    right:
        26vw;

    top:
        18vh;

    transform:
        rotate(-7deg);

    opacity:
        .90;
}

.stick-base {
    position:
        absolute;

    width:
        180px;

    height:
        75px;

    left:
        0;

    bottom:
        0;

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            #37323f,
            #18171c
        );

    border:
        3px solid
        #5d5367;
}

.stick-shaft {
    position:
        absolute;

    width:
        18px;

    height:
        95px;

    left:
        50px;

    bottom:
        54px;

    border-radius:
        10px;

    background:
        #c2b8b0;

    transform:
        rotate(-5deg);
}

.stick-ball {
    position:
        absolute;

    width:
        48px;

    height:
        48px;

    left:
        32px;

    top:
        1px;

    border-radius:
        50%;

    background:
        #d64943;

    box-shadow:
        inset -7px -8px 12px
        rgba(
            0,
            0,
            0,
            .18
        );
}

.arcade-button {
    position:
        absolute;

    width:
        32px;

    height:
        19px;

    border-radius:
        50%;

    bottom:
        30px;
}

.button-red {
    right:
        48px;

    background:
        #e14848;
}

.button-yellow {
    right:
        16px;

    background:
        #e4b641;
}


/* =========================================================
   FOREGROUND CHIPS
   ========================================================= */

.foreground-chip {
    position:
        absolute;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    border:
        8px dashed
        rgba(
            255,
            255,
            255,
            .58
        );

    color:
        rgba(
            255,
            255,
            255,
            .90
        );

    font-weight:
        1000;

    box-shadow:
        0 25px 35px
        rgba(
            0,
            0,
            0,
            .35
        );
}

.chip-one {
    width:
        100px;

    height:
        100px;

    left:
        -20px;

    bottom:
        5vh;

    background:
        #5a4799;

    transform:
        rotate(18deg);
}

.chip-two {
    width:
        75px;

    height:
        75px;

    right:
        3vw;

    bottom:
        4vh;

    background:
        #c54946;

    transform:
        rotate(-13deg);
}

.chip-three {
    width:
        65px;

    height:
        65px;

    left:
        34vw;

    bottom:
        -12px;

    background:
        #d79e38;
}


/* =========================================================
   SMALL PAWNS
   ========================================================= */

.small-pawn {
    position:
        absolute;

    width:
        65px;

    height:
        90px;

    bottom:
        9vh;

    border-radius:
        45% 45% 25% 25%;

    box-shadow:
        0 25px 25px
        rgba(
            0,
            0,
            0,
            .35
        );
}

.small-pawn::before {
    content:
        "";

    position:
        absolute;

    width:
        42px;

    height:
        42px;

    left:
        11px;

    top:
        -23px;

    border-radius:
        50%;

    background:
        inherit;
}

.pawn-left {
    left:
        31vw;

    background:
        #d7af3f;

    transform:
        rotate(-8deg);
}

.pawn-right {
    right:
        32vw;

    background:
        #407ab4;

    transform:
        rotate(8deg);
}


/* =========================================================
   CENTRAL PATH
   ========================================================= */

.path-wrapper {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;
}

.path-glow {
    position:
        absolute;

    width:
        38vw;

    height:
        80vh;

    left:
        50%;

    bottom:
        -30vh;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(
            155,
            115,
            227,
            .15
        );

    filter:
        blur(65px);
}

.game-path {
    position:
        absolute;

    width:
        39vw;

    height:
        75vh;

    left:
        50%;

    bottom:
        -20vh;

    transform:
        translateX(-50%);

    clip-path:
        polygon(
            43% 0,
            57% 0,
            100% 100%,
            0 100%
        );

    background:
        linear-gradient(
            180deg,
            rgba(91, 75, 136, .75),
            rgba(59, 46, 84, .88)
        );

    border-top:
        3px solid
        rgba(
            255,
            255,
            255,
            .24
        );

    box-shadow:
        inset 0 0 35px
        rgba(
            255,
            255,
            255,
            .10
        );
}

.path-line {
    position:
        absolute;

    top:
        0;

    bottom:
        0;

    width:
        4px;

    background:
        linear-gradient(
            rgba(255, 255, 255, .18),
            rgba(255, 255, 255, .65)
        );
}

.path-line-left {
    left:
        21%;
}

.path-line-right {
    right:
        21%;
}

.path-segment {
    position:
        absolute;

    left:
        50%;

    height:
        3px;

    background:
        rgba(
            255,
            255,
            255,
            .27
        );

    transform:
        translateX(-50%);
}

.segment-1 {
    width:
        17%;

    top:
        8%;
}

.segment-2 {
    width:
        23%;

    top:
        18%;
}

.segment-3 {
    width:
        29%;

    top:
        29%;
}

.segment-4 {
    width:
        36%;

    top:
        41%;
}

.segment-5 {
    width:
        45%;

    top:
        54%;
}

.segment-6 {
    width:
        57%;

    top:
        68%;
}

.segment-7 {
    width:
        71%;

    top:
        82%;
}

.segment-8 {
    width:
        88%;

    top:
        96%;
}


/* =========================================================
   FLOATING SHAPES
   ========================================================= */

.floating-shape {
    position:
        absolute;

    border-radius:
        50%;

    box-shadow:
        0 18px 30px
        rgba(
            0,
            0,
            0,
            .28
        );
}

.shape-one {
    width:
        45px;

    height:
        45px;

    left:
        8vw;

    top:
        22vh;

    background:
        #e65d3f;
}

.shape-two {
    width:
        27px;

    height:
        27px;

    left:
        29vw;

    top:
        11vh;

    background:
        #e4b14e;
}

.shape-three {
    width:
        52px;

    height:
        52px;

    right:
        11vw;

    top:
        18vh;

    background:
        #4b77c4;
}

.shape-four {
    width:
        29px;

    height:
        29px;

    right:
        29vw;

    top:
        35vh;

    background:
        #cf486e;
}

.shape-five {
    width:
        36px;

    height:
        36px;

    left:
        18vw;

    top:
        51vh;

    background:
        #5e4a9a;
}


/* =========================================================
   ATMOSPHERE
   ========================================================= */

.atmosphere {
    position:
        fixed;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, .03) 0%,
            rgba(8, 8, 11, .12) 53%,
            rgba(4, 4, 6, .48) 100%
        );
}


/* =========================================================
   PAGE
   ========================================================= */

.page {
    position:
        relative;

    z-index:
        10;

    min-height:
        100vh;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    padding:
        34px 18px;
}


/* =========================================================
   JOIN PANEL
   ========================================================= */

.join-panel {
    position:
        relative;

    width:
        min(
            500px,
            100%
        );

    overflow:
        hidden;

    padding:
        32px 32px 25px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .34
        );

    border-radius:
        27px;

    background:
        linear-gradient(
            145deg,
            rgba(250, 248, 244, .68),
            rgba(222, 220, 224, .48)
        );

    backdrop-filter:
        blur(9px)
        saturate(1.1);

    -webkit-backdrop-filter:
        blur(9px)
        saturate(1.1);

    box-shadow:
        0 35px 80px
        rgba(
            0,
            0,
            0,
            .44
        ),

        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            .72
        );
}

.panel-top-glow {
    position:
        absolute;

    width:
        80%;

    height:
        130px;

    left:
        10%;

    top:
        -100px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .65
        );

    filter:
        blur(35px);
}


/* =========================================================
   LOGO
   ========================================================= */

.logo-area {
    position:
        relative;

    text-align:
        center;
}

.logo-eyebrow {
    color:
        #62606a;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        2.5px;
}

.logo-mark {
    margin-top:
        4px;

    font-size:
        clamp(
            47px,
            9vw,
            67px
        );

    font-weight:
        1000;

    line-height:
        .9;

    letter-spacing:
        -5px;

    transform:
        skewX(-5deg);
}

.logo-game {
    color:
        #1c1b20;
}

.logo-night {
    color:
        #d94b3f;

    text-shadow:
        2px 2px 0
        rgba(
            255,
            255,
            255,
            .60
        );
}

.logo-area p {
    margin:
        12px 0 0;

    color:
        #46434b;

    font-size:
        12px;

    font-weight:
        700;
}


/* =========================================================
   PANEL DIVIDER
   ========================================================= */

.panel-rule {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin:
        21px 0;
}

.panel-rule > span {
    flex:
        1;

    height:
        1px;

    background:
        rgba(
            0,
            0,
            0,
            .16
        );
}

.rule-icon {
    color:
        #8b6a9d;

    font-size:
        10px;
}


/* =========================================================
   JOIN CONTENT
   ========================================================= */

.join-intro {
    margin-bottom:
        19px;

    text-align:
        center;
}

.join-kicker {
    margin-bottom:
        4px;

    color:
        #a13e3a;

    font-size:
        9px;

    font-weight:
        1000;

    letter-spacing:
        1.7px;
}

.join-intro h1 {
    margin:
        0;

    color:
        #1d1c20;

    font-size:
        28px;

    font-weight:
        1000;

    letter-spacing:
        -1px;
}

.join-intro p {
    max-width:
        330px;

    margin:
        7px auto 0;

    color:
        #51505a;

    font-size:
        12px;

    line-height:
        1.45;
}


/* =========================================================
   LABELS
   ========================================================= */

label {
    display:
        block;

    margin:
        15px 0 7px;

    color:
        #38363e;

    font-size:
        9px;

    font-weight:
        1000;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


/* =========================================================
   INPUT SHELLS
   ========================================================= */

.input-shell {
    display:
        flex;

    align-items:
        stretch;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            28,
            27,
            32,
            .14
        );

    border-radius:
        13px;

    background:
        rgba(
            255,
            255,
            255,
            .74
        );

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            .80
        ),

        0 7px 18px
        rgba(
            0,
            0,
            0,
            .06
        );
}

.input-shell:focus-within {
    border-color:
        rgba(
            98,
            73,
            126,
            .65
        );

    box-shadow:
        0 0 0 3px
        rgba(
            103,
            74,
            139,
            .10
        );
}

.input-icon {
    width:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 48px;

    border-right:
        1px solid
        rgba(
            0,
            0,
            0,
            .09
        );

    color:
        #716b78;

    font-size:
        17px;

    font-weight:
        900;
}


/* =========================================================
   INPUTS
   ========================================================= */

input {
    width:
        100%;

    min-width:
        0;

    height:
        56px;

    padding:
        0 15px;

    border:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        #1d1c20;

    font-size:
        16px;

    font-weight:
        750;
}

input::placeholder {
    color:
        #88848c;
}

#roomCode {
    padding-left:
        24px;

    text-align:
        center;

    text-transform:
        uppercase;

    font-size:
        26px;

    font-weight:
        1000;

    letter-spacing:
        9px;
}


/* =========================================================
   JOIN BUTTON
   ========================================================= */

button {
    width:
        100%;

    min-height:
        58px;

    margin-top:
        23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .16
        );

    border-radius:
        13px;

    background:
        linear-gradient(
            180deg,
            #d95647,
            #ac332f
        );

    color:
        white;

    font-size:
        14px;

    font-weight:
        1000;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

    cursor:
        pointer;

    box-shadow:
        0 7px 0
        #79201f,

        0 14px 25px
        rgba(
            111,
            26,
            29,
            .28
        );
}

button:hover {
    transform:
        translateY(-1px);
}

button:active {
    transform:
        translateY(5px);

    box-shadow:
        0 2px 0
        #79201f,

        0 8px 18px
        rgba(
            111,
            26,
            29,
            .22
        );
}

button:disabled {
    opacity:
        .45;

    cursor:
        default;

    transform:
        none;
}

.button-arrow {
    font-size:
        22px;

    line-height:
        1;
}


/* =========================================================
   STATUS
   ========================================================= */

.status {
    min-height:
        21px;

    margin-top:
        15px;

    color:
        #514d55;

    text-align:
        center;

    font-size:
        12px;

    font-weight:
        700;
}

.status.error {
    color:
        #a5282d;
}

.status.success {
    color:
        #2f7144;
}


/* =========================================================
   PANEL FOOTER
   ========================================================= */

.panel-footer {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        5px;

    color:
        rgba(
            44,
            41,
            48,
            .62
        );

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        1.1px;
}

.footer-dot {
    opacity:
        .45;
}


/* =========================================================
   SITE FOOTER
   ========================================================= */

.site-footer {
    margin-top:
        16px;

    padding:
        5px 11px;

    border-radius:
        999px;

    background:
        rgba(
            12,
            12,
            15,
            .44
        );

    backdrop-filter:
        blur(8px);

    color:
        rgba(
            255,
            255,
            255,
            .73
        );

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}

.site-footer span {
    margin:
        0 7px;

    opacity:
        .45;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    max-width: 900px
) {

    .wall-left,
    .wall-right {
        width:
            37vw;
    }

    .wall-center {
        width:
            30vw;
    }

    .giant-die {
        width:
            190px;

        left:
            -45px;

        top:
            34%;
    }

    .giant-card {
        width:
            130px;
    }

    .card-front {
        right:
            -7px;
    }

    .card-back {
        right:
            50px;
    }

    .giant-meeple {
        width:
            165px;

        height:
            165px;

        left:
            3vw;
    }

    .skateboard {
        right:
            -30px;

        transform:
            rotate(-14deg)
            scale(.82);
    }

    .mystery-lens {
        left:
            8vw;

        transform:
            rotate(18deg)
            scale(.82);
    }

    .arcade-stick {
        right:
            8vw;

        transform:
            rotate(-7deg)
            scale(.80);
    }

    .pawn-left {
        left:
            22vw;
    }

    .pawn-right {
        right:
            23vw;
    }

    .game-path {
        width:
            55vw;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
    max-width: 600px
) {

    .world {
        position:
            fixed;
    }


    /* ---------------------------------------------
       Tall attraction composition
       --------------------------------------------- */

    .wall-left {
        width:
            63vw;

        height:
            23vh;

        left:
            -32vw;

        top:
            5vh;
    }

    .wall-center {
        width:
            49vw;

        height:
            19vh;

        top:
            2vh;
    }

    .wall-right {
        width:
            62vw;

        height:
            24vh;

        right:
            -31vw;

        top:
            8vh;
    }


    /* giant visible props */

    .giant-die {
        width:
            122px;

        left:
            -35px;

        top:
            28vh;
    }

    .giant-card {
        width:
            92px;

        top:
            31vh;
    }

    .card-back {
        right:
            20px;
    }

    .card-front {
        right:
            -20px;

        top:
            36vh;
    }

    .giant-meeple {
        width:
            115px;

        height:
            115px;

        left:
            -20px;

        bottom:
            3vh;
    }

    .skateboard {
        width:
            190px;

        right:
            -75px;

        bottom:
            5vh;

        transform:
            rotate(-15deg)
            scale(.75);
    }

    .mystery-lens {
        width:
            110px;

        height:
            170px;

        left:
            4px;

        top:
            51vh;

        transform:
            rotate(16deg)
            scale(.66);

        transform-origin:
            top left;
    }

    .arcade-stick {
        right:
            -15px;

        top:
            54vh;

        transform:
            rotate(-7deg)
            scale(.58);

        transform-origin:
            top right;
    }


    /* hide some foreground pieces so phone isn't unreadable */

    .chip-one {
        width:
            63px;

        height:
            63px;

        left:
            -20px;
    }

    .chip-two {
        width:
            52px;

        height:
            52px;

        right:
            -8px;
    }

    .chip-three {
        display:
            none;
    }

    .pawn-left,
    .pawn-right {
        display:
            none;
    }


    /* path remains visible behind the panel */

    .game-path {
        width:
            100vw;

        height:
            72vh;

        bottom:
            -25vh;

        opacity:
            .88;
    }

    .path-glow {
        width:
            85vw;
    }


    /* ---------------------------------------------
       Main panel
       --------------------------------------------- */

    .page {
        justify-content:
            flex-start;

        padding:
            27px 12px 24px;
    }

    .join-panel {
        width:
            100%;

        max-width:
            410px;

        padding:
            25px 18px 21px;

        border-radius:
            22px;

        /*
            Deliberately transparent so the world
            remains visible THROUGH the UI.
        */

        background:
            linear-gradient(
                145deg,
                rgba(250, 248, 244, .54),
                rgba(222, 220, 224, .34)
            );

        backdrop-filter:
            blur(5px)
            saturate(1.05);

        -webkit-backdrop-filter:
            blur(5px)
            saturate(1.05);
    }

    .logo-eyebrow {
        font-size:
            7px;

        letter-spacing:
            2px;
    }

    .logo-mark {
        font-size:
            51px;
    }

    .logo-area p {
        font-size:
            11px;
    }

    .panel-rule {
        margin:
            17px 0;
    }

    .join-intro {
        margin-bottom:
            16px;
    }

    .join-intro h1 {
        font-size:
            25px;
    }

    .join-intro p {
        font-size:
            11px;
    }

    input {
        height:
            53px;
    }

    #roomCode {
        font-size:
            24px;

        letter-spacing:
            8px;
    }

    button {
        min-height:
            56px;

        margin-top:
            20px;
    }

    .panel-footer {
        font-size:
            6px;
    }

    .shape-two,
    .shape-four {
        display:
            none;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (
    max-width: 370px
) {

    .page {
        padding-left:
            8px;

        padding-right:
            8px;
    }

    .join-panel {
        padding-left:
            14px;

        padding-right:
            14px;
    }

    .logo-mark {
        font-size:
            45px;
    }

    #roomCode {
        font-size:
            22px;

        letter-spacing:
            6px;
    }

    .input-icon {
        width:
            42px;

        flex-basis:
            42px;
    }

}