/* ---------- title screen ---------- */
.title {
  position: relative;
  min-height: calc(100svh - var(--hud-h));
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--black);
  border-bottom: var(--px) solid var(--white);
}
.title-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  cursor: crosshair;
  touch-action: pan-y;
}
.title-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, .9) 0%, rgba(5, 5, 5, .6) 34%, rgba(5, 5, 5, 0) 54%),
    linear-gradient(0deg, rgba(5, 5, 5, .7) 0%, rgba(5, 5, 5, 0) 34%);
}
.title-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 48px;
  pointer-events: none;
}
.title-in > * { pointer-events: auto; }
.title-copy { max-width: 640px; }
.title-tag {
  width: min(560px, 82vw);
  height: auto;
  margin: 0 0 4px -12px;
  filter: drop-shadow(-5px 0 0 var(--sky)) drop-shadow(5px 0 0 var(--fire));
}
.title-sub {
  margin: 0 0 18px;
  font: 700 clamp(26px, 3.4vw, 46px)/1 var(--f-display);
  letter-spacing: .04em;
  color: var(--white);
  text-shadow: var(--mis);
}
.title-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.start { font-size: 16px; padding-inline: 26px; }

.piece { width: 330px; padding: 16px 18px; }
.piece-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.piece-series { margin: 0; color: var(--muted); }
.piece-title { margin: 6px 0 14px; font: 700 30px/1 var(--f-display); color: var(--white); }
.piece-nav { display: flex; gap: 10px; }
.piece-own { color: var(--white); text-decoration: none; }
.piece-own:hover { color: var(--fire); }
.piece-hint { margin: 12px 0 0; font-size: 12px; }

@media (max-width: 960px) {
  .title { min-height: calc(100svh - var(--hud-h) - 68px); }
  .title-in { grid-template-columns: 1fr; gap: 20px; padding-bottom: 24px; }
  .title-shade { background: linear-gradient(0deg, rgba(5, 5, 5, .96) 0%, rgba(5, 5, 5, .7) 45%, rgba(5, 5, 5, .05) 75%); }
  .piece { width: 100%; }
  .piece-hint { display: none; }
  .title .lede { font-size: 17px; }
}

/* ---------- stage select ---------- */
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 8px;
  min-height: 400px;
  padding: 20px;
  text-decoration: none;
  color: var(--white);
  background: var(--black) var(--colour, none) center/cover;
  border: var(--px) solid var(--white);
  overflow: hidden;
  isolation: isolate;
  transition: transform .1s steps(2), box-shadow .1s steps(2);
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; image-rendering: pixelated; transition: opacity .25s steps(4); }
.stage::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 5, 5, .95) 10%, rgba(5, 5, 5, 0) 62%); }
.stage:hover, .stage:focus-visible, .stage.sel { transform: translate(-3px, -3px); box-shadow: var(--mis-box); outline: none; }
/* on hover the 1-bit image tears and the colour original shows through */
.stage:hover canvas, .stage.sel canvas, .stage:focus-visible canvas { animation: tearimg .5s steps(1) both; opacity: .0; }
@keyframes tearimg {
  0% { opacity: 1; clip-path: inset(0); }
  20% { opacity: 1; clip-path: inset(0 0 40% 0); transform: translateX(-8px); }
  40% { opacity: 1; clip-path: inset(30% 0 20% 0); transform: translateX(10px); }
  60% { opacity: 1; clip-path: inset(62% 0 0 0); transform: translateX(-4px); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .stage:hover canvas { animation: none; } }
.stage-no { color: var(--muted); }
.stage-name { font: 700 34px/.95 var(--f-display); text-shadow: var(--mis); }
.stage-desc { font-size: 15px; line-height: 1.4; color: var(--bone); }
.stage-go { align-self: start; margin-top: 8px; padding: 8px 10px; background: var(--white); color: var(--black); }
.stage--bonus .stage-go { background: var(--fire); color: var(--black); }
@media (max-width: 1060px) { .stages { grid-template-columns: repeat(2, 1fr); } .stage { min-height: 320px; } }
@media (max-width: 560px) { .stages { grid-template-columns: 1fr; } .stage { min-height: 240px; } }

/* ---------- mono images that bleed colour on hover ---------- */
.mono img { filter: grayscale(1) contrast(1.25) brightness(.95); transition: filter .2s steps(3); }
.mono:hover img, .mono:focus-visible img { filter: none; }

/* ---------- featured ---------- */
.feature-in { display: grid; grid-template-columns: .9fr 1.4fr; gap: 48px; align-items: center; }
.feature-copy .btn { margin-top: 18px; }
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fcard { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.fcard-img { position: relative; aspect-ratio: 4 / 5; border: var(--px) solid var(--white); overflow: hidden; background: #111; transition: box-shadow .1s steps(2); }
.fcard-img img { width: 100%; height: 100%; object-fit: cover; }
.fcard:hover .fcard-img { box-shadow: var(--mis-box); }
.fcard p { margin: 0; font: 700 20px/1.1 var(--f-display); color: var(--white); }
.fcard small { font: 400 12px/1 var(--f-hud); text-transform: uppercase; color: var(--bone); }
@media (max-width: 900px) { .feature-in { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .feature-cards { grid-template-columns: repeat(2, 1fr); } .fcard:nth-child(3) { display: none; } }

/* ---------- high scores ---------- */
.scores { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.score-table { list-style: none; margin: 0; padding: 18px 22px; font: 400 14px/1 var(--f-hud); text-transform: uppercase; }
.score-table li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid #333; align-items: center; }
.score-table li:last-child { border-bottom: 0; }
.score-table span:first-child { color: var(--muted); }
.score-table b { font-weight: 400; color: var(--white); font-size: 20px; }
.score-table li:first-child b { text-shadow: var(--mis); }
.score-table li.you span:first-child, .score-table li.you b { color: var(--fire); }
@media (max-width: 900px) { .scores { grid-template-columns: 1fr; } .score-table { font-size: 12px; } .score-table li { grid-template-columns: 44px 1fr auto; } }

/* ---------- free loot ---------- */
.loot-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.loot-cards img { aspect-ratio: 9 / 16; width: 100%; object-fit: cover; border: 2px solid var(--white); filter: grayscale(1) contrast(1.2); }
.loot-cards img:nth-child(2) { filter: none; box-shadow: var(--mis-box); }
.loot-cards img:nth-child(odd) { transform: translateY(14px); }