/* ==========================================================================
   pf-arcade.css - the "Arcade" portfolio template, public pages.
   Ported from docs/Youssef_Portfolio_FINAL.html (its main <style> block). EVERY rule is scoped under .pf-arcade so nothing leaks
   into the other templates or the rest of the site (Bootstrap is global). Every generic class carries an ar- prefix (ar-tag,
   ar-panel, ar-toast, ar-btn, ar-chip, ar-card, ...: Bootstrap owns .toast, .card, .panel-like names); keyframes are ar- prefixed.
   The prototype's ids are ar- prefixed too (#cv -> #ar-cv, #bg -> #ar-bg, #toast -> #ar-toast, #rt -> #ar-rt, #dm -> #ar-dm,
   #rm -> #ar-rm, #cn -> #ar-cn, #cc2 -> #ar-cans), so they can never meet an id of the site.

   Wrapper (written by _PortfolioArcade / _ProjectArcade in Steps 3a / 3b, attributes from Helpers/ArcadeHtml):
     <div class="pf-page pf-arcade" data-pf-template="arcade" data-theme="teal|pink|gold|violet|custom" data-mode="dark|light"
          data-view="read|game" style="--ink:..;--cream:..;--teal:..;--pink:..;--gold:..;--card:..;--mut:..;--line:..;--on:..;
          --shelf:..;--dk-bg:..;--dk-body:..;--dk-chip:.."> <partial _ArcadeLayers /> ... </div>

   The prototype switches state with classes on <html> (dark, read, pjs, tx). Here the state lives on the WRAPPER, never on <html>:
     data-mode  dark | light   (dark is the default; the visitor's choice is "hf-dark" in localStorage, "1" dark, "0" light)
     data-view  read | game    (game = the canvas side-scroller; read = the page)
     .ar-tx     present for 1 s after a mode change (the colors cross-fade)         .ar-gl  the Pepsi hue-rotate on .ar-read
   Tokens live on the WRAPPER, never on :root: the 13 inline variables come from PortfolioPaletteRules.ResolveArcade for every look
   (presets and Custom). The values below are only the Teal fallback. The prototype's names are kept, so in the Pink preset --teal
   holds pink (it is a ROLE): --teal Primary (focus ring, nav underline, chips, active tabs), --pink Secondary (heading highlighter,
   link underline), --gold Tertiary (buttons, toast). --on is the text color on those accents (the Moon rule; the prototype used --ink).
   On top of those, the mode tokens below (--ar-*) say what each surface uses in the current mode, so a rule is written once.

   Script contract (Steps 2b / 2c / 2d): ids ar-bg ar-rt; game page only ar-cv ar-ui ar-cn ar-cans ar-dm ar-rm ar-toast ar-hint
   ar-panel ar-bl ar-br ar-bd ar-bj; classes .ar-on (toast / panel / read toast shown) .ar-off (hint hidden) .ar-tx .ar-gl;
   attributes data-ar-game, data-ar="toggle" | "read". The read content of a page carries the class .ar-read (3a).

   Step 2a (this file): tokens, page frame, view switch, the fixed layers (sky canvas, game canvas, read toast, game overlay:
   HUD tags, panel, toast, hint, touch pad), the sun / moon toggle, shared atoms (buttons, chips, cards, section title, grid),
   mode cross-fade, responsive and reduced motion.
   Step 3a (added above the Step 2d block): nav, banner + sun / moon sky, hero, player card + stat bars, ticker, About + path,
   skills, project cards + filter, loadout, how I tick, contact, footer.
   Step 3b (added above the reduced-motion block): the project page (cartridge shelf, console screen, tabs).
   Step 2d (added above the reduced-motion block): the Dev mode dock, command palette, flick trainer and wipe screen.
   ========================================================================== */

@keyframes ar-hue { to { filter: hue-rotate(360deg); } }

/* ---------- tokens: Teal fallback (the real colors come inline from the server) ---------- */
.pf-arcade {
    --ink: #14102e;
    --cream: #fff4e0;
    --teal: #2de2c6;
    --pink: #ff6f91;
    --gold: #ffd23f;
    --card: #ffffff;
    --mut: #5b5870;
    --line: #14102e;
    --on: #14102e;
    --shelf: #e3d6bd;
    --dk-bg: #0d0a22;
    --dk-body: #1e1850;
    --dk-chip: #2a2266;
    --px: 'Press Start 2P', monospace;
    --body: 'Space Grotesk', system-ui, sans-serif;

    /* mode tokens, LIGHT (the prototype's base rules) */
    --ar-bg: var(--cream);                         /* the page */
    --ar-fg: var(--ink);                           /* text */
    --ar-mut: var(--mut);                          /* secondary text */
    --ar-surf: var(--card);                        /* card / panel body */
    --ar-ui: var(--cream);                         /* game tags, panel, touch buttons */
    --ar-chip: var(--cream);                       /* chips, alt buttons, filter buttons */
    --ar-edge: var(--line);                        /* 3-4 px borders */
    --ar-sh: var(--line);                          /* hard shadow */
    --ar-hov: var(--line);                         /* card / button shadow on hover */
    --ar-psh: var(--line);                         /* game panel shadow */
    --ar-hovbg: var(--gold);                       /* hovered game tag */
    --ar-hovfg: var(--on);
    --ar-ul: var(--pink);                          /* link underline */
    --ar-hl: var(--pink);                          /* heading highlighter */
    --ar-dash: color-mix(in srgb, var(--ink) 25%, transparent);
    color-scheme: light;
}
/* DARK (the prototype's html.dark rules): dark surfaces, cream borders, black hard shadows, teal hover shadows */
.pf-arcade[data-mode="dark"] {
    --ar-bg: var(--dk-bg);
    --ar-fg: var(--cream);
    --ar-mut: color-mix(in srgb, var(--cream) 72%, transparent);
    --ar-surf: var(--dk-body);
    --ar-ui: var(--dk-body);
    --ar-chip: var(--dk-chip);
    --ar-edge: var(--cream);
    --ar-sh: #000;
    --ar-hov: var(--teal);
    --ar-psh: var(--teal);
    --ar-hovbg: var(--teal);
    --ar-hovfg: var(--on);
    --ar-ul: var(--teal);
    --ar-hl: color-mix(in srgb, var(--pink) 50%, transparent);
    --ar-dash: color-mix(in srgb, var(--cream) 25%, transparent);
    color-scheme: dark;
}

/* ---------- page frame ---------- */
/* Full-bleed (escape the layout container) and the site body painted in the template color so no other-colored strip shows
   around the page. The body cannot read the wrapper's variables, hence the literal Teal dark page color here; every rendered page
   also writes more specific body rules with its own colors (ArcadeHtml.BodyStyle: dark page, and the cream paper while the
   wrapper says light). overflow-x: clip (NOT hidden) keeps the sticky nav working. Smooth scrolling is scoped to these pages only. */
body:has(.pf-arcade) { background: #0d0a22; overflow-x: clip; transition: background .4s; }
body:has(.pf-arcade[data-mode="light"]) { background: #fff4e0; }
html:has(.pf-arcade) { scroll-behavior: smooth; scroll-padding-top: 72px; }
/* game view: the page does not scroll under the canvas */
body:has(.pf-arcade[data-view="game"]) { overflow: hidden; touch-action: manipulation; }
html:has(.pf-arcade[data-view="game"]) { scroll-behavior: auto; }

.pf-arcade {
    position: relative; isolation: isolate;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw;
    min-height: 100vh;
    padding-top: env(safe-area-inset-top, 0px);
    background-color: var(--ar-bg);
    color: var(--ar-fg);
    font: 16px/1.5 var(--body);
    overflow-x: clip;
    text-align: start;
    -webkit-font-smoothing: antialiased;
}
.pf-arcade *, .pf-arcade *::before, .pf-arcade *::after { box-sizing: border-box; }
.pf-arcade a { color: inherit; }
.pf-arcade button { font: inherit; color: inherit; }
.pf-arcade :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.pf-arcade h1, .pf-arcade h2, .pf-arcade h3, .pf-arcade p { margin: 0; }

/* the page content (3a): above the sky, hidden from sight, tab order and screen readers while the game is shown.
   visibility (not display) keeps the layout, so the scroll position is still there when the visitor comes back. */
.pf-arcade .ar-read { position: relative; z-index: 1; color: var(--ar-fg); min-height: 100%; }
.pf-arcade[data-view="game"] .ar-read { visibility: hidden; }
.pf-arcade .ar-read.ar-gl { animation: ar-hue 1.05s linear 4; }     /* the Pepsi Man glow (arcade-read.js) */

/* ---------- fixed layers (no ancestor may have transform / filter / backdrop-filter) ---------- */
/* the read-view sky (drawn by arcade-read.js), behind the page content */
.pf-arcade .ar-bg { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pf-arcade[data-view="game"] .ar-bg { display: none; }

/* the game canvas and its overlay exist only on the portfolio page, and only show in game view */
.pf-arcade .ar-cv { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; display: none; }
.pf-arcade[data-view="game"] .ar-cv { display: block; }
.pf-arcade .ar-ui { position: fixed; inset: 0; z-index: 45; display: none; pointer-events: none; }
.pf-arcade[data-view="game"] .ar-ui { display: block; }
.pf-arcade .ar-ui > * { pointer-events: auto; }

/* the read-view toast (coins, Pepsi Man, Konami): hidden in game view, where .ar-toast is used */
.pf-arcade .ar-rt {
    position: fixed; z-index: 60; top: calc(70px + env(safe-area-inset-top, 0px)); left: 50%;
    transform: translate(-50%, -20px); opacity: 0; pointer-events: none;
    max-width: calc(100% - 28px); text-align: center; font-weight: 700;
    background: var(--gold); color: var(--on); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 10px 14px;
    transition: .3s;
}
.pf-arcade .ar-rt.ar-on { opacity: 1; transform: translate(-50%, 0); }
.pf-arcade[data-view="game"] .ar-rt { display: none; }

/* ---------- game overlay: HUD tags, the sun / moon toggle, panel, toast, hint, touch pad ---------- */
.pf-arcade .ar-hud {
    position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; right: 14px;
    display: flex; justify-content: space-between; align-items: center; gap: 10px; pointer-events: none;
}
.pf-arcade .ar-hud > * { pointer-events: auto; }
.pf-arcade .ar-hud-row { display: flex; gap: 10px; }
.pf-arcade .ar-tag {
    font: 10px/1.3 var(--px); background: var(--ar-ui); color: var(--ar-fg);
    border: 3px solid var(--ar-edge); box-shadow: 4px 4px 0 var(--ar-sh); padding: 10px 12px;
}
.pf-arcade button.ar-tag { cursor: pointer; }
.pf-arcade button.ar-tag:hover { background: var(--ar-hovbg); color: var(--ar-hovfg); }

/* the toggle: a pixel tag with the sun and the moon swapping places (a button drawn for this template, owner answer Q-D) */
.pf-arcade .ar-tg { position: relative; width: 46px; height: 40px; padding: 0; overflow: hidden; display: inline-block; }
.pf-arcade .ar-tg svg {
    position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
    transition: transform .7s cubic-bezier(.5, -.5, .3, 1.5), opacity .35s;
}
.pf-arcade .ar-tg .is { fill: var(--gold); }
.pf-arcade[data-mode="dark"] .ar-tg .is { transform: translateY(36px) rotate(140deg); opacity: 0; }
.pf-arcade[data-mode="light"] .ar-tg .im { transform: translateY(-36px) rotate(-140deg); opacity: 0; }

.pf-arcade .ar-panel {
    position: absolute; left: 50%; top: calc(66px + env(safe-area-inset-top, 0px));
    max-height: calc(100% - 200px); overflow: auto; width: min(620px, calc(100% - 28px));
    background: var(--ar-ui); color: var(--ar-fg); border: 4px solid var(--ar-edge); box-shadow: 8px 8px 0 var(--ar-psh);
    padding: 20px 22px; transform: translate(-50%, -30px); opacity: 0; transition: .3s; pointer-events: none;
}
.pf-arcade .ar-panel.ar-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.pf-arcade .ar-panel h2 { font: clamp(12px, 2.4vw, 16px)/1.4 var(--px); margin: 0 0 12px; }
.pf-arcade .ar-panel p { margin: 0 0 8px; }
.pf-arcade .ar-panel ul { margin: 0; padding: 0; list-style: none; }
.pf-arcade .ar-panel li { padding: 7px 0; border-top: 2px dashed var(--ar-dash); }
.pf-arcade .ar-panel li:first-child { border-top: 0; }
.pf-arcade .ar-panel a { font-weight: 700; text-decoration-thickness: 3px; text-decoration-color: var(--ar-ul); }

.pf-arcade .ar-toast {
    position: absolute; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); left: 50%;
    transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    max-width: calc(100% - 28px); text-align: center; font-weight: 700;
    background: var(--gold); color: var(--on); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 10px 14px;
    transition: .3s;
}
.pf-arcade .ar-toast.ar-on { opacity: 1; transform: translate(-50%, 0); }

.pf-arcade .ar-hint {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -120px); text-align: center; pointer-events: none;
    font: 10px/2 var(--px); text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 var(--ink); transition: opacity .6s;
}
.pf-arcade .ar-hint.ar-off { opacity: 0; }

.pf-arcade .ar-pad {
    display: none; position: absolute; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 0 14px; justify-content: space-between; pointer-events: none;
}
.pf-arcade .ar-pad > div { display: flex; gap: 10px; pointer-events: auto; }
.pf-arcade .ar-pad button {
    width: 64px; height: 64px; font: 12px var(--px); touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
    background: var(--ar-ui); color: var(--ar-fg); border: 4px solid var(--ar-edge); box-shadow: 4px 4px 0 var(--ar-sh);
}
.pf-arcade .ar-pad button:active { background: var(--teal); color: var(--on); transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ar-sh); }

/* ---------- shared atoms (used by the portfolio page and the project page; 3a / 3b build on them) ---------- */
.pf-arcade .ar-w { max-width: 1040px; margin: 0 auto; padding: 0 22px; }

.pf-arcade .ar-btn {
    display: inline-block; font: 11px/1.4 var(--px); padding: 14px 16px; text-decoration: none; cursor: pointer;
    background: var(--gold); color: var(--on); border: 4px solid var(--ar-edge); box-shadow: 5px 5px 0 var(--ar-sh);
    transition: transform .15s, box-shadow .15s;
}
.pf-arcade .ar-btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ar-hov); }
.pf-arcade .ar-btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ar-sh); }
.pf-arcade .ar-btn.ar-alt { background: var(--ar-chip); color: var(--ar-fg); }
.pf-arcade .ar-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.pf-arcade .ar-chip {
    display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 9px;
    background: var(--ar-chip); color: var(--ar-fg); border: 2px solid var(--ar-edge);
}
.pf-arcade .ar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.pf-arcade .ar-card {
    background: var(--ar-surf); color: var(--ar-fg); border: 4px solid var(--ar-edge); box-shadow: 6px 6px 0 var(--ar-sh);
    padding: 20px; transition: transform .15s, box-shadow .15s;
}
.pf-arcade .ar-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ar-hov); }
.pf-arcade .ar-card h3 { font: 12px/1.6 var(--px); margin: 0 0 10px; }

.pf-arcade .ar-h2 {
    font: clamp(14px, 3vw, 22px)/1.5 var(--px); margin: 0 0 34px; display: inline-block;
    background: linear-gradient(transparent 62%, var(--ar-hl) 62%);
}
.pf-arcade .ar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }

/* ---------- light / dark cross-fade (the class is on the wrapper for 1 s after a change; arcade-read.js) ---------- */
.pf-arcade.ar-tx, .pf-arcade.ar-tx * { transition: background-color .7s, color .7s, border-color .7s, box-shadow .7s; }

/* ---------- responsive ---------- */
@media (pointer: coarse) {
    .pf-arcade .ar-pad { display: flex; }
    .pf-arcade .ar-toast { bottom: 96px; }
    .pf-arcade .ar-hint .ar-k { display: none; }
}
@media (max-width: 560px) {
    .pf-arcade .ar-w { padding: 0 16px; }
    .pf-arcade .ar-hud { left: 10px; right: 10px; }
    .pf-arcade .ar-tag { padding: 9px 9px; }
    .pf-arcade .ar-tg { padding: 0; }
}

/* ---------- Step 3a: the portfolio page, read mode + the cartridge shelf (_PortfolioArcade, _ArcadeBanner, _ArcadeShelf) ----------
   Ported from the prototype's read-view rules, with the prototype's html.dark rules folded into the mode tokens above. The nav is always
   an ink bar with a cream label (both modes, as the prototype). Cards, chips and buttons use the shared atoms. Everything is scoped
   under .pf-arcade. The cartridge shelf is shared with the project page (Step 3b). */
@keyframes ar-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes ar-pu { 0% { box-shadow: 0 0 0 0 rgba(88, 214, 141, .7); } 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes ar-tk { to { transform: translateX(-50%); } }
@keyframes ar-run { from { transform: translateX(-80px); } to { transform: translateX(900px); } }
@keyframes ar-hop { 50% { transform: translateY(-70px); } }

/* sticky nav */
.pf-arcade .ar-rn { position: sticky; top: 0; z-index: 30; background: var(--ink); color: var(--cream); border-bottom: 4px solid var(--teal); }
.pf-arcade[data-mode="dark"] .ar-rn { border-bottom-color: var(--pink); }
.pf-arcade .ar-rn .ar-w { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; max-width: min(1400px, 100%); }
.pf-arcade .ar-sig { font: 11px/1.4 var(--px); color: var(--cream); text-decoration: none; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.pf-arcade .ar-rn nav, .pf-arcade .ar-nav-gap { display: flex; gap: 2px; overflow-x: auto; min-width: 0; flex: 1; justify-content: center; scrollbar-width: none; -ms-overflow-style: none; }
.pf-arcade .ar-rn nav::-webkit-scrollbar { display: none; }
.pf-arcade .ar-rn nav a { font-size: 14px; font-weight: 700; padding: 6px 8px; flex: none; text-decoration: none; white-space: nowrap; color: var(--cream); }
.pf-arcade .ar-rn nav a:hover { background: var(--teal); color: var(--on); }
.pf-arcade .ar-rn .ar-btn { flex: none; padding: 8px 10px; border-width: 3px; border-color: var(--cream); box-shadow: 3px 3px 0 var(--teal); }
.pf-arcade .ar-rn .ar-btn:hover { box-shadow: 5px 5px 0 var(--teal); }
.pf-arcade .ar-rn .ar-tg { width: 46px; height: 40px; padding: 0; }
.pf-arcade .ar-cc { font: 10px var(--px); color: var(--gold); white-space: nowrap; flex: none; }
.pf-arcade .ar-draft {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 22px; background: var(--gold); color: var(--on); border-bottom: 3px solid var(--ink); font-weight: 700;
}
.pf-arcade .ar-draft form { margin: 0; }
.pf-arcade .ar-sm { padding: 8px 10px; font-size: 10px; }

/* banner: the pixel skyline; the sun and the moon swap with the mode (the prototype's .sunG / .moonG / .bs1 / .bs2 / .bst) */
.pf-arcade .ar-bn { display: block; width: 100%; height: clamp(180px, 28vw, 300px); cursor: default; }
.pf-arcade .ar-bn .bs1 { stop-color: #1a1147; transition: stop-color 1s; }
.pf-arcade .ar-bn .bs2 { stop-color: var(--pink); transition: stop-color 1s; }
.pf-arcade[data-mode="light"] .ar-bn .bs1 { stop-color: #6fa8ff; }
.pf-arcade[data-mode="light"] .ar-bn .bs2 { stop-color: #ffe3a8; }
.pf-arcade .ar-bn .bst { transition: opacity 1s; }
.pf-arcade[data-mode="light"] .ar-bn .bst { opacity: 0; }
.pf-arcade .ar-bn .sunG, .pf-arcade .ar-bn .moonG { transition: transform 1s cubic-bezier(.4, 0, .2, 1); }
.pf-arcade[data-mode="dark"] .ar-bn .sunG { transform: translateY(120px); }
.pf-arcade[data-mode="light"] .ar-bn .moonG { transform: translateY(120px); }
.pf-arcade .ar-bn .nj { animation: ar-run 7s linear infinite; }
.pf-arcade .ar-bn .jp.on { animation: ar-hop .5s ease-out; }

/* hero + player card */
.pf-arcade .ar-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; align-items: start; }
.pf-arcade .ar-two > * { min-width: 0; }
.pf-arcade .ar-hero { padding-top: 34px; padding-bottom: 70px; }
.pf-arcade .ar-hero h1 { font: clamp(26px, 7vw, 64px)/1.1 var(--px); margin: 0 0 16px; overflow-wrap: anywhere; }
.pf-arcade .ar-eyebrow { font: 10px/1.6 var(--px); color: var(--ar-mut); margin: 0 0 14px; }
.pf-arcade .ar-lead { font-size: clamp(17px, 2.2vw, 22px); max-width: 32em; margin: 0 0 24px; }
.pf-arcade .ar-facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.pf-arcade .ar-facts span { font-weight: 700; background: var(--teal); color: var(--on); border: 3px solid var(--ar-edge); padding: 5px 12px; }
.pf-arcade .ar-pc small, .pf-arcade .ar-lo small {
    display: block; font: 9px/1.6 var(--px); margin-bottom: 10px;
    color: color-mix(in srgb, var(--pink) 60%, var(--ink));
}
.pf-arcade[data-mode="dark"] .ar-pc small, .pf-arcade[data-mode="dark"] .ar-lo small { color: color-mix(in srgb, var(--pink) 75%, #fff); }
.pf-arcade .ar-pc h3 { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; overflow-wrap: anywhere; }
.pf-arcade .ar-on-line { font: 700 13px var(--body); display: inline-flex; align-items: center; }
.pf-arcade .ar-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #58d68d; margin-right: 6px; animation: ar-pu 1.8s infinite; }
.pf-arcade .ar-lines { margin: 0 0 14px; line-height: 1.9; }
.pf-arcade .ar-line { display: block; overflow-wrap: anywhere; }
.pf-arcade .ar-st { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0; font-weight: 700; font-size: 14px; }
.pf-arcade .ar-pips { white-space: nowrap; }
.pf-arcade .ar-pips i { display: inline-block; width: 11px; height: 14px; border: 2px solid var(--ar-edge); margin-left: 2px; background: var(--ar-surf); }
.pf-arcade .ar-pips i.f { background: var(--teal); animation: ar-pop .35s both; animation-delay: calc(var(--i) * 70ms); }

/* ticker */
.pf-arcade .ar-tk { overflow: hidden; background: var(--ink); color: var(--cream); border-block: 4px solid var(--teal); padding: 12px 0; white-space: nowrap; font: 10px var(--px); }
.pf-arcade .ar-tk > div { display: inline-block; animation: ar-tk 34s linear infinite; }

/* sections */
.pf-arcade .ar-sec { padding: 80px 0; scroll-margin-top: 50px; }
.pf-arcade .ar-sec-sub { margin: -20px 0 26px; max-width: 40em; color: var(--ar-mut); }
.pf-arcade .ar-about p + p { margin-top: 12px; }
.pf-arcade .ar-tl { border-left: 4px solid var(--ar-edge); margin: 0; padding: 0 0 0 26px; list-style: none; }
.pf-arcade .ar-tl li { position: relative; padding: 0 0 22px; overflow-wrap: anywhere; }
.pf-arcade .ar-tl li::before { content: ""; position: absolute; left: -36px; top: 4px; width: 14px; height: 14px; background: var(--gold); border: 3px solid var(--ar-edge); }
.pf-arcade .ar-tl b { font: 10px/1.6 var(--px); display: block; margin-bottom: 4px; }
.pf-arcade .ar-card p { margin: 0; overflow-wrap: anywhere; }
.pf-arcade .ar-card h3 { overflow-wrap: anywhere; }

/* work: filter + project cards (the whole card is one stretched link to the project page) */
.pf-arcade .ar-fl { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; }
.pf-arcade .ar-fl button { font: 10px var(--px); padding: 10px 12px; border: 3px solid var(--ar-edge); background: var(--ar-surf); color: var(--ar-fg); cursor: pointer; }
.pf-arcade .ar-fl button[aria-pressed="true"] { background: var(--ar-fg); color: var(--ar-bg); }
.pf-arcade[data-mode="dark"] .ar-fl button[aria-pressed="true"] { background: var(--teal); color: var(--on); }
.pf-arcade .ar-pj { position: relative; }
.pf-arcade .ar-pj[hidden] { display: none; }
.pf-arcade .ar-pj h3 { margin-top: 2px; }
.pf-arcade .ar-pj p {
    margin-top: 2px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5;
    overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere;
}
.pf-arcade .ar-stretch { position: absolute; inset: 0; z-index: 1; }
.pf-arcade .ar-stretch:focus-visible { outline-offset: -6px; }
.pf-arcade .ar-cover {
    position: relative; overflow: hidden; height: 120px; margin: -20px -20px 16px; border-bottom: 4px solid var(--ar-edge);
    display: grid; place-items: center; font: 12px/1.5 var(--px); color: var(--on); text-align: center; text-transform: uppercase;
    background: repeating-linear-gradient(45deg, rgba(20, 16, 46, .08) 0 8px, transparent 8px 16px), linear-gradient(135deg, var(--c1), var(--c2));
}
.pf-arcade .ar-cover span { padding: 0 12px; overflow-wrap: anywhere; }
.pf-arcade .ar-c0 { --c1: var(--gold); --c2: var(--teal); }
.pf-arcade .ar-c1 { --c1: var(--pink); --c2: var(--gold); }
.pf-arcade .ar-c2 { --c1: var(--teal); --c2: var(--pink); }
.pf-arcade .ar-cover.has { background: var(--ar-chip); }
.pf-arcade .ar-cover .mp-img { object-fit: cover; }
.pf-arcade .ar-stt { display: inline-block; font: 9px/1.4 var(--px); padding: 4px 7px; border: 2px solid var(--ar-edge); margin: 0 6px 10px 0; background: var(--teal); color: var(--on); }
.pf-arcade .ar-stt.ar-pg { background: var(--gold); }
.pf-arcade .ar-more { margin-top: 26px; }

/* the cartridge shelf (shared with the project page, Step 3b) */
.pf-arcade .ar-shelf { display: flex; flex-wrap: wrap; gap: 44px 22px; justify-content: center; padding: 34px 10px 0; border-bottom: 10px solid var(--shelf); }
.pf-arcade[data-mode="dark"] .ar-shelf { border-bottom-color: var(--dk-chip); }   /* the prototype's dark shelf is #2a2266, not the light tan */
.pf-arcade .ar-ct {
    --c: var(--gold);
    position: relative; display: block; width: 132px; height: 156px; margin-bottom: 36px; color: #14102e; text-decoration: none;
    transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .4s;
}
.pf-arcade .ar-ct:nth-child(3n+2) { --c: var(--teal); }
.pf-arcade .ar-ct:nth-child(3n) { --c: var(--pink); }
.pf-arcade .ar-ct i { position: absolute; inset: 0; background: #cfc9e0; clip-path: polygon(0 12%, 12% 0, 88% 0, 100% 12%, 100% 100%, 0 100%); box-shadow: inset 0 -10px 0 #9c95b8; }
.pf-arcade .ar-ct u {
    position: absolute; left: 14px; right: 14px; top: 22px; height: 84px; overflow: hidden; background: var(--c); border: 3px solid #14102e;
    text-decoration: none; display: grid; place-items: center; padding: 6px; font: 9px/1.5 var(--px); text-align: center;
}
.pf-arcade .ar-ct u span { overflow-wrap: anywhere; }
.pf-arcade .ar-ct u.has { padding: 0; }
.pf-arcade .ar-ct s { position: absolute; left: 30px; right: 30px; bottom: 8px; height: 10px; text-decoration: none; background: repeating-linear-gradient(90deg, #c9a227 0 5px, transparent 5px 8px); }
.pf-arcade .ar-ct small { position: absolute; left: 0; right: 0; bottom: -30px; padding: 0 4px; text-align: center; font: 700 13px var(--body); color: var(--ar-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-arcade .ar-ct:hover, .pf-arcade .ar-ct:focus-visible { transform: translateY(-10px); }
.pf-arcade .ar-ct[aria-current="page"] { transform: translateY(-34px); opacity: .55; }
.pf-arcade .ar-shelf-note { margin-top: 22px; text-align: center; color: var(--ar-mut); }

/* contact (an ink band in both modes, as the prototype) */
.pf-arcade .ar-ct-sec { background: var(--ink); color: var(--cream); text-align: center; }
.pf-arcade .ar-ct-sec .ar-h2 { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--pink) 60%, transparent) 62%); }
.pf-arcade .ar-ct-lead { font-size: 20px; margin: 0 0 14px; }
.pf-arcade .ar-m { display: block; font: 800 clamp(22px, 5vw, 48px)/1.1 var(--body); color: var(--gold); margin: 0 0 30px; word-break: break-word; text-decoration: none; }
.pf-arcade .ar-m:hover { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 4px; }
.pf-arcade .ar-ct-sec .ar-btns { justify-content: center; }
.pf-arcade .ar-ct-sec .ar-btn { border-color: var(--cream); box-shadow: 5px 5px 0 var(--teal); }
.pf-arcade .ar-ct-sec .ar-btn.ar-alt { background: var(--dk-chip); color: var(--cream); }

.pf-arcade .ar-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 26px 22px; font: 9px/1.8 var(--px); background: var(--dk-bg); color: var(--cream); }
.pf-arcade .ar-foot a { color: inherit; margin-left: 14px; }

@media (max-width: 760px) {
    .pf-arcade .ar-two { grid-template-columns: 1fr; }
    .pf-arcade .ar-sec { padding: 56px 0; }
}
@media (max-width: 640px) {
    .pf-arcade .ar-rn .ar-w { flex-wrap: wrap; row-gap: 6px; }
    .pf-arcade .ar-rn nav, .pf-arcade .ar-nav-gap { order: 9; flex: 1 0 100%; }
    .pf-arcade .ar-sig { max-width: 38vw; margin-right: auto; }
}
/* ==========================================================================
   Step 3b: the project page (console screen, tabs, screenshot gallery, shelf under the console).
   The screen is always dark (a CRT), in both modes, as the prototype's #pj .scr. Panels show one under the other until
   arcade-project.js sets data-ar-ready on the console; the tab bar and the gallery bar stay [hidden] until then.
   ========================================================================== */
.pf-arcade .ar-pjp { min-height: 100vh; }
.pf-arcade .ar-pjh { padding-top: 26px; }
.pf-arcade .ar-back { display: inline-block; margin: 0 0 14px; font-weight: 700; color: var(--ar-fg); text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--ar-ul); text-underline-offset: 4px; }
.pf-arcade .ar-pjt { font: clamp(18px, 4.5vw, 32px)/1.4 var(--px); margin: 6px 0 10px; overflow-wrap: anywhere; }
.pf-arcade .ar-pjh .ar-lead { white-space: pre-line; overflow-wrap: anywhere; }

.pf-arcade .ar-con { background: var(--ar-surf); border: 4px solid var(--ar-edge); box-shadow: 8px 8px 0 #000; padding: 14px; margin: 0 0 30px; }
.pf-arcade .ar-slot { height: 12px; width: 46%; margin: 0 auto 12px; background: #000; border: 2px solid var(--ar-edge); }
.pf-arcade .ar-scr { position: relative; min-height: 360px; padding: 26px; overflow: hidden; color: #fff4e0; background: #08051a; border: 4px solid #000; }
.pf-arcade .ar-scr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .22) 2px 3px); }
.pf-arcade .ar-scr.ar-boot > .ar-pn { animation: ar-boot .55s steps(14) both; }
@keyframes ar-boot { 0% { clip-path: inset(48% 0); filter: brightness(3); } 100% { clip-path: inset(0); filter: none; } }

.pf-arcade .ar-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.pf-arcade .ar-tabs[hidden], .pf-arcade .ar-galbar[hidden] { display: none; }
.pf-arcade .ar-tabs button { font: 10px/1.4 var(--px); padding: 10px 12px; color: #fff4e0; background: transparent; border: 3px solid #fff4e0; cursor: pointer; }
.pf-arcade .ar-tabs button[aria-selected="true"] { background: var(--teal); color: var(--on); border-color: var(--teal); }
.pf-arcade .ar-tabs button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.pf-arcade .ar-pn { margin: 0 0 30px; }
.pf-arcade .ar-pn:last-child { margin-bottom: 0; }
.pf-arcade .ar-con[data-ar-ready] .ar-pn { display: none; margin-bottom: 0; }
.pf-arcade .ar-con[data-ar-ready] .ar-pn.ar-on { display: block; }
.pf-arcade .ar-con[data-ar-ready] .ar-nojs-h { display: none; }

.pf-arcade .ar-sh { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; }
.pf-arcade .ar-sh > div { min-width: 0; }
.pf-arcade .ar-sh p, .pf-arcade .ar-sh li { overflow-wrap: anywhere; }
.pf-arcade .ar-sh p { margin: 0 0 10px; }
.pf-arcade .ar-sh ul { margin: 0; padding-left: 1.1em; }
.pf-arcade .ar-sh li { margin-bottom: 6px; }
.pf-arcade .ar-h3 { font: 10px/1.6 var(--px); color: var(--teal); margin: 20px 0 8px; }
.pf-arcade .ar-sh > div > .ar-h3:first-child { margin-top: 0; }
.pf-arcade .ar-pills { margin: 0 0 14px; }
.pf-arcade .ar-pill { display: inline-block; font: 9px/1.4 var(--px); color: var(--on); background: var(--teal); padding: 5px 8px; margin: 0 6px 6px 0; overflow-wrap: anywhere; }
.pf-arcade .ar-pill.ar-gd { background: var(--gold); }
.pf-arcade .ar-pic { width: 100%; max-width: 360px; margin: 0 0 16px; border: 3px solid #fff4e0; background: #14102e; overflow: hidden; }
.pf-arcade .ar-pic img, .pf-arcade .ar-pic canvas, .pf-arcade .ar-pic svg { display: block; max-width: 100%; height: auto; }
.pf-arcade .ar-sts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; margin: 0 0 14px; }
.pf-arcade .ar-sts b { display: block; font: 22px/1.3 var(--px); color: var(--gold); overflow-wrap: anywhere; }
.pf-arcade .ar-sts span { font-size: 14px; overflow-wrap: anywhere; }
.pf-arcade .ar-by { font-size: 14px; opacity: .85; }
.pf-arcade .ar-by a { color: inherit; text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.pf-arcade .ar-ch { display: flex; flex-wrap: wrap; gap: 7px; }
.pf-arcade .ar-ch span { font-size: 13px; font-weight: 700; border: 2px solid #fff4e0; padding: 1px 8px; overflow-wrap: anywhere; }
.pf-arcade .ar-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pf-arcade .ar-go { display: inline-block; font: 10px/1.5 var(--px); color: var(--on); background: var(--gold); padding: 12px 14px; text-decoration: none; border: 3px solid #fff4e0; }
.pf-arcade .ar-go.ar-go2 { background: transparent; color: #fff4e0; }
.pf-arcade .ar-go:hover { background: var(--teal); color: var(--on); }
.pf-arcade .ar-go:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.pf-arcade .ar-fig { margin: 20px 0 0; }
.pf-arcade .ar-fig img { display: block; max-width: 100%; height: auto; border: 3px solid #fff4e0; background: #fff; }
.pf-arcade .ar-fig figcaption, .pf-arcade .ar-shot figcaption { font-size: 14px; margin-top: 8px; opacity: .85; overflow-wrap: anywhere; }

/* live media (the site's own _MediaEmbed, restyled): keep it inside the screen */
.pf-arcade .ar-media { max-width: 100%; overflow: hidden; }
.pf-arcade .ar-media video, .pf-arcade .ar-media iframe, .pf-arcade .ar-media model-viewer { max-width: 100%; }
.pf-arcade .ar-media a { color: var(--teal); }

/* Live game / video / 3D box: centered, and a real 16:9 frame. Before, no rule matched .case-embed-wrap, so the iframe
   stayed at the browser default (300 x 150) and sat on the left. Same box idea as the other templates. */
.pf-arcade .ar-media .hfe-media-stack { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.pf-arcade .ar-media .hfe-media-block { width: 100%; text-align: center; }
.pf-arcade .ar-media .case-label { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.pf-arcade .ar-media .case-embed-wrap {
    position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 760px; margin: 0 auto; overflow: hidden;
    background: #000; border: 4px solid #fff4e0; box-shadow: 5px 5px 0 var(--ar-sh);
}
.pf-arcade .ar-media .case-embed-wrap iframe, .pf-arcade .ar-media .case-embed-wrap video, .pf-arcade .ar-media .case-embed-wrap model-viewer {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; display: block;
}
.pf-arcade .ar-media .case-embed-wrap video { object-fit: contain; }
.pf-arcade .ar-media .case-embed-wrap:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; max-width: none; border: 0; box-shadow: none; }
.pf-arcade .ar-media .case-embed-wrap.hfe-media-placeholder { aspect-ratio: auto; min-height: 120px; padding: 16px; }

/* The buttons under it (Fullscreen, Play game, the download buttons): same pixel-button look as the other Arcade buttons,
   in one centered row that wraps on small screens. Primary (open the game) is gold; the rest are outlined. */
.pf-arcade .ar-media .hfe-media-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; }
.pf-arcade .ar-media .pf-btn {
    display: inline-block; font: 10px/1.5 var(--px); letter-spacing: 0; text-transform: none; text-align: center;
    padding: 12px 14px; cursor: pointer; text-decoration: none; overflow-wrap: anywhere;
    color: #fff4e0; background: transparent; border: 3px solid #fff4e0; border-radius: 0; box-shadow: 4px 4px 0 var(--ar-sh);
    transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.pf-arcade .ar-media a.pf-btn { color: #fff4e0; text-decoration: none; }
.pf-arcade .ar-media .pf-btn.pf-btn-primary, .pf-arcade .ar-media a.pf-btn.pf-btn-primary { background: var(--gold); color: var(--on); }
.pf-arcade .ar-media .pf-btn:hover, .pf-arcade .ar-media a.pf-btn:hover { background: var(--teal); color: var(--on); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ar-sh); }
.pf-arcade .ar-media .pf-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ar-sh); }
.pf-arcade .ar-media .pf-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* screenshots */
.pf-arcade .ar-gal { display: grid; gap: 18px; }
.pf-arcade .ar-shot { margin: 0; }
.pf-arcade .ar-shot[hidden] { display: none; }
.pf-arcade .ar-shot img { display: block; width: 100%; max-height: 520px; object-fit: contain; background: #14102e; border: 3px solid #fff4e0; }
.pf-arcade .ar-galbar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.pf-arcade .ar-galn { font: 10px var(--px); }
.pf-arcade .ar-galbar .ar-btn { min-width: 44px; }

.pf-arcade .ar-pjshelf { padding-top: 10px; }

@media (max-width: 760px) {
    .pf-arcade .ar-sh { grid-template-columns: 1fr; }
    .pf-arcade .ar-scr { padding: 20px; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pf-arcade .ar-scr.ar-boot > .ar-pn { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-arcade .ar-bn .nj, .pf-arcade .ar-tk > div, .pf-arcade .ar-pips i.f, .pf-arcade .ar-dot, .pf-arcade .ar-bn .jp.on { animation: none; }
    .pf-arcade .ar-bn .sunG, .pf-arcade .ar-bn .moonG, .pf-arcade .ar-bn .bs1, .pf-arcade .ar-bn .bs2, .pf-arcade .ar-bn .bst, .pf-arcade .ar-ct { transition: none; }
}

/* ---------- Step 2d: Web Dev mode dock, command palette, flick trainer, wipe (arcade-dev.js) ----------
   Everything lives inside the wrapper (so the tokens and data-mode reach it). The dock is a dark console in both modes, like the prototype. */
.pf-arcade.ar-wdm { padding-bottom: var(--ar-dvh, 360px); }
.pf-arcade #ar-dv { display: none; }
.pf-arcade.ar-wdm #ar-dv { display: flex; }
.pf-arcade #ar-dv {
    position: fixed; left: 0; right: 0; bottom: 0; height: var(--ar-dvh, 360px); z-index: 80; flex-direction: column;
    background: #0d0a22; color: #fff4e0; border-top: 4px solid var(--teal); box-shadow: 0 -6px 0 #000;
    font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace;
}
.pf-arcade #ar-dv * { box-sizing: border-box; }
.pf-arcade .ar-dvh { height: 12px; cursor: ns-resize; touch-action: none; flex: none; background: repeating-linear-gradient(90deg, var(--teal) 0 6px, transparent 6px 12px); opacity: .45; }
.pf-arcade .ar-dvt { display: flex; gap: 6px; padding: 6px 8px; border-bottom: 3px solid #2a2266; flex: none; overflow-x: auto; align-items: center; }
.pf-arcade .ar-dvt .ar-sp { flex: 1; }
.pf-arcade .ar-dvt button { background: #14102e; color: #fff4e0; border: 2px solid #2a2266; padding: 5px 10px; cursor: pointer; font: inherit; white-space: nowrap; }
.pf-arcade .ar-dvt button[aria-selected="true"], .pf-arcade .ar-dvt button[aria-pressed="true"] { background: var(--teal); color: var(--on); border-color: var(--teal); }
.pf-arcade .ar-dvb { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }
.pf-arcade .ar-dvb[hidden] { display: none; }
.pf-arcade .ar-dvb .m, .pf-arcade .ar-dvb .ar-dl.m { color: #8a84c0; }
.pf-arcade .ar-dvb .u { color: var(--gold); }
.pf-arcade .ar-dvb a { color: var(--teal); text-decoration: underline; }
.pf-arcade .ar-dvr { white-space: nowrap; cursor: pointer; padding: 1px 4px; }
.pf-arcade .ar-dvr:hover, .pf-arcade .ar-dvr.sel { background: #2a2266; }
.pf-arcade .ar-dvr .t { color: var(--teal); } .pf-arcade .ar-dvr .i { color: var(--gold); } .pf-arcade .ar-dvr .c { color: var(--pink); }
.pf-arcade .ar-dvr .a { display: inline-block; width: 1.4em; color: #8a84c0; } .pf-arcade .ar-dvr .m { color: #8a84c0; }
.pf-arcade #ar-dvhl { position: fixed; display: none; pointer-events: none; z-index: 70; outline: 3px dashed var(--pink); background: color-mix(in srgb, var(--teal) 18%, transparent); }
.pf-arcade #ar-dvhl::after { content: attr(data-l); position: absolute; left: 0; top: -22px; font: 9px var(--px); background: var(--pink); color: var(--on); padding: 3px 5px; white-space: nowrap; }
.pf-arcade .ar-dl { white-space: pre-wrap; word-break: break-word; }
.pf-arcade .ar-dl.e { color: var(--pink); }
.pf-arcade .ar-dvi { display: flex; gap: 8px; align-items: center; border-top: 3px solid #2a2266; padding-top: 8px; margin-top: 8px; }
.pf-arcade .ar-dvi b { color: var(--teal); }
.pf-arcade .ar-dvi input { flex: 1; min-width: 0; background: #14102e; color: #fff4e0; border: 3px solid #fff4e0; padding: 8px; font: inherit; }
.pf-arcade .ar-dvw { display: grid; grid-template-columns: minmax(120px, 230px) 1fr 54px; gap: 6px 10px; align-items: center; }
.pf-arcade .ar-dvw .bar { height: 14px; background: #1e1850; border: 2px solid #2a2266; position: relative; }
.pf-arcade .ar-dvw .bar i { position: absolute; top: 0; bottom: 0; background: var(--c); transform-origin: left; animation: ar-dvg .7s both; animation-delay: var(--d); }
@keyframes ar-dvg { from { transform: scaleX(0); } }
.pf-arcade .ar-dvw small { color: #8a84c0; }
.pf-arcade .ar-dvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 18px; }
.pf-arcade .ar-dvs label { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pf-arcade .ar-dvs input[type=range] { width: 110px; }
.pf-arcade .ar-dvs select { background: #14102e; color: #fff4e0; border: 2px solid #fff4e0; padding: 4px; max-width: 140px; }
.pf-arcade .ar-dvs input[type=color] { width: 46px; height: 28px; border: 2px solid #fff4e0; background: none; padding: 0; }
.pf-arcade .ar-dvs button { background: #14102e; color: #fff4e0; border: 2px solid #fff4e0; padding: 6px 10px; cursor: pointer; }
.pf-arcade #ar-dv canvas { position: static; width: 260px; height: 64px; max-width: 100%; display: block; border: 3px solid #2a2266; }
.pf-arcade .ar-dvk { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.pf-arcade .ar-dvk .big { font: 34px var(--px); color: var(--teal); cursor: pointer; }
.pf-arcade .ar-dvk .big.w { color: var(--gold); }
.pf-arcade .ar-dvk ul { margin: 0; padding: 0; list-style: none; }
.pf-arcade .ar-dvk .ok { color: var(--teal); } .pf-arcade .ar-dvk .no { color: var(--pink); }
/* palette */
.pf-arcade #ar-dvp { position: fixed; inset: 0; z-index: 100; background: rgba(13, 10, 34, .7); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 14px 0; }
.pf-arcade #ar-dvp[hidden] { display: none; }
.pf-arcade #ar-dvp .pb { width: min(560px, 100%); background: var(--ar-ui); color: var(--ar-fg); border: 4px solid var(--ar-edge); box-shadow: 8px 8px 0 var(--ar-psh); }
.pf-arcade #ar-dvp input { width: 100%; border: 0; border-bottom: 4px solid var(--ar-edge); padding: 14px; font: 700 16px var(--body); background: var(--ar-chip); color: var(--ar-fg); outline: 0; }
.pf-arcade #ar-dvp ul { list-style: none; margin: 0; padding: 0; max-height: 48vh; overflow: auto; }
.pf-arcade #ar-dvp li { padding: 10px 14px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-weight: 700; }
.pf-arcade #ar-dvp li small { font: 8px var(--px); opacity: .6; align-self: center; }
.pf-arcade #ar-dvp li[aria-selected="true"] { background: var(--ar-hovbg); color: var(--ar-hovfg); }
/* flick trainer and the wipe screen sit above the page and above the sky, below the dock's bottom edge */
.pf-arcade .ar-aim, .pf-arcade .ar-wipe { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 75; overflow: hidden; }
.pf-arcade.ar-wdm .ar-aim, .pf-arcade.ar-wdm .ar-wipe { bottom: var(--ar-dvh, 360px); }
.pf-arcade .ar-aim { background: rgba(13, 10, 34, .94); cursor: crosshair; font: 11px/1.8 var(--px); color: #fff4e0; user-select: none; touch-action: manipulation; }
.pf-arcade .ar-aim-h { position: absolute; left: 14px; top: 12px; pointer-events: none; }
.pf-arcade .ar-aim-i { color: var(--teal); }
.pf-arcade .ar-aim-x { position: absolute; right: 12px; top: 10px; font: inherit; cursor: pointer; background: var(--pink); color: var(--on); border: 3px solid #fff4e0; padding: 6px 8px; }
.pf-arcade .ar-aim-t { position: absolute; width: 72px; height: 72px; }
.pf-arcade .ar-aim-t.spr { background-repeat: no-repeat; image-rendering: pixelated; }
.pf-arcade .ar-aim-t.pix { background: var(--pink); border: 4px solid #fff4e0; box-shadow: 4px 4px 0 #000; image-rendering: pixelated; }
.pf-arcade .ar-aim-r { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, 90%); background: var(--cream); color: var(--ink); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--teal); padding: 18px; text-align: center; cursor: default; font: 11px/1.8 var(--px); }
.pf-arcade .ar-aim-rk { font-size: 14px; margin-bottom: 10px; }
.pf-arcade .ar-aim-b { margin-top: 14px; display: flex; gap: 10px; justify-content: center; }
.pf-arcade .ar-wipe { background: #000; color: var(--teal); font: 13px/1.7 ui-monospace, Menlo, Consolas, monospace; padding: 18px; white-space: pre-wrap; }
.pf-arcade .ar-wipe.ok { color: var(--gold); }
/* Styles tab: border / shadow sliders reach the shared atoms through these two variables */
.pf-arcade.ar-ov .ar-card, .pf-arcade.ar-ov .ar-btn, .pf-arcade.ar-ov .ar-chip { border-width: var(--ar-bw) !important; }
.pf-arcade.ar-ov .ar-card { box-shadow: var(--ar-shw) var(--ar-shw) 0 var(--ar-sh) !important; }
.pf-arcade.ar-ov .ar-btn { box-shadow: calc(var(--ar-shw) - 1px) calc(var(--ar-shw) - 1px) 0 var(--ar-sh) !important; }
@media (max-width: 640px) {
    .pf-arcade #ar-dv { font-size: 12px; }
    .pf-arcade .ar-dvw { grid-template-columns: 1fr 54px; }
    .pf-arcade .ar-dvw .bar { grid-column: 1 / 3; }
}

/* ---------- reduced motion: no movement, content and toasts stay (the prototype's rule, read live by the scripts too) ---------- */
@media (prefers-reduced-motion: reduce) {
    html:has(.pf-arcade) { scroll-behavior: auto; }
    .pf-arcade, .pf-arcade * { transition: none !important; }
    .pf-arcade .ar-read.ar-gl { animation: none; }
}