/*!
 * Mini Pinball v1.1.0 — front-end styles.
 * Everything is scoped under .mp so a theme cannot leak in and this cannot
 * leak out. No resets, no global element selectors.
 */

.mini-pinball,
.mini-pinball * {
  box-sizing: border-box;
}

.mp {
  /* Palette */
  --mp-bg: #0b1220;
  --mp-panel: #111c30;
  --mp-panel-2: #1a2740;
  --mp-line: rgba(148, 163, 184, 0.22);
  --mp-text: #f1f5f9;
  --mp-text-dim: #cbd5e1;
  --mp-accent: #38bdf8;
  --mp-accent-strong: #0ea5e9;
  --mp-gold: #fbbf24;
  --mp-pink: #f472b6;
  --mp-green: #34d399;
  --mp-radius: 14px;

  container-type: inline-size;
  container-name: mp;

  display: block;
  max-width: var(--mp-max-width, 900px);
  margin: 0 auto;
  padding: 14px;
  background: var(--mp-bg);
  border: 1px solid var(--mp-line);
  border-radius: 18px;
  color: var(--mp-text);
  /* No font-family here on purpose: the widget takes the page's typeface.
     Only sizes, weights and spacing are ours, because the layout depends on
     them. Form controls get `font: inherit` in their own rules, since a
     <button> does not inherit the page font on its own. */
  font-size: 15px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior: contain;
}

.mp:focus {
  outline: none;
}

.mp:focus-visible {
  outline: 3px solid var(--mp-accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * Layout — stacked by default, side by side when the widget is wide
 * ------------------------------------------------------------------ */

.mp__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Narrow: table, then the controls right under it, then the scoreboard.
     The flipper buttons must never sit below a block the player has to
     scroll past. */
  grid-template-areas:
    "stage"
    "controls"
    "side";
  gap: 14px;
  align-items: start;
  justify-items: stretch;
}

.mp__stage { grid-area: stage; }
.mp__controls { grid-area: controls; }
.mp__side { grid-area: side; }

@container mp (min-width: 700px) {
  .mp__shell {
    grid-template-columns: minmax(0, 420px) minmax(230px, 320px);
    grid-template-areas:
      "stage side"
      "controls controls";
    justify-content: center;
  }
}

/* Browsers without container queries fall back to the viewport. */
@supports not (container-type: inline-size) {
  @media (min-width: 760px) {
    .mp__shell {
      grid-template-columns: minmax(0, 420px) minmax(230px, 320px);
      grid-template-areas:
        "stage side"
        "controls controls";
      justify-content: center;
    }
  }
}

/* ------------------------------- Stage ---------------------------- */

.mp__stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 380 / 650;
  max-height: min(78vh, 760px);
  max-height: min(78dvh, 760px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #020617;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  overflow: hidden;
}

@supports not (aspect-ratio: 1 / 1) {
  .mp__stage {
    height: 0;
    padding-top: 171%; /* 650 / 380 */
  }
  .mp__canvas {
    position: absolute;
    inset: 0;
    margin: auto;
  }
}

.mp__canvas {
  display: block;
  touch-action: none;
  max-width: 100%;
  max-height: 100%;
}

/* ----------------------------- Scoreboard -------------------------- */

.mp__side {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--mp-panel);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
}

.mp__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--mp-accent);
  /* Stays on one line whatever title the shortcode is given. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.mp__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--mp-panel-2);
  border-radius: 10px;
  min-width: 0;
}

.mp__stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mp-text-dim);
}

.mp__stat-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.mp__stat-value--score { color: var(--mp-gold); }
.mp__stat-value--best  { color: var(--mp-accent); }
.mp__stat-value--balls { color: var(--mp-pink); }

.mp__status {
  margin: 0;
  min-height: 2.6em;
  font-size: 13px;
  color: var(--mp-text-dim);
}

.mp__lb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--mp-line);
}

.mp__lb-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mp-text);
}

.mp__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.mp__badge--global {
  color: #052e1c;
  background: var(--mp-green);
}

.mp__badge--local {
  color: #0b1220;
  background: #94a3b8;
}

.mp__lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 230px;
  overflow-y: auto;
}

.mp__lb-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 5px 4px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 13px;
}

.mp__lb-row:last-child {
  border-bottom: none;
}

.mp__lb-rank {
  color: var(--mp-text-dim);
  font-variant-numeric: tabular-nums;
}

.mp__lb-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp__lb-score {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 700;
  color: var(--mp-gold);
}

.mp__lb-empty {
  padding: 8px 4px;
  font-size: 13px;
  color: var(--mp-text-dim);
}

.mp__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mp__tool {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--mp-text);
  background: var(--mp-panel-2);
  border: 1px solid var(--mp-line);
  border-radius: 10px;
  cursor: pointer;
}

.mp__tool:hover {
  border-color: var(--mp-accent);
}

/* ------------------------------ Controls --------------------------- */

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

.mp__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 10px 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--mp-text);
  background: var(--mp-panel-2);
  border: 1px solid var(--mp-line);
  border-radius: 12px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.08s linear, border-color 0.08s linear, transform 0.05s linear;
}

.mp__btn:hover {
  border-color: var(--mp-accent);
}

.mp__btn:focus-visible,
.mp__tool:focus-visible,
.mp__input:focus-visible {
  outline: 3px solid var(--mp-accent);
  outline-offset: 2px;
}

.mp__btn--flipper.is-active,
.mp__btn:active {
  background: var(--mp-accent);
  color: #06131f;
  border-color: #7dd3fc;
  transform: scale(0.98);
}

.mp__btn--launch {
  background: var(--mp-accent-strong);
  border-color: #7dd3fc;
  color: #04121d;
}

.mp__btn--primary {
  background: var(--mp-accent);
  border-color: #7dd3fc;
  color: #06131f;
}

.mp__hint {
  margin: 10px 2px 0;
  font-size: 12px;
  color: var(--mp-text-dim);
}

/* Keyboard hints are noise on a touch-only device. */
@media (hover: none) and (pointer: coarse) {
  .mp__hint {
    display: none;
  }
}

/* Very narrow containers: keep the three stat tiles on one line each. */
@container mp (max-width: 380px) {
  .mp__stat {
    padding: 6px 8px;
  }
  .mp__stat-value {
    font-size: 16px;
  }
  .mp__stat-label {
    font-size: 9px;
  }
}

.mp__btn-abbr {
  display: none;
}

/* Key hints belong on machines that have keys. */
.mp__btn-key {
  display: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

@media (hover: hover) and (pointer: fine) {
  .mp__btn-key {
    display: block;
  }
}

/* Until the widget has focus the keyboard does nothing, so say so. */
.mp__hint-activate {
  display: none;
  color: var(--mp-accent);
  font-weight: 600;
}

/* :focus-within needs no event plumbing and cannot fall out of sync. */
.mp:not(:focus-within) .mp__hint-activate {
  display: inline;
}

@container mp (max-width: 460px) {
  .mp__btn {
    font-size: 13px;
    min-height: 56px;
    padding: 10px 4px;
  }
  .mp__btn-full {
    display: none;
  }
  .mp__btn-abbr {
    display: block;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 460px) {
    .mp__btn-full { display: none; }
    .mp__btn-abbr { display: block; }
  }
}

/* ------------------------------ Overlay ---------------------------- */

.mp__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2, 6, 23, 0.9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 2;
}

.mp__overlay[hidden] {
  display: none;
}

.mp__card {
  width: 100%;
  max-width: 320px;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  text-align: center;
  background: var(--mp-panel);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
}

.mp__card-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mp-gold);
}

.mp__card-score {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 30px;
  font-weight: 800;
  color: var(--mp-text);
}

.mp__save {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--mp-line);
}

.mp__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mp-text-dim);
  text-align: left;
}

.mp__input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
  font-weight: 700;
  color: var(--mp-text);
  background: var(--mp-panel-2);
  border: 1px solid var(--mp-accent);
  border-radius: 10px;
}

.mp__note {
  margin: 0;
  font-size: 12px;
  color: var(--mp-text-dim);
  text-align: left;
}

.mp__help {
  margin: 0;
  padding-left: 18px;
  text-align: left;
  font-size: 13px;
  color: var(--mp-text-dim);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mp__card-actions {
  display: flex;
  gap: 8px;
}

.mp__card-actions .mp__btn {
  flex: 1 1 0;
  min-height: 46px;
}

.mini-pinball__noscript {
  margin: 0;
  padding: 16px;
  color: #f1f5f9;
  background: #111c30;
  border-radius: 12px;
}

/* --------------------------- Reduced motion ------------------------ */

@media (prefers-reduced-motion: reduce) {
  .mp__btn,
  .mp__tool {
    transition: none;
  }
  .mp__btn:active,
  .mp__btn--flipper.is-active {
    transform: none;
  }
}

/* ==================================================================== *
 * Theme armour
 *
 * A widget that gets pasted into somebody else's WordPress has to survive
 * whatever the theme does. Two patterns break it in practice:
 *
 *   1. A global reset such as
 *        *, ::after, ::before { background: transparent !important; }
 *      No amount of specificity beats that, so the few surfaces that must
 *      keep a background are re-declared here with !important as well.
 *
 *   2. Elementor's global kit styles elements as
 *        .elementor-kit-8 button { border-style: none; padding: 0; ... }
 *      which is (0,1,1) and outranks a single class like .mp__btn (0,1,0).
 *      Everything below is scoped as .mini-pinball .mp__x — two classes,
 *      (0,2,0) — so it wins on specificity alone.
 *
 * Typefaces are deliberately NOT armoured: the widget is meant to wear the
 * host site's font. Sizes, weights, line-heights and margins are, because a
 * theme heading rule (h2 at 44px) would otherwise wreck the layout. Buttons
 * and inputs carry `font: inherit` at normal specificity, so a theme that
 * styles them wins, and one that does not still gets the page font instead
 * of the browser's default form face.
 *
 * Everything here is scoped to our own root, so nothing leaks outwards.
 * ==================================================================== */

.mini-pinball .mp__stat-value,
.mini-pinball .mp__lb-score,
.mini-pinball .mp__card-score,
.mini-pinball .mp__lb-rank {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Surfaces that a transparent-everything reset would erase. */
.mini-pinball.mp {
  background: var(--mp-bg) !important;
}
.mini-pinball .mp__stage {
  background: #020617 !important;
}
.mini-pinball .mp__side,
.mini-pinball .mp__card {
  background: var(--mp-panel) !important;
}
.mini-pinball .mp__stat,
.mini-pinball .mp__input,
.mini-pinball .mp__btn,
.mini-pinball .mp__tool {
  background: var(--mp-panel-2) !important;
}
.mini-pinball .mp__overlay {
  background: rgba(2, 6, 23, 0.92) !important;
}
.mini-pinball .mp__badge--global {
  background: var(--mp-green) !important;
  color: #052e1c !important;
}
.mini-pinball .mp__badge--local {
  background: #94a3b8 !important;
  color: #0b1220 !important;
}

/* Controls: the theme strips border, radius and padding off every button. */
.mini-pinball .mp__btn {
  border: 1px solid var(--mp-line);
  border-radius: 12px;
  padding: 10px 8px;
  min-height: 52px;
  color: var(--mp-text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  width: auto;
}
.mini-pinball .mp__tool {
  border: 1px solid var(--mp-line);
  border-radius: 10px;
  padding: 8px 10px;
  min-height: 40px;
  color: var(--mp-text);
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  width: auto;
}
.mini-pinball .mp__btn--launch {
  background: var(--mp-accent-strong) !important;
  border-color: #7dd3fc;
  color: #04121d;
}
.mini-pinball .mp__btn--primary {
  background: var(--mp-accent) !important;
  border-color: #7dd3fc;
  color: #06131f;
}
.mini-pinball .mp__btn--flipper.is-active,
.mini-pinball .mp__btn:active {
  background: var(--mp-accent) !important;
  border-color: #7dd3fc;
  color: #06131f;
}
.mini-pinball .mp__btn-key {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Headings: themes give h2/h3 their own family, size and margins. */
.mini-pinball .mp__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--mp-accent);
}
.mini-pinball .mp__lb-title {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mp-text);
}
.mini-pinball .mp__card-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mp-gold);
}

/* Text blocks and the list, whose margins themes like to reset. */
.mini-pinball .mp__status,
.mini-pinball .mp__note,
.mini-pinball .mp__hint {
  margin: 0;
}
.mini-pinball .mp__hint {
  margin-top: 10px;
}
.mini-pinball .mp__lb-list,
.mini-pinball .mp__help {
  margin: 0;
  list-style: none;
}
.mini-pinball .mp__lb-list {
  padding-left: 0;
}
.mini-pinball .mp__help {
  list-style: disc;
  padding-left: 18px;
}
.mini-pinball .mp__input {
  border: 1px solid var(--mp-accent);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--mp-text);
  font-size: 16px;
  width: 100%;
  box-shadow: none;
}
.mini-pinball .mp__canvas {
  max-width: 100%;
  box-shadow: none;
  border: 0;
  border-radius: 0;
}

@container mp (max-width: 460px) {
  .mini-pinball .mp__btn {
    font-size: 13px;
    min-height: 56px;
    padding: 10px 4px;
  }
}