/* ==========================================================================
   PIXEL MANIA — implemented from the Figma "Design System (VID)" › Web Game
   Stage is a fixed 1440×1024 canvas (the Figma frame size) scaled to fit
   the viewport, so every coordinate below maps 1:1 to the design.
   ========================================================================== */

@font-face {
  font-family: "Press Start 2P";
  src: url("../assets/fonts/PressStart2P-400.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-VF.woff2") format("woff2");
  font-weight: 100 800;
  font-display: block;
}

:root {
  /* palette (Neubrutalism tokens from the design system) */
  --blue: #3300FF;
  --cyan: #00BFFF;
  --pink: #FE90E7;
  --magenta: #FF00F5;
  --lime: #C2EF34;
  --orange: #FF5200;
  --yellow: #FAFF00;
  --red: #FF0000;
  --teal: #25988E;
  --cream: #FFFAEE;
  --ink: #292929;
  --gray: #807F7E;
  --hover-cell: #D5D7E1;

  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  -webkit-font-smoothing: antialiased;
}
body { transition: background-color .4s; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Stage / screens
   -------------------------------------------------------------------------- */
#viewport { position: fixed; inset: 0; }

#stage {
  --bg: #000;
  position: absolute;
  left: 50%; top: 50%;
  width: 1440px; height: 1024px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;               /* keep the difference blend inside the stage */
  font-family: var(--font-pixel);
  color: #000;
}
#stage.theme-intro   { --bg: #000000; }
#stage.theme-loading { --bg: #3300FF; }
#stage.theme-board   { --bg: #25988E; }
#stage.theme-thanks  { --bg: #3300FF; }
#stage.is-dissolving { transition: background-color 1s ease-in-out; }

.screen {
  position: absolute; inset: 0;
  visibility: hidden; opacity: 0;
}
.screen.is-active { visibility: visible; opacity: 1; }
.screen.is-dissolving { transition: opacity 1s ease-in-out, visibility 0s linear 1s; }
.screen.is-dissolving.is-active { transition: opacity 1s ease-in-out; }

.deco {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* --------------------------------------------------------------------------
   Pixel field ("Pixel Animation" component — 409 tiny squares, DIFFERENCE blend)
   -------------------------------------------------------------------------- */
.pixels {
  position: absolute; inset: 0;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 0;
}
.pixels i {
  position: absolute;
  display: block;
  opacity: var(--o);
  animation: twinkle var(--dur, 2s) steps(1, end) infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes twinkle {
  0%   { opacity: var(--o); }
  72%  { opacity: calc(var(--o) * 0.12); }
  100% { opacity: calc(var(--o) * 0.12); }
}

/* Pixel-notched corner shape: 3 stair steps of --sx × --sy (set by the component) */
.pxbtn__shadow, .pxbtn__face, .pxinput__shape, .chip::before {
  clip-path: polygon(
    calc(var(--sx) * 2) 0,
    calc(100% - var(--sx) * 2) 0,
    calc(100% - var(--sx) * 2) var(--sy),
    calc(100% - var(--sx)) var(--sy),
    calc(100% - var(--sx)) calc(var(--sy) * 2),
    100% calc(var(--sy) * 2),
    100% calc(100% - var(--sy) * 2),
    calc(100% - var(--sx)) calc(100% - var(--sy) * 2),
    calc(100% - var(--sx)) calc(100% - var(--sy)),
    calc(100% - var(--sx) * 2) calc(100% - var(--sy)),
    calc(100% - var(--sx) * 2) 100%,
    calc(var(--sx) * 2) 100%,
    calc(var(--sx) * 2) calc(100% - var(--sy)),
    var(--sx) calc(100% - var(--sy)),
    var(--sx) calc(100% - var(--sy) * 2),
    0 calc(100% - var(--sy) * 2),
    0 calc(var(--sy) * 2),
    var(--sx) calc(var(--sy) * 2),
    var(--sx) var(--sy),
    calc(var(--sx) * 2) var(--sy)
  );
}

/* --------------------------------------------------------------------------
   Shared components: pixel buttons, chips, inputs
   -------------------------------------------------------------------------- */
.pxbtn {
  --sx: 3.3333px; --sy: 4.2162px;         /* Large size step geometry (10×52 end caps) */
  --btn-bg: var(--lime);
  --btn-fg: var(--ink);
  --btn-shadow: #fff;                      /* Tone=Light → white hard shadow */
  position: relative;
  display: inline-block;
  height: 64px;                            /* 52 face + 12 travel */
  min-width: 233px;
  margin: 0; padding: 0; border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.pxbtn:focus-visible { outline: 3px dashed #fff; outline-offset: 6px; }
.pxbtn__shadow,
.pxbtn__face {
  transition: transform .12s ease-out, opacity .12s ease-out;
}
.pxbtn__shadow {
  position: absolute;
  left: 0; top: 6px;
  width: 100%; height: 52px;
  background: var(--btn-shadow);
}
.pxbtn__face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 85px;                         /* 9 cap + 64 content pad + 12 text pad */
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 400 16px/28px var(--font-pixel);
  letter-spacing: -0.64px;
  white-space: nowrap;
}
.pxbtn__face::after {                      /* Hover: 15% black overlay */
  content: "";
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity .12s;
}
.pxbtn__label { position: relative; z-index: 1; }
.pxbtn--label-sm .pxbtn__face { font-size: 14px; letter-spacing: 0; color: #000; }
.pxbtn--fixed { width: 233px; min-width: 0; }
.pxbtn--fixed .pxbtn__face { padding: 0; }
.pxbtn--pink   { --btn-bg: var(--pink); }
.pxbtn--yellow { --btn-bg: var(--yellow); --btn-fg: var(--ink); }
.pxbtn--red    { --btn-bg: var(--red); --btn-fg: #fff; }
.pxbtn--dark   { --btn-shadow: #000; height: 52px; }   /* Tone=Dark: black shadow, 52 tall */

/* Light: hover sinks 6px (face + shadow), pressed sinks 12px and drops the shadow */
.pxbtn:hover .pxbtn__face::after { opacity: .15; }
.pxbtn:not(.pxbtn--dark):hover .pxbtn__face,
.pxbtn:not(.pxbtn--dark):hover .pxbtn__shadow { transform: translateY(6px); }
.pxbtn:not(.pxbtn--dark):active .pxbtn__face { transform: translateY(12px); }
.pxbtn:not(.pxbtn--dark):active .pxbtn__shadow { opacity: 0; }
.pxbtn--dark:active .pxbtn__shadow { opacity: 0; }
.pxbtn[disabled] { --btn-bg: #D5D7E1; --btn-fg: var(--gray); cursor: default; }
.pxbtn[disabled] .pxbtn__shadow { display: none; }

/* Pixel input (Input Field Type component, 432×52) */
.pxinput {
  --sx: 3px; --sy: 4.2162px;
  position: relative;
  width: 432px; height: 52px;
  filter: drop-shadow(0 4px 0 var(--gray));
}
.pxinput__shape {
  position: absolute; inset: 0;
  background: #fff;                        /* end caps + 4px top/bottom border */
}
.pxinput__control {
  position: absolute;
  left: 9px; right: 9px; top: 4px; bottom: 4px;
  width: calc(100% - 18px);
  margin: 0; padding: 0 10px; border: 0;
  border-radius: 0;
  background: #E9E9E9;                     /* State=Unfilled */
  font: 400 16px/28px var(--font-pixel);
  letter-spacing: -0.64px;
  color: #000;
  text-align: center;
  text-transform: uppercase;               /* State=Filled shows the name in caps */
  caret-color: #000;
  outline: none;
  transition: background-color .15s;
}
.pxinput__control::placeholder { color: var(--gray); text-transform: none; opacity: 1; }
.pxinput__control:focus,
.pxinput__control:not(:placeholder-shown) { background: #fff; }  /* Typing / Filled */
.pxinput.is-invalid { animation: shake .3s ease-in-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Legend chips (Buttons › Small › Pressed variant with contrasting edge) */
.chip {
  --sx: 3.3333px; --sy: 3px;
  position: relative;
  width: 170px; height: 46px;
  list-style: none;
}
.chip::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 4.5px; bottom: 4.5px;
  background: var(--edge);
}
.chip__body {
  position: absolute;
  left: 9px; right: 9px; top: 4.5px; bottom: 4.5px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--edge);
  background: var(--fill);
  color: var(--fg);
  font: 400 14px/28px var(--font-pixel);
  white-space: nowrap;
}
.chip--1 { --fill: #3300FF; --edge: #FFFAEE; --fg: #FFFFFF; }
.chip--2 { --fill: #FF5200; --edge: #3300FF; --fg: #3300FF; }
.chip--3 { --fill: #C2EF34; --edge: #FF5200; --fg: #FF5200; }
.chip--4 { --fill: #FF00F5; --edge: #C2EF34; --fg: #C2EF34; }
.chip--5 { --fill: #FFFFFF; --edge: #FF00F5; --fg: #FF00F5; }

/* --------------------------------------------------------------------------
   INTRO
   -------------------------------------------------------------------------- */
.logo {
  position: absolute;
  left: 165px; top: 128px;
  width: 1110px; height: 129.43px;
  margin: 0;
  background: var(--blue);
  -webkit-mask: url("../assets/img/logo.png") center / 100% 100% no-repeat;
          mask: url("../assets/img/logo.png") center / 100% 100% no-repeat;
  overflow: hidden;
  animation: logo-tone 6.4s steps(1, end) infinite;   /* 8 states × 0.8s (Logo Animat) */
}
.logo__shine {
  position: absolute;
  top: -20px; bottom: -20px;
  left: -400px; width: 220px;
  background: #D6CCFF;
  transform: skewX(-24deg);
  animation: logo-shine 6.4s steps(1, end) infinite;
}
@keyframes logo-tone {
  0%, 74.99% { background-color: #3300FF; }
  75%, 100%  { background-color: rgba(236, 0, 0, .8); }
}
@keyframes logo-shine {
  0%    { left: -400px; width: 220px; background-color: #D6CCFF; }
  12.5% { left: -40px; }
  25%   { left: 170px; }
  37.5% { left: 380px; }
  50%   { left: 590px; }
  62.5% { left: 800px; }
  75%   { left: 1000px; background-color: #FCD4D4; }
  87.5% { left: 560px; width: 620px; background-color: #FCD4D4; }
  100%  { left: 560px; width: 620px; background-color: #FCD4D4; }
}

.tagline {
  position: absolute;
  left: 393px; top: 334.9px;
  width: 738px; height: 64px;
}
.tagline__frame {
  position: absolute; left: 0; top: 0;
  width: 738px; height: 64px;
  opacity: 0;
  animation: cycle3 2.4s steps(1, end) infinite;   /* 3 states × 0.8s */
}
.tagline__frame--2 { animation-delay: .8s; }
.tagline__frame--3 { animation-delay: 1.6s; }
@keyframes cycle3 {
  0%      { opacity: 1; }
  33.333% { opacity: 0; }
  100%    { opacity: 0; }
}

.intro-card {
  position: absolute;
  left: 232px; top: 546px;
  width: 976px; height: 372px;
  margin: 0;
  padding: 48px 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  background: var(--cyan);
  box-shadow: 0 0 0 6px var(--blue);       /* 6px outside stroke */
}
.intro-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  width: 640px;
}
.intro-card__arrow { left: -6.5px; top: -6px; width: 279px; }
.corner-mark {
  position: absolute;
  width: 18px; height: 18px;
  color: var(--blue);
}

.caption {
  position: relative;
  isolation: isolate;                      /* keeps the ::before stroke layer above the card */
  width: 640px;
  margin: 0;
  font: 400 20px/36px var(--font-pixel);
  text-align: center;
  color: #000;
  white-space: nowrap;
}
/* 17px lime "outside stroke" + white hard shadow, drawn behind the text */
.caption::before {
  content: attr(data-text);
  position: absolute; inset: 0;
  white-space: pre;
  color: var(--lime);
  -webkit-text-stroke: 34px var(--lime);
  filter: drop-shadow(0 6px 0 #fff);
  z-index: -1;
}
.caption span { position: relative; }

.footer {
  position: absolute;
  left: 26px; top: 994px;
  width: 1390px;
  display: flex;
  align-items: center;
  gap: 150px;
  font: 700 12px/16px var(--font-mono);
  letter-spacing: .18px;
  color: #000;                             /* as designed (black on black) */
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   LOADING
   -------------------------------------------------------------------------- */
.loading__ground-mask {
  position: absolute;
  left: 0; top: 716px;
  width: 1440px; height: 308px;
  background: #000;
}
.loading__ground {
  position: absolute;
  left: 0; top: 424px;
  height: 360px; width: 6892px;
  display: flex;
  animation: ground-scroll 14s linear infinite;
  will-change: transform;
}
.loading__ground img { width: 3446px; height: 360px; flex: none; display: block; }
@keyframes ground-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-3446px); }
}

.bird {
  position: absolute;
  aspect-ratio: 1;
}
.bird::before, .bird::after {
  content: "";
  position: absolute; inset: 0;
  background: url("../assets/img/bird-1.svg") center / 100% 100% no-repeat;
  animation: flap .4s steps(1, end) infinite;
  animation-delay: var(--flap-delay, 0s);
}
.bird::after { background-image: url("../assets/img/bird-2.svg"); animation-direction: reverse; }
@keyframes flap { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

.dino {
  position: absolute;
  left: 520px; top: 573.2px;
  width: 133px; height: 139.65px;
}
.dino::before, .dino::after {
  content: "";
  position: absolute; inset: 0;
  background: url("../assets/img/dino-left.svg") center / 100% 100% no-repeat;
  animation: flap .24s steps(1, end) infinite;
}
.dino::after { background-image: url("../assets/img/dino-right.svg"); animation-direction: reverse; }

.loading-text {
  position: absolute;
  left: 967px; top: 540px;
  width: 468px; height: 120px;
}
.loading-text__frame {
  position: absolute; left: 0; top: 0;
  width: 468px; height: 120px;
  opacity: 0;
  animation: cycle3 .75s steps(1, end) infinite;
}
.loading-text__frame--2 { animation-delay: .25s; }
.loading-text__frame--3 { animation-delay: .5s; }

/* --------------------------------------------------------------------------
   GAME BOARD
   -------------------------------------------------------------------------- */
.legend {
  position: absolute;
  left: 215px; top: 99px;
  display: flex;
  gap: 40px;
  margin: 0; padding: 0;
  list-style: none;
}

.board {
  position: absolute;
  left: 209px; top: 171px;
  width: 1022px; height: 682px;
  background: url("../assets/img/board-frame.svg") 0 0 / 1022px 682px no-repeat;
}
.board__inner {
  position: absolute;
  left: 15px; top: 15px;
  width: 992px; height: 652px;
  padding: 20px;
  box-shadow: 0 0 0 3px var(--pink);       /* 3px outside stroke */
}
.grid {
  display: grid;
  grid-template-columns: repeat(28, 34px);
  grid-auto-rows: 34px;
  width: 952px; height: 612px;
}
.cell {
  --c: var(--cream);
  width: 34px; height: 34px;
  margin: 0; padding: 0; border: 0;
  border-radius: 0;
  background-color: var(--c);
  /* 1.5px dashed (6/6) #807F7E outline with the 10px top-left radius, half inside each cell */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M0 10A10 10 0 0 1 10 0H34V34H0Z' fill='none' stroke='%23807F7E' stroke-width='1.5' stroke-dasharray='6 6'/%3E%3C/svg%3E");
  background-size: 34px 34px;
  cursor: pointer;
  transition: background-color .08s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.cell:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; z-index: 1; }
.cell[data-level="0"]:hover { background-color: var(--hover-cell); }
.cell[data-level="1"] { --c: #3300FF; }
.cell[data-level="2"] { --c: #FF5200; }
.cell[data-level="3"] { --c: #C2EF34; }
.cell[data-level="4"] { --c: #FF00F5; }

.board-actions {
  position: absolute;
  left: 0; right: 0; top: 914px;
  display: flex;
  justify-content: center;
  gap: 64px;
}
.board-actions .pxbtn[hidden] { display: none; }

/* ---- How To Play modal ---- */
.dim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .8);
  display: none;
  z-index: 5;
}
.dim.is-open { display: block; }
.howto {
  position: absolute;
  left: 180px; top: 112px;
  width: 1080px; height: 800px;
  background: var(--cream);
  box-shadow: 0 0 0 8px var(--lime);       /* 8px outside stroke */
}
.howto__header {
  position: absolute;
  left: 0; top: 0;
  width: 1080px; height: 112px;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 8px 32px 56px;
}
.howto__title {
  margin: 0;
  font: 400 40px/48px var(--font-pixel);
  letter-spacing: -0.4px;
  color: var(--blue);
  -webkit-text-stroke: 2px #000;           /* 1px outside stroke */
  paint-order: stroke fill;
  filter: drop-shadow(3px 3px 0 #FF4C4C);
  white-space: nowrap;
}
.howto__section {
  position: absolute;
  left: 0;
  width: 1080px; height: 48px;
  margin: 0;
  padding: 8px 24px;
  box-shadow: inset 0 1px 0 var(--ink), inset 0 -1px 0 var(--ink);
  font: 400 24px/32px var(--font-pixel);
  text-align: center;
  color: #000;
}
.howto__section:nth-of-type(1) { top: 112px; }
.howto__section:nth-of-type(2) { top: 427px; }

.howto__block {
  position: absolute;
  left: 44px; top: 192px;
  width: 992px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.howto__lead {
  margin: 0;
  width: 992px;
  font: 700 16px/24px var(--font-mono);
  letter-spacing: .08px;
  text-align: center;
  color: #000;
  white-space: nowrap;
}
.tut-row { display: flex; gap: 43px; }
.tut {
  width: 149px; height: 147px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: var(--cyan);
  box-shadow: inset 0 0 0 1px var(--ink);  /* 1px inside stroke (no layout impact, as in Figma) */
  font: 800 14px/20px var(--font-mono);
  color: #000;
  white-space: nowrap;
}
.tut--wide { width: 158px; }
.tut__box {
  --on: #3300FF;
  --off: #EDE9E9;
  width: 35px; height: 35px;
  margin: 0; padding: 0; border: 0;
  background-color: var(--off);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35'%3E%3Crect x='0.75' y='0.75' width='33.5' height='33.5' fill='none' stroke='%23807F7E' stroke-width='1.5' stroke-dasharray='10 10'/%3E%3C/svg%3E");
  background-size: 35px 35px;
  cursor: pointer;
  transition: background-color .08s ease-out;
}
.tut__box.is-on { background-color: var(--on); }
.tut__box:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.modes {
  position: absolute;
  left: 77px; top: 515px;
  width: 926px;
  display: flex;
  gap: 127px;
}
.mode {
  width: 224px; height: 160px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--cyan);
  box-shadow: inset 0 0 0 1px var(--ink);
  font: 700 16px/24px var(--font-mono);
  letter-spacing: .08px;
  text-align: center;
  color: #000;
}
.mode__icon { font: 400 24px/32px var(--font-pixel); letter-spacing: 0; }
.mode__desc { width: 194px; margin: 0 -1px; }

#btn-play {
  position: absolute;
  left: 393px; top: 715px;
  min-width: 294px;
}

/* --------------------------------------------------------------------------
   THANK YOU
   -------------------------------------------------------------------------- */
.thanks__title {
  position: absolute;
  left: 226px; top: 332.9px;
  width: 980px; height: auto;
}
.thanks__sub {
  position: absolute;
  left: 320.9px; top: 522.9px;
  width: 803px; height: 60px;
}
.thanks__restart {
  position: absolute;
  left: 0; right: 0; top: 646px;
  margin: 0 auto;
  padding: 8px;
  width: 556px; height: 52px;
  border: 0;
  background: none;
  font: 400 20px/36px var(--font-pixel);
  color: #fff;
  text-align: center;
  cursor: pointer;
  animation: blink 1.6s steps(1, end) infinite;
}
.thanks__restart:focus-visible { outline: 3px dashed #fff; outline-offset: 4px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pixels i, .logo, .logo__shine, .thanks__restart { animation: none; }
  .tagline__frame--1 { animation: none; opacity: 1; }
  .tagline__frame--2, .tagline__frame--3 { animation: none; }
}