/* ==========================================================================
   Единая система стилей портала. Без внешних зависимостей.
   ========================================================================== */

@font-face {
    font-family: 'Portal Display';
    src: url('../misc/PTSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Portal Mono';
    src: url('../misc/DejaVuSans.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Portal Mono';
    src: url('../misc/DejaVuSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --font-display: 'Portal Display', var(--font-sans);
    --font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, 'Portal Mono', monospace;

    --bg: #0b1020;
    --bg-2: #111834;
    --panel: rgba(21, 28, 56, 0.72);
    --panel-solid: #151c38;
    --panel-2: rgba(255, 255, 255, 0.04);
    --line: rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 255, 255, 0.20);

    --text: #e8ecf8;
    --muted: #9aa6c8;
    --dim: #6b779b;

    --accent: #6d8cff;
    --accent-2: #a06bff;
    --accent-ink: #ffffff;
    --good: #3ddc97;
    --warn: #ffc75a;
    --bad: #ff6b7a;
    --info: #56cbf9;

    --r-sm: 8px;
    --r: 12px;
    --r-lg: 18px;
    --r-xl: 26px;

    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);
    --ring: 0 0 0 2px rgba(109, 140, 255, .55);

    --maxw: 1360px;
    color-scheme: dark;
}

html[data-theme="light"] {
    --bg: #eef1fa;
    --bg-2: #ffffff;
    --panel: rgba(255, 255, 255, .82);
    --panel-solid: #ffffff;
    --panel-2: rgba(10, 20, 60, .04);
    --line: rgba(12, 20, 50, .12);
    --line-strong: rgba(12, 20, 50, .25);
    --text: #131a30;
    --muted: #4d5a80;
    --dim: #7784a8;
    --accent: #4160e8;
    --accent-2: #8b46e0;
    --shadow: 0 10px 30px rgba(20, 30, 70, .14);
    --shadow-sm: 0 4px 14px rgba(20, 30, 70, .10);
    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.45;
}

body.app-bg {
    background-color: var(--bg);
    background-image:
        radial-gradient(1200px 700px at 12% -10%, rgba(109, 140, 255, .18), transparent 60%),
        radial-gradient(900px 600px at 92% 0%, rgba(160, 107, 255, .16), transparent 62%),
        radial-gradient(700px 500px at 50% 110%, rgba(61, 220, 151, .10), transparent 60%);
    background-attachment: fixed;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .1px;
    margin: 0 0 .4em;
    line-height: 1.15;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(109, 140, 255, .35); }

/* --- Скроллбары --------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--dim); background-clip: content-box; }

/* --- Раскладка ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap-row { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.spacer { flex: 1 1 auto; }
.center { display: flex; align-items: center; justify-content: center; }
.grid { display: grid; gap: 14px; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }

/* --- Панели ------------------------------------------------------------- */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.panel.pad { padding: 16px; }
.panel.tight { padding: 10px 12px; }
.panel-solid { background: var(--panel-solid); }

.divider { height: 1px; background: var(--line); margin: 12px 0; border: 0; }

/* --- Текст -------------------------------------------------------------- */
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 12.5px; }
.tiny { font-size: 11px; }
.big { font-size: 22px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.t-good { color: var(--good); }
.t-bad { color: var(--bad); }
.t-warn { color: var(--warn); }
.t-info { color: var(--info); }
.t-accent { color: var(--accent); }
.upper { text-transform: uppercase; letter-spacing: .09em; }
.gradient-text {
    background: linear-gradient(100deg, var(--accent), var(--accent-2) 60%, var(--info));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- Кнопки ------------------------------------------------------------- */
.btn {
    -webkit-appearance: none; appearance: none;
    font: inherit; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px;
    border-radius: var(--r);
    border: 1px solid var(--line-strong);
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
    transition: background .16s, border-color .16s, transform .08s, box-shadow .16s, color .16s;
    user-select: none;
    text-decoration: none;
    line-height: 1.2;
}
.btn:hover { background: rgba(255,255,255,.09); border-color: var(--line-strong); text-decoration: none; }
html[data-theme="light"] .btn:hover { background: rgba(10,20,60,.07); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn[disabled], .btn.is-disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }

.btn-primary { background: linear-gradient(180deg, var(--accent), #4f6ff0); border-color: transparent; color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); background: linear-gradient(180deg, var(--accent), #4f6ff0); }
.btn-good { background: linear-gradient(180deg, #46e6a5, #24b57c); border-color: transparent; color: #05261a; }
.btn-good:hover { filter: brightness(1.06); }
.btn-warn { background: linear-gradient(180deg, #ffd27a, #f0a92e); border-color: transparent; color: #33230a; }
.btn-warn:hover { filter: brightness(1.06); }
.btn-bad { background: linear-gradient(180deg, #ff7b89, #e2455c); border-color: transparent; color: #2c060c; }
.btn-bad:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--panel-2); color: var(--text); }
.btn-sm { padding: 6px 11px; font-size: 13px; border-radius: var(--r-sm); }
.btn-lg { padding: 13px 24px; font-size: 17px; border-radius: var(--r-lg); }
.btn-icon { padding: 8px; width: 38px; height: 38px; }
.btn-icon.btn-sm { width: 30px; height: 30px; padding: 5px; }
.btn-block { width: 100%; }
.btn.is-active { background: linear-gradient(180deg, var(--accent), #4f6ff0); border-color: transparent; color: var(--accent-ink); }

.btn-group { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: 3px; gap: 3px; }
.btn-group .btn { border: none; background: transparent; border-radius: calc(var(--r) - 4px); padding: 6px 12px; font-size: 13px; }
.btn-group .btn.is-active { background: var(--accent); color: var(--accent-ink); }

/* --- Поля --------------------------------------------------------------- */
.field {
    font: inherit;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 9px 12px;
    width: 100%;
    transition: border-color .16s, box-shadow .16s;
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
select.field {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%239aa6c8'%3E%3Cpath d='M1.6 5.2a.8.8 0 0 1 1.1 0L8 10.5l5.3-5.3a.8.8 0 1 1 1.1 1.1l-5.8 5.9a.8.8 0 0 1-1.1 0L1.6 6.3a.8.8 0 0 1 0-1.1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px;
}
label.lbl { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }

input[type=range].field { padding: 0; height: 26px; background: transparent; border: none; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--line-strong); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--line-strong); }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px;
    border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-2); cursor: pointer;
}
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-2); cursor: pointer; }

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch .track { width: 40px; height: 23px; border-radius: 99px; background: var(--line-strong); position: relative; transition: background .18s; flex: none; }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .18s; }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(17px); }

/* --- Чипы и бэйджи ------------------------------------------------------ */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 99px;
    background: var(--panel-2); border: 1px solid var(--line);
    font-size: 12px; font-weight: 600; color: var(--muted);
    cursor: pointer; user-select: none; transition: all .15s;
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip.is-active { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.chip.static { cursor: default; }

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700;
    background: rgba(109,140,255,.18); color: var(--accent); border: 1px solid rgba(109,140,255,.3);
}
.badge.good { background: rgba(61,220,151,.15); color: var(--good); border-color: rgba(61,220,151,.3); }
.badge.warn { background: rgba(255,199,90,.15); color: var(--warn); border-color: rgba(255,199,90,.3); }
.badge.bad  { background: rgba(255,107,122,.15); color: var(--bad);  border-color: rgba(255,107,122,.3); }
.badge.neutral { background: var(--panel-2); color: var(--muted); border-color: var(--line); }

/* --- Прогресс ----------------------------------------------------------- */
/* Индикатор прогресса. Имя .pbar, а не .bar, чтобы не конфликтовать
   с панелями инструментов, которые страницы называют .bar. */
.pbar { height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--line); }
.pbar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 99px; transition: width .25s ease; }
.pbar.good > i { background: linear-gradient(90deg, #35d68f, #7ce8b4); }
.pbar.warn > i { background: linear-gradient(90deg, #f0a92e, #ffd27a); }
.pbar.bad  > i { background: linear-gradient(90deg, #e2455c, #ff8f9c); }
.pbar.thin { height: 5px; }

/* --- Статы -------------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: 1px; }
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); font-weight: 700; }
.stat .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; }
.stat-row + .stat-row { border-top: 1px dashed var(--line); }

/* --- Модальные окна ----------------------------------------------------- */
.modal-back {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(5, 8, 20, .68);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 18px;
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal-back.show { opacity: 1; pointer-events: auto; }
.modal-card {
    background: var(--panel-solid);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    padding: 22px;
    width: min(560px, 100%);
    max-height: 88vh; overflow: auto;
    transform: translateY(12px) scale(.97);
    transition: transform .22s cubic-bezier(.2,.9,.3,1.2);
}
.modal-back.show .modal-card { transform: none; }
.modal-card.wide { width: min(880px, 100%); }
.modal-title { font-size: 24px; margin-bottom: 6px; }

/* --- Тосты -------------------------------------------------------------- */
#ag-toasts {
    position: fixed; z-index: 1000; right: 14px; bottom: 14px;
    display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
    pointer-events: none; max-width: min(360px, calc(100vw - 28px));
}
.ag-toast {
    pointer-events: auto;
    background: var(--panel-solid);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 10px 14px;
    font-size: 13.5px; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
    animation: agToastIn .28s cubic-bezier(.2,.9,.3,1.3);
    max-width: 100%;
}
.ag-toast.out { animation: agToastOut .25s forwards; }
.ag-toast .ico { font-size: 19px; line-height: 1; flex: none; }
.ag-toast .tx { min-width: 0; }
.ag-toast .tx b { display: block; }
.ag-toast .tx span { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.ag-toast.good { border-left-color: var(--good); }
.ag-toast.warn { border-left-color: var(--warn); }
.ag-toast.bad  { border-left-color: var(--bad); }
.ag-toast.ach  { border-left-color: var(--accent-2); background: linear-gradient(100deg, rgba(160,107,255,.20), var(--panel-solid) 55%); }
@keyframes agToastIn { from { opacity: 0; transform: translateX(28px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes agToastOut { to { opacity: 0; transform: translateX(28px) scale(.94); } }

/* --- Плавающая панель игры -----------------------------------------------
   По умолчанию свёрнута в одну кнопку, чтобы не перекрывать элементы игры.
   Угол задаётся атрибутом data-pos: tr | tl | br | bl.
   -------------------------------------------------------------------------- */
#ag-dock {
    position: fixed; z-index: 800;
    display: flex; gap: 4px; align-items: center;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 99px; padding: 3px; box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: .48; transition: opacity .18s;
    max-width: calc(100vw - 16px);
}
#ag-dock:hover, #ag-dock:focus-within, #ag-dock.open { opacity: 1; }

/* Для правых углов кнопка-переключатель остаётся с краю, а меню растёт влево. */
#ag-dock[data-pos="tr"] { top: 8px; right: 8px; flex-direction: row-reverse; }
#ag-dock[data-pos="br"] { bottom: 8px; right: 8px; flex-direction: row-reverse; }
#ag-dock[data-pos="tl"] { top: 8px; left: 8px; }
#ag-dock[data-pos="bl"] { bottom: 8px; left: 8px; }

#ag-dock .ag-items { display: none; align-items: center; gap: 3px; }
#ag-dock.open .ag-items { display: flex; }

#ag-dock .btn {
    width: 30px; height: 30px; padding: 0; flex: none;
    border: none; background: transparent; font-size: 14px;
    border-radius: 50%; line-height: 1;
}
#ag-dock .btn:hover { background: var(--panel-2); }
#ag-dock .ag-toggle { font-size: 16px; letter-spacing: 1px; }
#ag-dock.open .ag-toggle { background: var(--accent); color: var(--accent-ink); }

/* --- Таблицы ------------------------------------------------------------ */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th { text-align: left; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; padding: 6px 8px; font-weight: 700; }
table.tbl td { padding: 7px 8px; border-top: 1px solid var(--line); }
table.tbl tr.me td { background: rgba(109,140,255,.10); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Список достижений -------------------------------------------------- */
.ach-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ach-item {
    display: flex; gap: 10px; align-items: center;
    padding: 9px 11px; border-radius: var(--r); border: 1px solid var(--line);
    background: var(--panel-2); transition: all .18s;
}
.ach-item.locked { opacity: .45; filter: grayscale(1); }
.ach-item .ico { font-size: 22px; flex: none; }
.ach-item .nm { font-weight: 700; font-size: 13.5px; }
.ach-item .ds { font-size: 11.5px; color: var(--muted); }

/* --- Утилиты ------------------------------------------------------------ */
.canvas-crisp { image-rendering: pixelated; image-rendering: crisp-edges; }
.no-select { user-select: none; -webkit-user-select: none; }
.touch-none { touch-action: none; }
.shadow-text { text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.scroll-y { overflow-y: auto; overscroll-behavior: contain; }
.fade-in { animation: agFade .3s ease both; }
@keyframes agFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pop { animation: agPop .3s cubic-bezier(.2,.9,.3,1.5) both; }
@keyframes agPop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pulse { animation: agPulse 1.6s ease-in-out infinite; }
@keyframes agPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.spin { animation: agSpin 1s linear infinite; }
@keyframes agSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --- Игровая оболочка --------------------------------------------------- */
.game-shell { min-height: 100vh; display: flex; flex-direction: column; }
.game-head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 16px; border-bottom: 1px solid var(--line);
    background: var(--panel); backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 40;
}
.game-head h1 { font-size: 18px; margin: 0; }
.game-body { flex: 1 1 auto; display: flex; min-height: 0; }
.hud {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    padding: 8px 12px; border-radius: var(--r); background: var(--panel-2); border: 1px solid var(--line);
}
.hud .stat .v { font-size: 17px; }

.overlay {
    position: absolute; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    background: rgba(6, 10, 24, .78); backdrop-filter: blur(5px);
    border-radius: inherit; text-align: center; padding: 20px;
}
.overlay h2 { font-size: 30px; }

kbd {
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    padding: 2px 6px; border-radius: 5px;
    background: var(--panel-2); border: 1px solid var(--line-strong);
    border-bottom-width: 2px; color: var(--text); white-space: nowrap;
}

@media (max-width: 720px) {
    .wrap { padding: 0 12px; }
    .modal-card { padding: 18px; border-radius: var(--r-lg); }
    .overlay h2 { font-size: 24px; }
}