/* CardCircle — shared theme: tokens, felt, top bar, buttons, cards, chips, dialogs. */

:root {
  --felt-1: #11633f;
  --felt-2: #08402a;
  --felt-3: #042015;
  --gold: #d9b45a;
  --gold-2: #f4dc95;
  --gold-3: #9c7a2c;
  --ink: #f6f1e3;
  --ink-2: #cdd8cd;
  --ink-3: #8fa394;
  --panel: rgba(3, 20, 12, 0.66);
  --panel-border: rgba(217, 180, 90, 0.22);
  --hairline: rgba(255, 255, 255, 0.1);
  --card-face: #fcfbf7;
  --suit-red: #c62828;
  --suit-black: #17171b;
  --card-back-1: #7a1424;
  --card-back-2: #921c30;
  --win: #5fd394;
  --lose: #ff7272;
  --push: #ecc964;
  --radius: 16px;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --card-w: clamp(62px, 10.5vw, 104px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-ui);
  color: var(--ink);
  background-color: var(--felt-3);
  background-image: radial-gradient(ellipse 120% 90% at 50% 25%, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Felt grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

a { color: var(--gold-2); }
[hidden] { display: none !important; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  min-height: 64px;
  background: linear-gradient(180deg, rgba(2, 14, 8, 0.75), rgba(2, 14, 8, 0.35));
  border-bottom: 1px solid var(--panel-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-2);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.05rem;
  color: #2a1b05;
  background: radial-gradient(circle at 35% 30%, var(--gold-2), var(--gold) 55%, var(--gold-3));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.topbar-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-title {
  color: var(--ink-2);
  font-weight: 600;
  padding-left: 12px;
  border-left: 1px solid var(--hairline);
}
.spacer { flex: 1; }

.mode-badge {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline);
}
.mode-badge.ranked { color: #2b1c04; border-color: transparent; background: linear-gradient(180deg, var(--gold-2), var(--gold)); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pill-stack { display: flex; flex-direction: column; line-height: 1.1; }
.pill-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.coin {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 52%, rgba(0, 0, 0, 0.18) 54%, transparent 58%),
    radial-gradient(circle at 35% 30%, var(--gold-2), var(--gold) 55%, var(--gold-3));
  box-shadow: inset 0 0 0 2px rgba(255, 240, 200, 0.35);
}
.pill.flash { animation: pill-flash 0.6s var(--ease); }
@keyframes pill-flash {
  30% { border-color: var(--lose); box-shadow: 0 0 0 3px rgba(255, 114, 114, 0.25); }
}

/* ---------- Buttons ---------- */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
  color: var(--ink);
  font: 600 0.95rem/1 var(--font-ui);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.12s var(--ease), background 0.2s, box-shadow 0.2s, opacity 0.2s, border-color 0.2s;
}
.btn:hover:not(:disabled) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07)); border-color: rgba(255, 255, 255, 0.28); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.97); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.btn:focus-visible, .chip:focus-visible, a:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.btn-gold {
  color: #2b1c04;
  border-color: rgba(255, 232, 170, 0.7);
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, var(--gold-3));
  box-shadow: 0 6px 18px rgba(217, 180, 90, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn-gold:hover:not(:disabled) { background: linear-gradient(180deg, #fbe7ad, #e2c06a 55%, #a8862f); border-color: #fff1c4; }
.btn-lg { min-height: 52px; padding: 0 30px; font-size: 1.05rem; font-weight: 700; }
.btn-ghost { background: transparent; box-shadow: none; border-color: var(--hairline); color: var(--ink-2); }
.btn-icon { width: 40px; min-height: 40px; height: 40px; padding: 0; flex: none; }
.btn-icon svg { width: 20px; height: 20px; }
kbd {
  font: 600 0.75rem/1 var(--font-ui);
  padding: 3px 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--ink-2);
}
.btn-gold kbd { background: rgba(0, 0, 0, 0.12); color: #3b2a08; border-color: rgba(0, 0, 0, 0.15); }
@media (hover: none), (max-width: 640px), (max-height: 500px) { .btn kbd { display: none; } } /* (phones have no keyboard) */

/* ---------- Game pages: the table fills the visible window and the page never scrolls (Brief 18) ---------- */
/* The visible height (dvh: it follows the phone's browser bars), one slim header row, and the table
   (main.table) in the rest. The table sizes its cards from its own box (container units) and
   TC.fitTable (table.js) steps them down (--fit) if a long hand would still overflow. Panels open
   over the table, never under it. Pinch zoom stays allowed. */
body.game-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}
body.game-page > .topbar {
  flex: none;
  min-height: 52px;
  padding-top: max(6px, env(safe-area-inset-top));
  padding-bottom: 6px;
}
body.game-page > main.table {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  /* Cards flying from the shoe turn as they go: never let one widen the page for a moment. */
  overflow: clip;
}
/* No double-tap zoom on a game page (Safari zoomed in when chips were tapped twice quickly to bet):
   every tap is a tap. Pinch zoom and scrolling stay allowed (manipulation keeps both). It is set on
   every element, not just the page, because a part that scrolls inside itself starts its own chain. */
html:has(> body.game-page), body.game-page, body.game-page * { touch-action: manipulation; }
/* Phones on their side: the notch is at a side, and the header is a little slimmer. */
@media (orientation: landscape) and (max-height: 500px) {
  body.game-page > .topbar { min-height: 44px; padding-block: 4px; }
  body.game-page .credits-pill .pill-label { display: none; }
  body.game-page .topbar .btn-icon:not(.sound-more), body.game-page .account-avatar { width: 36px; height: 36px; min-height: 36px; }
  body.game-page .account-signin { width: 36px; height: 36px; min-height: 36px; padding: 0; }
  body.game-page .account-signin span { display: none; }
  body.game-page .topbar-title { white-space: nowrap; }
  body.game-page > .topbar, body.game-page > main.table {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}
/* Full screen (where the browser allows it; never on iPhone): table.js shows the button. */
.fullscreen-btn svg { width: 18px; height: 18px; }
.fullscreen-btn[aria-pressed='true'] { color: var(--gold-2); }
.sound-fullscreen { display: none; width: 100%; min-height: 44px; margin-top: 10px; font-size: 0.92rem; }
.sound-fullscreen svg { width: 18px; height: 18px; }
/* A narrow phone's header has no room for it: it's the last row of the sound panel there. */
@media (max-width: 480px) {
  .topbar .fullscreen-btn { display: none; }
  .sound-fullscreen { display: inline-flex; }
}

/* ---------- Sound panel (game pages): a narrow control beside the speaker opens it ---------- */
.topbar .btn-icon.sound-more { width: 28px; margin-left: -4px; border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
.topbar .btn-icon.sound-more svg { width: 16px; height: 16px; }
.topbar .btn-icon.sound-more[aria-expanded='true'] { color: var(--gold-2); }
.sound-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 12px;
  z-index: 40;
  width: min(280px, calc(100vw - 24px));
  padding: 14px 16px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #0b2f1f, #061a11);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  animation: sound-in 0.18s var(--ease);
}
@keyframes sound-in { from { opacity: 0; translate: 0 -6px; } }
.sound-title { margin: 0 0 10px; font: 700 1.05rem/1.2 var(--font-display); color: var(--gold-2); }
.sound-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.92rem; font-weight: 600; color: var(--ink-2); }
.sound-row output { color: var(--ink); font-variant-numeric: tabular-nums; }
.sound-volume { display: block; width: 100%; height: 32px; margin: 2px 0 8px; accent-color: var(--gold); cursor: pointer; }
.sound-volume:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 6px; }
.sound-switch { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.92rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.sound-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sound-switch-ui { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.2); transition: background 0.2s; }
.sound-switch-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: translate 0.2s var(--ease); }
.sound-switch input:checked + .sound-switch-ui { background: var(--gold); border-color: transparent; }
.sound-switch input:checked + .sound-switch-ui::after { translate: 20px 0; background: #2b1c04; }
.sound-switch input:focus-visible + .sound-switch-ui { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.sound-hint { margin: 0; font-size: 0.82rem; line-height: 1.35; color: var(--ink-3); }
.sound-muted-note:not(:empty) { margin-top: 8px; color: var(--push); font-weight: 600; }
/* Phones: the sound control's room comes out of the bar's spacing (and, on the narrowest, a
   little off the round buttons), never out of the game's title. */
@media (max-width: 480px) {
  .topbar:has(.sound-more) { padding-inline: 8px; gap: 4px; }
  .topbar .btn-icon.sound-more { width: 24px; margin-left: -4px; }
}
@media (max-width: 400px) {
  .topbar:has(.sound-more) > .btn-icon:not(.sound-more),
  .topbar:has(.sound-more) > .speed-btn,
  .topbar:has(.sound-more) .account-avatar { width: 34px; height: 34px; min-height: 34px; }
}

/* ---------- Playing cards ---------- */
.card {
  --w: var(--card-w);
  position: relative;
  flex: none;
  width: var(--w);
  height: calc(var(--w) * 1.4);
  perspective: 900px;
}
.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.card.down .card-inner { transform: rotateY(180deg); }
.card-face, .card-back {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--w) * 0.085);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.3);
}
.card-face {
  background: linear-gradient(160deg, #ffffff, var(--card-face) 60%, #f1eee4);
  color: var(--suit-black);
  border: 1px solid rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.card.red .card-face { color: var(--suit-red); }
.corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(12px, calc(var(--w) * 0.21)); /* (still readable on the smallest cards) */
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.corner i { font-style: normal; font-size: max(12px, 0.82em); margin-top: 1px; }
.corner.tl { top: 5%; left: 7%; }
.corner.br { bottom: 5%; right: 7%; transform: rotate(180deg); }
.pip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--w) * 0.46);
  line-height: 1;
}
.card.ace .pip { font-size: calc(var(--w) * 0.68); }
.court {
  position: absolute;
  inset: 17% 19%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  border-radius: calc(var(--w) * 0.05);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--w) * 0.36);
  line-height: 1;
  background: linear-gradient(160deg, rgba(217, 180, 90, 0.18), rgba(217, 180, 90, 0.05));
  box-shadow: inset 0 0 0 3px rgba(217, 180, 90, 0.25);
}
.court i { font-style: normal; font-size: max(12px, 0.55em); margin-top: 4%; }
.card-back {
  transform: rotateY(180deg);
  border: calc(var(--w) * 0.055) solid #fbfaf5;
  background:
    radial-gradient(circle at 50% 50%, rgba(244, 220, 149, 0.35) 0 12%, transparent 13%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.14), transparent 65%),
    repeating-linear-gradient(45deg, var(--card-back-1) 0 4px, var(--card-back-2) 4px 8px),
    repeating-linear-gradient(-45deg, transparent 0 4px, rgba(0, 0, 0, 0.12) 4px 8px);
  background-blend-mode: normal, normal, normal, multiply;
}
.card-back::after {
  content: '';
  position: absolute;
  inset: 5%;
  border-radius: calc(var(--w) * 0.04);
  border: 1px solid rgba(244, 220, 149, 0.55);
}
.card.sideways { rotate: 90deg; margin-inline: calc(var(--w) * 0.18) !important; }

/* ---------- Chips ---------- */
.chip {
  --c: #c0392b;
  --edge: #ffffff;
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  font: 800 0.92rem/1 var(--font-ui);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  background:
    radial-gradient(circle, var(--c) 0 50%, transparent 51%),
    repeating-conic-gradient(var(--c) 0 22.5deg, var(--edge) 22.5deg 45deg);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.22), inset 0 -3px 0 3px rgba(0, 0, 0, 0.12), 0 5px 12px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s var(--ease), box-shadow 0.15s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.chip::after {
  content: '';
  position: absolute;
  inset: 19%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.chip:hover:not(:disabled) { transform: translateY(-4px); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.22), 0 10px 18px rgba(0, 0, 0, 0.45); }
.chip:active:not(:disabled) { transform: translateY(0) scale(0.95); }
.chip:disabled { opacity: 0.3; cursor: not-allowed; }
.chip[data-value='5'] { --c: #c0392b; }
.chip[data-value='25'] { --c: #1f8a4c; }
.chip[data-value='100'] { --c: #23232b; --edge: #e8d6a0; }
.chip[data-value='500'] { --c: #6c3fb5; --edge: #f3d77a; }

/* ---------- Dialog ---------- */
dialog.panel {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  padding: 0;
  border-radius: 20px;
  border: 1px solid var(--panel-border);
  background: linear-gradient(180deg, #0b2f1f, #061a11);
  color: var(--ink);
  box-shadow: var(--shadow);
}
dialog.panel::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); }
dialog.panel[open] { animation: dialog-in 0.25s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--hairline);
}
.panel-head h2 { margin: 0; font-family: var(--font-display); color: var(--gold-2); font-size: 1.4rem; }
.panel-body { padding: 16px 20px 22px; line-height: 1.55; color: var(--ink-2); }
.panel-body h3 { margin: 18px 0 6px; color: var(--ink); font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; }
.panel-body h3:first-child { margin-top: 0; }
.panel-body ul { margin: 0; padding-left: 20px; }

/* ---------- Shared game-page pieces ---------- */
@keyframes rise { from { opacity: 0; translate: 0 8px; } }
/* The BOT chip (Brief 19): next to every bot's name, wherever it appears. Small but always readable
   (12 px, the phone minimum of Brief 18), never cut off by a long name, and unlike any person's tag. */
.bot-chip {
  display: inline-block;
  flex: none;
  margin-left: 0.15em;
  padding: 0.12em 0.45em 0.1em;
  border-radius: 999px;
  font: 800 0.75rem/1.2 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 0.12em;
  color: #0d2a1c;
  background: #bfe3d2;
  white-space: nowrap;
}
.row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Ranked gate on a game page: the table is hidden behind one panel. */
.table.locked { justify-content: center; }
.table.locked > :not(.lock-panel) { display: none; }
.lock-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(420px, 100%);
  padding: 32px 24px;
  text-align: center;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  animation: rise 0.3s var(--ease);
}
.lock-panel p { margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--ink); }
.lock-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #2b1c04;
  background: radial-gradient(circle at 35% 30%, var(--gold-2), var(--gold) 55%, var(--gold-3));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.lock-icon svg { width: 28px; height: 28px; }

/* Stats grid in a game's info dialog. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
}
.stats div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.stats dt { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.stats dd { margin: 4px 0 0; font-weight: 700; font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.panel-actions { margin-top: 20px; display: flex; justify-content: flex-end; }
.panel-footer { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline); color: var(--ink-3); font-size: 0.85rem; }

/* Preview deploys of the site (staging data): a small fixed tag, so nobody mistakes one for the real site. */
.env-tag {
  position: fixed; left: 8px; bottom: 8px; z-index: 1000; pointer-events: none;
  padding: 3px 8px; border-radius: 6px; background: #b3261e; color: #fff;
  font: 700 0.75rem/1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase;
}
@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  /* No transitions at all (Brief 18): a 0.01ms one on every property would make the table read its
     old positions while it fits itself to the window. */
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}