/* Julgobbin — a paper-cut winter evening.
   Palette: snow, ice, frost and night blue, with a lantern-amber accent and a touch of berry red for small details. */
:root {
  --snow: #F7FAFC;
  --ice: #CFE6F5;
  --frost: #8FB8D8;
  --night: #14233B;
  --lantern: #F2A93B;
  --berry: #C8324B;         /* small details only: cuff, ribbon, berries */
  --berry-deep: #8F1F34;

  --paper: #FFFFFF;
  --ink-soft: #46597A;      /* muted text on snow, 6.6:1 */
  --dusk: #1F3D63;          /* lighter night for gradients */
  --link: #1B5A85;
  --lantern-deep: #D88E1B;
  --line: rgba(143, 184, 216, 0.55);
  --shadow: 0 1px 0 rgba(20, 35, 59, 0.05), 0 18px 32px -24px rgba(20, 35, 59, 0.55);

  --radius-card: 22px;
  --radius-field: 12px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Hiragino Maru Gothic ProN", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--snow);
  color: var(--night);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  min-height: 100vh;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { color: var(--night); }

:focus-visible {
  outline: 3px solid var(--night);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Night sky header with aurora and paper-cut pines ---------- */

.site-header {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--night) 0%, var(--dusk) 78%, #2C5683 100%);
  color: var(--snow);
}

.aurora {
  position: absolute;
  inset: -40% -10% 35% -10%;
  background:
    radial-gradient(60% 55% at 28% 60%, rgba(127, 224, 195, 0.42), transparent 70%),
    radial-gradient(50% 60% at 68% 45%, rgba(143, 184, 216, 0.5), transparent 72%),
    radial-gradient(40% 50% at 88% 70%, rgba(127, 224, 195, 0.25), transparent 70%);
  filter: blur(18px);
  transform: skewY(-6deg);
}

.brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 0;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
}

.brand-mark { width: 1.5rem; height: 1.5rem; color: var(--lantern); }

.treeline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 120px;
}
.pine { fill: #0C1829; }
.pine-far { fill: #1B3557; }
.hill { fill: var(--snow); }

/* ---------- Page ---------- */

.page {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 0.5rem 1.25rem 4rem;
  display: grid;
  gap: 1.5rem;
}

.hero { display: grid; gap: 0.75rem; padding-top: 0.25rem; }

.hero h1 {
  font-size: clamp(2.1rem, 8vw, 3.25rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.eyebrow { font-weight: 700; color: var(--ink-soft); }
.lead { font-size: 1.1875rem; max-width: 34em; }
.hint, .empty, .optional { color: var(--ink-soft); }
.hint { font-size: 0.9375rem; max-width: 38em; }
.optional { font-weight: 400; font-size: 0.875rem; }

h2 { font-size: 1.4rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; font-weight: 700; }

/* Ring facts read as two luggage tags. */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; align-items: baseline; }
.facts dt { color: var(--ink-soft); }
.facts dd { font-weight: 800; font-size: 1.125rem; }

/* ---------- Cards: sheets of paper on snow ---------- */

.card {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.notice { margin-top: 1rem; }

.waiting { background: var(--ice); border-color: transparent; box-shadow: none; }

/* ---------- Forms ---------- */

.stack { display: grid; gap: 0.4rem; }
.stack > label { font-weight: 700; margin-top: 0.55rem; }
.stack > label:first-child { margin-top: 0; }
.stack > .button { margin-top: 1rem; justify-self: start; }

input:not([type="checkbox"]):not([type="hidden"]), select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--frost);
  border-radius: var(--radius-field);
  background: var(--snow);
  color: var(--night);
  font: inherit;
}
textarea { resize: vertical; min-height: 5.5rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--night);
  box-shadow: 0 0 0 4px var(--ice);
  border-radius: var(--radius-field);
}
::placeholder { color: #6B7C97; opacity: 1; }

.check { display: flex; align-items: flex-start; gap: 0.65rem; font-weight: 700; }
.check input { width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; accent-color: var(--night); flex: none; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.6rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--lantern);
  color: var(--night);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
}
.button:hover { background: var(--lantern-deep); color: var(--night); }
.button:active { transform: translateY(1px); }
.button.big { min-height: 58px; padding-inline: 2.25rem; font-size: 1.1875rem; }
.button.small { min-height: 44px; padding: 0.4rem 1.1rem; font-size: 0.9375rem; }
.button.secondary, .button.danger {
  background: transparent;
  border-color: var(--frost);
  color: var(--night);
}
.button.secondary:hover, .button.danger:hover { background: var(--ice); border-color: var(--night); }

.icon-button {
  width: 44px;
  height: 44px;
  border: 2px solid var(--frost);
  border-radius: 50%;
  background: transparent;
  color: var(--night);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.icon-button:hover:not(:disabled) { background: var(--ice); border-color: var(--night); }
.icon-button:disabled { opacity: 0.35; cursor: default; }

.errors {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  border-left: 6px solid var(--lantern);
  background: #FDF1DC;
  font-weight: 700;
}

details > summary {
  cursor: pointer;
  color: var(--link);
  font-weight: 700;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
details[open] > summary { margin-bottom: 0.5rem; }

/* ---------- Home ---------- */

.lang-links { display: flex; gap: 1rem; font-weight: 700; }
.lang-links a[aria-current="true"] { color: var(--night); text-decoration: none; }

.steps { counter-reset: step; display: grid; gap: 0.85rem; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.85rem;
  align-items: start;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--night);
  color: var(--snow);
  font-weight: 800;
}

/* ---------- Organiser ---------- */

.members { display: grid; }
.member {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 0;
  border-top: 2px dashed var(--line);
}
.member:first-child { border-top: 0; padding-top: 0; }
.member-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.member-name { font-size: 1.125rem; }
.member-email, .member-lang { color: var(--ink-soft); font-size: 0.9375rem; overflow-wrap: anywhere; }
.member-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.badge {
  padding: 0.05rem 0.6rem;
  border-radius: 999px;
  background: var(--night);
  color: var(--snow);
  font-size: 0.8125rem;
  font-weight: 700;
}
.flag { font-size: 0.875rem; font-weight: 700; padding: 0.05rem 0.6rem; border-radius: 999px; }
.flag-sent { background: var(--ice); }
.flag-failed { background: var(--lantern); }
.flag-failed::before { content: "! "; }

.draw { background: var(--night); color: var(--snow); border-color: transparent; }
.draw .hint { color: var(--ice); }
.warning { font-weight: 700; }

.assignments { display: grid; gap: 0.5rem; }
.assignments li { padding: 0.6rem 0.9rem; border-radius: 14px; background: var(--snow); }
.gives-to { color: var(--ink-soft); }

/* ---------- Member: unwrap and assignee ---------- */

.unwrap {
  justify-items: center;
  text-align: center;
  padding-block: 2rem;
  background: var(--ice);
  border-color: transparent;
}

.mitten { width: 112px; height: 112px; }
.mitten-hand, .mitten-thumb { fill: var(--paper); stroke: var(--night); stroke-width: 3; stroke-linejoin: round; }
.mitten-cuff { fill: var(--berry); stroke: var(--night); stroke-width: 3; }
.mitten-knit { stroke: var(--berry-deep); stroke-width: 3; stroke-linecap: round; fill: none; }
.mitten-star { fill: var(--lantern); }

.lantern { display: block; width: 88px; height: 88px; }

.assignee {
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(242, 169, 59, 0.28), transparent 60%),
    linear-gradient(160deg, var(--night), var(--dusk));
  color: var(--snow);
  border-color: transparent;
}
.assignee .eyebrow { color: var(--ice); }
.assignee-name {
  font-size: clamp(2.4rem, 11vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--lantern);
  overflow-wrap: anywhere;
}
.assignee h3 { margin-top: 0.5rem; color: var(--ice); }
.assignee .empty { color: var(--ice); }
.assignee .wish { border-color: rgba(207, 230, 245, 0.25); }
.assignee .wish-note { color: var(--ice); }
.assignee a { color: var(--ice); }
.assignee a:hover { color: var(--snow); }

.mitten-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: var(--ice);
  border-radius: inherit;
  transform-origin: 50% 110%;
  animation: lift 900ms cubic-bezier(0.6, 0, 0.3, 1) 250ms forwards;
}
.mitten-cover .mitten { width: 150px; height: 150px; animation: wave 500ms ease-in-out 0ms 1; }

@keyframes lift {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  25% { transform: translateY(6px) rotate(-1.5deg); opacity: 1; }
  100% { transform: translateY(-115%) rotate(7deg); opacity: 0; visibility: hidden; }
}
@keyframes wave {
  0%, 100% { transform: rotate(0); }
  40% { transform: rotate(-9deg); }
  75% { transform: rotate(6deg); }
}

.burst { position: absolute; left: 50%; top: 42%; z-index: 3; pointer-events: none; }
.burst span {
  position: absolute;
  color: var(--snow);
  font-size: 1.1rem;
  animation: fling 1300ms cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
.burst span:nth-child(4n) { color: var(--lantern); }
.burst span:nth-child(4n + 2) { color: var(--ice); }
@keyframes fling {
  0% { transform: translate(0, 0) scale(0.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 60px)) scale(1.1) rotate(160deg); opacity: 0; }
}

/* ---------- Wishlist ---------- */

.wishes { display: grid; }
.wish {
  display: grid;
  gap: 0.5rem;
  padding: 0.9rem 0;
  border-top: 2px dashed var(--line);
}
.wish:first-child { border-top: 0; padding-top: 0; }
.wish-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.85rem; }
.wish-title { font-weight: 700; font-size: 1.125rem; overflow-wrap: anywhere; }
.wish-link { font-weight: 700; white-space: nowrap; }
.wish-note { flex-basis: 100%; color: var(--ink-soft); overflow-wrap: anywhere; white-space: pre-wrap; }
.wish-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.add-wish { margin-top: 0.5rem; padding-top: 1.25rem; border-top: 2px solid var(--ice); }

/* ---------- Messages: notes passed back and forth ---------- */

.messages { display: grid; gap: 0.75rem; }
.msg {
  display: grid;
  gap: 0.15rem;
  max-width: 85%;
  padding: 0.7rem 1rem;
  border-radius: 18px;
}
.msg-other { justify-self: start; background: var(--snow); border: 1.5px solid var(--line); border-bottom-left-radius: 6px; }
.msg-own { justify-self: end; background: var(--ice); border-bottom-right-radius: 6px; }
.msg-who { font-size: 0.8125rem; font-weight: 800; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-time { font-size: 0.8125rem; color: var(--ink-soft); }
.thread-receiving { border-color: var(--frost); border-style: dashed; border-width: 2px; }

/* ---------- Language switch ---------- */

.lang-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.lang-switch button {
  min-height: 44px;
  padding: 0.3rem 1rem;
  border: 2px solid var(--frost);
  border-radius: 999px;
  background: transparent;
  color: var(--night);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: var(--snow); }

/* ---------- Snowfall ---------- */

.snowfall { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.snowfall span {
  position: absolute;
  top: -12px;
  border-radius: 50%;
  background: var(--frost);
  animation: fall linear infinite;
}
@keyframes fall {
  to { transform: translate(var(--drift, 0), 105vh); }
}

@media (min-width: 640px) {
  .site-header { height: 230px; }
  .treeline { height: 150px; }
  .page { gap: 1.75rem; }
  .card { padding: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mitten-cover, .snowfall, .burst { display: none; }
}