/* ==========================================================================
   Arcade — a pixel-art portfolio theme
   Layout: a sticky HUD over one column of game "screens" (max 1120px). Each
   screen borrows a different device from games: title screen, character
   select, world map, cartridges, inventory, trophy room, continue screen.
   Palette: PICO-8 (plus its hidden darker blue). Night is the default; day
   follows the OS preference or the HUD toggle.
   ========================================================================== */

:root {
    /* night (default) */
    --bg: #111d35;
    --bg-deep: #0a1226;
    --panel: #1d2b53;
    --panel-2: #26386a;
    --edge: #04060d;
    --shadow: #04060d;
    --ink: #fff1e8;
    --ink-2: #c2c3c7;
    --ink-3: #8f8cad;
    --hl: #ffec27;
    --link: #29adff;
    --live: #00e436;
    --on-live: #04230f;
    --hot: #ff004d;
    --love: #ff77a8;
    --chip: #2c3d70;
    --path: #ffa300;
    --title-shadow: #7e2553;
    --title-ink: #fff1e8;
    --title-ink-shadow: #04060d;
    --day-only: none;
    --night-only: inline-block;
    --grid: rgba(255, 241, 232, 0.035);
    --r-common: #c2c3c7;
    --r-uncommon: #00e436;
    --r-rare: #29adff;
    --r-epic: #ff77a8;
    --r-legendary: #ffa300;
    --plastic: #a7a5b4;
    --plastic-lo: #6d6a80;
    --plastic-edge: #04060d;

    /* the same in both themes: printed labels, the logo, the console */
    --label-bg: #fff1e8;
    --label-ink: #1d2b53;
    --label-ink-2: #4a4f72;
    --logo-1: #ffec27;
    --logo-2: #ffa300;
    --logo-3: #ab5236;
    --logo-edge: #1d2b53;
    --gold: #ffa300;
    --con-bg: rgba(6, 9, 20, 0.96);
    --con-ink: #fff1e8;
    --con-dim: #8f8cad;
    --con-hl: #ffec27;
    --con-ok: #00e436;
    --con-err: #ff004d;
    --con-link: #29adff;
    --con-love: #ff77a8;
    --grass: #00e436;
    --grass-lo: #008751;
    --dirt: #ab5236;
    --dirt-lo: #742f29;

    --f-display: "Jersey 10", "Silkscreen", ui-monospace, monospace;
    --f-ui: "Silkscreen", ui-monospace, "Cascadia Mono", monospace;
    --f-body: "VT323", ui-monospace, "Cascadia Mono", "Consolas", monospace;

    --px: 4px;
    --wrap: 1120px;
    --gutter: clamp(16px, 4vw, 32px);
    color-scheme: dark;
}

/* day */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: #dde8f2;
        --bg-deep: #c7d6e6;
        --panel: #fbf8f4;
        --panel-2: #eaf0f8;
        --edge: #1d2b53;
        --shadow: #1d2b53;
        --ink: #1d2b53;
        --ink-2: #3b4670;
        --ink-3: #636887;
        --hl: #be1250;
        --link: #065ab5;
        --live: #008751;
        --on-live: #fff1e8;
        --hot: #be1250;
        --love: #c2185b;
        --chip: #dfe6f2;
        --path: #ab5236;
        --title-shadow: #29adff;
        --title-ink: #1d2b53;
        --title-ink-shadow: rgba(255, 241, 232, 0.85);
        --day-only: inline-block;
        --night-only: none;
        --grid: rgba(29, 43, 83, 0.05);
        --r-common: #636887;
        --r-uncommon: #008751;
        --r-rare: #065ab5;
        --r-epic: #a3165f;
        --r-legendary: #b85c00;
        --plastic: #c2c3c7;
        --plastic-lo: #8f8cad;
        --plastic-edge: #1d2b53;
        color-scheme: light;
    }
}

:root[data-theme="light"] {
    --bg: #dde8f2;
    --bg-deep: #c7d6e6;
    --panel: #fbf8f4;
    --panel-2: #eaf0f8;
    --edge: #1d2b53;
    --shadow: #1d2b53;
    --ink: #1d2b53;
    --ink-2: #3b4670;
    --ink-3: #636887;
    --hl: #be1250;
    --link: #065ab5;
    --live: #008751;
    --on-live: #fff1e8;
    --hot: #be1250;
    --love: #c2185b;
    --chip: #dfe6f2;
    --path: #ab5236;
    --title-shadow: #29adff;
    --title-ink: #1d2b53;
    --title-ink-shadow: rgba(255, 241, 232, 0.85);
    --day-only: inline-block;
    --night-only: none;
    --grid: rgba(29, 43, 83, 0.05);
    --r-common: #636887;
    --r-uncommon: #008751;
    --r-rare: #065ab5;
    --r-epic: #a3165f;
    --r-legendary: #b85c00;
    --plastic: #c2c3c7;
    --plastic-lo: #8f8cad;
    --plastic-edge: #1d2b53;
    color-scheme: light;
}

/* ---------- base ---------- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--bg);
    background-image:
        linear-gradient(var(--grid) 2px, transparent 2px),
        linear-gradient(90deg, var(--grid) 2px, transparent 2px);
    background-size: 32px 32px;
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 22px;
    line-height: 1.3;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    overflow-x: hidden;
}

img,
svg,
canvas {
    max-width: 100%;
}

a {
    color: var(--link);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--hl);
}

p {
    margin: 0;
}

kbd,
code {
    font-family: var(--f-body);
    font-size: 0.95em;
    padding: 0 6px;
    background: var(--chip);
    color: var(--ink);
}

/* pixel fonts draw ~ as a tiny squiggle; keycaps use a plain monospace */
kbd {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.8em;
    font-weight: 700;
}

:focus-visible {
    outline: 3px dashed var(--hl);
    outline-offset: 4px;
}

.muted {
    color: var(--ink-3);
}

.icon {
    flex: none;
    display: inline-block;
    vertical-align: middle;
    shape-rendering: crispEdges;
}

.skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 300;
    padding: 8px 12px;
    background: var(--hl);
    color: var(--bg);
    font: 700 14px var(--f-ui);
}

.skip:focus {
    top: 12px;
}

/* A box with a notched pixel border and a stepped hard shadow (no corners). */
.box,
.dialog,
.char,
.level-card,
.level-pin,
.paper,
.talk,
.item,
.ability,
.trophies,
.quests,
.bonus li,
.title-menu,
.lang {
    background: var(--panel);
    box-shadow:
        calc(var(--px) * -1) 0 0 0 var(--edge),
        var(--px) 0 0 0 var(--edge),
        0 calc(var(--px) * -1) 0 0 var(--edge),
        0 var(--px) 0 0 var(--edge),
        var(--px) calc(var(--px) * 2) 0 0 var(--shadow),
        calc(var(--px) * 2) var(--px) 0 0 var(--shadow);
}

/* Stepped right-pointing triangle, used as the menu cursor */
.cursor-tri {
    display: inline-block;
    width: 8px;
    height: 12px;
    background: currentColor;
    clip-path: polygon(0 0, 25% 0, 25% 16.6%, 50% 16.6%, 50% 33.3%, 75% 33.3%, 75% 41.6%, 100% 41.6%, 100% 58.3%, 75% 58.3%, 75% 66.6%, 50% 66.6%, 50% 83.3%, 25% 83.3%, 25% 100%, 0 100%);
}

/* ---------- buttons & chips ---------- */

.btn {
    --btn-bg: var(--panel-2);
    --btn-ink: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 12px;
    border: 0;
    background: var(--btn-bg);
    color: var(--btn-ink);
    font: 700 14px/1 var(--f-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        calc(var(--px) * -1) 0 0 0 var(--edge),
        var(--px) 0 0 0 var(--edge),
        0 calc(var(--px) * -1) 0 0 var(--edge),
        0 var(--px) 0 0 var(--edge),
        inset 0 -4px 0 0 rgba(0, 0, 0, 0.25),
        0 calc(var(--px) * 2) 0 0 var(--shadow);
}

.btn:hover {
    --btn-bg: var(--hl);
    --btn-ink: var(--bg);
    color: var(--btn-ink);
}

.btn:active {
    transform: translateY(4px);
    box-shadow:
        calc(var(--px) * -1) 0 0 0 var(--edge),
        var(--px) 0 0 0 var(--edge),
        0 calc(var(--px) * -1) 0 0 var(--edge),
        0 var(--px) 0 0 var(--edge);
}

.btn-small {
    padding: 6px 10px 8px;
    font-size: 11px;
    gap: 6px;
}

.btn-big {
    padding: 14px 20px 16px;
    font-size: 15px;
}

.btn-gold {
    --btn-bg: var(--gold);
    --btn-ink: #1d2b53;
}

.chip {
    display: inline-block;
    padding: 4px 8px 5px;
    background: var(--chip);
    color: var(--ink-2);
    font: 700 11px/1 var(--f-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chip-live {
    background: var(--live);
    color: var(--on-live);
}

.chip-live::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    vertical-align: 1px;
    background: currentColor;
    animation: blink 1s steps(1) infinite;
}

.chip-done {
    background: transparent;
    color: var(--ink-3);
    box-shadow: inset 0 0 0 2px currentColor;
}

.chip-gold {
    background: var(--gold);
    color: #1d2b53;
}

.tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0 0;
    padding: 0;
}

.tags li {
    padding: 4px 8px 5px;
    background: var(--chip);
    color: var(--ink-2);
    font: 11px/1 var(--f-ui);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ==========================================================================
   HUD
   ========================================================================== */

.hud {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    background: var(--bg-deep);
    box-shadow: 0 4px 0 0 var(--edge);
}

.hud-inner {
    max-width: calc(var(--wrap) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 10px var(--gutter);
    display: flex;
    align-items: center;
    gap: 20px;
}

.hud-player {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
    font: 700 14px/1 var(--f-ui);
    letter-spacing: 0.06em;
}

.hud-1up {
    color: var(--hot);
    animation: blink 1.2s steps(1) infinite;
}

.hud-score {
    font-variant-numeric: tabular-nums;
}

.hud-score.bump {
    color: var(--hl);
}

.hud-links {
    list-style: none;
    display: flex;
    gap: 2px;
    margin: 0 auto;
    padding: 0;
}

.hud-links a {
    position: relative;
    display: block;
    padding: 8px 8px 8px 18px;
    color: var(--ink-2);
    font: 12px/1 var(--f-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.hud-links a::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 8px;
    height: 12px;
    margin-top: -6px;
    background: currentColor;
    clip-path: polygon(0 0, 25% 0, 25% 16.6%, 50% 16.6%, 50% 33.3%, 75% 33.3%, 75% 41.6%, 100% 41.6%, 100% 58.3%, 75% 58.3%, 75% 66.6%, 50% 66.6%, 50% 83.3%, 25% 83.3%, 25% 100%, 0 100%);
    visibility: hidden;
}

.hud-links a:hover,
.hud-links a.active {
    color: var(--hl);
}

.hud-links a.active::before {
    visibility: visible;
    animation: nudge 0.8s steps(1) infinite;
}

.hud-tools {
    display: flex;
    gap: 12px;
}

.hud-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: var(--panel);
    color: var(--ink);
    cursor: pointer;
    box-shadow:
        -3px 0 0 0 var(--edge),
        3px 0 0 0 var(--edge),
        0 -3px 0 0 var(--edge),
        0 3px 0 0 var(--edge);
}

.hud-btn:hover {
    color: var(--hl);
}

/* the toggle shows where you'd go: a sun at night, a moon by day */
.hud-btn .is-night {
    display: var(--day-only);
}

.hud-btn .is-day {
    display: var(--night-only);
}

.hud-menu {
    display: none;
    margin-left: auto;
    padding: 9px 12px;
    border: 0;
    background: var(--panel);
    color: var(--ink);
    font: 700 12px/1 var(--f-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        -3px 0 0 0 var(--edge),
        3px 0 0 0 var(--edge),
        0 -3px 0 0 var(--edge),
        0 3px 0 0 var(--edge);
}

/* ==========================================================================
   Title screen
   ========================================================================== */

.title {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 600px;
    padding: clamp(36px, 5vw, 64px) var(--gutter) 270px;
    background: linear-gradient(var(--bg-deep), var(--panel));
}

.scene {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    max-width: none;
    image-rendering: pixelated;
}

.title-inner {
    max-width: var(--wrap);
    margin: 0 auto;
}

.kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--title-ink);
    font: 700 13px/1 var(--f-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 var(--title-ink-shadow);
}

.kicker-dot {
    width: 10px;
    height: 10px;
    background: #ff004d;
    box-shadow: 2px 2px 0 #04060d;
    animation: blink 1s steps(1) infinite;
}

.logo {
    display: flex;
    flex-direction: column;
    margin: 0 0 22px;
    font: 400 clamp(76px, 11vw, 150px)/0.78 var(--f-display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.logo-line {
    display: block;
    width: fit-content;
    color: var(--logo-1);
    background: linear-gradient(var(--logo-1) 0 52%, var(--logo-2) 52% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 -4px 0 var(--logo-edge))
        drop-shadow(0 4px 0 var(--logo-edge))
        drop-shadow(-4px 0 0 var(--logo-edge))
        drop-shadow(4px 0 0 var(--logo-edge))
        drop-shadow(6px 6px 0 var(--logo-3))
        drop-shadow(4px 4px 0 #04060d);
}

.logo-line + .logo-line {
    margin-left: clamp(24px, 6vw, 96px);
}

.classes {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 22px;
    padding: 0;
}

.classes li {
    padding: 7px 12px 8px;
    color: #fff1e8;
    font: 700 12px/1 var(--f-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow:
        -3px 0 0 0 #04060d,
        3px 0 0 0 #04060d,
        0 -3px 0 0 #04060d,
        0 3px 0 0 #04060d,
        3px 6px 0 0 #04060d;
}

.class-phd { background: #7e2553; }
.class-ops { background: #065ab5; }
.class-edu { background: #008751; }

.title-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 28px 48px;
}

.title-blurb {
    max-width: 30ch;
    padding-top: 6px;
    color: var(--title-ink);
    font-size: 26px;
    line-height: 1.15;
    text-shadow: 2px 2px 0 var(--title-ink-shadow);
}

.title-menu {
    width: fit-content;
    padding: 14px 18px;
}

.title-menu ul {
    list-style: none;
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.title-menu a,
.title-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--ink);
    font: 700 15px/1 var(--f-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.title-menu kbd {
    padding: 3px 6px;
    font-size: 14px;
    line-height: 1;
}

.title-menu .cursor {
    color: var(--hl);
    visibility: hidden;
}

.title-menu a:hover,
.title-menu button:hover,
.title-menu a:focus-visible,
.title-menu button:focus-visible {
    color: var(--hl);
    outline: none;
}

.title-menu li:hover .cursor,
.title-menu a:focus-visible .cursor,
.title-menu button:focus-visible .cursor,
.title-menu ul:not(:hover):not(:focus-within) li:first-child .cursor {
    visibility: visible;
    animation: nudge 0.8s steps(1) infinite;
}

.avatar-hit {
    position: absolute;
    z-index: 2;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.bubble {
    position: absolute;
    z-index: 3;
    width: max-content;
    max-width: min(240px, 70vw);
    padding: 8px 10px 9px;
    background: #fff1e8;
    color: #1d2b53;
    font: 700 11px/1.35 var(--f-ui);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transform: translate(-50%, -100%);
    box-shadow: -3px 0 0 0 #1d2b53, 3px 0 0 0 #1d2b53, 0 -3px 0 0 #1d2b53, 0 3px 0 0 #1d2b53;
    opacity: 0;
    pointer-events: none;
}

.bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 9px;
    height: 6px;
    margin-left: -4px;
    background: #fff1e8;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 66% 50%, 66% 100%, 33% 100%, 33% 50%, 0 50%);
}

.bubble.show {
    animation: bubble 3s steps(1) forwards;
}

/* ==========================================================================
   Screens (sections)
   ========================================================================== */

.screen {
    max-width: calc(var(--wrap) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 112px var(--gutter) 16px;
}

.screen-head {
    margin-bottom: 48px;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--hl);
    font: 700 13px/1 var(--f-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 10px;
    height: 10px;
    background: currentColor;
}

.screen-title {
    margin: 0;
    font: 400 clamp(64px, 9vw, 112px)/0.8 var(--f-display);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 5px 5px 0 var(--title-shadow);
}

.screen-lead {
    max-width: 58ch;
    margin-top: 16px;
    color: var(--ink-2);
    font-size: 24px;
}

.sub-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 56px 0 24px;
    font: 700 16px/1.2 var(--f-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.count {
    padding: 4px 8px;
    background: var(--chip);
    color: var(--ink-2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* ---------- About: player select ---------- */

.about-grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.char {
    margin: 0;
    padding: 0 0 20px;
}

.char-stage {
    position: relative;
    display: grid;
    place-items: end center;
    padding: 24px 24px 0;
    background:
        linear-gradient(transparent 82%, rgba(0, 0, 0, 0.18) 82% 100%),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.03) 22px 44px),
        linear-gradient(#29adff 0 0) top / 100% 0 no-repeat,
        linear-gradient(var(--panel-2), var(--panel));
}

.char-stage::before {
    /* spotlight */
    content: "";
    position: absolute;
    inset: 0 18% 0;
    background: linear-gradient(rgba(255, 236, 39, 0.16), rgba(255, 236, 39, 0.02));
    clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}

.char-portrait {
    position: relative;
    display: block;
    width: 224px;
    height: 224px;
}

.char-plate {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 20px;
    padding: 12px 14px;
    background: var(--bg-deep);
    font: 400 40px/0.8 var(--f-display);
    text-transform: uppercase;
    box-shadow: 0 -4px 0 0 var(--edge);
}

.char-p1 {
    padding: 4px 6px;
    background: var(--hot);
    color: #fff1e8;
    font: 700 12px/1 var(--f-ui);
}

.char-sheet {
    display: grid;
    gap: 10px;
    margin: 18px 20px 0;
}

.char-sheet div {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
}

.char-sheet dt {
    color: var(--ink-3);
    font: 700 11px/1 var(--f-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.char-sheet dd {
    margin: 0;
    color: var(--ink);
    font-size: 21px;
    line-height: 1.1;
}

.dialog {
    position: relative;
    padding: 36px 36px 40px;
    --edge: var(--ink);
}

.dialog-name {
    position: absolute;
    top: -20px;
    left: 24px;
    padding: 8px 12px 9px;
    background: var(--hl);
    color: var(--bg);
    font: 700 13px/1 var(--f-ui);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dialog-next {
    position: absolute;
    right: 20px;
    bottom: 14px;
    width: 14px;
    height: 10px;
    background: var(--hl);
    clip-path: polygon(0 0, 100% 0, 100% 20%, 85% 20%, 85% 40%, 71% 40%, 71% 60%, 57% 60%, 57% 80%, 43% 80%, 43% 60%, 29% 60%, 29% 40%, 15% 40%, 15% 20%, 0 20%);
    animation: bob 0.9s steps(1) infinite;
}

.prose {
    max-width: 64ch;
    font-size: 23px;
    line-height: 1.32;
}

.prose p + p {
    margin-top: 16px;
}

.prose strong {
    color: var(--hl);
    font-weight: 400;
}

.bonus {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin: 56px 0 0;
    padding: 0;
}

.bonus li {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 18px 20px 20px;
}

.bonus strong {
    color: var(--hl);
    font: 400 64px/0.8 var(--f-display);
    font-variant-numeric: tabular-nums;
}

.bonus span {
    color: var(--ink-2);
    font-size: 20px;
    line-height: 1.1;
}

/* ---------- Experience: world map ---------- */

.zone + .zone {
    margin-top: 64px;
}

.zone-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
    font: 700 16px/1.2 var(--f-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.zone-tag {
    padding: 4px 8px;
    background: var(--path);
    color: #1d2b53;
    font-size: 12px;
}

.map {
    position: relative;
    list-style: none;
    display: grid;
    gap: 36px;
    margin: 0;
    padding: 0;
}

.map::before {
    /* the dotted path between level pins */
    content: "";
    position: absolute;
    left: 22px;
    top: 24px;
    bottom: 24px;
    width: 4px;
    background: repeating-linear-gradient(var(--path) 0 8px, transparent 8px 16px);
}

.level {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.level-pin {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--hl);
}

.level.is-live .level-pin {
    color: var(--live);
}

.level.is-live .level-pin .icon {
    animation: wave 0.6s steps(1) infinite;
}

.level-card {
    min-width: 0;
    padding: 22px 28px 26px;
}

.level-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.level-date {
    color: var(--ink-2);
    font: 700 12px/1 var(--f-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.level-role {
    margin: 14px 0 6px;
    font: 400 clamp(32px, 4vw, 42px)/0.9 var(--f-display);
    text-wrap: balance;
}

.level-org {
    color: var(--ink-2);
    font-size: 22px;
}

.level-points {
    display: grid;
    gap: 8px;
    max-width: 76ch;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.level-points li {
    position: relative;
    padding-left: 22px;
}

.level-points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background: var(--path);
}

.level-points strong {
    color: var(--hl);
    font-weight: 400;
}

/* ---------- Education: cartridges ---------- */

.carts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
}

.cart {
    --band: #7e2553;
    --band-2: #ff77a8;
    --band-3: #ffccaa;
    position: relative;
    padding: 34px 18px 22px;
    background: var(--plastic);
    /* a Game Boy-style notch in the top-right corner, stepped */
    clip-path: polygon(0 0, calc(100% - 28px) 0, calc(100% - 28px) 8px, calc(100% - 20px) 8px, calc(100% - 20px) 16px, calc(100% - 12px) 16px, calc(100% - 12px) 24px, 100% 24px, 100% 100%, 0 100%);
    transition: transform 0.15s steps(3);
}

.cart-wrap {
    filter: drop-shadow(4px 0 0 var(--plastic-edge)) drop-shadow(-4px 0 0 var(--plastic-edge)) drop-shadow(0 4px 0 var(--plastic-edge)) drop-shadow(0 -4px 0 var(--plastic-edge)) drop-shadow(6px 6px 0 var(--shadow));
}

.cart-1 { --band: #065ab5; --band-2: #29adff; --band-3: #c2c3c7; }
.cart-2 { --band: #008751; --band-2: #00e436; --band-3: #ffec27; }

.cart-grip {
    height: 16px;
    margin: -18px 36px 18px 8px;
    background: repeating-linear-gradient(var(--plastic-lo) 0 4px, transparent 4px 8px);
}

.cart-label {
    position: relative;
    padding-bottom: 20px;
    background: var(--label-bg);
    color: var(--label-ink);
    box-shadow: 0 0 0 4px var(--plastic-lo);
}

.label-band {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 22px;
    color: #fff1e8;
    background:
        linear-gradient(transparent 0 calc(100% - 16px), var(--band-2) calc(100% - 16px) calc(100% - 12px), var(--band) calc(100% - 12px) calc(100% - 8px), var(--band-3) calc(100% - 8px) calc(100% - 4px), transparent calc(100% - 4px)),
        var(--band);
}

.label-short {
    font: 400 64px/0.8 var(--f-display);
    text-transform: uppercase;
    text-shadow: 3px 3px 0 rgba(4, 6, 13, 0.55);
}

.label-years {
    font: 700 11px/1.2 var(--f-ui);
    letter-spacing: 0.04em;
    text-align: right;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.sticker {
    position: absolute;
    top: -18px;
    right: -14px;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    background: var(--gold);
    color: #1d2b53;
    font: 700 15px/1 var(--f-ui);
    text-transform: uppercase;
    transform: rotate(10deg);
    clip-path: polygon(30% 0, 70% 0, 70% 10%, 90% 10%, 90% 30%, 100% 30%, 100% 70%, 90% 70%, 90% 90%, 70% 90%, 70% 100%, 30% 100%, 30% 90%, 10% 90%, 10% 70%, 0 70%, 0 30%, 10% 30%, 10% 10%, 30% 10%);
    animation: wobble 2.4s steps(2) infinite;
}

.cart-title {
    margin: 16px 16px 6px;
    font: 400 34px/0.9 var(--f-display);
    text-wrap: balance;
}

.cart-school {
    margin: 0 16px;
    color: var(--label-ink-2);
    font-size: 19px;
    line-height: 1.1;
}

.loading {
    display: grid;
    gap: 6px;
    margin: 14px 16px 0;
}

.loading-text {
    color: var(--label-ink);
    font: 700 11px/1 var(--f-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.loading-bar {
    height: 14px;
    padding: 2px;
    background: var(--label-ink);
}

.loading-bar i {
    display: block;
    height: 100%;
    width: 18%;
    background: repeating-linear-gradient(90deg, #00e436 0 8px, #008751 8px 10px);
    animation: load 9s steps(18) infinite;
}

.cart-body {
    display: grid;
    gap: 12px;
    margin: 0 16px;
    padding-top: 14px;
    border-top: 2px dashed var(--plastic-lo);
    color: var(--label-ink);
    font-size: 20px;
    line-height: 1.18;
}

.cart-label .cart-body {
    margin-top: 16px;
}

.cart-badge {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: #ab5236;
}

.cart-badge .icon {
    margin-top: 2px;
}

.cart-thesis .k {
    display: block;
    margin-bottom: 4px;
    color: var(--label-ink-2);
    font: 700 11px/1 var(--f-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cart .tags {
    margin-top: 2px;
}

.cart .tags li {
    background: #e7e2ea;
    color: var(--label-ink);
}

.cart-wrap:hover .cart {
    transform: translateY(-8px);
}

/* ---------- Publications ---------- */

.paper {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 24px;
    padding: 28px 30px;
}

.paper-icon {
    color: var(--gold);
}

.paper-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    color: var(--ink-2);
    font: 700 12px/1 var(--f-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.paper-title {
    max-width: 30ch;
    margin: 14px 0 10px;
    font: 400 clamp(34px, 4.4vw, 48px)/0.9 var(--f-display);
    text-wrap: balance;
}

.paper-authors {
    color: var(--ink-2);
}

.paper-authors mark {
    background: none;
    color: var(--hl);
}

.paper-venue {
    margin-top: 4px;
    color: var(--ink-3);
    font-style: normal;
}

.bib {
    margin-top: 18px;
}

.bib summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 7px;
    background: var(--chip);
    color: var(--ink);
    font: 700 12px/1 var(--f-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.bib summary::-webkit-details-marker {
    display: none;
}

.bib summary::before {
    content: "";
    width: 6px;
    height: 10px;
    background: currentColor;
    clip-path: polygon(0 0, 50% 0, 50% 20%, 100% 20%, 100% 80%, 50% 80%, 50% 100%, 0 100%);
}

.bib[open] summary::before {
    transform: rotate(90deg);
}

.bib-box {
    position: relative;
    margin-top: 12px;
    padding: 16px 18px;
    background: var(--con-bg);
    color: var(--con-ink);
}

.bib-box pre {
    margin: 0;
    overflow-x: auto;
    font: 19px/1.25 var(--f-body);
    white-space: pre;
}

.bib-box .btn {
    position: absolute;
    top: 12px;
    right: 12px;
}

.bib-at { color: var(--con-love); }
.bib-key { color: var(--con-hl); }
.bib-k { color: var(--con-link); }

.talks {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
}

.talk {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 20px;
}

.talk-icon {
    color: var(--love);
}

.talk-title {
    font-size: 23px;
    line-height: 1.15;
}

.talk-meta {
    margin-top: 6px;
    color: var(--ink-3);
    font: 11px/1.4 var(--f-ui);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---------- Projects: inventory ---------- */

.inventory {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin: 0;
    padding: 0;
}

.item {
    --rc: var(--r-common);
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 22px;
    padding: 24px;
}

.rarity-uncommon { --rc: var(--r-uncommon); }
.rarity-rare { --rc: var(--r-rare); }
.rarity-epic { --rc: var(--r-epic); }
.rarity-legendary { --rc: var(--r-legendary); }

.item-slot {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    background:
        linear-gradient(45deg, transparent 0 48%, var(--grid) 48% 52%, transparent 52%),
        var(--bg-deep);
    color: var(--rc);
    box-shadow: inset 0 0 0 4px var(--rc), inset 0 0 0 8px var(--bg-deep), inset 0 0 24px 4px color-mix(in srgb, var(--rc) 40%, transparent);
}

.rarity-legendary .item-slot .icon {
    animation: shine 1.6s steps(2) infinite;
}

.item-rarity {
    color: var(--rc);
    font: 700 12px/1 var(--f-ui);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.item-name {
    margin: 10px 0 8px;
    font: 400 38px/0.9 var(--f-display);
    text-wrap: balance;
}

.item-desc {
    color: var(--ink-2);
}

.item-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font: 700 12px/1 var(--f-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

/* ---------- Skills: abilities ---------- */

.abilities {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.ability {
    min-width: 0;
    padding: 20px 22px 22px;
}

.ability-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 4px dotted var(--chip);
}

.ability-icon {
    color: var(--hl);
}

.ability-title {
    flex: 1;
    font: 700 13px/1.25 var(--f-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ability-count {
    color: var(--ink-3);
    font: 400 28px/0.8 var(--f-display);
}

.ability-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ability-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 21px;
    line-height: 1.15;
}

.a-name {
    min-width: 0;
}

.a-star {
    width: 14px;
    height: 14px;
    margin: -3px 6px 0 0;
    color: var(--gold);
}

.a-dots {
    flex: 1 1 12px;
    min-width: 12px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--ink-3) 0 2px, transparent 2px 6px);
    opacity: 0.6;
}

.a-note {
    flex: none;
    max-width: 55%;
    color: var(--ink-3);
    font-size: 19px;
    text-align: right;
}

.is-main .a-note {
    color: var(--gold);
    font: 700 11px/1 var(--f-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.langs {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
}

.lang {
    display: grid;
    gap: 10px;
    padding: 18px 20px 20px;
}

.lang-name {
    font: 400 36px/0.85 var(--f-display);
    text-transform: uppercase;
}

.meter {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
}

.meter i {
    display: grid;
    gap: 4px;
    font-style: normal;
}

.meter i::before {
    content: "";
    height: 14px;
    background: var(--chip);
}

.meter i.on::before {
    background: var(--live);
}

.meter b {
    color: var(--ink-3);
    font: 400 16px/1 var(--f-body);
    text-align: center;
}

.lang-level {
    color: var(--ink-2);
    font-size: 20px;
}

/* ---------- Achievements: trophy room ---------- */

.trophy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
}

.trophies,
.quests {
    padding: 4px 26px 26px;
}

.trophies .sub-head,
.quests .sub-head {
    margin: 22px 0 18px;
}

.trophy-list,
.quest-list {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trophy,
.quest {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.trophy-icon,
.quest-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    background: var(--bg-deep);
    color: var(--gold);
    box-shadow: inset 0 0 0 4px var(--gold);
}

.trophy-title,
.quest-name {
    font: 400 32px/0.9 var(--f-display);
    text-transform: uppercase;
}

.trophy-sub {
    margin-top: 4px;
    color: var(--ink);
}

.trophy-where {
    margin-top: 2px;
    color: var(--ink-3);
    font: 11px/1.4 var(--f-ui);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.trophy-detail {
    margin-top: 6px;
    color: var(--ink-2);
    font-size: 20px;
}

.quests-lead {
    margin: -6px 0 20px;
    color: var(--ink-2);
    font-size: 20px;
}

.quest {
    grid-template-columns: 56px minmax(0, 1fr) auto;
}

.quest-icon {
    color: var(--ink-3);
    box-shadow: inset 0 0 0 4px var(--chip);
}

.quest-icon .icon {
    opacity: 0.35;
}

.quest-name {
    color: var(--ink-3);
}

.quest-hint {
    margin-top: 4px;
    color: var(--ink-2);
    font-size: 20px;
}

.quest-hint kbd {
    font-size: 18px;
}

.quest-pts {
    padding: 4px 6px;
    background: var(--chip);
    color: var(--ink-3);
    font: 700 11px/1 var(--f-ui);
    font-variant-numeric: tabular-nums;
}

.quest.done .quest-icon {
    color: var(--live);
    box-shadow: inset 0 0 0 4px var(--live);
}

.quest.done .quest-icon .icon {
    opacity: 1;
}

.quest.done .quest-name {
    color: var(--ink);
}

.quest.done .quest-pts {
    background: var(--live);
    color: var(--on-live);
}

.quest.just-done {
    animation: flash 0.6s steps(2) 3;
}

/* ---------- Contact: continue screen ---------- */

.screen-continue {
    padding-bottom: 96px;
}

.continue {
    display: grid;
    justify-items: center;
    text-align: center;
}

.continue .eyebrow {
    justify-content: center;
}

.continue-title {
    margin: 0;
    color: var(--hot);
    font: 400 clamp(80px, 13vw, 160px)/0.8 var(--f-display);
    text-transform: uppercase;
    text-shadow: 6px 6px 0 var(--shadow);
}

.countdown {
    margin: 8px 0 16px;
    color: var(--hl);
    font: 400 clamp(120px, 18vw, 200px)/0.8 var(--f-display);
    font-variant-numeric: tabular-nums;
    text-shadow: 6px 6px 0 var(--title-shadow);
}

.countdown.is-joke {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1;
    max-width: 18ch;
    padding-block: 24px 20px;
}

.continue-motd {
    max-width: 46ch;
    margin-bottom: 36px;
    color: var(--ink-2);
    font-size: 25px;
}

.coin-slots {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 0;
}

.email-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 40px;
}

.email-line code {
    padding: 6px 10px;
    font-size: 22px;
    user-select: all;
}

/* ---------- Credits (footer) ---------- */

.credits {
    position: relative;
    margin-top: 40px;
    padding: 0 var(--gutter) 40px;
    background:
        linear-gradient(var(--grass) 0 12px, var(--grass-lo) 12px 20px, transparent 20px) top / 100% 20px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='64' shape-rendering='crispEdges'%3E%3Cg fill='%23742f29'%3E%3Crect x='8' y='12' width='8' height='4'/%3E%3Crect x='52' y='4' width='4' height='4'/%3E%3Crect x='72' y='28' width='12' height='4'/%3E%3Crect x='28' y='40' width='4' height='4'/%3E%3Crect x='60' y='52' width='8' height='4'/%3E%3Crect x='4' y='56' width='4' height='4'/%3E%3C/g%3E%3Cg fill='%23c97b4b'%3E%3Crect x='36' y='20' width='4' height='4'/%3E%3Crect x='84' y='48' width='4' height='4'/%3E%3Crect x='16' y='32' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E") 0 20px / 96px 64px,
        var(--dirt);
    color: #fff1e8;
}

.credits::before {
    /* tufts of grass */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
    background: repeating-linear-gradient(90deg, transparent 0 12px, var(--grass) 12px 16px, transparent 16px 28px, var(--grass) 28px 32px, transparent 32px 48px);
}

.credits-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding-top: 48px;
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
}

.credits-sprite {
    position: relative;
    width: 64px;
    height: 96px;
    margin-top: -150px;
    margin-bottom: 26px;
    animation: hop 1.6s steps(1) infinite;
}

.credits .thanks {
    font: 400 44px/0.9 var(--f-display);
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #04060d;
}

.credits-line {
    font-size: 20px;
    text-shadow: 2px 2px 0 rgba(4, 6, 13, 0.6);
}

.credits-line.muted {
    color: #ffccaa;
}

.credits kbd,
.credits code {
    background: rgba(4, 6, 13, 0.4);
    color: #fff1e8;
}

/* ==========================================================================
   Console (drop-down, Quake style)
   ========================================================================== */

.console {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    height: min(64vh, 600px);
    background:
        repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, 0.22) 2px 3px),
        var(--con-bg);
    color: var(--con-ink);
    box-shadow: 0 4px 0 0 var(--con-hl), 0 12px 0 0 rgba(4, 6, 13, 0.5);
    animation: drop 0.24s steps(6);
}

.console[hidden] {
    display: none;
}

.console-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) var(--gutter) 8px;
    background: var(--con-hl);
    color: #1d2b53;
    font: 700 12px/1 var(--f-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.console-close {
    padding: 6px 8px;
    border: 0;
    background: #1d2b53;
    color: var(--con-hl);
    font: 700 11px/1 var(--f-ui);
    text-transform: uppercase;
    cursor: pointer;
}

.console-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px var(--gutter) 18px;
    font-size: 22px;
    line-height: 1.22;
}

.c-line {
    white-space: pre-wrap;
    word-break: break-word;
}

.c-line + .c-line {
    margin-top: 2px;
}

.c-cmd::before {
    content: "hamza@portfolio:~$ ";
    color: var(--con-ok);
}

.c-muted { color: var(--con-dim); }
.c-hl { color: var(--con-hl); font-weight: 400; }
.c-ok { color: var(--con-ok); }
.c-err { color: var(--con-err); }
.c-love { color: var(--con-love); }
.c-line a { color: var(--con-link); }

.c-art {
    margin: 4px 0;
    font: inherit;
    line-height: 1.05;
    white-space: pre;
    overflow-x: auto;
}

.c-sprite {
    display: block;
    width: 64px;
    height: 96px;
    margin: 6px 0;
}

.c-fetch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: start;
}

.console-input {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

.c-prompt {
    flex: none;
    color: var(--con-ok);
}

.console-input input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--con-ink);
    font: inherit;
    caret-color: var(--con-hl);
    outline: none;
}

.lyna-egg {
    display: inline-block;
    color: var(--con-love);
    font: 400 64px/1 var(--f-display);
    text-shadow: 4px 4px 0 #7e2553;
    animation: pulse 0.7s steps(2) infinite alternate;
}

.pixel-heart {
    position: fixed;
    z-index: 160;
    width: 32px;
    height: 32px;
    color: var(--con-love);
    pointer-events: none;
    animation: float-up 2s steps(10) forwards;
}

.game-over {
    position: fixed;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 16px;
    padding: 24px;
    background: #000;
    color: #fff1e8;
    font: 26px/1.2 var(--f-body);
    text-align: center;
}

.game-over-title {
    color: #ff004d;
    font: 400 clamp(88px, 18vw, 200px)/0.8 var(--f-display);
    text-transform: uppercase;
    animation: blink 1s steps(1) infinite;
}

/* ==========================================================================
   Toasts, coins, CRT
   ========================================================================== */

.toasts {
    position: fixed;
    right: var(--gutter);
    bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
    z-index: 120;
    display: grid;
    gap: 16px;
    justify-items: end;
    pointer-events: none;
}

.toast {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: min(340px, calc(100vw - 2 * var(--gutter)));
    padding: 12px 14px;
    background: #1d2b53;
    color: #fff1e8;
    box-shadow:
        -4px 0 0 0 #ffec27,
        4px 0 0 0 #ffec27,
        0 -4px 0 0 #ffec27,
        0 4px 0 0 #ffec27,
        4px 8px 0 0 #04060d,
        8px 4px 0 0 #04060d;
    animation: toast-in 0.3s steps(4);
}

.toast.out {
    animation: toast-out 0.3s steps(4) forwards;
}

.toast .icon {
    color: #ffec27;
}

.toast-k {
    color: #ffec27;
    font: 700 10px/1 var(--f-ui);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.toast-name {
    margin-top: 4px;
    font: 400 26px/0.9 var(--f-display);
    text-transform: uppercase;
}

.toast-pts {
    color: #00e436;
}

.coin {
    position: fixed;
    top: -24px;
    z-index: 150;
    width: 16px;
    height: 16px;
    background: #ffec27;
    box-shadow: inset -4px -4px 0 #ffa300, 0 0 0 2px #ab5236;
    pointer-events: none;
    animation: coin-fall linear forwards;
}

html.crt body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 400;
    pointer-events: none;
    background:
        repeating-linear-gradient(rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
}

html.crt body {
    text-shadow: 0.6px 0 rgba(255, 0, 77, 0.35), -0.6px 0 rgba(41, 173, 255, 0.35);
}

html.crt .logo-line {
    text-shadow: none;
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes blink { 50% { opacity: 0; } }
@keyframes bubble { 0%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nudge { 50% { transform: translateX(3px); } }
@keyframes bob { 50% { transform: translateY(3px); } }
@keyframes wave { 50% { transform: translateX(2px) skewY(-6deg); } }
@keyframes wobble { 50% { transform: rotate(4deg) scale(1.05); } }
@keyframes shine { 50% { filter: brightness(1.5); } }
@keyframes hop { 50% { transform: translateY(-8px); } }
@keyframes load { 0% { width: 6%; } 90%, 100% { width: 97%; } }
@keyframes flash { 50% { background: var(--chip); } }
@keyframes pulse { to { transform: scale(1.1); } }
@keyframes drop { from { transform: translateY(-100%); } }
@keyframes toast-in { from { transform: translateX(120%); } }
@keyframes toast-out { to { transform: translateX(120%); } }
@keyframes float-up { to { transform: translateY(-260px); opacity: 0; } }
@keyframes coin-fall { to { transform: translateY(calc(100vh + 48px)) rotate(var(--spin, 180deg)); } }

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1040px) {
    .hud-menu {
        display: block;
    }

    .hud-links {
        position: absolute;
        top: calc(100% + 4px);
        right: var(--gutter);
        display: none;
        flex-direction: column;
        min-width: 200px;
        padding: 10px;
        background: var(--bg-deep);
        box-shadow:
            -4px 0 0 0 var(--edge),
            4px 0 0 0 var(--edge),
            0 4px 0 0 var(--edge),
            4px 8px 0 0 var(--shadow);
    }

    .hud-links.open {
        display: flex;
    }

    .hud-links a {
        padding: 12px 10px 12px 24px;
        font-size: 14px;
    }

    .hud-links a::before {
        left: 8px;
    }
}

@media (max-width: 960px) {
    .about-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .char {
        max-width: 420px;
    }

    .bonus {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .carts {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
    }

    .abilities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trophy-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    body {
        font-size: 21px;
    }

    .title {
        min-height: 0;
        padding-bottom: 220px;
    }

    .screen {
        padding-top: 88px;
    }

    .screen-head {
        margin-bottom: 36px;
    }

    .inventory,
    .talks,
    .langs {
        grid-template-columns: minmax(0, 1fr);
    }

    .level {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 16px;
    }

    .level-pin {
        width: 32px;
        height: 32px;
    }

    .level-pin .icon {
        width: 16px;
        height: 16px;
    }

    .map::before {
        left: 14px;
    }

    .level-card {
        padding: 18px 18px 20px;
    }

    .paper {
        grid-template-columns: minmax(0, 1fr);
        padding: 22px 20px;
    }

    .dialog {
        padding: 34px 22px 36px;
    }
}

@media (max-width: 600px) {
    .hud-inner {
        gap: 12px;
    }

    .hud-1up {
        display: none;
    }

    .abilities {
        grid-template-columns: minmax(0, 1fr);
    }

    .item {
        grid-template-columns: minmax(0, 1fr);
    }

    .bonus {
        gap: 20px;
    }

    .bonus strong {
        font-size: 52px;
    }

    .quest {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .quest-pts {
        grid-column: 2;
        justify-self: start;
    }

    .trophy,
    .quest {
        gap: 14px;
    }

    .trophy-icon,
    .quest-icon {
        width: 48px;
        height: 48px;
    }

    .trophies,
    .quests {
        padding: 4px 18px 22px;
    }

    .coin-slots {
        gap: 18px;
    }
}