.катан { background:#101715; color:#f5f3e9; --акцент:#d2f76b; --дерево-свет:#bd9561; --дерево:#79502e; --дерево-тень:#382518; --сукно:#204539; --сукно-свет:#345e42; --сукно-тень:#11291f; }
.катан *, .катан *::before,.катан *::after { box-sizing:border-box; }
.катан .скрыт,.катан [hidden] { display:none!important; }
.катан .экран { display:none; min-height:100dvh; padding:calc(12px + var(--отступ-сверху,0px)) max(16px,calc((100% - 720px)/2)) calc(14px + var(--отступ-снизу,0px)); gap:16px; background:radial-gradient(ellipse at top,#30443a66,transparent 55%),#101715; }
.катан .экран--виден { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
.катан .экран { padding-left:max(16px,calc((100% - 720px)/2),var(--отступ-слева,0px)); padding-right:max(16px,calc((100% - 720px)/2),var(--отступ-справа,0px)); }
.катан h1,.катан h2,.катан p,.катан figure { margin:0; }
.катан h1 { font-size:clamp(32px,7vw,46px); letter-spacing:-.04em; }
.катан h2:not(#экран-друзей *):not(#экран-добавить-друга *) { font-size:22px; }
.катан button { touch-action:manipulation; cursor:pointer; }
.катан button:not(#экран-друзей *):not(#экран-добавить-друга *):not(.рассадка__место):disabled { opacity:.45; cursor:default; }
.катан .кнопка:not(#экран-друзей *):not(#экран-добавить-друга *):not(.кат-переключатель *) { width:auto; min-width:0; max-width:none; min-height:44px; padding:12px 16px; background:#202c26; border:1px solid #52634d; border-radius:14px; color:#f5f3e9; box-shadow:none; font:600 15px/1.25 system-ui; }
.катан .кнопка--главная { background:#d2f76b; color:#172014; border-color:#d2f76b; }
.катан .карточка-профиля img,.катан .карточка-входа:not(.карточка-входа--играть-онлайн) img,.кат-рассадка img { filter:invert(1); }
.кат-верх { min-height:32px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.кат-верх button,.кат-ссылка { border:0; background:transparent; color:inherit; font:inherit; }
.кат-верх button { min-width:36px; min-height:32px; font-size:28px; }
.кат-верх span { color:#acb7b0; font-size:13px; }
.кат-тихо,.кат-заголовок p { color:#a2b1a8; line-height:1.5; font-size:14px; }
.кат-заголовок small { font-size:10px; letter-spacing:.2em; color:#b8cdac; }
.кат-заголовок h1 { font-size:clamp(40px,9vw,64px); }
.катан .карточка-профиля { display:flex; width:100%; gap:14px; align-items:center; background:#1c2423; border:1px solid #ffffff18; padding:12px 16px; border-radius:18px; color:#fff; }
.катан .карточка-профиля img { width:40px; height:40px; }
.катан .карточка-профиля strong { flex:1; text-align:left; font-size:18px; }
.катан .карточка-профиля span { font-size:28px; color:#93a19b; }
.кат-обложка { position:relative; overflow:hidden; border-radius:23px; aspect-ratio:1.7; box-shadow:0 15px 35px #0008; }
.кат-обложка img { width:100%; height:100%; display:block; object-fit:cover; }
.кат-обложка::after { content:''; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,#071513db); }
.кат-обложка figcaption { position:absolute; bottom:7%; left:7%; z-index:1; font-family:Georgia,serif; font-size:clamp(21px,4.6vw,34px); line-height:1.08; }
.кат-входы { display:grid; gap:10px; }
.катан .карточка-входа { display:flex; width:100%; gap:14px; align-items:center; border-radius:18px; border:1px solid #ffffff18; background:#1e2726; color:#f5f3e9; padding:16px; text-align:left; }
.катан .карточка-входа--играть-онлайн { background:#d2f76b; color:#14200c; border:0; }
.катан .карточка-входа img { width:36px; height:36px; }
.катан .карточка-входа span { flex:1; display:grid; gap:4px; }
.катан .карточка-входа strong { font-size:22px; }
.катан .карточка-входа small { font-size:13px; opacity:.7; }
.катан .карточка-входа b { font-size:30px; font-weight:400; }
.кат-ссылка { font-size:13px; padding:8px; color:#c4d5b0; }
.катан .нижние-вкладки { position:relative; margin-top:auto; flex-shrink:0; }
.катан #кат-начать,.катан #кнопка-создать-игру,.катан #кат-продолжить { width:100%; }
.катан #кат-диалог-ошибка { color:#ffba9f; }
.катан .экран:not(#экран-игры) { overflow-y:auto; max-height:100dvh; }
.кат-панель { padding:16px; border:1px solid #ffffff20; border-radius:18px; background:#1b2622; display:grid; gap:12px; }
.кат-переключатель { display:flex; gap:8px; }
.кат-переключатель button { flex:1; padding:12px 8px; border-radius:12px; border:1px solid #657960; background:#18211c; color:#f3f4ec; font:600 15px system-ui; }
.кат-переключатель button[aria-checked=true] { background:#d2f76b; border-color:#d2f76b; color:#172314; }
.кат-рассадка { width:min(calc(100% - 76px),520px); margin:32px auto 58px; min-height:210px; background:url('img/домино/стол-фото.jpg') center/100% 100% no-repeat; background-blend-mode:normal; border-radius:45%; border:8px solid #8f6740; }
.кат-рассадка .рассадка__место { min-width:68px; min-height:70px; }
.кат-рассадка img { width:38px; height:38px; }
.кат-рассадка .рассадка__место:disabled { opacity:1; }
.кат-рассадка > b { position:absolute; top:45%; left:50%; transform:translateX(-50%); letter-spacing:.2em; color:#d8e5baaa; }
.катан #экран-игры { padding-inline:max(8px,calc((100% - 1280px)/2)); height:100dvh; min-height:0; gap:8px; }
.катан #экран-игры { padding-left:max(8px,calc((100% - 1280px)/2),var(--отступ-слева,0px)); padding-right:max(8px,calc((100% - 1280px)/2),var(--отступ-справа,0px)); }
.катан #экран-игры.экран--виден { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:32px auto minmax(190px,1fr) auto; }
#экран-игры .кат-верх h1 { font-size:25px; }
.кат-игроки { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:6px; }
.кат-игрок { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px; padding:8px; border:1px solid #ffffff24; background:#1a2524; border-radius:13px; border-top:3px solid var(--цвет); }
.кат-игрок.ходит { outline:2px solid #d2f76b; outline-offset:-1px; }
.кат-игрок b { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.кат-игрок strong { font-size:22px; grid-column:2; grid-row:1; }
.кат-игрок small { font-size:10px; color:#acbdb4; grid-column:1/-1; }
.цвет-0 { --цвет:#e3a148; }.цвет-1 { --цвет:#58a9e3; }.цвет-2 { --цвет:#e57572; }.цвет-3 { --цвет:#e9e5d7; }
.кат-карта { min-height:0; position:relative; display:flex; flex-direction:column; border:1px solid #51837d55; border-radius:22px; overflow:hidden; background:linear-gradient(#073746a6,#073746a6),url('img/катан/ресурсы.jpg') 100% 100%/300% 200%; box-shadow:inset 0 0 50px #001b29a8,0 12px 25px #0006; }
.кат-карта-верх,.кат-карта-низ { display:flex; align-items:center; justify-content:space-between; padding:3px 10px; gap:8px; min-height:30px; background:#062b35c9; z-index:1; flex-shrink:0; }
.кат-карта-низ { font-size:10px; color:#bbd4d4; }
#кат-окно-карты { flex:1; min-height:0; overflow:auto; touch-action:pan-x pan-y; }
#кат-поле { display:block; width:100%; height:100%; min-height:0; }
.кат-карта.увеличена { position:fixed; z-index:140; inset:calc(var(--отступ-сверху,0px) + 8px) 8px calc(var(--отступ-снизу,0px) + 8px); }
.кат-карта.увеличена { left:max(8px,var(--отступ-слева,0px)); right:max(8px,var(--отступ-справа,0px)); }
.кат-карта.увеличена #кат-поле { min-width:700px; min-height:650px; }
.кат-земля { stroke:#a99b70; stroke-width:2; stroke-linejoin:round; }
.кат-номер-фон { fill:#fff0cf; stroke:#725c39; stroke-width:2; filter:drop-shadow(0 2px 2px #0008); }
.кат-номер { font:800 28px Georgia,serif; fill:#252722; text-anchor:middle; }.кат-красный { fill:#a92824; }
.кат-вероятность { font:14px system-ui; fill:#65523a; text-anchor:middle; letter-spacing:-1px; }
.кат-разбойник { fill:#222d33; stroke:#e5dfc8; stroke-width:2; filter:url(#тень-фигуры); }
.кат-дорога { stroke:var(--цвет); stroke-width:14; stroke-linecap:round; filter:url(#тень-фигуры); }
.кат-дорога.доступно { stroke:#d2f76b; stroke-width:20; stroke-dasharray:4 6; }
.кат-дом { fill:var(--цвет); stroke:#382e25; stroke-width:2; filter:url(#тень-фигуры); }
.кат-крыша { fill:#0005; stroke:#342b25; stroke-width:2; }
.кат-точка { fill:#d2f76b; stroke:#14261a; stroke-width:4; }
.кат-постройка.доступно .кат-дом { stroke:#d2f76b; stroke-width:5; }
#кат-поле [role=button] { cursor:pointer; outline:none; }
#кат-поле [role=button]:hover,#кат-поле [role=button]:focus { filter:brightness(1.35) drop-shadow(0 0 5px #d2f76b); }
.кат-гекс .кат-земля.доступно { stroke:#d2f76b; stroke-width:5; }
.кат-порт line { stroke:#beaa7b; stroke-width:5; }.кат-порт rect { fill:#173b3e; stroke:#c0ae85; stroke-width:2; }.кат-порт text { font:700 19px system-ui; fill:#fff5d9; text-anchor:middle; }
.кат-управление { min-width:0; display:grid; align-content:start; gap:7px; }
.кат-управление > * { min-width:0; max-width:100%; }
#кат-предложение { padding:2px; gap:0; }
.кат-карта.загрузка::after { content:'Готовим остров…'; position:absolute; inset:30px 0; display:grid; place-items:center; color:#e1ebd8; background:#0a3944; z-index:2; }
.кат-ход { background:#202e28; border:1px solid #ffffff18; border-radius:14px; padding:8px 12px; text-align:center; display:grid; gap:3px; }
.кат-ход strong { font-size:18px; }.кат-ход small { font-size:11px; color:#b0c2b4; }
.кат-ход.ваш { border-color:#b5d857; background:#283927; }.кат-ход.ваш strong { color:#d2f76b; }
.кат-ход.ожидание strong::after { content:''; display:inline-block; width:12px; height:12px; border:2px solid #c0e38d40; border-top-color:#d2f76b; border-radius:50%; margin-left:8px; animation:кат-ждать 1s linear infinite; }
@keyframes кат-ждать { to { transform:rotate(360deg); } }
.кат-ресурсы { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
.кат-ресурс { position:relative; min-height:62px; overflow:hidden; border-radius:10px; background:#203b2f; border:1px solid #8b97823d; }
.кат-ресурс .кат-рисунок { position:absolute; inset:0; opacity:.8; }
.кат-рисунок { background-image:url('img/катан/ресурсы.jpg'); background-size:300% 200%; background-position:calc(var(--столбец)*50%) calc(var(--ряд)*100%); }
.кат-ресурс::after { content:''; position:absolute; inset:25% 0 0; background:linear-gradient(transparent,#09100fe8); }
.кат-ресурс strong { position:absolute; top:1px; right:5px; font-size:27px; text-shadow:0 1px 5px #000; z-index:1; }
.кат-ресурс small { position:absolute; bottom:4px; left:5px; right:2px; font-size:10px; z-index:1; }
.кат-стройки { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.кат-стройки button { border:1px solid #52624e; border-radius:12px; background:#1d2924; color:#f4f4e8; padding:7px 3px; display:grid; justify-items:center; gap:4px; font:600 12px system-ui; }
.кат-стройки button[aria-pressed=true] { outline:2px solid #d2f76b; background:#35472a; }
.кат-стройки button.кат-нехватка:enabled { color:#a9b8ac; border-color:#ffffff20; }
.кат-цена { display:flex; gap:2px; align-items:center; }
.кат-мини { width:14px; height:14px; border-radius:3px; border:1px solid #ffffff28; display:inline-block; }
@media(min-width:900px) { .кат-мини { width:19px; height:19px; } }
.кат-действия { display:flex; gap:5px; }
.катан .кат-действия .кнопка { min-height:42px; padding:8px 6px; font-size:12px; border-radius:12px; }
.кат-действия > :first-child { flex:1; }.кат-действия > :not(:first-child) { flex:0 1 auto; }
#кат-ошибка:empty { display:none; }#кат-ошибка { color:#ffba9f; font-size:12px; }
#кат-кубики { display:flex; align-items:center; gap:5px; font-size:12px; }
.кат-кубик { width:25px; height:25px; background:#f8edd3; color:#222; border-radius:5px; display:grid; place-items:center; font-size:20px; box-shadow:0 2px 4px #0007; }
.катан dialog { width:min(640px,calc(100vw - 24px)); max-width:none; max-height:calc(100dvh - var(--отступ-сверху,0px) - var(--отступ-снизу,0px) - 24px); top:var(--отступ-сверху,0px); bottom:var(--отступ-снизу,0px); overflow:auto; padding:20px; border:1px solid #ffffff25; border-radius:22px; background:#1a2421; color:#f5f3e9; }
.катан dialog::backdrop { background:#030a0be0; backdrop-filter:blur(5px); }
.катан dialog header { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:18px; }
.катан dialog header button { background:none; border:0; color:inherit; font-size:30px; min-width:42px; min-height:42px; }
#кат-диалог-тело { display:grid; gap:14px; }#кат-диалог-тело p { color:#b4c4ba; line-height:1.55; font-size:14px; }
.катан dialog .кнопка { width:100%; }
.кат-строка-выбора { display:grid; grid-template-columns:40px minmax(0,1fr) 90px; gap:10px; align-items:center; }
.кат-строка-выбора .кат-рисунок { height:40px; border-radius:8px; }
.кат-строка-выбора input,.катан select { font:inherit; background:#111d18; color:#fff; padding:9px; border:1px solid #667e61; border-radius:9px; width:100%; }
.кат-карта-развития { display:grid; grid-template-columns:90px 1fr; gap:14px; padding:10px; border:1px solid #65765c; background:#202d26; border-radius:16px; text-align:left; color:#f5f3e9; }
.кат-карта-развития .кат-рисунок { background-image:url('img/катан/развитие-v2.webp'); width:90px; height:90px; border-radius:10px; }
.кат-карта-развития div { display:grid; gap:5px; align-content:center; }.кат-карта-развития small { color:#b2c5b7; }
.кат-журнал { border-bottom:1px solid #ffffff1a; padding-bottom:10px; font-size:13px; line-height:1.6; }
.кат-итог { display:grid; grid-template-columns:1fr auto; padding:14px; border-radius:13px; background:#27372b; }.кат-итог strong { font-size:32px; color:#d2f76b; }
.кат-итог small { grid-column:1/-1; color:#b2c5b7; margin-top:5px; }
@media(min-width:900px) { .катан #экран-игры.экран--виден { grid-template-columns:minmax(0,1fr) 350px; grid-template-rows:36px 68px minmax(0,1fr); gap:12px; }.катан #экран-игры .кат-верх,.катан #экран-игры .кат-игроки { grid-column:1/-1; }.кат-карта { grid-column:1; grid-row:3; }.кат-управление { grid-column:2; grid-row:3; gap:14px; overflow:auto; }.кат-ресурс { min-height:95px; }.кат-стройки { grid-template-columns:1fr 1fr; }.кат-стройки button { min-height:65px; font-size:14px; }.кат-ход { padding:16px 12px; }.кат-ход strong { font-size:22px; }.кат-ход small { font-size:13px; } }
@media(max-height:700px) and (max-width:899px) { .катан #экран-игры { gap:4px; padding-top:calc(5px + var(--отступ-сверху,0px)); padding-bottom:calc(5px + var(--отступ-снизу,0px)); }.кат-игрок { padding:5px; }.кат-игрок strong { font-size:18px; }.кат-ресурс { min-height:45px; }.кат-ресурс strong { font-size:23px; }.кат-стройки button { padding:4px; font-size:10px; }.кат-ход { padding:5px; }.кат-ход strong { font-size:16px; }.кат-управление { gap:4px; }.кат-карта-верх,.кат-карта-низ { min-height:25px; padding:0 6px; }.кат-карта-низ span { max-width:55%; }.кат-карта .кат-ссылка { padding:4px; font-size:11px; } }
@media(max-height:520px) and (min-width:600px) { .катан #экран-игры.экран--виден { grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:28px auto minmax(0,1fr); }.катан #экран-игры .кат-верх { grid-column:1/-1; }.кат-игроки { grid-column:2; grid-row:2; }.кат-карта { grid-column:1; grid-row:2/4; }.кат-управление { grid-column:2; grid-row:3; overflow:auto; }.кат-игрок { grid-template-columns:1fr; }.кат-игрок strong { grid-column:1; grid-row:auto; }.кат-игрок small { display:none; } }
@media(prefers-reduced-motion:reduce) { .катан * { animation:none!important; transition:none!important; } }
@media(max-height:700px) { .катан #экран-лобби { gap:10px; }.кат-заголовок h1 { font-size:40px; }.кат-обложка { max-height:150px; flex-shrink:0; }.катан .карточка-профиля { padding:8px 12px; }.катан .карточка-входа { padding:12px; }.катан .карточка-входа strong { font-size:19px; } }

/* Остров: единая палитра, отдельная игровая сцена и читаемые предметы. */
.катан { background:#0b171c; color:#f2eedf; --акцент:#d2f76b; }
.катан .экран { background:radial-gradient(ellipse at 45% 0,#28434766,transparent 65%),#0b171c; }
.катан #экран-лобби { gap:12px; height:100dvh; min-height:0; }
.катан #экран-лобби > :not(.кат-обложка) { flex-shrink:0; }
.катан #экран-лобби .кат-обложка { flex:1 1 280px; min-height:180px; max-height:340px; }
.катан #экран-лобби .нижние-вкладки { position:sticky; bottom:0; z-index:3; padding-block:6px; background:#0b171cf2; }
.кат-заголовок small { color:#c5b68e; letter-spacing:.22em; font-size:10px; }
.кат-заголовок h1 { font-family:Georgia,serif; font-weight:600; font-size:clamp(44px,8vw,70px); letter-spacing:-.05em; }
.кат-подзаголовок { display:block; font:400 15px/1.6 system-ui; color:#bbc9c4; letter-spacing:0; margin-top:4px; }
.кат-обложка { aspect-ratio:1.6; border-radius:22px; border:1px solid #a8c3b429; box-shadow:0 20px 70px #0005; }
.кат-обложка img { object-position:50% 45%; }
.кат-обложка::after { inset:35% 0 0; background:linear-gradient(transparent,#071b24f5); }
.кат-обложка figcaption { left:6%; bottom:16%; font-size:clamp(25px,4.5vw,40px); text-shadow:0 2px 12px #0006; }
.кат-обложка figcaption span { display:block; font:500 9px/2 system-ui; letter-spacing:.2em; color:#efe3bc; }
.кат-факты { position:absolute; bottom:5%; left:6%; right:6%; display:flex; gap:15px; z-index:2; font-size:11px; color:#c7d9d5; }
.кат-факты span+span::before { content:'·'; margin-right:15px; color:#d6ba7c; }
.катан .карточка-профиля,.катан .карточка-входа:not(.карточка-входа--играть-онлайн) { background:#17282b; border-color:#78999428; }
.катан .карточка-входа--играть-онлайн { background:linear-gradient(115deg,#dafa8c,#c5ee67); box-shadow:0 5px 22px #d2f76b12; }
.катан .кнопка:not(#экран-друзей *):not(#экран-добавить-друга *):not(.кат-переключатель *) { background:#203438; border-color:#9db9af36; border-radius:12px; }
.катан .кнопка--главная { background:linear-gradient(120deg,#def994,#c7ed70); color:#19301c; border-color:#d3f58b; box-shadow:0 4px 18px #bde86c12; }
.катан button:focus-visible { outline:2px solid #e4f9b4; outline-offset:3px; }
.катан #экран-игры { padding-left:max(12px,calc((100% - 1560px)/2),var(--отступ-слева,0px)); padding-right:max(12px,calc((100% - 1560px)/2),var(--отступ-справа,0px)); gap:10px; }
.катан #экран-игры .кат-верх { justify-content:flex-start; gap:12px; }
.катан #экран-игры .кат-верх h1 { font:600 26px Georgia,serif; letter-spacing:-.05em; }
.катан #экран-игры .кат-верх [data-menu] { margin-left:auto; }
.катан #экран-игры .кат-верх button { color:#b9c9c5; }
.кат-игроки { gap:8px; }
.кат-игрок { grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:2px 8px; border:1px solid #78999430; border-left:3px solid var(--цвет); border-radius:14px; padding:10px 12px; background:#14292c; }
.кат-игрок.ходит { outline:0; border-color:var(--цвет); background:linear-gradient(110deg,#354637,#14292c); box-shadow:inset 0 0 0 1px #ffffff0a,0 0 14px #d2f76b0a; }
.кат-аватар { grid-row:1/3; width:32px; height:36px; display:grid; place-items:center; border:1px solid var(--цвет); border-radius:11px 11px 14px 14px; background:#ffffff08; color:var(--цвет); font:700 18px Georgia,serif; }
.кат-игрок b { grid-column:2; font-size:14px; }
.кат-игрок strong { grid-column:3; grid-row:1/3; font-size:28px; font-weight:650; color:var(--цвет); }
.кат-игрок small { grid-column:2; font-size:11px; color:#9bb3b3; white-space:nowrap; }
.кат-игрок small { overflow:hidden; text-overflow:ellipsis; }
.кат-игрок { text-align:left; color:inherit; font-family:inherit; }
.кат-карта { border-radius:24px; border:1px solid #568f9540; background:radial-gradient(ellipse at 50% 45%,#22616b,#16434f 53%,#102e3b 100%); box-shadow:inset 0 1px 0 #ffffff0c,0 20px 60px #0003; }
.кат-карта::before { content:''; position:absolute; pointer-events:none; inset:0; opacity:.12; background-image:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 45px,#85c3b877 46px,transparent 47px 79px); }
.кат-карта-верх,.кат-карта-низ { background:transparent; padding:7px 16px; min-height:40px; }
.кат-карта-верх { align-items:center; }
.кат-карта-верх .кат-ссылка { background:#0926319c; border:1px solid #adc7bc29; border-radius:10px; padding:7px 10px; font-size:12px; }
.кат-карта-низ { font-size:11px; border-top:1px solid #b2d0c815; color:#b1c8c9; }
.кат-карта-низ .кат-ссылка { font-size:12px; white-space:nowrap; color:#e3d5af; }
#кат-окно-карты { position:relative; }
#кат-поле { filter:drop-shadow(0 16px 15px #00131e55); }
.кат-земля { stroke:#ddcba47a; stroke-width:1.5; }
.кат-номер-фон { fill:#fff2d9; stroke:#f8e6b3; stroke-width:2; filter:drop-shadow(0 3px 3px #14271699); }
.кат-номер { font:700 30px Georgia,serif; fill:#303730; }
.кат-красный { fill:#ba4032; }
.кат-вероятность { font-size:14px; fill:#ac8f60; }
.кат-производство { stroke:#f9edac; stroke-width:6; filter:drop-shadow(0 0 8px #f8df74); pointer-events:none; }
.кат-разбойник { fill:#273644; stroke:#e1cfb0; stroke-width:2; }
.кат-порт line { stroke:#d2bd89; stroke-width:4; opacity:.65; stroke-dasharray:3 5; }
.кат-порт rect { fill:#122e37; stroke:#9db7a8; stroke-width:1.5; }
.кат-порт text { font:650 23px system-ui; fill:#f9edca; }
.кат-дорога { stroke-width:13; filter:none; }
.кат-дорога-основание { stroke:#26382c; stroke-width:18; stroke-linecap:round; }
.кат-дорога-блик { stroke:#ffffff55; stroke-width:3; stroke-linecap:round; pointer-events:none; }
.кат-дорога.доступно { stroke:#e0f3ac; stroke-width:16; stroke-dasharray:5 7; }
.кат-дом { fill:#e9dbb1; stroke:#66573f; stroke-width:1.5; filter:none; }
.кат-крыша { fill:var(--цвет); stroke:#574937; stroke-width:2; }
.кат-основание { fill:var(--цвет); stroke:#fff2ce; stroke-width:2; }
.кат-постройка { filter:drop-shadow(0 5px 3px #001a24aa); }
.кат-точка { fill:#e4f8b7; stroke:#f7ffe3; stroke-width:3; filter:drop-shadow(0 0 5px #092d20); }
.кат-управление { padding:16px; background:linear-gradient(155deg,#1c3032,#11262c); border:1px solid #93b1a526; border-radius:22px; gap:12px; }
.кат-ход { background:#0e232b; border:1px solid #acc3b328; text-align:left; padding:14px; border-radius:14px; }
.кат-ход strong { font-size:22px; font-weight:650; letter-spacing:-.02em; }
.кат-ход small { font-size:12px; line-height:1.4; color:#b1c6c3; }
.кат-ход.ваш { background:linear-gradient(110deg,#30452e,#183334); border-color:#b6db6c88; }
.кат-событие { font-size:12px; line-height:1.45; color:#b8c7bc; border-left:2px solid #c5ac73; padding-left:10px; max-height:53px; overflow:auto; }
.кат-раздел { display:flex; justify-content:space-between; align-items:center; font-size:9px; letter-spacing:.1em; color:#cfbb8c; }
.кат-раздел span+span { font-size:10px; letter-spacing:0; color:#93aaa8; }
.кат-ресурсы { gap:5px; }
.кат-ресурс { min-height:106px; border-radius:12px; background:#0f292f; border:1px solid #b2c1a844; box-shadow:0 5px 9px #0002; }
.кат-ресурс { color:#f5f0df; padding:0; font-family:inherit; }
.кат-ресурс-крупно { width:110px; height:110px; border-radius:20px; justify-self:center; }
.кат-счёт-строка { display:flex; justify-content:space-between; gap:20px; font-size:14px; padding-bottom:9px; border-bottom:1px solid #b3c8bc26; }
.кат-рисунок { background-image:url('img/катан/ресурсы-v2.webp'); }
.кат-ресурс .кат-рисунок { inset:12px -4px 18px; opacity:1; }
.кат-ресурс strong { font:650 26px/1 system-ui; top:7px; right:7px; background:#0b2122aa; border-radius:7px; padding:0 3px; }
.кат-ресурс small { font-size:10px; left:0; right:0; text-align:center; bottom:7px; color:#e5e6d3; }
.кат-ресурс::after { inset:65% 0 0; background:linear-gradient(transparent,#0a202b); }
.кат-стройки { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.кат-стройки button { min-height:108px; position:relative; padding:8px 6px; border-radius:14px; background:#10262d; border-color:#6e969449; font-size:13px; font-weight:550; gap:4px; }
.кат-стройки button:disabled { opacity:.55; }
.кат-строение { display:block; width:56px; height:48px; border-radius:8px; background-image:url('img/катан/постройки-v2.webp'); background-size:400% 200%; background-position:0 0; mask-image:radial-gradient(ellipse,#000 45%,transparent 75%); }
[data-build=city] .кат-строение { background-position:0 100%; }
[data-build=development] .кат-строение { background-image:url('img/катан/развитие-v2.webp'); background-size:300% 200%; background-position:0 0; }
[data-build=road] .кат-строение { background:none; mask-image:none; position:relative; }
[data-build=road] .кат-строение::before { content:''; position:absolute; inset:20px 2px 15px; border:1px solid #ffd483; border-radius:3px; transform:rotate(-30deg); background:linear-gradient(#efbc68,#9b6936); box-shadow:0 5px 0 #553f28,0 8px 6px #0005; }
.кат-мини { width:17px; height:17px; border-color:#b6c6a944; border-radius:4px; }
.кат-цена { gap:3px; }
.кат-действия { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.кат-действия > :first-child { grid-column:1/-1; }
.катан .кат-действия .кнопка { min-height:44px; font-size:13px; }
.катан .кат-действия .кнопка--главная { font-size:15px; min-height:48px; }
.кат-кубик { width:32px; height:32px; border-radius:8px; padding:6px; gap:2px; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); box-shadow:0 3px 0 #a6977e,0 5px 8px #0003; }
.кат-кубик i { width:100%; height:100%; border-radius:50%; background:#29352f; box-shadow:inset 0 1px 1px #0006; }
#кат-кубики { color:#d6e4de; gap:8px; }
.катан dialog { background:linear-gradient(140deg,#23383a,#102329); border-color:#a9c3b738; box-shadow:0 30px 100px #0008; }
.катан dialog::backdrop { background:#061016cc; backdrop-filter:blur(8px); }
.кат-итог { background:#1c3437; border:1px solid #9db8a725; }
.кат-карта-развития { background:#183137; border-color:#9bb7a738; }
.кат-форма-обмена { display:grid; gap:12px; }
.кат-обмен-строка { display:grid; grid-template-columns:minmax(0,1fr) 66px 66px; gap:10px; align-items:center; }
.кат-обмен-ресурс { display:flex; align-items:center; gap:8px; font-size:13px; }
.кат-обмен-ресурс .кат-рисунок { width:32px; height:32px; border-radius:8px; flex-shrink:0; }
.кат-обмен-шапка { font-size:11px; color:#b6c8c1; }
.кат-обмен-строка input { width:100%; min-height:42px; text-align:center; border-radius:10px; border:1px solid #97b0a744; background:#0b242c; color:#f5f0df; font:600 17px system-ui; }
.кат-переключатель button[aria-pressed=true] { background:#d2f76b; color:#19301c; }
@media(min-width:900px) {
  .катан #экран-игры.экран--виден { grid-template-columns:minmax(0,1fr) 340px; grid-template-rows:38px 70px minmax(0,1fr); gap:12px; }
  .кат-управление { overflow:auto; }.кат-ресурс { min-height:95px; }
}
@media(max-width:899px) {
  .катан #экран-игры { padding-left:max(8px,var(--отступ-слева,0px)); padding-right:max(8px,var(--отступ-справа,0px)); gap:7px; }
  #кат-раунд { font-size:10px; white-space:nowrap; }
  .катан #экран-игры .кат-верх { gap:7px; }
  .катан #экран-игры .кат-верх h1 { font-size:24px; }
  .кат-игрок { grid-template-columns:minmax(0,1fr) auto; padding:7px; gap:3px; border-left:0; border-top:3px solid var(--цвет); border-radius:11px; }
  .кат-аватар { display:none; }.кат-игрок b { grid-column:1; font-size:12px; }.кат-игрок strong { grid-column:2; grid-row:1; font-size:23px; }.кат-игрок small { grid-column:1/-1; font-size:9px; }
  .кат-карта { border-radius:18px; }.кат-карта-верх,.кат-карта-низ { min-height:30px; padding:3px 9px; }.кат-карта-низ { font-size:9px; }.кат-карта .кат-ссылка { font-size:10px; padding:5px 7px; }
  .кат-управление { padding:8px; gap:6px; border-radius:17px; }.кат-ход { padding:7px 10px; }.кат-ход strong { font-size:18px; }.кат-ход small { font-size:10px; }
  .кат-событие { font-size:10px; line-height:1.3; max-height:26px; }.кат-раздел { display:none; }
  .кат-ресурс { min-height:65px; }.кат-ресурс .кат-рисунок { inset:6px -2px 8px; }.кат-ресурс strong { font-size:23px; top:4px; right:4px; }.кат-ресурс small { bottom:4px; font-size:9px; }
  .кат-стройки { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }.кат-стройки button { min-height:62px; padding:4px 2px; font-size:10px; gap:2px; }.кат-строение { width:32px; height:25px; }.кат-мини { width:12px; height:12px; }.кат-цена { gap:1px; }
  [data-build=road] .кат-строение::before { inset:9px 2px 9px; }
  .кат-действия { display:flex; gap:5px; }.катан .кат-действия .кнопка { min-height:42px; padding:6px 8px; font-size:11px; }.кат-действия > :first-child { flex:1; }.катан .кат-действия .кнопка--главная { font-size:12px; min-height:42px; }
  .кат-кубик { width:24px; height:24px; padding:4px; gap:1px; }
}
@media(max-width:899px) and (max-height:720px) {
  .катан #экран-игры.экран--виден { grid-template-rows:28px 52px minmax(140px,1fr) auto; gap:4px; padding-top:calc(5px + var(--отступ-сверху,0px)); padding-bottom:calc(5px + var(--отступ-снизу,0px)); }
  .кат-игрок { padding:4px; }.кат-игрок small { font-size:8px; }.кат-игрок b { font-size:10px; }.кат-игрок strong { font-size:20px; }
  .кат-управление { padding:6px; gap:4px; }.кат-ход { padding:5px 8px; }.кат-ход strong { font-size:16px; }.кат-ресурс { min-height:52px; }.кат-стройки button { min-height:45px; }.кат-строение { display:none; }
  .кат-карта-низ { min-height:23px; }.кат-карта-низ span { max-width:63%; }.кат-карта-верх { min-height:28px; }
}
@media(max-height:520px) and (min-width:600px) {
  .катан #экран-игры.экран--виден { grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:28px 48px minmax(0,1fr); }
  .кат-игроки { grid-column:2; grid-row:2; }.кат-карта { grid-column:1; grid-row:2/4; }.кат-управление { grid-column:2; grid-row:3; overflow:auto; }.кат-событие { display:none; }.кат-игрок small { display:none; }
}
@media(max-height:700px) { .катан #экран-лобби { gap:10px; }.кат-обложка { max-height:230px; }.кат-заголовок h1 { font-size:42px; }.кат-подзаголовок { font-size:13px; }.катан .карточка-профиля { padding:8px 12px; }.кат-факты { font-size:9px; } }

/* Лобби и выбор стола следуют общим компонентам Дурака и Деберца. */
.катан { font-family:'Onest',system-ui,sans-serif; }
.катан .кат-верх button { display:grid; place-items:center; padding:4px; }
.катан .экран:not(#экран-игры) .кат-верх button { min-width:44px; min-height:44px; padding:8px; }
.кат-верх button svg { width:24px; height:24px; }
.катан #экран-лобби { padding-bottom:calc(88px + var(--отступ-снизу,0px)); scroll-padding-bottom:calc(88px + var(--отступ-снизу,0px)); gap:14px; background:radial-gradient(ellipse at 20% 0,#2d44313b,transparent 55%),#0e1518; }
.кат-заголовок-строка { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.кат-заголовок h1 { font:750 clamp(34px,8vw,52px)/1.08 'Onest',system-ui,sans-serif; letter-spacing:-.045em; }
.катан .кат-подзаголовок { margin-top:8px; color:#a2afb7; font-size:14px; line-height:1.45; }
.кат-правила-вход { display:flex; align-items:center; gap:7px; min-height:44px; border:1px solid #adbeb335; border-radius:99px; padding:8px 12px; background:#1b2529; color:#e6ece7; font:500 12px 'Onest',system-ui,sans-serif; white-space:nowrap; }
.кат-правила-вход svg { width:18px; height:18px; }
.катан #экран-лобби .кат-обложка { min-height:160px; max-height:350px; flex:1 1 260px; }
.кат-обложка figcaption { font-size:clamp(25px,4.5vw,38px); }
.катан .карточка-профиля { min-height:70px; padding:12px 16px; background:linear-gradient(130deg,#242e31,#192225); border-color:#b7c9c124; }
.катан .карточка-профиля #кат-аватар { --аватар:42px; flex:0 0 42px; width:42px; height:42px; color:#a9b7bd; }
#кат-аватар img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; filter:none; z-index:1; }
.катан .карточка-профиля .кат-профиль-текст { display:grid; gap:3px; flex:1; min-width:0; text-align:left; }
.кат-профиль-текст strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f5f4ed; }
.кат-профиль-текст small { color:#9aaab0; font-size:12px; }
.катан .карточка-профиля .кат-шеврон { font-size:28px; }
.катан .карточка-входа { padding:14px 16px; min-height:80px; }
.катан .карточка-входа strong { font-size:clamp(18px,4.8vw,22px); }
.катан .карточка-входа small { font-size:12px; line-height:1.35; }
.катан .карточка-входа:not(.карточка-входа--играть-онлайн) { background:linear-gradient(130deg,#242e31,#192225); }
.катан #экран-лобби .нижние-вкладки { position:fixed; left:0; right:0; bottom:0; width:100%; height:calc(68px + var(--отступ-снизу,0px)); padding:0 max(12px,calc((100% - 720px)/2)) var(--отступ-снизу,0px); margin:0; background:#151d21f7; border-radius:18px 18px 0 0; }
.катан #кат-продолжить { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0; min-height:46px; padding:10px 14px; border-radius:14px; border:1px solid #d2f76b55; background:#d2f76b0c; color:#d2f76b; font:600 13px 'Onest',system-ui,sans-serif; }
.кат-настройки-шапка { display:grid; gap:8px; }
.кат-настройки-шапка > small { color:#a5b5ad; font:600 10px 'Onest',system-ui,sans-serif; letter-spacing:.14em; }
.кат-настройки-шапка h1 { font-size:clamp(30px,6vw,42px); }
.кат-шаг { display:flex; align-items:center; gap:10px; }
.кат-шаг > span { color:#d2f76b; border:1px solid #d2f76b40; border-radius:50%; width:27px; height:27px; display:grid; place-items:center; font-size:10px; }
.катан .кат-шаг h2 { font-size:17px; }
.кат-настройки-факты { text-align:center; color:#a9b8b7; font-size:12px; }
.кат-настройки-факты span { padding:0 7px; color:#d2f76b; }
.кат-переключатель { background:#111e22; border:1px solid #b0c4bd25; padding:4px; border-radius:15px; gap:4px; }
.кат-переключатель button { min-height:44px; padding:10px 8px; background:transparent; border:0; border-radius:11px; font:600 14px 'Onest',system-ui,sans-serif; }
.кат-рассадка { --место:56px; --рама:9px; width:min(calc(100% - 96px),440px); min-height:160px; aspect-ratio:1.6; margin:38px auto 50px; border:9px solid #796047; border-radius:48%; background:radial-gradient(ellipse at 50% 30%,#2c4d48,#10272d); box-shadow:inset 0 0 0 2px #070f13,0 0 0 2px #b1956f66,0 18px 28px #0006; }
.кат-превью { position:absolute; width:90%; height:90%; inset:5%; pointer-events:none; }
.кат-превью .кат-разбойник { filter:none; }
.кат-превью .кат-порт { display:none; }
.кат-рассадка .рассадка__место { min-width:0; min-height:0; width:56px; height:56px; padding:0; border:2px solid var(--цвет,#d2f76b); background:#1d2c30; color:#dce7e3; box-shadow:0 4px 12px #0006; }
.кат-место-значок { width:32px; height:32px; display:grid; place-items:center; color:#e4eee7; font-size:30px; line-height:1; }
.кат-рассадка .рассадка__место--я .кат-место-значок { width:100%; height:100%; border-radius:50%; }
.кат-место-значок svg { width:30px; height:30px; }
.кат-рассадка .рассадка__имя { color:#e7eee8; background:#132328f5; border-radius:7px; padding:3px 7px; top:calc(100% + 5px); font:600 11px/1.2 'Onest',system-ui,sans-serif; text-shadow:none; }
.кат-рассадка .рассадка__место--я { background:#31432c; border-color:#d2f76b; }
.кат-рассадка .рассадка__место--свободно { border-style:dashed; border-color:#92a69c; color:#a5b7ae; }
.катан #кат-начать,.катан #кнопка-создать-игру { min-height:52px; font-size:17px; }
@media(max-width:360px) {
  .катан #экран-лобби { gap:10px; }.кат-правила-вход { padding:7px 9px; font-size:11px; }
  .кат-рассадка { width:calc(100% - 72px); }.кат-рассадка .рассадка__место { width:52px; height:52px; }.кат-рассадка { --место:52px; }
}
@media(max-height:700px) {
  .катан #экран-лобби .кат-обложка { min-height:145px; }.катан #экран-лобби .кат-верх { min-height:36px; }
  .катан #экран-лобби .кат-верх button { min-height:36px; }.катан .карточка-профиля { min-height:62px; padding-block:9px; }
}
.катан #комната > .рассадка.рассадка--комната {
  background-image:linear-gradient(#0b202638,#0b202675),url('img/катан/обложка-v2.webp');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  border-color:#796047; background-blend-mode:normal;
}
.катан #экран-комнаты > .верх-игры { width:100%; align-self:stretch; margin:0; }
.катан #комната .комната__заголовок { font-size:30px; line-height:1.15; }
.катан #комната > .рассадка.рассадка--комната {
  border-color:transparent;
  background:linear-gradient(#0b202620,#0b202658) padding-box,url('img/катан/обложка-v2.webp') center/cover no-repeat padding-box,linear-gradient(180deg,#b69266,#715236 55%,#443220) border-box;
}
html.в-телеграме .катан :is(#экран-лобби,#кат-настройки,#экран-друга) > .кат-верх { display:none; }