/* =========================================================
   M&J VIDEO GAMES — "ARCADE OS"
   A CRT arcade-cabinet interface. Hard 8-bit panels, pixel
   type, menu-driven navigation. Deliberately single-world.
   ========================================================= */

:root{
  /* Screen (phosphor CRT) */
  --screen:  #0a0e1a;
  --screen-2:#060911;
  --panel:   #101a30;
  --panel-2: #0b1224;
  --edge:    #cfe0ff;   /* pixel border / UI lines */
  --edge-dim:#43567f;

  /* Phosphor text */
  --text:    #dce8ff;
  --dim:     #8493bd;

  /* Arcade RGB accents — gold is the one fill; cyan is interactive */
  --cyan:   #33e6d4;
  --yellow: #ffd23e;
  --green:  #57e86b; /* OPEN / yes only */
  --red:    #ff5a5a; /* CLOSED / no only */
  --magenta:#ffd23e;
  --orange: #ffd23e;
  --blue:   #33e6d4;
  --purple: #ffd23e;

  --ff-pixel:"Press Start 2P","Courier New",monospace;
  --ff-term: "VT323","Courier New",monospace;
  --ff-body: "VT323","Courier New",monospace; /* readable; pixel is HUD + titles only */

  --maxw: 1080px;
  --bezel: 14px;   /* CRT frame thickness — content is inset by this */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; font-size:17.5px; scroll-padding-top: calc(var(--bezel) + 118px);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  margin:0; background:var(--screen-2); color:var(--text);
  font-family:var(--ff-body); font-size:23px; line-height:1.4;
  max-width:100%; letter-spacing:.01em;
  image-rendering:auto;   /* photos stay sharp; pixel type doesn't need this */
  padding:var(--bezel);   /* keep all content inside the CRT bezel */
}
img, picture, video{ image-rendering:auto; }
/* Contain wide content (e.g. the attract ticker) here, NOT on html/body —
   the sticky .hud header is a sibling of <main>, so clipping main keeps the
   page from overflowing sideways without breaking the header's stickiness. */
main{ display:block; overflow-x:clip; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
::selection{ background:var(--cyan); color:#04121a; }
:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  [data-reveal]{ opacity:1!important; transform:none!important; }
  .crt-glow{ display:none!important; }
  .boot-slides picture{ opacity:0 !important; }
  .boot-slides picture:first-child{ opacity:1 !important; }
  .boot-slides img{ transform:none !important; }
}

/* Reveal */
[data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .45s steps(6), transform .45s steps(6); }
.js [data-reveal].in{ opacity:1; transform:none; }

/* Pixel type helpers */
.px{ font-family:var(--ff-pixel); line-height:1.5; letter-spacing:0; }
.blink{ animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* =========================================================
   CRT SCREEN OVERLAYS (fixed, non-interactive)
   ========================================================= */
.crt-vignette, .crt-bezel, .crt-glow{
  position:fixed; inset:0; pointer-events:none; z-index:900;
}
.crt-glow{ background:radial-gradient(120% 90% at 50% 0%, rgba(51,230,212,.05), transparent 55%); }
.crt-vignette{ box-shadow:inset 0 0 120px 18px rgba(0,0,0,.45); background:radial-gradient(135% 125% at 50% 50%, transparent 70%, rgba(0,0,0,.35)); }
.crt-bezel{ z-index:910;
  border:var(--bezel) solid #06070c; border-radius:26px;
  box-shadow:inset 0 0 0 3px #14161f, inset 0 0 40px 6px rgba(0,0,0,.65), 0 0 0 100vmax #000;
}
/* Scanlines live on chrome only — never over shop photos */
.scan-ui::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  opacity:.35; mix-blend-mode:multiply;
}
.power-flash{ position:fixed; inset:0; z-index:960; background:#dfeaff; pointer-events:none; animation:power 1s ease-out forwards; }
@keyframes power{ 0%{opacity:1; clip-path:inset(49% 0 49% 0);} 22%{opacity:.9; clip-path:inset(0 0 0 0);} 100%{opacity:0;} }

/* =========================================================
   SHELL
   ========================================================= */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,34px); }

/* Sticky chrome: HUD + nav travel together */
.site-head{
  position:sticky; top:0; z-index:80;
  padding-top:var(--bezel);
  background:var(--screen-2);
  border-bottom:3px solid var(--edge-dim);
  box-shadow:0 10px 0 var(--screen-2);
}
.term, .cform.term, .menu{ position:relative; }
.hud{
  position:relative; top:auto; z-index:auto;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px clamp(16px,4vw,34px);
  background:var(--screen-2); border-bottom:0;
}
.hud .oneup{ font-family:var(--ff-pixel); font-size:.62rem; color:var(--red); }
.hud .oneup b{ color:var(--text); }
.hud-brand{ font-family:var(--ff-pixel); font-size:.72rem; color:var(--text); display:flex; align-items:center; justify-content:center; gap:8px; flex:1; text-align:center; }
.hud-brand .amp{ color:var(--yellow); }
.hud-right{ display:flex; align-items:center; gap:16px; }
.hud-hours{
  font-family:var(--ff-term); font-size:1.05rem; color:var(--dim);
  letter-spacing:.06em; white-space:nowrap;
}
.hud-status{ font-family:var(--ff-pixel); font-size:.56rem; display:inline-flex; align-items:center; gap:7px; }
.hud-status .dot{ width:9px; height:9px; }
.hud-status.on{ color:var(--green); } .hud-status.on .dot{ background:var(--green); box-shadow:0 0 8px var(--green); }
.hud-status.off{ color:var(--red); } .hud-status.off .dot{ background:var(--red); }
.hud-call{ font-family:var(--ff-pixel); font-size:.56rem; color:var(--cyan); }
.hud-menu-btn{ display:none; font-family:var(--ff-pixel); font-size:.6rem; color:var(--text); padding:10px 12px; border:2px solid var(--edge); min-height:44px; }

/* Primary nav bar with dropdown menus */
.topnav{ display:flex; flex-wrap:nowrap; align-items:stretch; gap:1px;
  background:var(--panel-2); border-top:3px solid var(--edge-dim); border-bottom:3px solid var(--edge-dim);
  padding:0 clamp(10px,4vw,28px); position:relative; z-index:70; }
.tn-item{ font-family:var(--ff-term); font-size:1.12rem; color:var(--dim);
  letter-spacing:.1em; text-transform:uppercase;
  padding:14px 12px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:none; border:0; cursor:pointer; min-height:44px;
  transition:color .1s steps(1), background .1s steps(1); }
.tn-item:hover, .tn-drop:hover > .tn-item, .tn-drop.open > .tn-item{ color:var(--cyan); background:rgba(51,230,212,.08); }
.tn-drop{ position:relative; display:inline-flex; align-items:stretch; }
.tn-drop > .tn-item{ padding-right:4px; }
.tn-chev{ font-family:var(--ff-pixel); color:var(--yellow); padding:0 12px 0 2px; min-width:32px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; background:none; border:0; }
.tn-drop:hover > .tn-chev, .tn-drop.open > .tn-chev{ background:rgba(51,230,212,.08); }
.tn-car{ color:var(--yellow); font-size:.85em; display:inline-block; transition:transform .12s steps(2); }
.tn-drop:hover .tn-car, .tn-drop.open .tn-car{ transform:rotate(180deg); }
.tn-menu{ position:absolute; top:100%; left:0; min-width:240px; max-width:calc(100vw - 32px); z-index:75;
  background:var(--panel-2); border:3px solid var(--edge); box-shadow:6px 6px 0 rgba(0,0,0,.6);
  flex-direction:column; padding:6px; display:none; }
.tn-drop:hover .tn-menu, .tn-drop.open .tn-menu{ display:flex; }
@media (hover: hover) and (pointer: fine){
  .tn-drop:hover .tn-menu{ display:flex; }
  .tn-drop:hover .tn-car{ transform:rotate(180deg); }
  .tn-drop:hover > .tn-item, .tn-drop:hover > .tn-chev{ color:var(--cyan); background:rgba(51,230,212,.08); }
}
.tn-menu a{ font-family:var(--ff-term); font-size:1.08rem; letter-spacing:.06em; color:var(--text); padding:12px 12px; display:block; white-space:nowrap; min-height:44px; box-sizing:border-box; }
.tn-menu a:hover{ color:#06121a; background:var(--cyan); }
@media (max-width:860px){
  .topnav{ padding:0 8px; }
  .tn-item{ font-size:.5rem; padding:14px 8px; }
}

/* Section scaffolding */
.scene{ padding:clamp(38px,7vw,72px) 0; position:relative; scroll-margin-top:calc(var(--bezel) + 118px); }
.scene-head{ margin-bottom:26px; }
.tag{ font-family:var(--ff-pixel); font-size:.6rem; color:var(--yellow); display:inline-block; margin-bottom:14px; }
.tag::before{ content:"\2605 "; color:var(--yellow); }
.h-scene{
  font-family:var(--ff-pixel); font-size:clamp(1.05rem,3.4vw,1.9rem); line-height:1.35;
  color:var(--text); margin:0; text-shadow:4px 4px 0 rgba(0,0,0,.6);
  text-wrap:balance;
}
.h-scene .c{ color:var(--cyan); } .h-scene .y{ color:var(--cyan); } .h-scene .m{ color:var(--cyan); }
.sub{ font-size:1.2rem; line-height:1.45; color:var(--dim); max-width:60ch; margin:14px 0 0; text-wrap:pretty; }

/* One job per surface — chrome that restates the next section goes */
.boot .coin,
.boot .menu,
.hud-stats,
.attract,
.tag,
.ph-cap,
.item-desc,
.item-bar .no,
.mbox .lv,
.tradein-photos{ display:none !important; }
.scene{ padding:clamp(28px,5vw,56px) 0; }
.scene-head{ margin-bottom:18px; padding-left:8px; padding-right:8px; }

/* Generic pixel panel */
.panel{ background:var(--panel); border:3px solid var(--edge); box-shadow:7px 7px 0 rgba(0,0,0,.6); }

/* Arcade button */
.abtn{
  font-family:var(--ff-pixel); font-size:.68rem; color:var(--text);
  background:var(--panel); padding:15px 20px; display:inline-flex; align-items:center; gap:10px;
  border:3px solid var(--edge);
  box-shadow:5px 5px 0 rgba(0,0,0,.6);
  transition:transform .06s steps(1), box-shadow .06s steps(1), background .08s steps(1), color .08s steps(1);
}
.abtn:hover{ transform:translate(2px,2px); box-shadow:3px 3px 0 rgba(0,0,0,.6); }
.abtn:active{ transform:translate(5px,5px); box-shadow:0 0 0 rgba(0,0,0,.6); }
.abtn.yel{ background:transparent; color:var(--yellow); border-color:var(--yellow); }
.abtn.yel:hover{ background:var(--yellow); color:#06121a; }
.abtn.gho{ background:var(--panel); color:var(--text); }

/* =========================================================
   BOOT / TITLE SCREEN
   ========================================================= */
.boot{
  position:relative; text-align:center;
  padding:clamp(48px,8vw,92px) 0 clamp(36px,6vw,64px);
  min-height:calc(100svh - 148px);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  isolation:isolate;
}
.boot-attract{
  position:absolute; top:0; bottom:0; left:50%; width:100vw; margin-left:-50vw;
  z-index:0; overflow:hidden; pointer-events:none;
}
.boot-slides{ position:absolute; inset:0; }
.boot-slides picture{
  position:absolute; inset:0;
  opacity:0; animation:attract-fade 22s ease-in-out infinite;
}
.boot-slides picture:nth-child(1){ opacity:1; animation-delay:0s; }
.boot-slides picture:nth-child(2){ animation-delay:5.5s; }
.boot-slides picture:nth-child(3){ animation-delay:11s; }
.boot-slides picture:nth-child(4){ animation-delay:16.5s; }
.boot-slides img{
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
  transform:scale(1.08); animation:attract-ken 22s linear infinite;
  filter:brightness(1.12) saturate(1.08);
}
@keyframes attract-fade{
  0%, 22%{ opacity:1; }
  28%, 100%{ opacity:0; }
}
@keyframes attract-ken{
  0%{ transform:scale(1.04) translate3d(0,0,0); }
  100%{ transform:scale(1.12) translate3d(-1.5%,-1%,0); }
}
.boot-shade{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,9,17,.12) 0%, rgba(6,9,17,.28) 50%, rgba(6,9,17,.78) 100%);
}
.boot > *:not(.boot-attract){ position:relative; z-index:2; }
.boot .menu{ background:rgba(11,18,36,.82); backdrop-filter:blur(2px); }
.boot .coin, .boot .credit{ text-shadow:0 2px 10px rgba(0,0,0,.8); }
.boot .press{ text-shadow:0 0 18px rgba(87,232,107,.45); }
.boot .coin{ font-family:var(--ff-pixel); font-size:.6rem; color:var(--dim); }
.title{ margin:26px 0 6px; }
.title .l1, .title .l2{
  font-family:var(--ff-pixel); display:block; line-height:1; letter-spacing:2px;
  text-shadow:0 5px 0 #06263a, 0 10px 0 rgba(0,0,0,.55), 6px 12px 0 rgba(0,0,0,.35);
}
.title .l1{ font-size:clamp(2.6rem,11vw,6rem); color:var(--text); }
.title .l1 .amp{ color:var(--yellow); }
.title .l2{ font-size:clamp(1.5rem,6.6vw,3.5rem); color:var(--text); margin-top:14px; }
.boot .strap{ font-family:var(--ff-pixel); font-size:.66rem; color:var(--text); margin:22px 0 6px; }
.boot .credit{ font-family:var(--ff-pixel); font-size:.56rem; color:var(--dim); }
.press{ font-family:var(--ff-pixel); font-size:.86rem; color:var(--text); margin:0; display:inline-block; }
.boot-ctas{ display:flex; flex-direction:column; align-items:center; gap:14px; margin:26px 0; }
.coin-cta{
  font-family:var(--ff-pixel); font-size:.64rem; color:var(--yellow);
  letter-spacing:.08em;
  border:3px solid var(--yellow); padding:12px 18px;
  background:rgba(6,9,17,.62);
  box-shadow:4px 4px 0 rgba(0,0,0,.55);
}
.coin-cta:hover{ color:var(--screen-2); background:var(--yellow); }

/* Brand logo lockup — arcade recreation.
   Drop assets/img/logo.png to auto-override the recreation (no code change). */
.brandlogo{ display:block; margin:24px auto 12px; }
.brandlogo-png{ display:none; max-width:min(470px,84vw); margin:0 auto; height:auto; image-rendering:auto; mix-blend-mode:screen; }
.brandlogo.has-png .brandlogo-png{ display:block; }
.brandlogo.has-png .brandlogo-svg{ display:none; }
.brandlogo-svg{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; }
.lg-mj{
  font-family:"Luckiest Guy",var(--ff-pixel); font-weight:400;
  font-size:clamp(3rem,13vw,7rem); line-height:.86; letter-spacing:3px; color:#F5C518;
  -webkit-text-stroke:4px #000; text-stroke:4px #000; paint-order:stroke fill;
  text-shadow:0 6px 0 rgba(0,0,0,.9);
}
.lg-vg{
  position:relative; margin-top:8px; padding-bottom:13px;
  font-family:var(--ff-pixel); font-size:clamp(.95rem,4.4vw,2.15rem); color:var(--red);
  -webkit-text-stroke:1.5px #f6eccf; text-stroke:1.5px #f6eccf; paint-order:stroke fill;
}
.lg-vg::after{ content:""; position:absolute; left:2%; right:2%; bottom:0; height:9px; background:var(--red); border-radius:5px; }
.lg-col{
  align-self:flex-end; margin-top:7px;
  font-family:system-ui,Arial,sans-serif; font-weight:800; letter-spacing:1.5px;
  font-size:clamp(.7rem,2.4vw,1.05rem); color:#fff;
}

/* Main menu (the primary nav) */
.menu{
  max-width:520px; margin:6px auto 0; text-align:left;
  background:var(--panel-2); border:3px solid var(--edge);
  box-shadow:7px 7px 0 rgba(0,0,0,.6); padding:20px 18px;
}
.menu-title{ font-family:var(--ff-pixel); font-size:.56rem; color:var(--cyan); border-bottom:2px dashed var(--edge-dim); padding-bottom:12px; margin-bottom:8px; }
.menu a{
  display:flex; align-items:center; gap:12px; font-family:var(--ff-pixel); font-size:.74rem;
  color:var(--dim); padding:11px 10px; transition:color .1s steps(1), background .1s steps(1);
}
.menu a .cur{ opacity:0; color:var(--yellow); }
.menu a .k{ margin-left:auto; font-size:.5rem; color:var(--edge-dim); }
.menu a:hover, .menu a.sel{ color:var(--text); background:rgba(51,230,212,.1); }
.menu a:hover .cur, .menu a.sel .cur{ opacity:1; }
.menu a.sel{ box-shadow:inset 3px 0 0 var(--yellow); }

/* HUD stat strip under menu */
.hud-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px 34px; margin:34px 0 0; }
.hud-stats .st{ font-family:var(--ff-pixel); text-align:center; }
.hud-stats .st .n{ font-size:.86rem; }
.hud-stats .st .k{ font-size:.46rem; color:var(--dim); margin-top:8px; }
.hud-stats .st:nth-child(1) .n{ color:var(--yellow); }
.hud-stats .st:nth-child(2) .n{ color:var(--yellow); }
.hud-stats .st:nth-child(3) .n{ color:var(--yellow); }

/* Attract-mode ticker */
.attract{ overflow:hidden; max-width:100%; border-top:3px solid var(--edge-dim); border-bottom:3px solid var(--edge-dim); padding:10px 0; background:var(--screen-2); }
.attract-tr{ display:flex; gap:36px; width:max-content; animation:scroll 26s linear infinite; font-family:var(--ff-pixel); font-size:.56rem; }
.attract:hover .attract-tr{ animation-play-state:paused; }
.attract-tr span{ display:inline-flex; gap:36px; align-items:center; color:var(--text); }
.attract-tr span::after{ content:"\25C6"; color:var(--magenta); }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* =========================================================
   GAME SELECT (what we carry) — item grid
   ========================================================= */
.items{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.item{ display:flex; flex-direction:column; background:var(--panel); border:3px solid var(--edge-dim);
  box-shadow:6px 6px 0 rgba(0,0,0,.55); scroll-margin-top:calc(var(--bezel) + 118px);
  transition:transform .08s steps(1), border-color .08s steps(1), box-shadow .08s steps(1); }
.item:hover, .item:focus-visible{ transform:translate(-2px,-2px); border-color:var(--edge); box-shadow:9px 9px 0 rgba(0,0,0,.6); }
.item-scr{ aspect-ratio:4/3; border-bottom:3px solid var(--edge-dim); position:relative; }
.item-bar{ display:flex; align-items:center; gap:10px; padding:12px 12px; font-family:var(--ff-pixel); font-size:.6rem; color:var(--text); background:var(--panel-2); }
.item-bar .no{ font-size:.5rem; opacity:.7; }
.item-bar .sel{ margin-left:auto; opacity:0; }
.item:hover .item-bar .sel{ opacity:1; animation:blink 1s steps(1) infinite; }
.item-desc{ padding:12px 13px 15px; font-size:1.14rem; line-height:1.4; color:var(--dim); text-wrap:pretty; }
.item-desc b{ color:var(--text); font-weight:400; }

/* =========================================================
   HOW TO PLAY (buy/sell/trade) — manual panels
   ========================================================= */
.manual{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mbox{ background:var(--panel); border:3px solid var(--edge); box-shadow:6px 6px 0 rgba(0,0,0,.55); padding:20px 18px; }
.mbox .lv{ font-family:var(--ff-pixel); font-size:.5rem; color:var(--dim); }
.mbox h3{ font-family:var(--ff-pixel); font-size:.86rem; margin:12px 0 12px; color:var(--text); }
.mbox p{ margin:0; font-size:1.08rem; color:var(--dim); }
.mbox p b{ color:var(--text); font-weight:400; }
.coin-note{ margin-top:24px; font-family:var(--ff-pixel); font-size:.56rem; color:var(--text); line-height:1.9; text-align:center; }
.coin-note a{ color:var(--cyan); }

/* =========================================================
   BONUS STAGE — wrestling
   ========================================================= */
.bonus{
  display:grid; grid-template-columns:1.15fr 1fr; gap:18px; align-items:stretch;
  background:var(--panel); border:3px solid var(--edge);
  box-shadow:8px 8px 0 rgba(0,0,0,.55);
}
.bonus-art{ margin:0; min-height:280px; border-right:3px solid var(--edge-dim); position:relative; }
.bonus-art picture{ position:absolute; inset:0; display:block; }
.bonus-art .ph-img{ object-position:center 30%; }
.bonus-copy{ padding:26px 24px 28px; display:flex; flex-direction:column; gap:14px; }
.bonus-kicker{ font-family:var(--ff-pixel); font-size:.5rem; color:var(--cyan); margin:0; letter-spacing:.12em; }
.bonus-claim{
  font-family:var(--ff-pixel); font-size:clamp(.72rem,2.1vw,1.05rem);
  line-height:1.45; color:var(--text); margin:0; text-wrap:balance;
}
.bonus-copy p{ margin:0; font-size:1.18rem; line-height:1.45; color:var(--dim); text-wrap:pretty; }
.bonus-ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }

/* =========================================================
   HIGH SCORES
   ========================================================= */
.scores{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.score{
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"rank who" "rank q";
  column-gap:16px; row-gap:4px; align-items:baseline;
  background:var(--panel); border:3px solid var(--edge-dim);
  box-shadow:5px 5px 0 rgba(0,0,0,.5); padding:16px 18px;
}
.score-rank{ grid-area:rank; font-family:var(--ff-pixel); font-size:.7rem; color:var(--text); padding-top:4px; }
.score-who{ grid-area:who; font-family:var(--ff-pixel); font-size:.56rem; color:var(--text); }
.score-q{ grid-area:q; margin:0; font-size:1.16rem; line-height:1.4; color:var(--dim); text-wrap:pretty; }
.scores-foot{
  margin:18px 0 0; font-family:var(--ff-term); font-size:1.1rem; color:var(--dim);
  display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center;
}
.scores-foot a{ color:var(--cyan); }
.scores-foot a:hover{ color:var(--yellow); }
.dot-sep{ color:var(--edge-dim); }

/* =========================================================
   PHOTO MODE — gallery
   ========================================================= */
.gallery-filter{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.gallery-filter label{ font-family:var(--ff-pixel); font-size:.54rem; color:var(--dim); }
.gallery-filter select{
  background:#0a1120; color:var(--text); border:3px solid var(--edge-dim); box-shadow:4px 4px 0 rgba(0,0,0,.5);
  font-family:var(--ff-term); font-size:1.12rem; padding:9px 38px 9px 12px; border-radius:0;
  -webkit-appearance:none; appearance:none; cursor:pointer; transition:border-color .08s steps(1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2333e6d4' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.gallery-filter select:focus{ outline:none; border-color:var(--cyan); }
.gallery-filter select option{ background:#0a1120; color:var(--text); }
.gal-count{ font-family:var(--ff-pixel); font-size:.46rem; color:var(--dim); }
.gframe.hide{ display:none; }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gframe{ margin:0; border:3px solid var(--edge-dim); box-shadow:5px 5px 0 rgba(0,0,0,.5); position:relative; }
.gframe .glabel{ position:absolute; top:0; left:0; z-index:3; font-family:var(--ff-pixel); font-size:.44rem; color:var(--text); background:rgba(6,14,26,.88); padding:4px 6px; }
.gframe .ph{ aspect-ratio:4/3; }
.gframe:nth-child(1){ grid-column:span 2; grid-row:span 2; } .gframe:nth-child(1) .ph{ aspect-ratio:auto; height:100%; }

/* =========================================================
   SHOP ONLINE — continue panels
   ========================================================= */
.online-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.oc{ background:var(--panel); border:3px solid var(--edge); box-shadow:6px 6px 0 rgba(0,0,0,.55); padding:22px 20px; display:flex; flex-direction:column; gap:12px; transition:transform .08s steps(1); }
.oc:hover{ transform:translate(-2px,-2px); }
.oc .oh{ font-family:var(--ff-pixel); font-size:.5rem; color:var(--dim); }
.oc h3{ font-family:var(--ff-pixel); font-size:.9rem; margin:0; }
.oc.ebay h3, .oc.ebay .go{ color:#33e6d4; }
.oc.fb h3, .oc.fb .go{ color:#4d9bff; }
.oc.ig h3, .oc.ig .go{ color:#ff4fa3; }
.oc p{ margin:0; font-size:1.08rem; color:var(--dim); }
.oc .go{ margin-top:4px; font-family:var(--ff-pixel); font-size:.56rem; }

/* =========================================================
   VISIT — terminal readout
   ========================================================= */
.visit-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:16px; align-items:start; }
.term{ background:#05090f; border:3px solid var(--edge); box-shadow:7px 7px 0 rgba(0,0,0,.6); padding:20px 20px 22px; font-family:var(--ff-term); font-size:1.15rem; }
.term .bar{ font-family:var(--ff-pixel); font-size:.5rem; color:var(--green); border-bottom:2px solid var(--edge-dim); padding-bottom:12px; margin-bottom:14px; display:flex; justify-content:space-between; }
.term .ln{ display:block; margin:3px 0; color:var(--text); }
.term .ln .k{ color:var(--cyan); }
.term .ln.today{ color:var(--yellow); }
.term .ln.today::before{ content:"> "; }
.term .stat{ margin-top:12px; font-family:var(--ff-pixel); font-size:.56rem; }
.term .stat.on{ color:var(--green); } .term .stat.off{ color:var(--red); }

.visit-side{ display:flex; flex-direction:column; gap:12px; }
.vrow{ display:flex; align-items:center; gap:14px; background:var(--panel); border:3px solid var(--edge-dim); box-shadow:5px 5px 0 rgba(0,0,0,.5); padding:14px 15px; transition:border-color .08s steps(1); }
.vrow:hover{ border-color:var(--cyan); }
.vrow .vi{ font-family:var(--ff-pixel); font-size:.9rem; }
.vrow:nth-child(1) .vi{ color:var(--cyan); } .vrow:nth-child(2) .vi{ color:var(--cyan); }
.vrow .vk{ font-family:var(--ff-pixel); font-size:.44rem; color:var(--dim); }
.vrow .vv{ font-size:1.12rem; color:var(--text); }
.visit-coin{ justify-content:center; text-align:center; width:100%; }
.map{ height:240px; position:relative; border:3px solid var(--edge-dim); box-shadow:5px 5px 0 rgba(0,0,0,.5); overflow:hidden; background:#0a1122; }
.map iframe{ width:100%; height:100%; border:0; display:block; }
.map-open{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  font-family:var(--ff-pixel); font-size:.42rem; letter-spacing:.04em;
  color:var(--yellow); background:rgba(6,14,26,.88);
  text-align:center; padding:9px 8px;
}

/* =========================================================
   FOOTER — game over / credits
   ========================================================= */
.footer{ border-top:3px solid var(--edge-dim); background:var(--screen-2); padding:44px 0 28px; text-align:center; }
.footer .go{ font-family:var(--ff-pixel); font-size:1rem; color:var(--red); text-shadow:3px 3px 0 rgba(0,0,0,.6); }
.footer .cont{ font-family:var(--ff-pixel); font-size:.6rem; color:var(--dim); margin:16px 0 26px; }
.credits{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 26px; font-family:var(--ff-pixel); font-size:.54rem; }
.credits a{ color:var(--cyan); } .credits a:hover{ color:var(--yellow); }
.footer .rights{ margin-top:26px; font-family:var(--ff-pixel); font-size:.46rem; color:var(--dim); line-height:2; }

/* =========================================================
   MOBILE MENU (drawer)
   ========================================================= */
.drawer{ position:fixed; inset:0 0 0 auto; width:min(84vw,320px); z-index:940; background:var(--panel-2);
  border-left:3px solid var(--edge); transform:translateX(100%); transition:transform .2s steps(4);
  display:flex; flex-direction:column; gap:0; padding:72px 16px 32px; overflow-y:auto; }
.drawer.open{ transform:none; }
.drawer a{ font-family:var(--ff-term); font-size:1.2rem; letter-spacing:.06em; color:var(--text); padding:14px 8px; border-bottom:2px solid var(--edge-dim); display:flex; gap:10px; align-items:center; min-height:44px; }
.drawer a .cur{ color:var(--yellow); }
.drawer-call{ justify-content:center; color:var(--yellow) !important; background:transparent; border:3px solid var(--yellow) !important;
  margin:0 0 14px; font-size:.58rem !important; box-shadow:4px 4px 0 rgba(0,0,0,.5); }
.drawer-drop{ border-bottom:2px solid var(--edge-dim); }
.drawer-drop > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  font-family:var(--ff-term); font-size:1.2rem; letter-spacing:.06em; color:var(--text); padding:14px 8px; min-height:44px;
  -webkit-user-select:none; user-select:none;
}
.drawer-drop > summary::-webkit-details-marker{ display:none; }
.drawer-drop > summary .tn-car{ margin-left:auto; }
.drawer-drop[open] > summary .tn-car{ transform:rotate(180deg); }
.drawer-sub{ display:flex; flex-direction:column; padding:0 0 8px; background:rgba(0,0,0,.25); }
.drawer-sub a{ font-size:.54rem; padding:12px 8px 12px 36px; min-height:44px; border-bottom:1px dashed var(--edge-dim); }
.drawer-bg{ position:fixed; inset:0; z-index:935; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:opacity .2s; }
.drawer-bg.open{ opacity:1; visibility:visible; }

/* =========================================================
   PHOTO SLOTS (swap-in ready — drop files into assets/img/photos/)
   ========================================================= */
.ph{ position:relative; overflow:hidden; display:grid; place-items:center; background:
  repeating-linear-gradient(45deg, rgba(0,0,0,.28) 0 8px, transparent 8px 16px), linear-gradient(150deg,#0e1830,#0a1122); }
.ph .ph-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; image-rendering:auto; }
.ph .ph-cap{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:10px; z-index:1; }
.ph .ph-cap svg{ width:22px; height:22px; color:var(--edge-dim); }
.ph .ph-cap .l{ font-family:var(--ff-pixel); font-size:.46rem; color:var(--dim); }
.ph .ph-cap .s{ font-family:var(--ff-pixel); font-size:.38rem; color:var(--edge-dim); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:860px){
  .items{ grid-template-columns:1fr 1fr; }
  .manual{ grid-template-columns:1fr; }
  .online-row{ grid-template-columns:1fr; }
  .visit-grid{ grid-template-columns:1fr; }
  .map{ height:280px; }
  .tradein{ grid-template-columns:1fr; }
  .bonus{ grid-template-columns:1fr; }
  .bonus-copy{ order:1; }
  .bonus-art{ order:2; min-height:220px; border-right:0; border-bottom:0; border-top:3px solid var(--edge-dim); }
  .gallery{ grid-template-columns:1fr 1fr; }
  .gframe:nth-child(1){ grid-column:span 2; }
}
@media (max-width:620px){
  :root{ --bezel:12px; }
  html{ scroll-padding-top: 118px; }
  body{ font-size:21px; }
  .wrap{ padding:0 32px; }
  .scene{ padding:32px 32px 48px; scroll-margin-top:118px; }
  .scene-head, .carry-head, .program-head{ padding-left:4px; padding-right:10px; }
  .h-scene{ font-size:1.02rem; line-height:1.5; text-shadow:3px 3px 0 rgba(0,0,0,.6); }
  .tag{ font-size:.52rem; }
  .hud{
    flex-wrap:wrap; gap:0; padding:10px 16px 0;
    border-bottom:0;
  }
  .hud .oneup{ display:none; }
  .hud-brand{ font-size:.52rem; justify-content:flex-start; flex:1; min-width:0; }
  .hud-call{
    display:flex; order:3; flex:1 0 100%; justify-content:center;
    font-size:.48rem; color:var(--cyan); padding:9px 8px 10px;
    border-top:2px solid var(--edge-dim); min-height:40px; align-items:center;
    margin:4px -16px 0;
  }
  .hud-menu-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:8px 10px; min-height:40px; min-width:40px;
  }
  .hud-right{ gap:8px; flex-shrink:0; }
  .hud-right .hud-status{ font-size:.46rem; }
  .hud-hours{ font-size:.92rem; }
  .topnav{ display:none; }
  .item, .cacc, .carry{ scroll-margin-top:118px; }
  .items{ grid-template-columns:1fr 1fr; gap:12px; }   /* compact 2-up category grid */
  .item-scr{ aspect-ratio:auto; height:150px; }   /* fixed, can't balloon */
  .item-bar{ flex-wrap:wrap; font-size:.5rem; padding:9px 9px; }
  .item-desc{ font-size:.92rem; padding:10px 11px 12px; }
  .gallery{ grid-template-columns:1fr; gap:14px; }
  .gframe:nth-child(1){ grid-column:span 1; grid-row:auto; }
  .gframe .ph{ aspect-ratio:4/3; }
  .gframe:nth-child(1) .ph{ aspect-ratio:5/4; height:auto; }
  #photos.scene.wrap{ padding-left:18px; padding-right:18px; }
  .crt-bezel{ border-radius:10px; box-shadow:inset 0 0 0 2px #14161f, inset 0 0 40px 6px rgba(0,0,0,.8), 0 0 0 100vmax #000; }
  .manual, .online-row, .program-steps, .program-cols{ gap:12px; }
  .mbox, .oc, .pstep, .pcard{ box-shadow:4px 4px 0 rgba(0,0,0,.5); }
}

/* =========================================================
   TRADE-INS detail + ABOUT / SERVICES
   ========================================================= */
.tradein{ display:grid; grid-template-columns:minmax(280px,.85fr) 1.2fr; gap:22px; margin-top:28px;
  background:var(--panel); border:3px solid var(--edge); box-shadow:7px 7px 0 rgba(0,0,0,.6); padding:20px; }
.flyer-wrap{ display:flex; justify-content:center; align-items:flex-start; }
.tradein .flyer{ width:100%; max-width:520px; border:3px solid var(--edge-dim); box-shadow:5px 5px 0 rgba(0,0,0,.5); }
.tradein h3{ font-family:var(--ff-pixel); font-size:.72rem; color:var(--text); margin:0 0 12px; }
.tradein-copy > p{ margin:0 0 12px; color:var(--dim); font-size:1.05rem; }
.tradein-copy > p b{ color:var(--text); font-weight:400; }
.take-list{ list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:5px 20px; }
.take-list li{ font-size:1rem; color:var(--text); display:flex; gap:9px; }
.take-list li::before{ content:"\25B8"; color:var(--cyan); }

.about-grid{ display:grid; grid-template-columns:1fr; gap:28px; align-items:start; margin-top:22px; }
.about-copy p{ color:var(--dim); font-size:1.12rem; margin:0 0 16px; }
.about-copy p b{ color:var(--text); font-weight:400; }
.about-copy .motto{ font-family:var(--ff-pixel); font-size:.72rem; line-height:1.9; color:var(--cyan);
  border-left:4px solid var(--magenta); padding-left:16px; margin:0 0 18px; }
.services{ display:flex; flex-wrap:wrap; gap:10px; }
.services span{ font-family:var(--ff-pixel); font-size:.52rem; color:var(--text); padding:9px 11px; border:2px solid var(--edge-dim); background:var(--panel-2); }
.services span:nth-child(2){ background:var(--panel-2); } .services span:nth-child(3){ background:var(--panel-2); } .services span:nth-child(4){ background:var(--panel-2); }
.about-media{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:16px; }
.about-media .frame{ position:relative; border:3px solid var(--edge-dim); box-shadow:5px 5px 0 rgba(0,0,0,.5); background:#05090f; flex:0 1 300px; min-width:180px; }
.about-media .frame img{ display:block; width:100%; height:auto; }
.about-media .frame .cap{ position:absolute; top:0; left:0; z-index:2; font-family:var(--ff-pixel); font-size:.46rem; color:var(--text); background:rgba(6,14,26,.88); padding:4px 6px; }

@media (max-width:820px){
  .tradein{ grid-template-columns:1fr; }
  .tradein .flyer{ width:100%; max-width:none; }
  .about-grid{ grid-template-columns:1fr; }
  .about-media .frame{ flex:0 1 220px; min-width:160px; }
  .take-list{ grid-template-columns:1fr; }
}


/* =========================================================
   TRADE-IN PROGRAM (mail-in) + WE CARRY catalog
   ========================================================= */
.program{
  margin-top:22px; background:var(--panel); border:3px solid var(--edge);
  box-shadow:7px 7px 0 rgba(0,0,0,.6); padding:22px 20px 24px;
}
.program-head h3{ font-family:var(--ff-pixel); font-size:.82rem; color:var(--text); margin:0 0 8px; }
.program-head p{ margin:0; color:var(--dim); font-size:1.05rem; }

.program-steps{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; }
.pstep{ background:var(--panel-2); border:3px solid var(--edge-dim); box-shadow:5px 5px 0 rgba(0,0,0,.5); padding:18px 16px; }
.pstep .ps-no{ font-family:var(--ff-pixel); font-size:.5rem; color:var(--cyan); }
.pstep h4{ font-family:var(--ff-pixel); font-size:.74rem; color:var(--text); margin:10px 0 10px; }
.pstep p{ margin:0 0 12px; color:var(--dim); font-size:1.04rem; }
.pstep p b{ color:var(--text); font-weight:400; }
.pstep .ps-cta{ display:inline-flex; flex-wrap:wrap; gap:8px; align-items:center; font-family:var(--ff-pixel); font-size:.52rem; color:var(--text); }
.pstep .ps-cta a{ color:var(--cyan); }
.pstep .ps-note{ display:block; font-size:.98rem; color:var(--dim); }

.program-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pcard{ background:var(--panel-2); border:3px solid var(--edge-dim); box-shadow:5px 5px 0 rgba(0,0,0,.5); padding:18px 16px; }
.pcard h4{ font-family:var(--ff-pixel); font-size:.62rem; margin:0 0 12px; }
.pcard.yes{ border-color:var(--green); } .pcard.yes h4{ color:var(--green); }
.pcard.no{ border-color:var(--red); } .pcard.no h4{ color:var(--red); }
.pcard ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.pcard li{ font-size:1rem; color:var(--text); display:flex; gap:9px; }
.pcard.yes li::before{ content:"\25B8"; color:var(--green); }
.pcard.no li::before{ content:"\2716"; color:var(--red); }

/* We Carry — systems catalog */
.carry{ margin-top:26px; scroll-margin-top:calc(var(--bezel) + 118px); }
.carry-head{ margin-bottom:18px; padding-left:8px; padding-right:8px; }
/* What We Carry — collapsible dropdown categories */
.carry-acc{ display:grid; gap:10px; }
.cacc{ background:var(--panel); border:3px solid var(--edge-dim); box-shadow:5px 5px 0 rgba(0,0,0,.5); scroll-margin-top:calc(var(--bezel) + 118px); }
.cacc > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  padding:15px 16px; font-family:var(--ff-pixel); font-size:.66rem; color:var(--text);
  -webkit-user-select:none; user-select:none; transition:color .1s steps(1);
}
.cacc > summary::-webkit-details-marker{ display:none; }
.cacc > summary::before{ content:"\25B8"; color:var(--yellow); font-size:.9em; transition:transform .12s steps(3); }
.cacc[open] > summary::before{ transform:rotate(90deg); }
.cacc > summary:hover{ color:var(--cyan); }
.cacc .cc-sub{ margin-left:auto; font-size:.5rem; color:var(--dim); }
.cacc-body{ padding:0 16px 16px; }
.cacc-body ul{ list-style:none; margin:6px 0 0; padding:14px 0 0; border-top:2px dashed var(--edge-dim);
  display:grid; grid-template-columns:1fr 1fr; gap:7px 22px; }
.cacc-body li{ font-size:1.02rem; color:var(--text); display:flex; gap:9px; align-items:baseline; }
.cacc-body li::before{ content:"\25C6"; color:var(--cyan); font-size:.7em; }
@media (max-width:620px){ .cacc-body ul{ grid-template-columns:1fr; } .cacc .cc-sub{ display:none; } }
.carry-title{ font-family:var(--ff-pixel); font-size:clamp(1.05rem,3.4vw,1.7rem); color:var(--text); margin:6px 0 0; text-shadow:4px 4px 0 rgba(0,0,0,.6); }
.carry-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cman{ background:var(--panel); border:3px solid var(--edge-dim); box-shadow:5px 5px 0 rgba(0,0,0,.5); padding:18px 16px; }
.cman h4{ font-family:var(--ff-pixel); font-size:.72rem; color:var(--text); margin:0 0 12px; border-bottom:2px dashed var(--edge-dim); padding-bottom:10px; }
.cman ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.cman li{ font-size:1.02rem; color:var(--text); display:flex; gap:9px; align-items:baseline; }
.cman li::before{ content:"\25C6"; color:var(--cyan); font-size:.7em; }

@media (max-width:820px){
  .program-steps{ grid-template-columns:1fr; }
  .program-cols{ grid-template-columns:1fr; }
  .carry-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .carry-grid{ grid-template-columns:1fr; }
}


/* =========================================================
   SERVICES — repairs / consignment / charity auctions
   ========================================================= */
.manual + .program,
.bonus + .program{ margin-top:22px; }
#consign .program-steps{ margin-bottom:8px; }
#consign .take-list{ margin-top:12px; }
#repairs .manual{ margin-bottom:0; }


/* =========================================================
   TRADE-IN PHOTOS — strip of example trade-in photos
   ========================================================= */
.tradein-photos{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin-top:22px;
}
.tradein-photos .tp{
  margin:0; border:3px solid var(--edge-dim); box-shadow:5px 5px 0 rgba(0,0,0,.5);
  overflow:hidden; background:#05090f; aspect-ratio:4/3;
}
.tradein-photos .tp img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:820px){
  .tradein-photos{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .tradein-photos{ grid-template-columns:1fr 1fr; }
}

/* ============ CONTACT FORM ============ */
.contact-wrap{ max-width:640px; margin:24px auto 0; }
.cform.term{ font-family:var(--ff-term); }
.cfield{ margin:0 0 15px; }
.cfield label{ display:block; font-family:var(--ff-pixel); font-size:.5rem; color:var(--cyan); margin:0 0 8px; letter-spacing:.5px; }
.cform input, .cform select, .cform textarea{
  width:100%; box-sizing:border-box; background:#0a1120; color:var(--text);
  border:3px solid var(--edge-dim); box-shadow:4px 4px 0 rgba(0,0,0,.5);
  font-family:var(--ff-term); font-size:1.2rem; padding:11px 13px;
  border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color .08s steps(1);
}
.cform textarea{ resize:vertical; min-height:130px; line-height:1.35; }
.cform input::placeholder, .cform textarea::placeholder{ color:var(--dim); }
.cform input:focus, .cform select:focus, .cform textarea:focus{ outline:none; border-color:var(--cyan); }
.cform select{
  cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2333e6d4' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.cform select option{ background:#0a1120; color:var(--text); }
.cform-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px; }
.cbtn{
  font-family:var(--ff-pixel); font-size:.62rem; color:var(--yellow); background:transparent;
  border:3px solid var(--yellow); box-shadow:5px 5px 0 rgba(0,0,0,.6); padding:14px 18px;
  cursor:pointer; transition:transform .06s steps(1), box-shadow .06s steps(1), background .08s steps(1), color .08s steps(1);
}
.cbtn:hover{ background:var(--yellow); color:#06121a; }
.cbtn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 rgba(0,0,0,.6); }
.cform-status{ font-family:var(--ff-pixel); font-size:.5rem; line-height:1.5; }
.cform-status.ok{ color:var(--green); }
.cform-status.warn{ color:var(--yellow); }
.cform-status.err{ color:var(--red); }
.cform-alt{ margin:16px 0 0; font-family:var(--ff-term); font-size:1.14rem; color:var(--dim); }
.cform-alt a{ color:var(--cyan); word-break:break-all; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (hover:hover) and (pointer:fine){
  html, html *{
    cursor: url("/assets/img/cursors/arrow-24.png") 3 1, default !important;
  }
  input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),
  textarea{
    cursor: text !important;
  }
}
.cur-spark{
  position:fixed; width:4px; height:4px; pointer-events:none; z-index:9998;
  background:var(--yellow);
  image-rendering:pixelated;
  animation:curSpark .28s steps(4) forwards;
}
@keyframes curSpark{
  0%{ opacity:1; transform:translate(0,0) scale(1); }
  100%{ opacity:0; transform:translate(var(--sx), var(--sy)) scale(.35); }
}
@media (prefers-reduced-motion:reduce){
  .cur-spark{ display:none; }
}