/* ------------------------------------------------------------------ */
/*  52 Camp Hill Road: housewarming & Christmas drinks                 */
/*  the server-select screen, snowy and chunky                         */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("fonts/Supreme-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("fonts/Supreme-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("fonts/Supreme-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --sky-top: #cdefff;
  --sky-bot: #7cc7ee;
  --snow:    #ffffff;
  --ink:     #123a5c;   /* deep navy: outlines + text          */
  --ink-2:   #47708f;
  --red:     #ff4b5c;   --red-d:   #d62d3d;
  --yellow:  #ffc531;   --yellow-d:#e2a119;
  --green:   #37cf86;   --green-d: #21a86a;
  --amber:   #ffb43c;   /* warm window glow, the odd one out    */

  --disp: "Clash Display", sans-serif;
  --text: "Supreme", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--text);
  color: var(--ink);
  background:
    linear-gradient(180deg, var(--sky-top) 0%, #a6dcf6 42%, var(--sky-bot) 100%)
    fixed;
  overflow-x: hidden;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

#snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; }

/* chunky solid-drop shadow, the whole look hangs off this */
.chunk { box-shadow: 0 5px 0 rgba(18,58,92,0.22); }

/* ------------------------------------------------------------------ */
/*  top bar                                                            */
/* ------------------------------------------------------------------ */
.bar {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.95rem 1.05rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.5ch;
  font-family: var(--disp); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); letter-spacing: -0.01em;
}
.brand .flake { width: 1.05em; height: 1.05em; }
.status {
  display: inline-flex; align-items: center; gap: 0.5ch;
  background: var(--snow); border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 0.28rem 0.7rem; font-family: var(--disp); font-weight: 600;
  font-size: 0.8rem;
}
.status .dot {
  width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(55,207,134,0.7); animation: ping 2.4s ease-out infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(55,207,134,0.55); }
  70%{ box-shadow: 0 0 0 6px rgba(55,207,134,0); }
  100%{ box-shadow: 0 0 0 0 rgba(55,207,134,0); }
}

/* ------------------------------------------------------------------ */
/*  hero: sky, snow hill, the server-select dialog                    */
/* ------------------------------------------------------------------ */
.hero {
  position: relative; z-index: 5;
  padding: 0.4rem 1.05rem 0;
  min-height: calc(100svh - 60px);
  display: flex; flex-direction: column;
}

/* the snow hill + house, sitting behind/under the dialog, cropped at the snowline */
.scene {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 132%; max-width: 680px; z-index: 1; pointer-events: none;
}
.scene svg { display: block; width: 100%; height: auto; }

/* the dialog: fat white panel with a thick navy outline */
.dialog {
  position: relative; z-index: 4;
  align-self: flex-start;
  width: min(100%, 30rem);
  margin-top: 0.9rem;
  background: var(--snow);
  border: 4px solid var(--ink);
  border-radius: 26px;
  box-shadow: 0 10px 0 rgba(18,58,92,0.25);
  overflow: hidden;
}
.dialog__bar {
  display: flex; align-items: center; gap: 0.6ch;
  background: var(--ink); color: var(--snow);
  padding: 0.6rem 1rem;
  font-family: var(--disp); font-weight: 600; font-size: 0.86rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.dialog__bar .mini {
  margin-left: auto; display: inline-flex; gap: 4px;
}
.dialog__bar .mini i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.45); }
.dialog__bar .mini i:first-child { background: var(--green); }

.dialog__body { padding: 0.85rem 0.85rem 1rem; }

/* the selected server: the star */
.server {
  position: relative;
  border: 3px solid var(--ink); border-radius: 18px;
  background: linear-gradient(180deg, #eafaff, #d6f1ff);
  padding: 0.9rem 0.95rem 1rem;
}
.server .pick {
  position: absolute; top: -0.7rem; left: 0.9rem;
  background: var(--green); color: #06381f;
  font-family: var(--disp); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 8px; border: 2.5px solid var(--ink);
}
.server .tag {
  position: absolute; top: 0.55rem; right: -0.5rem; transform: rotate(8deg);
  background: var(--red); color: #fff; border: 2.5px solid var(--ink);
  font-family: var(--disp); font-weight: 700; font-size: 0.82rem;
  padding: 0.3rem 0.6rem; border-radius: 10px; box-shadow: 0 4px 0 var(--red-d);
  white-space: nowrap;
}
.server .no {
  font-family: var(--disp); font-weight: 700; line-height: 0.82;
  font-size: clamp(4.6rem, 27vw, 8rem); letter-spacing: -0.04em;
  color: var(--ink); margin: 0.2rem 0 0.1rem;
}
.server .addr {
  font-family: var(--disp); font-weight: 600; font-size: 1.05rem;
  margin-bottom: 0.7rem;
}
.server .addr small { display: block; font-weight: 500; color: var(--ink-2); font-size: 0.82rem; }

/* capacity bar */
.cap {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.2rem;
  font-family: var(--disp); font-weight: 600; font-size: 0.8rem; color: var(--ink-2);
}
.cap b { color: var(--green-d); }
.bar-track {
  height: 16px; border-radius: 9px; background: #bfe4f2;
  border: 2.5px solid var(--ink); overflow: hidden;
}
.bar-fill {
  height: 100%; width: 84%; border-radius: 6px;
  background: repeating-linear-gradient(-45deg, var(--green) 0 11px, var(--green-d) 11px 22px);
  transform-origin: left; transform: scaleX(0);
  animation: fill 1.5s cubic-bezier(.2,.8,.2,1) 0.3s forwards;
}
@keyframes fill { to { transform: scaleX(1); } }

/* what + when, chunky */
.server .what {
  margin-top: 0.85rem; font-family: var(--disp); font-weight: 600;
  font-size: clamp(1.15rem, 5.6vw, 1.5rem); line-height: 1.03; letter-spacing: -0.01em;
  text-wrap: balance;
}
.server .what .hot { color: var(--red-d); }
.server .when {
  margin-top: 0.35rem; font-size: 0.98rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* live countdown chip */
.count {
  display: inline-flex; align-items: baseline; gap: 0.5ch;
  margin-top: 0.8rem;
  background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 0.3rem 0.8rem; font-family: var(--disp); font-weight: 700;
  box-shadow: 0 4px 0 var(--yellow-d);
}
.count b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.count span { font-weight: 600; font-size: 0.8rem; }

/* the JOIN button: one, big, chunky */
.join {
  display: flex; align-items: center; justify-content: center; gap: 0.55ch;
  width: 100%; margin-top: 0.95rem; min-height: 58px;
  background: var(--red); color: #fff;
  font-family: var(--disp); font-weight: 700; font-size: 1.18rem; letter-spacing: 0.01em;
  border: none; border-radius: 16px;
  text-decoration: none; box-shadow: 0 6px 0 var(--red-d);
  transition: transform .06s ease, box-shadow .06s ease;
}
.join:active { transform: translateY(6px); box-shadow: 0 0 0 var(--red-d); }
.join .arrow { font-size: 1.2em; }

.under {
  margin-top: 0.7rem; text-align: center; font-size: 0.92rem; color: var(--ink-2);
}
.under a {
  font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 2px;
  text-decoration-color: var(--red);
}

/* decoy servers: the joke, small and greyed */
.mini-servers { margin-top: 0.9rem; display: grid; gap: 0.5rem; }
.mini-server {
  display: flex; align-items: center; gap: 0.7rem;
  border: 2.5px solid #b9d6e6; border-radius: 12px;
  padding: 0.55rem 0.75rem; color: #7f9db0; background: #eef8fd;
}
.mini-server .m-dot { width: 0.7em; height: 0.7em; border-radius: 50%; background: #b9c9d4; flex: none; }
.mini-server .m-name { font-family: var(--disp); font-weight: 600; font-size: 0.96rem;
  flex: 1; min-width: 0; }
.mini-server .m-sub { font-weight: 500; font-size: 0.8em; color: #93aec0; white-space: nowrap; }
.mini-server .m-stat { margin-left: auto; flex: none; font-family: var(--disp); font-weight: 600;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }

.hero-pad { flex: 1 1 auto; min-height: 3rem; }

/* ------------------------------------------------------------------ */
/*  the gist: everything practical, one warm paragraph                */
/* ------------------------------------------------------------------ */
.tips {
  position: relative; z-index: 6;
  margin: -1px 0 0; padding: 2rem 1.05rem 2.4rem;
  background: var(--snow);
  border-top: 4px solid var(--ink);
}
.tips .note { max-width: 44rem; margin: 0 auto; }
.tips .lead {
  font-family: var(--disp); font-weight: 700; color: var(--yellow-d);
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; margin-bottom: 0.7rem;
}
.tips .body {
  font-size: clamp(1.12rem, 4.6vw, 1.42rem); line-height: 1.42; font-weight: 400;
  text-wrap: pretty;
}
.tips .body strong { font-weight: 600; }

/* ------------------------------------------------------------------ */
/*  where strip: quiet, incidental                                    */
/* ------------------------------------------------------------------ */
.where {
  position: relative; z-index: 6;
  padding: 1.5rem 1.05rem 1.8rem;
  display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; justify-content: center;
}
.pill {
  display: inline-flex; align-items: center; gap: 0.5ch;
  background: var(--snow); border: 3px solid var(--ink); border-radius: 14px;
  padding: 0.65rem 1rem; font-family: var(--disp); font-weight: 600; font-size: 0.98rem;
  text-decoration: none; box-shadow: 0 4px 0 rgba(18,58,92,0.2);
}
.pill:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(18,58,92,0.2); }

/* ------------------------------------------------------------------ */
/*  footer sign-off                                                   */
/* ------------------------------------------------------------------ */
.foot {
  position: relative; z-index: 6;
  background: var(--ink); color: var(--snow);
  border-top: 4px solid #0b2740;
  padding: 2.2rem 1.05rem 2.6rem;
}
.foot .sign {
  font-family: var(--disp); font-weight: 500; font-size: clamp(1.3rem, 6.4vw, 1.9rem);
  line-height: 1.14; letter-spacing: -0.01em; text-wrap: balance; max-width: 20ch;
}
.foot .sign .y { color: var(--yellow); }
.foot .by { margin-top: 1.6rem; font-size: 0.9rem; color: rgba(255,255,255,0.55); }

/* ------------------------------------------------------------------ */
/*  desktop: poster, dialog left, snowy world right                   */
/* ------------------------------------------------------------------ */
@media (min-width: 860px) {
  .bar { padding: 1.3rem 2.4rem; }
  .brand { font-size: 1.25rem; }
  .hero { padding: 1rem 2.4rem 0; min-height: calc(100svh - 76px); }
  .scene { width: 60%; max-width: 620px; left: auto; right: 2%; transform: none; }
  .dialog { margin-top: 2rem; width: 33rem; }
  .server .no { font-size: 8.5rem; }
  .tips { padding: 3rem 2.4rem; }
  .where { justify-content: flex-start; padding: 2rem 2.4rem; }
  .foot { padding: 3.4rem 2.4rem 3.8rem; }
  .foot .sign { font-size: 2.5rem; max-width: 24ch; }
}

/* ------------------------------------------------------------------ */
/*  reduced motion                                                    */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .bar-fill { animation: none; transform: scaleX(1); }
  .status .dot { animation: none; }
  #snow { display: none; }
}