:root {
  --sky: #16a9ec;
  --red: #ed1c24;
  --red-dark: #a80e16;
  --blue: #0671ce;
  --blue-dark: #064a92;
  --yellow: #ffd52e;
  --green: #32ad36;
  --ink: #18233b;
  --muted: #5b6474;
  --cream: #fffdf2;
  --paper: rgba(255, 253, 242, .97);
  --line: #d9ccaa;
  --shadow: 0 28px 70px rgba(16, 41, 74, .32), 0 10px 24px rgba(0, 0, 0, .2);
  --mx: 0px;
  --my: 0px;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--sky);
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
}
button, input, select { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--blue);
}

.world { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.kingdom-bg {
  position: absolute;
  inset: -3%;
  background-image: image-set(url("mushroom-kingdom-bg.webp") type("image/webp"), url("mushroom-kingdom-bg.png") type("image/png"));
  background-size: cover;
  background-position: center 52%;
  transform: translate(calc(var(--mx) * -.18), calc(var(--my) * -.12)) scale(1.035);
  transition: transform .18s ease-out;
}
.sky-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.15), transparent 38%);
}
.scene-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 62, 128, .11), transparent 30%, transparent 70%, rgba(0, 62, 128, .11)), linear-gradient(0deg, rgba(3, 33, 71, .18), transparent 34%);
}

.character {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0 18px 14px rgba(19, 44, 68, .34));
  transform-origin: 50% 100%;
  will-change: transform;
}
.character picture, .character img { display: block; width: 100%; height: auto; }
.character-mario { width: clamp(210px, 24vw, 380px); left: clamp(-72px, 1.2vw, 28px); bottom: -12%; transform: translate(calc(var(--mx) * .55), calc(var(--my) * .28)) rotate(2deg); animation: hero-bob 4.8s ease-in-out infinite; }
.character-luigi { width: clamp(180px, 20vw, 320px); right: clamp(-56px, 2vw, 38px); bottom: -13%; transform: translate(calc(var(--mx) * -.5), calc(var(--my) * .25)) rotate(-2deg); animation: hero-bob 5.2s .35s ease-in-out infinite reverse; }
.character-peach { width: clamp(125px, 12.5vw, 210px); left: clamp(150px, 19vw, 340px); bottom: 1%; z-index: 1; opacity: .97; transform: translate(calc(var(--mx) * .25), calc(var(--my) * .12)); }
.character-bowser { width: clamp(145px, 14vw, 235px); right: clamp(150px, 18vw, 315px); bottom: 0; z-index: 1; opacity: .97; transform: translate(calc(var(--mx) * -.24), calc(var(--my) * .1)); }
.character-yoshi { width: clamp(105px, 9vw, 155px); left: 22%; bottom: -2%; z-index: 1; transform: translate(calc(var(--mx) * .36), calc(var(--my) * .18)); animation: side-bob 3.8s .8s ease-in-out infinite; }
.character-toad { width: clamp(78px, 7vw, 120px); right: 23%; bottom: -2%; z-index: 1; transform: translate(calc(var(--mx) * -.34), calc(var(--my) * .16)); animation: side-bob 3.5s .2s ease-in-out infinite reverse; }
.mobile-cast { display: none; }
.cast-member { position: absolute; bottom: 0; filter: drop-shadow(0 12px 9px rgba(17, 45, 71, .3)); transform-origin: 50% 100%; }
.cast-member picture, .cast-member img { display: block; width: 100%; height: auto; }

@keyframes hero-bob { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 9px; } }
@keyframes side-bob { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 7px; } }

.stage {
  position: relative;
  z-index: 5;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(48px, 6vw, 76px) 20px;
}
.invite-card {
  position: relative;
  width: min(590px, 92vw);
  padding: 2.05rem 2rem 1.6rem;
  text-align: center;
  border: 4px solid #fff;
  border-radius: 34px;
  background: var(--paper);
  box-shadow: var(--shadow), inset 0 0 0 3px var(--yellow), inset 0 0 0 7px var(--red);
  backdrop-filter: blur(12px);
}
.invite-card::before, .invite-card::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  background: url("dash-mushroom.webp") center / contain no-repeat;
  filter: drop-shadow(0 3px 2px rgba(111, 16, 23, .25));
}
.invite-card::before { left: 22px; top: 20px; }
.invite-card::after { right: 22px; top: 20px; transform: scaleX(-1); }
.level-pill {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 330px;
  padding: .55rem 1.05rem;
  border: 3px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(#1788dd, #0763b7);
  box-shadow: 0 5px 0 #054886, 0 8px 18px rgba(0,0,0,.2);
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .09em;
  white-space: nowrap;
}
.level-pill i { display: inline-block; width: 6px; height: 6px; margin: 0 .55rem .12rem; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.kicker { margin: .55rem 0 .18rem; color: var(--red); font-size: .72rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.name {
  display: flex;
  justify-content: center;
  gap: clamp(0px, .18vw, 2px);
  margin: 0;
  font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif;
  font-size: clamp(3.25rem, 6.6vw, 4.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.055em;
}
.name span { -webkit-text-stroke: 2px #fff; paint-order: stroke fill; text-shadow: 0 5px 0 #17305d, 0 7px 8px rgba(0,0,0,.22); }
.name span:nth-child(4n+1) { color: #ed1c24; }
.name span:nth-child(4n+2) { color: #1589dc; }
.name span:nth-child(4n+3) { color: #ffca18; }
.name span:nth-child(4n+4) { color: #38ad3e; }
.level-up { margin: .62rem 0 .65rem; display: flex; align-items: center; justify-content: center; gap: .6rem; }
.level-up::before, .level-up::after { content: ""; width: 56px; height: 4px; border-radius: 99px; background: repeating-linear-gradient(90deg, var(--red) 0 10px, transparent 10px 14px); }
.level-up span { color: var(--blue-dark); font-size: .68rem; font-weight: 900; letter-spacing: .14em; }
.level-up strong {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  box-shadow: 0 0 0 3px #248b28, 0 4px 0 #176c1b;
  font-family: "Fredoka", "Arial Black", sans-serif;
  font-size: 2.05rem;
  font-weight: 700;
  letter-spacing: -.08em;
  line-height: 1;
}
.invite-copy { max-width: 48ch; margin: .2rem auto 1rem; color: var(--muted); font-size: .96rem; line-height: 1.5; font-weight: 700; }
.details { display: grid; gap: .55rem; text-align: left; }
.details section {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 61px;
  padding: .62rem .8rem;
  border: 2px solid #e6dbbd;
  border-radius: 15px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 3px 0 #d3c49e;
}
.details section:nth-child(2) { border-color: #b7dfb9; background: #f3fff3; box-shadow-color: #8ec994; }
.details small { display: block; margin-bottom: .05rem; color: var(--red); font-size: .64rem; font-weight: 900; letter-spacing: .16em; }
.details strong { display: block; color: var(--ink); font-size: .9rem; line-height: 1.25; }
.details em { display: block; margin-top: .08rem; color: var(--muted); font-size: .79rem; font-style: normal; }
.detail-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 3px solid #f0a300;
  border-radius: 50%;
  color: #fff;
  background: var(--yellow);
  box-shadow: inset 0 0 0 3px #ffe98a, 0 3px 0 #be7900;
  font-weight: 900;
}
.pipe-icon { position: relative; border: 0; border-radius: 5px; background: linear-gradient(90deg, #087e16, #4fdb55 35%, #20a62b 70%, #087b14); box-shadow: inset 0 0 0 3px rgba(255,255,255,.22), 0 3px 0 #086311; }
.pipe-icon::before { content: ""; position: absolute; left: -5px; right: -5px; top: 1px; height: 15px; border: 2px solid #087315; border-radius: 5px; background: linear-gradient(90deg, #087e16, #56e15d 35%, #20a62b 70%, #087b14); }
.parent-note { margin: .85rem 0 .8rem; color: var(--blue-dark); font-size: .82rem; font-weight: 900; }
.power-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  min-height: 54px;
  padding: .85rem 1.15rem .8rem 1.4rem;
  border: 3px solid #fff;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(#f34848, var(--red));
  box-shadow: 0 0 0 3px var(--red-dark), 0 7px 0 #8e0a10, 0 11px 18px rgba(104, 0, 0, .25);
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.power-btn { text-decoration: none; }
.pk-btn {
  appearance: none;
  display: inline-block;
  padding: .78rem 1rem;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: var(--red);
  box-shadow: 0 5px 0 var(--red-dark);
  cursor: pointer;
  text-decoration: none;
  font-weight: 900;
}
.pk-btn.wide { width: 100%; }
.power-btn b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--red); background: #fff; font-size: 1rem; }
.power-btn:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.06); }
.power-btn:active { transform: translateY(4px); box-shadow: 0 0 0 3px var(--red-dark), 0 3px 0 #8e0a10; }
.power-btn.wide { width: 100%; margin-top: .15rem; }
.power-btn:disabled { opacity: .7; cursor: wait; }
.micro-copy { margin: .8rem 0 0; color: #7b735f; font-size: .69rem; font-weight: 800; }

.modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1rem; background: rgba(4, 29, 63, .78); backdrop-filter: blur(8px); }
.modal.hidden { display: none; }
.modal-inner {
  position: relative;
  width: min(560px, 96vw);
  max-height: 92dvh;
  overflow: auto;
  padding: 1.15rem 1.2rem 1.4rem;
  border: 4px solid #fff;
  border-radius: 25px;
  background: var(--cream);
  box-shadow: 0 0 0 4px var(--yellow), 0 0 0 8px var(--red), 0 30px 80px rgba(0,0,0,.42);
}
.modal-badge { display: grid; place-items: center; width: 45px; height: 45px; margin: 0 auto .25rem; border: 3px solid #e29a00; border-radius: 50%; color: #fff; background: var(--yellow); box-shadow: inset 0 0 0 3px #ffe98a; font-size: 1.25rem; }
.modal-kicker { margin: 0; text-align: center; color: var(--red); font-size: .66rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.modal-inner h2 { margin: -.1rem 0 .8rem; text-align: center; color: var(--blue); font-family: "Bangers", Impact, sans-serif; font-size: 3rem; letter-spacing: .05em; text-shadow: 0 3px 0 #fff, 0 5px 0 #0b4f91; }
.close { position: absolute; top: .55rem; right: .7rem; width: 42px; height: 42px; border: 0; color: var(--ink); background: transparent; cursor: pointer; font-size: 2rem; line-height: 1; }
.form { display: grid; gap: .75rem; }
.form > label { display: grid; gap: .28rem; text-align: left; font-weight: 900; font-size: .85rem; }
.form input[type="text"], .form input[type="email"], .form select { width: 100%; min-height: 50px; padding: .72rem .85rem; border: 2px solid #cfc3a5; border-radius: 12px; color: var(--ink); background: #fff; }
.form input:focus, .form select:focus { border-color: var(--blue); outline: 3px solid rgba(6,113,206,.17); }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%), linear-gradient(135deg, var(--blue) 50%, transparent 50%); background-position: calc(100% - 19px) 21px, calc(100% - 13px) 21px; background-repeat: no-repeat; background-size: 6px 6px; }
fieldset.attendance { margin: 0; padding: .72rem .85rem; border: 2px solid #cfc3a5; border-radius: 12px; text-align: left; }
legend { padding: 0 .25rem; font-size: .85rem; font-weight: 900; }
label.radio { display: flex; align-items: center; gap: .5rem; font-size: .86rem; font-weight: 800; }
label.radio + label.radio { margin-top: .42rem; }
.form input[type="radio"] { width: 18px; height: 18px; accent-color: var(--red); }
.hp { display: none !important; }
.waiver { padding: .75rem .8rem; border: 2px solid #edb100; border-radius: 12px; text-align: left; background: #fff7cf; }
.waiver.hidden { display: none; }
.waiver strong { color: var(--red); }
.waiver p { margin: .2rem 0 .45rem; font-size: .82rem; line-height: 1.4; }
.waiver-link { color: var(--blue-dark); font-size: .85rem; font-weight: 900; }

body.thankyou .invite-card { width: min(520px, 92vw); }
body.thankyou .invite-copy { font-size: 1rem; }

.container { position: relative; z-index: 5; max-width: 1100px; margin: 2rem auto; padding: 1rem; }
.login { position: relative; z-index: 5; max-width: 390px; margin: 8rem auto; padding: 2rem; border: 4px solid var(--yellow); border-radius: 18px; background: var(--cream); box-shadow: var(--shadow); }
.login input { width: 100%; padding: .7rem; border: 2px solid var(--line); border-radius: 9px; }
.error { margin: .5rem 0; color: #b42318; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; }
.card-admin, .admin-card { padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
table { width: 100%; margin-top: 1rem; border-collapse: collapse; }
th, td { padding: .5rem; border-bottom: 1px solid #eadfb8; text-align: left; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.check { display: flex !important; align-items: flex-start; gap: .55rem; grid-template-columns: unset; }
.text-link { color: var(--blue); font-weight: 900; }

@media (max-width: 1040px) {
  .world .character { display: none; }
  .stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100dvh;
    padding-bottom: 10px;
  }
  .mobile-cast {
    position: relative;
    z-index: 4;
    display: block;
    width: min(680px, 100vw);
    height: 250px;
    margin-top: 16px;
    overflow: hidden;
  }
  .cast-peach { z-index: 1; left: 27%; width: clamp(82px, 14vw, 112px); bottom: 22px; }
  .cast-bowser { z-index: 1; right: 25%; width: clamp(90px, 15vw, 122px); bottom: 20px; }
  .cast-yoshi { z-index: 1; left: 43%; width: clamp(76px, 12vw, 98px); bottom: 7px; }
  .cast-toad { z-index: 2; right: 40%; width: clamp(58px, 9vw, 74px); bottom: 18px; }
  .cast-mario { z-index: 4; left: 5%; width: clamp(112px, 18vw, 142px); bottom: -42px; }
  .cast-luigi { z-index: 4; right: 5%; width: clamp(94px, 15vw, 120px); bottom: -40px; }
}

@media (max-width: 720px) {
  .kingdom-bg { background-position: 53% center; }
  .stage { align-items: center; padding: 48px 10px 0; }
  .invite-card { width: min(95vw, 480px); padding: 1.75rem 1rem 1.25rem; border-radius: 26px; box-shadow: 0 18px 42px rgba(16,41,74,.3), inset 0 0 0 3px var(--yellow), inset 0 0 0 6px var(--red); }
  .invite-card::before, .invite-card::after { width: 31px; height: 31px; top: 18px; }
  .invite-card::before { left: 15px; }
  .invite-card::after { right: 15px; }
  .level-pill { top: -17px; min-width: 0; width: min(315px, 82vw); padding: .43rem .7rem; font-size: clamp(.52rem, 2.4vw, .65rem); letter-spacing: .055em; }
  .kicker { margin-top: .42rem; font-size: .59rem; letter-spacing: .13em; }
  .name { font-size: clamp(2.65rem, 13vw, 4rem); }
  .name span { -webkit-text-stroke-width: 2px; text-shadow: 0 4px 0 #17305d, 0 5px 6px rgba(0,0,0,.2); }
  .level-up { margin: .45rem 0; }
  .level-up::before, .level-up::after { width: 27px; }
  .invite-copy { margin-bottom: .7rem; font-size: .82rem; line-height: 1.35; }
  .details { gap: .4rem; }
  .details section { min-height: 52px; padding: .45rem .55rem; border-radius: 12px; }
  .detail-icon { width: 34px; height: 34px; }
  .details small { font-size: .56rem; }
  .details strong { font-size: .76rem; }
  .details em { font-size: .69rem; }
  .parent-note { margin: .65rem 0; font-size: .72rem; }
  .power-btn { min-height: 50px; padding: .7rem 1rem; font-size: .82rem; }
  .micro-copy { font-size: .61rem; }
  .scene-shade { background: linear-gradient(0deg, rgba(3,33,71,.15), transparent 45%); }
  .mobile-cast { width: min(430px, 100vw); height: 225px; margin-top: 10px; }
  .cast-peach { left: 24%; width: clamp(74px, 20vw, 88px); bottom: 29px; }
  .cast-bowser { right: 21%; width: clamp(82px, 22vw, 96px); bottom: 25px; }
  .cast-yoshi { left: 40%; width: clamp(70px, 19vw, 82px); bottom: 8px; }
  .cast-toad { right: 31%; width: clamp(52px, 14vw, 62px); bottom: 17px; }
  .cast-mario { left: -1%; width: clamp(104px, 29vw, 120px); bottom: -43px; }
  .cast-luigi { right: -1%; width: clamp(86px, 24vw, 102px); bottom: -39px; }
  .modal-inner { padding: 1rem .9rem 1.2rem; }
  .two { grid-template-columns: 1fr; }
}

@media (max-height: 760px) and (min-width: 1041px) {
  .stage { padding-top: 40px; padding-bottom: 40px; }
  .invite-card { transform: scale(.89); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .kingdom-bg, .character { transform: none !important; }
}