/* Дополнения для панели сервера — в том же стиле, что и «Ключи» (app.css). */

/* ---- состояние сервера ---- */
.hero { display: flex; flex-direction: column; gap: 16px; }
.hero .head { display: flex; align-items: center; gap: 14px; }
.state { position: relative; width: 14px; height: 14px; flex-shrink: 0; margin: 0 4px; }
.state::before, .state::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--line2); }
.state.on::before, .state.on::after { background: var(--good); }
.state.on::after { animation: ring 2.4s var(--ease) infinite; }
.state.starting::before, .state.stopping::before, .state.starting::after, .state.stopping::after { background: var(--warn-ink); }
.state.starting::before, .state.stopping::before { animation: blink 1.1s ease-in-out infinite; }
.state.failed::before, .state.failed::after { background: var(--bad); }
@keyframes ring { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes blink { 50% { opacity: .35; } }
.hero .st { font-size: 22px; font-weight: 600; line-height: 1.2; }
.hero .meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.hero .acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hero .acts .btn { padding: 0 8px; font-size: 15px; }
@media (max-width: 520px) {
  .hero .acts .btn { flex-direction: column; height: 62px; gap: 4px; font-size: 13px; font-weight: 600; }
  .hero .acts .btn svg { width: 20px; height: 20px; }
}
.hero .acts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.greet { font-size: 15px; line-height: 1.5; color: var(--muted2); display: flex; gap: 10px; align-items: flex-start; }
.greet svg { width: 20px; height: 20px; color: var(--muted); margin-top: 1px; }

/* небо: где сейчас солнце в игре */
.sky { position: relative; height: 18px; border-radius: 9px; overflow: hidden;
  background: linear-gradient(90deg, #F7C873 0%, #A8D4F5 8%, #8EC5F2 42%, #F2A365 50%, #2B3A67 54%, #141B33 75%, #2B3A67 96%, #F7C873 100%); }
.sky .sun { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #FFE27A; box-shadow: 0 0 0 4px rgba(255,226,122,.35); transition: left 5s linear; }
.sky .sun.moon { background: #E9EEF7; box-shadow: 0 0 0 4px rgba(233,238,247,.25); }
.sky .lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* ---- плитки с цифрами и графиками ---- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-height: 86px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); }
.stat .k { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.stat .k svg { width: 14px; height: 14px; }
.stat .v { font-size: 22px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat .v small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.stat .s { font-size: 12px; color: var(--muted); }
.stat.warn .v { color: var(--warn-ink); }
.stat.bad .v { color: var(--bad); }
.stat .meter { height: 4px; border-radius: 2px; background: var(--soft); overflow: hidden; margin-top: 6px; }
.stat .meter > span { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width .6s var(--ease); }
.stat.warn .meter > span { background: var(--warn-ink); }
.stat.bad .meter > span { background: var(--bad); }
.stat svg.spark { width: 100%; height: 34px; }
.spark { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; width: 100%; pointer-events: none; }
.spark path.line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark path.area { fill: var(--accent-soft); opacity: .8; }
.enter .spark { animation: reveal 1.1s .2s var(--ease) both; }
.still .enter .spark { animation: none; }
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ev .tx { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.stat.spk { padding-bottom: 38px; }
@media (min-width: 900px) { .stats.wide { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---- игроки ---- */
.pl { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--ink); transition: background .15s; }
.pl + .pl { border-top: 1px solid var(--line); }
.pl:active { background: var(--soft); }
@media (hover: hover) { .pl:hover { background: var(--field); } }
.pl > svg:last-child { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.face { width: 40px; height: 40px; border-radius: 10px; background: var(--soft); flex-shrink: 0; display: grid; place-items: center; position: relative; font-family: "JetBrains Mono", monospace; font-size: 15px; color: var(--muted2); }
.face img { width: 100%; height: 100%; image-rendering: pixelated; display: block; opacity: 0; transition: opacity .3s; }
.face img.ok { opacity: 1; }
.face.lg { width: 72px; height: 72px; border-radius: 16px; font-size: 26px; }
.face.lg .live { width: 16px; height: 16px; right: -4px; bottom: -4px; box-shadow: 0 0 0 3px var(--bg); }
.face .pic { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: grid; place-items: center; }
.face .live { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; z-index: 1; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px var(--card); }
.pl .n { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl .n span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl .sub { margin-top: 1px; }
.onl { display: flex; flex-wrap: wrap; gap: 8px; }
.onl a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 500; font-size: 15px; transition: transform .15s var(--ease); }
.onl a:active { transform: scale(.97); }
.onl .face { width: 28px; height: 28px; border-radius: 7px; font-size: 12px; }

.phero { display: flex; align-items: center; gap: 16px; }
.phero .nm { font-size: 26px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.bars { display: flex; flex-direction: column; gap: 10px; }
.hb { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.hb svg { width: 18px; height: 18px; flex-shrink: 0; }
.hb .track { flex: 1; height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.hb .track span { display: block; height: 100%; border-radius: 4px; transform-origin: left; animation: grow .8s .15s var(--ease) both; }
.hb.hp svg, .hb.hp b { color: #D8433A; } .hb.hp .track span { background: #D8433A; }
.hb.fd svg, .hb.fd b { color: #B7792B; } .hb.fd .track span { background: #C98A36; }
.hb.xp svg, .hb.xp b { color: #4E9A2F; } .hb.xp .track span { background: #69B23F; }
.hb b { min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { .hb.hp svg, .hb.hp b { color: #F08A80; } .hb.xp svg, .hb.xp b { color: #8FD46A; } .hb.fd svg, .hb.fd b { color: #E3B36A; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kv { display: flex; flex-direction: column; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; font-size: 15px; }
.kv > div + div { border-top: 1px solid var(--line); }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- консоль ---- */
.console { background: #0E1013; color: #D5DAE1; border-radius: var(--radius); border: 1px solid var(--line); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.55; height: min(62dvh, 640px); overflow: auto; padding: 12px 14px; overscroll-behavior: contain; }
@media (prefers-color-scheme: dark) { .console { background: #0A0B0D; } }
.console .ln { white-space: pre-wrap; overflow-wrap: anywhere; }
.console .ln.new { animation: fadein .3s var(--ease); }
.console .t { color: #6B7480; }
.console .warn { color: #F2C27E; }
.console .err { color: #F08A80; }
.console .chat { color: #9FD8B8; }
.console .join { color: #8FB5FF; }
.console .me { color: #fff; font-weight: 600; }
.console .out { color: #B8BEC7; }
.cmdbar { display: flex; gap: 8px; }
.cmdbar .input { font-family: "JetBrains Mono", monospace; font-size: 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.qchip { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); font-size: 13px; cursor: pointer; font-family: "JetBrains Mono", monospace; color: var(--muted2); transition: background .15s, transform .15s var(--ease); }
.qchip:active { transform: scale(.96); }
@media (hover: hover) { .qchip:hover { background: var(--field); } }
.tailbtn { position: sticky; bottom: 8px; margin-left: auto; display: none; }
.console.away + .tailrow .tailbtn { display: inline-flex; }

/* ---- лента событий ---- */
.feed { display: flex; flex-direction: column; }
.ev { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 14px; }
.ev + .ev { border-top: 1px solid var(--line); }
.ev .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--soft); color: var(--muted2); flex-shrink: 0; }
.ev .ic svg { width: 16px; height: 16px; }
.ev.join .ic { background: var(--good-soft); color: var(--good-ink); }
.ev.crash .ic, .ev.error .ic { background: var(--bad-soft); color: var(--bad); }
.ev.backup .ic { background: var(--accent-soft); color: var(--accent); }
.ev .tm { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---- действие в процессе ---- */
.progress { height: 6px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .5s var(--ease); }
.progress.indet > span { width: 40% !important; animation: indet 1.2s ease-in-out infinite; }
@keyframes indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.banner.act { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); flex-direction: column; gap: 10px; }
.banner.act .row { gap: 10px; }
.banner.act svg.spin { animation: spin .8s linear infinite; color: var(--accent); }
.cd { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }

/* ---- как зайти ---- */
.joincard { display: flex; flex-direction: column; gap: 10px; }
.addr { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.addr .grow { min-width: 0; }
.addr .k { font-size: 12px; color: var(--muted); }
.addr .v { font-family: "JetBrains Mono", monospace; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.addr > svg { width: 22px; height: 22px; color: var(--muted); flex-shrink: 0; }

/* ---- копии ---- */
.bk { display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 16px; }
.bk + .bk { border-top: 1px solid var(--line); }
.bk .grow .title { font-size: 15px; }
.bk .btn.icon.sm { width: 40px; }

.section-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: -8px; }
.hint { font-size: 13px; color: var(--muted); line-height: 1.45; }
.grid2 { display: grid; gap: 20px; }
@media (min-width: 900px) {
  .grid2 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .grid2 > .stack { gap: 20px; }
}
.tabbar.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.pubpage { justify-content: flex-start; }
.pubpage .hero .st { font-size: 24px; }

/* ===================== v2: как в игре ===================== */

/* сердца, еда, опыт */
.vitals { display: flex; flex-direction: column; gap: 10px; width: min(100%, 422px); align-self: center; }
.vrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.icons10 { display: flex; gap: 1px; }
.icons10 svg { width: 18px; height: 18px; shape-rendering: crispEdges; display: block; }
.icons10.food { flex-direction: row-reverse; }
.icons10 svg.on { animation: popin .35s var(--spring) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes popin { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.vnum { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.xpbar { position: relative; height: 10px; background: #1E1E1E; border: 2px solid #000; border-radius: 1px; box-shadow: inset 0 0 0 1px #2C2C2C; margin-top: 16px; }
.xpbar > span { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#B4FF6A, #80FF20 40%, #3F9F00); transform-origin: left; animation: grow .9s .2s var(--ease) both; }
.xpbar b { position: absolute; left: 50%; top: -19px; transform: translateX(-50%); font: 700 15px "JetBrains Mono", monospace; color: #80FF20;
  text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000; }

/* окно инвентаря — серое, как в игре; ячейки тянутся по ширине, на телефоне всё влезает */
.mcinv { width: min(100%, 422px); align-self: center; background: #C6C6C6; border: 3px solid; border-color: #FFF #555 #555 #FFF; border-radius: 6px; padding: 8px;
  box-shadow: 0 0 0 2px #000, var(--shadow); color: #3F3F3F; display: flex; flex-direction: column; gap: 8px; user-select: none; -webkit-user-select: none; }
.mcinv .grid9 { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.mcinv .itop { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-auto-rows: auto; }
.mcinv .skinbox { grid-column: 2 / span 4; grid-row: 1 / span 4; background: #000; border: 2px solid; border-color: #373737 #FFF #FFF #373737; margin: 0 4px; overflow: hidden; position: relative; min-height: 0; min-width: 0; }
.mcinv .info { grid-column: 7 / span 3; grid-row: 1 / span 3; padding: 2px 0 0 8px; font: 600 12px "JetBrains Mono", monospace; display: flex; flex-direction: column; gap: 4px; color: #3F3F3F; min-width: 0; }
.mcinv .info > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcinv .info .nm { font-size: 14px; }
.mcinv .info .lv { color: #3F9F00; }
.mcinv .lbl { font: 600 13px "JetBrains Mono", monospace; color: #3F3F3F; margin: 2px 0 -4px 2px; }
.mcinv .hotbar { margin-top: 6px; }
.mcinv.inner { width: min(100%, 360px); padding: 6px; align-self: flex-start; }
.mcinv.picking .slot { animation: pickglow 1.4s ease-in-out infinite; }
@keyframes pickglow { 50% { box-shadow: inset 0 0 0 2px #5B82F0; } }
.slot { width: auto; aspect-ratio: 1; background: #8B8B8B; border: 2px solid; border-color: #373737 #FFF #FFF #373737; position: relative; cursor: pointer; padding: 0; display: block; container-type: inline-size; min-width: 0; }
.slot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 2; }
@media (hover: hover) { .slot:hover::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.35); pointer-events: none; } }
.slot.sel { box-shadow: inset 0 0 0 2px #fff; }
.ro .slot { cursor: default; }
.mcinv.ro .slot { cursor: pointer; }
.pick .slot { width: 36px; flex-shrink: 0; }

/* картинка предмета: одна PNG с Pi, без 3D-вёрстки — легко даже слабому телефону */
.it { position: absolute; inset: 4%; pointer-events: none; }
.it .itimg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.itembig .it { inset: 6%; }
.it.none { display: grid; place-items: center; font: 700 11px "JetBrains Mono", monospace; color: #fff; text-shadow: 1px 1px #3F3F3F; text-align: center; line-height: 1; overflow: hidden; }
.it .glint { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  overflow: hidden; mix-blend-mode: screen; }
.it .glint::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; background: linear-gradient(115deg, transparent 30%, rgba(190,120,255,.7) 40%, transparent 50%, rgba(160,90,255,.55) 65%, transparent 75%); animation: glint 3.2s linear infinite; will-change: transform; }
@keyframes glint { from { transform: translateX(-33%); } to { transform: translateX(33%); } }
.cnt { position: absolute; right: 2px; bottom: 0; font: 700 13px "JetBrains Mono", monospace; color: #fff; text-shadow: 2px 2px 0 #3F3F3F; pointer-events: none; line-height: 1; }
.dur { position: absolute; left: 12%; right: 12%; bottom: 8%; height: 3px; background: #000; pointer-events: none; }
.dur > span { display: block; height: 2px; }

/* предмет в шторке */
.itemhead { display: flex; align-items: center; gap: 14px; }
.itembig { width: 64px; height: 64px; position: relative; flex-shrink: 0; background: #8B8B8B; border: 3px solid; border-color: #373737 #FFF #FFF #373737; --sz: 64px; }
.itemhead .nm { font-size: 18px; font-weight: 600; }
.itemhead .nm.custom { font-style: italic; color: #4FB3E8; }
.ench { color: #8A5CF6; font-size: 14px; line-height: 1.6; }
@media (prefers-color-scheme: dark) { .ench { color: #B9A2FF; } }
.picklist { display: flex; flex-direction: column; max-height: 46dvh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.pick { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border: 0; background: none; text-align: left; cursor: pointer; font-size: 15px; color: var(--ink); }
.pick + .pick { border-top: 1px solid var(--line); }
.pick .slot { --sz: 36px; cursor: inherit; flex-shrink: 0; }
@media (hover: hover) { .pick:hover { background: var(--field); } }
.pick .id { font-size: 12px; color: var(--muted); font-family: "JetBrains Mono", monospace; }

/* действия с игроком */
.actgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.actgrid .btn { justify-content: flex-start; padding: 0 12px; font-size: 14px; white-space: nowrap; overflow: hidden; }
.actgrid .btn svg { width: 16px; height: 16px; }
@media (min-width: 900px) { .actgrid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.chip.java { background: var(--accent-soft); color: var(--accent); }
.chip.bedrock { background: var(--good-soft); color: var(--good-ink); }
.chip svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; }

/* подсказки в консоли */
.sugg { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); margin-bottom: -12px; animation: fadein .2s var(--ease); }
.sugg button { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.sugg button + button { border-top: 1px solid var(--line); }
.sugg code, .helpl code { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--accent); white-space: nowrap; }
.sugg span, .helpl span { font-size: 13px; color: var(--muted); }
.helpl { display: flex; flex-direction: column; }
.helpl button { display: flex; flex-direction: column; gap: 2px; padding: 9px 2px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.helpl button + button { border-top: 1px solid var(--line); }
.helpl h4 { margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.wlrow { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; }
.wlrow + .wlrow { border-top: 1px solid var(--line); }
.addr .btn.sm { flex-shrink: 0; }

.mcinv.ro .slot { cursor: pointer; }

/* «Как зайти»: группы и подблоки */
.jgroup { display: flex; flex-direction: column; gap: 8px; }
.jhead { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 500; }
.jhead svg { width: 16px; height: 16px; }
.jsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.jsplit .addr:last-child { max-width: none; }
@media (max-width: 520px) { .jsplit { grid-template-columns: minmax(0, 1fr); } }
.addr.sub2 { padding: 8px 8px 8px 14px; }
.addr.sub2 .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


@supports (width: 1cqw) {
  .cnt { font-size: clamp(9px, 31cqw, 13px); }
}
/* перерисовки того же экрана — без повторных анимаций */
.still .icons10 svg.on, .still .xpbar > span, .still .hb .track span, .still .skin3dbox canvas.skin3d, .still .face img { animation: none; transition: none; }
.skin3dbox { position: absolute; inset: 0; display: grid; place-items: center; touch-action: pan-y; cursor: grab; }
.skin3dbox:active { cursor: grabbing; }
.skin3dbox canvas.skin3d { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; animation: fadein .5s var(--ease); }
.mcinv .noskin, .skin3dbox .noskin { color: #777; font-size: 12px; text-align: center; padding: 8px; }
.row.pair .btn { white-space: nowrap; padding: 0 12px; }
.row.pair .btn { font-size: 14px; padding: 0 8px; gap: 6px; }
.stats { grid-auto-rows: 1fr; }

/* кнопка элитр — квадратная, со значком крыльев */
.elybtn { position: absolute; right: 6px; top: 6px; z-index: 2; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; display: grid; place-items: center;
  background: rgba(118,124,135,.82); color: #fff; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 2px 6px rgba(0,0,0,.35);
  transition: background .2s, transform .15s var(--ease), color .2s; }
.elybtn svg { width: 20px; height: 20px; display: block; }
.elybtn:active { transform: scale(.92); }
@media (hover: hover) { .elybtn:hover { background: rgba(140,146,158,.9); } }
.elybtn[aria-pressed="true"] { background: #1D4E89; color: #fff; box-shadow: 0 0 0 2px #3D7FD9, 0 2px 6px rgba(0,0,0,.35); }
@media (max-width: 520px) { .elybtn { width: 28px; height: 28px; border-radius: 7px; right: 4px; top: 4px; } .elybtn svg { width: 17px; height: 17px; } }

/* время в мире: подписи, чтобы было понятно, что это */
.skycard { display: flex; flex-direction: column; gap: 8px; }
.skyhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--muted); }
.skyhead b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.skyticks { position: relative; height: 14px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.skyticks span { position: absolute; top: 0; transform: translateX(-50%); }
.skyticks span:first-child { transform: none; }
.skyticks span:last-child { transform: translateX(-100%); }

/* смена раздела — одно мягкое проявление */
.page.swap { animation: pagein .18s var(--ease); }
@keyframes pagein { from { opacity: .4; } to { opacity: 1; } }

/* строка игрока: имя целиком, метки отдельной строкой, одного размера */
.pl { align-items: center; gap: 14px; padding: 12px 14px 12px 16px; }
.pl .pinfo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pl .n { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 1.2; }
.pl .n .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pl .sub { margin: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl .face { width: 44px; height: 44px; border-radius: 11px; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; flex-shrink: 0;
  background: var(--soft); color: var(--muted2); line-height: 1; }
.tag svg { width: 12px; height: 12px; }
.tag.ok { background: var(--good-soft); color: var(--good-ink); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.tag.jav { background: var(--accent-soft); color: var(--accent); }
.tag.bed { background: var(--good-soft); color: var(--good-ink); }
.tag.me { background: var(--accent); color: var(--accent-ink); }