/* Общее для трёх версий: шрифты, живые картинки проектов, кубик, окно лаунчера, переключатель версий. */
@font-face { font-family: "Unbounded"; src: url("../fonts/unbounded-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; src: url("../fonts/unbounded-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF; }
@font-face { font-family: "JB Mono"; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF; }
@font-face { font-family: "JB Mono"; src: url("../fonts/jetbrains-mono-cyrillic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0400-045F; }

:root { --display: "Unbounded", system-ui, sans-serif; --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JB Mono", ui-monospace, Consolas, monospace; --ease: cubic-bezier(.2, .8, .2, 1); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; }
button { font: inherit; color: inherit; }

/* ---------- линейные картинки ---------- */
.ln { width: 120px; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ln circle { fill: var(--bg, #fff); }
.ln circle.on { fill: currentColor; }
.ln text { fill: currentColor; stroke: none; font: 600 15px var(--display); text-anchor: middle; dominant-baseline: middle; transition: fill .3s; }
.vpn path { stroke-dasharray: 4 5; animation: lnDash 1.6s linear infinite; }
[data-proj]:hover .vpn path, .pv.on .vpn path { animation-duration: .6s; }
@keyframes lnDash { to { stroke-dashoffset: -18; } }
.vpn .pk { fill: var(--a, currentColor); stroke: none; }
.vpn .halo { fill: none; stroke: var(--a, currentColor); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: halo 2.4s ease-out infinite; }
.vpn .halo.h2 { animation-delay: 1.2s; }
@keyframes halo { 0% { opacity: .8; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.6); } }
.d20 .d20g { transform-box: fill-box; transform-origin: center; animation: d20float 6s ease-in-out infinite; }
@keyframes d20float { 50% { transform: rotate(8deg); } }
.d20 .tri { transition: fill .3s; }
.d20.rolling .d20g { animation: d20roll .7s var(--ease); }
@keyframes d20roll { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(220deg) scale(.8); } 100% { transform: rotate(360deg) scale(1); } }
.d20.crit .tri { fill: var(--a, currentColor); }
.d20.crit text { fill: #fff; }
.d20.crit { filter: drop-shadow(0 0 14px var(--a, currentColor)); }

.eqs { display: flex; align-items: flex-end; gap: 4px; width: 140px; height: 64px; }
.eqs i { flex: 1; height: var(--h); border-radius: 2px; background: currentColor; transform-origin: bottom; animation: eqb 1.5s ease-in-out var(--d) infinite alternate; transition: background .3s; }
[data-proj]:hover .eqs i, .pv.on .eqs i { animation-duration: .55s; background: var(--a, currentColor); }
@keyframes eqb { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

/* ---------- кубик ---------- */
.cube-wrap { --cs: 70px; position: relative; width: var(--cs); height: var(--cs); perspective: 600px; }
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: cube 16s linear infinite; }
[data-proj]:hover .cube, .pv.on .cube { animation-duration: 4s; }
@keyframes cube { from { transform: rotateX(-24deg) rotateY(35deg); } to { transform: rotateX(-24deg) rotateY(395deg); } }
.cube.manual { animation: none; }
.f { position: absolute; inset: -1px; background: #6b4426 center / 100% 100%; image-rendering: pixelated; outline: 1px solid transparent; }   /* на 1px шире: соседние грани перекрываются, щели нет */
.f.top { transform: rotateX(90deg) translateZ(calc(var(--cs) / 2)); }
.f.bottom { transform: rotateX(-90deg) translateZ(calc(var(--cs) / 2)); filter: brightness(.5); }
.f.front { transform: translateZ(calc(var(--cs) / 2)); filter: brightness(.88); }
.f.back { transform: rotateY(180deg) translateZ(calc(var(--cs) / 2)); filter: brightness(.88); }
.f.left { transform: rotateY(-90deg) translateZ(calc(var(--cs) / 2)); filter: brightness(.72); }
.f.right { transform: rotateY(90deg) translateZ(calc(var(--cs) / 2)); filter: brightness(.72); }
.cube-shadow { position: absolute; left: 0; right: 0; bottom: calc(var(--cs) * -.55); height: calc(var(--cs) * .18); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .28), transparent); }
.bigcube { display: grid; justify-items: center; align-content: center; gap: calc(var(--cs, 150px) * .75); cursor: grab; user-select: none; touch-action: none; }
.bigcube:active { cursor: grabbing; }
.bigcube .cube-wrap { --cs: 150px; }

/* ---------- окно лаунчера ---------- */
.app { --app-bg: #fff; --app-side: #f5f4f0; --app-line: #e5e3dc; --app-ink: #151515; --app-mute: #8a8984; --app-card: #fafaf8;
  margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--app-line); background: var(--app-bg); color: var(--app-ink); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .45); }
.app-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--app-line); background: var(--app-side); font: 12px var(--mono); color: var(--app-mute); }
.app-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--app-line); }
.app-bar span { margin-left: 8px; }
.app-body { display: grid; grid-template-columns: 170px 1fr; min-height: 300px; }
.app-nav { display: grid; align-content: start; gap: 2px; padding: 12px 10px; background: var(--app-side); border-right: 1px solid var(--app-line); }
.app-nav button { padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 14px; color: var(--app-mute); cursor: pointer; transition: background .2s, color .2s; }
.app-nav button:hover { color: var(--app-ink); }
.app-nav button.on { background: var(--app-bg); color: var(--app-ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--a); }
.app-main { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px 20px; }
.app-h { font: 600 18px var(--display); letter-spacing: -.02em; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: start; }
.pack { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-card); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s; }
.pack:hover { transform: translateY(-2px); }
.pack b { font-size: 15px; }
.pack span { font: 11.5px var(--mono); color: var(--app-mute); }
.pack.on { border-color: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 18%, transparent); }
.app-play { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 16px; padding-top: 14px; border-top: 1px solid var(--app-line); }
.app-prog { grid-column: 1; height: 4px; border-radius: 2px; background: var(--app-line); overflow: hidden; }
.app-prog i { display: block; height: 100%; width: 0; background: var(--a); transition: width .4s var(--ease); }
.app-st { grid-column: 1; font: 12px var(--mono); color: var(--app-mute); }
.play { grid-column: 2; grid-row: 1 / 3; padding: 13px 30px; border: 0; border-radius: 10px; background: var(--a); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; transition: transform .15s, filter .2s; }
.play:hover { filter: brightness(1.08); transform: translateY(-1px); }
.play:active { transform: translateY(1px); }
.play[disabled] { filter: grayscale(.6); cursor: progress; }
.app figcaption { padding: 9px 14px; border-top: 1px solid var(--app-line); background: var(--app-side); font: 11px var(--mono); color: var(--app-mute); text-align: center; }

/* ---------- переключатель версий (только для примерки) ---------- */
.vswitch { position: fixed; right: 14px; bottom: 14px; z-index: 50; display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 12px; border-radius: 99px;
  background: rgba(20, 20, 24, .88); color: #bbb; font: 12px var(--mono); backdrop-filter: blur(8px); box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.vswitch span { margin-right: 4px; }
.vswitch a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; text-decoration: none; color: #ddd; }
.vswitch a:hover { background: rgba(255, 255, 255, .1); }
.vswitch a[aria-current] { background: #fff; color: #111; }

@media (max-width: 700px) {
  .app-body { grid-template-columns: 1fr; }
  .app-nav { grid-auto-flow: column; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--app-line); }
  .app-nav button { white-space: nowrap; }
  .packs { grid-template-columns: 1fr; }
  .bigcube .cube-wrap { --cs: 110px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- кубик в canvas ---------- */
.cube-wrap { --cs: 70px; position: relative; width: var(--cs); height: var(--cs); }
.cube-cv { position: absolute; left: -45%; top: -45%; width: 190%; height: 190%; pointer-events: none; }
.bigcube .cube-cv { pointer-events: none; }

/* ---------- цветные иконки ---------- */
.vpn path { stroke: color-mix(in srgb, var(--a, #3d7bff) 80%, #fff); stroke-width: 2; }
.vpn circle { fill: #fff; stroke: color-mix(in srgb, var(--a, #3d7bff) 70%, #fff); stroke-width: 2; }
.vpn circle.on { fill: var(--a, #3d7bff); stroke: color-mix(in srgb, var(--a, #3d7bff) 40%, #fff); filter: drop-shadow(0 0 6px var(--a, #3d7bff)); }
.vpn .pk { fill: #9ef5ec; stroke: none; filter: drop-shadow(0 0 4px #35e0d0); }
.vpn .halo { stroke: var(--a, #3d7bff); fill: none; }
.d20 polygon:first-child { fill: color-mix(in srgb, var(--a, #e0473f) 45%, #1a0a0c); stroke: #f2c46b; stroke-width: 2; }
.d20 .tri { fill: color-mix(in srgb, var(--a, #e0473f) 85%, #000); stroke: #f2c46b; stroke-width: 2; }
.d20 .d20g path { stroke: rgba(242, 196, 107, .75); stroke-width: 1.5; }
.d20 text { fill: #fff; }
.d20.crit .tri { fill: #f2c46b; } .d20.crit text { fill: #3a1408; }
.d20 { filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--a, #e0473f) 45%, transparent)); }
.eqs i { background: linear-gradient(to top, var(--a, #a55cff), color-mix(in srgb, var(--a, #a55cff) 35%, #ff8fd0)); box-shadow: 0 0 10px -3px var(--a, #a55cff); }