/* ======================================================================
   Arcade (v1, Oct 2026) — the 16-bit console on the colour monitor.
   Shares the monitor and console parts with videos-v1.css.
   DRIVE SLOW RALLY: themed on Crispthecook x GG Peney's "Drive Slow" —
   the red-and-white hatchback, the hand-drawn title, a mountain pass.
   ====================================================================== */

.arcade .vroom__cabinet{gap:16px}
.tv__channel{margin:0;padding:6px 8px;border-radius:5px;background:#060a09;color:#7ff5dc;text-align:center;
  font:700 .74rem/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;text-shadow:0 0 6px rgba(127,245,220,.6);
  box-shadow:inset 0 0 10px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08)}
.av-stack--single{grid-template-columns:minmax(0,1fr)}

/* screen states: off = dark tube; on without cart = blue; on with cart = title */
.arcade .tv__game{opacity:0;background:#1838c4;transition:opacity .25s ease}
.arcade .tv.on-game .tv__game{opacity:1}
.arcade .tv__game:not(.is-live) .ds-title,.arcade .tv__game:not(.is-live) .ds-logo,.arcade .tv__game:not(.is-live) .ds-credit{display:none}
.arcade .tv__game:not(.is-live){justify-content:center;padding:0}

.ds-title{position:absolute;inset:0;overflow:hidden}
.ds-title i{position:absolute;display:block}
.ds-title__sky{inset:0;background:linear-gradient(180deg,#1b1240 0%,#5a2a6e 30%,#d4566a 55%,#f6a35c 70%,#ffd9a0 78%)}
.ds-title__sun{left:58%;top:44%;width:22%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,#fff6d8 0 40%,#ffd27a 60%,rgba(255,180,90,0) 72%)}
.ds-title__ridge{left:-10%;right:-10%;top:52%;height:30%;background:#2a1a3a;
  clip-path:polygon(0 60%,12% 30%,22% 48%,35% 12%,47% 40%,58% 22%,70% 46%,82% 18%,92% 38%,100% 28%,100% 100%,0 100%)}
.ds-title__ridge--far{top:46%;background:#6a3a66;opacity:.8;
  clip-path:polygon(0 70%,10% 45%,25% 62%,40% 30%,52% 55%,66% 35%,80% 58%,90% 40%,100% 52%,100% 100%,0 100%)}
.ds-title__road{left:0;right:0;top:66%;bottom:0;background:linear-gradient(180deg,#3a3440,#1d1a22);
  clip-path:polygon(48% 0,55% 0,96% 100%,4% 100%)}
.ds-title__road::after{content:"";position:absolute;left:50.6%;width:1.4%;top:0;bottom:0;
  background:repeating-linear-gradient(180deg,#f3eedc 0 14px,transparent 14px 30px)}
.ds-title__rail{left:0;right:0;top:66%;bottom:0;
  background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.35) 22px 24px);
  clip-path:polygon(0 0,46% 0,2% 100%,0 100%,100% 100%,98% 100%,57% 0,100% 0)}
@media (prefers-reduced-motion:no-preference){
  .tv.on-game .tv__game.is-live .ds-title__road::after{animation:ds-road .4s linear infinite}
  .tv.on-game .tv__game.is-live .ds-title__sun{animation:ds-glow 3s ease-in-out infinite alternate}
}
@keyframes ds-road{to{background-position:0 30px}}
@keyframes ds-glow{to{filter:brightness(1.15)}}

.arcade .tv__game{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5%;padding-bottom:4%}
.ds-logo{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;margin-top:-14%}
.ds-logo__word{margin:0;display:flex;gap:.12em;font:900 italic clamp(26px,8.4vw,78px)/.9 "Arial Black",Helvetica Neue,Arial,sans-serif;letter-spacing:-.02em;transform:skewX(-6deg)}
.ds-logo__word span{color:#111;-webkit-text-stroke:2px #fff;paint-order:stroke fill;text-shadow:4px 4px 0 rgba(0,0,0,.35)}
.ds-logo__word .ds-logo__slow{color:#d8231d}
.ds-logo__kana{margin:.25em 0 0;padding:.12em .6em;background:#fff;color:#111;font:900 clamp(10px,2.2vw,20px)/1 "Hiragino Kaku Gothic Pro","Yu Gothic",sans-serif;letter-spacing:.2em;transform:skewX(-6deg)}
.ds-logo__sub{margin:.35em 0 0;color:#fff7c2;font:900 italic clamp(12px,2.8vw,26px)/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.5em;text-shadow:2px 2px 0 #d8231d}
.ds-credit{position:relative;z-index:1;margin:0;color:#fff;font:800 clamp(9px,1.6vw,15px)/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.25em;text-shadow:2px 2px 0 rgba(0,0,0,.6)}
.arcade .game-title__press{position:relative;z-index:1}

/* the console, full width under the monitor */
.console--wide{flex-direction:row;align-items:stretch}
.console--wide .console__top{flex:1 1 60%}
.console--wide .console__front{flex:1 1 40%;flex-wrap:wrap;justify-content:flex-end;border-top:0;border-left:1px solid #000;box-shadow:inset 1px 0 0 rgba(255,255,255,.06)}
.console__cart{appearance:none;border:0;cursor:pointer;width:100%;gap:8px;padding:0 10px;height:64px;transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.console__cart.is-in{transform:translateY(-2px)}
.console__cart:not(.is-in){transform:translateY(-26px)}
.console__cart:focus-visible{outline:2px solid var(--focus,#f2b134);outline-offset:3px}
@media(max-width:680px){.console__key{min-height:44px!important;padding-block:8px!important}}
.console__cart-art{flex:0 0 auto;height:78%;aspect-ratio:1;border-radius:2px;background:#fff url(../assets/release-covers/1166884029.webp) center/cover;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.console__cart .console__cart-label{flex:1 1 auto;width:auto;align-items:flex-start;padding:0 8px}
.console__cart .console__cart-label b{color:#111;letter-spacing:.06em}
.arcade__about{margin:4px 2px 0;max-width:640px}
.arcade__note{margin:.6em 0 0;color:rgba(242,239,232,.82);font-size:.8rem;line-height:1.55}

@media (max-width:760px){
  .console--wide{flex-direction:column}
  .console--wide .console__front{border-left:0;border-top:1px solid #000;justify-content:space-between}
  .ds-logo{margin-top:-8%}
}