/* ═══════════════════ Window theme from the owner's kit sheet ═══════════════════
   Pieces are cut from art/ui/window_kit.png by art/ui/slice_kit.py into assets/ui/kit/ (transparent PNGs) and
   assembled around every modal panel at 0.6 scale: the parchment panel with its thin gold frame is a 9-slice
   border image; beams with the trident and rushnyky run along the top and bottom (caps + stretched wood + centre
   piece); side beams are 3-slice; the four corner pieces with rushnyky cap it all; the round close button and a faint
   sketch of the Sich come from the earlier reference crop. Loaded after hud-v2.css, before mobile.css. */

#panels .shade { padding: 64px 70px 58px; }

.panel {
  position: relative; overflow: visible; color: #3a2412; border-radius: 0; background: none;
  border: 36px solid transparent;
  border-image: url("/assets/ui/kit/panel.png") 60 fill / 36px stretch;
  box-shadow: none;
  max-height: calc(100vh - 130px);
}
.panel::before, .panel > .ornament { display: none; }

.pdeco { position: absolute; display: block; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
/* positions are relative to the panel's padding box (inside the 36px border) */
.pdeco.top-l, .pdeco.top-r, .pdeco.top-m, .pdeco.top-c { top: -82px; height: 86px; z-index: 6; }
.pdeco.top-l { left: -66px; width: 74px; background-image: url("/assets/ui/kit/top_l.png"); }
.pdeco.top-r { right: -66px; width: 74px; background-image: url("/assets/ui/kit/top_r.png"); }
.pdeco.top-m { left: 6px; right: 6px; background-image: url("/assets/ui/kit/top_m.png"); }
.pdeco.top-c { left: 50%; width: 190px; margin-left: -95px; background-image: url("/assets/ui/kit/top_c.png"); z-index: 7; }
.pdeco.bot-l, .pdeco.bot-r, .pdeco.bot-m, .pdeco.bot-c { bottom: -76px; height: 77px; z-index: 6; }
.pdeco.bot-l { left: -64px; width: 74px; background-image: url("/assets/ui/kit/bot_l.png"); }
.pdeco.bot-r { right: -64px; width: 74px; background-image: url("/assets/ui/kit/bot_r.png"); }
.pdeco.bot-m { left: 8px; right: 8px; background-image: url("/assets/ui/kit/bot_m.png"); }
.pdeco.bot-c { left: 50%; width: 194px; margin-left: -97px; background-image: url("/assets/ui/kit/bot_c.png"); z-index: 7; }
.pdeco.side-l, .pdeco.side-r { top: 10px; bottom: 10px; width: 41px; z-index: 5; background-size: 100% 100%; }
.pdeco.side-l { left: -66px; background-image: url("/assets/ui/kit/side_l.png"); }
.pdeco.side-r { right: -66px; background-image: url("/assets/ui/kit/side_r.png"); }
.pdeco.corner-tl, .pdeco.corner-tr, .pdeco.corner-bl, .pdeco.corner-br { width: 139px; height: 134px; z-index: 8; }
.pdeco.corner-tl { left: -86px; top: -98px; background-image: url("/assets/ui/kit/corner_tl.png"); }
.pdeco.corner-tr { right: -86px; top: -98px; background-image: url("/assets/ui/kit/corner_tr.png"); }
.pdeco.corner-bl { left: -84px; bottom: -98px; width: 137px; height: 144px; background-image: url("/assets/ui/kit/corner_bl.png"); }
.pdeco.corner-br { right: -86px; bottom: -98px; width: 137px; height: 144px; background-image: url("/assets/ui/kit/corner_br.png"); }
.pdeco.sketch { bottom: -20px; right: -20px; width: 341px; height: 148px; background-image: url("/assets/ui/window/sketch.png"); opacity: 0.5; z-index: 0; }

.panel-head { position: static; display: block; height: auto; padding: 4px 40px 2px; margin: 0; background: none; border: none; box-shadow: none; }
.panel-head::before, .panel-head::after { display: none; }
.panel-title {
  position: relative; z-index: 4; margin: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 400 26px/1.15 var(--font-title); letter-spacing: 0.5px; color: #6a3a10;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.8), 0 0 1px rgba(90, 50, 10, 0.4); filter: none;
  -webkit-text-fill-color: currentColor; background: none;
}
/* Confirms are narrow: a smaller title keeps phrases like «Видалити акаунт» whole. */
.panel.confirm .panel-title { font-size: 20px; }
.panel-head .close {
  position: absolute; top: -70px; right: 50px; width: 54px; height: 54px; padding: 0; border: none; border-radius: 50%; z-index: 20;
  background: url("/assets/ui/window/close.png") center / contain no-repeat; color: transparent; font-size: 0; cursor: pointer;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5));
}
.panel-head .close:hover { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)) brightness(1.1); }
.panel-head .close:active { transform: translateY(1px); }
.panel-head .close:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }

.panel-body { position: relative; z-index: 1; padding: 4px 8px 6px; overflow: auto; background: none; }

/* ── inside the window ── */
.panel-body h3, .panel-body h4 { font-family: var(--font-title); font-weight: 400; color: #3a2412; }
.panel-body h4 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 14px 0 6px; }
.panel-body h4::after {   /* thin rule with a rhombus in the middle, like the reference dividers */
  content: ""; flex: 1; height: 10px;
  background:
    linear-gradient(45deg, transparent 35%, #a8743a 35% 65%, transparent 65%) center / 10px 10px no-repeat,
    linear-gradient(-45deg, transparent 35%, #a8743a 35% 65%, transparent 65%) center / 10px 10px no-repeat,
    linear-gradient(#b98a4e, #b98a4e) center / 100% 1px no-repeat;
}
.panel-body p.muted, .panel-body .muted.small { color: #6a4b2c; font-style: italic; }

.panel .btn:not(.primary):not(.danger):not(.crystal):not(.tab):not(.mode-card) {
  background: linear-gradient(#6e4322, #4a2a12); color: #fbe9c4; border: 2px solid #b8862f;
  box-shadow: 0 0 0 1px #26150a, inset 0 1px 0 rgba(255, 220, 160, 0.35), 0 3px 0 #26150a; text-shadow: 0 1px 0 #1d0f04;
}
.panel .btn.ghost:not(.danger) { background: linear-gradient(#6e4322, #4a2a12); }
.panel .btn.ghost.danger, .panel .btn.danger {
  background: linear-gradient(#e0533e, #a81d12); color: #fff4e6; border: 2px solid #d9a640;
  box-shadow: 0 0 0 1px #26150a, inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 #5a0c06; text-shadow: 0 1px 0 #5a0a04;
}
.panel .btn.primary { border: 2px solid #d9a640; box-shadow: 0 0 0 1px #26150a, inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 #23430f; }
.panel input[type="text"], .panel input[type="password"], .panel input:not([type]), .panel select, .panel textarea {
  background: linear-gradient(#fff8e6, #f6e8c6); border: 2px solid #b8862f; border-radius: 8px; color: #3a2412;
  box-shadow: inset 0 2px 3px rgba(90, 50, 10, 0.25); padding: 7px 10px; font: 15px var(--font);
}
.panel input:focus, .panel select:focus, .panel textarea:focus { outline: 2px solid #d9a640; outline-offset: 1px; }
.panel input[type="checkbox"] { width: 20px; height: 20px; accent-color: #2a5ba8; }
.panel .btn:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }

/* ── small screens: thinner border, no overhanging corners; bars and side beams stay ── */
@media (max-width: 600px), (max-height: 500px) {
  #panels .shade { padding: 52px 30px 44px; }
  .panel { border-width: 26px; border-image-width: 26px; }
  .pdeco.corner-tl, .pdeco.corner-tr, .pdeco.corner-bl, .pdeco.corner-br { display: none; }
  .pdeco.top-l, .pdeco.top-r, .pdeco.top-m, .pdeco.top-c { top: -62px; height: 64px; }
  .pdeco.top-l { left: -38px; width: 55px; }
  .pdeco.top-r { right: -38px; width: 55px; }
  .pdeco.top-m { left: 14px; right: 14px; }
  .pdeco.top-c { width: 140px; margin-left: -70px; }
  .pdeco.bot-l, .pdeco.bot-r, .pdeco.bot-m, .pdeco.bot-c { bottom: -58px; height: 58px; }
  .pdeco.bot-l { left: -38px; width: 55px; }
  .pdeco.bot-r { right: -38px; width: 55px; }
  .pdeco.bot-m { left: 14px; right: 14px; }
  .pdeco.bot-c { width: 144px; margin-left: -72px; }
  .pdeco.side-l, .pdeco.side-r { width: 30px; top: 6px; bottom: 6px; }
  .pdeco.side-l { left: -44px; }
  .pdeco.side-r { right: -44px; }
  .panel-head .close { width: 44px; height: 44px; top: -54px; right: 18px; }
  .panel-title { font-size: 20px; }
  .pdeco.sketch { width: 256px; height: 111px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .panel { max-height: calc(100vh - 96px); }
}