@font-face { font-family: "Shrikhand"; src: url(fonts/shrikhand-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-700-latin.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(fonts/atkinson-next-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --ink: #2A2233;
  --red: #D9432F;
  --red-dk: #A3301F;
  --cream: #F7EEDC;
  --card: #FBF4E6;
  --brown: #6B3F24;
  --mustard: #E6B437;
  --paper: var(--card) url(img/paper.webp) center / 256px;
  --cast: rgba(42, 34, 51, .28);
  --body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --display: "Shrikhand", Georgia, serif;

  /* Frame geometry, measured on img/frame.webp (percent of the frame image). */
  --win-l: 9.1%; --win-t: 8.1%; --win-w: 81.9%; --win-h: 75.3%;
  --frame-ratio: 1.537;        /* frame image height / width */

  /* 3D view. view.js sets these from its VIEW config (and the tuner); the values here are the no-JS fallback and must match VIEW.
     The table plane (cloth, props, board) is one transform: scale, rotateY, rotateX (tilt back), rotateZ (spin on the table).
     --hx/--hy are the pointer parallax offsets added to rotateX/rotateY. */
  --persp: 26; --ox: 36.8%; --oy: 30%;
  --rx: 48.97deg; --ry: 0deg; --rz: 11.38deg; --s: 1.52; --x: -190px; --y: 36px;
  --lean: 8deg;                /* standing frames lean back a little from vertical, like the real hinges */
  --hx: 0deg; --hy: 0deg;
  --cols: 8; --rows: 5;
  --fw: clamp(52px, min(calc((100vh - 160px) / 8.4), calc((100vw - 640px) / 12.6)), 84px);   /* 640px: room for the question cards */
  --fh: calc(var(--fw) * var(--frame-ratio));
  --cell: calc(var(--fw) * 1.2);     /* column pitch */
  --pitch: calc(var(--fh) * 1.12);   /* row pitch: a face-down frame just fits between two rails */
  --th: calc(var(--fw) * .075);      /* card + frame thickness */
  --pad: calc(var(--fw) * .28); --y0: calc(var(--fw) * .5); --fpad: calc(var(--fw) * .3);
  --rim: calc(var(--fw) * .26); --wall: calc(var(--fw) * .3); --lip: calc(var(--fw) * .2);
  --rd: calc(var(--fw) * .2); --rh: calc(var(--fw) * .16);   /* hinge rail depth and height */
  --W: calc(var(--cols) * var(--cell) + 2 * var(--pad));
  --D: calc(var(--y0) + (var(--rows) - 1) * var(--pitch) + var(--fh) + var(--fpad));
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  font: 17px/1.35 var(--body);
  color: var(--ink);
  background: #C9D4B0;
  overflow-x: hidden;
}
/* The far side of the table, where the opponent sits: a little darker, as under a kitchen lamp. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(42, 34, 51, .34), rgba(42, 34, 51, 0) 34%);
  z-index: 1;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--mustard); }

/* ---------- layout ---------- */
.scene { position: relative; min-height: 100dvh; transition: filter .5s; }
.play { position: absolute; inset: 0; }

/* ---------- the opponent's bubble: from the top-right corner, where he sits across the table, off-frame ---------- */
.bubble {
  position: absolute; z-index: 5; top: 18px; right: 14px;
  width: min(250px, calc(100% - 36px)); padding: calc(var(--bf, 17px) * .6) calc(var(--bf, 17px) * .75) calc(var(--bf, 17px) * .7);
  background: var(--paper); border: 3px solid var(--ink); border-radius: 26px 8px 26px 26px;
  box-shadow: 0 6px 0 var(--cast);
  text-align: left;
}
/* The tail leaves the bubble's top-right corner and points up and out of the screen towards the top right. */
.bubble::before, .bubble::after { content: ""; position: absolute; bottom: 100%; }
.bubble::before { right: -3px; width: 64px; height: 44px; background: var(--ink); clip-path: polygon(0 100%, 78% 100%, 100% 0, 88% 0); }
.bubble::after { right: 1px; margin-bottom: -3px; width: 54px; height: 44px; background: var(--card); clip-path: polygon(8% 100%, 76% 100%, 100% 0, 96% 0); }
.bubble-yes[hidden] { display: none; }
.bubble-yes { display: inline; margin: 0 .3em 0 0; font: calc(var(--bf, 17px) * 1.35)/1 var(--display); color: var(--red); }
.bubble-line { display: inline; margin: 0; font-size: var(--bf, 17px); line-height: 1.28; font-weight: 600; }
.bubble p { text-wrap: balance; }
@keyframes bubble-speak { from { scale: .94; opacity: .3; } }
.bubble.speak { transform-origin: 100% 0; animation: bubble-speak .28s cubic-bezier(.2, .8, .3, 1.2); }
.bubble-yes { transition: none; }

/* ---------- the 3D table ---------- */
.world {
  position: absolute; inset: 0; overflow: hidden;
  perspective: calc(var(--fw) * var(--persp)); perspective-origin: var(--ox) var(--oy);
}
.plane, .cloth, .cloth::after, .prop, .board, .board-shadow, .floor, .rim, .wall, .rails, .rail, .rail-top, .rail-front, .tray-front,
.tiles, .tile, .shadow, .flip, .face, .edge, .face.back::after { position: absolute; display: block; }
.plane {
  will-change: transform;   /* the one element that moves (parallax, tuner) */
  left: calc(50% + var(--x) - 2400px); top: calc(50% + var(--y) - 1800px); width: 4800px; height: 3600px;
  transform-style: preserve-3d;
  transform: scale(var(--s)) rotateY(calc(var(--ry) + var(--hy))) rotateX(calc(var(--rx) + var(--hx))) rotateZ(var(--rz));
}
/* Oilcloth gingham: two translucent sage stripe sets, darker where they cross. It lies on the plane, so the checks recede. */
.cloth {
  inset: 0;
  background-color: #F1EAD3;
  background-image:
    radial-gradient(ellipse 22% 16% at 38% 44%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 70%),
    linear-gradient(90deg, rgba(118, 158, 96, .46) 50%, rgba(118, 158, 96, 0) 50%),
    linear-gradient(rgba(118, 158, 96, .46) 50%, rgba(118, 158, 96, 0) 50%);
  background-size: 100% 100%, calc(var(--fw) * .78) calc(var(--fw) * .78), calc(var(--fw) * .78) calc(var(--fw) * .78);
  background-position: 0 0, center, center;
}
.cloth::after { content: ""; inset: 0; background: url(img/paper.webp) center / 256px; mix-blend-mode: multiply; opacity: .35; }

/* ---------- props ----------
   The glass is an ::after cut-out standing on its footprint, counter-rotated so it always faces the eye (drawn at ~40° from
   above, the camera's elevation at rotateX ≈ 49°). The footprint lies on the cloth and carries the contact shadow. */
.prop { background: center / contain no-repeat; }
.glass { transform-style: preserve-3d; }
.glass { background: radial-gradient(ellipse 48% 42% at 60% 38%, rgba(44, 56, 26, .42), rgba(44, 56, 26, .18) 60%, rgba(44, 56, 26, 0)); }
.glass::after {
  content: ""; position: absolute; left: 0; width: 100%; bottom: 50%;
  background: center bottom / contain no-repeat; transform-origin: 50% 100%;
  transform: rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * (var(--rx) + var(--hx)))) rotateY(calc(-1 * (var(--ry) + var(--hy))));
}
.glass { width: calc(var(--fw) * 1.9); height: calc(var(--fw) * 1.5); left: calc(50% - var(--fw) * 7.7); top: calc(50% - var(--fw) * 3.6); }
.glass::after { height: calc(var(--fw) * 2.65); background-image: url(img/glass.webp); }
/* ---------- the board: a tray with a floor, rims, inner walls and a front wall, all real planes ---------- */
.board {
  left: 50%; top: 50%;
  width: calc(var(--W) + 2 * var(--rim)); height: calc(var(--D) + 2 * var(--rim));
  transform-style: preserve-3d; transform: translate(-50%, -50%) translateZ(var(--lip));
}
.board-shadow {
  inset: calc(var(--fw) * -.1) calc(var(--fw) * -.25) calc(var(--fw) * -.3) calc(var(--fw) * -.05);
  border-radius: calc(var(--fw) * .3);
  background: rgba(62, 70, 40, .38);
  box-shadow: 0 0 calc(var(--fw) * .4) calc(var(--fw) * .15) rgba(62, 70, 40, .3);
  transform: translate(calc(var(--fw) * .2), calc(var(--fw) * .1)) translateZ(calc(var(--lip) * -1 + 1px));
}
/* The front strip of the floor is where the front row falls; the tray carries its moulded wordmark there, like the real toy. */
.floor::after {
  content: "¿Quién es quién?"; position: absolute; left: 0; right: 0; bottom: calc(var(--fpad) + var(--fh) * .22);
  font: calc(var(--fw) * .78)/1 var(--display); text-align: center; white-space: nowrap; color: #C43A27;
  text-shadow: calc(var(--fw) * -.012) calc(var(--fw) * -.012) 0 rgba(255, 150, 120, .45), calc(var(--fw) * .015) calc(var(--fw) * .018) 0 rgba(90, 14, 6, .45);
}
.floor {
  left: var(--rim); top: var(--rim); width: var(--W); height: var(--D);
  background: #D24330;
  background-image: linear-gradient(to bottom, rgba(90, 16, 8, .22), rgba(90, 16, 8, 0) 18%), url(img/paper.webp);
  background-size: 100% 100%, 256px;
  background-blend-mode: normal, multiply;
}
/* Rim tops (lighter plastic) sit at wall height; inner walls stand along the far and side edges. */
.rim { background: #EE6B4F; transform: translateZ(var(--wall)); box-shadow: inset 0 0 0 1.5px var(--ink); }
.rim-b { left: 0; top: 0; width: 100%; height: var(--rim); border-radius: calc(var(--rim) * .9) calc(var(--rim) * .9) 0 0; }
.rim-f { left: 0; bottom: 0; width: 100%; height: var(--rim); }
.rim-l { left: 0; top: 0; width: var(--rim); height: 100%; border-radius: calc(var(--rim) * .9) 0 0 0; }
.rim-r { right: 0; top: 0; width: var(--rim); height: 100%; border-radius: 0 calc(var(--rim) * .9) 0 0; }
.wall { background: #A3301F; }
.wall-b { left: var(--rim); top: calc(var(--rim) - var(--wall)); width: var(--W); height: var(--wall); transform-origin: 50% 100%; transform: rotateX(-90deg); background: #B9391F; }
.wall-l { left: calc(var(--rim) - var(--wall)); top: var(--rim); width: var(--wall); height: var(--D); transform-origin: 100% 50%; transform: rotateY(90deg); }
.wall-r { left: calc(var(--rim) + var(--W)); top: var(--rim); width: var(--wall); height: var(--D); transform-origin: 0 50%; transform: rotateY(-90deg); background: #C23C24; }

/* Hinge rails, one per row: a lit top face and a front face from the generated rail art. */
.rails { inset: 0; transform-style: preserve-3d; }
.rail {
  left: var(--rim); width: var(--W); height: var(--rd);
  top: calc(var(--rim) + var(--y0) + var(--r) * var(--pitch) - var(--rd) / 2);
  transform-style: preserve-3d;
}
.rail:nth-child(n + 6) { display: none; }
.rail-top { inset: 0; background: #EE6B4F; transform: translateZ(var(--rh)); box-shadow: inset 0 0 0 1px rgba(42, 34, 51, .6); }
.rail-front { left: 0; right: 0; top: calc(100% - var(--rh)); height: var(--rh); transform-origin: 50% 100%; transform: rotateX(-90deg); background: url(img/rail.webp) center / 100% 100%; }

/* ---------- tiles ---------- */
.tiles { inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; }
.tile {
  --c: mod(var(--i), var(--cols));
  --r: round(down, var(--i) / var(--cols), 1);
  left: calc(var(--rim) + var(--pad) + var(--c) * var(--cell) + (var(--cell) - var(--fw)) / 2);
  top: calc(var(--rim) + var(--y0) + var(--r) * var(--pitch));
  width: var(--fw); height: 0;
  transform-style: preserve-3d;
}
/* Soft contact shadow on the floor behind the frame (light from the front left). */
.shadow {
  left: calc(var(--fw) * .02); width: calc(var(--fw) * 1.02); top: calc(var(--fh) * -.5); height: calc(var(--fh) * .5);
  background: linear-gradient(to top, rgba(74, 10, 4, .5), rgba(74, 10, 4, .22) 45%, rgba(74, 10, 4, 0));
  border-radius: 45% 45% 0 0 / 30% 30% 0 0;
  transform: translateZ(1px) skewX(-16deg); transform-origin: 50% 100%;
}
.tile.falling .shadow { opacity: .55; }
.tile.down .edge, .tile.falling .edge { background: #1E3F86; }
/* Falls (game.js): accelerate over the hinge, land a few degrees past rest, settle; standing back up on "Volver a jugar". */
.tile.falling .flip { transition: transform .43s cubic-bezier(.55, .05, .9, .45); }
.tile.landing .flip { transition: transform .18s cubic-bezier(.2, .8, .3, 1); }
.tile.rising .flip { transition: transform .4s cubic-bezier(.2, .8, .3, 1.15); }
.tile.instant .flip { transition: none; }
.tile .face, .tile .edge { transition: opacity .2s; }
.tile.fading .face, .tile.fading .edge { opacity: 0; }
/* A face-down frame lies in front of its rail: its shadow is a tight dark pad under it, offset to the right. */
.tile.down .shadow {
  top: calc(var(--fw) * .1); height: calc(var(--fh) * .98); left: calc(var(--fw) * .13); width: calc(var(--fw) * .96);
  background: rgba(58, 6, 2, .66); border-radius: calc(var(--fw) * .1);
  box-shadow: 0 0 calc(var(--fw) * .12) calc(var(--fw) * .05) rgba(58, 6, 2, .45);
  transform: translateZ(1px);
}
.flip {
  left: 0; bottom: 0; width: var(--fw); height: var(--fh);
  transform-style: preserve-3d; transform-origin: 50% 100%;
  transform: translateZ(calc(var(--rh) * .6)) rotateX(calc(-90deg + var(--lean) - var(--fall, 0deg)));
}
.face { inset: 0; backface-visibility: hidden; }
.face.front { transform: translateZ(calc(var(--th) / 2)); }
.face.back { transform: rotateY(180deg) translateZ(calc(var(--th) / 2)); }
.face.back img { width: 100%; height: 100%; }
/* Visible thickness: the top and side edges of the frame. */
.edge { background: #A3301F; box-shadow: inset 0 0 0 1px rgba(42, 34, 51, .7); }
.et { left: 5%; width: 90%; top: calc(var(--th) / -2); height: var(--th); transform: rotateX(90deg); background: #F07A5C; }
.el { top: 5%; height: 92%; left: calc(var(--th) / -2); width: var(--th); transform: rotateY(90deg); }
.er { top: 5%; height: 92%; right: calc(var(--th) / -2); width: var(--th); transform: rotateY(90deg); }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.card {
  position: absolute; left: var(--win-l); top: var(--win-t); width: var(--win-w); height: var(--win-h);
  display: flex; flex-direction: column; background: var(--card); overflow: hidden;
}
.card img { display: block; width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: 50% 12%; }
.name {
  flex: none; display: grid; place-items: center; height: 19%;
  padding: 0 2px; background: var(--card); border-top: 1.5px solid var(--ink);
  font: 700 calc(var(--fw) * .118 * var(--nfs, 1))/1 "Barlow Condensed", sans-serif; text-align: center; text-transform: uppercase;
  letter-spacing: .01em; white-space: nowrap; overflow: hidden;
}
.name.two { line-height: .86; }

/* Front wall of the tray, standing between the floor and the table: printed sticker logo and the standing counter. */
.tray-front {
  left: 0; width: 100%; top: calc(100% - var(--wall) - var(--lip)); height: calc(var(--wall) + var(--lip));
  transform-origin: 50% 100%; transform: translateZ(calc(var(--lip) * -1)) rotateX(-90deg);
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--fw) * .3);
  background: #C63D24; box-shadow: inset 0 calc(var(--fw) * .05) 0 #EE6B4F, inset 0 0 0 1.5px var(--ink);
  border-radius: 0 0 calc(var(--fw) * .12) calc(var(--fw) * .12);
}
.tray-front p { margin: 0; }
.logo { display: flex; align-items: baseline; gap: 12px; }
.logo-q {
  font: calc(var(--fw) * .36)/1 var(--display); color: var(--cream);
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ink);
}
.logo-ed { font: 700 calc(var(--fw) * .2)/1 "Barlow Condensed", sans-serif; color: var(--cream); text-transform: uppercase; letter-spacing: .02em; }
.count {
  padding: 5px 14px 6px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--mustard);
  font: 700 calc(var(--fw) * .2)/1 "Barlow Condensed", sans-serif; text-transform: uppercase;
}
.count b { font-size: 1.25em; }

/* ---------- the player's hand: three question cards ----------
   view.js lowers --hz (zoom) only as far as needed for the hand to clear the board on the current screen. */
.hand { position: absolute; z-index: 5; right: 20px; bottom: 28px; width: 330px; zoom: var(--hz, 1); }
.hand-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 16px; }
.hand-title {
  margin: 0; padding: 9px 16px 12px;
  background: var(--ink); color: var(--cream); border-radius: 14px;
  font: 27px/1 var(--display); transform: rotate(-2deg);
}
.standing {
  margin: 0; padding: 6px 14px 7px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--mustard);
  font: 700 21px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; white-space: nowrap;
}
.standing b { font-size: 1.25em; }
.asks { display: grid; gap: 16px; }
.ask {
  min-height: 76px; padding: 14px 18px; text-align: left;
  font: 700 23px/1.22 var(--body); color: var(--ink);
  background: var(--paper); border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: 0 6px 0 var(--ink); cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.ask:nth-child(1) { transform: rotate(-1deg); }
.ask:nth-child(2) { transform: rotate(.8deg); }
.ask:nth-child(3) { transform: rotate(-.4deg); }
.ask:hover { transform: translateY(-3px) rotate(0); box-shadow: 0 9px 0 var(--ink); }
.ask:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.ask:disabled { cursor: default; }
.ask.chosen { background: var(--mustard); transform: translateY(2px) rotate(0); box-shadow: 0 3px 0 var(--ink); }
.ask.dim { opacity: .45; }
/* A new set of questions is dealt in, one card after another. */
@keyframes ask-deal { from { opacity: 0; translate: 0 18px; scale: .96; } }
.asks.dealt .ask { animation: ask-deal .34s cubic-bezier(.2, .8, .3, 1) both; }
.asks.dealt .ask:nth-child(2) { animation-delay: .07s; }
.asks.dealt .ask:nth-child(3) { animation-delay: .14s; }
/* Call to action: until the visitor picks a question, the cards pop in turn (game.js adds .nudge).
   The pop uses the separate `scale` property so it composes with each card's resting tilt. */
@keyframes ask-pop { 0% { scale: 1; } 38% { scale: 1.06; } 70% { scale: .99; } 100% { scale: 1; } }
.asks.nudge .ask { animation: ask-pop .6s cubic-bezier(.3, .7, .4, 1.3) both; }
.asks.nudge .ask:nth-child(2) { animation-delay: .14s; }
.asks.nudge .ask:nth-child(3) { animation-delay: .28s; }
.contact {
  margin: 18px 0 0; padding: 10px 14px; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px;
  font-size: 17px; line-height: 1.4;
}
.contact a { font-weight: 700; }

/* ---------- final state: the rules card from inside the game box ----------
   Solid paper, crisp ink, one accent (the board red). Everything behind is soft-blurred and dimmed except a spotlight on
   the last tile standing, which game.js has zoomed into the free space on the left. */
.final {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center end; padding: 24px 36px 24px 24px;
  --sheet-w: min(1080px, calc(100vw - 380px));
}
.final::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: rgba(42, 34, 51, .42);
  -webkit-backdrop-filter: blur(6px) saturate(.8); backdrop-filter: blur(6px) saturate(.8);
  -webkit-mask: radial-gradient(circle var(--sr, 0px) at var(--sx, -99px) var(--sy, -99px), transparent 62%, #000 100%);
  mask: radial-gradient(circle var(--sr, 0px) at var(--sx, -99px) var(--sy, -99px), transparent 62%, #000 100%);
}
.final[hidden] { display: none; }
.sheet {
  width: var(--sheet-w); max-height: calc(100dvh - 48px); overflow: auto;
  background: #FFFBF2; color: var(--ink); border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: 0 14px 0 rgba(42, 34, 51, .5);
}
.sheet-band {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px 10px 28px; background: var(--red); color: #FFFBF2; border-bottom: 3px solid var(--ink);
}
.sheet-band p { margin: 0; font: 700 19px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.band-q { font: 22px/1 var(--display); text-transform: none; letter-spacing: 0; margin-right: 6px; }
.close {
  min-height: 44px; padding: 0 16px; font: 700 18px/1 var(--body); color: var(--ink);
  background: #FFFBF2; border: 2.5px solid var(--ink); border-radius: 10px; cursor: pointer;
}
.close span { font-size: 24px; vertical-align: -2px; margin-left: 4px; }
.close:hover { background: var(--mustard); }
.sheet-body { display: grid; grid-template-columns: 1.08fr 1fr; }
.who { padding: 28px 34px 30px; }
.who h2 { margin: 0 0 20px; font: 38px/1.05 var(--display); color: var(--ink); text-wrap: balance; }
.who h2 em { font-style: normal; color: var(--red); }
.who h2:focus { outline: none; }
.who h3 { margin: 18px 0 6px; font: 23px/1.1 var(--display); color: var(--ink); }
.list { margin: 0; padding: 0; list-style: none; }
.list li { position: relative; padding: 7px 0 7px 32px; border-top: 1.5px solid rgba(42, 34, 51, .16); font-size: 18px; line-height: 1.35; }
.list li::before { position: absolute; left: 2px; top: 6px; font: 800 20px/1.2 var(--body); }
.yes li::before { content: "✓"; color: #1F6B41; }
.no li::before { content: "✗"; color: var(--red); }
.brown {
  display: flex; flex-direction: column; padding: 28px 32px 30px;
  background: #F4ECDB; border-left: 3px solid var(--ink); border-radius: 0 0 15px 0;
}
.brown h3 { margin: 0 0 14px; font: 23px/1.2 var(--display); color: var(--ink); text-wrap: balance; }
.brown label { margin: 10px 0 6px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.brown textarea, .brown input {
  width: 100%; padding: 12px 14px; font: 18px/1.4 var(--body); color: var(--ink);
  background: #FFFBF2; border: 2.5px solid var(--ink); border-radius: 10px; resize: vertical;
}
.brown input { min-height: 52px; }
.brown ::placeholder { color: #6E6475; }
.brown [aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(194, 58, 39, .22); }
.send {
  margin-top: 18px; min-height: 60px; padding: 12px 20px;
  font: 26px/1 var(--display); color: #FFFBF2;
  background: var(--red); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 6px 0 var(--ink); cursor: pointer;
}
.send:hover { background: #C23A27; transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.send:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.send:disabled { opacity: .7; cursor: progress; transform: none; box-shadow: 0 6px 0 var(--ink); }
.direct { margin: 16px 0 0; font-size: 17px; line-height: 1.4; }
.direct a { font-weight: 700; }
.sent { margin: 12px 0 0; padding: 10px 12px; background: #E3F0DF; color: var(--ink); border: 2px solid var(--ink); border-radius: 10px; font-size: 17px; font-weight: 600; }
.sent.is-error { background: #F8E0D8; }
.sent.is-fail { background: #FBEFC8; font-weight: 400; }
.sent.is-fail a { font-weight: 700; }
.again, .reopen {
  min-height: 52px; padding: 10px 20px;
  font: 700 19px/1 var(--body); color: var(--ink); background: #FFFBF2;
  border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); cursor: pointer;
}
.brown .again { margin-top: 18px; align-self: flex-start; }
.again span { font-size: 1.15em; margin-right: 4px; }
.again:hover, .reopen:hover { background: var(--mustard); }
/* After "Cerrar": the board stays zoomed on Merlin and these two buttons take the hand's place. */
.endbar { position: fixed; z-index: 20; right: 36px; bottom: 32px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.endbar[hidden] { display: none; }
/* The ending eases in: blur first, then the card. */
@keyframes final-blur { from { opacity: 0; } }
@keyframes final-sheet { from { opacity: 0; translate: 24px 0; } }
.final.shown::before { animation: final-blur .6s ease-out both; }
.final.shown .sheet { animation: final-sheet .5s .2s cubic-bezier(.2, .8, .3, 1) both; }
body.ending .hand { opacity: 0; pointer-events: none; transition: opacity .4s; }
/* End zoom: a 2D scale + translate of the rendered table (the perspective and the camera angles stay untouched). */
.world { transform-origin: 0 0; }
body.zooming .world { transition: transform 1.2s cubic-bezier(.45, 0, .2, 1); }
.world.ghost { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .45s ease; }
.world.ghost.out { opacity: 0; }

/* ---------- mute toggle ---------- */
.mute {
  position: fixed; z-index: 30; left: 16px; bottom: 16px; width: 48px; height: 48px; padding: 11px;
  color: var(--cream); background: var(--ink); border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 0 var(--cast);
}
.mute svg { display: block; width: 100%; height: 100%; }
.mute .cross { display: none; }
.mute[aria-pressed="true"] .cross { display: inline; }
.mute[aria-pressed="true"] .waves { display: none; }

/* ---------- phone lupa: a tapped tile, enlarged ---------- */
.lupa-hint { display: none; }
.lupa {
  position: fixed; z-index: 15; width: 150px; padding: 8px 8px 0; background: var(--red);
  border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 6px 0 var(--cast);
}
.lupa[hidden] { display: none; }
.lupa img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0; }
.lupa-name {
  display: block; margin: 0 0 8px; padding: 6px 4px; background: var(--card); border: 2px solid var(--ink); border-radius: 0 0 6px 6px;
  font: 700 18px/1 "Barlow Condensed", sans-serif; text-align: center; text-transform: uppercase;
}

/* ---------- owner's 3D tuner (?tune=1), pilot chrome ---------- */
.tuner {
  position: fixed; z-index: 40; top: 12px; right: 12px; width: 300px; max-height: calc(100dvh - 24px); overflow: auto;
  padding: 12px 14px 14px; background: rgba(42, 34, 51, .92); color: var(--cream); border-radius: 12px;
  font: 13px/1.3 var(--body);
}
.tuner summary { cursor: pointer; list-style: none; }
.tuner summary::-webkit-details-marker { display: none; }
.tuner h2 { display: inline; margin: 0; font: 18px/1.1 var(--display); }
.tuner details[open] summary { margin-bottom: 6px; }
.tuner:has(details:not([open])) { width: auto; }
.tuner h2 small { font: 600 12px var(--body); opacity: .75; }
.tuner-help { margin: 0 0 8px; opacity: .8; }
.tuner label { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; margin: 0 0 6px; }
.tuner output { font-variant-numeric: tabular-nums; font-weight: 700; }
.tuner input[type=range] { grid-column: 1 / -1; width: 100%; margin: 2px 0 0; accent-color: var(--mustard); }
.tuner .tuner-check { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.tuner-actions { display: flex; gap: 8px; margin: 6px 0 8px; }
.tuner button { flex: 1; min-height: 40px; font: 700 14px var(--body); color: var(--ink); background: var(--mustard); border: 0; border-radius: 8px; cursor: pointer; }
.tuner button[data-reset] { background: var(--cream); }
.tuner textarea { width: 100%; font: 12px/1.35 ui-monospace, monospace; color: var(--ink); background: var(--cream); border: 0; border-radius: 6px; padding: 6px; resize: vertical; }
.tuning .world { cursor: grab; touch-action: none; }
.dragging, .dragging * { cursor: grabbing !important; user-select: none; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  /* Phone: 5x8 and a flatter lens (weaker convergence), so the far rows keep their size on a narrow screen. */
  :root {
    --cols: 5; --rows: 8; --cell: calc(var(--fw) * 1.12); --fw: calc((100vw - 16px) / 7.2);
    --persp: 44; --ox: 50%; --oy: 10%; --rx: 48.97deg; --rz: 11.38deg; --s: 1.08; --x: 4px; --y: -7px;
  }
  .scene { padding: 128px 0 0; }
  .play { position: relative; inset: auto; }
  .world { position: relative; inset: auto; height: calc(var(--fw) * 13.4); }
  .rail:nth-child(n + 6) { display: block; }
  .prop { display: none; }
  .lupa-hint {
    display: block; position: absolute; z-index: 4; left: 50%; top: 2px; transform: translateX(-50%); margin: 0; padding: 5px 14px;
    white-space: nowrap; background: var(--ink); color: var(--cream); border-radius: 999px; font-size: 16px; font-weight: 600;
  }
  .tile { cursor: zoom-in; }
  .mute { position: absolute; top: 0; bottom: auto; left: 8px; width: 40px; height: 40px; padding: 9px; }
  .floor::after { font-size: calc(var(--fw) * .6); }
  .bubble { top: 24px; right: 10px; width: calc(100% - 20px); padding: 10px 14px 12px; border-radius: 20px 8px 20px 20px; }
  .bubble { --bf: 23px; }
  .logo-ed { display: none; }
  .logo-q { -webkit-text-stroke: 4px var(--ink); }
  .name { font-size: calc(var(--fw) * .13 * var(--nfs, 1)); letter-spacing: 0; }
  .hand {
    position: sticky; right: auto; bottom: 0; z-index: 10; width: 100%; margin: 0;
    padding: 12px 16px 16px; background: var(--paper); border-top: 3px solid var(--ink); border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 0 var(--cast);
  }
  .hand-title { font-size: 19px; margin-bottom: 10px; padding: 6px 12px 8px; }
  .asks { gap: 8px; }
  .ask { min-height: 50px; padding: 10px 14px; font-size: 16px; box-shadow: 0 4px 0 var(--ink); transform: none !important; }
  .contact { margin-top: 10px; padding: 0; border: 0; background: none; font-size: 16px; }

  .final { padding: 0; place-items: stretch; --sheet-w: 100vw; }
  .final::before { -webkit-mask: none; mask: none; }
  .sheet { max-height: 100dvh; border-radius: 0; border: 0; }
  .sheet-band { padding: 8px 8px 8px 16px; }
  .sheet-band p { font-size: 15px; }
  .sheet-body { grid-template-columns: 1fr; }
  .who { padding: 20px 18px; }
  .who h2 { font-size: 32px; }
  .brown { border-left: 0; border-top: 3px solid var(--ink); border-radius: 0; padding: 22px 18px 28px; }
  .endbar { right: 16px; left: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* The call to action must stay visible here (the owner's Mac has Reduce Motion on): a mustard ring pulse and a ≤1.03 bump. */
  .asks.nudge .ask { animation: ask-glow .9s ease-in-out both !important; }
  .asks.nudge .ask:nth-child(2) { animation-delay: .18s !important; }
  .asks.nudge .ask:nth-child(3) { animation-delay: .36s !important; }
  /* Tile falls stay visible: a short tilt, then a fade to face down (game.js). */
  .tile.falling .flip { transition: transform .17s ease-out !important; }
  .tile.instant .flip { transition: none !important; }
  .tile .face, .tile .edge { transition: opacity .2s !important; }
  .asks.dealt .ask { animation: ask-fade .3s ease-out both !important; }
  .bubble.speak { animation: ask-fade .25s ease-out !important; }
  .final.shown::before, .final.shown .sheet { animation: ask-fade .45s ease-out both !important; }
  .world.ghost { transition: opacity .45s ease !important; }
}
@keyframes ask-fade { from { opacity: 0; } }
@keyframes ask-glow {
  0%, 100% { scale: 1; box-shadow: 0 6px 0 var(--ink), 0 0 0 0 rgba(230, 180, 55, 0); }
  45% { scale: 1.03; box-shadow: 0 6px 0 var(--ink), 0 0 0 7px var(--mustard); }
}