/* Ages Below, the floor of the game page: the tokens the game's stylesheets share, the reset, and the view system every screen after the login stands on.
   The Dungeon, the Town, the dev host and the Herald read this file, so it holds nothing that looks like anything. How a screen looks is in its own sheet: game-shell.css
   (the bar, loading, the error, the buttons), game-home.css, game-season.css, game-map.css, game-gear.css. */

:root {
    /* the class colours: GameUtils' tables and the server's ClassDisplay. Each reads at 4.5:1 or better on #14141a and #24242f (ClientClassPaletteTests) */
    --class-tank: #4b9fff;
    --class-melee: #ff4b4b;
    --class-ranged: #4bff4b;
    --class-healer: #ffd700;
    --class-tidecaller: #7fd6ff;
    --class-forgewright: #ff9a4b;
    --class-soulbinder: #9fe3c0;
    --class-chronoblade: #c9a7ff;
    --class-gunslinger: #e0b070;
    --class-ninja: #12a4a0;        /* an evergreen jade: 5.98:1 on #14141a, 5.00:1 on #24242f, and at least 20 ΔE00 from every other colour on a shared surface */

    /* the dungeon's rarity edges */
    --rarity-common: #9d9d9d;
    --rarity-uncommon: #1eff00;
    --rarity-rare: #0070dd;
    --rarity-epic: #a335ee;
    --rarity-legendary: #ff8000;

    /* what the Dungeon and the Town take as their defaults */
    --border-dark: #2a2a35;
    --border-light: #3a3a45;
    --text-primary: #e8e8ec;
    --text-secondary: #9898a8;
    --accent-orange: #ff8b4b;
    --font-xs: 10px;

    /* the bar's height: a finger's size on every screen, and less of a short one. A view that has its own way back gives it up on a phone (game-shell.css) */
    --header-height: 64px;

    /* the layers */
    --z-header: 100;
    --z-modal: 300;
    --z-toast: 400;
    --z-overlay: 500;
}

@media (max-width: 760px) {
    :root { --header-height: 58px; }
}

@media (max-height: 520px) {
    :root { --header-height: 48px; }
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    background: #0f0f15;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a3a45; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4a4a58; }

/* the stage: everything under the bar */
.game-container {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: #0f0f15;
}

.game-view {
    position: absolute;
    inset: 0;
    display: none;
    opacity: 0;
    transition: opacity .16s ease;
    z-index: 5;
}

.game-view.active { display: flex; opacity: 1; }
.game-view.transitioning-out { display: flex; opacity: 0; }
.game-view.transitioning-in { display: flex; opacity: 1; }

.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .game-view { transition: none; }
}

@media print {
    body { display: none; }
}