/* App layout. EXPANDED (labels) is the default → wider rail. COLLAPSED (icons-only, the legacy look) is opted in via .app.nav-collapsed. Width is driven by the --side-w custom property (set on by render.js from the persisted state: 210px expanded / 156px collapsed) so body-level overlays (e.g. .engine-editor-overlay) can read the SAME source of truth. */ /* 3 columns: main menu · AI dock · content. The dock column is var(--ai-w) (0px when the dock is closed/hidden — see assistant.css + render.js). On mobile responsive.css collapses .app to a single column and the dock floats as a full-screen overlay instead. */ .app { display: grid; grid-template-columns: var(--side-w, 210px) var(--ai-w, 0px) 1fr; min-height: 100vh; min-height: 100dvh; } .side { background: var(--bg-2); border-right: 1px solid var(--border); padding: 18px 14px; position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; } .brand { font-weight: 700; letter-spacing: 0.4px; font-size: 13px; color: var(--text); padding: 2px 4px 18px; display: flex; align-items: center; gap: 8px; } .brand .logo { width: 18px; height: 18px; display: grid; place-items: center; color: var(--accent-soft); } .brand .logo svg { width: 100%; height: 100%; display: block; } /* Wrapper around logo + plus balance. On desktop it is transparent (display:contents) so the sidebar stacks brand then balance exactly as before; on mobile (responsive.css) it becomes a flex row: logo left, balance right, on one line. */ .brand-row { display: contents; } /* Баланс плюсиков под брэндом. data-stat="plusik" — repaint via updateBalanceUI(); кликается как ссылка на Рынок (data-go). */ .brand-balance { display: inline-flex; align-items: center; gap: 6px; margin: -12px 4px 14px; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 999px; color: var(--accent-soft); font: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; width: fit-content; } @media (hover: hover) { .brand-balance:hover { background: var(--accent-glow); border-color: var(--accent-soft); } } @media (max-width: 768px) { .brand-balance { min-height: 44px; } } .brand-balance .bb-ic { width: 14px; height: 14px; flex-shrink: 0; display: grid; place-items: center; color: var(--accent-soft); } .brand-balance .bb-ic svg { width: 100%; height: 100%; display: block; } .brand-balance .num { color: var(--text); } .brand-balance .bb-label { font-weight: 500; font-size: 12px; color: var(--muted); } /* Свёрнутый sidebar: прячем подпись «плюсиков» (через .nav-label rule), центрируем иконку+число. */ .app.nav-collapsed .side .brand-balance { margin: -6px auto 12px; padding: 4px 8px; } /* Anon-nudge badge в sidebar (между brand и nav). Виден только когда state.account = anon (login=null) И state.hasOwnedGames = true. Клик → openProfileModal. */ .anon-nudge-badge { appearance: none; width: 100%; margin: 0 0 12px; padding: 7px 9px; border-radius: var(--r-sm, 6px); border: 1px solid rgba(217,160,98,0.45); background: linear-gradient(180deg, rgba(217,160,98,0.18), rgba(60, 40, 14, 0.45)); color: #ffd49a; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.2px; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.15s ease, border-color 0.15s ease, transform 0.06s ease; line-height: 1.25; } .anon-nudge-badge:hover { background: linear-gradient(180deg, rgba(217,160,98,0.28), rgba(80, 52, 16, 0.55)); border-color: rgba(217,160,98,0.75); } .anon-nudge-badge:active { transform: translateY(1px); } .anon-nudge-badge .anon-nudge-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #ffb74d; box-shadow: 0 0 8px rgba(255, 183, 77, 0.7); animation: anon-nudge-pulse 2.2s ease-in-out infinite; } .anon-nudge-badge .anon-nudge-text { flex: 1; word-break: break-word; } @keyframes anon-nudge-pulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } /* Sidebar nav. ALL sidebar-mode styling is scoped under .side / .app.nav-collapsed so the GLOBAL .icon-btn (used in toolbars/cards) is never touched. EXPANDED (default): single column, each button a left- aligned icon+label row. */ .nav { display: grid; grid-template-columns: 1fr; gap: 8px; } .side .nav .icon-btn { aspect-ratio: auto; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 9px 12px; width: 100%; } .side .icon-btn svg { flex-shrink: 0; } .side .nav-label { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Bottom toggle — pinned to the bottom of the flex-column .side. Muted, sits below .nav. In expanded mode it's a full-width icon+label row like the nav buttons; in collapsed mode it shrinks to an icon-only square (see below). */ .side .side-toggle { margin-top: auto; aspect-ratio: auto; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 9px 12px; width: 100%; background: transparent; border: 1px solid var(--border); color: var(--muted); box-shadow: none; font-size: 13px; } .side .side-toggle:hover { background: rgba(255,220,180,0.04); color: var(--text); } .side .side-toggle .side-toggle-ic { display: inline-grid; place-items: center; flex-shrink: 0; } .side .side-toggle .side-toggle-ic svg { width: 18px; height: 18px; display: block; } /* COLLAPSED (legacy look): 2-col square grid, icons only, labels hidden. */ .app.nav-collapsed .side .nav { grid-template-columns: 1fr 1fr; } .app.nav-collapsed .side .nav .icon-btn { aspect-ratio: 1 / 1; display: grid; place-items: center; justify-content: center; gap: 0; padding: 0; } .app.nav-collapsed .side .nav-label { display: none; } .app.nav-collapsed .side .side-toggle { width: 48px; aspect-ratio: 1 / 1; align-self: center; display: grid; place-items: center; justify-content: center; padding: 0; gap: 0; } /* Chevron points right (expand) when collapsed, left (collapse) when open. */ .app.nav-collapsed .side .side-toggle .side-toggle-ic { transform: rotate(180deg); } .side .me .logout { margin-top: 10px; font-size: 12px; color: var(--muted); cursor: pointer; } .side .me .logout:hover { color: var(--danger); } /* position:relative — anchor для overlay'ев которые рисуются ПОВЕРХ контента но НЕ поверх sidebar. См. .engine-editor-overlay в game.css. */ .main { padding: 28px 36px 60px; max-width: 1100px; width: 100%; position: relative; } .main.wide { max-width: none; } .page-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; } .page-h h1 { font-size: 22px; margin: 0; font-weight: 700; } .page-h .sub { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Cards & lists */ .card { background: linear-gradient(180deg, rgba(255,220,180,0.025), transparent 40%), var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: 18px; } .card + .card { margin-top: 14px; } /* Section icon header */ .sec-icon { width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 6px; color: var(--muted); background: rgba(255,220,180,0.04); border: 1px solid var(--border-2); margin-bottom: 12px; } .sec-icon svg { width: 14px; height: 14px; } /* Empty */ .empty { padding: 60px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--border-2); border-radius: var(--r-md); } /* Tables / lists */ .list { display: flex; flex-direction: column; } .list .row-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border-2); border-radius: var(--r-md); background: linear-gradient(180deg, rgba(255,220,180,0.02), transparent 60%), var(--surface); box-shadow: var(--shadow-card); cursor: pointer; } .list .row-item + .row-item { margin-top: 10px; } @media (hover: hover) { .list .row-item:hover { border-color: rgba(110,150,135,0.35); } } .list .row-item .ttl { font-weight: 600; margin-bottom: 4px; } .list .row-item .meta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; } /* Status chips */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(255,220,180,0.05); border: 1px solid var(--border-2); color: var(--muted); } .chip.published, .chip.approved { color: #b4ecd1; border-color: rgba(95,180,135,0.4); background: rgba(95,180,135,0.1); } .chip.submitted_for_review, .chip.pending { color: #f5d1a3; border-color: rgba(213,145,72,0.4); background: rgba(213,145,72,0.1); } .chip.rejected { color: #f0bdac; border-color: rgba(213,106,82,0.4); background: rgba(213,106,82,0.1); } .chip.restricted { color: #c8b8ec; border-color: rgba(160,140,210,0.4); background: rgba(160,140,210,0.1); } .chip.build_ready, .chip.draft { color: var(--muted); } /* Status chips become icon-only */ .chip-icon { width: 22px; height: 22px; padding: 0; border-radius: 6px; justify-content: center; gap: 0; } .chip-icon svg { width: 14px; height: 14px; display: block; } /* Audit feed */ .audit { display: flex; flex-direction: column; gap: 8px; } .audit .entry { padding: 8px 10px; border-left: 2px solid var(--border-2); font-size: 12px; color: var(--muted); } .audit .entry b { color: var(--text); } .audit .entry.approved { border-color: var(--ok); } .audit .entry.rejected { border-color: var(--danger); } .audit .entry.restricted { border-color: #a08cd2; } .audit .entry.submitted { border-color: var(--warn); } /* Mobile shell tweaks */ @media (max-width: 640px) { .list .row-item .meta { font-size: 13px; } }