/* Кузница игр — компоненты: панели-чертежи, чипы, шкалы, карточки, фильтры, таблицы, дерево навыков */

/* панель-чертёж: тонкая рамка и «регистрационные метки» по углам */
.panel { position: relative; background: var(--panel); border: 1px solid var(--line); padding: clamp(16px, 2.4vw, 26px); }
.panel::before, .panel::after { content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none; border: 2px solid var(--paper); opacity: .85; }
.panel::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.panel::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.panel-flat { background: rgba(8, 20, 51, .55); border: 1px dashed var(--line-2); padding: 18px; }
.panel h3 { margin-top: 0; }

/* чипы и значки */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px; font: 600 .8rem/1 var(--body); color: var(--paper); border: 1px solid var(--line-2); background: rgba(255, 241, 232, .06); border-radius: 2px; white-space: nowrap; }
.chip.cyan { color: #aee0ff; border-color: rgba(41, 173, 255, .6); background: rgba(41, 173, 255, .12); }
.chip.orange { color: #ffd38a; border-color: rgba(255, 163, 0, .6); background: rgba(255, 163, 0, .12); }
.chip.green { color: #8dffa9; border-color: rgba(0, 228, 54, .55); background: rgba(0, 228, 54, .1); }
.chip.pink { color: #ffc0d6; border-color: rgba(255, 119, 168, .6); background: rgba(255, 119, 168, .12); }
.chip.red { color: #ffb0c0; border-color: rgba(255, 0, 77, .6); background: rgba(255, 0, 77, .12); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chips li { margin: 0; }
.filter-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font: 700 .98rem var(--pixel); color: var(--muted); background: transparent; border: 2px solid var(--line); border-radius: 4px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.filter-chip:hover { color: var(--paper); border-color: var(--line-2); }
.filter-chip[aria-pressed='true'] { color: var(--navy-950); background: var(--orange); border-color: var(--orange); }
.filter-chip .n { font: 400 .58rem var(--hud); opacity: .8; }

/* сегментированная шкала XP (как в HUD аркад) */
.xpbar { --p: 0; position: relative; height: 14px; background: var(--navy-950); border: 2px solid var(--line-2); overflow: hidden; }
.xpbar::before { content: ''; position: absolute; inset: 0; width: calc(var(--p) * 100%); background: var(--orange); transition: width .7s var(--ease); }
.xpbar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(6, 16, 48, .55) 6px 8px); }
.xpbar.green::before { background: var(--green); }
.xpbar.cyan::before { background: var(--cyan); }
.xpbar.lg { height: 22px; }
.bar-row { display: grid; grid-template-columns: minmax(110px, 190px) 1fr auto; gap: 14px; align-items: center; margin: 10px 0; }
.bar-row .name { display: flex; align-items: center; gap: 10px; font: 700 1rem var(--pixel); }
.bar-row .val { font: 400 .62rem var(--hud); color: var(--muted); min-width: 4.4em; text-align: right; }

/* вкладки/подменю разделов */
.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 28px; border-bottom: 2px solid var(--line); }
.subnav a, .subnav button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; font: 700 1.05rem var(--pixel); color: var(--muted); text-decoration: none; background: transparent; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px; cursor: pointer; }
.subnav a:hover, .subnav button:hover { color: var(--paper); }
.subnav [aria-current='page'], .subnav [aria-selected='true'] { color: var(--paper); border-bottom-color: var(--orange); }

/* карточки */
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: transform .18s var(--ease), border-color .18s, box-shadow .18s; }
a.card:hover, .card.hoverable:hover { transform: translateY(-4px); border-color: var(--cyan); box-shadow: 0 6px 0 var(--navy-950), 0 0 0 1px var(--cyan); color: var(--text); }
.card h3 { margin: 0; font-size: 1.3rem; }
.card p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.5; }
.card .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 6px; }
.card-head { display: flex; gap: 14px; align-items: center; }
.card-ico { display: grid; place-items: center; width: 56px; height: 56px; flex: none; background: var(--navy-950); border: 2px solid var(--line-2); }
.pips { display: inline-flex; gap: 3px; align-items: center; }
.pips i { width: 9px; height: 9px; background: rgba(255, 241, 232, .18); }
.pips i.on { background: var(--orange); }

/* тулбар фильтров */
.toolbar { display: grid; gap: 14px; padding: 18px; margin-bottom: 22px; background: var(--panel); border: 1px solid var(--line); }
.toolbar .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toolbar .selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.toolbar .selects .field { margin: 0; }
.searchbox { position: relative; flex: 1 1 260px; }
.searchbox input { padding-left: 44px; }
.searchbox .spr { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .8; }
.result-count { color: var(--muted); font-size: .95rem; }

/* таблицы */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--panel); }
table.t { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .95rem; }
table.t th, table.t td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px dashed var(--line); }
table.t th { font: 700 1rem var(--pixel); color: var(--paper); background: rgba(255, 241, 232, .05); }
table.t tbody th { width: 150px; color: var(--muted); font-size: .95rem; background: transparent; }
table.t ul { margin: 0; padding-left: 1.1em; }

/* дерево навыков */
.skill { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.tree { --size: clamp(56px, 15vw, 92px); position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 600 / 1500; }
.tree-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tree-lines path { fill: none; stroke-width: 4; stroke-linejoin: round; }
.tree-lines .ln { stroke: rgba(255, 241, 232, .22); stroke-dasharray: 3 9; }
.tree-lines .ln.lit { stroke: var(--cyan); stroke-dasharray: none; filter: drop-shadow(0 0 4px rgba(41, 173, 255, .7)); }
.tree-lines .ln.done { stroke: var(--green); stroke-dasharray: none; filter: drop-shadow(0 0 4px rgba(0, 228, 54, .6)); }
.tree-lines .ln.draw { animation: draw 1.1s var(--ease) both; }
@keyframes draw { from { stroke-dasharray: 1000; stroke-dashoffset: 1000; } to { stroke-dasharray: 1000; stroke-dashoffset: 0; } }

.node { position: absolute; width: var(--size); height: var(--size); transform: translate(-50%, -50%); padding: 0; border: 0; background: transparent; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.node-art { position: absolute; inset: 0; display: grid; place-items: center; }
.node-ring { position: absolute; inset: -6%; width: 112%; height: 112%; overflow: visible; }
.node-ring .seg { fill: none; stroke: rgba(255, 241, 232, .2); stroke-width: 7; transition: stroke .4s; }
.node-ring .seg.on { stroke: var(--cyan); }
.node.is-mastered .node-ring .seg.on { stroke: var(--green); }
.node-core { position: absolute; inset: 15%; display: grid; place-items: center; background: var(--navy-900); border: 3px solid var(--line-2); border-radius: 50%; transition: border-color .3s, background .3s, transform .2s var(--ease); }
.node:hover .node-core { transform: scale(1.06); border-color: var(--paper); }
.node .spr { width: 52%; height: 52%; transition: filter .3s; }
.node.is-locked .node-core { border-style: dashed; background: rgba(8, 20, 51, .6); }
.node.is-locked .spr { filter: grayscale(1) brightness(.55); }
.node.is-open .node-core { border-color: var(--cyan); }
.node.is-active .node-core { border-color: var(--cyan); background: #0d2a63; }
.node.is-mastered .node-core { border-color: var(--green); background: #04331b; box-shadow: 0 0 22px rgba(0, 228, 54, .45); }
.node.is-selected .node-core { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 163, 0, .35), 0 0 24px rgba(255, 163, 0, .5); }
.node .lockmark { position: absolute; right: -4%; bottom: -4%; width: 34%; height: 34%; display: grid; place-items: center; background: var(--navy-900); border: 2px solid var(--line-2); border-radius: 50%; }
.node .lockmark .spr { width: 70%; height: 70%; filter: none; }
.node .cursor { position: absolute; left: 62%; top: 62%; width: 36%; height: 36%; pointer-events: none; animation: tap 1s steps(2) infinite; display: none; }
.node.is-open:not(.is-selected) .cursor { display: block; }
@keyframes tap { 50% { transform: translate(-3px, -3px); } }
.node.unlocking .node-core { animation: unlock-pop .9s var(--ease); }
.node.unlocking::after { content: ''; position: absolute; inset: -14%; border: 3px solid var(--yellow); border-radius: 50%; animation: unlock-ring 1s ease-out forwards; pointer-events: none; }
@keyframes unlock-pop { 0% { transform: scale(.6) rotate(-14deg); filter: brightness(2.2); } 55% { transform: scale(1.18) rotate(5deg); } 100% { transform: scale(1) rotate(0); filter: none; } }
@keyframes unlock-ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.node.mastered-fx .node-core { animation: unlock-pop 1.1s var(--ease); }

.node-label { position: absolute; transform: translateY(-50%); width: 38%; pointer-events: none; }
.node-label.left { text-align: right; }
.node-label h3 { margin: 0; font-size: clamp(1.05rem, 2.6vw, 1.35rem); }
.node-label .sub { font: 400 .58rem/1.5 var(--hud); color: var(--muted); margin-top: 4px; }
.node-label .tag { display: block; color: var(--faint); font-size: .85rem; line-height: 1.35; margin-top: 4px; }
.node.is-locked + .node-label h3 { color: var(--faint); }
.tree-stars { position: absolute; display: flex; gap: 3px; transform: translate(-50%, 0); }
.tree-stars .spr { width: 16px; height: 16px; opacity: .3; }
.tree-stars .spr.on { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 236, 39, .8)); }

.stage-panel { position: sticky; top: calc(var(--header-h) + 18px); max-height: calc(100vh - var(--header-h) - 40px); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.stage-panel .head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.stage-panel .head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.stage-panel .goal { color: var(--muted); }
.checklist { list-style: none; padding: 0; margin: 14px 0 22px; }
.checklist li { margin: 0; }
.check { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 9px 8px; min-height: 46px; margin: 0 -8px; cursor: pointer; border-radius: 3px; }
.check:hover { background: rgba(255, 241, 232, .06); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box { position: relative; width: 26px; height: 26px; margin-top: 1px; background: var(--navy-950); border: 2px solid var(--line-2); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.check .box .spr { width: 20px; height: 20px; opacity: 0; transform: scale(.3); transition: opacity .1s, transform .25s var(--ease); }
.check input:checked + .box { background: #04331b; border-color: var(--green); }
.check input:checked + .box .spr { opacity: 1; transform: scale(1); }
.check input:focus-visible + .box { outline: 3px solid var(--orange); outline-offset: 2px; }
.check .txt { line-height: 1.45; }
.check input:checked ~ .txt { color: var(--muted); }
.check .xp { font: 400 .55rem/1.8 var(--hud); color: var(--orange); white-space: nowrap; }
.quest { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 12px 12px; margin: 10px 0; background: rgba(255, 163, 0, .07); border: 1px dashed rgba(255, 163, 0, .55); cursor: pointer; }
.quest:hover { background: rgba(255, 163, 0, .12); }
.quest strong { display: block; font: 700 1.1rem var(--pixel); color: var(--paper); }
.quest p { margin: 4px 0 0; color: var(--muted); font-size: .94rem; line-height: 1.5; }
.quest .box { position: relative; width: 26px; height: 26px; background: var(--navy-950); border: 2px solid var(--orange); display: grid; place-items: center; }
.quest .box .spr { width: 20px; height: 20px; opacity: 0; transform: scale(.3); transition: opacity .1s, transform .25s var(--ease); }
.quest input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quest input:checked + .box { background: #3a2500; }
.quest input:checked + .box .spr { opacity: 1; transform: scale(1); }
.quest input:focus-visible + .box { outline: 3px solid var(--orange); outline-offset: 2px; }
details.fold { border-top: 1px dashed var(--line-2); padding: 4px 0; }
details.fold summary { min-height: 46px; display: flex; align-items: center; gap: 10px; cursor: pointer; font: 700 1.1rem var(--pixel); color: var(--paper); list-style: none; }
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary::before { content: '▸'; color: var(--orange); transition: transform .2s; }
details.fold[open] summary::before { transform: rotate(90deg); }
.float-xp { position: fixed; z-index: 140; pointer-events: none; font: 400 .8rem var(--hud); color: var(--yellow); text-shadow: 2px 2px 0 #000; }
.px { position: fixed; z-index: 140; pointer-events: none; width: 8px; height: 8px; }

/* ачивки */
.ach-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.ach { display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--panel); border: 1px solid var(--line); }
.ach .card-ico { width: 48px; height: 48px; }
.ach strong { display: block; font: 700 1rem/1.15 var(--pixel); color: var(--paper); }
.ach span.d { display: block; font-size: .82rem; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.ach.locked { opacity: .55; }
.ach.locked .spr { filter: grayscale(1) brightness(.6); }
.ach.earned { border-color: rgba(255, 236, 39, .6); background: linear-gradient(180deg, rgba(255, 236, 39, .08), var(--panel)); }

/* парящие спрайты */
.floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.floaters .spr { position: absolute; animation: float 5s ease-in-out infinite; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }

/* HUD-плашка игрока */
.player { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.player .avatar { display: grid; place-items: center; width: 76px; height: 76px; background: var(--navy-950); border: 3px solid var(--orange); box-shadow: 0 5px 0 var(--navy-950); }
.player .lvl { font: 400 .8rem var(--hud); color: var(--orange); }
.player .title { font: 700 1.4rem var(--pixel); color: var(--paper); line-height: 1.1; margin: 4px 0 8px; }
.player .xpline { display: flex; align-items: center; gap: 12px; }
.player .xpline .xpbar { flex: 1; }
.player .xpline span { font: 400 .6rem var(--hud); color: var(--muted); white-space: nowrap; }
.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.stat { padding: 14px; background: var(--panel); border: 1px solid var(--line); }
.stat b { display: block; font: 400 1.15rem var(--hud); color: var(--paper); margin-bottom: 8px; }
.stat span { font-size: .88rem; color: var(--muted); }

@media (max-width: 1000px) {
  .skill { grid-template-columns: 1fr; }
  .stage-panel { position: static; max-height: none; }
}
@media (max-width: 520px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .bar-row { grid-template-columns: 1fr auto; }
  .bar-row .xpbar { grid-column: 1 / -1; order: 3; }
  .node-label .tag { display: none; }
  .player { grid-template-columns: 1fr; }
  .toolbar { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .floaters .spr, .node .cursor, .brand .spr { animation: none; }
  .tree-lines .ln.draw { animation: none; }
}

/* крупные цели нажатия для чипов-ссылок и мелких элементов (≥ 44 px) */
a.chip, button.chip { min-height: 44px; padding: 0 14px; text-decoration: none; }
a.chip:hover { border-color: var(--paper); color: #fff; }
.compare-tray .chip { min-height: 44px; padding: 0 0 0 14px; }
.compare-tray .chip button { width: 44px; height: 44px; font: 700 1.2rem var(--pixel); }
.toc a { padding-block: 11px; }
.az a, .az span { height: 44px; }
.site-footer a:not(.brand) { display: inline-block; padding: 10px 0; }
.site-footer li { margin: 0; }
.mini-node { min-height: 44px; }