/* The Game Corner's games (js/voltorb.js, js/quiz.js, js/slots.js, js/blackjack.js, js/highlow.js, js/plinko.js,
   js/scratch.js): each a panel over whatever is showing. */

.cg-overlay {
  position: fixed; inset: 0; z-index: 960; display: grid; place-items: center; padding: 12px;
  background: rgba(10, 4, 24, 0.72); font-family: var(--font-ui, inherit);
  animation: cgIn 0.18s ease-out;
}
@keyframes cgIn { from { opacity: 0; } }

.vf-panel {
  width: min(420px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 14px; color: #f4fff4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.vf-panel { background: linear-gradient(#2f8a58, #20704a); }
.vf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vf-title { font-size: 20px; letter-spacing: 2px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.vf-lv { padding: 2px 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.25); font-size: 13px; }

.vf-meters { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.vf-meter { display: flex; flex-direction: column; align-items: center; padding: 4px; border-radius: 8px;
  background: #10301e; box-shadow: inset 0 0 0 2px #0a2014; }
.vf-meter span { font-size: 12px; opacity: 0.75; }
.vf-meter b { font-size: 16px; color: #c8ffb8; font-variant-numeric: tabular-nums; }

.vf-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.vf-tile {
  aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: repeating-linear-gradient(45deg, #c8e8a8 0 4px, #b8dc98 4px 8px);
  box-shadow: inset 0 -3px 0 #7ca868, inset 0 0 0 2px #e8f8d8;
  transition: transform 0.12s;
}
.vf-tile:not(.up):active { transform: scale(0.94); }
.vf-tile.up { cursor: default; background: #f4f8ec; box-shadow: inset 0 0 0 2px #c8d8b8; }
.vf-tile.just { animation: vfFlip 0.25s ease-out; }
.vf-tile.shown { opacity: 0.6; animation: vfFlip 0.3s ease-out backwards; }
.vf-tile { position: relative; }
.vf-tile.boom { background: #ffb0a0; box-shadow: inset 0 0 0 3px #e04838; opacity: 1; animation: vfBoom 0.4s; z-index: 1; }
.vf-blast {
  position: absolute; inset: -60%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, #ffe060 30%, #ff7030 48%, rgba(255, 60, 30, 0) 68%);
  animation: vfBlast 0.55s ease-out forwards;
}
.vf-blast::after {
  content: ''; position: absolute; inset: 20%; border-radius: 50%; border: 3px solid #fff4c0;
  animation: vfRing 0.55s ease-out forwards;
}
@keyframes vfBlast { from { transform: scale(0.2); opacity: 1; } 60% { opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
@keyframes vfRing { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.vf-panel.shake { animation: vfShake 0.45s; }
@keyframes vfShake { 15%, 55% { transform: translate(-6px, 2px); } 35%, 75% { transform: translate(6px, -2px); } }
.vf-panel.won { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 3px #ffe070, 0 0 24px rgba(255, 224, 112, 0.55); }
.vf-meter.paid b { color: #ffe070; animation: vfPaid 0.7s ease-out; }
@keyframes vfPaid { 30% { transform: scale(1.35); } }
@keyframes vfFlip { from { transform: rotateY(90deg); } }
@keyframes vfBoom { 30% { transform: scale(1.18); } }
.vf-n { font-size: clamp(20px, 7vw, 30px); font-weight: 700; color: #3a3a3a; }
.vf-n.n2 { color: #2a7ad8; }
.vf-n.n3 { color: #d84a2a; }

.vf-clue {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 6px; background: var(--line); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); color: #fff;
}
.vf-clue b { font-size: clamp(14px, 4.4vw, 18px); line-height: 1; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.vf-bombs { display: flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; }
.vf-corner { aspect-ratio: 1; }

.vf-voltorb {
  display: inline-block; width: 70%; aspect-ratio: 1; border-radius: 50%; position: relative;
  background: linear-gradient(#e04040 0 50%, #f8f8f8 50%); box-shadow: inset 0 0 0 2px #303030;
}
.vf-voltorb::before, .vf-voltorb::after {
  content: ''; position: absolute; top: 26%; width: 22%; height: 16%; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1.5px #202020, inset 3px 0 0 1.5px #202020;
}
.vf-voltorb::before { left: 20%; transform: rotate(14deg); }
.vf-voltorb::after { right: 20%; transform: scaleX(-1) rotate(14deg); }
.vf-voltorb.small::before, .vf-voltorb.small::after { display: none; }
.vf-voltorb.small { width: 12px; box-shadow: inset 0 0 0 1px #303030; }
.vf-voltorb.memo { width: 46%; opacity: 0.5; }

.vf-say, .gp-say { margin: 0; padding: 8px 10px; border-radius: 8px; background: #fffbea; color: #2a2a30; font-size: 14px; line-height: 1.35; }
.vf-keys, .gp-keys { display: flex; gap: 8px; }
.vf-key {
  flex: 1; min-height: 42px; padding: 0 10px; border: 0; border-radius: 99px; cursor: pointer; font: inherit; font-weight: 700;
  background: #f4f4f8; color: #2a2a30; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.vf-key:disabled { opacity: 0.45; cursor: default; }
.vf-go { background: linear-gradient(#ffe070, #f0b830); }
.vf-memo.on { background: #e04040; color: #fff; }
.vf-close { flex: 0 0 auto; }

/* Who's That Pokémon? */
.qz-panel { background: linear-gradient(#2a6ad0, #1a4aa0); }
.qz-stage { position: relative; height: 210px; display: grid; place-items: center; overflow: hidden; border-radius: 10px;
  background: radial-gradient(circle, #fff7c0 0 18%, #ffd84a 40%, #f0a020 75%); }
.qz-burst { position: absolute; left: 50%; top: 50%; width: max(150%, 360px); height: auto; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  animation: qzSpin 18s linear infinite; }
@keyframes qzSpin { to { transform: rotate(1turn); } }
.qz-mon { position: relative; width: 168px; height: 168px; object-fit: contain; image-rendering: pixelated; filter: brightness(0); transition: filter 0.35s; }
.qz-stage.shown .qz-mon { filter: none; animation: qzPop 0.4s ease-out; }
@keyframes qzPop { 40% { transform: scale(1.15); } }
.qz-name { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 99px;
  background: #fffbea; color: #2a2a30; font-size: 15px; white-space: nowrap; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); }
.qz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qz-opt { flex: none; }
.qz-opt.right { background: #6ad070; color: #fff; }
.qz-opt.wrong { background: #e05a5a; color: #fff; }
.qz-opt.dim { opacity: 0.45; }
.qz-opt:disabled { cursor: default; }
.qz-opt.right:disabled, .qz-opt.wrong:disabled { opacity: 1; }

/* a showcase, up close: a Pokédex shell round one big screen */
.sc-shell { width: min(420px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px;
  border-radius: 16px; background: linear-gradient(var(--shell-hi), var(--shell) 30%, var(--shell-lo));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 3px var(--shell-rim); color: #fff; }
.sc-hinge { display: flex; align-items: center; gap: 6px; }
.sc-lens { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c8f0ff 0 15%, #3aa8f0 45%, #145aa0);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--shell-rim); }
.sc-light { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.3); }
.sc-light.r { background: #ff5050; } .sc-light.y { background: #ffd84a; } .sc-light.g { background: #6ad070; }
.sc-title { margin-left: auto; padding: 3px 12px; border-radius: 6px; background: #1a2a1a; color: var(--sc); font-size: 15px; letter-spacing: 2px;
  text-shadow: 0 0 6px var(--sc); }
.sc-stage { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 6px; }
.sc-arrow { flex: none; min-height: 0; height: 56px; padding: 0; border-radius: 10px; background: var(--pad); color: #fff; font-size: 20px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.4); }
.sc-arrow:active { background: var(--pad-on); }
.sc-screen { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 10px; touch-action: pan-y;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--sc) 35%, #20203a), #10101e 70%); box-shadow: inset 0 0 0 4px #0a0a14, 0 0 0 3px #e8e8f0; }
.sc-screen.from-right .sc-art, .sc-screen.from-right .sc-icon { animation: scInR 0.25s ease-out; }
.sc-screen.from-left .sc-art, .sc-screen.from-left .sc-icon { animation: scInL 0.25s ease-out; }
@keyframes scInR { from { transform: translateX(40%); opacity: 0; } }
@keyframes scInL { from { transform: translateX(-40%); opacity: 0; } }
.sc-rays { position: absolute; left: 50%; top: 50%; width: 180%; height: auto; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  animation: qzSpin 30s linear infinite; }
.sc-art { position: relative; width: 78%; height: 78%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35)); }
.sc-art.dark { filter: brightness(0) drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)); }
.sc-art.sc-piece { image-rendering: auto; }
.sc-icon { position: relative; font-size: 96px; line-height: 1; }
.sc-count { position: absolute; bottom: 6px; right: 8px; font-size: 12px; color: #c8c8e0; }
.sc-pips { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 99px; background: rgba(10, 10, 20, 0.75); }
.sc-pips b { font-size: 12px; color: #fff2b8; margin-right: 2px; }
.sc-pips i { width: 18px; height: 18px; border-radius: 50%; background: #2a2a40; box-shadow: inset 0 0 0 2px #6a6a88; }
.sc-pips i.on { background: radial-gradient(circle at 35% 35%, #fff2a0, #ffc830 60%, #c08010); box-shadow: 0 0 6px #ffd84a; }
.sc-pips i.next { box-shadow: inset 0 0 0 2px var(--sc); animation: scPip 1s ease-in-out infinite alternate; }
@keyframes scPip { to { background: color-mix(in srgb, var(--sc) 55%, #2a2a40); } }
.sc-level { font-weight: 700; }
.sc-owned { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 99px; background: #6ad070; font-size: 12px; }
.sc-lcd { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #c8e8a8; color: #1a3a1a;
  box-shadow: inset 0 0 0 3px #7ca868; font-size: 14px; line-height: 1.35; }
.sc-lcd strong { font-size: 17px; }
.sc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sc-price { font-size: 16px; font-weight: 700; } .sc-price.short { color: #a83030; } .sc-price s { opacity: 0.6; font-weight: 400; }
.sc-buy.armed { background: linear-gradient(#ffb070, #f07830); }
@media (prefers-reduced-motion: reduce) { .qz-burst, .sc-rays, .sc-screen *, .sc-pips i, .qz-stage.shown .qz-mon { animation: none; } .mm-card { transition: none; } }

/* the betting tables (js/slots.js, js/blackjack.js, js/highlow.js, js/plinko.js) */
  background: radial-gradient(circle, var(--c) 0 52%, var(--s) 53% 58%, transparent 59%), repeating-conic-gradient(var(--c) 0 15deg, var(--s) 15deg 30deg);
  box-shadow: inset 0 0 0 5px var(--c), 0 3px 0 rgba(0, 0, 0, 0.35); text-shadow: 0 1px 0 #000; transition: transform 0.12s; }

.sl-panel { background: linear-gradient(#c02838, #801828); }
.sl-window { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; border-radius: 12px; background: #1a0e20;
  box-shadow: inset 0 0 0 4px #ffd84a, 0 0 18px rgba(255, 216, 74, 0.4); }
.sl-reel { position: relative; height: 150px; overflow: hidden; border-radius: 8px; background: linear-gradient(#bbb, #fff 30% 70%, #bbb); }
.sl-strip { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; will-change: transform; }
.sl-sym { height: 50px; display: grid; place-items: center; flex: none; }
.sl-sym img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.sl-seven { font-size: 40px; line-height: 1; font-weight: 900; color: #e02030; text-shadow: 0 3px 0 #801018, 0 0 8px #ffd84a; }
.sl-line { position: absolute; left: 0; right: 0; top: 50%; height: 50px; margin-top: -25px; pointer-events: none;
  box-shadow: inset 0 3px 0 rgba(224, 32, 48, 0.75), inset 0 -3px 0 rgba(224, 32, 48, 0.75); }
.sl-reel::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, 0.35), transparent 30% 70%, rgba(0, 0, 0, 0.35)); }
.sl-stops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: -4px; }
.sl-stop { min-height: 44px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 800; letter-spacing: 1px; color: #fff;
  background: radial-gradient(circle at 50% 35%, #ff6070, #c01828); box-shadow: 0 4px 0 #6a0c14, inset 0 0 0 2px rgba(255, 255, 255, 0.3); }
.sl-stop:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #6a0c14; }
.sl-stop:disabled { opacity: 0.4; cursor: default; }
.sl-jackpot { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 6px; border-radius: 10px; background: #1a0e20;
  box-shadow: inset 0 0 0 2px #ffd84a; animation: slPot 1.6s ease-in-out infinite; }
.sl-jackpot span { font-size: 12px; letter-spacing: 3px; color: #ffd84a; }
.sl-jackpot b { font-size: 24px; color: #ff6070; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px #ff3040; }
@keyframes slPot { 50% { box-shadow: inset 0 0 0 2px #ffd84a, 0 0 14px rgba(255, 216, 74, 0.6); } }
.sl-panel.bonus { background: linear-gradient(#e8b818, #a86a08); }
.sl-window.bonus { box-shadow: inset 0 0 0 4px #fff, 0 0 24px #ffe070; }
.sl-bonus-tag { background: #ffe070; color: #6a3a00; font-weight: 800; animation: slPot 0.8s infinite; }
.sl-sym.hit { animation: slHit 0.6s ease-out 2; }
@keyframes slHit { 50% { transform: scale(1.18); filter: drop-shadow(0 0 8px #ffe070); } }
.sl-pays { display: grid; gap: 2px; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); font-size: 12px; }
.sl-pay { display: flex; align-items: center; gap: 4px; }
.sl-pay b { margin-left: auto; color: #ffe070; }
.sl-pay span:not(.sl-sym) { opacity: 0.8; min-width: 58px; text-align: right; }
.sl-sym.mini { height: 22px; width: 22px; }
.sl-sym.mini img { width: 22px; height: 22px; }
.sl-sym.mini .sl-seven { font-size: 18px; text-shadow: none; }

.bj-panel, .hl-panel { background: linear-gradient(#1f6a3a, #134a28); }
.bj-felt { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 220px; justify-content: center; padding: 12px; border-radius: 120px 120px 14px 14px;
  background: radial-gradient(ellipse at 50% 30%, #2f8a50, #1a5a32); box-shadow: inset 0 0 0 4px #c89418, inset 0 0 0 7px #6a4a10; }
.bj-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bj-label { font-size: 14px; color: #fff6c8; text-shadow: 0 1px 0 #000; }
.bj-card { width: 52px; height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 6px; background: #fff;
  color: #202028; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); animation: bjDeal 0.25s ease-out; }
.bj-card b { font-size: 22px; line-height: 1; } .bj-card i { font-style: normal; font-size: 20px; }
.bj-card.red { color: #d02030; }
.bj-card.down { background: radial-gradient(circle, #fff 0 14%, #303030 15% 20%, transparent 21%), linear-gradient(#e84040 0 47%, #303030 47% 53%, #f8f8f8 53%);
  box-shadow: inset 0 0 0 3px #fff, 0 3px 0 rgba(0, 0, 0, 0.35); }
@keyframes bjDeal { from { transform: translateY(-30px) rotate(-8deg); opacity: 0; } }
.bj-card.big { width: 84px; height: 118px; } .bj-card.big b { font-size: 36px; } .bj-card.big i { font-size: 30px; }
.hl-felt { flex-direction: row; gap: 18px; }
.bj-card.old { opacity: 0.55; transform: scale(0.85); animation: none; }
.bj-card.lost { box-shadow: 0 0 0 3px #e04848, 0 3px 0 rgba(0, 0, 0, 0.35); }
.hl-cash { background: linear-gradient(#a8f0a0, #50c060); }

  box-shadow: inset 0 0 0 6px #c89418, 0 6px 16px rgba(0, 0, 0, 0.5); }
  background: conic-gradient(from -4.865deg, #2a8a40 0 9.73deg, transparent 9.73deg),
    repeating-conic-gradient(from -4.865deg, #202028 0 9.73deg, #c02030 9.73deg 19.46deg); }
  transform: rotate(var(--a)) translateY(-94px); }
  background: radial-gradient(circle at 35% 30%, #ffe8a0, #c89418 60%, #6a4a10); box-shadow: 0 0 0 4px #3a2a08; }
@media (prefers-reduced-motion: reduce) { .sl-strip, .sl-sym.hit, .bj-card, .rl-disc.spinning { animation: none; } }


/* Plinko */
.pk-panel { width: min(520px, 100%); background: linear-gradient(#1a5a9a, #0e3a6a); }
.pk-canvas { display: block; width: 100%; border-radius: 12px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.15), 0 4px 14px rgba(0, 0, 0, 0.4); }
.pk-panel .vf-keys .vf-go { flex: 1 1 0; }

/* Meowth's scratch card */
.sx-panel { background: linear-gradient(#e8b818, #b07a08); color: #3a2400; }
.sx-panel .vf-say { color: #3a2400; }
.sx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; border-radius: 12px; background: #fff8e0;
  box-shadow: inset 0 0 0 3px #c89418; touch-action: none; user-select: none; -webkit-user-select: none; }
.sx-cell { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: #fffdf4;
  box-shadow: inset 0 0 0 2px #e8d8a0; touch-action: none; }
.sx-cell .sl-sym { height: 100%; }
.sx-cell .sl-sym img { width: 70%; height: 70%; }
.sx-foil { position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, #c8c8d4 0 6px, #b0b0c0 6px 12px); box-shadow: inset 0 0 0 2px #9a9aac; transition: opacity 0.25s, transform 0.25s; }
.sx-foil::after { content: '?'; font-size: 28px; font-weight: 900; color: #8a8a9a; }
.sx-cell.open .sx-foil { opacity: 0; transform: scale(1.3) rotate(8deg); pointer-events: none; }
.sx-cell.win { box-shadow: inset 0 0 0 3px #ffb000, 0 0 10px #ffd84a; animation: slHit 0.6s ease-out 2; }

/* How to play: the "?" in a game's head, and its card */
.cg-help-key { width: 30px; height: 30px; flex: none; margin-left: 4px; border: 0; border-radius: 50%; cursor: pointer; font: inherit; font-weight: 900; font-size: 16px;
  color: #2a2a30; background: #fffbea; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.cg-help-key.on { background: #ffd84a; }
.vf-head { align-items: center; }
.vf-head .vf-title { margin-right: auto; }
.cg-help { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: #fffbea; color: #2a2a30; }
.cg-help-title { font-size: 15px; letter-spacing: 2px; color: #b03a2a; }
.cg-help-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; }
.cg-help-steps b { color: #1a1a24; }
.vf-example { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: linear-gradient(#2f8a58, #20704a); }
.vf-ex-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.vf-ex-row .vf-tile { cursor: default; }
.vf-ex-notes { display: grid; gap: 2px; justify-items: end; }
.vf-ex-notes p { margin: 0; font-size: 12px; color: #fffbea; }
.vf-ex-notes p::before { content: '▲ '; color: #ffe070; }

/* Records under each game (bestLine() in js/casino-pot.js) */
.cg-best { margin: -4px 0 0; text-align: center; font-size: 12px; font-weight: 700; color: #fff4b0; opacity: 0.9; }

/* A badge earned at a game (badgeNews() in js/corner-pot.js), over everything for a moment */
.cg-badge {
  position: fixed; left: 50%; top: 14px; z-index: 990; transform: translateX(-50%); padding: 10px 16px; border-radius: 12px;
  background: linear-gradient(#fff4b0, #f0c030); color: #4a3000; font-weight: 800; font-size: 15px; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 0 0 2px #fff8d8; animation: cgBadge 3.2s ease-out forwards;
}
@keyframes cgBadge { 0% { opacity: 0; transform: translate(-50%, -20px) scale(0.9); } 10%, 85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -10px); } }

/* Meowth's prize counter (js/prizes.js) */
.pz-panel { background: linear-gradient(#8a3ad0, #5a1e98); }
.pz-panel .vf-meter { background: #2a0e48; box-shadow: inset 0 0 0 2px #1a0630; }
.pz-panel .vf-meter b { color: #ffe890; }
.pz-stamps { margin: 0; text-align: center; font-size: 13px; color: #f0e0ff; }
.pz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pz-tile {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border: 0; border-radius: 10px; cursor: pointer;
  background: #fff8ec; color: #2a2030; font: inherit; box-shadow: inset 0 -3px 0 #d8c8b0; transition: transform 0.12s;
}
.pz-tile:active { transform: scale(0.96); }
.pz-tile.on { outline: 3px solid #ffd84a; outline-offset: 1px; }
.pz-tile.short .pz-cost { color: #a07890; }
.pz-tile.got { background: #e4f8e0; }
.pz-tile.got .pz-cost { color: #2a8a48; }
.pz-art { width: 100%; height: 76px; display: grid; place-items: center; }
.pz-pic { width: 100%; height: 76px; object-fit: contain; }
.pz-name { font-size: 12px; line-height: 1.2; text-align: center; }
.pz-cost { font-size: 13px; font-weight: 800; color: #8a3ad0; }

/* The home arcade's cabinet window (js/arcade-kit.js), in each game's colour, full screen (the user's ask, 2026-10-12):
   the screen takes whatever height is left, at the game's own shape (`size()`). */
.cg-overlay.ar { padding: 0; background: #07040f; touch-action: manipulation; }
/* A held thumb on an arcade cabinet never selects its text or pops the iOS callout (the user saw RESTART highlighted) */
.cg-overlay.ar, .cg-overlay.ar * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.ar-panel { background: linear-gradient(color-mix(in srgb, var(--ar) 85%, #fff), color-mix(in srgb, var(--ar) 70%, #000)); }
.cg-overlay.ar > .ar-panel { width: 100%; height: 100%; max-height: none; border-radius: 0; overflow: hidden; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.cg-overlay.ar > .ar-panel > :not(.ar-stage, .ar-bezel) { flex: none; }
.cg-overlay.ar > .ar-panel:has(.ar-help) { overflow: auto; }
.ar-stage { flex: 1 1 0; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.ar-canvas { display: block; width: 100%; border-radius: 12px; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.15), 0 4px 14px rgba(0, 0, 0, 0.4); }

/* The arcade cabinet (the user's ask, 2026-10-12, every game): the side panels in the game's colour, a lit marquee, the
   screen behind a black bezel with its score LEDs, and a control deck: an 8-way joystick, START / EXIT, round buttons. */
.ar-cab { position: relative; gap: 10px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 6%, transparent 94%, rgba(0, 0, 0, 0.35)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 14px, transparent 14px 28px),
    linear-gradient(color-mix(in srgb, var(--ar) 70%, #000), color-mix(in srgb, var(--ar) 40%, #05030a)); }
.ar-marquee { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px;
  min-height: 92px; padding: 10px 12px; border-radius: 14px; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 140% at 18% 50%, color-mix(in srgb, var(--ar) 60%, #fff) 0%, color-mix(in srgb, var(--ar) 70%, #000) 62%, #0a0614 100%);
  box-shadow: inset 0 0 0 3px #120a1c, inset 0 0 0 5px color-mix(in srgb, var(--ar) 40%, #ffd84a), inset 0 -12px 20px rgba(0, 0, 0, 0.4),
    0 0 24px color-mix(in srgb, var(--ar) 55%, transparent), 0 4px 0 #000; }
/* the marquee's glass catching the light, swept across now and then (a transform, so it never repaints the sign) */
.ar-marquee::after { content: ''; position: absolute; inset: 0 -60%; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.2) 48%, rgba(255, 255, 255, 0.05) 52%, transparent 60%);
  transform: translateX(-70%); animation: armSheen 6s ease-in-out infinite; will-change: transform; }
@keyframes armSheen { 55%, 100% { transform: translateX(70%); } }
/* a sunburst turning behind the Pokémon */
.arm-rays { position: absolute; left: 46px; top: 50%; z-index: -1; width: 520px; height: 520px; margin: -260px 0 0 -260px; pointer-events: none;
  opacity: 0.22; animation: armSpin 30s linear infinite; will-change: transform; }
@keyframes armSpin { to { transform: rotate(1turn); } }
/* bulbs round the edge, two sets lit in turn so they chase */
.arm-bulbs { position: absolute; inset: 5px; z-index: 2; border-radius: 10px; padding: 5px; pointer-events: none;
  background: radial-gradient(circle, #fffbe0 0 1.6px, #ffd84a 2.2px, rgba(255, 200, 60, 0.35) 3px, transparent 4px) 0 0 / 14px 14px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: armBulb 0.9s steps(1) infinite; will-change: opacity; }
.arm-bulbs-b { background-position: 7px 7px; animation-delay: -0.45s; }
@keyframes armBulb { 50% { opacity: 0.15; } }
/* the game's Pokémon on a lit spot, bobbing, with a twinkle or two */
.arm-mon { position: relative; z-index: 1; width: 70px; height: 70px; display: grid; place-items: end center; }
.arm-mon img { position: relative; height: 66px; width: auto; max-width: 84px; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35)); animation: armBob 1.4s ease-in-out infinite; will-change: transform; }
@keyframes armBob { 50% { transform: translateY(-4px); } }
.arm-spot { position: absolute; left: 6px; right: 6px; bottom: 0; height: 14px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 220, 0.75), rgba(255, 230, 120, 0.25) 60%, transparent); }
.arm-twinkle { position: absolute; right: 4px; top: 6px; width: 12px; height: 12px; pointer-events: none;
  background: conic-gradient(from 45deg, transparent 0 20%, #fff 25%, transparent 30% 45%, #fff 50%, transparent 55% 70%, #fff 75%, transparent 80% 95%, #fff);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent);
  animation: armTwinkle 2.2s ease-in-out infinite; will-change: transform, opacity; }
.arm-twinkle-b { left: 2px; right: auto; top: 24px; width: 9px; height: 9px; animation-delay: -1.1s; }
@keyframes armTwinkle { 0%, 100% { transform: scale(0.2) rotate(0deg); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
/* the name as an arcade logo: a small line over it on a ribbon, then the big name in gold, outlined and pressed out */
.arm-logo { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.arm-kick { max-width: 100%; padding: 2px 8px; border-radius: 4px; font-size: 12px; letter-spacing: 2px; line-height: 1.2; color: #fff;
  background: color-mix(in srgb, var(--ar) 55%, #000); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-marquee .vf-title.arm-name { position: relative; display: block; width: 100%; margin: 0; overflow: hidden;
  font-size: 22px; line-height: 1.25; letter-spacing: 1px; white-space: nowrap; padding: 0 3px 5px;
  color: color-mix(in srgb, var(--ar) 35%, #1a0a10); -webkit-text-stroke: 4px color-mix(in srgb, var(--ar) 35%, #1a0a10); paint-order: stroke fill;
  text-shadow: 0 1px 0 #1a0a10, 0 2px 0 #1a0a10, 0 3px 0 #1a0a10, 0 4px 0 #1a0a10, 0 0 14px color-mix(in srgb, var(--ar) 70%, #fff); }
.ar-marquee .vf-title.arm-name::after { content: attr(data-text); position: absolute; inset: 0; padding: inherit; pointer-events: none;
  -webkit-text-stroke: 0; text-shadow: none; color: transparent;
  background: linear-gradient(180deg, #fffbe0 0%, #ffe470 38%, #ffae2c 55%, #ffd84a 78%, #fff3b0 100%);
  -webkit-background-clip: text; background-clip: text; }
.arm-logo .ar-free { padding: 2px 9px 2px 7px; }
.arm-keys { position: relative; z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.arm-keys .cg-help-key { margin: 0; }
.cg-overlay.ar .ar-marquee { flex: none; }
html.calm-fx .ar-marquee::after, html.calm-fx .arm-rays, html.calm-fx .arm-bulbs, html.calm-fx .arm-mon img, html.calm-fx .arm-twinkle { animation: none; }
html.calm-fx .arm-twinkle { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ar-marquee::after, .arm-rays, .arm-bulbs, .arm-mon img, .arm-twinkle { animation: none; } .arm-twinkle { opacity: 0; } }
@media (max-height: 700px) { .ar-marquee { min-height: 76px; padding: 6px 10px; } .arm-mon { width: 56px; height: 56px; } .arm-mon img { height: 52px; } .ar-marquee .vf-title.arm-name { font-size: 18px; } }
.ar-bezel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px;
  background: linear-gradient(#1a1622, #07050c);
  box-shadow: inset 0 0 0 2px #2c2636, inset 0 4px 10px rgba(0, 0, 0, 0.8), 0 2px 0 rgba(255, 255, 255, 0.12), 0 6px 16px rgba(0, 0, 0, 0.5); }
.ar-bezel > .ar-leds { flex: none; }
.ar-bezel > .ar-stage { flex: 1 1 0; min-height: 0; }
.ar-leds .vf-meter { flex-direction: row; justify-content: space-between; padding: 4px 10px; border-radius: 6px; background: #0a0306;
  box-shadow: inset 0 0 0 1px #3a1018, inset 0 2px 6px #000; }
.ar-leds .vf-meter span { color: #ff7a6a; opacity: 0.8; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.ar-leds .vf-meter b { color: #ff5a4a; font-size: 17px; text-shadow: 0 0 6px rgba(255, 70, 50, 0.8); }
.ar-cab .ar-canvas { border-radius: 10px; box-shadow: 0 0 0 2px #000, 0 0 18px color-mix(in srgb, var(--ar) 40%, transparent); }
.ar-stage { position: relative; }
.ar-deck { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px 16px 14px;
  border-radius: 16px 16px 20px 20px;
  background:
    radial-gradient(circle at 12px 12px, #c8c0d0 0 2.5px, #4a4452 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 12px, #c8c0d0 0 2.5px, #4a4452 3px, transparent 4px),
    linear-gradient(#3a3444, #1c1824 55%, #120f18);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 2px color-mix(in srgb, var(--ar) 50%, #000), 0 6px 0 #05030a, 0 10px 18px rgba(0, 0, 0, 0.5); }
.ar-stick { --sx: 0px; --sy: 0px; --size: 104px; position: relative; justify-self: start; width: var(--size); height: var(--size);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.ar-stick-gate { position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle, #050308 0 30%, #2a2632 32%, #121016 62%, #3c3846 64%, #1a1720 70%);
  box-shadow: 0 0 0 3px #0a080e, 0 3px 0 #000, inset 0 2px 4px rgba(255, 255, 255, 0.15); }
.ar-shaft { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f0ecf4, #6a6672 70%);
  transform: translate(calc(-50% + var(--sx) / 2), calc(-50% + var(--sy) / 2)); transition: transform 0.08s ease-out; }
.ar-stick.held .ar-shaft { transition: none; }
.ar-knob { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; border-radius: 50%;
  transform: translate(calc(-50% + var(--sx)), calc(-58% + var(--sy)));
  background: radial-gradient(circle at 35% 30%, #fff 0 6%, #ff8a7a 14%, #e8322a 50%, #8a1210 100%);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), 0 8px 10px rgba(0, 0, 0, 0.5), inset 0 -4px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.08s ease-out; }
.ar-stick.held .ar-knob { transition: none; }
.ar-sys { display: flex; flex-direction: column; gap: 6px; align-items: center; }
/* START / EXIT: a Neo Geo's small round buttons, the name engraved under each */
.ar-dot-box { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; }
.vf-key.ar-dot { --c: #f0c020; flex: none; width: 34px; height: 34px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--c) 35%, #fff) 0 16%, var(--c) 55%, color-mix(in srgb, var(--c) 55%, #000) 100%);
  box-shadow: 0 0 0 3px #0c0a10, 0 0 0 5px #3a3644, 0 4px 0 3px #05030a, inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  touch-action: manipulation; animation: none; transition: transform 0.05s; }
.vf-key.ar-dot.ar-exit { --c: #e8423a; }
.vf-key.ar-dot:active { transform: translateY(3px); box-shadow: 0 0 0 3px #0c0a10, 0 0 0 5px #3a3644, 0 1px 0 3px #05030a, 0 0 12px var(--c); }
.ar-dot-label { font-size: 12px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: #c8c2d4;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); }
.ar-btns { justify-self: end; display: flex; gap: 12px; align-items: flex-end; }
.ar-btn { --c: #e8423a; position: relative; width: 82px; height: 82px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  background: radial-gradient(circle, #0c0a10 0 62%, #3a3644 64%, #16131c 72%);
  box-shadow: 0 3px 0 #000, inset 0 2px 3px rgba(255, 255, 255, 0.12); }
.ar-btn + .ar-btn { --c: #3a8ae8; }
.ar-btn-cap { position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c) 30%, #fff) 0 18%, var(--c) 55%, color-mix(in srgb, var(--c) 55%, #000) 100%);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 45%, #000), 0 9px 10px rgba(0, 0, 0, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.25);
  transform: translateY(-6px); transition: transform 0.05s, box-shadow 0.05s; }
.ar-btn.down .ar-btn-cap, .ar-btn:active .ar-btn-cap { transform: translateY(-1px);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 45%, #000), 0 0 16px var(--c), inset 0 -2px 4px rgba(0, 0, 0, 0.25); }
.ar-btn-label { position: absolute; inset: 0; display: grid; place-items: center; transform: translateY(-6px); pointer-events: none;
  color: #fff; font-size: 13px; font-weight: 900; letter-spacing: 1.5px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); }
.ar-btn.down .ar-btn-label { transform: translateY(-1px); }
.ar-pad-jump { --c: #f0c020; }
.ar-pad-jump .ar-btn-label { color: #3a2a00; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.ar-say { padding: 6px 10px; font-size: 13px; background: #0e1a10; color: #9cff9c; font-family: ui-monospace, monospace;
  text-shadow: 0 0 6px rgba(120, 255, 120, 0.5); box-shadow: inset 0 0 0 1px #1e3a20, inset 0 2px 6px #000; }
/* Held arrow buttons for the thumbs (`keys` in js/arcade-kit.js): two side by side, or up and down stacked. */
.ar-arrows { display: flex; gap: 10px; align-items: center; }
.ar-arrows.ar-col { flex-direction: column; gap: 6px; }
.ar-deck > .ar-arrows:first-child { justify-self: start; }
.ar-btn.ar-arrow { --c: #4a8ae8; width: 84px; height: 84px; }
.ar-arrows.ar-col .ar-arrow { width: 72px; height: 72px; }
.ar-arrow .ar-btn-label { font-size: 26px; letter-spacing: 0; }
.ar-pad-fire { --c: #f0b020; }
.ar-pad-fire .ar-btn-label { color: #3a2a00; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
/* While a game runs the cabinet's lights hold still: their repaints every frame cost the game its frame rate on phones */
.ar-cab.playing .ar-start, .ar-cab.playing .ar-free::before { animation: none; }
/* the marquee too: its masked bulbs and spinning sunburst were repainted every frame by Safari, dropping the game's fps on an iPhone */
.ar-cab.playing .ar-marquee::after, .ar-cab.playing .arm-rays, .ar-cab.playing .arm-bulbs, .ar-cab.playing .arm-mon img, .ar-cab.playing .arm-twinkle { animation-play-state: paused; }
.ar-stage, .ar-deck, .ar-marquee { contain: layout paint; }
.ar-say { min-height: calc(2.7em + 12px); }
@media (max-height: 700px) { .ar-btn.ar-arrow { width: 68px; height: 68px; } .ar-arrows.ar-col .ar-arrow { width: 58px; height: 58px; } }
@media (max-height: 700px) { .ar-stick { --size: 86px; } .ar-btn { width: 68px; height: 68px; } .ar-deck { padding: 8px 12px 10px; } }

/* The cabinet's head: its name on the marquee and an LED "Free play" pill */
.ar-panel .vf-title { flex: 1 1 auto; min-width: 0; font-size: 18px; line-height: 1.15; letter-spacing: 1.5px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 12px color-mix(in srgb, var(--ar) 60%, #fff); }
.ar-free { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 10px 4px 8px; border-radius: 99px;
  background: #120a1c; color: #ffd84a; font-size: 12px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
  text-shadow: 0 0 6px rgba(255, 200, 60, 0.75);
  box-shadow: inset 0 0 0 1.5px rgba(255, 216, 74, 0.45), inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.2); }
.ar-free::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #6aff8a;
  box-shadow: 0 0 6px #6aff8a, 0 0 2px #fff inset; animation: arLed 1.6s ease-in-out infinite; }
@keyframes arLed { 50% { opacity: 0.35; box-shadow: none; } }
html.calm-fx .ar-free::before { animation: none; }

/* A cabinet's How to play: an attract screen with the game itself running, then the steps as numbered tiles */
.ar-help { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px; color: rgba(240, 236, 255, 0.85);
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--ar) 38%, #1a1430), #0e0a1c 75%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ar) 55%, transparent), 0 0 18px color-mix(in srgb, var(--ar) 30%, transparent); }
.ar-help-title { text-align: center; font-size: 15px; letter-spacing: 4px; color: #fff;
  text-shadow: 0 0 6px var(--ar), 0 0 14px var(--ar); }
.ar-help-screen { position: relative; align-self: center; padding: 6px; border-radius: 12px; background: #050308;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar) 70%, #000), 0 6px 16px rgba(0, 0, 0, 0.5); }
.ar-help-screen::after { content: ''; position: absolute; inset: 6px; border-radius: 8px; pointer-events: none;
  background: repeating-linear-gradient(rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.35)); }
.ar-help .ar-help-cv { width: auto; border-radius: 8px; box-shadow: none; pointer-events: none; }
.ar-help-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ar-help-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.35; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ar-help-steps b { display: block; margin-bottom: 2px; color: #fff; font-size: 13.5px; }
.ar-step-no { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; font-size: 15px; color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--ar) 55%, #fff), var(--ar) 60%, color-mix(in srgb, var(--ar) 70%, #000));
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 0 10px color-mix(in srgb, var(--ar) 65%, transparent), inset 0 -2px 0 rgba(0, 0, 0, 0.25); }
.ar-help .vf-go { margin-top: 2px; }
/* on a wide screen it stands as a cabinet's width in the middle, not a line of text across a monitor */
.ar-help-cab > * { width: 100%; max-width: 560px; margin-inline: auto; }
.ar-board-key { font-size: 15px; background: linear-gradient(#fff4b0, #ffd84a); }

/* The Game Corner guide, the little PC on Meowth's counter (js/corner-guide.js) */
.gd-panel { background: linear-gradient(#3a2068, #241044); gap: 12px; }
.gd-sec { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 0 0 2px rgba(255, 216, 74, 0.25); }
.gd-h { margin: 0; font-size: 15px; letter-spacing: 1px; color: #ffd84a; }
.gd-p { margin: 0; font-size: 14px; line-height: 1.45; color: #fffbea; }
.gd-bar { position: relative; height: 24px; border-radius: 99px; overflow: hidden; background: #140828; box-shadow: inset 0 0 0 2px #ffd84a; }
.gd-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffb000, #ffe070); }
.gd-bar b { position: relative; display: grid; place-items: center; height: 100%; font-size: 13px; color: #fff; text-shadow: 0 1px 2px #000; }
.gd-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.gd-row { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); font-size: 13px; }
.gd-name { font-weight: 800; color: #fff; }
.gd-plays { grid-column: 1; opacity: 0.8; }
.gd-row.done { background: rgba(120, 255, 160, 0.08); }
.gd-row.done .gd-name { color: #c8ffb8; }
.gd-won { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #c8ffb8; font-weight: 800; }
/* A swipe game's deck (`swipe: true`): a faint engraved "swipe to play" with a fingertip gliding along it, then START and
   EXIT side by side. */
.ar-deck.ar-deck-swipe { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 10px 16px 12px; }
.ar-swipe { position: relative; width: 170px; height: 32px; pointer-events: none; }
.ar-swipe-track { position: absolute; left: 14px; right: 14px; top: 7px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ar) 55%, #fff) 50%, transparent); opacity: 0.35; }
.ar-swipe-dot { position: absolute; top: 3px; left: 14px; width: 10px; height: 10px; border-radius: 50%;
  background: color-mix(in srgb, var(--ar) 40%, #fff); box-shadow: 0 0 8px color-mix(in srgb, var(--ar) 70%, transparent);
  opacity: 0; animation: arSwipe 2.6s ease-in-out infinite; }
@keyframes arSwipe { 0% { transform: translateX(0) scale(0.6); opacity: 0; } 15% { opacity: 0.75; transform: translateX(0) scale(1); }
  60% { transform: translateX(112px) scale(1); opacity: 0.75; } 75%, 100% { transform: translateX(112px) scale(0.6); opacity: 0; } }
.ar-swipe-text { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 12px; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase; color: #8a8496; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 -1px 0 rgba(255, 255, 255, 0.08); }
.ar-cab.playing .ar-swipe-dot, html.calm-fx .ar-swipe-dot { animation: none; opacity: 0.5; left: calc(50% - 5px); }
.ar-pills { display: flex; gap: 32px; }