/* Super Campus World — a cheerful toy-bright platformer skin. */
body.mario-fun {
  --m-blue: #1677ff;
  --m-red: #ff3d57;
  --m-yellow: #ffd52d;
  --m-green: #32c86b;
  --m-orange: #ff8c2b;
  --m-violet: #8b55e9;
  --m-ink: #17315b;
  background: #79d4ff !important;
  color: var(--m-ink) !important;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif !important;
}

body.mario-fun #game { filter: saturate(1.06) contrast(1.025); }

body.mario-fun #hud {
  top: 12px !important;
  left: 50% !important;
  width: min(720px, calc(100vw - 24px)) !important;
  max-width: none !important;
  padding: 8px 10px 9px !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: 170px 1fr auto !important;
  grid-template-rows: auto 7px !important;
  align-items: center !important;
  gap: 7px 12px !important;
  color: var(--m-ink) !important;
  border: 4px solid var(--m-blue) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 7px 0 #0959be, 0 13px 28px rgba(23,49,91,.2) !important;
  backdrop-filter: none !important;
}
body.mario-fun #hud.hidden-ui { display: none !important; }
body.mario-fun .hud-brand {
  display: flex;
  flex-direction: column;
  color: var(--m-red);
  font-size: 18px;
  font-weight: 1000;
  line-height: .88;
  text-transform: uppercase;
  transform: rotate(-2deg);
  text-shadow: 0 2px 0 #ffd4da;
}
body.mario-fun .hud-brand .brand-small { color: var(--m-blue); font-size: 12px; letter-spacing: .14em; }
body.mario-fun .hud-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
body.mario-fun .hud-stat {
  min-width: 0;
  padding: 5px 8px 4px;
  border: 2px solid #b9d4ea;
  border-radius: 11px;
  background: #edf8ff;
  text-align: center;
}
body.mario-fun .hud-stat::before { content: attr(data-label); display: block; color: #6c7c95; font: 800 8px/1 "Trebuchet MS", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
body.mario-fun .hud-stat b { display: block; overflow: hidden; color: var(--m-ink); font-size: 14px; line-height: 1.18; text-overflow: ellipsis; white-space: nowrap; }
body.mario-fun .hud-score { border-color: #ffb3bd; background: #fff0f2; }
body.mario-fun .hud-distance { border-color: #acd9bd; background: #ecfff2; }
body.mario-fun .hud-combo { border-color: #ffe27a; background: #fff9d3; }
body.mario-fun .hud-power { min-width: 98px; padding: 7px 10px; color: #fff; background: var(--m-violet); border: 2px solid #5b31a7; border-radius: 999px; text-align: center; box-shadow: 0 3px 0 #5b31a7; }
body.mario-fun #power { color: #fff !important; font-size: 11px; font-weight: 1000; text-transform: uppercase; white-space: nowrap; }
body.mario-fun .power-track { grid-column: 1 / -1; width: 100%; height: 7px; overflow: hidden; border-radius: 999px; background: #dbe9f3; }
body.mario-fun #power-fill { display: block; width: 14%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--m-green), var(--m-yellow), var(--m-orange), var(--m-red)); transition: width .25s ease; }

body.mario-fun #role-panel {
  top: 108px !important;
  right: 12px !important;
  max-width: 235px !important;
  padding: 9px !important;
  color: var(--m-ink) !important;
  border: 3px solid var(--m-green) !important;
  border-radius: 18px !important;
  background: rgba(247,255,247,.94) !important;
  box-shadow: 0 5px 0 #168a49 !important;
  backdrop-filter: none !important;
}
body.mario-fun #role-panel * { color: var(--m-ink) !important; text-shadow: none !important; }

body.mario-fun #hint {
  bottom: 12px !important;
  padding: 7px 12px !important;
  color: var(--m-ink) !important;
  border: 3px solid #e2ac00 !important;
  border-radius: 999px !important;
  background: rgba(255,250,207,.94) !important;
  box-shadow: 0 4px 0 #a47c00 !important;
}

body.mario-fun #menu {
  align-items: flex-start !important;
  overflow: auto !important;
  padding: 12px !important;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.95) 0 5%, transparent 5.2%),
    radial-gradient(circle at 84% 11%, rgba(255,255,255,.82) 0 7%, transparent 7.2%),
    linear-gradient(180deg, #72d2ff 0 65%, #78dc79 65.2% 100%) !important;
  backdrop-filter: none !important;
}
body.mario-fun #menu .panel {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  margin: auto !important;
  padding: 14px 16px 16px !important;
  color: var(--m-ink) !important;
  border: 5px solid var(--m-blue) !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.985) !important;
  box-shadow: 0 9px 0 #0959be, 0 22px 50px rgba(23,49,91,.24) !important;
}
body.mario-fun .menu-eyebrow {
  width: max-content;
  margin: 0 auto 3px;
  padding: 4px 12px;
  color: #fff;
  background: var(--m-violet);
  border: 3px solid #5b31a7;
  border-radius: 999px;
  box-shadow: 0 3px 0 #5b31a7;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.mario-fun #menu h1 {
  margin: 1px 0 2px !important;
  color: var(--m-red) !important;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif !important;
  font-size: clamp(38px, 5.1vw, 68px) !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow: 0 3px 0 #fff, 0 6px 0 #ffc0c9 !important;
}
body.mario-fun #menu h1 span { color: var(--m-blue); }
body.mario-fun #menu .subtle { margin: 5px auto 8px !important; color: #59708d !important; font-size: 14px !important; text-align: center !important; }
body.mario-fun #result {
  margin: 8px auto !important;
  padding: 9px 14px !important;
  color: var(--m-ink) !important;
  border: 3px solid #e2ac00 !important;
  border-radius: 14px !important;
  background: #fff7bd !important;
}

body.mario-fun #character-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 9px !important;
  max-height: none !important;
  margin: 7px auto 11px !important;
  overflow: visible !important;
}
body.mario-fun #character-grid .char-card {
  min-width: 0 !important;
  padding: 7px 5px 6px !important;
  color: var(--m-ink) !important;
  border: 3px solid var(--m-blue) !important;
  border-radius: 17px !important;
  background: #eaf8ff !important;
  box-shadow: 0 5px 0 #9dbfd5 !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
body.mario-fun #character-grid .char-card:nth-child(6n + 2) { border-color: var(--m-red) !important; background: #fff0f2 !important; box-shadow: 0 5px 0 #eca7b0 !important; }
body.mario-fun #character-grid .char-card:nth-child(6n + 3) { border-color: #e2ac00 !important; background: #fff8c8 !important; box-shadow: 0 5px 0 #e3ca6d !important; }
body.mario-fun #character-grid .char-card:nth-child(6n + 4) { border-color: var(--m-green) !important; background: #eafff0 !important; box-shadow: 0 5px 0 #9fd9b2 !important; }
body.mario-fun #character-grid .char-card:nth-child(6n + 5) { border-color: var(--m-orange) !important; background: #fff0df !important; box-shadow: 0 5px 0 #e8bd95 !important; }
body.mario-fun #character-grid .char-card:nth-child(6n) { border-color: var(--m-violet) !important; background: #f3edff !important; box-shadow: 0 5px 0 #c1afe3 !important; }
body.mario-fun #character-grid .char-card:hover,
body.mario-fun #character-grid .char-card:focus-visible { transform: translateY(-4px) rotate(-1deg) !important; outline: 4px solid var(--m-yellow) !important; outline-offset: 2px !important; }
body.mario-fun #character-grid .char-card img { width: clamp(66px, 7vw, 96px) !important; height: clamp(66px, 7vw, 96px) !important; border: 3px solid #fff !important; border-radius: 50% !important; box-shadow: 0 3px 0 rgba(23,49,91,.18) !important; }
body.mario-fun #character-grid .char-card span { color: var(--m-ink) !important; font-weight: 1000 !important; text-shadow: none !important; }

body.mario-fun .menu-row { gap: 8px !important; }
body.mario-fun .chip,
body.mario-fun .dmg-btn {
  color: var(--m-ink) !important;
  border: 3px solid var(--m-blue) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 3px 0 #9cbfd9 !important;
  font-weight: 900 !important;
}
body.mario-fun #menu #menu-controls .chip,
body.mario-fun #menu .aux-row .chip {
  color: var(--m-ink) !important;
  background: #fff !important;
  text-shadow: none !important;
  -webkit-text-fill-color: var(--m-ink) !important;
  opacity: 1 !important;
}
body.mario-fun #menu #menu-controls .chip:nth-child(2),
body.mario-fun #menu .aux-row .chip:nth-child(2) { border-color: var(--m-red) !important; }
body.mario-fun #menu #menu-controls .chip:nth-child(3),
body.mario-fun #menu .aux-row .chip:nth-child(3) { border-color: #e2ac00 !important; }
body.mario-fun #menu #menu-controls .chip:nth-child(4),
body.mario-fun #menu .aux-row .chip:nth-child(4) { border-color: var(--m-green) !important; }
body.mario-fun .chip:hover,
body.mario-fun .chip:focus-visible { color: #fff !important; background: var(--m-blue) !important; transform: translateY(-2px); outline: none; }
body.mario-fun .back-to-arcade { border-color: var(--m-red) !important; box-shadow: 0 3px 0 #d18994 !important; }
body.mario-fun .back-to-arcade:hover { background: var(--m-red) !important; }

body.mario-fun #platform-callout {
  position: fixed;
  z-index: 38;
  left: 50%;
  top: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.65) rotate(-3deg);
  transition: opacity .14s ease, transform .2s cubic-bezier(.2,1.3,.4,1);
}
body.mario-fun #platform-callout.show { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
body.mario-fun #platform-callout strong {
  padding: 6px 18px 4px;
  color: #fff;
  background: var(--m-red);
  border: 4px solid #fff;
  border-radius: 16px;
  box-shadow: 0 6px 0 #b71e35, 0 10px 25px rgba(23,49,91,.2);
  font-size: clamp(32px, 7vw, 86px);
  line-height: .92;
  text-shadow: 0 3px 0 rgba(23,49,91,.25);
  text-transform: uppercase;
  white-space: nowrap;
}
body.mario-fun #platform-callout span { margin-top: 9px; padding: 5px 12px; color: var(--m-ink); background: var(--m-yellow); border: 3px solid #fff; border-radius: 999px; box-shadow: 0 4px 0 #b88900; font-size: 12px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }
body.mario-fun #platform-callout.power strong { background: var(--m-green); box-shadow: 0 6px 0 #168849; }
body.mario-fun #platform-callout.star strong { color: var(--m-ink); background: var(--m-yellow); box-shadow: 0 6px 0 #ad8200; }
body.mario-fun #platform-callout.ouch strong { background: var(--m-violet); box-shadow: 0 6px 0 #5a31a5; }
body.mario-fun #platform-flash { position: fixed; z-index: 35; inset: 0; pointer-events: none; opacity: 0; background: rgba(255,255,255,.75); mix-blend-mode: screen; transition: opacity .18s ease; }
body.mario-fun #platform-flash.show { opacity: 1; transition-duration: .025s; }

body.mario-fun #rotate-overlay .card { color: var(--m-ink) !important; border: 5px solid var(--m-blue) !important; background: #fff !important; box-shadow: 0 8px 0 #0959be !important; }
body.mario-fun #touch-controls .touch-btn { color: var(--m-ink) !important; border: 3px solid var(--m-blue) !important; background: rgba(255,255,255,.92) !important; box-shadow: 0 4px 0 #0959be !important; }
body.mario-fun #kenney-cloud-layer,
body.mario-fun #kenney-grade-layer { display: none !important; }

@media (max-width: 980px) {
  body.mario-fun #character-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  body.mario-fun #hud { grid-template-columns: 130px 1fr auto !important; }
  body.mario-fun .hud-brand { font-size: 15px; }
}
@media (max-width: 700px) {
  body.mario-fun #menu { padding: 7px !important; }
  body.mario-fun #menu .panel { padding: 10px !important; border-radius: 21px !important; }
  body.mario-fun #character-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.mario-fun #hud { top: 7px !important; grid-template-columns: 1fr auto !important; padding: 6px 8px !important; }
  body.mario-fun .hud-brand { display: none; }
  body.mario-fun .hud-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.mario-fun .power-track { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  body.mario-fun #character-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  body.mario-fun #character-grid .char-card img { width: 64px !important; height: 64px !important; }
  body.mario-fun .menu-controls { gap: 5px !important; }
  body.mario-fun .menu-controls .chip { font-size: 10px !important; padding: 5px 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.mario-fun *, body.mario-fun *::before, body.mario-fun *::after { transition: none !important; }
}