/* isitbeertime.com — warm amber pub, dark-first, single committed look.
   Signature: a glowing "beer o'clock" band swept across a 3D globe, with all
   times set like a pub "last orders" departure board (monospace, amber-on-dark). */

:root {
  --void:     #0d0906;   /* porter black background            */
  --stout:    #171009;   /* raised panel                       */
  --stout-2:  #1f150c;   /* chip / card                        */
  --amber:    #f5c518;   /* lager gold — the accent            */
  --amber-hot:#ffcf3a;   /* foam-lit highlight                 */
  --copper:   #c47a2c;   /* malt copper mid                    */
  --foam:     #f3e6c4;   /* warm foam off-white (primary text) */
  --muted:    #b39a6f;   /* dimmed foam                        */
  --malt:     #6b4a26;   /* borders / hairlines                */
  --dim:      #4a3722;   /* unlit land / off state             */

  --display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Code", Consolas, monospace;

  --edge: 1px solid color-mix(in srgb, var(--malt) 60%, transparent);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--foam);
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(245,197,24,.14), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(196,122,44,.10), transparent 60%),
    var(--void);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* subtle grain so the dark field never bands */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage {
  position: relative; z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- hero ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .4rem;
  padding-left: .42em; /* optically center the tracked caps */
}

.answer {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(5.5rem, 27vw, 17rem);
  line-height: .8;
  letter-spacing: -.055em;
  animation: pour .9s cubic-bezier(.2,.8,.2,1) both;
}
/* Gradient + glow live on the word only. Keeping the emoji out of the
   background-clip:text context stops it cropping the mug's handle. */
.answer .word {
  display: inline-block;
  padding: 0 .1em;      /* room for the tight-tracked '.' ink inside the text-clip box */
  margin: 0 -.1em;      /* cancel the padding so nothing shifts */
  background: linear-gradient(176deg, #fff5d4 0%, var(--amber-hot) 34%, var(--amber) 58%, var(--copper) 104%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 34px rgba(245,197,24,.34));
}
.answer .mug {
  display: inline-block;
  font-size: .34em;
  vertical-align: .55em;
  margin-left: .06em;
  -webkit-text-fill-color: initial;
}

@keyframes pour { from { opacity: 0; transform: translateY(.14em) scale(.97); } to { opacity: 1; transform: none; } }

.subline {
  max-width: 42ch;
  margin: 1rem auto 0;
  font-size: clamp(.98rem, 2.4vw, 1.16rem);
  line-height: 1.5;
  color: var(--foam);
}
.subline b, .subline strong { color: var(--amber); font-weight: 700; }

/* ---------- globe ---------- */

.globe-wrap {
  position: relative;
  width: min(90vw, 680px);
  aspect-ratio: 1 / 1;
  margin: clamp(1rem, 3vw, 2.2rem) auto 0;
}
.globe-wrap::after { /* warm halo behind the sphere */
  content: ""; position: absolute; inset: 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,197,24,.20), transparent 66%);
  filter: blur(14px);
}
#globe { width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease .1s; }
#globe.ready { opacity: 1; }
#globe.no-globe { display: none; }
#globe canvas { display: block; outline: none; }

.glabel {
  font-family: var(--mono); font-size: 12px; line-height: 1.35;
  background: rgba(13,9,6,.92); color: var(--foam);
  border: 1px solid var(--malt); border-radius: 8px;
  padding: 6px 9px; white-space: nowrap;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
}
.glabel b { color: var(--amber-hot); }
.glabel-star { border-color: #ffe24a; box-shadow: 0 0 20px rgba(255,226,74,.3), 0 8px 26px rgba(0,0,0,.5); }
.glabel-star b { color: #ffe24a; }

/* ---------- visitor status ---------- */

.status {
  margin: clamp(1.4rem, 4vw, 2.4rem) auto 0;
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem;
  background: var(--stout);
  border: var(--edge); border-radius: 999px;
}
.status .clock {
  font-family: var(--mono); font-weight: 600; font-size: 1.05rem;
  color: var(--amber);
  padding: .15rem .55rem; border-radius: 6px;
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}
.status .clock::after { content: ""; display: inline-block; width: .5em; }
#visitor { font-size: .95rem; color: var(--muted); text-align: left; }
#visitor strong { color: var(--foam); font-weight: 600; }

/* ---------- now pouring ---------- */

.pouring {
  width: 100%;
  margin: clamp(2rem, 5vw, 3.2rem) auto 0;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: linear-gradient(180deg, var(--stout), color-mix(in srgb, var(--stout) 70%, var(--void)));
  border: var(--edge); border-radius: 16px;
}
.pouring h2 {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: .82rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: baseline; gap: .6rem; justify-content: center;
}
.pouring h2 .count { color: var(--amber); font-weight: 700; letter-spacing: 0; }

.ticker {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
}
.ticker-item {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .42rem .7rem;
  background: var(--stout-2);
  border: 1px solid color-mix(in srgb, var(--amber) 22%, transparent);
  border-radius: 10px;
  animation: fadein .5s ease both;
}
.tk-city    { font-weight: 600; color: var(--foam); font-size: .92rem; }
.tk-country { color: var(--muted); font-size: .72rem; }
.tk-time    { font-family: var(--mono); color: var(--amber); font-size: .86rem; }

@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- footer ---------- */

footer {
  margin-top: clamp(2rem, 5vw, 3.4rem);
  color: var(--muted); font-size: .82rem; line-height: 1.6;
  max-width: 52ch;
}
.legend {
  display: flex; gap: 1.2rem; justify-content: center; margin-bottom: .8rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
}
.legend span { display: inline-flex; align-items: center; gap: .45rem; }
.dot { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.dot.lit { background: var(--amber); box-shadow: 0 0 10px rgba(245,197,24,.8); }
.dot.off { background: var(--dim); }
footer a { color: var(--copper); text-decoration: none; border-bottom: 1px solid transparent; }
footer a:hover { border-bottom-color: var(--copper); }

/* ---------- a11y / motion ---------- */

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .answer, .ticker-item { animation: none; }
  #globe { transition: none; }
}

@media (max-width: 560px) {
  .status { flex-direction: row; }
  .legend { flex-wrap: wrap; gap: .8rem; }
}