/* Шрифты сайта: Minecraft Seven 2 — основной, Minecraft Ten — заголовки, описания, имена, роли, почта, числа */
@font-face { font-family: "MinecraftSeven"; src: url("/fonts/minecraft-seven.woff2") format("woff2"); font-display: swap; ascent-override: 100%; descent-override: 0%; line-gap-override: 0%; }
@font-face { font-family: "MinecraftTen"; src: url("/fonts/minecraft-ten.ttf") format("truetype"); font-display: swap; ascent-override: 100%; descent-override: 0%; line-gap-override: 0%; }
:root {
--accent: #4caf50;
--accent-dark: color-mix(in srgb, var(--accent) 65%, #000);
--accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
--bg: #121614;
--bg-2: #181e1b;
--card: #1e2622;
--line: #2c3730;
--text: #e6eee9;
--muted: #8fa097;
--danger: #e5534b;
--radius: 10px;
--font: "MinecraftSeven", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-head: "MinecraftTen", "MinecraftSeven", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font, "MinecraftSeven", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.boot { display: grid; place-items: center; min-height: 100vh; color: var(--muted); }
/* --- индикатор загрузки (js/loader.js): серая рамка и бегущий по ней квадрат --- */
.loader { display: block; width: 64px; height: 64px; flex: none; }
.loader__ring { fill: var(--line); }
.loader__run { fill: var(--accent); }
.loader--sm { width: 28px; height: 28px; }
.loader--center { margin: 14px auto; }
.container { width: min(var(--container-w, 1140px), 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grow { flex: 1; }
.mt { margin-top: 20px; }
.mb { margin-bottom: 20px; }
/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 40; background: rgba(18,22,20,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; gap: 20px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--text); }
.logo:hover { text-decoration: none; }
.logo__img { width: 32px; height: 32px; object-fit: contain; border-radius: 4px; }
.logo__cube { width: 28px; height: 28px; background: var(--accent); border-radius: 4px; box-shadow: inset -4px -4px 0 rgba(0,0,0,.25), inset 4px 4px 0 rgba(255,255,255,.25); }
.nav { display: flex; gap: 4px; }
.nav a { white-space: nowrap; padding: 8px 14px; border-radius: 8px; color: var(--muted); font-weight: 500; }
.nav a:hover, .nav a.active { color: var(--text); background: rgba(255,255,255,.06); text-decoration: none; }
.nav a.active { color: var(--accent); }
.header__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.search { display: flex; }
.search input { width: clamp(90px, 11vw, 170px); }
.burger { display: none; background: none; border: 0; color: var(--text); font-size: 26px; cursor: pointer; }
.usermenu { position: relative; }
.usermenu__btn { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); color: var(--text); padding: 4px 12px 4px 4px; border-radius: 999px; cursor: pointer; font: inherit; }
.usermenu__list { position: absolute; right: 0; top: 46px; min-width: 190px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.4);
opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.96); transform-origin: top right; transition: opacity .18s, transform .22s cubic-bezier(.34,1.56,.64,1), visibility 0s .22s; }
.usermenu.open .usermenu__list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.usermenu__list a, .usermenu__list button { display: block; width: 100%; text-align: left; padding: 8px 12px; border-radius: 6px; color: var(--text); background: none; border: 0; font: inherit; cursor: pointer; }
.usermenu__list a:hover, .usermenu__list button:hover { background: rgba(255,255,255,.07); text-decoration: none; }
/* ---------- Buttons / forms ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: 8px; border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; background: var(--accent); color: #fff;
transition: background-color .2s, border-color .2s, color .2s, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, opacity .2s; }
.btn--sm { padding: 5px 12px; font-size: 13px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
input, select, textarea {
width: 100%; padding: 9px 12px; background: var(--bg); color: var(--text); border: 1px solid var(--line);
border-radius: 8px; font: inherit; outline: none; transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox] { width: auto; accent-color: var(--accent); }
input[type=color] { padding: 2px; height: 40px; width: 70px; cursor: pointer; }
textarea { resize: vertical; min-height: 110px; font-family: inherit; }
textarea.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; min-height: 220px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field--check { flex-direction: row; align-items: center; gap: 10px; }
.field--check > label { color: var(--text); font-size: 14px; }
.hint { font-size: 12px; color: var(--muted); }
/* ---------- Layout helpers ---------- */
.main { padding: 32px 0 64px; min-height: calc(100vh - 64px - 150px); }
.page-title { font-size: 28px; margin-bottom: 6px; }
.breadcrumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card + .card { margin-top: 16px; }
.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.empty { text-align: center; color: var(--muted); padding: 36px 12px; }
.alert { padding: 10px 14px; border-radius: 8px; background: rgba(229,83,75,.12); border: 1px solid var(--danger); color: #ffb3ae; margin-bottom: 14px; }
/* ---------- Hero ---------- */
.hero { position: relative; padding: 70px 0 60px; overflow: hidden; border-bottom: 1px solid var(--line);
background: radial-gradient(800px 360px at 80% 0, var(--accent-soft), transparent 70%), linear-gradient(180deg, var(--bg-2), var(--bg)); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .18;
background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 40px 40px; mask-image: linear-gradient(180deg, #000, transparent); }
.hero__inner { position: relative; z-index: 1; max-width: 720px; }
.hero--image::after { content: ""; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(90deg, rgba(10,14,12,.82), rgba(10,14,12,.35)), var(--hero-img) center / cover no-repeat; }
.hero--image::before { z-index: 0; opacity: .1; }
.hero--image p { color: #d3ded7; }
.hero h1 { font-size: clamp(32px, 6vw, 54px); line-height: 1.1; margin-bottom: 14px; }
.hero p { color: #b8c7be; font-size: 18px; margin-bottom: 24px; }
.ip { display: inline-flex; align-items: center; gap: 10px; background: var(--card); border: 1px dashed var(--accent); border-radius: 8px; padding: 8px 14px; font-family: ui-monospace, Menlo, Consolas, monospace; cursor: pointer; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin: 28px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.stat b { display: block; font-size: 26px; color: var(--accent); }
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
/* ---------- Forum ---------- */
.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 14px; background: var(--bg-2); }
.table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.table tr:hover td { background: rgba(255,255,255,.02); }
.table .num { text-align: center; width: 90px; color: var(--muted); }
.table .title { font-weight: 600; font-size: 16px; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-right: 6px; background: var(--accent-soft); color: var(--accent); }
.tag--red { background: rgba(229,83,75,.15); color: var(--danger); }
.tag--gold { background: rgba(255,193,7,.15); color: #ffc107; }
.tag--blue { background: rgba(66,165,245,.15); color: #42a5f5; }
.post { display: grid; grid-template-columns: 176px 1fr; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.post__side { background: var(--bg-2); padding: 16px 10px; text-align: center; border-right: 1px solid var(--line); }
.post__side .avatar { margin: 0 auto 8px; }
.post__body { padding: 16px 20px; min-width: 0; }
.post__head { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.post__actions { margin-top: 12px; display: flex; gap: 8px; }
.avatar { width: 64px; height: 64px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 26px; color: #fff; overflow: hidden; image-rendering: pixelated; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; image-rendering: pixelated; }
.avatar--sm { width: 30px; height: 30px; font-size: 14px; border-radius: 50%; }
.avatar--lg { width: 110px; height: 110px; font-size: 46px; }
.uname { font-weight: 700; }
/* ---------- Markdown ---------- */
.md { word-wrap: break-word; overflow-wrap: anywhere; }
.md > *:first-child { margin-top: 0; }
.md h1, .md h2, .md h3, .md h4 { margin: 22px 0 10px; line-height: 1.25; }
.md h1 { font-size: 28px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.md h2 { font-size: 22px; } .md h3 { font-size: 18px; }
.md p { margin: 10px 0; }
.md ul, .md ol { margin: 10px 0 10px 24px; }
.md blockquote { margin: 12px 0; padding: 8px 16px; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.md code { background: var(--bg); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }
.md pre { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 12px 0; }
.md pre code { border: 0; padding: 0; background: none; }
.md img { border-radius: 8px; margin: 8px 0; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
/* ---------- Wiki ---------- */
.wiki { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.wiki__side { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; }
.wiki__side h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 6px; }
.wiki__side h4:first-of-type { margin-top: 10px; }
.wiki__side a { display: block; padding: 5px 10px; border-radius: 6px; color: var(--text); }
.wiki__side a:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.wiki__side a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.editor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.editor .preview { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; min-height: 300px; overflow: auto; }
/* ---------- Profile / Admin ---------- */
.profile { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.profile__card { text-align: center; }
.profile__card .avatar { margin: 0 auto 12px; }
.admin { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; align-items: start; }
.admin__side { position: sticky; top: 84px; padding: 6px; font-size: 13px; }
.admin__group + .admin__group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.admin__gtitle { padding: 3px 8px 2px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .5; }
.admin__side a { display: flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 6px; color: var(--text); line-height: 1.25; }
.admin__side a:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.admin__side a.active { background: var(--accent); color: #fff; font-weight: 600; }
.admin__ico { flex: 0 0 16px; width: 16px; height: 16px; display: inline-grid; place-items: center; font-size: 13px; line-height: 1; }
.admin__lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* свои значки 16×16 вместо эмодзи */
.ico { width: 16px; height: 16px; vertical-align: -3px; image-rendering: pixelated; flex: none; }
/* вкладка «IMG BTN set» */
.imgbtn { padding: 10px 12px; margin-bottom: 10px; }
.imgbtn__title { font-size: 13px; margin-bottom: 6px; opacity: .8; }
.imgbtn__row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.06); }
.imgbtn__row:first-of-type { border-top: 0; }
.imgbtn__prev { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,.05); font-size: 15px; }
.imgbtn__zoom { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,.05); }
.imgbtn__zoom img { width: 24px; height: 24px; image-rendering: pixelated; }
.imgbtn__name { flex: 1; min-width: 0; font-size: 13px; }
.admin__body h2 { margin-bottom: 14px; }
.rows-editor .row { margin-bottom: 8px; flex-wrap: nowrap; }
.table-wrap { overflow-x: auto; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.admin__body { min-width: 0; }
.table td .actions { min-width: 200px; }
/* ---------- Modal / toast ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: grid; place-items: center; z-index: 100; padding: 16px; animation: fadeIn .18s ease-out both; }
.modal { background: var(--card); border: 1px solid var(--line); border-radius: 12px; width: min(560px, 100%); max-height: 90vh; overflow: auto; padding: 22px; animation: pop .28s cubic-bezier(.34,1.56,.64,1) both; }
.modal h3 { margin-bottom: 14px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--card); border: 1px solid var(--accent); border-left-width: 4px; border-radius: 8px; padding: 10px 16px; box-shadow: 0 10px 26px rgba(0,0,0,.4); animation: toastIn .35s cubic-bezier(.34,1.56,.64,1) both; }
.toast--err { border-color: var(--danger); }
/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: 30px 0; color: var(--muted); font-size: 14px; }
.footer__links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.footer__links a { color: var(--muted); }
.footer__links a:hover { color: var(--accent); }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.burger { display: block; }
.nav { position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 10px 16px; display: none; }
.nav.open { display: flex; animation: slideDown .22s ease-out both; }
.search input { width: 120px; }
.two-col, .wiki, .profile, .admin, .editor { grid-template-columns: 1fr; }
.wiki__side, .admin__side { position: static; max-height: none; }
.admin__side { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.admin__group { display: contents; }
.admin__group + .admin__group { border: 0; margin: 0; padding: 0; }
.admin__gtitle { display: none; }
.post { grid-template-columns: 1fr; }
.post__side { display: flex; align-items: center; gap: 12px; text-align: left; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 14px; }
.post__side .avatar { margin: 0; width: 40px; height: 40px; font-size: 18px; }
.post__side .rankc { align-items: flex-start; margin-top: 2px; }
.post__side .rankc .rank, .post__side .rankc__more { justify-content: flex-start; }
.post__side .rankc__ico::after { left: 0; transform: none; }
.table .hide-m { display: none; }
}
@media (max-width: 560px) { .search { display: none; } }
/* ---------- Загрузка картинок ---------- */
.imgpick { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.imgpick__preview { display: grid; place-items: center; overflow: hidden; background: var(--bg-2); border: 1px dashed var(--line); border-radius: 8px; flex-shrink: 0; }
.imgpick__preview--square { width: 96px; height: 96px; }
.imgpick__preview--wide { width: 192px; height: 108px; }
.imgpick__preview img { width: 100%; height: 100%; object-fit: contain; }
.imgpick__preview--wide img { object-fit: cover; }
/* ---------- Ранги и проверка аккаунта ---------- */
.ranks { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.rank { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); }
.rank__icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; image-rendering: auto; }
/* роли в колонке автора: главная с названием + ряд значков */
.rankc { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; min-width: 0; }
.rankc .rank { max-width: 100%; font-size: 13px; line-height: 1.2; justify-content: center; text-align: left; }
.rankc .rank > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.rankc__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.rankc__ico { position: relative; width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 4px; cursor: default; outline: none; }
.rankc__ico .rank__icon { width: 18px; height: 18px; }
.rankc__ico .rank__icon--text { font-size: 14px; }
.rankc__ico:hover, .rankc__ico:focus-visible { background: rgba(255,255,255,.1); }
.rankc__dot { width: 10px; height: 10px; border-radius: 3px; display: block; }
.rankc__ico::after { content: attr(data-name); position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); z-index: 20; white-space: nowrap; background: #0d110f; border: 1px solid var(--line); color: var(--text); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .12s; }
.rankc__ico:first-child::after { left: 0; transform: none; }
.rankc__ico:hover::after, .rankc__ico:focus-visible::after { opacity: 1; }
.rank__icon--text { display: inline-grid; place-items: center; font-size: 15px; line-height: 1; }
.notice { background: rgba(255,193,7,.12); border-bottom: 1px solid rgba(255,193,7,.4); color: #ffd54f; padding: 10px 0; font-size: 14px; }
.verify-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.verify-row:last-child { border-bottom: 0; }
.verify-row__info { flex: 1; min-width: 0; }
.rank-edit { display: grid; gap: 12px; }
.rank-edit__row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.rank-edit__row input { width: auto; flex: 1 1 160px; }
/* ---------- Роли и права ---------- */
.perm-list { display: grid; gap: 6px; margin: 4px 0 14px; }
.perm-list label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.perm-list input { width: auto; }
.role-colorbox { width: 56px !important; flex: 0 0 56px !important; padding: 2px; height: 40px; }
/* ---------- Редактор исходников ---------- */
.src { display: grid; grid-template-columns: 250px 1fr; gap: 16px; align-items: start; }
.src__files { max-height: 74vh; overflow: auto; padding: 8px; }
.src__files button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font: 13px ui-monospace, Menlo, Consolas, monospace; padding: 5px 8px; border-radius: 6px; cursor: pointer; word-break: break-all; }
.src__files button:hover { background: var(--bg-2); }
.src__files button.active { background: var(--accent-soft); color: var(--accent); }
.src__dir { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 10px 8px 2px; }
.src__editor textarea { width: 100%; min-height: 62vh; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre; tab-size: 2; overflow: auto; }
.src__bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.src__bar select { width: auto; max-width: 240px; }
.src__path { font: 600 14px ui-monospace, Menlo, Consolas, monospace; flex: 1; min-width: 120px; }
.src__dirty { color: #ffc107; }
@media (max-width: 800px) { .src { grid-template-columns: 1fr; } .src__files { max-height: 200px; } }
/* =====================================================================
* Регистрация, уведомления
* ===================================================================== */
.notice__row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.notice a:not(.btn) { color: inherit; text-decoration: underline; }
.terms-box { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin: 4px 0 18px; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg-2); transition: border-color .2s, background-color .2s; }
.terms-box:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.terms-box__check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; line-height: 1.4; }
.terms-box__check input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
/* =====================================================================
* АНИМАЦИИ
* ===================================================================== */
@keyframes fadeIn { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.92); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(.95); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes gridDrift { to { background-position: 40px 40px; } }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
@keyframes barRun { from { width: 0; } to { width: 85%; } }
@keyframes avatarIn { from { opacity: 0; transform: scale(.6) rotate(-8deg); } }
@keyframes cubeFloat { 50% { transform: translateY(-3px) rotate(6deg); } }
/* --- переход между страницами --- */
.main { will-change: opacity, transform; }
.main.page-out { opacity: 0; transform: translateY(-8px); transition: opacity .14s ease-in, transform .14s ease-in; pointer-events: none; }
.main.page-in { animation: riseIn .42s cubic-bezier(.22,.9,.3,1) both; }
/* блоки страницы выезжают по очереди */
.reveal { animation: riseIn .5s cubic-bezier(.22,.9,.3,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.table tbody tr.reveal { animation-name: fadeIn; }
/* --- полоса загрузки --- */
#route-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300; opacity: 0; pointer-events: none;
background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #fff)); box-shadow: 0 0 10px var(--accent); }
#route-bar.run { opacity: 1; animation: barRun 2.2s cubic-bezier(.1,.8,.2,1) forwards; }
#route-bar.done { opacity: 0; width: 100%; transition: width .2s ease-out, opacity .35s .2s; }
/* --- кнопки: подъём при наведении, «вдавливание» при нажатии, волна от клика --- */
.btn .ripple, .btn > .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.4); transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; }
.btn--ghost .ripple { background: color-mix(in srgb, var(--accent) 35%, transparent); }
/* --- шапка и навигация: линия, вырастающая из центра --- */
.nav a { position: relative; transition: color .2s, background-color .2s; }
.nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent);
transform: scaleX(0); transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.nav a:hover { text-decoration: none; }
.logo__cube { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.logo:hover .logo__cube { transform: rotate(-14deg) scale(1.15); animation: cubeFloat 1.2s ease-in-out infinite; }
.logo__img { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.logo:hover .logo__img { transform: scale(1.12) rotate(-5deg); }
.search input { transition: width .3s cubic-bezier(.22,.9,.3,1), border-color .2s, box-shadow .2s; }
.search input:focus { width: 240px; }
.usermenu__btn { transition: border-color .2s, transform .18s, box-shadow .2s; }
.usermenu__btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.usermenu__btn:active { transform: scale(.96); }
.usermenu__list a, .usermenu__list button { transition: background-color .15s, padding-left .2s; }
.usermenu__list a:hover, .usermenu__list button:hover { padding-left: 16px; }
.burger { transition: transform .25s; }
.burger:active { transform: scale(.85) rotate(90deg); }
/* --- ссылки и карточки --- */
a { transition: color .15s; }
.grid > .card, .stat, .post, .wiki__side a { transition: transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s, box-shadow .25s, background-color .2s; }
.grid > .card:hover, .stat:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 14px 28px -14px rgba(0,0,0,.7), 0 0 0 1px var(--accent-soft); }
.post:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.table tr td { transition: background-color .2s; }
.table tr:hover td { background: var(--accent-soft); }
.table .title a, .wiki__side a, .admin__side a { transition: color .15s, background-color .2s, padding-left .2s; }
.wiki__side a:hover { padding-left: 16px; }
.ip { transition: transform .2s cubic-bezier(.34,1.56,.64,1), background-color .2s, box-shadow .2s; }
.ip:hover { transform: translateY(-2px); background: var(--accent-soft); box-shadow: 0 6px 18px -6px var(--accent); }
.ip:active { transform: scale(.96); }
.tag { transition: transform .2s; }
.tag:hover { transform: scale(1.08); }
.hero::before { animation: gridDrift 14s linear infinite; }
.footer__links a { transition: color .2s, transform .2s; display: inline-block; }
.footer__links a:hover { transform: translateY(-2px); text-decoration: none; }
/* --- аватары --- */
.avatar { transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.avatar__img { animation: avatarIn .45s cubic-bezier(.34,1.56,.64,1) both; }
a:hover > .avatar, .usermenu__btn:hover .avatar, .post__side .avatar:hover, .profile__card .avatar:hover { transform: scale(1.08) rotate(-3deg); box-shadow: 0 8px 20px -6px rgba(0,0,0,.6); }
/* --- формы, ошибки, окна --- */
.alert { animation: shake .45s ease-out; }
.field--check input[type=checkbox], .terms-box__check input { transition: transform .15s; }
.field--check input[type=checkbox]:active, .terms-box__check input:active { transform: scale(.8); }
.auth-card { animation: pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.overlay--out { animation: fadeIn .18s ease-in reverse both; pointer-events: none; }
.overlay--out .modal { animation: pop .18s ease-in reverse both; }
.toast--out { animation: toastOut .26s ease-in both; }
.imgpick__preview { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.imgpick__preview:hover { transform: scale(1.04); }
/* уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* ---------- Карточки главной ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 32px 0 48px; align-items: start; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }
.pcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
transition: transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s, box-shadow .25s; }
.pcard:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 14px 28px -14px rgba(0,0,0,.7), 0 0 0 1px var(--accent-soft); }
.pcard__head { display: flex; align-items: center; gap: 14px; }
.pcard__head h3 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pcard__icon { width: 64px; height: 64px; flex-shrink: 0; border-radius: 8px; object-fit: contain; }
.pcard__icon--empty { display: grid; place-items: center; background: var(--bg-2); border: 1px dashed var(--line); color: var(--muted); font-size: 26px; }
.pcard__desc { overflow-wrap: anywhere; }
.pcard__date { margin-top: auto; }
.pcard--hidden { opacity: .55; border-style: dashed; }
.pcard--add { align-items: center; justify-content: center; min-height: 140px; border-style: dashed; color: var(--muted); font-size: 52px; line-height: 1; cursor: pointer; background: transparent; font-family: inherit; }
.pcard--add:hover { color: var(--accent); }
.pcard__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.pcard__gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.thumb { position: relative; }
.thumb__x { position: absolute; top: 4px; right: 4px; border: 0; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; background: rgba(0,0,0,.7); color: #fff; }
.thumb--add { aspect-ratio: 1; border: 1px dashed var(--line); border-radius: 6px; background: var(--bg-2); color: var(--muted); font-size: 28px; cursor: pointer; }
.thumb--add:hover { color: var(--accent); border-color: var(--accent); }
.footer__edit { margin-left: 10px; }
.footer__plus { border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 6px; width: 28px; height: 24px; cursor: pointer; font-size: 16px; line-height: 1; }
.footer__plus:hover { color: var(--accent); border-color: var(--accent); }
.pcard__tools { display: flex; gap: 6px; align-self: flex-start; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.pcard__tools { align-self: flex-end; }
/* Карточки: крупный заголовок и картинки на всю ширину карточки */
.pcard__head h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
.pcard__gallery:not(.pcard__gallery--edit) { grid-template-columns: 1fr; gap: 12px; }
.pcard__gallery:not(.pcard__gallery--edit) img { aspect-ratio: 16 / 9; border-radius: 8px; }
.pcard__gallery--edit img { aspect-ratio: 1; }
/* Секция «Последние темы форума» */
.tsec { margin: 8px 0 48px; }
.tsec h2 { margin-bottom: 16px; }
.tsec .cards { margin: 0; }
.tcard__link { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.tcard__link:hover { text-decoration: none; }
.tcard__link:hover h3 { color: var(--accent); }
.tcard__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.tcard h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.25; overflow-wrap: anywhere; }
.tcard__text { color: var(--muted); overflow-wrap: anywhere; }
.toplist { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 50vh; overflow: auto; }
.toplist__item { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit; cursor: pointer; }
.toplist__item:hover { border-color: var(--accent); }
/* Блоки разделов на главной */
.tblock { margin-bottom: 36px; }
.tblock__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.tblock__head h2 { margin: 0; }
.tblock__head .btn { margin-left: auto; align-self: center; }
.tblock .cards { margin: 0; }
.tsec > .cards { margin: 0 0 24px; }
/* =====================================================================
Плашки (> [!тип]), таблицы, спойлеры, картинки в тексте
===================================================================== */
.md::after { content: ""; display: table; clear: both; }
.callout { --c: var(--accent); --on: #fff; --r: 10px; margin: 14px 0; border-radius: var(--r); overflow: hidden; clear: both;
border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 13%, transparent); }
.callout__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-weight: 700; color: var(--c); list-style: none; }
.callout__head::-webkit-details-marker { display: none; }
.callout__icon { font-size: 1.15em; line-height: 1; flex: none; }
.callout__title { flex: 1; min-width: 0; }
.callout__body { padding: 0 14px 12px; }
.callout__body > :first-child { margin-top: 0; }
.callout__body > :last-child { margin-bottom: 0; }
.callout__body blockquote, .callout__body .callout { margin-bottom: 8px; }
.callout__author { padding: 0 14px 10px; font-size: 12px; text-align: right; opacity: .8; }
.callout__badge { flex: none; font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--text); border: 1px dashed currentColor; }
details.callout > summary { cursor: pointer; user-select: none; }
details.callout > summary::after { content: "▾"; margin-left: auto; opacity: .7; transition: transform .2s; }
details.callout:not([open]) > summary::after { transform: rotate(-90deg); }
details.callout:not([open]) > summary { padding-bottom: 10px; }
.callout--hidden { border-style: dashed; }
.callout--locked { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: var(--muted); font-weight: 600; background: transparent; border: 1px dashed var(--line); }
.callout--solid { background: var(--c); border-color: var(--c); color: var(--on); }
.callout--solid .callout__head { color: var(--on); }
.callout--solid a { color: inherit; text-decoration: underline; }
.callout--solid code { background: rgba(0,0,0,.22); border-color: transparent; color: inherit; }
.callout--solid.callout--locked { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.callout--outline { background: transparent; border: 2px solid var(--c); }
.callout--bar { background: color-mix(in srgb, var(--c) 9%, transparent); border: 0; border-left: 5px solid var(--c); border-radius: 0 var(--r) var(--r) 0; }
.callout--bar.callout--locked { border-left-style: solid; }
.md .table-scroll { overflow-x: auto; margin: 14px 0; border: 1px solid var(--line); border-radius: 10px; }
.md-table { width: 100%; border-collapse: collapse; font-size: .95em; }
.md-table th { background: var(--bg-2); text-align: left; font-weight: 700; }
.md-table th, .md-table td { padding: 9px 14px; border-top: 1px solid var(--line); }
.md-table thead th { border-top: 0; }
.md-table tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
.md-table tbody tr:hover { background: var(--accent-soft); }
.md ul.tasks { list-style: none; margin-left: 4px; }
.md li.task input { margin-right: 6px; vertical-align: middle; }
.md mark { background: color-mix(in srgb, #ffd54f 38%, transparent); color: inherit; padding: 0 4px; border-radius: 4px; }
.spoiler { background: #39433d; color: transparent; border-radius: 4px; padding: 0 4px; cursor: pointer; user-select: none; transition: background .2s, color .2s; }
.spoiler:hover, .spoiler:focus-visible { background: #46524b; }
.spoiler.open { background: rgba(255,255,255,.07); color: inherit; user-select: auto; }
.md a.md-img { display: inline-block; max-width: 100%; margin: 8px 0; line-height: 0; }
.md a.md-img img { margin: 0; max-width: 100%; height: auto; }
.md a.md-img--left { float: left; margin: 4px 18px 10px 0; }
.md a.md-img--right { float: right; margin: 4px 0 10px 18px; }
.md a.md-img--center { display: block; text-align: center; }
.md pre.has-copy { position: relative; }
.copy-code { position: absolute; top: 6px; right: 6px; background: var(--card); border: 1px solid var(--line); color: var(--muted); border-radius: 6px; padding: 1px 8px; cursor: pointer; opacity: 0; transition: opacity .15s; font: inherit; }
.md pre:hover .copy-code, .copy-code:focus-visible { opacity: 1; }
.md h1, .md h2, .md h3, .md h4 { scroll-margin-top: 84px; }
/* =====================================================================
Меню эмодзи и символов
===================================================================== */
.emo-wrap { position: relative; display: block; flex: 1 1 auto; min-width: 0; width: 100%; }
.emo-wrap > input, .emo-wrap > textarea { padding-right: 38px; }
.emo-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; opacity: .55; transition: opacity .15s, background .15s; }
.emo-wrap--area .emo-btn { top: 6px; transform: none; }
.emo-wrap:hover .emo-btn, .emo-btn:focus-visible, .emo-btn.is-open { opacity: 1; background: var(--accent-soft); }
.rank-edit__row .emo-wrap { flex: 1 1 160px; }
.rows-editor .row .emo-wrap { flex: 1 1 0; width: auto; min-width: 0; }
.rows-editor .row > input { flex: 1 1 0; width: auto; min-width: 0; }
.emop { position: fixed; z-index: 300; width: min(360px, calc(100vw - 16px)); height: min(400px, calc(100vh - 16px)); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.55); overflow: hidden; opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity .14s, transform .14s; }
.emop--in { opacity: 1; transform: none; }
.emop__search { margin: 10px 10px 6px; width: auto; }
.emop__tabs { display: flex; gap: 2px; padding: 0 8px 6px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.emop__tab { flex: none; width: 32px; height: 30px; border: 0; background: none; border-radius: 6px; cursor: pointer; font-size: 16px; color: var(--text); }
.emop__tab:hover { background: var(--accent-soft); }
.emop__body { flex: 1; overflow-y: auto; padding: 4px 10px 10px; }
.emop__body h5 { margin: 12px 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.emop__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px; }
.emop__cell { height: 34px; border: 0; background: none; border-radius: 6px; cursor: pointer; font-size: 20px; line-height: 1; color: var(--text); padding: 0; }
.emop__cell:hover, .emop__cell:focus-visible { background: var(--accent-soft); outline: none; transform: scale(1.15); }
.emop__grid--found { margin-top: 8px; }
/* =====================================================================
Редактор с панелью (rte)
===================================================================== */
.rte { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.rte:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rte__bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; background: var(--bg-2); border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.rte__btn { min-width: 30px; height: 30px; padding: 0 7px; border: 0; border-radius: 6px; background: none; color: var(--text); cursor: pointer; font: inherit; font-size: 13px; }
.rte__btn:hover, .rte__btn.is-on, .rte__btn.is-open { background: var(--accent-soft); color: var(--accent); }
.rte__btn--wide { padding: 0 10px; white-space: nowrap; }
.rte__btn--right { margin-left: auto; }
.rte__sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.rte__panes { display: grid; }
.rte--side .rte__panes { grid-template-columns: 1fr 1fr; }
.rte__pane { min-width: 0; }
.rte__pane--preview { padding: 12px 16px; overflow: auto; border-left: 1px solid var(--line); max-height: 640px; }
.rte--toggle .rte__pane--preview, .rte--plain .rte__pane--preview { display: none; }
.rte--toggle.rte--show-preview .rte__pane--preview { display: block; border-left: 0; min-height: 200px; max-height: none; }
.rte--toggle.rte--show-preview .rte__pane:first-child { display: none; }
.rte__text { display: block; width: 100%; border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 0 10px 10px; padding: 12px 14px; resize: vertical; min-height: 160px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.55; }
.rte__text.is-drop { outline: 2px dashed var(--accent); outline-offset: -4px; background: var(--accent-soft) !important; }
.rte__label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.rte__status:not(:empty) { padding: 4px 12px 8px; }
.rte__menu { position: absolute; z-index: 30; width: 320px; max-width: calc(100vw - 32px); background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 36px rgba(0,0,0,.5); overflow: hidden; }
.rte__menuhead { padding: 8px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.rte__menulist { max-height: 280px; overflow-y: auto; padding: 4px; }
.rte__menuitem { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.rte__menuitem:hover { background: color-mix(in srgb, var(--c) 18%, transparent); }
.rte__dot { width: 4px; align-self: stretch; border-radius: 2px; background: var(--c); }
.rte__mi { width: 22px; text-align: center; }
.rte__ml { flex: 1; font-weight: 600; color: var(--c); }
.rte__menuitem code { font-size: 11px; color: var(--muted); background: none; border: 0; padding: 0; }
.rte__menuopts { display: grid; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 13px; }
.rte__menuopts select { width: auto; padding: 3px 8px; }
.rte__menuopts input[type=checkbox] { vertical-align: middle; }
.imgdlg__drop { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; padding: 12px; border: 2px dashed var(--line); border-radius: 10px; margin-bottom: 12px; }
.imgdlg__drop.is-drop { border-color: var(--accent); background: var(--accent-soft); }
.imgdlg__preview { height: 110px; display: grid; place-items: center; background: var(--bg); border-radius: 8px; overflow: hidden; }
.imgdlg__preview img { max-width: 100%; max-height: 100%; }
.imgdlg__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal--wide { width: min(900px, 100%); }
/* =====================================================================
Статья вики: содержание, оформление
===================================================================== */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 28px; align-items: start; }
.article:not(:has(.toc)) { grid-template-columns: minmax(0, 1fr); }
.article__main { min-width: 0; }
.toc { position: sticky; top: 84px; font-size: 13px; border-left: 1px solid var(--line); padding-left: 14px; max-height: calc(100vh - 110px); overflow: auto; }
.toc h4 { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.toc a { display: block; padding: 3px 0; color: var(--muted); line-height: 1.35; }
.toc a:hover, .toc a.active { color: var(--accent); text-decoration: none; }
.toc a.active { font-weight: 600; }
.toc .toc__h3 { padding-left: 12px; font-size: 12.5px; }
.wiki__side { border-radius: 14px; }
.wiki__side a { transition: background .15s, color .15s, padding-left .15s; }
.wiki__side a:hover { padding-left: 14px; }
@media (max-width: 1100px) { .article { grid-template-columns: minmax(0, 1fr); } .toc { position: static; border-left: 0; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; order: -1; max-height: none; } }
@media (max-width: 900px) { .rte--side .rte__panes { grid-template-columns: 1fr; } .rte__pane--preview { border-left: 0; border-top: 1px solid var(--line); } .imgdlg__drop { grid-template-columns: 1fr; } .imgdlg__row { grid-template-columns: 1fr; } }
/* =====================================================================
Админка: настройки вики
===================================================================== */
.wset__list { display: grid; gap: 12px; margin-bottom: 16px; }
.wset__row { padding: 14px 16px; }
.wset__rowhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.wset__chip { flex: 1; min-width: 0; }
.wset__chip .callout { margin: 0; }
.wset__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
.wset__colors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wset__color { width: 44px; height: 32px; padding: 2px; cursor: pointer; }
.wset__sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.wset__sw:hover { transform: scale(1.2); }
.wset__flags { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 4px; font-size: 14px; }
.wset__flag { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.wset__previews { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wset__preview { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 16px; }
.wset__code { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; }
@media (max-width: 900px) { .wset__previews { grid-template-columns: 1fr; } }
/* ---------- Плашка онлайна сервера ( • 1 онлайн ) ---------- */
.hero__title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
.hero__title h1 { margin-bottom: 0; }
.spill { --sc: var(--muted); display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; cursor: default;
color: color-mix(in srgb, var(--sc) 55%, #fff); background: color-mix(in srgb, var(--sc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
transition: box-shadow .25s, border-color .25s, background-color .25s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.spill--online { --sc: #3ddc72; }
.spill--offline { --sc: #e5534b; }
.spill--unknown { --sc: #ff9f2e; }
.spill:hover { transform: translateY(-1px); border-color: var(--sc); background: color-mix(in srgb, var(--sc) 22%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc) 55%, transparent), 0 0 18px 2px color-mix(in srgb, var(--sc) 55%, transparent), 0 0 42px 6px color-mix(in srgb, var(--sc) 28%, transparent); }
.spill__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sc); flex-shrink: 0; box-shadow: 0 0 6px var(--sc); }
.spill--online .spill__dot { animation: spillBlink 1.6s ease-in-out infinite; }
@keyframes spillBlink {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc) 70%, transparent), 0 0 8px var(--sc); }
50% { opacity: .35; box-shadow: 0 0 0 6px transparent, 0 0 2px var(--sc); }
}
.spill--loading .spill__dot { animation: spillBlink 1.2s ease-in-out infinite; }
/* ---------- Консоль сервера (админка) ---------- */
.con__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.con__bar .spill { margin-right: auto; }
.con__out { height: 52vh; min-height: 280px; overflow: auto; margin: 0; padding: 12px 14px; background: #0a0d0b; color: #cfe8d6; border: 1px solid var(--line); border-radius: 8px 8px 0 0;
font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; }
.con__out--off { color: var(--muted); }
.con__form { display: flex; gap: 0; }
.con__form input { flex: 1; border-radius: 0 0 0 8px; font: 14px ui-monospace, Menlo, Consolas, monospace; border-top: 0; }
.con__form .btn { border-radius: 0 0 8px 0; }
.con__hist { margin-top: 14px; }
.con__hist h4 { margin-bottom: 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.con__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.con__chip { background: var(--bg-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 3px 10px; font: 13px ui-monospace, Menlo, Consolas, monospace; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .2s, background-color .2s; }
.con__chip:hover { border-color: var(--accent); background: var(--accent-soft); }
/* ---------- Вход в консоль и «кто сейчас в консоли» ---------- */
.con__gate { max-width: 440px; margin: 24px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.con__gate-icon { font-size: 38px; line-height: 1; }
.con__gate-row { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.con__gate-row input { flex: 1; min-width: 0; }
.con__h { margin-bottom: 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.con__users { display: flex; flex-wrap: wrap; gap: 12px; }
.con__user { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.con__user-info { line-height: 1.35; }
/* ---------- Discord в профиле ---------- */
.dbadge { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; margin: 8px 0 4px; border-radius: 999px; background: color-mix(in srgb, #5865f2 16%, transparent); border: 1px solid color-mix(in srgb, #5865f2 50%, transparent); font-size: 13px; font-weight: 600; max-width: 100%; overflow-wrap: anywhere; }
.dbadge img { border-radius: 50%; }
.dbadge__logo { width: 22px; text-align: center; }
/* Игровые монеты (профиль) */
.profile__side { display: flex; flex-direction: column; gap: 12px; }
.btn--coins { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 6px; }
.coins { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.coins__balance { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.coins__balance b { font-size: 1.8rem; }
.coin-icon { display: inline-block; height: 1.2em; width: 1.2em; vertical-align: -0.2em; object-fit: contain; }
.coin-icon--big { height: 1.1em; width: 1.1em; vertical-align: -0.12em; }
.coin-icon--emoji { width: auto; height: auto; vertical-align: baseline; }
.coins__title { margin: 0; }
.coins__desc { overflow-wrap: anywhere; }
/* ---------- Баны ---------- */
.notice--danger { background: rgba(229,83,75,.13); border-bottom-color: rgba(229,83,75,.5); color: #ff9d96; }
.ban-proof { display: grid; place-items: center; width: 96px; height: 96px; overflow: hidden; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); flex-shrink: 0; }
.ban-proof--empty { border-style: dashed; }
.ban-proof img { width: 100%; height: 100%; object-fit: cover; }
.ban-list__row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ban-list__row:last-child { border-bottom: 0; }
.ban-list__info { flex: 1; min-width: 0; }
.ban-list__reason { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ban-box { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(229,83,75,.1); border: 1px solid rgba(229,83,75,.35); font-size: 13px; text-align: left; }
.ban-box .ban-proof { width: 72px; height: 72px; margin-top: 8px; }
.profile__admin { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.profile__admin .btn { width: 100%; }
.ban-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ban-tile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; color: inherit; font: inherit; cursor: pointer; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; transition: transform .15s, border-color .15s; }
.ban-tile:hover { transform: translateY(-2px); border-color: var(--danger); }
.ban-tile--perm { border-color: rgba(229,83,75,.6); background: rgba(229,83,75,.08); }
.ban-tile__info { min-width: 0; flex: 1; }
.ban-tile__name { font-weight: 700; }
.ban-tile__reason { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bancard__head { display: flex; gap: 16px; align-items: center; }
.ban-proof--big { width: 100%; height: auto; max-height: 340px; }
.ban-proof--big img { height: auto; max-height: 340px; object-fit: contain; }
/* ================= Шрифты (js/fonts.js) ================= */
textarea { font-family: inherit; }
textarea.code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.fontpick { display: grid; gap: 8px; max-height: 60vh; overflow: auto; padding-right: 4px; }
.fontpick__item { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; text-align: left; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; font-size: 17px; }
.fontpick__item small { font: 12px/1.2 system-ui, sans-serif; color: var(--muted); }
.fontpick__item:hover { border-color: var(--accent); }
.fontpick__item.active { border-color: var(--accent); background: var(--accent-soft); }
.fontprev { border: 1px dashed var(--line); border-radius: 10px; padding: 14px 16px; margin-top: 8px; }
.fontprev h3 { margin-bottom: 6px; }
/* ================= Вики: на всю ширину и высоту ================= */
:root:has(.wiki-page) { --container-w: 1480px; }
#app { min-height: 100vh; display: flex; flex-direction: column; }
#app > .main { flex: 1 1 auto; display: flex; flex-direction: column; }
.main > .wiki-page { flex: 1 1 auto; display: flex; flex-direction: column; }
.main:has(> .wiki-page) { padding-bottom: 28px; }
.wiki-page > .wiki { flex: 1 1 auto; }
.wiki > .card + .card { margin-top: 0; } /* сайдбар и статья — соседи в сетке: без лишнего отступа сверху */
.wiki-page > .wiki > :not(.wiki__side) { align-self: stretch; min-width: 0; }
/* ================= Подвал: три колонки с блоками ================= */
.footer { position: relative; }
.footer--compact { padding: 16px 0; }
.footer--large { padding: 52px 0; }
.footer__cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 24px 32px; align-items: start; }
.footer__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.footer__col--center { align-items: center; text-align: center; }
.footer__col--right { align-items: flex-end; text-align: right; }
.footer__col--left { align-items: flex-start; text-align: left; }
.fb { max-width: 100%; }
.fb--text { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; }
.fb--image img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.fb--image a { display: inline-block; }
.fb--links { display: flex; gap: 8px 16px; flex-wrap: wrap; }
.fb--links.fb--col { flex-direction: column; gap: 6px; }
.fb--links a { color: inherit; opacity: .85; display: inline-block; transition: color .2s, transform .2s, opacity .2s; }
.fb--links a:hover { color: var(--accent); opacity: 1; transform: translateY(-2px); text-decoration: none; }
.footer__col .fb--a-left { align-self: flex-start; text-align: left; justify-content: flex-start; }
.footer__col .fb--a-center { align-self: center; text-align: center; justify-content: center; }
.footer__col .fb--a-right { align-self: flex-end; text-align: right; justify-content: flex-end; }
/* два класса, чтобы перебить .btn (position: relative; margin: 2px), объявленный ниже по файлу */
.footer .footer__edit { position: absolute; top: 8px; right: 12px; margin: 0; }
@media (max-width: 760px) {
.footer__cols { grid-template-columns: 1fr; }
.footer__col--empty { display: none; }
.footer__col--center, .footer__col--right { align-items: flex-start; text-align: left; }
}
/* редактор подвала в админке */
.fedit__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.fedit__col, .fedit__block, .fedit__grid > * { min-width: 0; }
.fedit__col { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--bg); display: grid; gap: 10px; }
.fedit__col > h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fedit__block { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--card); display: grid; gap: 8px; }
.fedit__head { display: flex; align-items: center; gap: 6px; justify-content: space-between; font-weight: 600; font-size: 13px; }
.fedit__tools { display: flex; gap: 4px; }
.fedit__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; }
.fedit__grid label { font-size: 12px; color: var(--muted); display: grid; gap: 3px; }
.fedit__add { display: flex; gap: 6px; flex-wrap: wrap; }
.fedit__preview { border: 1px dashed var(--line); border-radius: 12px; overflow: hidden; }
.fedit__preview .footer { border-top: 0; }
.fedit__links { display: grid; gap: 6px; }
.fontbtn { font-family: var(--font); letter-spacing: -.02em; }
/* ---------- Магазин ---------- */
.shop { padding-bottom: 48px; }
.shop__money { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.shop__money .coin-icon { flex: none; width: 1.25em; height: 1.25em; vertical-align: middle; }
.shop__balance { display: inline-flex; align-items: center; gap: 8px; line-height: 1.2; white-space: nowrap; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 14px; }
.shop__closed { padding: 14px 18px; margin-bottom: 18px; border-radius: var(--radius); background: rgba(229,83,75,.12); border: 1px solid var(--danger); color: #ffb3ae; }
.shop__login { margin-bottom: 18px; padding: 10px 14px; border-radius: 8px; background: var(--accent-soft); }
.shop__cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.shop__item { display: flex; flex-direction: column; gap: 12px; padding: 0; overflow: hidden; }
.shop__item--off { filter: grayscale(.85); opacity: .6; }
.shop__pic { position: relative; aspect-ratio: 16 / 9; background: var(--bg-2); display: grid; place-items: center; overflow: hidden; }
.shop__pic img { width: 100%; height: 100%; object-fit: cover; }
.shop__noimg { font-size: 42px; opacity: .5; }
.shop__badge { position: absolute; top: 10px; right: 10px; padding: 2px 10px; border-radius: 999px; background: var(--danger); color: #fff; font-weight: 800; font-size: 13px; }
.shop__body { padding: 0 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; align-items: flex-start; }
.shop__title { margin: 0; font-size: 1.05rem; }
.shop__desc { overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.shop__title { overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pdetail { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.pdetail__pic img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 8px; display: block; }
.pdetail__text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; }
.shop__cmd code { display: block; max-height: 4.5em; overflow: hidden; padding: 4px 8px; border-radius: 6px; background: var(--bg-2); color: var(--muted); overflow-wrap: anywhere; }
.shop__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 14px; }
.shop__price { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.shop__admin { padding: 0 16px 14px; margin-top: -4px; }
.shop__lack { color: #ffb3ae; }
.cart__item { display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.cart__item img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.cart__item > div:nth-child(2) { flex: 1; min-width: 0; }
.cart__sum { font-size: 1.1rem; }
/* ======================================================================
ПИКСЕЛЬНЫЕ КНОПКИ в стиле Minecraft: острые углы, рамка-«рельеф»
Устройство (снаружи внутрь): чёрная рамка 1px → широкая светлая грань → тонкая линия 1px
чуть темнее заливки → нейтральная заливка. Грань одинаково светлая со всех сторон (как на эскизах).
Нужен рельеф (светлая сверху-слева, притемнённая снизу-справа) — добавьте класс .btn--bevel.
При нажатии грань и заливка темнеют.
Толщина грани — переменная --rg (у большой кнопки 4px, у маленькой 2px).
Шрифт «Minecraft Rus» построен на сетке 1/8 em, поэтому размеры текста кратны 8px.
ЦВЕТА (вторым классом рядом с .btn):
.btn (цвет сайта --accent) .btn--blue .btn--pink .btn--gold .btn--purple
.btn--stone — серая «каменная», .btn--ghost — тёмная,
.btn--danger — красная, .btn--discord
РАЗМЕРЫ: .btn--sm, .btn--lg; квадратная со значком — .btn--icon (.btn--icon-lg — крупная).
Счётчик внутри кнопки (как «19»): 19
Свой цвет: .btn--мой { --b-bg: заливка; --b-hi: грань сверху-слева; --b-lo: грань снизу-справа;
--b-line: тонкая линия; --b-press: заливка при нажатии; }
====================================================================== */
:root {
--px-frame: #000; /* внешняя рамка */
--px-line: #8fbf7a; /* рамка в редакторе значков */
--px-dark: #1e1d25;
}
.btn {
/* по умолчанию — акцент сайта */
--b-bg: var(--accent);
--b-hi: color-mix(in srgb, var(--accent) 50%, #fff);
--b-lo: color-mix(in srgb, var(--accent) 74%, #000);
--b-line: color-mix(in srgb, var(--accent) 62%, #000);
--b-press: color-mix(in srgb, var(--accent) 80%, #000);
--b-text: #fff;
--rg: 3px; /* толщина грани */
--ln: 1px; /* тонкая линия между гранью и заливкой */
--fp: 2px; /* пиксель шрифта (1/8 размера текста) */
--tl: var(--b-hi); --br: var(--b-hi); --fc: var(--b-bg); /* грань: верх-лево / низ-право (по умолчанию одинаково светлая, как на эскизах) / заливка */
--tsh: var(--fp) 0 0 currentColor; /* «жирный» пиксельный шрифт */
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
margin: 0; padding: 10px 22px 12px; min-height: 38px;
border: 1px solid var(--px-frame); border-radius: 0; box-shadow: none; clip-path: none;
background-color: var(--br);
background-image:
linear-gradient(var(--fc), var(--fc)), /* заливка */
linear-gradient(var(--b-line), var(--b-line)), /* тонкая линия вокруг заливки */
linear-gradient(var(--tl), var(--tl)), /* верхняя грань */
linear-gradient(var(--tl), var(--tl)); /* левая грань */
background-position: center, center, 0 0, 0 0;
background-size:
calc(100% - 2 * (var(--rg) + var(--ln))) calc(100% - 2 * (var(--rg) + var(--ln))),
calc(100% - 2 * var(--rg)) calc(100% - 2 * var(--rg)),
100% var(--rg), var(--rg) 100%;
background-repeat: no-repeat;
color: var(--b-text);
font-size: 16px; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; line-height: 1.1; white-space: nowrap;
text-shadow: var(--tsh), var(--fp) var(--fp) 0 rgba(0,0,0,.38), calc(var(--fp) * 2) var(--fp) 0 rgba(0,0,0,.38);
image-rendering: pixelated; -webkit-font-smoothing: none; text-rendering: optimizeSpeed;
-webkit-tap-highlight-color: transparent;
transition: filter .15s linear, --tl .15s linear, --br .15s linear;
}
.btn { overflow: hidden; }
/* наведение (плавно, 0.15 с):
• серые кнопки (.btn--ghost, .btn--stone) — светлеют их края;
• кнопки любого другого цвета — вся кнопка светлеет;
• «Войти» и «Регистрация» в шапке — обе просто светлеют. */
@property --tl { syntax: ''; inherits: false; initial-value: #000; }
@property --br { syntax: ''; inherits: false; initial-value: #000; }
.btn::before { display: none !important; }
.btn:hover { background-color: var(--br); color: var(--b-text); transform: none; filter: brightness(1.18); text-decoration: none; box-shadow: none; }
/* нажата: грань темнеет, заливка темнее */
.btn:active { --tl: var(--b-lo); --br: var(--b-lo); --fc: var(--b-press); background-color: var(--br); filter: none; transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: 2px dashed #fff; outline-offset: 4px; }
.btn .ripple, .btn > .ripple { display: none !important; } /* без «волны» — не пиксельно */
.btn[disabled]::before, .btn.is-disabled::before { display: none !important; }
.btn[disabled]:hover, .btn.is-disabled:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transition: none; } }
.btn[disabled], .btn.is-disabled { --b-bg: #454b47; --b-hi: #5a615c; --b-lo: #3d4340; --b-line: #343a36; --b-press: #454b47; --b-text: #7f867f;
--tl: var(--b-hi); --br: var(--b-hi); --fc: var(--b-bg); background-color: var(--br);
text-shadow: var(--tsh); filter: none; opacity: 1; pointer-events: none; cursor: default; }
/* рельефный вариант: грань светлая сверху-слева и притемнённая снизу-справа; при нажатии меняются местами */
.btn--bevel { --br: var(--b-lo); }
.btn--bevel:active { --tl: var(--b-lo); --br: var(--b-hi); }
/* ---------- цвета ---------- */
.btn--blue { --b-bg: #5b86e6; --b-hi: #9bb6f6; --b-lo: #4a6dc4; --b-line: #3454a8; --b-press: #2f4a96; }
.btn--pink { --b-bg: #d95075; --b-hi: #ef7f9d; --b-lo: #bf456a; --b-line: #d13462; --b-press: #b83e62; }
.btn--gold { --b-bg: #e0a21f; --b-hi: #ffd978; --b-lo: #bf8812; --b-line: #9c6806; --b-press: #85570a; --b-text: #fffbe8; }
.btn--purple { --b-bg: #8a4fd6; --b-hi: #bc98f2; --b-lo: #7440b8; --b-line: #5a2f96; --b-press: #4a2680; }
.btn--danger { --b-bg: #d94039; --b-hi: #ff9690; --b-lo: #b8332c; --b-line: #8f221d; --b-press: #741b17; }
.btn--discord { --b-bg: #5865f2; --b-hi: #99a2ff; --b-lo: #4752d0; --b-line: #333da8; --b-press: #2b3590; }
/* тёмная кнопка (Войти, Отмена, Закрыть…): тонкая серая грань */
.btn--ghost { --b-bg: var(--px-dark); --b-hi: #5b5a62; --b-lo: #3a3940; --b-line: #15131c; --b-press: #141319; --b-text: #f3f3f5; --rg: 2px; text-shadow: var(--tsh); }
.btn--ghost:hover { --tl: #f2f2f6; --br: #d6d5de; filter: none; } /* белые края светлеют */
.btn--ghost:active { --tl: var(--b-lo); --br: var(--b-lo); }
.header .btn--ghost:hover { --tl: var(--b-hi); --br: var(--b-lo); filter: brightness(1.6); } /* «Войти» в шапке: просто светлеет */
.btn--danger-ghost { --b-bg: var(--px-dark); --b-hi: #8f3d39; --b-lo: #5e2724; --b-line: #15131c; --b-press: #141319; --b-text: #ff9c96; --rg: 2px; text-shadow: var(--tsh); }
.btn--danger-ghost:hover { --tl: #ff8a84; --br: #e5534b; filter: none; }
.btn--danger-ghost:active { --tl: var(--b-lo); --br: var(--b-lo); }
/* «каменная» кнопка как в игре */
.btn--stone { --b-bg: #7b7b7e; --b-hi: #c6c6c9; --b-lo: #5f5f62; --b-line: #3f3f42; --b-press: #626265; }
.btn--stone:hover { --tl: #f2f2f4; --br: #dcdce0; filter: none; }
.btn--stone:active { --tl: var(--b-lo); --br: var(--b-lo); }
.btn--coins { width: 100%; }
/* ---------- размеры ---------- */
.btn--sm { --rg: 2px; --fp: 1px; padding: 6px 14px 8px; min-height: 30px; font-size: 12px; letter-spacing: .06em; gap: 6px; }
.btn--lg { --rg: 3px; --fp: 2px; padding: 12px 30px 14px; min-height: 52px; font-size: 20px; letter-spacing: .08em; gap: 10px; } /* по желанию, нигде не используется */
/* квадратная кнопка со значком (белый пиксельный значок по центру) */
.btn--icon { width: 38px; height: 38px; min-height: 0; padding: 0; gap: 0; }
.btn--icon .ico--px { vertical-align: 0; }
.btn--icon.btn--sm { width: 30px; height: 30px; }
.btn--icon-lg { width: 52px; height: 52px; --rg: 3px; }
.btn--icon-lg .ico { width: 32px; height: 32px; }
/* счётчик внутри кнопки: тёмная плашка, острые углы */
.btn__count { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 2px 8px; margin-right: -10px;
background: var(--b-line); color: #fff; font-size: .8em; text-shadow: var(--tsh);
box-shadow: inset 2px 2px 0 rgba(0,0,0,.35), inset -2px -2px 0 rgba(255,255,255,.22); }
/* значки внутри кнопок: встроенные пиксельные — цвет текста кнопки; свои PNG — как есть */
.ico--px { display: inline-block; width: 16px; height: 16px; flex: none; vertical-align: -3px; background: currentColor;
-webkit-mask: var(--px) center / 100% 100% no-repeat; mask: var(--px) center / 100% 100% no-repeat; image-rendering: pixelated; }
.btn .ico { filter: drop-shadow(2px 2px 0 rgba(0,0,0,.35)); }
.btn--ghost .ico, .btn[disabled] .ico { filter: none; }
/* ---------- IMG BTN set: превью и редактор значка ---------- */
.imgbtn__prev { color: var(--text); }
.imgbtn__row .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pxed { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.pxed__cv { width: 320px; height: 320px; max-width: 100%; image-rendering: pixelated; cursor: crosshair; touch-action: none;
border: 2px solid var(--px-line); background: var(--px-dark); }
.pxed__side { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 10px; }
.pxed__row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pxed__color { width: 34px; height: 34px; padding: 0; border: 2px solid var(--px-line); border-radius: 0; background: none; cursor: pointer; }
.pxed__sw { width: 22px; height: 22px; padding: 0; border: 2px solid var(--px-line); border-radius: 0; cursor: pointer; }
.pxed__sw:hover { border-color: #fff; }
.pxed__lib { width: 100%; }
.pxed__pv { display: inline-grid; place-items: center; width: 40px; height: 40px; color: #fff; box-shadow: 0 0 0 2px var(--px-line); }
.pxed__pv--pink { background: var(--accent); }
.pxed__pv--dark { background: var(--px-dark); box-shadow: 0 0 0 2px var(--px-dark-hi); }
/* ---------- Шрифт каждого элемента (вкладка «Шрифты» в админке; переменные --f-* ставит js/fonts.js) ---------- */
body { font-family: var(--f-body, var(--font)); }
h1, h2, h3, h4, h5, h6, .page-title, .logo { font-family: var(--f-heading, var(--font-head)); }
.hero h1, .hero__title h1 { font-family: var(--f-heroTitle, var(--f-heading, var(--font-head))); }
.hero p { font-family: var(--f-heroText, var(--f-desc, var(--font))); }
.header, .nav a, .header input, .usermenu__list a, .usermenu__list button { font-family: var(--f-nav, var(--font)); }
.btn, button.btn { font-family: var(--f-buttons, var(--font)); }
.pcard__desc, .coins__desc, .shop__desc, .hint, .md p, .md li, .fcat__desc { font-family: var(--f-desc, var(--font)); }
.uname, .usermenu__btn { font-family: var(--f-username, var(--font)); }
.rank, .tag { font-family: var(--f-role, var(--font)); }
input[type="email"], .email { font-family: var(--f-email, var(--font)); }
.stat b, .table .num, .shop__price, .shop-price, .coins__balance b, .btn__count, .num { font-family: var(--f-numbers, var(--font)); }
.footer { font-family: var(--f-footer, var(--font)); }
/* ---------- Админка → Шрифты ---------- */
.fontlib { display: grid; gap: 8px; }
.fontlib__item { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.fontlib__name { display: flex; flex-direction: column; flex: 1 1 180px; min-width: 0; }
.fontlib__sample { font-size: 18px; flex: 1 1 220px; }
.fontrows { display: grid; gap: 12px; margin-bottom: 16px; }
.fontrow { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(200px, 1fr) minmax(200px, 1.2fr); gap: 8px 16px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.fontrow__head { display: flex; flex-direction: column; gap: 2px; }
.fontrow__head .hint { font-family: var(--f-body, var(--font)); }
.fontrow__head label { font-weight: 600; color: var(--text); }
.fontrow__prev { font-size: 18px; overflow-wrap: anywhere; color: var(--text); }
@media (max-width: 800px) { .fontrow { grid-template-columns: 1fr; } }
/* ---------- Главная: название, описание и кнопки — слева, плашка онлайна — справа ---------- */
.hero__inner { display: grid; grid-template-columns: minmax(0, 720px) auto; justify-content: space-between; align-items: start; gap: 20px; max-width: none; }
.hero__side { justify-self: end; }
@media (max-width: 800px) { .hero__inner { grid-template-columns: 1fr; } .hero__side { justify-self: start; order: -1; } }
/* ---------- Шапка: исправление наложения кнопок ----------
Раньше при нехватке ширины логотип «сжимался» и название сайта (пиксельный шрифт шире обычного)
налезало на «Главная», а правая часть выходила за край экрана. Теперь: логотип и правый блок
не сжимаются, отступы адаптивны. «Админ-панель» вынесена из шапки в выпадающее меню под именем пользователя. */
.header__inner { gap: clamp(10px, 1.4vw, 20px); min-width: 0; }
.logo { flex: 0 0 auto; white-space: nowrap; }
.nav { flex: 0 1 auto; min-width: 0; gap: 2px; }
.nav a { padding: 8px clamp(6px, .7vw, 12px); }
.nav a::after { left: clamp(6px, .7vw, 12px); right: clamp(6px, .7vw, 12px); }
.header__right { flex: 0 0 auto; gap: 8px; }
.search input { width: clamp(100px, 8vw, 170px); min-width: 0; }
@media (max-width: 900px) { .search input { width: 120px; } }
.usermenu__btn { white-space: nowrap; }
/* ======================================================================
НОВЫЕ КНОПКИ «Мягкий пиксель»: полукруглые ступенчатые углы, тёмный контур,
блик сверху, нижняя фаска и «подушка»-тень. Нажатие вдавливает кнопку.
Цвета берутся из тех же переменных, что и раньше (--b-bg заливка, --b-hi блик,
--b-lo фаска, --b-line контур), поэтому все классы .btn--* работают как прежде.
Устройство: ::before — контур, ::after — заливка, обе с вырезанными углами (clip-path).
====================================================================== */
.btn {
--o: color-mix(in srgb, var(--b-line) 65%, #000); /* цвет контура и тени */
--sh: 4px; /* высота «подушки» */
--notch-out: polygon(0 6px, 2px 6px, 2px 4px, 4px 4px, 4px 2px, 6px 2px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 2px, calc(100% - 4px) 2px, calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 6px), 0 calc(100% - 6px));
--notch-in: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px));
isolation: isolate; overflow: visible; border: 0; border-radius: 0; background: none; background-image: none;
margin-bottom: var(--sh);
padding: 10px 24px 12px; min-height: 38px;
text-transform: none; letter-spacing: .04em;
text-shadow: 0 2px 0 var(--o);
filter: drop-shadow(0 var(--sh) 0 var(--o));
transition: filter .12s linear, transform .06s linear;
}
.btn::before, .btn::after, .btn[disabled]::before, .btn.is-disabled::before { content: ""; display: block !important; position: absolute; z-index: -1; pointer-events: none; }
.btn::before { inset: 0; background: var(--o); clip-path: var(--notch-out); }
.btn::after { inset: 2px; clip-path: var(--notch-in);
background: linear-gradient(var(--b-hi) 0 2px, var(--b-bg) 2px);
box-shadow: inset 0 -4px 0 var(--b-lo); }
.btn:hover { background: none; filter: drop-shadow(0 var(--sh) 0 var(--o)) brightness(1.14); transform: none; }
.btn:active { --sh: 1px; background: none; filter: drop-shadow(0 1px 0 var(--o)); transform: translateY(3px); }
.btn:active::after { background: var(--b-press); box-shadow: inset 0 3px 0 var(--b-lo); }
.btn:focus-visible { outline: 2px dashed #fff; outline-offset: 5px; }
.btn[disabled], .btn.is-disabled { background: none; filter: drop-shadow(0 var(--sh) 0 var(--o)); transform: none; text-shadow: 0 2px 0 var(--o); }
.btn--ghost:hover { filter: drop-shadow(0 var(--sh) 0 var(--o)) brightness(1.5); }
.btn--sm { padding: 6px 16px 8px; min-height: 30px; --sh: 3px; }
.btn--sm::before { clip-path: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)); }
.btn--sm::after { clip-path: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)); box-shadow: inset 0 -3px 0 var(--b-lo); }
.btn--icon { padding: 0; min-height: 0; }
.btn--sm.btn--icon { margin-bottom: 3px; }
/* Палитра кнопок «Мягкий пиксель» — яркие тона из макета */
.btn { --b-bg: color-mix(in srgb, var(--accent) 72%, #fff); --b-hi: color-mix(in srgb, var(--accent) 45%, #fff); --b-lo: color-mix(in srgb, var(--accent) 80%, #000); --b-line: color-mix(in srgb, var(--accent) 35%, #000); --b-press: color-mix(in srgb, var(--accent) 85%, #000); }
.btn--blue { --b-bg: #4b5cf0; --b-hi: #8c98ff; --b-lo: #2a35b8; --b-line: #141a5e; --b-press: #2a35b8; }
.btn--green { --b-bg: #3fbf5f; --b-hi: #8cf0a3; --b-lo: #237a3b; --b-line: #0e3a1b; --b-press: #237a3b; }
.btn--gold { --b-bg: #f0b429; --b-hi: #ffe08a; --b-lo: #a8730a; --b-line: #4d3303; --b-press: #a8730a; --b-text: #fff; }
.btn--danger { --b-bg: #e24b44; --b-hi: #ff9c96; --b-lo: #9c2722; --b-line: #4a0f0c; --b-press: #9c2722; }
.btn--purple { --b-bg: #9a5fe6; --b-hi: #cfa8ff; --b-lo: #6232a8; --b-line: #2a1250; --b-press: #6232a8; }
.btn--discord { --b-bg: #5865f2; --b-hi: #99a2ff; --b-lo: #3a45c2; --b-line: #1b2160; --b-press: #3a45c2; }
.btn--ghost, .btn--stone { --b-bg: #59606d; --b-hi: #98a0ae; --b-lo: #363b45; --b-line: #15171c; --b-press: #363b45; --b-text: #fff; }
.btn--danger-ghost { --b-bg: #3a2a2c; --b-hi: #8a5a5c; --b-lo: #231819; --b-line: #120a0b; --b-press: #231819; --b-text: #ff9c96; }
.btn--ghost:hover, .btn--stone:hover { filter: drop-shadow(0 var(--sh) 0 var(--o)) brightness(1.12); }
.btn[disabled], .btn.is-disabled { --b-bg: #454b47; --b-hi: #5a615c; --b-lo: #3d4340; --b-line: #1c201e; --b-press: #454b47; --b-text: #7f867f; }
/* ======================================================================
КНОПКИ «Плоские»: скруглённые, сплошная заливка, жирный заглавный текст;
второстепенные (.btn--ghost) — тёмные с тонкой светлой рамкой.
Цвета по-прежнему задаются переменными --b-bg (заливка) и классами .btn--*.
Этот блок перекрывает предыдущие пиксельные стили кнопок.
====================================================================== */
.btn {
--sh: 0px;
isolation: auto; overflow: hidden; clip-path: none; filter: none; box-shadow: none;
margin: 0; padding: 12px 28px; min-height: 44px; gap: 8px;
border: 1px solid transparent; border-radius: 10px;
background: var(--b-bg); background-image: none;
color: var(--b-text, #fff);
font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-shadow: none;
transition: background-color .18s, border-color .18s, transform .12s, filter .18s;
}
.btn::before, .btn::after, .btn[disabled]::before, .btn.is-disabled::before { display: none !important; content: none; }
.btn:hover { background: var(--b-bg); filter: brightness(1.12); transform: translateY(-1px); }
.btn:active { background: var(--b-press); filter: none; transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn--sm { padding: 7px 16px; min-height: 32px; border-radius: 8px; font-size: 12px; --sh: 0px; }
.btn--icon { padding: 0; min-height: 0; }
.btn--sm.btn--icon { margin-bottom: 0; }
/* второстепенные: тёмная кнопка с тонкой рамкой */
.btn--ghost, .btn--stone, .btn--danger-ghost {
background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.16); color: #f0f2f1;
}
.btn--ghost:hover, .btn--stone:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); filter: none; }
.btn--ghost:active, .btn--stone:active { background: rgba(255,255,255,.14); }
.btn--danger-ghost { color: #ff8a84; border-color: rgba(226,75,68,.45); }
.btn--danger-ghost:hover { background: rgba(226,75,68,.14); border-color: rgba(226,75,68,.8); filter: none; }
.btn[disabled], .btn.is-disabled { background: #2b312e; border-color: transparent; color: #7f867f; filter: none; transform: none; opacity: .7; }
.btn .ico, .btn--ghost .ico { filter: none; }
.btn { --b-bg: color-mix(in srgb, var(--accent) 88%, #fff); --b-press: color-mix(in srgb, var(--accent) 80%, #000); }
.btn--blue { --b-bg: #3f51e0; --b-press: #2f3fb8; }
.btn--green { --b-bg: #1f9d8a; --b-press: #187a6b; }
.btn--gold { --b-bg: #e0a21f; --b-press: #b9820f; }
.btn--danger { --b-bg: #e24b44; --b-press: #b83731; }
.btn--purple { --b-bg: #8a4fd6; --b-press: #6e3cb0; }
.btn--discord { --b-bg: #5865f2; --b-press: #4752d0; }
.btn--ghost, .btn--stone, .btn--danger-ghost { --b-bg: rgba(255,255,255,.03); }
.btn[disabled], .btn.is-disabled { --b-bg: #2b312e; }