:root {
  color-scheme: dark;
  --mf-ink: #f7fbff;
  --mf-muted: #b8c7d3;
  --mf-deep: #04131e;
  --mf-panel: #092537;
  --mf-panel-soft: #103448;
  --mf-aqua: #5ee9e6;
  --mf-aqua-dark: #169cab;
  --mf-gold: #ffc552;
  --mf-coral: #ff786f;
  --mf-line: rgba(117, 222, 229, 0.26);
  --mf-shadow: 0 24px 70px rgba(0, 5, 10, 0.48);
  --mf-table-left: 26.68%;
  --mf-table-width: 46.77%;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--mf-deep);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--mf-ink);
  background:
    radial-gradient(circle at 13% 8%, rgba(35, 210, 204, 0.13), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(255, 174, 66, 0.1), transparent 24rem),
    linear-gradient(145deg, #061c29 0%, #03111b 52%, #071a26 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

.mf-skip-link {
  position: fixed;
  left: 16px;
  top: 10px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 12px;
  color: #061520;
  background: #fff2b8;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.mf-skip-link:focus {
  transform: translateY(0);
}

.mf-site-header {
  min-height: 70px;
  padding: 10px clamp(14px, 3vw, 42px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(125, 224, 231, 0.18);
  background: rgba(3, 16, 26, 0.88);
  backdrop-filter: blur(16px);
}

.mf-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--mf-ink);
  text-decoration: none;
}

.mf-brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 202, 86, 0.82);
  border-radius: 50%;
  color: #ffe7a0;
  font-weight: 900;
  letter-spacing: 0.05em;
  background: linear-gradient(145deg, #113b50, #071724);
  box-shadow: inset 0 0 0 4px rgba(3, 15, 23, 0.6);
}

.mf-brand strong,
.mf-brand small {
  display: block;
}

.mf-brand strong {
  font-size: 1.1rem;
}

.mf-brand small {
  margin-top: 1px;
  color: var(--mf-muted);
}

.mf-header-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.mf-user-name {
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.mf-user-name {
  border: 1px solid rgba(94, 233, 230, 0.4);
  color: #c8fffc;
  background: rgba(15, 115, 128, 0.22);
}

main {
  padding: clamp(8px, 1.6vw, 24px);
}

.mf-game-card {
  width: min(100%, 1740px);
  margin: 0 auto;
  overflow: clip;
  border: 1px solid rgba(104, 218, 224, 0.32);
  border-radius: 24px;
  background: rgba(4, 21, 32, 0.9);
  box-shadow: var(--mf-shadow);
}

.mf-toolbar {
  min-height: 82px;
  padding: 12px clamp(14px, 2vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--mf-line);
  background:
    linear-gradient(90deg, rgba(12, 54, 71, 0.97), rgba(6, 28, 42, 0.96)),
    var(--mf-panel);
}

.mf-kicker,
.mf-subtitle {
  margin: 0;
}

.mf-kicker {
  color: var(--mf-gold);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mf-toolbar h1 {
  display: inline-block;
  margin: 1px 8px 0 0;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.05;
}

.mf-subtitle {
  display: inline-block;
  color: #d8eef3;
  font-size: 0.82rem;
  font-weight: 700;
}

.mf-toolbar-actions {
  display: flex;
  gap: 9px;
}

.mf-season-bar {
  min-height: 62px;
  padding: 9px 18px 10px 22px;
  display: grid;
  grid-template-columns: auto auto minmax(210px, 1fr) auto auto;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  border-bottom: 1px solid rgba(71, 181, 193, 0.32);
  background:
    radial-gradient(circle at 75% 0, rgba(66, 211, 209, 0.1), transparent 32%),
    linear-gradient(90deg, rgba(3, 23, 37, 0.98), rgba(6, 38, 52, 0.98));
}

.mf-season-bar small,
.mf-season-bar strong,
.mf-season-bar time {
  display: block;
}

.mf-season-bar small {
  color: var(--mf-muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.15;
  text-transform: uppercase;
}

.mf-season-heading strong,
.mf-season-status strong {
  margin-top: 2px;
  color: #ffe39a;
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  line-height: 1.15;
}

.mf-season-status strong {
  min-width: 142px;
  color: #9afff8;
  font-variant-numeric: tabular-nums;
}

.mf-season-end {
  min-width: 0;
}

.mf-season-end time {
  margin-top: 2px;
  overflow: hidden;
  color: #dcebf1;
  font-size: 0.8rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mf-season-prizes {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 4px;
  text-align: center;
}

.mf-season-prizes b {
  padding: 3px 7px;
  border: 1px solid rgba(255, 197, 82, 0.34);
  border-radius: 999px;
  color: #ffe5a8;
  background: rgba(4, 22, 34, 0.62);
  font-size: 0.65rem;
  white-space: nowrap;
}

.mf-season-prizes b:nth-child(2) {
  border-color: rgba(201, 217, 226, 0.34);
  color: #edf5f8;
}

.mf-season-prizes b:nth-child(3) {
  border-color: rgba(205, 130, 74, 0.44);
  color: #efbd91;
}

.mf-season-prizes small {
  grid-column: 1 / -1;
  font-size: 0.56rem;
}

.mf-season-hall-link {
  min-height: 38px;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 197, 82, 0.55);
  border-radius: 12px;
  color: #231505;
  background: linear-gradient(180deg, #ffe18d, #e9a63c);
  font-size: 0.74rem;
  font-weight: 950;
  text-decoration: none;
  white-space: nowrap;
}

.mf-season-hall-link:hover,
.mf-season-hall-link:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.mf-tool-button,
.mf-start-button,
.mf-control {
  border: 1px solid rgba(105, 224, 230, 0.34);
  color: var(--mf-ink);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.mf-tool-button {
  min-height: 45px;
  padding: 9px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 14px;
  background: linear-gradient(180deg, #153c50, #0b2638);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-weight: 800;
}

.mf-tool-button-warm,
.mf-start-button {
  border-color: rgba(255, 200, 91, 0.74);
  color: #332005;
  background: linear-gradient(180deg, #ffe17b, #f5aa32);
}

.mf-tool-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.mf-tool-button:focus-visible,
.mf-start-button:focus-visible,
.mf-control:focus-visible,
.mf-mobile-points summary:focus-visible,
#mfCanvas:focus-visible {
  outline: 3px solid #afffff;
  outline-offset: 3px;
}

.mf-stage-viewport {
  width: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #03111a;
}

.mf-stage-viewport::after {
  content: "";
  position: absolute;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    inset 0 0 0 3px rgba(255, 199, 86, 0.92),
    inset 0 0 42px rgba(255, 105, 76, 0.48),
    inset 0 0 86px rgba(89, 241, 235, 0.26);
}

.mf-stage-viewport.is-table-rattling {
  transform-origin: 50% 78%;
  animation: mf-table-rattle 360ms linear both;
  will-change: transform;
}

.mf-stage-viewport.is-table-rattling::after {
  animation: mf-table-rattle-flash 420ms ease-out both;
}

.mf-stage {
  width: 100%;
  position: relative;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  isolation: isolate;
  background: #061b27;
  outline: none;
}

#mfCanvas {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  outline: none;
}

/* Deutliche 2,5D-Perspektive: Hintergrund und alle beweglichen Spielelemente
   bleiben auf derselben projizierten Ebene. Physik, Dialoge und Touch-Tasten
   werden nicht transformiert. */
.mf-stage.mf-perspective-test {
  --mf-camera-depth: 1000px;
  --mf-table-tilt: 18deg;
  --mf-table-y-compensation: 1.36;

  perspective: var(--mf-camera-depth);
  perspective-origin: 50% 88%;
  background-color: #c88a43;
  background-image: url("images/muschelflipper_inselkulisse_25d_v1.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.mf-stage.mf-perspective-test #mfCanvas {
  transform-origin: 50% 100%;
  transform:
    rotateX(var(--mf-table-tilt))
    scaleY(var(--mf-table-y-compensation));
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

.mf-stage.mf-perspective-test #mfCanvas:focus-visible {
  outline: none;
}

.mf-stage.mf-perspective-test::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 0 3px #afffff;
}

.mf-stage.mf-perspective-test:focus-within::after {
  opacity: 1;
}

.mf-board-layer {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.mf-island-board {
  position: absolute;
  padding: clamp(12px, 1.15vw, 21px);
  overflow: hidden;
  border: clamp(6px, 0.62vw, 10px) solid transparent;
  color: #f7fbff;
  background:
    radial-gradient(circle at 50% -12%, rgba(83, 236, 224, 0.18), transparent 42%) padding-box,
    linear-gradient(160deg, rgba(5, 42, 53, 0.98), rgba(2, 17, 28, 0.99) 72%) padding-box,
    repeating-linear-gradient(112deg, #6d3513 0 7px, #bd7c35 7px 13px, #714018 13px 20px, #d1a25e 20px 23px) border-box;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.48),
    0 0 0 2px rgba(255, 208, 103, 0.76),
    inset 0 0 0 2px rgba(255, 210, 112, 0.42),
    inset 0 0 34px rgba(37, 212, 211, 0.11);
  transform-origin: 50% 30%;
}

.mf-island-board::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5px;
  border: 2px solid rgba(237, 194, 102, 0.54);
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(70, 29, 9, 0.56);
}

.mf-island-board::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 36%, rgba(255, 255, 255, 0.055) 45%, transparent 54%),
    radial-gradient(circle at 18% 86%, rgba(255, 116, 91, 0.11), transparent 28%);
}

.mf-island-board-stats {
  left: 2.2%;
  top: 13%;
  width: 21.5%;
  height: 59%;
  border-radius: 27px 19px 31px 22px / 22px 31px 20px 29px;
  transform: rotate(-0.6deg);
}

.mf-island-board-ranking {
  right: 2.1%;
  top: 5.5%;
  width: 22.4%;
  height: 85%;
  border-radius: 20px 31px 23px 29px / 29px 22px 32px 20px;
  transform: rotate(0.55deg);
}

.mf-board-shell {
  position: absolute;
  z-index: 2;
  top: clamp(8px, 0.72vw, 13px);
  right: clamp(9px, 0.82vw, 15px);
  width: clamp(25px, 2.6vw, 43px);
  height: clamp(20px, 2.08vw, 34px);
  border: 2px solid rgba(255, 232, 168, 0.78);
  border-radius: 52% 52% 43% 43% / 62% 62% 36% 36%;
  background:
    repeating-conic-gradient(from 255deg at 50% 100%, rgba(111, 51, 19, 0.2) 0 7deg, rgba(255, 233, 170, 0.66) 7deg 12deg),
    linear-gradient(180deg, #ffeab3, #c77b36 76%, #744019);
  box-shadow: 0 0 13px rgba(255, 203, 96, 0.38), inset 0 -4px 6px rgba(78, 31, 10, 0.34);
}

.mf-board-heading,
.mf-board-stats,
.mf-ranking-list,
.mf-daily-ranking,
.mf-board-note {
  position: relative;
  z-index: 1;
}

.mf-board-heading {
  padding-right: clamp(28px, 3vw, 48px);
}

.mf-board-eyebrow {
  margin: 0;
  color: var(--mf-gold);
  font-size: clamp(0.7rem, 0.84vw, 0.9rem);
  font-weight: 950;
  letter-spacing: 0.09em;
  line-height: 1.15;
  text-transform: uppercase;
}

.mf-board-heading h2 {
  margin: 2px 0 0;
  color: #fff9e9;
  font-size: clamp(0.92rem, 1.32vw, 1.42rem);
  line-height: 1.05;
  text-shadow: 0 2px 0 #301908, 0 0 12px rgba(255, 208, 98, 0.24);
}

.mf-board-stats {
  margin: clamp(8px, 0.82vw, 14px) 0 0;
  display: grid;
  gap: clamp(5px, 0.62vw, 10px);
}

.mf-board-stat {
  min-width: 0;
  min-height: clamp(43px, 3.9vw, 65px);
  padding: clamp(6px, 0.66vw, 11px) clamp(8px, 0.82vw, 14px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(100, 229, 225, 0.32);
  border-radius: 12px 16px 12px 15px;
  background:
    linear-gradient(100deg, rgba(10, 65, 76, 0.48), transparent 70%),
    rgba(1, 15, 25, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.mf-board-stat dt {
  min-width: 0;
  color: #d5ecee;
  font-size: clamp(0.75rem, 0.9vw, 0.98rem);
  font-weight: 850;
  line-height: 1.16;
  text-transform: uppercase;
}

.mf-board-stat dd {
  margin: 0;
  flex: 0 0 auto;
  color: #ffe27c;
  font-size: clamp(0.88rem, 1.36vw, 1.48rem);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 195, 73, 0.18);
}

.mf-board-stat-score {
  border-color: rgba(255, 197, 82, 0.52);
}

.mf-board-stat-rank dd {
  color: #8af8f1;
}

.mf-ranking-list {
  margin: clamp(7px, 0.7vw, 12px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(2px, 0.25vw, 4px);
  list-style: none;
}

.mf-ranking-list li {
  min-width: 0;
  min-height: clamp(25px, 2.05vw, 35px);
  padding: 2px clamp(5px, 0.52vw, 9px);
  display: grid;
  grid-template-columns: clamp(20px, 1.72vw, 29px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(4px, 0.48vw, 8px);
  border: 1px solid rgba(100, 229, 225, 0.23);
  border-radius: 999px 13px 13px 999px;
  color: #dceff1;
  background: rgba(1, 15, 25, 0.78);
  font-size: clamp(0.75rem, 0.95vw, 1rem);
  line-height: 1;
}

.mf-rank-number {
  width: clamp(19px, 1.58vw, 27px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 231, 162, 0.64);
  border-radius: 50%;
  color: #2b1a07;
  background: linear-gradient(145deg, #ffe78e, #d99a30);
  font-size: 0.9em;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.mf-rank-name {
  min-width: 0;
  overflow: hidden;
  color: #a9c6ca;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mf-ranking-list strong {
  color: #ffe27c;
  font-size: 0.96em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mf-ranking-list li[aria-current="true"] {
  border-color: rgba(99, 248, 239, 0.82);
  background: linear-gradient(90deg, rgba(15, 111, 119, 0.55), rgba(1, 15, 25, 0.82));
}

.mf-ranking-list li[aria-current="true"] .mf-rank-name {
  color: #c8fffb;
}

.mf-daily-ranking {
  margin-top: clamp(7px, 0.72vw, 12px);
  padding-top: clamp(6px, 0.62vw, 10px);
  border-top: 1px solid rgba(255, 202, 91, 0.42);
}

.mf-daily-ranking h3 {
  margin: 0;
  color: #fff1ba;
  font-size: clamp(0.75rem, 0.88vw, 0.96rem);
  letter-spacing: 0.045em;
  line-height: 1.1;
  text-transform: uppercase;
}

.mf-ranking-list-daily {
  margin-top: clamp(5px, 0.45vw, 8px);
}

.mf-ranking-list-daily li:nth-child(2) .mf-rank-number {
  border-color: #eef8ff;
  background: linear-gradient(145deg, #f7fbff, #9aa9b5);
}

.mf-ranking-list-daily li:nth-child(3) .mf-rank-number {
  border-color: #f3b578;
  background: linear-gradient(145deg, #e8a763, #9b5124);
}

.mf-board-note {
  margin: clamp(5px, 0.5vw, 8px) 1px 0;
  color: #91b6bb;
  font-size: clamp(0.6rem, 0.7vw, 0.76rem);
  line-height: 1.18;
}

.mf-points-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(4px, 0.42vw, 7px);
  list-style: none;
}

.mf-points-list li {
  min-width: 0;
  padding: clamp(5px, 0.48vw, 8px) clamp(7px, 0.75vw, 12px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(121, 219, 224, 0.22);
  border-radius: 12px;
  color: #d8edf1;
  background: rgba(2, 17, 29, 0.7);
  font-size: clamp(0.62rem, 0.76vw, 0.82rem);
}

.mf-points-list li > span {
  min-width: 0;
  font-weight: 800;
}

.mf-points-list small {
  margin-top: 1px;
  display: block;
  color: #9fbfc6;
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.25;
}

.mf-points-list strong {
  color: #ffe27c;
  font-size: clamp(0.64rem, 0.78vw, 0.86rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mf-points-list .mf-points-bonus {
  border-color: rgba(255, 195, 73, 0.52);
  background: linear-gradient(135deg, rgba(67, 47, 10, 0.65), rgba(3, 34, 44, 0.78));
}

.mf-mobile-points {
  margin: 0;
  display: block;
  border-top: 1px solid rgba(111, 220, 226, 0.26);
  border-bottom: 1px solid rgba(111, 220, 226, 0.2);
  background: #061a29;
}

.mf-mobile-points summary {
  min-height: 46px;
  padding: 10px 16px;
  color: #d7fbfa;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 900;
}

.mf-mobile-points[open] summary {
  border-bottom: 1px solid rgba(111, 220, 226, 0.22);
}

.mf-mobile-points .mf-points-list {
  padding: 11px;
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .mf-mobile-points .mf-points-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mf-loading,
.mf-overlay {
  position: absolute;
  z-index: 8;
  left: var(--mf-table-left);
  top: 4.8%;
  width: var(--mf-table-width);
  height: 85.8%;
  display: grid;
  place-items: center;
  text-align: center;
}

.mf-loading {
  gap: 13px;
  align-content: center;
  color: #d8ffff;
  background: rgba(3, 18, 28, 0.82);
  transition: opacity 220ms ease, visibility 220ms ease;
}

.mf-loading[hidden] {
  display: none;
}

.mf-loading-pearl,
.mf-overlay-pearl {
  display: block;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff 0 8%, #bffdf9 18%, #5fdfe1 47%, #167a8d 72%, #073246 100%);
  box-shadow: 0 0 24px rgba(108, 247, 241, 0.72);
}

.mf-loading-pearl {
  width: clamp(35px, 4vw, 64px);
  aspect-ratio: 1;
  animation: mf-pulse 1.15s ease-in-out infinite alternate;
}

.mf-overlay {
  background: rgba(1, 12, 20, 0.58);
  backdrop-filter: blur(5px);
}

.mf-overlay[hidden] {
  display: none;
}

.mf-overlay-card {
  width: min(88%, 410px);
  padding: clamp(15px, 2vw, 28px);
  border: 1px solid rgba(97, 239, 237, 0.64);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(5, 46, 61, 0.98), rgba(4, 20, 32, 0.98));
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.56), inset 0 0 28px rgba(68, 231, 226, 0.08);
}

.mf-overlay-pearl {
  width: clamp(38px, 4vw, 62px);
  aspect-ratio: 1;
  margin: 0 auto 12px;
}

.mf-overlay-kicker {
  margin: 0 0 6px;
  color: var(--mf-gold);
  font-size: clamp(0.66rem, 0.76vw, 0.83rem);
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mf-overlay h2 {
  margin: 0;
  font-size: clamp(1rem, 1.65vw, 1.7rem);
}

.mf-overlay p:not(.mf-overlay-kicker) {
  margin: 11px 0 0;
  color: #d7e8ed;
  font-size: clamp(0.7rem, 0.9vw, 0.93rem);
  line-height: 1.48;
}

.mf-start-button {
  min-height: 44px;
  margin-top: 17px;
  padding: 10px 18px;
  border-radius: 14px;
  font-weight: 900;
  box-shadow: 0 9px 24px rgba(232, 151, 28, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.mf-message {
  position: absolute;
  z-index: 6;
  left: var(--mf-table-left);
  bottom: 2.3%;
  width: var(--mf-table-width);
  min-height: 26px;
  padding: 5px 10px;
  overflow: hidden;
  border: 1px solid rgba(104, 224, 228, 0.54);
  border-radius: 999px;
  color: #edf9fb;
  background: rgba(2, 18, 27, 0.88);
  font-size: clamp(0.58rem, 0.7vw, 0.75rem);
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mf-message[data-tone="good"] {
  border-color: rgba(126, 255, 190, 0.7);
  color: #c8ffdf;
}

.mf-message[data-tone="warm"] {
  border-color: rgba(255, 197, 82, 0.8);
  color: #ffe7a4;
}

.mf-mobile-stats {
  display: none;
}

.mf-controls {
  padding: 12px clamp(10px, 2vw, 22px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.8fr) minmax(0, 1fr);
  gap: 12px;
  border-top: 1px solid var(--mf-line);
  background: linear-gradient(180deg, #082334, #061a29);
}

.mf-control {
  min-height: 66px;
  padding: 8px 13px;
  display: grid;
  place-items: center;
  gap: 2px;
  border-radius: 17px;
  background: linear-gradient(180deg, #123c50, #082535);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.24);
}

.mf-control strong {
  color: #fff2bd;
  font-size: 1.15rem;
}

.mf-control span {
  color: #cfebef;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mf-control-launch {
  border-color: rgba(255, 194, 79, 0.52);
  background: linear-gradient(180deg, #463615, #2a2619);
}

.mf-control-launch.is-nudge-ready {
  border-color: rgba(255, 207, 99, 0.88);
  background: linear-gradient(180deg, #68481a, #332b18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 20px rgba(255, 190, 68, 0.12),
    0 0 16px rgba(255, 182, 55, 0.16);
}

.mf-control-launch.is-nudge-cooldown {
  border-color: rgba(255, 178, 76, 0.48);
  background: linear-gradient(180deg, #3f321e, #27231c);
}

.mf-control.is-nudge-locked,
.mf-control.is-nudge-locked:active {
  cursor: not-allowed;
  border-color: rgba(255, 111, 92, 0.72);
  background: linear-gradient(180deg, #402927, #241e21);
  transform: none;
  opacity: 0.58;
  filter: saturate(0.68);
  box-shadow: inset 0 0 18px rgba(255, 87, 68, 0.18);
}

.mf-control.is-active,
.mf-control:active {
  border-color: #aafffb;
  background: linear-gradient(180deg, #1b8190, #0b4b60);
  transform: translateY(1px);
  box-shadow: inset 0 0 20px rgba(120, 255, 251, 0.2), 0 0 18px rgba(65, 223, 221, 0.2);
}

.mf-control:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.mf-play-stats {
  position: relative;
  padding: clamp(13px, 1.7vw, 20px) clamp(14px, 2.3vw, 28px);
  display: grid;
  grid-template-columns: minmax(210px, 0.78fr) minmax(0, 1.65fr);
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  overflow: hidden;
  border-top: 1px solid rgba(255, 198, 91, 0.5);
  border-bottom: 1px solid rgba(96, 232, 229, 0.32);
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 180, 72, 0.12), transparent 34%),
    linear-gradient(130deg, #082d3c 0%, #071f31 54%, #061724 100%);
}

.mf-play-stats::after {
  content: "";
  position: absolute;
  inset: auto -50px -58px auto;
  width: 180px;
  aspect-ratio: 1;
  border: 1px solid rgba(87, 236, 230, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 35px rgba(54, 218, 216, 0.08);
  pointer-events: none;
}

.mf-play-stats-heading,
.mf-play-stats-grid {
  position: relative;
  z-index: 1;
}

.mf-play-stats-heading p,
.mf-play-stats-heading h2,
.mf-play-stats-heading small,
.mf-play-stats-grid,
.mf-play-stats-grid dd {
  margin: 0;
}

.mf-play-stats-heading p {
  color: #ffc961;
  font-size: clamp(0.64rem, 0.72vw, 0.78rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mf-play-stats-heading h2 {
  margin-top: 3px;
  color: #f5ffff;
  font-size: clamp(1.08rem, 1.45vw, 1.5rem);
}

.mf-play-stats-heading small {
  margin-top: 5px;
  display: block;
  color: #b8d9df;
  font-size: clamp(0.68rem, 0.76vw, 0.8rem);
  line-height: 1.4;
}

.mf-play-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(7px, 1vw, 12px);
}

.mf-play-stats-grid > div {
  min-width: 0;
  padding: clamp(10px, 1.2vw, 15px) 8px;
  border: 1px solid rgba(91, 232, 229, 0.32);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(16, 69, 82, 0.82), rgba(7, 34, 48, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.17);
  text-align: center;
}

.mf-play-stats-grid dt {
  color: #bfe4e8;
  font-size: clamp(0.63rem, 0.7vw, 0.76rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mf-play-stats-grid dd {
  margin-top: 2px;
  color: #ffe197;
  font-size: clamp(1.18rem, 1.75vw, 1.75rem);
  font-weight: 950;
  line-height: 1.05;
  text-shadow: 0 2px 12px rgba(255, 190, 76, 0.18);
}

.mf-hall-of-fame {
  width: min(1240px, calc(100% - 32px));
  margin-inline: auto;
  padding: 56px 0 12px;
  scroll-margin-top: 18px;
}

.mf-hall-heading {
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(300px, 1.28fr);
  align-items: end;
  gap: clamp(24px, 6vw, 80px);
}

.mf-hall-heading h2,
.mf-hall-heading > p {
  margin: 0;
}

.mf-hall-heading h2 {
  font-size: clamp(1.9rem, 4vw, 3.25rem);
  line-height: 1;
}

.mf-hall-heading > p {
  color: var(--mf-muted);
  font-size: clamp(0.9rem, 1.4vw, 1.08rem);
}

.mf-hall-seasons {
  display: grid;
  gap: 16px;
}

.mf-hall-season,
.mf-hall-empty {
  border: 1px solid rgba(255, 197, 82, 0.32);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 197, 82, 0.13), transparent 37%),
    linear-gradient(145deg, rgba(8, 42, 57, 0.97), rgba(3, 21, 34, 0.98));
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
}

.mf-hall-season {
  padding: 20px;
}

.mf-hall-season header {
  margin-bottom: 14px;
}

.mf-hall-season h3 {
  margin: 0;
  color: #fff0c4;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
}

.mf-hall-podium {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
}

.mf-hall-podium li {
  min-width: 0;
  padding: 13px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 197, 82, 0.3);
  border-radius: 15px;
  background: rgba(3, 21, 33, 0.7);
}

.mf-hall-podium li.is-silver {
  border-color: rgba(205, 222, 230, 0.38);
}

.mf-hall-podium li.is-bronze {
  border-color: rgba(213, 133, 77, 0.42);
}

.mf-hall-medal {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 225, 141, 0.08);
  font-size: 1.6rem;
}

.mf-hall-winner,
.mf-hall-result {
  min-width: 0;
}

.mf-hall-winner small,
.mf-hall-winner strong,
.mf-hall-result small,
.mf-hall-result b {
  display: block;
}

.mf-hall-winner small,
.mf-hall-result small {
  color: var(--mf-muted);
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mf-hall-winner strong {
  margin-top: 2px;
  overflow: hidden;
  color: #f7fcff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mf-hall-result {
  text-align: right;
}

.mf-hall-result b {
  color: #ffe39a;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mf-hall-result small {
  margin-top: 3px;
  color: #9afff8;
}

.mf-hall-empty {
  min-height: 150px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.mf-hall-empty > span {
  font-size: 3rem;
}

.mf-hall-empty p {
  max-width: 620px;
  margin: 0;
  color: var(--mf-muted);
}

.mf-hall-empty strong {
  display: block;
  margin-bottom: 3px;
  color: #fff0c4;
  font-size: 1.1rem;
}

.mf-help {
  margin: 0;
  padding: 9px 16px 13px;
  color: var(--mf-muted);
  background: #061a29;
  font-size: 0.75rem;
  text-align: center;
}

.mf-help strong {
  color: #ffe8a6;
}

.is-embed .mf-site-header {
  display: none;
}

.is-embed {
  min-height: 0;
  overflow-y: hidden;
}

.is-embed main {
  padding: 0;
}

.is-embed .mf-game-card {
  width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.is-embed .mf-hall-of-fame,
.is-embed .mf-season-hall-link {
  display: none !important;
}

@keyframes mf-pulse {
  from { transform: scale(0.9); opacity: 0.78; }
  to { transform: scale(1.06); opacity: 1; }
}

@keyframes mf-table-rattle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  13% { transform: translate3d(-6px, 1px, 0) rotate(-0.16deg) scale(1.006); }
  28% { transform: translate3d(5px, -2px, 0) rotate(0.14deg) scale(1.006); }
  44% { transform: translate3d(-4px, 1px, 0) rotate(-0.11deg) scale(1.006); }
  61% { transform: translate3d(3px, -1px, 0) rotate(0.08deg) scale(1.004); }
  78% { transform: translate3d(-2px, 0, 0) rotate(-0.045deg) scale(1.002); }
  90% { transform: translate3d(1px, 0, 0) rotate(0.02deg) scale(1.001); }
}

@keyframes mf-table-rattle-flash {
  0% { opacity: 0; }
  10% { opacity: 1; }
  42% { opacity: 0.72; }
  100% { opacity: 0; }
}

@media (hover: hover) {
  .mf-tool-button:not(:disabled):hover,
  .mf-start-button:hover,
  .mf-control:not(:disabled):not(.is-nudge-locked):hover {
    filter: brightness(1.09);
  }
}

@media (max-width: 900px) {
  .mf-site-header {
    min-height: 58px;
    padding: 6px 12px;
  }

  .mf-brand-mark {
    width: 39px;
    height: 39px;
  }

  .mf-brand strong {
    font-size: 0.96rem;
  }

  .mf-brand small,
  .mf-user-name {
    display: none;
  }

  main {
    padding: 5px;
  }

  .mf-game-card {
    border-radius: 14px;
  }

  .mf-toolbar {
    min-height: 64px;
    padding: 7px 9px;
  }

  .mf-kicker,
  .mf-subtitle {
    display: none;
  }

  .mf-toolbar h1 {
    font-size: 1.05rem;
  }

  .mf-tool-button {
    min-width: 42px;
    min-height: 40px;
    padding: 7px 10px;
  }

  .mf-tool-button span:last-child {
    display: none;
  }

  .mf-season-bar {
    padding: 9px 11px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 14px;
  }

  .mf-season-end,
  .mf-season-prizes {
    grid-column: span 1;
  }

  .mf-season-hall-link {
    grid-column: 1 / -1;
  }

  .mf-hall-of-fame {
    width: min(100% - 18px, 1240px);
    padding-top: 38px;
  }

  .mf-hall-heading {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mf-hall-podium {
    grid-template-columns: 1fr;
  }

  .mf-play-stats {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .mf-play-stats-heading {
    text-align: center;
  }

  .mf-play-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Auf Touch-Geräten bleibt der Tisch vor und nach dem Spielstart exakt gleich
   horizontal zentriert. So kann keine Klassenänderung den Tisch verschieben. */
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  body {
    overscroll-behavior-y: contain;
  }

  .mf-stage-viewport {
    height: min(70dvh, 880px, 112vw);
    min-height: min(430px, 112vw);
    aspect-ratio: auto;
    touch-action: none;
  }

  .mf-stage {
    width: auto;
    height: 100%;
    aspect-ratio: 1672 / 941;
    left: 50%;
    transform: translateX(-50%);
  }

  .mf-stage.mf-perspective-test {
    --mf-camera-depth: 800px;
    --mf-table-tilt: 17deg;
    --mf-table-y-compensation: 1.32;
  }

  .mf-board-layer {
    display: none;
  }

  .mf-mobile-points {
    margin: 0;
    display: block;
    border-top: 1px solid rgba(111, 220, 226, 0.26);
    color: #eaf8fa;
    background: #061a29;
  }

  .mf-mobile-points summary {
    min-height: 46px;
    padding: 10px 15px;
    display: list-item;
    line-height: 26px;
    color: #ffe39a;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 900;
  }

  .mf-mobile-points[open] summary {
    border-bottom: 1px solid rgba(111, 220, 226, 0.22);
  }

  .mf-mobile-points .mf-points-list {
    padding: 10px;
    gap: 7px;
  }

  .mf-mobile-points .mf-points-list li {
    padding: 9px 10px;
    font-size: 0.82rem;
  }

  .mf-mobile-points .mf-points-list strong {
    font-size: 0.82rem;
  }

  .mf-loading,
  .mf-overlay {
    left: var(--mf-table-left);
    width: var(--mf-table-width);
  }

  .mf-overlay-card {
    width: 92%;
    padding: clamp(13px, 3.8vw, 24px);
  }

  .mf-overlay-pearl {
    width: 44px;
  }

  .mf-overlay h2 {
    font-size: clamp(0.92rem, 4.2vw, 1.32rem);
  }

  .mf-overlay p:not(.mf-overlay-kicker) {
    font-size: clamp(0.62rem, 2.7vw, 0.82rem);
  }

  .mf-message {
    left: var(--mf-table-left);
    width: var(--mf-table-width);
    bottom: 1.8%;
    font-size: clamp(0.5rem, 2.2vw, 0.68rem);
  }

  .mf-mobile-stats {
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border-top: 2px solid rgba(255, 179, 48, 0.72);
    border-bottom: 1px solid rgba(111, 220, 226, 0.26);
    background: #061c29;
  }

  .mf-mobile-stats div {
    min-width: 0;
    padding: 5px 3px;
    display: grid;
    place-items: center;
    gap: 2px;
    border-right: 1px solid rgba(104, 217, 225, 0.23);
  }

  .mf-mobile-stats div:last-child {
    border-right: 0;
  }

  .mf-mobile-stats span {
    overflow: hidden;
    color: #c9e5e9;
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mf-mobile-stats strong {
    color: #ffe07b;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
  }

  .mf-controls {
    position: sticky;
    z-index: 20;
    bottom: 0;
    padding: 7px max(7px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
    grid-template-columns: 1fr 0.86fr 1fr;
    gap: 6px;
    box-shadow: 0 -9px 24px rgba(0, 0, 0, 0.38);
  }

  .mf-control {
    min-height: 58px;
    padding: 5px;
    touch-action: none;
  }

  .mf-control strong {
    font-size: 1rem;
  }

  .mf-control span {
    font-size: clamp(0.46rem, 1.8vw, 0.6rem);
  }

  .mf-help {
    display: none;
  }
}

@media (max-width: 440px) {
  .mf-season-heading strong,
  .mf-season-status strong {
    font-size: 0.84rem;
  }

  .mf-season-end time {
    font-size: 0.69rem;
  }

  .mf-season-prizes {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .mf-season-prizes small {
    grid-column: auto;
  }

  .mf-stage-viewport {
    height: min(68dvh, 650px, 112vw);
    min-height: min(410px, 112vw);
  }

  .mf-stage.mf-perspective-test {
    --mf-camera-depth: 520px;
    --mf-table-tilt: 16deg;
    --mf-table-y-compensation: 1.3;
  }

  .mf-toolbar-actions {
    gap: 4px;
  }

  .mf-tool-button {
    min-width: 38px;
    padding: 6px 8px;
  }

  .mf-controls {
    grid-template-columns: 1fr 0.78fr 1fr;
  }

  .mf-control {
    min-height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mf-stage-viewport.is-table-rattling {
    animation: none !important;
    transform: none !important;
  }

  .mf-stage-viewport.is-table-rattling::after {
    animation: none !important;
    opacity: 0.78;
  }
}