/* King Me! - comic-book UI. System fonts only (no external requests). */
:root {
  --ink: #0a0a0c; --orange: #ff6a00; --cyan: #00e5ff; --purple: #7a1fd6; --brand-orange: #ff6a00; --brand-cyan: #00e5ff;
  --deep: #140a24; --yellow: #ffd21f; --pink: #ff2d95;
  --font: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--deep); color: #fff;
  font-family: var(--font); letter-spacing: .04em; user-select: none; -webkit-user-select: none; }
.hidden { display: none !important; }

#stage { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 38%, #4a1a8a 0%, #24104a 45%, #0b0516 100%); }
/* (the full-screen halftone dot overlay was removed: it read as a distracting grid over the scene) */
.vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }

.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; background: rgba(8,3,18,.35); }
#loading, #fatal { background: rgba(8,3,18,.85); }
.panel { width: min(540px, calc(100% - 28px)); background: #1b0b33; border: 5px solid var(--ink); padding: 24px 28px 22px;
  box-shadow: 8px 8px 0 var(--ink), 0 0 0 3px var(--purple); transform: rotate(-.8deg); text-align: center; }
.panel.small { width: min(420px, calc(100% - 28px)); }
.logo { margin: 0; font-size: clamp(54px, 11vw, 88px); line-height: .92; font-weight: 400; color: var(--yellow);
  -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink); transform: skew(-6deg) rotate(-2deg); }
.logo span { color: var(--brand-orange); }
.tag-line { margin: 10px 0 14px; color: var(--brand-cyan); font-size: 20px; text-shadow: 2px 2px 0 var(--ink); }
.fine { margin: 14px 0 0; font-size: 13px; color: #b9a6e8; letter-spacing: .08em; font-family: Arial, sans-serif; }
#fatalText { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.45; letter-spacing: 0; }

.group { margin: 12px 0; text-align: left; }
.group label { display: block; margin: 0 0 6px 4px; color: var(--yellow); font-size: 15px; text-shadow: 2px 2px 0 var(--ink); }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button { flex: 1 1 0; min-width: 96px; }
button { font: inherit; letter-spacing: .06em; font-size: 17px; color: var(--ink); background: #f3eaff; cursor: pointer;
  border: 4px solid var(--ink); padding: 9px 12px; box-shadow: 4px 4px 0 var(--ink); transform: skew(-4deg);
  transition: transform .08s, box-shadow .08s, background .12s; }
button:hover { transform: skew(-4deg) translate(-1px, -2px); box-shadow: 6px 6px 0 var(--ink); }
button:active { transform: skew(-4deg) translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.seg button.on { background: var(--yellow); }
.seg button.orange.on { background: var(--orange); }
.seg button.cyan.on { background: var(--cyan); }
.big { display: block; width: 100%; margin-top: 18px; padding: 14px; font-size: 30px; background: var(--pink); color: #fff;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.big.alt { background: var(--purple); }
.row { display: flex; gap: 12px; } .row .big { margin-top: 10px; }

#loadBar { height: 22px; margin: 16px 0 8px; border: 4px solid var(--ink); background: #0d0618; box-shadow: 4px 4px 0 var(--ink); }
#loadBar span { display: block; height: 100%; width: 0; background: var(--yellow); transition: width .2s; }
#loadText { margin: 0; color: var(--brand-cyan); }

/* HUD */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#hud > * { pointer-events: none; }
#hud button { pointer-events: auto; }
.hud-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.score { display: flex; gap: 10px; align-items: baseline; padding: 6px 14px; border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: skew(-6deg); color: var(--ink); font-size: 18px; }
.score span { font-size: 24px; } .score.orange { background: var(--orange); } .score.cyan { background: var(--cyan); }
.pill { padding: 8px 22px; border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); font-size: 24px; transform: skew(-6deg) rotate(-1deg);
  min-width: 220px; text-align: center; color: var(--ink); }
.pill.orange { background: var(--orange); } .pill.cyan { background: var(--cyan); } .pill.draw { background: var(--yellow); }
.hud-actions { position: absolute; top: 74px; right: 14px; display: flex; flex-direction: column; gap: 8px; }
.hudbtn { font-size: 15px; padding: 6px 12px; }
#hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 19px; color: var(--yellow);
  text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); padding: 0 14px; }
#hint.must { color: var(--pink); font-size: 23px; }

#toast { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%) translateY(20px) skew(-4deg); z-index: 20; opacity: 0; pointer-events: none;
  background: var(--yellow); color: var(--ink); border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: 8px 18px; font-size: 20px; transition: opacity .15s, transform .15s; max-width: calc(100% - 24px); text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0) skew(-4deg); }
#gameover { background: rgba(8,3,18,.5); }
#gameover .logo.orange { color: var(--orange); } #gameover .logo.cyan { color: var(--cyan); }
@media (max-width: 640px) { .pill { min-width: 0; font-size: 19px; } .hud-actions { flex-direction: row; top: auto; bottom: 56px; left: 14px; right: 14px; justify-content: center; } }

/* ---- CHESSKERS additions: game picker, option step, chess HUD ---- */
.gamepick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gamepick button { font: inherit; cursor: pointer; padding: 18px 8px; border: 4px solid #050506; border-radius: 10px; background: #ffd21f; color: #050506;
  font-family: Impact, "Arial Black", sans-serif; font-size: clamp(20px, 5vw, 28px); letter-spacing: 1px; box-shadow: 5px 5px 0 #050506; transition: transform .08s, box-shadow .08s; }
.gamepick button:nth-child(2) { background: #00e5ff; }
.gamepick button small { display: block; font-size: 12px; letter-spacing: 1px; margin-top: 4px; font-family: "Arial Black", sans-serif; opacity: .8; }
.gamepick button:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 7px 7px 0 #050506; }
.gamepick button:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #050506; }
.small-logo { font-size: clamp(34px, 8vw, 52px) !important; margin-bottom: 6px; }
.panel .row { display: flex; gap: 10px; justify-content: center; }
.promo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.promo-row button { font-family: Impact, "Arial Black", sans-serif; cursor: pointer; border: 4px solid #050506; border-radius: 10px; padding: 8px 2px; background: #ffd21f; color: #050506;
  font-size: 12px; letter-spacing: 1px; box-shadow: 4px 4px 0 #050506; }
.promo-row button span { display: block; font-size: 34px; line-height: 1.1; }
.promo-row button:hover { background: #ff2d95; color: #fff; }
#history { position: absolute; left: 10px; top: 76px; width: 128px; max-height: 46vh; overflow-y: auto; background: rgba(12, 5, 28, .82); border: 3px solid #050506;
  border-radius: 8px; padding: 6px 8px; font-family: "Arial Black", sans-serif; font-size: 12px; color: #fff; box-shadow: 4px 4px 0 #050506; pointer-events: auto; }
#history b { color: #ffd21f; letter-spacing: 1px; }
#history .mv { display: grid; grid-template-columns: 22px 1fr 1fr; gap: 2px; line-height: 1.5; }
#history .mv i { color: #b9a0ff; font-style: normal; }
#history .mv .o { color: #ff9a3c; } #history .mv .c { color: #3ee9ff; }
@media (max-width: 700px) { #history { top: auto; bottom: 120px; left: 6px; width: 104px; max-height: 18vh; font-size: 11px; } }
.pill.check { background: #ff2d95; color: #fff; }

/* ---- Chesskers mode: third game button, rules overlay, extra HUD buttons ---- */
.gamepick button:nth-child(3) { grid-column: 1 / -1; background: #b24bff; color: #fff; text-shadow: 2px 2px 0 #050506; }
.panel .row + .row { margin-top: 10px; }
.hudbtn:disabled { opacity: .4; cursor: default; }
@media (max-width: 700px) { .hud-actions { flex-wrap: wrap; } .hudbtn { font-size: 13px; padding: 5px 9px; } }

/* ---- CheckPOW! logo: the POW! sits in an inked comic burst and the exclamation point is a big, tilted part of it ---- */
.logo .pow { position: relative; display: inline-block; z-index: 0; margin-left: .09em; padding: 0 .02em 0 .04em; color: var(--brand-orange); }
.logo .pow::before, .logo .pow::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.logo .pow::before { left: -.42em; right: -.52em; top: -.34em; bottom: -.26em; background: var(--ink); clip-path: polygon(53.5% 7.1%, 60.2% 21.2%, 74.8% 12.7%, 73.7% 27.8%, 91.2% 25.6%, 82.5% 38.9%, 99.4% 43.4%, 84.9% 52.1%, 97.8% 62.5%, 80.4% 64.9%, 86.8% 79.1%, 69.9% 74.8%, 68.5% 90.0%, 55.4% 79.7%, 46.5% 92.9%, 39.8% 78.8%, 25.2% 87.3%, 26.3% 72.2%, 8.8% 74.4%, 17.5% 61.1%, 0.6% 56.6%, 15.1% 47.9%, 2.2% 37.5%, 19.6% 35.1%, 13.2% 20.9%, 30.1% 25.2%, 31.5% 10.0%, 44.6% 20.3%); }
.logo .pow::after { left: -.42em; right: -.52em; top: -.34em; bottom: -.26em; background: var(--pink); clip-path: polygon(53.0% 13.1%, 58.4% 26.1%, 71.3% 17.9%, 69.6% 31.6%, 85.4% 29.0%, 76.9% 40.8%, 92.5% 44.3%, 78.9% 51.7%, 91.1% 60.7%, 75.2% 62.4%, 81.7% 75.0%, 66.5% 70.5%, 65.9% 84.4%, 54.5% 74.6%, 47.0% 86.9%, 41.6% 73.9%, 28.7% 82.1%, 30.4% 68.4%, 14.6% 71.0%, 23.1% 59.2%, 7.5% 55.7%, 21.1% 48.3%, 8.9% 39.3%, 24.8% 37.6%, 18.3% 25.0%, 33.5% 29.5%, 34.1% 15.6%, 45.5% 25.4%); filter: drop-shadow(0 0 0 #000); }
.logo .pow .bang { display: inline-block; font-style: normal; color: var(--yellow); font-size: 1.32em; line-height: .6; margin-left: .03em;
  transform: rotate(9deg) translateY(.05em); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; }
.small-logo .pow .bang { -webkit-text-stroke: 5px var(--ink); }

/* ---- HOW TO PLAY: wide illustrated manual ---- */
#rules { background: rgba(8, 3, 18, .74); padding: clamp(8px, 1.8vh, 24px) clamp(8px, 1.6vw, 28px); }
.guide-panel { width: min(1640px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: clamp(6px, 1.1vh, 12px);
  padding: clamp(10px, 1.7vh, 18px) clamp(12px, 1.4vw, 24px); background: #1b0b33; border: 5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink), 0 0 0 3px var(--purple); font-family: Arial, Helvetica, sans-serif; letter-spacing: 0;
  font-size: clamp(11.5px, 1.6vh, 17px); line-height: 1.3; color: #f1eaff; overflow: auto; }
.guide-head { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.guide-title { margin: 0; font: 400 clamp(26px, 4.4vh, 44px)/1 var(--font); letter-spacing: .05em; color: var(--yellow); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink); transform: skew(-6deg) rotate(-1deg); }
.guide-game { font: 400 clamp(15px, 2.3vh, 22px)/1 var(--font); letter-spacing: .08em; padding: 5px 14px; background: var(--purple); color: #fff; border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); transform: skew(-6deg); }
.guide-close { margin-left: auto; font: 400 clamp(17px, 2.6vh, 26px)/1 var(--font); letter-spacing: .06em; padding: 8px 26px; background: var(--pink); color: #fff;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.guide-chips { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: clamp(6px, .9vw, 12px); flex: 0 0 auto; }
.gchip { background: #2a1250; border: 3px solid var(--ink); box-shadow: 0 0 0 2px #5b2aa6, 3px 3px 0 2px var(--ink); padding: 6px 10px 7px; border-radius: 6px; }
.gchip b { display: block; font: 400 1.12em/1.1 var(--font); letter-spacing: .06em; color: var(--yellow); text-shadow: 1px 1px 0 var(--ink); margin-bottom: 2px; }
.gchip.goal { background: linear-gradient(135deg, #ff2d95, #a3146f); box-shadow: 0 0 0 2px #ffd21f, 3px 3px 0 2px var(--ink); }
.gchip.goal b { color: #fff; font-size: 1.3em; text-shadow: 2px 2px 0 var(--ink); }
.guide-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.guide-grid { flex: 1; min-height: 0; display: grid; gap: clamp(6px, .9vw, 12px); align-content: stretch;
  grid-template-columns: repeat(auto-fit, minmax(clamp(290px, 25vw, 440px), 1fr)); grid-auto-rows: minmax(0, 1fr); }
.pcard { display: grid; grid-template-columns: minmax(104px, 35%) 1fr; min-height: 0; overflow: hidden; background: #241046; border: 3px solid var(--ink); border-radius: 6px;
  box-shadow: 0 0 0 2px #5b2aa6, 4px 4px 0 2px var(--ink); }
.preview { position: relative; min-height: 92px; border-right: 3px solid var(--ink);
  background: radial-gradient(ellipse at 50% 70%, #7a34d8 0%, #43198a 46%, #1d0a3c 100%); }
.preview::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: radial-gradient(rgba(0, 0, 0, .55) 1px, transparent 1.5px); background-size: 6px 6px; }
.pbody { padding: clamp(5px, 1vh, 10px) clamp(8px, .9vw, 14px) clamp(5px, 1vh, 10px); min-width: 0; overflow: hidden; }
.pbody h3 { margin: 0 0 3px; font: 400 clamp(18px, 2.9vh, 28px)/1 var(--font); letter-spacing: .06em; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink); }
.pbody ul { list-style: none; margin: 0; padding: 0; }
.pbody li { margin: 0 0 clamp(2px, .5vh, 5px); }
.pbody li i { display: inline-block; font: 400 .8em/1.25 var(--font); letter-spacing: .06em; font-style: normal; padding: 0 5px; margin-right: 2px; border-radius: 3px; color: #0a0a0c; background: #cdb8ff; vertical-align: 1px; }
.pbody li i.t-move { background: #ffd21f; } .pbody li i.t-cap { background: #ff2d95; color: #fff; } .pbody li i.t-jump { background: #6dff3a; }
.pbody li i.t-push { background: #3aa8ff; } .pbody li i.t-promo { background: #ff9a3c; } .pbody li i.t-note { background: #cdb8ff; }
.guide-foot { display: flex; gap: clamp(6px, .9vw, 12px); align-items: stretch; flex: 0 0 auto; }
.guide-specials { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(6px, .9vw, 12px); }
.gspecial { background: #2a1250; border: 2px solid #5b2aa6; border-radius: 6px; padding: 5px 10px 6px; }
.gspecial b { font: 400 1.05em/1.1 var(--font); letter-spacing: .06em; color: var(--yellow); margin-right: 6px; }
.guide-legend { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 12px; background: #140a24; border: 2px solid #5b2aa6; border-radius: 6px; white-space: nowrap; font-size: .92em; }
.guide-legend .lg { display: flex; align-items: center; gap: 7px; }
.guide-legend .lg i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); display: inline-block; }
@media (max-width: 760px) {
  .guide-head { flex-wrap: wrap; gap: 8px; } .guide-close { margin-left: 0; width: 100%; }
  .guide-chips { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .pcard { grid-template-columns: 120px 1fr; } .preview { min-height: 130px; }
  .guide-foot { flex-direction: column; } .guide-specials { grid-auto-flow: row; }
  .guide-stage { flex: 0 0 auto; }
}

#pickGame .logo, #loading .logo { margin-top: .12em; }


/* =====================================================================================================
   MAIN MENU - two columns: selectors on the left, the live 3D board (the real game view) on the right
   ===================================================================================================== */
#menu { background: none; justify-content: flex-start; align-items: stretch; pointer-events: none; padding: 0; }
.menu-col { pointer-events: auto; position: relative; width: clamp(430px, 42.5vw, 860px); flex: 0 0 auto;
  margin: clamp(10px, 2vh, 24px) 0 clamp(10px, 2vh, 24px) clamp(10px, 1.6vw, 28px); }
.menu-col .panel.step { width: 100%; height: 100%; transform: none; display: flex; flex-direction: column; text-align: center;
  gap: clamp(3px, .9vh, 10px); padding: clamp(10px, 1.8vh, 20px) clamp(14px, 1.5vw, 24px) clamp(12px, 2vh, 22px); overflow: hidden; }
.menu-col #pickOpts { justify-content: safe center; overflow-y: auto; }
/* compact the match-settings panel on shorter windows so the logo is never cut off */
.menu-col #pickOpts .small-logo { font-size: clamp(30px, 6.6vh, 68px) !important; margin: 0 0 clamp(0px, .6vh, 6px); flex: 0 0 auto; -webkit-text-stroke: 4px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
.menu-col #pickOpts .group label { font-size: clamp(11px, 1.7vh, 15px); margin-bottom: clamp(2px, .5vh, 6px); }
.menu-col #pickOpts .seg button { font-size: clamp(13px, 2.1vh, 17px); padding: clamp(5px, 1.1vh, 10px) 8px; }
.menu-col #pickOpts .big { font-size: clamp(20px, 3.6vh, 30px); padding: clamp(7px, 1.4vh, 14px); margin-top: clamp(6px, 1.2vh, 18px); }
.menu-col #pickOpts .row .big { margin-top: clamp(4px, .9vh, 10px); }
.menu-col #pickOpts .fine { margin-top: clamp(4px, 1vh, 14px); font-size: clamp(10px, 1.5vh, 13px); }
.menu-col #pickOpts .group { margin: clamp(4px, 1.3vh, 16px) 0; }
.step.enter { animation: stepIn .38s cubic-bezier(.2, .9, .3, 1.08) both; }
@keyframes stepIn { from { opacity: 0; transform: translateX(-34px) skewX(2deg); } to { opacity: 1; transform: none; } }

#pickGame .logo { align-self: center; font-size: clamp(36px, 7.2vh, 76px); -webkit-text-stroke: 5px var(--ink); text-shadow: 4px 4px 0 var(--ink); margin: 0 0 clamp(2px, .8vh, 8px); }

/* carousels */
.car { --accent: var(--yellow); flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; text-align: left; outline: none; }
.car-game { --accent: var(--yellow); } .car-board { --accent: #a65bff; } .car-env { --accent: var(--brand-cyan); }
.car-label { margin: 0 0 clamp(2px, .5vh, 5px) 4px; color: var(--yellow); font-size: clamp(12px, 1.9vh, 19px); font-weight: 400; text-shadow: 2px 2px 0 var(--ink); letter-spacing: .06em; }
.car-row { flex: 1 1 0; min-height: 0; display: flex; align-items: stretch; gap: clamp(6px, .9vw, 14px); }
.car-view { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border: 4px solid var(--ink); border-radius: 6px;
  background: radial-gradient(ellipse at 50% 42%, #4a1a8a 0%, #24104a 52%, #0b0516 100%);
  box-shadow: 4px 4px 0 var(--ink), 0 0 0 3px var(--accent); transition: box-shadow .2s; }
.car:focus-visible .car-view, .car:focus-within .car-view { box-shadow: 4px 4px 0 var(--ink), 0 0 0 4px var(--accent), 0 0 18px 2px var(--accent); }
.car-slide { position: absolute; inset: 0; will-change: transform, opacity; }

.car-arrow { flex: 0 0 auto; align-self: center; width: clamp(46px, 7.4vh, 78px); height: clamp(46px, 7.4vh, 78px); padding: 0; margin: 0;
  background: none; border: 0; box-shadow: none; transform: none; cursor: pointer; transition: transform .1s, filter .15s; }
.car-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
.car-arrow .ar-ink { fill: var(--ink); stroke: var(--ink); stroke-width: 12; stroke-linejoin: round; }
.car-arrow .ar-fill { fill: var(--accent); stroke: none; }
.car-arrow:hover:not(:disabled) { transform: scale(1.14) rotate(-3deg); box-shadow: none; filter: drop-shadow(0 0 8px var(--accent)); }
.car-arrow.next:hover:not(:disabled) { transform: scale(1.14) rotate(3deg); }
.car-arrow:active:not(:disabled) { transform: scale(.88); box-shadow: none; }
.car-arrow:focus-visible { outline: 3px dashed #fff; outline-offset: 2px; }
.car-arrow.pulse { animation: arrowPulse .28s ease-out; }
@keyframes arrowPulse { 0% { transform: scale(.8); } 55% { transform: scale(1.28); filter: drop-shadow(0 0 14px var(--accent)); } 100% { transform: scale(1); } }
.car-arrow:disabled { opacity: .28; filter: grayscale(1); cursor: not-allowed; }

.car-dots { display: flex; justify-content: center; gap: 8px; margin-top: clamp(2px, .6vh, 6px); }
.car-dot { width: 14px; height: 14px; padding: 0; margin: 0; border: 3px solid var(--ink); background: #3a2468; box-shadow: none; transform: skew(-10deg); }
.car-dot.on { background: var(--accent); }
.car-dot:hover { transform: skew(-10deg) scale(1.2); box-shadow: none; }

.thumb { position: relative; width: 100%; height: 100%; }
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; transition: opacity .25s; }
.thumb.loading img { opacity: 0; }
.thumb.loading::after { content: ""; position: absolute; inset: 16% 10%; border-radius: 14px;
  background: linear-gradient(110deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.05) 70%); background-size: 220% 100%; animation: shimmer 1.1s linear infinite; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.gslide { display: flex; align-items: center; gap: clamp(6px, 1vw, 16px); padding: 4px clamp(6px, 1vw, 14px); }
.gslide .thumb { flex: 1.35 1 0; min-width: 0; }
.gtext { flex: 1 1 0; min-width: 0; text-align: center; }
#pickGame .gtitle.logo { font-size: clamp(20px, min(3.4vh, 2.2vw), 42px); white-space: nowrap; -webkit-text-stroke: 4px var(--ink); text-shadow: 3px 3px 0 var(--ink); line-height: 1; margin: 0; }
.gtag { margin-top: clamp(6px, 1.2vh, 14px); color: var(--brand-cyan); font-size: clamp(10px, 1.55vh, 15px); letter-spacing: .07em; text-shadow: 1px 1px 0 var(--ink); line-height: 1.25; }
.cslide { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 2px 8px 0; }
.cslide .thumb { flex: 1 1 0; min-height: 0; }
.cname { padding: 1px 0 clamp(3px, .8vh, 8px); font-size: clamp(14px, 2.5vh, 26px); color: #fff; letter-spacing: .08em; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink); }


/* phones / narrow windows: the 3D preview sits on top, the selectors become a scrolling sheet below it */
@media (max-width: 899px) {
  #menu { align-items: flex-end; }
  .menu-col { width: 100%; margin: 0; height: 62%; }
  .menu-col .panel.step { overflow-y: auto; border-width: 4px; padding: 10px 12px 14px; }
  .car { flex: 0 0 auto; }
  .car-row { flex: 0 0 auto; height: clamp(96px, 17vh, 150px); }
  #pickGame .logo { font-size: 40px; }
  .car-arrow { width: 46px; height: 46px; }
}

/* Skewed, bordered boxes: keep the fill out from under the (anti-aliased) black border, otherwise thin fill-coloured hairlines show along the outer edge. */
*, *::before, *::after { background-clip: padding-box !important; }

/* ===================== Main menu, POW! Points, Shop, Settings, Credits ===================== */
.pp-badge { position: fixed; top: clamp(10px, 2vh, 20px); right: clamp(12px, 2vw, 26px); z-index: 12; pointer-events: none; display: flex; align-items: baseline; gap: 8px;
  padding: 6px 16px 6px 14px; background: var(--yellow); color: var(--ink); border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink), 0 0 0 3px var(--purple);
  transform: skew(-6deg) rotate(-1.5deg); }
.pp-badge .pp-lab { font-size: clamp(10px, 1.5vh, 13px); letter-spacing: .1em; }
.pp-badge b { font-size: clamp(22px, 3.6vh, 34px); font-weight: 400; line-height: 1; -webkit-text-stroke: 0; }
.pp-badge i { font-style: normal; font-size: clamp(12px, 1.8vh, 16px); color: var(--pink); -webkit-text-stroke: 0; }
.pp-badge.bump { animation: ppBump .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes ppBump { 0% { transform: skew(-6deg) rotate(-1.5deg) scale(1); } 35% { transform: skew(-6deg) rotate(-1.5deg) scale(1.22); background: #fff; } 100% { transform: skew(-6deg) rotate(-1.5deg) scale(1); } }

/* top-level menu */
.menu-col #pickMain { justify-content: safe center; align-items: stretch; gap: clamp(6px, 1.4vh, 16px); overflow-y: auto; }
#pickMain .main-logo { align-self: center; font-size: clamp(46px, 11vh, 118px); margin: 0; -webkit-text-stroke: 6px var(--ink); text-shadow: 5px 5px 0 var(--ink); }
#pickMain .main-tag { margin: 0 0 clamp(2px, 1vh, 10px); color: var(--cyan); font-size: clamp(11px, 1.8vh, 17px); letter-spacing: .12em; text-shadow: 2px 2px 0 var(--ink); }
.mainnav { display: flex; flex-direction: column; gap: clamp(8px, 1.7vh, 18px); flex: 1 1 auto; justify-content: center; max-height: 70%; }
.mbtn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 0; min-height: clamp(52px, 9vh, 104px);
  padding: 4px 16px; border: 5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); color: #fff; transform: skew(-5deg); transition: transform .12s, box-shadow .12s; }
.mbtn span { font-size: clamp(28px, 5.6vh, 58px); line-height: 1; letter-spacing: .08em; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }
.mbtn small { font-family: Arial, sans-serif; font-weight: 700; font-size: clamp(10px, 1.6vh, 14px); letter-spacing: .06em; margin-top: 2px; color: #fff; text-shadow: 1px 1px 0 var(--ink); opacity: .95; }
.m-play { background: var(--pink); } .m-shop { background: #ff8a00; } .m-set { background: var(--purple); } .m-cred { background: #0aa0c8; }
.mbtn:hover { transform: skew(-5deg) translate(-3px, -3px) scale(1.025); box-shadow: 10px 10px 0 var(--ink), 0 0 18px 2px rgba(255,255,255,.35); }
.mbtn:active { transform: skew(-5deg) translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.mbtn:focus-visible { outline: 4px dashed #fff; outline-offset: 3px; }
.mbtn::after { content: ""; position: absolute; right: 16px; top: 50%; width: 0; height: 0; transform: translateY(-50%); border-left: 22px solid var(--yellow); border-top: 14px solid transparent; border-bottom: 14px solid transparent; filter: drop-shadow(3px 0 0 var(--ink)); opacity: 0; transition: opacity .12s, right .12s; }
.mbtn:hover::after, .mbtn:focus-visible::after { opacity: 1; right: 10px; }
.main-foot { margin: 0; text-align: center; }

/* back / continue rows */
.menu-col .pick-actions { flex: 0 0 auto; display: flex; gap: 10px; }
.menu-col .pick-actions .big { width: auto; min-width: 0; margin-top: clamp(4px, 1vh, 12px); font-size: clamp(18px, 3.2vh, 28px); padding: clamp(6px, 1.3vh, 12px); flex: 1 1 0; }
.menu-col .pick-actions .big:first-child { flex: 0 0 34%; }
.menu-col .pick-actions { width: 100%; box-sizing: border-box; }
.menu-col .big:disabled { background: #4a3a68; color: #b9a6e8; cursor: not-allowed; transform: none; box-shadow: 3px 3px 0 var(--ink); }
.menu-col #pickSettings > .row, .menu-col #pickCredits > .row { flex: 0 0 auto; }
.menu-col #pickSettings > .row .big, .menu-col #pickCredits > .row .big { font-size: clamp(18px, 3.2vh, 28px); padding: clamp(6px, 1.3vh, 12px); margin-top: clamp(4px, 1vh, 12px); }

/* locked / owned cosmetics on the carousel slides */
.cslide { position: absolute; }
.cslide.locked .thumb img { filter: saturate(.55) brightness(.78); }
.cbadge { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 3px solid var(--ink);
  font-size: clamp(11px, 1.8vh, 16px); letter-spacing: .08em; background: #3a2468; color: #fff; box-shadow: 3px 3px 0 var(--ink); transform: skew(-6deg); }
.cbadge svg { width: 1.2em; height: 1.2em; fill: currentColor; flex: 0 0 auto; }
.cbadge.lock { background: var(--ink); color: var(--yellow); }
.cbadge.lock .bp { font-weight: 400; color: #fff; }
.cbadge.owned { background: #28c76f; color: var(--ink); } .cbadge.equipped { background: var(--yellow); color: var(--ink); }
.viewshop { position: absolute; right: 8px; top: 8px; padding: clamp(3px, .8vh, 7px) clamp(8px, 1vw, 14px); font-size: clamp(11px, 1.8vh, 16px); background: var(--pink); color: #fff;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; z-index: 2; }

/* shop */
.menu-col #pickShop { gap: clamp(3px, .8vh, 9px); }
#pickShop .small-logo { font-size: clamp(30px, 6vh, 56px) !important; margin: 0; flex: 0 0 auto; -webkit-text-stroke: 4px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
.shop-tabs { flex: 0 0 auto; }
.shop-tabs button { font-size: clamp(13px, 2.1vh, 18px); padding: clamp(4px, 1vh, 9px) 8px; }
.shop-car { --accent: var(--pink); }
.shop-info { flex: 0 0 auto; text-align: left; padding: clamp(4px, .9vh, 10px) 4px 0; min-height: clamp(66px, 11vh, 110px); }
.si-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chip { display: inline-block; padding: 2px 12px; border: 3px solid var(--ink); font-size: clamp(12px, 1.9vh, 17px); letter-spacing: .1em; transform: skew(-6deg); box-shadow: 3px 3px 0 var(--ink); }
.chip.lock { background: var(--ink); color: var(--yellow); box-shadow: 3px 3px 0 #000, 0 0 0 2px var(--yellow); } .chip.owned { background: #28c76f; color: var(--ink); } .chip.equipped { background: var(--yellow); color: var(--ink); }
.price { font-size: clamp(20px, 3.4vh, 32px); color: var(--yellow); text-shadow: 3px 3px 0 var(--ink); }
.si-blurb { margin: 4px 0 0; font-family: Arial, sans-serif; font-weight: 700; font-size: clamp(11px, 1.7vh, 15px); color: #d8caf5; line-height: 1.25; }
.shop-msg { margin: 4px 0 0; min-height: 1.2em; font-size: clamp(12px, 1.9vh, 17px); letter-spacing: .05em; text-shadow: 2px 2px 0 var(--ink); }
.shop-msg.bad { color: #ff7a7a; } .shop-msg.good { color: #7dffb0; }
#btnShopAct.poor { background: #7a4a8c; }
.burst { position: absolute; left: 50%; top: 42%; z-index: 5; pointer-events: none; padding: .15em .5em; font-size: clamp(40px, 8vh, 84px); color: var(--yellow); background: var(--pink);
  border: 6px solid var(--ink); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink); transform: translate(-50%, -50%) rotate(-8deg);
  clip-path: polygon(50% 0, 61% 18%, 80% 6%, 78% 28%, 100% 30%, 86% 48%, 100% 66%, 78% 68%, 80% 92%, 61% 82%, 50% 100%, 39% 82%, 20% 92%, 22% 68%, 0 66%, 14% 48%, 0 30%, 22% 28%, 20% 6%, 39% 18%);
  animation: burstPop .85s cubic-bezier(.2,.9,.3,1.3) forwards; }
.burst.open { background: var(--yellow); color: var(--pink); animation-duration: .6s; }
@keyframes burstPop { 0% { transform: translate(-50%, -50%) rotate(-8deg) scale(.1); opacity: 0; } 30% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.12); opacity: 1; } 75% { transform: translate(-50%, -50%) rotate(-5deg) scale(1); opacity: 1; } 100% { transform: translate(-50%, -62%) rotate(-5deg) scale(1.05); opacity: 0; } }

/* settings */
.menu-col #pickSettings { gap: clamp(3px, .8vh, 9px); }
#pickSettings .small-logo { font-size: clamp(30px, 6vh, 56px) !important; margin: 0; flex: 0 0 auto; -webkit-text-stroke: 4px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
.set-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 0 6px 0 2px; text-align: left; scrollbar-color: var(--pink) #2a1450; }
.set-sec { margin: clamp(4px, 1vh, 12px) 0 0; padding: 2px 8px; display: inline-block; background: var(--ink); color: var(--cyan); font-size: clamp(12px, 1.8vh, 16px); letter-spacing: .12em; transform: skew(-6deg); }
.set-scroll .group { margin: clamp(4px, 1vh, 12px) 0; }
.set-scroll .group label { font-size: clamp(11px, 1.7vh, 15px); margin-bottom: clamp(2px, .5vh, 6px); }
.set-scroll .group output { margin-left: 8px; color: #fff; }
.set-scroll .seg button { font-size: clamp(13px, 2vh, 17px); padding: clamp(4px, 1vh, 9px) 8px; min-width: 72px; }
.set-scroll input[type=range] { width: 100%; height: 26px; accent-color: var(--pink); cursor: pointer; }
.set-scroll .fine { margin: 8px 0 4px; }

/* credits */
.menu-col #pickCredits { gap: clamp(3px, .8vh, 9px); }
#pickCredits .main-logo { align-self: center; font-size: clamp(34px, 7vh, 72px); margin: 0; flex: 0 0 auto; -webkit-text-stroke: 5px var(--ink); text-shadow: 4px 4px 0 var(--ink); }
.credits-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; text-align: left; padding: 0 8px 0 2px; scrollbar-color: var(--pink) #2a1450; }
.cr-by { margin: 4px 0 0; text-align: center; color: var(--cyan); letter-spacing: .14em; font-size: clamp(11px, 1.7vh, 15px); text-shadow: 2px 2px 0 var(--ink); }
.cr-co { margin: 0 0 clamp(4px, 1vh, 12px); text-align: center; color: var(--yellow); font-size: clamp(24px, 4.4vh, 44px); letter-spacing: .06em; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }
.cr-list { margin: 0; font-family: Arial, sans-serif; }
.cr-list dt { margin-top: clamp(6px, 1.2vh, 12px); color: var(--yellow); font-family: var(--font); letter-spacing: .08em; font-size: clamp(12px, 1.9vh, 16px); text-shadow: 2px 2px 0 var(--ink); }
.cr-list dd { margin: 2px 0 0; color: #e6dcfb; font-weight: 700; font-size: clamp(11px, 1.7vh, 14px); line-height: 1.35; }
.cr-list a { color: var(--cyan); }
.credits-scroll .fine { text-align: center; }

/* results */
.go-meta { margin: -6px 0 10px; color: #d8caf5; letter-spacing: .12em; font-size: 15px; text-shadow: 2px 2px 0 var(--ink); }
.go-reward { margin: 4px 0 8px; padding: 10px 14px 12px; background: #2a1450; border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink), 0 0 0 3px var(--yellow); transform: skew(-3deg); }
.go-reward.pop { animation: rewardPop .6s cubic-bezier(.2,.9,.3,1.35); }
@keyframes rewardPop { 0% { transform: skew(-3deg) scale(.6); opacity: 0; } 100% { transform: skew(-3deg) scale(1); opacity: 1; } }
.gr-line { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.gr-plus { font-size: 54px; line-height: 1; color: var(--yellow); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); }
.gr-unit { font-size: 20px; color: var(--pink); letter-spacing: .08em; text-shadow: 2px 2px 0 var(--ink); }
.gr-bal { margin-top: 2px; font-size: 18px; letter-spacing: .08em; color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.gr-bal b { color: var(--yellow); font-weight: 400; }
.gr-goal { margin-top: 8px; font-family: Arial, sans-serif; font-weight: 700; font-size: 13px; color: #d8caf5; }
.gr-goal-name { display: block; margin-bottom: 4px; font-family: var(--font); letter-spacing: .08em; font-size: 14px; color: var(--cyan); }
.gr-bar { height: 14px; background: #120826; border: 3px solid var(--ink); }
.gr-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(135deg, var(--pink) 0 8px, #ff5fb4 8px 16px); transition: width .9s ease-out; }
.gr-goal-txt { display: block; margin-top: 3px; }

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

@media (max-width: 899px) {
  .pp-badge { top: auto; bottom: auto; top: 6px; right: 8px; padding: 3px 10px; box-shadow: 3px 3px 0 var(--ink); }
  .menu-col #pickMain { justify-content: flex-start; }
  .mbtn { min-height: 54px; } .mbtn span { font-size: 28px; -webkit-text-stroke: 3px var(--ink); } .mbtn small { display: none; }
  #pickMain .main-logo { font-size: 44px; }
  .mainnav { max-height: none; flex: 0 0 auto; }
}

/* shop: bigger preview inside its card (the renders have a lot of transparent margin) */
.shop-car .cslide { padding: 0 6px; }
.shop-car .cslide .thumb { overflow: hidden; min-height: 0; }
.shop-car .cslide .thumb img { transform: scale(1.55); transform-origin: 50% 55%; }
.shop-car .cname { padding-bottom: clamp(2px, .5vh, 6px); }
.shop-info { min-height: 0; }


/* ---- Online PvP: lobby panel, HUD banners ------------------------------------------------------------------ */
.on-game { margin: 0; color: var(--brand-cyan); font-size: clamp(15px, 2.4vh, 22px); letter-spacing: .06em; text-shadow: 2px 2px 0 var(--ink); }
.on-lead { margin: clamp(6px, 1.4vh, 14px) 0 4px; color: #e9ddff; font-family: Arial, sans-serif; font-size: clamp(13px, 1.9vh, 16px); line-height: 1.35; }
.on-view { display: flex; flex-direction: column; gap: clamp(4px, 1vh, 10px); }
.on-view.hidden { display: none; }
.on-wait { margin: clamp(6px, 1.6vh, 16px) 0 0; color: var(--yellow); font-size: clamp(18px, 3vh, 26px); text-shadow: 2px 2px 0 var(--ink); animation: onPulse 1.6s ease-in-out infinite; }
@keyframes onPulse { 50% { opacity: .55; } }
.reduce-motion .on-wait { animation: none; }
.on-code { margin: clamp(2px, .8vh, 8px) auto; padding: clamp(6px, 1.2vh, 12px) clamp(16px, 2vw, 28px); background: var(--yellow); color: var(--ink); border: 4px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink); font-size: clamp(34px, 7vh, 58px); letter-spacing: .14em; transform: skew(-4deg); user-select: all; -webkit-user-select: all; }
.on-copy .big { font-size: clamp(14px, 2.4vh, 20px); }
.on-label { color: var(--yellow); font-size: clamp(13px, 2vh, 17px); text-shadow: 2px 2px 0 var(--ink); text-align: left; margin: 6px 0 0 4px; }
.on-input { width: 100%; box-sizing: border-box; font: inherit; font-size: clamp(30px, 6vh, 48px); letter-spacing: .2em; text-align: center; text-transform: uppercase;
  color: var(--ink); background: #fff; border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 6px 8px; }
.on-input:focus { outline: 3px solid var(--yellow); outline-offset: 2px; }
.on-info { min-height: 1.3em; margin: 2px 0 0; font-family: Arial, sans-serif; font-weight: 700; font-size: clamp(12px, 1.8vh, 15px); letter-spacing: .06em; color: #b9a6e8; }
.on-info.good { color: #7dff9a; }
.on-msg { min-height: 1.3em; margin: clamp(2px, .8vh, 8px) 0 0; font-family: Arial, sans-serif; font-weight: 700; font-size: clamp(12px, 1.8vh, 15px); color: var(--yellow); word-break: break-all; }
.on-msg.bad { color: #ff8fb8; }

.netbar { position: absolute; left: 50%; top: 62px; transform: translateX(-50%); z-index: 6; max-width: calc(100% - 24px); text-align: center;
  background: var(--pink); color: #fff; border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 5px 14px; font-size: clamp(13px, 2.2vh, 18px); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.offerbar { position: absolute; left: 50%; top: 104px; transform: translateX(-50%); z-index: 6; max-width: calc(100% - 24px); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: var(--yellow); color: var(--ink); border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 6px 12px; font-size: clamp(13px, 2.2vh, 18px); }
.offerbar .hudbtn { pointer-events: auto; }
#btnOffer:disabled { opacity: .6; }

/* ---- HUD: MOVES toggle + fullscreen ---------------------------------------------------------------------- */
#btnMoves.off { opacity: .75; }
#btnMoves[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }
@media (max-width: 700px) { #history { max-height: 22vh; opacity: .94; } }


/* =====================================================================================================================
   v0.5  menu polish: spacing, content-aware layouts, subtle purple-on-purple comic patterns, Quick Match
   Patterns are static CSS/inline-SVG only (no canvas, no downloads, no animation), always behind the content (z-index -1).
   ===================================================================================================================== */
.menu-col .panel.step { isolation: isolate; background-color: #1b0b33; }
.menu-col .panel.step::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpolygon points='400,0 400,260 170,0' fill='%23a45cff' fill-opacity='.08'/%3E%3Cpolygon points='400,60 400,400 110,400' fill='%230a0a0c' fill-opacity='.2'/%3E%3Cpolygon points='400,0 400,110 305,0' fill='%23c79bff' fill-opacity='.07'/%3E%3Cpolyline points='400,150 250,0' fill='none' stroke='%23c79bff' stroke-opacity='.10' stroke-width='3'/%3E%3C/svg%3E") no-repeat right -60px top -44px / min(72%, 400px) auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='200.0,100.0 150.2,113.5 186.6,150.0 136.8,136.8 150.0,186.6 113.5,150.2 100.0,200.0 86.5,150.2 50.0,186.6 63.2,136.8 13.4,150.0 49.8,113.5 0.0,100.0 49.8,86.5 13.4,50.0 63.2,63.2 50.0,13.4 86.5,49.8 100.0,0.0 113.5,49.8 150.0,13.4 136.8,63.2 186.6,50.0 150.2,86.5' fill='%23b57cff' fill-opacity='.075'/%3E%3Ccircle cx='100' cy='100' r='30' fill='none' stroke='%23d8bcff' stroke-opacity='.07' stroke-width='3'/%3E%3C/svg%3E") no-repeat left -96px bottom -96px / 280px 280px,
    linear-gradient(118deg, transparent 0 44%, rgba(150, 80, 255, .07) 44% 46.5%, transparent 46.5% 50.5%, rgba(150, 80, 255, .045) 50.5% 51.6%, transparent 51.6%),
    linear-gradient(162deg, rgba(122, 31, 214, .17), transparent 36%, transparent 68%, rgba(5, 2, 12, .3)); }
.menu-col .panel.step::after { content: ""; position: absolute; right: 0; bottom: 0; width: 60%; height: 34%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(176, 120, 255, .22) 1.3px, transparent 1.9px) 0 0 / 11px 11px;
  -webkit-mask-image: linear-gradient(to top left, #000, transparent 78%); mask-image: linear-gradient(to top left, #000, transparent 78%); }
/* vary the composition a little per screen; the identity stays the same */
#pickOpts::before, #pickGame::before { transform: scaleX(-1); }
#pickOnline::before { transform: scaleY(-1); }
#pickShop::before, #pickCredits::before { transform: scale(-1, -1); }
#pickSettings::after, #pickCredits::after { right: auto; left: 0; -webkit-mask-image: linear-gradient(to top right, #000, transparent 78%); mask-image: linear-gradient(to top right, #000, transparent 78%); }

/* --- main menu: bigger logo, buttons fill the panel --- */
#pickMain .main-logo { font-size: clamp(50px, 13vh, 132px); }
#pickMain .main-tag { margin-bottom: clamp(6px, 2vh, 22px); }
.menu-col #pickMain { gap: clamp(8px, 2vh, 24px); padding-top: clamp(12px, 3vh, 36px); padding-bottom: clamp(12px, 3vh, 32px); }
.mainnav { max-height: none; gap: clamp(10px, 2.4vh, 28px); justify-content: space-evenly; }
.mbtn { min-height: clamp(54px, 11vh, 120px); }
.main-foot { margin-top: auto; }

/* --- match settings: spread the groups over the whole panel --- */
.menu-col #pickOpts { justify-content: space-evenly; gap: clamp(3px, 1.2vh, 14px); }
.menu-col #pickOpts .group { margin: clamp(4px, 1.6vh, 22px) 0; }
.menu-col #pickOpts .group label { font-size: clamp(11px, 1.9vh, 17px); }
.menu-col #pickOpts .seg button { font-size: clamp(13px, 2.4vh, 20px); padding: clamp(6px, 1.5vh, 13px) 8px; }
.menu-col #pickOpts .big { font-size: clamp(20px, 4vh, 34px); padding: clamp(8px, 1.7vh, 17px); }

/* --- online lobby / quick match: content centred in the free space, Back pinned to the bottom --- */
.menu-col #pickOnline { justify-content: flex-start; gap: clamp(6px, 1.4vh, 16px); }
#pickOnline .on-view:not(.hidden) { flex: 1 1 auto; justify-content: center; gap: clamp(8px, 2vh, 22px); }
#pickOnline .on-view .big { margin-top: 0; padding: clamp(9px, 1.9vh, 19px); font-size: clamp(20px, 4vh, 36px); }
#pickOnline .on-view .row .big { font-size: clamp(14px, 2.6vh, 22px); }
#pickOnline > .row { flex: 0 0 auto; margin-top: auto; }
#pickOnline > .row .big { margin-top: 0; font-size: clamp(18px, 3.2vh, 28px); padding: clamp(6px, 1.3vh, 12px); }
.big.quick { background: var(--yellow); color: #fff; }   /* white fill + the shared ink outline, like the other big buttons */
.on-hint { margin: -2px 0 0; color: #c9b8f2; font-family: Arial, sans-serif; font-weight: 700; font-size: clamp(11px, 1.6vh, 14px); line-height: 1.3; }
.on-radar { position: relative; width: clamp(64px, 15vh, 128px); aspect-ratio: 1; margin: 0 auto; border: 4px solid var(--ink); border-radius: 50%; background: #2a1450; box-shadow: 4px 4px 0 var(--ink); }
.on-radar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18%; height: 18%; margin: -9% 0 0 -9%; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); }
.on-radar i { position: absolute; inset: 0; border: 4px solid var(--cyan); border-radius: 50%; opacity: 0; animation: onRadar 2.4s ease-out infinite; }
.on-radar i:nth-child(2) { animation-delay: .8s; } .on-radar i:nth-child(3) { animation-delay: 1.6s; }
@keyframes onRadar { from { transform: scale(.2); opacity: .9; } to { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .on-radar i, .on-wait { animation: none; } .on-radar i:nth-child(1) { opacity: .5; transform: scale(.55); } .on-radar i:nth-child(2) { opacity: .3; transform: scale(.8); } }
.reduce-motion .on-radar i { animation: none; opacity: .4; transform: scale(.6); }
.on-time { margin: 0; color: #fff; font-size: clamp(26px, 5.2vh, 46px); letter-spacing: .1em; text-shadow: 3px 3px 0 var(--ink); font-variant-numeric: tabular-nums; }
.on-wait.found { color: var(--yellow); animation: onFound .45s cubic-bezier(.2, 1.6, .4, 1) both; font-size: clamp(24px, 4.6vh, 40px); }
@keyframes onFound { from { transform: scale(.4) rotate(-6deg); } to { transform: scale(1) rotate(-2deg); } }
.is-found .on-radar i { border-color: var(--yellow); }

/* --- shop / settings / credits: breathing room around the logo and the footer buttons --- */
.menu-col #pickShop, .menu-col #pickSettings, .menu-col #pickCredits { gap: clamp(5px, 1.5vh, 16px); }
.set-scroll .group { margin: clamp(6px, 1.5vh, 18px) 0; }
.set-scroll .seg button { font-size: clamp(13px, 2.2vh, 19px); padding: clamp(5px, 1.2vh, 11px) 8px; }
#pickSettings .small-logo, #pickShop .small-logo { font-size: clamp(32px, 7vh, 64px) !important; }

/* --- phone held sideways: menu beside the 3D preview instead of a squeezed strip --- */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 560px) {
  #menu { align-items: stretch; }
  .menu-col { width: 54%; height: auto; margin: 6px 0 6px 8px; }
  .menu-col .panel.step { padding: 8px 12px 10px; }
  .mbtn { min-height: 40px; } .mbtn span { font-size: 24px; -webkit-text-stroke: 3px var(--ink); }
  #pickMain .main-logo { font-size: clamp(34px, 11vh, 52px); }
  .menu-col #pickMain { justify-content: space-evenly; }
  .mainnav { flex: 1 1 auto; }
}

.on-or { display: flex; align-items: center; gap: 10px; margin: clamp(2px, 1vh, 10px) 0 0; color: var(--cyan); font-size: clamp(13px, 2.1vh, 18px); letter-spacing: .12em; text-shadow: 2px 2px 0 var(--ink); }
.on-or::before, .on-or::after { content: ""; flex: 1 1 0; height: 3px; background: var(--ink); box-shadow: 0 0 0 1px rgba(176, 120, 255, .25); }

/* ---- Credits: MUSIC & SOUND ------------------------------------------------------------------------------- */
.cr-sec { display: inline-block; margin: clamp(10px, 2vh, 22px) 0 4px; padding: 2px 10px; background: var(--ink); color: var(--cyan); font-size: clamp(14px, 2.2vh, 19px); letter-spacing: .12em; transform: skew(-6deg); }
.cr-audio { text-align: left; }
.cr-grp { margin: 8px 0 12px; padding: 8px 12px 9px; background: rgba(10, 10, 12, .38); border-left: 5px solid var(--pink); }
.cr-grp-h { margin: 0 0 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--yellow); font-size: clamp(16px, 2.6vh, 22px); letter-spacing: .06em; text-shadow: 2px 2px 0 var(--ink); }
.cr-items { margin: 0; padding-left: 18px; font-family: Arial, sans-serif; font-size: clamp(12px, 1.9vh, 15px); color: #efe6ff; line-height: 1.55; }
.cr-items a, .cr-lic { color: var(--cyan); text-decoration: underline; }
.cr-lic { font-size: .75em; letter-spacing: .08em; }
.cr-kind, .cr-mod { color: #b9a6e8; }
.cr-mod { font-size: .92em; }
.cr-src { margin: 5px 0 0; font-family: Arial, sans-serif; font-weight: 700; font-size: clamp(11px, 1.6vh, 13px); color: #c9b8f2; }