/* ============================================================
   components.css — marca, roda, painéis, controles e tabuleiro
   ============================================================ */

/* ---------------- Cabeçalho e marca ---------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.brand { margin: 0; line-height: 0; }

.brand-logo {
  display: block;
  /* No celular a logo é a marca inteira (não há texto), então ela cresce
     proporcionalmente mais do que no desktop. */
  height: clamp(92px, 24vw, 132px);
  width: auto;
  max-width: 100%;
  filter:
    drop-shadow(0 4px 14px rgba(0, 0, 0, .7))
    drop-shadow(0 0 34px rgba(245, 196, 81, .22));
}

.round-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 78px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--card-line);
  text-align: center;
}
.meta .k {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.meta .v {
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 700;
  color: var(--gold-2);
}
.meta .v.dir { color: var(--copper); }
.meta.mined { border-color: rgba(52, 211, 153, .3); }
.meta.mined .v { color: #6ee7b7; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .topbar { justify-content: center; text-align: center; }
  /* Quatro caixas espremidas numa linha quebravam o texto no meio;
     duas por linha cabem inteiras. */
  .round-meta {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .meta { min-width: 0; padding: 6px 8px; }
  .meta .v { font-size: 15px; }
}

/* ---------------- Roda ---------------- */

.wheel-wrap {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  aspect-ratio: 1;
}

.wheel-halo {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(138, 50, 39, .38), transparent 66%);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .78),
    0 0 90px rgba(138, 50, 39, .3);
  transition: box-shadow .5s ease, background .5s ease;
}
.wheel-halo.charged {
  background: radial-gradient(50% 50% at 50% 50%, rgba(168, 85, 247, .5), transparent 68%);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .78),
    0 0 130px rgba(168, 85, 247, .55);
}
.wheel-halo.won {
  background: radial-gradient(50% 50% at 50% 50%, rgba(245, 196, 81, .42), transparent 68%);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .78),
    0 0 150px rgba(245, 196, 81, .6);
}

#wheel {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-user-select: none;
  user-select: none;
}
#wheel .spin-layer { will-change: transform; }

/* ---------------- Cartão de fase e cronômetro ---------------- */

.phase-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 11px 16px;
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.timer {
  position: relative;
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
}
.timer-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.tr-bg {
  fill: none;
  stroke: rgba(255,255,255,.08);
  stroke-width: 6;
}
.tr-fg {
  fill: none;
  stroke: var(--gold-2);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 276.46;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(245, 196, 81, .7));
  transition: stroke .3s ease;
}

.timer-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.timer-num {
  font-family: var(--font-num);
  font-size: 25px;
  font-weight: 700;
  color: var(--ink);
}
.timer-bolt {
  position: absolute;
  font-size: 24px;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(245,196,81,.9));
}

.phase-text {
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Estados de fase */
.phase-card[data-phase="wait"]    .tr-fg { stroke: var(--gold-2); }
.phase-card[data-phase="wait"]    .phase-text { color: var(--copper); }
.phase-card[data-phase="drop"]    .phase-text { color: var(--gold-1); }
.phase-card[data-phase="result"]  .phase-text { color: var(--gold-2); }
.phase-card[data-phase="offline"] .tr-fg { stroke: var(--red-soft); }
.phase-card[data-phase="offline"] .phase-text { color: var(--red-soft); }

.phase-card[data-phase="drop"]   .timer-num,
.phase-card[data-phase="result"] .timer-num { opacity: 0; }
.phase-card[data-phase="drop"]   .timer-bolt,
.phase-card[data-phase="result"] .timer-bolt { opacity: 1; animation: boltSpin 1.4s ease-in-out infinite; }
@keyframes boltSpin { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.18); opacity: 1; } }

/* ---------------- Resultado ---------------- */

.result-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 11px 14px 13px;
  border-radius: var(--r-card);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.06), transparent 72%),
    var(--card);
  border: 1px solid var(--card-line);
}
.rc-label {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rc-number {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: clamp(44px, 5.8vw, 64px);
  line-height: 1.02;
  margin: 2px 0;
  color: var(--ink);
  text-shadow: 0 6px 26px rgba(0,0,0,.7);
}
.result-card[data-color="red"]   .rc-number { color: #ff6274; text-shadow: 0 0 38px rgba(204,26,46,.75); }
.result-card[data-color="black"] .rc-number { color: #dfe6f5; text-shadow: 0 0 34px rgba(0,0,0,.95); }
.result-card[data-color="green"] .rc-number { color: #35e08d; text-shadow: 0 0 38px rgba(15,138,77,.8); }

.result-card.lucky {
  border-color: var(--gold-2);
  box-shadow: 0 0 44px rgba(245, 196, 81, .35), inset 0 0 40px rgba(245, 196, 81, .12);
}
.result-card.lucky .rc-number {
  color: var(--gold-1);
  text-shadow: 0 0 40px rgba(245, 196, 81, .95);
}

.rc-color {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-2);
  min-height: 15px;
}
.rc-pay {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--ink-2);
  min-height: 18px;
}
.rc-pay .hit {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #2a1a00;
  background: linear-gradient(180deg, #fff6cf, var(--gold-2) 55%, var(--gold-3));
  box-shadow: 0 0 22px rgba(245, 196, 81, .8);
}

/* ---------------- Lucky numbers ---------------- */

.lucky-card, .pay-card {
  padding: 11px 14px;
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--card-line-gold);
}

.lucky-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 9px;
}
.lc-bolt { filter: drop-shadow(0 0 8px rgba(245,196,81,.9)); }

.lucky-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 38px;
  align-items: center;
}
.lucky-empty {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}

.lucky-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(245, 196, 81, .45);
  box-shadow: 0 0 18px rgba(245, 196, 81, .22);
  animation: luckyPop .4s cubic-bezier(.2,.9,.3,1.5);
}
.lucky-item .n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.lucky-item .n.red   { background: linear-gradient(180deg, var(--red-soft), var(--red)); }
.lucky-item .n.black { background: linear-gradient(180deg, #2e333d, var(--black)); }
.lucky-item .n.green { background: linear-gradient(180deg, #17b165, var(--green)); }
.lucky-item .x {
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-1);
  text-shadow: 0 0 12px rgba(245,196,81,.8);
}
@keyframes luckyPop {
  from { transform: scale(.4) rotate(-6deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------------- Tabela de pagamentos ---------------- */

.pay-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 3px 0;
  font-size: 12.5px;
  color: var(--ink-2);
  border-bottom: 1px dashed rgba(255,255,255,.07);
}
.pay-row em { font-style: normal; color: var(--ink-3); font-size: 11px; }
.pay-row:last-of-type { border-bottom: 0; }
.pay-row strong {
  font-family: var(--font-num);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: .04em;
}
.pay-row strong.hot { color: var(--gold-2); text-shadow: 0 0 14px rgba(245,196,81,.5); }
.pay-note {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-3);
}

/* ---------------- Selo de ao vivo ---------------- */

.live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(239, 68, 68, .35);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.live-badge .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
  animation: onAir 1.6s ease-in-out infinite;
}
@keyframes onAir { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.live-status {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-3);
  padding-left: 4px;
}
.live-status.is-up   { color: #6ee7b7; }
.live-status.is-warn { color: var(--gold-2); }
.live-status.is-down { color: var(--red-soft); }

.lucky-note {
  margin: 9px 0 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--ink-3);
  border-top: 1px dashed rgba(255,255,255,.08);
  padding-top: 7px;
}

.lucky-item .tag {
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--ink-3);
}
.lucky-item .tag.real {
  background: rgba(52, 211, 153, .16);
  color: #6ee7b7;
}
.lucky-item.is-sim {
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
  opacity: .82;
}
.lucky-item.is-sim .x { color: var(--ink-2); text-shadow: none; }

/* ---------------- Controles ---------------- */

.controls { display: flex; flex-direction: column; gap: 11px; }

.btn-main {
  position: relative;
  overflow: hidden;
  padding: 13px 20px;
  border: 1px solid var(--gold-4);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #2b1c02;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 45%, var(--gold-3));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -2px 6px rgba(109,74,16,.5),
    0 8px 30px rgba(245, 196, 81, .26);
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-main::after {
  content: "";
  position: absolute;
  top: -60%; left: -30%;
  width: 38%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: rotate(18deg) translateX(-160%);
  animation: sheen 4.5s ease-in-out infinite;
}
@keyframes sheen {
  0%, 62%   { transform: rotate(18deg) translateX(-160%); }
  78%, 100% { transform: rotate(18deg) translateX(430%); }
}
.btn-main:hover:not(:disabled)  { transform: translateY(-2px); filter: brightness(1.06); }
.btn-main:active:not(:disabled) { transform: translateY(1px); }
.btn-main:disabled { cursor: not-allowed; filter: grayscale(.6) brightness(.6); }
.btn-main:disabled::after { animation: none; opacity: 0; }
.btn-main:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 4px; }

.ctl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.btn-ghost {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.btn-ghost:hover { color: var(--gold-2); border-color: var(--card-line-gold); }
.btn-ghost[aria-pressed="true"] { opacity: .5; }

/* ---------------- Histórico ---------------- */

.board-section {
  padding: clamp(11px, 1.4vw, 15px);
  border-radius: var(--r-card);
  background: rgba(10, 5, 4, .68);
  border: 1px solid var(--card-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.history-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.hb-label, .hb-stat {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.hb-stat { margin-left: auto; color: var(--gold-3); }
.hb-list {
  display: flex;
  gap: 6px;
  /* Rolagem em vez de corte: se a largura apertar, os dez continuam
     alcançáveis em vez de sumirem. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex: 1;
  min-height: 28px;
  align-items: center;
}
.hb-list::-webkit-scrollbar { display: none; }
.hb-item {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  animation: chipIn .35s cubic-bezier(.2,.9,.3,1.4);
}
.hb-item.red   { background: linear-gradient(180deg, var(--red-soft), var(--red)); }
.hb-item.black { background: linear-gradient(180deg, #2b3038, var(--black)); }
.hb-item.green { background: linear-gradient(180deg, #17b165, var(--green)); }
.hb-item.was-lucky {
  border-color: var(--gold-2);
  box-shadow: 0 0 14px rgba(245,196,81,.75);
}
.hb-item.sem-anim { animation: none; }
@keyframes chipIn { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------------- Janela do histórico ---------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
}
.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 2, 10, .78);
  backdrop-filter: blur(3px);
}

.modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: min(84vh, 760px);
  border-radius: 18px;
  background: linear-gradient(180deg, #26100e, #130807);
  border: 1px solid var(--card-line-gold);
  box-shadow: 0 30px 90px rgba(0,0,0,.75), 0 0 60px rgba(138,50,39,.28);
  overflow: hidden;
  animation: modalIn .22s ease-out;
}
@keyframes modalIn {
  from { transform: translateY(14px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.modal-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal-head h2 {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.modal-sub { font-size: 11.5px; color: var(--ink-3); }
.modal-x {
  margin-left: auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 13px;
}
.modal-x:hover { color: #fff; border-color: var(--gold-3); }

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.filt { display: flex; flex-direction: column; gap: 4px; }
.filt span {
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.filt select {
  min-width: 116px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ink);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}
.filt select:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 1px; }

.table-wrap { overflow: auto; flex: 1; }

.hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.hist-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 14px;
  text-align: left;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: #1d0d0b;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.hist-table td {
  padding: 7px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--ink-2);
}
.hist-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.hist-table tr.premiada td { background: rgba(245, 196, 81, .07); }
.col-data { color: var(--ink-3); white-space: nowrap; }
.col-hora { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.col-cor { text-transform: capitalize; }

.num-chip {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
}
.num-chip.red   { background: linear-gradient(180deg, var(--red-soft), var(--red)); }
.num-chip.black { background: linear-gradient(180deg, #2b3038, var(--black)); }
.num-chip.green { background: linear-gradient(180deg, #17b165, var(--green)); }

.mult-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 12px;
  color: #2a1a00;
  background: linear-gradient(180deg, #fff6cf, var(--gold-2) 55%, var(--gold-3));
}
.hist-table .sem { color: var(--ink-3); }

.hist-vazio { padding: 26px 18px; text-align: center; color: var(--ink-3); font-size: 13px; }

.modal-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.hist-conta { margin-left: auto; font-size: 11px; color: var(--ink-3); }

/* ---------------- Tabuleiro 0–36 ---------------- */

.board {
  display: grid;
  grid-template-columns: .74fr repeat(12, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;
}

.cell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(30px, 3.4vw, 46px);
  border-radius: 7px;
  font-family: var(--font-num);
  font-size: clamp(13px, 1.5vw, 18px);
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .3s ease, border-color .3s ease;
}
.cell.red   { background: linear-gradient(180deg, #e0304a, var(--red)); }
.cell.black { background: linear-gradient(180deg, #262c36, var(--black)); }
.cell.green { background: linear-gradient(180deg, #16a35d, var(--green)); }
.cell.zero  { grid-row: 1 / span 3; grid-column: 1; }

/* Casa sorteada */
.cell.result {
  border-color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 26px rgba(255,255,255,.55);
  transform: scale(1.04);
  z-index: 2;
}

/* Em telas estreitas o tabuleiro rola na horizontal: reflowar quebraria
   o posicionamento explícito das casas na grade. */
@media (max-width: 760px) {
  .board { min-width: 620px; }

  /* A faixa dos últimos 10 ganha linha própria — na horizontal ela ficava
     espremida entre o rótulo e a contagem, e só cabia um número. */
  .history-bar { flex-wrap: wrap; gap: 8px; }
  .hb-label { width: 100%; }
  /* Dez chips têm de caber sem rolar em tela de 360px para cima. */
  /* flex-start, não space-between: com poucos chips no começo da sessão
     eles não devem ficar espalhados pela largura toda. */
  .hb-list { width: 100%; flex: none; justify-content: flex-start; gap: 4px; }
  .hb-item { width: 28px; height: 28px; font-size: 13px; }
  .hb-stat { margin-left: 0; width: 100%; }

  /* Só o tabuleiro rola; o resto do bloco acompanha a tela. A borda
     esmaecida à direita avisa que há mais casas para o lado, em vez de
     parecer que o tabuleiro foi cortado. */
  .board-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }
  .board-wrap::-webkit-scrollbar { display: none; }
}