/* Живой остров: материалы и композиция по референсу. Размер сцены не зависит от хода. */
.катан #экран-игры { background:linear-gradient(#090b0dc4,#090b0d77),url('img/катан/материалы-v3.webp') left center/200% 100%; padding-top:calc(6px + var(--отступ-сверху,0px)); padding-bottom:calc(8px + var(--отступ-снизу,0px)); padding-left:max(10px,var(--отступ-слева,0px)); padding-right:max(10px,var(--отступ-справа,0px)); overflow:hidden; }
.катан #экран-игры.экран--виден { grid-template-columns:minmax(0,1fr); grid-template-rows:52px minmax(0,1fr) 254px; gap:6px; }
.катан #экран-игры .кат-верх { grid-column:1/-1; grid-row:1; justify-content:space-between; gap:8px; }
.катан #экран-игры .кат-верх [data-menu] { margin:0; }
.кат-титул { text-align:center; }
.катан #экран-игры .кат-верх h1 { font:700 36px/.95 Georgia,serif; letter-spacing:.05em; color:#ffdda0; text-shadow:0 2px 0 #8c571f,0 5px 15px #000; }
.катан #экран-игры #кат-раунд { font-size:11px; color:#d7c7ac; }
.кат-сцена { position:relative; min-height:0; min-width:0; grid-row:2; width:min(100%,1000px); margin:auto; height:100%; }
.кат-сцена .кат-игроки { position:absolute; inset:0; z-index:3; grid-column:auto; grid-row:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:56px minmax(0,1fr) 56px; grid-template-areas:'northwest northeast' '. .' 'southwest self'; gap:6px 12%; pointer-events:none; }
.кат-сцена .кат-игрок { pointer-events:auto; display:grid; grid-template-columns:38px minmax(0,1fr) 24px; grid-template-rows:18px 14px 12px; align-items:center; gap:0 5px; padding:5px; border:1px solid #a7a5a478; border-left:2px solid var(--цвет); border-radius:13px; background:linear-gradient(130deg,#2b2f34ee,#12171aeF); box-shadow:0 6px 12px #0009,inset 0 1px 1px #ffffff24; text-align:left; color:#faf7eb; }
.кат-игрок.ходит { outline:1px solid #c3ff75; border-color:#c3ff75; background:linear-gradient(120deg,#344228ed,#172c1fee); box-shadow:0 0 16px #98ee5633,inset 0 0 14px #98ee5622; }
.кат-сцена .кат-игрок .кат-аватар { display:block; grid-column:1; grid-row:1/4; width:38px; height:38px; border:1px solid var(--цвет); border-radius:50%; background-image:url('img/катан/портреты-v3.webp'); background-size:200% 200%; overflow:hidden; }
.кат-портрет img { width:100%; height:100%; object-fit:cover; }
.кат-сцена .кат-игрок b { grid-column:2; grid-row:1; font-size:12px; line-height:18px; }
.кат-сцена .кат-игрок strong { grid-column:3; grid-row:1/3; font:700 25px Georgia,serif; color:#ffdb86; text-align:center; }
.кат-сцена .кат-игрок small { display:block; grid-column:2; grid-row:2; font-size:9px; line-height:12px; color:#e0d5bf; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.кат-сцена .кат-игрок-статус { grid-column:2/4; grid-row:3; font-size:10px; color:#b9f86b; line-height:12px; }
.катан .цвет-0 { --цвет:#e35fae; }.катан .цвет-1 { --цвет:#208ee9; }.катан .цвет-2 { --цвет:#f0e6d3; }.катан .цвет-3 { --цвет:#ed862d; }
.катан .цвет-4 { --цвет:#48b66b; }.катан .цвет-5 { --цвет:#b8804f; }.катан .цвет-6 { --цвет:#f2d34f; }.катан .цвет-7 { --цвет:#ed5353; }
.кат-постройка.цвет-0 .кат-фигура { filter:hue-rotate(135deg) saturate(1.65) brightness(1.45); }
.кат-постройка.цвет-0.доступно .кат-фигура { filter:hue-rotate(135deg) saturate(1.65) brightness(1.45) drop-shadow(0 0 6px #d6ff72); }
.кат-сцена .кат-карта { position:absolute; inset:54px -5px; grid-row:auto; grid-column:auto; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; }
.кат-сцена .кат-карта::before { display:none; }
.кат-сцена #кат-окно-карты { overflow:hidden; position:absolute; inset:0; }
.кат-сцена #кат-поле { width:100%; height:100%; filter:drop-shadow(0 12px 12px #0008); }
.кат-сцена .кат-карта-верх { position:absolute; top:4px; left:0; right:0; min-height:24px; padding:0; pointer-events:none; }
.кат-сцена .кат-карта-верх button { pointer-events:auto; margin-left:auto; }
.кат-сцена .кат-карта-низ { position:absolute; bottom:0; left:0; right:0; min-height:24px; padding:0; border:0; pointer-events:none; }
.кат-сцена .кат-карта .кат-ссылка { pointer-events:auto; background:#161818c9; color:#f1dfb9; border:1px solid #b8a47744; border-radius:7px; font-size:9px; padding:5px; }
#кат-награды { display:none; }
.кат-сцена #кат-кубики { font-size:10px; gap:4px; padding:3px; border-radius:7px; background:#161818c9; pointer-events:auto; }
.кат-сцена #кат-кубики>span:not(.кат-кубик) { font-size:9px; max-width:75px; }
.кат-сцена #кат-кубики .кат-кубик { width:23px; height:23px; padding:4px; border-radius:5px; gap:1px; }
.кат-сцена .кат-карта.увеличена { position:fixed; inset:calc(var(--отступ-сверху,0px) + 8px) max(8px,var(--отступ-справа,0px)) calc(var(--отступ-снизу,0px) + 8px) max(8px,var(--отступ-слева,0px)); background:#102e39; border-radius:14px; z-index:140; overflow:hidden; }
.кат-карта.увеличена #кат-окно-карты { inset:42px 0; overflow:auto; }
.кат-карта.увеличена .кат-карта-верх,.кат-карта.увеличена .кат-карта-низ { padding:8px; }
.кат-земля { stroke:#d5b77b; stroke-width:2; }
.кат-порт line { stroke:#926234; stroke-width:13; opacity:1; stroke-dasharray:3 2; }
.кат-порт rect { fill:#e9c591; stroke:#92613b; stroke-width:3; }
.кат-порт text { fill:#42230f; font:700 24px Georgia,serif; }
.кат-дом { fill:var(--цвет); stroke:#0008; }
.кат-дорога { stroke-linecap:butt; stroke-width:15; }.кат-дорога-основание { stroke-linecap:butt; stroke-width:17; }
.кат-точка { fill:#286f49bb; stroke:#c0ffaf; stroke-width:3; filter:drop-shadow(0 0 4px #a9ff5f); }
.кат-выбрано { filter:drop-shadow(0 0 9px #efff65)!important; }.кат-выбрано .кат-точка { fill:#fff47b; stroke:#fff; stroke-width:6; }
.кат-выбрано .кат-дорога { stroke:#fff47b; stroke-dasharray:none; }
.кат-постройка.доступно .кат-фигура { filter:drop-shadow(0 0 6px #d6ff72); }
#кат-поле .кат-постройка:not([role=button]) { pointer-events:none; }
.катан #экран-игры .кат-управление { grid-row:3; grid-column:1; width:min(100%,660px); margin:auto; height:100%; padding:8px; display:grid; grid-template-rows:48px 26px minmax(50px,1fr) 36px 42px; gap:4px; border-radius:17px; border:1px solid #b1a98e55; background:linear-gradient(140deg,#232628eb,#111414f5); box-shadow:0 8px 25px #0009; position:relative; overflow:visible; }
.кат-управление .кат-ход { grid-row:1; padding:0; background:none; border:0; text-align:center; gap:1px; align-content:center; }
.кат-управление .кат-ход strong { font-size:18px; line-height:20px; }
.кат-управление .кат-ход small { font-size:10px; line-height:12px; color:#d9d4c5; }
.кат-шаги { display:flex; gap:6px; justify-content:center; align-items:center; font-size:10px; color:#b2b4ae; }
.кат-шаги span { padding:2px 10px; border:1px solid #ffffff30; border-radius:20px; }
.кат-шаги .текущий { color:#d3ff77; border-color:#c4f85b; background:#75953133; }
.кат-управление .кат-событие { display:block; grid-row:2; min-height:0; max-height:none; height:26px; margin:0; padding:0 5px; border:0; font-size:10px; line-height:13px; text-align:center; color:#d8bf8d; overflow:auto; }
.кат-управление .кат-ресурсы { grid-row:3; width:min(100%,430px); margin:auto; height:100%; gap:7px; }
.кат-управление .кат-ресурс { position:relative; height:100%; min-height:0; border-radius:6px; border:2px solid #d1b58d; box-shadow:0 3px 0 #806044,0 5px 8px #0007,inset 0 0 0 2px #0007; overflow:hidden; background:#363e28; }
.кат-управление .кат-ресурс .кат-рисунок { inset:50% 0 auto; width:100%; height:auto; aspect-ratio:1; transform:translateY(-50%); border-radius:0; }
.кат-управление .кат-ресурс strong { position:absolute; top:auto; bottom:1px; right:50%; transform:translateX(50%); font:700 19px/1.1 system-ui; z-index:2; background:#101c17ed; min-width:26px; border-radius:16px; padding:1px 4px; }
.кат-управление .кат-ресурс small { display:none; }
.кат-управление .кат-ресурс::after { display:none; }
.кат-инструменты { grid-row:4; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.катан .кат-инструменты .кнопка { min-height:36px; padding:5px; font-size:12px; border-radius:9px; background:linear-gradient(#373936,#202424); border:1px solid #9c998364; color:#f3e6c7; }
.кат-управление .кат-действия { grid-row:5; display:flex; gap:7px; }
.катан .кат-управление .кат-действия .кнопка--главная { flex:1; min-height:42px; font-size:17px; border-radius:30px; background:linear-gradient(#9edf40,#4f8b27 45%,#286414); color:#fff8e2; border:1px solid #cbff89; box-shadow:inset 0 2px 4px #e8ff91aa,0 2px 10px #85b33b55; text-shadow:0 1px 2px #284011; }
.катан .кат-управление .кат-действия .кнопка--главная:disabled { opacity:1; background:linear-gradient(#414343,#242727); color:#a9b1ad; border-color:#737a73; box-shadow:inset 0 1px 2px #ffffff30; text-shadow:none; }
#кат-отмена { white-space:nowrap; }
#кат-предложение { position:absolute; bottom:calc(100% + 5px); left:20%; right:20%; z-index:6; text-align:center; background:#244321f5; border-color:#c3e581; }
#кат-ошибка:empty,#строка-связи:empty { display:none; }
#кат-ошибка:not(:empty),#строка-связи:not(:empty) { position:absolute; bottom:100%; left:0; right:0; z-index:7; padding:8px; background:#572b1b; border:1px solid #edb184; border-radius:8px; font-size:12px; }
.кат-бросок { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(90%,400px); padding:20px; display:grid; gap:12px; text-align:center; z-index:8; border:1px solid #e9cd8c; border-radius:22px; background:linear-gradient(140deg,#30332af5,#111815f5); box-shadow:0 15px 60px #000c,0 0 45px #edcf7544; pointer-events:none; }
.кат-бросок>b { font-size:17px; color:#ffe0a1; }.кат-бросок>strong { font:700 42px/1 Georgia,serif; color:#fff0b5; }.кат-бросок p { font-size:12px; line-height:1.4; color:#e8e1cf; max-height:100px; overflow:auto; }
.кат-бросок-кубики { display:flex; gap:23px; justify-content:center; padding:10px; }
.кат-бросок .кат-кубик { display:grid; width:64px; height:64px; padding:12px; gap:4px; border-radius:12px; background:#fff4d9; box-shadow:0 6px 0 #bcac8c,0 12px 17px #0007; }
.катан #кат-диалог { background:linear-gradient(145deg,#2c302a,#111918); border-color:#c0aa7966; }
.катан #кат-диалог .кат-карта-развития:disabled { opacity:1; background:#202a25; border-color:#87927355; }
.катан #кат-диалог .кат-карта-развития:disabled small { color:#bbc2b3; }
#кат-диалог .кат-стройки { grid-template-columns:repeat(2,minmax(0,1fr)); }
#кат-диалог .кат-стройки button { min-height:110px; font-size:15px; padding:12px; background:#252d27; }
#кат-диалог .кат-строение { display:block; width:56px; height:48px; }
@media(min-width:700px) and (min-height:700px) {
 .катан #экран-игры.экран--виден { grid-template-rows:68px minmax(0,1fr) 268px; }
 .катан #экран-игры .кат-верх h1 { font-size:46px; }
 .кат-сцена .кат-игроки { grid-template-rows:70px minmax(0,1fr) 70px; gap:0 40%; }
 .кат-сцена .кат-игрок { grid-template-columns:50px minmax(0,1fr) 35px; grid-template-rows:24px 16px 16px; padding:6px; }
 .кат-сцена .кат-игрок .кат-аватар { width:50px; height:50px; }.кат-сцена .кат-игрок b { font-size:17px; }.кат-сцена .кат-игрок strong { font-size:32px; }.кат-сцена .кат-игрок small { font-size:11px; }
 .кат-сцена .кат-карта { inset:24px 30px; }.кат-сцена .кат-карта-верх { top:50px; }.кат-сцена .кат-карта-низ { bottom:55px; }
 .кат-управление .кат-ресурс strong { font-size:24px; }
}
@media(min-width:1000px) and (max-height:1000px), (min-width:600px) and (max-height:699px) {
 .катан #экран-игры.экран--виден { grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:48px minmax(0,1fr); gap:8px; }
 .кат-сцена { grid-column:1; grid-row:2; }
 .катан #экран-игры .кат-управление { grid-column:2; grid-row:2; height:min(100%,520px); padding:12px; grid-template-rows:68px 52px minmax(55px,1fr) 44px 48px; gap:10px; }
 .кат-сцена .кат-игроки { gap:6px 30%; grid-template-rows:64px minmax(0,1fr) 64px; }
 .кат-сцена .кат-игрок { grid-template-columns:42px minmax(0,1fr) 25px; grid-template-rows:22px 14px 14px; }.кат-сцена .кат-игрок b { font-size:13px; }.кат-сцена .кат-игрок .кат-аватар { width:42px; height:42px; }
 .кат-сцена .кат-карта { inset:54px 0; }.кат-сцена .кат-карта-верх { top:0; }.кат-сцена .кат-карта-низ { bottom:0; }
 .кат-управление .кат-событие { height:52px; font-size:12px; line-height:17px; }.кат-управление .кат-ход small { font-size:12px; line-height:16px; }.кат-управление .кат-ход strong { font-size:22px; }
 .кат-управление .кат-ресурсы { max-height:140px; gap:5px; }
 .катан .кат-управление .кат-действия .кнопка--главная { font-size:16px; }
}
@media(max-height:700px) and (max-width:599px) {
 .катан #экран-игры.экран--виден { grid-template-rows:40px minmax(0,1fr) 225px; gap:4px; }
 .катан #экран-игры .кат-верх h1 { font-size:27px; }
 .катан #экран-игры .кат-управление { grid-template-rows:44px 20px minmax(34px,1fr) 34px 38px; padding:6px; gap:3px; }
 .кат-управление .кат-событие { height:20px; font-size:9px; line-height:10px; }.кат-управление .кат-ход strong { font-size:16px; }.кат-управление .кат-ход small { font-size:9px; }.кат-шаги { font-size:9px; }
 .катан .кат-управление .кат-действия .кнопка--главная { min-height:38px; font-size:14px; }
 .кат-сцена .кат-игроки { grid-template-rows:48px minmax(0,1fr) 48px; column-gap:8%; }.кат-сцена .кат-игрок { grid-template-columns:30px minmax(0,1fr) 22px; grid-template-rows:15px 12px 11px; padding:4px; }.кат-сцена .кат-игрок .кат-аватар { width:30px; height:30px; }.кат-сцена .кат-игрок b { font-size:11px; }.кат-сцена .кат-игрок small { font-size:8px; }.кат-сцена .кат-игрок-статус { font-size:9px; }
 .кат-сцена .кат-карта { inset:44px -6px; }
}
@media(min-width:600px) and (max-height:520px) {
 .катан #экран-игры.экран--виден { grid-template-columns:minmax(0,1fr) 280px; grid-template-rows:30px minmax(0,1fr); }
 .катан #экран-игры .кат-верх h1 { font-size:24px; }.кат-титул { display:flex; gap:12px; align-items:center; }
 .катан #экран-игры .кат-управление { padding:6px; grid-template-rows:42px 26px minmax(30px,1fr) 34px 38px; gap:3px; overflow:auto; }
 .кат-управление .кат-событие { height:26px; font-size:10px; line-height:13px; }.кат-управление .кат-ход strong { font-size:16px; }.кат-управление .кат-ход small { font-size:10px; line-height:12px; }
 .кат-сцена .кат-игроки { grid-template-rows:45px minmax(0,1fr) 45px; gap:0 24%; }.кат-сцена .кат-игрок { grid-template-columns:minmax(0,1fr) 24px; grid-template-rows:16px 11px 10px; gap:0; padding:3px 5px; }.кат-сцена .кат-игрок .кат-аватар { display:none; }.кат-сцена .кат-игрок b { grid-column:1; font-size:10px; }.кат-сцена .кат-игрок strong { grid-column:2; font-size:21px; }.кат-сцена .кат-игрок small,.кат-сцена .кат-игрок-статус { grid-column:1/3; font-size:8px; }
 .кат-сцена .кат-карта { inset:30px 0; }.кат-сцена .кат-карта .кат-ссылка { font-size:8px; padding:3px; }
}
@media(prefers-reduced-motion:reduce) { .кат-ход.ожидание strong::after { animation:none; } }

/* Композиция образца: остров и игроки занимают сцену, карты лежат отдельным рядом. */
.катан #экран-игры { background:radial-gradient(ellipse at 50% 40%,#15151633,#070a0cdd 85%),url('img/катан/материалы-v3.webp') left center/200% 100%; }
.кат-сцена #кат-поле { filter:none; }
.катан #экран-игры[data-terrain=soft] .кат-земля { filter:saturate(.52) brightness(.72); }
.катан #экран-игры[data-terrain=bright] .кат-земля { filter:none; }
.катан #экран-игры .кат-приглушён .кат-земля { filter:saturate(.15) brightness(.42); }
.кат-название-земли { display:none; font:600 16px system-ui; fill:#fff8e1; stroke:#201810; stroke-width:4; paint-order:stroke; text-anchor:middle; pointer-events:none; }
.названия-ресурсов .кат-название-земли { display:block; }
.без-вероятностей .кат-вероятность { display:none; }
.кат-гекс.кат-выбрано { filter:none!important; }
.кат-гекс.кат-выбрано .кат-земля { stroke:#fff783; stroke-width:9; filter:none!important; }
.кат-гекс[role=button] { cursor:pointer; }
.кат-гекс[role=button]:focus-visible .кат-земля { stroke:#fff; stroke-width:8; }
.кат-гекс[role=button] .кат-земля { stroke:#c5ff70; stroke-width:4; }
.катан .кат-выбор-настроек { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 18px; }
.катан .кат-выбор-настроек button { padding:10px 12px; border:1px solid #b7985f66; border-radius:10px; color:#eee2c8; background:#272b25; min-height:42px; }
.катан .кат-выбор-настроек button[aria-pressed=true] { border-color:#eac579; background:#68502b; color:#fff4d5; }
.кат-настройка-флажок { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid #baa78122; font-size:15px; }
.кат-настройка-флажок input { width:22px; height:22px; accent-color:#c5dd6e; }
.кат-обмен-карты { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.катан #кат-диалог .кат-обмен-карта { min-width:0; min-height:118px; display:flex; flex-direction:column; align-items:center; gap:5px; padding:7px 2px; border:1px solid #927c58; border-radius:12px; background:#292e25; color:#f6ecd4; }
.кат-обмен-карта .кат-рисунок { width:42px; height:42px; border-radius:8px; }
.кат-обмен-карта b { font-size:12px; }.кат-обмен-карта small { font-size:10px; white-space:nowrap; }
.катан #кат-диалог .кат-обмен-карта[aria-pressed=true] { border:2px solid #d3f377; background:#3d5028; box-shadow:0 0 12px #c7ee5233; }
.катан #кат-диалог .кат-обмен-карта:disabled { opacity:.4; }
.кат-обмен-итог { padding:13px; background:#111a15; border-radius:10px; color:#e7f5c3; text-align:center; font-weight:600; }
.кат-счётчик { display:flex; min-width:0; align-items:center; }
.катан #кат-диалог .кат-счётчик button { padding:0; min-width:28px; min-height:40px; border-radius:7px; background:#3b4333; color:#fff3d3; font-size:20px; }
.катан #кат-диалог .кат-счётчик input { min-width:0; width:36px; padding:4px 0; text-align:center; appearance:textfield; }
.кат-счётчик input::-webkit-inner-spin-button { appearance:none; }
.катан #кат-диалог .кат-обмен-строка { grid-template-columns:minmax(70px,1fr) minmax(90px,1fr) minmax(90px,1fr); gap:5px; }
.кат-кубик-пространство { width:64px; height:64px; perspective:600px; }
.кат-кубик-3d { width:64px; height:64px; position:relative; transform-style:preserve-3d; transform:rotateX(-12deg) rotateY(-18deg); }
.кат-бросок .кат-грань { position:absolute; inset:0; backface-visibility:hidden; border:1px solid #cdbfaa; box-shadow:inset 0 0 10px #a28a5d44; border-radius:10px; }
.кат-грань.грань-0 { transform:translateZ(32px); }.кат-грань.грань-1 { transform:rotateY(180deg) translateZ(32px); }
.кат-грань.грань-2 { transform:rotateY(90deg) translateZ(32px); }.кат-грань.грань-3 { transform:rotateY(-90deg) translateZ(32px); }
.кат-грань.грань-4 { transform:rotateX(90deg) translateZ(32px); }.кат-грань.грань-5 { transform:rotateX(-90deg) translateZ(32px); }
.кат-сцена .кат-карта { inset:35px -10px; }
.кат-сцена #кат-окно-карты { mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent); mask-composite:intersect; }
.кат-сцена .кат-карта.увеличена #кат-окно-карты { mask-image:none; }
.кат-порт line { stroke-width:11px; stroke-dasharray:3 1; }
.кат-номер-фон { fill:#fff3d8; stroke:#4d3018; stroke-width:3; filter:drop-shadow(0 3px 3px #160e08bb); }
.кат-номер { font:800 29px Onest,system-ui,sans-serif; fill:#21170e; paint-order:stroke fill; stroke:#fff9e9; stroke-width:1; }.кат-номер.кат-красный { fill:#b01816; }
.кат-вероятность { font-size:14px; fill:#493422; font-weight:700; }
.катан #кат-вернуть { flex:0 0 110px; padding:5px 8px; border:1px solid #cbae74; border-radius:12px; color:#ffe3a6; background:#28281e; font-size:13px; font-weight:700; line-height:1.15; }
.катан #кат-вернуть:disabled { opacity:.45; }
.катан .кат-действия .кнопка--главная { min-width:0; }
/* Приглушаем только ландшафт: фишки, дороги и номера остаются контрастными. */
.кат-земля { stroke:#eed0a0; stroke-width:1.6; filter:saturate(.76) brightness(.86); }
.кат-сцена .кат-карта-верх { top:25px; }.кат-сцена .кат-карта-низ { bottom:27px; }
.катан #экран-игры .кат-управление { border:0; box-shadow:none; background:linear-gradient(#141819a6,#131719e8); }
.кат-управление .кат-ресурсы { padding:5px 7px; border:1px solid #bcad8c66; border-radius:12px; background:linear-gradient(#2c2b26,#141919); box-shadow:0 5px 16px #0008; }
.кат-управление .кат-ресурс { border:0; background:none; box-shadow:none; overflow:visible; }
.кат-ресурс-карта { display:block; width:100%; height:100%; filter:drop-shadow(0 3px 3px #0008); }
.кат-управление .кат-ресурс strong { bottom:7%; font-size:clamp(15px,2.5vw,30px); border:1px solid #faf0d244; padding:1px 7px; }
.кат-сцена .кат-игрок strong::after { content:'очк.'; font:9px system-ui; display:block; margin-top:0; color:#d7ac53; }
.кат-сцена .кат-игрок strong { grid-row:1/4; }
.кат-сцена .кат-игрок b { font-weight:650; }
.катан #экран-игры.расстановка.экран--виден { grid-template-rows:52px minmax(0,1fr) 176px; }
.катан #экран-игры.расстановка .кат-управление { padding:14px; grid-template-rows:minmax(0,1fr) 28px 44px; gap:6px; border:1px solid #acb3a64d; background:linear-gradient(140deg,#2b2d30ef,#0e1415f5); box-shadow:0 8px 30px #0007; }
.расстановка .кат-управление .кат-ресурсы,.расстановка .кат-инструменты { display:none; }
.расстановка .кат-управление .кат-событие { grid-row:2; }
.расстановка .кат-управление .кат-действия { grid-row:3; }
.расстановка .кат-управление .кат-ход { gap:5px; }
.расстановка .кат-управление .кат-ход strong { font-size:21px; line-height:24px; color:#fff7e5; }
.расстановка .кат-управление .кат-ход small { font-size:12px; line-height:16px; }
.расстановка .кат-шаги { font-size:12px; }.расстановка .кат-шаги span { padding:3px 15px; }
@media(min-width:700px) and (orientation:portrait) {
 .катан #экран-игры.экран--виден { grid-template-columns:minmax(0,1fr); grid-template-rows:90px minmax(0,1fr) 350px; gap:8px; }
 .катан #экран-игры .кат-верх h1 { font-size:70px; }.катан #экран-игры #кат-раунд { font-size:19px; }
 .кат-сцена { width:100%; }.кат-сцена .кат-карта { inset:45px -10px; }
 .кат-сцена .кат-игроки { grid-template-rows:110px minmax(0,1fr) 110px; column-gap:28%; }
 .кат-сцена .кат-игрок { grid-template-columns:76px minmax(0,1fr) 44px; grid-template-rows:33px 25px 25px; padding:12px; border-radius:22px; gap:0 8px; }
 .кат-сцена .кат-игрок .кат-аватар { width:76px; height:76px; }.кат-сцена .кат-игрок b { font-size:26px; line-height:30px; }.кат-сцена .кат-игрок strong { font-size:38px; }.кат-сцена .кат-игрок small { font-size:15px; line-height:20px; }.кат-сцена .кат-игрок-статус { font-size:18px; line-height:24px; }
 .кат-сцена .кат-карта-верх { top:75px; }.кат-сцена .кат-карта-низ { bottom:75px; }
 .катан #экран-игры .кат-управление { grid-column:1; grid-row:3; width:min(90%,860px); height:100%; grid-template-rows:40px 20px minmax(90px,1fr) 36px 64px; gap:8px; }
 .кат-управление .кат-ход strong { font-size:25px; }.кат-управление .кат-ход small { font-size:15px; line-height:20px; }.кат-управление .кат-событие { height:30px; font-size:13px; line-height:15px; }
 .кат-управление .кат-ресурсы { width:100%; max-width:680px; gap:16px; padding:10px 14px; }.кат-управление .кат-ресурс strong { font-size:28px; bottom:4px; }
 .катан .кат-инструменты .кнопка { font-size:17px; }.катан .кат-управление .кат-действия .кнопка--главная { font-size:26px; min-height:58px; }
 .катан #экран-игры.расстановка.экран--виден { grid-template-rows:90px minmax(0,1fr) 280px; }
 .катан #экран-игры.расстановка .кат-управление { grid-template-rows:minmax(0,1fr) 32px 64px; padding:20px 30px; border-radius:28px; }
 .расстановка .кат-управление .кат-ход strong { font-size:30px; line-height:38px; }.расстановка .кат-шаги { font-size:21px; }.расстановка .кат-шаги span { padding:6px 30px; }.расстановка .кат-управление .кат-ход small { font-size:21px; line-height:28px; }
}
@media(min-width:1000px) and (orientation:landscape), (min-width:600px) and (max-height:699px) {
 .катан #экран-игры.расстановка.экран--виден { grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:48px minmax(0,1fr); }
 .катан #экран-игры.расстановка .кат-управление { grid-row:2; height:min(100%,330px); }
 .кат-сцена .кат-карта { inset:30px 0; }
}
@media(max-width:599px) and (max-height:700px) {
 .катан #экран-игры.расстановка.экран--виден { grid-template-rows:40px minmax(0,1fr) 155px; }
 .катан #экран-игры.расстановка .кат-управление { padding:8px; grid-template-rows:minmax(0,1fr) 20px 38px; gap:4px; }
 .расстановка .кат-управление .кат-ход strong { font-size:18px; }.расстановка .кат-управление .кат-ход small { font-size:11px; }
 .кат-сцена .кат-карта { inset:35px -7px; }
}

/* Карточки и панель поля имеют собственные полосы: никакого перекрытия кнопок. */
.кат-сцена { --карточка-высота:90px; }
.кат-сцена .кат-игроки { grid-template-rows:var(--карточка-высота) minmax(0,1fr) var(--карточка-высота); column-gap:8%; }
.кат-сцена .кат-карта:not(.увеличена) { inset:calc(var(--карточка-высота) + 4px) 0 calc(var(--карточка-высота) + 42px); }
.кат-сцена .кат-карта:not(.увеличена) .кат-карта-низ { bottom:-36px; height:32px; min-height:32px; gap:8px; }
.кат-сцена .кат-карта:not(.увеличена) .кат-карта-верх { top:0; }
.кат-сцена .кат-карта .кат-карта-низ .кат-ссылка { min-height:32px; padding:6px 10px; font-size:12px; background:#17211ff2; border-color:#b8a47780; }
.кат-сцена .кат-игрок { grid-template-columns:28px minmax(0,1fr) 28px; grid-template-rows:26px 34px 16px; gap:1px 5px; padding:5px 7px; border-radius:14px; }
.кат-сцена .кат-игрок .кат-аватар { display:block; grid-column:1; grid-row:1; width:26px; height:26px; }
.кат-сцена .кат-игрок b { grid-column:2; grid-row:1; font-size:12px; line-height:16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.кат-сцена .кат-игрок strong { grid-column:3; grid-row:1; font-size:25px; line-height:26px; }
.кат-сцена .кат-игрок strong::after { display:none; }
.кат-сцена .кат-игрок-статус { grid-column:1/-1; grid-row:3; display:flex; align-items:center; justify-content:center; gap:6px; font-size:10px; line-height:14px; }
.кат-показатели { grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px 6px; color:#f7e6c4; }
.кат-показатель { display:flex; align-items:center; gap:4px; font:600 12px/15px system-ui; font-variant-numeric:tabular-nums; }
.кат-показатель svg { width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.кат-показатель[data-stat=development] { color:#dfbc79; }
.кат-показатель[data-stat=road],.кат-показатель[data-stat=settlement],.кат-показатель[data-stat=city] { color:var(--цвет); }
.кат-думает-часы { position:relative; display:inline-block; width:14px; height:14px; flex:none; border:1.5px solid #f5d594; border-radius:50%; }
.кат-думает-часы::before,.кат-думает-часы::after { content:''; position:absolute; width:1.5px; height:4px; left:50%; bottom:50%; background:#f5d594; transform-origin:50% 100%; animation:кат-часовая 3s linear infinite; }
.кат-думает-часы::after { height:3px; animation-duration:12s; }
@keyframes кат-часовая { to { transform:rotate(360deg); } }
@media(min-width:700px) { .кат-сцена { --карточка-высота:102px; }.кат-сцена .кат-игроки { column-gap:28%; }.кат-сцена .кат-игрок { grid-template-columns:34px minmax(0,1fr) 32px; grid-template-rows:30px 40px 18px; padding:6px 10px; }.кат-сцена .кат-игрок .кат-аватар { width:30px; height:30px; }.кат-сцена .кат-игрок b { font-size:15px; }.кат-показатель { font-size:14px; line-height:18px; }.кат-показатель svg { width:18px; height:18px; }.кат-сцена .кат-игрок-статус { font-size:11px; } }
@media(min-width:600px) and (max-height:520px) { .катан #экран-игры.экран--виден { overflow:auto; }.кат-сцена { min-height:440px; }.кат-сцена .кат-игроки { column-gap:6%; } }
@media(prefers-reduced-motion:reduce) { .кат-думает-часы::before,.кат-думает-часы::after { animation:none; }.кат-думает-часы::after { transform:rotate(110deg); } }
.катан .без-анимации .кат-думает-часы::before,.катан .без-анимации .кат-думает-часы::after { animation:none; }

.кат-торговля-запас { position:sticky; top:0; z-index:2; padding:10px; border:1px solid #bca66c66; border-radius:12px; background:#202920; box-shadow:0 4px 12px #0005; }
.кат-торговля-запас>b { display:block; margin-bottom:8px; font-size:13px; color:#eddbaf; }
.кат-торговля-ресурсы { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.кат-торговля-ресурсы>span { display:flex; align-items:center; justify-content:center; gap:5px; }
.кат-торговля-ресурсы .кат-рисунок { width:28px; height:28px; flex:none; border-radius:6px; }
.кат-торговля-ресурсы strong { font:700 20px system-ui; }
.кат-торговля-остаток { display:block; margin-top:3px; font-size:11px; line-height:1.3; color:#dbc997; }
@media(max-width:450px) { .кат-обмен-ресурс { flex-direction:column; align-items:flex-start; gap:4px; font-size:12px; }.кат-торговля-ресурсы { gap:3px; }.кат-торговля-ресурсы .кат-рисунок { width:22px; height:22px; }.кат-торговля-ресурсы strong { font-size:17px; }.кат-торговля-запас { padding:8px; } }

.катан #кат-диалог .кат-счётчик { display:grid; grid-template-columns:28px minmax(28px,1fr) 28px; }
.катан #кат-диалог .кат-счётчик button { width:28px; min-width:28px; max-width:28px; }
.катан #кат-диалог .кат-счётчик input { width:100%; }

.кат-новая-карта { width:min(100%,220px); margin:0 auto; padding:8px; border:2px solid #d2b16e; border-radius:17px; background:linear-gradient(135deg,#634f2b,#29291e); box-shadow:0 9px 22px #0007,inset 0 1px 0 #fff3; text-align:center; }
.кат-новая-карта .кат-рисунок { display:block; width:100%; aspect-ratio:1; border-radius:10px; background-image:url('img/катан/развитие-v2.webp'); }
.кат-новая-карта>b { display:block; padding:10px 3px 3px; color:#ffe1a2; font:700 20px/1.2 Georgia,serif; }
.кат-новая-описание { display:grid; gap:9px; text-align:center; }
.катан #кат-диалог .кат-новая-описание p { margin:0; color:#f1e8d4; }
.кат-новая-описание small { color:#cbb889; line-height:1.4; }
@media(max-height:700px) { .кат-новая-карта { width:160px; }.кат-новая-карта>b { font-size:17px; } }

@media(min-width:1000px) and (orientation:landscape) {
 .катан #экран-игры.экран--виден,.катан #экран-игры.расстановка.экран--виден { grid-template-columns:minmax(0,min(880px,calc(100vw - 344px),calc((100dvh - 306px)*1.07143))) 300px; justify-content:center; column-gap:20px; }
 .кат-сцена { width:100%; }
 .кат-сцена .кат-карта:not(.увеличена) .кат-карта-верх { top:8px; }
}

.катан .кат-управление .кат-действия .кнопка--главная { min-width:0; height:100%; padding:4px 10px; line-height:1.15; white-space:normal; display:flex; align-items:center; justify-content:center; }
@media(min-width:1000px) and (orientation:landscape) { .катан .кат-управление .кат-действия .кнопка--главная { font-size:15px; }.катан .кат-управление #кат-отмена { font-size:12px; padding:6px 8px; min-width:0; } }

.кат-гекс .кат-земля { stroke:var(--ресурс-цвет); stroke-width:1.4; filter:saturate(.84) brightness(.93); }
.кат-значок-земли { stroke:#ecd5a3; stroke-width:1.5; pointer-events:none; }
.кат-разбойник { pointer-events:none; filter:drop-shadow(1px 3px 2px #000a); }
.кат-летящий-ресурс { position:fixed; left:0; top:0; z-index:160; display:grid; place-items:center; width:42px; height:52px; border:1px solid #edd198; border-radius:9px; background:#172b25; box-shadow:0 3px 12px #000a; pointer-events:none; color:#ffe8b5; }
.кат-летящий-ресурс .кат-рисунок { width:32px; height:32px; }
.кат-получено { position:absolute; left:0; right:0; top:100%; padding:4px; color:#fff1ca; background:#152c25ed; border:1px solid var(--цвет); border-radius:8px; font:600 10px/1.3 system-ui; z-index:10; }
.кат-сцена>#кат-кубики { position:absolute; z-index:5; width:max-content; max-width:130px; min-height:34px; border:1px solid #c5ab74; background:#17201bea; transition:opacity .25s; }
.кат-сцена>#кат-кубики>b { white-space:nowrap; font-size:20px; line-height:1; }
.кат-кубики-погасли { opacity:.35; }
.кат-показатель[data-stat=resources] { grid-area:1/1; }.кат-показатель[data-stat=development] { grid-area:2/1; }
.кат-показатель[data-stat=road] { grid-area:1/2; }.кат-показатель[data-stat=knights] { grid-area:2/2; }
.кат-показатель[data-stat=settlement] { grid-area:1/3; }.кат-показатель[data-stat=city] { grid-area:2/3; }
.кат-добыча { width:180px; max-width:55vw; margin:auto; text-align:center; }
.кат-добыча svg { width:100%; height:220px; }.кат-добыча h3 { color:#f5d69a; }
.кат-счётчик-заперт { opacity:.35; filter:grayscale(1); }
.кат-статус-торгов { padding:8px 14px; border-left:3px solid #cfa95f; background:#bca06c12; }
.кат-выбор-цвета { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:12px 0; }
.кат-выбор-цвета button { padding:8px 3px; border:1px solid #bca06c55; border-radius:12px; background:#142521; color:#f1e7d2; font:600 12px system-ui; }
.кат-выбор-цвета button::before { content:''; display:block; width:26px; height:26px; border-radius:5px; margin:0 auto 6px; background:var(--цвет); box-shadow:inset 0 -5px 8px #0004; }
.кат-выбор-цвета button[aria-pressed=true] { outline:2px solid var(--цвет); outline-offset:2px; }
/* Главная кнопка хода должна выигрывать у общих стилей кнопок с исключениями экранов. */
.катан #приложение #экран-игры #кат-главное:not(:disabled) { background:linear-gradient(#9edf40,#4f8b27 45%,#286414); color:#fff8e2; border:1px solid #cbff89; box-shadow:inset 0 2px 4px #e8ff91aa,0 2px 10px #85b33b55; text-shadow:0 1px 2px #284011; }
.катан #приложение #экран-игры #кат-главное:disabled { opacity:1; background:linear-gradient(#414343,#242727); color:#a9b1ad; border-color:#737a73; box-shadow:inset 0 1px 2px #ffffff30; text-shadow:none; }
.катан .кат-журнал { border-left:3px solid var(--цвет); background:color-mix(in srgb,var(--цвет) 8%,transparent); padding:12px; margin:5px 0; border-radius:0 8px 8px 0; }
.кат-карта-низ { gap:5px; flex-wrap:nowrap; }
#кат-предложение { left:0; right:0; background:#24302af5; border-color:#cfad6b; }
#кат-предложение button { white-space:normal; font-size:12px; }
.катан #экран-эмоций { width:min(540px,calc(100vw - 24px)); max-height:80dvh; border:1px solid #b49a64; border-radius:20px; padding:18px; background:#17251f; color:#f5e8ca; }
.катан #экран-эмоций::backdrop { background:#0009; }
.катан .панель-знаков__вкладки { display:flex; gap:6px; margin-bottom:14px; }
.катан .панель-знаков__вкладки button { flex:1; padding:10px 4px; }
.катан #экран-эмоций .ряд-знаков { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.катан #экран-эмоций #ряд-фраз,.катан #экран-эмоций #ряд-целей { grid-template-columns:repeat(2,minmax(0,1fr)); }
.катан #экран-эмоций .кнопка--смайлик { font-size:32px; background:#26392d; border:1px solid #bda97633; padding:5px; }
.катан .предмет-броска { width:42px; height:42px; object-fit:contain; }
.катан #экран-эмоций .кнопка--фраза { font-size:13px; padding:10px; }
.катан #экран-эмоций #кнопка-эмоции-назад { margin-top:14px; width:100%; }
.катан .знак-внимания { background:#172b26ed; border:1px solid #d6bb81; padding:8px; border-radius:12px; pointer-events:none; box-shadow:0 3px 12px #0008; }
.катан .знак-внимания__кто { display:block; font-size:11px; color:#d7bc85; }.катан .знак-внимания__что { font-size:20px; }
.катан .знак-внимания--гаснет { opacity:0; transition:opacity .35s; }
.катан .деберц-летящий-предмет { position:fixed; top:0; left:0; width:48px; height:48px; z-index:200; pointer-events:none; }
.катан .деберц-попадание { --брызги:#dca83d; position:fixed; left:var(--x); top:var(--y); z-index:200; pointer-events:none; }
.катан .деберц-пятно { position:absolute; left:-25px; top:-22px; width:50px; height:44px; background:var(--брызги); border-radius:40% 60% 35% 65%; }
.катан .деберц-капля { position:absolute; width:8px; height:11px; background:var(--брызги); border-radius:50%; }
@media(max-width:699px) {
 .катан #экран-игры.расстановка .кат-ход { gap:2px; }
 .катан #экран-игры.расстановка .кат-ход strong { font-size:18px; line-height:20px; }
 .катан #экран-игры.расстановка .кат-ход small { font-size:10px; line-height:12px; }
 .катан #экран-игры.расстановка .кат-шаги { font-size:11px; line-height:15px; }
 .катан #экран-игры.расстановка .кат-шаги span { padding:1px 10px; }
}