/* ==========================================================================
   fleche.css — woven-sash winter evening.
   Architecture: 1 tokens · 2 base · 3 shapes (arrow, notch) · 4 shell (rail,
   topbar, dock, sheet) · 5 components · 6 page regions · 7 motion · 8 media.
   Naming: cf-<component>__<part>, modifiers cf-<component>--<mod>, utilities
   cf-u-*, states is-*.
   ========================================================================== */

/* 1 · tokens ------------------------------------------------------------- */
:root {
  --ink: var(--color-bg, #2A1F4A);
  --ink-2: #21183B;
  --ink-3: var(--color-surface-2, #362A5E);
  --snow: var(--color-surface, #F4F7FB);
  --snow-text: var(--color-text, #F4F7FB);
  --snow-muted: var(--color-text-muted, #CFC9E6);
  --ink-muted: #4E4470;
  --line-on-ink: var(--color-border, #4C3F7E);
  --line-on-snow: #C9C3DD;
  --wool-red: var(--color-accent, #B3262E);
  --wool-yellow: var(--color-primary, #E8B931);
  --wool-spruce: var(--color-success, #2E7D5B);
  --wool-sky: var(--color-accent-2, #4A90C2);
  --focus: #6FB2E4;
  --display: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --text: var(--font, 'Saira Semi Condensed', 'Arial Narrow', system-ui, sans-serif);
  --m: 8px;
  --gutter: clamp(16px, 4vw, 64px);
  --rail: 248px;
  --ease: var(--easing, cubic-bezier(0.16, 1, 0.3, 1));
  --t-fast: var(--motion-fast, 160ms);
  --t-base: var(--motion-base, 360ms);
  --t-slow: var(--motion-slow, 900ms);
  --notch: 14px;
}

/* 2 · base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--wool-yellow) var(--ink-2); scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--ink); color: var(--snow-text);
  font: 400 1.0625rem/1.6 var(--text); font-synthesis: none;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--wool-yellow); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
input, textarea { caret-color: var(--wool-red); }
small { font-size: .82em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cf-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cf-skip { position: absolute; left: 12px; top: -80px; z-index: 300; background: var(--wool-yellow); color: var(--ink); padding: 12px 18px; font-weight: 700; }
.cf-skip:focus { top: 12px; }
.cf-icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -.25em; }
.cf-num { font-variant-numeric: tabular-nums; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* digits in fixed cells (Big Shoulders has no tabular figures) */
.cf-digits { display: inline-flex; align-items: baseline; font-family: var(--display); font-weight: 900; line-height: .86; letter-spacing: 0; white-space: nowrap; }
.cf-d { display: inline-block; width: .6em; text-align: center; }
.cf-d--gap { width: .2em; }
.cf-d--sep { width: auto; padding: 0 .03em; }

/* headings */
.cf-h2 { font: 800 clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem)/.92 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.cf-h3 { font: 600 clamp(1.3rem, 1.1rem + .6vw, 1.6rem)/1.15 var(--text); }

/* 3 · shapes ------------------------------------------------------------- */
/* Arrow (flèche): fletched tail on the left, point on the right. 6 vertices.
   The fill lives on ::before so the focus ring is never clipped. */
.cf-arrow {
  --arrow-bg: var(--snow); --arrow-fg: var(--ink);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 10px 34px 10px 26px; border: 0; background: none; cursor: pointer;
  color: var(--arrow-fg); font: 700 1rem/1.15 var(--text); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  transition: transform var(--t-fast) var(--ease);
}
.cf-arrow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--arrow-bg);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, 11px 50%);
  transition: background-color var(--t-fast) var(--ease);
}
.cf-arrow .cf-icon { transition: transform var(--t-base) var(--ease); }
.cf-arrow:hover { text-decoration: none; }
.cf-arrow:hover .cf-icon { transform: translateX(5px); }
.cf-arrow:active { transform: translateX(2px); }
.cf-arrow--snow { --arrow-bg: var(--snow); --arrow-fg: var(--ink); }
.cf-arrow--snow:hover { --arrow-bg: #FFFFFF; }
.cf-arrow--yellow { --arrow-bg: var(--wool-yellow); --arrow-fg: var(--ink); }
.cf-arrow--yellow:hover { --arrow-bg: #F2C94A; }
.cf-arrow--ink { --arrow-bg: var(--ink); --arrow-fg: var(--snow); }
.cf-arrow--ink:hover { --arrow-bg: var(--ink-3); }
.cf-arrow--lg { min-height: 58px; font-size: 1.1rem; padding-inline: 32px 40px; --notch: 18px; }
.cf-arrow--block { display: flex; width: 100%; }
.cf-arrow[disabled] { opacity: .5; cursor: not-allowed; }

.cf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: 8px 20px;
  border: 2px solid transparent; font-weight: 600; cursor: pointer; text-decoration: none;
}
.cf-btn--snow { background: var(--snow); color: var(--ink); }
.cf-btn--snow:hover { background: #FFFFFF; }
.cf-btn--line { background: transparent; color: var(--snow); border-color: var(--snow); }
.cf-btn--line:hover { background: rgb(244 247 251 / .1); }
.cf-btn--ink { position: relative; isolation: isolate; background: none; color: var(--snow); border: 0; padding-right: 32px; }
.cf-btn--ink::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); transition: background-color var(--t-fast) var(--ease); }
.cf-btn--ink:hover::before { background: var(--ink-3); }
.cf-link-btn { background: none; border: 0; padding: 6px 0; cursor: pointer; display: inline-flex; gap: .5em; align-items: center; text-decoration: underline; text-underline-offset: .22em; }
.cf-link { display: inline-flex; align-items: center; gap: .35em; font-weight: 600; color: var(--wool-yellow); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.cf-link:hover { color: var(--snow); }
.cf-link--ink { color: var(--ink); }
.cf-link--back { margin-bottom: calc(var(--m) * 3); }
.cf-iconbtn { display: grid; place-items: center; width: 48px; height: 48px; background: none; border: 2px solid var(--line-on-ink); cursor: pointer; }

/* weave svg */
.cf-weave { width: 100%; height: 100%; }
.cf-weave .cf-thread { fill: none; }

/* 4 · shell -------------------------------------------------------------- */
.cf-page { min-height: 100vh; }
.cf-demo { margin: 0; display: flex; gap: 10px; align-items: center; justify-content: center; padding: 8px 16px; background: var(--wool-yellow); color: var(--ink); font-weight: 600; }

.cf-topbar { display: none; }
.cf-dock, .cf-sheet { display: none; }

@media (min-width: 1024px) {
  .cf-page { padding-left: var(--rail); }
  .cf-rail { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); }
}

/* desktop rail: the sash */
.cf-rail {
  height: 100vh; overflow: hidden auto; z-index: 20;
  display: flex; flex-direction: column; background: var(--ink-2); scrollbar-width: thin;
}
.cf-rail__weave { position: absolute; inset: 0; z-index: 0; opacity: .9; }
.cf-rail__weave .cf-weave { height: 100%; }
.cf-rail__logo, .cf-rail__nav, .cf-rail__foot { position: relative; z-index: 1; }
.cf-rail__logo { display: grid; place-items: center; background: var(--ink); padding: 20px 20px 18px; }
.cf-mark { display: block; width: 96px; height: 96px; overflow: visible; }
.cf-mark .t { transition: transform var(--t-base) var(--ease); transform-origin: 60px 60px; transform-box: view-box; }
.cf-marklink:hover .cf-mark .t1, .cf-marklink:focus-visible .cf-mark .t1 { transform: translateX(3px); }
.cf-marklink:hover .cf-mark .t2, .cf-marklink:focus-visible .cf-mark .t2 { transform: translateY(3px); }
.cf-marklink:hover .cf-mark .t3, .cf-marklink:focus-visible .cf-mark .t3 { transform: translateX(-3px); }
.cf-marklink:hover .cf-mark .t4, .cf-marklink:focus-visible .cf-mark .t4 { transform: translateY(-3px); }
html[data-motion="reduced"] .cf-mark *, html[data-motion="off"] .cf-mark * { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; transform: none !important; }
html[data-motion="reduced"] .cf-mark .g, html[data-motion="off"] .cf-mark .g { display: none; }
@media (prefers-reduced-motion: reduce) { .cf-mark .t { transition: none; } }
.cf-rail__nav { padding: 28px 0 24px; display: grid; gap: 22px; }
.cf-rail__list { list-style: none; display: grid; gap: 6px; padding-right: 22px; }
.cf-tab {
  --tab-bg: var(--ink); position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 8px 26px 8px 20px; color: var(--snow); font-weight: 600; font-size: 1.05rem; text-decoration: none;
}
.cf-tab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tab-bg); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); transition: background-color var(--t-fast) var(--ease); }
.cf-tab:hover { --tab-bg: var(--ink-3); }
.cf-tab.is-current { --tab-bg: var(--wool-yellow); color: var(--ink); }
.cf-tab--quiet { font-size: .95rem; font-weight: 500; min-height: 40px; }
.cf-rail__foot { margin-top: auto; background: var(--ink); padding: 18px 20px 20px; display: grid; gap: 14px; }
.cf-rail__age { display: flex; gap: 10px; align-items: center; font-size: .78rem; line-height: 1.35; color: var(--snow-muted); margin: 0; }
.cf-age { display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 6px; border: 2px solid var(--snow); font: 900 .95rem/1 var(--display); color: var(--snow); }

.cf-user { position: relative; }
.cf-user__trigger { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; padding: 10px 12px; background: var(--ink-3); border: 0; cursor: pointer; }
.cf-user__name { display: flex; gap: 8px; align-items: center; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-user__balance { grid-column: 1; font: 800 1.4rem/1 var(--display); color: var(--wool-yellow); }
.cf-user__chev { grid-column: 2; grid-row: 1 / span 2; align-self: center; transition: transform var(--t-fast) var(--ease); }
.cf-user__trigger[aria-expanded="true"] .cf-user__chev { transform: rotate(180deg); }
.cf-user__panel { display: grid; gap: 2px; padding: 6px 0 0; }
.cf-user__panel[hidden] { display: none; }
.cf-user__panel a, .cf-user__panel .cf-link-btn { display: flex; align-items: center; gap: 10px; padding: 8px 4px; text-decoration: none; }
.cf-user__panel a:hover { text-decoration: underline; }
.cf-guest { display: grid; gap: 10px; }
.cf-rail .cf-arrow { font-size: .9rem; letter-spacing: .02em; padding-inline: 20px 30px; }
.cf-guest__login { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 8px; font-weight: 600; }

.cf-lang { display: flex; align-items: center; gap: 4px; }
.cf-lang .cf-icon { margin-right: 6px; color: var(--snow-muted); }
.cf-lang__item { min-width: 44px; min-height: 36px; display: grid; place-items: center; font-weight: 700; text-decoration: none; border: 2px solid var(--line-on-ink); }
.cf-lang__item.is-current { background: var(--snow); color: var(--ink); border-color: var(--snow); }

/* phone shell */
@media (max-width: 1023.98px) {
  .cf-rail { display: none; }
  .cf-topbar {
    display: flex; position: sticky; top: 0; z-index: 40; height: 56px; align-items: center; justify-content: space-between;
    gap: 12px; padding: 0 16px; background: var(--ink); border-bottom: 1px solid var(--line-on-ink);
  }
  .cf-topbar__logo .cf-mark { width: 44px; height: 44px; }
  .cf-topbar__balance { font: 800 1.35rem/1 var(--display); color: var(--wool-yellow); text-decoration: none; padding: 8px 0; }
  .cf-topbar__login { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; min-height: 44px; }
  .cf-dock {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--ink);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cf-dock__weave { height: 12px; }
  .cf-dock__list { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); }
  .cf-dock__item {
    width: 100%; min-height: 60px; display: grid; justify-items: center; align-content: center; gap: 3px; padding: 6px 2px;
    background: none; border: 0; color: var(--snow); text-decoration: none; font-size: .72rem; font-weight: 600; line-height: 1.1; cursor: pointer; text-align: center;
  }
  .cf-dock__item .cf-icon { width: 22px; height: 22px; }
  .cf-dock__item.is-current { color: var(--wool-yellow); box-shadow: inset 0 3px 0 var(--wool-yellow); }
  .cf-main, .cf-letter, .cf-footer { scroll-margin-bottom: 80px; }
  .cf-footer { padding-bottom: 80px; }
  .cf-sheet:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 60; align-items: flex-end; background: rgb(20 14 36 / .72); }
  .cf-sheet__panel { position: relative; width: 100%; max-height: 86vh; overflow: auto; background: var(--ink); padding: 26px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .cf-sheet__weave { position: absolute; left: 0; right: 0; top: 0; height: 10px; }
  .cf-sheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .cf-sheet__title { font: 800 1.6rem/1 var(--display); text-transform: uppercase; }
  .cf-sheet__list { list-style: none; }
  .cf-sheet__list a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line-on-ink); text-decoration: none; font-size: 1.1rem; }
  .cf-sheet__foot { display: grid; gap: 16px; padding-top: 18px; }
  .cf-sheet__note { display: flex; gap: 10px; align-items: center; font-size: .82rem; color: var(--snow-muted); margin: 0; }
}

.cf-main { display: block; min-width: 0; outline: none; }

/* 5 · components --------------------------------------------------------- */
/* lanes */
.cf-lane { padding: clamp(56px, 7vw, 104px) var(--gutter); }
.cf-lane--snow { background: var(--snow); color: var(--ink); }
.cf-lane--snow .cf-link { color: var(--ink); }
.cf-lane--narrow { max-width: 920px; }
.cf-lane__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
.cf-lane__head .cf-h2 { grid-column: 1; }
.cf-lane__head .cf-link { grid-column: 2; grid-row: 1; justify-self: end; }
.cf-lane__lede { grid-column: 1 / -1; max-width: 62ch; margin: 0; color: var(--snow-muted); font-size: 1.1rem; }
.cf-lane--snow .cf-lane__lede { color: var(--ink-muted); }
.cf-lane > .cf-h2 { margin-bottom: clamp(28px, 4vw, 48px); }

/* alerts */
.cf-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 0 0 20px; font-weight: 500; }
.cf-alert ul { list-style: none; display: grid; gap: 4px; }
.cf-alert--error { background: #FBE9EA; color: #6E1219; box-shadow: inset 0 -3px 0 var(--wool-red); }
.cf-alert--ok { background: #E3F2EA; color: #164A33; box-shadow: inset 0 -3px 0 var(--wool-spruce); }
.cf-alert--info { background: #E5EFF8; color: #1E3F5C; box-shadow: inset 0 -3px 0 var(--wool-sky); }
.cf-alert--warn { background: #FBF3DA; color: #5A4300; box-shadow: inset 0 -3px 0 var(--wool-yellow); }

/* panels & forms */
.cf-panel { background: var(--snow); color: var(--ink); padding: clamp(22px, 3vw, 44px) clamp(22px, 3vw, 44px) calc(clamp(22px, 3vw, 44px) + 18px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 50% 100%, 0 calc(100% - 16px)); }
.cf-panel a { color: var(--ink); }
.cf-panel .cf-arrow, .cf-lane--snow .cf-arrow { color: var(--arrow-fg); }
.cf-panel__title { display: flex; align-items: center; gap: 10px; font: 800 1.9rem/1 var(--display); text-transform: uppercase; margin-bottom: 18px; }
.cf-form { display: grid; gap: 18px; }
.cf-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; }
.cf-form--inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.cf-field { display: grid; gap: 6px; min-width: 0; }
.cf-label { font-weight: 600; font-size: .95rem; }
.cf-hint { font-size: .88rem; color: var(--ink-muted); margin: 0; }
.cf-req { color: var(--wool-red); font-weight: 700; }
.cf-input {
  width: 100%; min-height: 48px; padding: 10px 14px; background: #FFFFFF; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0; font-size: 1.05rem;
}
.cf-input::placeholder { color: #6E6690; }
.cf-input:focus-visible { outline: 3px solid var(--wool-sky); outline-offset: 2px; }
.cf-input[aria-invalid="true"] { border-color: var(--wool-red); }
.cf-textarea { min-height: 150px; resize: vertical; }
.cf-select { appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1F4A' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
.cf-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; line-height: 1.45; }
.cf-check input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--ink); }
.cf-consents { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.cf-captcha { display: grid; gap: 8px; }
.cf-captcha__row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cf-captcha__img svg { width: 150px; height: 52px; }
.cf-captcha__input { width: 120px; }
.cf-field-error { color: #8E1A22; font-weight: 600; margin: 0; }

/* tables */
.cf-table-wrap { overflow-x: auto; max-width: 100%; }
.cf-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.cf-table th, .cf-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-on-snow); vertical-align: top; }
.cf-table thead th { font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-bottom: 2px solid var(--ink); }
.cf-table tbody th { font-weight: 600; }
.cf-table tr.is-top { background: var(--wool-yellow); }
.cf-table .is-win { color: var(--wool-spruce); font-weight: 700; }

/* accordions */
.cf-acc { border-top: 2px solid currentColor; }
.cf-acc__item { border-bottom: 1px solid var(--line-on-ink); }
.cf-lane--snow .cf-acc__item, .cf-panel .cf-acc__item { border-color: var(--line-on-snow); }
.cf-acc__item summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 60px; padding: 14px 0; cursor: pointer; font-weight: 600; font-size: 1.12rem;
}
.cf-acc__item summary::-webkit-details-marker { display: none; }
.cf-acc__sign { transition: transform var(--t-base) var(--ease); }
.cf-acc__item[open] .cf-acc__sign { transform: rotate(45deg); }
.cf-acc__body { padding: 0 0 20px; max-width: 70ch; color: var(--snow-muted); }
.cf-lane--snow .cf-acc__body, .cf-panel .cf-acc__body { color: var(--ink-muted); }

/* countdown */
.cf-count { display: inline-flex; align-items: flex-end; gap: .5em; }
.cf-count__unit { display: inline-flex; align-items: baseline; gap: .12em; }
.cf-count__val { font-size: 1em; }
.cf-count__lbl { font: 600 max(11px, .42em)/1 var(--text); text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.cf-count--sm { font-size: 1.6rem; }
.cf-count--md { font-size: 2.6rem; }
.cf-count--lg { font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem); }

/* tickets-sold thread */
.cf-thread-bar { display: grid; gap: 6px; }
.cf-thread-bar__svg { width: 100%; height: 12px; overflow: visible; }
.cf-thread-bar__warp { stroke: currentColor; stroke-opacity: .25; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cf-thread-bar__weft { fill: none; stroke: var(--thread, var(--wool-red)); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: var(--d, 0) 1; }
.cf-thread-bar__txt { font-size: .85rem; color: var(--ink-muted); }
.cf-lane:not(.cf-lane--snow) > .cf-thread-bar .cf-thread-bar__txt { color: var(--snow-muted); }

/* card: vertical ribbon, top notch + bottom point (6 vertices) */
.cf-card {
  --thread: var(--wool-red);
  position: relative; display: flex; flex-direction: column; background: var(--snow); color: var(--ink);
  clip-path: polygon(0 0, 50% 12px, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px));
  padding-bottom: 30px; min-width: 0;
}
.cf-card__weave { height: 56px; background: var(--ink); }
.cf-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-3); }
.cf-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.cf-card:hover .cf-card__media img { transform: scale(1.035); }
.cf-card__body { display: grid; gap: 12px; padding: 18px 20px 0; flex: 1; align-content: start; }
.cf-card__name { font: 800 2rem/.95 var(--display); text-transform: uppercase; }
.cf-card__name a { text-decoration: none; }
.cf-card__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.cf-card__promise { margin: 0; color: var(--ink-muted); font-size: .98rem; }
.cf-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
.cf-card__facts dt { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.cf-card__facts dd { margin: 2px 0 0; font-weight: 600; }
.cf-card__jackpot { font: 800 1.5rem/1 var(--display) !important; }
.cf-card__draw { grid-column: 1 / -1; }
.cf-card__cta { margin-top: 4px; justify-self: start; --arrow-bg: var(--wool-yellow); }

/* fringe: hanging cards, staggered like sash fringes */
.cf-fringe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(20px, 2.4vw, 36px); align-items: start; }
.cf-fringe > :nth-child(3n + 2) { margin-top: 56px; }
.cf-fringe > :nth-child(3n + 3) { margin-top: 112px; }
.cf-fringe--three > * { margin-top: 0 !important; }

.cf-loom-row { display: flex; gap: 24px; overflow-x: auto; padding: 4px 4px 24px; margin-inline: -4px; scroll-snap-type: x mandatory; scrollbar-color: var(--ink) transparent; }
.cf-loom-row > .cf-card { flex: 0 0 min(300px, 78vw); scroll-snap-align: start; }
.cf-loom-row > .cf-card:nth-child(even) { margin-top: 40px; }

/* ribbons: lotteries on one numeral scale */
.cf-ribbons { list-style: none; display: grid; gap: 10px; }
.cf-ribbon {
  --thread: var(--wool-red);
  display: grid; grid-template-columns: 64px minmax(160px, 1fr) minmax(max-content, 1.4fr) max-content max-content max-content;
  align-items: center; gap: 0 clamp(16px, 2vw, 32px); min-height: 124px; padding-right: 24px; background: var(--ink-2);
  transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.cf-ribbon:hover { transform: translateX(6px); background: var(--ink-3); }
.cf-ribbon__end { align-self: stretch; overflow: hidden; }
.cf-ribbon__end .cf-weave { height: 100%; }
.cf-ribbon__name { font: 800 1.75rem/.95 var(--display); text-transform: uppercase; }
.cf-ribbon__name a { text-decoration: none; }
.cf-ribbon__name a:hover { text-decoration: underline; }
.cf-ribbon__meta { margin: 6px 0 0; color: var(--snow-muted); font-size: .92rem; }
.cf-ribbon__jackpot { margin: 0; font-size: clamp(2.4rem, 1.2rem + 2.2vw, 3.9rem); color: var(--snow); }
.cf-ribbon__draw { color: var(--wool-yellow); }
.cf-ribbon__draw .cf-count--sm { font-size: 1.35rem; gap: .35em; }
.cf-ribbon__price { margin: 0; font-weight: 700; font-size: 1.15rem; }
.cf-ribbon__price small { display: block; font-weight: 500; color: var(--snow-muted); }

/* steps: knots along a thread */
.cf-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; position: relative; margin-bottom: 40px; }
.cf-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 25px; height: 4px; background: var(--wool-yellow); }
.cf-steps__item { position: relative; display: grid; gap: 10px; align-content: start; max-width: 38ch; }
.cf-steps__knot { width: 22px; height: 22px; background: var(--wool-red); outline: 4px solid var(--wool-yellow); transform: rotate(45deg); margin: 16px 0 22px 6px; }
.cf-steps__title { font: 800 1.7rem/1 var(--display); text-transform: uppercase; }
.cf-steps__item p { color: var(--snow-muted); }

/* promos */
.cf-promos { display: grid; }
.cf-promo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--ink-2); }
.cf-promos { gap: 6px; background: var(--ink); }
.cf-promo__media { min-height: 340px; overflow: hidden; }
.cf-promo__media img { width: 100%; height: 100%; object-fit: cover; }
.cf-promo__text { display: grid; gap: 16px; align-content: center; justify-items: start; padding: clamp(28px, 5vw, 72px); }
.cf-promo__text p { color: var(--snow-muted); max-width: 52ch; }
.cf-promo--flip .cf-promo__media { order: 2; }

/* pledge: one woven-band statement */
.cf-pledge { background: var(--snow); color: var(--ink); }
.cf-pledge__edge { height: 20px; background: var(--ink); }
.cf-pledge__body { padding: clamp(40px, 5vw, 72px) var(--gutter); display: grid; gap: 18px; }
.cf-pledge__line { margin: 0; max-width: 70ch; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.7; color: var(--ink-muted); }
.cf-pledge__line strong { color: var(--ink); font-weight: 700; }
.cf-pledge__knot { display: inline-block; width: 10px; height: 10px; margin: 0 14px 2px; background: var(--wool-red); transform: rotate(45deg); }

/* promises (definition rows) */
.cf-promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 0; }
.cf-promises__row { padding: 22px 0; border-top: 2px solid var(--ink); display: grid; gap: 6px; }
.cf-promises dt { display: flex; gap: 12px; align-items: center; font: 800 1.6rem/1 var(--display); text-transform: uppercase; }
.cf-promises dt .cf-icon { color: var(--wool-red); }
.cf-promises dd { margin: 0; color: var(--ink-muted); max-width: 52ch; }

/* news row on home */
.cf-newsrow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 24px; }
.cf-newsitem { display: grid; background: var(--ink-2); }
.cf-newsitem:first-child { grid-row: span 2; }
.cf-newsitem:not(:first-child) { grid-template-columns: 42% minmax(0, 1fr); }
.cf-newsitem__media { overflow: hidden; aspect-ratio: 16 / 10; }
.cf-newsitem:not(:first-child) .cf-newsitem__media { aspect-ratio: auto; height: 100%; }
.cf-newsitem__media img { width: 100%; height: 100%; object-fit: cover; }
.cf-newsitem__body { padding: 20px 22px; display: grid; gap: 8px; align-content: start; }
.cf-newsitem__title { font: 600 1.25rem/1.2 var(--text); }
.cf-newsitem__title a { text-decoration: none; }
.cf-newsitem__title a:hover { text-decoration: underline; }
.cf-newsitem__body p { color: var(--snow-muted); margin: 0; }
.cf-newsitem__date { font-size: .85rem; }

/* tags */
.cf-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 28px; }
.cf-tags li { padding: 6px 12px; border: 2px solid var(--ink); font-weight: 600; font-size: .92rem; }

/* letter (newsletter) */
.cf-letter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 56px; align-items: center; padding: clamp(36px, 5vw, 64px) var(--gutter); background: var(--wool-yellow); color: var(--ink); }
.cf-letter__title { font: 800 clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem)/.95 var(--display); text-transform: uppercase; margin-bottom: 10px; }
.cf-letter__form { display: grid; gap: 6px; }
.cf-letter__row { display: flex; gap: 12px; }
.cf-letter__row .cf-input { flex: 1; min-width: 0; }
.cf-letter .cf-arrow--yellow { --arrow-bg: var(--ink); --arrow-fg: var(--snow); }
.cf-letter__notice { min-height: 1.4em; margin: 6px 0 0; font-weight: 600; }

/* footer */
.cf-footer { background: var(--ink); color: var(--snow); }
.cf-footer__sash { height: 56px; }
.cf-footer__inner { padding: 56px var(--gutter) 32px; display: grid; gap: 40px; }
.cf-footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.cf-footer__title { font: 800 1.35rem/1 var(--display); text-transform: uppercase; margin-bottom: 14px; color: var(--wool-yellow); }
.cf-footer__col ul { list-style: none; display: grid; gap: 8px; }
.cf-footer__col a { text-decoration: none; color: var(--snow); font-size: .97rem; }
.cf-footer__col a:hover { text-decoration: underline; }
.cf-footer__contact p { margin: 0 0 8px; }
.cf-footer__contact a { display: inline-flex; gap: 8px; align-items: center; word-break: break-word; }
.cf-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 40px; padding: 28px 0; border-block: 1px solid var(--line-on-ink); background: var(--ink); }
.cf-badges__item { display: block; }
.cf-badges__item img { height: 56px; width: auto; }
.cf-footer__help { display: flex; gap: 12px; align-items: flex-start; margin: 0; color: var(--snow-muted); max-width: 90ch; }
.cf-footer__help a { color: var(--snow); font-weight: 700; white-space: nowrap; }
.cf-footer__help strong { color: var(--snow); }
.cf-pay { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.cf-pay__title { font: 600 .95rem/1 var(--text); color: var(--snow-muted); }
.cf-pay__list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.cf-pay__chip { display: grid; place-items: center; height: 44px; min-width: 76px; padding: 5px 20px 5px 14px; background: var(--snow); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.cf-pay__chip img { height: 26px; width: auto; max-width: 72px; object-fit: contain; }
.cf-footer__base { display: grid; gap: 8px; padding-top: 24px; border-top: 1px solid var(--line-on-ink); font-size: .88rem; color: var(--snow-muted); }
.cf-footer__base p { margin: 0; }
.cf-footer__bottomnav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 8px; }
.cf-footer__bottomnav a { color: var(--snow); font-weight: 600; }

/* consent + gate */
.cf-consent[hidden], .cf-gate[hidden] { display: none !important; }
.cf-consent {
  position: fixed; z-index: 70; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(980px, calc(100% - 32px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center;
  padding: 30px 24px 22px; background: var(--ink-2); color: var(--snow); overflow: hidden;
  box-shadow: 0 18px 48px rgb(10 6 22 / .5);
}
.cf-consent__weave { position: absolute; left: 0; right: 0; top: 0; height: 10px; }
.cf-consent__title { font: 800 1.5rem/1 var(--display); text-transform: uppercase; margin-bottom: 6px; }
.cf-consent__text p { color: var(--snow-muted); font-size: .95rem; }
.cf-consent__text a { color: var(--snow); }
.cf-consent__opts { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.cf-consent__opts[hidden] { display: none; }
.cf-consent__opts .cf-check input { accent-color: var(--wool-yellow); }
.cf-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cf-consent__actions [data-cf-consent="reject"], .cf-consent__actions [data-cf-consent="accept"] { min-width: 150px; }
.cf-consent__actions [hidden] { display: none; }

.cf-gate { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgb(20 14 36 / .94); }
.cf-gate__panel { width: min(560px, 100%); background: var(--ink); border: 2px solid var(--line-on-ink); padding: 0 0 32px; text-align: center; display: grid; gap: 14px; }
.cf-gate__weave { height: 40px; }
.cf-gate__age { margin: 18px 0 0; font-size: 6rem; color: var(--wool-yellow); }
.cf-gate__title { font: 800 2.2rem/1 var(--display); text-transform: uppercase; padding: 0 24px; }
.cf-gate__text { color: var(--snow-muted); padding: 0 28px; }
.cf-gate__actions { display: grid; gap: 12px; padding: 8px 28px 0; }
html.is-locked { overflow: hidden; }

/* 6 · page regions ------------------------------------------------------- */
/* home stage */
.cf-stage { position: relative; min-height: max(640px, 100vh); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; align-items: end; gap: 24px; padding: 0 var(--gutter) clamp(28px, 4vw, 56px); background: var(--ink-2); }
.cf-stage__photo { position: absolute; inset: 0; }
.cf-stage__photo img, .cf-stage__photo .cf-media--empty { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-sash { position: absolute; left: -8%; right: -8%; top: 15%; transform: rotate(-7deg); transform-origin: 50% 50%; z-index: 1; box-shadow: 0 24px 60px rgb(10 6 22 / .45); }
.cf-sash__edge { height: 36px; background: var(--ink); }
.cf-sash__edge--top { height: 52px; }
.cf-sash__field { margin: 0; background: var(--wool-red); color: var(--snow); display: flex; justify-content: center; padding: 6px 0 2px; }
.cf-sash__jackpot { font-size: clamp(6.5rem, 4rem + 8vw, 12rem); display: block; }
.cf-sash__jackpot .cf-digits { line-height: .92; }
.cf-sash__short { display: none; }
.cf-stage__offer, .cf-stage__draw { position: relative; z-index: 2; background: var(--ink); }
.cf-stage__offer { grid-column: 1; justify-self: start; max-width: 520px; padding: 30px 48px 30px 32px; display: grid; gap: 14px; justify-items: start; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.cf-stage__title { font: 600 clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem)/1.12 var(--text); }
.cf-stage__lede { color: var(--snow-muted); margin: 0; max-width: 48ch; }
.cf-stage__draw { grid-column: 2; display: grid; gap: 12px; justify-items: start; padding: 24px 30px 26px 44px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 22px 50%); }
.cf-stage__draw .cf-count--lg { font-size: clamp(2.2rem, 1.6rem + 1.2vw, 2.9rem); }
.cf-stage__drawname { margin: 0; font: 800 1.9rem/1 var(--display); text-transform: uppercase; }
.cf-stage__when { margin: 0; color: var(--snow-muted); font-size: .95rem; }
.cf-stage__draw .cf-count { color: var(--wool-yellow); }

/* inner page head */
.cf-head { position: relative; display: grid; align-items: end; min-height: 280px; padding: clamp(48px, 6vw, 88px) var(--gutter) 0; background: var(--ink-2); overflow: hidden; }
.cf-head--photo { min-height: clamp(360px, 46vh, 520px); }
.cf-head__photo { position: absolute; inset: 0; }
.cf-head__photo img { width: 100%; height: 100%; object-fit: cover; }
.cf-head__plate { position: relative; z-index: 1; justify-self: start; max-width: 860px; background: var(--ink); padding: 28px 56px 30px 30px; margin-bottom: 28px; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%); }
.cf-head__title { font: 800 clamp(2.6rem, 1.6rem + 3.6vw, 5.5rem)/.9 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.cf-head__lede { margin: 14px 0 0; color: var(--snow-muted); max-width: 60ch; font-size: 1.1rem; }
.cf-head__edge { position: relative; z-index: 1; height: 28px; margin-inline: calc(var(--gutter) * -1); }

/* prose */
.cf-prose { display: grid; gap: 32px; }
.cf-prose__block p { max-width: 36em; }
.cf-prose { max-width: calc(36em + 2 * clamp(22px, 3vw, 44px)); }
.cf-prose.cf-prose--cols { max-width: none; }
.cf-prose--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
.cf-prose--cols .cf-prose__block { border-top: 2px solid var(--ink); padding-top: 18px; }
.cf-prose__block .cf-h3 { margin-bottom: 10px; }

/* game page */
.cf-game { --thread: var(--wool-red); position: relative; background: var(--ink-2); padding: 0 var(--gutter) clamp(48px, 6vw, 80px); }
.cf-game__band { height: 72px; margin-inline: calc(var(--gutter) * -1); }
.cf-crumbs { padding: 18px 0 8px; }
.cf-crumbs a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--snow-muted); text-decoration: none; min-height: 44px; }
.cf-crumbs a:hover { color: var(--snow); }
.cf-game__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 32px clamp(32px, 4vw, 64px); align-items: start; }
.cf-game__promise { display: grid; gap: 16px; }
.cf-game__title { font: 800 clamp(2.8rem, 1.8rem + 3.6vw, 5.6rem)/.88 var(--display); text-transform: uppercase; }
.cf-game__label { margin: 0; font-size: 1.2rem; color: var(--snow-muted); }
.cf-gband { margin: 10px 0 4px; max-width: 760px; transform: rotate(-2deg); transform-origin: left center; box-shadow: 0 16px 40px rgb(10 6 22 / .4); }
.cf-gband__edge { height: 18px; background: var(--ink); }
.cf-gband__field { margin: 0; background: var(--wool-red); color: var(--snow); padding: 8px 22px 4px; font-size: clamp(3.6rem, 2rem + 5vw, 6rem); }
.cf-game__when { margin: 10px 0 0; color: var(--snow); font-size: 1.1rem; }
.cf-game__count { margin: 0; color: var(--wool-yellow); }
.cf-game__photo { margin-top: 12px; aspect-ratio: 16 / 9; overflow: hidden; max-width: 760px; }
.cf-game__photo img { width: 100%; height: 100%; object-fit: cover; }
.cf-buy { position: sticky; top: 24px; background: var(--snow); color: var(--ink); padding: 26px 26px 44px; display: grid; gap: 16px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px)); }
.cf-buy__title { display: flex; gap: 10px; align-items: center; font: 800 1.8rem/1 var(--display); text-transform: uppercase; }
.cf-buy__price { margin: 0; font-size: 4rem; display: flex; align-items: baseline; gap: 10px; }
.cf-buy__price small { font: 500 1rem/1 var(--text); color: var(--ink-muted); }
.cf-buy__facts { list-style: none; display: grid; gap: 4px; padding: 12px 0; border-block: 1px solid var(--line-on-snow); font-weight: 500; }
.cf-buy__note { font-size: .85rem; color: var(--ink-muted); margin: 0; }
.cf-gamebody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(32px, 5vw, 80px); }
.cf-gamebody__desc { font-size: 1.2rem; max-width: 60ch; }
.cf-howto { padding-left: 1.4em; display: grid; gap: 10px; margin-top: 14px; max-width: 62ch; }
.cf-howto li::marker { font: 800 1.2rem var(--display); color: var(--wool-red); }
.cf-gamebody__side .cf-h3 { margin-bottom: 12px; }
.cf-gamebody__sched { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
.cf-rgnote { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-on-snow); font-size: .92rem; color: var(--ink-muted); }
.cf-rgnote a { color: var(--ink); font-weight: 600; }

/* operate heads */
.cf-ophead { padding: clamp(32px, 4vw, 56px) var(--gutter) 28px; background: var(--ink-2); display: grid; gap: 16px; justify-items: start; }
.cf-ophead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; width: 100%; }
.cf-ophead__title { font: 800 clamp(2.4rem, 1.6rem + 3vw, 4.6rem)/.9 var(--display); text-transform: uppercase; }
.cf-ophead__note { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--snow-muted); font-size: .95rem; }
.cf-balance { margin: 0; display: grid; justify-items: end; gap: 2px; }
.cf-balance span { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--snow-muted); }
.cf-balance strong { font: 900 2.4rem/1 var(--display); color: var(--wool-yellow); }
.cf-balance--lg strong { font-size: 3.2rem; }

/* play */
.cf-play { max-width: 1120px; padding-top: 36px; }
.cf-acct { padding-top: 40px; }
.cf-playform { display: grid; gap: 24px; }
.cf-mode { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cf-mode legend { margin-bottom: 8px; width: 100%; }
.cf-mode__opt { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px; border: 2px solid var(--ink); cursor: pointer; font-weight: 600; }
.cf-mode__opt input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }
.cf-mode__opt:has(input:checked) { background: var(--ink); color: var(--snow); }
.cf-mode__opt:has(input:checked) input { accent-color: var(--wool-yellow); }
.cf-mode__opt:has(input:focus-visible) { outline: 3px solid var(--wool-sky); outline-offset: 2px; }
.cf-grid-wrap { border: 0; padding: 0; margin: 0; min-width: 0; }
.cf-grid-wrap legend { margin-bottom: 6px; }
.cf-grid-count { margin: 0 0 12px; font-size: .95rem; color: var(--ink-muted); }
.cf-grid-count strong { font: 900 1.4rem/1 var(--display); color: var(--ink); }
.cf-numgrid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px 8px; padding: 10px 0; }
/* warp: an ink thread runs down every column. Between rows it is visible in
   the gap; over the cells it alternates over/under (.is-over = passes over). */
.cf-pick { position: relative; display: block; }
.cf-pick::before { content: ""; position: absolute; left: 50%; top: -10px; height: 10px; width: 3px; margin-left: -1.5px; background: var(--ink); opacity: .55; }
.cf-numgrid > .cf-pick:nth-child(-n+10)::before { display: none; }
.cf-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cf-pick span {
  position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 1; min-height: 44px;
  background: #E7E2F2; box-shadow: inset 0 -3px 0 #CDC5E2; font: 800 1.35rem/1 var(--display);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cf-pick.is-over span::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--ink); opacity: .22; }
/* weft: a strip of the game's wool beaten THROUGH the selected cell, wider than the cell */
.cf-pick span::after {
  content: ""; position: absolute; z-index: -1; left: -8px; right: -8px; top: 50%; height: 8px; margin-top: -4px; background: var(--thread, var(--wool-red));
  transform: translateY(-14px) scaleX(0); transform-origin: left center;
  transition: transform var(--t-base) var(--ease);
}
.cf-pick input:checked + span { background: var(--wool-yellow); box-shadow: none; }
.cf-pick__n { font-style: normal; padding: 2px 4px; background-color: inherit; }
.cf-pick input:checked + span::after { transform: translateY(0) scaleX(1); }
.cf-pick input:hover + span { background: #DAD3EC; }
.cf-pick input:checked:hover + span { background: #F2C94A; }
.cf-pick input:focus-visible + span { outline: 3px solid var(--wool-sky); outline-offset: 2px; z-index: 2; }
.cf-pick input:disabled + span { opacity: .4; }
.cf-pick input:disabled { cursor: not-allowed; }
.cf-playform__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.cf-field--lines { max-width: 360px; }
.cf-field--lines .cf-input { max-width: 140px; }
.cf-playform__cost { margin: 0; display: grid; justify-items: end; }
.cf-playform__cost output { font: 900 2.8rem/1 var(--display); }
.cf-playform__lede { margin: 0; font-size: 1.1rem; }

.cf-result { margin-bottom: 28px; padding: 0 clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px); background: var(--ink-2); display: grid; gap: 18px; }
.cf-result__weave { height: 16px; margin-inline: calc(clamp(22px, 3vw, 36px) * -1); }
.cf-result__msg { display: flex; gap: 10px; align-items: center; margin: 0; font: 800 1.9rem/1.05 var(--display); text-transform: uppercase; }
.cf-result.is-win .cf-result__msg { color: var(--wool-yellow); }
.cf-balls, .cf-squares { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.cf-ball, .cf-square { position: relative; display: grid; place-items: center; width: 64px; height: 64px; background: var(--snow); color: var(--ink); overflow: hidden; }
.cf-ball { border-radius: 50%; }
.cf-ball__num, .cf-square__num { font: 900 1.9rem/1 var(--display); }
.cf-squares { display: grid; grid-template-columns: repeat(3, 72px); }
.cf-square { width: 72px; height: 72px; }
.cf-squares--idle .cf-square { background: var(--ink); }
.cf-ball__veil { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.cf-ball__veil i { display: block; background: var(--wool-red); }
.cf-ball__veil i:nth-child(2) { background: var(--wool-yellow); }
.cf-ball__veil i:nth-child(3) { background: var(--wool-spruce); }
.cf-ball__veil i:nth-child(4) { background: var(--wool-sky); }
.cf-result .cf-ball__veil { visibility: hidden; }
.cf-lines { list-style: none; display: grid; gap: 10px; }
.cf-lines__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cf-lines__label { font-weight: 600; min-width: 70px; }
.cf-lines__nums { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-lines__match { color: var(--snow-muted); }
.cf-chipnum { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border: 2px solid var(--line-on-ink); font: 800 1.2rem/1 var(--display); }
.cf-chipnum.is-hit { background: var(--wool-yellow); color: var(--ink); border-color: var(--wool-yellow); }

.cf-catalog { list-style: none; display: grid; gap: 8px; }
.cf-catalog__row { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1fr) 90px auto; align-items: center; gap: 0 24px; min-height: 76px; padding-right: 16px; background: var(--ink-2); }
.cf-catalog__weave { align-self: stretch; overflow: hidden; }
.cf-catalog__weave .cf-weave { height: 100%; }
.cf-catalog__name { font: 800 1.6rem/1 var(--display); text-transform: uppercase; }
.cf-catalog__kind { color: var(--snow-muted); font-size: .95rem; }
.cf-catalog__price { font-weight: 700; }

/* account */
.cf-acct { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "lim prof" "se prof" "hist hist"; gap: 24px; align-items: start; }
.cf-acct #limits { grid-area: lim; } .cf-acct #self-exclude { grid-area: se; } .cf-acct #profile { grid-area: prof; } .cf-acct #history { grid-area: hist; }
.cf-panel--wide { grid-column: 1 / -1; }
.cf-panel--edge { position: relative; padding-top: calc(clamp(22px, 3vw, 44px) + 12px); }
.cf-panel__weave { position: absolute; left: 0; right: 0; top: 0; height: 12px; }
.cf-thread-bar--limit { color: var(--ink); }
.cf-acct__logout { margin-top: 18px; }

/* auth */
.cf-auth { display: grid; justify-content: center; padding: clamp(28px, 5vw, 72px) var(--gutter); }
.cf-auth__panel { position: relative; width: min(800px, 100%); display: grid; gap: 18px; align-content: start; padding-left: calc(120px + clamp(22px, 3vw, 44px)); }
.cf-auth__side { position: absolute; left: 0; top: 0; bottom: 0; width: 120px; overflow: hidden; background: var(--ink); }
.cf-auth__side .cf-weave { height: 100%; }
.cf-auth__title { font: 800 clamp(2.4rem, 1.8rem + 2vw, 3.6rem)/.92 var(--display); text-transform: uppercase; }
.cf-auth__lede { color: var(--ink-muted); margin: 0; }
.cf-auth__alt { margin: 0; }
.cf-auth__alt a { font-weight: 600; }

/* read pages */
.cf-read { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 32px clamp(28px, 4vw, 56px); align-items: start; }
.cf-read__toc { position: sticky; top: 24px; display: grid; gap: 24px; max-height: calc(100vh - 48px); overflow: auto; scrollbar-width: thin; }
.cf-toc__title { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 800 1.4rem/1 var(--display); text-transform: uppercase; cursor: pointer; list-style: none; padding: 6px 0 12px; border-bottom: 2px solid var(--wool-yellow); }
.cf-toc__chev { transition: transform var(--t-base) var(--ease); }
.cf-toc[open] .cf-toc__chev { transform: rotate(180deg); }
.cf-toc__title::-webkit-details-marker { display: none; }
.cf-toc__list { padding-left: 1.4em; display: grid; gap: 6px; margin-top: 12px; font-size: .95rem; }
.cf-toc__list a { color: var(--snow-muted); text-decoration: none; }
.cf-toc__list a:hover { color: var(--snow); text-decoration: underline; }
.cf-docnav ul { list-style: none; display: grid; gap: 4px; }
.cf-docnav a { display: block; padding: 8px 12px; text-decoration: none; border: 2px solid var(--line-on-ink); font-size: .95rem; }
.cf-docnav a:hover { border-color: var(--snow); }
.cf-docnav a.is-current { background: var(--snow); color: var(--ink); border-color: var(--snow); font-weight: 600; }
.cf-read__doc { max-width: calc(36em + 2 * clamp(22px, 3vw, 44px)); }
.cf-read__doc p { max-width: 36em; }
.cf-read__sections { list-style: none; display: grid; gap: 36px; }
.cf-read__section { scroll-margin-top: 24px; }
.cf-read__h { font: 600 1.45rem/1.2 var(--text); margin-bottom: 12px; }
.cf-read__n { font: 900 1.6rem/1 var(--display); color: var(--wool-red); margin-right: 4px; }
.cf-read__date { font-weight: 600; margin-bottom: 28px; }
.cf-read__cookies { margin-top: 40px; }
.cf-operator { margin-bottom: 32px; padding: 22px 24px; background: #E9E6F3; display: grid; gap: 12px; }
.cf-operator__title { display: flex; gap: 10px; align-items: center; font: 600 1.2rem/1.2 var(--text); }
.cf-operator__grid { display: grid; gap: 8px; margin: 0; }
.cf-operator__grid > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.cf-operator__grid dt { font-weight: 600; }
.cf-operator__grid dd { margin: 0; }
.cf-operator__status { margin: 0; font-size: .95rem; }

/* faq */
.cf-faq { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 32px clamp(28px, 4vw, 64px); align-items: start; }
.cf-faq__nav { position: sticky; top: 24px; }
.cf-faq__nav ul { list-style: none; display: grid; gap: 6px; }
.cf-faq__nav a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; text-decoration: none; border: 2px solid var(--line-on-ink); font-weight: 600; }
.cf-faq__nav a:hover { border-color: var(--snow); }
.cf-faq__groups { display: grid; gap: 48px; max-width: 880px; }
.cf-faq__group { scroll-margin-top: 24px; }
.cf-faq__group .cf-h3 { margin-bottom: 12px; color: var(--wool-yellow); }
.cf-faq__more { display: grid; gap: 14px; justify-items: start; }

/* news stories */
.cf-stories { display: grid; gap: 28px; }
.cf-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--ink-2); }
.cf-story--flip .cf-story__media { order: 2; }
.cf-story__media { min-height: 300px; overflow: hidden; }
.cf-story__media img { width: 100%; height: 100%; object-fit: cover; }
.cf-story__body { padding: clamp(24px, 3.5vw, 52px); display: grid; gap: 12px; align-content: center; }
.cf-story__lede { font-size: 1.15rem; font-weight: 500; }
.cf-story__body p { max-width: 64ch; }
.cf-story__body p:not(.cf-story__lede) { color: var(--snow-muted); }
.cf-story__date { font-size: .88rem; }

/* winners */
.cf-wins { list-style: none; display: grid; gap: 22px; }
.cf-win { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); background: var(--ink-2); }
.cf-win--flip .cf-win__media { order: 2; }
.cf-win__media { margin: 0; min-height: 280px; overflow: hidden; }
.cf-win__media img { width: 100%; height: 100%; object-fit: cover; }
.cf-win__body { padding: clamp(24px, 3.5vw, 48px); display: grid; gap: 10px; align-content: center; }
.cf-win__amount { margin: 0; font-size: clamp(3.4rem, 2rem + 4vw, 5.6rem); color: var(--wool-yellow); }
.cf-win__who { font: 600 1.4rem/1.2 var(--text); }
.cf-win__game { margin: 0; color: var(--snow-muted); }
.cf-win__game a { color: var(--snow); font-weight: 600; }
.cf-win__note { margin: 0; color: var(--snow-muted); }

/* rg */
.cf-rg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 32px; align-items: start; }
.cf-rg__side { display: grid; gap: 24px; position: sticky; top: 24px; }
.cf-help { background: var(--wool-spruce); color: var(--snow); padding: 26px; display: grid; gap: 12px; }
.cf-help__title { display: flex; gap: 10px; align-items: center; font: 800 1.6rem/1 var(--display); text-transform: uppercase; }
.cf-help__list { list-style: none; display: grid; gap: 10px; }
.cf-help__list li { display: grid; gap: 2px; }
.cf-help__list span { font-size: .85rem; }
.cf-help__list a { color: var(--snow); font-weight: 700; font-size: 1.15rem; }
.cf-tools__list { list-style: none; margin: 8px 0 18px; }
.cf-tools__list a { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line-on-snow); text-decoration: none; font-weight: 600; }
.cf-tools__list a:hover { text-decoration: underline; }

/* contact */
.cf-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 32px; align-items: start; }
.cf-contact__list { margin: 0; display: grid; gap: 22px; }
.cf-contact__list dt { display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--wool-yellow); }
.cf-contact__list dd { margin: 4px 0 0; font-size: 1.1rem; }

/* 404 */
.cf-lost { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 64px var(--gutter); text-align: center; }
.cf-lost__weave { width: min(720px, 90vw); height: 64px; clip-path: polygon(0 0, 46% 0, 52% 100%, 0 100%); }
.cf-lost__code { margin: 0; font-size: clamp(6rem, 12vw, 9rem); color: var(--wool-yellow); }
.cf-lost__title { font: 800 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--display); text-transform: uppercase; }
.cf-lost__text { color: var(--snow-muted); }

/* media placeholders */
.cf-media--empty { display: block; width: 100%; height: 100%; min-height: 120px; background: var(--ink-3); }

/* 7 · motion: the loom --------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.cf-js:not([data-motion="off"]):not([data-motion="reduced"]) [data-cf-loom] .cf-thread {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: cf-weave var(--t-slow) var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 45ms + 120ms);
  }
  html.cf-js:not([data-motion="off"]):not([data-motion="reduced"]) .cf-sash[data-cf-loom] {
    animation: cf-shift 1400ms var(--ease) both;
  }
  html.cf-js:not([data-motion="off"]):not([data-motion="reduced"]) .cf-thread-bar__weft {
    animation: cf-draw var(--t-slow) var(--ease) both 300ms;
  }
  html.cf-js:not([data-motion="off"]):not([data-motion="reduced"]) .cf-result .cf-ball__veil { visibility: visible; }
  html.cf-js:not([data-motion="off"]):not([data-motion="reduced"]) .cf-result .cf-ball__veil i {
    animation: cf-part 700ms var(--ease) forwards;
    animation-delay: calc(var(--n, 0) * 260ms + 200ms);
    transform-origin: top center;
  }
  html.cf-js:not([data-motion="off"]):not([data-motion="reduced"]) .cf-result .cf-ball__veil i:nth-child(even) { transform-origin: bottom center; }
  html.cf-js:not([data-motion="off"]):not([data-motion="reduced"]) .cf-pick input:checked + span::after { animation: cf-beat 420ms var(--ease); }
}
@keyframes cf-weave { to { stroke-dashoffset: 0; } }
@keyframes cf-shift { from { transform: rotate(-7deg) translateX(-9%); } to { transform: rotate(-7deg) translateX(0); } }
@keyframes cf-draw { from { stroke-dasharray: 0 1; } }
@keyframes cf-part { to { transform: scaleY(0); } }
@keyframes cf-beat { 0% { transform: translateY(-14px) scaleX(.2); } 100% { transform: translateY(0) scaleX(1); } }

/* 8 · responsive --------------------------------------------------------- */
@media (max-width: 1360px) {
  .cf-ribbon { grid-template-columns: 56px minmax(150px, 1fr) minmax(max-content, 1.4fr) max-content max-content; }
  .cf-ribbon__price { display: none; }
  .cf-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .cf-fringe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-fringe > :nth-child(n) { margin-top: 0; }
  .cf-fringe > :nth-child(2n) { margin-top: 56px; }
  .cf-game__grid, .cf-gamebody { grid-template-columns: minmax(0, 1fr); }
  .cf-buy { position: static; max-width: 520px; }
  .cf-rg, .cf-contact { grid-template-columns: minmax(0, 1fr); }
  .cf-rg__side { position: static; }
  .cf-stage { grid-template-columns: minmax(0, 1fr); }
  .cf-stage__draw { grid-column: 1; justify-self: end; }
}
@media (max-width: 1023.98px) {
  .cf-stage { display: flex; flex-direction: column; min-height: 0; padding: 0 0 28px; gap: 0; }
  .cf-stage__photo { position: relative; height: clamp(300px, 42svh, 380px); order: 0; }
  .cf-sash { top: calc(clamp(300px, 42svh, 380px) / 2 - 96px); left: -14%; right: -14%; }
  .cf-sash__edge { height: 22px; }
  .cf-sash__edge--top { height: 34px; }
  .cf-stage__draw { order: 1; margin: -36px 16px 0; min-width: 0; padding: 18px 22px 20px 36px; gap: 10px; }
  .cf-stage__draw .cf-count--lg { font-size: 2.1rem; }
  .cf-stage__drawname { font-size: 1.5rem; }
  .cf-stage__draw .cf-arrow--lg { min-height: 52px; font-size: 1rem; }
  .cf-stage__offer { order: 2; margin: 16px 16px 0; max-width: none; }
  .cf-read, .cf-faq { grid-template-columns: minmax(0, 1fr); }
  .cf-read__toc, .cf-faq__nav { position: static; max-height: none; }
  .cf-promo, .cf-story, .cf-win { grid-template-columns: minmax(0, 1fr); }
  .cf-promo--flip .cf-promo__media, .cf-story--flip .cf-story__media, .cf-win--flip .cf-win__media { order: 0; }
  .cf-promo__media, .cf-story__media, .cf-win__media { min-height: 0; aspect-ratio: 3 / 2; }
  .cf-newsrow { grid-template-columns: minmax(0, 1fr); }
  .cf-newsitem:first-child { grid-row: auto; }
  .cf-letter { grid-template-columns: minmax(0, 1fr); }
  .cf-consent { bottom: 84px; grid-template-columns: minmax(0, 1fr); }
  .cf-consent__actions { justify-content: stretch; }
  .cf-consent__actions .cf-btn { flex: 1 1 140px; }
  .cf-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-acct { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lim" "se" "prof" "hist"; }
  .cf-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cf-steps::before { left: 15px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .cf-steps__item { grid-template-columns: 34px minmax(0, 1fr); column-gap: 18px; }
  .cf-steps__knot { grid-row: span 2; margin: 6px 0 0 6px; }
  .cf-steps__item p { grid-column: 2; }
  .cf-prose--cols, .cf-promises { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .cf-sash__full { display: none; }
  .cf-sash__short { display: inline; }
  .cf-sash__jackpot { font-size: clamp(5.5rem, 22vw, 8rem); }
  .cf-ribbon {
    grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "end id id" "end jp jp" "end draw draw" "end cta cta";
    gap: 8px 16px; padding: 14px 14px 14px 0;
  }
  .cf-ribbon__end { grid-area: end; }
  .cf-ribbon__id { grid-area: id; }
  .cf-ribbon__jackpot { grid-area: jp; font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .cf-ribbon__draw { grid-area: draw; align-self: center; }
  .cf-ribbon__cta { grid-area: cta; justify-self: start; }
  .cf-ribbon:hover { transform: none; }
  .cf-catalog__row { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "w name name" "w kind cta"; padding: 12px 12px 12px 0; gap: 4px 14px; }
  .cf-catalog__weave { grid-area: w; }
  .cf-catalog__name { grid-area: name; }
  .cf-catalog__kind { grid-area: kind; }
  .cf-catalog__price { display: none; }
  .cf-catalog__row .cf-arrow { grid-area: cta; }
}
@media (max-width: 720px) {
  .cf-fringe { grid-template-columns: minmax(0, 1fr); }
  .cf-fringe > :nth-child(n) { margin-top: 0; }
  .cf-auth { padding: 0; display: block; }
  .cf-auth__panel { padding: 48px 20px 32px; }
  .cf-auth__side { right: 0; bottom: auto; width: auto; height: 24px; }
  .cf-lane__head { grid-template-columns: minmax(0, 1fr); }
  .cf-lane__head .cf-link { grid-column: 1; grid-row: auto; justify-self: start; }
  .cf-stage__offer { padding: 22px 40px 22px 20px; }
  .cf-head__plate { padding: 22px 40px 22px 20px; }
  .cf-numgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cf-numgrid > .cf-pick:nth-child(-n+10)::before { display: block; }
  .cf-numgrid > .cf-pick:nth-child(-n+7)::before { display: none; }
  .cf-letter__row { flex-direction: column; }
  .cf-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .cf-card__facts { grid-template-columns: minmax(0, 1fr); }
  .cf-operator__grid > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cf-form--inline { grid-template-columns: minmax(0, 1fr); }
  .cf-count--lg { font-size: 2.4rem; }
  .cf-buy__price { font-size: 3.2rem; }
  .cf-gband { transform: rotate(-1.5deg); }
  .cf-gband__field { font-size: clamp(2.6rem, 10.5vw, 3.6rem); padding: 6px 12px 2px; }
  .cf-squares { grid-template-columns: repeat(3, 64px); }
  .cf-square { width: 64px; height: 64px; }
  .cf-ball { width: 52px; height: 52px; }
  .cf-ball__num { font-size: 1.6rem; }
}
@media (max-width: 380px) {
  .cf-numgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cf-numgrid > .cf-pick:nth-child(-n+7)::before { display: block; }
  .cf-numgrid > .cf-pick:nth-child(-n+6)::before { display: none; }
  .cf-pick span { font-size: 1.15rem; }
}
@media (forced-colors: active) {
  .cf-arrow::before, .cf-tab::before { background: ButtonFace; border: 1px solid ButtonText; }
}
@media print {
  .cf-rail, .cf-topbar, .cf-dock, .cf-consent, .cf-gate, .cf-letter, .cf-footer__sash { display: none !important; }
  body { background: #fff; color: #000; }
}