/* Akihabara / second art-direction pass. Original raster art lives in images/art. */
:root {
  --pop-pink: #ff86bd;
  --pop-cyan: #62eee9;
  --pop-blue: #163fcb;
  --pop-lime: #cefa3d;
}

body {
  background-color: #ece9e0;
  background-image: repeating-linear-gradient(90deg, transparent 0 23px, #1a1a1a08 23px 24px);
}
.shop-line { background: var(--pop-blue); border-bottom: 3px solid var(--yellow); }
.shop-line > span:first-child { color: var(--yellow); }
.masthead { min-height: 142px; }
.masthead__jp b { font-size: 1.75rem; }
.shop-labels { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.shop-labels span {
  display: inline-block; padding: 2px 9px; border: 1px solid var(--ink);
  font: .8125rem var(--jp); background: var(--yellow); transform: rotate(-3deg);
  box-shadow: 2px 2px 0 var(--ink);
}
.shop-labels span:nth-child(2) { background: var(--pop-pink); transform: rotate(3deg); }
.shop-labels span:nth-child(3) { background: var(--pop-cyan); transform: rotate(-2deg); }
.masthead__free { border: 2px solid var(--ink); padding: 4px 12px; background: var(--yellow); transform: rotate(3deg); box-shadow: 3px 3px 0 var(--ink); }
.rail { border-bottom: 4px solid var(--red); }
.rayons .nav-download { background: var(--pop-pink); }
.allee { border-color: var(--ink); }

/* The Hudson storefront sits behind a glassy, slightly CRT-like display. */
.devanture {
  background-color: #fffef7;
  background-image: radial-gradient(#c5b87750 .6px, transparent .6px);
  background-size: 7px 7px;
  padding-top: 40px;
  padding-bottom: 40px;
  gap: 40px;
}
.hero-ribbon {
  display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%;
  background: var(--yellow); border: 1px solid var(--ink); padding: 5px 10px 5px 5px;
  box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg); margin-bottom: 26px;
}
.hero-ribbon > span { background: var(--red); color: white; font: 1rem var(--jp); padding: 2px 5px; white-space: nowrap; }
.hero-ribbon b { font: 700 .75rem/1.2 var(--display); letter-spacing: .6px; }
.devanture h1 { text-shadow: 3px 3px 0 var(--yellow); }
.devanture h1 > span { text-shadow: 3px 3px 0 var(--yellow), 5px 5px 0 var(--ink); }
.devanture h1 > i { text-shadow: none; background: var(--ink); color: white; display: table; padding: 4px 9px; letter-spacing: 6px; transform: rotate(-2deg); }
.hero-heading { margin-top: 25px; }
.devanture__sous { background: #fffef7; }
.devanture__btns .bt--vide { background: var(--pop-cyan); box-shadow: 3px 3px 0 var(--ink); }
.devanture__btns .bt--vide:hover { background: var(--yellow); }
.hero-display {
  min-height: 630px; border: 3px solid var(--ink); margin-right: 7px;
  background-color: #071126;
  background-image: url('../images/art/hudson-shop.png?v=20260912');
  background-position: center 50%; background-size: cover; background-repeat: no-repeat;
  box-shadow: 8px 8px 0 var(--pop-blue), 0 0 34px #164fd533;
}
.hero-display::before {
  content: ''; display: block; position: absolute; inset: 42px 0; z-index: 2;
  background:
    linear-gradient(180deg, #06152a12 0%, transparent 36%, #02071170 100%),
    radial-gradient(circle at 16% 16%, #34bfff2b, transparent 34%),
    radial-gradient(circle at 82% 72%, #ff2f8830, transparent 37%);
  box-shadow: inset 0 0 48px #02071188;
  pointer-events: none;
}
.hero-display::after {
  content: ''; position: absolute; inset: 42px 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, #07112618 3px 4px),
    linear-gradient(112deg, transparent 20%, #ffffff20 43%, #c9f7ff3d 48%, transparent 56%);
  background-size: 100% 100%, 250% 100%;
  background-position: 0 0, 110% 0;
  mix-blend-mode: screen;
  animation: hudson-glass 8s ease-in-out infinite;
}
.shop-art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 50%; z-index: 1;
  filter: saturate(1.08) contrast(1.06) brightness(.9);
  transform: scale(1.002);
}
.hero-display > .shop-art { transition: transform 1.1s ease, filter 1.1s ease; }
.hero-display:hover > .shop-art { transform: scale(1.025); filter: saturate(1.14) contrast(1.07) brightness(.94); }
@keyframes hudson-glass {
  0%, 18% { background-position: 0 0, 110% 0; opacity: .48; }
  58%, 100% { background-position: 0 0, -110% 0; opacity: .68; }
}
.display-top, .display-bottom { background: var(--ink); z-index: 5; }
.display-top { color: var(--yellow); font-size: .6875rem; padding: 11px; }
.display-bottom { font-size: .6875rem; padding: 11px; }
.hero-card {
  width: 40%; max-width: 235px; top: auto; bottom: 46px; left: 6%;
  transform: rotate(-14deg); filter: drop-shadow(5px 7px 0 #15192c88) drop-shadow(0 0 13px #62eee966);
  z-index: 4;
  will-change: transform;
  transform-origin: center;
}
.hero-display > :not(.hero-card):not(.shop-art) { transition: none; animation: none; }
.hero-display .hero-card:hover { transform: rotate(-10deg); }
.price-tag { top: 65px; right: -23px; z-index: 6; transform: rotate(10deg); border-width: 3px; padding: 10px 18px; box-shadow: 5px 5px 0 var(--ink); }
.price-tag > b { font-size: 6rem; }
.price-tag > span { font-size: .75rem; }
.price-tag > small { font-size: .75rem; }
.display-sticker { left: auto; right: 18px; bottom: 72px; z-index: 5; background: var(--pop-blue); transform: rotate(7deg); box-shadow: 4px 4px 0 var(--ink); }
.hero-seal {
  position: absolute; left: -18px; top: 62px; z-index: 5; text-align: center;
  color: var(--ink); background: var(--pop-pink); border: 3px solid var(--ink);
  outline: 2px solid var(--pop-pink); outline-offset: 3px;
  padding: 15px 12px; font: .8125rem var(--jp); transform: rotate(-9deg);
}
.hero-seal b { font: 2rem var(--jp); display: block; }
.hero-note {
  position: absolute; left: 8px; bottom: 43px; z-index: 5; font: 800 .75rem/1.2 var(--display);
  color: var(--ink); background: var(--pop-cyan); border: 2px solid var(--ink);
  padding: 6px 10px; transform: rotate(-5deg); box-shadow: 2px 2px 0 var(--ink);
}
.shop-ticker { background: var(--red); color: white; border-width: 3px; }
.shop-ticker b { color: var(--yellow); }
.shop-ticker .ticker-jp { background: var(--yellow); color: var(--ink); padding: 3px 9px; transform: rotate(-3deg); }

/* Fluorescent point-of-sale labels, all linking to existing departments. */
.counter-picks {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  padding: 26px 79px 30px;
  background: var(--paper); border-bottom: 2px solid var(--ink);
}
.counter-pick {
  color: var(--ink); padding: 12px 13px; border: 2px solid var(--ink);
  text-decoration: none; position: relative; display: flex; flex-direction: column;
  box-shadow: 4px 4px 0 var(--ink); transform: rotate(-2deg);
  transition: transform .18s, box-shadow .18s;
}
.counter-pick:hover { transform: translateY(-4px) rotate(0); box-shadow: 5px 7px 0 var(--ink); }
.counter-pick--pink { background: var(--pop-pink); }
.counter-pick--yellow { background: var(--yellow); transform: rotate(1deg); }
.counter-pick--cyan { background: var(--pop-cyan); transform: rotate(-1deg); }
.pick-jp { font: 1rem var(--jp); width: fit-content; border-bottom: 1px solid var(--ink); margin-bottom: 6px; }
.counter-pick b { display: block; font: 800 1.5rem/1.1 var(--display); padding-right: 22px; }
.counter-pick small { display: block; font: .875rem/1.4 var(--body); margin-top: 5px; }
.counter-pick i { position: absolute; right: 11px; top: 11px; font: 1.75rem/1 var(--body); }

/* Each department has its own ink colour, like adjacent shop placards. */
.etiq__n { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: var(--yellow); color: var(--ink); }
.etiq__ja { color: var(--ink); background: var(--pop-pink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(5deg); }
.cageots { gap: 16px; border: 0; }
.cageot { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: #fff; padding-top: 24px; }
.cageot:hover { transform: translateY(-3px); }
.cageot:nth-child(3n + 1) { border-top: 10px solid var(--pop-blue); }
.cageot:nth-child(3n + 2) { border-top: 10px solid var(--red); }
.cageot:nth-child(3n) { border-top: 10px solid #118575; }
.cageot__ic { float: right; margin-left: 10px; color: var(--ink); background: var(--yellow); border: 1px solid var(--ink); transform: rotate(6deg); font-weight: bold; }
.cageot h3 { min-height: 62px; }
.cageot:nth-child(even) .cageot__ic { background: var(--pop-pink); transform: rotate(-6deg); }
.cageot:nth-child(3n) .cageot__ic { background: var(--pop-cyan); }

#galerie { background: var(--pop-blue); color: white; border-block: 3px solid var(--ink); position: relative; }
.department-label {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 2px solid var(--ink); background: var(--yellow); color: var(--ink);
  padding: 8px 16px; margin: -9px 0 30px; transform: rotate(-1deg); box-shadow: 5px 5px 0 var(--ink);
}
.department-label > span:first-child { font: 1.625rem var(--jp); }
.department-label b { font: 800 1.1875rem var(--display); letter-spacing: 2px; }
.department-label > span:last-child { font: 2rem/1 var(--body); }
#galerie .chapo { color: white; }
#galerie .etiq__ja { color: var(--ink); background: var(--pop-cyan); }
.ecrans { gap: 25px; }
.ecran { background: white; color: var(--ink); padding: 10px 10px 18px; border: 2px solid var(--ink); box-shadow: 5px 5px 0 #082060; }
.ecran:nth-child(3n + 2) { transform: rotate(1deg); }
.ecran:nth-child(3n) { transform: rotate(-1deg); }
.ecran .shot-link { background: #ddf7f5; padding: 10px; border: 1px solid var(--ink); }
.ecran:nth-child(2n) .shot-link { background: #ffdef0; }
.ecran:nth-child(3n) .shot-link { background: #fff4ba; }
.ecran__mot { padding-inline: 6px; }
.ecran__n { left: 4px; color: var(--ink); background: var(--yellow); padding: 0 4px; transform: rotate(-4deg); }
.ecran__mot p { color: #54565c; }
.shot-zoom { background: var(--yellow); color: var(--ink); border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); }

#hexa { background: #fffdf4; }
#hexa .etiq__ja { background: var(--pop-lime); }
.editor-preview { box-shadow: 8px 8px 0 var(--pop-pink); border: 2px solid var(--ink); transform: rotate(-.5deg); }
.editor-preview__bar { background: var(--pop-blue); }
.technical { background: white; padding-inline: 13px; }

/* A generated arcade illustration, explicitly separate from app screenshots. */
#cheats { background: #131727; overflow: hidden; }
.arcade-banner {
  height: 285px; margin: -65px -79px 42px; position: relative;
  border-bottom: 5px solid var(--yellow); background: #080f2b;
}
.arcade-banner > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.arcade-banner__label {
  position: absolute; left: 34%; top: 25px; background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink); padding: 14px 20px; transform: rotate(-6deg);
  box-shadow: 6px 6px 0 var(--red); text-align: center;
}
.arcade-banner__label > span { font: 1rem var(--jp); }
.arcade-banner__label b { display: block; font: 900 3.125rem/1.1 var(--display); }
.arcade-banner__label small { display: block; font: 600 1rem var(--body); border-top: 2px solid var(--ink); padding-top: 5px; margin-top: 5px; }
.arcade-banner__credit { position: absolute; right: 14px; bottom: 12px; padding: 3px 7px; background: #080f2b; color: #eee; font: .625rem var(--mono); }
#cheats .etiq__ja { color: var(--ink); background: var(--pop-pink); border-color: var(--ink); }
.score { background: #1c2238; border: 2px solid var(--pop-cyan); box-shadow: 5px 5px 0 #050919; }
.score--sante { border-color: var(--pop-pink); --accent: var(--pop-pink); }
.score--vies { --accent: var(--pop-cyan); }
#cheats .technical { background: #1c2238; border: 1px solid #687492; }
#cheats > .avis { background: #1c2238; }

#materiel { background: #f4f3ef; }
.hardware-labels { display: flex; justify-content: space-between; gap: 15px; align-items: center; background: #fff; border: 1px solid #b8b7b1; padding: 8px 15px; margin-bottom: 28px; box-shadow: 3px 3px 0 #d8d7d1; }
.hardware-labels span { font: 1rem var(--jp); }
.hardware-labels b { font: 800 1.3125rem var(--display); }
.socle { border: 1px solid #c9c8c2; box-shadow: 4px 4px 0 #deddd7; background: #fff; }
.socle__verre,
.socle:nth-child(2) .socle__verre,
.socle:nth-child(3) .socle__verre { background: transparent; border-width: 1px; }
.socle__verre img { mix-blend-mode: normal; }
.socle h3 b { background: #efeee9; border: 1px solid #aaa9a3; box-shadow: none; }
.socle__txt { padding-top: 20px; }
#origine { background: #f5e8f1; }
.fiche { box-shadow: 8px 8px 0 var(--pop-blue); border-width: 2px; }
#soft { background: var(--red); border-top: 7px solid var(--yellow); }
#soft .etiq__ja { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
#soft .etiq__n { background: var(--yellow); color: var(--ink); }
.ticket { border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.ticket-sticker { position: absolute; top: -30px; right: -24px; background: var(--pop-lime); color: var(--ink); border: 2px solid var(--ink); padding: 9px 13px; text-align: center; font: .8125rem var(--jp); transform: rotate(11deg); box-shadow: 3px 3px 0 var(--ink); }
.ticket-sticker b { display: block; font: 800 1.75rem/.95 var(--display); margin-top: 4px; }
.ticket > h3 { padding-right: 36px; }
.rideau { border-top: 8px solid var(--pop-cyan); }
.rideau__nom { color: var(--yellow); }

@media (max-width: 1340px) {
  .counter-picks { padding-inline: 45px; }
  .arcade-banner { margin: -55px -45px 38px; }
  .hero-display { min-height: 645px; }
  .counter-pick b { font-size: 1.3125rem; }
}
@media (max-width: 1050px) {
  .masthead { min-height: 105px; }
  .devanture { gap: 28px; }
  .hero-ribbon { padding-right: 6px; }
  .hero-ribbon b { font-size: .6875rem; }
  .hero-ribbon > span { font-size: .875rem; }
  .hero-display { min-height: 655px; }
  .price-tag { right: -13px; top: 78px; padding: 9px 13px; }
  .price-tag > b { font-size: 4.5rem; }
  .price-tag > span, .price-tag > small { font-size: .625rem; }
  .hero-seal { top: 50px; left: -13px; padding: 12px 8px; font-size: .6875rem; }
  .hero-seal b { font-size: 1.5rem; }
  .hero-card { width: 46%; bottom: 66px; }
  .display-sticker { padding: 11px; right: 9px; }
  .display-sticker b { font-size: 1.625rem; }
  .display-top, .display-bottom { font-size: .5625rem; letter-spacing: 0; }
  .counter-picks { padding-inline: 35px; gap: 13px; }
  .counter-pick { padding: 10px; }
  .counter-pick b { font-size: 1.1875rem; }
  .counter-pick small { font-size: .8125rem; }
  .pick-jp { font-size: .875rem; }
  .arcade-banner { margin: -45px -35px 35px; height: 265px; }
  .hardware-labels span:last-child { display: none; }
}
@media (max-width: 760px) {
  .masthead { min-height: 95px; }
  .devanture { padding-top: 25px; gap: 28px; padding-bottom: 30px; }
  .hero-ribbon { margin-bottom: 23px; }
  .hero-ribbon b { font-size: .75rem; }
  .hero-heading { margin-top: 23px; }
  .hero-display { min-height: 540px; width: calc(100% - 8px); margin: 0 auto; }
  .hero-display { background-position: center 53%; }
  .shop-art { object-position: center 53%; }
  .hero-card { width: 40%; max-width: 225px; left: 6%; top: auto; bottom: 46px; transform: rotate(-14deg); }
  .hero-display .hero-card:hover { transform: rotate(-10deg); }
  .price-tag { top: 54px; right: -10px; }
  .price-tag > b { font-size: 5rem; }
  .hero-seal { top: 61px; left: -11px; }
  .display-sticker { bottom: 62px; right: 16px; }
  .display-top, .display-bottom { font-size: .625rem; }
  .counter-picks { padding: 23px 25px 27px; grid-template-columns: 1fr; gap: 14px; }
  .counter-pick { display: grid; grid-template-columns: 98px 1fr; gap: 13px; align-items: center; padding: 11px 14px; }
  .pick-jp { border-bottom: 0; border-right: 1px solid var(--ink); padding-right: 10px; margin-bottom: 0; font-size: .875rem; }
  .counter-pick b { font-size: 1.25rem; }
  .counter-pick small { font-size: .8125rem; margin-top: 3px; }
  .counter-pick i { font-size: 1.25rem; top: 9px; right: 9px; }
  .cageots { gap: 14px; }
  .cageot h3 { font-size: 1.375rem; }
  .cageot__ic { float: none; margin-left: 0; }
  .department-label { gap: 9px; padding: 8px 12px; margin-top: 0; }
  .department-label > span:first-child { font-size: 1.375rem; white-space: nowrap; }
  .department-label b { font-size: 1rem; letter-spacing: .5px; }
  .department-label > span:last-child { display: none; }
  .ecrans { gap: 20px; }
  .ecran { padding: 8px 8px 14px; }
  .ecran:nth-child(n) { transform: none; }
  .ecran__mot h3 { font-size: 1.375rem; }
  .ecran__n { left: 3px; }
  .arcade-banner { margin: -38px -22px 31px; height: 230px; }
  .arcade-banner > img { object-position: 60% center; }
  .arcade-banner__label { left: 19px; top: 18px; padding: 10px 13px; }
  .arcade-banner__label b { font-size: 2.625rem; }
  .arcade-banner__label small { font-size: .875rem; }
  .arcade-banner__label > span { font-size: .875rem; }
  .arcade-banner__credit { font-size: .5625rem; right: 9px; }
  .hardware-labels { padding: 9px 12px; gap: 12px; }
  .hardware-labels span { font-size: .875rem; }
  .hardware-labels b { font-size: 1.125rem; }
  .ticket-sticker { right: -12px; top: -21px; padding: 7px 9px; }
  .ticket-sticker b { font-size: 1.375rem; }
}
@media (max-width: 420px) {
  .hero-ribbon b { font-size: .6875rem; }
  .hero-display { min-height: 470px; }
  .hero-seal { font-size: .625rem; top: 60px; }
  .hero-seal b { font-size: 1.375rem; }
  .price-tag { padding: 7px 10px; }
  .price-tag > b { font-size: 4.3125rem; }
  .price-tag > span, .price-tag > small { font-size: .625rem; }
  .hero-card { width: 43%; bottom: 53px; }
  .display-sticker { right: 11px; bottom: 64px; }
  .hero-note { font-size: .6875rem; }
  .counter-picks { padding-inline: 22px; }
  .counter-pick { grid-template-columns: 84px 1fr; gap: 10px; padding: 10px; }
  .counter-pick b { font-size: 1.125rem; }
  .pick-jp { font-size: .75rem; }
  .cageot h3 { min-height: 0; font-size: 1.5rem; }
  .cageot__ic { float: right; }
  .arcade-banner { margin: -35px -18px 30px; }
  .hardware-labels span { font-size: .75rem; }
  .hardware-labels b { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-display::after { animation: none; background-position: 0 0, 15% 0; }
  .hero-display > .shop-art, .hero-display:hover > .shop-art { transform: scale(1.002); }
  .hero-display .hero-card:hover { transform: rotate(-14deg); }
  .counter-pick:hover, .cageot:hover { transform: none; }
}
@media print {
  .counter-picks, .shop-labels, .hero-ribbon, .ticket-sticker { display: none; }
  .arcade-banner { margin: 0 0 20px; }
  .ecran { break-inside: avoid; }
}