:root {
  --alley-ink: #f8efdc;
  --alley-panel: rgba(30, 20, 13, .96);
  --alley-gold: #d6b86d;
  --hour-angle: 0deg;
  --minute-angle: 0deg;
  --cloud-opacity: .2;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #17110b; }
body.sl-alley-page { overflow: hidden; color: var(--alley-ink); font-family: Inter, Arial, sans-serif; }
.alley-app { position: relative; min-height: 100vh; background: #17110b; }
.alley-viewport { width: 100vw; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.alley-scene { position: relative; width: min(100vw, 150vh); aspect-ratio: 3 / 2; flex: 0 0 auto; overflow: hidden; background: #423321; isolation: isolate; }
.alley-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; z-index: 1; user-select: none; }
.alley-lighting, .alley-clouds, .alley-weather-layer, .alley-leaves, .alley-hotspots, .alley-clock, .alley-bird { position: absolute; }
.alley-lighting { inset: 0; z-index: 4; pointer-events: none; transition: background 1.5s ease, opacity 1.5s ease; mix-blend-mode: multiply; }
[data-time-phase="dawn"] .alley-lighting { background: linear-gradient(rgba(238,174,112,.18),rgba(255,218,166,.08)); }
[data-time-phase="day"] .alley-lighting { background: transparent; }
[data-time-phase="dusk"] .alley-lighting { background: linear-gradient(rgba(129,80,42,.16),rgba(42,26,20,.22)); }
[data-time-phase="night"] .alley-lighting { background: linear-gradient(rgba(9,21,45,.48),rgba(10,16,34,.58)); mix-blend-mode: multiply; }
.alley-clouds {
  z-index: 3;
  left: -35%;
  width: 170%;
  height: 34%;
  top: 0;
  pointer-events: none;
  opacity: var(--cloud-opacity);
  background-repeat: repeat-x;
  background-size: 32% 100%;
  filter: blur(2px);
  /* The master artwork is opaque, so clouds are clipped to the open sky. */
  clip-path: polygon(18% 0,82% 0,82% 10%,77% 13%,73% 17%,68% 18%,63% 22%,58% 18%,53% 21%,48% 18%,43% 21%,38% 17%,33% 19%,28% 15%,23% 13%,18% 10%);
}
.alley-clouds--far { background-image: radial-gradient(ellipse at 50% 55%,rgba(255,255,255,.75) 0 28%,rgba(255,255,255,.24) 45%,transparent 66%); animation: alley-cloud-drift 210s linear infinite; }
.alley-clouds--near { top: 1%; opacity: calc(var(--cloud-opacity) * .65); background-image: radial-gradient(ellipse at 45% 60%,rgba(255,255,255,.7) 0 24%,rgba(255,255,255,.18) 46%,transparent 64%); animation: alley-cloud-drift 145s linear infinite reverse; }
.alley-weather-layer { inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.alley-weather-layer--rain { background-image: repeating-linear-gradient(105deg,transparent 0 18px,rgba(210,230,255,.25) 19px 20px,transparent 21px 34px); background-size: 100% 160%; animation: alley-rain .8s linear infinite; }
.alley-weather-layer--snow { background-image: radial-gradient(circle,rgba(255,255,255,.85) 0 2px,transparent 2.5px),radial-gradient(circle,rgba(255,255,255,.65) 0 1.5px,transparent 2px); background-size: 80px 80px,120px 120px; animation: alley-snow 12s linear infinite; }
.alley-weather-layer--fog {
  top: 72%;
  bottom: 0;
  background: linear-gradient(90deg,rgba(230,232,226,.03),rgba(230,232,226,.34),rgba(230,232,226,.05));
  filter: blur(18px);
  animation: alley-fog 28s ease-in-out infinite alternate;
}
.alley-weather-layer--wet { z-index: 2; top: 58%; background: linear-gradient(180deg,transparent,rgba(170,205,225,.16)); mix-blend-mode: screen; }
[data-weather="rain"] .alley-weather-layer--rain,
[data-weather="storm"] .alley-weather-layer--rain { opacity: .72; }
[data-weather="rain"] .alley-weather-layer--wet,
[data-weather="storm"] .alley-weather-layer--wet { opacity: .7; }
[data-weather="snow"] .alley-weather-layer--snow { opacity: .8; }
[data-weather="fog"] .alley-weather-layer--fog { opacity: .75; }
[data-weather="cloudy"] .alley-clouds,
[data-weather="storm"] .alley-clouds { filter: grayscale(.35) brightness(.8) blur(2px); }
[data-weather="storm"] .alley-lighting { background: rgba(15,20,30,.38); }
.alley-leaves { z-index: 6; top: -4%; width: 28%; height: 28%; pointer-events: none; transform-origin: top center; background: radial-gradient(ellipse at 50% 20%,rgba(70,105,50,.26),transparent 68%); animation: alley-breeze 18s ease-in-out infinite; }
.alley-leaves--left { left: -5%; }
.alley-leaves--right { right: -5%; animation-delay: -8s; }
[data-wind="breezy"] .alley-leaves { animation-duration: 9s; }
[data-wind="strong"] .alley-leaves { animation-duration: 4.5s; }
.alley-clock {
  z-index: 8;
  left: 51.76%;
  top: 21.95%;
  width: 9.85%;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  pointer-events: none;
  border-radius: 50%;
}
.alley-clock::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle,#e7d5ad 0 72%,rgba(231,213,173,.92) 82%,transparent 84%);
}
.alley-clock__hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 999px; background: #17120d; box-shadow: 0 0 1px rgba(255,255,255,.4); }
.alley-clock__hand--hour { width: 5.5%; height: 25%; transform: translateX(-50%) rotate(var(--hour-angle)); }
.alley-clock__hand--minute { width: 3.5%; height: 35%; transform: translateX(-50%) rotate(var(--minute-angle)); }
.alley-clock__pin { position: absolute; left: 50%; top: 50%; width: 8%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: #17120d; }
.alley-bird { z-index: 9; width: 2.7%; color: #251c15; left: -8%; top: 30%; opacity: 0; pointer-events: none; }
.alley-bird.is-visiting { opacity: .9; animation: alley-bird-in 3s ease-out forwards; }
.alley-bird[data-perch="clock"] { --bird-left: 53%; --bird-top: 28%; }
.alley-bird[data-perch="archive"] { --bird-left: 46%; --bird-top: 17%; }
.alley-bird[data-perch="arch"] { --bird-left: 72%; --bird-top: 32%; }
.alley-bird.is-departing { animation: alley-bird-out 3s ease-in forwards; }
.alley-hotspots { inset: 0; z-index: 20; }
.alley-hotspot { position: absolute; border-radius: 10px; text-decoration: none; outline: none; }
.alley-hotspot::after { content: ""; position: absolute; inset: -5px; border: 3px solid transparent; border-radius: 12px; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.alley-hotspot:hover::after,
.alley-hotspot:focus-visible::after { border-color: rgba(255,230,160,.88); background: rgba(255,230,160,.08); box-shadow: 0 0 28px rgba(255,210,120,.45); }
.alley-hotspot--start { left: 18.3%; top: 79.5%; width: 13.3%; height: 16.2%; }
.alley-hotspot--welcome { left: 2.2%; top: 7.5%; width: 18.4%; height: 18.7%; }
.alley-hotspot--archive { left: 28.7%; top: 30.7%; width: 16.2%; height: 18.3%; }
.alley-hotspot--atlas { left: 59.7%; top: 17.5%; width: 15.3%; height: 23.7%; }
.alley-hotspot--question { left: 63.9%; top: 52.3%; width: 8.4%; height: 15.8%; }
.alley-hotspot--research { left: 19.4%; top: 47.0%; width: 9.7%; height: 14.4%; }
.alley-hotspot--reading { left: 2.7%; top: 29.0%; width: 16.3%; height: 17.0%; }
.alley-hotspot--brew { left: 0.8%; top: 49.0%; width: 16.9%; height: 20.2%; }
.alley-hotspot--today-special { left: 5.0%; top: 71.4%; width: 11.8%; height: 20.0%; }
.alley-hotspot--expedition { left: 35.8%; top: 80.5%; width: 24.0%; height: 15.4%; }
.alley-hotspot--community { left: 79.9%; top: 53.1%; width: 18.6%; height: 19.0%; }
.alley-hotspot--cabinet { left: 54.3%; top: 42.0%; width: 11.3%; height: 16.7%; }
.alley-hotspot--guild { left: 81.0%; top: 8.2%; width: 17.1%; height: 28.5%; }
.alley-hotspot--guild-office { left: 84.8%; top: 36.0%; width: 13.8%; height: 16.5%; }
.alley-hotspot--notice { left: 67.5%; top: 70.4%; width: 20.3%; height: 17.2%; }
.alley-toolbar { position: fixed; z-index: 100; top: max(12px,env(safe-area-inset-top)); right: max(12px,env(safe-area-inset-right)); display: flex; gap: 8px; }
.alley-control { appearance: none; border: 1px solid rgba(238,213,164,.5); border-radius: 999px; background: rgba(28,20,13,.76); color: #fff5de; padding: 10px 14px; font: 700 14px/1 Inter,Arial,sans-serif; backdrop-filter: blur(8px); cursor: pointer; }
.alley-control:hover,.alley-control:focus-visible { background: rgba(73,48,25,.92); outline: 2px solid #e6c979; outline-offset: 2px; }
.is-visitor .alley-control--member { display: none; }
.is-member [data-portal="signin"] { display: none; }
.alley-status { position: fixed; z-index: 100; left: 50%; bottom: max(12px,env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(90vw,760px); padding: 8px 14px; border-radius: 999px; background: rgba(28,20,13,.72); color: #fff5de; font-size: 13px; text-align: center; backdrop-filter: blur(8px); }
.alley-panel { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 24px; }
.alley-panel.is-open { display: grid; }
.alley-panel__backdrop { position: absolute; inset: 0; background: rgba(8,6,4,.72); backdrop-filter: blur(6px); }
.alley-panel__card { position: relative; width: min(92vw,650px); max-height: 86vh; overflow: auto; padding: clamp(24px,4vw,44px); border: 1px solid rgba(219,183,108,.65); border-radius: 18px; background: var(--alley-panel); color: var(--alley-ink); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.alley-panel__card h2 { margin: 0 0 8px; font-family: Georgia,serif; font-size: clamp(30px,5vw,46px); }
.alley-panel__card p { font-size: 18px; line-height: 1.5; color: #e5d3b2; }
.alley-panel__close { position: absolute; top: 10px; right: 14px; border: 0; background: transparent; color: white; font-size: 34px; cursor: pointer; }
.alley-panel__links { display: grid; gap: 10px; margin-top: 24px; }
.alley-panel__links a,.alley-panel__links span { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,.07); color: #fff6e2; font-size: 18px; text-decoration: none; }
.alley-panel__links a:hover,.alley-panel__links a:focus-visible { background: rgba(216,184,109,.2); outline: 2px solid #d6b86d; }
.alley-panel__links span[aria-disabled="true"] { color: #bba98b; }
.alley-panel__links small { font-size: 13px; color: #d6b86d; }
.alley-noscript { position: fixed; z-index: 300; inset: auto 20px 20px; padding: 16px; background: #24170d; color: white; }
.is-motion-paused * { animation-play-state: paused !important; }
@keyframes alley-cloud-drift { from { transform: translateX(0); } to { transform: translateX(34%); } }
@keyframes alley-rain { from { background-position: 0 -120%; } to { background-position: 0 120%; } }
@keyframes alley-snow { from { background-position: 0 -120px,30px -180px; } to { background-position: 40px 360px,-20px 420px; } }
@keyframes alley-fog { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
@keyframes alley-breeze { 0%,35%,100% { transform: rotate(0deg) translateY(0); } 45% { transform: rotate(1.2deg) translateY(1px); } 55% { transform: rotate(-.8deg) translateY(-1px); } 65% { transform: rotate(.4deg); } }
@keyframes alley-bird-in { from { left:-8%; top:36%; transform:scale(.6) rotate(-8deg); } 70% { left:var(--bird-left); top:calc(var(--bird-top) - 3%); } to { left:var(--bird-left); top:var(--bird-top); transform:scale(1) rotate(0); } }
@keyframes alley-bird-out { from { left:var(--bird-left); top:var(--bird-top); } to { left:108%; top:8%; transform:scale(.7) rotate(10deg); opacity:0; } }
@media (max-width: 800px) {
  .alley-viewport { overflow-x: auto; overflow-y: hidden; display: block; scroll-snap-type: x proximity; }
  .alley-scene { width: max(1150px,150vh); height: 100vh; aspect-ratio: 3/2; scroll-snap-align: center; }
  .alley-toolbar { left: 8px; right: 8px; justify-content: center; flex-wrap: wrap; }
  .alley-control { padding: 9px 12px; font-size: 13px; }
  .alley-status { bottom: 8px; font-size: 12px; max-width: 92vw; }
}
@media (prefers-reduced-motion: reduce) {
  .alley-clouds,.alley-weather-layer,.alley-leaves,.alley-bird { animation: none !important; }
  .alley-bird { display: none; }
}


/* === Second Look Alley v18.2.0 readability and clock correction === */
:root{
  --sl-alley-image-brightness: 1.28;
  --sl-alley-image-contrast: 1.08;
  --sl-alley-image-saturation: 1.04;
}

/* Brighten the artwork itself without brightening the live clock overlay. */
.alley-background{
  filter: brightness(var(--sl-alley-image-brightness))
          contrast(var(--sl-alley-image-contrast))
          saturate(var(--sl-alley-image-saturation));
}

/* Keep the environment readable at every hour. The radial layers act as
   broad pools of warm lantern light across signs, paths, and entrances. */
.alley-lighting{
  opacity: 1;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 18% 38%, rgba(255,211,132,.22) 0 5%, rgba(255,190,100,.12) 10%, transparent 24%),
    radial-gradient(circle at 35% 44%, rgba(255,211,132,.24) 0 5%, rgba(255,190,100,.13) 11%, transparent 24%),
    radial-gradient(circle at 51% 39%, rgba(255,219,146,.17) 0 5%, rgba(255,190,100,.10) 11%, transparent 22%),
    radial-gradient(circle at 68% 43%, rgba(255,211,132,.23) 0 5%, rgba(255,190,100,.12) 11%, transparent 24%),
    radial-gradient(circle at 82% 39%, rgba(255,211,132,.22) 0 5%, rgba(255,190,100,.12) 11%, transparent 24%),
    radial-gradient(ellipse at 50% 74%, rgba(255,199,118,.12) 0 18%, transparent 48%),
    linear-gradient(rgba(255,255,255,.055), rgba(255,255,255,.055));
}

[data-time-phase="dawn"] .alley-lighting{
  background:
    radial-gradient(circle at 18% 38%, rgba(255,218,151,.24) 0 5%, rgba(255,185,98,.12) 10%, transparent 24%),
    radial-gradient(circle at 35% 44%, rgba(255,218,151,.25) 0 5%, rgba(255,185,98,.13) 11%, transparent 24%),
    radial-gradient(circle at 68% 43%, rgba(255,218,151,.23) 0 5%, rgba(255,185,98,.12) 11%, transparent 24%),
    radial-gradient(circle at 82% 39%, rgba(255,218,151,.22) 0 5%, rgba(255,185,98,.12) 11%, transparent 24%),
    linear-gradient(rgba(255,214,166,.08), rgba(255,255,255,.04));
}

[data-time-phase="day"] .alley-lighting{
  background:
    radial-gradient(circle at 18% 38%, rgba(255,218,151,.15) 0 5%, transparent 22%),
    radial-gradient(circle at 35% 44%, rgba(255,218,151,.16) 0 5%, transparent 22%),
    radial-gradient(circle at 68% 43%, rgba(255,218,151,.15) 0 5%, transparent 22%),
    radial-gradient(circle at 82% 39%, rgba(255,218,151,.14) 0 5%, transparent 22%),
    linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.035));
}

[data-time-phase="dusk"] .alley-lighting{
  background:
    radial-gradient(circle at 18% 38%, rgba(255,218,151,.30) 0 5%, rgba(255,177,75,.15) 11%, transparent 25%),
    radial-gradient(circle at 35% 44%, rgba(255,218,151,.32) 0 5%, rgba(255,177,75,.16) 11%, transparent 25%),
    radial-gradient(circle at 51% 39%, rgba(255,218,151,.22) 0 5%, rgba(255,177,75,.11) 11%, transparent 23%),
    radial-gradient(circle at 68% 43%, rgba(255,218,151,.31) 0 5%, rgba(255,177,75,.15) 11%, transparent 25%),
    radial-gradient(circle at 82% 39%, rgba(255,218,151,.30) 0 5%, rgba(255,177,75,.15) 11%, transparent 25%),
    radial-gradient(ellipse at 50% 74%, rgba(255,183,87,.15) 0 18%, transparent 50%),
    linear-gradient(rgba(255,184,103,.035), rgba(255,255,255,.02));
}

[data-time-phase="night"] .alley-lighting{
  opacity: 1;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 18% 38%, rgba(255,225,161,.40) 0 5%, rgba(255,178,70,.20) 12%, transparent 27%),
    radial-gradient(circle at 35% 44%, rgba(255,225,161,.42) 0 5%, rgba(255,178,70,.21) 12%, transparent 27%),
    radial-gradient(circle at 51% 39%, rgba(255,225,161,.28) 0 5%, rgba(255,178,70,.14) 12%, transparent 24%),
    radial-gradient(circle at 68% 43%, rgba(255,225,161,.41) 0 5%, rgba(255,178,70,.20) 12%, transparent 27%),
    radial-gradient(circle at 82% 39%, rgba(255,225,161,.40) 0 5%, rgba(255,178,70,.20) 12%, transparent 27%),
    radial-gradient(ellipse at 50% 74%, rgba(255,186,91,.19) 0 20%, transparent 52%),
    linear-gradient(rgba(72,91,125,.045), rgba(255,255,255,.025));
}

/* Storms may darken the sky, but must not make navigation illegible. */
[data-weather="storm"] .alley-lighting{
  background:
    radial-gradient(circle at 18% 38%, rgba(255,225,161,.38) 0 5%, rgba(255,178,70,.18) 12%, transparent 27%),
    radial-gradient(circle at 35% 44%, rgba(255,225,161,.40) 0 5%, rgba(255,178,70,.20) 12%, transparent 27%),
    radial-gradient(circle at 68% 43%, rgba(255,225,161,.39) 0 5%, rgba(255,178,70,.19) 12%, transparent 27%),
    radial-gradient(circle at 82% 39%, rgba(255,225,161,.38) 0 5%, rgba(255,178,70,.18) 12%, transparent 27%),
    linear-gradient(rgba(95,109,132,.035), rgba(255,255,255,.02));
}

/* Do not paint over the original clock face. The original Roman numerals
   remain visible while the live hands are layered above them. */
.alley-clock::before{
  width: 58%;
  background: radial-gradient(circle,
      rgba(255,241,207,.08) 0 58%,
      rgba(255,231,184,.04) 72%,
      transparent 78%);
  box-shadow: inset 0 0 0 1px rgba(65,45,24,.16);
}

.alley-clock__hand{
  background: #120d09;
  box-shadow: 0 0 1px rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.55);
}
.alley-clock__hand--hour{ width: 5.8%; }
.alley-clock__hand--minute{ width: 3.8%; }
.alley-clock__pin{
  width: 5.5%;
  background: #120d09;
  box-shadow: 0 0 0 1px rgba(255,240,205,.36);
}


/* === Second Look Alley v18.3.0 night, cloud, and clock corrections === */

/* Clouds are restricted to the real open-sky band. They never wash over
   buildings, signs, the clock, or the street. */
.alley-clouds{
  top:0 !important;
  left:12% !important;
  width:76% !important;
  height:17% !important;
  z-index:2 !important;
  opacity:min(var(--cloud-opacity), .24) !important;
  filter:blur(1.2px) !important;
  clip-path:polygon(0 0,100% 0,100% 58%,92% 62%,84% 72%,74% 68%,64% 80%,53% 70%,43% 78%,33% 70%,23% 77%,13% 66%,0 58%) !important;
}
.alley-clouds--near{
  top:1% !important;
  opacity:min(calc(var(--cloud-opacity) * .65), .14) !important;
}
[data-weather="cloudy"] .alley-clouds,
[data-weather="storm"] .alley-clouds{
  filter:grayscale(.2) brightness(.78) blur(1.2px) !important;
}

/* At night, remove the false sunrise effect from the baked artwork and
   illuminate navigation with broad, warm lantern pools instead. */
[data-time-phase="night"] .alley-background{
  filter:brightness(.86) contrast(1.12) saturate(.90) !important;
}
[data-time-phase="night"] .alley-lighting{
  opacity:1 !important;
  mix-blend-mode:normal !important;
  background:
    radial-gradient(circle at 18% 40%, rgba(255,215,142,.42) 0 4%, rgba(255,177,73,.23) 10%, transparent 25%),
    radial-gradient(circle at 35% 45%, rgba(255,218,145,.46) 0 4%, rgba(255,177,73,.24) 11%, transparent 26%),
    radial-gradient(circle at 52% 42%, rgba(255,212,135,.30) 0 4%, rgba(255,171,65,.16) 11%, transparent 23%),
    radial-gradient(circle at 68% 45%, rgba(255,218,145,.44) 0 4%, rgba(255,177,73,.23) 11%, transparent 26%),
    radial-gradient(circle at 82% 41%, rgba(255,215,142,.42) 0 4%, rgba(255,177,73,.22) 10%, transparent 25%),
    radial-gradient(ellipse at 50% 72%, rgba(255,189,92,.20) 0 18%, transparent 52%),
    linear-gradient(to bottom, rgba(4,10,24,.54) 0%, rgba(6,12,24,.38) 38%, rgba(8,12,20,.20) 68%, rgba(8,8,12,.06) 100%) !important;
}

/* Dawn begins later so pre-dawn hours remain a lantern-lit night scene. */
[data-time-phase="dawn"] .alley-background{
  filter:brightness(1.02) contrast(1.08) saturate(.98) !important;
}

/* Replace the photographed clock face completely. This removes the two
   baked-in hands, leaving exactly two live hands and readable numerals. */
.alley-clock::before{
  width:79% !important;
  background:radial-gradient(circle at 45% 42%, #eadbb7 0 56%, #dfcba0 72%, #b99b68 78%, transparent 80%) !important;
  box-shadow:inset 0 0 0 2px rgba(49,33,18,.72), inset 0 0 16px rgba(76,48,22,.28) !important;
}
.alley-clock__dial{
  position:absolute;
  left:50%;
  top:50%;
  width:76%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  z-index:1;
  color:#1b130d;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  font-size:clamp(7px, .78vw, 17px);
  line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.34);
}
.alley-clock__dial span{
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-50%);
  white-space:nowrap;
}
.alley-clock__hand{
  z-index:3 !important;
  background:#110b07 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.72) !important;
}
.alley-clock__hand--hour{
  width:5.8% !important;
  height:24% !important;
}
.alley-clock__hand--minute{
  width:3.8% !important;
  height:34% !important;
}
.alley-clock__pin{
  z-index:4 !important;
  width:6.5% !important;
  background:#110b07 !important;
  box-shadow:0 0 0 1px rgba(234,219,183,.45) !important;
}


/* === Second Look Alley v18.4.0: remove cloud haze and simplify clock numerals === */
.alley-clouds{
  display:none !important;
  opacity:0 !important;
  background:none !important;
  filter:none !important;
}

.alley-clock__dial{
  width:70% !important;
  color:#171009 !important;
  font-family:Inter, Arial, sans-serif !important;
  font-weight:800 !important;
  font-size:clamp(8px,.72vw,15px) !important;
  letter-spacing:0 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.32) !important;
}
.alley-clock__dial span{
  white-space:nowrap;
  line-height:1;
}
.alley-clock::before{
  background:radial-gradient(circle at 50% 50%, #e2cf9f 0 60%, #d7bd84 72%, #a88754 79%, transparent 81%) !important;
  box-shadow:inset 0 0 0 2px rgba(36,24,12,.88), inset 0 0 10px rgba(54,34,16,.38) !important;
}

/* === Second Look Alley v18.5.0: eliminate foreground haze === */
/* No cloud or fog layer may render over the Alley scene. */
.alley-clouds,
.alley-weather-layer--fog{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  background:none !important;
  filter:none !important;
  animation:none !important;
}

/* Night illumination comes from focused lantern pools, not a full-scene veil. */
[data-time-phase="night"] .alley-lighting{
  opacity:1 !important;
  mix-blend-mode:screen !important;
  background:
    radial-gradient(circle at 9% 42%, rgba(255,207,120,.34) 0 1.8%, rgba(255,166,56,.15) 5.5%, transparent 12%),
    radial-gradient(circle at 20% 43%, rgba(255,211,128,.30) 0 1.8%, rgba(255,168,58,.13) 5.5%, transparent 12%),
    radial-gradient(circle at 34% 44%, rgba(255,214,132,.34) 0 1.8%, rgba(255,171,61,.14) 5.8%, transparent 12.5%),
    radial-gradient(circle at 42% 40%, rgba(255,211,126,.22) 0 1.6%, rgba(255,165,54,.10) 5%, transparent 10.5%),
    radial-gradient(circle at 68% 43%, rgba(255,214,132,.32) 0 1.8%, rgba(255,171,61,.14) 5.8%, transparent 12.5%),
    radial-gradient(circle at 76% 38%, rgba(255,210,126,.26) 0 1.6%, rgba(255,166,56,.11) 5.2%, transparent 11%),
    radial-gradient(circle at 86% 41%, rgba(255,207,120,.34) 0 1.8%, rgba(255,166,56,.15) 5.5%, transparent 12%) !important;
}

/* Preserve readable night exposure without suggesting sunrise. */
[data-time-phase="night"] .alley-background{
  filter:brightness(.98) contrast(1.10) saturate(.94) !important;
}

/* === Second Look Alley v18.6.0: true pre-dawn night correction === */
/* The master artwork contains a warm horizon. During local nighttime hours,
   neutralize that baked sunrise with a cool sky-only darkening veil. */
[data-time-phase="night"] .alley-scene::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(2,7,18,.82) 0%,
      rgba(3,8,20,.64) 15%,
      rgba(4,10,22,.42) 28%,
      rgba(4,10,22,.14) 42%,
      transparent 56%);
  mix-blend-mode:multiply;
}

/* Remove every remaining atmospheric veil from the foreground. */
.alley-clouds,
.alley-weather-layer--fog,
[data-weather="cloudy"] .alley-clouds,
[data-weather="partly-cloudy"] .alley-clouds,
[data-weather="storm"] .alley-clouds{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  background:none !important;
  filter:none !important;
  animation:none !important;
}

/* Keep night illumination localized around lanterns and doorways. */
[data-time-phase="night"] .alley-lighting{
  z-index:4 !important;
  opacity:1 !important;
  mix-blend-mode:screen !important;
  background:
    radial-gradient(circle at 9% 42%, rgba(255,214,137,.30) 0 1.2%, rgba(255,174,67,.11) 3.8%, transparent 8.5%),
    radial-gradient(circle at 20% 43%, rgba(255,216,141,.27) 0 1.2%, rgba(255,176,69,.10) 3.8%, transparent 8.5%),
    radial-gradient(circle at 34% 44%, rgba(255,220,148,.31) 0 1.2%, rgba(255,180,72,.11) 4%, transparent 9%),
    radial-gradient(circle at 42% 40%, rgba(255,215,139,.18) 0 1.1%, rgba(255,173,65,.07) 3.5%, transparent 7.5%),
    radial-gradient(circle at 68% 43%, rgba(255,220,148,.29) 0 1.2%, rgba(255,180,72,.10) 4%, transparent 9%),
    radial-gradient(circle at 76% 38%, rgba(255,216,141,.22) 0 1.1%, rgba(255,174,67,.08) 3.6%, transparent 8%),
    radial-gradient(circle at 86% 41%, rgba(255,214,137,.30) 0 1.2%, rgba(255,174,67,.11) 3.8%, transparent 8.5%) !important;
}

[data-time-phase="night"] .alley-background{
  filter:brightness(.92) contrast(1.12) saturate(.88) !important;
}


/* === Second Look Alley v19.1.0: weather overlays fully removed === */
.alley-weather-layer,
.alley-clouds,
.weather-overlay,
#weather-overlay,
.sl-weather-overlay,
.weather-canvas,
canvas.weather,
.rain-overlay,
.snow-overlay,
.cloud-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  background: none !important;
  filter: none !important;
}


/* === Second Look Alley v19.2.5: Wonders sign and improved local-time clock === */
/* Keep the working local-time clock, but make the replacement face blend into the artwork. */
.alley-status {
  display: none !important;
}
.alley-clock {
  display: block !important;
}
.alley-clock::before {
  width: 76% !important;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,.18), transparent 34%),
    radial-gradient(circle at 52% 54%, #d9c18f 0 58%, #c9aa72 68%, #8d6a3f 76%, transparent 78%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(54,35,18,.85),
    inset 0 0 9px rgba(58,35,14,.42),
    0 1px 2px rgba(0,0,0,.28) !important;
  filter: sepia(.12) saturate(.88) contrast(1.03);
}
.alley-clock__dial {
  display: block !important;
  width: 68% !important;
  color: #24170d !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(7px,.64vw,14px) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.2), 0 0 1px rgba(38,22,9,.35) !important;
  opacity: .92;
}
.alley-clock__hand {
  display: block !important;
  background: linear-gradient(90deg,#21150c,#090604 55%,#21150c) !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.55) !important;
}
.alley-clock__hand--hour {
  width: 4.8% !important;
  height: 23% !important;
}
.alley-clock__hand--minute {
  width: 3% !important;
  height: 32% !important;
}
.alley-clock__pin {
  display: block !important;
  width: 5.5% !important;
  background: radial-gradient(circle at 38% 34%,#5d452d 0 18%,#17100a 48%,#080503 100%) !important;
  box-shadow: 0 0 0 1px rgba(190,153,96,.4), 0 1px 2px rgba(0,0,0,.65) !important;
}

/* === Second Look Alley v19.2.6: integrated local-time clock === */
/* The photographed hands were removed from the background artwork. Only the
   live hands are drawn, directly on the original clock face. */
.alley-clock {
  left: 51.82% !important;
  top: 21.10% !important;
  width: 9.85% !important;
  display: block !important;
}
.alley-clock::before,
.alley-clock__dial {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}
.alley-clock__hand {
  display: block !important;
  background: #17110b !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.45) !important;
}
.alley-clock__hand--hour {
  width: 4.8% !important;
  height: 25% !important;
}
.alley-clock__hand--minute {
  width: 3.2% !important;
  height: 35% !important;
}
.alley-clock__pin {
  display: block !important;
  width: 6.5% !important;
  background: #17110b !important;
  box-shadow: 0 0 0 1px rgba(197,165,106,.35), 0 1px 1px rgba(0,0,0,.55) !important;
}

/* === Second Look Alley v19.14.0: Question Everything soundtrack === */
.sl-soundtrack-toggle--alley {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.sl-soundtrack-toggle--alley > span:first-child {
    color: #e8c96f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    line-height: 0.8;
}

.sl-soundtrack-toggle--alley[aria-pressed="true"] {
    border-color: rgba(238, 204, 118, 0.95);
    background: rgba(121, 84, 35, 0.92);
    box-shadow: 0 0 20px rgba(230, 191, 100, 0.23);
}

.sl-soundtrack-toggle--alley[data-soundtrack-state="ready"] {
    border-color: rgba(232, 180, 77, 0.82);
}