html, body {
    height: 100%;
    margin: 0;
    background-color: #0d0c11;
    color: #ece7f0;
    font-family: 'Futura Medium', ui-sans-serif, sans-serif;
}
/* Only behind the preloader (as it fades out) and the title screen: on a cold
   load the scripts take a moment to build the preloader, and the image must
   not flash in that gap. */
body:has(.eryx-preloader), body:has(.eryx-title) {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)), url("../assets/images/backgrounds/background.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* Hidden from view, still read by search engines and screen readers. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
#app {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
canvas {
    display: block;
}
/* The game canvas keeps an alpha channel and foliage edges (alpha-to-coverage) leave
   partly transparent pixels: without this backing, the page's title background
   image would show through them as a faint fringe. Warm dark brown, not black. */

#app>canvas {
    background: #2b1b12;
    transition: filter 0.4s ease;
    /* Hypoxia.js sets/clears the desaturate+blur filter */
}
.eryx-preloader, .eryx-title {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    transition: opacity 0.4s ease;
}
.eryx-preloader {
    background: #0d0c11;
    z-index: 10;
}
.eryx-preloader-title {
    font-family: 'Windsor Pro Bold', serif;
    letter-spacing: 2px;
    font-size: 2.4rem;
    margin: 0;
}
.eryx-preloader-bar {
    width: 240px;
    height: 6px;
    background: #241f2c;
    border-radius: 3px;
    overflow: hidden;
}
.eryx-preloader-fill {
    height: 100%;
    width: 0%;
    background: #e9bc21;
    transition: width 0.15s linear;
}
.eryx-preloader-pct {
    font-size: 0.85rem;
    color: #8d8797;
}
/* Hidden until the game's fonts are loaded (PreloadScene adds .fonts-ready):
   no flash of the system font. */
.eryx-preloader-title, .eryx-preloader-pct {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.eryx-preloader.fonts-ready .eryx-preloader-title,
.eryx-preloader.fonts-ready .eryx-preloader-pct {
    opacity: 1;
}
/* Title screen (start and pause) */

.eryx-title {
    z-index: 10;
    gap: 0;
    padding: 30px;
    box-sizing: border-box;
    color: #e9bc21;
    font-family: 'Windsor Pro Bold', Arial, sans-serif;
}
.eryx-title h1 {
    text-shadow: 4px 4px 2px rgb(0, 0, 0);
    font-size: 7vw;
    letter-spacing: 2px;
    text-transform: uppercase;
    filter: none;
    /* blur(1px); */
    margin: 20px;
}
.eryx-title h4 {
    filter: none;
    /* blur(0.65px);*/
    text-shadow: 1px 1px 1px rgb(0, 0, 0);
    font-family: 'Futura Medium', Verdana;
    letter-spacing: 2px;
    font-size: small;
}
.eryx-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.eryx-btns .eryx-btn {
    margin: 0;
}
.eryx-btn {
    font-size: 1.6rem;
    color: #fff;
    text-decoration: none;
    background-color: #ff0000;
    padding: 15px 30px;
    border-radius: 10px;
    border: 2px solid #ff0000;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
    font-family: 'Windsor Pro Bold', Arial, sans-serif;
    margin: 0 50px;
    text-shadow: 1px 1px 1px rgb(0, 0, 0);
}
.eryx-btn:hover {
    background-color: #cc0000;
    border-color: #cc0000;
    transform: translateY(-3px);
}
.eryx-btn:active {
    background-color: #b30000;
    transform: translateY(0);
}
.eryx-about {
    display: block;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: #e9bc21;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: opacity 0.3s ease;
    text-shadow: 1px 1px 1px rgb(0, 0, 0);
}
.eryx-about:hover {
    opacity: 0.8;
}
@media (max-width: 1200px) {
    .eryx-title h1 {
        text-shadow: 2px 3px 1px rgb(0, 0, 0);
        filter: none;
        /* blur(0.6px); */
    }
    .eryx-title h4 {
        filter: none;
        /* blur(0.55px); */
        font-size: x-small;        
    }
}
/* About modal (a <dialog id="about"> in index.html) */

dialog.modal {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: rgba(0, 0, 0, 0.95);
    color: #e9bc21;
    font-family: 'Windsor Pro Bold', Arial, sans-serif;
    overflow-y: auto;
}
dialog.modal::backdrop {
    background: transparent;
}
.modal-content {
    position: relative;
    max-width: 800px;
    margin: 50px auto;
    padding: 40px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #e9bc21;
}
.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 0;
    background: none;
    border: 0;
    color: #e9bc21;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
}
.modal-section {
    margin-bottom: 2.5rem;
}
.modal-section a {
    color: #fff;
    text-decoration: none;
}
.modal-section h2 {
    color: #e9bc21;
    border-bottom: 2px solid #e9bc21;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.modal-section p, .modal-section ul, .modal-section ol {
    color: #fff;
    line-height: 1.6;
    font-size: 1.1rem;
    font-family: verdana;
}
.modal-section .wasd-keys {
    display: block;
    margin: 1rem auto;
    width: 180px;
}
/* About > Inspiration: the Weird Tales cover where the story first appeared, to the right of the text. */
.modal-section .about-cover {
    float: right;
    width: 220px;
    margin: 0.3rem 0 1rem 1.6rem;
}
.modal-section .about-cover img {
    display: block;
    width: 100%;
    height: auto;
    border: 2px solid #e9bc21;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}
.modal-section .about-cover figcaption {
    margin-top: 0.4rem;
    font-family: verdana;
    font-size: 0.8rem;
    color: #b9b2a6;
    text-align: center;
}
.modal-section::after {
    content: '';
    display: block;
    clear: both;
}
@media (max-width: 600px) {
    .modal-section .about-cover {
        width: 130px;
        margin-left: 1rem;
    }
}
.eryx-touch .modal-section .about-cover {
    width: 150px;
}

/* Map modal (M key) — same gold/black look as the About modal */

.eryx-map-modal {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    font-family: 'Windsor Pro Bold', Arial, sans-serif;
    color: #e9bc21;
}
.eryx-map-modal[hidden] {
    display: none;
}
.eryx-map-panel {
    position: relative;
    box-sizing: border-box;
    max-width: 96vw;
    max-height: 96vh;
    padding: 20px 28px 16px;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #e9bc21;
}
.eryx-map-panel h2 {
    margin: 0 0 10px;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #e9bc21;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.eryx-map-panel canvas {
    display: block;
    margin: 0 auto;
    width: min(72vh, 82vw, 640px);
    height: auto;
    aspect-ratio: 1;
}
.eryx-map-close {
    position: absolute;
    top: 10px;
    right: 14px;
    padding: 0;
    background: none;
    border: 0;
    color: #e9bc21;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}
.eryx-map-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    margin: 10px 0 4px;
    font-family: verdana, sans-serif;
    font-size: 0.85rem;
    color: #fff;
}
.eryx-map-legend .you {
    color: #ff2a2a;
}
.eryx-map-legend .core {
    color: #e9bc21;
}
.eryx-map-hint {
    margin: 4px 0 0;
    font-family: verdana, sans-serif;
    font-size: 0.75rem;
    color: #8d8797;
}
/* Paused: hide the game view (the title screen takes over) */

.eryx-paused canvas, .eryx-paused .eryx-vignette, .eryx-paused .eryx-grain {
    visibility: hidden;
}
/* Cinematic film overlays on the game view */

.eryx-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.62) 100%);
}
.eryx-grain {
    position: absolute;
    inset: -50%;
    pointer-events: none;
    z-index: 4;
    opacity: 0.25;
    /* film grain strength (was 0.07) */
    mix-blend-mode: overlay;
    /* monochrome noise (feColorMatrix saturate 0), like silver grain, not colour static */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation: eryx-grain 0.5s steps(5) infinite;
}
@keyframes eryx-grain {
    0% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(-3%, 2%);
    }
    40% {
        transform: translate(2%, -3%);
    }
    60% {
        transform: translate(-2%, -1%);
    }
    80% {
        transform: translate(3%, 3%);
    }
    100% {
        transform: translate(0, 0);
    }
}
/* Oxygen HUD: vintage tank + brass analogue dial, bottom-left of the game view */

.eryx-hud {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    gap: -6px;
    pointer-events: none;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.6));
}
/* Fuel HUD (js/ui/FuelHud.js): the same dial, mirrored to the bottom-right,
   with the Carter M-33 itself as the icon (see .eryx-hud-flamethrower below). */

.eryx-fuel-hud {
    left: auto;
    right: -22px;
}
.eryx-hud-tank {
    width: 46px;
    height: auto;
    margin-right: -10px;
    filter: brightness(0.8) sepia(0.3);
}
/* The source image is level/horizontal (muzzle-left); rotated here into a
   near-vertical icon that pokes out above the dial's upper-right edge. */

.eryx-hud-flamethrower {
    height: 54px;
    width: auto;
    margin-left: -50px;
    margin-bottom: 34px;
    rotate: 77deg;
    transform: scaleX(1);
    filter: brightness(0.8) sepia(0.3);
}
.eryx-hud-dial {
    width: 92px;
    height: 92px;
}
.eryx-hud-needle {
    transform-origin: 60px 60px;
    transition: transform 0.4s ease-out;
}
.eryx-hud-tick {
    font-family: verdana, sans-serif;
    font-size: 9px;
    fill: #d9b45a;
}
.eryx-hud-label {
    font-family: 'Windsor Pro Bold', Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    fill: #d9b45a;
}
.eryx-hud-readout {
    position: absolute;
    left: 30px;
    bottom: 2px;
    min-width: 40px;
    text-align: center;
    font-family: 'Windsor Pro Bold', Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: #e9bc21;
    text-shadow: 1px 1px 1px rgb(0, 0, 0);
}
.eryx-hud.low .eryx-hud-readout, .eryx-hud.low .eryx-hud-label, .eryx-hud.low .eryx-hud-tick {
    fill: #ff4a3a;
    color: #ff4a3a;
}
.eryx-hud.critical {
    animation: eryx-hud-pulse 0.7s ease-in-out infinite;
}
@keyframes eryx-hud-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}
/* Death screen: fades in over whatever is left of the game view, click resets */

.eryx-dead {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #000;
    opacity: 0;
    transition: opacity 2.2s ease;
    cursor: default;
}
.eryx-dead.fade {
    opacity: 1;
}
.eryx-dead.ready {
    cursor: pointer;
}
.eryx-dead h1 {
    margin: 0;
    font-family: 'Windsor Pro Bold', Arial, sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 3rem;
    color: #8a1c14;
    text-shadow: 0 0 24px rgba(138, 28, 20, 0.6);
}
.eryx-dead-time {
    margin: 0;
    font-family: verdana, sans-serif;
    font-size: 1rem;
    color: #6b6b6b;
}
.eryx-dead-hint {
    margin: 2rem 0 0;
    font-family: verdana, sans-serif;
    font-size: 0.85rem;
    color: #4a4a4a;
    opacity: 0;
    transition: opacity 1s ease;
}
.eryx-dead.ready .eryx-dead-hint {
    opacity: 1;
}
/* Hypoxia: tunnel vision that darkens and breathes with the heartbeat, below
   this container's canvas but above the ground/atmosphere (js/player/Hypoxia.js
   drives its opacity every frame; the desaturation/blur/dimming is a filter on
   the canvas itself, set from the same file). */

.eryx-hypoxia {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    background: radial-gradient(ellipse at center, transparent 24%, rgba(10, 4, 2, 0.94) 78%);
}
/* Crystal HUD (js/env/CrystalQuest.js): the recovered crystal, bottom centre,
   hidden until it is in the player's possession. */
.eryx-crystal-hud {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 5;
    transform: translateX(-50%) scale(0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.eryx-crystal-hud.owned {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
.eryx-crystal-hud img {
    display: block;
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 0 8px rgba(255, 50, 20, 0.7));
    animation: eryx-crystal-beat 1.18s ease-in-out infinite;
}
@keyframes eryx-crystal-beat {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 50, 20, 0.5)); }
    12% { filter: drop-shadow(0 0 14px rgba(255, 70, 30, 0.95)); }
    30% { filter: drop-shadow(0 0 10px rgba(255, 60, 25, 0.75)); }
}

/* Intro: solid black while the riser plays at the start of each game (js/main.js). */
.eryx-intro-black {
    position: absolute;
    inset: 0;
    z-index: 9; /* over the game and its HUD (<= 8), under the pause screen (10) */
    background: #000;
    pointer-events: none;
}

/* Debug: wall collision off (GameScene's DEBUG_NOCLIP_KEY). */
.eryx-noclip {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 8;
    padding: 3px 8px;
    font: 12px/1.4 monospace;
    letter-spacing: 1px;
    color: #ff5a3c;
    border: 1px solid #ff5a3c;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.eryx-noclip[hidden] {
    display: none;
}

/* The good ending (DeathScene, won): same screen, gold title. */
.eryx-won h1 {
    color: #e9bc21;
    text-shadow: 0 0 24px rgba(233, 188, 33, 0.45);
}
.eryx-won-text {
    margin: 0;
    font-family: verdana, sans-serif;
    font-size: 1.05rem;
    color: #b9b2a6;
}
.eryx-won .eryx-dead-time {
    margin-top: 1rem;
}

/* Intro text, typed on the black screen before each game (js/ui/IntroText.js). */
.eryx-intro-text {
    position: absolute;
    left: 50%;
    top: 26vh; /* fixed top: the text grows downward, it never jumps */
    transform: translateX(-50%);
    width: min(680px, 84vw);
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(0.95rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    color: #d6cbb8;
    text-shadow: 0 0 8px rgba(214, 203, 184, 0.25);
    transition: opacity var(--fade, 0.8s) ease;
}
/* "LOADING" while the maze is built, where the text will start (js/main.js). */
.eryx-intro-loading {
    position: absolute;
    left: 50%;
    top: 26vh;
    transform: translateX(-50%);
    width: min(680px, 84vw);
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(0.95rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    letter-spacing: 2px;
    color: #d6cbb8;
    opacity: 0.55;
}
.eryx-intro-text p {
    margin: 0 0 1.1em;
}
.eryx-intro-text.out {
    opacity: 0;
}
.eryx-intro-cursor {
    display: inline-block;
    width: 0.6em;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: #d6cbb8;
    animation: eryx-cursor-blink 1s steps(1) infinite;
}
@keyframes eryx-cursor-blink {
    50% { opacity: 0; }
}

/* Cutscene (js/scenes/DwightCutscene.js): black bars, no HUD. */
.eryx-letterbox {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    z-index: 8;
    background: #000;
    pointer-events: none;
    transition: height 0.8s ease;
}
.eryx-letterbox.top { top: 0; }
.eryx-letterbox.bottom { bottom: 0; }
.eryx-cinematic .eryx-letterbox {
    height: 11vh;
}
.eryx-hud {
    transition: opacity 0.6s ease;
}
.eryx-cinematic .eryx-hud,
.eryx-cinematic .eryx-crystal-hud {
    opacity: 0;
}
.eryx-intro-skip {
    position: absolute;
    right: 28px;
    bottom: 22px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: #d6cbb8;
    opacity: 0;
    animation: eryx-skip-in 1s ease 1.5s forwards;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
@keyframes eryx-skip-in {
    to { opacity: 0.4; }
}
.eryx-intro-skip.out {
    animation: none;
    opacity: 0;
}

/* ============================================================
   Phones and tablets (html.eryx-touch, js/util/device.js)
   ============================================================ */

.eryx-touch, .eryx-touch body {
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%; /* iPhone: no automatic text enlarging in landscape */
    text-size-adjust: 100%;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.eryx-touch #app {
    height: 100dvh; /* the visible height, with or without the browser bars */
    touch-action: none;
}

/* Landscape only: upright, this covers everything. */
.eryx-rotate {
    display: none;
}
@media (orientation: portrait) {
    .eryx-touch .eryx-rotate {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 28px;
        background: #0d0c11;
        color: #d6cbb8;
        font-family: 'Courier New', Courier, monospace;
        font-size: 1rem;
        letter-spacing: 1px;
        text-align: center;
        padding: 0 32px;
    }
}
.eryx-rotate-phone {
    width: 46px;
    height: 80px;
    border: 3px solid #e9bc21;
    border-radius: 8px;
    animation: eryx-rotate-turn 2.4s ease-in-out infinite;
}
@keyframes eryx-rotate-turn {
    0%, 20% { transform: rotate(0deg); }
    50%, 80% { transform: rotate(-90deg); }
    100% { transform: rotate(0deg); }
}

/* On-screen controls (js/ui/TouchControls.js): over the game view, under the
   cutscene bars, the intro black and the menus. */
.eryx-touch-ui {
    position: absolute;
    inset: 0;
    z-index: 6;
    touch-action: none;
}
.eryx-cinematic .eryx-touch-ui,
.eryx-paused .eryx-touch-ui {
    visibility: hidden;
}
.eryx-stick {
    position: absolute;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    border: 2px solid rgba(214, 203, 184, 0.35);
    background: rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.eryx-stick.on {
    opacity: 1;
}
.eryx-stick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    border-radius: 50%;
    background: rgba(233, 188, 33, 0.45);
    border: 2px solid rgba(233, 188, 33, 0.8);
}
.eryx-tbtn {
    position: absolute;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(233, 188, 33, 0.7);
    background: rgba(13, 12, 17, 0.45);
    color: #e9bc21;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    touch-action: none;
}
.eryx-tbtn.down {
    background: rgba(233, 188, 33, 0.35);
    color: #fff;
}
/* Right thumb: FIRE (big), MUD and GUN around it, above the fuel gauge. */
.eryx-tbtn-fire {
    right: max(26px, env(safe-area-inset-right));
    bottom: 118px;
    width: 76px;
    height: 76px;
    font-size: 13px;
    border-color: rgba(255, 110, 40, 0.85);
    color: #ff8a4c;
}
.eryx-tbtn-mud {
    right: calc(max(26px, env(safe-area-inset-right)) + 92px);
    bottom: 104px;
}
.eryx-tbtn-gun {
    right: calc(max(26px, env(safe-area-inset-right)) + 12px);
    bottom: 208px;
}
/* Top right: map, hint, pause. */
.eryx-tbtn-map, .eryx-tbtn-hint, .eryx-tbtn-pause {
    top: 14px;
    width: 46px;
    height: 46px;
}
.eryx-tbtn-pause { right: max(16px, env(safe-area-inset-right)); font-size: 13px; }
.eryx-tbtn-map { right: calc(max(16px, env(safe-area-inset-right)) + 58px); }
.eryx-tbtn-hint { right: calc(max(16px, env(safe-area-inset-right)) + 116px); }

/* Smaller gauges on a phone. */
.eryx-touch .eryx-hud {
    transform: scale(0.7);
    transform-origin: bottom left;
    left: max(12px, env(safe-area-inset-left));
    bottom: 10px;
}
.eryx-touch .eryx-fuel-hud {
    transform-origin: bottom right;
    left: auto;
    right: -16px;
}

/* Desktop vs touch instructions (About). */
.eryx-touch-only { display: none; }
.eryx-touch .eryx-touch-only { display: block; }
.eryx-touch .eryx-desktop-only { display: none; }

/* Short screens (a phone held sideways): the intro text starts higher, smaller. */
@media (max-height: 520px) {
    .eryx-intro-text, .eryx-intro-loading {
        top: 7vh;
        font-size: 0.76rem;
        line-height: 1.45;
    }
}

/* Title screen, menu buttons and About, a little smaller on a phone. */
.eryx-touch .eryx-title h1 {
    font-size: 6vw;
    margin: 12px;
}
.eryx-touch .eryx-btn {
    font-size: 1.3rem;
    padding: 11px 24px;
}
.eryx-touch .eryx-about {
    margin-top: 1.4rem;
}
.eryx-touch .modal-section h2 {
    font-size: 1.2rem;
}
.eryx-touch .modal-section p, .eryx-touch .modal-section ul, .eryx-touch .modal-section ol {
    font-size: 0.85rem;
    line-height: 1.5;
}