/* Monpadel — оформление поверх игры: тёмное стекло, лайм-акцент, Manrope.
   Подключается последним и только переопределяет внешний вид. */

@font-face{font-family:'Manrope';font-weight:300;font-display:swap;src:url(/fonts/manrope/manrope-latin-300.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212;}
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url(/fonts/manrope/manrope-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212;}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url(/fonts/manrope/manrope-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212;}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url(/fonts/manrope/manrope-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212;}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url(/fonts/manrope/manrope-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212;}
@font-face{font-family:'Manrope';font-weight:800;font-display:swap;src:url(/fonts/manrope/manrope-latin-800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212;}
@font-face{font-family:'Manrope';font-weight:300;font-display:swap;src:url(/fonts/manrope/manrope-cyrillic-300.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url(/fonts/manrope/manrope-cyrillic-400.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url(/fonts/manrope/manrope-cyrillic-500.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url(/fonts/manrope/manrope-cyrillic-600.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url(/fonts/manrope/manrope-cyrillic-700.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-weight:800;font-display:swap;src:url(/fonts/manrope/manrope-cyrillic-800.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

/* Monpadel — светлое матовое стекло без обводок, крупная типографика, лайм-акцент.
   Подключается последним и только меняет внешний вид. */
html body, html body.m4-page, html body .m4-root{
  --mp-lime:#D4F25A; --mp-lime-deep:#9FBF1E; --mp-ink:#12161B; --mp-ink-2:#3B444E; --mp-ink-3:#7A848F;
  --mp-paper:rgba(246,248,245,.80); --mp-paper-2:rgba(255,255,255,.62); --mp-paper-hi:rgba(255,255,255,.92);
  --mp-fill:rgba(18,22,27,.06); --mp-fill-2:rgba(18,22,27,.1);
  --mp-blur:blur(28px) saturate(170%);
  --mp-shadow:0 24px 60px rgba(4,8,14,.28), 0 2px 6px rgba(4,8,14,.08);
  --primary:var(--mp-lime-deep); --secondary:var(--mp-ink); --gold:var(--mp-lime-deep); --good:#6f8f12; --purple:var(--mp-ink-2);
  --cyan:var(--mp-lime-deep); --yellow:var(--mp-lime); --green:#6f8f12; --red:#d4574b;
  --disp:'Manrope', system-ui, sans-serif;
}
html body, html body *:not(svg):not(path):not(use){font-family:'Manrope', system-ui, sans-serif !important;}
html body *{text-shadow:none !important;}
.mp-ic{width:1.1em;height:1.1em;flex:0 0 auto;}

/* ---------- новое меню: старое прячем ---------- */
body.mp-new-menu #menu-content{visibility:hidden !important;pointer-events:none !important;}
body.mp-new-menu #menu-content *{animation:none !important;}
#mp-menu{position:absolute;inset:0;color:#fff;overflow:hidden;
  --sl:max(28px, env(safe-area-inset-left)); --sr:max(28px, env(safe-area-inset-right));
  --st:max(22px, env(safe-area-inset-top)); --sb:max(24px, env(safe-area-inset-bottom));}
#mp-menu .mp-vignette{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(5,8,12,.62) 0%, rgba(5,8,12,.25) 38%, rgba(5,8,12,0) 60%),
             linear-gradient(0deg, rgba(5,8,12,.55) 0%, rgba(5,8,12,0) 42%);}
#mp-menu button{font:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}

.mp-top{position:absolute;left:var(--sl);right:var(--sr);top:var(--st);display:flex;align-items:center;justify-content:space-between;
  animation:mpDown .8s cubic-bezier(.2,.8,.2,1) .05s backwards;}
.mp-logo-top{height:26px;width:auto;}
.mp-actions{display:flex;gap:10px;align-items:center;}
.mp-chip, .mp-round{height:44px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;
  background:var(--mp-paper-2);color:var(--mp-ink);-webkit-backdrop-filter:var(--mp-blur);backdrop-filter:var(--mp-blur);
  box-shadow:0 8px 24px rgba(4,8,14,.18);font-weight:700;font-size:14px;transition:transform .25s cubic-bezier(.2,.8,.2,1), background .2s;}
.mp-chip{padding:0 18px 0 14px;}
.mp-round{width:44px;}
.mp-chip:hover, .mp-round:hover{background:var(--mp-paper-hi);transform:translateY(-2px);}

.mp-hero{position:absolute;left:var(--sl);top:clamp(90px,17vh,170px);max-width:min(560px,46vw);
  animation:mpUp .9s cubic-bezier(.2,.8,.2,1) .12s backwards;}
.mp-kick{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);}
.mp-kick::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mp-lime);box-shadow:0 0 0 4px rgba(212,242,90,.22);}
.mp-title{margin:14px 0 14px;font-size:clamp(46px,8.2vw,112px);line-height:.9;font-weight:800;letter-spacing:-.055em;color:#fff;}
.mp-sub{margin:0;max-width:440px;font-size:clamp(14px,1.25vw,17px);line-height:1.5;font-weight:500;color:rgba(255,255,255,.78);}

.mp-rail{position:absolute;left:var(--sl);right:var(--sr);bottom:var(--sb);display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.95fr);gap:16px;align-items:stretch;}
.mp-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:30px;
  background:var(--mp-paper);color:var(--mp-ink);-webkit-backdrop-filter:var(--mp-blur);backdrop-filter:var(--mp-blur);
  box-shadow:var(--mp-shadow);
  animation:mpUp .8s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.3s + var(--i) * .09s);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;}
.mp-card:hover{transform:translateY(-4px);box-shadow:0 32px 70px rgba(4,8,14,.34), 0 2px 6px rgba(4,8,14,.08);}
.mp-card-head h2{margin:6px 0 0;font-size:clamp(24px,2.4vw,34px);font-weight:800;letter-spacing:-.04em;line-height:1;}
.mp-tag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mp-ink-3);}
.mp-text{margin:0;font-size:13px;line-height:1.45;color:var(--mp-ink-2);font-weight:500;}
.mp-field{display:flex;flex-direction:column;gap:7px;}
.mp-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mp-ink-3);}
.mp-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:999px;background:var(--mp-fill);}
.mp-seg button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 10px;border-radius:999px;
  background:transparent;color:var(--mp-ink-2);font-weight:700;font-size:13px;white-space:nowrap;transition:background .25s, color .25s, box-shadow .25s;}
.mp-seg button svg{width:15px;height:15px;opacity:.75;}
.mp-seg button small{font-weight:600;color:var(--mp-ink-3);font-size:11px;}
.mp-seg button:hover{color:var(--mp-ink);}
.mp-seg button.on{background:#fff;color:var(--mp-ink);box-shadow:0 4px 14px rgba(4,8,14,.12);}
.mp-seg-sm button{min-height:34px;}
.mp-play{position:relative;overflow:hidden;margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  min-height:62px;padding:0 10px 0 26px;border-radius:999px;background:var(--mp-lime) !important;color:var(--mp-ink) !important;
  font-size:20px !important;font-weight:800 !important;letter-spacing:-.02em;transition:transform .25s cubic-bezier(.2,.8,.2,1), filter .2s;}
.mp-play .mp-ic{width:44px;height:44px;padding:13px;border-radius:50%;background:var(--mp-ink);color:var(--mp-lime);transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.mp-play:hover{filter:brightness(1.03);transform:translateY(-1px);}
.mp-play:hover .mp-ic{transform:translateX(3px) scale(1.05);}
.mp-play::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
  background-size:300% 100%;animation:mpShine 6s ease-in-out infinite 2s;pointer-events:none;}
@keyframes mpShine{0%{background-position:130% 0}30%,100%{background-position:-60% 0}}

.mp-avatars{display:flex;align-items:center;}
.mp-avatars i{width:38px;height:38px;border-radius:50%;margin-right:-10px;border:3px solid rgba(246,248,245,.95);
  background:linear-gradient(135deg,#cfd6dd,#9aa5b0);}
.mp-avatars i:nth-child(2){background:linear-gradient(135deg,#e6efc0,#b7d15a);}
.mp-avatars i:nth-child(3){background:linear-gradient(135deg,#c9d2e6,#7e8fb4);}
.mp-avatars .mp-plus{display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--mp-ink-2);background:#fff;}
.mp-dark{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:999px;
  background:var(--mp-ink) !important;color:#fff !important;font-weight:700 !important;font-size:15px !important;transition:transform .25s cubic-bezier(.2,.8,.2,1), background .2s;}
.mp-dark:hover{transform:translateY(-1px);background:#232a33 !important;}
.mp-link{display:flex;align-items:center;justify-content:center;gap:7px;background:none !important;color:var(--mp-ink-2) !important;font-weight:600 !important;font-size:13px !important;padding:2px !important;}
.mp-link:hover{color:var(--mp-ink) !important;}
.mp-stack{display:grid;grid-template-rows:1fr 1fr;gap:16px;}
.mp-mini{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:20px 22px;}
.mp-mini .mp-text{margin-top:6px;font-size:12.5px;}
.mp-big{display:flex;align-items:flex-start;line-height:.85;font-variant-numeric:tabular-nums;}
.mp-big b{font-size:56px;font-weight:300;letter-spacing:-.05em;}
.mp-big i{font-style:normal;font-weight:700;font-size:16px;color:var(--mp-ink-3);margin-top:4px;}
.mp-arrow{display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;border-radius:50%;background:var(--mp-ink);color:#fff;transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.mp-mini:hover .mp-arrow{transform:translateX(3px);}

@keyframes mpUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes mpDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

@media (max-width:1100px){ .mp-rail{grid-template-columns:1fr 1fr;} .mp-stack{grid-column:1 / -1;grid-template-rows:none;grid-template-columns:1fr 1fr;} .mp-hero{top:80px;} .mp-title{font-size:clamp(40px,9vw,80px);} }
@media (max-width:720px), (max-height:560px){
  .mp-hero{display:none;}
  .mp-rail{top:calc(var(--st) + 60px);bottom:var(--sb);overflow-y:auto;grid-template-columns:1fr;align-content:end;}
  .mp-stack{grid-template-columns:1fr 1fr;}
  .mp-chip span{display:none;} .mp-chip{width:44px;padding:0;}
}
@media (prefers-reduced-motion: reduce){ #mp-menu *{animation:none !important;transition:none !important;} }

/* ---------- окна (настройки, пауза, итоги, обучение): светлое стекло ---------- */
html body.m4-page #screens.visible:not(.menu-open){background:rgba(5,8,12,.38) !important;-webkit-backdrop-filter:blur(8px) !important;backdrop-filter:blur(8px) !important;}
html body.m4-page .screen.glass:not(#scr-menu), html body.m4-page #clip-panel, html body.m4-page #link-panel, html body.m4-page #tut-done{
  background:var(--mp-paper) !important;-webkit-backdrop-filter:var(--mp-blur) !important;backdrop-filter:var(--mp-blur) !important;
  border:0 !important;border-radius:30px !important;box-shadow:var(--mp-shadow) !important;color:var(--mp-ink) !important;}
html body.m4-page .screen.glass:not(#scr-menu)::before, html body.m4-page #clip-panel::before,
html body.m4-page #link-panel::before, html body.m4-page #tut-done::before{display:none !important;}
html body.m4-page .screen:not(#scr-menu) *{color:inherit;border-color:rgba(18,22,27,.08) !important;}
html body.m4-page .screen:not(#scr-menu) h1, html body.m4-page .screen:not(#scr-menu) h2{color:var(--mp-ink) !important;font-weight:800 !important;letter-spacing:-.04em !important;text-transform:none !important;}
html body.m4-page .screen:not(#scr-menu) h1 b{color:var(--mp-lime-deep) !important;}
html body.m4-page .screen:not(#scr-menu) .sub, html body.m4-page .screen:not(#scr-menu) p, .menu-sec{color:var(--mp-ink-2) !important;}
html body.m4-page .screen:not(#scr-menu) [class*="kick"]{color:var(--mp-ink-3) !important;}
.btn{border-radius:999px !important;font-weight:700 !important;letter-spacing:-.01em !important;text-transform:none !important;border:0 !important;}
.btn-primary{background:var(--mp-lime) !important;color:var(--mp-ink) !important;box-shadow:none !important;}
.btn-secondary, .btn-ghost, .diff-row .btn{background:var(--mp-fill) !important;color:var(--mp-ink) !important;}
.btn-secondary:hover, .btn-ghost:hover{background:var(--mp-fill-2) !important;}
.diff-row .btn.active, .racket-card.active{background:#fff !important;color:var(--mp-ink) !important;box-shadow:0 4px 14px rgba(4,8,14,.12) !important;}
.racket-card{background:var(--mp-fill) !important;border:0 !important;color:var(--mp-ink) !important;}
.screen select, .screen input[type="text"]{background:#fff !important;color:var(--mp-ink) !important;border:0 !important;border-radius:12px;}
.mp-credit{font-size:11px;color:var(--mp-ink-3) !important;margin-top:14px;text-align:left;}

/* ---------- в матче: табло и уведомления ---------- */
#scoreboard{background:var(--mp-paper) !important;border:0 !important;border-radius:999px !important;padding:9px 20px !important;gap:16px !important;
  color:var(--mp-ink) !important;box-shadow:0 12px 30px rgba(4,8,14,.25) !important;-webkit-backdrop-filter:var(--mp-blur) !important;backdrop-filter:var(--mp-blur) !important;}
#scoreboard .nm, #scoreboard .team.away .nm{color:var(--mp-ink-3) !important;font-weight:700 !important;letter-spacing:.08em !important;}
#scoreboard .games{font-weight:300 !important;font-size:24px !important;color:var(--mp-ink) !important;}
#scoreboard .pts{font-weight:800 !important;color:var(--mp-ink) !important;background:var(--mp-lime);border-radius:999px;padding:2px 9px;}
#scoreboard .srv{background:var(--mp-lime-deep) !important;box-shadow:none !important;}

.hud-msg{top:16% !important;font-size:clamp(14px,1.5vw,16px) !important;font-weight:700 !important;letter-spacing:-.01em !important;white-space:nowrap;
  color:var(--mp-ink) !important;padding:12px 22px 12px 16px !important;border-radius:999px;background:var(--mp-paper);
  box-shadow:0 14px 34px rgba(4,8,14,.26);-webkit-backdrop-filter:var(--mp-blur);backdrop-filter:var(--mp-blur);
  transform:translate(-50%,-10px) scale(.98) !important;transition:opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1) !important;}
.hud-msg.show{transform:translate(-50%,0) scale(1) !important;}
.hud-msg::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:11px;vertical-align:1px;background:var(--mp-ink-3);}
.hud-msg.good::before, .hud-msg.gold::before{background:var(--mp-lime-deep);box-shadow:0 0 0 4px rgba(212,242,90,.35);}
.hud-msg.bad::before{background:#d4574b;}
.hud-msg.good, .hud-msg.bad, .hud-msg.warn, .hud-msg.gold{color:var(--mp-ink) !important;}

.hud-quality{top:28% !important;font-size:12px !important;font-weight:800 !important;letter-spacing:.12em !important;
  padding:8px 15px;border-radius:999px;background:var(--mp-paper);color:var(--mp-ink) !important;
  box-shadow:0 10px 26px rgba(4,8,14,.22);-webkit-backdrop-filter:var(--mp-blur);backdrop-filter:var(--mp-blur);}
.hud-quality.perfect{background:var(--mp-lime) !important;color:var(--mp-ink) !important;}
.hud-quality.good, .hud-quality.ok, .hud-quality.weak{color:var(--mp-ink) !important;}
.hud-quality.weak{opacity:.85;}
#hud-vs{font-weight:800 !important;letter-spacing:-.04em;color:#fff;}
#hud-vs .vs-you{color:var(--mp-lime) !important;} #hud-vs .vs-them{color:#fff !important;} #hud-vs .vs-mid{color:rgba(255,255,255,.6) !important;}

.pl-callout{font-weight:700 !important;font-size:13px !important;color:var(--mp-ink) !important;background:var(--mp-paper-hi) !important;
  border:0 !important;border-radius:999px !important;padding:7px 14px !important;box-shadow:0 8px 22px rgba(4,8,14,.25) !important;}
.pl-callout:after{display:none !important;}
.pl-callout.ack{background:var(--mp-lime) !important;}

.gl-toast{background:var(--mp-paper) !important;border:0 !important;border-radius:22px !important;color:var(--mp-ink) !important;
  box-shadow:0 18px 44px rgba(4,8,14,.3) !important;-webkit-backdrop-filter:var(--mp-blur) !important;backdrop-filter:var(--mp-blur) !important;}
.gl-toast *{color:inherit !important;}

#tut-card{background:var(--mp-paper) !important;border:0 !important;border-radius:24px !important;color:var(--mp-ink) !important;
  box-shadow:0 18px 44px rgba(4,8,14,.3) !important;-webkit-backdrop-filter:var(--mp-blur) !important;backdrop-filter:var(--mp-blur) !important;}
#tut-card *{color:inherit;}
#tut-fb.good{color:#5d7a0c !important;} #tut-fb.warn{color:var(--mp-ink) !important;}
.tut-focus{outline:2px solid var(--mp-lime) !important;outline-offset:3px;}
.glass{border:0 !important;}

/* ---------- экран загрузки: светлый ---------- */
#loading{background:radial-gradient(ellipse at 30% 20%, #ffffff, #eef1ec 55%, #e3e8e1) !important;color:var(--mp-ink);
  flex-direction:column;align-items:center;justify-content:center;gap:0 !important;
  transition:opacity .6s ease .35s, visibility 0s linear .95s !important;}
#loading .logo{display:none !important;}
.mp-load{width:min(560px,86vw);display:flex;flex-direction:column;align-items:flex-start;}
.mp-load-logo{height:26px;width:auto;margin-bottom:clamp(28px,7vh,64px);animation:mpUp .8s cubic-bezier(.2,.8,.2,1) backwards;}
.mp-load-num{display:flex;align-items:flex-start;line-height:.82;color:var(--mp-ink);font-variant-numeric:tabular-nums;}
.mp-load-num span{font-size:clamp(110px,26vh,220px);font-weight:200;letter-spacing:-.07em;}
.mp-load-num i{font-style:normal;font-size:clamp(22px,4vh,34px);font-weight:700;color:var(--mp-lime-deep);margin:.35em 0 0 .2em;}
.mp-load-stage{margin:18px 0 16px;font-size:clamp(17px,2.4vh,21px);font-weight:700;letter-spacing:-.02em;color:var(--mp-ink);min-height:1.4em;}
.mp-load-stage.in{animation:mpStage .45s cubic-bezier(.2,.8,.2,1);}
@keyframes mpStage{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#loading .bar{width:100% !important;height:3px !important;background:rgba(18,22,27,.08) !important;border-radius:3px;}
#loading .bar i{background:var(--mp-ink) !important;box-shadow:none !important;transition:width .6s ease !important;}
.mp-load-steps{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.mp-load-steps li{font-size:12px;font-weight:700;color:var(--mp-ink-3);padding:7px 12px;border-radius:999px;background:rgba(18,22,27,.05);transition:color .3s, background .3s;}
.mp-load-steps li.done{color:var(--mp-ink-2);}
.mp-load-steps li.done::before{content:"\2713";margin-right:6px;color:var(--mp-lime-deep);}
.mp-load-steps li.now{color:var(--mp-ink);background:var(--mp-lime);}

/* старое меню целиком скрыто, в том числе 3D-ракетка (отдельный холст) */
body.mp-new-menu #racket-preview-canvas{display:none !important;}
html body #mp-menu .mp-title{font-size:clamp(48px,8.4vw,116px) !important;line-height:.9 !important;font-weight:800 !important;letter-spacing:-.055em !important;margin:14px 0 16px !important;color:#fff !important;text-transform:none !important;}
html body #mp-menu .mp-card-head h2{font-size:clamp(24px,2.4vw,34px) !important;font-weight:800 !important;letter-spacing:-.04em !important;margin:6px 0 0 !important;color:var(--mp-ink) !important;text-transform:none !important;}