/* ПУТЬ — стиль 2a «Щедрая земля» (Документы/Дизайн/Основные экраны.dc.html).
   Экран фиксированный 340×604, как в макете; окно масштабируется через --k. */
/* Шрифт Press Start 2P (SIL OFL 1.1, © The Press Start 2P Project Authors): лежит рядом с игрой, не зависит от Google Fonts */
@font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/press-start-2p-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/press-start-2p-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/press-start-2p-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --w1: #8B6F47; --w2: #5C4433; --w3: #3B2B1F; --sand: #D9C9A3; --sand2: #C9B98F; --ink: #2B2113;
  --red: #B33A3A; --red2: #8A2C2C; --gold: #E0B04B; --gold2: #C49A1B; --yel: #E8C25B;
  --green: #3E7B33; --blue: #2C5F8A; --white: #F2EAD8;
  --k: 1;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #14130f; overflow: hidden; overscroll-behavior: none; }
body { font-family: 'Press Start 2P', ui-monospace, Menlo, Consolas, monospace; color: var(--white); text-transform: uppercase; text-shadow: 1px 1px 0 rgba(43, 33, 19, .85); }
.tag, .btn.gold { text-shadow: none; }
nobr, .nw { white-space: nowrap; }

#wrap { position: fixed; left: 50%; top: 50%; width: 340px; height: 604px; transform: translate(-50%, -50%) scale(var(--k)); }
#stage { position: relative; width: 340px; height: 604px; overflow: hidden; background: #28313B; image-rendering: pixelated; user-select: none; -webkit-user-select: none; }
#scene { position: absolute; inset: 0; }
#scene.hide { display: none; }
#battle { position: absolute; inset: 0; }
#battle.hide { display: none; }
#layer { position: absolute; inset: 0; }
.abs { position: absolute; }

/* ---------- базовые элементы ---------- */
button { font: inherit; color: inherit; text-transform: inherit; padding: 0; border: 0; background: none; cursor: pointer; }
button:disabled, .off { opacity: .45; cursor: not-allowed; }
.f5 { font-size: 6px; } .f6 { font-size: 7px; } .f7 { font-size: 8px; } .f8 { font-size: 9px; } .f9 { font-size: 10px; }
.f10 { font-size: 11px; } .f11 { font-size: 12px; } .f12 { font-size: 13px; } .f15 { font-size: 16px; }
.lh { line-height: 1.9; }
.sand { color: var(--sand); } .gold { color: var(--yel); } .ink { color: var(--w3); } .brn { color: var(--w1); } .okc { color: #9BC98F; } .bad { color: #E08B78; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; text-align: center; background: var(--w1); border: 2px solid var(--w2); box-shadow: inset 0 0 0 1px var(--sand); color: var(--white); padding: 9px 8px; font-size: 8px; }
.btn:hover:not(:disabled):not(.off) { filter: brightness(1.12); }
.btn:active:not(:disabled):not(.off) { transform: translateY(1px); }
.btn.red { background: var(--red); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--yel); }
.btn.gold { background: var(--gold2); border-color: var(--ink); box-shadow: inset 0 0 0 1px #F5DFA0; color: var(--w3); }
.btn.flat { background: var(--w2); border-color: var(--ink); box-shadow: none; }
.btn.sm { padding: 6px 7px; font-size: 7px; white-space: nowrap; }
.btn.lg { padding: 12px 14px; font-size: 9px; }
.btn.block { display: flex; width: 100%; }

.dash { height: 3px; background: repeating-linear-gradient(90deg, var(--red) 0 6px, transparent 6px 11px); }
.frame { height: 4px; background: repeating-linear-gradient(90deg, var(--red) 0 5px, var(--yel) 5px 8px, var(--blue) 8px 13px, transparent 13px 17px); }

.chip { display: flex; align-items: center; gap: 3px; background: var(--w1); border: 2px solid var(--w2); box-shadow: inset 0 0 0 1px var(--sand); padding: 3px 5px; font-size: 8px; }
.panel { position: absolute; background: var(--w1); border: 3px solid var(--w2); box-shadow: inset 0 0 0 2px var(--sand); padding: 14px; }
/* доска из брёвен: вертикальные плахи с тёмными стыками, резная кайма */
.scroll { position: absolute; background: repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, transparent 2px 54px), linear-gradient(180deg, #6b4f33, #5a4029); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--w1), inset 0 0 0 4px var(--w2), 0 0 0 2px rgba(0,0,0,.4); padding: 14px; color: var(--white); }
.scroll .ink { color: var(--yel); } .scroll .brn { color: #D2B487; }
.bar { position: relative; height: 8px; border: 2px solid var(--ink); background: var(--w2); }
.bar > i { display: block; height: 100%; background: var(--red); }
.bar.gold > i { background: var(--gold); }
.shade { position: absolute; inset: 0; background: rgba(43, 33, 19, .55); }
.topbar { position: absolute; top: 0; left: 0; right: 0; background: rgba(59, 43, 31, .4); }
.botbar { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(59, 43, 31, .4); padding: 8px; }
.row { display: flex; align-items: center; }
.gap4 { gap: 4px; } .gap6 { gap: 6px; } .gap8 { gap: 8px; }
.grow { flex: 1 1 auto; min-width: 0; }
.tag { display: inline-block; background: var(--sand); color: var(--w3); border: 2px solid var(--w2); padding: 5px 7px; font-size: 8px; }
.slot { width: 44px; height: 44px; border: 2px dashed var(--sand); background: rgba(92, 68, 51, .5); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
.slot.on { border: 2px solid var(--yel); background: rgba(92, 68, 51, .65); }
.slot.dead { filter: grayscale(1) brightness(.55); }
.slot .lab { position: absolute; bottom: -1px; left: 0; right: 0; text-align: center; font-size: 6px; background: rgba(43, 33, 19, .8); color: var(--yel); }
.villager { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(139, 111, 71, .85); border: 2px solid var(--w2); padding: 3px 4px; cursor: pointer; }
.dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ink); }
.strip { display: flex; gap: 5px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.wheel { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--w2); cursor: pointer; }
.ring { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--w2); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 8px rgba(224, 176, 75, .55); position: relative; }
.ring span { position: absolute; inset: 5px; border-radius: 50%; background: var(--w2); display: flex; align-items: center; justify-content: center; font-size: 7px; }
.entry { display: flex; gap: 8px; align-items: flex-start; background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 7px), var(--w1); border: 2px solid var(--w3); box-shadow: inset 0 0 0 1px rgba(217,201,163,.35); padding: 8px; color: var(--white); }
.rcard { background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 7px), var(--w1); border: 2px solid var(--w3); box-shadow: inset 0 0 0 1px rgba(217,201,163,.35); padding: 8px; }
.rcard.rich { border-color: var(--gold2); box-shadow: inset 0 0 0 1px #F5DFA0; }
.rnum { flex: none; width: 14px; height: 14px; background: var(--red); border: 2px solid var(--ink); color: var(--white); font-size: 7px; display: flex; align-items: center; justify-content: center; }
.entry.good { border-color: var(--green); } .entry.bad { border-color: var(--red); }
.list { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--w1) transparent; }
.tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.tabs button { font-size: 7px; color: var(--sand); background: var(--w2); border: 2px solid var(--w3); padding: 5px 6px; }
.tabs button.on { color: var(--ink); background: var(--gold2); border-color: var(--ink); box-shadow: inset 0 0 0 1px #F5DFA0; }
.switch { position: relative; width: 44px; height: 22px; border: 2px solid var(--ink); background: var(--w2); cursor: pointer; flex: none; }
.switch.on { background: var(--green); }
.switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 14px; background: var(--white); border: 1px solid var(--ink); }
.switch.on i { left: auto; right: 2px; }
select { font: inherit; font-size: 7px; text-transform: uppercase; color: var(--white); background: var(--w2); border: 2px solid var(--ink); padding: 4px; max-width: 150px; }

/* карта */
#hexmap { position: absolute; inset: 0; touch-action: none; cursor: grab; }
#hexmap:active { cursor: grabbing; }
#hexmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#hexmap text { font-family: inherit; }
.mapzoom { position: absolute; right: 8px; top: 58px; display: flex; flex-direction: column; gap: 5px; }
.mapzoom .btn { width: 28px; height: 28px; padding: 0; font-size: 12px; }
.bob { animation: bob .8s steps(2) infinite; }
@keyframes bob { 0% { transform: translateY(0); } 100% { transform: translateY(-1.5px); } }
.pulse { animation: pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { 0% { opacity: .55; } 100% { opacity: 1; } }
.smoke { animation: smoke 2.4s linear infinite; }
.smoke.s2 { animation-delay: 1.2s; }
@keyframes smoke { 0% { transform: translateY(0); opacity: .7; } 100% { transform: translateY(-9px); opacity: 0; } }
.hexg { cursor: pointer; }
.hexg:hover polygon { filter: brightness(1.2); }
.mapbg { background: radial-gradient(ellipse at 50% 44%, #5b6b33 0%, #3d4a26 45%, #1e2514 100%); }
.mapfog { pointer-events: none; background: radial-gradient(ellipse 70% 40% at 20% 30%, rgba(200,205,190,.10), transparent 70%), radial-gradient(ellipse 60% 35% at 80% 70%, rgba(200,205,190,.09), transparent 70%); animation: fogdrift 18s ease-in-out infinite alternate; }
@keyframes fogdrift { 0% { transform: translateX(-14px); } 100% { transform: translateX(14px); } }

#toast { position: absolute; left: 12px; right: 12px; bottom: 96px; text-align: center; background: rgba(0, 0, 0, .82); border: 2px solid var(--yel); color: var(--white); padding: 8px; font-size: 8px; line-height: 1.8; opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 50; }
#toast.show { opacity: 1; }
#toast.err { border-color: var(--red); background: rgba(90, 28, 22, .92); }

@keyframes fill { from { width: 0; } to { width: 100%; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 6px rgba(224, 176, 75, .5); } 50% { box-shadow: 0 0 14px rgba(224, 176, 75, .95); } }
.glow { animation: pulse 1s infinite; }

/* ---- скин в стиле референса ---- */
.btn, .cbtn, .chip, .tray { border-style: solid; image-rendering: pixelated; border-image-repeat: stretch; background-clip: padding-box; }
.btn { border-width: 6px; border-image-source: var(--bi-btn); border-image-slice: 3; border-image-width: 6px; box-shadow: none; padding: 3px 4px; background-color: #8B5A2B; background-image: linear-gradient(#A0693A, #7A4B25); color: var(--white); text-shadow: 1px 1px 0 #2B1A0E; }
.btn.red { border-image-source: var(--bi-red); background-color: #A03434; background-image: linear-gradient(#B94444, #8A2C2C); }
.btn.gold { border-image-source: var(--bi-gold); background-color: #C49A1B; background-image: linear-gradient(#E0B84A, #B08812); color: #3B2B1F; text-shadow: none; }
.btn.flat { border-image-source: var(--bi-flat); background-color: #5A3A1C; background-image: none; }
.btn.sm { padding: 2px 3px; }
.btn.lg { padding: 5px 7px; }
.btn hd-icon { flex: none; }
.chip { border-width: 6px; border-image-source: var(--bi-plate); border-image-slice: 3; border-image-width: 6px; padding: 0 2px; background-color: #5A3A1C; background-image: linear-gradient(#6E4520, #4F3218); box-shadow: none; }

.cbtn { width: 64px; height: 64px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-width: 8px; border-image-slice: 4; border-image-width: 8px; font-size: 8px; color: #F2EAD8; text-shadow: 1px 1px 0 #2B1A0E, -1px 0 0 #2B1A0E; padding: 0; }
.cbtn.red { border-image-source: var(--bi-redM); background-color: #A03434; background-image: linear-gradient(#C24646, #8A2C2C); }
.cbtn.blue { border-image-source: var(--bi-blueM); background-color: #2A4E9A; background-image: linear-gradient(#3D68B8, #1F3D80); }
.cbtn:hover { filter: brightness(1.12); }
.cbtn:active { transform: translateY(1px); }

.hudb { position: absolute; left: 0; right: 0; bottom: 0; }
.hudb .fence { height: 28px; background: var(--fence-top) repeat-x 0 0 / 40px 28px; image-rendering: pixelated; margin-bottom: -1px; }
.hudb .planks { background: var(--planks) 0 0 / 40px 40px; image-rendering: pixelated; padding: 6px 8px 8px; border-top: 0; box-shadow: inset 0 3px 0 rgba(20,10,4,.35); }
.tray { flex: 1 1 auto; min-width: 0; border-width: 6px; border-image-source: var(--bi-flat); border-image-slice: 3; border-image-width: 6px; background-color: #3A2612; padding: 0; display: flex; align-items: center; }
.tray .strip { padding: 2px; width: 100%; }
.status { background: linear-gradient(rgba(43,26,14,.62), rgba(43,26,14,.62)), var(--planks) 0 0 / 40px 40px; image-rendering: pixelated; border-top: 2px solid #2B1A0E; border-bottom: 2px solid #2B1A0E; }

.panel { border-width: 12px; border-style: solid; border-image-source: var(--bi-panelL); border-image-slice: 6; border-image-width: 12px; border-image-repeat: stretch; image-rendering: pixelated; background-clip: padding-box; box-shadow: none; padding: 6px 4px; background-color: #8B5A2B; background-image: var(--planks); background-size: 40px 40px; }
.panel.tight { padding: 2px; }

/* ---- камера сцены и компактные панели ---- */
/* слой интерфейса пропускает жесты к сцене; кликабельны только его элементы */
#layer { pointer-events: none; }
#layer > * { pointer-events: auto; }
#scene { cursor: grab; }
#scene:active { cursor: grabbing; }
.topbar { background: linear-gradient(rgba(43,26,14,.55), rgba(43,26,14,.25)); }
.status { background: rgba(43,26,14,.55); border-top: 0; border-bottom: 0; }
.hudb .fence { height: 16px; background-size: 24px 16px; }
.hudb .planks { padding: 4px 6px 5px; }
.cbtn { width: 52px; height: 52px; border-width: 6px; border-image-width: 6px; gap: 2px; font-size: 7px; }

/* подсказки по ресурсам */
[data-act="tip"] { cursor: pointer; }
.chip.on { filter: brightness(1.35); }
.tip { z-index: 5; }

/* бой: кнопки умений с зарядом */
.abbtn { position: relative; width: 31px; height: 34px; flex: none; padding: 0; border: 2px solid var(--ink); background: var(--w1); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.abbtn i { position: absolute; left: 0; right: 0; top: 0; background: rgba(20,12,6,.72); pointer-events: none; }
.abbtn b { position: absolute; right: 0; bottom: 0; background: rgba(43,26,14,.85); line-height: 0; padding: 1px; pointer-events: none; }
.abbtn.ready { border-color: #FFD870; animation: abpulse .8s steps(2) infinite; }
.abbtn.dead { filter: grayscale(1) brightness(.5); cursor: default; }
@keyframes abpulse { 50% { box-shadow: 0 0 0 2px #E0B04B; } }

/* интро и подсказки */
.intro-mist { background: linear-gradient(rgba(226,234,240,.75), rgba(226,234,240,.25) 35%, rgba(226,234,240,0) 60%); animation: mist 6s ease-in-out infinite alternate; }
@keyframes mist { from { opacity: .7; } to { opacity: 1; } }
.tutbox { background: rgba(30,20,10,.94); border: 2px solid #E0B04B; padding: 8px; z-index: 6; box-shadow: 0 0 0 2px #2B1A0E; }
.tut-arrow { position: absolute; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.tut-arrow.down { bottom: -8px; border-top: 8px solid #E0B04B; }
.tut-arrow.up { top: -8px; border-bottom: 8px solid #E0B04B; }

/* ---------- Русь: рушниковая вышивка, бусины, ладинец, солнечное колесо ---------- */
.dash, .frame, .rushnik { height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' shape-rendering='crispEdges'%3E%3Crect width='24' height='1' fill='%23E8C25B'/%3E%3Crect y='9' width='24' height='1' fill='%23E8C25B'/%3E%3Cpath d='M12 1L17 5L12 9L7 5Z' fill='%23B33A3A'/%3E%3Cpath d='M12 3L14 5L12 7L10 5Z' fill='%23F2EAD8'/%3E%3Crect x='0' y='4' width='4' height='2' fill='%23B33A3A'/%3E%3Crect x='20' y='4' width='4' height='2' fill='%23B33A3A'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23F2EAD8'/%3E%3Crect x='21' y='3' width='1' height='1' fill='%23F2EAD8'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 10px; image-rendering: pixelated; }
.ladinets { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Crect x='-8' y='-8' width='16' height='16' fill='none' stroke='%237A3A12' stroke-width='2.6'/%3E%3Crect x='-8' y='-8' width='16' height='16' fill='none' stroke='%23E8C25B' stroke-width='2.6' transform='rotate(45)'/%3E%3Crect x='-8' y='-8' width='16' height='16' fill='none' stroke='%23B33A3A' stroke-width='.9' transform='rotate(45)'/%3E%3Ccircle r='2.4' fill='%23B33A3A'/%3E%3C/svg%3E") center / contain no-repeat; image-rendering: pixelated; }
/* бусины по рамке панелей — как ободок на серебряной подвеске */
.panel::after, .scroll::after { content: ''; position: absolute; inset: -6px; border: 2px dotted rgba(232, 194, 91, .9); pointer-events: none; }
.tutbox::after { content: ''; position: absolute; inset: 2px; border: 1px dotted rgba(232, 194, 91, .6); pointer-events: none; }
/* ладинец перед заголовками панелей */
.panel .f11::before, .panel .f12::before, .panel .f15::before, .scroll .f11::before, .scroll .f12::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Crect x='-8' y='-8' width='16' height='16' fill='none' stroke='%237A3A12' stroke-width='2.6'/%3E%3Crect x='-8' y='-8' width='16' height='16' fill='none' stroke='%23E8C25B' stroke-width='2.6' transform='rotate(45)'/%3E%3Crect x='-8' y='-8' width='16' height='16' fill='none' stroke='%23B33A3A' stroke-width='.9' transform='rotate(45)'/%3E%3Ccircle r='2.4' fill='%23B33A3A'/%3E%3C/svg%3E") center / contain no-repeat; }
/* вышитая кайма под верхней плашкой */
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' shape-rendering='crispEdges'%3E%3Crect width='24' height='1' fill='%23E8C25B'/%3E%3Crect y='9' width='24' height='1' fill='%23E8C25B'/%3E%3Cpath d='M12 1L17 5L12 9L7 5Z' fill='%23B33A3A'/%3E%3Cpath d='M12 3L14 5L12 7L10 5Z' fill='%23F2EAD8'/%3E%3Crect x='0' y='4' width='4' height='2' fill='%23B33A3A'/%3E%3Crect x='20' y='4' width='4' height='2' fill='%23B33A3A'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23F2EAD8'/%3E%3Crect x='21' y='3' width='1' height='1' fill='%23F2EAD8'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 10px; opacity: .8; pointer-events: none; image-rendering: pixelated; }
.wheel { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; filter: drop-shadow(0 0 5px rgba(232, 194, 91, .55)); transition: transform .2s; }
.wheel:active { transform: scale(.94); }
.slot.on { box-shadow: inset 0 0 0 1px rgba(232, 194, 91, .45); }
.btn.gold { box-shadow: 0 0 0 1px rgba(255, 233, 168, .35); }

/* экран загрузки */
.ld-title { font-size: 46px; color: #F2EAD8; text-shadow: 3px 3px 0 #B33A3A, 0 0 18px rgba(255, 220, 130, .6); }
.ld-wheel { animation: ldspin 40s linear infinite; filter: drop-shadow(0 0 14px rgba(255, 220, 130, .7)); }
@keyframes ldspin { to { transform: rotate(360deg); } }
.ld-bead { width: 9px; height: 9px; border-radius: 50%; background: #3B2B1F; border: 1px solid #2B1A0E; animation: ldbead .25s ease-out forwards; }
@keyframes ldbead { to { background: #E8C25B; box-shadow: 0 0 6px #E8C25B; } }

/* благодать: кольцо из бусин */
.gring { position: relative; flex: none; width: 44px; height: 44px; cursor: pointer; filter: drop-shadow(0 0 4px rgba(232, 194, 91, .5)); }
.gring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #3B2B1F; text-shadow: 1px 1px 0 rgba(255, 244, 200, .7); pointer-events: none; }
.gring.full { animation: gfull 1.2s ease-in-out infinite; }
.gring.gain { animation: ggain .9s ease-out 2; }
.gfx { position: absolute; right: -6px; top: -4px; font-size: 8px; color: #FFF2A0; text-shadow: 1px 1px 0 #2B1A0E, -1px -1px 0 #2B1A0E; animation: gup 2.1s ease-out forwards; pointer-events: none; }
@keyframes gfull { 50% { filter: drop-shadow(0 0 10px rgba(255, 216, 112, .95)); } }
@keyframes ggain { 0% { transform: scale(1.18); filter: drop-shadow(0 0 14px #FFE9A8); } 100% { transform: scale(1); } }
@keyframes gup { 0% { transform: translateY(6px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }

/* поля вокруг игрового экрана на высоких и широких окнах: тёмное дерево и вышивка по краям */
html, body { background: linear-gradient(rgba(16, 10, 5, .6), rgba(16, 10, 5, .6)), var(--planks, none) 0 0 / 40px 40px, #14130f; }
#wrap::before, #wrap::after { content: ''; position: absolute; left: 0; right: 0; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' shape-rendering='crispEdges'%3E%3Crect width='24' height='1' fill='%23E8C25B'/%3E%3Crect y='9' width='24' height='1' fill='%23E8C25B'/%3E%3Cpath d='M12 1L17 5L12 9L7 5Z' fill='%23B33A3A'/%3E%3Cpath d='M12 3L14 5L12 7L10 5Z' fill='%23F2EAD8'/%3E%3Crect x='0' y='4' width='4' height='2' fill='%23B33A3A'/%3E%3Crect x='20' y='4' width='4' height='2' fill='%23B33A3A'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23F2EAD8'/%3E%3Crect x='21' y='3' width='1' height='1' fill='%23F2EAD8'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 10px; image-rendering: pixelated; pointer-events: none; z-index: 3; }
#wrap::before { top: -10px; }
#wrap::after { bottom: -10px; }
/* шапка: чип ресурса в два ряда — значение и прирост за ход; помещаются 4 чипа + колесо + благодать */
.chip { flex: 1 1 0; min-width: 0; padding: 0 1px; gap: 2px; }
.chip .cv { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; font-size: 8px; }
.chip .cn { font-size: 6px; }

/* значок «+N» на кнопке хроники */
.cbtn { position: relative; }
.nbadge { position: absolute; right: -6px; top: -7px; min-width: 20px; padding: 2px 3px; text-align: center; font-size: 7px; line-height: 1.2; color: #fff; background: #C23A3A; border: 2px solid #2B1A0E; box-shadow: 0 0 8px rgba(224, 80, 60, .9); animation: nbpulse 1.1s ease-in-out infinite; text-shadow: 1px 1px 0 #2B1A0E; }
@keyframes nbpulse { 50% { transform: scale(1.18); } }