/* Экраны поверх канваса (js/screens.js). Цвета — как у панелей интерфейса боя. */
:root {
  --panel: rgba(15, 25, 35, 0.9);
  --line: rgba(255, 255, 255, 0.14);
  --text: #f2f0ea;
  --muted: rgba(242, 240, 234, 0.62);
  --powder: #c99a52;
  --fire: #c0392b;
  --win: #9be37f;
  --lose: #ff7b6b;
  /* Шрифты: Old Standard TT — по мотивам русских наборных шрифтов XIX в., PT Serif — текст и интерфейс */
  --font-title: 'Old Standard TT', Georgia, serif;
  --font-text: 'PT Serif', Georgia, serif;
}

#ui {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
  background: rgba(8, 14, 20, 0.35);
  font: 16px/1.45 var(--font-text); color: var(--text);
  overflow: auto;
}
#ui.dim { background: rgba(0, 0, 0, 0.5); }
#ui.hidden { display: none; }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 24px 28px; width: min(360px, 100%); box-sizing: border-box;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  margin: auto;
}
.panel.wide { width: min(560px, 100%); }
.panel.menu { text-align: center; padding: 36px 32px; }

h1, h2, h3 { font-family: var(--font-title); font-weight: normal; margin: 0 0 8px; }
h1 { font-size: 40px; letter-spacing: 0.02em; }
h2 { font-size: 28px; }
h2.win { color: var(--win); }
h2.lose { color: var(--lose); }
h3 { font-size: 17px; color: var(--powder); margin-top: 16px; }
p { margin: 0 0 12px; }
.sub { color: var(--muted); margin-bottom: 14px; }
.battery { color: var(--powder); }
.note { color: var(--muted); font-size: 14px; margin: 14px 0 0; }

.col { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

button {
  font: inherit; color: var(--text); cursor: pointer;
  background: rgba(255, 255, 255, 0.1); border: 1px solid var(--line); border-radius: 7px;
  padding: 9px 18px;
}
button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); }
button:focus-visible { outline: 2px solid var(--powder); outline-offset: 2px; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--fire); border-color: var(--fire); }
button.primary:hover { background: #d4493a; }
button.danger { border-color: var(--lose); color: var(--lose); }

.levels { display: flex; flex-direction: column; gap: 8px; }
button.level { display: flex; align-items: center; gap: 14px; text-align: left; padding: 10px 14px; }
button.level .num { font: 22px var(--font-title); color: var(--powder); width: 24px; text-align: center; }
button.level .info { flex: 1; display: flex; flex-direction: column; }
button.level small { color: var(--muted); }
button.level .lock { color: var(--muted); font-size: 14px; }

.stars { white-space: nowrap; letter-spacing: 2px; }
.star { color: rgba(255, 255, 255, 0.2); }
.star.on { color: #f3c64a; }
.stars.big { display: block; text-align: center; font-size: 44px; margin: 6px 0 10px; }

dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 14px 0; }
dt { color: var(--muted); }
dd { margin: 0; }
ul.conds { list-style: none; padding: 0; margin: 12px 0; }
ul.conds li { margin: 4px 0; }

/* Брифинг */
.history { color: var(--muted); font-style: italic; border-left: 2px solid var(--powder); padding-left: 12px; }
ul.fleet { list-style: none; padding: 0; margin: 0; }
ul.fleet li { margin: 2px 0; }
ul.fleet small { color: var(--muted); }
.flag { display: inline-block; width: 18px; height: 11px; margin-right: 8px; vertical-align: -1px; border-radius: 1px; }
.flag.uk { background: linear-gradient(90deg, transparent 40%, #fff 40% 60%, transparent 60%),
  linear-gradient(transparent 35%, #fff 35% 65%, transparent 65%), #012169; position: relative; }
.flag.uk::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 44%, #c8102e 44% 56%, transparent 56%),
  linear-gradient(transparent 40%, #c8102e 40% 60%, transparent 60%); }
.flag.fr { background: linear-gradient(90deg, #002395 33.3%, #fff 33.3% 66.6%, #ed2939 66.6%); }

/* Карта кампании */
.panel.campaign { width: min(1040px, 100%); }
.campaign .head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.campaign .total { color: var(--muted); }
.campaign-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.campaign .list { max-height: 62vh; overflow: auto; padding-right: 4px; }
.campaign .list h3:first-child { margin-top: 0; }
@media (max-width: 760px) { .campaign-body { grid-template-columns: 1fr; } .campaign .list { max-height: none; } }
.gate { color: var(--lose); font: 13px var(--font-text); margin-left: 6px; }
.win-note { color: var(--win); }
.gate-note { color: var(--powder); }
button.level.next { border-color: var(--powder); }

svg.map { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--line); }
svg.map .sea { fill: #24506e; }
svg.map .land { fill: #6f7f58; stroke: #c9b07a; stroke-width: 2; }
svg.map .hill { fill: #5d6b49; }
svg.map .lake { fill: #2e6384; }
svg.map .geo { fill: rgba(242, 240, 234, 0.7); font: italic 13px var(--font-title); }
svg.map .geo.town { font-size: 14px; fill: var(--text); }
svg.map .geo.bay { font-size: 18px; fill: rgba(242, 240, 234, 0.45); }
svg.map .geo.note { font-size: 10px; fill: rgba(242, 240, 234, 0.4); }
svg.map .ship-own rect { fill: #d9d4c4; }
svg.map .squadron path { fill: #1a2630; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
svg.map .bat circle { stroke: #0f1923; stroke-width: 2; }
svg.map .bat text { fill: var(--text); font: 12px var(--font-text); paint-order: stroke; stroke: #0f1923; stroke-width: 3px; }
svg.map .bat text.nums { fill: var(--muted); font-size: 11px; }
svg.map .bat.locked circle { fill: #59606a; }
svg.map .bat.open circle { fill: var(--powder); }
svg.map .bat.done circle { fill: var(--win); }
svg.map .bat.next circle { fill: var(--fire); }
svg.map .bat .pulse { fill: none; stroke: var(--fire); stroke-width: 2; animation: pulse 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { from { opacity: 0.9; transform: scale(0.6); } to { opacity: 0; transform: scale(1.5); } }

/* Казна и мастерская */
.treasury { color: var(--powder); white-space: nowrap; }
dd.reward { color: var(--powder); }
dd.reward small { color: var(--muted); }
.panel.workshop { width: min(1040px, 100%); }
.workshop .head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.workshop .total { color: var(--muted); }
.workshop .sub { font-size: 14px; }
.branches { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px 18px; }
.branch h3 { margin-top: 4px; }
.branch .note { margin: 0 0 8px; }
.upg { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: rgba(255, 255, 255, 0.03); }
.upg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.upg-val { margin: 2px 0; }
.upg-val .arrow { color: var(--muted); }
.upg-val .next { color: var(--win); }
.upg small { color: var(--muted); display: block; font-size: 13px; }
.upg-buy { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.upg-buy small.why { display: inline; color: var(--lose); }
button.buy { padding: 5px 12px; font-size: 14px; }
.maxed { color: var(--win); font-size: 14px; }
.ammo-have { color: var(--powder); font-size: 14px; }
.pips { display: inline-flex; gap: 3px; }
.pip { width: 14px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); }
.pip.on { background: var(--powder); }
.seg { display: inline-flex; gap: 0; margin-left: 4px; vertical-align: middle; }
.seg button { padding: 2px 10px; font-size: 14px; border-radius: 0; }
.seg button:first-child { border-radius: 6px 0 0 6px; }
.seg button:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.seg button.on { background: var(--powder); color: #2a1c0c; border-color: var(--powder); }

/* Настройки */
.settings .toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.settings .toggle span { display: flex; flex-direction: column; }
.settings .toggle small { color: var(--muted); font-size: 13px; }
button.switch { min-width: 64px; padding: 6px 12px; }
button.switch.on { background: var(--powder); border-color: var(--powder); color: #2a1c0c; }
.settings input[type=range] { width: 180px; accent-color: var(--powder); }
.settings dl.keys { grid-template-columns: max-content 1fr; font-size: 14px; }