/* Экран настроек Poké Hub (H4, README §69): окно с разделами слева (на телефоне — сверху), строки как в старых настройках PokéSwarm.
   Скрипт — shared/ui/settings.js. Кнопки, переключатели и ползунки — общие .btn, .seg, .pill игр; цвета — токены :root игры.
   Размер текста — html[data-phs-text] и --phs-tz: слои интерфейса игр масштабируются (zoom) вместе с их собственным масштабом --uiz. */
:root { --phs-ink:var(--ink, #2a2440); --phs-ink-2:var(--ink-2, #5a5478); --phs-paper:var(--paper, #fff); --phs-paper-2:var(--paper-2, #f3f1fa); --phs-line:var(--line, #e4e0f0);
  --phs-acc:var(--blue, #3a8cff); --phs-acc-2:var(--purple, #8a5cff); --phs-pur-d:var(--purple-d, #5a3ad8); --phs-yel:var(--yellow, #ffcc33); --phs-yel-d:var(--yellow-d, #f2a516); --phs-orn:var(--orange, #ff9a3a); --phs-red:var(--red, #ff5a5f); --phs-red-d:var(--red-d, #e0303e); --phs-ok:var(--green, #36c96a);
  --phs-veil:radial-gradient(#1e14464d, #140e32cf); --phs-shadow:var(--shadow, 0 10px 28px #1a124638, 0 2px 6px #1a12461f); --phs-shadow-sm:var(--shadow-sm, 0 4px 12px #1a12462e);
  --phs-stripes:var(--stripes, repeating-linear-gradient(-45deg, #ffffff24 0 10px, #fff0 10px 20px)); --phs-tsh:0 3px #00000026; --phs-key-sh:0 3px 0 #1a124647; --phs-pill-sh:0 2px 0 #1a12461f; --phs-ico-sh:drop-shadow(0 2px 2px #00000033);
  --phs-hatch:repeating-linear-gradient(-45deg, #ffffff73 0 2px, #fff0 2px 5px); --phs-tz:1; }

.phs-ov { position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; align-items:center; justify-content:safe center; gap:16px;
  padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background:var(--phs-veil); backdrop-filter:blur(3px); color:var(--phs-ink); font:700 14px/1.35 var(--font); text-align:left; user-select:none;
  zoom:calc(var(--uiz, 1) * var(--phs-tz, 1)); outline:none; animation:fadeIn .2s ease-out; }
.phs-ov :focus-visible { outline:3px solid var(--phs-acc); outline-offset:2px; }
.phs-title { margin:0; padding:6px 34px; border-radius:16px; transform:skew(-8deg); color:var(--phs-paper); font:900 38px var(--font-title); text-align:center; text-shadow:var(--phs-tsh);
  background:var(--phs-stripes), linear-gradient(100deg, var(--phs-acc), var(--phs-acc-2)); box-shadow:var(--phs-shadow); animation:slideDown .35s ease-out both; }
.phs-card { width:min(880px, 100%); height:min(560px, calc(100vh / var(--uiz, 1) / var(--phs-tz, 1) - 200px)); min-height:320px; display:grid; grid-template-columns:220px minmax(0, 1fr);
  overflow:hidden; border-radius:22px; background:var(--phs-paper); box-shadow:var(--phs-shadow); animation:slideUp .3s ease-out; }
.phs-acts { display:flex; justify-content:center; gap:10px; }

/* ---------- разделы ---------- */
.phs-nav { display:flex; flex-direction:column; gap:6px; padding:14px 12px; background:var(--phs-paper-2); overflow:auto; }
.phs-tab { display:flex; align-items:center; gap:10px; min-height:48px; padding:6px 12px 6px 8px; border:0; border-radius:14px; background:none; color:var(--phs-ink-2); font:900 15px var(--font-title);
  text-align:left; cursor:pointer; transition:background .15s, color .15s, transform .1s; }
.phs-tab img { width:32px; height:32px; flex:none; image-rendering:pixelated; filter:var(--phs-ico-sh); }
.phs-tab img.av { border-radius:50%; background:var(--phs-paper); box-shadow:0 0 0 2px var(--phs-acc); object-fit:cover; filter:none; }
.phs-tab.on { background:var(--phs-paper); color:var(--phs-ink); box-shadow:var(--phs-pill-sh), var(--phs-shadow-sm); }
@media (hover:hover) { .phs-tab:not(.on):hover { color:var(--phs-ink); transform:translateX(2px); } }

.phs-body { display:flex; flex-direction:column; gap:8px; min-height:0; padding:16px 18px 18px; overflow-y:auto; overscroll-behavior:contain; }
.phs-body > * { flex-shrink:0; animation:slideUp .25s ease-out var(--d, 0s) backwards; }
.phs-body.same > * { animation:none; }
.phs-h { display:none; margin:0 2px 2px; font:900 20px var(--font-title); }

/* ---------- строки ---------- */
.phs-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; min-height:52px; padding:8px 12px; border-radius:14px; background:var(--phs-paper-2); }
.phs-row > b { flex:1 0 auto; font:900 15px var(--font-title); }
.phs-row input[type=range] { flex:1 1 200px; min-width:0; accent-color:var(--phs-acc); }
.phs-row .phs-seg { margin-left:auto; }
.phs-v { min-width:46px; text-align:right; color:var(--phs-ink-2); font:800 13px var(--font); white-space:nowrap; }
.phs-note { display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin:-2px 12px 4px; color:var(--phs-ink-2); font:700 12.5px/1.4 var(--font); }
.phs-sub { display:flex; align-items:center; gap:8px; margin:10px 2px 0; color:var(--phs-ink-2); font:900 12px var(--font-title); letter-spacing:1.2px; text-transform:uppercase; }
.phs-sub:first-child { margin-top:0; }
.phs-st { margin-left:auto; padding:3px 12px; border-radius:99px; background:var(--phs-paper-2); color:var(--phs-ink-2); font:900 12px var(--font-title); letter-spacing:0; text-transform:none; }
.phs-st.on { background:var(--phs-ok); color:var(--phs-paper); }
.phs-list { display:flex; flex-direction:column; gap:4px; margin:0 12px; padding:10px 12px; border-radius:14px; box-shadow:inset 0 0 0 2px var(--phs-line); }
.phs-list > div { display:flex; gap:10px; font-weight:700; color:var(--phs-ink-2); } .phs-list b { min-width:84px; color:var(--phs-ink); font-family:var(--font-title); font-weight:900; }

/* ---------- палитра телеграфов: образцы — лёгкий, сильный, смертельный, безопасная зона (цвета — как telegraphs.js) ---------- */
.phs-pal { flex:1 1 100%; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.phs-pt { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 6px 10px; border:0; border-radius:14px; background:var(--phs-paper); color:var(--phs-ink-2);
  box-shadow:inset 0 0 0 2px var(--phs-line); font:900 12.5px var(--font-title); cursor:pointer; transition:box-shadow .15s, transform .1s; }
.phs-pt.on { color:var(--phs-ink); box-shadow:inset 0 0 0 3px var(--phs-acc), var(--phs-shadow-sm); }
@media (hover:hover) { .phs-pt:not(.on):hover { transform:translateY(-2px); color:var(--phs-ink); } }
.phs-sw { display:flex; gap:6px; padding:2px; }
.phs-sw i { --c:var(--phs-paper); width:20px; height:20px; border-radius:4px; background:var(--c);
  box-shadow:0 0 0 2px var(--phs-ink), inset 0 0 0 3px color-mix(in srgb, var(--c) 50%, var(--phs-paper)); }
[data-p="standard"] .l, [data-p="deutan"] .l, [data-p="protan"] .l { --c:var(--phs-yel); }
[data-p="standard"] .s { --c:var(--phs-red); } [data-p="standard"] .t { --c:var(--phs-acc-2); } [data-p="standard"] .z { --c:var(--phs-ok); }
[data-p="deutan"] .s, [data-p="protan"] .s { --c:var(--phs-orn); background:var(--phs-hatch), var(--c); }
[data-p="deutan"] .t, [data-p="protan"] .t { --c:var(--phs-pur-d); } [data-p="deutan"] .z, [data-p="protan"] .z { --c:var(--phs-acc); }
[data-p="contrast"] .phs-sw i { --c:var(--phs-paper); box-shadow:0 0 0 2px var(--phs-paper), 0 0 0 3px var(--phs-line), inset 0 0 0 4px var(--phs-ink); }

/* ---------- клавиши PokéSwarm ---------- */
.phs-keys { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 10px; }
.phs-k { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:46px; padding:6px 6px 6px 12px; border-radius:12px; background:var(--phs-paper-2); font-weight:800; }
.phs-k > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phs-key { flex:none; min-width:58px; height:34px; padding:0 10px; border:0; border-radius:8px; background:var(--phs-paper); color:var(--phs-ink); box-shadow:var(--phs-key-sh); font:900 13px var(--font-title); cursor:pointer; transition:transform .1s; }
@media (hover:hover) { .phs-key:hover { transform:translateY(-1px); } }
.phs-key:active { transform:translateY(2px); box-shadow:none; }
.phs-k.wait { box-shadow:inset 0 0 0 2px var(--phs-yel-d); } .phs-k.wait .phs-key { background:var(--phs-yel); animation:pulse .6s ease-in-out infinite alternate; }
.phs-krow { display:flex; align-items:center; justify-content:space-between; gap:10px; } .phs-krow .phs-note { margin:0 0 0 12px; } .phs-krow .btn { flex:none; }
.phs-lay { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 16px; padding:10px 12px; border-radius:14px; box-shadow:inset 0 0 0 2px var(--phs-line); }
.phs-lay > div { display:flex; align-items:center; gap:8px; min-width:0; font-weight:800; } .phs-lay span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- аккаунт ---------- */
.phs-acc { display:flex; align-items:center; gap:14px; padding:10px 14px; border-radius:16px; background:var(--phs-paper-2); }
.phs-acc > div { display:flex; flex-direction:column; min-width:0; } .phs-acc b { font:900 20px var(--font-title); overflow-wrap:anywhere; } .phs-acc span { color:var(--phs-ink-2); font-weight:800; }
.phs-av { width:54px; height:54px; flex:none; display:grid; place-items:center; overflow:hidden; border-radius:50%; box-shadow:0 0 0 3px var(--phs-acc);
  background:radial-gradient(circle at 50% 38%, var(--phs-paper) 55%, color-mix(in srgb, var(--phs-acc) 20%, var(--phs-paper))); }
.phs-av img { width:110%; image-rendering:pixelated; }
.phs-name { margin-left:auto; color:var(--phs-ink-2); font:800 14px var(--font); overflow-wrap:anywhere; }
.phs-danger { color:var(--phs-red-d); }
.phs-form { display:flex; flex-direction:column; gap:8px; }
.phs-warn { padding:12px 14px; border-radius:16px; background:color-mix(in srgb, var(--phs-red) 6%, var(--phs-paper)); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--phs-red) 40%, var(--phs-paper)); }
.phs-warn .phs-note { margin:0; }
.phs-ul { margin:0; padding-left:20px; font-weight:800; } .phs-ul li { margin:2px 0; }
.phs-field { display:flex; flex-direction:column; gap:4px; } .phs-field > span { color:var(--phs-ink-2); font:800 12.5px var(--font); }
.phs-field input { padding:9px 12px; border:2px solid var(--phs-line); border-radius:12px; outline:none; background:var(--phs-paper); color:var(--phs-ink); font:700 15px var(--font); user-select:text; }
.phs-field input:focus { border-color:var(--phs-acc); } .phs-field input.bad { border-color:var(--phs-red); }
.phs-err { min-height:18px; color:var(--phs-red-d); font:800 13px var(--font); }
.phs-err:empty { min-height:0; }
.phs-acts-l { display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- «Меньше движения: выкл» — без въездов и мигания ---------- */
.phs-ov.still .phs-title, .phs-ov.still .phs-card, .phs-ov.still .phs-body > *, .phs-ov.still .phs-k.wait .phs-key { animation:none; }
.phs-ov.still .phs-tab, .phs-ov.still .phs-pt, .phs-ov.still .phs-key { transition:none; transform:none; }

/* ---------- телефон: разделы — строкой значков сверху (подпись — у выбранного), строки переносятся ---------- */
@media (max-width:760px), (max-height:520px) {
  .phs-ov { justify-content:flex-start; gap:10px; padding-top:max(14px, env(safe-area-inset-top)); padding-left:max(10px, env(safe-area-inset-left)); padding-right:max(10px, env(safe-area-inset-right)); }
  .phs-title { font-size:24px; padding:4px 18px; }
  .phs-card { flex:1 1 auto; height:auto; min-height:0; grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); }
  .phs-nav { flex-direction:row; justify-content:space-between; gap:4px; padding:8px; overflow:visible; }
  .phs-tab { flex:1 1 0; min-width:0; min-height:46px; justify-content:center; padding:6px 0; }
  .phs-tab span { display:none; }
  .phs-tab img { width:30px; height:30px; }
  .phs-h { display:block; }
  .phs-body { padding:12px 12px 14px; }
  .phs-note { margin:-2px 8px 4px; }
}
/* узкий экран (не телефон боком): подпись строки — над управлением, переключатели и ползунки — во всю ширину */
@media (max-width:760px) {
  .phs-row { padding:8px 10px; gap:6px 10px; }
  .phs-row:has(> input[type=range]) > b { flex:1 1 100%; }
  .phs-row input[type=range] { flex:1 1 120px; }
  .phs-row .phs-seg { flex:1 1 100%; display:flex; flex-wrap:nowrap; margin-left:0; } .phs-row .phs-seg .pill { flex:1; justify-content:center; padding:7px 6px; text-align:center; }
  .phs-pal { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .phs-keys, .phs-lay { grid-template-columns:minmax(0, 1fr); }
  .phs-krow { flex-wrap:wrap; }
  .phs-sub .phs-st { white-space:normal; }
}
@media (max-height:520px) { .phs-title { display:none; } }

/* ---------- размер текста: меню, окна и HUD игр крупнее (3D-холст — нет); множитель — поверх масштаба интерфейса игры --uiz ---------- */
html[data-phs-text][data-phs-game="swarm"] :is(#sStart, .modal, #hud .ppanel, #hud #meter, #hud .htop, #hud .mini-wrap, #hud .moves, #hud .bossbar, #hud #toasts, #hud #prompt, #hud #banner) { zoom:calc(var(--uiz, 1) * var(--phs-tz)); }
html[data-phs-text][data-phs-game="arena"] :is(#sMain, #sSub, .modal, #hud, #topbar) { zoom:var(--phs-tz); }
html[data-phs-text] :is(.sx-layer, .sx-ov, .sx-toasts) { zoom:calc(var(--uiz, 1) * var(--phs-tz)); }
html[data-phs-text] :is(.ph-pop, .ph-modal, .ph-toasts, .nb-ov, .bond-ov, .pad-toast) { zoom:var(--phs-tz); }