/* Главное меню на телефоне — одинаковое в PokéSwarm и PokéArena (shared/ui/phmenu.js). Цвета и шрифты — переменные страницы (tz/STYLE.md, они общие у игр).
   Шапка «← Две игры · пыль · ☰», окно «☰» и разделы меню по общим классам: ph-col, ph-logo/ph-word, ph-modes, ph-play, ph-surv, ph-grid, ph-tile[data-k].
   Файл подключается после стилей страницы и пишет с .ph-root — перекрывает настольный вид игр. Отступы экрана — --ph-y (верх) и --ph-x/--ph-xr (бока) */
:root { --ph-lip:#1a12462e; --ph-lip-2:#1a124633; --ph-play-l:#ff7a6a; --ph-play-d:#a81c2c; --ph-surv-l:#8a7aff; --ph-surv:#5a4cd8; --ph-surv-dd:#2e2070; --ph-surv-d:#24185a;
  --ph-duel-l:#b49cff; --ph-duel-d:#4a2ab8; --ph-glass:#ffffff38; --ph-glass-2:#ffffff59; --ph-on:#ffffffeb; --ph-shade:#0003; --ph-shade-1:#0000001a; --ph-soon-d:#b07a10; }   /* цвета меню — те же, что у кнопок обеих игр */
.ph-head, .ph-pop { display:none; }
.ph-n { min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--red); color:var(--paper); font:900 11px/18px var(--font-title); text-align:center; box-shadow:0 0 0 2px var(--paper); }
.ph-n[hidden] { display:none; }
.ph-pop { position:fixed; z-index:60; flex-direction:column; gap:10px; width:min(344px, calc(100vw - 16px)); padding:12px; background:var(--paper); color:var(--ink); border-radius:20px; box-shadow:var(--shadow); }
.ph-pop.on { display:flex; animation:phDrop .2s ease-out; }
@keyframes phDrop { from { opacity:0; transform:translateY(-14px); } }
.ph-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; font:900 14px var(--font-title); }
.ph-seg { display:flex; gap:4px; margin-left:auto; padding:3px; border-radius:99px; background:var(--paper-2); }
.ph-pill { padding:6px 11px; border:0; border-radius:99px; background:none; color:var(--ink-2); font:900 12.5px var(--font-title); white-space:nowrap; cursor:pointer; }
.ph-pill.on { background:var(--blue); color:var(--paper); box-shadow:0 2px 0 var(--blue-d); }
.ph-tiles { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-top:2px; }
.ph-pt { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; padding:8px 2px 7px; border:0; border-radius:14px; background:var(--paper-2); color:var(--ink); font:900 11px var(--font-title); cursor:pointer; }
.ph-pt > span:not(.ph-n):not(.emo) { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ph-pt img { width:32px; height:32px; image-rendering:pixelated; } .ph-pt .emo { font-size:22px; line-height:32px; }
.ph-pt .ph-n { position:absolute; top:-6px; right:-2px; }
@media (hover:hover) { .ph-pill:not(.on):hover, .ph-pt:hover { background:var(--line); } }
@media (hover:none) { .ph-pill:active, .ph-pt:active, .ph-more:active, .ph-back:active { transform:scale(.95); } }

@keyframes phIn { from { opacity:0; transform:translateY(14px); } }
@media (max-width:760px), (max-height:520px) {
  .ph-root { --ph-y:max(12px, env(safe-area-inset-top)); --ph-x:max(12px, env(safe-area-inset-left)); --ph-xr:max(12px, env(safe-area-inset-right)); scrollbar-width:none; }
  .ph-root::-webkit-scrollbar { display:none; }
  /* появление разделов — одно на обе игры (у PokéArena своё со скосом, у PokéSwarm — колонкой) */
  .ph-root .ph-modes, .ph-root .ph-grid { animation:none; }
  .ph-root .ph-modes > *, .ph-root .ph-grid > .ph-tile { animation:phIn .4s var(--d, 0s) cubic-bezier(.2, 1.2, .4, 1) backwards; }
  /* шапка: прокручивается вместе с меню */
  .ph-root > .ph-head:not([hidden]) { position:absolute; z-index:4; top:var(--ph-y); left:var(--ph-x); right:var(--ph-xr); display:flex; align-items:center; gap:8px; pointer-events:none; }
  .ph-head > * { pointer-events:auto; } .ph-head .ph-sp { flex:1; pointer-events:none; }
  .ph-back { display:inline-flex; align-items:center; height:40px; padding:0 16px; border-radius:99px; background:var(--paper); color:var(--ink); font:900 14px var(--font-title); text-decoration:none; white-space:nowrap; box-shadow:0 3px 0 var(--ph-lip), var(--shadow-sm); }
  .ph-dust { display:inline-flex; align-items:center; gap:5px; height:40px; padding:0 14px 0 8px; border-radius:99px; background:var(--paper); color:var(--purple-d); font:900 17px var(--font-title); box-shadow:0 3px 0 var(--ph-lip), var(--shadow-sm); }
  .ph-dust img { width:24px; height:24px; image-rendering:pixelated; }
  .ph-more { position:relative; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:var(--paper); color:var(--ink); font:900 22px/1 var(--font-title); box-shadow:0 3px 0 var(--ph-lip), var(--shadow-sm); cursor:pointer; }
  .ph-more[aria-expanded="true"] { background:var(--paper-2); }
  .ph-more .ph-n { position:absolute; top:-4px; right:-4px; }
  /* кнопки, что ушли в «☰»: друзья и почта соцчасти, язык и отзыв виджета аккаунта */
  .ph-root .sx-topbar, .ph-root .ph-fb { display:none !important; }

  /* колонка меню */
  .ph-root .ph-col { gap:12px; }
  .ph-root .ph-logo { margin:0 0 2px; align-self:flex-start; }
  .ph-root .ph-logo .ph-word { font-size:clamp(36px, 13vw, 54px); }

  /* «Играть» и «Выживание» — строками во всю ширину */
  .ph-root .ph-modes { display:flex; flex-direction:column; gap:12px; padding:0; margin:0; transform:none; }
  .ph-root .ph-modes > .ph-play, .ph-root .ph-modes > .ph-surv { position:relative; flex:none; display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; align-content:center; column-gap:14px; row-gap:0;
    width:100%; max-width:none; min-width:0; margin:0; border:0; border-radius:20px; color:var(--paper); text-align:left; transform:none; filter:none; }
  .ph-root .ph-modes > * > * { transform:none; }
  .ph-root .ph-modes > .ph-play::before, .ph-root .ph-modes > .ph-surv::before { display:none; }
  .ph-root .ph-modes > .ph-play { min-height:92px; padding:12px 16px; background:var(--stripes), linear-gradient(100deg, var(--ph-play-l), var(--red) 45%, var(--red-d)); box-shadow:0 0 0 3px var(--paper), 0 7px 0 var(--ph-play-d), var(--shadow); }
  .ph-root .ph-modes > .ph-surv { min-height:66px; padding:10px 16px; background:var(--stripes), linear-gradient(160deg, var(--ph-surv-l), var(--ph-surv) 55%, var(--ph-surv-dd)); box-shadow:0 0 0 3px var(--paper), 0 6px 0 var(--ph-surv-d), var(--shadow); }
  .ph-root .ph-modes > .ph-surv.off { filter:grayscale(.85) brightness(.92); opacity:.7; cursor:not-allowed; }
  .ph-root .ph-modes .ph-ic { grid-row:span 2; display:grid; place-items:center; width:60px; height:60px; margin:0; border-radius:50%; background:var(--paper); box-shadow:inset 0 -4px var(--ph-shade-1), 0 3px 0 var(--ph-shade); }
  .ph-root .ph-modes .ph-ic img { width:44px; height:44px; image-rendering:pixelated; animation:none; }
  .ph-root .ph-modes > .ph-surv .ph-ic { width:44px; height:44px; background:var(--ph-glass); box-shadow:inset 0 0 0 3px var(--ph-glass-2); } .ph-root .ph-modes > .ph-surv .ph-ic img { width:32px; height:32px; }
  .ph-root .ph-modes .ph-tx { display:flex; flex-direction:column; min-width:0; }
  .ph-root .ph-modes > * b { display:block; margin:0; font:900 30px/1 var(--font-title); letter-spacing:1px; text-transform:uppercase; text-shadow:0 3px var(--ph-shade); }
  .ph-root .ph-modes > * small { display:block; margin:4px 0 0; color:var(--ph-on); font:800 12px/1.25 var(--font); white-space:normal; overflow:hidden; }
  .ph-root .ph-modes > .ph-surv b { font-size:19px; letter-spacing:0; text-transform:none; } .ph-root .ph-modes > .ph-surv small { margin-top:2px; font-size:11px; }
  .ph-root .ph-modes .ph-soon { position:absolute; top:-9px; right:12px; left:auto; margin:0; padding:1px 9px; border-radius:99px; background:var(--yellow); color:var(--ink); font:900 11px var(--font-title); box-shadow:0 2px 0 var(--ph-soon-d); rotate:4deg; }

  /* разделы: две колонки, один порядок в обеих играх */
  .ph-root .ph-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; margin:0; transform:none; }
  .ph-root .ph-grid > .ph-tile { order:9; position:relative; display:flex; flex-direction:row; align-items:center; gap:10px; min-width:0; min-height:62px; margin:0; padding:9px 10px 9px 16px; grid-column:auto;
    border:0; border-radius:18px; background:var(--paper); color:var(--ink); text-align:left; text-decoration:none; overflow:visible; transform:none; box-shadow:0 4px 0 var(--ph-lip-2), var(--shadow-sm); }
  .ph-root .ph-grid > .ph-tile > * { transform:none; }
  .ph-root .ph-grid > .ph-tile::before { content:""; position:absolute; inset:0; display:block; border-radius:inherit; background:linear-gradient(90deg, var(--c) 7px, transparent 7px); pointer-events:none; }   /* полоса по форме плитки */
  .ph-root .ph-grid > .ph-tile.ph-wide, .ph-root .ph-grid > [data-k="duel"] { grid-column:1 / -1; }
  .ph-root .ph-grid > [data-k="duel"] { order:0; color:var(--paper); background:var(--stripes), linear-gradient(100deg, var(--ph-duel-l), var(--purple) 50%, var(--purple-d)); box-shadow:0 5px 0 var(--ph-duel-d), var(--shadow-sm); }
  .ph-root .ph-grid > [data-k="duel"]::before { display:none; } .ph-root .ph-grid > [data-k="duel"] .ph-tx small { color:var(--ph-on); } .ph-root .ph-grid > [data-k="duel"] .ph-ic { background:var(--ph-glass); }
  .ph-root .ph-grid > [data-k="clan"] { order:1; } .ph-root .ph-grid > [data-k="board"] { order:2; } .ph-root .ph-grid > [data-k="dex"] { order:3; } .ph-root .ph-grid > [data-k="lab"] { order:4; }
  .ph-root .ph-grid > [data-k="items"] { order:5; } .ph-root .ph-grid > [data-k="ach"] { order:6; } .ph-root .ph-grid > [data-k="tasks"] { order:7; } .ph-root .ph-grid > [data-k="coll"] { order:8; }
  .ph-root .ph-tile .ph-ic { flex:none; display:grid; place-items:center; width:38px; height:38px; margin:0; border-radius:12px; background:color-mix(in srgb, var(--c) 18%, var(--paper)); }
  .ph-root .ph-tile .ph-ic img { width:32px; height:32px; image-rendering:pixelated; }
  .ph-root .ph-tile .ph-tx { display:flex; flex-direction:column; min-width:0; }
  .ph-root .ph-tile .ph-tx b { display:block; font:900 16px/1.1 var(--font-title); }
  .ph-root .ph-tile .ph-tx small { display:block; color:var(--ink-2); font:800 11px/1.3 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ph-root .ph-tile .ph-badge, .ph-root .ph-tile .sx-badge { position:absolute; top:-7px; right:8px; margin:0; min-width:22px; height:22px; padding:0 7px; border-radius:99px; background:var(--red); color:var(--paper); font:900 12px/22px var(--font-title); text-align:center; box-shadow:0 2px 0 var(--red-d); }
  .ph-root .ph-tile .mm-dots, .ph-root .ph-tile .sx-mm-emb { display:none; }
  @media (hover:hover) { .ph-root .ph-grid > .ph-tile:hover, .ph-root .ph-modes > .ph-play:hover { transform:translateY(-2px); box-shadow:0 6px 0 var(--ph-lip-2), var(--shadow-sm); }
    .ph-root .ph-modes > .ph-play:hover { box-shadow:0 0 0 3px var(--paper), 0 9px 0 var(--ph-play-d), var(--shadow); } .ph-root .ph-modes > .ph-surv:hover { transform:none; } }
}
/* узкий телефон: разделы — значком сверху, чтобы влезали «Лаборатория» и «Достижения» */
@media (max-width:420px) {
  .ph-root .ph-grid > .ph-tile:not([data-k="duel"]) { flex-direction:column; align-items:flex-start; gap:6px; padding:10px 10px 10px 16px; }
  .ph-root .ph-grid > .ph-tile .ph-tx { width:100%; } .ph-root .ph-grid > .ph-tile .ph-tx b { font-size:15px; }
}
/* телефон боком: всё ниже */
@media (max-height:520px) {
  .ph-root .ph-modes { gap:10px; }
  .ph-root .ph-modes > .ph-play { min-height:0; padding:8px 14px; } .ph-root .ph-modes .ph-ic { width:46px; height:46px; } .ph-root .ph-modes .ph-ic img { width:32px; height:32px; }
  .ph-root .ph-modes > .ph-play b { font-size:24px; } .ph-root .ph-modes > .ph-surv { min-height:0; padding:8px 14px; }
  .ph-root .ph-modes > .ph-surv .ph-ic { width:36px; height:36px; } .ph-root .ph-modes > .ph-surv .ph-ic img { width:24px; height:24px; }
  .ph-root .ph-logo .ph-word { font-size:40px; }
  .ph-root .ph-grid > .ph-tile { min-height:52px; padding:8px 10px 8px 14px; } .ph-root .ph-grid > .ph-tile .ph-tx b { font-size:15px; }
}
@media (max-height:520px) and (max-width:700px) {
  .ph-root .ph-grid > .ph-tile:not([data-k="duel"]) { flex-direction:column; align-items:flex-start; gap:4px; }
  .ph-root .ph-grid > .ph-tile .ph-ic { width:32px; height:32px; } .ph-root .ph-grid > .ph-tile .ph-ic img { width:24px; height:24px; }
}