/* The world cup's start screen, shared by worldcup.html (the whole page) and event.html (the live
   event card, `.wc-embed`): the headline, the category tiles, the preview, the breathing start button
   and the floating photos, and the one photo-credit chip. Both pages carry the same markup (written
   from scripts/page_content.py worldcup_entry) and run the same js/worldcup.js. The rest of the
   world cup (the match, the result, the splash and the gacha) is css/worldcup.css. */
.wc-view[hidden],
.wc-btn[hidden],
.wc-link[hidden] {
  display: none;
}

.wc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The buttons of the world cup */
.wc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  color: var(--color-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.wc-btn:hover {
  border-color: var(--color-ink);
}

.wc-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* The start screen (owner 2026-10-14: "초입이 재미있어야", a campus game lobby rather than a form).
   A band the width of the screen on a phone: dish photos float behind the edges of a round card
   with a pink-to-blue rim; in it the headline in Jua with the round on a highlighter, the owner's
   tone line, the category tiles, five dishes of the next draw and the big breathing button. The
   brand mix is pink (#db2777, deepened to #be185d for text) and indigo/blue; never the old red-brown.
   Only transform and opacity move (js/worldcup.js ambient, choose, renderPreview, spinTiles). */
.wc-page,
.wc-embed {
  --wc-display: 'Jua', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --wc-grad: linear-gradient(115deg, #db2777, #a21caf 48%, #4f46e5);
  --wc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow-x: clip;                       /* the floating photos never widen the page */
}

.wc-head .page-title,
.wc-intro-title,
.wc-tile-name,
.wc-preview-label,
.wc-btn.wc-btn--big,
.wc-link {
  font-family: var(--wc-display);
  font-weight: 400;                       /* Jua has one weight */
  font-synthesis: none;
  letter-spacing: 0;
}

.wc-intro {
  position: relative;
  margin-inline: -16px;
  padding: 44px 16px 48px;
}

.wc-intro::before {                       /* soft pink and blue light behind the card */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side, rgba(236, 72, 153, 0.2), transparent) 0 0 / 64% 70% no-repeat,
    radial-gradient(closest-side, rgba(99, 102, 241, 0.2), transparent) 100% 100% / 64% 70% no-repeat;
  pointer-events: none;
}

.wc-floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wc-floater {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border: 4px solid #fff;
  border-radius: 24px;
  object-fit: cover;
  background: #fce7f3;
  box-shadow: 0 14px 30px rgba(30, 29, 26, 0.18), 0 2px 6px rgba(30, 29, 26, 0.08);
  rotate: var(--r);
}

.wc-floater[hidden] {
  display: none;
}

/* A phone: four photos peeking from behind the card's top and bottom corners. */
.wc-floater:nth-child(1) { --s: 72px; --r: -11deg; top: 2px; left: 8px; }
.wc-floater:nth-child(2) { --s: 60px; --r: 9deg; top: 10px; right: 10px; }
.wc-floater:nth-child(3) { --s: 58px; --r: 8deg; bottom: 8px; left: 20px; }
.wc-floater:nth-child(4) { --s: 74px; --r: -7deg; bottom: 0; right: 12px; }

.wc-intro-card {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 16px 24px;
  border: 2px solid transparent;
  border-radius: 28px;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(135deg, #f9a8d4, #c4b5fd 50%, #93c5fd) border-box;
  box-shadow: 0 24px 60px rgba(79, 70, 229, 0.16), 0 6px 18px rgba(219, 39, 119, 0.1);
  text-align: center;
}

.wc-intro-title {
  font-size: 30px;
  line-height: 1.3;
  color: var(--color-ink);
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* The round on a pink-to-blue highlighter: accent text over the light lower half (never gradient text). */
.wc-hl {
  padding: 0 0.08em;
  color: var(--color-accent);
  background: linear-gradient(100deg, #fbcfe8, #ddd6fe 50%, #bfdbfe) 0 88% / 100% 0.46em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.wc-intro-tone {
  margin-top: var(--space-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-ink-muted);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* The category tiles: a 3 x 3 board (eight categories and 아무거나), big enough for a thumb. */
.wc-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: var(--space-6);
}

.wc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 96px;
  padding: 10px 4px 9px;
  border: 2px solid #ece6f6;
  border-radius: 20px;
  background: #fff;
  color: var(--color-ink);
  font: inherit;
  line-height: 1.2;
  box-shadow: 0 3px 0 #e6def3;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.wc-tile::after {                         /* the brand glow of the chosen tile */
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.22), 0 12px 28px rgba(219, 39, 119, 0.34);
  opacity: 0;
  pointer-events: none;
}

.wc-tile-emoji {
  font-size: 30px;
  line-height: 1.15;
}

.wc-tile-name {
  font-size: 17px;
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.wc-tile-n {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.wc-tile[aria-pressed="true"] {
  border-color: #db2777;
  background: linear-gradient(150deg, #fdf2f8, #eef2ff);
  box-shadow: 0 4px 0 #be185d;
  transform: rotate(-2.5deg) scale(1.05);
}

.wc-tile:nth-child(even)[aria-pressed="true"] {
  transform: rotate(2.5deg) scale(1.05);
}

.wc-tile[aria-pressed="true"]::after {
  opacity: 1;
}

.wc-tile[aria-pressed="true"] .wc-tile-n {
  color: var(--color-accent);
}

/* 아무거나: a dashed lilac tile; while it spins, the light runs through the others. */
.wc-tile--random {
  border-style: dashed;
  border-color: #c4b5fd;
  background: #faf5ff;
  box-shadow: 0 3px 0 #ddd6fe;
}

.wc-tile--random .wc-tile-n {
  color: #6d28d9;
}

.wc-tile.is-spin {
  border-color: #6366f1;
  background: #eef2ff;
  transform: scale(1.07);
}

.wc-tiles.is-spinning .wc-tile[aria-pressed="true"]:not(.is-spin) {
  transform: none;
}

.wc-tiles.is-spinning .wc-tile[aria-pressed="true"]:not(.is-spin)::after {
  opacity: 0;
}

.wc-tile:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* 이 중에서 나와요: five photos of the next draw, a fanned row of stickers. */
.wc-preview {
  margin-top: var(--space-6);
}

.wc-preview[hidden] {
  display: none;
}

.wc-preview-label {
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-accent);
}

.wc-preview-photos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-width: 460px;
  margin: var(--space-3) auto 0;
  list-style: none;
}

.wc-preview-item {
  min-width: 0;
  rotate: var(--r, 0deg);
}

.wc-preview-item[hidden] {
  display: none;
}

.wc-preview-item:nth-child(1) { --r: -7deg; }
.wc-preview-item:nth-child(2) { --r: 4deg; }
.wc-preview-item:nth-child(3) { --r: -3deg; }
.wc-preview-item:nth-child(4) { --r: 6deg; }
.wc-preview-item:nth-child(5) { --r: -5deg; }

.wc-preview-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 3px solid #fff;
  border-radius: 16px;
  object-fit: cover;
  background: #fce7f3;
  box-shadow: 0 6px 14px rgba(30, 29, 26, 0.16);
}

/* The big button: 🎰 32강 시작 (or ▶ 이어하기), a gradient key with a lip and a glow that breathes. */
.wc-intro-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-6);
}

.wc-btn.wc-btn--big {
  position: relative;
  isolation: isolate;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 8px 20px;
  border-color: transparent;
  border-radius: 20px;
  background: var(--wc-grad);
  color: #fff;
  font-size: 23px;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 5px 0 #5b21b6, 0 14px 30px rgba(126, 34, 206, 0.3);
  touch-action: manipulation;
}

.wc-btn--big::before {                    /* the glow that breathes with the button */
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  border-radius: 30px;
  background: radial-gradient(closest-side, rgba(236, 72, 153, 0.55), transparent);
  opacity: 0.3;
  pointer-events: none;
}

.wc-btn.wc-btn--big:hover {
  border-color: transparent;
}

.wc-btn.wc-btn--resume {
  background: linear-gradient(115deg, #4f46e5, #7c3aed 52%, #db2777);
}

.wc-btn-emoji {
  flex: none;
  font-size: 24px;
  line-height: 1;
}

.wc-link {
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  background: none;
  color: var(--color-ink-muted);
  font-size: 17px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.wc-link:hover {
  color: var(--color-ink);
}

.wc-link[hidden] {
  display: none;
}

.wc-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Before the launch (js/worldcup-gate.js) the big button is a locked pill with a countdown under it;
   after the end the card carries a small note. Both show by data-wc-show. */
.wc-locked,
.wc-ended {
  margin: 0;
  text-align: center;
}

.wc-locked[hidden],
.wc-ended[hidden] {
  display: none;
}

.wc-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.wc-locked-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 8px 20px;
  border: 2px dashed #8b5cf6;
  border-radius: 20px;
  background: #ede9fe;
  color: #4c1d95;
  font-family: var(--wc-display);
  font-size: 23px;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.2;
  letter-spacing: 0;
}

.wc-locked-count {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--color-canvas);
  color: var(--color-ink-muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.wc-locked-count:empty {
  display: none;
}

.wc-ended {
  margin-top: var(--space-3);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-canvas);
  color: var(--color-ink-muted);
  font-size: 14px;
  font-weight: 700;
}

@media (min-width: 561px) {
  .wc-intro {
    padding: 56px 16px 60px;
  }

  .wc-intro-card {
    padding: 44px 40px 36px;
  }

  .wc-intro-title {
    font-size: 42px;
  }

  .wc-intro-tone {
    font-size: 17px;
  }

  .wc-tiles {
    gap: 14px;
  }

  .wc-tile {
    min-height: 112px;
  }

  .wc-tile-emoji {
    font-size: 38px;
  }

  .wc-tile-name {
    font-size: 21px;
  }

  .wc-tile-n {
    font-size: 13px;
  }

  .wc-preview-label {
    font-size: 21px;
  }

  .wc-preview-photos {
    gap: 12px;
  }

  .wc-btn.wc-btn--big {
    width: min(100%, 380px);
    min-height: 68px;
    font-size: 27px;
  }

  .wc-locked-pill {
    width: min(100%, 380px);
    min-height: 68px;
    font-size: 27px;
  }
}

/* Wider: six photos float in the room either side of the card, larger. */
@media (min-width: 700px) {
  .wc-page .wc-floater:nth-child(1) { --s: 128px; --r: -9deg; top: 4%; left: calc(50% - 404px); right: auto; bottom: auto; }
  .wc-page .wc-floater:nth-child(2) { --s: 104px; --r: 7deg; top: 40%; left: calc(50% - 404px); right: auto; bottom: auto; }
  .wc-page .wc-floater:nth-child(3) { --s: 120px; --r: -5deg; bottom: 6%; left: calc(50% - 404px); right: auto; top: auto; }
  .wc-page .wc-floater:nth-child(4) { --s: 116px; --r: 8deg; top: 2%; right: calc(50% - 406px); left: auto; bottom: auto; }
  .wc-page .wc-floater:nth-child(5) { --s: 132px; --r: -8deg; top: 38%; right: calc(50% - 406px); left: auto; bottom: auto; }
  .wc-page .wc-floater:nth-child(6) { --s: 108px; --r: 10deg; bottom: 4%; right: calc(50% - 408px); left: auto; top: auto; }
}

/* Press, hover and the chosen tile's spring, only for people who have not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .wc-tile {
    transition: transform 420ms var(--wc-spring);
    transition: transform 460ms linear(0, 0.06, 0.199, 0.369, 0.539, 0.69, 0.813, 0.905, 0.971, 1.012, 1.035, 1.045, 1.045, 1.041, 1.034, 1.026, 1.018, 1.012, 1.007, 1.003, 1, 0.999, 0.998, 0.998, 1);
  }

  .wc-tile::after {
    transition: opacity 200ms ease-out;
  }

  .wc-tile:active {
    transform: scale(0.95);
  }

  .wc-tile.is-spin {
    transition-duration: 120ms;
  }

  .wc-btn.wc-btn--big {
    transition: transform 100ms cubic-bezier(0, 0, 0.15, 1);
  }

  .wc-btn--big:active {
    transform: translateY(3px) scale(0.97);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .wc-tile:hover:not([aria-pressed="true"]) {
    transform: translateY(-3px);
  }

  .wc-btn--big:hover {
    transform: translateY(-2px);
  }
}

/* The one photo-credit chip (owner 2026-10-14): where the photos come from, in one small pill. */
.wc-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: var(--space-8) auto 0;
  padding: 6px 12px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink-muted);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.wc-embed .wc-chip {
  position: relative;
  margin: 6px auto 4px;
}

.wc-embed .wc-intro::before {
  background-size: 46% 54%, 46% 54%;
}

@media (min-width: 561px) {
  .wc-embed .wc-floater:nth-child(1) { --s: 104px; left: 14px; top: 8px; }
  .wc-embed .wc-floater:nth-child(2) { --s: 88px; right: 16px; top: 16px; }
  .wc-embed .wc-floater:nth-child(3) { --s: 92px; left: 22px; bottom: 14px; }
  .wc-embed .wc-floater:nth-child(4) { --s: 108px; right: 12px; bottom: 6px; }
}

/* Before the launch the draw stays a secret (owner 2026-10-14: "블러 처리 ... 최대한 공개 안하게끔"). While
   js/worldcup-gate.js says `soon` (html[data-wc-phase="soon"]) the tiles, the preview photos and the
   floating photos are blurred past reading, and a frosted lock sits over the tiles and the preview like a
   mystery box. js/worldcup.js also makes the box inert and aria-hidden, shows the photos as placeholders
   with no `src`, and the lock carries the one sentence for assistive tech. Live and ended: untouched. */
.wc-mystery {
  position: relative;
}

.wc-mystery-lock {
  display: none;
  margin: 0;
}

html[data-wc-phase="soon"] .wc-mystery {
  overflow: hidden;                       /* the blur never bleeds out of the box */
  margin: calc(var(--space-6) - 14px) 0 -16px;   /* the padding below adds to the layout nothing: the card keeps its height */
  padding: 0 0 16px;
  border-radius: 24px;
  background: linear-gradient(150deg, #fdf2f8, #f5f3ff 55%, #eff6ff);
  box-shadow: inset 0 0 0 1px #ede9fe;
}

html[data-wc-phase="soon"] .wc-mystery .wc-tiles {
  margin-top: 0;
  padding-top: 14px;
}

html[data-wc-phase="soon"] .wc-mystery-lock:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18)),
    rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}

.wc-mystery-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  padding: 10px 22px;
  border: 2px dashed #8b5cf6;
  border-radius: 999px;
  background: #ede9fe;
  box-shadow: 0 8px 22px rgba(79, 70, 229, 0.22);
  color: #4c1d95;
  font-family: var(--wc-display);
  font-size: 22px;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.2;
  letter-spacing: 0;
  rotate: -3deg;
  white-space: nowrap;
}

html[data-wc-phase="soon"] .wc-tiles {
  filter: blur(12px) saturate(0.75);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

html[data-wc-phase="soon"] .wc-preview-photos {
  filter: blur(10px) saturate(0.75);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

html[data-wc-phase="soon"] .wc-floater {
  filter: blur(9px) saturate(0.55);
}

/* The placeholders: soft colour, so a blurred spot reads as a hidden photo and not an empty frame. */
html[data-wc-phase="soon"] .wc-floater,
html[data-wc-phase="soon"] .wc-preview-photo {
  background:
    radial-gradient(circle at 28% 30%, #fbbf24 0 22%, transparent 55%),
    radial-gradient(circle at 72% 64%, #fb7185 0 24%, transparent 58%),
    radial-gradient(circle at 40% 82%, #818cf8 0 20%, transparent 56%),
    #fbcfe8;
}

@media (min-width: 561px) {
  .wc-mystery-badge {
    padding: 12px 28px;
    font-size: 26px;
  }
}