:root {
  --bg: #1b1036;
  --bg2: #3d1a5b;
  --ink: #1b1036;
  --paper: #fffdf7;
  --muted: #6b6b80;
  --accent: #ffcc00;
  --good: #2ecc71;
  --bad: #e74c3c;
  --radius: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
/* Page-level scroll settings go on html ONLY: browsers hand them to the window, the one thing that
   scrolls. On body they made body its own scroll box (with nothing to scroll) that swallowed finger
   swipes, so long pages could not be scrolled on Android Chrome.
   overflow-x: slide-in animations must never cause a sideways scroll.
   overscroll-behavior-y: no accidental pull-to-refresh mid-game (sideways back-swipes still work). */
html { background: var(--bg2); overflow-x: hidden; overscroll-behavior-y: none; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(160deg, var(--bg), var(--bg2)) fixed;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}
#app {
  max-width: 460px;
  margin: 0 auto;
  padding: 12px 14px 24px; /* browsers without env()/max() keep this */
  padding: 12px 14px calc(24px + env(safe-area-inset-bottom));
  padding-top: max(12px, env(safe-area-inset-top));
  /* Keep clear of notches / camera cutouts / rounded corners (viewport-fit=cover). */
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
h1, h2, h3, p { margin: 0; }
.small { font-size: 13px; opacity: .75; }

/* ---------- start ---------- */
#view-start { text-align: center; padding-top: 10px; }
.logo-big { font-size: 56px; line-height: 1; animation: wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(-8deg) scale(1.05); } }
/* One long word that can't wrap: shrink it with the screen width so narrow screens (or big text
   settings) never force the whole page to zoom out. break-all only acts if it still can't fit. */
h1 { font-size: 40px; font-size: clamp(20px, 10.5vw, 40px); word-break: break-all; font-weight: 900; letter-spacing: 2px; margin-top: 4px; color: var(--accent); text-shadow: 0 3px 0 #b8860b; }
.tag { margin-top: 6px; font-size: 17px; }
.today { margin-top: 6px; font-size: 14px; opacity: .8; }

.menu { display: grid; gap: 10px; margin: 18px 0; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.btn {
  display: block; width: 100%;
  padding: 13px 16px;
  border: 0; border-radius: var(--radius);
  background: rgba(255,255,255,.12);
  color: #fff; font-size: 17px; font-weight: 700;
  text-decoration: none; text-align: center;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
  transition: transform .06s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.btn.primary { background: var(--accent); color: var(--ink); box-shadow: 0 4px 0 #b8860b; }
.btn.big { font-size: 20px; padding: 16px; }
.btn.reward { background: #2667d9; }
.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; }
.btn.reward small { font-weight: 500; }
.btn:disabled { opacity: .5; }
.link { background: none; border: 0; color: #fff; opacity: .8; font-size: 15px; padding: 8px; min-height: 44px; }
.link.icon { min-width: 44px; font-size: 20px; padding: 4px; }
.hud-btns { display: flex; gap: 2px; }
.link.danger.armed { color: #fff; background: #c0392b; border-radius: 10px; opacity: 1; padding: 8px 12px; }
[tabindex="-1"]:focus { outline: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.spotting [tabindex="0"]:focus-visible { outline: 3px dashed var(--accent); }
/* On the white tip screen a yellow ring is nearly invisible: use dark ink there. */
.screen :focus-visible, .explain :focus-visible { outline-color: var(--ink); }
/* Spot focus ring: dark outline + white inner ring, so it shows on light card parts AND on the dark
   store band; inset so the card's rounded corners don't clip it. */
.spotting .screen [tabindex="0"]:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; box-shadow: inset 0 0 0 6px #fff; }
/* The timer bar would cover an inset ring: draw its ring outside, on the white tablet. */
.spotting .screen .timer:focus-visible { outline-offset: 3px; box-shadow: none; }
.intro { text-align: left; background: #2a1650; border-radius: 18px; padding: 20px; }
.intro h2 { margin-bottom: 10px; }
.intro ul { margin: 0 0 16px; padding-left: 0; list-style: none; display: grid; gap: 8px; font-size: 16px; }
.intro .link { width: 100%; }
.k-hint { display: none; }
@media (hover: hover) and (pointer: fine) { .k-hint { display: inline; } }

.card {
  background: rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 12px 0;
  text-align: left;
}
.card h3 { font-size: 16px; margin-bottom: 8px; }
.card ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.card.promise { border: 2px dashed rgba(255,204,0,.6); }
.card.played { text-align: center; background: rgba(46,204,113,.18); }
.card.played p { margin-bottom: 10px; }
.privacy { margin-top: 8px; }

/* ---------- play ---------- */
.hud { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 15px; min-height: 30px; }
.hud2 { font-size: 14px; opacity: .9; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
#hud-money { color: var(--accent); }
/* Each new screen slides in from 40 px to the right: clip sideways here ("clip" keeps vertical
   overflow such as badges visible, and is not a scroll box); html's overflow-x is the fallback. */
#stage { position: relative; overflow-x: clip; }

.screen {
  background: var(--paper);
  color: var(--ink);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  animation: slidein .25s ease-out;
}
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
.store { display: flex; gap: 10px; align-items: center; background: var(--c); color: var(--on, #fff); padding: 10px 14px; }
.store .logo { font-size: 30px; background: rgba(255,255,255,.25); border-radius: 12px; width: 46px; height: 46px; display: grid; place-items: center; }
.store h2 { font-size: 19px; }
.store p { font-size: 13px; }

.staff { display: flex; gap: 10px; align-items: center; padding: 10px 14px 4px; }
.staff .face { font-size: 34px; position: relative; }
.staff .eyes { position: absolute; font-size: 16px; right: -8px; top: -6px; font-style: normal; animation: stare 1s ease-in-out infinite; }
@keyframes stare { 50% { transform: scale(1.3); } }
.bubble { background: #efeaf7; padding: 8px 12px; border-radius: 14px 14px 14px 4px; font-size: 14px; flex: 1; }
.staff.staring .bubble { background: #ffe1e1; font-weight: 700; }

.receipt { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; font-size: 15px; border-bottom: 2px dashed #ddd; }
.self { margin: 8px 14px 0; padding: 6px 10px; border-radius: 10px; background: #fff3c4; font-size: 13px; display: inline-block; }

.tablet { position: relative; margin: 10px; padding: 12px; border-radius: 16px; background: #fff; border: 2px solid #e8e4f0; }
.timer { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; position: relative; margin-bottom: 10px; }
.timer .bar { height: 100%; background: var(--c, #555); transform-origin: left; }
.timer.urgent { height: 22px; border-radius: 6px; background: #ffe3e3; }
.timer.urgent .bar { background: #ff8a80; animation: pulse .5s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .6; } }
/* Dark red label on light reds: readable whether the bar is full or empty. */
.timer .tlabel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #6b0000; }

.q { font-size: 22px; text-align: center; }
.base { text-align: center; font-size: 13px; color: var(--muted); margin: 2px 0 10px; }

/* minmax(0, 1fr) + width-based text: all three tips always fit, even 240 px wide. */
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opt {
  position: relative;
  border: 2px solid #d9d3e6; border-radius: 14px;
  background: #f7f5fb; color: var(--ink);
  padding: 14px 4px 10px; min-height: 76px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.opt b { font-size: 22px; font-size: clamp(15px, 6vw, 22px); }
.opt small { font-size: 12px; color: var(--muted); }
.opt.sel { border-color: var(--c, #333); background: var(--c, #333); color: var(--on, #fff); }
.opt.sel small { color: inherit; }
.opt .pop { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-style: normal; font-weight: 800; background: var(--accent); color: var(--ink); border-radius: 8px; padding: 2px 6px; }

.pay { width: 100%; margin-top: 10px; padding: 14px; border: 0; border-radius: 14px; background: var(--c, #333); color: var(--on, #fff); font-size: 17px; font-weight: 800; }
.notip { width: 100%; margin-top: 8px; padding: 12px; border: 2px solid #d9d3e6; border-radius: 14px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 700; }
.notip.ghost { width: auto; display: block; margin: 12px auto 0; padding: 4px 8px; border: 0; background: none; color: #c9c6cf; font-size: 11px; font-weight: 400; }

/* The second ask replaces the tablet's content, so the tablet grows to fit it. */
.tablet.asking > :not(.double) { display: none; }
.double { animation: slidein .2s ease-out; }

.stamp {
  position: absolute; left: 50%; top: 40%;
  transform: translate(-50%, -50%) rotate(-10deg);
  font-size: 34px; font-weight: 900; padding: 8px 18px; white-space: nowrap;
  border: 5px solid; border-radius: 12px; background: rgba(255,255,255,.92);
  animation: stamp .3s ease-out;
  pointer-events: none;
}
.stamp.paid { color: var(--bad); }
.stamp.free { color: #1e9e57; }
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-10deg) scale(2.2); opacity: 0; } }

/* spot mode */
/* Pulses its background only, so the text keeps full contrast. */
.spot-banner { background: var(--accent); color: var(--ink); font-weight: 800; text-align: center; padding: 8px; border-radius: 12px; margin-bottom: 8px; animation: bannerPulse .6s ease-in-out infinite alternate; }
@keyframes bannerPulse { to { background: #ffe680; } }
.spotting .screen { cursor: crosshair; }
.reveal { outline: 4px solid var(--bad); outline-offset: 2px; border-radius: 10px; animation: flash .5s ease-in-out 3; }
@keyframes flash { 50% { outline-color: var(--accent); } }
.explain {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 460px; max-height: 60vh; max-height: 60dvh; overflow: auto;
  background: #fff; color: var(--ink);
  border-radius: 20px 20px 0 0; padding: 16px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0,0,0,.4);
  animation: up .25s ease-out; z-index: 20;
}
@keyframes up { from { transform: translate(-50%, 100%); } }
.explain.ok h3 { color: #1e9e57; }
.explain.miss h3 { color: #c0392b; }
.explain p { font-size: 13px; color: var(--muted); margin: 4px 0; }
.explain ul { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.explain li { background: #f4f1f9; border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.explain li.hit { background: #d8f7e4; }
.explain li span { display: block; font-size: 13px; color: #444; margin-top: 2px; }
/* The button stays visible at the bottom of the panel even when the trick list scrolls. */
.explain [data-act=topay] { position: sticky; bottom: 0; box-shadow: 0 -8px 12px #fff; }

/* keyboard hints: only on devices with a mouse (desktop) */
.k { display: none; }
@media (hover: hover) and (pointer: fine) {
  .k {
    display: inline-block; margin-left: 6px; padding: 0 5px; min-width: 16px;
    font: 700 11px/16px system-ui, sans-serif; text-align: center;
    border: 1px solid currentColor; border-radius: 4px; vertical-align: middle;
  }
  .opt .k { position: absolute; right: 6px; bottom: 6px; margin: 0; }
  .notip.ghost .k { font-size: 9px; line-height: 12px; }
}

/* ---------- end ---------- */
.end-head { text-align: center; font-weight: 700; font-size: 17px; margin: 6px 0 12px; }
.receipt-card {
  background: var(--paper); color: var(--ink);
  text-align: center; padding: 22px 16px 26px;
  border-radius: 16px 16px 0 0;
  position: relative;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%;
}
.receipt-card .big { font-size: 56px; font-size: clamp(34px, 15vw, 56px); font-weight: 900; color: #d62828; line-height: 1.1; }
.receipt-card .sub { color: var(--muted); font-size: 15px; }
.receipt-card .label { margin-top: 14px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.receipt-card .title { font-size: 28px; font-weight: 900; color: #7209b7; }
.receipt-card .quip { font-style: italic; font-size: 15px; margin-top: 4px; }
.receipt-card .cells { font-size: min(20px, 5.6vw); margin-top: 12px; white-space: nowrap; }

.day-list li { display: flex; gap: 10px; align-items: center; }
.day-list .e { font-size: 22px; }
.day-list .n { flex: 1; font-size: 15px; }
.day-list small { display: block; opacity: .7; font-size: 12px; }
.tricks li { font-size: 14px; }
#copy-fallback { width: 100%; border-radius: 10px; padding: 10px; font: 14px/1.4 monospace; }

/* ---------- stats ---------- */
.view-title { text-align: center; font-size: 26px; margin: 8px 0 4px; }
.center { text-align: center; }
/* minmax(0, 1fr): columns may shrink below their content, so big totals never push past 320 px. */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.tile { background: rgba(255,255,255,.08); border-radius: 12px; padding: 12px 6px; text-align: center; }
.tile b { display: block; font-size: clamp(15px, 5.4vw, 20px); color: var(--accent); overflow-wrap: anywhere; }
.tile b small { display: block; font-size: 11px; color: #fff; opacity: .7; font-weight: 500; white-space: nowrap; }
.tile span { font-size: 12px; opacity: .8; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 140px; }
/* min-width 0: 14 columns must fit a 320 px phone even when every bar has a label. */
.bar-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bar-col .bar { width: 100%; border-radius: 4px 4px 0 0; }
.bar-col .pct { font-size: 9px; opacity: .8; margin-bottom: 2px; }
.bar-col .d { font-size: 10px; opacity: .6; margin-top: 4px; }
.bar.g { background: var(--good); } .bar.y { background: #f1c40f; } .bar.o { background: #e67e22; } .bar.r { background: var(--bad); }
.bar.none { height: 2px !important; background: rgba(255,255,255,.2); }
.footer-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; display: inline-flex; align-items: center; }
.link.danger { color: #ff9b9b; }

/* ---------- about / privacy page ---------- */
.doc { line-height: 1.5; }
.doc h1 { font-size: 28px; text-shadow: none; letter-spacing: 0; margin: 10px 0 4px; word-break: normal; }
.doc p + p { margin-top: 8px; }
.doc h2 { font-size: 19px; margin: 22px 0 6px; color: var(--accent); }
.doc p, .doc li { font-size: 15px; }
.doc ul { padding-left: 20px; margin: 6px 0; }
.doc a { color: var(--accent); }
.doc a.btn.primary { color: var(--ink); }
.doc .back { margin-top: 28px; }

/* ---------- modal / ads / toast ---------- */
/* Flex + margin:auto centres dialogs but lets tall ones scroll from the top (short landscape phones). */
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; background: rgba(10,5,25,.95); display: flex; overflow-y: auto;
  padding: 16px; /* older browsers without env()/max() keep this */
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.modal > * { margin: auto; }
.modal-box { width: 100%; max-width: 420px; display: grid; gap: 10px; text-align: center; }
.modal-box img { width: 100%; max-height: 62vh; max-height: 62dvh; object-fit: contain; border-radius: 12px; }

.ad-box { width: 100%; max-width: 380px; display: grid; gap: 12px; text-align: center; }
.ad-tag { font-size: 12px; letter-spacing: 1px; font-weight: 800; color: var(--accent); }
.ad-card { color: var(--ink); border-radius: 18px; padding: 36px 20px; }
.ad-emoji { font-size: 72px; }
.ad-brand { font-size: 28px; font-weight: 900; margin-top: 8px; }
.ad-line { font-size: 16px; margin-top: 6px; }
.ad-status { font-size: 15px; }

#toast {
  position: fixed; left: 50%; top: 14px; top: calc(14px + env(safe-area-inset-top)); transform: translate(-50%, -150%);
  max-width: 92vw; background: #111; color: #fff; padding: 10px 16px; border-radius: 12px;
  font-weight: 700; font-size: 15px; z-index: 60; transition: transform .2s, visibility .2s; text-align: center;
  pointer-events: none; /* never blocks the Mute/Quit buttons underneath */
  visibility: hidden; /* moved up by its own height only: an empty or short toast would peek out */
}
#img-preview:not([src]) { display: none; } /* no broken-image icon while the image is being made */
#toast.on { transform: translate(-50%, 0); visibility: visible; }

@media (min-width: 700px) {
  #app { padding-top: max(28px, env(safe-area-inset-top)); }
}
/* Any screen or window up to 760 px high (small phones, short desktop windows and portal frames):
   the whole tip screen must fit without scrolling while the timer runs. Comes first, so the
   landscape layouts below override it where they apply. */
@media (max-height: 760px) {
  .hud { min-height: 26px; }
  .hud2 { margin-bottom: 4px; }
  .store { padding: 7px 12px; }
  .store .logo { width: 36px; height: 36px; font-size: 22px; border-radius: 10px; }
  .store h2 { font-size: 17px; }
  .staff { padding: 6px 12px 2px; }
  .staff .face { font-size: 28px; }
  .bubble { font-size: 13px; padding: 6px 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .receipt { padding: 6px 12px; font-size: 14px; }
  .self { margin: 6px 12px 0; padding: 4px 8px; font-size: 12px; }
  .tablet { margin: 8px; padding: 9px; }
  .timer { margin-bottom: 7px; }
  .opt { min-height: 56px; padding: 8px 4px 6px; }
  .opt b { font-size: 20px; font-size: clamp(15px, 6vw, 20px); }
  .q { font-size: 18px; }
  .base { margin: 0 0 8px; }
  .pay, .notip { padding: 9px; }
  .pay { margin-top: 8px; }
  .notip { margin-top: 6px; }
  .spot-banner { padding: 4px 6px; margin-bottom: 4px; font-size: 13px; }
  .spot-step .hud2 { display: none; }
}
/* Phone held sideways: store info left, tip tablet right, so nothing needs scrolling mid-timer. */
/* Short landscape screens: phones held sideways and wide portal frames on desktop (e.g. 960×540). */
@media (orientation: landscape) and (max-height: 720px) and (min-aspect-ratio: 4/3) {
  .modal-box img { max-height: 48vh; max-height: 48dvh; }
  #app { max-width: 820px; padding-top: max(6px, env(safe-area-inset-top)); }
  .hud { min-height: 24px; font-size: 14px; }
  .hud2 { margin-bottom: 4px; }
  .screen { display: grid; grid-template-columns: 1fr 1.15fr; align-items: start; }
  .screen > :not(.tablet) { grid-column: 1; }
  .screen > .tablet { grid-column: 2; grid-row: 1 / span 5; margin: 8px; }
  .store { padding: 8px 12px; }
  .store .logo { width: 38px; height: 38px; font-size: 24px; }
  .opt { min-height: 58px; padding: 10px 4px 8px; }
  .q { font-size: 18px; }
  .pay { padding: 10px; margin-top: 8px; }
  .notip { padding: 8px; margin-top: 6px; }
  .explain { max-width: 820px; max-height: 70vh; max-height: 70dvh; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}
/* Very short screens of any shape (phones held sideways leave ~300 px under the browser bar; also
   split-screen windows and tiny phones): tighten everything so as much of the tip screen as
   possible, ideally including "No tip", fits without scrolling. */
@media (max-height: 430px) {
  #app { padding-top: max(2px, env(safe-area-inset-top)); padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .hud { min-height: 20px; font-size: 13px; }
  .hud .link.icon { min-height: 32px; min-width: 36px; font-size: 17px; }
  .hud2 { margin-bottom: 2px; font-size: 13px; }
  .store { padding: 6px 10px; }
  .store .logo { width: 32px; height: 32px; font-size: 20px; border-radius: 9px; }
  .store h2 { font-size: 16px; }
  .staff { padding: 6px 10px 2px; }
  .staff .face { font-size: 26px; }
  .bubble { font-size: 13px; padding: 6px 10px; }
  .receipt { padding: 6px 10px; font-size: 14px; }
  .self { margin: 6px 10px 0; padding: 4px 8px; font-size: 12px; }
  .screen > .tablet { margin: 4px 6px; }
  .tablet { padding: 6px 8px; }
  .timer { margin-bottom: 5px; }
  .timer.urgent { height: 18px; }
  .q { font-size: 16px; }
  .base { margin: 0 0 5px; }
  .opt { min-height: 44px; padding: 5px 4px; }
  .opt b { font-size: 18px; font-size: clamp(15px, 6vw, 18px); }
  .opt .pop { top: -9px; }
  .pay { padding: 8px; font-size: 15px; margin-top: 6px; }
  .notip { padding: 6px; margin-top: 5px; font-size: 14px; }
  .spot-banner { padding: 2px 6px; margin-bottom: 3px; font-size: 13px; }
  .spot-step .hud2 { display: none; } /* frees room for the Spot banner during the spot timer */
  .stamp { font-size: 26px; }
}
/* Browsers without overflow: clip (Safari before 16, Chrome before 90) might let the page pan
   sideways during the slide-ins: fade in place there instead. Last, so it beats the shorthands. */
@keyframes fadein { from { opacity: 0; } }
@supports not (overflow: clip) { .screen, .double { animation-name: fadein; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}