/*
 * The reel, shared by the battle page and the plain slots page.
 *
 * There were two of these and they were not the same object. The battle reel
 * was a horizontal strip of 64px rows that scrolls vertically and stops on a
 * centre line; the plain slots reel was three 160x180 boxes with a big emoji in
 * the middle. Two markups, two stylesheets, two sets of bugs, and no way to say
 * "same reel" about them because they were not.
 *
 * This is the one reel. A strip of cells, a picture, a name and a value, and a
 * centre line the strip stops on.
 *
 * Sizing: a rectangle at 85% of the page width.
 *
 *   85% rather than 100% because a reel that touches both edges reads as a
 *   banner rather than a machine, and the eye has nowhere to rest at the right
 *   edge. The remaining 15% is what makes it look placed rather than stretched.
 *
 *   A fixed aspect ratio rather than a fixed height, so the reel is a rectangle
 *   at every viewport. Height is derived from the width, which is what stops it
 *   becoming a letterbox on a wide screen or a tower on a phone.
 *
 * The cell height is a custom property rather than a literal, because the strip
 * is positioned by translateY in multiples of it. Two hardcoded 64s is how the
 * reel ends up stopping between rows.
 */

:root {
  --reel-w: 85%;
  /* Row height. The strip's translateY and the reel height are both multiples
     of this, so a cell can never be half-cut by the centre line. */
  --reel-cell-h: 76px;
  /* Tall enough for two cells plus a little, so the strip has somewhere to
     travel and the cut is not at a row boundary. */
  --reel-h: calc(var(--reel-cell-h) * 2 + 10px);
  --reel-icon: 46px;
}

.mm2reel {
  width: var(--reel-w);
  margin: 0 auto;
}

.mm2reel-frame {
  width: 100%;
  height: var(--reel-h);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: #080c15;
  border: 2px solid var(--c, #253550);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.75);
}

/* The fixed centre line the strip stops on. */
.mm2reel-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--c, #f0c040);
  opacity: 0.85;
  pointer-events: none;
  z-index: 3;
}

.mm2reel-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.mm2reel-cell {
  height: var(--reel-cell-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.mm2reel-cell .ic {
  width: var(--reel-icon);
  height: var(--reel-icon);
  object-fit: contain;
  flex: 0 0 auto;
}

.mm2reel-cell .ic.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

/* A lettered tile, used when an item has no image or its image fails.
   Matched to the seat colour rather than left grey, so a placeholder still
   reads as belonging to that player rather than as a broken page. */
.ic.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-weight: 900;
  font-size: 0.82rem;
  line-height: 1;
  color: var(--c, #94a3b8);
  background: color-mix(in srgb, var(--c, #94a3b8) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #94a3b8) 34%, transparent);
  text-transform: uppercase;
  user-select: none;
}

.mm2reel-cell .nm {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm2reel-cell .vl {
  font-size: 0.7rem;
  color: #8899aa;
}

.mm2reel-cell .mult {
  font-size: 0.68rem;
  font-weight: 800;
  color: #f0c040;
  background: #1a2540;
  border: 1px solid #253550;
  padding: 1px 6px;
  border-radius: 5px;
  flex: 0 0 auto;
}

/* The strip blurs while it moves, like a real reel. */
.mm2reel-frame.spinning .mm2reel-strip {
  filter: blur(1.1px);
}

.mm2reel-frame.spinning {
  animation: mm2reel-shake 0.09s linear infinite;
}

@keyframes mm2reel-shake {
  0% { transform: translateY(0); }
  50% { transform: translateY(0.6px); }
  100% { transform: translateY(0); }
}

.mm2reel-frame.landed {
  border-color: var(--c, #f0c040);
}

/* A narrow viewport: the reel keeps its share of the width but the row has to
   lose its padding and shrink its picture, or the name is all that fits. */
@media (max-width: 700px) {
  :root {
    --reel-cell-h: 62px;
    --reel-icon: 36px;
  }

  .mm2reel-cell {
    gap: 9px;
    padding: 0 10px;
  }

  .mm2reel-cell .nm {
    font-size: 0.72rem;
  }

  .mm2reel-cell .vl {
    font-size: 0.62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm2reel-frame.spinning,
  .mm2reel-frame.spinning .mm2reel-strip {
    animation: none;
    transition: none;
  }
}