/* CY_BORG — окно аккаунта и плашка режима */
.lockbar { background: var(--r); color: #fff; font-family: var(--f-pix); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 20px; text-align: center; border-bottom: 3px solid #000; }
.lockbar[hidden] { display: none; }
#acct-dlg { border: 4px solid var(--y); background: #000; color: #fff; box-shadow: 8px 8px 0 var(--p); padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; }
#acct-dlg::backdrop { background: rgba(0, 0, 0, .78); }
#acct-body { padding: 24px; }
#acct-body h2 { margin: 0 0 12px; font-family: var(--f-head); font-size: 40px; text-transform: uppercase; color: var(--y); line-height: 1; overflow-wrap: anywhere; }
#acct-body form { display: grid; gap: 14px; }
#acct-body .err { color: var(--p); min-height: 1.4em; font-size: 14px; }
#acct-body code { background: #222; padding: 1px 5px; }
#acct-body .btn { border-color: #fff; }
#acct-body .btn.y { border-color: #000; }
.tabs { display: flex; margin-bottom: 14px; border: 2px solid var(--y); }
.tabs button { all: unset; flex: 1; text-align: center; padding: 10px; cursor: pointer; font-family: var(--f-head); text-transform: uppercase; font-weight: 700; letter-spacing: .05em; min-height: 24px; }
.tabs button[aria-selected=true] { background: var(--y); color: #000; }
.tabs button:focus-visible { outline: 3px solid var(--c); outline-offset: -3px; }
.chars { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; max-height: 40vh; overflow: auto; }
.chars li { display: flex; gap: 8px; align-items: stretch; border: 2px solid rgba(255, 255, 255, .5); }
.chars li.cur { border-color: var(--y); }
.chars .open { all: unset; cursor: pointer; flex: 1; padding: 8px 12px; min-height: 44px; display: grid; }
.chars .open:hover { background: rgba(255, 230, 0, .12); }
.chars .open:focus-visible { outline: 3px solid var(--c); outline-offset: -3px; }
.chars .open b { font-family: var(--f-head); font-size: 20px; text-transform: uppercase; }
.chars .open small { font-family: var(--f-pix); opacity: .7; }
.chars .btn { align-self: center; margin-right: 8px; }
@media print { .lockbar { display: none !important; } }

/* ---------- кампании ---------- */
#camp-dlg { border: 4px solid var(--p); background: #000; color: #fff; box-shadow: 8px 8px 0 var(--y); padding: 0; width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; }
#camp-dlg::backdrop { background: rgba(0, 0, 0, .78); }
#camp-body { padding: 24px; }
#camp-body h2 { margin: 0 0 12px; font-family: var(--f-head); font-size: 40px; text-transform: uppercase; color: var(--p); line-height: 1; overflow-wrap: anywhere; }
#camp-body form { display: grid; gap: 14px; margin-top: 14px; }
#camp-body .err { color: var(--p); min-height: 1.4em; font-size: 14px; }
#camp-body .btn { border-color: #fff; }
#camp-body .btn.y { border-color: #000; }
#camp-body .chars li.empty { border-style: dashed; opacity: .75; }
#camp-body select { width: 100%; }
.codebox { border: 3px dashed var(--y); padding: 12px 16px; margin: 12px 0; display: grid; gap: 8px; }
.codebox small { font-family: var(--f-pix); letter-spacing: .1em; text-transform: uppercase; color: var(--p); }
.codebox b { font-family: var(--f-pix); font-size: clamp(30px, 8vw, 48px); letter-spacing: .12em; color: var(--y); }
.slots { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.slots li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 2px solid rgba(255, 255, 255, .5); padding: 8px 12px; min-height: 52px; }
.slots li.empty { border-style: dashed; opacity: .55; }
.slots b { font-family: var(--f-head); font-size: 20px; text-transform: uppercase; display: block; }
.slots small { font-family: var(--f-pix); opacity: .75; }
.camp-sheet .sheet { box-shadow: none; padding: 16px; }
.camp-sheet .sheet-grid { grid-template-columns: 1fr; }
.roles { border: 2px solid var(--y); margin: 0; padding: 8px 12px 12px; display: grid; gap: 8px; }
.roles legend { font-family: var(--f-pix); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; padding: 0 6px; }
.roles label { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; cursor: pointer; min-height: 44px; }
.roles input { width: 20px; height: 20px; accent-color: var(--p); grid-row: span 2; }
.roles small { opacity: .7; font-size: 13px; }
.camp-sheet .sheet-h { grid-template-columns: 1fr; }
.camp-sheet .sheet-h .cl { text-align: left; }
.camp-sheet .sheet-h .nm { overflow-wrap: break-word; }
.banner { background: var(--y); color: #000; padding: 10px 14px; font-weight: 700; border-left: 8px solid var(--p); margin: 0 0 14px; }

/* враги и НИПы мастера */
.npcs { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.npcs > li { border: 2px solid rgba(255, 255, 255, .5); padding: 10px 12px; display: grid; gap: 6px; }
.npcs > li.empty { border-style: dashed; opacity: .6; }
.npcs > li.dead { opacity: .55; border-color: var(--p); }
.npc-h { display: flex; align-items: center; gap: 8px; }
.npc-h b { font-family: var(--f-head); font-size: 22px; text-transform: uppercase; overflow-wrap: anywhere; }
.npc-st { font-family: var(--f-pix); color: var(--y); font-size: 15px; }
.npc-w { margin: 0; padding-left: 18px; font-size: 14px; }
.npc-w small, .npc-t { opacity: .8; font-size: 13px; margin: 0; }
.npc-n { border-left: 3px solid var(--p); padding-left: 8px; }
.npc-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.npc-hp { font-family: var(--f-pix); margin-right: 4px; }
.npc-hp b { font-size: 20px; color: var(--p); }
.npc-pre { margin: 10px 0; }
.npc-pre summary { cursor: pointer; font-family: var(--f-pix); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.npc-pre .row { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.npc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.npc-wr { display: grid; grid-template-columns: 1.2fr .8fr 1.4fr; gap: 6px; margin-top: 6px; }
#camp-body textarea, #camp-body input[type=number] { width: 100%; }
@media (max-width: 560px) { .npc-wr { grid-template-columns: 1fr; } }

/* редактор карт */
.tv-map { border: 2px solid rgba(255, 255, 255, .5); padding: 6px; margin-bottom: 10px; background: #000; }
.tv-map[hidden] { display: none; }
.tvm-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.tvm-h b { font-family: var(--f-head); text-transform: uppercase; }
.tvm-cv { overflow: auto; }
.tvm-cv canvas { display: block; max-width: 100%; height: auto; }
.tv-map.big { position: fixed; inset: 8px; z-index: 50; margin: 0; overflow: auto; border-color: var(--y); }

/* редактор карт: интерфейс */
#camp-dlg.wide { width: min(1040px, calc(100vw - 24px)); }
.map-hd { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.map-dirty { font-family: var(--f-pix); font-size: 13px; color: var(--y); text-transform: uppercase; letter-spacing: .08em; }
.map-name { margin: 6px 0 10px; }
.map-card { border: 2px solid rgba(255, 255, 255, .35); padding: 10px 12px; margin: 10px 0; display: grid; gap: 10px; }
.map-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.map-card-h b { font-family: var(--f-head); font-size: 18px; text-transform: uppercase; color: var(--y); }
.map-card-h .ref { font-size: 12px; opacity: .7; margin: 0; }
.map-pres { display: flex; flex-wrap: wrap; gap: 6px; }
.map-pres .btn.y { background: var(--y); color: #000; }
.map-dims { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.map-step { display: flex; align-items: center; gap: 6px; }
.map-step > span { font-family: var(--f-pix); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .85; min-width: 62px; }
.map-step input[type=number] { width: 64px; text-align: center; }
.map-step input[type=range] { width: 130px; accent-color: var(--p); }
.map-step .btn { min-width: 34px; justify-content: center; }
.map-pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.map-t { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; background: #000; color: #fff; border: 2px solid rgba(255, 255, 255, .4); text-align: left; cursor: pointer; font: inherit; font-size: 13px; line-height: 1.15; min-height: 46px; }
.map-t:hover { border-color: #fff; }
.map-t.on { border-color: var(--y); background: #1c1c00; box-shadow: 3px 3px 0 var(--p); }
.map-t img { image-rendering: pixelated; flex: none; border: 1px solid #000; }
.map-t small { display: block; color: var(--y); font-size: 11px; }
.map-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: #222; font-style: normal; font-size: 20px; }
.map-hint { margin: 0; font-size: 13px; opacity: .85; border-left: 3px solid var(--p); padding-left: 8px; }
.map-tok { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.map-tok[hidden] { display: none; }
.map-tok .field { min-width: 0; flex: 1 1 120px; }
.map-tok input:not([type=checkbox]), .map-tok select { width: 100%; min-width: 0; }
.map-chk { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.map-cvw { position: relative; margin: 10px 0 4px; border: 2px solid rgba(255, 255, 255, .5); background: #000; overflow: auto; max-height: 70vh; }
.map-cvw canvas { display: block; touch-action: none; cursor: crosshair; max-width: none; height: auto; }
.map-cur { position: absolute; pointer-events: none; border: 2px solid var(--y); box-shadow: 0 0 0 1px #000 inset; z-index: 2; }
.map-hover { font-family: var(--f-pix); font-size: 13px; opacity: .8; min-height: 1.4em; }
.map-notes { margin: 6px 0; padding-left: 0; list-style: none; font-size: 13px; display: grid; gap: 4px; }
.map-notes b { color: var(--y); font-family: var(--f-pix); }
.map-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 2px; margin-top: 10px; background: linear-gradient(transparent, #000 22%); }
.map-bar .btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 560px) { .map-pal { grid-template-columns: repeat(2, 1fr); } .map-step input[type=range] { width: 100px; } }

/* библиотека врагов */
.npc-lib { border: 2px solid var(--p); padding: 8px 10px; margin: 10px 0; }
.npc-lib > summary { cursor: pointer; font-family: var(--f-head); text-transform: uppercase; font-size: 18px; color: var(--y); }
.npc-lib .row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; align-items: center; }
.npc-lib input[type=search] { flex: 1 1 200px; min-width: 0; }
.lib-g { margin-top: 10px; }
.lib-gh { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 2px solid rgba(255, 255, 255, .35); padding-bottom: 4px; }
.lib-gh b { font-family: var(--f-pix); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--p); }
.lib-l { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.lib-l li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
.lib-l b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.lib-l small { font-family: var(--f-pix); opacity: .75; font-size: 12px; }

/* трекер боя */
.tv-combat { border: 3px solid var(--p); background: #0a0a0a; margin: 10px 16px; padding: 12px; display: grid; gap: 10px; max-height: 60vh; overflow: auto; }
.tv-combat[hidden] { display: none; }
.cb-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cb-h b { font-family: var(--f-head); font-size: 24px; text-transform: uppercase; color: var(--y); }
.cb-r { font-family: var(--f-pix); color: var(--p); margin-left: 8px; }
.cb-ph { font-family: var(--f-pix); font-size: 12px; margin-left: 10px; opacity: .85; }
.cb-empty { opacity: .7; padding: 6px; }
.cb-round { border: 2px dashed rgba(255,255,255,.35); padding: 8px 10px; display: grid; gap: 8px; }
.cb-steps { display: grid; gap: 3px; font-size: 12.5px; opacity: .9; }
.cb-steps b { display: inline-block; min-width: 18px; text-align: center; background: var(--y); color: #000; margin-right: 6px; }
.cb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cb-col { border: 2px solid rgba(255,255,255,.3); padding: 8px; display: grid; gap: 8px; align-content: start; }
.cb-col.act { border-color: var(--y); box-shadow: 3px 3px 0 var(--p); }
.cb-ch { display: flex; justify-content: space-between; align-items: center; }
.cb-ch b { font-family: var(--f-pix); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
.cb-now { background: var(--y); color: #000; padding: 1px 6px; font-family: var(--f-pix); font-size: 11px; text-transform: uppercase; }
.cb-card { border: 2px solid rgba(255,255,255,.4); padding: 6px 8px; display: grid; gap: 4px; }
.cb-card.pc { border-color: #2de2ff; } .cb-card.npc { border-color: var(--y); } .cb-card.enemy { border-color: var(--p); }
.cb-card.down { opacity: .45; } .cb-card.done { filter: saturate(.4); } .cb-card.sel { outline: 3px solid var(--y); }
.cb-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cb-top b { font-family: var(--f-head); font-size: 18px; text-transform: uppercase; overflow-wrap: anywhere; } .cb-top small { opacity: .7; font-family: var(--f-pix); }
.cb-hp { position: relative; display: block; height: 20px; background: #222; border: 2px solid #000; }
.cb-hp i { position: absolute; inset: 0 auto 0 0; background: #2de27a; } .cb-hp.hurt i { background: var(--y); } .cb-hp.down i { background: var(--p); }
.cb-hp em { position: relative; font-style: normal; font-family: var(--f-pix); font-size: 12px; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; padding-left: 6px; line-height: 16px; }
.cb-st { font-family: var(--f-pix); font-size: 13px; text-transform: uppercase; } .cb-st.ok { color: #2de27a; } .cb-st.hurt { color: var(--y); } .cb-st.down { color: var(--p); }
.cb-meta, .cb-note { font-size: 12px; opacity: .75; } .cb-note { border-left: 3px solid var(--p); padding-left: 6px; }
.cb-its { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; } .cb-it { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(255,255,255,.35); padding: 1px 4px; } .cb-it b { color: var(--y); font-weight: 500; }
.cb-act { display: flex; flex-wrap: wrap; gap: 4px; }
.cb-sub { font-family: var(--f-pix); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--p); display: block; margin-bottom: 4px; }
.cb-calc { border: 2px solid var(--y); padding: 8px 10px; display: grid; gap: 6px; }
.cb-calc .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .cb-res { font-family: var(--f-pix); font-size: 13px; color: var(--y); }
.cb-bot { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; } .cb-used, .cb-log { list-style: none; margin: 0; padding: 0; font-size: 13px; display: grid; gap: 3px; max-height: 18vh; overflow: auto; } .cb-log i { color: var(--p); font-style: normal; font-family: var(--f-pix); margin-right: 4px; }
.cb-setup { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; } .cb-pick { display: grid; gap: 4px; max-height: 32vh; overflow: auto; } .cb-pick input[type=number] { width: 52px; }
@media (max-width: 760px) { .cb-cols, .cb-bot, .cb-setup { grid-template-columns: 1fr; } .tv-combat { margin: 8px; } }
.cb-rules > summary { cursor: pointer; font-family: var(--f-pix); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--y); margin-bottom: 6px; }