/* The game page (/play). Same colours and type as the site, its own layout:
   a full-screen canvas with the menus as cards on top of it. */
:root {
  --bg: #0b0b0a;
  --ink: #f4f1e8;
  --ink-2: #b3afa3;
  --ink-3: #86837a;
  --ink-4: #5b5952;
  --line: rgba(244, 241, 232, .16);
  --line-soft: rgba(244, 241, 232, .09);
  --card: rgba(17, 17, 16, .82);
  --acc: #ffc85c;
  --soul: #ff4b5c;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Sora", -apple-system, "Helvetica Neue", sans-serif;
  --pixel: "VT323", "Space Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); color-scheme: dark; overflow: hidden; }
body { font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, p, ol, dl, dd { margin: 0; padding: 0; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; image-rendering: pixelated; }
body.playing #game { cursor: none; }

.pl-back { position: fixed; top: max(14px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); z-index: 5; font-family: var(--mono); font-size: .75rem; letter-spacing: .02em; color: var(--ink-3); text-decoration: none; padding: 6px 0; transition: color .15s; }
.pl-back:hover { color: var(--ink); }
body.playing .pl-back { opacity: .35; }

/* ── HUD ── */
.pl-hud { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 4; display: flex; align-items: center; gap: 18px; font-family: var(--pixel); pointer-events: none; }
.pl-hud[hidden] { display: none; }
.pl-score { font-weight: 400; font-size: 2.4rem; line-height: 1; min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.pl-stars { font-size: 1.5rem; color: var(--acc); }
.pl-lives { display: flex; gap: 5px; }
.pl-lives i { width: 18px; height: 16px; background: var(--soul); clip-path: polygon(0 25%, 12% 0, 38% 0, 50% 18%, 62% 0, 88% 0, 100% 25%, 100% 50%, 50% 100%, 0 50%); }
.pl-lives i.off { background: var(--ink-4); opacity: .5; }
.pl-combo { font-size: 1.5rem; color: #5ec8ff; min-width: 2.5ch; text-align: right; }
.pl-combo.hot { color: var(--acc); }
.pl-dash { width: 34px; height: 6px; background: var(--line); position: relative; overflow: hidden; }
.pl-dash i { position: absolute; inset: 0; background: #5ec8ff; transform-origin: left; transform: scaleX(var(--k, 1)); }
.pl-dash.ready i { background: var(--ink); }
.pl-dash.twin::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(0, 0, 0, .75); }   /* two dashes: the bar in two halves */
.pl-bars { display: grid; gap: 4px; }
.pl-super { width: 34px; height: 6px; background: var(--line); position: relative; overflow: hidden; }
.pl-super i { position: absolute; inset: 0; background: #ff9a3c; transform-origin: left; transform: scaleX(var(--k, 0)); }
.pl-super.full i { background: var(--acc); animation: glow .5s steps(2) infinite; }
@keyframes glow { 50% { opacity: .45; } }
.pl-boss { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 4; display: grid; gap: 4px; justify-items: center; font-family: var(--pixel); font-size: 1.25rem; letter-spacing: .06em; color: var(--soul); pointer-events: none; width: min(420px, 50vw); }
.pl-boss[hidden] { display: none; }
.pl-bossbar { width: 100%; height: 8px; background: rgba(255, 75, 92, .18); border: 1px solid rgba(255, 75, 92, .5); }
.pl-bossbar i { display: block; height: 100%; background: var(--soul); transform-origin: left; transform: scaleX(var(--k, 1)); transition: transform .12s; }
.pl-ammo { font-size: 1.4rem; font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 5ch; text-align: right; }
.pl-ammo.low { color: var(--soul); }
.pl-ammo.reload { color: var(--ink-4); }
/* touch controls: fire (held), dash and super, under the right thumb */
.pl-pad-btns { position: fixed; z-index: 6; right: max(14px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto auto; gap: 10px; align-items: end; touch-action: none; -webkit-user-select: none; user-select: none; }
.pl-pad-btns[hidden] { display: none; }
.pl-tbtn { width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--line); background: rgba(17, 17, 16, .55); font-family: var(--pixel); font-size: 1.15rem; letter-spacing: .04em; color: var(--ink-2); touch-action: none; }
.pl-tbtn.on { background: rgba(255, 200, 92, .25); }
.pl-tbtn.super { grid-column: 1 / -1; justify-self: end; width: auto; height: auto; border-radius: 0; padding: 10px 16px; background: var(--acc); border-color: var(--acc); color: var(--bg); animation: glow .6s steps(2) infinite; }
.pl-tbtn[hidden] { display: none; }
.pl-sound { position: fixed; bottom: max(12px, env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); z-index: 5; font-family: var(--mono); font-size: .7rem; color: var(--ink-3); padding: 6px 0; }
.pl-sound[aria-pressed="false"] { text-decoration: line-through; color: var(--ink-4); }
.pl-sound:hover { color: var(--ink); }
.pl-pausebtn { pointer-events: auto; display: flex; gap: 4px; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); opacity: .6; transition: opacity .15s; }
.pl-pausebtn:hover { opacity: 1; }
.pl-pausebtn i { width: 4px; height: 12px; background: var(--ink); }
.pl-banner { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 4; font-family: var(--pixel); font-size: clamp(1.6rem, 5vw, 2.6rem); color: var(--acc); letter-spacing: .04em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .3s; text-shadow: 0 0 18px rgba(255, 200, 92, .35); }
.pl-banner.on { opacity: 1; }
.pl-toast { position: fixed; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translate(-50%, 12px); z-index: 6; padding: 10px 16px; border: 1px solid var(--line); background: rgba(10, 9, 14, .88); color: var(--ink); font-size: .95rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s; }
.pl-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── the upgrade screen: three tall holographic panels over the frozen game ──
   Each card is a ship's console page: cut corners, a border glowing in its
   category's colour (--c), a terminal header, a viewport with a grid and
   corner brackets around the pixel icon, level bars, scanlines. They switch
   on one after another; the chosen one flares, the others fade. */
.pl-choose { background: radial-gradient(ellipse at 50% 55%, rgba(20, 40, 70, .35), rgba(5, 6, 10, .78) 70%); }
.pl-choose-in { text-align: center; width: min(960px, 100%); }
.pl-choose .pl-name { text-shadow: 0 0 22px rgba(255, 200, 92, .35); animation: rise .35s cubic-bezier(.19, 1, .22, 1) both; }
.pl-ups-row { margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; perspective: 900px; }
.pl-up {
  --cut: 18px;
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-height: 360px; text-align: left; color: var(--ink);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 38%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #0e1622, #0a0d14 60%, #07090e);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 30px color-mix(in srgb, var(--c) 12%, transparent);
  transform-origin: 50% 80%;
  animation: card-on .5s cubic-bezier(.19, 1, .22, 1) both; animation-delay: var(--d);
  transition: transform .18s cubic-bezier(.19, 1, .22, 1), box-shadow .18s, filter .18s, opacity .25s;
}
/* the cut corners get their own glowing edge */
.pl-up::before, .pl-up::after { content: ""; position: absolute; width: calc(var(--cut) * 1.42); height: 1px; background: color-mix(in srgb, var(--c) 70%, transparent); }
.pl-up::before { top: calc(var(--cut) / 2); right: calc(var(--cut) * -.21); transform: rotate(45deg); }
.pl-up::after { bottom: calc(var(--cut) / 2); left: calc(var(--cut) * -.21); transform: rotate(45deg); }
@keyframes card-on {
  0% { opacity: 0; transform: translateY(26px) rotateX(18deg); filter: brightness(2.2); }
  40% { opacity: .5; }
  55% { opacity: .2; }
  70% { opacity: 1; filter: brightness(1.4); }
  100% { opacity: 1; transform: none; filter: none; }
}
.pl-up:hover, .pl-up.on {
  transform: translateY(-8px);
  box-shadow: inset 0 0 0 1px var(--c), inset 0 0 40px color-mix(in srgb, var(--c) 24%, transparent), 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 18px 40px color-mix(in srgb, var(--c) 22%, transparent);
}
.pl-up.picked { transform: translateY(-12px) scale(1.04); filter: brightness(1.5); box-shadow: inset 0 0 0 2px var(--c), inset 0 0 80px color-mix(in srgb, var(--c) 45%, transparent), 0 0 60px color-mix(in srgb, var(--c) 50%, transparent); }
.pl-up.gone { opacity: 0; transform: translateY(14px) scale(.96); }
.pl-up:focus-visible { outline: none; }

.pl-up-head { display: flex; justify-content: space-between; padding: 10px 26px 8px 14px; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; color: var(--c); border-bottom: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.pl-up-head span:first-child { color: color-mix(in srgb, var(--c) 60%, var(--ink-3)); }
.pl-up-view { position: relative; margin: 14px 14px 0; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c) 28%, transparent), transparent 62%),
    linear-gradient(color-mix(in srgb, var(--c) 10%, transparent) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, transparent) 1px, transparent 1px) 0 0 / 14px 14px,
    #05070b; }
/* corner brackets */
.pl-up-view::before { content: ""; position: absolute; inset: 6px; --b: color-mix(in srgb, var(--c) 80%, transparent);
  background:
    linear-gradient(var(--b), var(--b)) 0 0 / 12px 2px no-repeat, linear-gradient(var(--b), var(--b)) 0 0 / 2px 12px no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 0 / 12px 2px no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / 2px 12px no-repeat,
    linear-gradient(var(--b), var(--b)) 0 100% / 12px 2px no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / 2px 12px no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 100% / 12px 2px no-repeat, linear-gradient(var(--b), var(--b)) 100% 100% / 2px 12px no-repeat; }
/* the scan line sweeping the viewport */
.pl-up-view::after { content: ""; position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(transparent, color-mix(in srgb, var(--c) 22%, transparent), transparent); animation: scan 2.4s linear infinite; }
@keyframes scan { to { top: 100%; } }
.pl-up-view img { width: 40%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 0 10px var(--c)); animation: hover-icon 2.6s ease-in-out infinite; }
@keyframes hover-icon { 50% { transform: translateY(-5px); } }
.pl-up b { margin: 14px 14px 0; font-family: var(--pixel); font-weight: 400; font-size: 1.75rem; line-height: 1; letter-spacing: .03em; }
.pl-up-pips { margin: 8px 14px 0; display: flex; align-items: center; gap: 4px; }
.pl-up-pips i { width: 16px; height: 5px; background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.pl-up-pips i.had { background: color-mix(in srgb, var(--c) 70%, transparent); }
.pl-up-pips i.new { background: var(--c); box-shadow: 0 0 8px var(--c); animation: glow .7s steps(2) infinite; }
.pl-up-pips small { margin-left: 8px; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--ink-3); }
.pl-up-desc { margin: 10px 14px 0; font-size: .86rem; line-height: 1.45; color: var(--ink-2); flex: 1; }
.pl-up-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 8px 14px 12px; border-top: 1px dashed color-mix(in srgb, var(--c) 25%, transparent); }
.pl-up-code { width: 70px; height: 10px; opacity: .45; background: repeating-linear-gradient(90deg, var(--c) 0 1px, transparent 1px 3px, var(--c) 3px 5px, transparent 5px 6px, var(--c) 6px 7px, transparent 7px 10px); }
.pl-up kbd { font-family: var(--mono); font-size: .7rem; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); padding: 1px 7px; margin-right: 8px; }
.pl-choose-hint { margin-top: 18px; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }

.pl-ups { position: fixed; z-index: 4; left: max(16px, env(safe-area-inset-left)); top: 44px; display: flex; flex-wrap: wrap; gap: 6px; max-width: 40vw; pointer-events: none; }
.pl-ups[hidden] { display: none; }
.pl-ups span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; background: rgba(10, 13, 20, .7); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.pl-ups img { width: 18px; height: 18px; image-rendering: pixelated; }
.pl-ups small { font-family: var(--mono); font-size: .6rem; color: var(--ink-3); }
@media (max-width: 760px) {
  .pl-choose { align-items: flex-start; }
  .pl-ups-row { grid-template-columns: 1fr; gap: 12px; }
  .pl-up { min-height: 0; display: grid; grid-template-columns: 96px 1fr; grid-template-areas: 'head head' 'view name' 'view pips' 'view desc'; }
  .pl-up-head { grid-area: head; }
  .pl-up-view { grid-area: view; margin: 12px 0 12px 12px; aspect-ratio: 1; }
  .pl-up b { grid-area: name; margin-top: 12px; font-size: 1.45rem; }
  .pl-up-pips { grid-area: pips; }
  .pl-up-desc { grid-area: desc; margin-bottom: 12px; font-size: .8rem; }
  .pl-up-foot { display: none; }
  .pl-ups { top: 62px; max-width: none; right: 16px; }
}
@media not all { .pl-up, .pl-up-view::after, .pl-up-view img, .pl-up-pips i.new { animation: none; } }

/* ── a phone on its side: the game is upright only ── */
.pl-rotate { display: none; }
@media (orientation: landscape) and (pointer: coarse) and (max-height: 520px) {
  .pl-rotate { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; gap: 12px; text-align: center; background: rgba(5, 6, 10, .96); }
  .pl-rotate span { justify-self: center; width: 30px; height: 52px; border: 3px solid var(--acc); border-radius: 6px; box-shadow: inset 0 -6px 0 -3px var(--acc); animation: tilt 1.6s ease-in-out infinite; }
  .pl-rotate p { font-family: var(--pixel); font-size: 1.6rem; color: var(--acc); padding: 0 24px; }
}
@keyframes tilt { 0%, 20% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0); } }

/* ── the boss's entrance: a dialogue box over the cinema bars, the HUD out of the way ── */
body.intro .pl-hud, body.intro .pl-boss, body.intro .pl-ups, body.intro .pl-back, body.intro .pl-sound, body.intro #touchBtns { display: none; }
body.intro #game { cursor: pointer; }
.pl-talk { position: fixed; z-index: 7; left: 50%; bottom: calc(11vh + 18px); transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); padding: 14px 18px 12px; background: rgba(8, 9, 14, .92); border: 2px solid var(--c, var(--acc)); box-shadow: 0 0 0 4px rgba(0, 0, 0, .6), 0 0 30px color-mix(in srgb, var(--c, var(--acc)) 30%, transparent); pointer-events: none; animation: rise .25s cubic-bezier(.19, 1, .22, 1) both; }
.pl-talk[hidden] { display: none; }
.pl-talk.boss { --c: var(--soul); }
.pl-talk.me { --c: var(--acc); }
.pl-talk b { display: inline-block; margin-top: -26px; padding: 2px 10px; background: var(--c); color: var(--bg); font-family: var(--pixel); font-weight: 400; font-size: 1.2rem; letter-spacing: .06em; transform: translateY(-6px); }
.pl-talk p { margin-top: 2px; font-family: var(--pixel); font-size: clamp(1.4rem, 3.6vw, 1.9rem); line-height: 1.15; min-height: 2.3em; color: var(--ink); }
.pl-talk small { display: block; margin-top: 6px; text-align: right; font-family: var(--mono); font-size: .62rem; color: var(--ink-4); }

/* ── the soundtrack player ── */
.pl-ost-open { margin-top: 16px; display: block; font-family: var(--mono); font-size: .78rem; color: var(--acc); padding: 4px 0; }
.pl-ost-open:hover { text-decoration: underline; }
.pl-ost { background: rgba(5, 6, 10, .6); }
.pl-ost-card { width: min(640px, 100%); max-height: calc(100vh - 80px); overflow-y: auto; }
.pl-ost-back { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); margin-bottom: 14px; display: block; }
.pl-ost-back:hover { color: var(--ink); }
.pl-ost-now { margin-top: 20px; display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; padding: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255, 200, 92, .06), transparent 60%); }
.pl-ost-art { width: 120px; height: 120px; display: grid; place-items: center; background: radial-gradient(circle, rgba(255, 200, 92, .16), transparent 70%), #07080b; border: 1px solid var(--line-soft); overflow: hidden; }
.pl-ost-art img { max-width: 112px; max-height: 112px; image-rendering: pixelated; }
.pl-ost-meta b { display: block; font-family: var(--pixel); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--acc); }
.pl-ost-meta small { display: block; margin-top: 4px; font-family: var(--mono); font-size: .7rem; color: var(--ink-3); }
.pl-ost-ctl { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.pl-ost-ctl button { width: 36px; height: 36px; border: 1px solid var(--line); font-size: .9rem; color: var(--ink-2); }
.pl-ost-ctl button:hover { border-color: var(--ink-3); color: var(--ink); }
.pl-ost-ctl button.big { width: 46px; height: 46px; background: var(--ink); color: var(--bg); border: 0; font-size: 1.1rem; }
.pl-ost-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; margin-left: 6px; }
.pl-ost-eq i { width: 4px; height: 4px; background: var(--acc); }
.pl-ost.playing .pl-ost-eq i { animation: eq .9s ease-in-out infinite; }
.pl-ost.playing .pl-ost-eq i:nth-child(2) { animation-delay: -.3s; }
.pl-ost.playing .pl-ost-eq i:nth-child(3) { animation-delay: -.6s; }
.pl-ost.playing .pl-ost-eq i:nth-child(4) { animation-delay: -.15s; }
.pl-ost.playing .pl-ost-eq i:nth-child(5) { animation-delay: -.45s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 22px; } }
.pl-ost-seek { margin-top: 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-family: var(--mono); font-size: .68rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pl-ost-seek input { width: 100%; accent-color: var(--acc); }
.pl-ost-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px; }
.pl-ost-list button { width: 100%; display: grid; grid-template-columns: 2.2ch 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; text-align: left; border: 1px solid transparent; }
.pl-ost-list button:hover { background: rgba(244, 241, 232, .04); border-color: var(--line-soft); }
.pl-ost-list li.on button { border-color: rgba(255, 200, 92, .45); background: rgba(255, 200, 92, .08); }
.pl-ost-list .n { font-family: var(--mono); font-size: .7rem; color: var(--ink-4); }
.pl-ost-list .art { width: 44px; height: 32px; display: grid; place-items: center; }
.pl-ost-list .art img { max-width: 44px; max-height: 32px; image-rendering: pixelated; }
.pl-ost-list .t b { display: block; font-family: var(--pixel); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.pl-ost-list .t small { font-size: .78rem; color: var(--ink-3); }
.pl-ost-list .d { font-family: var(--mono); font-size: .7rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .pl-ost-now { grid-template-columns: 84px 1fr; }
  .pl-ost-art { width: 84px; height: 84px; }
  .pl-ost-art img { max-width: 78px; max-height: 78px; }
}

/* ── screens: title, pause, game over ── */
.pl-screen { position: fixed; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 64px 24px 32px; overflow-y: auto; }
.pl-screen[hidden] { display: none; }
#title { justify-content: flex-start; padding-left: max(6vw, 24px); }
.pl-card { background: var(--card); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--line); padding: 28px 30px; width: min(440px, 100%); animation: rise .45s cubic-bezier(.19, 1, .22, 1) both; }
.pl-rank { width: min(300px, 100%); animation-delay: .06s; align-self: center; }
.pl-mini { text-align: center; width: auto; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
/* the loading screen: the card sits low, lipp waits on his moon above it (drawn on the canvas) */
#loading { align-items: flex-end; padding-bottom: max(14vh, 48px); }
.pl-loading .pl-card { width: min(380px, 100%); text-align: left; }
.pl-load-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--pixel); font-size: 1.6rem; letter-spacing: .06em; color: var(--acc); }
.pl-load-head b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-loadbar { display: block; margin-top: 10px; height: 10px; border: 1px solid var(--line); background: rgba(244, 241, 232, .04); }
.pl-loadbar i { display: block; height: 100%; background: var(--acc); transform-origin: left; transform: scaleX(var(--k, 0)); transition: transform .2s; }
.pl-load-mb { margin-top: 8px; min-height: 1.2em; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.pl-load-tip { margin-top: 10px; font-size: .8rem; color: var(--ink-4); }
.pl-name { font-family: var(--pixel); font-weight: 400; font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: .95; letter-spacing: .02em; color: var(--acc); }
.pl-lead { margin-top: 12px; color: var(--ink-2); font-size: .95rem; }
.pl-btn { margin-top: 22px; display: inline-flex; align-items: baseline; gap: 12px; padding: 12px 18px; background: var(--ink); color: var(--bg); font-family: var(--pixel); font-size: 1.6rem; line-height: 1; letter-spacing: .04em; box-shadow: 0 0 0 0 var(--ink); transition: box-shadow .2s cubic-bezier(.19, 1, .22, 1); }
.pl-btn small { font-family: var(--mono); font-size: .65rem; letter-spacing: .02em; color: var(--ink-4); }
.pl-btn:hover, .pl-btn:focus-visible { box-shadow: 0 0 0 3px var(--ink); outline: none; }
.pl-btn.small { margin: 0; font-size: 1.3rem; padding: 10px 14px; }
.pl-btn:disabled { opacity: .5; cursor: default; }
.pl-controls { margin-top: 24px; display: grid; gap: 4px; font-family: var(--mono); font-size: .72rem; }
.pl-controls div { display: grid; grid-template-columns: 9ch 1fr; gap: 12px; }
.pl-tips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: .68rem; color: var(--ink-3); }
.pl-tips span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--c); }
.pl-controls dt { color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; }
.pl-controls dd { color: var(--ink-2); }
.pl-practice { margin-top: 16px; font-family: var(--mono); font-size: .7rem; color: var(--ink-4); }
.pl-practice a { color: var(--ink-2); padding: 2px 4px; }
.pl-practice a:hover { color: var(--acc); }
.pl-tag { font-size: 1.2rem; color: var(--acc); letter-spacing: .06em; }
.pl-pad { margin-top: 16px; font-size: .8rem; color: var(--ink-3); }
.pl-pad a { color: #36ca90; text-decoration: none; }
.pl-pad a:hover { text-decoration: underline; }

.pl-rank h2, .pl-enter label { font-family: var(--mono); font-weight: 400; font-size: .72rem; letter-spacing: .06em; color: var(--ink-3); }
.pl-list { list-style: none; margin-top: 12px; font-family: var(--pixel); font-size: 1.45rem; line-height: 1.25; }
.pl-list li { display: grid; grid-template-columns: 2.2ch 4ch 1fr; gap: 10px; padding: 1px 0; }
.pl-list .pos { color: var(--ink-4); text-align: right; }
.pl-list .pts { text-align: right; font-variant-numeric: tabular-nums; }
.pl-list li:first-child .who, .pl-list li:first-child .pts { color: var(--acc); }
.pl-list li.me { background: rgba(255, 200, 92, .14); box-shadow: -6px 0 0 rgba(255, 200, 92, .14), 6px 0 0 rgba(255, 200, 92, .14); }
.pl-list .pl-none { display: block; font-family: var(--sans); font-size: .9rem; color: var(--ink-3); }

.pl-final { margin-top: 14px; font-family: var(--pixel); font-size: 1.6rem; color: var(--ink-3); }
.pl-final b { font-weight: 400; font-size: 3.4rem; color: var(--ink); line-height: 1; }
.pl-best { margin-top: 4px; font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }
.pl-best.new { color: var(--acc); }
.pl-enter { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.pl-enter[hidden] { display: none; }
.pl-enter > div { margin-top: 10px; display: flex; gap: 12px; align-items: center; }
.pl-enter input { width: 5.2ch; padding: 4px 0 4px .5ch; background: transparent; border: 0; border-bottom: 2px solid var(--acc); color: var(--ink); font-family: var(--pixel); font-size: 2.6rem; line-height: 1; letter-spacing: .5ch; text-transform: uppercase; caret-color: var(--acc); -webkit-user-select: text; user-select: text; }
.pl-enter input:focus { outline: none; }
.pl-msg { margin-top: 8px; min-height: 1.2em; font-size: .8rem; color: var(--ink-3); }
.pl-msg.bad { color: var(--soul); }
.pl-secret { margin-top: 14px; font-family: var(--mono); font-size: .72rem; color: var(--acc); }
.pl-secret[hidden] { display: none; }
/* the share card (game.js): the picture, then share and save */
.pl-share { margin-top: 16px; }
.pl-share[hidden] { display: none; }
.pl-share img { display: block; width: 100%; height: auto; border: 1px solid var(--line); image-rendering: pixelated; }
.pl-share .pl-btn { margin-top: 12px; }
.pl-acts { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.pl-exit { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }
.pl-exit:hover { color: var(--ink); }

@media (max-width: 760px) {
  .pl-screen, #title { flex-direction: column; justify-content: flex-start; padding: 56px 16px 24px; gap: 12px; }
  .pl-card { padding: 22px 20px; }
  .pl-rank { width: min(440px, 100%); }
  .pl-controls div:first-child, .pl-controls div:nth-child(2) { display: none; }   /* keyboard and mouse, on a phone */
  body.playing .pl-back, body.playing .pl-sound { display: none; }               /* the HUD needs the top row */
  .pl-hud { left: 16px; right: 16px; justify-content: space-between; gap: 10px; }
  .pl-score { font-size: 1.9rem; min-width: 0; }
  .pl-ammo { font-size: 1.2rem; min-width: 0; }
  .pl-ammo .lbl { display: none; }
  .pl-lives i { width: 15px; height: 13px; }
  .pl-boss { top: 62px; width: calc(100vw - 32px); font-size: 1.05rem; }
}
@media (hover: hover) and (pointer: fine) {
  .pl-controls div:nth-child(4) { display: none; }      /* the phone line, with a mouse */
}
@media not all { .pl-card { animation: none; } }

/* ── UI1: the interface kit (docs/play/UI_BRIEF.md, assets/img/ui/) ──
   Pixel-art frames stretched with border-image, drawn at 2× or 3× with nearest neighbour: the corners keep their
   rivets, the middles repeat. The text stays HTML on top. */
.pl-card, .pl-list, .pl-btn, .pl-ost-open, .pl-ost-back, .pl-pausebtn, .pl-hud, .pl-dash, .pl-super, .pl-bossbar, .pl-ups span, .pl-talk, .pl-talk b, .pl-toast, .pl-loadbar { image-rendering: pixelated; }
.pl-card { background: none; border: 24px solid transparent; border-image: url(../img/ui/ui-panel.png) 12 fill / 24px stretch; padding: 6px 12px; }
.pl-mini { padding: 0 10px; }
#title .pl-name { width: min(320px, 100%); aspect-ratio: 4 / 1; background: url(../img/ui/ui-logo.png) left center / contain no-repeat; color: transparent; overflow: hidden; white-space: nowrap; }
.pl-list { border: 18px solid transparent; border-image: url(../img/ui/ui-panel-screen.png) 6 fill / 18px stretch; padding: 2px 8px; }
.pl-loadbar { border: 0; background: #07080d; box-shadow: inset 0 0 0 2px #2a3140; }
.pl-btn { background: none; color: #1a1206; border: solid transparent; border-width: 12px 16px; border-image: url(../img/ui/ui-btn-primary.png) 6 8 fill / 12px 16px stretch; padding: 2px 6px 4px; box-shadow: none; }
.pl-btn small { color: #4a3410; }
.pl-btn:hover, .pl-btn:focus-visible { box-shadow: none; border-image-source: url(../img/ui/ui-btn-primary-hover.png); }
.pl-btn:active { border-image-source: url(../img/ui/ui-btn-primary-pressed.png); padding: 4px 6px 2px; }
.pl-btn.small { padding: 0 4px 2px; }
.pl-ost-open, .pl-ost-back { display: inline-block; border: solid transparent; border-width: 12px 16px; border-image: url(../img/ui/ui-btn-secondary.png) 6 8 fill / 12px 16px stretch; padding: 0 4px; color: var(--ink); }
.pl-ost-open:hover, .pl-ost-back:hover { text-decoration: none; color: var(--acc); border-image-source: url(../img/ui/ui-btn-secondary-hover.png); }
.pl-ost-open:active, .pl-ost-back:active { border-image-source: url(../img/ui/ui-btn-secondary-pressed.png); }
.pl-pausebtn { width: 40px; height: 40px; border: 0; opacity: 1; background: url(../img/ui/ui-btn-pause.png) 0 0 / 100% 100%; }
.pl-pausebtn:hover { background-image: url(../img/ui/ui-btn-pause-hover.png); }
.pl-pausebtn i { display: none; }
.pl-hud { gap: 14px; height: 40px; border: solid transparent; border-width: 0 16px; border-image: url(../img/ui/ui-hud-plate.png) 0 8 fill / 0 16px stretch; padding: 0 2px; }
.pl-hud .pl-pausebtn { margin-right: -14px; }
.pl-lives { gap: 2px; }
.pl-lives i { width: 24px; height: 24px; clip-path: none; background: url(../img/ui/icons/icon-hud-heart.png) 0 0 / 100% 100%; }
.pl-lives i.off { background-image: url(../img/ui/icons/icon-hud-heart-empty.png); opacity: 1; }
.pl-ammo { display: inline-flex; align-items: center; gap: 6px; }
.pl-ammo::before { content: ''; width: 24px; height: 24px; flex: none; background: url(../img/ui/icons/icon-hud-ammo.png) 0 0 / 100% 100%; image-rendering: pixelated; }
.pl-score { font-size: 2rem; color: var(--acc); }
.pl-dash, .pl-super { width: 72px; height: 16px; background: none; overflow: visible; border: solid transparent; border-width: 0 8px; border-image: url(../img/ui/ui-hud-bar-frame.png) 0 4 fill / 0 8px stretch; }
.pl-dash i, .pl-super i { inset: 4px -4px; background: url(../img/ui/ui-hud-bar-dash.png) 0 0 / 32px 8px repeat-x; }
.pl-super i { background-image: url(../img/ui/ui-hud-bar-super.png); }
.pl-dash.ready i { background: url(../img/ui/ui-hud-bar-dash.png) 0 0 / 32px 8px repeat-x; filter: brightness(1.35); }
.pl-super.full i { background: url(../img/ui/ui-hud-bar-super.png) 0 0 / 32px 8px repeat-x; }
.pl-dash.twin::after { top: 4px; bottom: 4px; }
.pl-bars { gap: 2px; }
.pl-bossbar { height: 24px; background: none; border: solid transparent; border-width: 0 8px 0 28px; border-image: url(../img/ui/ui-boss-frame.png) 0 4 0 14 fill / 0 8px 0 28px stretch; padding: 8px 0 6px; }
.pl-bossbar i { background: url(../img/ui/ui-boss-fill.png) 0 0 / 32px 10px repeat-x; }
.pl-ups { gap: 4px; }
.pl-ups span { position: relative; width: 40px; height: 40px; padding: 0; justify-content: center; background: url(../img/ui/ui-hud-slot.png) 0 0 / 100% 100%; box-shadow: none; }
.pl-ups img { width: 28px; height: 28px; object-fit: contain; }
.pl-ups small { position: absolute; right: 3px; bottom: 1px; color: var(--ink); text-shadow: 1px 1px 0 #000; }
.pl-talk { background: none; border: 30px solid transparent; border-image: url(../img/ui/ui-talk.png) 10 fill / 30px stretch; padding: 0 4px; box-shadow: 0 0 30px color-mix(in srgb, var(--c, var(--acc)) 25%, transparent); }
.pl-talk b { margin-top: -50px; background: var(--c); border: solid transparent; border-width: 0 12px; border-image: url(../img/ui/ui-talk-tag.png) 0 6 / 0 12px stretch; padding: 1px 2px; transform: none; }
.pl-toast { border: 18px solid transparent; border-image: url(../img/ui/ui-panel-screen.png) 6 fill / 18px stretch; padding: 0 4px; background: none; }
/* the upgrade cards: one framed console page per category; header, icon window and text area are baked in the
   art (a 10 px header, then the window and the text glass splitting the middle in half), so the layout follows it */
@media (min-width: 761px) {
  .pl-up { --cut: 0; clip-path: none; height: 390px; min-height: 0; display: grid; grid-template-rows: 36px 1fr 1fr 0; background: none; box-shadow: none; border: solid transparent; border-width: 36px 24px 24px; border-image: url(../img/ui/ui-card-weapon.png) 12 8 8 fill / 36px 24px 24px stretch; }
  .pl-up[data-cat="gun"] { border-image-source: url(../img/ui/ui-card-gun.png); }
  .pl-up[data-cat="move"] { border-image-source: url(../img/ui/ui-card-move.png); }
  .pl-up[data-cat="guard"] { border-image-source: url(../img/ui/ui-card-guard.png); }
  .pl-up[data-cat="special"] { border-image-source: url(../img/ui/ui-card-special.png); }
  .pl-up { border-top-width: 0; padding-top: 0; }
  .pl-up-head { margin: 0 -6px; height: 36px; align-items: center; padding: 0 14px; border: 0; color: var(--ink); text-shadow: 1px 1px 0 #000; }
  .pl-up-view { margin: 0; aspect-ratio: auto; background: none; }
  .pl-up-view::before { display: none; }
  .pl-up-view img { width: auto; height: 76%; filter: drop-shadow(0 0 8px var(--c)); }
  .pl-up::before, .pl-up::after { display: none; }
  .pl-up-body { display: flex; flex-direction: column; padding-top: 10px; }
  .pl-up b, .pl-up-pips, .pl-up-desc { margin-left: 2px; margin-right: 2px; }
  .pl-up-foot { display: none; }
  .pl-up:hover, .pl-up.on { box-shadow: none; filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--c) 35%, transparent)); }
  .pl-up.picked { box-shadow: none; filter: brightness(1.4) drop-shadow(0 0 30px var(--c)); }
}
.pl-up-body { display: contents; }
@media (min-width: 761px) { .pl-up-body { display: flex; } }
/* the framed HUD is wider: the boss bar goes under its row instead of beside it */
.pl-boss { top: calc(max(12px, env(safe-area-inset-top)) + 48px); }
@media (max-width: 760px) {
  .pl-hud { gap: 6px; border-width: 0 10px; border-image-width: 0 10px; }
  .pl-hud .pl-pausebtn { flex: none; margin-right: -8px; }
  .pl-lives i { width: 20px; height: 20px; }
  .pl-ammo::before { width: 20px; height: 20px; }
  .pl-dash, .pl-super { width: 48px; }
  .pl-score { font-size: 1.6rem; }
}