@font-face {
    font-family: "LondonTube";
    src: url("/static/subway/fonts/LondonTube.ttf") format("truetype");
}

@font-face {
    font-family: "London Underground Medium";
    src: url("/static/subway/fonts/London Underground Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Renslaer";
    src: url("/static/subway/fonts/Renslaer.ttf") format("truetype");
}

@font-face {
    font-family: 'Puffy';
    src: url("/static/subway/fonts/Puffy.otf") format("opentype");
}

@font-face {
    font-family: 'WelcomeDrama';
    src: url("/static/subway/fonts/WelcomeDrama.ttf") format("truetype");
}

@font-face {
    font-family: 'SuperGiggle';
    src: url("/static/subway/fonts/SuperGiggle.ttf") format("truetype");
}

@font-face {
    font-family: 'Kimberley';
    src: url("/static/subway/fonts/kimberley bl.otf") format("opentype");
}

@font-face {
    font-family: 'Kreon';
    src: url('/static/subway/fonts/KreonRegular.ttf') format('truetype');
}

@font-face {
    font-family: 'Kreon';
    src: url('/static/subway/fonts/KreonBold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Kreon';
    src: url('/static/subway/fonts/KreonLight.ttf') format('truetype');
    font-weight: light;
}

@font-face {
    font-family: 'GaliverSansObliquesBold';
    src: url('/static/subway/fonts/GaliverSansObliquesBold.ttf') format('truetype');
}

/* Section Fonts */

@font-face {
    font-family: "ApeMount";
    src: url("/static/subway/fonts/ApeMount.ttf") format("truetype");
}

@font-face {
    font-family: "AstagaDragon";
    src: url("/static/subway/fonts/AstagaDragon.ttf") format("truetype");
}

@font-face {
    font-family: "BeachResort";
    src: url("/static/subway/fonts/BeachResort.ttf") format("truetype");
}

@font-face {
    font-family: "Bullfrog";
    src: url("/static/subway/fonts/Bullfrog.ttf") format("truetype");
}

@font-face {
    font-family: "ChippewaFallsNf";
    src: url("/static/subway/fonts/ChippewaFallsNf.ttf") format("truetype");
}

@font-face {
    font-family: "FingerPaintRegular";
    src: url("/static/subway/fonts/FingerPaintRegular.ttf") format("truetype");
}

@font-face {
    font-family: "MedievalSharpBold";
    src: url("/static/subway/fonts/MedievalSharpBold.ttf") format("truetype");
}

@font-face {
    font-family: "NewWaveAztec";
    src: url("/static/subway/fonts/NewWaveAztec.ttf") format("truetype");
}

@font-face {
    font-family: "ObeliskMxvvRegular";
    src: url("/static/subway/fonts/ObeliskMxvvRegular.ttf") format("truetype");
}

@font-face {
    font-family: "Poultrygeist";
    src: url("/static/subway/fonts/Poultrygeist.ttf") format("truetype");
}

:root {
    --subway-sidebar-color-text: #000033;
    --subway-sidebar-color-light: #57658e;  /* the light and dark colour is the wrong way round, im not renaming all of it */
    --subway-sidebar-color-dark: #7987a2;
    --subway-sidebar-color-button: #bbc;
    --subway-sidebar-color-gray: #707070;
    --subway-sidebar-border-width: 2px;
    --subway-sidebar-border-radius: 8px;
    --subway-sidebar-width-min: 60px;
    --subway-sidebar-width-max: 500px;
    --subway-sidebar-size-icon: 44px;
    --subway-sidebar-padding: 6px;

    --subway-glow-color: white;
    --subway-metal-color: #33292c;
}

.bg-subway-light {
    background-color: var(--subway-sidebar-color-light) !important;
}

.bg-subway-dark {
    background-color: var(--subway-sidebar-color-dark) !important;
}

.bg-subway-gray {
    background-color: var(--subway-sidebar-color-gray) !important;
}

#subway-panzoom, .subway-sidebar, .subway-alert {
    font-family: "LondonTube";
    color: var(--subway-sidebar-color-text);
}

#subway-panzoom[style*="scale(1)"] {
    cursor: default !important; /* prevent move cursor if cant even move (full size) */
}

#subway-panzoom .subway-section-title[useable="1"] text {
    transition: opacity .5s ease;
    opacity: 0;
}

#subway-panzoom[style*="scale(1)"] .subway-section-title[useable="1"] text {
    opacity: 1 !important;
}

.subway-section-title text {
    dominant-baseline: middle;
    text-anchor: middle;
    font-size: 4.0px;

    stroke-width: 0.6px;
    paint-order: stroke;
    text-shadow: 0px 0px 1px black;

    --subway-title-x: 0px;
    --subway-title-y: 0px;
    transform: translate(var(--subway-title-x), var(--subway-title-y));
}

.subway-section-title[useable="0"] text {
    font-size: 3px;
    font-style: italic;
    font-weight: bold;
    font-family: sans-serif;
    stroke: #000;
}

.subway-section-title .subway-section-left {
    --subway-title-x: 1px;
}

.subway-section-title .subway-section-right {
    --subway-title-x: -1px;
}

.subway-section-title[visible="1"] text {
    fill: #888;
    --subway-title-y: -5px;
}

.subway-section-title[visible="0"] text {
    fill: #333;
    --subway-title-y: 0px;
}

.subway-section-title[useable="1"] text {
    --subway-title-y: -6.0px;
}

.subway-section-title[useable="1"] {
    transition: opacity .35s ease;
    pointer-events: none;
}

.subway-section image[href=""],
.subway-section-title image[href=""] {
    display: none;
}

.subway-shadow {
    filter: drop-shadow(0px 0px 0.5px black);
}

@keyframes self-shadow {
    0% {
        filter: drop-shadow(0px 0px 0.03px var(--subway-glow-color)) drop-shadow(0px 0px 0.06px transparent);
    }
    25% {
        filter: drop-shadow(0px 0px 0.03px var(--subway-glow-color)) drop-shadow(0px 0px 0.06px transparent);
    }
    50% {
        filter: drop-shadow(0px 0px 0.03px var(--subway-glow-color)) drop-shadow(0px 0px 0.06px var(--subway-glow-color));
    }
    75% {
        filter: drop-shadow(0px 0px 0.03px var(--subway-glow-color)) drop-shadow(0px 0px 0.06px transparent);
    }
    100% {
        filter: drop-shadow(0px 0px 0.03px var(--subway-glow-color)) drop-shadow(0px 0px 0.06px transparent);
    }
}

svg:has(> image > #subway-self) {
    animation: self-shadow 3s ease-in-out infinite;
}

svg:has(> image > .subway-user:not(#subway-self)) {
    filter: drop-shadow(0px 0px 0.03px black);
}

.subway-node:hover,
.subway-path path[reachable="1"][useable="0"]:hover,
.subway-selected {
    filter: drop-shadow(0px 0px 0.25px black);
    cursor: pointer;
}

.subway-node[useable="0"] {
    opacity: 0.25;
}

.subway-node[type] [type] {
    display: none;
    overflow: visible;
    stroke-width: 0.1px;
}

.subway-node[type][fill="white"] [type] {
    stroke: black;
}

.subway-node[type] [type] path,
.subway-node[type] [type] polygon {
    stroke: black;
    stroke-width: 8%;
}

.subway-node[claimed="1"] [type] {
    fill: gray !important;
}

.subway-node[type=""] [type=""] {
    display: block;
    cx: 0px;
    cy: 0px;
    r: 0.4px;
}

.subway-node[type="section"] [type="section"] {
    display: block;
    fill: white;
    stroke: black;
    x: -0.6px;
    y: -0.375px;
    width: 1.2px;
    height: 0.75px;
}

.subway-node[type="boost"] [type="boost"] {
    display: block;
    fill: orange;
}

.subway-node[type="key"] [type="key"] {
    display: block;
    stroke: black;
    fill: cornflowerblue;
}

.subway-node[type="key"] [type="key"] rect {
    x: -0.4px;
    y: -0.4px;
    width: 0.8px;
    height: 0.8px;
    rx: 0.2px;
}

.subway-node[type="key"] [type="key"] image {
    x: -0.3px;
    y: -0.3px;
    width: 0.6px;
    height: 0.6px;
}

.subway-node[type="blockade"] [type="blockade"] {
    display: block;
    fill: coral;
}

.subway-node[type="shop"] [type="shop"] {
    display: block;
    fill: limegreen;
}

.subway-path path[useable="0"] {
    stroke-dasharray: 0.5 0.25;
    stroke-dashoffset: 0.5;
}

.subway-path path[useable="0"][nextto="1"]:not(.subway-selected):not(:hover) {
    animation: path-nextto 3s ease-in-out infinite;
}

@keyframes path-nextto {
    0% {
        filter: drop-shadow(0px 0px 0.01px transparent) drop-shadow(0px 0px 0.01px transparent);
    }
    20% {
        filter: drop-shadow(0px 0px 0.01px transparent) drop-shadow(0px 0px 0.01px transparent);
    }
    50% {
        filter: drop-shadow(0px 0px 0.01px var(--subway-glow-color)) drop-shadow(0px 0px 0.01px var(--subway-glow-color));
    }
    80% {
        filter: drop-shadow(0px 0px 0.01px transparent) drop-shadow(0px 0px 0.01px transparent);
    }
    100% {
        filter: drop-shadow(0px 0px 0.01px transparent) drop-shadow(0px 0px 0.01px transparent);
    }
}

.subway-path path[reachable="0"],
.subway-keyhole[reachable="0"] {
    opacity: 0.15;
}

.subway-path path[building="1"] {
    stroke-dasharray: 0.5 0.25;
    stroke-dashoffset: 0.5;
    animation: stroke-pulse 3s ease-in-out infinite;
}

@keyframes stroke-pulse {
    0% {
        stroke-dashoffset: 0.5;
        stroke-dasharray: 0.5 0.25;
    }
    20% {
        stroke-dashoffset: 0.5;
        stroke-dasharray: 0.5 0.25;
    }
    50% {
        stroke-dashoffset: 0.625;
        stroke-dasharray: 0.75 0.0;
    }
    80% {
        stroke-dashoffset: 0.5;
        stroke-dasharray: 0.5 0.25;
    }
    100% {
        stroke-dashoffset: 0.5;
        stroke-dasharray: 0.5 0.25;
    }
}

.subway-keyhole {
    pointer-events: none;
}

.subway-stroke {
    pointer-events: none;
    opacity: 0.35;

    stroke: black !important;
    stroke-dasharray: 0.5 0.5;
    stroke-dashoffset: 0;
    animation: stroke 3s linear infinite;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: -1;
    }
}

:has(> .subway-user) {
    pointer-events: none;
    clip-path: url(#user-clip);
    transition: all 2s ease, opacity 0.5s ease;
}

.subway-sidebar {
    /* Want to animate width only if atleast one of the collapse has expanded */
    width: 60px;
    transition: width .35s ease;
    border-radius: var(--subway-sidebar-border-radius);
    box-shadow: 0px 0px 20px 5px black;
    overflow: hidden;
}

.subway-sidebar:has([aria-expanded="true"]) {
    width: min(var(--subway-sidebar-width-max), calc(100% - var(--subway-sidebar-width-min)));
}

.subway-sidebar > * {
    position: relative;

    min-height: calc(var(--subway-sidebar-width-min) - var(--subway-sidebar-padding));
    overflow: hidden;

    background-color: var(--subway-sidebar-color-light);
}

.subway-sidebar > *:last-child {
    min-height: var(--subway-sidebar-width-min);
}

.subway-sidebar > div > button {
    border: none;
    border-radius: var(--subway-sidebar-border-radius);
    background-color: transparent;

    text-align: center;
    line-height: 0;

    position: absolute;
    z-index: 1;
    top: calc(var(--subway-sidebar-padding) + var(--subway-sidebar-border-width));
    right: calc(var(--subway-sidebar-padding) + var(--subway-sidebar-border-width));

    padding: var(--subway-sidebar-padding);
    width: var(--subway-sidebar-size-icon);
    aspect-ratio: 1 / 1;
    font-size: calc(var(--subway-sidebar-size-icon) - calc(var(--subway-sidebar-padding) * 2));
}

.subway-sidebar i {
    width: 100%;
    background-color: var(--subway-sidebar-color-dark);
    transition: color .35s ease;
}

.subway-sidebar button[aria-expanded="true"] i {
    color: white;
}

.subway-sidebar > div > div {
    margin: var(--subway-sidebar-padding);
    margin-bottom: 0px;
    min-height: var(--subway-sidebar-size-icon);

    border-radius: var(--subway-sidebar-border-radius);

    border: var(--subway-sidebar-border-width) solid white;
    background-color: var(--subway-sidebar-color-dark);
    overflow: hidden;
}

.subway-sidebar > div:last-child > div {
    margin-bottom: var(--subway-sidebar-padding);
}

.subway-sidebar-title {
    position: absolute;
    overflow: hidden;

    margin: var(--subway-sidebar-padding);
    padding-left: var(--subway-sidebar-padding);
    width: calc(100% - var(--subway-sidebar-padding) - var(--subway-sidebar-padding));
    height: calc(var(--subway-sidebar-size-icon) - var(--subway-sidebar-padding));

    font-size: 25px;
    font-weight: bold;
}

.subway-sidebar-text {
    width: calc(var(--subway-sidebar-width-max) - calc(var(--subway-sidebar-padding) * 2) - calc(var(--subway-sidebar-border-width) * 2));
    padding: var(--subway-sidebar-padding);
    padding-top: calc(var(--subway-sidebar-size-icon) - var(--subway-sidebar-padding));
}

.subway-sidebar-text > * {
    border-radius: var(--subway-sidebar-border-radius);
    overflow: hidden;
}

#subway-sidebar-coins {
    margin: 0;
}

#subway-sidebar-info > h5 {
    /* allowing newlines to be written */
    white-space: pre-line;
}

#subway-info-button {
    padding: 2px 5px 2px 5px;
    cursor: pointer;
}

#subway-sidebar-news {
    font-size: 13px;
}

#subway-sidebar-boost,
#subway-sidebar-news {
    padding-top: 4px;
    max-height: 350px;
    overflow-y: auto;
    border-radius: 0;
}

#subway-sidebar-boost::-webkit-scrollbar,
#subway-sidebar-news::-webkit-scrollbar {
    width: 25px;
}

#subway-sidebar-boost::-webkit-scrollbar-thumb,
#subway-sidebar-news::-webkit-scrollbar-thumb {
    border: var(--subway-sidebar-padding) var(--subway-sidebar-color-dark) solid;
    background-color: white;
    border-radius: 322px;
}

#subway-sidebar-boost::-webkit-scrollbar-button,
#subway-sidebar-news::-webkit-scrollbar-button {
    display: none;
}

.subway-sidebar-box, .subway-sidebar-button {
    background-color: var(--subway-sidebar-color-light);
    border-radius: var(--subway-sidebar-border-radius);
    border: var(--subway-sidebar-border-width) solid white;
    padding: 4px 8px 4px 8px;
    margin-top: var(--subway-sidebar-padding);
}

.subway-sidebar-box [class*="att_"] {
    text-shadow: 1px 1px black;
}

.subway-sidebar-button {
    background-color: var(--subway-sidebar-color-button);
}

/* Alert */
#subway-alert {
    position: absolute;
    width: min(300px, calc(100vw - calc(var(--subway-sidebar-width-min) * 2)));
}

.subway-alert {
    position: relative;
    width: 100%;

    border-radius: 16px;
    margin: 8px;
    padding: 2px;
    box-shadow: 0px 0px 20px 5px black;
}

body.swal2-height-auto:has(#subway-panzoom) {
    height: 100vh !important;   /* kys */
}

.btn-redsun-event-subway {
    background-color: #111;
    text-shadow: none;

    font-family: 'London Underground Medium';
    filter: blur(0.1px);

    --glow-inner: 2px;
    --glow-outer: 6px;
}

.btn-redsun-event-subway:hover {
    background-color: black;
}

.btn-redsun-event-subway:before {
    content: "🚅";
    position: absolute;
    top: 4px;
    left: 0;
}

.btn-redsun-event-subway:before,
.btn-redsun-event-subway > * {
    transform: scale(1.7) translate(18px, 0px);
    display: inline-block;
    height: 18px;
}

.btn-redsun-event-subway > * {
    padding-left: 30px;
}

/* TITLE */

.subway-title-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: min(120px, 14vw);
    padding: 0px 50px 180px 50px;
}

.subway-title-connect {
    display: flex;
    align-items: flex-end;
}

.subway-title-connect > *:nth-child(1) {
    width: 80px;
    height: 20px;
    border-top-left-radius: 3px;
}

.subway-title-connect > *:nth-child(3) {
    width: min(10vw, 300px);
    height: 20px;
}

.subway-title-connect > *:nth-child(5) {
    width: 80px;
    height: 20px;
    border-top-right-radius: 3px;
}

.subway-title-beam {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.subway-title-beam > *:first-child {
    width: 20px;
    height: 100px;
    background: radial-gradient(farthest-corner at 90% 10%, #bbb3, transparent), linear-gradient(80deg, #bbb3, transparent), #1f191b;
}

.subway-title-beam > *:last-child {
    width: 80px;
    height: 25px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.subway-title-connect > *:not(.subway-title-beam),
.subway-title-beam > * {
    box-shadow: 1px -1px 3px -1px black inset, 0px 1px 1px -1px white inset;
    background: radial-gradient(farthest-corner at 90% 10%, #bbb3, transparent), linear-gradient(185deg, #bbb3, transparent), #1f191b;
}

.subway-title-connect > *:nth-child(1),
.subway-title-connect > *:nth-child(3) {
    box-shadow: -2px -1px 3px -1px black inset, 1px -1px 3px -1px black inset, -1px 1px 1px -1px white inset !important;
}

.subway-title-box {
    --title-box-border-top: 2px;
    --title-box-border-width: 4px;
    --title-box-border-bottom: 8px;

    position: relative;
    padding: 35px 30px 50px 30px;
    background: var(--subway-metal-color);
    border-width: var(--title-box-border-top) var(--title-box-border-width) var(--title-box-border-bottom) var(--title-box-border-width);
    border-style: solid;
    border-color: black;
    border-radius: 10px;
    box-shadow: -1px -1px 3px #fff2 inset;
}

.subway-title-box:before {
    content: "";
    position: absolute;
    top: calc(var(--title-box-border-top) * -1);
    left: calc(var(--title-box-border-width) * -1);
    width: calc(var(--title-box-border-width) * 2 + 100%);
    height: calc(var(--title-box-border-top) + var(--title-box-border-bottom) + 100%);
    border-radius: 10px;
    background: radial-gradient(farthest-corner at 90% 10%, #bbb2, transparent), linear-gradient(210deg, transparent, #bbb2, transparent);
    pointer-events: none;
}

.subway-title-dotmatrix {
    background-color: black;
    padding: calc(16px - 4px) calc(16px - 7.5px) 16px 16px;
    overflow: hidden;

    border-radius: 10px;
    box-shadow: 0px 0px 3px #fff1 inset;
}

.subway-title {
    font-family: 'London Underground Medium';
    filter: blur(0.6px);

    --glow-inner: 7px;
    --glow-outer: 20px;
}

.subway-title-box .subway-title {
    line-height: normal;
    margin-bottom: max(-27px, -3vw);
}

.btn-redsun-event-subway:before,
.btn-redsun-event-subway > *,
.subway-title > * {
    background: radial-gradient(#ffec83, #a5a24c);
    filter: drop-shadow(0px 0px var(--glow-inner) #d28f1b) drop-shadow(0px 0px var(--glow-outer) #d28f1b99);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: normal;
}

/* letter spacings: */
/* Heavy: -10px and -/+5px */
/* Medium: -7.5px and -/+4px */

.subway-title:before,
.subway-title:after {
    content: "lllllllllllllllllllll";
    position: absolute;
    top: 0;
    letter-spacing: -7.5px;
    z-index: -1;

    color: #ffec83;
    opacity: 0.06;
}

.subway-title:before {
    left: calc(50% - 4px);
}

.subway-title:after {
    right: calc(50% + 4px);
}

/* BRICKS */

.subway-bricks {
    position: relative;
    background: url("/static/subway/imgs/tiles/bricks.png"), #515056;
    background-position: calc(50% + 96px) 0%;
}

.subway-bricks > * {
    position: relative;
    z-index: 10;
}

.subway-bricks:before,
.subway-bricks:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.subway-bricks:before {
    background-image: url("/static/subway/imgs/tiles/bricks.png");
    background-position: calc(50% + 96px) 0%;
    filter: url(#bricks-noise);
}

.subway-bricks:after {
    background-image: url("/static/subway/imgs/tiles/shadow.png");
    background-position: calc(50% + 96px) 0%;
    opacity: 0.15;
}

.subway-bricks-spacer {
    height: 129px;
    background-position-y: 1px;
}

.subway-bricks-tiles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    z-index: 0;
    background-position: 50% 64px;
}

.subway-bricks-text {
    color: black;
    font-family: "Renslaer";
    height: 256px;
}

.subway-bricks-text > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: min(100px, 14vw);
    white-space: nowrap;
    letter-spacing: 4px;

    background: url("/static/subway/imgs/tiles/bricks.png");
    background-position: 50% 50%;
    filter: url(#color-brown);

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.subway-bricks-text > div > span {
    font-family: none;
    transform: translate(-150%, -10px);

    position: absolute;
    color: white;
}

.subway-bricks-text > div > span:last-child {
    transform: translate(50%, -10px);
}

/* METROBOARD */

.subway-border {
    display: flex;
    flex-wrap: wrap;

    width: 100%;
    padding: 20px 50px 50px 50px;
    margin: auto 0 auto 0;
}

.subway-border > *:nth-child(1),
.subway-border > *:nth-child(3) {
    flex: 0 0 auto;
    width: 32px;
    background: linear-gradient(to right, #999999, #8c8783);
    box-shadow: 1px 2px 4px #fffa inset, -1px -2px 4px #0006 inset, 0px 0px 10px 3px black;
}
.subway-border > *:nth-child(2) {
    flex: 1 0 0;
    z-index: 1;
}

.subway-border > *:nth-child(2) > *:nth-child(1),
.subway-border > *:nth-child(2) > *:nth-child(3) {
    position: relative;
    height: 32px;
    background: linear-gradient(to bottom, #ada7a9 0%, #797374 100%);
    box-shadow: 0px 4px 4px #fffa inset, 0px -4px 4px #0006 inset, 0px 0px 3px 1px black;
}

.subway-border > *:nth-child(2) > *:nth-child(1):before {
    content: "Metroboard";
    font-weight: bold;
    font-family: sans-serif;
    font-size: 12px;
    color: #ccc;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: linear-gradient(#12498d, #073a75);
    box-shadow: 0px 0px 1px black;
    border-radius: 3px;
    padding: 0px 8px;
}


.subway-border > *:nth-child(2) > *:nth-child(2) {
    box-shadow: 0px 1px 3px inset black;
}

.subway-center {
    display: flex;
    justify-content: center;
}

/* OTHER MAIN EVENT */

.subway-background-welcome {
    background-size: cover;
    background-position: center;
    background-color: goldenrod !important;
    box-shadow: 0px 1px 3px inset black, 0px 0px 2px 12px inset gold !important;
    padding: 16px;
}

.subway-background-welcome svg {
    filter:
        drop-shadow(-1px -1px 0 white)
        drop-shadow(-1px 1px 0 white)
        drop-shadow(1px -1px 0 white)
        drop-shadow(1px 1px 0 white)
        drop-shadow(-2px -2px 0 black)
        drop-shadow(-2px 2px 0 black)
        drop-shadow(2px -2px 0 black)
        drop-shadow(2px 2px 0 black)
        drop-shadow(10px 10px 0 black);
}

.subway-background-welcome text {
    transform: perspective(100px) rotate(-5deg) rotateX(2deg) rotateY(-0deg) skewX(-10deg);
}

.subway-background-welcome text > tspan {
    font-family: 'Puffy';
    font-size: 150px;
    letter-spacing: 8px;
    stroke-width: 8px;

    text-align: center;
}

.subway-background-welcome h2 {
    text-align: left;
    padding-left: 10px;

    font-size: min(70px, 7vw);
    filter:
        drop-shadow(-2px -2px 0 black)
        drop-shadow(-2px 2px 0 black)
        drop-shadow(2px -2px 0 black)
        drop-shadow(2px 5px 0 black);
}

.subway-background-welcome h3 {
    text-align: end;

    font-size: min(30px, 2vw);
    filter:
        drop-shadow(-1px -1px 0 black)
        drop-shadow(-1px 1px 0 black)
        drop-shadow(1px -1px 0 black)
        drop-shadow(1px 3px 0 black);
}

.subway-background-welcome h2,
.subway-background-welcome h3 {
    font-family: 'WelcomeDrama';
    color: gold;
}

.subway-map {
    position: relative;
    overflow: hidden;
    aspect-ratio: 100 / 70;
}

.subway-map-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--subway-sidebar-color-dark);
    text-shadow:
        2px 2px white,
        -2px 2px white,
        2px -2px white,
        -2px -2px white;

    background-color: #0002;
    box-shadow: 0px 0px 100px black inset;
    font-size: 50px;
    font-weight: bold;

    opacity: 0;
    transition: opacity .35s ease;
}

.subway-map-hover:hover {
    opacity: 1;
}

.subway-text-border {
    text-shadow:
        var(--border-width) var(--border-width) var(--subway-sidebar-color-text),
        var(--border-width) calc(var(--border-width) * -1) var(--subway-sidebar-color-text),
        calc(var(--border-width) * -1) var(--border-width) var(--subway-sidebar-color-text),
        calc(var(--border-width) * -1) calc(var(--border-width) * -1) var(--subway-sidebar-color-text);
}

/* CREDITS */

.subway-background-credits {
    background-size: cover;
    background-position: center;
}

.subway-background-credits h1 {
    font-weight: bold;
}

.subway-background-credits h1,
.subway-background-credits h2,
.subway-background-credits small {
    color: #024;
    filter: drop-shadow(0 0 2px #0004);

    font-family: 'LondonTube';
    position: relative;
    z-index: 10;
}

/* BOOST */

.subway-background-boost {
    background: repeating-conic-gradient(from 9deg at 50% 145px, chocolate 0%, chocolate 5%, burlywood 5%, burlywood 10%);
}

.subway-background-boost-icon {
    position: absolute;
    width: 100%;
    aspect-ratio: 3 / 2;
    display: flex;
    justify-content: center;
}

.subway-background-boost h3 {
    font-family: 'SuperGiggle';

    -webkit-text-stroke: 2px darkred;
    color: darkorange;

    font-size: 30px;
    padding: 15px 0px 0px 15px;
    margin-bottom: 100px;
    transform: translate(0, 0);
}

.subway-background-boost h1 {
    font-family: 'Kimberley';

    background-image: linear-gradient(goldenrod, darkorange);
    color: transparent;
    background-clip: text;

    filter: drop-shadow(0px 0px 2px black);
    text-align: center;
    -webkit-text-stroke: var(--border-width) saddlebrown;
}

.subway-background-boost h2 {
    font-family: system-ui;
    font-weight: bold;
    font-size 25px;

    color: darkorange;
    -webkit-text-stroke: 1px black;
}

.subway-background-boost small {
    color: black;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 8px;
}

/* TUBE SCOOP */

.subway-background-tubescoop {
        --subway-sidebar-color-text: #000033;
    --subway-sidebar-color-light: #9999aa;
    --subway-sidebar-color-dark: #586c92;
    --subway-sidebar-color-gray: gray;

    background: linear-gradient(#9e9eaf, #9393ad);
}

.subway-background-tubescoop h1 {
    font-family: 'Kreon';
    font-weight: bold;
    text-align: center;
    font-size: 50px;
    line-height: 55px;

    padding-top: 20px;

    color: #2777ad;

    --border-color: var(--subway-sidebar-color-text);
    --border-width: 2px;
}

.subway-background-tubescoop h1 span {
    font-size: 80px;
}

.subway-background-tubescoop h2 {
    font-family: 'Kreon';
    font-weight: bold;
    font-size: 30px;

    padding: 5px 5px 5px 15px;
    margin: 0;

    color: #aacadb;

    --border-color: var(--subway-sidebar-color-text);
    --border-width: 1px;
}

.subway-background-tubescoop h2 span {
    color: #2777ad;
}

.subway-background-snubby {
    width: 225px;
    padding: 0 16px 16px 16px;

    background: radial-gradient(circle at center, #0008 0%, transparent 60%);
}

.subway-background-snubby img {
    width: 100%;

    filter:
        drop-shadow(1px 1px 0 black)
        drop-shadow(1px -1px 0 black)
        drop-shadow(-1px 1px 0 black)
        drop-shadow(-1px -1px 0 black)
        drop-shadow(0 0 5px #0008);
}

/* TF2Ware */

.subway-background-tf2ware h1 {
    font-family: 'GaliverSansObliquesBold';
    font-size: 4vw;

    color: #ef3c39;
    -webkit-text-stroke: 1.5px white;

    filter: drop-shadow(-1px -1px 0 #b7242b)
        drop-shadow(-1px 1px 0 #b7242b)
        drop-shadow(1px -1px 0 #b7242b)
        drop-shadow(1px 1px 0 #b7242b)
        drop-shadow(-1px -1px 0 #b7242b)
        drop-shadow(-1px 1px 0 #b7242b)
        drop-shadow(1px -1px 0 #b7242b)
        drop-shadow(1px 1px 0 #b7242b)
        drop-shadow(0 0 10px black);
}

/* Crate */

.subway-background-crate {
    position: relative;
    aspect-ratio: 4 / 3;

    background-position: center;
    background-size: cover;
}

.subway-background-crate h1 {
    text-align: center;
    color: var(--redsun-orange-text-hover);
    text-shadow: -2px 2px 0 black !important;
}

.subway-background-crate h2 {
    text-align: center;
    text-shadow: -1px 1px 0 black !important;
    font-weight: bold;
}

.subway-background-crate small {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    color: black;

    width: 100%;
    text-align: right;
}

/* Warp Zone */

.retro-warp > *,
.retro-zone > * {
    font-size: 75px !important;
    border-width: 10px !important;
}

/* Other Gamemodes */

.subway-background-gamemodes > h1 {
    padding: 16px 0 16px 0;
    margin: 0;

    background-color: var(--redsun-light);
}

.subway-background-gamemodes > div {
    aspect-ratio: 3 / 1;

    background-position: center;
    background-size: cover;

    border: 0 solid var(--redsun-darker);
    border-top-width: 10px;
}

.subway-background-freeze {
    position: relative;
    text-align: center;
    align-content: center;
}

.subway-background-freeze img {
    padding-bottom: 10%;
}

.subway-background-freeze div {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 2% 8%;
}

.subway-background-freeze span {
    font-size: 32px;
    font-family: 'Times New Roman';
    color: black;
    vertical-align: middle;
}

.subway-background-prop img {
    margin-left: 12%;
    padding-top: 2%;
}

.subway-background-squad {
    text-align: right;
}

.subway-background-squad img {
    width: 20%;
    margin-right: 13%;
    padding-top: 1%;
    filter: drop-shadow(0 0 6px #0004);
}