/* ─────────────────────────────────────────────────────────────────────────────
   La Esquina — background scene (fixed, full-viewport, purely decorative).

   The neighbourhood's domino table in the app's own room — NO photo, all layered CSS.
   The ROOM is now the homepage's navy field lit by the same cool overhead stage-light
   (css/home.css #lobby). The TABLE is untouched — the same honey/oak frame, warm surface,
   corner cup-holders, tile rails, apron and legs, in the same perspective. Only the room
   around it moved, so La Esquina reads as another room of Capicúa rather than another site,
   while the corner itself stays the corner.

   The sign, nav and controls live in the FOREGROUND (esquina.css) over this scene.
   Every colour knob lives on `.es-scene` below. Nothing here depends on JS.
   ──────────────────────────────────────────────────────────────────────────── */

.es-scene {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  /* the room — the homepage's navy field, same three stops as #lobby in css/home.css */
  --room-0: #16386f; --room-1: #0b2352; --room-2: #061634;
  /* the table itself is UNCHANGED — honey/oak, as drawn. A warm wooden table under a cool
     overhead light is the point: the room belongs to the app, the table belongs to the corner. */
  --wood-deep: #9c6f3c; --wood-mid: #c69a5d; --wood-lit: #e2ba79;
  --felt: #b98a50; --felt-lit: #d9ab66;
  --sun: #ffe9b8; --sun-soft: #fff3d6;
}

/* Cream back wall lit by soft daylight from above. */
.es-wall {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(122% 82% at 50% -12%, var(--room-0) 0%, var(--room-1) 46%, var(--room-2) 100%);
}
.es-wall::after {   /* barely-there vertical panelling, warm and light */
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(90deg,
    rgba(151,182,255,.10) 0 1px, transparent 1px 3px, rgba(4,11,30,.18) 4px 5px, transparent 5px 26px);
  -webkit-mask-image: radial-gradient(84% 74% at 50% 10%, #000 34%, transparent 80%);
          mask-image: radial-gradient(84% 74% at 50% 10%, #000 34%, transparent 80%);
}

/* soft daylight wash from the top (a sunny window / awning — no lamp fixture) */
.es-lamp {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 1; width: min(680px, 96vw); height: 52vh;
  background: radial-gradient(62% 92% at 50% -6%, rgba(96,146,236,.26), rgba(96,146,236,.08) 48%, transparent 74%);
  filter: blur(8px);
}
.es-lamp::before, .es-lamp::after { display: none; }   /* no pendant / bulb — it's daylight now */

.es-lamp-pool {   /* warm daylight pooling on the table */
  position: absolute; z-index: 3; left: 50%; bottom: -4vh; transform: translateX(-50%);
  width: min(860px, 96vw); height: 74vh; border-radius: 50%;
  background: radial-gradient(44% 42% at 50% 44%, rgba(120,164,240,.20), rgba(120,164,240,.07) 42%, transparent 70%);
  filter: blur(12px);
}

/* ── the domino table — front-above perspective, honey/oak in daylight ── */
.es-table {
  position: absolute; z-index: 4;
  left: 50%; bottom: -3vh; transform: translateX(-50%);
  width: min(1240px, 132vw); height: clamp(360px, 66vh, 720px);
  --frame: polygon(17% 4%, 83% 4%, 99% 72%, 1% 72%);
  --surf:  polygon(27% 12%, 73% 12%, 88% 64%, 12% 64%);
}
.es-table::before {   /* soft warm contact shadow on the light floor */
  content: ""; position: absolute; left: 4%; right: 4%; top: 62%; bottom: -8%;
  background: radial-gradient(50% 58% at 50% 42%, rgba(120,88,46,.3), transparent 72%);
  filter: blur(26px);
}
.es-leg {
  position: absolute; bottom: -4%; width: 1.5%; height: 34%; border-radius: 2px;
  background: linear-gradient(180deg, #8a6231, rgba(180,140,86,0));
}
.es-leg-l { left: 16%; transform: skewX(7deg); }
.es-leg-r { right: 16%; transform: skewX(-7deg); }
.es-apron {
  position: absolute; inset: 0; clip-path: polygon(1% 70%, 99% 70%, 94% 83%, 6% 83%);
  background: linear-gradient(180deg, #b6884c, #9a6d38 72%, #855e2c);
}
.es-apron::before {   /* lit top lip of the apron */
  content: ""; position: absolute; inset: 0; clip-path: polygon(1% 70%, 99% 70%, 99% 72%, 1% 72%);
  background: rgba(255,238,190,.5);
}
.es-frame {   /* honey wood border, brighter where daylight hits */
  position: absolute; inset: 0; clip-path: var(--frame);
  background: linear-gradient(180deg, #c99a5d 0%, #d8ac6d 42%, var(--wood-lit) 74%, #c99a5d 100%);
}
.es-frame::before {   /* soft wood grain */
  content: ""; position: absolute; inset: 0; clip-path: var(--frame); opacity: .35;
  background: repeating-linear-gradient(88deg,
    rgba(120,84,42,.14) 0 2px, transparent 2px 7px, rgba(255,240,200,.14) 7px 8px, transparent 8px 19px);
}
.es-frame::after {   /* bevel highlight along the far (top) edge */
  content: ""; position: absolute; inset: 0; clip-path: var(--frame);
  background: linear-gradient(180deg, rgba(255,244,206,.55) 0 1.6%, transparent 7%);
}
.es-surface {   /* warm caramel-wood playing top, lit by daylight */
  position: absolute; inset: 0; clip-path: var(--surf);
  background: radial-gradient(58% 44% at 50% 80%, var(--felt-lit) 0%, var(--felt) 46%, #9c6f3c 100%);
}
.es-surface::before {   /* gentle far-edge shade inside the surface */
  content: ""; position: absolute; inset: 0; clip-path: var(--surf);
  background: linear-gradient(180deg, rgba(120,84,42,.28) 0 3%, transparent 24%);
}
.es-gloss {   /* daylight sheen on the varnish */
  position: absolute; left: 28%; right: 28%; top: 45%; height: 22%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,246,214,.6), rgba(255,240,200,.18) 42%, transparent 72%);
  filter: blur(7px); transform: scaleY(.5);
}
.es-cup {   /* corner cup-holders — warm recesses in the honey frame */
  position: absolute; border-radius: 50%; transform: scaleY(.62);
  background: radial-gradient(circle at 50% 34%, #6f4e24 0%, #8f6934 55%, rgba(190,150,92,.5) 100%);
  box-shadow: inset 0 2px 5px rgba(70,46,18,.55), inset 0 -2px 3px rgba(255,238,190,.35), 0 3px 5px rgba(120,88,46,.3);
}
.es-cup-tl { left: 15%;   top: 3%;  width: 7%;    aspect-ratio: 1; }
.es-cup-tr { right: 15%;  top: 3%;  width: 7%;    aspect-ratio: 1; }
.es-cup-bl { left: 2.5%;  top: 62%; width: 11.5%; aspect-ratio: 1; }
.es-cup-br { right: 2.5%; top: 62%; width: 11.5%; aspect-ratio: 1; }
.es-rail {   /* tile rails — honey grooves */
  position: absolute; transform: scaleY(.7); border-radius: 40% / 60%;
  background: linear-gradient(180deg, #ddb173, #b0834a);
  box-shadow: inset 0 1px 0 rgba(255,244,206,.6), inset 0 -2px 4px rgba(120,84,42,.4);
}
.es-rail-near { left: 20%; right: 20%; top: 57.5%; height: 4.6%; }
.es-rail-far  { left: 34%; right: 34%; top: 11%;   height: 2.4%; opacity: .7; }

/* (decorative dominoes were removed earlier — .es-domino styles kept dormant in case
   a future centerpiece reuses them; no matching markup is currently rendered.) */
.es-domino {
  position: absolute; z-index: 5; width: clamp(42px, 7vw, 66px); aspect-ratio: 1 / 2;
  border-radius: 12%; background: linear-gradient(150deg, #fffdf7 0%, #f4ecda 46%, #e2d3b8 100%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.6), inset 0 -3px 8px rgba(150,110,60,.24),
    0 12px 22px rgba(120,88,46,.4), 0 4px 8px rgba(120,88,46,.34);
  display: grid; grid-template-rows: 1fr 1fr;
}
.es-domino::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 50%; height: 2px; transform: translateY(-1px);
  background: linear-gradient(90deg, transparent, rgba(150,110,60,.5), transparent);
}
.es-domino .h { display: grid; place-items: center; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); padding: 14% 20%; gap: 6%; }
.es-domino .h .p { width: clamp(5px, .9vw, 8px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a3418, #241608); box-shadow: 0 1px 1px rgba(255,255,255,.5); }
.es-domino .p-1 .p:not(:nth-child(1)) { visibility: hidden; } .es-domino .p-1 { place-items: center; }
.es-domino .p-3 .p:nth-child(2), .es-domino .p-3 .p:nth-child(5) { visibility: hidden; }
.es-domino .p-5 .p:nth-child(2), .es-domino .p-5 .p:nth-child(5) { visibility: hidden; }
.es-domino-1 { left: 45%; top: 40%; transform: translate(-50%, -50%) rotate(-12deg) scaleY(.6); }
.es-domino-2 { left: 57%; top: 47%; transform: translate(-50%, -50%) rotate(10deg) scaleY(.6); width: clamp(38px, 6.2vw, 58px); }

.es-coffee {   /* a little cafecito on the corner — light ceramic cup, dark coffee */
  position: absolute; z-index: 6; left: 9%; top: 60%; width: clamp(22px, 3.4vw, 34px); aspect-ratio: 1;
  border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 40% 30%, #fffaf0, #e4d3b4 72%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.7), 0 6px 12px rgba(120,88,46,.35);
  transform: translate(-50%,-50%) scaleY(.72);
}
.es-coffee::after { content:""; position:absolute; inset: 20% 22%; border-radius:50%; background: radial-gradient(circle at 50% 40%, #6b4a26, #3a2410); }

/* atmosphere overlays — kept whisper-light (no dark vignette) */
.es-vignette {   /* the faintest warm settle at the edges, never dark */
  position: absolute; inset: 0; z-index: 7;
  box-shadow: inset 0 0 160px 30px rgba(4,11,30,.28);
  background: radial-gradient(105% 82% at 50% 36%, transparent 58%, rgba(4,11,30,.55) 100%);
}
.es-grain {   /* whisper of grain so the cream never bands */
  position: absolute; inset: 0; z-index: 8; opacity: .03; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}