@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

/* ============================================================
   PanelKroniği — olefor.css
   Namespace: pos | Asset dir: adtu
   ============================================================ */

/* ─── Custom Properties ─────────────────────────────────────── */
:root {
  --pos-primary:       #C07840;
  --pos-secondary:     #3D9E8C;
  --pos-bg:            #1A1208;
  --pos-bg-alt:        #211608;
  --pos-bg-deep:       #120d04;
  --pos-text:          #E8D9B8;
  --pos-text-muted:    #a9967a;
  --pos-text-dim:      #7a6a52;
  --pos-border:        #3a2a14;
  --pos-border-light:  rgba(192,120,64,.35);
  --pos-brass:         #b8843a;
  --pos-teal:          #3D9E8C;
  --pos-teal-dim:      #2a7060;
  --pos-ink:           #0d0904;
  --pos-parchment:     #d4ba8a;
  --pos-header-height: 72px;
  --pos-radius:        2px;
  --pos-radius-card:   3px;
  --pos-font-head:     'Bebas Neue', 'Impact', sans-serif;
  --pos-font-body:     'Crimson Pro', 'Georgia', serif;
  --pos-ease-stamp:    cubic-bezier(.17,.67,.35,1.2);
  --pos-ease-slide:    cubic-bezier(.22,.61,.36,1);
}

/* ─── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--pos-bg);
  color: var(--pos-text);
  font-family: var(--pos-font-body);
  font-size: clamp(1rem, 1.1vw + .6rem, 1.2rem);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pos-font-head);
  line-height: 1.05;
  letter-spacing: .04em;
  color: var(--pos-text);
}

a {
  color: var(--pos-primary);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover, a:focus-visible {
  color: var(--pos-parchment);
  outline: none;
}

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

ul, ol { list-style: none; }

p { color: var(--pos-text); }

/* ─── Reveal on Scroll ──────────────────────────────────────── */
[data-pos-kedo] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

[data-pos-kedo].pos-kedo--in {
  opacity: 1;
  transform: none;
}

/* ─── Container ─────────────────────────────────────────────── */
.pos-sike {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
}

.pos-sike--wide {
  max-width: 1440px;
}

.pos-sike--narrow {
  max-width: 820px;
}

/* ─── Grid ──────────────────────────────────────────────────── */
.pos-emroik {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.pos-emroik--two {
  grid-template-columns: repeat(2, 1fr);
}

.pos-emroik--three {
  grid-template-columns: repeat(3, 1fr);
}

.pos-emroik--four {
  grid-template-columns: repeat(4, 1fr);
}

.pos-emroik--arc {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.pos-emroik--masonry {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
}

/* ─── Header ────────────────────────────────────────────────── */
.pos-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: var(--pos-header-height);
  background: rgba(18, 9, 4, .92);
  border-bottom: 1px solid var(--pos-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .3s ease, box-shadow .3s ease;
}

.pos-header--scrolled {
  background: rgba(10, 6, 2, .98);
  box-shadow: 0 2px 24px rgba(0,0,0,.7), 0 0 0 1px var(--pos-border-light);
}

.pos-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* ─── Logo ──────────────────────────────────────────────────── */
.pos-pumi {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  flex-shrink: 0;
}

.pos-pumi__mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 2px;
}

.pos-pumi__text {
  font-family: var(--pos-font-head);
  font-size: 1.55rem;
  letter-spacing: .08em;
  color: var(--pos-text);
  line-height: 1;
  text-transform: uppercase;
}

.pos-pumi__text span {
  color: var(--pos-primary);
}

/* ─── Navigation ─────────────────────────────────────────────── */
.pos-dona {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pos-dona__list {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
}

.pos-dona__item {
  position: relative;
}

.pos-dona__link {
  font-family: var(--pos-font-head);
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--pos-text-muted);
  text-transform: uppercase;
  padding: .35rem .1rem;
  transition: color .2s ease;
  white-space: nowrap;
}

.pos-dona__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pos-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--pos-ease-slide);
}

.pos-dona__link:hover,
.pos-dona__link:focus-visible {
  color: var(--pos-text);
}

.pos-dona__link:hover::after,
.pos-dona__link:focus-visible::after {
  transform: scaleX(1);
}

/* ─── Hamburger ─────────────────────────────────────────────── */
.pos-suguba {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--pos-border-light);
  border-radius: var(--pos-radius);
  padding: 8px;
  flex-shrink: 0;
}

.pos-suguba__line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--pos-text);
  border-radius: 1px;
  transition: transform .3s ease, opacity .3s ease;
  transform-origin: center;
}

.pos-suguba--open .pos-suguba__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.pos-suguba--open .pos-suguba__line:nth-child(2) {
  opacity: 0;
}

.pos-suguba--open .pos-suguba__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── Hero ──────────────────────────────────────────────────── */
.pos-laaf {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(560px, 90vh, 900px);
  gap: 0;
  margin-top: var(--pos-header-height);
  overflow: hidden;
  background: var(--pos-bg-deep);
}

.pos-laaf--comic-cover {
  border-bottom: 4px solid var(--pos-primary);
}

.pos-laaf--comic-cover {
  border-bottom: 4px solid var(--pos-primary);
}

/* Hero media column */
.pos-dibo {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  order: 2;
}

/* Hero overlay (decorative dim on media col) */
.pos-onemul {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(26, 18, 8, .6) 0%,
    rgba(26, 18, 8, .1) 100%
  );
  pointer-events: none;
}

/* Decorative diagonal cut */
.pos-urzare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.pos-urzare::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(to right, var(--pos-bg-deep) 0%, transparent 100%);
  clip-path: polygon(0 0, 60% 0, 100% 100%, 0 100%);
}

/* Hero content column */
.pos-poosuk {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 8vh, 6rem);
  padding-inline: clamp(1.5rem, 6vw, 4.5rem);
  order: 1;
  background: linear-gradient(
    135deg,
    rgba(26, 18, 8, .98) 0%,
    rgba(26, 18, 8, .85) 100%
  );
}

/* Hero kicker */
.pos-naga {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--pos-font-head);
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pos-secondary);
  margin-bottom: 1rem;
}

.pos-naga::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--pos-secondary);
}

/* Hero title */
.pos-ofvala {
  font-family: var(--pos-font-head);
  font-size: clamp(3.2rem, 7vw, 6rem);
  line-height: .95;
  letter-spacing: .03em;
  color: var(--pos-text);
  text-transform: uppercase;
  margin-bottom: .75rem;
}

.pos-ofvala em {
  color: var(--pos-primary);
  font-style: normal;
}

/* Hero subtitle */
.pos-epabim {
  font-family: var(--pos-font-head);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  letter-spacing: .12em;
  color: var(--pos-primary);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Hero description */
.pos-roke {
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  color: var(--pos-text-muted);
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 1.75rem;
}

/* Hero actions */
.pos-genatu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .85rem;
}

/* ─── Hero media CSS (MEDIA CONTRACT) ───────────────────────── */
.pos-media--tiir {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: unset;
  z-index: 0;
  pointer-events: none;
}

.pos-media--tiir::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.55)),
    url('../assets/images/pos-tiir.webp'),
    linear-gradient(135deg, #1a1208, #0d0904);
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

/* Hero character accent */
.pos-media--piileg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.pos-media--piileg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url('../assets/images/pos-piileg.webp'),
    linear-gradient(135deg, #211608, #1a1208);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 0;
}

/* ─── Stats Row ─────────────────────────────────────────────── */
.pos-kedoka {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  background: rgba(192,120,64,.08);
  border-left: 3px solid var(--pos-primary);
  border-radius: 0 var(--pos-radius) var(--pos-radius) 0;
}

.pos-bifi {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.pos-bifi__value {
  font-family: var(--pos-font-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1;
  color: var(--pos-primary);
  letter-spacing: .04em;
}

.pos-bifi__label {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pos-text-dim);
}

/* ─── Buttons ───────────────────────────────────────────────── */
.pos-pazuse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--pos-font-head);
  font-size: 1rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: var(--pos-radius);
  padding: .7rem 1.8rem;
  cursor: pointer;
  transition:
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    transform .15s var(--pos-ease-stamp),
    box-shadow .22s ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.pos-pazuse:active {
  transform: scale(.96) translateY(1px);
}

.pos-pazuse--primary {
  background: var(--pos-primary);
  border-color: var(--pos-primary);
  color: var(--pos-bg-deep);
}

.pos-pazuse--primary:hover,
.pos-pazuse--primary:focus-visible {
  background: #d48c50;
  border-color: #d48c50;
  color: var(--pos-bg-deep);
  box-shadow: 0 4px 20px rgba(192,120,64,.5);
}

.pos-pazuse--secondary {
  background: transparent;
  border-color: var(--pos-secondary);
  color: var(--pos-secondary);
}

.pos-pazuse--secondary:hover,
.pos-pazuse--secondary:focus-visible {
  background: rgba(61,158,140,.15);
  color: var(--pos-text);
  box-shadow: 0 4px 20px rgba(61,158,140,.3);
}

.pos-pazuse--ghost {
  background: transparent;
  border-color: var(--pos-border-light);
  color: var(--pos-text-muted);
}

.pos-pazuse--ghost:hover,
.pos-pazuse--ghost:focus-visible {
  border-color: var(--pos-text-muted);
  color: var(--pos-text);
}

.pos-seuk {
  pointer-events: none;
}

.pos-mepoti {
  pointer-events: none;
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* ─── Sections Base ─────────────────────────────────────────── */
.pos-dage {
  position: relative;
  padding-block: clamp(4rem, 9vh, 7rem);
  overflow: hidden;
}

.pos-dage--alt {
  background: var(--pos-bg-alt);
}

.pos-dage--dark {
  background: var(--pos-bg-deep);
}

.pos-dage__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.pos-dage__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(26,18,8, 0.60) 0%,
    rgba(26,18,8, 0.60) 50%,
    rgba(26,18,8, 0.60) 100%
  );
}

/* Section header blocks */
.pos-etebsi {
  text-align: center;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
  position: relative;
  z-index: 2;
}

.pos-piboat {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--pos-font-head);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pos-secondary);
  margin-bottom: .85rem;
}

.pos-piboat::before,
.pos-piboat::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--pos-secondary);
}

.pos-suuspa {
  font-family: var(--pos-font-head);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pos-text);
  margin-bottom: .5rem;
}

.pos-suuspa em {
  color: var(--pos-primary);
  font-style: normal;
}

.pos-meduir {
  font-size: clamp(.95rem, 1.3vw, 1.1rem);
  color: var(--pos-text-muted);
  max-width: 640px;
  margin-inline: auto;
  line-height: 1.7;
}

.pos-sukeuz {
  font-size: clamp(.9rem, 1.2vw, 1.05rem);
  color: var(--pos-text-muted);
  max-width: 700px;
  margin-inline: auto;
  margin-top: .75rem;
  line-height: 1.7;
}

/* ─── Section — Chronicle Premise ──────────────────────────── */
.pos-dage--chronicle-premise {
  background: var(--pos-bg-deep);
  padding-block: clamp(5rem, 10vh, 8rem);
}

.pos-dage--chronicle-premise .pos-sike {
  position: relative;
  z-index: 2;
}

.pos-media--oturba {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.pos-media--oturba::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.65)),
    url('../assets/images/pos-oturba.webp'),
    linear-gradient(135deg, #0d0904, #1a1208);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Panel Strip */
.pos-deka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin-top: 2.5rem;
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-card);
  overflow: hidden;
}

.pos-deka__item {
  position: relative;
  padding: 1.75rem 1.5rem;
  border-right: 1px solid var(--pos-border);
  background: rgba(26,18,8,.7);
  transition: background .25s ease;
  overflow: hidden;
}

.pos-deka__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--pos-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.pos-deka__item:hover {
  background: rgba(192,120,64,.06);
}

.pos-deka__item:hover::before {
  transform: scaleX(1);
}

.pos-deka__item:last-child {
  border-right: none;
}

.pos-deka__number {
  font-family: var(--pos-font-head);
  font-size: 3rem;
  line-height: 1;
  color: rgba(192,120,64,.2);
  position: absolute;
  top: .75rem;
  right: 1rem;
  pointer-events: none;
  user-select: none;
}

.pos-deka__title {
  font-family: var(--pos-font-head);
  font-size: 1.2rem;
  letter-spacing: .08em;
  color: var(--pos-text);
  margin-bottom: .6rem;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.pos-deka__cut {
  font-size: .9rem;
  color: var(--pos-text-muted);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.pos-deka__mood {
  display: inline-block;
  margin-top: .75rem;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pos-secondary);
  position: relative;
  z-index: 1;
}

/* ─── Section — Gear Mechanics ──────────────────────────────── */
.pos-dage--gear-mechanics {
  background: var(--pos-bg);
}

.pos-media--abbued {
  position: relative;
  min-height: clamp(220px, 40vh, 520px);
  overflow: hidden;
  border-radius: var(--pos-radius-card);
  margin-bottom: 2rem;
}

.pos-media--abbued::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.45)),
    url('../assets/images/pos-abbued.webp'),
    linear-gradient(135deg, #211608, #1a1208);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* ─── Section — Faction Codex ───────────────────────────────── */
.pos-dage--faction-codex {
  background: var(--pos-bg-alt);
}

/* ─── Section — Episode Arc ─────────────────────────────────── */
.pos-dage--episode-arc {
  background: var(--pos-bg-deep);
}

.pos-media--lainbi {
  position: relative;
  min-height: clamp(220px, 36vh, 460px);
  overflow: hidden;
  border-radius: var(--pos-radius-card);
  margin-bottom: 2rem;
}

.pos-media--lainbi::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.5)),
    url('../assets/images/pos-lainbi.webp'),
    linear-gradient(135deg, #0d0904, #1a1208);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Arc Timeline */
.pos-delipe {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}

.pos-delipe::before {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--pos-primary), var(--pos-border));
  z-index: 0;
}

.pos-delipe__item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  position: relative;
  z-index: 1;
}

.pos-delipe__marker {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--pos-bg-deep);
  border: 2px solid var(--pos-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pos-font-head);
  font-size: .85rem;
  color: var(--pos-primary);
  z-index: 1;
}

/* ─── Section — Artifact Registry ───────────────────────────── */
.pos-dage--artifact-registry {
  background: var(--pos-bg);
}

/* ─── Section — Dispatch Voices ─────────────────────────────── */
.pos-dage--dispatch-voices {
  background: var(--pos-bg-alt);
}

/* ─── Final CTA ─────────────────────────────────────────────── */
.pos-dage--final-cta {
  padding: 0;
}

.pos-uralna {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 12vh, 9rem);
}

.pos-uralna__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pos-uralna__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.62)),
    url('../assets/images/pos-tiir.webp'),
    linear-gradient(135deg, #120d04, #1a1208);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.pos-uralna__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(192,120,64,.12) 0%,
    rgba(61,158,140,.08) 100%
  );
  pointer-events: none;
}

.pos-uralna__inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

.pos-gibo {
  margin-top: 1.25rem;
  font-size: .8rem;
  color: var(--pos-text-dim);
  letter-spacing: .04em;
}

/* ─── Cards ─────────────────────────────────────────────────── */
.pos-card {
  position: relative;
  overflow: hidden;
  background: rgba(26,18,8,.8);
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-card);
  transition: transform .25s var(--pos-ease-slide), box-shadow .25s ease, border-color .25s ease;
}

.pos-card:hover {
  transform: translateY(-4px) skewY(-.3deg);
  border-color: var(--pos-border-light);
  box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(192,120,64,.2);
}

/* Decorative frame — absolute, no content, no height */
.pos-pelo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.pos-pelo::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(192,120,64,.12);
  border-radius: inherit;
}

.pos-pelo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--pos-primary), transparent);
  border-radius: inherit;
}

/* Content layer — relative, in flow, gives height */
.pos-elbeut {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
}

/* Card visual (media slot) */
.pos-card__visual {
  position: relative;
  min-height: clamp(180px, 28vh, 320px);
  aspect-ratio: 2/3;
  overflow: hidden;
  background: var(--pos-bg-deep);
  border-radius: var(--pos-radius-card) var(--pos-radius-card) 0 0;
}

/* Card field styles */
.pos-ogotfu {
  font-family: var(--pos-font-head);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: .06em;
  color: var(--pos-text);
  text-transform: uppercase;
  margin-bottom: .4rem;
  line-height: 1.1;
}

.pos-gife {
  font-size: clamp(.85rem, 1.2vw, .95rem);
  color: var(--pos-text-muted);
  line-height: 1.6;
}

.pos-zear {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: .75rem;
  background: rgba(192,120,64,.12);
  border-radius: var(--pos-radius);
  border: 1px solid var(--pos-border-light);
  flex-shrink: 0;
  color: var(--pos-primary);
}

.pos-teadvu {
  display: inline-block;
  font-family: var(--pos-font-head);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  background: rgba(192,120,64,.15);
  border: 1px solid var(--pos-border-light);
  border-radius: 1px;
  color: var(--pos-primary);
  margin-bottom: .75rem;
}

.pos-uvdiil {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pos-text-dim);
  border-top: 1px solid var(--pos-border);
  margin-top: .85rem;
  padding-top: .75rem;
  width: 100%;
}

.pos-card__trait {
  font-size: .82rem;
  color: var(--pos-secondary);
  font-style: italic;
  margin-top: .35rem;
}

.pos-card__effect {
  font-size: .82rem;
  color: var(--pos-text-muted);
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--pos-border);
}

.pos-card__quote {
  font-style: italic;
  font-size: clamp(.9rem, 1.2vw, 1.05rem);
  color: var(--pos-text);
  line-height: 1.65;
  margin-bottom: 1rem;
  position: relative;
}

.pos-card__quote::before {
  content: '\201C';
  font-family: var(--pos-font-head);
  font-size: 3rem;
  line-height: .5;
  color: var(--pos-primary);
  opacity: .4;
  display: block;
  margin-bottom: .5rem;
}

.pos-card__author {
  font-family: var(--pos-font-head);
  font-size: .95rem;
  letter-spacing: .1em;
  color: var(--pos-text);
  text-transform: uppercase;
}

.pos-card__role {
  font-size: .78rem;
  color: var(--pos-text-dim);
  letter-spacing: .08em;
  margin-top: .15rem;
}

.pos-card__avatar {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--pos-border-light);
  margin-bottom: 1rem;
  background: var(--pos-bg-deep);
  min-height: 64px;
}

.pos-card__rarity {
  display: inline-block;
  font-family: var(--pos-font-head);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: .5rem;
  padding: .18rem .55rem;
  border-radius: 1px;
}

.pos-card__arc-number {
  font-family: var(--pos-font-head);
  font-size: 4rem;
  line-height: 1;
  color: rgba(192,120,64,.15);
  position: absolute;
  top: .5rem;
  right: .75rem;
  pointer-events: none;
  user-select: none;
}

.pos-card__episode-count {
  font-size: .78rem;
  color: var(--pos-text-dim);
  margin-top: .5rem;
  letter-spacing: .06em;
}

.pos-card__status {
  margin-top: .75rem;
}

.pos-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .75rem;
}

.pos-card__panel-number {
  font-family: var(--pos-font-head);
  font-size: 5rem;
  color: rgba(192,120,64,.08);
  position: absolute;
  bottom: -.5rem;
  right: .5rem;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.pos-card__mood {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pos-teal);
  margin-top: .4rem;
  font-style: italic;
}

/* Card Variants */
.pos-card--faction .pos-card__visual {
  aspect-ratio: 2/3;
}

.pos-card--artifact .pos-card__visual {
  aspect-ratio: 3/4;
}

.pos-card--mechanic {
  border-left: 3px solid var(--pos-primary);
}

.pos-card--dispatch {
  background: rgba(61,158,140,.05);
  border-color: rgba(61,158,140,.2);
}

.pos-card--dispatch:hover {
  border-color: rgba(61,158,140,.45);
}

.pos-card--arc {
  border-left: 3px solid var(--pos-secondary);
  padding-left: 1.25rem;
}

/* Faction card visuals */
.pos-media--apus {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pos-media--apus::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.5)),
    url('../assets/images/pos-apus.webp'),
    linear-gradient(135deg, #1a1208, #0d0904);
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

.pos-media--fuobed {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pos-media--fuobed::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.5)),
    url('../assets/images/pos-fuobed.webp'),
    linear-gradient(135deg, #1a1208, #0d0904);
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

.pos-media--tive {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pos-media--tive::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.5)),
    url('../assets/images/pos-tive.webp'),
    linear-gradient(135deg, #1a1208, #0d0904);
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

/* Dispatch portrait visuals */
.pos-media--imafer {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pos-media--imafer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url('../assets/images/pos-imafer.webp'),
    linear-gradient(135deg, #211608, #1a1208);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.pos-media--opto {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pos-media--opto::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url('../assets/images/pos-opto.webp'),
    linear-gradient(135deg, #211608, #1a1208);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.pos-media--iskibu {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pos-media--iskibu::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url('../assets/images/pos-iskibu.webp'),
    linear-gradient(135deg, #211608, #1a1208);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Logo mark via img tag — no ::before needed */

/* ─── Badges ─────────────────────────────────────────────────── */
.pos-badge {
  display: inline-block;
  font-family: var(--pos-font-head);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .22rem .65rem;
  border-radius: 1px;
  border: 1px solid transparent;
  line-height: 1.4;
}

.pos-badge--primary {
  background: rgba(192,120,64,.18);
  border-color: var(--pos-primary);
  color: var(--pos-primary);
}

.pos-badge--secondary {
  background: rgba(61,158,140,.15);
  border-color: var(--pos-secondary);
  color: var(--pos-secondary);
}

.pos-badge--rare {
  background: rgba(80,140,220,.15);
  border-color: #508cdc;
  color: #7eb0f0;
}

.pos-badge--epic {
  background: rgba(140,80,220,.15);
  border-color: #8c50dc;
  color: #b07ef0;
}

.pos-badge--legendary {
  background: rgba(220,160,40,.15);
  border-color: #dca028;
  color: #f0c84a;
}

.pos-badge--mythic {
  background: rgba(220,60,100,.15);
  border-color: #dc3c64;
  color: #f06080;
}

.pos-badge--available {
  background: rgba(61,158,140,.15);
  border-color: var(--pos-secondary);
  color: var(--pos-secondary);
}

.pos-badge--partial {
  background: rgba(192,120,64,.15);
  border-color: var(--pos-primary);
  color: var(--pos-primary);
}

.pos-badge--soon {
  background: rgba(120,120,120,.12);
  border-color: #666;
  color: #888;
}

/* ─── Tags ──────────────────────────────────────────────────── */
.pos-zazove {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--pos-border);
  border-radius: 1px;
  color: var(--pos-text-dim);
}

.pos-mili {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

/* ─── Decorative Elements ───────────────────────────────────── */
.pos-decor-splatter {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: .04;
  font-size: 18rem;
  font-family: var(--pos-font-head);
  color: var(--pos-primary);
  line-height: 1;
  user-select: none;
}

.pos-decor-rivet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pos-border-light);
  display: inline-block;
  flex-shrink: 0;
}

/* ─── Dividers ───────────────────────────────────────────────── */
.pos-bokifo {
  height: 1px;
  background: var(--pos-border);
  margin-block: 2rem;
  border: none;
}

.pos-bokifo--diagonal {
  height: 4rem;
  background: transparent;
  position: relative;
  margin: 0;
  pointer-events: none;
}

.pos-bokifo--diagonal::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4rem;
  background: var(--pos-bg-deep);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.pos-bokifo--ink {
  height: 2px;
  background: linear-gradient(to right, transparent, var(--pos-primary), transparent);
  margin-block: .5rem;
  border: none;
  opacity: .4;
}

/* ─── Panel (for ulenri / evor) ─────────────────────────────── */
.pos-evor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.pos-ulenri {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
}

/* ─── Footer ────────────────────────────────────────────────── */
.pos-gopa {
  background: var(--pos-bg-deep);
  border-top: 1px solid var(--pos-border);
  padding-block: clamp(2.5rem, 5vh, 4rem);
}

.pos-gopa__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 2rem;
}

.pos-gopa__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1rem;
}

.pos-gopa__nav-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
}

.pos-gopa__nav-link {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pos-text-dim);
  transition: color .2s ease;
}

.pos-gopa__nav-link:hover,
.pos-gopa__nav-link:focus-visible {
  color: var(--pos-text-muted);
}

.pos-iralge {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

.pos-apkavi {
  font-size: .82rem;
  color: var(--pos-text-dim);
  font-style: italic;
  margin-bottom: .5rem;
}

.pos-gaodlu {
  font-size: .75rem;
  color: var(--pos-text-dim);
  letter-spacing: .04em;
}

/* ─── Cookie Banner ─────────────────────────────────────────── */
#pos-zebe {
  display: none;
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;
}

#pos-zebe.pos-sesama {
  display: block;
}

.pos-zebe__inner {
  background: rgba(21, 14, 5, .97);
  border: 1px solid var(--pos-border-light);
  border-radius: var(--pos-radius-card);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(192,120,64,.12);
}

.pos-zebe__text {
  flex: 1;
  font-size: .88rem;
  color: var(--pos-text-muted);
  line-height: 1.6;
}

.pos-zebe__link {
  color: var(--pos-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pos-zebe__link:hover {
  color: var(--pos-text);
}

.pos-zebe__actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ─── Demo Page ─────────────────────────────────────────────── */
.pos-demo-wrap {
  padding-top: var(--pos-header-height);
  min-height: 100vh;
  background: var(--pos-bg-deep);
}

.pos-demo-arena {
  background: rgba(26,18,8,.8);
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-card);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.pos-demo-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-block: 1.5rem;
}

.pos-demo-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  border: 1px solid var(--pos-border);
  background: rgba(26,18,8,.9);
  cursor: pointer;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
  user-select: none;
  position: relative;
}

.pos-demo-cell:hover:not(.pos-demo-cell--empty):not(.pos-demo-cell--matched) {
  transform: scale(1.06);
  border-color: var(--pos-border-light);
  box-shadow: 0 4px 14px rgba(192,120,64,.3);
}

.pos-demo-cell--selected {
  border-color: var(--pos-primary);
  box-shadow: 0 0 0 2px rgba(192,120,64,.5);
  transform: scale(1.08);
}

.pos-demo-cell--matched {
  background: rgba(61,158,140,.15);
  border-color: var(--pos-secondary);
  animation: pos-cell-pop .35s var(--pos-ease-stamp) forwards;
}

.pos-demo-cell--empty {
  background: rgba(18,10,4,.9);
  border-color: rgba(58,42,20,.3);
  cursor: default;
}

.pos-demo-cell--hint {
  border-color: rgba(61,158,140,.6);
  animation: pos-cell-hint .8s ease infinite alternate;
}

@keyframes pos-cell-pop {
  0% { transform: scale(1.1); opacity: 1; }
  50% { transform: scale(.9); opacity: .6; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes pos-cell-hint {
  from { box-shadow: 0 0 0 1px rgba(61,158,140,.3); }
  to { box-shadow: 0 0 8px 2px rgba(61,158,140,.5); }
}

.pos-demo-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(18,9,4,.7);
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-card);
  margin-bottom: 1rem;
}

.pos-demo-hud__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}

.pos-demo-hud__val {
  font-family: var(--pos-font-head);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--pos-primary);
}

.pos-demo-hud__lbl {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pos-text-dim);
}

.pos-demo-progress {
  width: 100%;
  height: 6px;
  background: var(--pos-border);
  border-radius: 3px;
  overflow: hidden;
  margin-block: .75rem;
}

.pos-demo-progress__bar {
  height: 100%;
  background: linear-gradient(to right, var(--pos-primary), var(--pos-secondary));
  border-radius: 3px;
  transition: width .4s var(--pos-ease-slide);
}

.pos-demo-feedback {
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pos-font-head);
  font-size: 1.1rem;
  letter-spacing: .1em;
  color: var(--pos-secondary);
  text-align: center;
  transition: opacity .3s ease;
}

.pos-demo-feedback--error {
  color: #e05060;
}

.pos-demo-feedback--success {
  color: var(--pos-secondary);
}

.pos-demo-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

/* ─── Rules Page ─────────────────────────────────────────────── */
.pos-rules-wrap {
  padding-top: var(--pos-header-height);
  min-height: 100vh;
  background: var(--pos-bg);
}

.pos-rules-hero {
  padding-block: clamp(3rem, 8vh, 6rem);
  background: var(--pos-bg-deep);
  border-bottom: 1px solid var(--pos-border);
  text-align: center;
}

.pos-rules-content {
  padding-block: clamp(2rem, 5vh, 4rem);
}

.pos-rules-block {
  margin-bottom: 3rem;
}

.pos-rules-block h2 {
  font-family: var(--pos-font-head);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--pos-primary);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--pos-border);
}

.pos-rules-block h3 {
  font-family: var(--pos-font-head);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--pos-text);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-block: 1rem .5rem;
}

.pos-rules-block p {
  color: var(--pos-text-muted);
  line-height: 1.75;
  margin-bottom: .85rem;
  font-size: clamp(.9rem, 1.2vw, 1.05rem);
}

.pos-rules-block ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}

.pos-rules-block ul li {
  color: var(--pos-text-muted);
  padding: .4rem 0 .4rem 1.5rem;
  position: relative;
  font-size: clamp(.88rem, 1.1vw, 1rem);
  line-height: 1.65;
}

.pos-rules-block ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--pos-primary);
  font-size: .85em;
}

.pos-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-block: 1.5rem;
}

.pos-rules-tile {
  background: rgba(26,18,8,.8);
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-card);
  padding: 1.25rem;
}

.pos-rules-tile h4 {
  font-family: var(--pos-font-head);
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--pos-primary);
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.pos-rules-tile p {
  font-size: .88rem;
  color: var(--pos-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ─── Legal Pages ───────────────────────────────────────────── */
.pos-legal-wrap {
  padding-top: var(--pos-header-height);
  min-height: 100vh;
  background: var(--pos-bg);
}

.pos-legal-hero {
  padding-block: clamp(3rem, 8vh, 5rem);
  background: var(--pos-bg-deep);
  border-bottom: 1px solid var(--pos-border);
  text-align: center;
}

.pos-legal-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--pos-text);
}

.pos-legal-hero p {
  color: var(--pos-text-dim);
  font-size: .85rem;
  margin-top: .5rem;
}

.pos-legal-content {
  padding-block: clamp(2rem, 5vh, 4rem);
}

.pos-legal-content h2 {
  font-family: var(--pos-font-head);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  color: var(--pos-primary);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 2.5rem;
  margin-bottom: .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--pos-border);
}

.pos-legal-content h3 {
  font-family: var(--pos-font-head);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: var(--pos-text);
  letter-spacing: .06em;
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  text-transform: uppercase;
}

.pos-legal-content p {
  color: var(--pos-text-muted);
  line-height: 1.8;
  margin-bottom: .85rem;
  font-size: clamp(.88rem, 1.15vw, 1.02rem);
}

.pos-legal-content ul {
  list-style: none;
  margin-block: .75rem 1rem;
  padding-left: 0;
}

.pos-legal-content ul li {
  color: var(--pos-text-muted);
  padding: .35rem 0 .35rem 1.5rem;
  position: relative;
  font-size: clamp(.86rem, 1.1vw, 1rem);
  line-height: 1.65;
}

.pos-legal-content ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--pos-text-dim);
}

.pos-legal-content a {
  color: var(--pos-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pos-legal-content a:hover {
  color: var(--pos-text);
}

/* ─── Page Hero (inner pages) ───────────────────────────────── */
.pos-page-hero {
  padding-top: calc(var(--pos-header-height) + clamp(2rem, 5vh, 4rem));
  padding-bottom: clamp(2rem, 5vh, 4rem);
  background: var(--pos-bg-deep);
  border-bottom: 2px solid var(--pos-border);
  text-align: center;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pos-emroik--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 899px) {
  /* Nav mobile */
  .pos-suguba {
    display: flex;
  }

  .pos-dona__list {
    display: none;
  }

  .pos-dona--open .pos-dona__list {
    position: fixed;
    left: max(0px, env(safe-area-inset-left));
    right: max(0px, env(safe-area-inset-right));
    top: var(--pos-header-height, 72px);
    width: auto;
    max-width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow-y: auto;
    max-height: calc(100vh - var(--pos-header-height, 72px));
    max-height: calc(100dvh - var(--pos-header-height, 72px));
    background: rgba(10, 6, 2, .98);
    border-bottom: 2px solid var(--pos-primary);
    padding: 1.5rem 2rem;
    gap: .25rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.7);
  }

  .pos-dona--open .pos-dona__item {
    width: 100%;
  }

  .pos-dona--open .pos-dona__link {
    display: block;
    padding: .85rem .5rem;
    font-size: 1.3rem;
    border-bottom: 1px solid var(--pos-border);
    width: 100%;
  }

  /* Hero split → stacked */
  .pos-laaf {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .pos-dibo {
    order: 1;
    min-height: clamp(280px, 45vw, 400px);
  }

  .pos-poosuk {
    order: 2;
  }

  .pos-urzare::before {
    display: none;
  }

  /* Grid collapses */
  .pos-emroik--three {
    grid-template-columns: 1fr;
  }

  .pos-emroik--two {
    grid-template-columns: 1fr;
  }

  .pos-emroik--four {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .pos-gopa__inner {
    grid-template-columns: 1fr;
  }

  /* Panel strip */
  .pos-deka {
    grid-template-columns: 1fr;
  }

  .pos-deka__item {
    border-right: none;
    border-bottom: 1px solid var(--pos-border);
  }

  .pos-deka__item:last-child {
    border-bottom: none;
  }

  /* Cookie banner */
  .pos-zebe__inner {
    flex-direction: column;
    gap: 1rem;
  }

  .pos-zebe__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 599px) {
  .pos-emroik--four {
    grid-template-columns: 1fr;
  }

  .pos-demo-board {
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
  }

  .pos-demo-hud {
    gap: .75rem;
  }

  .pos-kedoka {
    gap: 1rem;
  }

  .pos-delipe::before {
    display: none;
  }

  .pos-delipe__item {
    flex-direction: column;
    gap: .75rem;
  }

  .pos-header__inner {
    padding-inline: 1rem;
  }

  .pos-sike {
    padding-inline: 1rem;
  }
}

/* ─── Scrolled header state ─────────────────────────────────── */
.pos-dona--scrolled {
  box-shadow: 0 2px 24px rgba(0,0,0,.6);
}

/* ─── Focus visible global ──────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--pos-secondary);
  outline-offset: 3px;
}

/* ─── Selection ─────────────────────────────────────────────── */
::selection {
  background: rgba(192,120,64,.35);
  color: var(--pos-text);
}

/* ─── Scrollbar (webkit) ─────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--pos-bg-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--pos-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pos-primary);
}

/* A+ CSS coverage repair (bounded) */
.pos-card__icon-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #C07840 0%, #8B5A2B 60%, #3D9E8C 100%);
  border: 2px solid #C07840;
  clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
  color: #1A1208;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  position: relative;
}
.pos-card__icon-fallback::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(232, 217, 184, 0.2);
  clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
  pointer-events: none;
}
.pos-novidi {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: linear-gradient(170deg, #1F1608 0%, #1A1208 50%, #0F0D06 100%);
  border: 1px solid #C07840;
  border-left: 4px solid #C07840;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  color: #E8D9B8;
  font-family: 'Crimson Pro', serif;
  max-width: 860px;
  margin: 2rem auto;
  position: relative;
  box-shadow: 4px 4px 0 #C07840, 8px 8px 24px rgba(0,0,0,0.7);
}
.pos-novidi::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 16px 16px;
  border-color: transparent transparent #C07840 transparent;
  pointer-events: none;
}
.pos-novidi__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2rem 1rem;
  background: linear-gradient(90deg, rgba(192,120,64,0.18) 0%, transparent 70%);
  border-bottom: 1px solid rgba(192,120,64,0.4);
  position: relative;
}
.pos-novidi__header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #C07840, #3D9E8C);
}
.pos-novidi__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.6rem 2rem;
  background: rgba(26,18,8,0.6);
  border-bottom: 1px solid rgba(192,120,64,0.2);
  font-size: 0.82rem;
  color: rgba(232,217,184,0.65);
  font-style: italic;
  letter-spacing: 0.04em;
}
.pos-novidi__meta > * {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.pos-novidi__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem 2rem;
  flex: 1;
  line-height: 1.7;
  font-size: 1.05rem;
  color: #E8D9B8;
}
.pos-novidi__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background: rgba(192,120,64,0.06);
  border: 1px solid rgba(192,120,64,0.22);
  border-left: 3px solid #3D9E8C;
  position: relative;
}
.pos-novidi__section::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, #3D9E8C, transparent);
}
.pos-novidi__updated {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  background: rgba(61,158,140,0.15);
  border: 1px solid rgba(61,158,140,0.4);
  color: #3D9E8C;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}
.pos-novidi__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 2rem;
  border-top: 1px solid rgba(192,120,64,0.25);
  background: rgba(26,18,8,0.4);
}
.pos-novidi__links a {
  color: #C07840;
  font-family: 'Crimson Pro', serif;
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(192,120,64,0.35);
  transition: color 0.15s, border-color 0.15s;
  padding-bottom: 1px;
}
.pos-novidi__links a:hover {
  color: #3D9E8C;
  border-color: #3D9E8C;
}
.pos-novidi__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.9rem 2rem;
  background: rgba(0,0,0,0.35);
  border-top: 2px solid rgba(192,120,64,0.3);
  font-size: 0.82rem;
  color: rgba(232,217,184,0.5);
  letter-spacing: 0.03em;
}
.pos-dirovo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: rgba(192,120,64,0.25);
  border: 1px solid rgba(192,120,64,0.3);
  margin: 1.5rem 0;
  overflow: hidden;
}
.pos-dirovo > * {
  background: #1A1208;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: #E8D9B8;
}
.pos-gopa__brand-block {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 200px;
  max-width: 280px;
  padding-right: 2rem;
}
.pos-gopa__brand-block > * {
  display: block;
}
.pos-zebe {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: rgba(232,217,184,0.55);
  font-family: 'Crimson Pro', serif;
  font-size: 0.82rem;
  line-height: 1.5;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(192,120,64,0.2);
}
.pos-zebe a {
  color: rgba(192,120,64,0.7);
  text-decoration: none;
  transition: color 0.15s;
}
.pos-zebe a:hover {
  color: #C07840;
}
.pos-pumi__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: sepia(0.25) contrast(1.08) brightness(0.88);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.pos-pumi__img:hover {
  filter: sepia(0.1) contrast(1.12) brightness(0.95);
  transform: scale(1.02);
}
.pos-gada {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem 0;
  align-items: start;
}
.pos-dife {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(145deg, rgba(192,120,64,0.1) 0%, rgba(26,18,8,0.8) 100%);
  border: 1px solid rgba(192,120,64,0.3);
  border-bottom: 3px solid #C07840;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  position: relative;
  color: #E8D9B8;
  font-family: 'Crimson Pro', serif;
}
.pos-dife::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent #C07840 transparent transparent;
  pointer-events: none;
}