/* Altera: цвета и шрифты всех страниц. Подключается первым.
   Темы: emerald (по умолчанию), violet, amber. Режимы: dark (по умолчанию), light.
   Имена переменных общие для всех CSS сайта: --pink — акцент (текст, иконки, рамки),
   --grad — заливка акцентных кнопок (текст на ней белый), --card — карточки, --soft — плашки. */

:root{
  --f-d:'Roboto Flex','Segoe UI',Roboto,system-ui,sans-serif;
  --f-b:'Roboto Flex','Segoe UI',Roboto,system-ui,sans-serif;
  --f-m:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --r-lg:16px; --r-md:12px; --r-sm:10px;

  /* emerald · light */
  --bg:#F3F6F4; --bg-2:#EDF2EF; --bg-3:#E4ECE7; --card:#FFFFFF; --card-rgb:255,255,255; --white:#FFFFFF;
  --soft:#E7F0EB; --ink:#13201A; --ink-2:#3A4A42; --muted:#64756C; --line:#DAE4DE;
  --pink:#23805A; --pink-2:#4FAF84; --pink-3:#BFE1CF; --deep:#1D6B4A; --deep-2:#175A3E;
  --grad:linear-gradient(135deg,#3A9D70 0%,#28845A 100%);
  --pink-rgb:40,132,90; --deep-rgb:29,107,74; --shade-rgb:10,40,25; --ink-rgb:19,32,26; --pink2-rgb:79,175,132; --pale-rgb:215,238,225;
  --glow:#DCEFE4; --tint:#EEF6F1; --tint-2:#F2F8F4; --wash:#F7FAF8; --hover:#F1F6F3; --track:#D3E0D8;
  --mute-bg:#ECF1EE; --mute-fg:#75857C; --mute-dot:#B6C4BC; --pale:#D7EEE1; --pale-2:#A6D6BC;
  --ok:#1F9D63; --err:#D2483A;
  --ok-bg:#E3F5EC; --err-bg:#FBE9E6; --err-line:#F2C2BA; --warn-bg:#FFF4DC; --warn-fg:#9A6A00;
  --info-bg:#EAF2FB; --info-line:#C9DCF2; --info-fg:#2D5B8A;
  --shadow:0 30px 60px -45px rgba(var(--shade-rgb),.45);
  --edge:#C9D6CF;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%2323805A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* emerald · dark (основной вид сайта) */
:root[data-mode="dark"]{
  --bg:#151A18; --bg-2:#101412; --bg-3:#1A201E; --card:#1A201E; --card-rgb:26,32,30; --white:#1A201E;
  --soft:#222927; --ink:#F3F6F4; --ink-2:#BAC6C0; --muted:#8E9C95; --line:#2B3330;
  --pink:#5BBE8E; --pink-2:#7DC9A2; --pink-3:#2F4A3D; --deep:#3A9D70; --deep-2:#28845A;
  --grad:linear-gradient(135deg,#3A9D70 0%,#28845A 100%);
  --pink-rgb:60,160,115; --deep-rgb:40,132,90; --shade-rgb:0,0,0; --ink-rgb:0,0,0; --pink2-rgb:125,201,162; --pale-rgb:34,52,44;
  --glow:#1F3329; --tint:#18201C; --tint-2:#171E1B; --wash:#131816; --hover:#1E2522; --track:#2B3330;
  --mute-bg:#222927; --mute-fg:#8E9C95; --mute-dot:#4A5550; --pale:#22342C; --pale-2:#2E4A3D;
  --ok:#4FBF8A; --err:#E8836F;
  --ok-bg:rgba(79,191,138,.13); --err-bg:rgba(232,131,111,.13); --err-line:rgba(232,131,111,.38); --warn-bg:rgba(217,178,90,.13); --warn-fg:#D9B25A;
  --info-bg:rgba(110,160,255,.11); --info-line:rgba(110,160,255,.3); --info-fg:#9CC0FF;
  --shadow:0 30px 60px -40px rgba(0,0,0,.85);
  --edge:#424C47;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%237DC9A2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
  color-scheme:dark;
}

/* violet · light */
:root[data-theme="violet"]{
  --bg:#F5F4FA; --bg-2:#EFEDF8; --bg-3:#E7E4F5; --soft:#ECE8FB; --line:#E0DCF0;
  --ink:#17142A; --ink-2:#423D5C; --muted:#6F6A88;
  --pink:#5B3FD6; --pink-2:#8B72F0; --pink-3:#D4CAFB; --deep:#4A30BE; --deep-2:#3D27A0;
  --grad:linear-gradient(135deg,#7C5CF0 0%,#5B3FD6 100%);
  --pink-rgb:91,63,214; --deep-rgb:74,48,190; --shade-rgb:30,15,90; --ink-rgb:23,20,42; --pink2-rgb:139,114,240; --pale-rgb:230,224,255;
  --glow:#E6E0FF; --tint:#F2EFFF; --tint-2:#F5F2FF; --wash:#F9F8FF; --hover:#F4F2FC; --track:#DCD6F0;
  --mute-bg:#EFEDF7; --mute-fg:#827C9C; --mute-dot:#C2BCD9; --pale:#E3DCFF; --pale-2:#C2B4F7;
  --edge:#D3CDEA;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%235B3FD6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
}
/* violet · dark */
:root[data-mode="dark"][data-theme="violet"]{
  --bg:#141320; --bg-2:#0F0E19; --bg-3:#1B1A29; --card:#1B1A29; --card-rgb:27,26,41; --white:#1B1A29;
  --soft:#252337; --ink:#F4F3FA; --ink-2:#C3BFD6; --muted:#9590AB; --line:#2E2B42;
  --pink:#A58FFF; --pink-2:#BBA9FF; --pink-3:#3A3260; --deep:#7C5CF0; --deep-2:#5B3FD6;
  --grad:linear-gradient(135deg,#7C5CF0 0%,#5B3FD6 100%);
  --pink-rgb:124,92,240; --deep-rgb:91,63,214; --pink2-rgb:187,169,255; --pale-rgb:46,38,84;
  --glow:#2A2450; --tint:#1A1830; --tint-2:#18172B; --wash:#121120; --hover:#211F33; --track:#2E2B42;
  --mute-bg:#252337; --mute-fg:#9590AB; --mute-dot:#4D4866; --pale:#2C2552; --pale-2:#3D3373;
  --edge:#454062;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23BBA9FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
}

/* amber · light (корона затмения) */
:root[data-theme="amber"]{
  --bg:#F7F5F1; --bg-2:#F2EEE7; --bg-3:#EBE5DA; --soft:#F5ECDD; --line:#E6DDCE;
  --ink:#211B12; --ink-2:#4D4334; --muted:#7A6E5C;
  --pink:#9A5F0C; --pink-2:#C98A2A; --pink-3:#EED7B2; --deep:#86520A; --deep-2:#704407;
  --grad:linear-gradient(135deg,#C2801F 0%,#9A5F0C 100%);
  --pink-rgb:154,95,12; --deep-rgb:134,82,10; --shade-rgb:60,35,0; --ink-rgb:33,27,18; --pink2-rgb:201,138,42; --pale-rgb:245,228,200;
  --glow:#F6E6C8; --tint:#FBF3E6; --tint-2:#FCF6EC; --wash:#FDFAF4; --hover:#FAF5EC; --track:#E3D7C2;
  --mute-bg:#F1ECE3; --mute-fg:#8A7E6C; --mute-dot:#CDBFA8; --pale:#F3E2C4; --pale-2:#E3C287;
  --edge:#DCCFBA;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%239A5F0C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
}
/* amber · dark */
:root[data-mode="dark"][data-theme="amber"]{
  --bg:#171511; --bg-2:#110F0C; --bg-3:#1E1B16; --card:#1E1B16; --card-rgb:30,27,22; --white:#1E1B16;
  --soft:#28241E; --ink:#F7F3EC; --ink-2:#CFC6B8; --muted:#A09684; --line:#332E26;
  --pink:#E3AE57; --pink-2:#F0C27A; --pink-3:#4A3A20; --deep:#C2801F; --deep-2:#9A5F0C;
  --grad:linear-gradient(135deg,#C2801F 0%,#9A5F0C 100%);
  --pink-rgb:194,128,31; --deep-rgb:154,95,12; --pink2-rgb:240,194,122; --pale-rgb:64,48,22;
  --glow:#3A2E18; --tint:#1F1B14; --tint-2:#1C1913; --wash:#14120E; --hover:#24201A; --track:#332E26;
  --mute-bg:#28241E; --mute-fg:#A09684; --mute-dot:#5A5244; --pale:#3A2E18; --pale-2:#5A4522;
  --edge:#4C4538;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23F0C27A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
}

/* Иконки панели (partials/panel-icons): цветная плитка + двухтоновый знак, оттенок задаёт data-g. Общие для главной, входа и кабинета */
.gi{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:hsl(var(--h,150) var(--s,58%) 70%);
  background:linear-gradient(150deg,hsl(var(--h,150) var(--s,58%) 60% / .26),hsl(var(--h,150) var(--s,58%) 50% / .08));box-shadow:inset 0 0 0 1px hsl(var(--h,150) var(--s,58%) 66% / .2)}
.gi .ic{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html[data-mode="light"] .gi{color:hsl(var(--h,150) var(--s,58%) 34%);
  background:linear-gradient(150deg,hsl(var(--h,150) var(--s,58%) 55% / .22),hsl(var(--h,150) var(--s,58%) 55% / .07));box-shadow:inset 0 0 0 1px hsl(var(--h,150) var(--s,58%) 40% / .16)}
[data-g="sessions"]{--h:168}[data-g="gather"]{--h:138}[data-g="alliance"]{--h:218}[data-g="barbarians"]{--h:4}[data-g="smithy"]{--h:24}
[data-g="training"]{--h:78}[data-g="misc"]{--h:220;--s:14%}[data-g="vip"]{--h:44;--s:80%}[data-g="scouting"]{--h:194}[data-g="research"]{--h:262}
[data-g="events"]{--h:318}[data-g="campaign"]{--h:346}[data-g="forts"]{--h:30;--s:40%}
[data-g="food"]{--h:40;--s:80%}[data-g="wood"]{--h:24;--s:46%}[data-g="stone"]{--h:215;--s:12%}[data-g="gold"]{--h:48;--s:88%}[data-g="gem"]{--h:350;--s:78%}

/* Самоцвет в знаке Altera берёт цвета темы */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.lg-b{stop-color:var(--pink-2)}
.lg-c{stop-color:var(--deep)}

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);transition:background-color 600000s 0s,color 600000s 0s}
input:autofill{-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
::selection{background:var(--deep-2);color:#fff}

/* Кнопка режима (луна / солнце) */
.mode-btn{width:40px;height:40px;flex:none;padding:0;border-radius:var(--r-md);display:grid;place-items:center;border:0;background:var(--soft);color:var(--ink-2);cursor:pointer;transition:color .15s,background .15s}
.mode-btn:hover{color:var(--pink);background:var(--hover)}
.mode-btn .ic{width:18px;height:18px;fill:none;stroke:currentColor}
.mode-btn .m-sun{display:none}
[data-mode="dark"] .mode-btn .m-sun{display:block}
[data-mode="dark"] .mode-btn .m-moon{display:none}

/* Язык и оформление */
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 6px;border-radius:var(--r-md);border:0;background:var(--soft);font:600 13px var(--f-b);color:var(--ink-2);cursor:pointer;transition:color .15s,background .15s}
.lang-btn:hover{color:var(--ink);background:var(--hover)}
.lang-btn img{width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.lang-btn .ic{width:15px;height:15px;color:var(--muted);transition:transform .2s}
.lang-btn[aria-expanded="true"] .ic{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:230px;padding:6px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(var(--shade-rgb),.6);display:grid;gap:2px}
.lang-menu[hidden]{display:none}
.lang-menu button,.langs button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:var(--r-sm);background:none;font:500 14.5px var(--f-b);text-align:start;color:var(--ink-2);cursor:pointer}
.lang-menu button:hover,.langs button:hover{background:var(--soft);color:var(--ink)}
.lang-menu button.on,.langs button.on{background:var(--soft);color:var(--pink)}
.lang-menu img,.langs img{width:24px;height:24px;border-radius:50%;flex:none;box-shadow:0 0 0 1px var(--line)}
.lang-themes{display:flex;align-items:center;gap:8px;padding:10px 10px 4px;margin-top:4px;border-top:1px solid var(--line)}
.lang-themes span{flex:1;font:500 12px var(--f-b);color:var(--muted)}
.sw{width:28px;height:28px;padding:0;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 1.5px var(--line);cursor:pointer;transition:box-shadow .15s,transform .15s}
.sw:hover{transform:scale(1.08)}
.sw.on{box-shadow:0 0 0 2px var(--pink)}
.sw-emerald{background:linear-gradient(135deg,#7DC9A2,#28845A)}
.sw-violet{background:linear-gradient(135deg,#BBA9FF,#5B3FD6)}
.sw-amber{background:linear-gradient(135deg,#F0C27A,#9A5F0C)}
[dir="rtl"] .lang-menu{right:auto;left:0}
[lang="ar"] *,[lang="ar"] ::placeholder{letter-spacing:0!important}