@font-face {
  font-family: "LiveCondensed";
  src: local("Impact"), local("Arial Narrow");
  font-display: swap;
}

:root {
  --accent: #4ab7ff;
  --accent-2: #87d8ff;
  --accent-soft: rgba(74, 183, 255, .18);
  --line: rgba(255, 255, 255, .92);
  --line-soft: rgba(255, 255, 255, .62);
  --panel-glow: rgba(74, 183, 255, .24);
  --edge-glow: rgba(255,255,255,.22);
  --metal-a: rgba(255,255,255,.18);
  --metal-b: rgba(255,255,255,.03);
  --white: #f7fbff;
  --yellow: #ffe02a;
  --red: #ff1745;
  --panel: rgba(0, 0, 0, .94);
  --admin-bg: #f5f7fb;
  --admin-card: #ffffff;
  --admin-text: #111827;
  --admin-muted: #6b7280;
  --radius: 14px;
  --clip: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
button, input, select, textarea { font: inherit; }

.display-body {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.12), transparent 28%),
    radial-gradient(circle at 80% 92%, var(--accent-soft), transparent 28%),
    #000;
  color: var(--white);
  overflow: hidden;
  font-family: LiveCondensed, Impact, "Arial Narrow", Arial, sans-serif;
}

.display-body[data-theme="neon-blue"] { --accent: #2fa8ff; --accent-2: #83d6ff; --accent-soft: rgba(47,168,255,.22); --line: rgba(225,245,255,.96); --line-soft: rgba(131,214,255,.72); --panel-glow: rgba(47,168,255,.28); --yellow: #ffe44a; --red: #ff143c; }
.display-body[data-theme="energy-red"] { --accent: #ff3b36; --accent-2: #ff8d7f; --accent-soft: rgba(255,59,54,.23); --line: rgba(255,236,236,.96); --line-soft: rgba(255,141,127,.72); --panel-glow: rgba(255,59,54,.30); --yellow: #ffe353; --red: #ff2020; }
.display-body[data-theme="premium-gold"] { --accent: #ffcf42; --accent-2: #ffeaa0; --accent-soft: rgba(255,207,66,.24); --line: rgba(255,249,220,.96); --line-soft: rgba(255,234,160,.76); --panel-glow: rgba(255,207,66,.30); --yellow: #ffdb2f; --red: #ff3048; }
.display-body[data-theme="royal-purple"] { --accent: #d25cff; --accent-2: #efb0ff; --accent-soft: rgba(210,92,255,.22); --line: rgba(248,234,255,.96); --line-soft: rgba(239,176,255,.76); --panel-glow: rgba(210,92,255,.28); --yellow: #ffe55e; --red: #ff2d75; }
.display-body[data-theme="emerald"] { --accent: #2fffc1; --accent-2: #a4ffe5; --accent-soft: rgba(47,255,193,.20); --line: rgba(229,255,247,.96); --line-soft: rgba(164,255,229,.74); --panel-glow: rgba(47,255,193,.28); --yellow: #f6ff78; --red: #ff2f5f; }
.display-body[data-theme="ice"] { --accent: #ffffff; --accent-2: #c8f6ff; --accent-soft: rgba(255,255,255,.18); --line: rgba(255,255,255,.97); --line-soft: rgba(200,246,255,.76); --panel-glow: rgba(255,255,255,.20); --yellow: #f8f8f8; --red: #ff2148; }

.display-body[data-shape="rounded"] { --radius: 14px; --clip: none; }
.display-body[data-shape="square"] { --radius: 2px; --clip: none; }
.display-body[data-shape="pill"] { --radius: 999px; --clip: none; }
.display-body[data-shape="bevel"] { --radius: 0; --clip: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

.stage {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2vw, 28px);
}

.hidden { display: none !important; }

.draw-board {
  position: relative;
  isolation: isolate;
  width: min(96vw, 1320px);
  max-height: 97vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 16%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.06), transparent 34%),
    rgba(0,0,0,.96);
  border: 2px solid transparent;
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(14px, 2vw, 30px);
  background-clip: padding-box, padding-box, padding-box;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--line) 42%, transparent),
    0 0 0 4px rgba(255,255,255,.035),
    0 0 18px rgba(255,255,255,.42),
    0 0 34px var(--panel-glow),
    0 0 56px var(--accent-soft),
    inset 0 0 34px rgba(255,255,255,.035);
}
.draw-board::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent);
  box-shadow:
    0 0 10px rgba(255,255,255,.18),
    inset 0 0 12px rgba(255,255,255,.05),
    0 0 18px var(--accent-soft);
  pointer-events: none;
  clip-path: var(--clip);
}
.draw-board::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 16%, transparent 84%, rgba(255,255,255,.12)),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 22%);
  opacity: .55;
}

.draw-board-premium { aspect-ratio: 16 / 9; display: flex; flex-direction: column; gap: 10px; }
.draw-board-classic { max-width: 980px; display: flex; flex-direction: column; gap: 10px; }
.draw-board-simple { max-width: 1040px; display: flex; flex-direction: column; gap: 14px; }
.draw-board-grid { max-width: 1200px; display: flex; flex-direction: column; gap: 12px; }

.premium-header {
  display: grid;
  grid-template-columns: 1fr minmax(170px, 260px);
  gap: 14px;
  min-height: 104px;
}
.header-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.headline-row { display: grid; grid-template-columns: 1fr minmax(190px, 290px); gap: 12px; }
.classic-header, .grid-header {
  display: grid;
  grid-template-columns: 1fr 190px 1fr 170px;
  gap: 10px;
  align-items: stretch;
}
.simple-header {
  display: grid;
  grid-template-columns: 1fr 190px 190px;
  gap: 10px;
}
.simple-header .website-box { grid-column: 1 / -1; }

.date-box, .time-box, .website-box, .action-box, .section-title, .result-cell, .rank-label, .box-card {
  clip-path: var(--clip);
  position: relative;
  overflow: hidden;
}


.date-box, .time-box, .website-box, .action-box, .section-title {
  min-height: 48px;
  border: 1.6px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: calc(var(--radius) + 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 28%),
    linear-gradient(135deg, var(--metal-a), var(--metal-b) 18%, rgba(0,0,0,.08) 28%, rgba(0,0,0,.72) 55%),
    rgba(0,0,0,.72);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 0 22px rgba(255,255,255,.025),
    0 0 10px rgba(255,255,255,.12),
    0 0 18px var(--accent-soft);
  text-shadow: 2px 2px 0 rgba(33, 153, 255, .55), -1px -1px 0 rgba(255,0,64,.45), 0 0 12px rgba(255,255,255,.24);
  letter-spacing: .02em;
}
.date-box::before, .time-box::before, .website-box::before, .action-box::before, .section-title::before,
.rank-label::before, .result-cell::before, .box-card::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--radius) - 1px);
  border: 1px solid rgba(255,255,255,.14);
  pointer-events: none;
  opacity: .9;
}
.date-box::after, .time-box::after, .website-box::after, .action-box::after, .section-title::after,
.rank-label::after, .result-cell::after, .box-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 16%),
    linear-gradient(315deg, rgba(255,255,255,.10), transparent 18%);
  opacity: .45;
}

.date-box { font-size: clamp(24px, 3vw, 44px); gap: 12px; }
.live-word { color: var(--red); font-weight: 900; text-shadow: 0 0 16px rgba(255,23,69,.85); }
.dash { opacity: .85; }
.time-box { font-size: clamp(24px, 2.8vw, 42px); letter-spacing: .18em; }
.website-box { font-family: Arial, sans-serif; font-weight: 900; font-size: clamp(20px, 2.3vw, 34px); gap: 12px; letter-spacing: .01em; }
.globe { font-size: .85em; color: var(--accent-2); }
.action-box {
  color: var(--yellow);
  border-color: color-mix(in srgb, var(--yellow) 72%, white);
  font-size: clamp(40px, 6vw, 82px);
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255,224,42,.65), 3px 3px 0 rgba(160,117,0,.5);
}

.rank-grid { display: grid; overflow: hidden; border: 1.8px solid color-mix(in srgb, var(--line) 90%, transparent); border-radius: calc(var(--radius) + 1px); box-shadow: 0 0 14px rgba(255,255,255,.18), 0 0 22px var(--accent-soft), inset 0 0 0 1px rgba(255,255,255,.08); }
.premium-rank, .classic-rank, .simple-rank { grid-template-columns: minmax(190px, 36%) 1fr; }
.premium-rank { flex: 1 1 43%; min-height: 250px; }
.classic-rank { min-height: 250px; }
.simple-rank { flex: 1; min-height: 520px; }

.rank-label, .result-cell {
  min-height: 76px;
  border-right: 1.6px solid color-mix(in srgb, var(--line) 92%, transparent);
  border-bottom: 1.6px solid color-mix(in srgb, var(--line) 92%, transparent);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 24%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 18%, rgba(0,0,0,.06) 30%, rgba(0,0,0,.72) 55%),
    rgba(0,0,0,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-shadow: 3px 3px 0 rgba(0,147,255,.45), -2px -1px 0 rgba(255,0,54,.28), 0 0 13px rgba(255,255,255,.36);
}
.rank-grid > :nth-last-child(-n+2) { border-bottom: 0; }
.rank-grid > :nth-child(2n) { border-right: 0; }
.rank-label { font-size: clamp(48px, 6vw, 78px); font-weight: 900; letter-spacing: .02em; }
.result-cell { font-size: clamp(40px, 6vw, 74px); font-weight: 900; letter-spacing: .08em; }
.result-cell.major { font-size: clamp(54px, 7vw, 96px); }
.result-cell.mega { font-size: clamp(72px, 11vw, 150px); }

.section-title {
  min-height: 54px;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: .12em;
}
.keren-title { color: var(--white); }

.result-grid { display: grid; gap: 8px; }
.four-grid { grid-template-columns: repeat(4, 1fr); min-height: 64px; }
.eight-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(56px, 1fr)); flex: 0 1 150px; }
.result-grid .result-cell {
  border: 1.6px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: calc(var(--radius) + 1px);
  min-height: 58px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 20px rgba(255,255,255,.02),
    0 0 10px rgba(255,255,255,.12),
    0 0 16px var(--accent-soft);
}
.result-cell.mini { font-size: clamp(30px, 3.8vw, 50px); }
.result-cell.sub { font-size: clamp(24px, 3.1vw, 42px); letter-spacing: .06em; }
.result-cell.is-filled { border-color: color-mix(in srgb, var(--accent) 68%, white); box-shadow: 0 0 12px rgba(255,255,255,.16), 0 0 22px var(--accent-soft), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 20px rgba(255,255,255,.03); }
.result-cell.animating { box-shadow: 0 0 16px rgba(255,255,255,.22), 0 0 36px var(--accent), 0 0 48px var(--accent-soft), inset 0 0 30px var(--accent-soft); }
.result-cell.flash { animation: cellFlash .42s ease-in-out infinite alternate; }

.result-digits { display: inline-flex; align-items: center; justify-content: center; gap: .18em; white-space: nowrap; }
.result-digits.len-7, .result-digits.len-8, .result-digits.len-9, .result-digits.len-10, .result-digits.len-11, .result-digits.len-12 { gap: .08em; }
.result-digit { display: inline-block; min-width: .45em; transform-origin: 50% 70%; animation: digitDrop .26s cubic-bezier(.21, 1.18, .32, 1.04); }
.result-digit.pending { opacity: .75; filter: blur(.4px); }

.spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 7px solid rgba(255,255,255,.18);
  border-top-color: var(--line);
  display: inline-block;
  animation: spin .72s linear infinite;
  box-shadow: 0 0 10px rgba(255,255,255,.22);
}
.result-cell.sub .spinner, .result-cell.mini .spinner { width: 36px; height: 36px; border-width: 6px; }

.all-box-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.box-card {
  border: 1.6px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: calc(var(--radius) + 2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 24%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 18%, rgba(0,0,0,.08) 32%, rgba(0,0,0,.70) 58%),
    rgba(0,0,0,.7);
  padding: 8px;
  min-height: 118px;
  box-shadow: 0 0 10px rgba(255,255,255,.12), 0 0 18px var(--accent-soft), inset 0 0 0 1px rgba(255,255,255,.08);
}
.box-card.span-2 { grid-column: span 2; }
.box-card-label { font-size: clamp(18px, 2.4vw, 34px); margin-bottom: 6px; text-align: center; color: var(--accent-2); letter-spacing: .05em; }
.box-card .result-cell { min-height: 62px; border-radius: calc(var(--radius) * .8); border: 1px solid var(--line-soft); }

.watermark {
  position: fixed;
  right: 18px;
  bottom: 12px;
  font: 700 14px Arial, sans-serif;
  letter-spacing: .22em;
  color: rgba(255,255,255,.32);
}
.watermark:empty { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes digitDrop { from { transform: translateY(-18px) scale(1.25); opacity: 0; filter: blur(2px); } to { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); } }
@keyframes cellFlash { from { border-color: var(--line); } to { border-color: var(--accent-2); } }

/* Admin */
.admin-body {
  background: linear-gradient(135deg, #eef4ff, #fdf7ff 52%, #f7fbff);
  color: var(--admin-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  min-height: 100vh;
}
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card, .panel, .admin-header {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .10);
}
.login-card { width: min(100%, 430px); padding: 30px; }
.login-eyebrow { color: #2563eb; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.login-card h1, .admin-header h1, .panel h2 { margin: 8px 0 12px; line-height: 1.12; }
.login-card h1 { font-size: 34px; }
.login-card label, .panel label { display: block; margin: 13px 0 7px; font-size: 13px; font-weight: 800; color: #374151; }
input, select, textarea {
  width: 100%;
  border: 1px solid #d7dce7;
  border-radius: 14px;
  background: #fff;
  padding: 12px 14px;
  color: #111827;
  outline: none;
  transition: border .18s, box-shadow .18s;
}
textarea { resize: vertical; min-height: 92px; }
input:focus, select:focus, textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,.13); }
.big-input { font-size: 24px; font-weight: 900; letter-spacing: .08em; }
.alert { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; padding: 10px 12px; border-radius: 12px; margin: 12px 0; }
.muted, .help-text { color: var(--admin-muted); font-size: 13px; line-height: 1.5; }
.help-text { margin-top: 8px; }

.admin-shell { width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 38px; }
.admin-header { padding: 22px; display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 18px; }
.admin-header p { margin: 0; color: var(--admin-muted); }
.header-actions, .button-row, .inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.header-actions { justify-content: flex-end; }
.inline { flex-wrap: nowrap; }
.inline input { flex: 1; }

.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.panel { padding: 22px; }
.panel.span-2 { grid-column: 1 / -1; }
.panel h2 { font-size: 22px; }
.subheading, .mini-heading { margin: 18px 0 10px; font-size: 15px; color: #111827; }
.selected-target { background: #f1f5ff; border: 1px solid #dbeafe; padding: 10px 12px; border-radius: 14px; margin: 10px 0 14px; }
.target-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.main-targets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.target-btn {
  border: 1px solid #dde5f1;
  background: #f8fafc;
  color: #111827;
  border-radius: 14px;
  min-height: 44px;
  padding: 8px;
  cursor: pointer;
  font-weight: 900;
}
.target-btn.active { background: #111827; border-color: #111827; color: #fff; box-shadow: 0 12px 30px rgba(17,24,39,.18); }

.primary-btn, .ghost-btn, .danger-btn {
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.primary-btn { background: linear-gradient(135deg, #1d4ed8, #7c3aed); color: #fff; box-shadow: 0 14px 30px rgba(37,99,235,.24); }
.ghost-btn { background: #eef2ff; color: #1f2937; }
.danger-btn { background: #fee2e2; color: #991b1b; }
.danger-link { color: #b91c1c; font-weight: 900; text-decoration: none; }

.settings-two-col, .settings-three-col { display: grid; gap: 14px; }
.settings-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.check-row { display: inline-flex !important; align-items: center; gap: 10px; margin-top: 12px !important; }
.check-row input { width: auto; }
.label-editor-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.label-editor-grid label { margin: 0; }
.label-editor-grid span { display: block; font-size: 11px; color: #6b7280; margin-bottom: 5px; font-weight: 900; }
.label-editor-grid input { padding: 10px; border-radius: 12px; }
.status-box { background: #0f172a; color: #e0f2fe; border-radius: 16px; padding: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.display-link-box { margin-top: 12px; padding: 12px; border-radius: 14px; background: #f8fafc; border: 1px solid #e5e7eb; overflow-wrap: anywhere; }
.display-link-box code { color: #1d4ed8; font-weight: 800; }
.theme-preview-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; }
.theme-chip { border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 12px; display: flex; gap: 8px; align-items: center; cursor: pointer; font-weight: 900; }
.theme-chip span { width: 18px; height: 18px; border-radius: 50%; display: inline-block; background: #2fa8ff; box-shadow: 0 0 14px #2fa8ff; }
.theme-chip[data-theme-pick="energy-red"] span { background: #ff3b36; box-shadow: 0 0 14px #ff3b36; }
.theme-chip[data-theme-pick="premium-gold"] span { background: #ffcf42; box-shadow: 0 0 14px #ffcf42; }
.theme-chip[data-theme-pick="royal-purple"] span { background: #d25cff; box-shadow: 0 0 14px #d25cff; }
.theme-chip[data-theme-pick="emerald"] span { background: #2fffc1; box-shadow: 0 0 14px #2fffc1; }
.theme-chip[data-theme-pick="ice"] span { background: #ffffff; box-shadow: 0 0 14px #c8f6ff; border: 1px solid #dbeafe; }
.theme-chip.active { border-color: #111827; box-shadow: 0 0 0 3px rgba(17,24,39,.08); }

@media (max-width: 920px) {
  .premium-header, .headline-row, .classic-header, .grid-header, .simple-header { grid-template-columns: 1fr; }
  .draw-board-premium { aspect-ratio: auto; max-height: 96vh; overflow: auto; }
  .premium-rank, .classic-rank, .simple-rank { grid-template-columns: minmax(110px, 34%) 1fr; }
  .four-grid, .eight-grid, .all-box-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid, .settings-two-col, .settings-three-col, .label-editor-grid, .theme-preview-row { grid-template-columns: 1fr; }
  .admin-header { flex-direction: column; align-items: flex-start; }
}

@media (max-height: 760px) and (min-width: 921px) {
  .draw-board-premium { gap: 7px; padding: 14px; }
  .premium-header { min-height: 78px; }
  .date-box, .time-box, .website-box, .section-title { min-height: 36px; }
  .section-title { font-size: clamp(24px, 3vw, 38px); }
  .rank-label { font-size: clamp(36px, 5vw, 64px); }
  .result-cell.major { font-size: clamp(42px, 6vw, 78px); }
  .eight-grid { flex-basis: 118px; }
}


/* ===========================
   v3.3 LIVE BROADCAST UPGRADE
   Goal: stronger live-screen presence, richer border system, and more premium broadcast feel.
=========================== */

.display-body {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.08), transparent 22%),
    radial-gradient(circle at 82% 12%, var(--accent-soft), transparent 28%),
    radial-gradient(circle at 50% 115%, rgba(255,0,64,.18), transparent 36%),
    linear-gradient(120deg, #020202 0%, #080808 45%, #000 100%);
}
.display-body::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 42%, rgba(255,255,255,.05) 48%, transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 42px);
  opacity: .42;
  transform: rotate(-4deg);
  animation: liveBgSweep 12s linear infinite;
}
.display-body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 54%, rgba(0,0,0,.52) 100%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 18%, rgba(255,255,255,.025) 82%, transparent);
  opacity: .92;
}

.stage {
  position: relative;
  padding: clamp(12px, 1.65vw, 24px);
}
.stage::before {
  content: "LIVE DRAW";
  position: fixed;
  top: 3.2vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: Arial, sans-serif;
  font-size: clamp(10px, 1vw, 15px);
  letter-spacing: .46em;
  color: rgba(255,255,255,.20);
  text-shadow: 0 0 14px var(--accent-soft);
  pointer-events: none;
}

.draw-board {
  width: min(96.5vw, 1440px);
  border: 0;
  border-radius: 26px;
  padding: clamp(18px, 2.1vw, 34px);
  background:
    linear-gradient(#050505, #050505) padding-box,
    linear-gradient(135deg,
      rgba(255,255,255,.92),
      var(--accent-2) 16%,
      rgba(255,255,255,.30) 31%,
      var(--accent) 50%,
      rgba(255,255,255,.32) 69%,
      var(--accent-2) 84%,
      rgba(255,255,255,.92)
    ) border-box;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.10),
    0 0 26px rgba(255,255,255,.28),
    0 0 44px var(--panel-glow),
    0 0 86px var(--accent-soft),
    inset 0 0 54px rgba(255,255,255,.045);
}
.draw-board::before {
  inset: 10px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.75),
    0 0 18px rgba(255,255,255,.18),
    0 0 30px var(--accent-soft),
    inset 0 0 28px rgba(255,255,255,.07);
}
.draw-board::after {
  background:
    linear-gradient(118deg, rgba(255,255,255,.19), transparent 14%, transparent 70%, rgba(255,255,255,.08)),
    radial-gradient(circle at 22% 0%, rgba(255,255,255,.10), transparent 28%),
    radial-gradient(circle at 88% 100%, var(--accent-soft), transparent 28%);
  mix-blend-mode: screen;
  opacity: .65;
}

.draw-board-premium { gap: 12px; }
.premium-header {
  grid-template-columns: 1fr minmax(220px, 315px);
  min-height: 118px;
  gap: 16px;
}
.header-stack { gap: 12px; }
.headline-row {
  grid-template-columns: 1fr minmax(230px, 330px);
  gap: 14px;
}

.date-box,
.time-box,
.website-box,
.action-box,
.section-title,
.rank-grid,
.result-grid .result-cell,
.box-card {
  border-color: color-mix(in srgb, var(--line) 74%, transparent);
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.035) 18%, rgba(0,0,0,.86) 60%),
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,0) 23%, rgba(255,255,255,.045) 70%, transparent),
    rgba(0,0,0,.86);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 10px 26px rgba(255,255,255,.05),
    0 0 10px rgba(255,255,255,.12),
    0 0 24px var(--accent-soft);
}
.date-box,
.time-box,
.website-box,
.action-box { min-height: 56px; }
.date-box {
  justify-content: flex-start;
  padding: 0 clamp(18px, 2.4vw, 34px);
  font-size: clamp(28px, 3.35vw, 52px);
}
.live-word {
  color: #ff263f;
  text-shadow:
    0 0 7px rgba(255,38,63,.94),
    0 0 18px rgba(255,38,63,.66),
    2px 2px 0 rgba(0,188,255,.34);
}
.time-box {
  font-size: clamp(28px, 3.3vw, 52px);
  font-family: LiveCondensed, Impact, "Arial Narrow", Arial, sans-serif;
  letter-spacing: .14em;
}
.website-box {
  font-size: clamp(24px, 2.6vw, 42px);
  color: #fff;
}
.globe {
  width: 1.08em;
  height: 1.08em;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--accent-2);
  border-radius: 50%;
  color: transparent;
  box-shadow: 0 0 14px var(--accent);
}
.globe::before {
  content: "";
  width: .46em;
  height: .46em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.action-box {
  border-color: color-mix(in srgb, var(--yellow) 72%, white);
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,.22), transparent 22%),
    linear-gradient(180deg, rgba(255,224,42,.14), rgba(0,0,0,.90) 58%),
    #050505;
  font-size: clamp(58px, 7vw, 112px);
  letter-spacing: .03em;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 12px rgba(255,224,42,.38),
    0 0 32px rgba(255,224,42,.28);
}

.rank-grid {
  border: 1.8px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 18px;
  background: rgba(0,0,0,.66);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 16px rgba(255,255,255,.13),
    0 0 32px var(--accent-soft);
}
.rank-label,
.result-cell {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 20%, rgba(0,0,0,.82) 62%),
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 28%, rgba(255,255,255,.035) 72%),
    rgba(0,0,0,.82);
}
.rank-label {
  font-size: clamp(62px, 6.8vw, 106px);
  color: #fff;
}
.result-cell.major { font-size: clamp(68px, 7.9vw, 124px); }
.result-cell::before,
.rank-label::before,
.date-box::before,
.time-box::before,
.website-box::before,
.action-box::before,
.section-title::before,
.box-card::before {
  inset: 5px;
  border-color: rgba(255,255,255,.18);
  box-shadow:
    inset 0 0 16px rgba(255,255,255,.055),
    0 0 10px rgba(255,255,255,.08);
}

.section-title {
  min-height: 62px;
  border-radius: 16px;
  font-size: clamp(38px, 4.45vw, 66px);
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent),
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(0,0,0,.86) 62%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 0 14px rgba(255,255,255,.16),
    0 0 26px var(--accent-soft);
}
.four-grid { min-height: 76px; gap: 10px; }
.eight-grid {
  gap: 10px;
  flex: 0 1 178px;
  grid-template-rows: repeat(2, minmax(72px, 1fr));
}
.result-grid .result-cell {
  min-height: 70px;
  border-radius: 15px;
}
.result-cell.mini { font-size: clamp(34px, 4.2vw, 60px); }
.result-cell.sub { font-size: clamp(28px, 3.5vw, 52px); }
.result-cell.is-filled {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent-2) 78%, white);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 32px rgba(255,255,255,.035),
    0 0 16px rgba(255,255,255,.20),
    0 0 34px var(--accent-soft);
}
.result-cell.animating { animation: liveBoxPulse .72s ease-in-out infinite alternate; }
.result-digits {
  text-shadow:
    0 0 10px rgba(255,255,255,.36),
    3px 3px 0 rgba(0,178,255,.44),
    -2px -2px 0 rgba(255,0,64,.38);
}
.spinner {
  width: 48px;
  height: 48px;
  border-width: 7px;
  border-color: rgba(255,255,255,.14);
  border-top-color: var(--accent-2);
  border-right-color: rgba(255,255,255,.70);
  box-shadow:
    0 0 14px rgba(255,255,255,.20),
    0 0 18px var(--accent-soft);
}
.result-cell.sub .spinner,
.result-cell.mini .spinner {
  width: 42px;
  height: 42px;
  border-width: 6px;
}

.display-body[data-theme="neon-blue"] .draw-board { --panel-glow: rgba(47,168,255,.36); }
.display-body[data-theme="energy-red"] .draw-board { --panel-glow: rgba(255,59,54,.38); }
.display-body[data-theme="premium-gold"] .draw-board { --panel-glow: rgba(255,207,66,.38); }
.display-body[data-theme="royal-purple"] .draw-board { --panel-glow: rgba(210,92,255,.36); }
.display-body[data-theme="emerald"] .draw-board { --panel-glow: rgba(47,255,193,.34); }

@keyframes liveBgSweep {
  from { transform: translateX(-3%) rotate(-4deg); }
  to { transform: translateX(3%) rotate(-4deg); }
}
@keyframes liveBoxPulse {
  from {
    border-color: color-mix(in srgb, var(--accent) 72%, white);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.16),
      0 0 18px rgba(255,255,255,.16),
      0 0 30px var(--accent-soft);
  }
  to {
    border-color: color-mix(in srgb, var(--accent-2) 88%, white);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.24),
      0 0 22px rgba(255,255,255,.22),
      0 0 46px var(--accent);
  }
}

@media (max-height: 760px) and (min-width: 921px) {
  .date-box, .time-box, .website-box, .action-box { min-height: 46px; }
  .section-title { min-height: 46px; }
  .four-grid { min-height: 56px; }
  .eight-grid { flex-basis: 140px; grid-template-rows: repeat(2, minmax(54px, 1fr)); }
  .result-grid .result-cell { min-height: 54px; }
}


/* ===========================
   v3.4 EIGHT DIGIT OPTIMIZATION
=========================== */
.result-cell,
.result-digit,
.time-box {
  font-variant-numeric: tabular-nums;
}

.result-cell .result-digits {
  width: 100%;
}

.result-cell.major .result-digits,
.result-cell.mega .result-digits,
.result-cell.mini .result-digits,
.result-cell.sub .result-digits {
  justify-content: center;
}

.result-cell.major .result-digits.len-8,
.result-cell.mega .result-digits.len-8 {
  gap: .045em;
  transform: scale(.90);
}
.result-cell.major .result-digits.len-7,
.result-cell.mega .result-digits.len-7 {
  gap: .05em;
  transform: scale(.94);
}
.result-cell.major .result-digits.len-9,
.result-cell.mega .result-digits.len-9,
.result-cell.major .result-digits.len-10,
.result-cell.mega .result-digits.len-10 {
  gap: .035em;
  transform: scale(.84);
}

.result-cell.mini .result-digits.len-8,
.result-cell.sub .result-digits.len-8 {
  gap: .035em;
  transform: scale(.94);
}
.result-cell.mini .result-digits.len-7,
.result-cell.sub .result-digits.len-7 {
  gap: .04em;
  transform: scale(.97);
}
.result-cell.mini .result-digits.len-9,
.result-cell.sub .result-digits.len-9,
.result-cell.mini .result-digits.len-10,
.result-cell.sub .result-digits.len-10 {
  gap: .028em;
  transform: scale(.88);
}

.result-cell.major[data-len="8"],
.result-cell.major[data-len="7"],
.result-cell.major[data-len="9"],
.result-cell.mega[data-len="8"],
.result-cell.mega[data-len="7"],
.result-cell.mega[data-len="9"] {
  letter-spacing: .03em;
}

.result-cell.mini[data-len="8"],
.result-cell.sub[data-len="8"],
.result-cell.mini[data-len="9"],
.result-cell.sub[data-len="9"] {
  letter-spacing: .02em;
}

.premium-rank,
.classic-rank,
.simple-rank {
  grid-template-columns: minmax(165px, 32%) 1fr;
}

@media (max-width: 920px) {
  .premium-rank, .classic-rank, .simple-rank {
    grid-template-columns: minmax(105px, 30%) 1fr;
  }
  .result-cell.major .result-digits.len-8,
  .result-cell.mega .result-digits.len-8,
  .result-cell.mini .result-digits.len-8,
  .result-cell.sub .result-digits.len-8 {
    transform: scale(.86);
  }
}


/* ===========================
   v3.5 8 DIGIT FULLSCREEN MODE
=========================== */

.draw-board-eight {
  width: min(97vw, 1520px);
  height: min(94vh, 900px);
  max-height: 94vh;
  display: grid;
  grid-template-rows: minmax(110px, 15%) minmax(210px, 32%) minmax(128px, 18%) 1fr;
  gap: clamp(10px, 1.2vw, 18px);
  padding: clamp(18px, 2vw, 32px);
}

.eight-header {
  display: grid;
  grid-template-columns: 1fr minmax(230px, 310px) minmax(230px, 330px);
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}
.eight-date,
.eight-time,
.eight-action,
.eight-site,
.eight-section-title,
.eight-rank-label,
.eight-mini-label {
  position: relative;
  overflow: hidden;
  border: 1.8px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.035) 18%, rgba(0,0,0,.88) 60%),
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 24%, rgba(255,255,255,.045) 74%),
    rgba(0,0,0,.88);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    0 0 12px rgba(255,255,255,.14),
    0 0 26px var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.eight-date::before,
.eight-time::before,
.eight-action::before,
.eight-site::before,
.eight-section-title::before,
.eight-rank-label::before,
.eight-mini-label::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.16);
  pointer-events: none;
}
.eight-date {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  justify-content: flex-start;
  gap: .25em;
  padding: 0 clamp(18px, 2.4vw, 34px);
  font-size: clamp(32px, 3.4vw, 56px);
  font-weight: 900;
}
.eight-time {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  font-size: clamp(32px, 3.5vw, 58px);
  font-weight: 900;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.eight-action {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  color: var(--yellow);
  border-color: color-mix(in srgb, var(--yellow) 74%, white);
  font-size: clamp(62px, 7.4vw, 124px);
  font-weight: 900;
  text-shadow: 0 0 16px rgba(255,224,42,.66), 4px 4px 0 rgba(153,108,0,.45);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 18px rgba(255,224,42,.36),
    0 0 40px rgba(255,224,42,.26);
}
.eight-site {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  gap: 16px;
  font-family: Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 3vw, 52px);
}

.eight-hero-grid {
  display: grid;
  grid-template-columns: minmax(185px, 23%) 1fr;
  gap: 12px;
}
.eight-rank-label {
  color: #fff;
  font-size: clamp(80px, 9.5vw, 168px);
  font-weight: 900;
  text-shadow: 4px 4px 0 rgba(0,178,255,.40), -2px -2px 0 rgba(255,0,64,.34), 0 0 18px rgba(255,255,255,.36);
}
.eight-number {
  border-radius: 20px !important;
  min-height: 100%;
  font-size: clamp(92px, 11.4vw, 198px) !important;
  letter-spacing: .03em;
}

.eight-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.eight-mini-row {
  display: grid;
  grid-template-columns: minmax(125px, 29%) 1fr;
  gap: 10px;
}
.eight-mini-label {
  font-size: clamp(46px, 5.2vw, 88px);
  font-weight: 900;
}
.eight-mini-cell {
  min-height: 100%;
  font-size: clamp(48px, 5.9vw, 96px) !important;
  letter-spacing: .025em;
}

.eight-bottom {
  display: grid;
  grid-template-columns: minmax(340px, 34%) 1fr;
  gap: 12px;
  min-height: 0;
}
.eight-section {
  display: grid;
  grid-template-rows: minmax(54px, 18%) 1fr;
  gap: 10px;
  min-height: 0;
}
.eight-section-title {
  font-size: clamp(34px, 4.1vw, 68px);
  font-weight: 900;
  letter-spacing: .13em;
}
.eight-slot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-height: 0;
}
.eight-keren-slots {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(68px, 1fr));
}
.eight-slot {
  min-height: 68px;
  border-radius: 16px !important;
  font-size: clamp(34px, 3.6vw, 62px) !important;
  letter-spacing: .02em;
}
.eight-slot .result-digits.len-8,
.eight-mini-cell .result-digits.len-8,
.mega-eight .result-digits.len-8 {
  gap: .025em;
  transform: scale(.96);
}
.mega-eight .spinner {
  width: 76px;
  height: 76px;
  border-width: 10px;
}
.eight-mini-cell .spinner {
  width: 58px;
  height: 58px;
  border-width: 8px;
}

@media (max-width: 1100px), (max-height: 760px) {
  .draw-board-eight {
    height: auto;
    max-height: 96vh;
    overflow: auto;
    grid-template-rows: auto auto auto auto;
  }
  .eight-header {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(52px, auto));
  }
  .eight-date,
  .eight-time,
  .eight-action,
  .eight-site {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .eight-hero-grid,
  .eight-secondary,
  .eight-bottom {
    grid-template-columns: 1fr;
  }
  .eight-mini-row {
    grid-template-columns: minmax(105px, 28%) 1fr;
  }
  .eight-keren-slots {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ===========================
   v3.6 AIRPORT FLAP EFFECT
=========================== */
.airport-board {
  perspective: 900px;
  gap: .06em;
}

.result-digit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: .72em;
  height: 1.1em;
  padding: 0 .04em;
  border-radius: .12em;
  border: 1px solid rgba(255,255,255,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 46%, rgba(0,0,0,.92) 47%, rgba(0,0,0,.98) 100%),
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 34%),
    #060606;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -10px 18px rgba(0,0,0,.55),
    0 0 10px rgba(255,255,255,.08),
    0 0 18px var(--accent-soft);
  transform-style: preserve-3d;
  transform-origin: 50% 48%;
  overflow: hidden;
}
.result-digit::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 49%;
  height: 1px;
  background: rgba(255,255,255,.22);
  box-shadow: 0 0 10px rgba(255,255,255,.18);
  z-index: 2;
}
.result-digit::after {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: .10em;
  border: 1px solid rgba(255,255,255,.09);
  pointer-events: none;
}
.digit-glyph {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 1;
  text-shadow:
    0 0 8px rgba(255,255,255,.28),
    3px 3px 0 rgba(0,178,255,.34),
    -1px -1px 0 rgba(255,0,64,.24);
}
.result-digit.flipping {
  animation: flapShuffle .12s linear infinite;
}
.result-digit.settled {
  border-color: color-mix(in srgb, var(--accent-2) 78%, white);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -10px 18px rgba(0,0,0,.50),
    0 0 12px rgba(255,255,255,.10),
    0 0 22px var(--accent-soft);
}
.result-cell.airport-cell,
.result-cell.is-filled {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 18%, rgba(0,0,0,.88) 54%),
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 22%, rgba(255,255,255,.03) 74%),
    rgba(0,0,0,.90);
}
.result-cell.major .result-digit,
.result-cell.mega .result-digit,
.eight-number .result-digit {
  min-width: .78em;
  height: 1.04em;
}
.result-cell.sub .result-digit,
.result-cell.mini .result-digit,
.eight-slot .result-digit,
.eight-mini-cell .result-digit {
  min-width: .68em;
  height: 1.06em;
}
.result-cell.major .result-digits.len-8,
.result-cell.mega .result-digits.len-8,
.eight-number .result-digits.len-8 {
  gap: .035em;
  transform: scale(.92);
}
.result-cell.sub .result-digits.len-8,
.result-cell.mini .result-digits.len-8,
.eight-slot .result-digits.len-8,
.eight-mini-cell .result-digits.len-8 {
  gap: .03em;
  transform: scale(.95);
}
.display-body[data-theme="premium-gold"] .result-digit,
.display-body[data-theme="premium-gold"] .action-box,
.display-body[data-theme="premium-gold"] .eight-action {
  border-color: rgba(255,231,153,.34);
}
@keyframes flapShuffle {
  0% { transform: rotateX(0deg); filter: brightness(1); }
  50% { transform: rotateX(-76deg); filter: brightness(1.28); }
  100% { transform: rotateX(0deg); filter: brightness(.96); }
}


/* ===========================
   v3.7 SUPER DRUM ROLL MODE
=========================== */
.drumroll-cell {
  animation: drumrollBoardPulse .36s ease-in-out infinite alternate;
}
.drumroll-cell::after {
  opacity: .68;
}
.result-digit.current {
  border-color: color-mix(in srgb, var(--yellow) 76%, white);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -10px 18px rgba(0,0,0,.42),
    0 0 14px rgba(255,255,255,.14),
    0 0 26px rgba(255,224,42,.34);
}
.result-digit.current .digit-glyph {
  text-shadow:
    0 0 12px rgba(255,255,255,.40),
    0 0 22px rgba(255,224,42,.40),
    3px 3px 0 rgba(0,178,255,.34);
}
@keyframes drumrollBoardPulse {
  from {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.16),
      inset 0 0 30px rgba(255,255,255,.03),
      0 0 16px rgba(255,255,255,.14),
      0 0 24px var(--accent-soft);
    transform: translateY(0px);
  }
  to {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.20),
      inset 0 0 34px rgba(255,255,255,.04),
      0 0 18px rgba(255,255,255,.20),
      0 0 36px var(--accent),
      0 0 52px var(--accent-soft);
    transform: translateY(-1px);
  }
}

/* ===========================
   v3.8 FONT + BORDER REDESIGN
   Cleaner broadcast typography, stronger neon frame hierarchy, and safer fallbacks for OBS/browser sources.
=========================== */
:root {
  --display-font: "Bahnschrift Condensed", "Aptos Display", "Roboto Condensed", "Arial Narrow", Impact, system-ui, sans-serif;
  --number-font: "Arial Black", "Bahnschrift", "Aptos Display", "Roboto Condensed", Impact, system-ui, sans-serif;
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --frame-strong: rgba(255,255,255,.94);
  --frame-mid: rgba(255,255,255,.46);
  --frame-soft: rgba(255,255,255,.17);
  --frame-shadow: rgba(0,0,0,.72);
}

.display-body {
  font-family: var(--display-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.date-box,
.time-box,
.action-box,
.section-title,
.rank-label,
.result-cell,
.eight-date,
.eight-time,
.eight-action,
.eight-section-title,
.eight-rank-label,
.eight-mini-label {
  font-family: var(--display-font);
  font-weight: 900;
  letter-spacing: .04em;
}

.result-cell,
.result-digit,
.digit-glyph,
.eight-number,
.eight-mini-cell,
.eight-slot {
  font-family: var(--number-font);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.website-box,
.eight-site,
.watermark {
  font-family: var(--ui-font);
  letter-spacing: .04em;
}

.draw-board {
  border: 1px solid var(--frame-mid);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 0 6px rgba(255,255,255,.035),
    0 20px 70px rgba(0,0,0,.82),
    0 0 24px rgba(255,255,255,.24),
    0 0 48px var(--panel-glow),
    0 0 84px var(--accent-soft),
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 0 46px rgba(255,255,255,.04);
}

.draw-board::before {
  inset: 9px;
  border: 0;
  padding: 2px;
  border-radius: calc(var(--radius) + 5px);
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.86) 0%,
      var(--accent-2) 18%,
      rgba(255,255,255,.18) 34%,
      var(--accent) 54%,
      rgba(255,255,255,.14) 72%,
      rgba(255,255,255,.72) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .94;
}

.date-box,
.time-box,
.website-box,
.action-box,
.section-title,
.rank-label,
.result-cell,
.box-card,
.eight-date,
.eight-time,
.eight-action,
.eight-site,
.eight-section-title,
.eight-rank-label,
.eight-mini-label {
  border-width: 2px;
  border-color: var(--frame-mid);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -18px 32px rgba(0,0,0,.34),
    0 0 12px rgba(255,255,255,.14),
    0 0 24px var(--accent-soft);
}

.rank-grid,
.result-grid .result-cell,
.all-box-grid .box-card {
  border-color: var(--frame-mid);
}

.rank-label::before,
.result-cell::before,
.date-box::before,
.time-box::before,
.website-box::before,
.action-box::before,
.section-title::before,
.box-card::before,
.eight-date::before,
.eight-time::before,
.eight-action::before,
.eight-site::before,
.eight-section-title::before,
.eight-rank-label::before,
.eight-mini-label::before {
  border-color: rgba(255,255,255,.22);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.055),
    0 0 12px rgba(255,255,255,.11),
    0 0 22px var(--accent-soft);
}

.result-cell.is-filled,
.result-cell.airport-cell {
  border-color: color-mix(in srgb, var(--accent-2) 78%, white);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.20),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -20px 38px rgba(0,0,0,.36),
    0 0 18px rgba(255,255,255,.22),
    0 0 38px var(--accent-soft),
    0 0 62px color-mix(in srgb, var(--accent) 36%, transparent);
}

.result-digit {
  border-width: 2px;
  border-color: rgba(255,255,255,.26);
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -12px 20px rgba(0,0,0,.56),
    0 0 10px rgba(255,255,255,.10),
    0 0 22px var(--accent-soft);
}

.digit-glyph {
  transform: translateY(-.015em);
  text-shadow:
    0 0 10px rgba(255,255,255,.34),
    2px 2px 0 rgba(0,0,0,.46),
    0 0 20px var(--accent-soft);
}

.live-word,
.action-box,
.eight-action {
  letter-spacing: .055em;
}

.admin-body {
  font-family: var(--ui-font);
  background:
    radial-gradient(circle at 8% 0%, rgba(37,99,235,.12), transparent 30%),
    radial-gradient(circle at 100% 18%, rgba(124,58,237,.12), transparent 28%),
    linear-gradient(135deg, #f5f8ff, #fbfbff 52%, #f8fbff);
}

.login-card,
.panel,
.admin-header {
  border: 1px solid rgba(15,23,42,.11);
  box-shadow:
    0 22px 54px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.72);
}

input,
select,
textarea,
.target-btn,
.primary-btn,
.ghost-btn,
.danger-btn,
.theme-chip {
  border-radius: 16px;
}

@supports not (color: color-mix(in srgb, white 50%, black)) {
  .draw-board,
  .date-box,
  .time-box,
  .website-box,
  .action-box,
  .section-title,
  .rank-label,
  .result-cell,
  .box-card,
  .eight-date,
  .eight-time,
  .eight-action,
  .eight-site,
  .eight-section-title,
  .eight-rank-label,
  .eight-mini-label {
    border-color: rgba(255,255,255,.62);
  }

  .result-cell.is-filled,
  .result-cell.airport-cell,
  .result-digit.settled {
    border-color: rgba(255,255,255,.88);
  }
}


/* ===========================
   v3.9 CINEMATIC REEL ANIMATION
   Smoother OBS-safe number reveal: reel spin, controlled deceleration, glow lock, and reduced layout jitter.
=========================== */
.cinematic-board {
  perspective: 1200px;
  transform-style: preserve-3d;
  will-change: transform, filter;
}

.result-cell.cinematic-cell {
  overflow: hidden;
  isolation: isolate;
}

.result-cell.cinematic-cell::before {
  opacity: .88;
  animation: cinematicFrameSweep 1.8s ease-in-out infinite alternate;
}

.result-cell.cinematic-cell::after {
  opacity: .62;
  filter: saturate(1.18) brightness(1.08);
}

.result-digit {
  backface-visibility: hidden;
  will-change: transform, filter, box-shadow;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.result-digit.rolling,
.result-digit.pre-roll {
  border-color: color-mix(in srgb, var(--accent) 74%, white);
  animation: cinematicReelSpin .18s linear infinite;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -14px 22px rgba(0,0,0,.58),
    0 0 14px rgba(255,255,255,.16),
    0 0 28px var(--accent-soft),
    0 0 38px color-mix(in srgb, var(--accent) 26%, transparent);
}

.result-digit.pre-roll {
  animation-duration: .105s;
  filter: brightness(1.22) saturate(1.14);
}

.result-digit.settling {
  z-index: 4;
  border-color: color-mix(in srgb, var(--accent-2) 86%, white);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -12px 20px rgba(0,0,0,.50),
    0 0 18px rgba(255,255,255,.22),
    0 0 34px var(--accent),
    0 0 54px var(--accent-soft);
}

.result-digit.settled {
  animation: cinematicDigitLock .38s cubic-bezier(.18,.9,.2,1) both;
}

.result-digit.current {
  transform: translateZ(18px) scale(1.035);
}

.result-digit.current::after {
  border-color: rgba(255,255,255,.28);
  box-shadow: inset 0 0 18px rgba(255,255,255,.10);
}

.result-digit.rolling .digit-glyph,
.result-digit.pre-roll .digit-glyph {
  animation: cinematicGlyphBlur .18s linear infinite;
  text-shadow:
    0 0 8px rgba(255,255,255,.42),
    0 0 18px var(--accent-soft),
    2px 2px 0 rgba(0,0,0,.38);
}

.result-digit.settling .digit-glyph,
.result-digit.settled .digit-glyph {
  text-shadow:
    0 0 12px rgba(255,255,255,.48),
    0 0 24px var(--accent-soft),
    2px 2px 0 rgba(0,0,0,.54);
}

.drumroll-cell {
  animation: cinematicBoardPulse .54s ease-in-out infinite alternate;
}

@keyframes cinematicReelSpin {
  0% { transform: translateY(-.05em) rotateX(0deg) scale(1); filter: brightness(1); }
  45% { transform: translateY(.02em) rotateX(-64deg) scale(1.025); filter: brightness(1.30); }
  100% { transform: translateY(.04em) rotateX(-178deg) scale(1); filter: brightness(1.04); }
}

@keyframes cinematicGlyphBlur {
  0% { transform: translateY(-.10em); opacity: .70; filter: blur(.9px); }
  50% { transform: translateY(.08em); opacity: 1; filter: blur(.35px); }
  100% { transform: translateY(-.08em); opacity: .76; filter: blur(.85px); }
}

@keyframes cinematicDigitLock {
  0% { filter: brightness(1.45); }
  62% { filter: brightness(1.18); }
  100% { filter: brightness(1); }
}

@keyframes cinematicFrameSweep {
  from { filter: brightness(1) saturate(1); }
  to { filter: brightness(1.18) saturate(1.16); }
}

@keyframes cinematicBoardPulse {
  from {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.18),
      inset 0 0 34px rgba(255,255,255,.035),
      0 0 18px rgba(255,255,255,.16),
      0 0 34px var(--accent-soft);
    transform: translateY(0) scale(1);
  }
  to {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.25),
      inset 0 0 42px rgba(255,255,255,.055),
      0 0 24px rgba(255,255,255,.24),
      0 0 48px var(--accent),
      0 0 76px var(--accent-soft);
    transform: translateY(-1px) scale(1.006);
  }
}

/* ===========================
   v4.1 SAFE TWELVE ANIMATION PACK
   Scoped only to .result-cell during reveal so normal layout stays stable after animation.
=========================== */
.result-cell[class*="anim-mode-"] {
  transform-style: preserve-3d;
}

.result-cell[class*="anim-mode-"] .result-digit {
  transform-origin: 50% 52%;
}

.result-cell.anim-mode-cascade .result-digit.rolling,
.result-cell.anim-mode-cascade .result-digit.pre-roll {
  animation: safeCascadeWave .22s cubic-bezier(.3,.8,.3,1) infinite;
}

.result-cell.anim-mode-flip .result-digit.rolling,
.result-cell.anim-mode-flip .result-digit.pre-roll {
  animation: safeSplitFlip .18s linear infinite;
}

.result-cell.anim-mode-slot .result-digit.rolling,
.result-cell.anim-mode-slot .result-digit.pre-roll {
  animation: safeSlotDrop .13s linear infinite;
}

.result-cell.anim-mode-pulse .result-digit.rolling,
.result-cell.anim-mode-pulse .result-digit.pre-roll {
  animation: safePulsePop .26s ease-in-out infinite;
}

.result-cell.anim-mode-zoom .result-digit.rolling,
.result-cell.anim-mode-zoom .result-digit.pre-roll {
  animation: safeZoomBurst .21s cubic-bezier(.12,.82,.2,1) infinite;
}

.result-cell.anim-mode-glitch .result-digit.rolling,
.result-cell.anim-mode-glitch .result-digit.pre-roll {
  animation: safeGlitchShake .095s steps(2, end) infinite;
  text-shadow:
    -2px 0 rgba(255,255,255,.30),
    2px 0 var(--accent),
    0 0 22px var(--accent-soft);
}

.result-cell.anim-mode-matrix .result-digit.rolling,
.result-cell.anim-mode-matrix .result-digit.pre-roll {
  animation: safeMatrixRain .16s linear infinite;
}

.result-cell.anim-mode-strobe .result-digit.rolling,
.result-cell.anim-mode-strobe .result-digit.pre-roll {
  animation: safeStrobeFlash .105s steps(2, end) infinite;
}

.result-cell.anim-mode-shutter .result-digit.rolling,
.result-cell.anim-mode-shutter .result-digit.pre-roll {
  animation: safeShutterScan .18s ease-in-out infinite;
}

.result-cell.anim-mode-orbit .result-digit.rolling,
.result-cell.anim-mode-orbit .result-digit.pre-roll {
  animation: safeOrbitSpin .24s cubic-bezier(.26,.8,.18,1) infinite;
}

.result-cell.anim-mode-drumroll .result-digit.current,
.result-cell.anim-mode-slot .result-digit.current,
.result-cell.anim-mode-zoom .result-digit.current,
.result-cell.anim-mode-shutter .result-digit.current,
.result-cell.anim-mode-orbit .result-digit.current {
  z-index: 8;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -16px 24px rgba(0,0,0,.52),
    0 0 18px rgba(255,255,255,.22),
    0 0 46px var(--accent),
    0 0 78px var(--accent-soft);
}

.result-cell.anim-mode-cascade::before { animation: safeCellSweep 1.05s ease-in-out infinite alternate; }
.result-cell.anim-mode-glitch::after,
.result-cell.anim-mode-strobe::after { animation: safeHotScan .55s steps(3, end) infinite; }
.result-cell.anim-mode-matrix::before { animation: safeMatrixCell 1.2s linear infinite; }
.result-cell.anim-mode-orbit .cinematic-board { perspective: 1500px; }

@keyframes safeCascadeWave {
  0% { transform: translateY(-.08em) rotateX(-18deg) scale(1); filter: brightness(1); }
  50% { transform: translateY(.04em) rotateX(-82deg) scale(1.035); filter: brightness(1.34); }
  100% { transform: translateY(.08em) rotateX(-160deg) scale(1); filter: brightness(1.05); }
}

@keyframes safeSplitFlip {
  0% { transform: rotateX(0deg); filter: brightness(1); }
  48% { transform: rotateX(-92deg) scale(1.025); filter: brightness(1.42); }
  100% { transform: rotateX(-180deg); filter: brightness(1.04); }
}

@keyframes safeSlotDrop {
  0% { transform: translateY(-.30em) scaleY(1.20); filter: blur(.7px) brightness(1.12); }
  42% { transform: translateY(.08em) scaleY(.92); filter: blur(.2px) brightness(1.36); }
  100% { transform: translateY(.30em) scaleY(1.08); filter: blur(.65px) brightness(1.04); }
}

@keyframes safePulsePop {
  0% { transform: scale(.88); filter: brightness(.85); }
  48% { transform: scale(1.14); filter: brightness(1.42); }
  100% { transform: scale(.94); filter: brightness(1.02); }
}

@keyframes safeZoomBurst {
  0% { transform: translateZ(-64px) scale(.52) rotateZ(-4deg); filter: blur(1px) brightness(.90); }
  56% { transform: translateZ(28px) scale(1.16) rotateZ(3deg); filter: blur(0) brightness(1.48); }
  100% { transform: translateZ(-18px) scale(.96) rotateZ(0); filter: blur(.3px) brightness(1.08); }
}

@keyframes safeGlitchShake {
  0% { transform: translate(-.06em, .02em) skewX(-8deg); opacity: .82; filter: contrast(1.45) brightness(1.15); }
  50% { transform: translate(.07em, -.03em) skewX(9deg); opacity: 1; filter: contrast(1.7) brightness(1.48); }
  100% { transform: translate(-.02em, .01em) skewX(-3deg); opacity: .88; filter: contrast(1.35) brightness(1.02); }
}

@keyframes safeMatrixRain {
  0% { transform: translateY(-.48em) scaleY(1.28); filter: blur(.9px) brightness(1.12); }
  58% { transform: translateY(.08em) scaleY(.92); filter: blur(.25px) brightness(1.44); }
  100% { transform: translateY(.44em) scaleY(1.12); filter: blur(.8px) brightness(.98); }
}

@keyframes safeStrobeFlash {
  0% { transform: scale(1.04); opacity: .38; filter: brightness(.75) contrast(1.2); }
  50% { transform: scale(1.10); opacity: 1; filter: brightness(1.82) contrast(1.45); }
  100% { transform: scale(.98); opacity: .55; filter: brightness(1.08); }
}

@keyframes safeShutterScan {
  0% { transform: scaleX(.18); clip-path: inset(0 44% 0 44%); filter: brightness(1.10); }
  52% { transform: scaleX(1.08); clip-path: inset(0 0 0 0); filter: brightness(1.48); }
  100% { transform: scaleX(.42); clip-path: inset(0 30% 0 30%); filter: brightness(.98); }
}

@keyframes safeOrbitSpin {
  0% { transform: rotateY(-118deg) rotateZ(-8deg) translateZ(26px) scale(.94); filter: brightness(1.02); }
  50% { transform: rotateY(24deg) rotateZ(5deg) translateZ(40px) scale(1.10); filter: brightness(1.48); }
  100% { transform: rotateY(180deg) rotateZ(0) translateZ(18px) scale(.98); filter: brightness(1.04); }
}

@keyframes safeCellSweep {
  from { transform: translateX(-2px); filter: brightness(1) saturate(1); }
  to { transform: translateX(2px); filter: brightness(1.22) saturate(1.2); }
}

@keyframes safeHotScan {
  0% { opacity: .32; filter: brightness(.85); }
  50% { opacity: .76; filter: brightness(1.45); }
  100% { opacity: .42; filter: brightness(1.02); }
}

@keyframes safeMatrixCell {
  0% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(10deg) brightness(1.22); }
  100% { filter: hue-rotate(0deg) brightness(1); }
}


/* ===========================
   v4.3 SIMPLE STABLE DISPLAY + WORKING FRONT-END ANIMATIONS
   Purpose: remove visual clutter, stop mobile clipping, and keep animation selectors isolated.
=========================== */
.display-body {
  background: #05070f !important;
  color: #f8fafc !important;
  overflow: auto !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.display-body * {
  text-shadow: none !important;
}

.display-body .stage {
  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: clamp(10px, 2.4vw, 22px) !important;
  overflow: visible !important;
}

.display-body .draw-board,
.display-body .draw-board-premium,
.display-body .draw-board-classic,
.display-body .draw-board-simple,
.display-body .draw-board-grid,
.display-body .draw-board-eight {
  width: min(100%, 920px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: clamp(12px, 2.2vw, 24px) !important;
  border: 1px solid rgba(148, 163, 184, .34) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(59, 130, 246, .20), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(2, 6, 23, .98)) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  clip-path: none !important;
}

.display-body .draw-board::before,
.display-body .draw-board::after,
.display-body .date-box::before,
.display-body .date-box::after,
.display-body .time-box::before,
.display-body .time-box::after,
.display-body .website-box::before,
.display-body .website-box::after,
.display-body .action-box::before,
.display-body .action-box::after,
.display-body .section-title::before,
.display-body .section-title::after,
.display-body .rank-label::before,
.display-body .rank-label::after,
.display-body .result-cell::before,
.display-body .result-cell::after,
.display-body .box-card::before,
.display-body .box-card::after,
.display-body .eight-date::before,
.display-body .eight-time::before,
.display-body .eight-action::before,
.display-body .eight-site::before,
.display-body .eight-section-title::before,
.display-body .eight-rank-label::before,
.display-body .eight-mini-label::before {
  display: none !important;
}

.display-body .premium-header,
.display-body .classic-header,
.display-body .grid-header,
.display-body .simple-header,
.display-body .eight-header {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto !important;
  gap: 10px !important;
  min-height: 0 !important;
}

.display-body .header-stack {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 10px !important;
}

.display-body .headline-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
}

.display-body .date-box,
.display-body .time-box,
.display-body .website-box,
.display-body .action-box,
.display-body .section-title,
.display-body .eight-date,
.display-body .eight-time,
.display-body .eight-action,
.display-body .eight-site,
.display-body .eight-section-title,
.display-body .eight-rank-label,
.display-body .eight-mini-label {
  position: relative !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  border-radius: 16px !important;
  background: rgba(15, 23, 42, .84) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  color: #e5e7eb !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  clip-path: none !important;
  overflow: hidden !important;
}

.display-body .date-box,
.display-body .eight-date {
  justify-content: flex-start !important;
  gap: 7px !important;
  font-size: clamp(14px, 2.6vw, 22px) !important;
}

.display-body .time-box,
.display-body .eight-time {
  min-width: 122px !important;
  font-size: clamp(16px, 2.8vw, 24px) !important;
  font-variant-numeric: tabular-nums !important;
}

.display-body .website-box,
.display-body .eight-site {
  justify-content: flex-start !important;
  font-size: clamp(14px, 2.2vw, 20px) !important;
  color: #cbd5e1 !important;
}

.display-body .action-box,
.display-body .eight-action {
  align-self: stretch !important;
  min-width: 116px !important;
  color: #facc15 !important;
  border-color: rgba(250, 204, 21, .34) !important;
  background: rgba(113, 63, 18, .30) !important;
  font-size: clamp(22px, 5vw, 40px) !important;
  line-height: 1 !important;
}

.display-body .live-word {
  color: #fb7185 !important;
  font-weight: 900 !important;
}

.display-body .globe {
  color: #38bdf8 !important;
}

.display-body .rank-grid,
.display-body .premium-rank,
.display-body .classic-rank,
.display-body .simple-rank,
.display-body .eight-hero-grid,
.display-body .eight-secondary,
.display-body .eight-bottom,
.display-body .eight-section,
.display-body .eight-slot-grid,
.display-body .all-box-grid,
.display-body .result-grid {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  gap: 10px !important;
}

.display-body .rank-grid,
.display-body .premium-rank,
.display-body .classic-rank,
.display-body .simple-rank {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
}

.display-body .simple-rank {
  min-height: 0 !important;
  flex: none !important;
}

.display-body .rank-label,
.display-body .result-cell,
.display-body .box-card,
.display-body .eight-number,
.display-body .eight-mini-cell,
.display-body .eight-slot {
  position: relative !important;
  min-height: 58px !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  border-radius: 18px !important;
  background: rgba(15, 23, 42, .78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  color: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  clip-path: none !important;
  overflow: hidden !important;
}

.display-body .rank-label,
.display-body .eight-rank-label,
.display-body .eight-mini-label,
.display-body .box-card-label {
  font-size: clamp(20px, 5.2vw, 36px) !important;
  font-weight: 900 !important;
  color: #93c5fd !important;
}

.display-body .result-cell,
.display-body .result-cell.major,
.display-body .result-cell.mega,
.display-body .result-cell.mini,
.display-body .result-cell.sub,
.display-body .eight-number,
.display-body .eight-mini-cell,
.display-body .eight-slot {
  font-family: "Arial Black", Impact, ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(28px, 7.8vw, 56px) !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  font-variant-numeric: tabular-nums !important;
}

.display-body .result-cell.major,
.display-body .result-cell.mega,
.display-body .eight-number {
  min-height: 70px !important;
  font-size: clamp(34px, 9vw, 74px) !important;
}

.display-body .section-title,
.display-body .eight-section-title {
  min-height: 38px !important;
  margin-top: 2px !important;
  justify-content: flex-start !important;
  color: #93c5fd !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: clamp(14px, 2.8vw, 20px) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.display-body .four-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  min-height: 0 !important;
}

.display-body .eight-grid,
.display-body .eight-keren-slots {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  min-height: 0 !important;
  flex: none !important;
}

.display-body .all-box-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.display-body .box-card {
  display: grid !important;
  grid-template-rows: auto minmax(58px, auto) !important;
  padding: 10px !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.display-body .box-card .result-cell {
  min-height: 58px !important;
}

.display-body .box-card.span-2 {
  grid-column: span 1 !important;
}

.display-body .eight-hero-grid,
.display-body .eight-secondary,
.display-body .eight-bottom,
.display-body .eight-mini-row,
.display-body .eight-section {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
}

.display-body .eight-mini-row {
  gap: 8px !important;
}

.display-body .eight-slot-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.display-body .result-cell.is-filled {
  border-color: rgba(56, 189, 248, .55) !important;
  background:
    linear-gradient(180deg, rgba(14, 165, 233, .12), rgba(15, 23, 42, .82)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(56, 189, 248, .08) !important;
}

.display-body .result-digits {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .06em !important;
  transform: none !important;
  max-width: 100% !important;
}

.display-body .result-digit {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: .62em !important;
  height: 1.05em !important;
  line-height: 1 !important;
  border-radius: .16em !important;
  background: rgba(2, 6, 23, .50) !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  overflow: hidden !important;
  will-change: transform, opacity, filter !important;
}

.display-body .digit-glyph {
  display: block !important;
  line-height: 1 !important;
  transform: translateZ(0) !important;
  will-change: transform, opacity, filter !important;
}

.display-body .spinner {
  width: 32px !important;
  height: 32px !important;
  border: 4px solid rgba(148, 163, 184, .28) !important;
  border-top-color: #38bdf8 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  animation: simpleSpinner .8s linear infinite !important;
}

.display-body .watermark {
  position: fixed !important;
  right: 12px !important;
  bottom: 10px !important;
  color: rgba(226, 232, 240, .35) !important;
  font: 700 12px/1 ui-sans-serif, system-ui, sans-serif !important;
}

.display-body .result-cell.animating {
  border-color: rgba(56, 189, 248, .82) !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .24), 0 0 28px rgba(56, 189, 248, .18) !important;
  animation: simpleCellPulse .65s ease-in-out infinite alternate !important;
}

.display-body .result-cell.animating .result-digit.is-rolling .digit-glyph {
  animation: simpleRollTick .18s linear infinite !important;
  filter: blur(.4px) !important;
  opacity: .88 !important;
}

.display-body .result-cell.animating .result-digit.is-locked {
  border-color: rgba(34, 211, 238, .58) !important;
  background: rgba(8, 47, 73, .54) !important;
}

.display-body .result-cell.animating .result-digit.is-locked .digit-glyph {
  animation: lockPop .36s cubic-bezier(.17, .9, .26, 1.25) both !important;
  color: #ffffff !important;
}

.display-body .result-cell.anim-mode-drumroll .result-digit.is-locked .digit-glyph { animation-name: lockDrum !important; }
.display-body .result-cell.anim-mode-cascade .result-digit.is-locked .digit-glyph { animation-name: lockCascade !important; }
.display-body .result-cell.anim-mode-flip .result-digit.is-locked .digit-glyph { animation-name: lockFlip !important; }
.display-body .result-cell.anim-mode-slot .result-digit.is-locked .digit-glyph { animation-name: lockSlot !important; }
.display-body .result-cell.anim-mode-pulse .result-digit.is-locked .digit-glyph { animation-name: lockPulse !important; }
.display-body .result-cell.anim-mode-zoom .result-digit.is-locked .digit-glyph { animation-name: lockZoom !important; }
.display-body .result-cell.anim-mode-glitch .result-digit.is-locked .digit-glyph { animation-name: lockGlitch !important; }
.display-body .result-cell.anim-mode-matrix .result-digit.is-locked .digit-glyph { animation-name: lockMatrix !important; }
.display-body .result-cell.anim-mode-strobe .result-digit.is-locked .digit-glyph { animation-name: lockStrobe !important; }
.display-body .result-cell.anim-mode-shutter .result-digit.is-locked .digit-glyph { animation-name: lockShutter !important; }
.display-body .result-cell.anim-mode-orbit .result-digit.is-locked .digit-glyph { animation-name: lockOrbit !important; }

@keyframes simpleSpinner { to { transform: rotate(360deg); } }
@keyframes simpleCellPulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.16); }
}
@keyframes simpleRollTick {
  0% { transform: translateY(-.34em) scaleY(1.12); opacity: .62; }
  48% { transform: translateY(.22em) scaleY(.96); opacity: 1; }
  100% { transform: translateY(.52em) scaleY(1); opacity: .62; }
}
@keyframes lockPop {
  0% { transform: translateY(-.18em) scale(.86); filter: blur(.8px); }
  65% { transform: translateY(.03em) scale(1.12); filter: blur(0); }
  100% { transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes lockDrum {
  0% { transform: rotateX(-84deg) translateY(-.18em); opacity: .55; }
  70% { transform: rotateX(14deg) translateY(.02em); opacity: 1; }
  100% { transform: rotateX(0) translateY(0); opacity: 1; }
}
@keyframes lockCascade {
  0% { transform: translateX(-.20em) translateY(-.16em); opacity: .35; }
  72% { transform: translateX(.04em) translateY(.03em); opacity: 1; }
  100% { transform: translateX(0) translateY(0); }
}
@keyframes lockFlip {
  0% { transform: rotateX(95deg) scale(.88); opacity: .2; }
  68% { transform: rotateX(-12deg) scale(1.08); opacity: 1; }
  100% { transform: rotateX(0) scale(1); opacity: 1; }
}
@keyframes lockSlot {
  0% { transform: translateY(-.60em) scaleY(1.18); opacity: .25; }
  74% { transform: translateY(.07em) scaleY(.95); opacity: 1; }
  100% { transform: translateY(0) scaleY(1); }
}
@keyframes lockPulse {
  0% { transform: scale(.62); opacity: .30; }
  58% { transform: scale(1.22); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes lockZoom {
  0% { transform: scale(.24); opacity: .15; filter: blur(2px); }
  62% { transform: scale(1.18); opacity: 1; filter: blur(0); }
  100% { transform: scale(1); }
}
@keyframes lockGlitch {
  0% { transform: translate(-.16em, .05em) skewX(-12deg); opacity: .55; }
  30% { transform: translate(.14em, -.04em) skewX(10deg); opacity: 1; }
  60% { transform: translate(-.06em, .02em) skewX(-5deg); }
  100% { transform: translate(0,0) skewX(0); }
}
@keyframes lockMatrix {
  0% { transform: translateY(-.74em); opacity: .15; color: #67e8f9; }
  74% { transform: translateY(.05em); opacity: 1; color: #ffffff; }
  100% { transform: translateY(0); }
}
@keyframes lockStrobe {
  0% { opacity: .18; transform: scale(1.08); }
  24% { opacity: 1; transform: scale(.96); }
  48% { opacity: .36; transform: scale(1.10); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes lockShutter {
  0% { transform: scaleX(.05); opacity: .30; }
  72% { transform: scaleX(1.18); opacity: 1; }
  100% { transform: scaleX(1); }
}
@keyframes lockOrbit {
  0% { transform: rotateY(-105deg) rotateZ(-8deg) scale(.82); opacity: .28; }
  70% { transform: rotateY(15deg) rotateZ(3deg) scale(1.10); opacity: 1; }
  100% { transform: rotateY(0) rotateZ(0) scale(1); }
}

@media (max-width: 760px) {
  .display-body .stage {
    padding: 8px !important;
  }

  .display-body .draw-board,
  .display-body .draw-board-premium,
  .display-body .draw-board-classic,
  .display-body .draw-board-simple,
  .display-body .draw-board-grid,
  .display-body .draw-board-eight {
    width: 100% !important;
    border-radius: 18px !important;
    padding: 10px !important;
    gap: 9px !important;
  }

  .display-body .premium-header,
  .display-body .classic-header,
  .display-body .grid-header,
  .display-body .simple-header,
  .display-body .eight-header,
  .display-body .headline-row {
    grid-template-columns: 1fr !important;
  }

  .display-body .header-stack {
    gap: 8px !important;
  }

  .display-body .action-box,
  .display-body .eight-action,
  .display-body .time-box,
  .display-body .eight-time {
    min-width: 0 !important;
    width: 100% !important;
  }

  .display-body .rank-grid,
  .display-body .premium-rank,
  .display-body .classic-rank,
  .display-body .simple-rank {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .display-body .rank-label,
  .display-body .result-cell,
  .display-body .box-card,
  .display-body .eight-number,
  .display-body .eight-mini-cell,
  .display-body .eight-slot {
    min-height: 54px !important;
    border-radius: 14px !important;
  }

  .display-body .result-cell,
  .display-body .result-cell.major,
  .display-body .result-cell.mega,
  .display-body .result-cell.mini,
  .display-body .result-cell.sub,
  .display-body .eight-number,
  .display-body .eight-mini-cell,
  .display-body .eight-slot {
    font-size: clamp(24px, 9.8vw, 44px) !important;
  }

  .display-body .four-grid,
  .display-body .eight-grid,
  .display-body .eight-keren-slots,
  .display-body .eight-slot-grid,
  .display-body .all-box-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .display-body .result-digits {
    gap: .035em !important;
  }

  .display-body .result-digit {
    min-width: .55em !important;
    border-radius: .13em !important;
  }
}

@media (max-width: 420px) {
  .display-body .rank-grid,
  .display-body .premium-rank,
  .display-body .classic-rank,
  .display-body .simple-rank {
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }

  .display-body .result-cell,
  .display-body .result-cell.major,
  .display-body .result-cell.mega,
  .display-body .result-cell.mini,
  .display-body .result-cell.sub,
  .display-body .eight-number,
  .display-body .eight-mini-cell,
  .display-body .eight-slot {
    font-size: clamp(22px, 10vw, 38px) !important;
  }
}


/* ===========================
   v4.4 Critical one-template fix
   Purpose: only one display design may be visible at a time.
   This intentionally sits at the end of the stylesheet to beat older
   broad display:flex !important rules used by the simplified redesign.
=========================== */
.display-body .template-board.hidden,
.display-body .template-board[hidden],
.display-body .template-board[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.display-body[data-layout="premium"] .template-board:not([data-template="premium"]),
.display-body[data-layout="eight"] .template-board:not([data-template="eight"]),
.display-body[data-layout="classic"] .template-board:not([data-template="classic"]),
.display-body[data-layout="simple"] .template-board:not([data-template="simple"]),
.display-body[data-layout="grid"] .template-board:not([data-template="grid"]) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.display-body[data-layout="premium"] .template-board[data-template="premium"],
.display-body[data-layout="eight"] .template-board[data-template="eight"],
.display-body[data-layout="classic"] .template-board[data-template="classic"],
.display-body[data-layout="simple"] .template-board[data-template="simple"],
.display-body[data-layout="grid"] .template-board[data-template="grid"] {
  visibility: visible !important;
  pointer-events: auto !important;
}

.display-body .stage {
  flex-wrap: nowrap !important;
}

/* ===========================
   v4.5 ALL BOXES 8-DIGIT READY
   Purpose: every visible result box can fit a full 8-digit number cleanly.
=========================== */
.display-body .result-cell {
  min-width: 0 !important;
}

.display-body .result-cell[data-len="7"],
.display-body .result-cell[data-len="8"],
.display-body .result-cell[data-len="9"],
.display-body .result-cell[data-len="10"],
.display-body .result-cell[data-len="11"],
.display-body .result-cell[data-len="12"] {
  letter-spacing: 0 !important;
}

.display-body .result-cell[data-len="7"] .result-digits,
.display-body .result-cell[data-len="8"] .result-digits {
  gap: .025em !important;
  transform: none !important;
}

.display-body .result-cell[data-len="7"] .result-digit,
.display-body .result-cell[data-len="8"] .result-digit {
  min-width: .48em !important;
  padding-inline: .012em !important;
}

.display-body .result-cell[data-len="8"],
.display-body .result-cell.mini[data-len="8"],
.display-body .result-cell.sub[data-len="8"],
.display-body .eight-slot[data-len="8"],
.display-body .eight-mini-cell[data-len="8"] {
  font-size: clamp(24px, 5.8vw, 48px) !important;
}

.display-body .result-cell.major[data-len="8"],
.display-body .result-cell.mega[data-len="8"],
.display-body .eight-number[data-len="8"] {
  font-size: clamp(32px, 7.4vw, 64px) !important;
}

.display-body .four-grid,
.display-body .eight-grid,
.display-body .eight-keren-slots,
.display-body .eight-slot-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.display-body .four-grid .result-cell,
.display-body .eight-grid .result-cell,
.display-body .eight-slot-grid .result-cell,
.display-body .all-box-grid .result-cell {
  min-height: 64px !important;
}

.display-body .box-card .result-cell[data-len="8"] {
  font-size: clamp(24px, 5.4vw, 44px) !important;
}

@media (min-width: 980px) {
  .display-body .four-grid,
  .display-body .eight-grid,
  .display-body .eight-keren-slots,
  .display-body .eight-slot-grid,
  .display-body .all-box-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .display-body .four-grid,
  .display-body .eight-grid,
  .display-body .eight-keren-slots,
  .display-body .eight-slot-grid,
  .display-body .all-box-grid {
    grid-template-columns: 1fr !important;
  }

  .display-body .result-cell[data-len="8"],
  .display-body .result-cell.mini[data-len="8"],
  .display-body .result-cell.sub[data-len="8"],
  .display-body .eight-slot[data-len="8"],
  .display-body .eight-mini-cell[data-len="8"],
  .display-body .box-card .result-cell[data-len="8"] {
    font-size: clamp(26px, 9vw, 42px) !important;
  }

  .display-body .result-cell.major[data-len="8"],
  .display-body .result-cell.mega[data-len="8"],
  .display-body .eight-number[data-len="8"] {
    font-size: clamp(30px, 10vw, 48px) !important;
  }
}

@media (max-width: 420px) {
  .display-body .result-cell[data-len="8"] .result-digit {
    min-width: .46em !important;
  }

  .display-body .result-cell[data-len="8"] .result-digits {
    gap: .015em !important;
  }
}