/* OPTIONAL SKIN: the owner's new UI kit (Craftpix art, "MU uus mängu-UI", Design canvas VBpNWCqLWpbpDGhbZttisp), 9-sliced on top of the plain CSS look of site.css.
   Sprites come from assets-raw\ui-design\sprites (baked from Craftpix packs rpg-game-ui + rpg-and-mmo-ui-4) and sit in assets/craft/.
   Craftpix's licence forbids passing the raw art on: deploy/stage-web.ps1 leaves this file and assets/craft/ out of the public upload unless
   the owner passes -IncludeCraftSprites. Without the skin the page uses the plain CSS look. */

body { background: var(--stone-900) url("../assets/craft/stone-bg.jpg") center top / 2048px 2048px repeat; }

/* ---------- Buttons: kit "btn" (brown), hover "btn_hover", primary = red "tab_on" ---------- */
.btn {
  height: 48px; padding: 0 8px; border-style: solid; border-color: transparent; border-width: 12px 19px; border-radius: 0; background: none; box-shadow: none;
  border-image: url("../assets/craft/btn.png") 40 64 fill / 12px 19px stretch; color: #d8cfc2; filter: drop-shadow(0 3px 5px rgba(0,0,0,.55));
}
.btn:hover { color: #fff; background: none; box-shadow: none; border-image-source: url("../assets/craft/btn_hover.png"); filter: drop-shadow(0 0 10px rgba(217,168,118,.4)); }
.btn:active { transform: translateY(1px); }
.btn--primary { border-width: 11px 20px; border-image: url("../assets/craft/tab_on.png") 32 56 fill / 11px 20px stretch; color: #fff; background: none; box-shadow: none; filter: drop-shadow(var(--shadow-ember)); }
.btn--primary:hover { background: none; border-image-source: url("../assets/craft/tab_on.png"); filter: brightness(1.18) drop-shadow(0 0 18px rgba(232,50,31,.6)); }
.btn--sm { height: 42px; border-width: 10px 17px; border-image-width: 10px 17px; padding: 0 4px; }
.btn--primary.btn--sm { border-width: 9px 18px; border-image-width: 9px 18px; }
.btn:disabled { opacity: .5; }
.btn { white-space: nowrap; }
.btn--sm { padding: 0 10px; }

/* ---------- Window panel: stone frame + texture, red pill as the title ---------- */
.panel, .post {
  border-style: solid; border-color: transparent; border-width: 17px;
  border-image: url("../assets/craft/win_frame.png") 48 / 17px stretch;   /* frame only: the inside is the texture below */
  background: url("../assets/craft/panel-tex.jpg") 0 0 / 652px 652px repeat padding-box; box-shadow: none; filter: drop-shadow(var(--shadow-panel));
}
.panel { padding: 52px 14px 10px; }
.panel::before { content: none; }   /* no crest on the window top (owner, 2026-10-09) */
.panel > .panel__title {
  left: 50%; right: auto; top: 6px; width: auto; min-width: 210px; max-width: calc(100% - 20px); height: 40px; transform: translateX(-50%);
  padding: 0 4px; border-style: solid; border-color: transparent; border-width: 0 22px; border-image: url("../assets/craft/title_pill.png") 0 56 fill / 0 22px stretch; background: none;
  font-size: .86rem; letter-spacing: .16em; color: #f1e3cf; text-shadow: 0 1px 3px #000;
}
.post { padding: 18px 16px 4px; }

/* ---------- Section divider ---------- */
.divider { width: min(340px, 72%); height: 16px; gap: 0; background: url("../assets/craft/divider.png") center / 100% 100% no-repeat; }
.divider::before, .divider::after, .divider i { display: none; }

/* ---------- Step numbers: the HP globe of the bar (liquid + bronze ring) ---------- */
.rune {
  position: relative; isolation: isolate; width: 72px; height: 72px; border: 0; border-radius: 0; box-shadow: none;
  background: url("../assets/craft/orb_hp.png") center / 84% no-repeat; text-shadow: 0 2px 4px #000, 0 0 8px rgba(0,0,0,.8); color: #fff3dc;
}
.rune::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../assets/craft/orb_ring.png") center / 100% 100% no-repeat; }
.rune::after  { content: ""; position: absolute; inset: 8%; z-index: -1; border-radius: 50%; background: url("../assets/craft/orb_glass.png") center / 100% 100% no-repeat; opacity: .55; }

/* ---------- Status pill, fields, progress bar: the kit's dark inset ---------- */
.pill { padding: 3px 16px; border: 7px solid transparent; border-image: url("../assets/craft/inset.png") 14 fill / 7px stretch; background: none; }
.setup__field { border: 7px solid transparent; border-radius: 0; border-image: url("../assets/craft/inset.png") 14 fill / 7px stretch; background: none; box-shadow: none; padding: 0 10px; }
.setup__bar { height: 26px; padding: 0; border: 6px solid transparent; border-image: url("../assets/craft/inset.png") 14 fill / 6px stretch; background: none; box-shadow: none; }
.setup__fill { border-radius: 0; }
.hero__badge { padding: 0 8px; height: 34px; display: inline-flex; align-items: center; border-style: solid; border-color: transparent; border-width: 0 22px; border-image: url("../assets/craft/title_pill.png") 0 56 fill / 0 22px stretch; background: none; color: #f1e3cf; text-shadow: 0 1px 3px #000; }

/* ---------- Header ---------- */
.site-header { background: linear-gradient(rgba(11,9,8,.55), rgba(11,9,8,.8)), url("../assets/craft/stone-bg.jpg") center top / 2048px 2048px repeat; }
.nav-toggle { border-color: var(--bronze-700); }
.site-footer { background: linear-gradient(rgba(11,9,8,.6), rgba(11,9,8,.9)), url("../assets/craft/stone-bg.jpg") center top / 2048px 2048px repeat; }

/* ---------- Edge lines (header bottom, hero bottom, footer top): thin bronze line that fades out at both ends; not the ornamental divider ---------- */
.site-header, .hero, .site-footer {
  --edge: linear-gradient(90deg, transparent 0, rgba(94,63,42,.9) 12%, rgba(217,168,118,.85) 50%, rgba(94,63,42,.9) 88%, transparent 100%);
  border-color: transparent; border-style: solid; border-width: 0;
  background-clip: padding-box;   /* the element's own background (the hero's violet sky) must not shine through the faded ends of the line */
}
.site-header { border-bottom-width: 2px; border-image: var(--edge) 1; box-shadow: 0 6px 20px rgba(0,0,0,.6); }
.hero { border-bottom-width: 2px; border-image: var(--edge) 1; box-shadow: 0 6px 20px rgba(0,0,0,.6); }
.site-footer { border-top-width: 2px; border-image: var(--edge) 1; box-shadow: 0 -6px 20px rgba(0,0,0,.6); }   /* same line and shadow as the header, mirrored */

/* ---------- Buttons from Part_4 "Actions Bar" (gray = normal, orange = primary; normal / hover / push) ---------- */
html .btn {
  border-width: 14px; border-image: url("../assets/craft/abtn_gray.png") 36 fill / 14px stretch; color: #eadfce; text-shadow: 0 1px 2px #000;
}
html .btn:hover { border-image-source: url("../assets/craft/abtn_gray-hover.png"); color: #fff; filter: drop-shadow(0 0 10px rgba(217,168,118,.45)); }
html .btn:active { border-image-source: url("../assets/craft/abtn_gray-push.png"); transform: translateY(1px); }
html .btn--primary { border-width: 14px; border-image: url("../assets/craft/abtn_orange.png") 36 fill / 14px stretch; color: #fff; filter: drop-shadow(0 0 10px rgba(232,110,30,.35)); }
html .btn--primary:hover { border-image-source: url("../assets/craft/abtn_orange-hover.png"); filter: drop-shadow(0 0 18px rgba(255,130,40,.55)); }
html .btn--primary:active { border-image-source: url("../assets/craft/abtn_orange-push.png"); }
html .btn--sm { border-width: 12px; border-image-width: 12px; }

/* ---------- Server status lamp: round indicators from Part_9 "Friends Window" (gray = checking, green = online, yellow = maintenance, red = offline) ---------- */
.pill { padding: 0 16px 0 8px; gap: 8px; }
.pill .dot, .pill[data-state] .dot { width: 24px; height: 24px; border-radius: 0; box-shadow: none; background: url("../assets/craft/status-gray.png") center / contain no-repeat; }
.pill[data-state="online"] .dot { background-image: url("../assets/craft/status-green.png"); }
.pill[data-state="maintenance"] .dot { background-image: url("../assets/craft/status-yellow.png"); }
.pill[data-state="offline"] .dot { background-image: url("../assets/craft/status-red.png"); }

#statusCard.panel { padding-top: 12px; }   /* no title pill in this card */