/* ==========================================================================
   Bingoplay - mobile-first shell stylesheet
   File   : css/shell-mobile-cea9e3.css
   Prefix : shell9e362-
   Canvas : 320-430px phone frame, centered on wide screens (430px cap)
   Palette: #FF7F50 / #2C2C2C / #FF8C00 / #BDC3C7 / #495057 / #FFEB3B
   Voice  : bold short headings, light body, mixed radii, square CTAs,
            pure-image game cards, center-raised bottom navigation.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --shell9e362-ink: #2C2C2C;            /* deep base background */
  --shell9e362-ink-deep: #232323;       /* bars and drawer */
  --shell9e362-ink-lift: #383d43;       /* elevated surface */
  --shell9e362-slate: #495057;          /* card surface / rails */
  --shell9e362-mist: #BDC3C7;           /* body text */
  --shell9e362-paper: #F2F4F5;          /* heading text */
  --shell9e362-coral: #FF7F50;          /* primary CTA */
  --shell9e362-amber: #FF8C00;          /* secondary accent */
  --shell9e362-sun: #FFEB3B;            /* highlight / active */
  --shell9e362-line: rgba(189, 195, 199, 0.16);
  --shell9e362-line-strong: rgba(189, 195, 199, 0.32);
  --shell9e362-r-card: 12px;
  --shell9e362-r-chip: 8px;
  --shell9e362-r-pill: 999px;
  --shell9e362-r-cta: 2px;              /* square-corner CTA language */
  --shell9e362-topbar-h: 56px;
  --shell9e362-bnav-h: 62px;
  --shell9e362-pad: 12px;
  --shell9e362-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--shell9e362-font);
  font-size: 14px;
  line-height: 1.65;
  color: var(--shell9e362-mist);
  background: #1d1d1d;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; }

a { color: var(--shell9e362-amber); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--shell9e362-font);
  color: var(--shell9e362-paper);
  margin: 0 0 8px;
  line-height: 1.25;
}

p { margin: 0 0 10px; }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--shell9e362-sun);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- phone canvas ---------- */
.shell9e362-shell {
  position: relative;
  width: 100%;
  max-width: 430px;                     /* the phone canvas cap */
  margin: 0 auto;
  min-height: 100vh;
  background: var(--shell9e362-ink);
  overflow-x: hidden;
}

/* ---------- top bar (compact brand rail) ---------- */
.shell9e362-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: var(--shell9e362-topbar-h);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--shell9e362-pad);
  background: rgba(33, 33, 33, 0.97);
  border-bottom: 1px solid var(--shell9e362-line-strong);
}

.shell9e362-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--shell9e362-paper);
  text-decoration: none;
}

.shell9e362-brand:hover, .shell9e362-brand:focus-visible { text-decoration: none; }

.shell9e362-logo {
  width: 34px;
  height: 34px;
  border-radius: var(--shell9e362-r-chip);
  border: 1px solid var(--shell9e362-line-strong);
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--shell9e362-slate);
}

.shell9e362-bname {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.shell9e362-bname b { color: var(--shell9e362-sun); font-weight: 800; }

.shell9e362-topacts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* ---------- buttons: square, high contrast ---------- */
.shell9e362-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--shell9e362-r-cta);
  font-family: var(--shell9e362-font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.shell9e362-btn:hover, .shell9e362-btn:focus-visible { text-decoration: none; }
.shell9e362-btn:active { transform: translateY(1px); }

.shell9e362-btn-solid {
  background: var(--shell9e362-coral);
  color: var(--shell9e362-ink);
}

.shell9e362-btn-solid:hover, .shell9e362-btn-solid:focus-visible {
  filter: brightness(1.08);
}

.shell9e362-btn-ghost {
  background: transparent;
  color: var(--shell9e362-sun);
  border-color: var(--shell9e362-amber);
}

.shell9e362-btn-ghost:hover, .shell9e362-btn-ghost:focus-visible {
  background: rgba(255, 140, 0, 0.14);
}

.shell9e362-btn-sun {
  background: var(--shell9e362-sun);
  color: var(--shell9e362-ink);
}

.shell9e362-btn-sun:hover, .shell9e362-btn-sun:focus-visible {
  filter: brightness(0.96);
}

.shell9e362-topacts .shell9e362-btn { padding: 0 10px; min-height: 40px; font-size: 12.5px; }

.shell9e362-burger {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--shell9e362-line-strong);
  border-radius: var(--shell9e362-r-chip);
  color: var(--shell9e362-mist);
  cursor: pointer;
}

.shell9e362-burger svg { display: block; }

/* ---------- side drawer menu (slide-in) ---------- */
.shell9e362-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(12, 12, 12, 0.66);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, visibility 0s linear 0.24s;
}

.shell9e362-scrim.shell9e362-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.24s ease;
}

.shell9e362-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(0px, calc(50% - 215px));    /* hug the canvas edge on wide screens */
  width: min(84vw, 300px);
  z-index: 90;
  background: var(--shell9e362-ink-deep);
  border-right: 1px solid var(--shell9e362-line-strong);
  transform: translateX(-110%);
  visibility: hidden;
  transition: transform 0.26s ease, visibility 0s linear 0.26s;
  overflow-y: auto;
  padding: 0 0 26px;
}

.shell9e362-drawer.shell9e362-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.26s ease;
}

.shell9e362-drawerhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--shell9e362-line);
}

.shell9e362-dlogo {
  width: 34px;
  height: 34px;
  border-radius: var(--shell9e362-r-chip);
  border: 1px solid var(--shell9e362-line-strong);
  object-fit: cover;
}

.shell9e362-dname {
  font-size: 16px;
  font-weight: 800;
  color: var(--shell9e362-paper);
}

.shell9e362-dclose {
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--shell9e362-line);
  border-radius: var(--shell9e362-r-chip);
  color: var(--shell9e362-mist);
  cursor: pointer;
}

.shell9e362-dlabel {
  margin: 16px 14px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--shell9e362-amber);
}

.shell9e362-dlink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: var(--shell9e362-mist);
  font-size: 14px;
  font-weight: 600;
  border-left: 3px solid transparent;
}

.shell9e362-dlink:hover, .shell9e362-dlink:focus-visible {
  background: rgba(255, 140, 0, 0.1);
  text-decoration: none;
  color: var(--shell9e362-paper);
}

.shell9e362-dlink-on {
  border-left-color: var(--shell9e362-sun);
  background: rgba(255, 235, 59, 0.08);
  color: var(--shell9e362-sun);
}

.shell9e362-dcta {
  margin: 20px 14px 0;
  width: calc(100% - 28px);
}

/* ---------- main flow ---------- */
.shell9e362-main {
  padding-top: calc(var(--shell9e362-topbar-h) + 10px);
  /* keep clear of the fixed bottom navigation */
  padding-bottom: calc(var(--shell9e362-bnav-h) + 40px + env(safe-area-inset-bottom));
}

.shell9e362-sec { padding: 4px var(--shell9e362-pad) 10px; }

.shell9e362-h1 {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin: 6px 0 10px;
}

.shell9e362-h1 em {
  font-style: normal;
  color: var(--shell9e362-sun);
}

.shell9e362-h2 {
  position: relative;
  font-size: 18.5px;
  font-weight: 800;
  margin: 26px 0 10px;
  padding-left: 12px;
}

.shell9e362-h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--shell9e362-coral), var(--shell9e362-amber));
}

.shell9e362-h3 {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 6px;
}

.shell9e362-lead { font-size: 14.5px; color: var(--shell9e362-mist); }

.shell9e362-prose p { font-size: 14px; }

.shell9e362-prose a { text-decoration: underline; text-underline-offset: 3px; }

.shell9e362-note {
  font-size: 12.5px;
  color: rgba(189, 195, 199, 0.82);
}

/* ---------- hero carousel ---------- */
.shell9e362-hero {
  position: relative;
  margin: 0 var(--shell9e362-pad) 6px;
  border: 1px solid var(--shell9e362-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--shell9e362-slate);
}

.shell9e362-crviewport { overflow: hidden; }

.shell9e362-crtrack {
  display: flex;
  transition: transform 0.45s ease;
}

.shell9e362-crslice {
  position: relative;
  display: block;
  flex: 0 0 100%;
  aspect-ratio: 5 / 2;
  min-height: 150px;
  text-decoration: none;
}

.shell9e362-crslice img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shell9e362-crbox {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 26px 12px 10px;
  background: linear-gradient(180deg, rgba(28, 28, 28, 0) 0%, rgba(28, 28, 28, 0.88) 62%);
}

.shell9e362-crtitle {
  font-size: 15.5px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.shell9e362-crtext {
  font-size: 11.5px;
  color: rgba(242, 244, 245, 0.92);
  line-height: 1.35;
}

.shell9e362-crcta {
  align-self: flex-start;
  margin-top: 4px;
  padding: 5px 10px;
  border-radius: var(--shell9e362-r-cta);
  background: var(--shell9e362-coral);
  color: var(--shell9e362-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.shell9e362-crdots {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.shell9e362-crdot {
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.shell9e362-crdot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(189, 195, 199, 0.55);
  transition: background 0.2s ease, transform 0.2s ease;
}

.shell9e362-crdot.shell9e362-dot-on::after {
  background: var(--shell9e362-sun);
  transform: scale(1.25);
}

/* ---------- direct answer callout ---------- */
.shell9e362-answer {
  margin: 6px var(--shell9e362-pad) 4px;
  padding: 13px 12px;
  background: var(--shell9e362-ink-lift);
  border-left: 3px solid var(--shell9e362-sun);
  border-radius: 0 var(--shell9e362-r-card) var(--shell9e362-r-card) 0;
}

.shell9e362-answer .shell9e362-h3 { color: var(--shell9e362-sun); }

/* ---------- quick Q&A pairs ---------- */
.shell9e362-qa {
  margin: 12px 0 0;
  padding: 11px 12px;
  background: rgba(73, 80, 87, 0.35);
  border: 1px solid var(--shell9e362-line);
  border-radius: var(--shell9e362-r-card);
}

.shell9e362-qa .shell9e362-h3 {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
}

.shell9e362-qa .shell9e362-h3::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 1px;
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: var(--shell9e362-amber);
  color: var(--shell9e362-ink);
  font-size: 10px;
  font-weight: 800;
}

.shell9e362-qa p { margin: 0; font-size: 13px; }

/* ---------- game shelves ---------- */
.shell9e362-shelfhead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 4px;
}

.shell9e362-catname {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--shell9e362-paper);
}

.shell9e362-catn {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--shell9e362-ink);
  background: var(--shell9e362-sun);
  border-radius: var(--shell9e362-r-chip);
  padding: 2px 7px;
}

.shell9e362-catnote {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: rgba(189, 195, 199, 0.85);
}

.shell9e362-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 8px;
}

@media (min-width: 400px) {
  .shell9e362-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.shell9e362-gcard { min-width: 0; }

.shell9e362-gthumb {
  display: block;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--shell9e362-line);
  border-radius: var(--shell9e362-r-chip);
  overflow: hidden;
  background: linear-gradient(150deg, #565e68 0%, #3d434b 55%, #34383f 100%);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.shell9e362-gthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shell9e362-gcard:hover .shell9e362-gthumb,
.shell9e362-gcard:focus-within .shell9e362-gthumb {
  transform: translateY(-3px);          /* light card lift */
  border-color: var(--shell9e362-sun);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.38);
}

.shell9e362-gname {
  display: block;
  margin-top: 5px;
  min-height: 28px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
  color: var(--shell9e362-mist);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.shell9e362-gname:hover, .shell9e362-gname:focus-visible {
  color: var(--shell9e362-sun);
  text-decoration: none;
}

/* ---------- feature grid ---------- */
.shell9e362-feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
}

.shell9e362-feat {
  padding: 11px 10px;
  background: rgba(73, 80, 87, 0.38);
  border: 1px solid var(--shell9e362-line);
  border-radius: var(--shell9e362-r-card);
}

.shell9e362-feat strong {
  display: block;
  margin-bottom: 3px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--shell9e362-amber);
}

.shell9e362-feat p { margin: 0; font-size: 12px; line-height: 1.5; }

/* ---------- numbered steps ---------- */
.shell9e362-steps {
  list-style: none;
  counter-reset: shell9e362-step;
  margin: 10px 0 12px;
}

.shell9e362-steps li {
  position: relative;
  counter-increment: shell9e362-step;
  padding: 0 0 10px 34px;
  font-size: 13.5px;
}

.shell9e362-steps li::before {
  content: counter(shell9e362-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--shell9e362-coral);
  color: var(--shell9e362-ink);
  font-size: 12px;
  font-weight: 800;
}

/* ---------- check list ---------- */
.shell9e362-checks {
  list-style: none;
  margin: 8px 0 12px;
}

.shell9e362-checks li {
  position: relative;
  padding: 0 0 8px 20px;
  font-size: 13.5px;
}

.shell9e362-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--shell9e362-sun);
}

/* ---------- extended footer (homepage extras) ---------- */
.shell9e362-xfoot {
  margin: 28px var(--shell9e362-pad) 6px;
  padding-top: 16px;
  border-top: 1px solid var(--shell9e362-line-strong);
  display: grid;
  gap: 20px;
}

.shell9e362-xftitle {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--shell9e362-amber);
}

.shell9e362-xfpromos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.shell9e362-xfpromos .shell9e362-btn { width: 100%; padding: 0 6px; font-size: 12px; }

.shell9e362-xfbrand { margin: 0; font-size: 12.5px; color: rgba(189, 195, 199, 0.85); }

.shell9e362-xfdir {
  list-style: none;
  columns: 2;
  column-gap: 14px;
}

.shell9e362-xfdir li {
  break-inside: avoid;
  margin: 0 0 7px;
  font-size: 12.5px;
}

.shell9e362-xfdir a { color: var(--shell9e362-mist); }
.shell9e362-xfdir a:hover, .shell9e362-xfdir a:focus-visible { color: var(--shell9e362-sun); }

.shell9e362-xfdisclaimer {
  margin: 0;
  padding: 10px 11px;
  border: 1px dashed var(--shell9e362-line-strong);
  border-radius: var(--shell9e362-r-chip);
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(189, 195, 199, 0.75);
}

/* ---------- common footer (copyright only) ---------- */
.shell9e362-foot {
  margin-top: 18px;
  padding: 12px var(--shell9e362-pad) 8px;
  border-top: 1px solid var(--shell9e362-line);
  text-align: center;
}

.shell9e362-foot p {
  margin: 0;
  font-size: 11.5px;
  color: rgba(189, 195, 199, 0.68);
}

/* ---------- bottom navigation (center-raised) ---------- */
.shell9e362-bnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  height: calc(var(--shell9e362-bnav-h) + env(safe-area-inset-bottom));
  padding: 4px 2px calc(6px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(35, 35, 35, 0.96), #1f1f1f);
  border-top: 1px solid var(--shell9e362-line-strong);
}

.shell9e362-bnavlink {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-height: 44px;
  padding: 3px 1px 0;
  color: var(--shell9e362-mist);
  text-decoration: none;
  border-radius: var(--shell9e362-r-chip);
  transition: color 0.16s ease, transform 0.16s ease;
}

.shell9e362-bnavlink:hover, .shell9e362-bnavlink:focus-visible {
  text-decoration: none;
  color: var(--shell9e362-paper);
}

.shell9e362-bnavlink:active { transform: translateY(1px); }

.shell9e362-bnavlink svg { display: block; }

.shell9e362-bnavlabel {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
  opacity: 0.85;
}

/* active state: contrast inversion */
.shell9e362-bnavlink.shell9e362-on {
  color: var(--shell9e362-ink);
  background: var(--shell9e362-sun);
}

.shell9e362-bnavlink.shell9e362-on .shell9e362-bnavlabel { opacity: 1; }

/* raised center hub (promo) */
.shell9e362-bnavhub { align-self: start; }

.shell9e362-bnavhub .shell9e362-hubbtn {
  width: 54px;
  height: 54px;
  margin-top: -22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(255, 235, 59, 0.55);
  background: linear-gradient(160deg, var(--shell9e362-coral) 0%, var(--shell9e362-amber) 100%);
  box-shadow: 0 6px 18px rgba(255, 127, 80, 0.35), 0 2px 0 rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.shell9e362-bnavhub .shell9e362-hubbtn:hover,
.shell9e362-bnavhub .shell9e362-hubbtn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(255, 127, 80, 0.45), 0 2px 0 rgba(0, 0, 0, 0.45);
}

.shell9e362-bnavhub .shell9e362-hubbtn:active { transform: translateY(0); }

.shell9e362-bnavhub .shell9e362-bnavlabel { color: var(--shell9e362-sun); opacity: 1; }

/* ---------- wide-screen framing ---------- */
@media (min-width: 431px) {
  body { background: #171717; }
  .shell9e362-shell {
    border-left: 1px solid rgba(189, 195, 199, 0.14);
    border-right: 1px solid rgba(189, 195, 199, 0.14);
    box-shadow: 0 0 44px rgba(0, 0, 0, 0.5);
  }
}

/* ---------- small phones ---------- */
@media (max-width: 345px) {
  .shell9e362-h1 { font-size: 22px; }
  .shell9e362-topacts .shell9e362-btn { padding: 0 7px; font-size: 11.5px; }
  .shell9e362-crtitle { font-size: 14px; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .shell9e362-crtrack,
  .shell9e362-drawer,
  .shell9e362-scrim,
  .shell9e362-gthumb,
  .shell9e362-btn,
  .shell9e362-bnavlink,
  .shell9e362-bnavhub .shell9e362-hubbtn {
    transition: none;
  }
}