/* ASCII railjet in the boot splash, replaces the .container loading bar.
   Edge to edge: railjet.js counts how many columns fit in 100vw. */
.rj {
    width: 100vw;
    margin: 0;
    padding: 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: min(18px, calc(100vw / 48));     /* bigger train; phones: shrink so >= 80 columns fit */
    line-height: 1.1;
    white-space: pre;
    color: #ccc;
    background: transparent;
    text-align: left;
    user-select: none;
}

/* class = rj-<char code of the style letter> (see STYLES in railjet.py) */
.rj-103 { color: #5a5c5e; background: #a6aaa8; }            /* g roof band */
.rj-107 { color: #7896aa; background: #161618; }            /* k window band */
.rj-114 { color: #ffd2d2; background: #be1622; }            /* r red body */
.rj-82  { color: #f5f5f5; background: #be1622; font-weight: bold; } /* R railjet */
.rj-88  { color: #f5f5f5; background: #161618; font-weight: bold; } /* X rjx */
.rj-79  { color: #be1622; background: #f5f5f5; font-weight: bold; } /* O ÖBB */
.rj-100 { color: #969696; background: #3a3a3e; }            /* d underframe */
.rj-119 { color: #8c8c8c; }                                 /* w wheels / pantograph */
.rj-99  { color: #6e6e6e; }                                 /* c coupler */
.rj-109 { color: #6e695f; }                                 /* m masts / wire */
.rj-116 { color: #96785a; }                                 /* t rails */
.rj-101 { color: #5f5a50; }                                 /* e ballast */
.rj-112 { color: #c8c8c8; background: #505055; }            /* p platform */
.rj-83  { color: #fff; background: #003c82; font-weight: bold; } /* S station sign */
.rj-80  { color: #ff8c00; font-weight: bold; }              /* P surfers */
.rj-121 { color: #c8aa6e; }                                 /* y rope */
.rj-89  { color: #ffdc00; font-weight: bold; }              /* Y spark core / boom */
.rj-75  { color: #281400; background: #ffdc00; font-weight: bold; } /* K BOOM! */
.rj-87  { color: #fff; font-weight: bold; }                 /* W spark flash */
.rj-66  { color: #6eb4ff; font-weight: bold; }              /* B arc blue */

/* Arc flash + pixel sparks at the pantograph, copied from the desktop title
   hover arc (.tfx-arc / .tfx-px in desktop.css). railjet.js moves them. */
.rj-arc {
    position: fixed;
    left: -32px;
    top: -32px;
    width: 64px;
    height: 64px;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, #fff 0 9%, rgba(215, 252, 255, 0.95) 15%, rgba(110, 220, 255, 0.5) 32%, rgba(60, 180, 255, 0.15) 50%, transparent 68%);
}
.rj-arc::before, .rj-arc::after {
    content: "";
    position: absolute;
    left: -30px;
    right: -30px;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: linear-gradient(90deg, transparent, rgba(160, 235, 255, 0.8) 30%, #fff 50%, rgba(160, 235, 255, 0.8) 70%, transparent);
    transform: rotate(28deg);
}
.rj-arc::after { left: -10px; right: -10px; transform: rotate(-52deg); }

/* 5px cross -> 3px cross -> 2px dot -> 1px dot */
.rj-px {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    pointer-events: none;
    --c: #fff;
}
.rj-s5, .rj-s3 {
    background:
        linear-gradient(var(--c), var(--c)) center / 1px 100% no-repeat,
        linear-gradient(var(--c), var(--c)) center / 100% 1px no-repeat;
}
.rj-s5 { width: 5px; height: 5px; margin: -2px 0 0 -2px; }
.rj-s3 { width: 3px; height: 3px; margin: -1px 0 0 -1px; }
.rj-d2 { width: 2px; height: 2px; background: var(--c); }
.rj-d1 { width: 1px; height: 1px; background: var(--c); }