/* Phone layout (public/phone-menu.js). Everything here is under html.is-phone
   (phone-wall.js marks a phone from the device itself), so computers never see
   it. Sharp corners, no angled boxes except the two the design keeps: the red
   brand div's point and the profile hexagon with the plates beside it. */

html.is-phone { --pm-u: calc(100vw / 12); --pm-k: 1.41; --pm-bh: calc(var(--pm-u) * 1.2 * var(--pm-k)); --pm-bt: calc(calc(78 * var(--s, 1) * 1px) + env(safe-area-inset-bottom)); }

/* The PC banner and infobar stay in the page (their buttons are driven from the
   phone ones) but are not seen or touched. */
html.is-phone .wdm-banner, html.is-phone .wdm-infobar { visibility: hidden !important; pointer-events: none !important; }
html.is-phone.pm-real .wdm-infobar { visibility: visible !important; }
html.is-phone.pm-real .wdm-infobar * { pointer-events: auto; }
html.is-phone nav.wdm-traced { visibility: hidden !important; pointer-events: none !important; }

.pm-bn, .pm-bt, .pm-grid { display: none; }
html.is-phone body.wdm-on:not(.wiki-reading) .pm-bn { display: block; }
html.is-phone body.wdm-on:not(.wiki-reading):not(.pm-hide-bt) .pm-bt { display: block; }
html.is-phone.pm-real .pm-bt { display: none !important; }
html.is-phone body.wdm-on:not(.wiki-reading) .pm-grid { display: grid; }

/* ── Banner ── */
.pm-bn {
    position: fixed; z-index: 103; left: 0; top: 0; width: 100%; height: var(--pm-bh);
    container-type: inline-size; color: #d6d6d6; font-family: 'Mono', Consolas, monospace;
}
.pm-bn * { position: absolute; box-sizing: border-box; border-radius: 0; margin: 0; }
.pm-band { left: 0; right: 0; top: 0; height: calc(var(--pm-u) * 1.1 * var(--pm-k)); background: #1a1a1a; }
.pm-red {
    left: 0; top: 0; width: calc(var(--pm-u) * 3.1 * var(--pm-k)); height: calc(var(--pm-u) * 1.1 * var(--pm-k));
    background: var(--fav, #f53023); clip-path: polygon(0 0, 90.3% 0, 100% 50%, 90.3% 100%, 0 100%);
    border: 0; padding: 0; cursor: pointer; color: #dcdcdc;
}
.pm-red img { left: calc(var(--pm-u) * .05 * var(--pm-k)); top: calc(var(--pm-u) * .22 * var(--pm-k)); width: calc(var(--pm-u) * 2.7 * var(--pm-k)); }
.pm-red .pm-back { inset: 0; display: flex; align-items: center; gap: calc(var(--pm-u) * .1 * var(--pm-k)); padding-left: calc(var(--pm-u) * .22 * var(--pm-k)); font-size: calc(var(--pm-u) * .62); letter-spacing: .02em; }
.pm-red .pm-back svg { position: static; width: calc(var(--pm-u) * .8); height: auto; }
.pm-red .pm-back span { position: static; }
.pm-title {
    left: 50%; top: calc(var(--pm-u) * .55 * var(--pm-k)); transform: translate(-50%, -50%);
    font-size: calc(var(--pm-u) * .8); letter-spacing: .08em; line-height: 1; white-space: nowrap; color: #d6d6d6;
    background: none; border: 0; padding: 0; font-family: inherit;
}
.pm-pl {
    right: 0; top: 0; width: calc(var(--pm-u) * 2.15 * var(--pm-k)); height: calc(var(--pm-u) * 1.1 * var(--pm-k));
}
.pm-pl > * { left: 0; width: 100%; height: calc(50% - calc(1.5 * var(--s, 1) * 1px)); background: #303030; display: flex; align-items: center; justify-content: center; font-size: calc(var(--pm-u) * .46 * var(--pm-k)); color: #dcdcdc; border: 0; font-family: inherit; padding: 0; }
.pm-lvl { top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%); padding-left: 18% !important; }
.pm-bell { bottom: 0; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); padding-left: 18% !important; }
.pm-bell svg { position: static; width: calc(var(--pm-u) * .5 * var(--pm-k)); height: auto; fill: #8a8a8a; }
.pm-bell i { top: 18%; right: 16%; left: auto; min-width: calc(14 * var(--s, 1) * 1px); height: calc(14 * var(--s, 1) * 1px); width: auto; padding: 0 calc(3 * var(--s, 1) * 1px); background: #f53023; color: #fff; font-size: calc(10 * var(--s, 1) * 1px); font-style: normal; line-height: calc(14 * var(--s, 1) * 1px); text-align: center; }
.pm-bell i[hidden] { display: none; }
.pm-hex {
    right: calc(var(--pm-u) * 1.78 * var(--pm-k)); top: 0; width: calc(var(--pm-u) * 1.34 * var(--pm-k)); height: calc(var(--pm-u) * 1.14 * var(--pm-k));
    background: #303030; border: 0; padding: 0; overflow: hidden; cursor: pointer;
    clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
}
.pm-hex img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }

/* ── Bottom: socials and the racers counter ── */
.pm-bt {
    position: fixed; z-index: 103; left: 0; right: 0; bottom: 0; height: var(--pm-bt);
    padding-bottom: env(safe-area-inset-bottom); background: #111; font-family: 'Mono', Consolas, monospace;
}
.pm-bt * { box-sizing: border-box; border-radius: 0; margin: 0; }
.pm-claim {
    position: absolute; left: calc(12 * var(--s, 1) * 1px); bottom: calc(100% + calc(6 * var(--s, 1) * 1px)); background: #f53023; color: #fff; font-size: calc(11 * var(--s, 1) * 1px);
    letter-spacing: calc(.5 * var(--s, 1) * 1px); padding: calc(4 * var(--s, 1) * 1px) calc(8 * var(--s, 1) * 1px); text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
.pm-claim::after { content: ""; position: absolute; left: calc(22 * var(--s, 1) * 1px); top: 100%; border: calc(6 * var(--s, 1) * 1px) solid transparent; border-top-color: #f53023; border-bottom: 0; }
html:not(.is-guest) .pm-claim { display: none; }
.pm-soc { display: flex; height: calc(48 * var(--s, 1) * 1px); background: #1a1a1a; border-top: calc(3 * var(--s, 1) * 1px) solid var(--fav, #f53023); }
.pm-soc a { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; border-right: calc(2 * var(--s, 1) * 1px) solid #000; text-decoration: none; }
.pm-soc a:last-child { border-right: 0; }
.pm-soc svg { width: calc(22 * var(--s, 1) * 1px); height: calc(22 * var(--s, 1) * 1px); fill: currentColor; }
.pm-ctr { height: calc(27 * var(--s, 1) * 1px); display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--s, 1) * 1px); font-size: calc(12 * var(--s, 1) * 1px); letter-spacing: calc(1 * var(--s, 1) * 1px); color: #e8eaf5; white-space: nowrap; background: #111; }
.pm-ctr i { width: calc(9 * var(--s, 1) * 1px); height: calc(9 * var(--s, 1) * 1px); background: #2fd44f; display: block; }

/* ── Menu tiles (Home, Multiplayer, Single Player) ── */
.pm-grid {
    position: fixed; z-index: 100; left: 0; right: 0; top: var(--pm-bh); bottom: var(--pm-bt);
    grid-template-columns: 1fr 1fr; align-content: center; gap: calc(12 * var(--s, 1) * 1px); padding: calc(12 * var(--s, 1) * 1px); overflow-y: auto;
    font-family: 'Mono', Consolas, monospace;
}
.pm-tile {
    position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; overflow: hidden; aspect-ratio: 1.75 / 1; border: calc(3 * var(--s, 1) * 1px) solid #000; padding: calc(10 * var(--s, 1) * 1px); cursor: pointer;
    background: conic-gradient(var(--pm-c1, #e8302a) 25%, var(--pm-c2, #b8201c) 0 50%, var(--pm-c1, #e8302a) 0 75%, var(--pm-c2, #b8201c) 0) 0 0 / calc(24 * var(--s, 1) * 1px) calc(24 * var(--s, 1) * 1px);
    color: #fff; text-align: left; font: inherit; animation: pm-in .45s cubic-bezier(.16, 1, .3, 1) backwards; transition: transform .12s, filter .12s;
}
.pm-tile:active { transform: scale(.95); filter: brightness(1.2); }
.pm-tile:nth-child(2) { animation-delay: .06s; } .pm-tile:nth-child(3) { animation-delay: .12s; }
.pm-tile:nth-child(4) { animation-delay: .18s; } .pm-tile:nth-child(5) { animation-delay: .24s; } .pm-tile:nth-child(6) { animation-delay: .3s; }
@keyframes pm-in { from { opacity: 0; transform: translateY(calc(18 * var(--s, 1) * 1px)); } }
.pm-name { position: relative; z-index: 1; display: block; font-size: calc(15 * var(--s, 1) * 1px); line-height: 1.05; text-transform: uppercase; text-shadow: calc(2 * var(--s, 1) * 1px) calc(2 * var(--s, 1) * 1px) 0 #000; }
.pm-art { position: absolute; left: 0; right: 0; bottom: calc(12 * var(--s, 1) * 1px); height: calc(50 * var(--s, 1) * 1px); overflow: hidden; }
.pm-run { position: absolute; inset: 0; background-repeat: repeat-x; background-size: auto 100%; animation: pm-run var(--sp) linear infinite; }
@keyframes pm-run { to { background-position-x: calc(-1 * var(--per)); } }
.pm-gx { height: 100%; display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--s, 1) * 1px); }
.pm-gx svg { height: 100%; width: auto; fill: #fff; color: #fff; }
.pm-gx img { height: 100%; width: auto; }
.pm-gx b { font-size: calc(18 * var(--s, 1) * 1px); font-weight: normal; }
.pm-gx [stroke="currentColor"] { fill: none; }
.pm-pod { display: flex; align-items: flex-end; justify-content: space-around; height: 100%; }
.pm-pod div { display: flex; flex-direction: column; align-items: center; width: 28%; }
.pm-pod img { height: calc(22 * var(--s, 1) * 1px); width: auto; margin-bottom: calc(1 * var(--s, 1) * 1px); }
.pm-pod i { display: block; width: 100%; background: #fff; }
.pm-gx .wdm-spin { transform-box: fill-box; transform-origin: center; animation: pm-spin 6s linear infinite; }
.pm-gx .wdm-ic-hand { transform-origin: calc(12 * var(--s, 1) * 1px) calc(14 * var(--s, 1) * 1px); animation: pm-spin 4s linear infinite; }
.pm-gx .wdm-ic-flip { transform-box: fill-box; transform-origin: center; animation: pm-flip 4s cubic-bezier(.6, 0, .3, 1) infinite; }
.pm-gx .wdm-ic-knob { transform-box: fill-box; animation: pm-knob 3s ease-in-out infinite; }
.pm-gx .wdm-ic-enter { transform-box: fill-box; animation: pm-enter 2.4s ease-in-out infinite; }
@keyframes pm-spin { to { transform: rotate(360deg); } }
@keyframes pm-flip { 0%, 75% { rotate: 0deg; } 100% { rotate: 180deg; } }
@keyframes pm-knob { 0%, 100% { translate: 0 calc(-2 * var(--s, 1) * 1px); } 50% { translate: 0 calc(2 * var(--s, 1) * 1px); } }
@keyframes pm-enter { 0%, 100% { translate: calc(-2 * var(--s, 1) * 1px) 0; } 50% { translate: calc(1 * var(--s, 1) * 1px) 0; } }
@media (prefers-reduced-motion: reduce) { .pm-tile, .pm-gx *, .pm-run { animation: none !important; } }

/* Tiles take the player's accent the way the PC Home buttons do (home-menu.css):
   --slab-c / --sq-c when the accent is a signup colour, a mix of it otherwise,
   the wallpaper's colour in that look, and the red pair for guests. */
html.is-phone { --pm-ac: var(--btn-accent, var(--accent, #f8d08f)); }
html.is-phone.look-wpcolor { --pm-ac: var(--wp-accent, #fff); }
html.is-phone .pm-tile { --pm-c1: color-mix(in srgb, var(--pm-ac) 42%, rgb(12 14 14)); --pm-c2: color-mix(in srgb, var(--pm-ac) 55%, rgb(40 42 42)); }
html.is-phone:not(.look-wpcolor) .pm-tile { --pm-c1: var(--slab-c, color-mix(in srgb, var(--pm-ac) 42%, rgb(12 14 14))); --pm-c2: var(--sq-c, color-mix(in srgb, var(--pm-ac) 55%, rgb(40 42 42))); }
html.is-phone.is-guest .pm-tile { --pm-c1: var(--fav, #d8302c); --pm-c2: var(--fav-deep, #a82220); }


/* ── Shop (one long stack) ── */
.pm-shop { display: none; }
html.is-phone.pm-shop-on body.wdm-on:not(.wiki-reading) .pm-shop { display: block; }
html.is-phone.pm-shop-on .shop-container { visibility: hidden !important; pointer-events: none !important; }
.pm-shop {
    position: fixed; z-index: 100; left: 0; right: 0; top: var(--pm-bh); bottom: var(--pm-bt);
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: calc(10 * var(--s, 1) * 1px) calc(10 * var(--s, 1) * 1px) calc(16 * var(--s, 1) * 1px);
    font-family: 'Mono', Consolas, monospace; color: #fff; background: rgb(0 0 0 / .55);
}
.pm-shop * { box-sizing: border-box; border-radius: 0; }
.pm-h { display: flex; justify-content: space-between; align-items: center; margin: calc(14 * var(--s, 1) * 1px) 0 calc(8 * var(--s, 1) * 1px); font-size: calc(13 * var(--s, 1) * 1px); font-weight: normal; letter-spacing: .1em; color: #f2d28a; }
.pm-h small { color: #999; font-size: calc(11 * var(--s, 1) * 1px); }
.pm-nm { font-size: calc(12 * var(--s, 1) * 1px); letter-spacing: .04em; text-transform: uppercase; }
.pm-sub { font-size: calc(10 * var(--s, 1) * 1px); color: #aaa; text-transform: uppercase; text-align: right; }
.pm-buy { display: block; width: 100%; border: 0; padding: calc(7 * var(--s, 1) * 1px) calc(4 * var(--s, 1) * 1px); background: #2fe04a; color: #000; font: inherit; font-size: calc(11 * var(--s, 1) * 1px); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: transform .12s, filter .12s; }
.pm-buy:active { transform: scale(.96); filter: brightness(1.2); }
.pm-buy.is-own { background: #1a1a1a; color: #2fe04a; outline: calc(2 * var(--s, 1) * 1px) solid #2fe04a; outline-offset: calc(-2 * var(--s, 1) * 1px); }
.pm-buy.is-on { background: #1a1a1a; color: #fff; outline: calc(2 * var(--s, 1) * 1px) solid #fff; outline-offset: calc(-2 * var(--s, 1) * 1px); }
.pm-buy[disabled] { opacity: .7; }
.pm-th { display: block; border: 0; padding: 0; cursor: pointer; }
.pm-bun { background: #1a1a1a; border: calc(2 * var(--s, 1) * 1px) solid #000; border-top: calc(5 * var(--s, 1) * 1px) solid var(--fav, #d8302c); margin-bottom: calc(12 * var(--s, 1) * 1px); animation: pm-in .4s cubic-bezier(.16, 1, .3, 1) backwards; }
.pm-bun-hd { display: flex; justify-content: space-between; gap: calc(10 * var(--s, 1) * 1px); padding: calc(8 * var(--s, 1) * 1px) calc(10 * var(--s, 1) * 1px) calc(4 * var(--s, 1) * 1px); }
.pm-bun-st { display: flex; height: calc(120 * var(--s, 1) * 1px); margin: calc(4 * var(--s, 1) * 1px) calc(10 * var(--s, 1) * 1px); gap: calc(4 * var(--s, 1) * 1px); }
.pm-bun-st .pm-th { flex: 1.1; }
.pm-pcs { flex: 1.6; display: flex; gap: calc(4 * var(--s, 1) * 1px); }
.pm-pc { flex: 1; min-width: 0; background: var(--rar, #7f8c9e); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pm-bun-ft { display: flex; align-items: center; gap: calc(8 * var(--s, 1) * 1px); padding: calc(8 * var(--s, 1) * 1px) calc(10 * var(--s, 1) * 1px); }
.pm-bun-ft s { color: #999; font-size: calc(11 * var(--s, 1) * 1px); }
.pm-off { background: #2fe04a; color: #000; font-size: calc(10 * var(--s, 1) * 1px); padding: calc(2 * var(--s, 1) * 1px) calc(5 * var(--s, 1) * 1px); }
.pm-bun-ft .pm-buy { width: auto; margin-left: auto; padding: calc(7 * var(--s, 1) * 1px) calc(14 * var(--s, 1) * 1px); }
.pm-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--s, 1) * 1px); }
.pm-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--s, 1) * 1px); }
.pm-tc { background: #1a1a1a; border: calc(2 * var(--s, 1) * 1px) solid #000; animation: pm-in .4s cubic-bezier(.16, 1, .3, 1) backwards; }
.pm-tc .pm-th { width: 100%; height: calc(110 * var(--s, 1) * 1px); }
.pm-in { padding: calc(8 * var(--s, 1) * 1px); display: flex; flex-direction: column; gap: calc(6 * var(--s, 1) * 1px); }
.pm-cu { position: relative; background: var(--rar, #7f8c9e); color: #141414; border: calc(2 * var(--s, 1) * 1px) solid #000; padding: calc(10 * var(--s, 1) * 1px) calc(6 * var(--s, 1) * 1px) calc(8 * var(--s, 1) * 1px); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: calc(6 * var(--s, 1) * 1px); animation: pm-in .4s cubic-bezier(.16, 1, .3, 1) backwards; }
.pm-rar { position: absolute; left: calc(6 * var(--s, 1) * 1px); top: calc(6 * var(--s, 1) * 1px); font-size: calc(9 * var(--s, 1) * 1px); letter-spacing: .06em; opacity: .75; text-transform: uppercase; }
.pm-cu-art { flex: 1; min-height: calc(76 * var(--s, 1) * 1px); display: flex; align-items: center; justify-content: center; }
.pm-ex .pm-cu-art { min-height: calc(64 * var(--s, 1) * 1px); }
.pm-cu-art img, .pm-pc img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.pm-shop .cos-swap { display: grid; }
.pm-shop .cos-swap > * { grid-area: 1 / 1; }
.pm-shop .cos-sprite--hand { opacity: 0; }