/* L2BOH — элементы интерфейса в духе экрана входа Lineage 2.
   Повторяем материал и форму средствами CSS: картинки и шрифты игры не используются (права NCSoft).
   Пипетка с экрана входа: кнопка — верх #494234, середина #362f22, низ #3b2e1e, текст светло-бежевый;
   поле — заливка #161819…#25231f, металлическая рамка с заострёнными концами.
   Подключение: <link rel="stylesheet" href="../shared/l2-ui.css">, классы .l2-btn, .l2-chip, .l2-field, .l2-window. */

:root {
  --l2-btn-hi: #5b5341;      /* блик верхней половины */
  --l2-btn-top: #494234;     /* верхняя половина */
  --l2-btn-mid: #362f22;     /* линия «стекла» */
  --l2-btn-bot: #2c2418;     /* нижняя половина */
  --l2-btn-edge: #15100a;    /* внешний контур */
  --l2-btn-bevel: rgba(226, 205, 150, .42); /* светлая фаска сверху */
  --l2-btn-rim: rgba(150, 128, 86, .38);    /* внутренний ободок */
  --l2-btn-text: #efe4c8;
  --l2-btn-text-dim: #a89c80;
  --l2-gold: #d9b45a;
  --l2-gold-hi: #f4dc9c;
  --l2-field-fill: #17171a;
  --l2-field-fill-2: #24221e;
  --l2-field-rim-hi: #d8cfb6;  /* металл рамки поля, свет */
  --l2-field-rim-lo: #5d5240;  /* металл рамки поля, тень */
  --l2-field-text: #e9e1cf;
  --l2-field-ph: #8f8775;
  --l2-ui-font: "Fira Sans", "Segoe UI", Tahoma, system-ui, sans-serif;
}

/* ---------- Кнопка ---------- */
.l2-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 34px; padding: 0 18px;
  font: 500 15px/1 var(--l2-ui-font); color: var(--l2-btn-text); text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .85);
  background: linear-gradient(180deg, var(--l2-btn-hi) 0%, var(--l2-btn-top) 46%, var(--l2-btn-mid) 50%, var(--l2-btn-bot) 100%);
  border: 1px solid var(--l2-btn-edge); border-radius: 3px;
  box-shadow: inset 0 1px 0 var(--l2-btn-bevel), inset 0 0 0 1px var(--l2-btn-rim), 0 1px 2px rgba(0, 0, 0, .55);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.l2-btn:hover {
  background: linear-gradient(180deg, #6a6049 0%, #564d3b 46%, #3f3627 50%, #332a1c 100%);
  color: #fff3d6;
}
.l2-btn:active, .l2-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #241d13 0%, #2c2418 50%, #3a3122 52%, #463d2d 100%);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(217, 180, 90, .55);
  color: var(--l2-gold-hi);
}
.l2-btn:focus-visible { outline: 2px solid var(--l2-gold); outline-offset: 2px; }
.l2-btn:disabled, .l2-btn[aria-disabled="true"] {
  color: var(--l2-btn-text-dim); cursor: default;
  background: linear-gradient(180deg, #3a362e 0%, #322e27 50%, #2a2620 52%, #26221c 100%);
}
.l2-btn--gold { /* главное действие: «Разместить сервер», «Отправить заявку» */
  color: #2a1d06; text-shadow: 0 1px 0 rgba(255, 240, 200, .5);
  background: linear-gradient(180deg, #f6dd98 0%, #e2bb5e 46%, #c99a3a 50%, #b0832c 100%);
  border-color: #3b2a0c;
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, .75), inset 0 0 0 1px rgba(120, 84, 22, .45), 0 1px 2px rgba(0, 0, 0, .55);
}
.l2-btn--gold:hover { background: linear-gradient(180deg, #fbe7ae 0%, #ebc76c 46%, #d4a645 50%, #bb8e33 100%); color: #1f1504; }
.l2-btn--gold:active { background: linear-gradient(180deg, #a87c28 0%, #b88b33 50%, #d0a24a 52%, #e0b864 100%); color: #1f1504; }

/* Малая кнопка («Сбросить», «×» в жетоне) и приглушённое состояние «0 серверов» */
.l2-btn--sm { min-height: 28px; padding: 0 10px; font-size: 13px; }
.l2-btn.is-zero { color: var(--l2-btn-text-dim); }
.l2-btn.is-zero .n { opacity: .7; }

/* ---------- Переключатель-фильтр (та же кнопка, «вдавлен», когда выбран) ---------- */
.l2-chip { min-height: 32px; padding: 0 12px; font-size: 14px; }
.l2-chip .n { font-variant-numeric: tabular-nums; color: var(--l2-btn-text-dim); font-size: 13px; }
.l2-chip[aria-pressed="true"] .n { color: var(--l2-gold); }
.l2-chip .tick { display: none; width: 12px; height: 12px; }
.l2-chip[aria-pressed="true"] .tick { display: inline-block; }

/* ---------- Поле ввода с заострёнными концами ---------- */
.l2-field {
  --cap: 9px;
  position: relative; display: block; padding: 2px; min-width: 0;
  background: linear-gradient(180deg, var(--l2-field-rim-hi), var(--l2-field-rim-lo) 55%, #8d826b);
  clip-path: polygon(var(--cap) 0, calc(100% - var(--cap)) 0, 100% 50%, calc(100% - var(--cap)) 100%, var(--cap) 100%, 0 50%);
}
.l2-field input, .l2-field select {
  display: block; width: 100%; height: 30px; border: 0; margin: 0; padding: 0 calc(var(--cap) + 8px);
  font: 400 15px var(--l2-ui-font); color: var(--l2-field-text); text-align: center;
  background: linear-gradient(180deg, var(--l2-field-fill), var(--l2-field-fill-2));
  clip-path: polygon(calc(var(--cap) - 1px) 0, calc(100% - var(--cap) + 1px) 0, 100% 50%, calc(100% - var(--cap) + 1px) 100%, calc(var(--cap) - 1px) 100%, 0 50%);
  outline: none;
}
.l2-field select { text-align-last: center; cursor: pointer; }
.l2-field--left input { text-align: left; }
.l2-field input::placeholder { color: var(--l2-field-ph); }
.l2-field:focus-within { background: linear-gradient(180deg, var(--l2-gold-hi), #8a6a2a 55%, var(--l2-gold)); }
/* Фокус поля был виден только сменой цвета рамки (1,98:1). */
/* clip-path срезает outline и тени снаружи, поэтому фокус показываем внутри формы: толще золотая рамка
   и тёплая подсветка заливки. */
.l2-field:focus-within { padding: 3px; }
.l2-field:focus-within input, .l2-field:focus-within select {
  height: 28px; background: linear-gradient(180deg, #2b2417, #1f1a12);
  box-shadow: inset 0 0 0 1px rgba(244, 220, 156, .55);
}
/* Нативный список вариантов: в Windows без этого он может стать светлым со светлым текстом. */
.l2-field select option { background: #1a1510; color: #ece4d8; }
.l2-field select option:disabled { color: #8f8775; }

/* ---------- Окно в духе игрового интерфейса ---------- */
.l2-window {
  position: relative; padding: 3px;
  background: linear-gradient(180deg, #221c16, #19140f);
  border: 1px solid #4a3a28;
}
.l2-window::before { content: ""; position: absolute; inset: 3px; border: 1px solid #2e251d; pointer-events: none; }
.l2-window > .l2-corner { position: absolute; width: 8px; height: 8px; background: var(--l2-gold); transform: rotate(45deg); }
.l2-window > .l2-corner:nth-of-type(1) { top: -4px; left: -4px; }
.l2-window > .l2-corner:nth-of-type(2) { top: -4px; right: -4px; }
.l2-window > .l2-corner:nth-of-type(3) { bottom: -4px; left: -4px; }
.l2-window > .l2-corner:nth-of-type(4) { bottom: -4px; right: -4px; }

@media (prefers-reduced-motion: no-preference) {
  .l2-btn { transition: background-color .12s, color .12s, box-shadow .12s; }
}