/* Tower of Babble — shared look: glazed lapis walls, sandstone/clay bricks, gold accents. */
@font-face { font-family: "Mouse Memoirs"; src: url("/fonts/mouse-memoirs.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Londrina Solid"; font-weight: 900; src: url("/fonts/londrina-solid-900.woff2") format("woff2"); font-display: block; }

:root {
  --lapis: #1f4380;
  --lapis-dk: #132a54;
  --clay: #b56a45;
  --clay-dk: #5e2f1f;
  --sand: #ead4a6;
  --sand-dk: #b98f55;
  --gold: #e3b54d;
  --glaze: #3aa39a;
  --glaze-hi: #4fd0c0;
  --bitumen: #24160f;
  --cream: #f7ecd4;
  --ink: #2a160c;
  --coral-hot: #e8604c;
  --go: #3a8a68;

  /* legacy aliases used around the codebase */
  --navy: var(--lapis); --navy-dk: var(--lapis-dk); --paper: var(--cream); --butter: var(--gold);
  --tan: #d9a46c; --warm: var(--glaze-hi); --tile: var(--bitumen); --sky: #8fb6e8;

  --display: "Mouse Memoirs", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --chunky: "Londrina Solid", "Arial Black", system-ui, sans-serif;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* dark specks for fired-clay bricks */
  --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .08 0 0 0 0 .04 0 0 0 -9 4.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='.35'/%3E%3C/svg%3E");
  /* large soft blotches: weathering */
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .035' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .1 0 0 0 0 .05 0 0 0 1.2 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.2'/%3E%3C/svg%3E");
  /* pits and pores */
  --pits: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='turbulence' baseFrequency='.9' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .06 0 0 0 0 .03 0 0 0 -14 8.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.3'/%3E%3C/svg%3E");
  /* faint diagonal tool marks */
  --chisel: repeating-linear-gradient(104deg, transparent 0 9px, rgba(60,30,12,.06) 9px 10px, transparent 10px 23px),
            repeating-linear-gradient(-68deg, transparent 0 17px, rgba(255,240,210,.05) 17px 18px, transparent 18px 41px);
  /* glaze crazing: thin crack network */
  --craze: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.16' stroke-width='.8'%3E%3Cpath d='M0 22 L18 18 L31 27 L52 20 L70 31 L93 24 L120 30M14 0 L18 18 L12 41 L24 63 L19 80M52 20 L57 46 L44 62M70 31 L77 55 L101 61 L120 52M0 58 L12 41M93 24 L99 0M57 46 L77 55'/%3E%3C/g%3E%3C/svg%3E");
  /* irregular ashlar wall: uneven courses and joints */
  --wall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='184'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.22' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M0 1 L90 3 L200 0 L280 2 L360 1M0 47 L70 45 L150 49 L240 46 L360 48M0 93 L110 91 L190 95 L300 92 L360 93M0 139 L60 141 L170 138 L260 142 L360 139M86 2 L84 46M196 1 L199 48M286 2 L283 47M38 46 L41 92M140 49 L137 94M252 46 L255 92M330 47 L327 93M92 92 L95 139M214 94 L211 140M318 92 L321 140M24 140 L21 184M130 139 L133 184M236 141 L233 184M342 139 L345 184'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='2'%3E%3Cpath d='M0 4 L90 6 L200 3 L280 5 L360 4M0 50 L70 48 L150 52 L240 49 L360 51M0 96 L110 94 L190 98 L300 95 L360 96M0 142 L60 144 L170 141 L260 145 L360 142'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  color: var(--cream);
  font-family: var(--display);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  background: var(--noise), var(--wall),
              radial-gradient(1200px 700px at 50% 35%, rgba(120,170,255,.16), transparent 70%),
              linear-gradient(180deg, #1a3a72, var(--lapis-dk));
}
body.teal { /* "clay" screens: warm fired-brick wall */
  background: var(--noise), var(--wall),
              radial-gradient(1100px 700px at 50% 30%, rgba(255,190,120,.14), transparent 70%),
              linear-gradient(180deg, #74392a, var(--clay-dk));
}
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.upper { text-transform: uppercase; }

/* ---- the stone: core visual unit (class kept as .strip) ----
   The surface lives on ::before so it can be run through an SVG "hew" filter
   (chipped, uneven edges) without distorting the text on top. */
.strip {
  --stone: var(--sand);
  position: relative; isolation: isolate;
  display: inline-block;
  color: var(--ink);
  padding: 0.18em 0.62em 0.1em;
  text-transform: uppercase;
  line-height: 1.05;
}
.strip::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 2px 5px 3px 6px / 5px 2px 6px 3px;
  background-color: var(--stone);
  background-image:
    var(--mottle), var(--pits), var(--noise),
    radial-gradient(120% 140% at 30% 20%, rgba(255,245,225,.22), transparent 60%);
  box-shadow:
    inset 0 0 0 1px rgba(40,20,10,.14),
    inset 0 -6px 10px rgba(40,20,10,.2),
    inset 5px 0 10px rgba(255,235,200,.06),
    inset -6px 0 12px rgba(40,20,10,.18);
  filter: url(#hew-a) drop-shadow(0 4px 0 rgba(28,16,9,.55)) drop-shadow(0 10px 14px rgba(0,0,0,.28));
}
.strip:nth-child(3n+1)::before { filter: url(#hew-b) drop-shadow(0 4px 0 rgba(28,16,9,.55)) drop-shadow(0 10px 14px rgba(0,0,0,.28)); }
.strip:nth-child(3n+2)::before { filter: url(#hew-c) drop-shadow(0 4px 0 rgba(28,16,9,.55)) drop-shadow(0 10px 14px rgba(0,0,0,.28)); }
/* weathered limestone / fired clay */
.strip.peach { --stone: #dea27a; }
.strip.rose { --stone: #bf6b45; color: var(--cream); }
/* worn glaze, like the Ishtar Gate: color with crazing, not gloss */
.strip.sky { --stone: #3f70bd; color: var(--cream); }
.strip.sage { --stone: #4cae9c; color: var(--ink); }
.strip.butter { --stone: #cfa042; color: var(--ink); }
.strip.go { --stone: #4cb5a5; color: var(--ink); }
.strip.sky::before, .strip.sage::before, .strip.butter::before, .strip.go::before {
  background-image: var(--craze), var(--mottle), var(--pits), var(--noise),
    radial-gradient(120% 140% at 30% 15%, rgba(255,255,255,.18), transparent 55%);
}

/* buttons: glazed tiles */
.btn {
  border: 0; border-radius: 4px 7px 5px 8px / 7px 4px 8px 5px;
  padding: 0.35em 1em 0.25em;
  font-size: 1.4em; text-transform: uppercase;
  background: var(--go) var(--mottle);
  color: #fff;
  box-shadow: inset 0 -5px 8px rgba(0,0,0,.25), 0 4px 0 rgba(0,0,0,.35);
  transition: transform .08s, box-shadow .08s, opacity .2s, filter .2s;
}
.btn:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.35); }
.btn:disabled { opacity: .45; filter: grayscale(.4); pointer-events: none; }
.btn.navy { background-color: var(--lapis-dk); }
.btn.coral { background-color: var(--coral-hot); }
.btn.tan { background-color: var(--gold); color: var(--ink); }

.tag {
  display: inline-block; padding: 0.1em 0.45em 0.02em; font-size: .85em; text-transform: uppercase;
  color: #fff; transform: rotate(-4deg); border-radius: 3px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.3);
}
.cat-person { background: #c9466e; }
.cat-place { background: #7a52b8; }
.cat-thing { background: #d9822a; }
.cat-story { background: #2f7fc9; }

/* geometric avatar: circle + triangle + dot + serif initial */
.avatar { position: relative; width: 1em; height: 1em; flex: none; font-size: 64px; }
.avatar i { position: absolute; display: block; }
.avatar .a-circle { inset: 8% 14% 14% 8%; border-radius: 50%; box-shadow: inset 0 -.06em 0 rgba(0,0,0,.18); }
.avatar .a-tri { width: 56%; height: 70%; right: 2%; top: 4%; clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: .95; }
.avatar .a-dot { width: 22%; height: 22%; border-radius: 50%; right: 4%; top: 2%; }
.avatar .a-lines { left: 54%; bottom: 10%; width: 34%; height: 22%; background: repeating-linear-gradient(-35deg, var(--cream) 0 2px, transparent 2px 6px); }
.avatar b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700;
  font-size: .5em; color: var(--ink); padding-right: 12%; padding-bottom: 6%;
}
.avatar.aud .a-circle { background: #9c958a !important; }

.timerbar { height: 8px; background: rgba(0,0,0,.3); overflow: hidden; }
.timerbar > i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; }
.timerbar.low > i { background: var(--coral-hot); }

@keyframes pop { 0% { transform: scale(.6) rotate(var(--r, 0deg)); opacity: 0; } 70% { transform: scale(1.06) rotate(var(--r, 0deg)); } 100% { transform: scale(1) rotate(var(--r, 0deg)); opacity: 1; } }
@keyframes slideUp { from { transform: translateY(16px) rotate(var(--r, 0deg)); opacity: 0; } to { transform: rotate(var(--r, 0deg)); opacity: 1; } }
@keyframes flyIn { from { transform: translateX(110vw) rotate(calc(var(--r, 0deg) + 12deg)); } 80% { transform: translateX(-12px) rotate(var(--r, 0deg)); } to { transform: rotate(var(--r, 0deg)); } }
/* a brick dropped onto the tower: falls, lands with a little squash */
@keyframes thud { 0% { transform: translateY(-420px) rotate(calc(var(--r, 0deg) - 6deg)); opacity: 0; } 55% { transform: translateY(0) rotate(var(--r, 0deg)); opacity: 1; } 68% { transform: translateY(0) scale(1.04, .9) rotate(var(--r, 0deg)); } 100% { transform: rotate(var(--r, 0deg)); } }
@keyframes dropIn { from { transform: translateY(-60px) rotate(var(--r, 0deg)); opacity: 0; } to { transform: rotate(var(--r, 0deg)); opacity: 1; } }
@keyframes wiggle { 0%,100% { transform: rotate(var(--r, 0deg)); } 25% { transform: rotate(calc(var(--r, 0deg) - 4deg)) scale(1.06); } 75% { transform: rotate(calc(var(--r, 0deg) + 4deg)) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }