* {
    box-sizing: border-box;
}

:root {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: #f5e8df;
    background: #080507;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    --red: #d40022;
    --red-light: #ff1737;
    --gold: #d6ad68;
    --cream: #f3e4d2;
    --ink: #080507;
}

body {
    display: grid;
    min-height: 100vh;
    margin: 0;
    padding: 28px;
    place-items: center;
    background:
        radial-gradient(ellipse at 50% 8%, rgb(169 0 25 / 24%), transparent 26rem),
        radial-gradient(ellipse at 50% 48%, transparent 22%, rgb(0 0 0 / 76%) 100%),
        repeating-conic-gradient(from -12deg at 50% -8%, rgb(167 9 30 / 12%) 0deg 9deg, transparent 9deg 18deg),
        repeating-linear-gradient(90deg, rgb(0 0 0 / 32%) 0 2px, transparent 2px 120px),
        repeating-conic-gradient(#090609 0 25%, #20070d 0 50%) 50% 100% / 100% 220px no-repeat,
        #080507;
}

.welcome {
    position: relative;
    isolation: isolate;
    display: flex;
    width: min(100%, 880px);
    min-height: 480px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 82px 32px 64px;
    border: 1px solid rgb(138 27 42 / 55%);
    border-radius: 4px;
    background:
        radial-gradient(ellipse at 50% 22%, rgb(255 30 48 / 18%), transparent 36%),
        radial-gradient(ellipse at 50% 50%, transparent 24%, rgb(0 0 0 / 77%) 100%),
        repeating-linear-gradient(92deg, transparent 0 27px, rgb(255 255 255 / 2%) 28px, rgb(0 0 0 / 27%) 31px, transparent 37px 67px),
        repeating-conic-gradient(from -11deg at 50% -18%, rgb(142 5 25 / 14%) 0deg 8deg, transparent 8deg 16deg),
        linear-gradient(145deg, #26070d, #0c080a 58%, #22060c);
    box-shadow:
        0 38px 100px rgb(0 0 0 / 85%),
        0 0 70px rgb(156 0 26 / 24%),
        inset 0 1px rgb(255 226 203 / 8%),
        inset 26px 0 38px rgb(0 0 0 / 48%),
        inset -26px 0 38px rgb(0 0 0 / 48%);
    text-align: center;
}

.welcome::before,
.page-card::before {
    position: absolute;
    z-index: 0;
    inset: 13px;
    border: 1px solid rgb(124 35 47 / 36%);
    border-radius: 2px;
    box-shadow: inset 0 0 24px rgb(0 0 0 / 50%);
    content: "";
    pointer-events: none;
}

.welcome::after {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 72px;
    background:
        radial-gradient(ellipse at 50% 0%, #090609 0 8px, transparent 9px) 14% 51px / 20px 20px no-repeat,
        radial-gradient(ellipse at 50% 0%, #090609 0 9px, transparent 10px) 37% 39px / 23px 25px no-repeat,
        radial-gradient(ellipse at 50% 0%, #090609 0 7px, transparent 8px) 62% 56px / 18px 16px no-repeat,
        radial-gradient(ellipse at 50% 0%, #090609 0 10px, transparent 11px) 83% 44px / 25px 25px no-repeat,
        radial-gradient(ellipse at 50% 0%, #a0001c 0 8px, transparent 9px) 14% 0 / 20px 64px no-repeat,
        radial-gradient(ellipse at 50% 0%, #850018 0 10px, transparent 11px) 37% 0 / 23px 53px no-repeat,
        radial-gradient(ellipse at 50% 0%, #b00020 0 7px, transparent 8px) 62% 0 / 18px 70px no-repeat,
        radial-gradient(ellipse at 50% 0%, #780014 0 11px, transparent 12px) 83% 0 / 25px 61px no-repeat,
        linear-gradient(180deg, #140609 0%, #390812 58%, #100609 100%);
    box-shadow: 0 14px 28px rgb(0 0 0 / 84%), inset 0 -2px rgb(109 0 18 / 55%);
    content: "";
    pointer-events: none;
}

.page-card::after {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 52px;
    background:
        radial-gradient(ellipse at 50% 0%, #090609 0 7px, transparent 8px) 18% 36px / 17px 16px no-repeat,
        radial-gradient(ellipse at 50% 0%, #090609 0 9px, transparent 10px) 49% 29px / 21px 20px no-repeat,
        radial-gradient(ellipse at 50% 0%, #090609 0 7px, transparent 8px) 78% 40px / 17px 12px no-repeat,
        radial-gradient(ellipse at 50% 0%, #a0001c 0 7px, transparent 8px) 18% 0 / 17px 45px no-repeat,
        radial-gradient(ellipse at 50% 0%, #850018 0 10px, transparent 11px) 49% 0 / 21px 39px no-repeat,
        radial-gradient(ellipse at 50% 0%, #b00020 0 7px, transparent 8px) 78% 0 / 17px 49px no-repeat,
        linear-gradient(180deg, #140609 0%, #390812 58%, #100609 100%);
    box-shadow: 0 12px 24px rgb(0 0 0 / 80%), inset 0 -2px rgb(109 0 18 / 48%);
    content: "";
    pointer-events: none;
}

h1 {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 0 38px;
    color: #e9ddd3;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 8vw, 78px);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.04;
    text-shadow: 0 3px 0 #31040a, 0 0 8px rgb(255 224 203 / 12%), 0 0 32px rgb(191 0 31 / 24%);
    text-wrap: balance;
}

.welcome a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    padding: 0 27px;
    border: 1px solid #9a3745;
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 7%), transparent 48%),
        repeating-linear-gradient(135deg, transparent 0 16px, rgb(0 0 0 / 16%) 16px 23px),
        linear-gradient(110deg, #a90020, #ed102f 55%, #a90020);
    box-shadow:
        0 7px 0 #3f0710,
        0 12px 32px rgb(183 0 31 / 38%),
        inset 0 1px rgb(255 255 255 / 20%),
        inset 0 -5px 10px rgb(30 0 5 / 44%);
    color: #f4e9df;
    font-size: 16px;
    font-weight: 750;
    text-decoration: none;
    text-shadow: 0 1px 2px rgb(71 0 9 / 45%);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.welcome a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 0 #3f0710, 0 17px 40px rgb(183 0 31 / 48%);
    filter: brightness(1.18);
}

.welcome a:active {
    transform: translateY(4px);
    box-shadow: 0 3px 0 #a30720, 0 7px 16px rgb(255 14 43 / 42%);
}

.welcome a:focus-visible,
.page-card a:focus-visible,
.page-card button:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 5px;
}

.site-page {
    color: #fff8ed;
}

.page-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: min(100%, 620px);
    padding: clamp(62px, 7vw, 76px) clamp(28px, 6vw, 56px) clamp(34px, 6vw, 56px);
    border: 1px solid rgb(128 35 49 / 55%);
    border-radius: 3px;
    background:
        radial-gradient(ellipse at 50% 10%, rgb(121 0 20 / 16%), transparent 46%),
        radial-gradient(ellipse at 50% 50%, transparent 16%, rgb(0 0 0 / 64%) 100%),
        repeating-linear-gradient(92deg, transparent 0 25px, rgb(255 215 182 / 1.5%) 26px, rgb(0 0 0 / 34%) 29px, transparent 35px 63px),
        radial-gradient(ellipse at 20% 45%, rgb(135 0 20 / 13%), transparent 23%),
        radial-gradient(ellipse at 88% 72%, rgb(124 0 17 / 12%), transparent 21%),
        repeating-conic-gradient(from -20deg at 50% -18%, rgb(128 0 20 / 12%) 0deg 9deg, transparent 9deg 18deg),
        linear-gradient(145deg, #26070d, #0d080a 65%, #21060c);
    box-shadow:
        0 34px 95px rgb(0 0 0 / 82%),
        0 0 52px rgb(138 0 25 / 25%),
        inset 0 1px rgb(255 244 213 / 8%),
        inset 16px 0 28px rgb(0 0 0 / 42%),
        inset -16px 0 28px rgb(0 0 0 / 42%);
}

.page-card h1 {
    padding-top: 0;
    margin-bottom: 28px;
    font-size: clamp(32px, 6vw, 48px);
}

.choice-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.choice-list a {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border: 1px solid rgb(135 43 54 / 55%);
    border-radius: 2px;
    background:
        repeating-linear-gradient(135deg, transparent 0 12px, rgb(255 255 255 / 3%) 12px 18px),
        linear-gradient(100deg, rgb(105 0 18 / 75%), rgb(29 9 13 / 80%));
    color: #f2e7df;
    font-size: 16px;
    font-weight: 650;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.choice-list a::after {
    color: var(--gold);
    content: "→";
    font-size: 20px;
    font-weight: 400;
}

.choice-list a:hover {
    transform: translateY(-2px);
    border-color: #b22b3e;
    background: linear-gradient(100deg, rgb(166 0 28 / 78%), rgb(37 8 13 / 85%));
    box-shadow: 0 0 28px rgb(181 0 32 / 30%);
}

.page-card form {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
}

.page-card input {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid rgb(137 45 56 / 70%);
    border-radius: 2px;
    outline: none;
    background: #0a0608;
    color: #f2e7df;
    font: inherit;
    font-size: 18px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.page-card input:focus {
    border-color: #d02a40;
    box-shadow: 0 0 0 3px rgb(177 0 31 / 26%), 0 0 24px rgb(177 0 31 / 20%);
}

.page-card button {
    min-height: 54px;
    padding: 0 20px;
    border: 1px solid #9a3745;
    border-radius: 2px;
    background:
        repeating-linear-gradient(135deg, transparent 0 12px, rgb(255 255 255 / 7%) 12px 18px),
        repeating-linear-gradient(135deg, transparent 0 16px, rgb(255 255 255 / 11%) 16px 23px),
        linear-gradient(110deg, #a90020, #ed102f 55%, #a90020);
    box-shadow: 0 6px 0 #3f0710, 0 12px 30px rgb(183 0 31 / 38%), inset 0 1px rgb(255 255 255 / 20%);
    color: #f4e9df;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 750;
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.page-card button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #a30720, 0 16px 38px rgb(255 14 43 / 53%);
    filter: brightness(1.1);
}

.back-link {
    position: relative;
    z-index: 1;
    margin: 24px 0 0;
}

.back-link a {
    color: #f1cda0;
    font-size: 14px;
    text-decoration-color: rgb(255 215 130 / 50%);
    text-underline-offset: 4px;
    transition: color 160ms ease;
}

.back-link a:hover {
    color: #fff4d9;
}

.results-card {
    width: min(100%, 580px);
}

.results-card table {
    position: relative;
    z-index: 1;
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 9px;
    font-variant-numeric: tabular-nums;
}

.results-card tr:nth-child(odd) {
    background: linear-gradient(90deg, rgb(255 13 43 / 46%), rgb(255 205 110 / 11%));
}

.results-card tr:nth-child(even) {
    background: rgb(255 240 212 / 4%);
}

.results-card td {
    padding: 12px 16px;
    color: #fff1df;
    text-align: center;
}

.results-card td:nth-child(2),
.results-card td:nth-child(4) {
    color: var(--gold);
}

.jumpscare {
    position: fixed;
    z-index: 10;
    inset: 0;
    display: grid;
    visibility: hidden;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 48%, rgb(255 24 0 / 38%), transparent 39%),
        radial-gradient(ellipse at center, rgb(0 0 0 / 24%), #000 78%);
    opacity: 0;
    pointer-events: none;
}

.jumpscare--active {
    visibility: visible;
    animation: jumpscare-flash 850ms steps(2, end) both;
}

.jumpscare__clown {
    position: relative;
    width: min(78vw, 470px);
    filter: drop-shadow(0 0 35px rgb(255 26 0 / 52%));
    transform: scale(0.08) rotate(-12deg);
}

.jumpscare--active .jumpscare__clown {
    animation: clown-lunge 850ms cubic-bezier(0.12, 0.8, 0.2, 1) both;
}

.jumpscare__portrait {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes clown-lunge {
    0% { transform: scale(0.08) rotate(-12deg); }
    48% { transform: scale(1.16) rotate(3deg); }
    65% { transform: scale(0.96) rotate(-2deg); }
    100% { transform: scale(1.08) rotate(0); }
}

@keyframes jumpscare-flash {
    0% { opacity: 0; }
    12%, 72% { opacity: 1; }
    82% { opacity: 0.35; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .jumpscare--active,
    .jumpscare--active .jumpscare__clown {
        animation-duration: 850ms;
    }

    .jumpscare--active .jumpscare__clown {
        animation-name: none;
        transform: scale(1);
    }
}

.results-card tr:hover {
    background: linear-gradient(90deg, rgb(255 8 39 / 65%), rgb(255 190 91 / 20%));
}

@media (max-width: 560px) {
    body {
        padding: 16px;
    }

    .welcome {
        min-height: 420px;
        padding: 84px 24px 48px;
        border-radius: 18px;
    }

    h1 {
        margin-bottom: 30px;
        font-size: clamp(40px, 12vw, 58px);
    }

    .page-card {
        padding: 58px 22px 32px;
        border-radius: 17px;
    }

    .page-card h1 {
        font-size: clamp(30px, 9vw, 40px);
    }

    .welcome a {
        min-height: 54px;
        padding: 0 20px;
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

:root {
    color: #fff8ed;
    background: #210407;
    --red: #ff1a00;
    --red-light: #ff3b12;
    --gold: #ffe18a;
    --cream: #fff4dc;
    --ink: #210407;
}

body {
    background:
        radial-gradient(ellipse at 50% 48%, transparent 8%, rgb(0 0 0 / 52%) 78%, rgb(0 0 0 / 88%) 115%),
        radial-gradient(ellipse at -8% 45%, rgb(0 0 0 / 86%), transparent 48%),
        radial-gradient(ellipse at 108% 57%, rgb(0 0 0 / 88%), transparent 47%),
        radial-gradient(ellipse at 50% 118%, rgb(0 0 0 / 93%), transparent 54%),
        radial-gradient(ellipse at 10% 0%, rgb(0 0 0 / 67%), transparent 39%),
        radial-gradient(ellipse at 93% 4%, rgb(0 0 0 / 72%), transparent 41%),
        linear-gradient(180deg, rgb(0 0 0 / 62%), transparent 27%, transparent 55%, rgb(0 0 0 / 63%)),
        radial-gradient(ellipse at 50% 0%, rgb(255 35 0 / 40%), transparent 35rem),
        repeating-conic-gradient(from -12deg at 50% -8%, rgb(255 226 174 / 7%) 0deg 9deg, transparent 9deg 18deg),
        repeating-linear-gradient(90deg, rgb(255 255 255 / 2%) 0 2px, transparent 2px 120px),
        #260500;
}

.welcome {
    border: 1px solid rgb(255 215 130 / 45%);
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 50% 88%, rgb(255 35 0 / 44%), transparent 52%),
        radial-gradient(ellipse at 50% -5%, rgb(255 220 171 / 9%), transparent 38%),
        repeating-linear-gradient(92deg, transparent 0 27px, rgb(255 215 182 / 4%) 28px, rgb(0 0 0 / 17%) 31px, transparent 37px 67px),
        repeating-conic-gradient(from -11deg at 50% -18%, rgb(255 222 178 / 8%) 0deg 8deg, transparent 8deg 16deg),
        linear-gradient(145deg, #7b1005, #280604 58%, #691006);
    box-shadow: 0 32px 90px rgb(0 0 0 / 55%), 0 0 68px rgb(255 40 0 / 42%), inset 0 1px rgb(255 244 213 / 18%), inset 16px 0 28px rgb(0 0 0 / 24%), inset -16px 0 28px rgb(0 0 0 / 24%);
}

.welcome::before,
.page-card::before {
    border: 1px dashed rgb(255 215 130 / 48%);
    border-radius: 15px;
    box-shadow: none;
}

.welcome::after {
    height: 74px;
    background:
        radial-gradient(circle at 50% 45%, #fffdf1 0 1.5px, #fff1b1 2px 3.5px, rgb(255 173 47 / 90%) 4px 5px, transparent 5.7px)
        8px 7px / 27px 14px repeat-x,
        radial-gradient(ellipse at 50% 100%, transparent 0 17px, rgb(117 11 22 / 65%) 19px 21px, transparent 23px)
        0 56px / 48px 18px repeat-x,
        linear-gradient(180deg, rgb(255 255 255 / 15%), transparent 38%, rgb(76 0 9 / 18%)),
        repeating-linear-gradient(90deg, #ff1808 0 48px, #fff0d4 48px 96px);
    box-shadow: 0 7px 22px rgb(255 37 0 / 60%), inset 0 -3px #ffcf65, inset 0 2px rgb(255 255 255 / 23%);
}

.page-card::after {
    height: 58px;
    background:
        radial-gradient(circle at 50% 45%, #fffdf1 0 1.5px, #fff1b1 2px 3.5px, rgb(255 173 47 / 90%) 4px 5px, transparent 5.7px)
        8px 5px / 27px 13px repeat-x,
        radial-gradient(ellipse at 50% 100%, transparent 0 15px, rgb(117 11 22 / 65%) 17px 19px, transparent 21px)
        0 43px / 44px 16px repeat-x,
        linear-gradient(180deg, rgb(255 255 255 / 14%), transparent 40%, rgb(76 0 9 / 17%)),
        repeating-linear-gradient(90deg, #ff1808 0 44px, #fff0d4 44px 88px);
    box-shadow: 0 6px 20px rgb(255 37 0 / 58%), inset 0 -3px #ffcf65, inset 0 2px rgb(255 255 255 / 22%);
}

h1 {
    color: var(--cream);
    font-family: "Segoe UI", system-ui, sans-serif;
    text-shadow: 0 4px 0 #780712, 0 0 8px rgb(255 245 208 / 38%), 0 0 32px rgb(255 51 57 / 28%);
}

.welcome a,
.page-card button {
    border: 2px solid #ffe2a0;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 13%), transparent 48%),
        repeating-linear-gradient(135deg, transparent 0 16px, rgb(255 255 255 / 10%) 16px 23px),
        linear-gradient(110deg, #f51b00, #ff3a08 55%, #f51b00);
    box-shadow: 0 7px 0 #8c1308, 0 12px 32px rgb(255 35 0 / 56%), inset 0 1px rgb(255 255 255 / 34%);
    color: #fff8e8;
}

.welcome a:hover,
.page-card button:hover {
    box-shadow: 0 10px 0 #a31b08, 0 17px 40px rgb(255 35 0 / 64%);
}

.page-card {
    border: 1px solid rgb(255 215 130 / 35%);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 100% 0%, rgb(255 46 0 / 40%), transparent 45%),
        repeating-conic-gradient(from -20deg at 50% -12%, rgb(255 220 173 / 7%) 0deg 9deg, transparent 9deg 18deg),
        linear-gradient(145deg, #741006, #230604 65%, #600d05);
    box-shadow: 0 30px 85px rgb(0 0 0 / 58%), 0 0 48px rgb(255 36 0 / 40%), inset 0 1px rgb(255 244 213 / 12%);
}

.choice-list a {
    border-radius: 9px;
    background: linear-gradient(100deg, rgb(245 35 10 / 43%), rgb(255 235 196 / 7%));
    color: #fff2df;
}

.choice-list a:hover {
    border-color: var(--gold);
    background: linear-gradient(100deg, rgb(255 54 12 / 53%), rgb(255 194 100 / 10%));
    box-shadow: 0 0 22px rgb(255 60 0 / 24%);
}

.page-card input {
    border-radius: 9px;
    background: #1b090d;
    color: #fff3e8;
}

.page-card input:focus {
    border-color: #ffb24e;
    box-shadow: 0 0 0 4px rgb(255 38 51 / 24%), 0 0 24px rgb(255 38 51 / 18%);
}

.results-card tr:nth-child(odd) {
    background: linear-gradient(90deg, rgb(255 35 0 / 52%), rgb(255 205 110 / 11%));
}

.results-card tr:nth-child(even) {
    background: rgb(255 240 212 / 4%);
}

.results-card td {
    color: #fff1df;
}

.results-card td:nth-child(2),
.results-card td:nth-child(4) {
    color: var(--gold);
}