/* Monpadel — меню и экраны на телефонах.
   Горизонтально (основной режим): всё помещается в ~390px высоты без наложений.
   Вертикально (если игрок выбрал «играть вертикально»): блоки идут столбиком с прокруткой. */

/* ---------- телефон горизонтально ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  #ea-menu{--sl:max(16px, env(safe-area-inset-left)); --sr:max(16px, env(safe-area-inset-right));
    --st:max(10px, env(safe-area-inset-top)); --sb:max(10px, env(safe-area-inset-bottom));}
  .ea-top{gap:14px !important;}
  .ea-logo{height:18px !important;}
  .ea-tabs{gap:16px !important;padding-left:14px !important;}
  .ea-tabs button{font-size:15px !important;}
  .ea-tabs .ea-keycap, .ea-lvl, .ea-coin:nth-of-type(2), .ea-hints{display:none !important;}
  .ea-wallet{gap:8px !important;font-size:13px !important;}
  .ea-coin{padding-left:8px !important;}
  .ea-iconbtn{width:34px !important;height:34px !important;}
  .ea-about{display:none !important;}

  .ea-body{top:calc(var(--st) + 48px) !important;bottom:var(--sb) !important;}
  .ea-side{display:none !important;}
  .ea-main{width:100% !important;}
  .ea-h1{font-size:clamp(24px,7vh,34px) !important;}
  .ea-line{margin-top:6px !important;font-size:12px !important;}
  .ea-desc{display:none !important;}
  /* переключатели и кнопка — одной строкой */
  .ea-stats{margin-top:10px !important;min-height:0 !important;gap:18px !important;flex-wrap:wrap;}
  .ea-stat{gap:4px !important;}
  .ea-stat > span{font-size:11px !important;}
  .ea-stat > span em, .ea-hint{display:none !important;}
  .ea-cycle b{min-width:92px !important;font-size:15px !important;}
  .ea-cycle button{width:28px !important;height:28px !important;}
  .ea-cta{position:absolute;right:0;top:0;margin:0 !important;height:48px !important;padding:0 20px 0 6px !important;font-size:15px !important;gap:10px !important;}
  .ea-cta-k{width:36px !important;height:36px !important;}
  /* плитки — низкий ряд с прокруткой */
  .ea-tiles{width:100% !important;gap:8px !important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .ea-tiles::-webkit-scrollbar{display:none;}
  .ea-tile{flex:0 0 132px !important;height:clamp(64px,19vh,84px) !important;padding:10px 12px !important;border-radius:16px !important;}
  .ea-tile b{font-size:13px !important;}
  .ea-tile-ic{width:56px !important;height:56px !important;}
  .ea-tile-ic .ea-ic{width:42px !important;height:42px !important;}
  .ea-tile.on{transform:translateY(-3px) !important;}

  /* рейтинг: таблица на всю высоту со своей прокруткой */
  .ea-board{width:100% !important;}
  .ea-board .ea-line{display:none;}
  .ea-table{margin-top:8px !important;max-height:calc(100vh - 120px) !important;max-height:calc(100dvh - 120px) !important;}
  .ea-tr{grid-template-columns:34px 1fr 70px 70px 54px !important;padding:7px 12px !important;font-size:13px !important;border-radius:12px !important;}
  .ea-name i{width:26px !important;height:26px !important;font-size:10px !important;}

  /* профиль: карточка поменьше, кнопки столбиком справа */
  .ea-profile{grid-template-columns:auto 1fr auto !important;gap:16px !important;}
  .ea-card{width:clamp(120px,26vh,150px) !important;padding:12px !important;border-radius:16px !important;}
  .ea-ovr b{font-size:34px !important;}
  .ea-card-name{font-size:14px !important;margin-top:4% !important;}
  .ea-card-stats b{font-size:12px !important;} .ea-card-stats small{font-size:8px !important;}
  .ea-levelrow{margin-top:14px !important;}
  .ea-lv{width:48px !important;height:48px !important;font-size:22px !important;border-radius:12px !important;}
  .ea-lvbar{flex-basis:120px !important;}
  .ea-actions{grid-column:auto !important;display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;gap:8px !important;padding-left:14px !important;min-height:0 !important;border-left:1px solid rgba(255,255,255,.14) !important;}
  .ea-card-top img{display:none !important;}
  .ea-pill{min-width:150px !important;height:42px !important;padding:0 18px !important;font-size:14px !important;}

  /* окна: на всю высоту с прокруткой, крупные заголовки поменьше */
  html body.m4-page .screen.glass:not(#scr-menu){max-height:calc(100dvh - 16px) !important;padding:16px 18px !important;border-radius:22px !important;}
  html body.m4-page .screen:not(#scr-menu) h1{font-size:24px !important;}
  html body.m4-page #scr-results .res-title{font-size:40px !important;}
  .rs-team b{font-size:52px !important;}
  html body.m4-page .res-stat b{font-size:24px !important;}
  .kb-stage{padding:10px !important;gap:10px !important;}
  .kb-key{height:24px !important;font-size:9px !important;border-radius:7px !important;}
  .kb-row, .kb-board{gap:3px !important;}
  .kb-mouse{width:52px !important;}
  .kb-caption b{font-size:18px !important;}
  .kb-list{grid-template-columns:repeat(auto-fill,minmax(120px,1fr)) !important;}

  /* экран загрузки */
  .mp-load-logo{margin-bottom:14px !important;height:20px !important;}
  .mp-load-num span{font-size:clamp(70px,24vh,110px) !important;}
  .mp-load-stage{margin:8px 0 10px !important;font-size:16px !important;}
  .mp-load-steps{margin-top:10px !important;}
}

/* ---------- телефон вертикально ---------- */
@media (max-width: 600px) and (orientation: portrait) {
  #ea-menu{--sl:16px; --sr:16px; --st:max(14px, env(safe-area-inset-top)); --sb:max(14px, env(safe-area-inset-bottom));}
  .ea-top{flex-wrap:wrap;row-gap:10px !important;}
  .ea-logo{height:20px !important;}
  .ea-tabs{order:3;width:100%;border-left:0 !important;padding-left:0 !important;gap:18px !important;}
  .ea-tabs .ea-keycap, .ea-lvl, .ea-hints, .ea-about{display:none !important;}
  .ea-wallet{gap:8px !important;}
  .ea-coin:nth-of-type(2){display:none !important;}
  .ea-iconbtn{width:36px !important;height:36px !important;}
  .ea-body{top:calc(var(--st) + 96px) !important;bottom:var(--sb) !important;overflow-y:auto;}
  .ea-main, .ea-board{position:relative !important;width:100% !important;}
  .ea-side{display:none !important;}
  .ea-h1{font-size:34px !important;}
  .ea-desc{font-size:14px !important;}
  .ea-stats{flex-direction:column;gap:14px !important;}
  .ea-cta{width:100%;justify-content:center;}
  .ea-tiles{position:relative !important;margin-top:20px;width:100% !important;display:grid !important;grid-template-columns:1fr 1fr;gap:8px !important;}
  .ea-tile{height:84px !important;}
  .ea-profile{position:relative !important;display:flex !important;flex-direction:column;gap:16px !important;}
  .ea-card{width:170px !important;}
  .ea-actions{flex-direction:column !important;border:0 !important;padding:0 !important;width:100%;}
  .ea-pill{width:100%;}
  .ea-table{max-height:none !important;}
  .ea-tr{grid-template-columns:30px 1fr 64px 64px !important;}
  .ea-tr > span:last-child{display:none;}
}

/* «повернуть телефон» — в стиле меню */
.rotate-sub, #rotate-sub{color:rgba(255,255,255,.7) !important;}

/* ---------- в матче на телефоне: табло и уведомления компактнее ---------- */
@media (max-height: 520px) and (orientation: landscape), (max-width: 600px) {
  #scoreboard{top:6px !important;padding:4px 12px !important;gap:8px !important;font-size:11px !important;}
  #scoreboard .team{gap:5px !important;}
  #scoreboard .nm{font-size:9px !important;max-width:86px !important;letter-spacing:.04em !important;}
  #scoreboard .games{font-size:17px !important;min-width:12px !important;}
  #scoreboard .pts{font-size:11px !important;padding:1px 7px !important;min-width:22px !important;}
  #scoreboard .srv{width:5px !important;height:5px !important;}
  #scoreboard .sb-legend{width:11px !important;height:11px !important;flex-basis:11px !important;}
  .sb-dots{gap:3px !important;}
  .sb-dots i{width:5px !important;height:5px !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35) !important;}
  #sb-golden{font-size:8px !important;}
  .hud-msg{top:12% !important;font-size:12px !important;padding:7px 14px 7px 11px !important;}
  .hud-msg::before{width:6px !important;height:6px !important;margin-right:8px !important;}
  .hud-quality{top:22% !important;font-size:10px !important;padding:5px 10px !important;}
  .pl-callout{font-size:11px !important;padding:4px 10px !important;}
  #btn-hud-pause{width:34px !important;height:34px !important;top:6px !important;font-size:12px !important;}
  #tut-card{padding:12px 16px !important;max-width:calc(100vw - 120px) !important;}
}

/* ---------- шкала силы подачи: на телефоне — горизонтально под табло ---------- */
#serve-meter{border:0 !important;background:rgba(13,18,25,.72) !important;}
#serve-meter-fill{background:linear-gradient(to top, rgba(212,242,90,.55) 0%, #D4F25A 65%, #ffffff 100%) !important;}
#serve-meter .sweet{border-color:rgba(255,255,255,.9) !important;}
@media (max-height: 520px) and (orientation: landscape), (max-width: 600px) {
  #serve-meter{right:auto !important;bottom:auto !important;left:50% !important;top:58px !important;width:10px !important;height:44vw !important;
    transform:translate(-50%, -50%) rotate(90deg) !important;box-shadow:0 6px 18px rgba(0,0,0,.35);}
}

/* ---------- видеоповтор: управление пальцем прячем ---------- */
body.replaying #touch-shots, body.replaying .touch-ghost, body.replaying #pl-stick, body.replaying #serve-meter{display:none !important;}

/* ---------- подсказки внизу не налезают друг на друга ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  #hud-serve-hint{bottom:auto !important;top:58px !important;font-size:12px !important;max-width:46vw;}
  #hud-tutorial{bottom:3% !important;}
}

/* ---------- меню: ряд плиток не обрезается снизу ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .ea-body{bottom:calc(var(--sb) + 6px) !important;}
  .ea-tiles{padding:6px 2px 4px !important;}
}

/* ---------- кнопка «Установить игру» ---------- */
#mp-install{position:fixed;z-index:60;left:50%;bottom:max(18px, env(safe-area-inset-bottom));transform:translate(-50%, 20px);opacity:0;
  display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px 0 16px;border:0;border-radius:999px;cursor:pointer;
  background:#D4F25A;color:#0B0F14;font:800 15px 'Manrope',system-ui,sans-serif;box-shadow:0 12px 30px rgba(0,0,0,.4);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s;}
#mp-install.in{transform:translate(-50%, 0);opacity:1;}
#mp-install[hidden]{display:none;}
#mp-install:hover{filter:brightness(1.04);}
#mp-install-tip{position:fixed;z-index:61;left:50%;bottom:calc(max(18px, env(safe-area-inset-bottom)) + 58px);transform:translateX(-50%);
  width:min(340px, calc(100vw - 32px));padding:16px 18px;border-radius:20px;background:rgba(13,18,25,.92);color:#fff;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 16px 40px rgba(0,0,0,.45);font:600 14px/1.45 'Manrope',system-ui,sans-serif;}
#mp-install-tip p{margin:0 0 10px;}
#mp-install-tip button{border:0;border-radius:999px;padding:8px 16px;background:#D4F25A;color:#0B0F14;font:800 13px 'Manrope',sans-serif;cursor:pointer;}
/* в меню телефона кнопка не закрывает плитки: справа сверху */
@media (max-height: 520px) and (orientation: landscape) {
  body.mp-new-menu #mp-install{left:auto;right:calc(max(16px, env(safe-area-inset-right)) + 200px);bottom:auto;top:max(10px, env(safe-area-inset-top));transform:none;height:34px;padding:0 14px 0 11px;gap:7px;font-size:12px;}
  body.mp-new-menu #mp-install.in{transform:none;}
}

@media (max-height: 520px) and (orientation: landscape), (max-width: 600px){
  #btn-hud-fs{width:34px !important;height:34px !important;top:6px !important;right:calc(max(10px, env(safe-area-inset-right)) + 40px) !important;}
  #btn-hud-fs svg{width:15px;height:15px;}
}