/* «Артиллерия»: сцена на холсте и строгий HUD. Общий класс — .arty: имя
   .art уже занято картинками игр (hub.css растягивает его на 100%).

   Владелец (24.10): «дизайн кнопок должен быть строгий». Отсюда — прямые
   углы, тонкая светлая рамка на тёмной полупрозрачной подложке, узкий шрифт
   заглавными с разрядкой, один акцент (латунь) и красная «Огонь»; деления
   вместо полосок. Шрифт свой: у Barlow Condensed из макета нет кириллицы,
   Roboto Condensed — ближайший узкий с ней. */

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/static-nardy/fonts/roboto-condensed-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/static-nardy/fonts/roboto-condensed-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;
}

.arty {
  --art-panel: rgba(10, 12, 14, .78);
  --art-line: rgba(230, 227, 214, .22);
  --art-text: #e6e3d6;
  --art-mute: #8f9aa1;
  --art-acc: #c9a35a;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  color: var(--art-text);
  letter-spacing: .02em;
}
.arty.hidden, .arty .hidden { display: none !important; }
.art-lbl {
  font-size: 10px; color: var(--art-mute); text-transform: uppercase; letter-spacing: .14em;
}

/* --- поле --- */
#board-wrap-artillery { display: flex; width: 100%; justify-content: center; position: relative; }
#art-box {
  position: relative;
  width: var(--board-w);
  aspect-ratio: var(--board-ratio);
  overflow: hidden;
  border-radius: 3px;
  background: #8fa7b6;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}
#board-artillery {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none; -webkit-touch-callout: none; user-select: none;
}

/* --- HUD: свой / время-ветер-раунд / соперник --- */
#art-hud {
  position: absolute; left: 8px; right: 8px; top: 8px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
  pointer-events: none;
}
.art-plate {
  flex: 1 1 0; min-width: 0; max-width: 176px; box-sizing: border-box; padding: 5px 8px;
  background: var(--art-panel); border: 1px solid var(--art-line);
}
.art-plate.me { border-left: 3px solid var(--art-mute); }
.art-plate.opp { border-right: 3px solid var(--art-mute); }
.art-plate.turn.me, .art-plate.turn.opp { border-color: var(--art-line); }
.art-plate.turn.me { border-left-color: var(--art-acc); }
.art-plate.turn.opp { border-right-color: var(--art-acc); }
.art-plate.shield { box-shadow: inset 0 0 0 1px rgba(150, 205, 255, .55); }
.art-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.art-row b {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.art-tag { font-size: 10px; color: var(--art-mute); text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
.art-plate.turn .art-tag { color: var(--art-acc); }
.art-hp { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.art-hp b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center; }
.art-segs { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 2px; }
.art-segs span { height: 6px; }
.art-center {
  display: flex; align-items: stretch; flex: none;
  background: var(--art-panel); border: 1px solid var(--art-line);
}
.art-cell { padding: 3px 9px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.art-cell + .art-cell { border-left: 1px solid rgba(230, 227, 214, .16); }
.art-cell b {
  font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15;
  display: flex; align-items: center; gap: 3px;
}
.art-cell:first-child b { color: var(--art-acc); }
.art-cell.hot b { color: #ff6a5c; animation: art-blink 1s steps(2) infinite; }
@keyframes art-blink { 50% { opacity: .45; } }
.art-arrow { width: 18px; height: 9px; fill: none; stroke: var(--art-text); stroke-width: 1.8; }
.art-arrow.r { transform: scaleX(-1); }

#art-aimlbl {
  position: absolute; left: 8px; bottom: 8px; pointer-events: none;
  background: rgba(10, 12, 14, .82); border: 1px solid rgba(230, 227, 214, .3);
  padding: 2px 8px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}

#art-note {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  max-width: 86%; box-sizing: border-box; text-align: center; pointer-events: none;
  background: rgba(10, 12, 14, .86); border: 1px solid var(--art-line);
  border-top: 2px solid var(--art-acc); padding: 5px 16px;
  animation: art-up .25s ease both;
}
#art-note.hit { border-top-color: #ff4b3e; }
#art-note b { display: block; font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
#art-note span { display: block; font-size: 11px; color: var(--art-mute); text-transform: uppercase; letter-spacing: .12em; }
@keyframes art-up { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* --- боекомплект --- */
#art-weapons {
  position: absolute; right: 8px; top: 8px; bottom: 8px; width: min(340px, calc(100% - 16px));
  z-index: 4; display: flex; flex-direction: column; overflow-y: auto;
  background: rgba(10, 12, 14, .94); border: 1px solid var(--art-line);
}
.art-whead {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 10px 7px 12px;
  border-bottom: 1px solid rgba(230, 227, 214, .16); position: sticky; top: 0; background: rgba(10, 12, 14, .98);
}
.art-whead b { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.art-whead span { flex: 1; font-size: 10px; color: var(--art-mute); text-transform: uppercase; letter-spacing: .1em; }
.art-x {
  width: 32px; height: 28px; border: 1px solid var(--art-line); background: transparent;
  color: var(--art-text); font-size: 13px; cursor: pointer; align-self: center;
}
.art-wrow {
  display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 10px;
  border: 0; border-bottom: 1px solid rgba(230, 227, 214, .08); border-left: 3px solid transparent;
  background: transparent; color: var(--art-text); font-family: inherit; text-align: left; cursor: pointer;
}
.art-wrow svg { width: 26px; height: 15px; flex: none; fill: var(--art-text); }
.art-wrow b { width: 112px; flex: none; font-size: 14px; font-weight: 700; text-transform: uppercase; }
.art-wdesc { flex: 1; font-size: 12px; color: var(--art-mute); line-height: 1.2; }
.art-wn { width: 26px; text-align: right; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.art-wrow.on { background: rgba(201, 163, 90, .14); border-left-color: var(--art-acc); }
.art-wrow.on .art-wn { color: var(--art-acc); }
.art-wrow.off { opacity: .38; }

/* --- конец раунда --- */
#art-round {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  background: rgba(5, 6, 8, .62); padding: 8px;
}
.art-rcard {
  width: min(500px, 100%); box-sizing: border-box; max-height: 100%; overflow-y: auto;
  background: rgba(10, 12, 14, .95); border: 1px solid var(--art-line); border-top: 3px solid var(--art-acc);
  animation: art-pop .3s ease both;
}
@keyframes art-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.art-rhead {
  display: flex; justify-content: space-between; gap: 8px; padding: 7px 12px;
  border-bottom: 1px solid rgba(230, 227, 214, .16);
  font-size: 11px; color: var(--art-mute); text-transform: uppercase; letter-spacing: .14em;
}
.art-rbody { display: flex; }
.art-rleft {
  width: 42%; padding: 12px; box-sizing: border-box; border-right: 1px solid rgba(230, 227, 214, .16);
  display: flex; flex-direction: column; justify-content: center;
}
.art-rtitle { font-size: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; line-height: 1; color: #ff8a80; }
.art-rtitle.win { color: var(--art-acc); }
.art-rscore { font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 12px; }
.art-rnames {
  display: flex; gap: 14px; font-size: 11px; color: var(--art-mute); text-transform: uppercase; letter-spacing: .1em;
  margin-top: 3px; overflow: hidden; white-space: nowrap;
}
.art-rnames span { overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.art-rstats { flex: 1; padding: 4px 12px; }
.art-rrow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid rgba(230, 227, 214, .08);
}
.art-rrow b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.art-ract { display: flex; border-top: 1px solid rgba(230, 227, 214, .16); }
.art-rbtn {
  height: 44px; border: 0; background: transparent; color: var(--art-mute); font-family: inherit;
  font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  padding: 0 14px;
}
.art-rbtn:first-child { border-right: 1px solid rgba(230, 227, 214, .16); }
.art-rbtn.main { flex: 1; background: var(--art-acc); color: #14110a; font-weight: 700; font-size: 15px; letter-spacing: .12em; }

/* --- управление в колонке (#actionbar) --- */
#art-controls { display: flex; flex-direction: column; gap: 6px; width: 100%; }
#art-controls.theirs { opacity: .55; }
.art-bar {
  display: flex; align-items: stretch;
  background: var(--art-panel); border: 1px solid var(--art-line);
}
.art-btn {
  min-width: 34px; height: 40px; border: 0; background: transparent; color: var(--art-text);
  font-family: inherit; font-size: 18px; font-weight: 600; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; -webkit-touch-callout: none; user-select: none;
}
.art-btn:active:not(:disabled) { background: rgba(230, 227, 214, .1); }
.art-btn:disabled { color: rgba(230, 227, 214, .3); cursor: default; }
.art-btn.sq { width: 44px; flex: none; }
.art-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#art-left { border-right: 1px solid rgba(230, 227, 214, .16); }
#art-right { border-left: 1px solid rgba(230, 227, 214, .16); }
.art-fuel { flex: 1; padding: 5px 8px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.art-fuel .art-segs span { height: 5px; }
.art-tune .art-btn { flex: none; width: 30px; }
.art-val { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.art-val b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.art-tune .art-btn + .art-btn { border-left: 1px solid rgba(230, 227, 214, .16); }
.art-firerow { display: flex; gap: 6px; }
.art-weapon {
  flex: 1; min-width: 0; height: 46px; padding: 0 8px; gap: 8px; justify-content: flex-start; text-align: left;
  background: var(--art-panel); border: 1px solid var(--art-line);
}
.art-weapon svg { width: 24px; height: 14px; flex: none; fill: currentColor; stroke: none; }
.art-weapon span { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.art-weapon b { font-size: 15px; font-weight: 700; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-weapon small { font-size: 10px; color: var(--art-mute); text-transform: uppercase; letter-spacing: .1em; }
.art-fire {
  width: 96px; flex: none; height: 46px; border: 1px solid #ff6a5c; background: #a8261c; color: #fff;
  font-family: inherit; font-size: 18px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer; padding: 0 0 0 .18em;
}
.art-fire:active:not(:disabled) { background: #8e1e15; }
.art-fire:disabled { background: rgba(168, 38, 28, .35); border-color: rgba(255, 106, 92, .35); color: rgba(255, 255, 255, .55); cursor: default; }

/* портрет: ряды шире, а HUD крупнее не нужен — поле и так узкое */
@media (orientation: portrait) {
  /* внизу поля — мини-карта: подпись наводки встаёт над ней */
  #art-aimlbl { bottom: 52px; }
  #art-hud { left: 6px; right: 6px; top: 6px; gap: 4px; }
  .art-plate { padding: 4px 6px; }
  .art-row b { font-size: 13px; }
  .art-tag { display: none; }
  .art-cell { padding: 2px 6px; }
  .art-cell .art-lbl { letter-spacing: .06em; }
  .art-cell b { font-size: 14px; }
}
/* низкий ландшафт: колонка узкая — подписи «угол/сила» над числом мельче */
@media (orientation: landscape) and (max-height: 520px) {
  .art-btn { height: 36px; }
  .art-fuel { padding: 3px 8px; gap: 3px; }
  .art-weapon, .art-fire { height: 42px; }
  .art-weapon { padding: 0 6px; gap: 6px; }
  .art-weapon svg { width: 20px; }
  .art-weapon b { font-size: 13px; }
  .art-fire { width: 78px; font-size: 15px; letter-spacing: .14em; }
}