:root {
  color-scheme: dark;
  --ink: #f8f1ff;
  --muted: #bdb1cf;
  --panel: #17112d;
  --panel-2: #251743;
  --purple: #7b39ff;
  --cyan: #35e5ff;
  --amber: #ffb72b;
  --pink: #ff3d96;
  --line: rgb(255 255 255 / .2);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -10%, #3e2472 0, transparent 40%),
    #0b0716;
  font-family: "Courier New", Consolas, monospace;
}

button, a { font: inherit; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.sound-toggle {
  width: max-content;
  padding: 8px 11px;
  border: 1px solid var(--line);
  color: var(--cyan);
  background: transparent;
  cursor: pointer;
}

.sound-toggle:hover { border-color: var(--cyan); background: rgb(53 229 255 / .1); }

.fair-scene {
  position: relative;
  width: 100%;
  max-height: calc(100svh - 232px);
  aspect-ratio: 1673 / 940;
  align-self: center;
  overflow: hidden;
  isolation: isolate;
  background: #2a174d url("assets/ferias/talent-land-background-v1.webp") center / cover no-repeat;
  box-shadow: inset 0 0 80px rgb(5 2 15 / .35);
}

.fair-scene::after {
  content: "";
  position: absolute;
  z-index: 25;
  inset: auto 0 0;
  height: 9%;
  pointer-events: none;
  background: linear-gradient(transparent, rgb(7 3 16 / .46));
}

.mission-chip {
  position: absolute;
  z-index: 40;
  top: 2.2%;
  left: 2%;
  max-width: 47%;
  padding: 8px 11px;
  border: 1px solid rgb(255 183 43 / .75);
  color: #14091d;
  background: rgb(255 183 43 / .94);
  font-size: clamp(7px, 1vw, 12px);
  font-weight: 700;
  box-shadow: 4px 4px 0 rgb(14 6 27 / .7);
}

.speech {
  position: absolute;
  z-index: 200;
  top: 52%;
  left: 48%;
  width: min(45%, 650px);
  padding: 12px 15px;
  border: 2px solid var(--ink);
  color: #160b26;
  background: rgb(255 251 240 / .96);
  font-family: Arial, sans-serif;
  font-size: clamp(9px, 1.2vw, 15px);
  line-height: 1.35;
  box-shadow: 6px 6px 0 rgb(16 7 31 / .7);
  transform: none;
  pointer-events: none;
  transition: opacity .18s ease, left .18s ease, top .18s ease;
}

.speech::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -12px;
  border: 6px solid transparent;
  border-top-color: var(--ink);
}

.speech.is-tail-right::after { left: auto; right: 28px; }
.speech strong { margin-right: 8px; color: #6d24cf; }
.speech.is-changing { opacity: 0; }
.speech.is-hidden { opacity: 0; pointer-events: none; }

.stand-dialogue {
  position: absolute;
  z-index: 205;
  top: 30%;
  left: 3%;
  width: min(27%, 300px);
  padding: 10px;
  border: 3px solid #160b26;
  color: #160b26;
  background: #fff0d4;
  box-shadow: 5px 5px 0 rgb(14 6 27 / .78);
  animation: stand-dialogue-pop .22s ease-out;
}
.stand-dialogue[hidden] { display: none; }
.stand-dialogue::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -15px;
  border: 8px solid transparent;
  border-top-color: #160b26;
}
.stand-dialogue p { margin: 0; font-size: clamp(8px, .76vw, 12px); line-height: 1.4; }
.stand-dialogue strong { margin-right: 7px; color: #6d24cf; }
.stand-dialogue__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.stand-dialogue__actions a, .stand-dialogue__actions button {
  min-height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid #160b26;
  padding: 5px;
  font: inherit;
  font-size: clamp(6px, .62vw, 9px);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.stand-dialogue__return { color: #170a24; background: var(--amber); }
.stand-dialogue__stay { color: var(--cyan); background: #170d26; }
.stand-dialogue__actions a:hover, .stand-dialogue__actions a:focus-visible,
.stand-dialogue__actions button:hover, .stand-dialogue__actions button:focus-visible { border-color: var(--cyan); outline: 0; box-shadow: 0 0 0 2px rgb(53 229 255 / .38); }

.walk-plane {
  position: absolute;
  z-index: 7;
  inset: 53% 0 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: crosshair;
  clip-path: polygon(31% 0, 69% 0, 100% 100%, 0 100%);
}

.walk-plane:focus { outline: 0; }

.walk-hint {
  position: absolute;
  z-index: 30;
  left: 2%;
  bottom: 2.5%;
  padding: 5px 7px;
  color: var(--amber);
  background: rgb(9 4 21 / .72);
  font-size: clamp(7px, .8vw, 10px);
  letter-spacing: .05em;
  pointer-events: none;
  transition: opacity .25s ease;
}
.walk-hint.is-hidden { opacity: 0; }

.scene-object {
  position: absolute;
  z-index: 12;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: crosshair;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
}

.scene-object:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.scene-object:hover .npc-sprite, .scene-object:hover .prop-sprite { filter: drop-shadow(0 0 7px var(--cyan)) drop-shadow(0 8px 4px rgb(7 2 15 / .55)); }

.object-label {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -5px;
  display: none;
  width: max-content;
  max-width: 190px;
  padding: 4px 6px;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  background: rgb(9 4 21 / .92);
  font-size: clamp(7px, .8vw, 10px);
  transform: translateX(-50%);
}

.scene-object:hover .object-label, .scene-object:focus-visible .object-label { display: block; }
.npc-sprite, .prop-sprite { position: absolute; inset: 0; background-repeat: no-repeat; image-rendering: auto; }

.beer-object { left: 15.8%; top: 91.8%; width: 3.4%; aspect-ratio: 294 / 328; z-index: 112; }
.beer-sprite { background: url("assets/ferias/ferias-props-spritesheet-v1.webp") 0 0 / 400% 400%; animation: frames4 1.6s steps(3) infinite; }
.beer-object.is-taken { display: none; }

.opossum-stand-object { left: 8.5%; top: 56%; width: 13%; height: 20%; z-index: 15; }
.opossum-stand-object::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -28% -24% -22%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(53 229 255 / .68) 0, rgb(53 229 255 / .3) 30%, rgb(53 229 255 / .12) 52%, transparent 74%);
  filter: blur(9px);
  animation: stand-halo 2.8s ease-in-out infinite;
  pointer-events: none;
}

.jamonero-object { left: 61.2%; top: 76.4%; width: 23.2%; aspect-ratio: 322 / 310; z-index: 88; }
.jamonero-object::before, .creator-object::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 18%;
  right: 18%;
  bottom: 1%;
  height: 7%;
  border-radius: 50%;
  background: rgb(7 3 15 / .48);
  filter: blur(3px);
}
.jamonero-sprite { background: url("assets/ferias/jamonero-spritesheet-v1.webp") 0 0 / 400% 400%; animation: frames4 1.05s steps(3) infinite; }
.jamonero-object.is-asking .jamonero-sprite { background-position-y: 33.333%; animation: frames4 .95s steps(3) 1; }
.jamonero-object.is-trading .jamonero-sprite { background-position-y: 66.666%; animation: frames4 .7s steps(3) infinite; }
.jamonero-object.is-cheering .jamonero-sprite { background-position-y: 100%; animation: frames4 1.15s steps(3) 2; }

.creator-object { top: 91%; width: 18.4%; aspect-ratio: .84; z-index: 108; }
.creator-object::before { left: 18%; right: 18%; bottom: 0; height: 8%; }
.jordi-object { left: 15%; top: 90.2%; z-index: 109; aspect-ratio: 246 / 296; }
.aythami-object { left: 30%; top: 93%; z-index: 111; aspect-ratio: 274 / 322; }
.mario-object { left: 45%; top: 95.2%; width: 16.8%; z-index: 110; aspect-ratio: 1 / 1; }
.creator-sprite { background-size: 400% 400%; background-position: 0 0; animation: frames4 2.6s steps(3) infinite; transform-origin: 50% 100%; }
.aythami-object .creator-sprite { animation-delay: -.8s; }
.mario-object .creator-sprite { animation-delay: -1.6s; }
.jordi-sprite { background-image: url("assets/ferias/jordi-wild-spritesheet-v1.webp"); }
.aythami-sprite { background-image: url("assets/ferias/aythami-spritesheet-v1.webp"); }
.mario-sprite { background-image: url("assets/ferias/mario-the-wonder-spritesheet-v3.png?v=3"); image-rendering: pixelated; }
.creator-object.is-talking .creator-sprite,
.creator-object.is-fidget .creator-sprite { background-position-y: 33.333%; animation: frames4 .9s steps(3) 1; }
.creator-group.is-eating .creator-sprite { background-position-y: 66.666%; animation: frames4 .75s steps(3) 2; }
.creator-group.is-selfie .creator-sprite { background-position-y: 100%; animation: frames4 1.1s steps(3) infinite; }

.chatter-object { left: 84.8%; top: 65.5%; width: 13.2%; aspect-ratio: 734 / 682; z-index: 82; }
.chatter-object::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 16%;
  right: 16%;
  bottom: 1%;
  height: 6%;
  border-radius: 50%;
  background: rgb(7 3 15 / .4);
  filter: blur(3px);
}
.chatter-sprite {
  background: url("assets/ferias/ester-pilar-spritesheet-v2.webp") 0 0 / 400% 100% no-repeat;
  image-rendering: pixelated;
  animation: frames4 1.7s steps(3) infinite;
}

.youtube-object { width: 13.8%; aspect-ratio: 1; z-index: 90; }
.youtube-object::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 8%;
  border-radius: 50%;
  background: rgb(7 3 15 / .48);
  filter: blur(3px);
}
.brais-object { left: 78.5%; top: 79.5%; z-index: 90; }
.nacho-object { left: 88.6%; top: 80.3%; z-index: 91; }
.youtube-sprite { background-size: 400% 400%; background-position: 0 0; animation: frames4 2.4s steps(3) infinite; }
.brais-sprite { background-image: url("assets/ferias/brais-moure-spritesheet-v1.webp"); }
.nacho-sprite { background-image: url("assets/ferias/nacho-amela-spritesheet-v1.webp"); animation-delay: -.7s; }
.youtube-object.is-talking .youtube-sprite { background-position-y: 33.333%; animation: frames4 .9s steps(3) 1; }
.youtube-object.is-fidget .youtube-sprite { background-position-y: 66.666%; animation: frames4 .85s steps(3) 1; }
.youtube-object.is-panicking .youtube-sprite { background-position-y: 100%; animation: frames4 .75s steps(3) infinite; }

.zar {
  --flip: 1;
  --walk-duration: .42s;
  position: absolute;
  z-index: 21;
  left: 45%;
  top: 94%;
  width: 9.8%;
  aspect-ratio: 256 / 341;
  pointer-events: none;
  background: url("assets/zar-spritesheet-8x6.webp") 0 0 / 800% 600% no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 7px 3px rgb(5 3 12 / .55));
  transform: translate(-50%, -100%) scaleX(var(--flip));
  transform-origin: 50% 100%;
  transition: left var(--walk-duration) linear, top var(--walk-duration) linear, width var(--walk-duration) linear;
}

.zar::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 5%;
  border-radius: 50%;
  background: rgb(7 3 15 / .5);
  filter: blur(2px);
  transform: scaleX(var(--flip));
}

.zar.is-walking { will-change: left, top, width; }

/* Memorias de Pez: same 8×6 pixel-atlas language as Zar, with the feria palette. */
.memorias-pez-object {
  --flip: 1;
  --pez-walk-duration: 1.1s;
  left: -12%;
  top: 84%;
  width: 13.2%;
  aspect-ratio: 256 / 341;
  z-index: 105;
  opacity: 1;
  transform: translate(-50%, -100%) scaleX(var(--flip));
  transition: left var(--pez-walk-duration) ease-in-out, top var(--pez-walk-duration) ease-in-out, width var(--pez-walk-duration) ease-in-out, opacity .24s ease, filter .24s ease;
  pointer-events: auto;
}

.memorias-pez-object::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% -18% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(94 231 255 / .3), transparent 68%);
  filter: blur(5px);
  animation: memorias-pez-glow 2.2s ease-in-out infinite;
  pointer-events: none;
}

.memorias-pez-sprite {
  position: absolute;
  inset: 0;
  background: url("assets/memorias-pez/memorias-pez-spritesheet-8x6-padded.png?v=2") 0 0 / 800% 600% no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 7px 3px rgb(5 3 12 / .58));
}

.memorias-pez-object.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.memorias-pez-object.is-spawning { filter: drop-shadow(0 0 8px var(--cyan)); }
.memorias-pez-object.is-despawning { filter: drop-shadow(0 0 9px var(--magenta)); }
.memorias-pez-object:hover .memorias-pez-sprite,
.memorias-pez-object:focus-visible .memorias-pez-sprite { filter: drop-shadow(0 0 7px var(--cyan)) drop-shadow(0 8px 4px rgb(7 2 15 / .55)); }

.walk-target {
  position: absolute;
  z-index: 11;
  display: none;
  width: 18px;
  height: 9px;
  border: 2px solid var(--amber);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--amber);
}
.walk-target.is-visible { display: block; animation: target-pulse .45s ease-out; }

.command-deck {
  min-height: 166px;
  display: grid;
  grid-template-columns: minmax(290px, .75fr) minmax(180px, .55fr) minmax(320px, 1fr);
  gap: clamp(12px, 2vw, 28px);
  align-items: center;
  padding: 16px clamp(14px, 2.5vw, 36px) max(16px, env(safe-area-inset-bottom));
  border-top: 2px solid #4e287f;
  background: linear-gradient(180deg, #1c1134, #0e091b);
}

.verbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.verb, .inventory-item, .reward-actions a, .reward-actions button {
  min-height: 38px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--panel-2);
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
}
.verb:hover, .verb.is-active { border-color: var(--amber); color: #180c26; background: var(--amber); }
.command-line { margin: 0; color: var(--cyan); font-size: clamp(11px, 1.2vw, 15px); line-height: 1.35; text-align: center; }

.inventory { min-height: 88px; display: flex; flex-wrap: wrap; gap: 7px; align-content: center; align-items: center; }
.inventory-item { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; font-size: 10px; }
.inventory-item:hover, .inventory-item.is-selected { border-color: var(--cyan); color: var(--cyan); background: rgb(53 229 255 / .11); }
.inventory-item[hidden] { display: none; }
.empty-inventory { color: #7e718f; font-size: 10px; }
.mini-prop { width: 26px; height: 26px; flex: 0 0 auto; background: url("assets/ferias/ferias-props-spritesheet-v1.webp") 0 0 / 400% 400% no-repeat; }
.mini-ham { background-position-y: 33.333%; }
.badge-item { color: var(--amber); }

.reward {
  width: min(930px, calc(100% - 28px));
  max-height: calc(100svh - 28px);
  padding: 0;
  overflow: auto;
  border: 2px solid var(--amber);
  color: var(--ink);
  background: #140b25;
  box-shadow: 0 0 0 7px #362059, 0 28px 90px #000;
}
.reward::backdrop { background: rgb(5 2 13 / .84); backdrop-filter: blur(4px); }
.reward-card { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; }
.reward-card img { width: 100%; height: 100%; min-height: 390px; object-fit: contain; background: #140b25; }
.reward-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 44px); background: radial-gradient(circle at 100% 0, #44256e, transparent 52%); }
.reward-kicker { color: var(--amber); font-size: 11px; line-height: 1.5; letter-spacing: .09em; }
.reward p { margin: 0; color: #d8cfe3; font-family: Arial, sans-serif; font-size: 15px; line-height: 1.5; }
.reward-close { position: absolute; z-index: 2; top: 10px; right: 10px; width: 38px; height: 38px; border: 1px solid #fff; color: #fff; background: rgb(11 5 22 / .8); font-size: 25px; cursor: pointer; }
.reward-actions { display: grid; gap: 8px; margin-top: 24px; }
.reward-actions a, .reward-actions button { display: grid; place-items: center; padding: 10px; text-align: center; text-decoration: none; }
.reward-actions a { border-color: var(--amber); color: #170a24; background: var(--amber); }
.reward-actions button:hover { border-color: var(--cyan); color: var(--cyan); }

@keyframes frames4 { from { background-position-x: 0; } to { background-position-x: 100%; } }
@keyframes target-pulse { from { opacity: 1; transform: translate(-50%, -50%) scale(.4); } to { opacity: 0; transform: translate(-50%, -50%) scale(2); } }
@keyframes stand-halo { 0%, 100% { opacity: .72; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes stand-dialogue-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes memorias-pez-glow { 0%, 100% { opacity: .5; transform: scale(.92); } 50% { opacity: .95; transform: scale(1.06); } }

@media (max-width: 850px) {
  .reward-card { grid-template-columns: 1fr; }
  .reward-card img { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ── Marco compartido con el taller ─────────────────────────────────── */
:root {
  --ink: #f8e8c4;
  --ink-dim: #c5aac5;
  --night: #0a0714;
  --panel: #160d2a;
  --panel-deep: #0d081a;
  --amber: #ffbf62;
  --magenta: #ff5e9c;
  --cyan: #5ee7ff;
  --line: #6f456f;
  --deck-height: 214px;
}

body {
  overflow: hidden;
  color: var(--ink);
  background: var(--night);
  font-family: "JetBrains Mono", monospace;
}

.fair-game {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--deck-height);
  width: 100%;
  height: 100svh;
  height: 100dvh;
  min-height: 520px;
  margin: 0;
  overflow: hidden;
}

.fair-scene {
  width: min(100vw, calc((100svh - var(--deck-height)) * 1.7916667));
  max-width: 100vw;
  max-height: none;
  align-self: auto;
  aspect-ratio: 2752 / 1536;
  background-color: #2a174d;
  background-image: url("assets/ferias/talent-land-background-v1.webp");
  background-position: 53% 53%;
  background-size: 138% 138%;
  box-shadow: 0 0 0 2px #513052, 0 0 60px #000;
}

.fair-scene::after {
  z-index: 18;
  inset: 0;
  height: auto;
  background:
    linear-gradient(90deg, rgb(6 3 14 / .24), transparent 18% 82%, rgb(6 3 14 / .22)),
    linear-gradient(transparent 72%, rgb(7 3 16 / .28));
}

.fair-scene .scene-brand { z-index: 210; width: min(30%, 330px); }
.fair-scene .scene-brand h1 { font-size: clamp(17px, 2.2vw, 37px); }
.fair-scene .scene-brand > p:last-child { margin-top: 8px; }

.fair-back {
  position: absolute;
  z-index: 210;
  top: 3%;
  right: 13%;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 232 196 / .5);
  padding: 8px 10px;
  color: var(--cyan);
  background: rgb(10 7 20 / .75);
  font-size: clamp(7px, .65vw, 10px);
  text-decoration: none;
}
.fair-back:hover, .fair-back:focus-visible { color: #140c21; background: var(--amber); }

.fair-scene .sound-toggle {
  position: absolute;
  z-index: 210;
  top: 3%;
  right: 2.4%;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  justify-self: auto;
  overflow: visible;
  border: 1px solid rgb(255 232 196 / .5);
  padding: 8px 10px;
  color: var(--ink);
  background: rgb(10 7 20 / .75);
  font-size: clamp(7px, .65vw, 10px);
}

.fair-scene .mission-chip {
  z-index: 210;
  top: auto;
  right: auto;
  bottom: 3.5%;
  left: 50%;
  width: max-content;
  max-width: 72%;
  margin: 0;
  border: 1px solid rgb(255 191 98 / .42);
  padding: 9px 14px;
  color: var(--ink);
  background: rgb(10 7 20 / .82);
  font-size: clamp(8px, .85vw, 13px);
  font-weight: 400;
  box-shadow: none;
  transform: translateX(-50%);
}

.fair-scene .speech {
  z-index: 200;
  top: 54%;
  left: 42%;
  display: block;
  width: min(280px, 30%);
  padding: 10px 12px;
  border: 2px solid #2b163b;
  color: #29152e;
  background: var(--ink);
  box-shadow: 4px 4px 0 #29152e;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(8px, .76vw, 12px);
  line-height: 1.45;
  transform: none;
}
.fair-scene .speech::after { left: 28px; bottom: -12px; border-top-color: var(--ink); }
.fair-scene .speech.is-tail-right::after { left: auto; right: 28px; }
.fair-scene .speech.is-changing { opacity: 0; }

.walk-plane {
  z-index: 7;
  inset: 80% 0 0;
  clip-path: polygon(25% 0, 78% 0, 96% 100%, 5% 100%);
}

.walk-hint {
  z-index: 210;
  right: 2.4%;
  bottom: 2.6%;
  left: auto;
  border: 1px solid var(--cyan);
  color: var(--ink);
  background: rgb(10 5 18 / .82);
  font-size: clamp(6px, .6vw, 9px);
  text-shadow: 1px 1px #000;
}

.fair-scene .beer-object { left: 15.8%; top: 91.8%; width: 3.4%; z-index: 112; filter: none; }
.fair-scene .jamonero-object { left: 61.2%; top: 76.4%; width: 23.2%; z-index: 88; }
.fair-scene .creator-object { top: 91%; width: 18.4%; z-index: 108; }
.fair-scene .jordi-object { left: 15%; top: 90.2%; z-index: 109; }
.fair-scene .aythami-object { left: 30%; top: 93%; z-index: 111; }
.fair-scene .mario-object { left: 45%; top: 95.2%; width: 16.8%; z-index: 110; }
.fair-scene .chatter-object { left: 95.4%; top: 65.5%; width: 13.2%; z-index: 84; }
.fair-scene .youtube-object { width: 13.8%; aspect-ratio: 1; }
.fair-scene .brais-object { left: 78.5%; top: 79.5%; z-index: 90; }
.fair-scene .nacho-object { left: 88.6%; top: 80.3%; z-index: 91; }

.fair-scene .zar {
  --walk-duration: .42s;
  left: 58%;
  top: 94%;
  width: 13.2%;
  z-index: 114;
}

.fair-scene .memorias-pez-object {
  left: -12%;
  top: 84%;
  width: 13.2%;
}

.fair-scene .walk-target {
  z-index: 11;
  width: 18px;
  height: 10px;
  border: 1px solid var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.fair-game .command-deck {
  position: relative;
  z-index: 50;
  display: flex;
  min-height: 0;
  grid-template-columns: none;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border-top: 3px solid #8a5373;
  padding: 0 0 14px;
  background:
    linear-gradient(rgb(255 255 255 / .025) 1px, transparent 1px) 0 0 / 100% 4px,
    linear-gradient(180deg, #221235, #11091e);
  box-shadow: 0 -12px 30px rgb(4 2 10 / .7);
}

.fair-game .command-line {
  order: 0;
  grid-column: auto;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 8px max(14px, 2vw);
  border-bottom: 1px solid #56314f;
  color: var(--ink-dim);
  background: #0e0819;
  font-size: 12px;
  line-height: normal;
  text-align: left;
}

.fair-game .command-deck__inner {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(210px, .8fr) minmax(480px, 2.4fr) minmax(190px, .8fr);
  gap: 18px;
  width: min(1380px, 100%);
  min-height: 0;
  height: auto;
  margin: 0 auto;
  padding: 12px max(14px, 2vw) 10px;
}

.fair-game .verbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  min-height: 0;
  height: 100%;
}

.fair-game .verb {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 6px 8px;
  border: 1px solid #68405e;
  color: var(--ink-dim);
  background: #170d26;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(7px, .62vw, 10px);
}
.fair-game .verb:hover, .fair-game .verb:focus-visible, .fair-game .verb.is-active { border-color: var(--amber); color: #1a0c23; background: var(--amber); }

.fair-game .inventory-items.inventory {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-content: normal;
  align-items: stretch;
  justify-content: flex-start;
  gap: 7px;
  text-align: left;
}

.fair-game .inventory-items .inventory-item {
  display: grid;
  width: min(145px, 32%);
  min-width: 88px;
  min-height: 44px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid #68405e;
  color: var(--ink);
  background: #170d26;
  font-size: clamp(7px, .58vw, 9px);
}
.fair-game .inventory-items .inventory-item[hidden] { display: none; }
.fair-game .inventory-items .inventory-item:hover,
.fair-game .inventory-items .inventory-item:focus-visible,
.fair-game .inventory-items .inventory-item.is-selected { border-color: var(--amber); color: var(--amber); background: #282048; }
.fair-game .mini-prop { width: 42px; height: 42px; }
.badge-star { display: grid; place-items: center; width: 42px; height: 42px; color: var(--amber); font-size: 23px; }

.deck-link {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #68405e;
  padding: 7px 8px;
  color: var(--cyan);
  background: #170d26;
  font-size: 9px;
  text-decoration: none;
}
.deck-link:hover, .deck-link:focus-visible { border-color: var(--cyan); color: #160a1b; background: var(--cyan); }

.reward h2 { margin: 14px 0; color: var(--cyan); font-family: Arial Black, Impact, sans-serif; font-size: clamp(28px, 4.4vw, 50px); line-height: .94; }

@media (max-width: 840px) {
  :root { --deck-height: 240px; }
  .fair-scene .scene-brand { width: 38%; }
  .fair-back { right: 17%; }
  .fair-game .command-deck__inner { grid-template-columns: 150px minmax(0, 1fr); }
  .fair-game .verbs { grid-row: 1 / 3; }
  .fair-game .deck-meta { grid-column: 2; }
  .fair-game .deck-meta p { display: none; }
  .fair-game .legal-line span:first-child { display: none; }
}

@media (max-width: 520px) {
  :root { --deck-height: 248px; }
  .fair-game { min-height: 0; height: 100dvh; }
  .fair-scene { left: auto; width: 100%; min-width: 0; max-width: 100%; transform: none; }
  .fair-scene .scene-brand { top: 4%; left: 4%; width: 43%; }
  .fair-scene .scene-brand h1 { font-size: clamp(13px, 5vw, 20px); }
  .fair-back { top: 3%; right: 20%; min-height: 44px; padding: 6px; font-size: 6px; }
  .fair-scene .sound-toggle { top: 3%; right: 3%; width: auto; font-size: 6px; }
  .fair-scene .speech { width: 40%; font-size: 7px; }
  .fair-scene .mission-chip { max-width: 74%; font-size: 7px; }
  .fair-game .command-line { height: 31px; padding: 7px 10px; font-size: 9px; }
  .fair-game .command-deck { min-height: 0; padding: 0 0 12px; }
  .fair-game .command-deck__inner { grid-template-columns: 112px minmax(0, 1fr); height: auto; padding: 8px 9px 6px; }
  .fair-game .verbs { grid-template-columns: repeat(2, 1fr); }
  .fair-game .verb { min-height: 44px; font-size: 6px; }
  .fair-game .inventory-items .inventory-item { width: min(120px, 48%); min-width: 82px; }
  .fair-game .legal-line { justify-content: flex-end; }
}