/*
  PERALA_RPG_01AI3A_THEME_LAYER_BEGIN
  Paikallinen teemakerros D02-pohjan päälle.
  Ei ulkoisia riippuvuuksia. Ei ulkoista importtia. Ei JavaScriptiä.
*/

:root {
  --perala-bg: #050b07;
  --perala-bg2: #0b160d;
  --perala-panel: rgba(7, 21, 12, 0.86);
  --perala-panel2: rgba(8, 25, 13, 0.94);
  --perala-text: #f4ecd2;
  --perala-muted: #d1c4a0;
  --perala-gold: #d8a832;
  --perala-gold2: #f1d27a;
  --perala-green: #23451f;
  --perala-border: rgba(216, 168, 50, 0.32);
  --perala-border2: rgba(216, 168, 50, 0.18);
  --perala-shadow: rgba(0, 0, 0, 0.52);
}

html {
  background: var(--perala-bg);
  color-scheme: dark;
}

body {
  min-height: 100vh;
  color: var(--perala-text) !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(216, 168, 50, 0.16), transparent 28rem),
    radial-gradient(circle at 12% 72%, rgba(55, 105, 46, 0.18), transparent 26rem),
    linear-gradient(180deg, rgba(3, 8, 5, 0.72), rgba(5, 11, 7, 0.98)),
    var(--perala-bg) !important;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 8, 5, 0.88), rgba(3, 8, 5, 0.26), rgba(3, 8, 5, 0.86)),
    linear-gradient(180deg, rgba(3, 8, 5, 0.22), rgba(3, 8, 5, 0.92)),
    url("/assets/peralan-portti-hero.png") center top / cover no-repeat;
  opacity: 0.58;
  filter: saturate(0.92) contrast(1.02);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 8%, rgba(241, 210, 122, 0.10), transparent 18rem),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.38));
}

::selection {
  background: rgba(216, 168, 50, 0.38);
  color: #fff8df;
}

a {
  color: var(--perala-gold2) !important;
  text-decoration-color: rgba(241, 210, 122, 0.50);
  text-underline-offset: 0.18em;
}

a:hover {
  color: #fff0af !important;
  text-decoration-color: rgba(255, 240, 175, 0.85);
}

:focus-visible {
  outline: 3px solid var(--perala-gold2) !important;
  outline-offset: 4px;
  border-radius: 10px;
}

header,
nav,
.site-header,
.topbar,
.navbar {
  background:
    linear-gradient(180deg, rgba(5, 12, 7, 0.96), rgba(7, 18, 10, 0.84)) !important;
  border-bottom: 1px solid var(--perala-border2) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}

nav a,
.site-header a,
.topbar a,
.navbar a {
  color: var(--perala-text) !important;
  font-weight: 700;
}

h1,
h2,
h3 {
  color: var(--perala-text) !important;
  text-wrap: balance;
}

h1 {
  color: #fff5c7 !important;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.34),
    0 0 34px rgba(216, 168, 50, 0.30);
  letter-spacing: -0.035em;
}

h2 {
  color: #f6e6ac !important;
  text-shadow: 0 0 20px rgba(216, 168, 50, 0.14);
}

h3 {
  color: #ead28a !important;
}

p,
li,
dd,
dt {
  color: var(--perala-muted) !important;
}

strong,
b {
  color: #fff0af !important;
}

main > section:first-of-type,
.hero,
.hero-section,
.intro {
  background:
    radial-gradient(circle at 70% 35%, rgba(216, 168, 50, 0.17), transparent 16rem),
    linear-gradient(120deg, rgba(5, 13, 7, 0.94), rgba(10, 27, 14, 0.74)) !important;
  border: 1px solid var(--perala-border) !important;
  border-radius: 28px !important;
  box-shadow:
    0 24px 80px var(--perala-shadow),
    inset 0 1px 0 rgba(255, 240, 175, 0.08);
}

section,
article,
.card,
.panel,
.box,
.notice,
form,
fieldset,
.status,
.feature,
.tile {
  background:
    linear-gradient(180deg, var(--perala-panel), rgba(5, 14, 8, 0.80)) !important;
  border: 1px solid var(--perala-border2) !important;
  border-radius: 22px !important;
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 240, 175, 0.06);
}

.card:hover,
.panel:hover,
.tile:hover,
.feature:hover {
  border-color: var(--perala-border) !important;
}

button,
.button,
.btn,
.cta,
a.button,
a.btn,
a.cta,
input[type="submit"],
input[type="button"] {
  background:
    linear-gradient(180deg, #e1b640, #a67516) !important;
  color: #1c1204 !important;
  border: 1px solid rgba(255, 231, 153, 0.66) !important;
  border-radius: 15px !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 246, 191, 0.40);
  font-weight: 800 !important;
  text-decoration: none !important;
}

button:hover,
.button:hover,
.btn:hover,
.cta:hover,
a.button:hover,
a.btn:hover,
a.cta:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background:
    linear-gradient(180deg, #f0cb64, #bb861d) !important;
  color: #100a02 !important;
}

.badge,
.tag,
.chip,
.pill,
small.badge {
  background: rgba(6, 22, 10, 0.72) !important;
  color: #f5dd93 !important;
  border: 1px solid rgba(216, 168, 50, 0.34) !important;
  border-radius: 999px !important;
}

input,
textarea,
select {
  background: rgba(3, 10, 5, 0.78) !important;
  color: var(--perala-text) !important;
  border: 1px solid rgba(216, 168, 50, 0.32) !important;
  border-radius: 14px !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(209, 196, 160, 0.72) !important;
}

hr {
  border: 0;
  border-top: 1px solid var(--perala-border2);
}

img {
  max-width: 100%;
  height: auto;
}

footer,
.site-footer {
  color: rgba(209, 196, 160, 0.78) !important;
  border-top: 1px solid rgba(216, 168, 50, 0.18) !important;
}

.ok,
.online,
.active {
  color: #a8e26f !important;
}

.warning {
  color: #f1d27a !important;
}

.error,
.danger,
.offline {
  color: #ff9b8d !important;
}

@media (max-width: 760px) {
  body::before {
    opacity: 0.42;
  }

  section,
  article,
  .card,
  .panel,
  .box,
  .notice,
  form,
  fieldset,
  .status,
  .feature,
  .tile {
    border-radius: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/*
  PERALA_RPG_01AI3A_THEME_LAYER_END
*/