/* Game-night layer v2 (staging sample, 2026-10-10).
   One event layer on top of the approved C design: header ribbon, hero ticket sticker, #game-night module,
   and the shared ticket / plan / hoop components the Knicks guide reuses. Tokens come from c.css. */
:root { --gn-ink: #96370f; --gn-ticket: #fff0b5; --gn-ticket-line: #e2a24a; --gn-rib: 36px; --gn-halo: #ffd04f; }

/* ── 1. Ribbon: first row of the fixed header. The header height token grows with it, so every
   existing offset (hero padding, anchors, mobile menu) moves together. ── */
.gn-ribbon { display: none; }
html.gn-on { --header-h: calc(84px + var(--gn-rib)); }
@media (max-width: 1023px) { html.gn-on { --header-h: calc(68px + var(--gn-rib)); } }
html.gn-on .site-header .bar { height: calc(var(--header-h) - var(--gn-rib)); }
html.gn-on .gn-ribbon {
  display: flex; align-items: center; justify-content: center; gap: 14px; height: var(--gn-rib);
  padding: 0 var(--gutter); background: var(--accent, #bf4614); color: #fff; text-decoration: none; white-space: nowrap; overflow: hidden;
  font: 600 .875rem/1 var(--body); letter-spacing: .01em;
}
.gn-ribbon strong { font-weight: 700; }
.gn-ribbon .gn-rib-short { display: none; }
.gn-ribbon .gn-rib-when { opacity: .92; }
.gn-ribbon .gn-rib-count { padding: 4px 9px; border-radius: 999px; background: #fff; color: var(--accent, #bf4614); font-weight: 700; font-variant-numeric: tabular-nums; }
.gn-ribbon .gn-rib-cta { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.gn-ribbon .gn-ball { width: 16px; height: 16px; flex: none; }
.gn-ribbon:hover .gn-rib-cta, .gn-ribbon:focus-visible .gn-rib-cta { text-decoration-thickness: 2.5px; }
.gn-ribbon:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
html.gn-on .gn-ribbon[data-phase="live"] { background: #8f2f0b; }
@media (max-width: 640px) {
  html.gn-on .gn-ribbon { gap: 10px; font-size: .8125rem; justify-content: flex-start; }
  .gn-ribbon .gn-rib-cta { margin-left: auto; }
  .gn-ribbon .gn-rib-long { display: none; }
  .gn-ribbon .gn-rib-short { display: inline; }
}
@media (max-width: 360px) { .gn-ribbon .gn-rib-when { display: none; } }

/* ── 2. Hero ticket sticker: sits beside the existing stamp; the approved hero copy is untouched. ── */
.gn-sticker {
  position: absolute; z-index: 3; right: 1%; bottom: 7%; display: grid; grid-template-columns: auto auto; align-items: center;
  color: var(--gn-ink); text-decoration: none; transform: rotate(6deg); filter: drop-shadow(0 6px 10px rgb(120 60 10 / .14));
  transition: transform .2s var(--ease, ease);
}
.gn-sticker:hover { transform: rotate(3deg) scale(1.03); }
.gn-sticker:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.gn-sticker > span { background: var(--page); }
.gn-sticker .gn-st-main { display: grid; gap: 4px; padding: 12px 16px 12px 18px; border-radius: 12px 0 0 12px; border: 1.5px solid #c56a22; border-right: 0; }
.gn-sticker .gn-st-k { font: 600 1.45rem/1 "Caveat", cursive; color: var(--accent); }
.gn-sticker .gn-st-d { font: 700 .8125rem/1.2 var(--body); letter-spacing: .02em; }
.gn-sticker .gn-st-c {
  align-self: stretch; display: grid; place-items: center; min-width: 58px; padding: 0 12px; border-radius: 0 12px 12px 0;
  border: 1.5px solid #c56a22; border-left: 1.5px dashed #c56a22; background: var(--gn-ticket);
  font: 900 1.25rem/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
@media (max-width: 1023px) { .gn-sticker { right: 12px; bottom: 9%; } .gn-sticker .gn-st-k { font-size: 1.25rem; } }
@media (max-width: 700px) { .gn-sticker { display: none; } }

/* ── 3. Ticket: shared by the homepage module and the guide. Perforated stub on the right. ── */
.gn-ticket {
  --notch: 11px; position: relative; display: grid; grid-template-columns: 1fr auto; margin: 26px 0 0; max-width: 520px;
  color: var(--text); filter: drop-shadow(0 8px 14px rgb(120 60 10 / .10));
}
.gn-ticket > div { background: var(--gn-ticket); }
.gn-ticket-main {
  padding: 18px 22px 18px 24px; border-radius: 14px 0 0 14px;
  -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.gn-ticket-k { font: 600 .72rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--label, #a63c12); }
.gn-match { margin: 8px 0 6px; font: var(--display-weight, 900) clamp(1.6rem, 2.4vw, 2.1rem)/1.05 var(--display); letter-spacing: -.03em; color: var(--accent); }
.gn-match i { font: 600 1.3em/1 "Caveat", cursive; letter-spacing: 0; color: var(--gn-ink); padding: 0 .12em; }
.gn-ticket-when { font: 700 .9375rem/1.45 var(--body); }
.gn-ticket-when small { display: block; font-weight: 400; font-size: .8125rem; color: var(--muted); }
.gn-stub {
  display: grid; align-content: center; justify-items: center; gap: 6px; min-width: 112px; padding: 14px 16px; border-radius: 0 14px 14px 0;
  border-left: 2px dashed var(--gn-ticket-line); text-align: center;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.gn-stub-big { font: 900 2.5rem/.95 var(--display); letter-spacing: -.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.gn-stub-big.is-word { font-size: 1.55rem; letter-spacing: -.02em; }
:lang(ko) .gn-stub-big.is-word { font: 400 1.6rem/1 var(--ko); }
.gn-stub-small { font: 700 .75rem/1.25 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--gn-ink); max-width: 9em; }
.gn-ticket .gn-ticket-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 14px 0 0; }
.gn-ticket .gn-ticket-rows dt { font: 600 .6875rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.gn-ticket .gn-ticket-rows dd { margin: 4px 0 0; font: 700 .9375rem/1.4 var(--body); }
.gn-ticket .gn-ticket-rows dd small { display: block; font-weight: 400; font-size: .8125rem; color: var(--muted); }
@media (max-width: 420px) {
  .gn-ticket-main { padding: 16px 14px 16px 18px; }
  .gn-stub { min-width: 88px; padding: 12px 10px; }
  .gn-stub-big { font-size: 2.05rem; }
  .gn-ticket .gn-ticket-rows { grid-template-columns: 1fr; }
}

/* ── 4. Pickup plan: three steps, numbered in the handwritten voice of the C notes. ── */
.gn-plan { list-style: none; counter-reset: gn; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; max-width: 620px; }
.gn-plan li { text-wrap: pretty; counter-increment: gn; position: relative; padding: 14px 0 0; border-top: 1.5px solid var(--chip-line, #e8c683); font-size: .9375rem; line-height: 1.45; }
.gn-plan li::before { content: counter(gn); position: absolute; top: -17px; left: -2px; padding-right: 6px; background: var(--gn-plan-bg, var(--page)); font: 600 1.6rem/1 "Caveat", cursive; color: var(--accent); }
.gn-plan b { display: block; margin: 4px 0 2px; font-weight: 700; color: var(--text); }
.gn-plan span { color: var(--muted); }
@media (max-width: 560px) { .gn-plan { grid-template-columns: 1fr; gap: 22px; } }

/* ── 5. Hoop doodle: a hand-drawn ball arcs into the net once when the section arrives. ── */
.gn-hoop { position: absolute; z-index: 3; width: clamp(120px, 13vw, 176px); height: auto; color: var(--accent); overflow: visible; pointer-events: none; }
.gn-hoop .gn-arc { stroke-dasharray: 4 7; }
.gn-hoop .gn-ball-wrap { transform-box: fill-box; transform-origin: center; }
.is-gn-play .gn-hoop .gn-arc { animation: gn-arc .62s ease-out both; }
.is-gn-play .gn-hoop .gn-ball-wrap { animation: gn-shot .9s cubic-bezier(.3, .1, .3, 1) both; }
.is-gn-play .gn-hoop .gn-net { transform-box: fill-box; transform-origin: 50% 0; animation: gn-swish .5s .78s ease-out both; }
@keyframes gn-arc { from { stroke-dashoffset: 120; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes gn-shot {
  0% { transform: translate(-108px, 20px) rotate(-120deg); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(-57px, -45px) rotate(-60deg); }
  78% { transform: translate(-6px, -26px) rotate(-10deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
@keyframes gn-swish { 0% { transform: scaleY(1); } 40% { transform: scaleY(1.16) skewX(-4deg); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .is-gn-play .gn-hoop .gn-arc, .is-gn-play .gn-hoop .gn-ball-wrap, .is-gn-play .gn-hoop .gn-net { animation: none; }
}

/* ── 6. Homepage module ── */
#game-night.gn {
  --gn-plan-bg: var(--page);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 80px);
  max-width: 1440px; margin: auto; padding: clamp(56px, 7vw, 104px) var(--gutter); scroll-margin-top: calc(var(--header-h) + 8px);
  overflow-x: clip;
}
#game-night .gn-copy { max-width: 600px; }
#game-night h2 { margin: 14px 0 18px; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(2.4rem, 4.2vw, 4rem); line-height: 1.04; letter-spacing: var(--h-track); color: var(--accent); }
#game-night .gn-intro { max-width: 34em; font-size: 1.0625rem; line-height: 1.6; }
#game-night .gn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 28px 0 0; }
#game-night .gn-guide { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 5px; }
#game-night .gn-note { margin-top: 22px; font-size: .75rem; line-height: 1.6; color: var(--muted); }
#game-night a:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
#game-night .gn-visual { position: relative; margin: 0; padding: 40px 0 0; justify-self: center; width: min(100%, 560px); }
#game-night .gn-visual .gn-halo { position: absolute; inset: 12% -6% 2% 4%; background: var(--gn-halo); border-radius: 49% 51% 43% 57% / 54% 44% 56% 46%; transform: rotate(-6deg); }
#game-night .gn-film { position: relative; z-index: 1; margin: 0 6% 0 2%; padding: 14px 14px 18px; background: #fff; border-radius: 4px; transform: rotate(-3deg); box-shadow: 0 18px 30px rgb(106 60 22 / .16), 0 2px 4px rgb(106 60 22 / .08); }
#game-night .gn-film img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; }
#game-night .gn-film figcaption { margin: 12px 4px 0; font: 600 1.45rem/1.1 "Caveat", cursive; color: var(--gn-ink); text-align: center; }
#game-night .gn-hoop { top: -8px; right: -4px; }
#game-night .gn-tag { position: absolute; z-index: 2; left: -4px; bottom: 6%; padding: 10px 14px; border: 1px solid #c56a22; border-radius: 50%; background: var(--page); color: #a83c10; font: 600 1.2rem/1 "Caveat", cursive; text-align: center; transform: rotate(-11deg); }
#game-night [data-gn-when][hidden] { display: none; }
/* The wings & fries slip and the fine print span both columns under the ticket and the film. */
#game-night .gn-promo { grid-column: 1 / -1; margin: clamp(28px, 3vw, 40px) 0 0; }
#game-night .gn-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; margin: 24px 0 0; }
#game-night .gn-foot .gn-note { margin: 0; }
@media (max-width: 900px) {
  #game-night.gn { grid-template-columns: 1fr; gap: 0; padding: 56px var(--gutter) 64px; }
  #game-night .gn-copy { display: contents; }
  #game-night .gn-copy > * { order: 1; }
  #game-night .gn-copy > .gn-actions, #game-night .gn-copy > .gn-plan { order: 3; }
  /* Phones read: event → order → plan, then the wings & fries half: film, slip, fine print. */
  #game-night .gn-visual { order: 4; width: min(100%, 520px); margin: 34px 0 0; padding-top: 52px; }
  #game-night .gn-visual .gn-halo { inset: 14% -2% 4% 6%; }
  #game-night .gn-promo { order: 5; margin-top: 28px; }
  #game-night .gn-foot { order: 6; margin-top: 22px; }
}
@media (max-width: 640px) {
  #game-night h2 { font-size: 2.35rem; }
  #game-night .gn-intro { font-size: 1rem; }
  #game-night .gn-actions .btn { flex: 1 1 100%; }
  #game-night .gn-hoop { width: 112px; top: 0; right: 0; }
  #game-night .gn-film { padding: 10px 10px 14px; }
  #game-night .gn-film figcaption { font-size: 1.25rem; }
  #game-night .gn-tag { font-size: 1rem; padding: 8px 10px; }
}

/* ── 7. Wings & fries: an order slip (white paper, perforated columns, price sticker). Shared by the homepage
   module and the guide's "watching at home" section. Photos are the owner's; names and prices come from the
   online order menu. ── */
.gn-promo {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  background: #fff; border-radius: 16px; color: var(--text); text-align: left;
  box-shadow: 0 18px 30px rgb(106 60 22 / .12), 0 2px 4px rgb(106 60 22 / .08);
}
.gn-promo > div { min-width: 0; padding: 24px 28px 26px; }
.gn-promo > div + div { border-left: 2px dashed var(--gn-ticket-line); }
.gn-promo-combo { position: relative; padding-right: 136px !important; }
.gn-promo-k { margin: 0; font: 600 .72rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--label, #a63c12); }
.gn-promo-name { margin: 10px 0 8px; font: var(--display-weight, 900) clamp(1.45rem, 1.8vw, 1.8rem)/1.08 var(--display); letter-spacing: -.03em; color: var(--accent); text-wrap: balance; }
.gn-promo-price {
  position: absolute; top: 18px; right: 22px; display: grid; place-content: center; width: 92px; height: 92px; margin: 0;
  border-radius: 50%; border: 1.5px solid #c56a22; background: var(--yellow, #ffd45c); color: var(--gn-ink); text-align: center;
  font: 900 1.45rem/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; transform: rotate(-8deg);
}
.gn-promo-price small { display: block; margin-top: 4px; font: 600 1rem/1 "Caveat", cursive; letter-spacing: 0; }
.gn-promo-price small:lang(ko) { font: 400 .9375rem/1 var(--ko); }
.gn-promo-desc { margin: 0; font-size: .9375rem; line-height: 1.5; }
.gn-promo-when { margin: 12px 0 0; font: 600 1.35rem/1.15 "Caveat", cursive; color: var(--gn-ink); }
.gn-promo-when[hidden] { display: none; }
.gn-promo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 18px; }
.gn-promo-actions .btn { min-height: 46px; padding-inline: 22px; font-size: 1rem; }
.gn-promo-actions .link { min-height: 44px; font-size: .9375rem; }
.gn-promo-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.gn-promo-list li { display: flex; align-items: center; gap: 12px; margin: 0; font-size: .9375rem; line-height: 1.3; }
.gn-promo-list img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--chip-line, #e8c683); }
.gn-promo-list b { display: block; font-weight: 700; }
.gn-promo-list small { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.3; color: var(--muted); }
.gn-promo-list small[lang="ko"] { font-family: var(--ko); font-size: .9375rem; color: var(--label, #a63c12); }
.gn-promo-note { grid-column: 1 / -1; margin: 0; padding: 10px 28px 14px; border-top: 2px dashed var(--gn-ticket-line); font-size: .75rem; line-height: 1.5; color: var(--muted); }
.gn-promo-photo { position: relative; margin: 0 0 18px; padding: 10px 10px 8px; background: #fff; border: 1px solid #efe3c6; border-radius: 4px; box-shadow: 0 10px 18px rgb(106 60 22 / .12); transform: rotate(-1.5deg); }
.gn-promo-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; }
.gn-promo-photo figcaption { margin: 8px 2px 0; font: 600 1.25rem/1.1 "Caveat", cursive; color: var(--gn-ink); text-align: center; }
/* Soda can pinned to the combo film's corner: the photo shows wings and fries only. Two classes so it beats the
   film photo rules (#game-night .gn-film img, #knicks-guide .guide-home img: 16:10 cover crop, min-height). */
#game-night .gn-film .gn-soda, .gn-promo-photo .gn-soda, #knicks-guide .gn-promo-photo .gn-soda {
  position: absolute; z-index: 2; display: block; height: auto; min-height: 0; max-height: none; aspect-ratio: auto;
  object-fit: contain; border-radius: 0; pointer-events: none; transform: rotate(8deg);
  filter: drop-shadow(0 8px 7px rgb(106 60 22 / .26));
}
#game-night .gn-film .gn-soda { width: clamp(52px, 5.4vw, 78px); right: -22px; bottom: 30px; }
.gn-promo-photo .gn-soda, #knicks-guide .gn-promo-photo .gn-soda { width: 58px; right: -18px; bottom: 26px; }
@media (max-width: 640px) { #game-night .gn-film .gn-soda { right: -10px; bottom: 26px; } }
@media (max-width: 1023px) {
  .gn-promo { grid-template-columns: 1fr 1fr; }
  .gn-promo-combo { grid-column: 1 / -1; }
  .gn-promo > div + div { border-left: 0; border-top: 2px dashed var(--gn-ticket-line); }
  .gn-promo > .gn-promo-fries { border-left: 2px dashed var(--gn-ticket-line); }
}
@media (max-width: 640px) {
  .gn-promo { grid-template-columns: 1fr; border-radius: 14px; }
  .gn-promo > div { padding: 20px 18px 22px; }
  .gn-promo > .gn-promo-fries { border-left: 0; }
  .gn-promo-combo { padding-right: 18px !important; }
  .gn-promo-price { position: static; float: right; width: 84px; height: 84px; margin: -4px 0 10px 14px; font-size: 1.3rem; transform: rotate(6deg); }
  .gn-promo-name { font-size: 1.5rem; }
  .gn-promo-actions { clear: both; }
  .gn-promo-actions .btn { flex: 1 1 100%; }
  .gn-promo-list img { width: 48px; height: 48px; }
  .gn-promo-note { padding: 10px 18px 14px; }
}
@media (min-width: 420px) and (max-width: 640px) { .gn-promo-sauces .gn-promo-list { grid-template-columns: 1fr 1fr; gap: 12px 10px; } }

/* Phase end: the module, sticker and ribbon leave together (JS on the client, the Worker on the server). */
[data-gn-gone] { display: none !important; }