/* The Tipsy Robot: an oxblood-walled pub at night, warm lamps, a mahogany bar with brass taps, and EV behind it. Desktop only. */
:root {
  /* texture from generated noise: rough plaster, wood grain, chalk dust (no image files) */
  --plaster: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='180'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.005 0.22' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.03 0 0 0 0 0.01 0 0 0 1.1 -0.32'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
  --dust: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.22 -0.04'/></filter><rect width='100%' height='100%' filter='url(%23d)'/></svg>");
  --night: #170b08;
  --wall: #4a1c18;          /* oxblood */
  --wall-2: #3d1612;
  --green: #23443a;         /* bottle green, the sign */
  --wood: #3a2214;          /* mahogany */
  --wood-dark: #24150c;
  --wood-hi: #5e3a22;
  --brass: #c9a24e;
  --brass-hi: #e6c77f;
  --brass-lo: #8f6d27;
  --chalk: #f1ead9;
  --board: #1d2521;
  --paper: #f3e9cf;
  --red: #c8202a;
  --glow: 255 204 128;
  --serif: "Fraunces", Georgia, serif;
  --hand: "Caveat", "Marker Felt", cursive;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgb(10 4 2 / 0.55)); z-index: 5; }
body { margin: 0; min-width: 1180px; min-height: 100vh; display: flex; flex-direction: column; color: var(--chalk); font: 15px/1.5 var(--sans);   /* desktop only (Eduards' call) */
  background:
    var(--plaster),
    radial-gradient(ellipse 70% 45% at 50% 0%, rgb(var(--glow) / 0.16), transparent 70%),
    radial-gradient(circle at 12px 12px, rgb(0 0 0 / 0.18) 2px, transparent 2.5px) 0 0 / 24px 24px,   /* the wallpaper */
    linear-gradient(var(--wall), var(--wall-2));
}

/* the sign, swinging a little on its bracket */
.sign-wrap { position: relative; display: grid; justify-items: center; width: 100%; max-width: 1280px; margin: 0 auto; padding-top: 14px; }
.bracket { width: 300px; height: 12px; border-radius: 4px; background: linear-gradient(#3a3a3a, #121212); box-shadow: 0 4px 8px rgb(0 0 0 / 0.5); }
.sign { position: relative; margin-top: 30px; padding: 14px 40px 16px; border: 7px solid var(--wood-dark); border-radius: 10px; background: radial-gradient(ellipse at 50% 30%, #2c5548, var(--green) 70%); text-align: center;
  outline: 2px solid var(--brass); outline-offset: -14px; box-shadow: 0 20px 34px -14px rgb(0 0 0 / 0.8);
  transform-origin: 50% -30px; animation: swing 7s ease-in-out infinite; }
.sign::before, .sign::after { content: ""; position: absolute; top: -37px; width: 3px; height: 31px; background: repeating-linear-gradient(#9a9a9a 0 5px, #5a5a5a 5px 9px); }
.sign::before { left: 18%; }
.sign::after { right: 18%; }
.emblem { display: block; width: 92px; margin: 2px auto 4px; }
.sign h1 { margin: 0; font: 900 clamp(34px, 6vw, 56px)/1 var(--serif); letter-spacing: 0.01em; color: var(--brass-hi); text-shadow: 0 2px 0 #0b1a13, 0 0 22px rgb(230 199 127 / 0.25); }
.sign p { margin: 9px 0 0; font: 600 14px/1 var(--serif); letter-spacing: 0.32em; padding-left: 0.32em; text-transform: uppercase; color: var(--brass-hi); }
@keyframes swing { 0%, 100% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.3deg); } }

/* the room: chalkboard, back bar, the regulars' corner, and the bar across the front */
.room { position: relative; flex: 1; display: grid; grid-template-columns: minmax(250px, 1fr) minmax(380px, 1.25fr) minmax(250px, 1fr);
  grid-template-areas: "left back right" "bar bar bar"; column-gap: 34px; width: 100%; max-width: 1280px; margin: 0 auto; padding: 20px 30px 0; }
.lamp { position: absolute; top: 34px; width: 46px; height: 34px; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); background: linear-gradient(#fff4dc, #f0cf95); box-shadow: 0 0 18px rgb(var(--glow) / 0.8); }
.lamp::before { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 16px; margin-left: -5px; background: var(--brass); }
.lamp::after { content: ""; position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--glow) / 0.28), transparent 65%); pointer-events: none; }
.lamp-left { left: calc(31% - 11px); }
.lamp-right { right: calc(31% - 11px); }

.left { grid-area: left; display: grid; justify-items: center; align-content: start; gap: 26px; padding-top: 18px; }
.chalkboard { width: 100%; max-width: 330px; padding: 20px 24px 16px; border: 13px solid var(--wood); border-radius: 4px; transform: rotate(-1.2deg);
  background: var(--dust), radial-gradient(ellipse at 30% 20%, #2b3631, var(--board) 70%); color: var(--chalk); font-family: var(--hand); text-shadow: 0 0 1px rgb(241 234 217 / 0.7);
  box-shadow: inset 0 0 34px rgb(0 0 0 / 0.55), 0 16px 28px -12px rgb(0 0 0 / 0.75); }
.chalkboard h2 { margin: 0 0 10px; font: 700 36px/1 var(--hand); text-align: center; }
.chalkboard dl { display: grid; gap: 4px; margin: 0; font-size: 22px; line-height: 1.25; }
.chalkboard dl div { display: flex; align-items: baseline; gap: 6px; }
.chalkboard dt { flex: none; }
.chalkboard dd { flex: none; margin: 0; }
.chalkboard .dots { flex: 1; border-bottom: 2px dotted rgb(241 234 217 / 0.45); transform: translateY(-4px); }
.chalkboard .aside { margin: 12px 0 0; font-size: 19px; text-align: center; opacity: 0.8; }
/* the quiz poster is pinned on the front of the bar */
.poster { position: absolute; left: 44px; bottom: 90px; z-index: 4; display: grid; gap: 4px; width: 220px; padding: 14px 16px 12px; border-top: 7px solid var(--red); background: var(--paper); color: #2a1a10; font-family: var(--serif); text-align: center; transform: rotate(-2deg); box-shadow: 0 10px 18px -8px rgb(0 0 0 / 0.8); }
.poster b { font: 900 26px/1.1 var(--serif); }
.poster span { font-size: 14px; }
.poster .q { margin-top: 6px; font: italic 600 15px/1.3 var(--serif); }
.poster small { margin-top: 4px; font-size: 12px; color: #6b5440; }

/* the back bar behind EV: a gilded mirror and two shelves of bottles */
.backbar { grid-area: back; align-self: end; display: grid; gap: 14px; padding: 0 12px; margin-bottom: 44px; }
.mirror { display: grid; place-items: center; height: 120px; border: 9px solid var(--wood); border-radius: 70px 70px 8px 8px;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.03) 38%, rgb(255 255 255 / 0.12) 55%, rgb(255 255 255 / 0.03)), #2a1512;
  box-shadow: inset 0 0 0 2px var(--brass-lo); }
.mirror span { font: italic 900 30px/1 var(--serif); color: var(--brass-hi); text-shadow: 0 0 14px rgb(230 199 127 / 0.35); }
.shelf { display: flex; justify-content: center; align-items: flex-end; gap: 10px; height: 78px; padding: 0 14px; border-bottom: 9px solid var(--wood-hi); box-shadow: 0 6px 8px -4px rgb(0 0 0 / 0.6); }
.bottle { position: relative; width: 20px; height: var(--h); border-radius: 7px 7px 3px 3px; background: linear-gradient(90deg, rgb(255 255 255 / 0.28), transparent 45%), var(--c); }
.bottle::before { content: ""; position: absolute; left: 6px; top: -15px; width: 8px; height: 17px; border-radius: 2px 2px 0 0; background: inherit; }
.bottle::after { content: ""; position: absolute; left: 3px; right: 3px; top: 40%; height: 26%; border-radius: 2px; background: rgb(243 233 207 / 0.75); }

/* the regulars' corner: darts, beer mats on the cork board, the jukebox */
.right { grid-area: right; display: grid; justify-items: center; align-content: start; gap: 24px; padding-top: 18px; }
.dartboard { position: relative; width: 150px; aspect-ratio: 1; border: 11px solid #151515; border-radius: 50%; box-shadow: 0 12px 20px -8px #000;
  background: radial-gradient(circle, var(--red) 0 5%, #2c7a3c 5% 10%, transparent 10%),
              radial-gradient(circle, transparent 0 44%, var(--red) 44% 49%, transparent 49% 71%, #2c7a3c 71% 77%, transparent 77%),
              repeating-conic-gradient(from 9deg, #121212 0 18deg, #efe6cf 18deg 36deg); }
.dart { position: absolute; left: 56%; top: 38%; width: 48px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #ddd, #8a8a8a); transform: rotate(-28deg); transform-origin: 0 50%; }
.dart::after { content: ""; position: absolute; right: -8px; top: -6px; width: 14px; height: 15px; background: var(--red); clip-path: polygon(0 50%, 100% 0, 70% 50%, 100% 100%); }
.mats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; max-width: 300px; margin: 0; padding: 14px; border: 9px solid var(--wood);
  background: radial-gradient(circle at 3px 3px, rgb(0 0 0 / 0.15) 1.5px, transparent 2px) 0 0 / 9px 9px, #b9895a; box-shadow: 0 14px 22px -12px rgb(0 0 0 / 0.8); }
.mat { display: grid; place-items: center; width: 108px; height: 108px; margin: 0; padding: 16px; border: 4px double var(--red); border-radius: 50%; background: #f6eedf; color: #2a2a2a;
  font: 700 15px/1.05 var(--hand); text-align: center; transform: rotate(var(--r, 0deg)); box-shadow: 0 2px 5px rgb(0 0 0 / 0.45); }
.jukebox { position: absolute; right: 18px; bottom: 18px; z-index: 4; width: 180px; padding: 70px 16px 16px; border-radius: 90px 90px 14px 14px; background: var(--grain), linear-gradient(var(--wood-hi), var(--wood)); text-align: center;
  box-shadow: inset 0 0 0 6px var(--wood-dark), 0 0 60px rgb(255 170 90 / 0.25), 0 14px 26px -12px #000; }
.arch { position: absolute; top: 12px; left: 16px; right: 16px; height: 62px; border-radius: 80px 80px 0 0; opacity: 0.92;
  background: linear-gradient(90deg, #ff8a3d, #ffd36b, #6fe3c1, #7aa7ff, #ff6fb1); box-shadow: 0 0 22px rgb(255 190 110 / 0.55); }
.jukebox p { display: grid; margin: 0; padding: 8px 6px; border-radius: 5px; background: var(--paper); color: #2a1a10; font: 600 14px/1.25 var(--serif); }
.jukebox small { font: 600 10px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #8a6a4a; }
.grille { display: block; height: 42px; margin-top: 10px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--brass) 0 2px, transparent 2px 8px); opacity: 0.85; }

/* the bar: EV stands behind it, the counter hides his feet */
.bar { grid-area: bar; position: relative; margin-top: 22px; }
.barman { position: absolute; left: 50%; bottom: 214px; width: 0; height: 0; }   /* 64px of carpet + 150px into the counter */
.barman .ev-stage { position: absolute; right: auto; left: -150px; bottom: 40px; --scale: 0.9; --rest: 0%; z-index: 1; }   /* 40px up: his shoulders clear the counter */
/* standing up behind the bar (not peeking from a corner), so his words go above his head */
.barman .wex-balloon { top: auto; bottom: calc(100% + 10px); left: 10px; right: 10px; }
.counter { position: relative; z-index: 2; margin: 0 -30px; }
.top { height: 30px; border-radius: 8px 8px 0 0;
  background: radial-gradient(ellipse 13% 300% at 31% 0, rgb(var(--glow) / 0.45), transparent 70%), radial-gradient(ellipse 13% 300% at 69% 0, rgb(var(--glow) / 0.45), transparent 70%),
              var(--grain), linear-gradient(#7a4c2c, var(--wood-hi) 40%, var(--wood)); box-shadow: 0 -3px 10px rgb(0 0 0 / 0.35); }
.front { position: relative; height: 170px; background:
    var(--grain),
    linear-gradient(90deg, transparent 0 18px, rgb(0 0 0 / 0.25) 18px 22px, transparent 22px) 0 0 / 150px 100%,
    linear-gradient(rgb(255 255 255 / 0.05), transparent 30%), var(--wood);
  box-shadow: inset 0 8px 14px -8px rgb(0 0 0 / 0.7); }
.rail { position: absolute; left: 30px; right: 30px; bottom: 26px; height: 12px; border-radius: 6px; background: linear-gradient(var(--brass-hi), var(--brass-lo)); box-shadow: 0 4px 6px rgb(0 0 0 / 0.5); }
.taps, .pint, .bell { z-index: 3; }
.taps { position: absolute; left: calc(50% - 420px); bottom: calc(100% - 6px); display: flex; gap: 22px; }
.tap { display: grid; justify-items: center; width: 64px; }
.handle { width: 14px; height: 54px; border-radius: 7px 7px 3px 3px; background: linear-gradient(90deg, #2a190f, #6b4328 50%, #2a190f); }
.clip { display: grid; place-items: center; width: 64px; height: 70px; margin-top: -4px; padding: 6px 4px; border: 3px solid var(--brass); border-radius: 12px 12px 30px 30px; background: var(--clip); color: #fff;
  font: 900 13px/1.05 var(--serif); text-align: center; box-shadow: 0 6px 10px -4px rgb(0 0 0 / 0.7); }
.clip small { display: block; margin-top: 2px; font: 600 10px/1 var(--sans); opacity: 0.85; }
.spout { width: 30px; height: 20px; margin-top: 4px; border-radius: 4px 4px 10px 10px; background: linear-gradient(var(--brass-hi), var(--brass-lo)); }
.pint { position: absolute; left: calc(50% + 172px); bottom: calc(100% - 4px); width: 46px; height: 72px; border-radius: 3px 3px 6px 6px; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
  background: linear-gradient(#fbf6ea 0 16%, #d9952b 16%, #b5711d); box-shadow: inset 4px 0 0 rgb(255 255 255 / 0.25); }
.bell { position: absolute; left: calc(50% + 232px); bottom: calc(100% + 60px); width: 38px; height: 34px; border-radius: 19px 19px 6px 6px; background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi) 40%, var(--brass-lo)); }
.bell::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 3px; height: 60px; margin-left: -1px; background: var(--brass-lo); }   /* hangs from the gantry */
.bell::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--brass-lo); }   /* the clapper */

/* bar stools in front of the counter: leather seats with brass studs */
.stools { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; justify-content: center; gap: 15%; pointer-events: none; }
.stool { position: relative; width: 112px; height: 132px; }
.stool::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 30%, #8a2b25, #5a1612 70%); box-shadow: 0 6px 0 #2a0c08, 0 0 0 3px var(--brass-lo); }
.stool::after { content: ""; position: absolute; left: 14px; right: 14px; top: 30px; bottom: 0;
  background: linear-gradient(90deg, #1b0f08 0 12px, transparent 12px calc(100% - 12px), #1b0f08 calc(100% - 12px)),
              linear-gradient(transparent 0 58%, var(--brass-lo) 58% 64%, transparent 64%); }

/* the details that make it a local */
.bunting { position: absolute; left: 34px; right: 34px; top: 4px; display: flex; justify-content: space-between; pointer-events: none; z-index: 1; }
.bunting::before, .bunting::after { content: ""; position: absolute; top: -2px; width: 50%; height: 17px; border-bottom: 2px solid rgb(241 234 217 / 0.4); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.bunting::before { left: 0; }
.bunting::after { right: 0; }
.bunting i { width: 22px; height: 27px; background: var(--c); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateY(var(--y)); opacity: 0.88; box-shadow: inset 0 -6px 8px rgb(0 0 0 / 0.2); }
.bunting i:nth-child(5n+1) { --c: #c8202a; }
.bunting i:nth-child(5n+2) { --c: #e6c77f; }
.bunting i:nth-child(5n+3) { --c: #2c5548; }
.bunting i:nth-child(5n+4) { --c: #f1ead9; }
.bunting i:nth-child(5n+5) { --c: #d9952b; }
.photos { position: absolute; left: 24px; top: 66px; display: grid; justify-items: center; gap: 10px; margin: 0; }
/* the pub clock: always five to eleven, always nearly last orders */
.clock { position: absolute; right: 70px; top: 52px; width: 132px; height: 132px; border: 11px solid #2a190f; border-radius: 50%;
  background: radial-gradient(circle, #2a190f 0 5px, transparent 5.5px), radial-gradient(circle, #f6eedf 0 37px, transparent 37.5px), repeating-conic-gradient(from -1deg, #2a190f 0 2deg, transparent 2deg 30deg) center / 88% 88% no-repeat, radial-gradient(circle, #f6eedf 0 60%, #e8dcc0);
  box-shadow: inset 0 0 0 3px var(--brass), inset 0 0 0 12px #f6eedf, 0 14px 22px -10px rgb(0 0 0 / 0.85); }
.clock .hand { position: absolute; left: 50%; bottom: 50%; border-radius: 3px; background: #1d140d; transform-origin: 50% 100%; }
.clock .hour { width: 5px; height: 28px; margin-left: -2.5px; transform: rotate(327.5deg); }
.clock .minute { width: 3px; height: 42px; margin-left: -1.5px; transform: rotate(330deg); }
.clock span { position: absolute; left: 0; right: 0; bottom: 22px; font: 600 9px/1 var(--serif); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; color: var(--red); }
.frames { display: flex; align-items: flex-start; gap: 14px; }
.frame { display: block; padding: 5px; background: linear-gradient(135deg, var(--brass-hi), #7a5a1f 40%, var(--brass-hi) 55%, #6b4f1a); box-shadow: 0 10px 14px -6px rgb(0 0 0 / 0.85); }
.frame:nth-child(1) { transform: rotate(-2deg); }
.frame:nth-child(2) { transform: translateY(12px) rotate(1.4deg); }
.frame:nth-child(3) { transform: rotate(-0.8deg); }
.frame img { display: block; width: 78px; height: 49px; border: 4px solid #efe4c8; object-fit: cover; object-position: top; filter: sepia(0.9) contrast(1.08) brightness(0.86); }
.photos figcaption { margin-top: 8px; padding: 3px 12px; border-radius: 2px; background: linear-gradient(var(--brass-hi), var(--brass-lo)); color: #2a1a10; font: 600 12px/1.4 var(--serif); box-shadow: 0 2px 4px rgb(0 0 0 / 0.5); }
/* optics: upside-down spirits with their chrome measures, the way every British bar has them */
.optics { position: relative; display: flex; justify-content: center; gap: 24px; height: 96px; padding-top: 10px; }
.optics::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 9px; border-radius: 3px; background: linear-gradient(#d8d8d8, #7a7a7a); box-shadow: 0 3px 4px rgb(0 0 0 / 0.45); }
.optics i { position: relative; width: 26px; height: 56px; border-radius: 3px 3px 10px 10px; background: linear-gradient(90deg, rgb(255 255 255 / 0.32), transparent 45%), var(--c); }
.optics i::before { content: ""; position: absolute; left: 9px; bottom: -11px; width: 8px; height: 12px; background: var(--c); }
.optics i::after { content: ""; position: absolute; left: 2px; bottom: -31px; width: 22px; height: 20px; border-radius: 3px 3px 7px 7px; background: linear-gradient(90deg, #8a8a8a, #f4f4f4 45%, #9a9a9a); box-shadow: 0 2px 3px rgb(0 0 0 / 0.45); }
.bottle.square { width: 24px; border-radius: 3px 3px 2px 2px; }
.glass { width: 18px; height: 30px; border: 2px solid rgb(255 255 255 / 0.5); border-top: 0; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, rgb(255 255 255 / 0.22), transparent 60%); }
/* the carpet: busy, a bit worn, and very much a pub's */
.carpet { position: relative; height: 64px; margin: 0 -30px; border-top: 3px solid #1b0f08;
  background: linear-gradient(rgb(0 0 0 / 0.6), transparent 45%),
    radial-gradient(circle, #d9a441 0 2.5px, transparent 3px) 0 0 / 26px 26px,
    radial-gradient(circle, transparent 0 7px, #2c5548 7px 9px, transparent 9.5px) 0 0 / 26px 26px,
    radial-gradient(circle, #a8322b 0 5px, transparent 5.5px) 13px 13px / 26px 26px,
    repeating-linear-gradient(45deg, rgb(0 0 0 / 0.14) 0 2px, transparent 2px 9px), #5e1716; }
/* the pub cat, asleep on the first stool */
.stool .cat { position: absolute; left: 50%; bottom: calc(100% - 18px); z-index: 1; width: 84px; margin-left: -42px; }

footer { padding: 20px 16px 26px; text-align: center; font-size: 13px; color: rgb(241 234 217 / 0.6);
  background: repeating-linear-gradient(90deg, #22140b 0 90px, #1b1008 90px 93px); }

@media (prefers-reduced-motion: reduce) {
  .sign { animation: none; }
}