/* The Padel Passport · Miami mode. Neon sunset: pink, teal, violet, a warm orange sun. */
:root{
  --night:#1A0B2E;--ink:#0A0418;--pink:#FF3EA5;--teal:#2BD9C5;--violet:#7A3CFF;--sun:#FF8A3D;--yellow:#FFD23F;--paper:#F7F1FF;
  --display:Grandstander,'Arial Rounded MT Bold',sans-serif;--body:Figtree,system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none;background:var(--night)}
body{margin:0;background:var(--night);color:var(--paper);font:16px/1.4 var(--body);overscroll-behavior:none;overflow:hidden}
button,a,[role=button]{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mia{position:fixed;inset:0;height:100dvh;overflow:hidden}
.m-world{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}

/* ---------- HUD ---------- */
.m-hud{position:absolute;left:0;right:0;top:0;display:flex;gap:8px;align-items:flex-start;padding:calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l));pointer-events:none;opacity:0;transition:opacity .3s var(--ease-out)}
.mia.on .m-hud{opacity:1}
.m-hud>*{pointer-events:auto}
.m-cash{margin:0;min-height:44px;display:flex;align-items:center;padding:0 14px;border-radius:14px;background:rgba(10,4,24,.78);border:2px solid var(--teal);
  font:900 20px var(--display);color:var(--teal);text-shadow:0 0 10px rgba(43,217,197,.6)}
.m-goal{flex:1;min-width:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;text-align:left;padding:4px 12px;border-radius:14px;
  background:rgba(10,4,24,.78);border:2px solid var(--yellow);color:var(--paper);font:700 14px/1.2 var(--body);cursor:pointer;transition:transform .14s var(--ease-out)}
.m-goal small{font:800 10px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--yellow)}
.m-goal span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-pass{min-height:44px;min-width:44px;display:flex;align-items:center;gap:4px;padding:0 10px;border-radius:14px;background:rgba(10,4,24,.78);border:2px solid var(--pink);color:var(--paper);cursor:pointer;transition:transform .14s var(--ease-out)}
.m-pass b{font:800 13px var(--body)}
.m-pass .st{width:18px;height:18px;border-radius:50%;border:2px dashed rgba(255,255,255,.45)}
.m-pass .st.on{border:2px solid var(--pink);background:radial-gradient(circle,var(--pink) 0 45%,transparent 50%);box-shadow:0 0 10px var(--pink)}
.m-pass .st.on[data-s=wynwood]{border-color:var(--teal);background:radial-gradient(circle,var(--teal) 0 45%,transparent 50%);box-shadow:0 0 10px var(--teal)}
@media (max-width:430px){.m-pass b{display:none}.m-goal{font-size:13px}}
.m-goal:active,.m-pass:active,.m-btn:active,.m-act:active,.m-ride:active{transform:scale(.97)}

.m-hood{position:absolute;left:0;right:0;top:32%;margin:0;text-align:center;font:italic 900 clamp(44px,13vw,96px)/1 var(--display);color:var(--pink);
  text-shadow:0 0 18px var(--pink),0 0 42px rgba(255,62,165,.6);pointer-events:none;letter-spacing:.04em}
.m-hood.go{animation:hood 2.2s var(--ease-out) both}
@keyframes hood{0%{opacity:0;transform:translateY(12px) scale(.96)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}

/* ---------- controls ---------- */
.m-stick{position:absolute;left:0;top:0;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:3px solid rgba(43,217,197,.55);background:rgba(10,4,24,.3);
  opacity:0;pointer-events:none;transition:opacity .12s}
.m-stick.on{opacity:1}
.m-stick .knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:var(--teal);box-shadow:0 0 16px var(--teal)}
.m-stick.run .knob{background:var(--pink);box-shadow:0 0 16px var(--pink)}
.m-tapmark{position:absolute;left:0;top:0;width:28px;height:28px;margin:-14px;border-radius:50%;border:3px solid var(--yellow);pointer-events:none}
.m-tapmark.go{animation:tap .5s var(--ease-out) forwards}
@keyframes tap{from{opacity:1;scale:.6}to{opacity:0;scale:1.4}}
.m-controls{position:absolute;right:calc(12px + var(--safe-r));bottom:calc(14px + var(--safe-b));display:flex;gap:10px;align-items:flex-end;pointer-events:none}
.m-controls>*{pointer-events:auto}
.m-act{min-height:56px;min-width:96px;padding:0 18px;border-radius:18px;border:0;background:var(--yellow);color:var(--ink);font:900 17px var(--display);box-shadow:0 0 0 3px var(--ink),0 0 18px rgba(255,210,63,.6);cursor:pointer;transition:transform .14s var(--ease-out)}
.m-ride{min-height:56px;min-width:64px;padding:4px 12px;border-radius:18px;border:2px solid var(--teal);background:rgba(10,4,24,.82);color:var(--teal);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:transform .14s var(--ease-out)}
.m-ride b{font:900 15px var(--display)}.m-ride small{font:700 11px var(--body);color:var(--paper)}
.m-ride[aria-pressed=true]{background:var(--teal);color:var(--ink);box-shadow:0 0 18px var(--teal)}
.m-ride[aria-pressed=true] small{color:var(--ink)}
.m-keys{position:absolute;left:calc(12px + var(--safe-l));bottom:calc(12px + var(--safe-b));margin:0;font:600 12px var(--body);color:rgba(247,241,255,.7);pointer-events:none}
.m-keys kbd{font:800 11px var(--body);padding:2px 5px;border-radius:5px;background:rgba(255,255,255,.12);color:var(--paper)}
@media (hover:none),(pointer:coarse){.m-keys{display:none}}

/* ---------- dialog + sheets ---------- */
.m-dialog{position:absolute;left:calc(10px + var(--safe-l));right:calc(10px + var(--safe-r));bottom:calc(84px + var(--safe-b));max-width:620px;margin:0 auto;padding:12px 16px 14px;border-radius:18px;
  background:rgba(10,4,24,.92);border:2px solid var(--pink);box-shadow:0 0 24px rgba(255,62,165,.35);cursor:pointer;animation:rise .2s var(--ease-out)}
.m-dialog .who{margin:0 0 2px;font:900 15px var(--display);color:var(--pink)}
.m-dialog .txt{margin:0;font:600 17px/1.4 var(--body)}
.m-dialog .choices{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.m-dialog .more{position:absolute;right:14px;bottom:8px;font:800 11px var(--body);color:rgba(247,241,255,.55);text-transform:uppercase;letter-spacing:.1em}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.m-sheet{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,4,24,.55);padding:calc(10px + var(--safe-t)) calc(10px + var(--safe-r)) calc(10px + var(--safe-b)) calc(10px + var(--safe-l))}
.m-card{width:100%;max-width:560px;max-height:100%;overflow:auto;overscroll-behavior:contain;padding:18px 18px 16px;border-radius:22px;background:linear-gradient(180deg,#2A1248,#170A2A);
  border:2px solid var(--teal);box-shadow:0 0 30px rgba(43,217,197,.25);animation:rise .22s var(--ease-out)}
@media (min-width:700px){.m-sheet{align-items:center}}
.m-eyebrow{margin:0;font:800 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.m-card h2{margin:4px 0 6px;font:900 26px/1.1 var(--display);color:var(--paper)}
.m-card h2 span{color:var(--yellow)}
.m-card h3{margin:16px 0 6px;font:900 17px var(--display);color:var(--pink)}
.m-sub{margin:0 0 8px;color:rgba(247,241,255,.85)}
.m-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.m-col{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.m-btn{min-height:44px;padding:8px 16px;border-radius:14px;border:2px solid rgba(247,241,255,.35);background:rgba(255,255,255,.06);color:var(--paper);font:800 15px var(--body);
  cursor:pointer;text-decoration:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .14s var(--ease-out)}
.m-btn small{font:600 12px var(--body);opacity:.85}
.m-btn.hot{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 0 16px rgba(255,62,165,.45)}
.m-btn.big{min-height:52px;font-size:18px;padding:8px 26px}
.m-btn.danger{border-color:rgba(255,90,90,.6);color:#FFB3B3}
.m-btn[disabled],.m-btn[aria-disabled=true]{opacity:.5;box-shadow:none}
@media (hover:hover) and (pointer:fine){.m-btn:hover{border-color:var(--teal)}.m-btn.hot:hover{filter:brightness(1.08)}.m-goal:hover,.m-pass:hover{filter:brightness(1.15)}}
.m-btn:focus-visible,.m-goal:focus-visible,.m-pass:focus-visible,.m-act:focus-visible,.m-ride:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* shop */
.m-shop{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.m-shop li{display:flex;gap:10px;align-items:center;padding:10px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.m-shop li.on{border-color:var(--teal)}
.m-item{flex:1;min-width:0}
.m-item p{margin:0}.m-item b{font:900 16px var(--display)}.m-item small{display:block;font:700 11px var(--body);color:var(--teal);text-transform:uppercase;letter-spacing:.08em}
.m-blurb{font-size:13px;color:rgba(247,241,255,.8);margin:2px 0 6px!important}
.m-stat{display:grid;grid-template-columns:58px 1fr 66px;align-items:center;gap:6px;font:700 12px var(--body);text-transform:capitalize;margin:2px 0}
.m-stat i{height:7px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.m-stat i b{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--pink));transform-origin:left}
.m-stat em{font-style:normal;text-align:right;color:rgba(247,241,255,.8)}.m-stat em.up{color:var(--teal)}.m-stat em.down{color:#FF8A8A}

/* fights */
.m-vs{display:flex;gap:14px;align-items:center;margin:6px 0}
.m-face{width:64px;height:64px;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 38%,#E9B38C 0 26%,transparent 27%),radial-gradient(circle at 50% 100%,var(--c) 0 52%,transparent 53%),#13103A;border:3px solid var(--c);box-shadow:0 0 16px var(--c)}
.m-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}.m-chips span{font:800 12px var(--body);padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.1)}
.m-bubble{margin:10px 0;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.07);font-style:italic}
.m-tip{margin:0;font-size:14px}.m-tip b{color:var(--yellow)}

/* passport */
.m-mini{display:block;margin:0 auto;border-radius:14px;border:2px solid rgba(255,255,255,.15)}
.m-stamps{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:14px}
.m-stamps li{display:flex;flex-direction:column;align-items:center;gap:4px;font:700 12px var(--body);text-align:center;width:120px}
.m-minstamp{width:92px;height:92px;border-radius:50%;border:3px dashed rgba(255,255,255,.3);display:grid;place-items:center;font:900 13px var(--display);color:rgba(255,255,255,.3);transform:rotate(-8deg)}
.m-stamps li.on .m-minstamp{border:4px double var(--pink);color:var(--pink);text-shadow:0 0 8px var(--pink);box-shadow:inset 0 0 14px rgba(255,62,165,.35)}
.m-stamps li.on .m-minstamp.wynwood{border-color:var(--teal);color:var(--teal);text-shadow:0 0 8px var(--teal);box-shadow:inset 0 0 14px rgba(43,217,197,.35)}
.m-shots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.m-shots li{padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.2)}
.m-shots li.on{border:1px solid var(--teal)}
.m-shots b{display:block;font:900 14px var(--display)}.m-shots small{font-size:12px;color:rgba(247,241,255,.75)}
.m-chart{width:100%;border-collapse:collapse;font-size:13px}
.m-chart th{text-align:left;font:800 11px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--teal);padding:4px 6px}
.m-chart td{padding:6px;border-top:1px solid rgba(255,255,255,.1)}.m-chart b{color:var(--yellow)}

/* toast, travel, stamp */
.m-toast{position:absolute;left:50%;top:calc(66px + var(--safe-t));max-width:min(92vw,520px);padding:10px 16px;border-radius:14px;background:rgba(10,4,24,.92);border:2px solid var(--yellow);
  font:600 15px var(--body);text-align:center;translate:-50% 0;pointer-events:none}
.m-toast b{color:var(--yellow)}
.m-toast.go{animation:toast .24s var(--ease-out)}
@keyframes toast{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.m-travel{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#FF5E8A 0%,#FF8A3D 30%,#7A3CFF 62%,#1A0B2E 100%);overflow:hidden}
.m-travel p{position:relative;margin:0;font:italic 900 clamp(40px,12vw,84px)/1 var(--display);color:#fff;text-shadow:0 0 22px var(--pink);text-align:center}
.m-travel small{display:block;font:800 14px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-shadow:none}
.m-road{position:absolute;left:-50%;right:-50%;bottom:0;height:42%;background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,210,63,.9) 46px 90px,transparent 90px 140px) 0 50%/140px 6px no-repeat,#140826;transform:perspective(300px) rotateX(55deg);transform-origin:bottom}
.m-travel.go .m-road{animation:road .4s linear infinite}
@keyframes road{to{background-position:-140px 50%,0 0}}
.m-stampfx{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,4,24,.82);padding:calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b))}
.m-stampcard{max-width:420px;text-align:center}
.m-stampcard h2{margin:16px 0 6px;font:900 34px var(--display);color:var(--paper)}
.m-stampcard ul{list-style:none;padding:0;margin:0 0 16px;font:600 16px var(--body)}.m-stampcard li{margin:4px 0}.m-stampcard li b{color:var(--yellow)}
.m-bigstamp{width:200px;height:200px;margin:0 auto;border-radius:50%;border:8px double var(--pink);display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--pink);text-shadow:0 0 12px var(--pink);box-shadow:0 0 40px rgba(255,62,165,.5),inset 0 0 30px rgba(255,62,165,.35);transform:rotate(-10deg);animation:thunk .42s var(--ease-out) both}
.m-bigstamp.wynwood{border-color:var(--teal);color:var(--teal);text-shadow:0 0 12px var(--teal);box-shadow:0 0 40px rgba(43,217,197,.5),inset 0 0 30px rgba(43,217,197,.35)}
.m-bigstamp b{font:italic 900 34px/1 var(--display)}.m-bigstamp span{font:800 12px var(--body);letter-spacing:.16em}
@keyframes thunk{0%{opacity:0;transform:rotate(-18deg) scale(1.35)}60%{opacity:1;transform:rotate(-9deg) scale(.96)}100%{transform:rotate(-10deg) scale(1)}}

/* title */
.m-title{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#2A0F4A 0%,#7A2A7A 38%,#FF5E8A 62%,#FF8A3D 78%,#1A0B2E 78.4%,#120720 100%);overflow:hidden;
  padding:calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b))}
.m-sun{position:absolute;left:50%;top:46%;width:min(70vw,360px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:repeating-linear-gradient(180deg,#FFD23F 0 14px,transparent 14px 20px) 0 58%/100% 100% no-repeat,linear-gradient(180deg,#FFD23F,#FF3EA5);
  -webkit-mask:linear-gradient(180deg,#000 0 55%,transparent 55% 59%,#000 59% 66%,transparent 66% 69%,#000 69% 75%,transparent 75% 77%,#000 77%);mask:linear-gradient(180deg,#000 0 55%,transparent 55% 59%,#000 59% 66%,transparent 66% 69%,#000 69% 75%,transparent 75% 77%,#000 77%);opacity:.9}
.m-titlecard{position:relative;text-align:center;max-width:440px}
.m-title h1{margin:0;font:italic 900 clamp(76px,24vw,150px)/.9 var(--display);color:#fff;text-shadow:0 0 16px var(--pink),0 0 40px var(--pink),4px 4px 0 var(--violet)}
.m-title .m-eyebrow{color:var(--paper)}
.m-tag{margin:10px 0 22px;font:700 17px var(--body);color:var(--paper);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.m-link{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;color:var(--paper);font:700 14px var(--body)}
.m-title .m-btn.big{min-width:200px}

@media (prefers-reduced-motion:reduce){
  .m-hood.go,.m-toast.go,.m-dialog,.m-card,.m-bigstamp,.m-tapmark.go{animation-duration:.01s}
  .m-travel.go .m-road{animation:none}
}
.m-mute{position:absolute;top:calc(60px + var(--safe-t));right:calc(10px + var(--safe-r));width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:14px;background:rgba(10,4,24,.78);border:2px solid var(--teal);color:var(--teal);cursor:pointer;transition:transform .14s var(--ease-out)}
.m-mute:active{transform:scale(.95)}
.mute-toggle .off,.mute-toggle.muted .on{display:none}.mute-toggle.muted .off{display:inline}
.m-mute.muted{color:var(--paper);border-color:rgba(255,255,255,.4)}