body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}


.multiplicand-blur {
  filter: blur(5px);
  transition: filter 0.3s ease;
}
.multiplicand-blur.reveal {
  filter: none;
}
.no-select {
  user-select: none;         /* Prevent text highlighting */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.no-copy {
  pointer-events: none;      /* Disable interaction */
}

.accordion-button:focus {
    box-shadow: none;
}

.table-warning td,
.table-light td,
.table-secondary td,
.table-active td {
  font-weight: 500;
}

#leaderboardTable tr.top-1-3 td {
  background-color: rgba(0, 255, 0, 0) !important;
  font-weight: 500;
}

#leaderboardTable tr.top-4-15 td {
  background-color: rgba(255, 255, 0, 0) !important;
}

#leaderboardTable tr td {
  border-bottom: 1px solid #dee2e6 !important;
}

/* Stronger, brighter hero */
.mm-hero{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(0, 235, 255, 0.40), transparent 60%),
    radial-gradient(1000px 500px at 110% 20%, rgba(0, 255, 170, 0.35), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #101a31 100%);
}
.mm-hero-gradient{ background: linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,.35) 55%, rgba(11,18,32,1) 100%); }

/* Make hero copy brighter and crisper */
.mm-hero .lead{ color: rgba(255,255,255,0.92)!important; }
.mm-hero .badge.bg-success-subtle{
  background: linear-gradient(90deg, rgba(23,195,178,.22), rgba(0,212,255,.22))!important;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(2px);
}

/* Gradient title + subtle glow */
.mm-title-gradient{
  background: linear-gradient(90deg, #8efcff 0%, #17c3b2 45%, #f7c948 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 8px 24px rgba(23,195,178,.25);
}

/* Boost button presence */
.btn-teal{
  --bs-btn-bg:#17c3b2; --bs-btn-border-color:#17c3b2;
  --bs-btn-hover-bg:#12a99c; --bs-btn-hover-border-color:#12a99c;
  --bs-btn-active-bg:#0f8f84; --bs-btn-active-border-color:#0f8f84;
  box-shadow: 0 8px 24px rgba(23,195,178,.28);
}
.btn-outline-light{ border-width:2px; }

/* Make the right-hand floaters slightly brighter */
.mm-floater{ color: rgba(255,255,255,0.95); }

/* Optional: animated accent underline for key words */
.mm-underline{
  position: relative; display: inline-block;
}
.mm-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background: linear-gradient(90deg, #00e0ff, #17c3b2, #f7c948);
  border-radius: 3px; opacity:.9; filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
  animation: mmShimmer 3s linear infinite;
  background-size: 200% 100%;
}
@keyframes mmShimmer{ 0%{background-position:0% 0} 100%{background-position:200% 0} }


/* Addition/Subtraction: columned rows (match multiplication look) */
.mm-qrow{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}

.mm-num-left{
  width:var(--w-left,10ch); text-align:right; font-weight:700;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.mm-op{width:2.5ch;text-align:center;font-weight:700}
.mm-num-right{
  width:var(--w-right,10ch); text-align:right;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.mm-eq{width:2ch;text-align:center;font-weight:700}

.mm-ans{flex:0 0 var(--w-ans,22ch); max-width:var(--w-ans,22ch)}
/* mobile: let input drop below neatly */
@media (max-width:576px){
  .mm-qrow{flex-wrap:wrap}
  .mm-ans{flex:1 1 100%;max-width:100%;margin-top:.25rem}
}