:root {
  color-scheme: light;
  --ink: #281729;
  --ink-soft: #715d70;
  --navy: #241029;
  --blue: #9f1768;
  --cyan: #d9f13f;
  --cyan-dark: #a50067;
  --gold: #ffd84a;
  --paper: #fbf7f8;
  --surface: #fffdfb;
  --line: #eadde5;
  --danger: #a52a4f;
  --success: #287a5b;
  --warning: #9b5b00;
  --radius-sm: 0.55rem;
  --radius: 0.9rem;
  --radius-lg: 1.4rem;
  --shadow: 0 18px 50px rgba(70, 23, 57, 0.12);
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; font-size: 100%; }
body { min-height: 100%; margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.55 var(--font); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img, video, canvas { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

:focus-visible { outline: 3px solid rgba(217, 241, 63, 0.78); outline-offset: 3px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 1000; padding: 0.7rem 1rem; background: #fff; color: var(--ink); border-radius: 0.5rem; }
.skip-link:focus { top: 1rem; }

.app-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 4.5rem; padding: 0 2rem; color: #fff; background: rgba(36, 16, 41, 0.97); border-bottom: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(16px); }
.brand { display: inline-flex; min-width: 0; align-items: center; font-weight: 780; text-decoration: none; letter-spacing: -0.02em; }
.brand-lockup { display: flex; align-items: center; gap: 2.25%; width: 12rem; max-width: 100%; min-width: 0; line-height: 0; }
.brand-lockup img { display: block; width: 100%; min-width: 0; height: auto; object-fit: contain; }
.brand-lockup-bingo { flex: 1693 1 0; }
.brand-lockup-ruben { flex: 790 1 0; }
.brand-lockup-on-dark .brand-lockup-ruben { filter: brightness(0) invert(1); }
.app-header .brand { max-width: 100%; }
.app-header .brand-lockup { width: 11.4rem; }
.brand-mark, .auth-symbol { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 2px solid var(--gold); border-radius: 0.65rem; background: linear-gradient(145deg, #e20a8b, #8d155f); box-shadow: 0 0 0 2px rgba(217,241,63,0.18), 0 0 24px rgba(226,10,139,0.38); color: #fff9dc; font-weight: 950; transform: rotate(-3deg); }
.primary-nav { display: flex; justify-content: center; gap: 0.2rem; padding: 0 1rem; }
.nav-link { padding: 0.65rem 0.8rem; border-radius: 0.55rem; color: #ddcedb; text-decoration: none; font-size: 0.9rem; font-weight: 620; white-space: nowrap; }
.nav-link:hover, .nav-link.is-active { color: #fff; background: rgba(255,255,255,0.09); }
.account { display: flex; align-items: center; gap: 0.8rem; color: #ddcedb; font-size: 0.85rem; }
.account form { margin: 0; }
.link-button { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.35rem; border: 0; background: none; color: #fff; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.nav-toggle { display: none; }

.main-content { width: min(1480px, calc(100% - 3rem)); margin: 0 auto; padding: 3rem 0 5rem; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.page-heading h1, .auth-card h1, .empty-state h1 { max-width: 19ch; margin: 0.15rem 0 0.55rem; font-size: clamp(2rem, 4.5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.055em; }
.page-heading p:not(.eyebrow) { max-width: 64ch; margin: 0; color: var(--ink-soft); }
.eyebrow, .card-kicker { margin: 0; color: var(--cyan-dark); font-size: 0.74rem; line-height: 1.2; font-weight: 820; text-transform: uppercase; letter-spacing: 0.14em; }
.panel { padding: clamp(1.2rem, 2.5vw, 2rem); margin-bottom: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(70, 23, 57, 0.06); }
.panel.compact { padding: 1.2rem; }
.panel h2 { margin: 0 0 0.85rem; font-size: 1.35rem; letter-spacing: -0.025em; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.section-heading h2, .section-heading h3, .section-heading p { margin: 0; }
.section-heading p { color: var(--ink-soft); font-size: 0.92rem; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.65rem 1rem; border: 1px solid #cfbcc8; border-radius: 0.7rem; background: #fff; color: var(--ink); font-weight: 720; text-decoration: none; cursor: pointer; transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; }
.button:hover { border-color: #9f6f8d; transform: translateY(-1px); }
.button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.button-primary { color: #fff; border-color: #b40b72; background: linear-gradient(135deg, #e20a8b, #a4116b); box-shadow: 0 10px 24px rgba(180,11,114,0.24); }
.button-primary:hover { border-color: #83034f; background: linear-gradient(135deg, #f0209b, #b60f74); }
.button-danger { color: #fff; border-color: #8b1f27; background: var(--danger); }
.button-destructive { color: #8b2144; border-color: #ddb1c1; background: #fff7fa; }
.button-destructive:hover { color: #fff; border-color: var(--danger); background: var(--danger); }
.button-pause { color: #4a3400; border-color: #e7c13b; background: #fff3a8; }
.button-small { min-height: 2.75rem; padding: 0.4rem 0.7rem; font-size: 0.83rem; }
.button-large { min-height: 3.5rem; padding: 0.85rem 1.25rem; font-size: 1.05rem; }
.button-hero { min-height: 4.1rem; min-width: 10rem; font-size: 1.08rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.text-link { display: inline-block; margin-top: 1rem; color: var(--cyan-dark); font-weight: 700; text-underline-offset: 0.2em; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.metric-grid article { position: relative; overflow: hidden; padding: 1.5rem; color: #fff; background: linear-gradient(145deg, #321538, var(--navy)); border: 1px solid #58304f; border-radius: var(--radius); }
.metric-grid article::after { content: ""; position: absolute; width: 7rem; height: 7rem; right: -2.5rem; bottom: -3.6rem; border-radius: 50%; background: radial-gradient(circle, rgba(217,241,63,0.3), transparent 70%); }
.metric-grid span { display: block; color: #ddcedb; font-size: 0.83rem; }
.metric-grid strong { display: block; margin-top: 0.4rem; font-size: 2rem; line-height: 1; }
.action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.action-grid a { padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color 150ms ease, transform 150ms ease; }
.action-grid a:hover { transform: translateY(-2px); border-color: var(--cyan); }
.action-grid h2 { margin: 2rem 0 0.4rem; font-size: 1.25rem; }
.action-grid p { margin: 0; color: var(--ink-soft); }
.action-index { color: var(--cyan-dark); font: 750 0.8rem/1 var(--font); }
.active-game { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.active-game h2 { margin: 0.5rem 0 0; }
.empty-inline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--ink-soft); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.stack { display: grid; gap: 1rem; }
.span-2 { grid-column: span 2; }
label { display: grid; gap: 0.38rem; color: #4b3549; font-size: 0.9rem; font-weight: 690; }
input, select, textarea { width: 100%; min-height: 2.85rem; padding: 0.65rem 0.75rem; color: var(--ink); background: #fff; border: 1px solid #cfbdc8; border-radius: 0.55rem; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--cyan-dark); box-shadow: 0 0 0 3px rgba(202,0,126,0.13); outline: none; }
.check-row { grid-template-columns: auto 1fr; align-items: center; align-self: end; min-height: 2.85rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 0.55rem; }
.check-row input { width: 1.2rem; min-height: 1.2rem; }
.balanced-option { align-items: start; padding: 0.75rem; }
.balanced-option input { margin-top: 0.2rem; }
.balanced-option span { display: grid; gap: 0.2rem; }
.balanced-option small { color: var(--ink-soft); font-weight: 500; line-height: 1.42; }
.quick-values { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.quick-values button { min-height: 2.75rem; padding: 0.4rem 0.7rem; border: 1px solid var(--line); border-radius: 99px; background: #f8eff4; cursor: pointer; }
.inline-search { display: flex; gap: 0.5rem; }
.inline-search input { min-width: 10rem; }
.form-status { min-height: 1.5rem; color: var(--ink-soft); }
.color-input { display: grid; grid-template-columns: 3rem 1fr; gap: 0.5rem; }
.color-input input[type="color"] { padding: 0.2rem; }

.notice { padding: 0.85rem 1rem; margin: 0 0 1rem; border-radius: 0.65rem; border: 1px solid; }
.notice-error { color: #77141c; background: #fff1f2; border-color: #f3b8bd; }
.notice-warning { color: #6c4300; background: #fff7df; border-color: #eaca7e; }
.notice-success { color: #075e42; background: #e9fbf4; border-color: #8ed5bc; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th { padding: 0.7rem; color: var(--ink-soft); border-bottom: 1px solid var(--line); text-align: left; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.07em; }
td { padding: 0.9rem 0.7rem; border-bottom: 1px solid #f0e7ed; vertical-align: middle; }
td strong, td small { display: block; }
td small { color: var(--ink-soft); }
.table-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 16rem; }
.status-pill { display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0.2rem 0.55rem; border-radius: 99px; color: #684e63; background: #f4ebf1; font-size: 0.74rem; font-weight: 760; text-transform: uppercase; letter-spacing: 0.04em; }
.test-game-banner { margin: 0.75rem 0; padding: 0.7rem 1rem; border: 2px solid #9b4d00; border-radius: 0.75rem; color: #5f2d00; background: #fff1cf; font-weight: 850; text-align: center; letter-spacing: 0.08em; }
.presentation .test-game-banner { position: fixed; z-index: 30; top: max(0.5rem, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(90vw, 46rem); color: #1b1000; background: #ffd36b; box-shadow: 0 0.5rem 2rem rgba(0,0,0,.35); }
.status-complete, .status-ready { color: #075e42; background: #dff7ee; }
.status-running, .status-generating, .status-rendering { color: #7f0c52; background: #fde5f3; }
.status-paused { color: #7c4900; background: #fff0cb; }
.progress { width: 100%; height: 0.35rem; margin-top: 0.35rem; overflow: hidden; border-radius: 99px; background: #eee3ea; }
.progress span { display: block; width: 0; height: 100%; background: var(--cyan-dark); transition: width 200ms ease; }
.job-live { margin-top: 1rem; padding: 0.9rem; border-radius: 0.7rem; background: #f9eaf3; }

.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.library-grid, .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.8rem; }
.library-card, .plan-card, .pattern-card { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fffafc; }
.library-card h3, .pattern-card h3, .plan-card h3 { margin: 0.35rem 0 0.3rem; }
.library-card p { margin: 0; color: var(--ink-soft); }
.library-card-image { width: 100%; height: 8rem; margin-bottom: 0.8rem; object-fit: contain; border-radius: 0.55rem; background: #fff; }
.details-card { margin-top: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fffafc; }
.details-card summary { min-height: 2.75rem; padding: 0.6rem 0; cursor: pointer; font-weight: 780; }
.details-card[open] summary { margin-bottom: 0.8rem; }
.muted { color: var(--ink-soft); font-size: 0.9rem; }
.pattern-list { display: grid; gap: 0.7rem; }
.pattern-card { display: grid; grid-template-columns: 4.2rem 1fr; align-items: center; gap: 0.9rem; }
.mini-grid, .pattern-editor { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.18rem; }
.mini-grid span, .pattern-editor button { aspect-ratio: 1; border: 1px solid #cdb8c6; background: #fff; border-radius: 0.18rem; }
.mini-grid span.is-on, .pattern-editor button[aria-pressed="true"] { border-color: var(--cyan-dark); background: var(--cyan); }
.pattern-editor { width: min(22rem, 100%); }
.pattern-editor button { cursor: pointer; }
.plan-card { grid-column: span 1; }
.round-list { display: grid; gap: 0.5rem; padding: 0; list-style: none; }
.round-list li { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: 0.6rem; }
.round-list li > span { display: grid; place-items: center; width: 2rem; height: 2rem; color: #fff; background: var(--blue); border-radius: 50%; font-weight: 800; }
.round-list small { display: block; color: var(--ink-soft); }
.game-list { display: grid; gap: 0.7rem; }
.game-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.game-card h3 { margin: 0.4rem 0 0; }
.game-card p { margin: 0.15rem 0 0; color: var(--ink-soft); }

.dialog { width: min(38rem, calc(100% - 2rem)); padding: 0; color: var(--ink); border: 0; border-radius: var(--radius-lg); box-shadow: 0 30px 100px rgba(0,0,0,0.3); }
.dialog::backdrop { background: rgba(36,16,41,0.72); backdrop-filter: blur(5px); }
.dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.dialog > header h2 { margin: 0; }
.dialog > header button { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: #f5eaf1; font-size: 1.5rem; cursor: pointer; }
.dialog > form, .dialog > div:not([data-pair-content]) { margin: 1.25rem; }
.dialog [data-pair-content] { padding: 1.25rem; text-align: center; }
.dialog [data-pair-content] img { width: min(20rem, 100%); }

.live-page { background: #f6eff3; }
.live-page .main-content { width: min(1700px, calc(100% - 2rem)); padding-top: 1.4rem; }
.live-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.live-header h1 { margin: 0.1rem 0 0; font-size: clamp(1.6rem, 3vw, 2.5rem); }
.connection { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 720; }
.connection span, .connection i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(40,122,91,0.12); }
.connection.is-offline span, .connection.is-offline i { background: var(--danger); }
.round-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.8rem; }
.round-chip { display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; min-height: 2.8rem; padding: 0.5rem 0.8rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 99px; cursor: pointer; }
.round-chip span { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #f0e4ec; font-weight: 800; }
.round-chip.is-active { color: #fff; border-color: #a30e66; background: linear-gradient(135deg, #db0b85, #99135f); }
.round-chip.is-active span { color: #32152f; background: var(--cyan); }
.live-grid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1rem; }
.live-status-card { padding: clamp(1.2rem, 3vw, 2rem); margin-bottom: 1rem; color: #fff; background: radial-gradient(circle at 88% 5%, rgba(217,241,63,0.22), transparent 30%), radial-gradient(circle at 15% 105%, rgba(226,10,139,0.28), transparent 40%), var(--navy); border-radius: var(--radius-lg); box-shadow: 0 18px 45px rgba(62,14,52,0.2); }
.live-status-card .state-label { color: #e8d8e5; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; }
.live-status-card > strong { display: block; margin: 0.2rem 0; color: #fff; font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 1; letter-spacing: -0.06em; }
.live-status-card p { color: #e4d5e1; }
.number-board { display: grid; grid-template-columns: repeat(15, minmax(2.4rem, 1fr)); gap: 0.35rem; padding: 0.8rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; }
.number-board button { display: grid; gap: 0.1rem; place-items: center; min-height: 3.4rem; padding: 0.2rem; color: var(--ink); border: 1px solid #dbcbd5; border-radius: 0.5rem; background: #fffafc; cursor: pointer; font-weight: 800; }
.number-board button span { color: var(--ink-soft); font-size: 0.64rem; }
.number-board button.is-published { color: #fff; border-color: var(--blue); background: var(--blue); }
.number-board button.is-published span { color: #f6cbe5; }
.number-board button.is-pending { color: #35220a; border-color: var(--gold); background: #fff0a0; box-shadow: 0 0 0 3px rgba(255,216,74,0.22); }
.live-sidebar { display: grid; align-content: start; gap: 0; }
.action-stack { display: grid; gap: 0.55rem; }
.last-five { display: grid; grid-template-columns: repeat(auto-fit, minmax(3.15rem, 1fr)); gap: 0.45rem; }
.last-five .recent-number { display: inline-flex; align-items: baseline; justify-content: center; gap: 0.12rem; min-width: 0; min-height: 3.2rem; padding: 0.45rem 0.55rem; color: var(--ink); border: 1px solid #d9c7d2; border-radius: 0.75rem; background: linear-gradient(145deg, #fff, #f8edf3); box-shadow: 0 5px 14px rgba(70, 23, 57, 0.07); font-variant-numeric: tabular-nums; }
.last-five .recent-number small { width: 0.9rem; color: var(--cyan-dark); font-size: 0.66rem; font-weight: 900; letter-spacing: 0; text-align: center; }
.last-five .recent-number strong { width: 2ch; font-size: 1.35rem; line-height: 1; text-align: center; }
.last-five .recent-number.is-latest { color: #fff; border-color: #aa0d6b; background: linear-gradient(145deg, #e20a8b, #8d155f); box-shadow: 0 8px 20px rgba(180, 11, 114, 0.24); }
.last-five .recent-number.is-latest small { color: #f1ff8f; }
.last-five .recent-number.is-empty { display: grid; grid-template-columns: 1fr; place-items: center; color: var(--ink-soft); }
.claim-list { display: grid; gap: 0.6rem; }
.claim-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: 0.7rem; }
.claim-item strong, .claim-item small { display: block; }
.claim-item small { margin-top: 0.2rem; color: var(--ink-soft); }

.checker-page .app-header { position: relative; }
.checker-page .main-content { width: min(36rem, 100%); padding: max(1rem, env(safe-area-inset-top)) 0 calc(8rem + env(safe-area-inset-bottom)); }
.checker-shell { width: 100%; }
.checker-header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem max(1rem, env(safe-area-inset-right)) 0.5rem max(1rem, env(safe-area-inset-left)); }
.checker-header h1 { margin: 0.1rem 0 0; font-size: 1.75rem; letter-spacing: -0.04em; }
.checker-digital, .checker-paper { margin: 0.75rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
.checker-digital { border-color: #c6dc39; background: linear-gradient(145deg, #fff, #fcffe6); }
.checker-digital .section-heading { align-items: flex-start; margin-bottom: 0.85rem; }
.checker-digital .section-heading h2, .checker-paper-heading h2 { margin: 0.15rem 0 0; font-size: 1.4rem; }
.checker-digital .section-heading p:not(.eyebrow) { max-width: 42rem; margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.88rem; }
.checker-digital-list { display: grid; gap: 0.55rem; }
.checker-digital-list > p { margin: 0; color: var(--ink-soft); }
.checker-digital-call { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem; border: 1px solid #d9e56d; border-radius: 0.8rem; background: #fff; }
.checker-digital-call strong, .checker-digital-call small { display: block; }
.checker-digital-call small { margin-top: 0.15rem; color: var(--ink-soft); font-size: 0.76rem; }
.checker-paper-heading { padding: 0.15rem 0.15rem 0; }
.checker-paper > .scanner-card, .checker-paper > .manual-entry { margin-right: 0; margin-left: 0; box-shadow: none; }
.scanner-card, .manual-entry, .checker-result { margin: 0.75rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
.camera-stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; color: #fff; background: var(--navy); border-radius: 1rem; }
.camera-stage video { width: 100%; height: 100%; object-fit: cover; }
.camera-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center; background: radial-gradient(circle at 50% 40%, rgba(226,10,139,0.22), transparent 38%); }
.scan-frame { position: absolute; inset: 16%; pointer-events: none; }
.scan-frame span { position: absolute; width: 2.8rem; height: 2.8rem; border-color: var(--cyan); filter: drop-shadow(0 0 8px rgba(217,241,63,0.75)); }
.scan-frame span:nth-child(1) { left: 0; top: 0; border-left: 4px solid; border-top: 4px solid; }
.scan-frame span:nth-child(2) { right: 0; top: 0; border-right: 4px solid; border-top: 4px solid; }
.scan-frame span:nth-child(3) { left: 0; bottom: 0; border-left: 4px solid; border-bottom: 4px solid; }
.scan-frame span:nth-child(4) { right: 0; bottom: 0; border-right: 4px solid; border-bottom: 4px solid; }
.scanner-card .button-row { position: sticky; bottom: calc(0.5rem + env(safe-area-inset-bottom)); z-index: 3; margin-top: 0.8rem; }
.scanner-card .button { flex: 1; }
.scanner-hint { margin-bottom: 0; color: var(--ink-soft); font-size: 0.88rem; }
.manual-entry > span { display: block; margin: -0.2rem auto 0.7rem; color: var(--ink-soft); text-align: center; font-size: 0.8rem; }
.input-action { display: grid; grid-template-columns: 1fr auto; gap: 0.45rem; }
.input-action input { min-height: 3.5rem; font-size: 1.25rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.checker-result { position: relative; border-width: 2px; }
.checker-result.is-valid { border-color: #0d8d63; background: #f0fbf7; }
.checker-result.is-invalid { border-color: #b33a43; background: #fff5f5; }
.checker-result.is-warning { border-color: #c48411; background: #fff9eb; }
.result-symbol { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin-bottom: 0.7rem; border-radius: 50%; color: #fff; background: var(--success); font-size: 2rem; font-weight: 900; }
.is-invalid .result-symbol { background: var(--danger); }
.is-warning .result-symbol { background: var(--warning); }
.checker-result h2 { margin: 0; font-size: 1.6rem; }
.checker-result .button-row { position: sticky; bottom: calc(0.5rem + env(safe-area-inset-bottom)); padding: 0.6rem 0; background: inherit; }
.checker-result.is-digital .button-row { position: static; }
.result-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.28rem; margin: 1rem 0; }
.result-grid span { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid #aebdc8; border-radius: 0.35rem; background: #fff; font-weight: 780; }
.result-grid span.is-hit { color: #fff; border-color: var(--blue); background: var(--blue); }
.result-grid span.is-win { color: #281729; border-color: var(--gold); background: #ffe576; box-shadow: 0 0 0 2px rgba(255,216,74,0.32); }
.checker-finish { margin: 0.75rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #f9edf4; }
.checker-finish p { margin-top: 0; color: var(--ink-soft); }
.checker-finish .button { width: 100%; }

.auth-layout { display: grid; min-height: 100vh; place-items: center; padding: 1.5rem; background: radial-gradient(circle at 50% 0, #6f1855 0, #2d1231 43%, #17091b 100%); }
.auth-layout .main-content { width: min(42rem, 100%); margin: 0; padding: 0; }
.auth-card { padding: clamp(1.5rem, 5vw, 2.7rem); background: #fff; border: 1px solid rgba(255,255,255,0.5); border-radius: 1.6rem; box-shadow: 0 30px 90px rgba(0,0,0,0.35); }
.auth-card-wide { width: min(42rem, 100%); }
.auth-card .auth-symbol { width: 3.3rem; height: 3.3rem; margin-bottom: 1.5rem; font-size: 1.4rem; }
.auth-card h1 { font-size: clamp(2rem, 7vw, 3.2rem); }
.auth-card > p:not(.eyebrow) { color: var(--ink-soft); }
.auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.25rem; margin-top: 1rem; }
.auth-actions .text-link { margin-top: 0; }
.recovery-codes { columns: 2; padding-left: 1.5rem; }
.recovery-codes li { margin-bottom: 0.45rem; }
.recovery-codes code { font-size: 0.95rem; }

.settings-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(17rem, 0.7fr); gap: 1.25rem; }
.ticket-preview { --ticket-primary: #241f41; --ticket-accent: #d9f13f; --ticket-bg: #fff; --ticket-text: #241f41; aspect-ratio: 1; padding: 1rem; color: var(--ticket-text); background: var(--ticket-bg); border: 0.7rem solid var(--ticket-primary); border-radius: 0.4rem; }
.ticket-preview > img { display: block; max-width: 30%; height: 2.5rem; margin: 0 auto 0.45rem; object-fit: contain; }
.ticket-preview > strong { display: block; padding: 0.4rem; color: #fff; background: var(--ticket-primary); text-align: center; font-size: clamp(1.3rem, 4vw, 2.5rem); letter-spacing: 0.3em; }
.preview-letters { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 0.8rem; color: var(--ticket-primary); background: var(--ticket-accent); font-weight: 900; text-align: center; }
.preview-letters span { padding: 0.25rem; }
.preview-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ticket-primary); border-left: 1px solid var(--ticket-primary); }
.preview-grid span { display: grid; place-items: center; aspect-ratio: 1; border-right: 1px solid var(--ticket-primary); border-bottom: 1px solid var(--ticket-primary); font-weight: 800; }
.ticket-preview small { display: block; margin-top: 0.45rem; font-weight: 800; }
.ticket-preview .preview-subheading { min-height: 1.2em; color: var(--ticket-text); text-align: right; }
.ticket-preview .preview-code { letter-spacing: 0.1em; }
.ticket-preview-real { margin: 0; }
.ticket-preview-real img { display: block; width: 100%; height: auto; border: 1px solid #d7c7d1; border-radius: 0.8rem; box-shadow: 0 18px 42px rgba(70, 23, 57, 0.14); }
.ticket-preview-real figcaption { margin-top: 0.7rem; color: var(--ink-soft); font-size: 0.84rem; text-align: center; }
.security-list { display: grid; gap: 0.55rem; padding: 0; list-style: none; }
.security-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: 0.65rem; }
.security-list small { display: block; color: var(--ink-soft); }
.production-frequency { display: grid; grid-template-columns: repeat(15, minmax(2.75rem, 1fr)); gap: 0.45rem; overflow-x: auto; padding-bottom: 0.35rem; }
.production-frequency > span { display: grid; place-items: center; min-height: 4rem; padding: 0.45rem; border: 1px solid var(--line); border-radius: 0.65rem; background: #fffafc; text-align: center; }
.production-frequency strong { display: block; color: var(--blue); font-size: 1.05rem; }
.production-frequency small { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.presentation-body { min-height: 100vh; overflow: hidden; color: var(--presentation-text, #fff7fc); background: var(--presentation-background, #17091b); }
.presentation-body .main-content { width: 100%; margin: 0; padding: 0; }
.presentation { --presentation-background: #17091b; --presentation-primary: #d9f13f; --presentation-accent: #e20a8b; --presentation-orb: #ff56bd; --presentation-glow: #c6127d; --presentation-lightning: #fff5a3; --presentation-number: #fff; --presentation-text: #fff7fc; position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; color: var(--presentation-text); background: radial-gradient(circle at 50% 31%, color-mix(in srgb, var(--presentation-accent) 38%, transparent), transparent 34%), radial-gradient(circle at 9% 70%, color-mix(in srgb, var(--presentation-primary) 15%, transparent), transparent 27%), linear-gradient(150deg, color-mix(in srgb, var(--presentation-background) 86%, #000), var(--presentation-background) 55%, color-mix(in srgb, var(--presentation-accent) 14%, #080309)); }
.presentation::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.18; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,0.055) 6px); mix-blend-mode: screen; }
.presentation::after { content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none; opacity: 0.45; background-image: radial-gradient(circle, color-mix(in srgb, var(--presentation-primary) 72%, transparent) 0 1px, transparent 1.8px), radial-gradient(circle, color-mix(in srgb, var(--presentation-accent) 65%, transparent) 0 1.3px, transparent 2px); background-position: 0 0, 2.5rem 1.5rem; background-size: 5rem 5rem, 7rem 7rem; animation: star-drift 28s linear infinite; }
.presentation-pair { position: relative; z-index: 2; display: grid; min-height: 100vh; place-items: center; align-content: center; padding: 2rem; text-align: center; }
.presentation-pair h1 { margin: 2rem 0 0.4rem; font-size: clamp(2rem, 6vw, 4rem); }
.presentation-pair p { color: color-mix(in srgb, var(--presentation-text) 72%, transparent); }
.presentation-stage { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(20rem, 1fr) auto auto; gap: clamp(0.5rem, 1.3vh, 1rem); min-height: 100vh; min-height: 100svh; padding: clamp(0.8rem, 2vw, 1.6rem); }
.presentation-stage > header { z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 3.1rem; padding: 0.45rem 0.75rem; border: 1px solid color-mix(in srgb, var(--presentation-primary) 20%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--presentation-background) 68%, transparent); box-shadow: 0 12px 32px rgba(0,0,0,0.22); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-weight: 780; }
.presentation-stage > header > [data-presentation-round] { min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.presentation-brand-lockup { width: clamp(12rem, 20vw, 18rem); }
.reveal-zone { position: relative; display: grid; place-items: center; align-content: center; min-height: 43vh; isolation: isolate; perspective: 1100px; }
.reveal-zone::after { content: ""; position: absolute; z-index: -2; width: min(64vw, 52rem); height: 15%; bottom: 2%; border-radius: 50%; background: color-mix(in srgb, var(--presentation-glow) 46%, transparent); filter: blur(38px); opacity: 0.68; animation: ground-pulse 3.1s ease-in-out infinite; }
.orb { position: relative; width: min(45vw, 34rem); aspect-ratio: 1; border: 2px solid color-mix(in srgb, var(--presentation-primary) 66%, transparent); border-radius: 50%; background: radial-gradient(circle at 34% 23%, #fff 0 1.3%, color-mix(in srgb, var(--presentation-lightning) 82%, transparent) 2%, transparent 5%), radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--presentation-orb) 94%, #fff) 0 7%, color-mix(in srgb, var(--presentation-orb) 56%, transparent) 22%, transparent 42%), radial-gradient(circle at 55% 58%, color-mix(in srgb, var(--presentation-accent) 72%, transparent), color-mix(in srgb, var(--presentation-background) 35%, #000) 72%); box-shadow: inset -4rem -4.5rem 7rem rgba(0,0,0,0.72), inset 2rem 1.5rem 4rem color-mix(in srgb, var(--presentation-lightning) 20%, transparent), 0 0 0 0.35rem color-mix(in srgb, var(--presentation-accent) 12%, transparent), 0 0 3.2rem color-mix(in srgb, var(--presentation-glow) 78%, transparent), 0 0 10rem color-mix(in srgb, var(--presentation-accent) 50%, transparent), 0 0 16rem color-mix(in srgb, var(--presentation-primary) 18%, transparent); transform-style: preserve-3d; animation: orb-hover 4.2s ease-in-out infinite; }
.orb::before { content: ""; position: absolute; inset: -13%; border: 3px solid color-mix(in srgb, var(--presentation-primary) 67%, transparent); border-top-color: transparent; border-left-color: color-mix(in srgb, var(--presentation-accent) 82%, transparent); border-radius: inherit; box-shadow: 0 0 2rem color-mix(in srgb, var(--presentation-primary) 40%, transparent), inset 0 0 1.5rem color-mix(in srgb, var(--presentation-accent) 24%, transparent); transform: rotateX(68deg) rotateZ(-12deg); animation: orbit-ring 5.8s linear infinite; }
.orb::after { content: ""; position: absolute; inset: 7%; border: 1px solid rgba(255,255,255,0.68); border-right-color: transparent; border-bottom-color: color-mix(in srgb, var(--presentation-primary) 75%, transparent); border-radius: inherit; box-shadow: inset 0 0 2rem color-mix(in srgb, var(--presentation-lightning) 20%, transparent); animation: rotate-energy 3.8s linear infinite reverse; }
.orb-small { width: 10rem; }
.orb-core { position: absolute; inset: 17%; border-radius: 50%; background: radial-gradient(circle, #fff 0 2%, color-mix(in srgb, var(--presentation-lightning) 92%, transparent) 4%, color-mix(in srgb, var(--presentation-orb) 65%, transparent) 28%, transparent 67%); filter: blur(2px); animation: breathe 2.4s ease-in-out infinite; }
.lightning { position: absolute; inset: -4%; border-radius: 50%; opacity: 0.72; background: repeating-conic-gradient(from 12deg, transparent 0 11deg, color-mix(in srgb, var(--presentation-lightning) 82%, transparent) 12deg 13deg, transparent 14deg 39deg, color-mix(in srgb, var(--presentation-accent) 76%, transparent) 40deg 42deg, transparent 43deg 78deg); -webkit-mask: radial-gradient(circle, transparent 0 59%, #000 61% 64%, transparent 66%); mask: radial-gradient(circle, transparent 0 59%, #000 61% 64%, transparent 66%); filter: drop-shadow(0 0 6px var(--presentation-lightning)); animation: rotate-energy 4.8s linear infinite; }
.presentation-label { position: absolute; z-index: 5; left: 50%; bottom: clamp(0.25rem, 2.5vh, 2rem); width: min(78vw, 58rem); margin: 0; padding: 0.75rem 1.5rem; color: var(--presentation-text); border: 1px solid color-mix(in srgb, var(--presentation-primary) 38%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--presentation-background) 66%, transparent); box-shadow: 0 18px 50px rgba(0,0,0,0.28), 0 0 2rem color-mix(in srgb, var(--presentation-glow) 20%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-size: clamp(1.2rem, 2.4vw, 2.2rem); line-height: 1.15; font-weight: 790; text-align: center; text-shadow: 0 0 24px var(--presentation-glow); transform: translateX(-50%); }
.revealed-number { position: absolute; z-index: 4; place-self: center; color: var(--presentation-number); font-size: clamp(7rem, 18vw, 16rem); line-height: 0.85; letter-spacing: normal; white-space: nowrap; text-align: center; text-shadow: 0 0 12px #fff, 0 0 38px var(--presentation-lightning), 0 0 85px var(--presentation-glow), 0 0 150px var(--presentation-accent); opacity: 0; transform: translateZ(8rem) scale(0.35) rotate(-8deg); transform-origin: 50% 50%; }
.presentation-stage.is-reveal .revealed-number { opacity: 1; transform: translateZ(8rem) scale(1) rotate(0); transition: opacity 180ms ease, transform 620ms cubic-bezier(.12,.92,.23,1.24); }
.presentation-stage.is-reveal .orb { animation: reveal-flash 1.25s ease both, orb-hover 4.2s 1.25s ease-in-out infinite; }
.presentation-stage.is-reveal .lightning { opacity: 1; animation-duration: 1.35s; }
.presentation-stage[data-mode="pause"] .orb, .presentation-stage[data-mode="message"] .orb, .presentation-stage[data-mode="next-round"] .orb, .presentation-stage[data-mode="prize"] .orb, .presentation-stage[data-mode="start"] .orb { opacity: 0.48; filter: saturate(0.72); }
.presentation-stage[data-mode="pause"] .presentation-label, .presentation-stage[data-mode="message"] .presentation-label, .presentation-stage[data-mode="next-round"] .presentation-label, .presentation-stage[data-mode="prize"] .presentation-label, .presentation-stage[data-mode="start"] .presentation-label { bottom: 50%; width: min(86vw, 68rem); padding: clamp(1rem, 2vw, 1.8rem) clamp(1.5rem, 4vw, 3rem); border-radius: 1.5rem; font-size: clamp(2rem, 5vw, 5rem); transform: translate(-50%, 50%); }
.presentation-stage[data-mode="prize"] .presentation-label { color: #fff7bd; border-color: color-mix(in srgb, var(--presentation-primary) 68%, transparent); box-shadow: 0 0 6rem color-mix(in srgb, var(--presentation-primary) 24%, transparent); }
.presentation-stage[data-mode="pause"] .presentation-label::before { content: "PAUSE"; display: block; margin-bottom: 0.5rem; color: var(--presentation-primary); font-size: 0.22em; letter-spacing: 0.35em; }
.public-board { z-index: 3; display: grid; gap: 0.25rem; padding: 0.55rem; border: 1px solid color-mix(in srgb, var(--presentation-primary) 18%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--presentation-background) 72%, transparent); box-shadow: 0 12px 38px rgba(0,0,0,0.22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow-x: auto; transition: opacity 250ms ease; }
.presentation-stage[data-mode="pause"] .public-board, .presentation-stage[data-mode="message"] .public-board, .presentation-stage[data-mode="next-round"] .public-board, .presentation-stage[data-mode="prize"] .public-board, .presentation-stage[data-mode="start"] .public-board { opacity: 0.32; }
.public-board-group { display: grid; grid-template-columns: 2.2rem repeat(15, minmax(1.8rem, 1fr)); gap: 0.25rem; min-width: 48rem; }
.public-board-group > strong { display: grid; place-items: center; color: var(--presentation-primary); font-size: 1.2rem; }
.public-board span { display: grid; place-items: center; min-height: 2rem; color: color-mix(in srgb, var(--presentation-text) 31%, transparent); border-radius: 0.35rem; font-size: clamp(0.75rem, 1.25vw, 1.05rem); font-weight: 760; }
.public-board span.is-published { color: var(--presentation-number); background: linear-gradient(145deg, color-mix(in srgb, var(--presentation-accent) 72%, #210c24), color-mix(in srgb, var(--presentation-primary) 18%, #210c24)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--presentation-primary) 34%, transparent), 0 0 1rem color-mix(in srgb, var(--presentation-accent) 20%, transparent); }
.presentation-stage > footer { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 1rem; min-height: 4.6rem; }
.presentation-stage > footer > [data-presentation-message] { grid-column: 3; justify-self: end; max-width: 30rem; padding: 0.55rem 0.9rem; border-left: 3px solid var(--presentation-primary); border-radius: 0.35rem; background: color-mix(in srgb, var(--presentation-background) 66%, transparent); font-size: clamp(0.9rem, 1.5vw, 1.2rem); font-weight: 720; }
.presentation-stage > footer > [data-presentation-message]:empty { display: none; }
.presentation-history { grid-column: 2; justify-self: center; display: grid; justify-items: center; min-width: 0; }
.presentation-history-label { margin-bottom: 0.3rem; color: color-mix(in srgb, var(--presentation-text) 72%, transparent); font-size: 0.68rem; line-height: 1; font-weight: 850; text-transform: uppercase; letter-spacing: 0.14em; }
.presentation-last { display: flex; justify-content: center; gap: 0.5rem; }
.presentation-last span { display: grid; place-items: center; min-width: 3.6rem; height: 3rem; padding: 0 0.55rem; color: color-mix(in srgb, var(--presentation-background) 88%, #000); border-radius: 99px; background: var(--presentation-primary); box-shadow: 0 0 1.2rem color-mix(in srgb, var(--presentation-primary) 22%, transparent); font-weight: 850; }
.particles { position: absolute; inset: -20%; z-index: -1; opacity: 0.72; background-image: radial-gradient(circle, color-mix(in srgb, var(--presentation-primary) 82%, transparent) 0 1.5px, transparent 2px), radial-gradient(circle, color-mix(in srgb, var(--presentation-accent) 74%, transparent) 0 1px, transparent 1.7px); background-position: 0 0, 2rem 3rem; background-size: 4.5rem 4.5rem, 6.5rem 6.5rem; -webkit-mask-image: radial-gradient(circle, #000, transparent 72%); mask-image: radial-gradient(circle, #000, transparent 72%); animation: drift 14s linear infinite; }
.fair-play-proof { display: block; max-width: min(42rem, 78vw); margin-top: 0.5rem; color: color-mix(in srgb, var(--presentation-text) 68%, transparent); text-align: center; overflow-wrap: anywhere; }
.presentation-stage[data-intensity="off"] .particles, .presentation-stage[data-intensity="off"] .orb, .presentation-stage[data-intensity="off"] .orb::before, .presentation-stage[data-intensity="off"] .orb::after, .presentation-stage[data-intensity="off"] .orb-core, .presentation-stage[data-intensity="off"] .lightning, .presentation-stage[data-intensity="off"] .reveal-zone::after { animation: none; }
.presentation-stage[data-intensity="off"] .particles, .presentation-stage[data-intensity="off"] .lightning { opacity: 0.12; }
.presentation-stage[data-intensity="subtle"] .particles { opacity: 0.3; animation-duration: 30s; }
.presentation-stage[data-intensity="subtle"] .lightning { opacity: 0.3; animation-duration: 11s; }
.presentation-stage[data-intensity="strong"] .particles { opacity: 0.95; animation-duration: 8s; }
.presentation-stage[data-intensity="strong"] .lightning { opacity: 1; animation-duration: 2.8s; }
.presentation-preview { --presentation-background: #17091b; --presentation-primary: #d9f13f; --presentation-accent: #e20a8b; --presentation-orb: #ff56bd; --presentation-glow: #c6127d; --presentation-lightning: #fff5a3; --presentation-number: #fff; --presentation-text: #fff7fc; position: relative; display: grid; place-items: center; align-content: center; min-height: 28rem; padding: 1.5rem; color: var(--presentation-text); border-radius: 1rem; background: radial-gradient(circle, color-mix(in srgb, var(--presentation-accent) 30%, transparent), transparent 45%), var(--presentation-background); overflow: hidden; }
.presentation-preview .orb { width: 15rem; }
.presentation-preview > strong { z-index: 4; margin-top: -8rem; color: var(--presentation-number); font-size: 4.5rem; text-shadow: 0 0 28px var(--presentation-glow); }
.presentation-preview > span { z-index: 4; margin-top: 4.5rem; }
.presentation-preview.is-testing .orb { animation: reveal-flash 1.1s ease both; }
.presentation-preview[data-intensity="off"] .orb, .presentation-preview[data-intensity="off"] .orb::before, .presentation-preview[data-intensity="off"] .orb::after, .presentation-preview[data-intensity="off"] .orb-core, .presentation-preview[data-intensity="off"] .lightning { animation: none; }
.presentation-audio-activate { position: fixed; z-index: 100; top: 52%; right: 0; width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0; overflow: hidden; color: #241029; border: 1px solid #fff5a3; border-right: 0; border-radius: 999px 0 0 999px; background: linear-gradient(135deg, #fffbd1, #d9f13f); box-shadow: 0 0 1.6rem rgba(217,241,63,0.34), 0 10px 28px rgba(0,0,0,0.38); font-size: 0; line-height: 1; font-weight: 900; cursor: pointer; transform: translateY(-50%); }
.presentation-audio-activate::before { content: "♪"; position: absolute; left: 50%; top: 50%; font-size: 1.15rem; transform: translate(-50%, -52%); }
.presentation-audio-activate:hover { filter: brightness(1.08); }
.presentation-audio-activate:focus-visible { outline-color: #fff; }

@supports not (color: color-mix(in srgb, red, blue)) {
  .presentation { background: radial-gradient(circle at 50% 31%, rgba(226,10,139,0.4), transparent 34%), radial-gradient(circle at 9% 70%, rgba(217,241,63,0.16), transparent 27%), linear-gradient(150deg, #080309, var(--presentation-background) 55%, #210522); }
  .presentation::after { background-image: radial-gradient(circle, rgba(217,241,63,0.7) 0 1px, transparent 1.8px), radial-gradient(circle, rgba(226,10,139,0.65) 0 1.3px, transparent 2px); }
  .presentation-pair p { color: rgba(255,247,252,0.72); }
  .presentation-stage > header { border-color: rgba(217,241,63,0.24); background: rgba(23,9,27,0.78); }
  .reveal-zone::after { background: rgba(198,18,125,0.48); }
  .orb { border-color: rgba(217,241,63,0.76); background: radial-gradient(circle at 34% 23%, #fff 0 1.3%, rgba(255,245,163,0.88) 2%, transparent 5%), radial-gradient(circle at 42% 38%, #ff9bd6 0 7%, rgba(255,86,189,0.62) 22%, transparent 42%), radial-gradient(circle at 55% 58%, rgba(226,10,139,0.78), #080309 72%); box-shadow: inset -4rem -4.5rem 7rem rgba(0,0,0,0.72), inset 2rem 1.5rem 4rem rgba(255,245,163,0.22), 0 0 0 0.35rem rgba(226,10,139,0.18), 0 0 3.2rem var(--presentation-glow), 0 0 10rem rgba(226,10,139,0.56), 0 0 16rem rgba(217,241,63,0.2); }
  .orb::before { border-color: rgba(217,241,63,0.72); border-top-color: transparent; border-left-color: rgba(226,10,139,0.88); box-shadow: 0 0 2rem rgba(217,241,63,0.46), inset 0 0 1.5rem rgba(226,10,139,0.3); }
  .orb::after { border-bottom-color: rgba(217,241,63,0.82); box-shadow: inset 0 0 2rem rgba(255,245,163,0.26); }
  .orb-core { background: radial-gradient(circle, #fff 0 2%, rgba(255,245,163,0.94) 4%, rgba(255,86,189,0.72) 28%, transparent 67%); }
  .lightning { background: repeating-conic-gradient(from 12deg, transparent 0 11deg, rgba(255,245,163,0.9) 12deg 13deg, transparent 14deg 39deg, rgba(226,10,139,0.84) 40deg 42deg, transparent 43deg 78deg); }
  .presentation-label { border-color: rgba(217,241,63,0.42); background: rgba(23,9,27,0.78); box-shadow: 0 18px 50px rgba(0,0,0,0.32), 0 0 2rem rgba(198,18,125,0.24); }
  .presentation-stage[data-mode="prize"] .presentation-label { border-color: rgba(217,241,63,0.72); box-shadow: 0 0 6rem rgba(217,241,63,0.28); }
  .public-board { border-color: rgba(217,241,63,0.22); background: rgba(23,9,27,0.78); }
  .public-board span { color: rgba(255,247,252,0.34); }
  .public-board span.is-published { background: linear-gradient(145deg, #a40a68, #3b1739); box-shadow: inset 0 0 0 1px rgba(217,241,63,0.38), 0 0 1rem rgba(226,10,139,0.24); }
  .presentation-stage > footer > [data-presentation-message] { background: rgba(23,9,27,0.76); }
  .presentation-last span { color: #17091b; box-shadow: 0 0 1.2rem rgba(217,241,63,0.28); }
  .particles { background-image: radial-gradient(circle, rgba(217,241,63,0.82) 0 1.5px, transparent 2px), radial-gradient(circle, rgba(226,10,139,0.76) 0 1px, transparent 1.7px); }
  .fair-play-proof { color: rgba(255,247,252,0.7); }
  .presentation-preview { background: radial-gradient(circle, rgba(226,10,139,0.32), transparent 45%), var(--presentation-background); }
}

.remote-page { min-height: 100vh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--navy); color: #fff; }
.remote-page .main-content { width: min(36rem, 100%); padding: 1rem; }
.remote-pair { display: grid; min-height: 80vh; place-items: center; align-content: center; text-align: center; }
.remote-header { display: flex; justify-content: space-between; align-items: center; }
.remote-header h1 { margin: 0; }
.remote-now { display: grid; place-items: center; min-height: 13rem; margin: 1rem 0; border: 1px solid #68415f; border-radius: 1.4rem; background: radial-gradient(circle at 50% 45%, rgba(226,10,139,0.24), transparent 45%), #321538; }
.remote-now strong { font-size: 5rem; line-height: 1; }
.remote-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; position: sticky; bottom: calc(0.5rem + env(safe-area-inset-bottom)); }
.remote-actions .button-primary { grid-column: span 2; }
.remote-page .checker-shell { margin-top: 1rem; color: var(--ink); background: var(--paper); border-radius: 1.2rem; overflow: hidden; }

.live-moderation { overflow: hidden; background: linear-gradient(135deg, #fffdfb, #fff7fb); }
.moderation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.moderation-card { display: flex; align-items: center; gap: 0.8rem; min-height: 5.2rem; padding: 0.85rem; color: var(--ink); border: 1px solid var(--line); border-radius: 1rem; background: #fff; text-align: left; cursor: pointer; transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.moderation-card:hover { border-color: #c33b8b; box-shadow: 0 12px 28px rgba(159,23,104,0.12); transform: translateY(-2px); }
.moderation-card:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.moderation-card > span:last-child { display: grid; gap: 0.15rem; }
.moderation-card strong { font-size: 0.96rem; }
.moderation-card small { color: var(--ink-soft); font-size: 0.78rem; }
.moderation-icon { display: grid; flex: 0 0 auto; place-items: center; width: 2.8rem; height: 2.8rem; color: #fff; border-radius: 0.8rem; background: linear-gradient(145deg, #e20a8b, #8d155f); box-shadow: 0 0 0 3px rgba(217,241,63,0.24); font-size: 1.25rem; font-weight: 900; }

.landing-page { background: #fdf8f3; }
.landing-page .main-content { width: 100%; margin: 0; padding: 0; }
.landing-shell { position: relative; min-height: 100vh; overflow: hidden; color: #281729; background: radial-gradient(circle at 88% 13%, rgba(217,241,63,0.22), transparent 22rem), radial-gradient(circle at 9% 42%, rgba(226,10,139,0.1), transparent 25rem), #fdf8f3; }
.landing-shell::before { content: ""; position: absolute; z-index: 0; width: 34rem; height: 34rem; right: -15rem; top: 26rem; border: 1px solid rgba(159,23,104,0.12); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(217,241,63,0.05), 0 0 0 10rem rgba(226,10,139,0.035); pointer-events: none; }
.landing-nav { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: min(1240px, calc(100% - 3rem)); min-height: 4.6rem; margin: 0 auto; border-bottom: 1px solid rgba(77,45,71,0.14); }
.landing-nav > div { display: flex; align-items: center; gap: 1.25rem; }
.landing-nav > div > a:not(.button) { color: #684e63; font-weight: 720; text-decoration: none; }
.landing-brand { display: inline-flex; align-items: center; color: var(--ink); font-weight: 850; text-decoration: none; }
.landing-brand .brand-lockup { width: 12rem; }
.landing-admin { min-height: 2.55rem; background: rgba(255,255,255,0.66); }
.landing-hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(22rem, 0.88fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); width: min(1240px, calc(100% - 3rem)); margin: 0 auto; padding: clamp(1.8rem, 3.5vw, 3.2rem) 0 clamp(2.2rem, 4vw, 4rem); }
.landing-copy { position: relative; z-index: 2; }
.landing-kicker { margin: 0 0 1.1rem; color: #9f1768; font-size: 0.74rem; line-height: 1.2; font-weight: 880; text-transform: uppercase; letter-spacing: 0.17em; }
.landing-wordmark { display: grid; width: max-content; max-width: 100%; margin-bottom: 1.15rem; transform: rotate(-1.5deg); }
.landing-wordmark .brand-lockup { width: clamp(17rem, 34vw, 31rem); }
.landing-copy h1 { max-width: 12ch; margin: 0 0 1.1rem; font-size: clamp(2.5rem, 5.5vw, 5.4rem); line-height: 0.96; letter-spacing: -0.062em; }
.landing-lead { max-width: 57ch; margin: 0 0 1.8rem; color: #6d596b; font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.landing-ticket { position: relative; width: min(31rem, 100%); margin: 0 auto; padding: 0.65rem; border-radius: 1.4rem; background: rgba(255,255,255,0.72); box-shadow: 0 40px 90px rgba(74,20,59,0.2), 0 0 0 1px rgba(255,255,255,0.8); transform: rotate(2.2deg); }
.landing-ticket::before { content: ""; position: absolute; z-index: -1; inset: 10% -8% -6% 16%; border-radius: 1.7rem; background: linear-gradient(145deg, #d9f13f, #e20a8b); filter: blur(0.5px); transform: rotate(-6deg); }
.landing-ticket img { display: block; width: 100%; border-radius: 0.85rem; }
.landing-ticket figcaption { padding: 0.75rem 0.5rem 0.35rem; color: #725d70; font-size: 0.78rem; text-align: center; }
.landing-features { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: min(1240px, calc(100% - 3rem)); margin: 0 auto; padding: 0.65rem 0 4rem; }
.landing-features article { position: relative; min-height: 11rem; padding: 1.45rem; overflow: hidden; border: 1px solid #eadde5; border-radius: 1.3rem; background: rgba(255,255,255,0.78); box-shadow: 0 20px 50px rgba(70,23,57,0.07); }
.landing-features article::after { content: ""; position: absolute; width: 7rem; height: 7rem; right: -2rem; bottom: -3rem; border-radius: 50%; background: radial-gradient(circle, rgba(217,241,63,0.5), transparent 70%); }
.landing-features span { color: #b00970; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.15em; }
.landing-features h2 { max-width: 15ch; margin: 1.55rem 0 0.55rem; font-size: 1.45rem; line-height: 1.05; letter-spacing: -0.035em; }
.landing-features p { max-width: 36ch; margin: 0; color: #735f70; }
.landing-contact { position: relative; z-index: 2; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 7vw, 7rem); padding: clamp(3rem, 7vw, 6rem) max(1.5rem, calc((100% - 1240px) / 2)); color: #fff; background: radial-gradient(circle at 12% 10%, rgba(226,10,139,0.3), transparent 32rem), #241029; }
.landing-contact .landing-kicker { color: #d9f13f; }
.landing-contact h2 { max-width: 12ch; margin: 0 0 1rem; font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 0.98; letter-spacing: -0.055em; }
.landing-contact p { max-width: 50ch; color: #dbcbd7; }
.landing-email { display: inline-block; color: #fff; font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 850; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.landing-inquiry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 0.85rem; padding: clamp(1rem, 2.5vw, 1.6rem); border: 1px solid rgba(255,255,255,0.16); border-radius: 1.2rem; background: rgba(255,255,255,0.07); box-shadow: 0 22px 55px rgba(0,0,0,0.2); }
.landing-inquiry label { min-width: 0; color: #fff; }
.landing-inquiry input, .landing-inquiry select, .landing-inquiry textarea { min-width: 0; max-width: 100%; color: #281729; background: #fffdfb; }
.landing-contact-links { display: grid; align-content: center; gap: 0.8rem; }
.landing-contact-links a { display: grid; gap: 0.2rem; padding: 1.1rem 1.2rem; border: 1px solid rgba(255,255,255,0.16); border-radius: 0.9rem; background: rgba(255,255,255,0.06); text-decoration: none; transition: transform 150ms ease, border-color 150ms ease, background 150ms ease; }
.landing-contact-links a:hover { border-color: rgba(217,241,63,0.72); background: rgba(255,255,255,0.1); transform: translateX(4px); }
.landing-contact-links small { color: #d9f13f; font-weight: 780; text-transform: uppercase; letter-spacing: 0.12em; }
.landing-contact-links strong { font-size: clamp(1rem, 2vw, 1.35rem); overflow-wrap: anywhere; }
.landing-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem max(1.5rem, calc((100% - 1240px) / 2)); color: #d8c8d5; background: #18091b; font-size: 0.82rem; }
.landing-footer > div { display: flex; flex-wrap: wrap; gap: 1rem; }
.landing-footer a { color: inherit; text-underline-offset: 0.2em; }

.landing-join { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(23rem, 0.95fr); align-items: center; gap: clamp(1.5rem, 5vw, 4.5rem); width: min(1240px, calc(100% - 3rem)); margin: 0 auto 4rem; padding: clamp(1.5rem, 4vw, 3rem); overflow: hidden; color: #fff; border: 1px solid rgba(217,241,63,0.24); border-radius: 1.5rem; background: radial-gradient(circle at 92% 8%, rgba(217,241,63,0.19), transparent 17rem), radial-gradient(circle at 5% 110%, rgba(226,10,139,0.38), transparent 24rem), #241029; box-shadow: 0 28px 70px rgba(70,23,57,0.18); }
.landing-join::after { content: ""; position: absolute; z-index: -1; width: 18rem; height: 18rem; right: -8rem; bottom: -12rem; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(217,241,63,0.035), 0 0 0 6rem rgba(226,10,139,0.035); pointer-events: none; }
.landing-join .landing-kicker { color: var(--cyan); }
.landing-join h2 { max-width: 15ch; margin: 0 0 0.75rem; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 0.98; letter-spacing: -0.055em; }
.landing-join p { max-width: 56ch; margin: 0; color: #dfd0dc; }
.landing-join form { min-width: 0; padding: clamp(1rem, 2.4vw, 1.45rem); border: 1px solid rgba(255,255,255,0.16); border-radius: 1.1rem; background: rgba(255,255,255,0.075); box-shadow: 0 18px 45px rgba(0,0,0,0.2); }
.landing-join form > label { color: #fff; }
.landing-join form > div { display: grid; grid-template-columns: minmax(9rem, 0.72fr) minmax(9rem, 1fr); gap: 0.75rem; margin-top: 0.45rem; }
.landing-join input { min-width: 0; min-height: 3.5rem; color: var(--ink); border-color: rgba(255,255,255,0.55); background: #fffdfb; font-size: 1.35rem; font-weight: 900; letter-spacing: 0.22em; text-align: center; font-variant-numeric: tabular-nums; }
.landing-join button { min-width: 0; min-height: 3.5rem; }
.landing-join small { display: block; margin-top: 0.7rem; color: #cdbac9; line-height: 1.4; }

.digital-play-page { min-width: 0; min-height: 100vh; min-height: 100svh; overflow-x: hidden; color: #fff7fc; background: #17091b; }
.digital-play-page > .main-content { width: 100%; margin: 0; padding: 0; }
.digital-play { --presentation-background: #17091b; --presentation-primary: #d9f13f; --presentation-accent: #e20a8b; --presentation-orb: #ff56bd; --presentation-glow: #c6127d; --presentation-lightning: #fff5a3; --presentation-number: #fff; --presentation-text: #fff7fc; position: relative; isolation: isolate; min-width: 0; min-height: 100vh; min-height: 100svh; padding: max(0.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); overflow: hidden; color: var(--presentation-text); background: radial-gradient(circle at 52% 10%, color-mix(in srgb, var(--presentation-accent) 35%, transparent), transparent 30rem), radial-gradient(circle at 4% 72%, color-mix(in srgb, var(--presentation-primary) 13%, transparent), transparent 25rem), linear-gradient(155deg, color-mix(in srgb, var(--presentation-background) 88%, #000), var(--presentation-background) 54%, color-mix(in srgb, var(--presentation-accent) 12%, #080309)); }
.digital-play::before { content: ""; position: fixed; z-index: -2; inset: 0; pointer-events: none; opacity: 0.18; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,0.05) 6px); mix-blend-mode: screen; }
.digital-play::after { content: ""; position: fixed; z-index: -1; inset: -20%; pointer-events: none; opacity: 0.43; background-image: radial-gradient(circle, color-mix(in srgb, var(--presentation-primary) 72%, transparent) 0 1px, transparent 1.8px), radial-gradient(circle, color-mix(in srgb, var(--presentation-accent) 68%, transparent) 0 1.2px, transparent 2px); background-position: 0 0, 2.5rem 1.5rem; background-size: 5rem 5rem, 7rem 7rem; animation: star-drift 28s linear infinite; }
.digital-play-header { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(1320px, 100%); min-height: 3.5rem; margin: 0 auto clamp(1rem, 3vw, 2rem); padding: 0.35rem 0.2rem; }
.digital-play-header > a { display: inline-flex; align-items: center; min-width: 0; min-height: 2.75rem; padding: 0.28rem 0.4rem; border-radius: 0.65rem; }
.digital-play-header .brand-lockup { width: clamp(12rem, 20vw, 18rem); }
.digital-play-header .connection { flex: 0 1 auto; min-width: 0; padding: 0.45rem 0.75rem; color: #ebdee8; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; background: rgba(23,9,27,0.62); }
.digital-play-header .connection > span { width: auto; height: auto; min-width: 0; overflow: hidden; color: inherit; border-radius: 0; background: none; box-shadow: none; text-overflow: ellipsis; white-space: nowrap; }
.digital-play-header .connection > i { flex: 0 0 auto; }
.digital-join-card { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(14rem, 0.72fr) minmax(20rem, 1.28fr); align-items: center; gap: clamp(1.5rem, 5vw, 4rem); width: min(64rem, 100%); min-width: 0; margin: clamp(1rem, 5vh, 4rem) auto 2rem; padding: clamp(1.25rem, 4vw, 3rem); color: var(--ink); border: 1px solid rgba(255,255,255,0.8); border-radius: clamp(1.25rem, 3vw, 2rem); background: rgba(255,253,251,0.96); box-shadow: 0 35px 90px rgba(0,0,0,0.36), 0 0 5rem color-mix(in srgb, var(--presentation-accent) 14%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.digital-join-card > div { min-width: 0; }
.digital-join-card h1 { max-width: 12ch; margin: 0.25rem 0 0.8rem; font-size: clamp(2.25rem, 5vw, 4.2rem); line-height: 0.98; letter-spacing: -0.06em; }
.digital-join-card p:not(.eyebrow):not(.form-status) { max-width: 45ch; color: var(--ink-soft); }
.digital-join-card form { margin-top: 1.35rem; }
.digital-join-card input, .digital-join-card button { min-height: 3.25rem; }
.digital-join-card input { font-size: max(1rem, 16px); }
.digital-join-card input[name="code"] { font-size: 1.35rem; font-weight: 900; letter-spacing: 0.2em; text-align: center; font-variant-numeric: tabular-nums; }
.digital-join-visual { display: grid; place-items: center; min-height: 20rem; border-radius: 1.4rem; background: radial-gradient(circle, rgba(226,10,139,0.26), transparent 54%), #241029; overflow: hidden; }
.digital-join-visual .orb { width: min(62%, 14rem); }
.privacy-note { display: block; margin-top: 0.9rem; color: var(--ink-soft); line-height: 1.45; }
.digital-player-stage { position: relative; z-index: 2; width: min(1320px, 100%); min-width: 0; margin: 0 auto; }
.digital-player-top { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; min-width: 0; margin-bottom: 1rem; padding: 0.25rem 0.15rem; }
.digital-player-top > div:first-child { min-width: 0; }
.digital-player-top h1 { margin: 0.15rem 0 0.35rem; overflow-wrap: anywhere; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -0.05em; }
.digital-player-top p { margin: 0; color: color-mix(in srgb, var(--presentation-text) 72%, transparent); }
.digital-player-top [data-player-count], .digital-player-code { display: none; }
.digital-player-code { flex: 0 0 auto; min-width: 10rem; padding: 0.75rem 1rem; color: #281729; border: 1px solid color-mix(in srgb, var(--presentation-primary) 72%, transparent); border-radius: 1rem; background: var(--presentation-primary); box-shadow: 0 0 2.3rem color-mix(in srgb, var(--presentation-primary) 28%, transparent); text-align: center; }
.digital-player-code span, .digital-player-code strong { display: block; }
.digital-player-code span { font-size: 0.69rem; font-weight: 820; text-transform: uppercase; letter-spacing: 0.1em; }
.digital-player-code strong { max-width: 16rem; overflow: hidden; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.digital-bingo-alert { display: flex; align-items: center; justify-content: center; gap: clamp(0.75rem, 3vw, 2rem); min-height: 5rem; margin: 0; padding: 0.8rem 1rem; color: #241029; border: 2px solid #fff8bf; border-radius: 1.2rem; background: linear-gradient(135deg, #fff5a3, var(--presentation-primary)); box-shadow: 0 0 0 0.35rem rgba(226,10,139,0.28), 0 0 3rem rgba(217,241,63,0.45); text-align: center; }
.digital-bingo-alert strong { font-size: clamp(2rem, 7vw, 4rem); line-height: 0.9; }
.digital-bingo-alert span { font-weight: 850; }
.digital-player-layout { display: grid; grid-template-columns: minmax(18rem, 0.82fr) minmax(28rem, 1.18fr); align-items: start; gap: 1rem; min-width: 0; }
.digital-player-card-stack { display: grid; align-content: start; gap: 1rem; min-width: 0; }
.digital-player-now, .digital-card-panel { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--presentation-primary) 18%, transparent); border-radius: 1.35rem; box-shadow: 0 24px 60px rgba(0,0,0,0.25); }
.digital-player-now { padding: clamp(0.9rem, 2vw, 1.35rem); background: color-mix(in srgb, var(--presentation-background) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.digital-orb { position: relative; isolation: isolate; display: grid; justify-items: center; min-height: 20rem; padding: 0.5rem; text-align: center; }
.digital-orb .particles { inset: -35%; }
.digital-orb .orb { position: absolute; z-index: 1; top: 1.7rem; left: 50%; width: min(68%, 17rem); transform: translateX(-50%); animation: digital-orb-float 4.2s ease-in-out infinite; }
.digital-orb > span, .digital-orb > strong, .digital-orb > p { position: relative; z-index: 4; }
.digital-orb > span { color: color-mix(in srgb, var(--presentation-text) 66%, transparent); font-size: 0.72rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.13em; }
.digital-orb > strong { position: absolute; top: 6.25rem; left: 50%; width: min(90%, 18rem); color: var(--presentation-number); font-size: clamp(4.3rem, 8vw, 7.2rem); line-height: 1; letter-spacing: -0.055em; text-align: center; text-shadow: 0 0 10px #fff, 0 0 32px var(--presentation-lightning), 0 0 74px var(--presentation-glow); transform: translateX(-50%); font-variant-numeric: tabular-nums; white-space: nowrap; }
.digital-orb > p { max-width: 32rem; margin: 0.35rem 0 0; color: color-mix(in srgb, var(--presentation-text) 78%, transparent); font-size: 0.9rem; }
.digital-orb.is-reveal > strong { animation: digital-number-reveal 720ms cubic-bezier(.12,.92,.23,1.18) both; }
.digital-orb.is-reveal .orb { animation: reveal-flash 1.15s ease both, digital-orb-float 4.2s 1.15s ease-in-out infinite; }
.digital-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.6rem; }
.digital-progress article { min-width: 0; padding: 0.75rem 0.45rem; border: 1px solid rgba(255,255,255,0.11); border-radius: 0.85rem; background: rgba(255,255,255,0.055); text-align: center; }
.digital-progress span, .digital-progress small, .digital-progress strong { display: block; }
.digital-progress span { min-height: 2.3em; color: color-mix(in srgb, var(--presentation-text) 72%, transparent); font-size: 0.68rem; font-weight: 720; line-height: 1.15; }
.digital-progress strong { margin: 0.15rem 0; color: var(--presentation-primary); font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1; }
.digital-progress small { color: color-mix(in srgb, var(--presentation-text) 54%, transparent); font-size: 0.65rem; }
.digital-last { margin-top: 0.7rem; padding: 0.75rem; border: 1px solid rgba(255,255,255,0.11); border-radius: 0.85rem; background: rgba(0,0,0,0.12); }
.digital-last > span { display: block; margin-bottom: 0.45rem; color: color-mix(in srgb, var(--presentation-text) 62%, transparent); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.digital-last > div { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 2.75rem; }
.digital-last > div span, .digital-last > div i { display: grid; flex: 1 1 3.5rem; place-items: center; min-width: 3.25rem; min-height: 2.75rem; padding: 0.35rem; color: #281729; border-radius: 999px; background: var(--presentation-primary); font-style: normal; font-weight: 900; white-space: nowrap; }
.digital-card-panel { padding: clamp(1rem, 2.7vw, 2rem); color: var(--ink); background: rgba(255,253,251,0.97); }
.digital-card-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.digital-card-heading > div, .digital-card-heading > p { min-width: 0; }
.digital-card-heading h2 { margin: 0.2rem 0 0; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.05; }
.digital-card-heading > p { max-width: 27rem; margin: 0; color: var(--ink-soft); font-size: 0.86rem; }
.digital-card { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.2rem, 0.7vw, 0.45rem); width: 100%; min-width: 0; }
.digital-card > strong { display: grid; place-items: center; min-width: 0; min-height: 2.75rem; color: #fff; border-radius: 0.55rem; background: linear-gradient(145deg, #321538, #8d155f); font-size: clamp(1rem, 2vw, 1.35rem); letter-spacing: 0.08em; }
.digital-card button { position: relative; display: grid; min-width: 0; min-height: 3.8rem; aspect-ratio: 1; place-items: center; padding: 0.15rem; color: var(--ink); border: 1px solid #d9c7d2; border-radius: clamp(0.38rem, 1vw, 0.7rem); background: #fff; box-shadow: 0 4px 12px rgba(70,23,57,0.055); cursor: default; touch-action: manipulation; transition: color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.digital-card button span { font-size: clamp(1.05rem, 3.1vw, 1.65rem); line-height: 1; font-weight: 850; font-variant-numeric: tabular-nums; }
.digital-card button i { position: absolute; right: 0.28rem; bottom: 0.18rem; display: none; color: #281729; font-size: 0.72rem; font-style: normal; font-weight: 950; }
.digital-card button.is-published:not(.is-marked) { color: var(--ink); border-color: #d9c7d2; background: #fff; box-shadow: 0 4px 12px rgba(70,23,57,0.055); cursor: pointer; }
.digital-card button.is-published:not(.is-marked):hover, .digital-card button.is-published:not(.is-marked):active { color: var(--ink); border-color: #d9c7d2; background: #fff; box-shadow: 0 4px 12px rgba(70,23,57,0.055); transform: none; }
.digital-card button.is-marked { color: #281729; border-color: #9cb128; background: linear-gradient(145deg, #f1ff91, var(--presentation-primary)); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.58), 0 0 1.2rem rgba(217,241,63,0.26); cursor: pointer; }
.digital-card button.is-marked i { display: block; }
.digital-card button.is-latest.is-marked { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.58), 0 0 1.2rem rgba(217,241,63,0.26); }
.digital-card button:disabled:not(.is-marked) { color: var(--ink); border-color: #d9c7d2; background: #fff; box-shadow: 0 4px 12px rgba(70,23,57,0.055); opacity: 1; }
.digital-card-help { min-height: 1.5rem; margin: 0.85rem 0 0; color: var(--ink-soft); font-size: 0.84rem; }
.digital-player-stage.has-bingo .digital-card-panel { border-color: var(--presentation-primary); box-shadow: 0 0 0 0.28rem rgba(217,241,63,0.17), 0 24px 60px rgba(0,0,0,0.25); }
.digital-play[data-intensity="off"]::after, .digital-play[data-intensity="off"] .particles, .digital-play[data-intensity="off"] .orb, .digital-play[data-intensity="off"] .orb::before, .digital-play[data-intensity="off"] .orb::after, .digital-play[data-intensity="off"] .orb-core, .digital-play[data-intensity="off"] .lightning, .digital-play[data-intensity="off"] .digital-orb.is-reveal > strong { animation: none; }
.digital-play[data-intensity="off"] .particles, .digital-play[data-intensity="off"] .lightning { opacity: 0.12; }
.digital-play[data-intensity="subtle"]::after { animation-duration: 52s; }
.digital-play[data-intensity="subtle"] .particles { opacity: 0.3; animation-duration: 30s; }
.digital-play[data-intensity="subtle"] .lightning { opacity: 0.3; animation-duration: 11s; }

.digital-host-panel { display: grid; grid-template-columns: minmax(22rem, 0.82fr) minmax(27rem, 1.18fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 0.75rem 1.25rem; min-width: 0; overflow: hidden; background: linear-gradient(135deg, #fffdfb, #fff7fb); }
.digital-host-access { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.digital-host-panel > .digital-host-access { grid-column: 1; grid-row: 1 / span 2; }
.digital-host-access > div { min-width: 0; }
.digital-host-access h2 { margin: 0.2rem 0 0.35rem; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.digital-host-access p { margin: 0; color: var(--ink-soft); }
.digital-host-access > img { display: block; width: 7rem; height: 7rem; padding: 0.3rem; border: 1px solid var(--line); border-radius: 0.9rem; background: #fff; object-fit: contain; }
.digital-host-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin-top: 1rem; }
.digital-host-controls .button { min-height: 2.75rem; }
.join-code { display: grid; min-width: 8.6rem; min-height: 3.6rem; place-items: center; padding: 0.35rem 0.8rem; color: #fff; border: 1px solid #bb277f; border-radius: 0.8rem; background: linear-gradient(145deg, #e20a8b, #8d155f); box-shadow: 0 8px 22px rgba(180,11,114,0.22); font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1; font-weight: 920; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.digital-bingo-host-alert { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 0.8rem; min-width: 0; min-height: 3.5rem; margin: 0; padding: 0.75rem 1rem; color: #392500; border: 1px solid #dfc032; border-radius: 0.85rem; background: linear-gradient(135deg, #fff7c7, #d9f13f); box-shadow: 0 10px 26px rgba(155,91,0,0.12); }
.digital-bingo-host-alert strong, .digital-bingo-host-alert span { min-width: 0; }
.digital-bingo-host-alert strong { flex: 0 0 auto; }
.digital-bingo-host-alert span { overflow-wrap: anywhere; }
.digital-player-roster { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 0.55rem; max-height: min(22rem, 48vh); margin: 0; padding-right: 0.2rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.digital-player-roster > p { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); }
.digital-player-row { display: grid; grid-template-columns: minmax(7rem, 1fr) auto auto; align-items: center; gap: 0.7rem; min-width: 0; min-height: 4.3rem; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 0.85rem; background: #fff; }
.digital-player-row > div:first-child { min-width: 0; }
.digital-player-row strong, .digital-player-row small { display: block; min-width: 0; }
.digital-player-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.digital-player-row small { color: var(--ink-soft); font-size: 0.73rem; overflow-wrap: anywhere; }
.digital-player-row.is-bingo-ready { border-color: #c6dc39; background: linear-gradient(135deg, #fff, #fbffd9); box-shadow: 0 0 0 3px rgba(217,241,63,0.17); }
.digital-progress-badges { display: flex; flex-wrap: nowrap; gap: 0.25rem; }
.digital-progress-badges span { display: inline-flex; align-items: baseline; justify-content: center; gap: 0.18rem; min-width: 2.55rem; padding: 0.3rem 0.38rem; color: #684e63; border-radius: 999px; background: #f4ebf1; font-size: 0.69rem; font-weight: 800; }
.digital-progress-badges b { color: var(--cyan-dark); font-size: 0.9rem; }
.digital-player-status { color: var(--success); font-size: 0.74rem; font-weight: 800; text-align: right; }
.digital-player-status.is-rejected { color: var(--danger); }
.digital-player-status.is-withdrawn { color: var(--ink-soft); }
.digital-claim-summary h3 { margin: 0.15rem 0 0.85rem; font-size: clamp(1.65rem, 5vw, 2.4rem); }
.digital-claim-summary > p:not(.eyebrow) { color: var(--ink-soft); line-height: 1.5; }
.digital-claim-summary .notice span { display: block; margin-top: 0.25rem; }
.digital-claim-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; margin: 1rem 0; }
.digital-claim-grid > span { position: relative; display: grid; min-width: 0; min-height: 3.4rem; place-items: center; color: var(--ink); border: 1px solid #d9c7d2; border-radius: 0.55rem; background: #fff; font-variant-numeric: tabular-nums; }
.digital-claim-grid > span.is-marked { color: #281729; border-color: #9cb128; background: linear-gradient(145deg, #f1ff91, var(--presentation-primary)); }
.digital-claim-grid > span.is-winning { box-shadow: inset 0 0 0 3px #b90d72, 0 0 1rem rgba(185,13,114,0.2); }
.digital-claim-grid b { font-size: clamp(1rem, 3vw, 1.35rem); }
.digital-claim-grid i { position: absolute; right: 0.24rem; bottom: 0.12rem; font-size: 0.7rem; font-style: normal; font-weight: 950; }

.empty-state { display: grid; min-height: 50vh; place-items: start; align-content: center; max-width: 45rem; margin: auto; }
.toast-region { position: fixed; z-index: 200; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); display: grid; gap: 0.5rem; width: min(24rem, calc(100% - 2rem)); }
.toast { padding: 0.9rem 1rem; color: #fff; border-radius: 0.75rem; background: #3d1939; box-shadow: var(--shadow); }
.toast.is-error { background: #8e222b; }

@keyframes breathe { 0%,100% { transform: scale(0.84); opacity: 0.58; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes rotate-energy { to { transform: rotate(360deg); } }
@keyframes orbit-ring { to { transform: rotateX(68deg) rotateZ(348deg); } }
@keyframes orb-hover { 0%,100% { transform: translateY(0) rotateZ(-0.6deg); } 50% { transform: translateY(-0.8rem) rotateZ(0.6deg); } }
@keyframes ground-pulse { 0%,100% { opacity: 0.42; transform: scaleX(0.82); } 50% { opacity: 0.82; transform: scaleX(1.08); } }
@keyframes reveal-flash { 0% { filter: brightness(1) saturate(1); } 38% { filter: brightness(3.2) saturate(1.45); box-shadow: 0 0 6rem var(--presentation-lightning), 0 0 13rem var(--presentation-accent); transform: scale(1.08); } 100% { filter: brightness(1.12) saturate(1.12); } }
@keyframes drift { to { background-position: 4rem -4rem; } }
@keyframes star-drift { to { transform: rotate(4deg) translate3d(3rem, -2rem, 0); } }
@keyframes digital-orb-float { 0%,100% { transform: translateX(-50%) translateY(0) rotateZ(-0.6deg); } 50% { transform: translateX(-50%) translateY(-0.55rem) rotateZ(0.6deg); } }
@keyframes digital-number-reveal { 0% { opacity: 0; transform: translateX(-50%) scale(0.32) rotate(-8deg); } 64% { opacity: 1; transform: translateX(-50%) scale(1.08) rotate(1deg); } 100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); } }

@media (max-width: 1320px) {
  .app-header { grid-template-columns: auto auto 1fr; column-gap: 0.75rem; }
  .nav-toggle { display: inline-flex; justify-self: end; min-height: 2.75rem; padding: 0.5rem 0.8rem; color: #fff; border: 1px solid #76526e; border-radius: 0.55rem; background: transparent; }
  .primary-nav { position: absolute; left: 1rem; right: 1rem; top: calc(100% + 0.3rem); display: none; flex-direction: column; padding: 0.5rem; background: #321538; border: 1px solid #6c4765; border-radius: 0.8rem; box-shadow: var(--shadow); }
  .primary-nav.is-open { display: flex; }
  .account { justify-self: end; margin-left: 1rem; }
  .account > span { display: none; }
  .landing-inquiry { grid-template-columns: 1fr; }
  .landing-inquiry .span-2 { grid-column: auto; }
}

@media (max-width: 1120px) {
  .live-grid { grid-template-columns: 1fr; }
  .live-sidebar { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .number-board { grid-template-columns: repeat(10, minmax(2.6rem, 1fr)); }
  .moderation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-hero { grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.72fr); gap: 2.5rem; }
  .landing-contact { grid-template-columns: 1fr; }
  .digital-player-layout { grid-template-columns: minmax(17rem, 0.72fr) minmax(25rem, 1.28fr); }
  .digital-host-panel { grid-template-columns: 1fr; grid-template-rows: auto; }
  .digital-host-panel > .digital-host-access, .digital-bingo-host-alert, .digital-player-roster { grid-column: 1; grid-row: auto; }
  .digital-player-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: min(20rem, 44vh); }
}

@media (max-width: 940px) {
  .digital-player-layout { grid-template-columns: 1fr; }
  .digital-player-now { display: grid; grid-template-columns: minmax(17rem, 1.15fr) minmax(13rem, 0.85fr); align-items: center; gap: 0.75rem; }
  .digital-orb { grid-row: span 2; }
  .digital-progress { grid-template-columns: 1fr; margin-top: 0; }
  .digital-progress article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.5rem; text-align: left; }
  .digital-progress span { min-height: 0; }
  .digital-progress strong { grid-row: span 2; grid-column: 2; }
  .digital-last { margin-top: 0; }
}

@media (max-width: 760px) {
  .app-header { min-height: 4rem; padding: 0 1rem; }
  .app-header .brand-lockup { width: 8.65rem; }
  .main-content { width: min(100% - 1.25rem, 100%); padding-top: 1.5rem; }
  .page-heading { align-items: start; flex-direction: column; }
  .page-heading h1 { font-size: clamp(2rem, 11vw, 3rem); }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .action-grid, .two-column, .settings-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .active-game, .game-card, .section-heading { align-items: stretch; flex-direction: column; }
  .inline-search { width: 100%; }
  .inline-search input { min-width: 0; }
  .live-page .app-header { display: none; }
  .live-page .main-content { width: 100%; padding: 0.8rem; }
  .live-sidebar { grid-template-columns: 1fr; }
  .number-board { grid-template-columns: repeat(5, minmax(2.8rem, 1fr)); }
  .public-board-group { min-width: 45rem; }
  .presentation-stage > header { gap: 0.45rem; padding: 0.38rem 0.5rem; }
  .presentation .test-game-banner { top: calc(max(0.5rem, env(safe-area-inset-top)) + 4.6rem); }
  .presentation-stage > header .connection { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; padding: 0.55rem; overflow: hidden; font-size: 0; }
  .presentation-stage > header > [data-presentation-round] { font-size: 0.76rem; }
  .presentation-brand-lockup { width: 10rem; }
  .presentation-stage > footer { align-items: end; }
  .presentation-stage > footer > [data-presentation-message] { display: none; }
  .presentation-last { gap: 0.3rem; }
  .presentation-last span { min-width: 3.2rem; height: 2.75rem; padding-inline: 0.35rem; font-size: 0.86rem; }
  .orb { width: min(70vw, 24rem); }
  .recovery-codes { columns: 1; }
  .moderation-grid { grid-template-columns: 1fr; }
  .landing-nav { width: min(100% - 1.5rem, 100%); }
  .landing-nav > div { gap: 0.6rem; }
  .landing-nav > div > a:not(.button) { display: none; }
  .landing-brand .brand-lockup { width: 9.5rem; }
  .landing-admin { padding-inline: 0.7rem; font-size: 0.8rem; }
  .landing-hero { grid-template-columns: 1fr; width: min(100% - 2rem, 100%); min-height: auto; padding: 1.8rem 0 2.8rem; }
  .landing-wordmark .brand-lockup { width: min(82vw, 25rem); }
  .landing-copy h1 { max-width: 14ch; }
  .landing-ticket { width: min(28rem, 90%); }
  .landing-features { grid-template-columns: 1fr; width: min(100% - 2rem, 100%); padding-bottom: 2.8rem; }
  .landing-features article { min-height: 9.5rem; }
  .landing-features h2 { margin-top: 1.2rem; }
  .landing-contact { grid-template-columns: 1fr; padding: 3rem 1rem; }
  .landing-inquiry { grid-template-columns: 1fr; }
  .landing-inquiry .span-2 { grid-column: auto; }
  .landing-footer { align-items: flex-start; flex-direction: column; padding: 1.5rem 1rem; }
  .landing-join { grid-template-columns: 1fr; width: min(100% - 2rem, 100%); margin-bottom: 2.8rem; padding: 1.25rem; border-radius: 1.25rem; }
  .landing-join h2 { font-size: clamp(2rem, 11vw, 3rem); }
  .landing-join form > div { grid-template-columns: 1fr; }
  .digital-play { padding-top: max(0.4rem, env(safe-area-inset-top)); padding-right: max(0.65rem, env(safe-area-inset-right)); padding-left: max(0.65rem, env(safe-area-inset-left)); }
  .digital-play-header { min-height: 2.9rem; margin-bottom: 0.45rem; padding-block: 0.15rem; }
  .digital-play-header .connection { max-width: 50vw; padding-inline: 0.55rem; font-size: 0.72rem; }
  .digital-join-card { grid-template-columns: 1fr; gap: 1rem; margin-top: 0.5rem; padding: 1rem; }
  .digital-join-visual { min-height: 8rem; }
  .digital-join-visual .orb { width: 5.8rem; }
  .digital-join-card h1 { font-size: clamp(2rem, 11vw, 3rem); }
  .digital-player-top { display: block; margin-bottom: 0.45rem; padding: 0 0.15rem; }
  .digital-player-top h1 { margin-block: 0.05rem 0.2rem; font-size: clamp(1.4rem, 7vw, 2rem); }
  .digital-player-top p { font-size: 0.78rem; }
  .digital-player-code { align-self: flex-start; min-width: 0; max-width: 100%; text-align: left; }
  .digital-player-code span, .digital-player-code strong { display: inline; }
  .digital-player-code span { margin-right: 0.4rem; }
  .digital-bingo-alert { align-items: center; flex-direction: column; gap: 0.3rem; min-height: 3.5rem; }
  .digital-player-layout { display: flex; flex-direction: column; gap: 0.65rem; }
  .digital-player-now { display: contents; }
  .digital-orb { order: 0; width: 100%; min-height: 14.5rem; padding: 0.4rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--presentation-primary) 18%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--presentation-background) 72%, transparent); box-shadow: 0 12px 34px rgba(0,0,0,0.2); }
  .digital-orb::after { content: ""; position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; height: 4.8rem; pointer-events: none; background: linear-gradient(transparent, color-mix(in srgb, var(--presentation-background) 84%, transparent)); }
  .digital-orb .orb { top: 0.35rem; width: 13.75rem; }
  .digital-orb > strong { top: 4.25rem; font-size: clamp(3rem, 17vw, 4rem); }
  .digital-orb > span { font-size: 0.62rem; }
  .digital-orb > p { margin-top: 0.15rem; font-size: 0.72rem; line-height: 1.25; }
  .digital-progress { order: 2; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
  .digital-progress article { display: block; text-align: center; }
  .digital-progress span { min-height: 2.3em; }
  .digital-last { order: 3; width: 100%; margin-top: 0; }
  .digital-player-card-stack { order: 1; width: 100%; gap: 0.65rem; }
  .digital-card-panel { order: 1; width: 100%; padding: 0.75rem; }
  .digital-card-heading { align-items: start; flex-direction: column; gap: 0.25rem; margin-bottom: 0.55rem; }
  .digital-card-heading > p { display: none; }
  .digital-card { gap: 0.22rem; }
  .digital-card > strong { min-height: 2.45rem; border-radius: 0.38rem; }
  .digital-card button { min-height: 3.1rem; border-radius: 0.4rem; }
  .digital-card button span { font-size: clamp(1rem, 5vw, 1.35rem); }
  .digital-host-access { grid-template-columns: minmax(0, 1fr) 6.5rem; align-items: start; }
  .digital-host-access > img { width: 6.5rem; height: 6.5rem; }
  .digital-host-controls { align-items: stretch; flex-direction: column; }
  .digital-host-controls .button { width: 100%; }
  .join-code { width: 100%; }
  .digital-bingo-host-alert { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
  .digital-player-row { grid-template-columns: minmax(0, 1fr) auto; }
  .digital-player-row > .button, .digital-player-row > .digital-player-status { grid-column: 1 / -1; width: 100%; min-height: 2.75rem; }
  .digital-player-roster { grid-template-columns: 1fr; max-height: min(24rem, 58vh); }
  .presentation-audio-activate { width: 2.75rem; max-width: none; }
  .presentation-stage[data-mode="pause"] .presentation-label, .presentation-stage[data-mode="message"] .presentation-label, .presentation-stage[data-mode="next-round"] .presentation-label, .presentation-stage[data-mode="prize"] .presentation-label, .presentation-stage[data-mode="start"] .presentation-label { width: calc(100vw - 2rem); font-size: clamp(1.8rem, 8vw, 3.5rem); }
}

@media (max-width: 390px) {
  .app-header { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 0.4rem; padding-inline: 0.65rem; }
  .app-header .brand-lockup { width: 7.8rem; }
  .app-header .account { margin-left: 0; }
  .digital-play-header .brand-lockup { width: 9rem; }
  .digital-play-header .connection { max-width: 48vw; }
  .digital-progress { gap: 0.3rem; }
  .digital-progress article { padding-inline: 0.25rem; }
  .digital-progress span { font-size: 0.61rem; }
  .digital-progress small { font-size: 0.59rem; }
  .digital-card button { min-height: 2.85rem; }
  .digital-host-access { grid-template-columns: 1fr; }
  .digital-host-access > img { width: min(8rem, 100%); height: auto; aspect-ratio: 1; }
  .digital-player-row { grid-template-columns: 1fr; }
  .digital-progress-badges { justify-content: flex-start; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .checker-page .main-content { width: min(64rem, 100%); }
  .checker-shell { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0.5rem; }
  .checker-header { grid-column: span 2; }
  .checker-result { grid-column: span 2; }
  .camera-stage { aspect-ratio: 16 / 9; }
  .presentation-stage { grid-template-columns: minmax(16rem, 0.8fr) minmax(28rem, 1.2fr); grid-template-rows: auto 1fr auto; }
  .presentation-stage > header, .presentation-stage > footer { grid-column: 1 / -1; }
  .reveal-zone { min-height: 0; }
  .orb { width: min(48vh, 20rem); }
  .public-board { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .digital-play::after, .digital-play .particles, .digital-play .orb, .digital-play .orb::before, .digital-play .orb::after, .digital-play .orb-core, .digital-play .lightning, .digital-orb.is-reveal > strong { animation: none !important; }
}

@media print {
  .app-header, .button, .toast-region { display: none !important; }
  .auth-layout { display: block; background: #fff; }
  .auth-card { box-shadow: none; border: 0; }
  .recovery-codes { columns: 2; }
}