/* Super Peliad Kart - fonts are self-hosted (the privacy page promises no third-party fonts) */
@font-face {
    font-family: "Luckiest Guy";
    src: url(./assets/fonts/LuckiestGuy.woff2) format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Nunito";
    src: url(./assets/fonts/Nunito.woff2) format("woff2");
    font-weight: 200 1000;
    font-display: swap;
}

:root {
    --ink: #1b2440;
    --cream: #fff6e0;
    --gold: #ffcc33;
    --red: #e2453a;
    --blue: #3fa8ff;
    --display: "Luckiest Guy", "Nunito", system-ui, sans-serif;
    --body: "Nunito", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: #1b2440;
    color: var(--cream);
    font-family: var(--body);
}
body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}
#game {
    position: fixed;
    inset: 0;
}
#game canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.hidden {
    display: none !important;
}

/* ---- title ---- */
.overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
/* the title: logo and menu down the left (darkened behind them), the attract race on the right - the camera is
   pushed over to make room (main.js titleCamera) */
.title {
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
    background: linear-gradient(90deg, rgba(14, 18, 34, 0.82) 0%, rgba(14, 18, 34, 0.55) 38%, rgba(14, 18, 34, 0) 62%);
}
.title-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    width: min(560px, 48vw);
    padding: 24px 24px 24px max(40px, env(safe-area-inset-left));
}
.logo {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(40px, 5.2vw, 80px);
    line-height: 0.95;
    margin: 0 0 12px;
    color: var(--gold);
    letter-spacing: 0.02em;
    text-shadow:
        0 4px 0 #b5561b,
        0 8px 0 #6b2b10,
        0 12px 24px rgba(0, 0, 0, 0.5);
    transform: rotate(-3deg);
    transform-origin: left center;
}
.logo-super {
    display: block;
    font-size: 0.5em;
    color: var(--cream);
    text-shadow:
        0 3px 0 #3b5bd6,
        0 6px 12px rgba(0, 0, 0, 0.5);
}
.logo-kart {
    color: var(--red);
    text-shadow:
        0 4px 0 #fff6e0,
        0 8px 0 #6b2b10,
        0 12px 24px rgba(0, 0, 0, 0.5);
}
.title-status {
    font-family: var(--display);
    font-size: clamp(18px, 3vw, 28px);
    margin: 18px 0;
    animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
    50% {
        opacity: 0.55;
    }
}
.title-foot {
    font-size: 12px;
    opacity: 0.7;
}

/* ---- HUD ---- */
.hud {
    position: fixed;
    inset: 0;
    pointer-events: none;
    font-family: var(--display);
}
.hud-speed {
    position: absolute;
    right: max(16px, env(safe-area-inset-right));
    bottom: 18px;
    text-align: right;
    text-shadow:
        0 3px 0 var(--ink),
        0 0 12px rgba(0, 0, 0, 0.5);
}
.hud-speed-num {
    font-size: 56px;
    color: var(--cream);
}
.hud-speed-unit {
    font-size: 18px;
    margin-left: 4px;
    color: var(--gold);
}
.hud-drift {
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: min(320px, 60vw);
    height: 14px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.15s;
}
.hud-drift.on {
    opacity: 1;
}
.hud-drift-fill {
    height: 100%;
    width: 100%;
    border-radius: 6px;
    transform: scaleX(0);
    transform-origin: left;
}
.hud-drift-ticks i {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 18px;
    border-radius: 2px;
}
.hud-boost {
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: min(320px, 60vw);
    height: 6px;
    transform: translateX(-50%);
}
.hud-boost-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ff8a1c, #ffe066);
    border-radius: 3px;
    transform: scaleX(0);
    transform-origin: left;
}
.hud-debug {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 6px;
    white-space: nowrap;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ---- ?tune panel (DEV) ---- */
.tune {
    position: fixed;
    top: 8px;
    right: 8px;
    width: 290px;
    max-height: calc(100vh - 16px);
    overflow: auto;
    z-index: 10;
    background: rgba(15, 20, 35, 0.88);
    border-radius: 8px;
    font:
        12px ui-monospace,
        monospace;
    color: #dde;
    padding: 6px 8px;
}
.tune.min .tune-rows {
    display: none;
}
.tune-head {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
}
.tune-head b {
    flex: 1;
}
.tune label {
    display: grid;
    grid-template-columns: 110px 1fr 44px;
    gap: 6px;
    align-items: center;
}
.tune input[type="range"] {
    width: 100%;
}

/* ---- menus ---- */
/* sizes every menu shares: footer buttons are all --foot-w wide, option buttons --opt-w x --opt-h (each screen sets its
   own); text that doesn't fit is shrunk to fit (ui/nav.js fitText), never below 14px here or 12px on phones */
:root {
    --foot-w: 240px;
    --opt-w: 400px;
    --opt-h: 54px;
}
.menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 18px 0;
}
.menu button {
    min-width: 0 !important;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.menu button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
} /* (an odd one out spans the row) */
button {
    font: inherit;
    color: inherit;
}
.menu button,
.panel button {
    font-family: var(--display);
    font-size: 24px;
    letter-spacing: 0.03em;
    min-width: 260px;
    padding: 10px 22px 6px;
    background: linear-gradient(#3b5bd6, #2a3f9e);
    color: var(--cream);
    border: 3px solid #fff6e0;
    border-radius: 14px;
    box-shadow:
        0 4px 0 #18265e,
        0 8px 16px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}
button.primary {
    background: linear-gradient(#e2453a, #a82a22);
}
button.ghost {
    background: rgba(0, 0, 0, 0.35);
    box-shadow: none;
}
/* the highlighted button: gold with a glow - the same size as the rest (after .ghost, so a focused Back is gold with
   dark text, not dark text on the ghost's dark) */
.menu button:hover,
.panel button:hover,
button.focus,
button.ghost.focus {
    background: linear-gradient(#ffcc33, #e89a1c);
    color: var(--ink);
    border-color: #fff;
    box-shadow:
        0 0 0 3px rgba(255, 204, 51, 0.45),
        0 4px 0 #8a5410;
}
button:focus {
    outline: none;
}
.panel-screen {
    background: rgba(14, 18, 34, 0.55);
}
/* a panel: its title, an optional tab bar, a body that scrolls on its own, and a footer of buttons that stays put */
.panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    max-width: 92vw;
    max-height: 92vh;
    overflow: clip;
    background: rgba(27, 36, 64, 0.92);
    border: 3px solid rgba(255, 246, 224, 0.7);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.panel > * {
    flex: none;
}
.panel h2 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 40px;
    line-height: 1.1;
    margin: 0;
    color: var(--gold);
    text-shadow: 0 3px 0 #6b2b10;
    text-align: center;
}
.panel-body {
    flex: 1 1 auto;
    min-height: 0;
    align-self: stretch;
    overflow: hidden auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 10px;
    scrollbar-width: none;
}
.panel-body.scrolls {
    padding-right: 22px;
} /* (room for the scrollbar) */
.panel-body::-webkit-scrollbar {
    display: none;
}
/* a body that scrolls: our own scrollbar beside it (ui/scrollbar.js - phones hide the browser's), and its edge fades
   where there's more to see */
.sbar {
    position: absolute;
    width: 8px;
    border-radius: 4px;
    background: rgba(255, 246, 224, 0.14);
    pointer-events: auto;
    touch-action: none;
}
.sbar i {
    display: block;
    width: 100%;
    border-radius: 4px;
    background: var(--gold);
    box-shadow: 0 0 6px rgba(255, 204, 51, 0.5);
    cursor: grab;
}
.panel-body.more-down {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
}
.panel-body.more-up {
    -webkit-mask-image: linear-gradient(transparent, #000 28px);
    mask-image: linear-gradient(transparent, #000 28px);
}
.panel-body.more-up.more-down {
    -webkit-mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.panel-foot {
    align-self: stretch;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--foot-w);
    justify-content: center;
    gap: 10px;
    padding: 12px 6px 4px;
    border-top: 1px solid rgba(255, 246, 224, 0.18);
}
.panel-foot button {
    min-width: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.panel-foot.stack {
    grid-auto-flow: row;
    border-top: 0;
    padding-top: 0;
}
.panel > h2 + .panel-foot.stack {
    padding-top: 6px;
}
.fit {
    white-space: nowrap;
    overflow: hidden;
}
.fit-wrap {
    white-space: normal !important;
    line-height: 1.05;
}
/* an option: its label, then ◀ value ▶ - a fixed size whatever the value says */
.opt {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: var(--opt-w);
    height: var(--opt-h);
    min-width: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 2px !important;
}
.opt.hidden {
    display: none !important;
}
.opt-label {
    opacity: 0.85;
    flex: none;
    white-space: nowrap;
}
.opt-val {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    flex: 0 1 auto;
}
.opt-text {
    text-align: center;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}
.opt-val i {
    font-style: normal;
    font-size: max(12px, 0.7em);
    opacity: 0.6;
    padding: 0 6px;
    flex: none;
}
.opt-val small {
    font-size: max(12px, 0.65em);
    opacity: 0.7;
}
/* (where room is short: the label over the value) */
.setup-opts .opt,
.room-right .opt {
    flex-direction: column;
    justify-content: center;
    gap: 0;
    line-height: 1.1;
}
.setup-opts .opt-label,
.room-right .opt-label {
    font-size: max(12px, 0.66em);
}
.setup-opts .opt-val,
.room-right .opt-val {
    max-width: 100%;
}
.info-body {
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
}
.panel-body.info-body {
    display: block;
    padding-top: 10px;
}
#info .panel {
    width: min(760px, 92vw);
}
.info-body > :first-child {
    margin-top: 0;
}
.info-body .t1 {
    color: #3fa8ff;
}
.info-body .t2 {
    color: #ff9b2a;
}
.info-body .t3 {
    color: #c86bff;
}
table.keys {
    border-collapse: collapse;
    margin: 6px auto;
    font-size: 15px;
}
table.keys td,
table.keys th {
    padding: 4px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-align: left;
}
table.keys th {
    color: var(--gold);
    font-weight: 800;
}

/* ---- race setup: the racer turntable + card on the left, the options in a two-column grid ----
   always five rows of options (the most any mode has), so Start and Back never move when the mode changes */
.setup-cols {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
}
.setup-racer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.setup-opts {
    --opt-w: 250px;
    --opt-h: 60px;
    display: grid;
    grid-template-columns: repeat(2, var(--opt-w));
    grid-template-rows: repeat(5, var(--opt-h));
    grid-auto-rows: var(--opt-h);
    gap: 8px;
}
.setup-opts .opt {
    width: 100%;
}
.panel.setup .panel-foot {
    --foot-w: 250px;
}
@media (max-width: 760px) and (min-height: 521px) {
    .setup-cols {
        flex-direction: column;
        align-items: center;
    }
}
.racer-preview {
    width: min(320px, 80vw);
    height: 180px;
    border-radius: 14px;
    background: radial-gradient(ellipse at 50% 40%, #3b5bd6 0%, #1b2440 75%);
}
.racer-card {
    width: min(340px, 86vw);
    font-size: 15px;
    text-align: center;
    line-height: 1.35;
}
.racer-card b {
    font-family: var(--display);
    font-weight: 400;
    font-size: 24px;
    color: var(--gold);
    letter-spacing: 0.02em;
}
.setup-racer .opt {
    --opt-w: min(340px, 86vw);
    --opt-h: 48px;
}
.racer-card small {
    opacity: 0.8;
}
.racer-card .cls {
    display: inline-block;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    vertical-align: 2px;
}
.cls.light {
    background: #3fa8ff;
    color: #0b1a33;
}
.cls.medium {
    background: #ffcc33;
    color: #3a2a00;
}
.cls.heavy {
    background: #e2453a;
    color: #fff;
}
.racer-card .bar {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 12px;
    text-align: right;
}
.racer-card .bar i {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ffcc33 var(--v), rgba(255, 255, 255, 0.15) var(--v));
}

/* ---- pause: one column of equal buttons ---- */
#pause .panel-foot {
    --foot-w: 300px;
}

/* ---- results ---- */
#results .panel {
    min-width: min(600px, 92vw);
}
#results .panel-foot {
    --foot-w: 220px;
}
/* over the Grand Prix podium: no dimming, the panel low so the ceremony stays in view */
#results.podium {
    background: none;
    align-items: flex-end;
}
#results.podium .panel {
    max-height: 64vh;
    background: rgba(27, 36, 64, 0.84);
}
.results-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 17px;
}
.results-table td {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.results-table td.pl {
    font-family: var(--display);
    font-size: 22px;
    width: 3em;
    color: var(--gold);
    white-space: nowrap;
}
.results-table td i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: -1px;
}
.results-table tr.me {
    background: rgba(255, 204, 51, 0.18);
    font-weight: 800;
}
.results-news {
    color: var(--gold);
    font-weight: 800;
    min-height: 1em;
    margin: 2px;
    text-align: center;
}
#results-lb {
    align-self: stretch;
}

/* ---- race HUD ---- */
.hud-place {
    position: absolute;
    left: max(18px, env(safe-area-inset-left));
    bottom: 10px;
    font-size: 76px;
    line-height: 1;
    text-shadow:
        0 4px 0 var(--ink),
        0 0 16px rgba(0, 0, 0, 0.45);
}
.hud-place.pop {
    animation: pop 0.25s ease-out;
}
@keyframes pop {
    0% {
        transform: scale(1.35);
    }
    100% {
        transform: scale(1);
    }
}
.hud-lap {
    position: absolute;
    left: max(16px, env(safe-area-inset-left));
    top: 12px;
    font-size: 30px;
    text-shadow: 0 3px 0 var(--ink);
}
.hud-lap b {
    font-weight: 400;
    color: var(--gold);
}
/* battle: balloons and karts left where lap and place were */
.hud-balloons {
    display: none;
    position: absolute;
    left: max(16px, env(safe-area-inset-left));
    top: 10px;
}
.hud.battle .hud-balloons,
#hud.battle .hud-balloons,
#hud2.battle .hud-balloons {
    display: block;
}
.battle .hud-lap,
.battle .hud-place {
    display: none !important;
}
.hud-balloons-icons {
    display: flex;
    gap: 2px;
}
.hud-balloons-icons i {
    display: block;
    transition:
        opacity 0.3s,
        transform 0.3s;
}
.hud-balloons-icons i.gone {
    opacity: 0.18;
    transform: scale(0.8);
}
.hud-left {
    font-size: 24px;
    text-shadow: 0 3px 0 var(--ink);
    margin-top: 2px;
}
.hud-clock {
    position: absolute;
    right: max(16px, env(safe-area-inset-right));
    top: 12px;
    text-align: right;
    text-shadow: 0 3px 0 var(--ink);
}
.hud-time {
    font-size: 30px;
}
.hud-ghost {
    font-family: var(--body);
    font-weight: 800;
    font-size: 14px;
    color: #c8e0ff;
    opacity: 0.9;
}
.hud-splits {
    font-family: var(--body);
    font-weight: 800;
    font-size: 14px;
    opacity: 0.85;
}
.hud-item {
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    width: 76px;
    height: 76px;
    border-radius: 16px;
    background: rgba(20, 26, 50, 0.6);
    border: 3px solid rgba(255, 246, 224, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hud-item.rolling {
    border-color: #ff7ad8;
}
.hud-item.held {
    box-shadow: 0 0 18px #ffcc33;
    border-color: #ffcc33;
}
.hud-item-icon svg {
    display: block;
}
.hud-item-count {
    position: absolute;
    right: -6px;
    bottom: -6px;
    font-size: 22px;
    color: var(--gold);
    text-shadow: 0 2px 0 var(--ink);
}
.hud-item-name {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--body);
    font-weight: 800;
    font-size: 13px;
    text-shadow: 0 1px 2px #000;
}
.hud-banner.wild {
    color: #5affb0;
    text-shadow:
        0 4px 0 #0b3a26,
        0 0 20px rgba(0, 0, 0, 0.5);
}
.hud-map {
    position: absolute;
    right: max(10px, env(safe-area-inset-right));
    top: 90px;
    width: 150px;
    height: 150px;
    opacity: 0.92;
}
.hud-banner {
    position: absolute;
    left: 50%;
    top: 22%;
    transform: translate(-50%, -50%) scale(0.6);
    font-size: 64px;
    color: var(--gold);
    text-shadow:
        0 4px 0 #6b2b10,
        0 0 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition:
        opacity 0.25s,
        transform 0.25s;
    white-space: nowrap;
}
.hud-banner.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.hud-banner.final {
    color: var(--red);
    text-shadow:
        0 4px 0 #fff6e0,
        0 0 20px rgba(0, 0, 0, 0.5);
}
.hud-banner.small {
    font-size: 34px;
    top: 32%;
}
.hud-banner.bad {
    color: #9aa0a8;
}
.hud-banner.finish {
    font-size: 96px;
}
.hud-count {
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    font-size: 150px;
    color: var(--cream);
    text-shadow:
        0 6px 0 #3b5bd6,
        0 0 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
}
.hud-count.show {
    animation: count 0.9s ease-out forwards;
}
.hud-count.go {
    color: #6fe36f;
    text-shadow:
        0 6px 0 #1f6b1f,
        0 0 30px rgba(0, 0, 0, 0.5);
}
@keyframes count {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.6);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
}

.hud-warn {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    padding: 8px 18px 4px;
    border-radius: 12px;
    font-size: 26px;
    background: rgba(150, 30, 20, 0.75);
    border: 3px solid #ffcc33;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
}
.hud-warn.show {
    opacity: 1;
    animation: warn 0.6s ease-in-out infinite alternate;
}
.hud-warn b {
    font-weight: 400;
    color: var(--gold);
}
.hud-warn span {
    display: inline-block;
    min-width: 1em;
    color: #fff;
}
@keyframes warn {
    to {
        transform: translateX(-50%) scale(1.06);
    }
}
@media (max-width: 700px) {
    .hud-place {
        font-size: 54px;
    }
    .hud-lap,
    .hud-time {
        font-size: 22px;
    }
    .hud-map {
        width: 110px;
        height: 110px;
        top: 70px;
    }
    .hud-count {
        font-size: 110px;
    }
    .hud-banner {
        font-size: 44px;
    }
    .menu button,
    .panel button {
        font-size: 20px;
        min-width: 220px;
    }
}
@media (max-width: 700px) and (min-height: 521px) {
    .title-card {
        width: 100%;
    }
} /* (a narrow window: the menu takes the width) */

/* ---- settings: a tab per group (Sound / Picture / Controls), its options in one column of equal buttons ---- */
.panel.settings {
    width: min(560px, 94vw);
}
.panel-tabs {
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.panel .panel-tabs button {
    min-width: 0;
    font-size: 20px;
    padding: 8px 8px 4px;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: none;
}
.panel .panel-tabs button.on {
    background: linear-gradient(#3b5bd6, #2a3f9e);
    box-shadow: 0 4px 0 #18265e;
}
.panel .panel-tabs button.focus {
    background: linear-gradient(#ffcc33, #e89a1c);
}
.set-list {
    --opt-w: 440px;
    --opt-h: 52px;
    display: grid;
    grid-template-columns: var(--opt-w);
    grid-auto-rows: var(--opt-h);
    gap: 8px;
    justify-content: center;
}
.set-list > button {
    width: 100%;
    height: 100%;
    min-width: 0;
}
.set-list > button:not(.opt) {
    white-space: nowrap;
    overflow: hidden;
}
.set-hint {
    opacity: 0.85;
    margin: 0;
    text-align: center;
}
.panel.rebind-panel {
    width: min(640px, 94vw);
}
table.rebind {
    border-collapse: collapse;
}
table.rebind td {
    padding: 3px 8px;
}
table.rebind td:first-child {
    text-align: right;
    opacity: 0.9;
}
table.rebind button {
    min-width: 150px !important;
    font-size: 18px !important;
    padding: 6px 12px 3px !important;
}
.panel.rebind-panel .panel-foot {
    --foot-w: 260px;
}

/* ---- touch buttons ---- */
.touch {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    font-family: var(--display);
}
.touch > * {
    pointer-events: auto;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.t-steer {
    position: absolute;
    left: max(14px, env(safe-area-inset-left));
    bottom: 16px;
    width: min(38vw, 300px);
    height: 96px;
    border-radius: 48px;
    background: rgba(20, 26, 50, 0.45);
    border: 3px solid rgba(255, 246, 224, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 22px;
    font-size: 30px;
    color: rgba(255, 246, 224, 0.7);
}
.t-steer i {
    position: absolute;
    left: calc(50% - 30px);
    top: 15px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 204, 51, 0.85);
    border: 3px solid #fff6e0;
    transition: transform 0.05s;
}
/* steering modes (Settings > Touch steering): only the chosen one shows */
.touch:not([data-steer="slider"]) .t-steer,
.touch:not([data-steer="joystick"]) .t-stick,
.touch:not([data-steer="tilt"]) .t-tilt {
    display: none;
}
/* joystick: the lower-left is all stick zone; the stick rests in the corner and jumps to where the thumb lands */
.t-stick {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46vw;
    height: 64vh;
}
.t-stick-base {
    position: absolute;
    left: calc(max(14px, env(safe-area-inset-left)) + 70px);
    top: calc(100% - 86px);
    width: 128px;
    height: 128px;
    margin: -64px 0 0 -64px;
    border-radius: 50%;
    background: rgba(20, 26, 50, 0.4);
    border: 3px solid rgba(255, 246, 224, 0.45);
    opacity: 0.6;
    pointer-events: none;
}
.t-stick-base.held {
    opacity: 1;
}
.t-stick-base i {
    position: absolute;
    left: 32px;
    top: 32px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255, 204, 51, 0.85);
    border: 3px solid #fff6e0;
}
/* tilt: a little wheel that turns with the phone (and asks for permission on iPhones) */
.t-tilt {
    position: absolute;
    left: max(14px, env(safe-area-inset-left));
    bottom: 16px;
    width: 92px;
    height: 92px;
    padding: 0;
    border-radius: 50%;
    background: rgba(20, 26, 50, 0.45);
    border: 3px solid rgba(255, 246, 224, 0.5);
    color: #fff6e0;
}
.t-tilt-wheel {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 6px solid rgba(255, 204, 51, 0.9);
}
.t-tilt-wheel i {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 4px);
    height: 8px;
    background: rgba(255, 204, 51, 0.9);
}
.t-tilt b {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
    white-space: nowrap;
    font: 400 18px var(--display);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.t-tilt.ask {
    border-color: #ffcc33;
    animation: t-ask 1.2s ease-in-out infinite;
}
@keyframes t-ask {
    50% {
        transform: scale(1.06);
    }
}
.t-btn {
    position: absolute;
    border-radius: 50%;
    border: 3px solid rgba(255, 246, 224, 0.7);
    color: #fff6e0;
    background: rgba(20, 26, 50, 0.5);
    font: 400 18px var(--display);
}
.t-btn.on {
    background: rgba(255, 204, 51, 0.85);
    color: var(--ink);
}
.t-drift {
    right: max(16px, env(safe-area-inset-right));
    bottom: 18px;
    width: 104px;
    height: 104px;
    font-size: 22px;
}
.t-item {
    right: calc(max(16px, env(safe-area-inset-right)) + 116px);
    bottom: 34px;
    width: 80px;
    height: 80px;
}
.t-brake {
    right: calc(max(16px, env(safe-area-inset-right)) + 10px);
    bottom: 136px;
    width: 76px;
    height: 76px;
    font-size: 15px;
}
.t-horn {
    right: calc(max(16px, env(safe-area-inset-right)) + 108px);
    bottom: 128px;
    width: 60px;
    height: 60px;
    font-size: 24px;
}
/* pause: the top-right corner (the race clock moves to its left; the minimap starts below it, at 56px) */
.t-pause {
    position: absolute;
    right: max(10px, env(safe-area-inset-right));
    top: 8px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 2px solid rgba(255, 246, 224, 0.6);
    background: rgba(20, 26, 50, 0.5);
    color: #fff6e0;
    font: 900 16px var(--body);
}
body.steamdeck .touch {
    display: none !important;
}

/* ---- phone gates ---- */
.gate {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: #0e1224;
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--display);
    font-size: 26px;
    line-height: 1.3;
}
.gate-icon {
    font-size: 64px;
    margin-bottom: 12px;
}
.gate-icon.spin {
    animation: rotdev 2s ease-in-out infinite;
}
@keyframes rotdev {
    0%,
    20% {
        transform: rotate(0deg);
    }
    60%,
    100% {
        transform: rotate(90deg);
    }
}
.gate button {
    margin-top: 18px;
    font-family: var(--display);
    font-size: 22px;
    padding: 12px 22px 8px;
    border-radius: 14px;
    border: 3px solid #fff6e0;
    background: linear-gradient(#e2453a, #a82a22);
    color: var(--cream);
}
#rotate {
    display: none;
    z-index: 60;
}
@media (max-aspect-ratio: 1/1) and (pointer: coarse) {
    #rotate {
        display: flex;
    }
}
/* with touch buttons on screen the HUD moves out of their way */
body.touch-on .hud-place {
    bottom: auto;
    top: 44px;
    font-size: 42px;
}
body.touch-on .hud-speed {
    right: auto;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
} /* (between the steering and the buttons) */
body.touch-on .hud-speed-num {
    font-size: 30px;
}
body.touch-on .hud-speed-unit {
    font-size: 13px;
}
body.touch-on .hud-map {
    width: 96px;
    height: 96px;
    top: 56px;
}
body.touch-on .hud-clock {
    right: calc(max(10px, env(safe-area-inset-right)) + 52px);
    top: 8px;
} /* (beside the pause button) */
body.touch-on .hud-drift,
body.touch-on .hud-boost {
    bottom: auto;
    top: 120px;
}
body.touch-on .hud-boost {
    top: 138px;
}

.info-sub {
    font-family: var(--display);
    font-weight: 400;
    color: #9fc6ff;
    margin: 14px 0 4px;
    font-size: 20px;
}
.title-foot a {
    color: inherit;
}
.credits {
    text-align: left;
    font-size: 15px;
}
.credits ul {
    margin: 0;
    padding-left: 1.2em;
}
.credits a {
    color: #9fc6ff;
}
.credits .info-sub {
    text-align: center;
}
.credits-foot {
    text-align: center;
    opacity: 0.85;
}

/* ---- split-screen: each player's HUD in their half, a little smaller ---- */
.hud.split-top {
    bottom: 50%;
    zoom: 0.72;
}
.hud.split-bottom {
    top: 50%;
    zoom: 0.72;
}
/* three or four: a quarter each (player 1 top left, 2 top right, 3 bottom left, 4 bottom right), smaller again */
.hud.q0,
.hud.q1,
.hud.q2,
.hud.q3 {
    zoom: 0.6;
}
.hud.q0 {
    right: 50%;
    bottom: 50%;
}
.hud.q1 {
    left: 50%;
    bottom: 50%;
}
.hud.q2 {
    right: 50%;
    top: 50%;
}
.hud.q3 {
    left: 50%;
    top: 50%;
}
.hud.q0::after,
.hud.q1::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 6px;
    background: var(--ink);
}
.hud.q0::before,
.hud.q2::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -3px;
    width: 6px;
    background: var(--ink);
}
.hud.split-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 4px;
    background: var(--ink);
}

/* ---- online ---- */
.panel.online,
.panel.name {
    --row-w: 380px;
}
.online-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    font-size: 17px;
    white-space: nowrap;
}
.online-name .pname {
    max-width: 10em;
}
.online-rows {
    display: grid;
    gap: 12px;
    width: var(--row-w);
}
.online-rows > button,
.online-rows > input {
    width: 100%;
    min-width: 0;
}
.online-status {
    min-height: 1.2em;
    margin: 0;
    max-width: 520px;
    text-align: center;
    opacity: 0.9;
    font-size: 15px;
}
.online-status:empty {
    display: none;
}
.panel button.small {
    font-size: 14px;
    padding: 4px 10px 2px;
    min-width: 0;
}
.join-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}
.join-row button {
    min-width: 0;
}
.join-row input,
#name-input {
    font: 400 26px var(--display);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    width: 100%;
    min-width: 0;
    text-align: center;
    padding: 8px 10px 4px;
    border-radius: 12px;
    border: 3px solid var(--cream);
    background: #141b33;
    color: var(--gold);
    -webkit-user-select: text;
    user-select: text;
    touch-action: manipulation;
}
#name-input {
    text-transform: none;
    letter-spacing: 0.02em;
}
.join-row input.focus,
#name-input.focus,
.join-row input:focus,
#name-input:focus {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}
.panel.name .panel-foot {
    --foot-w: 220px;
}
/* the lobby: players (and emotes, the invite) on the left; your racer, the host's options and Ready on the right */
.panel.room {
    width: min(1040px, 96vw);
}
.panel-body.room-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 22px;
    align-items: start;
}
.room-left {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    min-width: 0;
}
.room-right {
    grid-column: 2;
    grid-row: 1;
    --opt-w: 220px;
    --opt-h: 58px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.room-right > .opt,
.room-right > button {
    width: calc(var(--opt-w) * 2 + 8px);
    min-width: 0;
}
.room-host {
    display: grid;
    grid-template-columns: repeat(2, var(--opt-w));
    grid-auto-rows: var(--opt-h);
    gap: 8px;
}
.room-host .opt {
    width: 100%;
    height: 100%;
}
.room-code {
    color: var(--gold);
    letter-spacing: 0.12em;
}
.room-public {
    font: 800 0.4em var(--body);
    vertical-align: middle;
    padding: 2px 8px;
    border-radius: 8px;
    background: #3fa8ff;
    color: var(--ink);
    text-shadow: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.room-players {
    border-collapse: collapse;
    width: 100%;
    font-size: 17px;
}
.room-players td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255, 246, 224, 0.15);
}
.room-players tr.me td {
    color: var(--gold);
    font-weight: 800;
}
.room-players i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: -1px;
}
.room-wait {
    opacity: 0.7;
    font-style: italic;
}
/* a player's name, wherever it's shown: cut off with ... if it's wide, and any text-direction tricks kept inside */
.pname {
    display: inline-block;
    max-width: 8.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    unicode-bidi: isolate;
}
/* each player's ping: green under 100 ms, yellow under 200, red beyond */
.room-players td.ping {
    white-space: nowrap;
    text-align: right;
    font-size: 0.85em;
    opacity: 0.9;
}
.room-players td.ping b {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: 0;
}
.room-players td.ping.good b {
    background: #5ad26a;
    box-shadow: 0 0 6px #5ad26a;
}
.room-players td.ping.fair b {
    background: #f2c84b;
    box-shadow: 0 0 6px #f2c84b;
}
.room-players td.ping.poor b {
    background: #ff5a5a;
    box-shadow: 0 0 6px #ff5a5a;
}
.hud-feed {
    position: absolute;
    left: max(16px, env(safe-area-inset-left));
    top: 40%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--body);
    font-weight: 800;
    font-size: 18px;
    text-shadow: 0 2px 3px #000;
}
.hud-feed div {
    transition: opacity 0.6s;
}
.hud-feed div.gone {
    opacity: 0;
}
.room-emotes {
    display: flex;
    gap: 8px;
}
.panel .room-emotes button {
    font-size: 22px;
    min-width: 0;
    padding: 4px 10px;
}
#room .panel-foot {
    --foot-w: 260px;
}
/* the on-screen keyboard is up (ui/keyboard.js): the panel sits in the part of the screen still showing, at the top */
body.kb-up .overlay {
    top: var(--vvtop, 0px);
    bottom: auto;
    height: var(--vvh, 100%);
    align-items: flex-start;
    padding-top: 4px;
}
body.kb-up .panel {
    max-height: calc(var(--vvh, 100vh) - 8px);
}
body.kb-up #name-prompt .online-status,
body.kb-up #online .online-status {
    display: none;
}

/* ---- short landscape screens (phones on their side): the same layouts, smaller - every panel's title and buttons stay
   on screen and its body scrolls if it must; no text under 12px ---- */
@media (max-height: 520px) {
    :root {
        --foot-w: 170px;
    }
    .overlay {
        padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
    }
    .title {
        padding: 0;
    }
    .title-card {
        width: min(440px, 58vw);
        padding: 10px 12px 10px max(18px, env(safe-area-inset-left));
    }
    .logo {
        font-size: 40px;
        margin: 0 0 4px;
        text-shadow:
            0 2px 0 #b5561b,
            0 4px 0 #6b2b10,
            0 6px 12px rgba(0, 0, 0, 0.5);
    }
    .title-status {
        font-size: 18px;
        margin: 6px 0;
    }
    .menu {
        gap: 6px;
        margin: 8px 0;
    }
    .menu button,
    .panel button {
        font-size: 16px;
        min-width: 150px;
        padding: 6px 12px 3px;
        border-width: 2px;
        border-radius: 10px;
        box-shadow:
            0 3px 0 #18265e,
            0 4px 8px rgba(0, 0, 0, 0.3);
    }
    .panel {
        gap: 6px;
        padding: 8px 12px;
        max-width: 98vw;
        max-height: calc(100vh - 12px);
        max-height: calc(100dvh - 12px);
        border-width: 2px;
        border-radius: 14px;
    }
    .panel h2 {
        font-size: 24px;
        text-shadow: 0 2px 0 #6b2b10;
    }
    .panel-body {
        gap: 6px;
        padding: 4px 6px 6px;
    }
    .panel-body.scrolls {
        padding-right: 18px;
    }
    .panel-foot {
        gap: 8px;
        padding: 6px 4px 2px;
    }
    .panel > h2 + .panel-foot.stack {
        padding-top: 2px;
    }
    .opt {
        gap: 8px;
    }
    /* race setup: racer on the left, options in two columns on the right */
    .setup-cols {
        gap: 10px;
    }
    .setup-racer {
        gap: 4px;
        flex: 0 0 auto;
    }
    .setup-opts {
        --opt-w: 200px;
        --opt-h: 42px;
        gap: 5px 6px;
    }
    .panel.setup .panel-foot {
        --foot-w: 200px;
    }
    .racer-preview {
        width: 210px;
        height: 110px;
        border-radius: 10px;
    }
    .racer-card {
        width: 220px;
        font-size: 12px;
        line-height: 1.25;
    }
    .racer-card small {
        font-size: 12px;
    }
    .setup-racer .opt {
        --opt-w: 220px;
        --opt-h: 36px;
    }
    .racer-card .cls {
        font-size: 12px;
        padding: 0 6px;
    }
    .racer-card b {
        font-size: 17px;
    }
    .racer-card .bar {
        grid-template-columns: 70px 1fr;
        margin-top: 1px;
        font-size: 12px;
    }
    /* reading screens */
    .info-body {
        font-size: 13px;
        line-height: 1.35;
    }
    .panel-body.info-body {
        padding-top: 6px;
    }
    table.keys {
        font-size: 12px;
    }
    table.keys td,
    table.keys th {
        padding: 1px 8px;
    }
    .info-cols {
        columns: 2;
        column-gap: 22px;
        text-align: left;
    }
    .info-cols > * {
        break-inside: avoid;
        margin-top: 0;
    }
    .info-body p {
        margin: 4px 0;
    }
    .info-sub {
        font-size: 16px;
        margin: 8px 0 2px;
    }
    .credits {
        font-size: 12px;
        line-height: 1.3;
        columns: 2;
        column-gap: 22px;
    }
    .credits h3,
    .credits p {
        break-inside: avoid;
        margin: 2px 0;
    }
    /* results */
    .results-table {
        font-size: 13px;
    }
    .results-table td {
        padding: 1px 8px;
    }
    .results-table td.pl {
        font-size: 15px;
    }
    .results-news {
        margin: 0;
    }
    #results .panel {
        min-width: min(560px, 96vw);
    }
    #results .panel-foot {
        --foot-w: 180px;
    }
    #results .panel-foot:has(#btn-post:not(.hidden)) {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, var(--foot-w));
    }
    #results .panel-foot #btn-post {
        grid-column: 1 / -1;
    }
    #results.podium .panel {
        max-height: 80vh;
        max-height: 80dvh;
    }
    /* pause: two by two */
    #pause .panel-foot {
        --foot-w: 200px;
        grid-auto-flow: row;
        grid-template-columns: repeat(2, var(--foot-w));
    }
    /* settings: two columns of options */
    .panel.settings {
        width: auto;
    }
    .panel .panel-tabs button {
        font-size: 15px;
        padding: 5px 8px 2px;
    }
    .set-list {
        --opt-w: min(300px, 44vw);
        --opt-h: 40px;
        grid-template-columns: repeat(2, var(--opt-w));
        gap: 6px;
    }
    .set-list button {
        font-size: 15px;
    }
    .set-hint {
        font-size: 13px;
    }
    table.rebind td {
        padding: 1px 6px;
    }
    table.rebind td:first-child {
        font-size: 13px;
    }
    table.rebind button {
        min-width: 120px !important;
        font-size: 14px !important;
        padding: 3px 8px 1px !important;
    }
    .panel.rebind-panel .panel-foot {
        --foot-w: 190px;
    }
    /* online */
    .panel.online,
    .panel.name {
        --row-w: 300px;
    }
    .online-name,
    .online-status {
        font-size: 13px;
    }
    .online-rows {
        gap: 6px;
    }
    .join-row input,
    #name-input {
        font-size: 18px;
        padding: 5px 8px 2px;
    }
    .panel.name .panel-foot {
        --foot-w: 180px;
    }
    /* the lobby */
    .panel-body.room-body {
        gap: 6px 12px;
    }
    .room-left {
        gap: 6px;
    }
    .room-right {
        --opt-w: 170px;
        --opt-h: 42px;
        gap: 5px;
    }
    .room-host {
        gap: 5px;
    }
    .room-players {
        font-size: 13px;
    }
    .room-players td {
        padding: 2px 6px;
    }
    .room-players .rname {
        display: none;
    } /* (the racer's colour is enough here) */
    .room-players .pname {
        max-width: 7em;
    }
    .panel .room-emotes button {
        font-size: 16px;
        padding: 2px 8px;
    }
    #room .panel-foot {
        --foot-w: 200px;
    }
}
@media (max-height: 520px) and (max-width: 720px) {
    :root {
        --foot-w: 150px;
    }
    .menu button,
    .panel button {
        font-size: 14px;
        min-width: 130px;
    }
    .setup-opts {
        --opt-w: 186px;
    }
    .panel.setup .panel-foot {
        --foot-w: 186px;
    }
    .opt-val i {
        padding: 0 3px;
    } /* (a few more pixels for long names) */
    .setup-opts .opt-val small,
    .room-host .opt-val small {
        display: none;
    } /* (the racer card shows the weight) */
    .racer-preview {
        width: 180px;
        height: 100px;
    }
    .racer-card {
        width: 190px;
    }
    .info-cols {
        column-gap: 14px;
    }
    .credits {
        column-gap: 14px;
    }
    #results .panel-foot {
        --foot-w: 160px;
    }
    #pause .panel-foot {
        --foot-w: 180px;
    }
    .room-right {
        --opt-w: 160px;
    }
}

/* ---- online time-trial leaderboard (js/ui/leaderboard.js) ---- */
.lb-title {
    margin: 8px 0 2px;
}
.lb-table {
    font-size: 15px;
}
.lb-table td {
    padding: 3px 8px;
}
.lb-table td.pl {
    font-size: 18px;
    width: 2em;
}
.lb-table td.lb-name {
    font-weight: 800;
}
.lb-table td.lb-racer {
    opacity: 0.75;
    font-size: 0.9em;
}
.lb-table td.lb-act {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}
.panel .lb-table button {
    font-size: 13px;
    min-width: 0;
    padding: 3px 10px 1px;
    border-width: 2px;
    border-radius: 9px;
    box-shadow: 0 2px 0 #18265e;
}
.lb-sub {
    margin: 8px 0 0;
    color: var(--gold);
    font-weight: 800;
}
.lb-note {
    margin: 4px 0;
    opacity: 0.8;
}
@media (max-height: 520px) {
    .lb-table {
        font-size: 12px;
    }
    .lb-table td {
        padding: 1px 6px;
    }
    .lb-table td.pl {
        font-size: 14px;
    }
    .panel .lb-table button {
        font-size: 12px;
        padding: 1px 8px 0;
    }
}

/* ---- achievements: the news (ui/toast.js) and the Trophies screen ---- */
.toast {
    position: fixed;
    left: 50%;
    top: 96px;
    z-index: 40;
    max-width: min(520px, 92vw);
    padding: 10px 18px 8px;
    border-radius: 14px;
    border: 3px solid var(--gold);
    background: rgba(27, 36, 64, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    font-family: var(--body);
    font-size: 16px;
    text-align: center;
    pointer-events: none;
    transform: translate(-50%, -160px);
    transition: transform 0.35s ease;
}
.toast.show {
    transform: translate(-50%, 0);
}
.toast b {
    font-family: var(--display);
    font-weight: 400;
    font-size: 22px;
    color: var(--gold);
    display: block;
}
.toast small {
    display: block;
    opacity: 0.85;
}
.trophies {
    display: grid;
    gap: 8px;
    text-align: left;
}
.trophy {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 2px 12px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
}
.trophy.got {
    background: linear-gradient(90deg, rgba(255, 204, 51, 0.3), rgba(255, 204, 51, 0.08));
    box-shadow: inset 0 0 0 1px rgba(255, 204, 51, 0.55);
}
.trophy .ico {
    grid-row: 1 / span 2;
    font-size: 26px;
    text-align: center;
    filter: grayscale(1);
    opacity: 0.45;
}
.trophy.got .ico {
    filter: none;
    opacity: 1;
}
.trophy b {
    font-family: var(--display);
    font-weight: 400;
    font-size: 19px;
    color: var(--gold);
}
.trophy .desc {
    grid-column: 2;
    font-size: 14px;
    opacity: 0.9;
}
.trophy .reward {
    grid-column: 3;
    grid-row: 1 / span 2;
    font-size: 13px;
    text-align: right;
    color: #9fc6ff;
    max-width: 14em;
}
.trophy .bar {
    grid-column: 2;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ffcc33 var(--v), rgba(255, 255, 255, 0.15) var(--v));
}
.trophy-equip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 8px;
    --opt-w: 300px;
    --opt-h: 48px;
}
.ptitle {
    display: block;
    font-size: 0.72em;
    font-weight: 600;
    color: #9fc6ff;
    line-height: 1.1;
}
.trophy-sum {
    margin: 0 0 6px;
    text-align: center;
}
@media (max-height: 520px) {
    .toast {
        top: 56px;
        font-size: 13px;
        padding: 6px 12px 4px;
    }
    .toast b {
        font-size: 17px;
    }
    .trophies {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .trophy {
        grid-template-columns: 28px 1fr;
        padding: 5px 8px;
    }
    .trophy .ico {
        font-size: 20px;
    }
    .trophy b {
        font-size: 15px;
    }
    .trophy .desc,
    .trophy .reward {
        font-size: 12px;
    }
    .trophy .reward {
        grid-column: 2;
        grid-row: auto;
        text-align: left;
    }
}