:root {

  color-scheme: dark;

  --bg0: #141210;

  --bg1: #1c1916;

  --bg2: #25201b;

  --ink: #e6e8ed;

  --muted: #aeb3bc;

  --ooc: #a89880;

  --copper: #b8884a;

  --gold: #c9a86a;

  --blood: #8a4540;

  --sea: #5a7a7e;

  --line: rgba(180, 150, 100, 0.28);

  --line-strong: rgba(180, 150, 100, 0.45);

  --panel: #1f1a15;

  --input: #12100e;

  --radius: 2px;

  --font-display: "Cinzel", "Times New Roman", serif;

  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --shadow: 0 2px 0 rgba(0, 0, 0, 0.4);

  /* Egys?ges panelkeret (kincst?r / .panel) */

  --frame-inset: 5px;

  --frame-edge: 2px;

  --frame-corner: 14px;

  --frame-inner: rgba(180, 150, 100, 0.16);

  --frame-accent: #c9a86a;

  --staff-ink: #e6d5a0;

  /* Fantasy UI tokens */

  --ic-accent: #c9a86a;

  --ooc-accent: #b8884a;

  --btn-face: #7a522c;

  --btn-face-hover: #8a5e34;

  --btn-edge: #b8884a;

  --theme-accent: var(--gold);

  --motif-size: 1.15rem;

  /* UI rendszer ? s?vok (CSS + JS sync: AHARION.ui) */

  --bp-phone: 480px;

  --bp-tablet: 820px;

  --bp-desktop: 1100px;

  --space-1: .35rem;

  --space-2: .65rem;

  --space-3: 1.1rem;

  --space-4: 1.6rem;

  --touch-min: 2.75rem;

  --text-micro: .72rem;

  --text-small: .86rem;

  --text-body: 1.02rem;

}



* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

html { overflow-x: clip; }

body {

  min-height: 100vh;

  min-height: 100dvh;

  color: var(--ink);

  font-family: var(--font-body);

  background: var(--bg0);

  line-height: 1.6;

  font-size: var(--text-body);

  overflow-x: clip;

  /* Mobil billentyű: app.js állítja --vv-offset-bottom-et */

  padding-bottom: var(--vv-offset-bottom, 0px);

}

a { color: var(--gold); text-decoration: none; }

a:hover { color: #e0c48a; }



.bg-atmosphere {

  position: fixed; inset: 0; z-index: -1; pointer-events: none;

  background:

    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(90, 60, 30, 0.22), transparent 55%),

    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0, 0, 0, 0.55), transparent 50%),

    linear-gradient(180deg, #1a1714 0%, #141210 40%, #100e0c 100%);

}

.bg-atmosphere::before {

  content: "";

  position: absolute; inset: 0;

  background-image:

    linear-gradient(rgba(180,150,100,.035) 1px, transparent 1px),

    linear-gradient(90deg, rgba(180,150,100,.035) 1px, transparent 1px);

  background-size: 48px 48px;

  mask-image: radial-gradient(ellipse at 50% 18%, #000 18%, transparent 72%);

  opacity: .45;

}

/* Soft parchment grain + candle vignette */

.bg-atmosphere::after {

  content: "";

  position: absolute; inset: 0;

  background:

    radial-gradient(ellipse 120% 80% at 50% 40%, transparent 40%, rgba(0, 0, 0, 0.45) 100%),

    repeating-linear-gradient(

      -12deg,

      transparent 0,

      transparent 3px,

      rgba(180, 150, 100, 0.015) 3px,

      rgba(180, 150, 100, 0.015) 4px

    );

  opacity: .9;

}



.wrap { width: min(var(--bp-desktop), calc(100% - 2rem)); margin: 0 auto; }



.site-header {

  position: sticky;

  top: 0;

  z-index: 30;

  background: var(--bg0);

  border-bottom: 1px solid var(--line);

  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);

  isolation: isolate;

}

/* Fejl?c sz?lesebb, mint a tartalom ? IC men? kif?r egy sorban */

.site-header .wrap.header-inner {

  width: min(1280px, calc(100% - 2rem));

}

.header-inner {

  display: flex; align-items: flex-start; gap: 1rem; min-height: 3.6rem; flex-wrap: nowrap;

  padding-block: .45rem;

}

.site-header .header-inner {

  border-top: 0;

  background: var(--bg0);

}



/* Fantasy ornamental frame above nav ? brand centered */

.site-frame {

  display: flex;

  align-items: stretch;

  width: 100%;

  height: 64px;

  flex-shrink: 0;

  background:

    linear-gradient(180deg, #161310 0%, #0e0c0a 55%, var(--bg0) 100%);

  border-bottom: 1px solid rgba(180, 150, 100, 0.28);

  text-decoration: none;

  overflow: hidden;

  color: var(--ink);

}

.site-frame:focus {

  outline: none;

}

.site-frame:focus-visible {

  outline: 2px solid var(--gold);

  outline-offset: -2px;

}

.site-frame:hover {

  background:

    linear-gradient(180deg, #1a1612 0%, #12100d 55%, var(--bg0) 100%);

  color: var(--ink);

}

.site-frame-ornament {

  flex: 0 0 72px;

  width: 72px;

  height: 64px;

  display: block;

  object-fit: contain;

  opacity: .92;

}

.site-frame-ornament--r {

  transform: scaleX(-1);

}

.site-frame-mid {

  flex: 1 1 auto;

  min-width: 0;

  display: flex;

  align-items: center;

  gap: .45rem;

  padding: 0 .25rem;

}

.site-frame-rail {

  flex: 1 1 auto;

  height: 1px;

  min-width: .75rem;

  background:

    linear-gradient(90deg, transparent, rgba(201, 168, 106, 0.55) 12%, rgba(201, 168, 106, 0.55) 88%, transparent),

    repeating-linear-gradient(90deg, rgba(184, 136, 74, 0.35) 0 4px, transparent 4px 10px);

  background-size: 100% 1px, 100% 1px;

  background-position: center, center;

  background-repeat: no-repeat, repeat-x;

  box-shadow:

    0 -10px 0 -9px rgba(184, 136, 74, 0.22),

    0 10px 0 -9px rgba(184, 136, 74, 0.22);

}

.site-frame-brand {

  flex: 0 1 auto;

  display: inline-flex;

  align-items: center;

  gap: .55rem;

  min-width: 0;

  padding: 0 .35rem;

}

.site-frame-mark {

  width: 40px;

  height: 40px;

  object-fit: contain;

  flex-shrink: 0;

  border-radius: 2px;

  border: 1px solid rgba(180, 150, 100, 0.35);

  background: rgba(0, 0, 0, 0.25);

}

.site-frame-title {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: clamp(1rem, 2.4vw, 1.35rem);

  letter-spacing: .06em;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: min(52vw, 18rem);

  color: var(--ink);

  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);

}

@media (max-width: 820px) {

  .site-frame { height: 56px; }

  .site-frame-ornament {

    flex-basis: 52px;

    width: 52px;

    height: 56px;

  }

  .site-frame-mark {

    width: 34px;

    height: 34px;

  }

  .site-frame-title {

    font-size: .95rem;

    letter-spacing: .04em;

    max-width: min(42vw, 11.5rem);

  }

}



/* Home hero — full-bleed realm band (kompakt sáv, szöveg felül) */

.main-content:has(.home-hero) {

  padding-top: 0;

}

.home-hero {

  position: relative;

  isolation: isolate;

  overflow: hidden;

  width: 100%;

  max-width: 100%;

  margin-left: 0;

  margin-right: 0;

  margin-bottom: 1.35rem;

  padding: clamp(1.1rem, 2.6vw, 1.55rem) 0 clamp(1.2rem, 2.8vw, 1.65rem);

  color: var(--ink);

  border-bottom: 1px solid var(--line);

  background:

    radial-gradient(ellipse 70% 80% at 8% 40%, rgba(184, 136, 74, 0.14), transparent 55%),

    radial-gradient(ellipse 50% 60% at 92% 20%, rgba(90, 70, 40, 0.16), transparent 50%),

    linear-gradient(180deg, #1a1612 0%, #141210 55%, var(--bg0) 100%);

}

.home-hero--realm {

  min-height: clamp(13.5rem, 28vh, 17.5rem);

  display: flex;

  align-items: flex-start;

  background:

    linear-gradient(100deg, rgba(10, 8, 6, 0.94) 0%, rgba(12, 10, 8, 0.8) 36%, rgba(14, 11, 9, 0.4) 66%, rgba(16, 13, 10, 0.22) 100%),

    linear-gradient(180deg, rgba(10, 8, 6, 0.2) 0%, transparent 42%, rgba(10, 8, 6, 0.5) 100%),

    radial-gradient(ellipse 50% 70% at 82% 48%, rgba(201, 168, 106, 0.12), transparent 58%),

    var(--home-hero-image) center 38% / cover no-repeat,

    linear-gradient(180deg, #1a1612 0%, #141210 100%);

  animation: home-hero-drift 28s ease-in-out infinite alternate;

}

.home-hero-veil {

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:

    linear-gradient(180deg, rgba(10, 8, 6, 0.22) 0%, transparent 40%, rgba(10, 8, 6, 0.4) 100%),

    repeating-linear-gradient(

      -12deg,

      transparent 0,

      transparent 3px,

      rgba(180, 150, 100, 0.015) 3px,

      rgba(180, 150, 100, 0.015) 4px

    );

}

.home-hero-inner {

  position: relative;

  z-index: 1;

  width: min(1100px, calc(100% - 2rem));

  margin: 0 auto;

  animation: home-ink-rise .85s ease both;

}

.home-hero .hero-kicker,

.home-hero-date {

  margin: 0 0 .35rem;

  color: var(--gold);

  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);

}

.home-hero-brand-row {

  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  align-items: center;

  gap: clamp(.55rem, 1.4vw, .85rem);

  margin: 0 0 .5rem;

}

.home-hero-mark {

  width: clamp(48px, 6.5vw, 68px);

  height: clamp(48px, 6.5vw, 68px);

  object-fit: contain;

  flex: 0 0 auto;

  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.45));

  animation: home-mark-glow 4.5s ease-in-out infinite alternate;

}

.home-hero-titles {

  min-width: 0;

  flex: 1 1 auto;

}

.home-hero-brand {

  font-family: var(--font-display);

  font-size: clamp(1.55rem, 3.6vw, 2.25rem);

  font-weight: 700;

  line-height: 1.05;

  letter-spacing: .04em;

  margin: 0 0 .15rem;

  color: var(--ink);

  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);

}

.home-hero-headline {

  font-family: var(--font-display);

  font-size: clamp(.92rem, 1.6vw, 1.12rem);

  font-weight: 600;

  color: var(--gold);

  letter-spacing: .08em;

  margin: 0;

  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);

}

.home-hero .hero-lead {

  max-width: 32rem;

  color: #e4d9c4;

  font-size: clamp(.9rem, 1.35vw, 1rem);

  margin: 0;

  line-height: 1.45;

  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);

}

.home-hero .hero-cta {

  display: flex;

  flex-wrap: wrap;

  gap: .5rem .65rem;

  margin-top: .75rem;

}

.home-welcome {

  margin: -.65rem 0 1.25rem;

  font-size: .92rem;

}

@keyframes home-hero-drift {

  from { background-position: center, center, center, center 36%, center; }

  to { background-position: center, center, center, center 44%, center; }

}

@keyframes home-ink-rise {

  from { opacity: 0; transform: translateY(10px); }

  to { opacity: 1; transform: none; }

}

@keyframes home-mark-glow {

  from { filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.4)); }

  to { filter: drop-shadow(0 4px 18px rgba(201, 168, 106, 0.28)); }

}

@media (max-width: 520px) {

  .home-hero,

  .home-hero--realm {

    min-height: clamp(12.5rem, 32vh, 15.5rem);

    padding: 1rem 0 1.15rem;

    align-items: flex-start;

  }

  .home-hero-brand-row {

    gap: .5rem;

  }

  .home-hero-mark {

    width: 46px;

    height: 46px;

  }

  .home-hero .hero-cta {

    margin-top: .65rem;

  }

}

@media (prefers-reduced-motion: reduce) {

  .home-hero--realm,

  .home-hero-mark,

  .home-hero-inner {

    animation: none;

  }

}



/* Home sections below hero */

.home-section {

  margin: 0 0 1.75rem;

}

.home-section-head {

  margin: 0 0 1rem;

  padding-bottom: .75rem;

  border-bottom: 1px solid rgba(180, 150, 100, 0.22);

}

.home-kicker {

  margin: 0 0 .3rem;

  font-family: var(--font-display);

  font-size: .72rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--gold);

}

.home-section-title {

  margin: 0 0 .35rem;

  font-family: var(--font-display);

  font-size: clamp(1.35rem, 3vw, 1.75rem);

  letter-spacing: .03em;

  color: var(--ink);

}

.home-section-lead {

  margin: 0;

  max-width: 38rem;

  font-size: .95rem;

  line-height: 1.5;

}

.home-empty {

  margin: 0;

  color: var(--muted);

  font-style: italic;

}

.home-section-cta {

  margin: 1rem 0 0;

}



.home-herald-list {

  list-style: none;

  margin: 0;

  padding: 0;

}

.home-herald-list li {

  display: flex;

  flex-direction: column;

  gap: .15rem;

  padding: .65rem 0;

  border-bottom: 1px solid rgba(180, 150, 100, 0.12);

}

.home-herald-list li:last-child { border-bottom: 0; }

.home-herald-list a {

  color: inherit;

  font-family: var(--font-display);

  letter-spacing: .03em;

}

.home-herald-list a:hover { color: var(--gold); }

.home-herald-stream {

  display: grid;

  gap: 1.15rem;

}

.home-herald-item {

  padding-bottom: 1rem;

  border-bottom: 1px solid rgba(180, 150, 100, 0.14);

}

.home-herald-item:last-child {

  border-bottom: 0;

  padding-bottom: 0;

}

.home-herald-title {

  margin: 0 0 .25rem;

  font-family: var(--font-display);

  font-size: 1.15rem;

  letter-spacing: .03em;

  color: var(--gold);

}

.home-herald-when {

  margin: 0 0 .55rem;

  font-size: .82rem;

}

.home-herald-body {

  margin: 0;

  max-width: 42rem;

  line-height: 1.6;

  color: #e4d9c4;

}

.home-herald-mood {

  max-width: 40rem;

}

.home-herald-mood p {

  margin: 0 0 .85rem;

  font-size: 1.02rem;

  line-height: 1.6;

  color: #e4d9c4;

  font-style: italic;

}

.home-herald-mood-note {

  font-style: normal !important;

  font-size: .92rem !important;

  color: var(--muted) !important;

  margin-bottom: 0 !important;

}



/* Udvari suttog?sok (f?oldal) */

.home-court {

  position: relative;

  overflow: visible;

}

.home-court-stream {

  display: grid;

  gap: 1rem;

}



/* Vékony, oldalhoz illő csúszka (suttogások / toplisták) */

.home-scroll {

  overflow-x: hidden;

  overflow-y: auto;

  overscroll-behavior: contain;

  scrollbar-width: thin;

  scrollbar-color: rgba(180, 150, 100, 0.45) rgba(0, 0, 0, 0.18);

  padding-right: .35rem;

  margin-right: -.15rem;

}

.home-scroll::-webkit-scrollbar {

  width: 5px;

}

.home-scroll::-webkit-scrollbar-track {

  background: rgba(0, 0, 0, 0.18);

  border-radius: 999px;

}

.home-scroll::-webkit-scrollbar-thumb {

  background: linear-gradient(180deg, rgba(201, 164, 92, 0.55), rgba(140, 110, 70, 0.4));

  border-radius: 999px;

}

.home-scroll::-webkit-scrollbar-thumb:hover {

  background: rgba(201, 164, 92, 0.75);

}

.home-scroll--whispers {

  /* ~6 suttogás látható; a többi csúszkával */

  max-height: 34rem;

}

.home-scroll--board {

  /* ~10 sor + fejléc */

  max-height: calc(2.05rem + 10 * 1.85rem);

}

.home-scroll--board .home-board-table thead th {

  position: sticky;

  top: 0;

  background: rgba(18, 14, 10, 0.96);

  z-index: 1;

}

.home-court-item {

  position: relative;

  padding: .85rem 1rem .95rem 1.05rem;

  border-left: 3px solid rgba(180, 150, 100, 0.45);

  background: linear-gradient(105deg, rgba(40, 32, 24, 0.35), transparent 70%);

  animation: home-ink-rise .55s ease both;

}

.home-court-item:nth-child(2) { animation-delay: .05s; }

.home-court-item:nth-child(3) { animation-delay: .1s; }

.home-court-item:nth-child(4) { animation-delay: .14s; }

.home-court-item--tronvaros { border-left-color: #c9a45c; }

.home-court-item--vasberc { border-left-color: #8a9aaa; }

.home-court-item--holdliget { border-left-color: #9bb8c9; }

.home-court-item--koromsor { border-left-color: #7a6a5a; }

.home-court-item--solyomrev { border-left-color: #6a9aaa; }

.home-court-meta {

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  gap: .35rem .75rem;

  margin: 0 0 .45rem;

  font-size: .82rem;

}

.home-court-city {

  font-family: var(--font-display);

  letter-spacing: .06em;

  text-transform: uppercase;

  color: var(--gold);

  font-size: .78rem;

}

.home-court-tag {

  color: var(--muted);

  font-size: .78rem;

}

.home-court-when {

  margin-left: auto;

  font-size: .78rem;

}

.home-court-body {

  margin: 0;

  max-width: 44rem;

  line-height: 1.65;

  color: #e8dfd0;

  font-size: 1.02rem;

}

.home-court-body .char-link {

  color: var(--gold);

  text-decoration: none;

  border-bottom: none;

}

.home-court-body .char-link:hover {

  color: #e8d4a0;

}

.home-court-mood .home-section-cta {

  display: flex;

  flex-wrap: wrap;

  gap: .65rem;

  margin-top: 1.1rem;

}

.act-court-lead {

  margin: 0 0 1rem;

  max-width: 40rem;

  line-height: 1.5;

}

.act-court-scandal {

  margin-bottom: 1rem;

}

.act-court-whisper-preview {

  margin-top: .75rem;

}

.act-court-quote {

  margin: .4rem 0 .65rem;

  padding: .65rem .85rem;

  border-left: 2px solid rgba(180, 150, 100, 0.4);

  color: #e4d9c4;

  font-style: italic;

  line-height: 1.55;

}

.work-plate--self,

.work-plate--praise,

.work-plate--scandal {

  background: linear-gradient(145deg, rgba(80, 60, 35, 0.55), rgba(30, 24, 18, 0.7));

}



.home-city-rail {

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: .55rem;

  width: 100%;

  max-width: 100%;

  margin-left: 0;

  margin-right: 0;

  padding: 0 max(.75rem, calc((100% - 1100px) / 2));

}

.home-city {

  position: relative;

  isolation: isolate;

  min-height: 9.5rem;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  gap: .15rem;

  padding: .85rem .75rem;

  color: #f0e6d4;

  text-decoration: none;

  overflow: hidden;

  background:

    linear-gradient(180deg, rgba(12, 10, 8, 0.15), rgba(10, 8, 6, 0.88)),

    var(--home-city-image, none) center / cover no-repeat,

    #1a1510;

  border: 1px solid rgba(180, 150, 100, 0.22);

  transition: border-color .2s ease, transform .25s ease;

}

.home-city-veil {

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background: linear-gradient(180deg, transparent 20%, rgba(8, 6, 5, 0.75) 100%);

}

.home-city-name,

.home-city-epithet {

  position: relative;

  z-index: 1;

}

.home-city-name {

  font-family: var(--font-display);

  font-size: .95rem;

  letter-spacing: .05em;

  position: relative;

  z-index: 1;

}

.home-city-epithet {

  font-size: .72rem;

  color: rgba(232, 220, 196, 0.78);

  letter-spacing: .04em;

  position: relative;

  z-index: 1;

}

.home-city:hover {

  border-color: var(--gold);

  transform: translateY(-2px);

}

.home-city:focus-visible {

  outline: 2px solid var(--gold);

  outline-offset: 2px;

}

.home-city-motif {

  position: absolute;

  top: .55rem;

  right: .55rem;

  z-index: 2;

  width: 2rem;

  height: 2rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: rgba(8, 7, 6, 0.55);

  border: 1px solid rgba(201, 168, 106, 0.4);

  pointer-events: none;

}

.home-city-motif .motif-icon {

  --motif-size: 1.05rem;

}

@media (max-width: 900px) {

  .home-city-rail {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}

@media (max-width: 560px) {

  .home-city-rail {

    grid-template-columns: 1fr 1fr;

    gap: .4rem;

  }

  .home-city { min-height: 8.25rem; }

}

@media (prefers-reduced-motion: reduce) {

  .home-city { transition: none; }

  .home-city:hover { transform: none; }

}



.home-pulse {

  margin-top: 2rem;

  margin-bottom: .5rem;

}

.site-nav {

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  gap: .2rem 1.1rem;

  flex: 1 1 auto;

  min-width: 0;

}

.nav-group {

  display: flex;

  flex-wrap: nowrap;

  align-items: baseline;

  gap: .35rem .65rem;

  flex: 1 1 100%;

  min-width: 0;

}

.nav-group-label {

  font-family: var(--font-display);

  font-size: .68rem;

  letter-spacing: .16em;

  text-transform: uppercase;

  color: var(--gold, #c4a574);

  opacity: .9;

  flex: 0 0 auto;

}

.nav-ic .nav-group-label { color: var(--gold, #c4a574); }

.nav-ooc .nav-group-label { color: var(--copper, #b8884a); }

.nav-group-links {

  display: flex;

  flex-wrap: nowrap;

  gap: .3rem .72rem;

  align-items: baseline;

  min-width: 0;

}

.site-nav a {

  font-family: var(--font-display);

  font-weight: 500;

  font-size: .78rem;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: #c5c9d1;

  padding: .25rem 0;

  border-bottom: 1px solid transparent;

  text-decoration: none;

  white-space: nowrap;

  position: relative;

}

.site-nav a:hover {

  color: var(--ink);

  border-bottom-color: rgba(201, 168, 106, 0.45);

}

.site-nav a.is-active {

  color: var(--gold);

  border-bottom-color: var(--gold);

}

.site-nav a.is-active::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: -.28rem;

  width: .28rem;

  height: .28rem;

  transform: translateX(-50%) rotate(45deg);

  border: 1px solid var(--gold);

  background: rgba(201, 168, 106, 0.25);

  pointer-events: none;

}

.nav-ooc .site-nav a.is-active,

.nav-ooc a.is-active {

  color: var(--copper);

  border-bottom-color: rgba(184, 136, 74, 0.75);

}

.nav-ooc a.is-active::after {

  border-color: var(--copper);

  background: rgba(184, 136, 74, 0.28);

}

.nav-ic .nav-group-label::before,

.nav-ooc .nav-group-label::before {

  content: "";

  display: inline-block;

  width: .35rem;

  height: .35rem;

  margin-right: .35rem;

  vertical-align: .05em;

  transform: rotate(45deg);

  border: 1px solid currentColor;

  opacity: .7;

}



/* K?zepes asztali: szorosabb IC men? egy sorban */

@media (max-width: 1180px) and (min-width: 821px) {

  .site-header .wrap.header-inner {

    gap: .65rem;

  }

  .nav-group-links {

    gap: .2rem .5rem;

  }

  .site-nav a {

    font-size: .72rem;

    letter-spacing: .04em;

  }

  .nav-group-label {

    font-size: .62rem;

    letter-spacing: .12em;

  }

}

.nav-hirnok {

  display: inline-flex;

  align-items: baseline;

  gap: .35rem;

}

.nav-badge {

  display: inline-block;

  min-width: 1.15rem;

  padding: .05rem .28rem;

  border-radius: .2rem;

  font-size: .72rem;

  font-weight: 600;

  line-height: 1.25;

  text-align: center;

  color: var(--panel, #1a1510);

  background: var(--copper, #b87333);

  font-family: var(--font-body, inherit);

  letter-spacing: 0;

}

.btn:focus-visible,

.site-nav a:focus-visible,

.nav-toggle:focus-visible,

.active-char:focus-visible,

.header-tool:focus-visible,

.chat-tab-open:focus-visible,

.chat-tab-close:focus-visible,

.bazaar-card-hit:focus-visible {

  outline: 2px solid var(--gold);

  outline-offset: 2px;

}

.header-user { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 0 0 auto; }

.header-aside {

  display: flex;

  align-items: center;

  gap: .65rem .85rem;

  flex: 0 0 auto;

  align-self: center;

  margin-left: auto;

  max-width: none;

}

.header-auth-short { display: none; }

.header-auth-full { display: inline; }

.aharion-date {

  font-family: Cinzel, "Source Serif 4", serif;

  font-size: .72rem;

  letter-spacing: .04em;

  color: var(--gold, #c4a574);

  white-space: nowrap;

  max-width: 14rem;

  overflow: hidden;

  text-overflow: ellipsis;

  opacity: .92;

}

.active-char {

  display: inline-flex;

  align-items: center;

  color: var(--ink);

  font-size: .9rem;

  line-height: 1.2;

  flex: 0 0 auto;

  max-width: none;

  text-decoration: none;

}

.active-char:hover .active-char-name {

  color: var(--ink);

}

.active-char-name {

  white-space: nowrap;

  max-width: none;

  overflow: visible;

  text-overflow: unset;

  font-family: var(--font-display);

  letter-spacing: .02em;

  color: var(--gold, #c4a574);

}

.active-char-switch {

  font-size: .72rem;

  margin-left: .2rem;

  opacity: .8;

  text-transform: lowercase;

  letter-spacing: .04em;

  text-decoration: none;

  white-space: nowrap;

  padding: .15rem .3rem;

  align-self: center;

  color: var(--muted);

}

.active-char-switch:hover {

  color: var(--gold);

  text-decoration: underline;

  opacity: 1;

}

.header-tool-plus {

  font-size: 1.15rem;

  font-weight: 600;

  line-height: 1;

  color: inherit;

}

.entity-card {

  display: flex;

  flex-direction: column;

  gap: .55rem;

  background: var(--bg1);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: .85rem .95rem;

}

.entity-card .entity-link {

  display: flex;

  flex-direction: column;

  gap: .25rem;

  background: transparent;

  border: 0;

  padding: 0;

  text-decoration: none;

  color: inherit;

}

.entity-card.is-active-pc {

  border-color: color-mix(in srgb, var(--gold, #c4a574) 55%, var(--line));

  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold, #c4a574) 25%, transparent);

}

.entity-card-actions {

  margin: 0;

}

.header-tools {

  display: inline-flex;

  align-items: center;

  gap: .35rem;

  flex: 0 0 auto;

  margin: 0;

  align-self: center;

}

.header-logout-form {

  display: inline-flex;

  align-items: center;

  margin: 0;

  flex: 0 0 auto;

}

.header-tool,

.header-logout {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  position: relative;

  width: var(--touch-min);

  height: var(--touch-min);

  padding: 0;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: var(--bg2);

  color: var(--muted);

  cursor: pointer;

  line-height: 0;

  text-decoration: none;

  box-sizing: border-box;

}

.header-tool:hover,

.header-tool:focus-visible,

.header-logout:hover,

.header-logout:focus-visible {

  color: var(--gold);

  border-color: rgba(201, 168, 106, 0.55);

  outline: none;

}

.header-tool.is-active {

  color: var(--gold);

  border-color: rgba(201, 168, 106, 0.55);

}

.header-logout:focus-visible,

.header-tool:focus-visible {

  outline: 2px solid var(--gold);

  outline-offset: 2px;

}

.header-tool-icon,

.header-logout-icon {

  display: block;

}

.header-tool-badge {

  position: absolute;

  top: .15rem;

  right: .1rem;

  min-width: .95rem;

  padding: 0 .2rem;

  border-radius: .2rem;

  font-size: .62rem;

  font-weight: 700;

  line-height: 1.2;

  text-align: center;

  color: var(--panel, #1a1510);

  background: var(--copper, #b87333);

  font-family: var(--font-body, inherit);

  letter-spacing: 0;

}

.nav-toggle {

  display: none; background: var(--bg2); border: 1px solid var(--line);

  color: var(--ink); padding: .35rem .6rem; border-radius: var(--radius);

}



.main-content { padding: 1.4rem 0 3rem; }

.site-footer {

  border-top: 1px solid var(--line);

  padding: 1.25rem 0 2rem;

  color: var(--muted);

  font-size: .92rem;

}



.calendar-box {

  margin: 0 0 1.5rem;

  padding-bottom: 1.25rem;

  border-bottom: 1px solid var(--line);

}

.calendar-box .lead {

  font-family: Cinzel, "Source Serif 4", serif;

  font-size: 1.15rem;

  color: var(--gold, #c4a574);

  margin: .35rem 0 .75rem;

}

.month-list {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem .85rem;

  list-style: none;

  margin: .75rem 0 0;

  padding: 0;

  font-size: .88rem;

  color: var(--muted);

}

.month-list li::before {

  content: "? ";

  opacity: .5;

}



/* Panels: bound parchment / book leaf + egys?ges sarokkeret */

.panel {

  background:

    linear-gradient(180deg, rgba(40, 34, 28, 0.98), rgba(24, 20, 16, 0.99)),

    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.03) 3px, rgba(0,0,0,.03) 4px);

  border: 1px solid var(--line-strong);

  border-radius: var(--radius);

  padding: 1.25rem 1.35rem;

  box-shadow:

    var(--shadow),

    inset 0 0 0 1px rgba(180, 150, 100, 0.06),

    inset 0 0 40px rgba(0, 0, 0, 0.18);

  margin-bottom: 1.1rem;

  position: relative;

}



/* Kincst?r-st?lus? keret: panel, karakterlap, sheet-box, t?rk?p */

.panel,

.sheet,

.sheet-box,

.map-panel {

  position: relative;

}

.panel > *,

.sheet > *,

.sheet-box > *,

.map-panel > * {

  position: relative;

  z-index: 1;

}

.panel::before,

.sheet::before,

.sheet-box::before,

.map-panel::before {

  content: "";

  position: absolute;

  inset: var(--frame-inset);

  border: 1px solid var(--frame-inner);

  pointer-events: none;

  z-index: 0;

}

.panel::after,

.sheet::after,

.sheet-box::after,

.map-panel::after {

  content: "";

  position: absolute;

  inset: var(--frame-edge);

  pointer-events: none;

  z-index: 0;

  opacity: .55;

  background:

    linear-gradient(var(--frame-accent), var(--frame-accent)) 0 0 / var(--frame-corner) 1px no-repeat,

    linear-gradient(var(--frame-accent), var(--frame-accent)) 0 0 / 1px var(--frame-corner) no-repeat,

    linear-gradient(var(--frame-accent), var(--frame-accent)) 100% 0 / var(--frame-corner) 1px no-repeat,

    linear-gradient(var(--frame-accent), var(--frame-accent)) 100% 0 / 1px var(--frame-corner) no-repeat,

    linear-gradient(var(--frame-accent), var(--frame-accent)) 0 100% / var(--frame-corner) 1px no-repeat,

    linear-gradient(var(--frame-accent), var(--frame-accent)) 0 100% / 1px var(--frame-corner) no-repeat,

    linear-gradient(var(--frame-accent), var(--frame-accent)) 100% 100% / var(--frame-corner) 1px no-repeat,

    linear-gradient(var(--frame-accent), var(--frame-accent)) 100% 100% / 1px var(--frame-corner) no-repeat;

}



.panel.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }

.panel-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; flex-wrap: wrap; }

.nested {

  margin-top: 1rem;

  background: rgba(0,0,0,.2);

  border: 1px solid rgba(180,150,100,.12);

  box-shadow: none;

}

.nested::before,

.nested::after { display: none; }



/* IC / OOC panel hang — OOC is meleg (réz), csak szárazabb / kevésbé „aranyos” */

.panel--ooc,

.surface-ooc .panel:not(.panel--ic) {

  --frame-accent: var(--copper);

  --frame-inner: rgba(184, 136, 74, 0.14);

  border-color: rgba(168, 130, 78, 0.38);

  background:

    linear-gradient(180deg, rgba(38, 32, 26, 0.98), rgba(22, 18, 14, 0.99)),

    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.035) 3px, rgba(0,0,0,.035) 4px);

  box-shadow:

    var(--shadow),

    inset 0 0 0 1px rgba(184, 136, 74, 0.06),

    inset 0 0 40px rgba(0, 0, 0, 0.2);

}

.panel--ic {

  --frame-accent: var(--theme-accent, var(--gold));

}



/* Motívum-ikon (mask — színezhető) */

.motif-icon {

  display: inline-block;

  width: var(--motif-size);

  height: var(--motif-size);

  flex: 0 0 auto;

  vertical-align: -0.15em;

  background-color: var(--theme-accent, var(--gold));

  -webkit-mask: var(--motif) center / contain no-repeat;

  mask: var(--motif) center / contain no-repeat;

  opacity: .92;

}

.motif-icon--lg {

  --motif-size: 1.55rem;

}

.motif-icon--xl {

  --motif-size: 2.1rem;

}

.motif-title {

  display: inline-flex;

  align-items: center;

  gap: .55rem;

}

.motif-title .motif-icon {

  opacity: .85;

}



/* Város / faj téma-hookok */

[data-city="tronvaros"] { --theme-accent: #d4b06a; --frame-accent: #d4b06a; }

[data-city="vasberc"] { --theme-accent: #c9854a; --frame-accent: #c9854a; }

[data-city="holdliget"] { --theme-accent: #7eb8da; --frame-accent: #7eb8da; }

[data-city="koromsor"] { --theme-accent: #9a7fb0; --frame-accent: #9a7fb0; }

[data-city="solyomrev"] { --theme-accent: #5a8f9e; --frame-accent: #5a8f9e; }



[data-race="ember"] { --theme-accent: #c9a86a; }

[data-race="torpe"] { --theme-accent: #c9854a; }

[data-race="elf"] { --theme-accent: #8fbc8f; }

[data-race="felelf"] { --theme-accent: #a8c4a0; }

[data-race="sotetelf"] { --theme-accent: #9a7fb0; }

[data-race="felork"] { --theme-accent: #b07050; }

[data-race="gnom"] { --theme-accent: #c4a35a; }



body.surface-ooc {

  --theme-accent: var(--copper);

  --frame-accent: var(--copper);

}

body.surface-ic {

  --theme-accent: var(--ic-accent);

}



h1, h2, h3 {

  font-family: var(--font-display);

  letter-spacing: .03em;

  margin: 0 0 .65rem;

  font-weight: 700;

  line-height: 1.25;

}

h1 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); font-weight: 600; }

h2 {

  font-size: .95rem;

  color: var(--gold);

  font-weight: 600;

  letter-spacing: .08em;

  text-transform: uppercase;

  padding-bottom: .35rem;

  border-bottom: 1px solid var(--line);

  margin-bottom: .85rem;

}

h3 { font-size: 1rem; color: var(--ink); }

.muted { color: var(--muted); }

.char-code {

  font-family: var(--font-display);

  font-size: .78em;

  font-weight: 500;

  letter-spacing: .04em;

  color: var(--muted);

  white-space: nowrap;

}

a .char-code { color: inherit; opacity: .72; }

a.char-link {

  color: inherit;

  text-decoration: none;

  border-bottom: none;

}

a.char-link:hover {

  color: var(--gold);

}

.clan-card-main {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .55rem .75rem;

  flex: 1 1 100%;

  color: inherit;

  text-decoration: none;

}

.clan-card-main:hover .clan-card-name,

.clan-card-main:focus-visible .clan-card-name { color: var(--gold); }

.clan-card-name {

  font-family: var(--font-display);

  font-size: 1.08rem;

  letter-spacing: .02em;

}

.clan-card-leader {

  font-size: .92rem;

  color: var(--ink);

}

.clan-card-leader .char-link { color: var(--copper); }

.clan-card-meta { font-size: .85rem; }

.clan-card-grid .clan-card {

  transition: border-color .15s ease, background .15s ease;

}

.clan-card-grid .clan-card:hover,

.clan-card-grid .clan-card:focus-within {

  border-color: var(--line-strong);

  background: rgba(37, 32, 27, 0.85);

}

.clan-card .clan-logo-sm {

  width: 56px;

  height: 56px;

}



.hero {

  min-height: min(72vh, 640px);

  display: grid; align-items: end;

  padding: clamp(2rem, 5vw, 4rem) 0 2rem;

  margin-bottom: 1rem;

  position: relative;

  border-bottom: 1px solid var(--line);

  background:

    linear-gradient(180deg, rgba(20,18,16,.2), rgba(20,18,16,.88) 60%, var(--bg0)),

    radial-gradient(ellipse at 65% 35%, rgba(184,136,74,.12), transparent 45%),

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500'%3E%3Cpath d='M0 380 C120 300 220 420 340 340 C460 260 520 390 800 300 L800 500 L0 500Z' fill='%2325201b'/%3E%3Cpath d='M0 420 C180 360 300 450 480 390 C620 340 700 420 800 380 L800 500 L0 500Z' fill='%231c1916'/%3E%3C/svg%3E") center/cover no-repeat;

}

.hero-brand {

  font-size: clamp(2.4rem, 7vw, 4.4rem);

  line-height: 1.05;

  margin: .15rem 0 .7rem;

  color: var(--ink);

}

.hero-kicker {

  color: var(--copper);

  text-transform: uppercase;

  letter-spacing: .16em;

  font-size: .72rem;

  margin: 0;

  font-family: var(--font-display);

}

.hero-lead { max-width: 34rem; color: #d2c8b4; font-size: 1.08rem; }

.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.25rem; }



.btn {

  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;

  border: 1px solid var(--btn-edge, var(--line-strong));

  background: var(--bg2);

  color: var(--ink);

  padding: .5rem .95rem;

  min-height: max(2.35rem, var(--touch-min));

  border-radius: var(--radius);

  cursor: pointer;

  font-family: var(--font-display);

  font-size: .86rem;

  letter-spacing: .04em;

  transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .15s ease;

}

.btn:hover { border-color: var(--gold); color: var(--ink); background: #2c261f; }

.btn-primary {

  background: linear-gradient(180deg, #8a5e34 0%, var(--btn-face) 55%, #6a4624 100%);

  border-color: var(--btn-edge);

  color: #f7f0e6;

  box-shadow:

    inset 0 1px 0 rgba(255, 236, 200, 0.16),

    inset 0 -1px 0 rgba(0, 0, 0, 0.22);

  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);

}

.btn-primary:hover {

  background: linear-gradient(180deg, #9a6a3c 0%, var(--btn-face-hover) 55%, #7a522c 100%);

  border-color: var(--gold);

  color: #fff;

  filter: none;

  box-shadow:

    0 0 0 1px rgba(201, 168, 106, 0.28),

    0 4px 14px rgba(0, 0, 0, 0.35),

    inset 0 1px 0 rgba(255, 236, 200, 0.18);

  transform: translateY(-1px);

}

.btn-primary:active {

  transform: translateY(0);

}

.btn:disabled,

.btn-primary:disabled,

.btn[disabled] {

  opacity: .48;

  cursor: not-allowed;

  transform: none;

  box-shadow: none;

  filter: grayscale(.25);

}

.btn-ghost {

  background: transparent;

  border-color: rgba(180, 150, 100, 0.32);

  font-family: var(--font-display);

  letter-spacing: .03em;

}

.btn-ghost:hover { border-color: var(--gold); background: rgba(201,168,106,.06); }

.btn-tiny {

  padding: .32rem .6rem;

  font-size: .78rem;

  min-height: 2rem;

  letter-spacing: .03em;

}

.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }



/* Bot honeypot ? ne legyen a tab-sorrendben / k?perny?n */

.hp-wrap {

  position: absolute;

  left: -10000px;

  width: 1px;

  height: 1px;

  overflow: hidden;

}



.visually-hidden {

  position: absolute !important;

  width: 1px; height: 1px;

  padding: 0; margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



/* P?nz ikonok (arany / ez?st) ? sz?veges form?tum flashben / magyar?zatokban marad */

.money {

  display: inline-flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .2rem .45rem;

  font-variant-numeric: tabular-nums;

  line-height: 1.2;

}

.money-part {

  display: inline-flex;

  align-items: center;

  gap: .2rem;

  white-space: nowrap;

}

.money-icon {

  width: 14px;

  height: 14px;

  flex: 0 0 auto;

  display: block;

  object-fit: contain;

}

.money-num {

  font-family: var(--font-display);

  font-weight: 600;

  font-size: .95em;

  color: inherit;

}

.money-gold .money-num { color: var(--gold); }

.money-silver .money-num { color: #c5ced8; }

.sheet-value .money-num { font-size: 1em; }



.money-field-label {

  display: inline-flex;

  align-items: center;

  vertical-align: middle;

  line-height: 1;

}

.money-input-label {

  display: flex;

  flex-direction: column;

  gap: .25rem;

}

.money-input-label .money-field-label {

  margin-bottom: .1rem;

}

.money-dual-label {

  display: flex;

  align-items: center;

  gap: .35rem;

  margin: 0 0 .5rem;

}

.money-quick-btn {

  display: inline-flex;

  align-items: center;

  gap: .2rem;

}

.money-quick-btn .money-icon {

  vertical-align: middle;

}



.stat-strip {

  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

  gap: .65rem; margin-bottom: 1.1rem;

}

.stat-strip > div, .entity-link {

  background: var(--bg1);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: .75rem .9rem;

}

.stat-strip strong {

  display: block;

  font-family: var(--font-display);

  font-size: 1.25rem;

  color: var(--gold);

  font-weight: 600;

}

.stat-strip span { color: var(--muted); font-size: .85rem; }

.stat-strip--home {

  margin: 1.1rem 0 0;

  gap: .45rem;

}

.stat-strip--home > div {

  padding: .55rem .75rem;

  background: transparent;

  border-color: rgba(180, 150, 100, 0.18);

}

.stat-strip--home strong { font-size: 1.05rem; }

.stat-strip--home span { font-size: .8rem; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem; }

.entity-link {

  display: flex; flex-direction: column; gap: .2rem;

  min-width: 0;

  overflow: hidden;

  color: inherit;

  transition: border-color .15s ease;

}

.entity-link strong,

.entity-link span {

  min-width: 0;

  overflow-wrap: anywhere;

  word-break: break-word;

}

.entity-link:hover {

  border-color: var(--gold);

  color: inherit;

  transform: none;

}

.clan-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .55rem .75rem; }

.clan-card strong, .clan-card span { flex: 1 1 100%; }

.clan-description {

  margin: .15rem 0 0;

  padding: 1.1rem 1.15rem 1.25rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background:

    linear-gradient(180deg, rgba(50, 40, 28, 0.35), rgba(20, 16, 12, 0.45)),

    repeating-linear-gradient(

      -8deg,

      transparent 0,

      transparent 3px,

      rgba(180, 150, 100, 0.03) 3px,

      rgba(180, 150, 100, 0.03) 4px

    );

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);

  white-space: normal;

  line-height: 1.75;

  color: var(--ink);

}

.clan-desc-actions {

  display: flex;

  flex-wrap: wrap;

  gap: .4rem;

  margin: .55rem 0 0;

}

.clan-desc-form textarea {

  width: 100%;

  min-height: 10rem;

  resize: vertical;

}

.clan-empty {

  margin: 0;

  padding: .55rem 0;

  color: var(--muted);

  font-size: .92rem;

  font-style: italic;

  line-height: 1.5;

}

.clan-app-intro {

  margin: .45rem 0 .35rem;

  padding: .45rem .55rem;

  max-height: 8.5rem;

  overflow: auto;

  border-left: 2px solid rgba(201, 168, 106, 0.35);

  background: rgba(0, 0, 0, 0.14);

  font-size: .9rem;

  line-height: 1.5;

  white-space: pre-wrap;

}

.clan-logo-sm {

  width: 48px; height: 48px;

  object-fit: contain;

  border-radius: 4px;

  border: 1px solid var(--line);

  background: rgba(0,0,0,.2);

  flex: 0 0 auto;

}

.clan-logo {

  width: 150px; height: 150px;

  object-fit: contain;

  border-radius: 6px;

  border: 1px solid var(--line);

  background: rgba(0,0,0,.25);

  flex: 0 0 auto;

}

.clan-logo-missing {

  display: grid;

  place-items: center;

  font-family: var(--font-display);

  font-size: .85rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--muted);

  background: rgba(0, 0, 0, 0.35);

}

.clan-head {

  display: flex;

  gap: 1rem;

  align-items: flex-start;

  flex-wrap: wrap;

}

.clan-logo-preview { min-height: 1.5rem; }

.clan-apply-form { max-width: 28rem; margin-top: .5rem; }

.clan-app-status {

  margin-top: .5rem;

  padding: .65rem .8rem;

  border: 1px solid var(--line);

  background: rgba(0, 0, 0, .15);

}

.clan-pending-apps li,

.clan-member-list li,

.clan-place-list li {

  display: flex;

  flex-wrap: wrap;

  gap: .75rem;

  justify-content: space-between;

  align-items: flex-start;

}



/* ??? Kl?nom dashboard ??? */

.clan-dash { overflow: hidden; }

.clan-dash-hero {

  display: grid;

  grid-template-columns: auto 1fr;

  gap: 1.35rem 1.75rem;

  align-items: center;

  padding: .35rem 0 1.35rem;

  margin-bottom: 1rem;

  border-bottom: 1px solid var(--line);

  background:

    radial-gradient(ellipse 80% 100% at 8% 20%, rgba(201, 168, 106, 0.14), transparent 58%),

    linear-gradient(180deg, rgba(0, 0, 0, 0.14), transparent);

  animation: clan-dash-in .45s ease both;

}

.clan-dash-crest .clan-logo {

  width: 168px;

  height: 168px;

  box-shadow: 0 0 0 1px rgba(201, 168, 106, 0.3), 0 10px 32px rgba(0, 0, 0, 0.4);

}

.clan-dash-eyebrow {

  margin: 0 0 .3rem;

  font-family: var(--font-display);

  font-size: .72rem;

  letter-spacing: .16em;

  text-transform: uppercase;

  color: var(--copper);

}

.clan-dash-title {

  margin: 0 0 .4rem;

  font-size: clamp(1.65rem, 3.2vw, 2.15rem);

  line-height: 1.15;

}

.clan-dash-meta,

.clan-dash-rank { margin: 0 0 .25rem; font-size: .92rem; }

.clan-dash-quick {

  display: flex;

  flex-wrap: wrap;

  gap: .45rem;

  margin-top: .55rem;

}

.clan-treasury-strip {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));

  gap: .55rem;

  margin: 0 0 1rem;

  animation: clan-dash-in .5s ease .05s both;

}

.clan-treasury-cell {

  padding: .7rem .75rem;

  border: 1px solid var(--line);

  background: rgba(0, 0, 0, 0.18);

}

.clan-treasury-cell.is-alert {

  border-color: rgba(201, 168, 106, 0.5);

  background: rgba(201, 168, 106, 0.08);

}

.clan-treasury-l {

  display: block;

  font-size: .72rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--muted);

  margin-bottom: .2rem;

}

.clan-treasury-v {

  font-family: var(--font-display);

  color: var(--gold);

  font-size: 1.05rem;

  line-height: 1.25;

}

.clan-tax-preview {

  margin: 0;

  padding: .55rem .65rem;

  border: 1px solid rgba(180, 150, 100, 0.22);

  background: rgba(201, 168, 106, 0.06);

  font-size: .88rem;

  color: var(--ink);

}

.clan-grant-wallet { margin: 0; font-size: .85rem; }

.clan-quick-amounts { margin: .15rem 0; }

.clan-dash-grid {

  display: grid;

  grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 1fr);

  gap: 1rem 1.25rem;

  align-items: start;

  animation: clan-dash-in .6s ease .1s both;

}

.clan-dash-main,

.clan-dash-side { display: grid; gap: .65rem; min-width: 0; }



/* Fold nyelv: craft-fold ritmus?val egyez? */

.clan-fold {

  margin: 0;

  border: 1px solid var(--line);

  background: rgba(0, 0, 0, 0.16);

  border-radius: var(--radius, 2px);

  overflow: hidden;

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);

}

.clan-fold > summary {

  cursor: pointer;

  list-style: none;

  display: flex;

  align-items: center;

  gap: .55rem;

  padding: .65rem .85rem;

  font-family: var(--font-display);

  font-size: 1.05rem;

  color: var(--gold);

  user-select: none;

  background: linear-gradient(90deg, rgba(180, 140, 70, 0.08), transparent 70%);

}

.clan-fold > summary::-webkit-details-marker { display: none; }

.clan-fold > summary::before {

  content: "";

  flex: 0 0 auto;

  width: 0.42em;

  height: 0.42em;

  margin-right: .15rem;

  border-right: 2px solid var(--muted);

  border-bottom: 2px solid var(--muted);

  transform: rotate(-45deg);

  transition: transform .15s ease;

}

.clan-fold[open] > summary::before { transform: rotate(45deg); }

.clan-fold.is-alert > summary {

  color: #e0c48a;

  background: linear-gradient(90deg, rgba(201, 168, 106, 0.16), transparent 70%);

}

.clan-fold-count {

  margin-left: auto;

  min-width: 1.6rem;

  text-align: center;

  font-size: .78rem;

  font-family: var(--font-body);

  color: var(--muted);

  border: 1px solid var(--line);

  padding: .1rem .4rem;

  border-radius: 2px;

}

.clan-fold-body {

  padding: .75rem .85rem .9rem;

  border-top: 1px solid rgba(180, 150, 100, 0.12);

}

.clan-fold-note { font-size: .85rem; margin: .55rem 0 0; }

.clan-fold-danger > summary { color: #c48a7a; }



.clan-bonus-grid {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));

  gap: .45rem;

}

.clan-bonus-grid li {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  gap: .4rem;

  padding: .45rem .55rem;

  border: 1px solid rgba(180, 150, 100, 0.2);

  background: rgba(0, 0, 0, 0.14);

}

.clan-bonus-label { color: var(--muted); font-size: .85rem; }

.clan-bonus-val {

  font-family: var(--font-display);

  color: var(--gold);

  font-size: 1.05rem;

}



.clan-leader-card {

  display: grid;

  gap: .15rem;

  margin-bottom: .75rem;

  padding: .65rem .75rem;

  border: 1px solid rgba(201, 168, 106, 0.28);

  background:

    linear-gradient(135deg, rgba(201, 168, 106, 0.08), transparent 60%),

    rgba(0, 0, 0, 0.16);

}

.clan-leader-label {

  font-family: var(--font-display);

  font-size: .68rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--copper);

}



.clan-recruit-toggle {

  margin-top: .85rem;

  padding-top: .7rem;

  border-top: 1px solid rgba(180, 150, 100, 0.12);

}

.clan-recruit-toggle label {

  display: flex;

  align-items: center;

  gap: .45rem;

  color: var(--muted);

  font-size: .9rem;

  cursor: pointer;

}

.clan-loc-access {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

  gap: .45rem .75rem;

  margin-bottom: .55rem;

  padding-bottom: .55rem;

  border-bottom: 1px solid rgba(180, 150, 100, 0.1);

}

.clan-loc-access label {

  display: flex;

  align-items: center;

  gap: .35rem;

  font-size: .85rem;

  cursor: pointer;

}



/* Egys?ges helysz?nfa-szerkeszt? (admin + kl?n) */

.loc-tree {

  display: grid;

  gap: .85rem;

}

.loc-tree-hint {

  margin: 0;

  font-size: .85rem;

  line-height: 1.45;

}

.loc-tree-create {

  display: grid;

  gap: .4rem;

  padding: .65rem .75rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: rgba(20, 22, 28, 0.35);

}

.loc-tree-create-row {

  display: flex;

  flex-wrap: wrap;

  gap: .4rem;

  align-items: center;

}

.loc-tree-create-row input[type="text"] {

  flex: 1 1 10rem;

  min-width: 8rem;

}

.loc-tree-create-row select {

  flex: 1 1 12rem;

  min-width: 10rem;

}

.loc-tree-create textarea {

  width: 100%;

  min-height: 2.1rem;

  resize: vertical;

}

.loc-tree-toolbar {

  margin: 0;

}

.loc-tree-empty {

  margin: 0;

}

.loc-tree-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: .15rem;

}

.loc-tree-node {

  border-bottom: 1px solid rgba(180, 150, 100, 0.12);

  padding: .35rem 0 .45rem;

  padding-left: calc(var(--loc-depth, 0) * 1.05rem);

}

.loc-tree-node.is-hub {

  margin-top: .35rem;

  border-top: 1px solid rgba(180, 150, 100, 0.22);

  padding-top: .55rem;

}

.loc-tree-node.is-hub:first-child {

  border-top: 0;

  margin-top: 0;

  padding-top: .35rem;

}

.loc-tree-row {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem .65rem;

  align-items: center;

  justify-content: space-between;

}

.loc-tree-identity {

  display: flex;

  flex-wrap: wrap;

  gap: .3rem .45rem;

  align-items: baseline;

  min-width: 0;

  flex: 1 1 12rem;

}

.loc-tree-branch {

  color: var(--muted);

  font-size: .8rem;

  width: .9rem;

  flex: 0 0 auto;

}

.loc-tree-name {

  font-size: .95rem;

  color: var(--ink);

}

.loc-tree-badge {

  font-size: .68rem;

  letter-spacing: .04em;

  text-transform: uppercase;

  color: var(--muted);

  border: 1px solid rgba(180, 150, 100, 0.25);

  padding: .08rem .35rem;

}

.loc-tree-badge.is-hub {

  color: var(--gold);

  border-color: rgba(200, 160, 70, 0.45);

}

.loc-tree-badge.is-open {

  color: #9bb88a;

  border-color: rgba(120, 160, 100, 0.4);

}

.loc-tree-badge.is-locked {

  color: #c4a090;

  border-color: rgba(160, 100, 80, 0.45);

}

.loc-tree-badge.is-city {

  color: #8a9c70;

  border-color: rgba(120, 150, 90, 0.45);

}

.loc-tree-badge.is-wild {

  color: #8a9aaa;

  border-color: rgba(100, 120, 140, 0.4);

}

.loc-tree-meta {

  font-size: .78rem;

}

.loc-tree-actions {

  display: flex;

  flex-wrap: wrap;

  gap: .25rem;

  align-items: center;

}

.loc-tree-inline-form {

  display: inline;

  margin: 0;

}

.loc-tree-danger {

  color: #c99 !important;

}

.loc-tree-panel {

  margin-top: .45rem;

  padding: .55rem .65rem;

  background: rgba(12, 14, 18, 0.45);

  border: 1px solid rgba(180, 150, 100, 0.2);

}

.loc-tree-edit-form {

  display: grid;

  gap: .45rem;

  margin: 0;

}

.loc-tree-edit-form label {

  display: grid;

  gap: .25rem;

  font-size: .82rem;

  color: var(--muted);

}

.loc-tree-edit-form input[type="text"],

.loc-tree-edit-form select,

.loc-tree-edit-form textarea {

  width: 100%;

}

.loc-tree-check {

  display: inline-flex !important;

  grid-template-columns: none !important;

  flex-direction: row;

  align-items: center;

  gap: .35rem;

  cursor: pointer;

}

.loc-tree-panel-actions {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

  align-items: center;

}

.loc-tree-slug {

  margin: 0;

  font-size: .78rem;

}



@media (max-width: 820px) {

  .loc-tree-create-row {

    flex-direction: column;

    align-items: stretch;

  }

  .loc-tree-actions {

    width: 100%;

  }

}

.clan-subhead {

  margin: 1rem 0 .55rem;

  font-size: .85rem;

  border-bottom: none;

  padding-bottom: 0;

  text-transform: none;

  letter-spacing: .04em;

}

.clan-leave-box {

  padding: .85rem .9rem;

  border: 1px solid rgba(138, 69, 64, 0.35);

  background: rgba(138, 69, 64, 0.08);

}

.clan-leave-box p { margin: 0 0 .65rem; font-size: .88rem; }

.clan-leave-btn { color: #c48a7a; border-color: rgba(196, 138, 122, 0.45); }

.clan-leave-btn:hover { border-color: #c48a7a; color: #e0b0a4; }



@keyframes clan-dash-in {

  from { opacity: 0; transform: translateY(8px); }

  to { opacity: 1; transform: none; }

}



@media (max-width: 820px) {

  .clan-dash-hero { grid-template-columns: 1fr; justify-items: start; }

  .clan-dash-crest .clan-logo { width: 120px; height: 120px; }

  .clan-dash-grid { grid-template-columns: 1fr; }

  .clan-treasury-strip { grid-template-columns: 1fr 1fr; }

  .clan-grant-form,

  .clan-tax-form { gap: .7rem; }

  .clan-quick-amounts {

    gap: .45rem;

    margin: .25rem 0 .35rem;

  }

  .clan-quick-amounts .btn-tiny {

    min-height: var(--touch-min);

    padding: .4rem .7rem;

  }

  .clan-tax-preview {

    font-size: .86rem;

    line-height: 1.4;

  }

}

@media (max-width: 480px) {

  .clan-treasury-strip {

    grid-template-columns: 1fr;

  }

  .clan-treasury-cell {

    padding: .65rem .7rem;

  }

  .clan-treasury-v {

    font-size: 1rem;

  }

  .clan-fold-body {

    padding: .65rem .7rem .8rem;

  }

  .clan-dash-crest .clan-logo {

    width: 96px;

    height: 96px;

  }

}

@media (prefers-reduced-motion: reduce) {

  .clan-dash-hero,

  .clan-treasury-strip,

  .clan-dash-grid { animation: none; }

}



.form-stack { display: grid; gap: .8rem; }

.form-stack label, .form-grid label {

  display: grid; gap: .3rem;

  color: var(--muted); font-size: .9rem;

}

.field-hint {

  min-height: 1.1em;

  font-size: .78rem;

  line-height: 1.3;

  color: var(--muted);

}

.field-hint.is-ok { color: #7aaa7a; }

.field-hint.is-bad { color: #c48a7a; }

.field-hint.is-wait { color: #9a9488; }

input.is-ok, select.is-ok { border-color: rgba(122, 170, 122, 0.55); }

input.is-bad, select.is-bad { border-color: rgba(196, 138, 122, 0.7); }

input[readonly] {

  color: var(--muted);

  cursor: default;

  background: rgba(18, 16, 14, 0.72);

  border-color: rgba(180, 150, 100, 0.18);

}

.settings-panel .settings-subhead {

  font-family: var(--font-display);

  font-size: 1.05rem;

  letter-spacing: .04em;

  color: var(--gold);

  margin: 1.1rem 0 .35rem;

}

.settings-panel .settings-account .settings-subhead { margin-top: .25rem; }

.settings-pw-lead { margin: 0 0 .35rem; font-size: .9rem; }

.settings-password {

  margin-top: 1.25rem;

  padding-top: 1rem;

  border-top: 1px solid rgba(180, 150, 100, 0.2);

}

.pw-meter {

  margin-top: .4rem;

  height: .35rem;

  border-radius: 2px;

  background: rgba(180, 150, 100, 0.12);

  overflow: hidden;

}

.pw-meter-bar {

  display: block;

  height: 100%;

  width: 0;

  border-radius: 2px;

  transition: width .2s ease, background-color .2s ease;

  background: #8a4540;

}

.pw-meter-bar[data-level="1"] { width: 20%; background: #8a4540; }

.pw-meter-bar[data-level="2"] { width: 40%; background: #b8884a; }

.pw-meter-bar[data-level="3"] { width: 60%; background: #c9a86a; }

.pw-meter-bar[data-level="4"] { width: 80%; background: #8fbf8f; }

.pw-meter-bar[data-level="5"] { width: 100%; background: #7aaa7a; }

.pw-checks {

  list-style: none;

  margin: .45rem 0 0;

  padding: 0;

  display: grid;

  gap: .15rem;

  font-size: .8rem;

}

.pw-checks li::before {

  content: '? ';

  opacity: .7;

}

.pw-checks li.is-ok { color: #7aaa7a; }

.pw-checks li.is-ok::before { content: '? '; }

.pw-checks li.is-bad { color: #c48a7a; }

.pw-checks li.is-wait { color: #9a9488; }

input, select, textarea {

  width: 100%;

  background: var(--input);

  color: var(--ink);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: .55rem .65rem;

  font: inherit;

  min-height: 2.35rem;

}

select {

  color-scheme: dark;

}

select option,

select optgroup {

  background-color: #16120f;

  color: #e6e8ed;

}

select option:checked,

select option:hover {

  background-color: #2a231c;

  color: #f0e6d2;

}

input:focus, select:focus, textarea:focus {

  outline: none;

  border-color: var(--gold);

  box-shadow: 0 0 0 1px rgba(201,168,106,.2);

}

input:focus-visible, select:focus-visible, textarea:focus-visible {

  outline: 2px solid rgba(201, 168, 106, 0.65);

  outline-offset: 2px;

  border-color: var(--gold);

}

textarea {

  resize: vertical;

  min-height: 6rem;

}

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .7rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .55rem; }



.main-content {

  animation: page-ink-in .4s ease;

}

@keyframes page-ink-in {

  from { opacity: 0; transform: translateY(8px); }

  to { opacity: 1; transform: translateY(0); }

}

/* K?z?ps? pecs?t-?zenetek (nem zavarj?k az oldal kattint?sait) */

.flash-host {

  position: fixed;

  inset: 0;

  z-index: 12000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1.25rem;

  pointer-events: none;

}

.flash-host.is-enhanced::before {

  content: '';

  position: absolute;

  inset: 0;

  background: rgba(6, 5, 4, .52);

  pointer-events: none;

  opacity: 0;

  transition: opacity .28s ease;

}

.flash-host.is-enhanced.is-showing {

  pointer-events: auto;

  cursor: pointer;

}

.flash-host.is-enhanced.is-showing::before {

  opacity: 1;

}

.flash {

  pointer-events: auto;

  max-width: min(26rem, 92vw);

  margin: 0;

  padding: 1rem 1.35rem;

  text-align: center;

  font-family: var(--font-display);

  font-size: .95rem;

  letter-spacing: .03em;

  line-height: 1.45;

  color: var(--ink);

  cursor: pointer;

  border-radius: var(--radius);

  border: 1px solid var(--line-strong);

  background:

    linear-gradient(180deg, rgba(40, 34, 28, .97), rgba(22, 18, 14, .98));

  box-shadow:

    0 0 0 1px rgba(201, 168, 106, .12),

    0 18px 48px rgba(0, 0, 0, .55),

    inset 0 1px 0 rgba(235, 228, 214, .06);

}

.flash-host.is-enhanced .flash {

  position: absolute;

  opacity: 0;

  transform: translateY(10px) scale(.96);

  transition: opacity .28s ease, transform .28s ease;

  pointer-events: none;

}

.flash-host.is-enhanced .flash.is-visible {

  position: relative;

  opacity: 1;

  transform: translateY(0) scale(1);

  pointer-events: auto;

}

.flash-host.is-enhanced .flash.is-leaving {

  position: relative;

  opacity: 0;

  transform: translateY(-6px) scale(.97);

  pointer-events: none;

}

/* ??? M?hely (piact?r-hangulat? receptk?rty?k) ??? */

.craft-atelier {

  position: relative;

  isolation: isolate;

}

.craft-atelier::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:

    radial-gradient(ellipse 65% 40% at 15% 0%, rgba(160, 100, 40, 0.12), transparent 55%),

    radial-gradient(ellipse 55% 35% at 95% 100%, rgba(0, 0, 0, 0.3), transparent 50%);

}

.craft-head {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 1rem 1.5rem;

  align-items: flex-end;

  margin-bottom: 1.1rem;

  padding-bottom: 1rem;

  border-bottom: 1px solid var(--line);

}

.craft-kicker {

  margin: 0 0 .2rem;

  font-size: .72rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--copper);

}

.craft-atelier h1 {

  margin: 0 0 .35rem;

  font-family: var(--font-display);

  letter-spacing: .04em;

}

.craft-lead { margin: 0; max-width: 38rem; }

.craft-purse {

  display: flex;

  flex-direction: column;

  gap: .15rem;

  max-width: 100%;

  padding: .55rem .85rem;

  background: linear-gradient(165deg, rgba(55, 42, 28, 0.55), rgba(12, 10, 8, 0.75));

  border: 1px solid var(--line);

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);

}

.craft-purse-label {

  font-size: .7rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--muted);

}

.craft-purse strong {

  font-family: var(--font-display);

  color: var(--gold);

  font-size: 1.05rem;

}



.craft-mats {

  display: block;

  font-size: .78rem;

  line-height: 1.35;

  overflow-wrap: anywhere;

  word-break: break-word;

}

.craft-mat-have { color: #7bbb7b; }

.craft-mat-need { color: #c87060; }



.craft-fold {

  margin: 0.55rem 0;

  border: 1px solid var(--line);

  background: rgba(0, 0, 0, 0.16);

  border-radius: var(--radius, 2px);

  min-width: 0;

  overflow: hidden;

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);

}

.craft-fold > summary {

  cursor: pointer;

  list-style: none;

  display: flex;

  align-items: center;

  gap: 0.55rem;

  min-width: 0;

  padding: 0.65rem 0.85rem;

  font-family: var(--font-display, inherit);

  font-size: 1.05rem;

  color: var(--gold, #c4a35a);

  user-select: none;

  background: linear-gradient(90deg, rgba(180, 140, 70, 0.08), transparent 70%);

}

.craft-fold > summary::-webkit-details-marker { display: none; }

.craft-fold > summary::before {

  content: "";

  flex: 0 0 auto;

  width: 0.42em;

  height: 0.42em;

  margin-right: .15rem;

  border-right: 2px solid var(--muted, #8a8070);

  border-bottom: 2px solid var(--muted, #8a8070);

  transform: rotate(-45deg);

  transition: transform 0.15s ease;

}

.craft-fold[open] > summary::before {

  transform: rotate(45deg);

}

.craft-fold-count {

  margin-left: auto;

  min-width: 1.6rem;

  text-align: center;

  font-size: 0.78rem;

  font-family: var(--font-body, inherit);

  color: var(--muted, #8a8070);

  border: 1px solid var(--line);

  padding: 0.1rem 0.4rem;

  border-radius: 2px;

}

.craft-fold-body {

  padding: 0.75rem 0.85rem 0.9rem;

  border-top: 1px solid rgba(180, 150, 100, 0.12);

}

.craft-fold-nested {

  margin: 0.45rem 0;

  background: rgba(0, 0, 0, 0.14);

}

.craft-fold-nested > summary {

  font-size: 0.95rem;

  padding: 0.5rem 0.75rem;

}

.craft-fold-nested .craft-fold-body {

  padding: 0.65rem 0.75rem 0.8rem;

}

.craft-fold-recipes {

  display: grid;

  gap: 0.35rem;

}



.craft-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));

  gap: .7rem;

}

.craft-card {

  margin: 0;

  min-width: 0;

  overflow: hidden;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background:

    linear-gradient(165deg, rgba(58, 46, 34, 0.82), rgba(16, 12, 9, 0.94));

  box-shadow:

    inset 0 0 0 1px rgba(0, 0, 0, 0.28),

    inset 0 1px 0 rgba(201, 168, 106, 0.06);

  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;

}

.craft-card:hover {

  border-color: rgba(201, 168, 106, 0.55);

  transform: translateY(-2px);

  box-shadow:

    0 8px 20px rgba(0, 0, 0, 0.38),

    inset 0 0 0 1px rgba(0, 0, 0, 0.2);

}

.craft-card.rarity-uncommon { border-color: rgba(110, 160, 120, 0.45); }

.craft-card.rarity-rare { border-color: rgba(90, 140, 180, 0.5); }

.craft-card.rarity-epic { border-color: rgba(201, 168, 106, 0.65); }

.craft-card.is-locked {

  opacity: .78;

}

.craft-card.is-locked:hover {

  transform: none;

}

.craft-card-hit {

  display: grid;

  grid-template-columns: 3.4rem minmax(0, 1fr);

  gap: .6rem;

  align-items: start;

  padding: .7rem .75rem .75rem;

  min-width: 0;

}

.craft-card-icon {

  width: 3.4rem;

  height: 3.4rem;

  display: grid;

  place-items: center;

  background:

    radial-gradient(circle at 40% 30%, rgba(180, 140, 70, 0.14), transparent 60%),

    rgba(0, 0, 0, 0.4);

  border: 1px solid rgba(180, 150, 100, 0.22);

}

.craft-card-icon img {

  width: 85%;

  height: 85%;

  object-fit: contain;

}

.craft-card-body {

  display: flex;

  flex-direction: column;

  gap: .2rem;

  min-width: 0;

}

.craft-card-name {

  font-family: var(--font-display);

  font-size: .92rem;

  color: var(--gold);

  line-height: 1.25;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  line-clamp: 2;

  overflow: hidden;

  overflow-wrap: anywhere;

  word-break: break-word;

}

.craft-card-meta {

  font-size: .8rem;

  color: var(--ink);

  overflow-wrap: anywhere;

}

.craft-card-req {

  font-size: .72rem;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.craft-card-actions {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .35rem .5rem;

  margin-top: .25rem;

}

.craft-card-actions form { margin: 0; }

.craft-card-lock {

  font-size: .68rem;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: var(--copper);

  border: 1px solid rgba(180, 150, 100, 0.35);

  padding: .1rem .35rem;

}

.craft-card-lock-reason {

  font-size: .72rem;

  overflow-wrap: anywhere;

  flex: 1 1 8rem;

  min-width: 0;

}



.craft-head-actions {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

  margin: .65rem 0 0;

}

.craft-learn-intro { margin: 0 0 .75rem; font-size: .88rem; line-height: 1.45; }

.craft-empty {

  margin: 0;

  padding: .45rem 0;

  color: var(--muted);

  font-size: .92rem;

  font-style: italic;

  line-height: 1.5;

}

.craft-learn-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));

  gap: .65rem;

}

.craft-learn-card .craft-card-hit {

  grid-template-columns: 1fr;

}

.craft-rank-ladder {

  display: flex;

  flex-wrap: wrap;

  gap: .3rem;

  margin: .15rem 0;

}

.craft-rank-step {

  font-size: .68rem;

  letter-spacing: .06em;

  text-transform: uppercase;

  padding: .12rem .4rem;

  border: 1px solid rgba(180, 150, 100, 0.22);

  color: var(--muted);

  border-radius: 2px;

}

.craft-rank-step.is-done {

  color: var(--gold, #c4a35a);

  border-color: rgba(201, 168, 106, 0.45);

  background: rgba(201, 168, 106, 0.08);

}

.craft-rank-step.is-next {

  color: #e8d8b0;

  border-color: rgba(201, 168, 106, 0.65);

}

.craft-xp-bar {

  height: .35rem;

  background: #2a241c;

  border-radius: 2px;

  overflow: hidden;

  margin-top: .35rem;

}

.craft-xp-fill {

  height: 100%;

  background: var(--gold, #c4a35a);

}

.craft-ap-preview {

  font-size: .78rem;

}

.craft-toolbar {

  display: flex;

  flex-wrap: wrap;

  gap: .55rem;

  align-items: center;

  justify-content: space-between;

  margin: 0 0 .75rem;

}

.craft-filter-tabs {

  display: flex;

  flex-wrap: wrap;

  gap: .3rem;

}

.craft-filter-tab {

  font: inherit;

  font-size: .8rem;

  padding: .28rem .55rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: rgba(0, 0, 0, 0.18);

  color: var(--muted);

  border-radius: 2px;

  cursor: pointer;

}

.craft-filter-tab.is-active {

  color: var(--gold, #c4a35a);

  border-color: rgba(201, 168, 106, 0.5);

  background: rgba(201, 168, 106, 0.1);

}

.craft-search input {

  min-width: 11rem;

  width: min(100%, 16rem);

}

.craft-stock-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: .35rem;

}

.craft-stock-list li {

  display: flex;

  justify-content: space-between;

  gap: .75rem;

  padding: .3rem 0;

  border-bottom: 1px solid rgba(180, 150, 100, 0.12);

  font-size: .9rem;

}

.craft-fold.is-pulse > summary {

  animation: craft-pulse 1.4s ease;

}

@keyframes craft-pulse {

  0%, 100% { box-shadow: none; }

  35% { box-shadow: inset 0 0 0 1px rgba(201, 168, 106, 0.55); }

}

@media (prefers-reduced-motion: reduce) {

  .craft-fold.is-pulse > summary { animation: none; }

}



@media (max-width: 820px) {

  .craft-grid {

    grid-template-columns: 1fr;

  }

  .craft-card-hit {

    grid-template-columns: 3rem minmax(0, 1fr);

    padding: .55rem .6rem .65rem;

    min-height: var(--touch-min);

  }

  .craft-card-icon {

    width: 3rem;

    height: 3rem;

  }

  .craft-learn-grid {

    grid-template-columns: 1fr;

  }

  .craft-toolbar {

    flex-direction: column;

    align-items: stretch;

  }

  .craft-search input {

    width: 100%;

    min-height: var(--touch-min);

  }

}



.flash-success {

  padding: .85rem 1.15rem;

  font-size: .9rem;

  border-color: rgba(201, 168, 106, .55);

  box-shadow:

    0 0 0 1px rgba(201, 168, 106, .18),

    0 12px 32px rgba(0, 0, 0, .45),

    inset 0 1px 0 rgba(201, 168, 106, .12);

}

.flash-success::before {

  content: "";

  display: block;

  width: 2.5rem;

  height: 2px;

  margin: 0 auto .7rem;

  background: linear-gradient(90deg, transparent, var(--gold), transparent);

}

.flash-error {

  border-color: rgba(160, 80, 70, .65);

  box-shadow:

    0 0 0 1px rgba(138, 69, 64, .28),

    0 18px 48px rgba(0, 0, 0, .55),

    inset 0 1px 0 rgba(200, 120, 110, .1);

}

.flash-error::before {

  content: "";

  display: block;

  width: 2.5rem;

  height: 2px;

  margin: 0 auto .7rem;

  background: linear-gradient(90deg, transparent, var(--blood), transparent);

}

.flash-warning {

  border-color: rgba(180, 140, 60, .55);

  box-shadow:

    0 0 0 1px rgba(180, 140, 60, .22),

    0 12px 32px rgba(0, 0, 0, .45),

    inset 0 1px 0 rgba(220, 180, 90, .1);

}

.flash-warning::before {

  content: "";

  display: block;

  width: 2.5rem;

  height: 2px;

  margin: 0 auto .7rem;

  background: linear-gradient(90deg, transparent, rgba(220, 180, 90, .85), transparent);

}

.banner-tip {

  margin: .75rem 0;

  padding: .65rem .9rem;

  border: 1px solid var(--line);

  border-left: 3px solid var(--copper);

  background: rgba(184,136,74,.07);

  border-radius: var(--radius);

}

.banner-impersonate {

  border-left-color: #c45a48;

  background: rgba(120, 36, 28, 0.18);

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .35rem;

}



.link-list { list-style: none; padding: 0; margin: 0; }

.link-list li {

  display: flex; flex-direction: column; gap: .15rem;

  padding: .65rem 0;

  border-bottom: 1px solid rgba(180,150,100,.1);

}

.forum-cats li a { display: grid; gap: .2rem; color: inherit; }

.forum-cats li a:hover { color: var(--gold); }



.post-stream { display: grid; gap: .65rem; margin: 1rem 0 1.4rem; }

.post {

  display: grid;

  grid-template-columns: 4.5rem minmax(0, 1fr);

  column-gap: .75rem;

  row-gap: .35rem;

  align-items: start;

  padding: .65rem .75rem;

  border: 1px solid rgba(180,150,100,.14);

  border-left: 3px solid var(--copper);

  background: rgba(0,0,0,.16);

}

.post-avatar {

  width: 4.5rem;

  flex-shrink: 0;

}

.post-avatar .avatar-lg {

  display: block;

  width: 4.5rem;

  height: 4.5rem;

  max-width: 100%;

}

.post-main {

  min-width: 0;

  display: grid;

  gap: .3rem;

}

.post-author {

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  gap: .15rem .55rem;

  margin: 0;

  padding: 0 0 .4rem;

  line-height: 1.3;

  border-bottom: 1px solid rgba(180, 150, 100, 0.22);

}

.post-author .muted { font-size: .78rem; }

.ic-post .post-author {

  border-bottom-color: rgba(180, 150, 100, 0.28);

  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);

}

.ooc-post .post-author {

  border-bottom-color: rgba(184, 136, 74, 0.28);

  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);

}

.staff-post .post-author {

  border-bottom-color: color-mix(in srgb, var(--staff-ink, #e6d5a0) 45%, transparent);

}

.post-body {

  margin: 0;

  min-width: 0;

}

.post-body > *:first-child { margin-top: 0; }

.post-body > *:last-child { margin-bottom: 0; }

@media (max-width: 480px) {

  .post {

    grid-template-columns: 3.5rem minmax(0, 1fr);

    column-gap: .6rem;

    padding: .55rem .6rem;

  }

  .post-avatar,

  .post-avatar .avatar-lg {

    width: 3.5rem;

    height: 3.5rem;

  }

}

.composer { border-top: 1px solid var(--line); padding-top: 1rem; }

.composer-top {

  border-top: 0;

  border-bottom: 1px solid var(--line);

  padding-top: 0;

  padding-bottom: 1rem;

  margin-bottom: .25rem;

}

/* IC chronicle ? parchment ink world */

.ic-kicker {

  margin: 0 0 .35rem;

  font-family: var(--font-display);

  font-size: .78rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--gold);

}

.ic-chronicle .post-stream,

#ic-stream {

  gap: 1rem;

}

.ic-post {

  background:

    linear-gradient(180deg, rgba(48, 40, 30, 0.55), rgba(28, 24, 18, 0.72)),

    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.04) 2px, rgba(0,0,0,.04) 3px);

  border: 1px solid rgba(180, 150, 100, 0.22);

  border-left: 3px solid var(--gold);

  box-shadow: inset 0 0 0 1px rgba(180, 150, 100, 0.06);

}

.ic-post .post-body {

  font-family: var(--font-body);

  font-size: 1rem;

  line-height: 1.65;

  color: var(--ink);

}

.ic-post.staff-post {

  border-left-color: var(--staff-ink, #e6d5a0);

}

.ic-post.staff-post .post-body,

.ooc-post.staff-post .post-body,

.staff-post .post-body {

  color: var(--staff-ink, #e6d5a0);

}

.ic-post .post-author strong,

.ic-post .post-author a {

  font-family: var(--font-display);

  letter-spacing: .03em;

}



/* OOC board ? dry slate, not the world */

.ooc-board,

.forum-cats {

  /* marker for OOC surfaces */

}

.ooc-post {

  background: rgba(0, 0, 0, 0.18);

  border: 1px solid var(--line);

  border-left: 3px solid var(--copper);

  box-shadow: none;

}

.ooc-post .post-body {

  font-size: .92rem;

  line-height: 1.55;

  color: var(--ink);

}

.ooc-post.staff-post {

  border-left-color: var(--staff-ink, #e6d5a0);

}

.ooc-post.staff-post .post-body {

  color: var(--staff-ink, #e6d5a0);

}



.post-edited {

  margin: .35rem 0 0;

  padding-top: 0;

  font-size: .78rem;

  line-height: 1.4;

  font-family: var(--font-body);

  letter-spacing: .01em;

}

.post-tools {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  gap: .4rem .65rem;

  margin-top: .35rem;

  padding-top: .4rem;

  border-top: 1px solid rgba(180, 150, 100, 0.16);

}

.post-edit > summary {

  cursor: pointer;

  font-size: .82rem;

  color: var(--muted, #9a9488);

  list-style: none;

}

.post-edit > summary::-webkit-details-marker { display: none; }

.post-edit[open] > summary { margin-bottom: .45rem; color: var(--staff-ink, #e6d5a0); }

.post-edit-form { max-width: 40rem; }

.post-delete-form { margin: 0; }

.post-delete-btn {

  font-size: .82rem;

  padding: .2rem .55rem;

  color: #c48a7a;

}

.ooc-ribbon {

  display: inline-block;

  font-family: var(--font-display);

  font-size: .68rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--copper);

  border: 1px solid rgba(184, 136, 74, 0.42);

  padding: .15rem .45rem;

  margin-bottom: .65rem;

  background: rgba(184, 136, 74, 0.06);

}

.ic-ribbon {

  display: inline-block;

  font-family: var(--font-display);

  font-size: .68rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--gold);

  border: 1px solid rgba(201, 168, 106, 0.4);

  padding: .15rem .45rem;

  margin-bottom: .65rem;

}

.ooc-panel { margin-top: .85rem; }

.ooc-panel > h2 {

  margin: 0 0 .25rem;

  font-size: 1.05rem;

}

.ooc-panel-lead { margin: 0 0 .75rem; font-size: .85rem; }



/* OOC forum layout ? site palette, clear section ? board ? topics */

.forum-home .forum-page-title,

.forum-category-page .forum-page-title,

.forum-topic-page .forum-page-title,

.ooc-board .forum-page-title {

  margin: 0 0 .2rem;

  font-size: 1.15rem;

  font-weight: 600;

  letter-spacing: .02em;

  color: var(--ink);

}

.forum-page-lead,

.forum-section-lead {

  margin: 0 0 .7rem;

  font-size: .8rem;

  line-height: 1.4;

  color: var(--muted);

}

.forum-section {

  margin-top: 1.25rem;

  padding: .85rem 0 0;

  border-top: 1px solid var(--line);

}

.forum-kicker {

  margin: 0 0 .35rem;

  font-family: var(--font-display);

  font-size: .78rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--ooc, #a89880);

}

.forum-home-hero {

  margin: 0 0 1.15rem;

  padding-bottom: .85rem;

  border-bottom: 1px solid var(--line);

}

.forum-home-lead {

  margin: .35rem 0 0;

  max-width: 38rem;

  font-size: .95rem;

  line-height: 1.5;

}

.forum-home-quick {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

  margin: .65rem 0 0;

}

.forum-board-empty {

  display: grid;

  gap: .55rem;

  padding: .55rem 0 .25rem;

}

.forum-board-empty p { margin: 0; font-style: italic; }

.forum-unread-dot {

  display: inline-block;

  width: .5rem;

  height: .5rem;

  border-radius: 50%;

  background: var(--copper, #b8884a);

  margin-right: .35rem;

  vertical-align: middle;

  box-shadow: 0 0 0 2px rgba(184, 136, 74, 0.2);

}

.forum-topic-row.is-unread .forum-topic-title {

  color: #e8dfd0;

}

.forum-topic-head-actions {

  display: flex;

  flex-wrap: wrap;

  gap: .4rem;

  align-items: flex-start;

  justify-content: flex-end;

}

.forum-pager {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

  justify-content: center;

  align-items: center;

  margin: .75rem 0 .35rem;

  padding-top: .65rem;

  border-top: 1px solid var(--line);

}

.forum-pager-status {

  margin-right: .35rem;

  font-size: .8rem;

}

.forum-topic-notice {

  margin: .5rem 0 .85rem;

}

.forum-pager-link,

.forum-pager-current {

  min-width: 2rem;

  padding: .28rem .55rem;

  text-align: center;

  font-size: .85rem;

  border: 1px solid var(--line);

  background: var(--bg2);

  color: var(--ink);

  text-decoration: none;

}

.forum-pager-link:hover {

  border-color: var(--copper);

  color: var(--gold);

}

.forum-pager-current {

  border-color: var(--copper);

  color: var(--gold);

  font-weight: 600;

}

.composer-bottom {

  margin-top: .35rem;

  border-top: 1px solid var(--line);

  padding-top: 1rem;

}

.forum-home > .forum-section:first-child {

  margin-top: 0;

  padding-top: 0;

  border-top: 0;

}

.forum-section-title {

  margin: 0 0 .45rem;

  padding: .15rem 0 .15rem .55rem;

  font-family: var(--font-display);

  font-size: .78rem;

  font-weight: 600;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--gold);

  border-left: 3px solid var(--copper);

}

.forum-boards { display: grid; gap: .85rem; }

.forum-board {

  padding: 0;

  overflow: hidden;

  border: 1px solid var(--line);

  background: var(--bg2);

  box-shadow: inset 0 1px 0 rgba(180, 150, 100, 0.06);

}

.forum-board-head {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  justify-content: space-between;

  gap: .45rem .75rem;

  margin: 0;

  padding: .65rem .75rem;

  background: rgba(180, 150, 100, 0.08);

  border-bottom: 1px solid var(--line);

}

.forum-board-title {

  margin: 0;

  font-family: var(--font-display);

  font-size: 1rem;

  font-weight: 600;

  letter-spacing: .02em;

  color: var(--ink);

}

.forum-board-title a {

  color: inherit;

  text-decoration: none;

}

.forum-board-title a:hover { color: var(--gold); }

.forum-board-actions {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

  align-items: center;

}

.forum-board-meta {

  margin: .2rem 0 0;

  font-size: .76rem;

  line-height: 1.35;

  color: var(--muted);

}

.forum-board-empty {

  margin: 0;

  padding: .65rem .75rem;

  font-size: .8rem;

  color: var(--muted);

}

.forum-topic-panel {

  margin: 0;

  padding: .15rem 0 .3rem;

  background: rgba(0, 0, 0, 0.14);

}

.forum-topic-panel--standalone {

  margin-top: .65rem;

  border: 1px solid var(--line);

  background: rgba(0, 0, 0, 0.12);

}

.forum-topic-panel-label {

  margin: 0;

  padding: .4rem .75rem .15rem;

  font-size: .68rem;

  font-weight: 600;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--muted);

}

.forum-topic-list {

  list-style: none;

  margin: 0;

  padding: 0 .4rem .4rem;

}

.forum-topic-row {

  margin: 0 0 .25rem;

  border: 1px solid rgba(180, 150, 100, 0.12);

  border-radius: var(--radius);

  background: rgba(31, 26, 21, 0.55);

}

.forum-topic-row.is-pinned {

  background: rgba(180, 150, 100, 0.1);

  border-color: rgba(180, 150, 100, 0.28);

}

.forum-topic-link {

  display: grid;

  gap: .15rem;

  padding: .45rem .55rem;

  color: inherit;

  text-decoration: none;

}

.forum-topic-row:hover {

  border-color: var(--line-strong);

  background: rgba(37, 32, 27, 0.75);

}

.forum-topic-link:hover .forum-topic-title { color: var(--gold); }

.forum-topic-title {

  font-size: .9rem;

  font-weight: 600;

  line-height: 1.3;

  color: var(--ink);

}

.forum-topic-meta {

  display: block;

  padding: 0 .55rem .45rem;

  font-size: .74rem;

  line-height: 1.35;

  color: var(--muted);

}

.forum-topic-meta a.char-link { color: var(--copper); }

.forum-topic-meta a.char-link:hover { color: var(--gold); }

.forum-nav {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: .5rem .85rem;

  margin: 0 0 .75rem;

  padding-bottom: .55rem;

  border-bottom: 1px solid var(--line);

}

.forum-nav + .forum-nav {

  margin-top: 1rem;

  margin-bottom: 0;

  padding-top: .55rem;

  padding-bottom: 0;

  border-bottom: 0;

  border-top: 1px solid var(--line);

}

.forum-crumbs {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .2rem .15rem;

  list-style: none;

  margin: 0;

  padding: 0;

  font-size: .8rem;

  color: var(--muted);

  line-height: 1.35;

}

.forum-crumbs a { color: var(--copper); text-decoration: none; }

.forum-crumbs a:hover { color: var(--gold); }

.forum-crumbs [aria-current="page"] { color: var(--ink); }

.forum-crumb-sep {

  margin: 0 .2rem;

  color: rgba(180, 150, 100, 0.4);

}

.forum-nav-back { flex-shrink: 0; }

.forum-nav-extra {

  margin: .55rem 0 0;

  font-size: .82rem;

}

.forum-nav-extra a { color: var(--copper); }

.forum-nav-extra a:hover { color: var(--gold); }

.forum-flag {

  display: inline-block;

  margin-right: .2rem;

  color: var(--gold);

  font-size: .8em;

}

.forum-editor-heading {

  margin: .75rem 0 .4rem;

  font-size: .9rem;

  font-weight: 600;

}

.forum-home > .forum-editor {

  margin-top: 1.25rem;

  padding-top: .85rem;

  border-top: 1px solid rgba(180, 150, 100, 0.16);

}

.forum-board-settings {

  margin: 0 0 .45rem;

  padding: .35rem .45rem;

  border: 1px solid rgba(180, 150, 100, 0.16);

  background: rgba(0, 0, 0, .12);

}

.forum-board-settings > summary,

.forum-editor > summary,

.forum-editor-item > summary,

.forum-topic-manage > summary {

  cursor: pointer;

  list-style: none;

  font-size: .82rem;

  letter-spacing: .02em;

  color: var(--gold);

}

.forum-board-settings > summary::-webkit-details-marker,

.forum-editor > summary::-webkit-details-marker,

.forum-editor-item > summary::-webkit-details-marker,

.forum-topic-manage > summary::-webkit-details-marker { display: none; }

.forum-board-settings[open] { margin-bottom: .55rem; }

.forum-board-settings .forum-editor-form { margin-top: .45rem; }

.forum-editor-list { display: grid; gap: .65rem; }

.forum-editor-item {

  padding: .65rem .75rem;

  border: 1px solid var(--line);

  background: rgba(0, 0, 0, .16);

}

.forum-editor-form { max-width: 36rem; }

.forum-topic-manage { margin: 0; flex: 0 0 auto; }

.forum-topic-manage > summary {

  white-space: nowrap;

  padding: .2rem .45rem;

  border: 1px solid rgba(180, 150, 100, 0.22);

  background: rgba(0, 0, 0, 0.16);

}

.forum-topic-manage[open] {

  width: 100%;

}

.forum-topic-row:has(.forum-topic-manage) {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  gap: .25rem .55rem;

  align-items: start;

}

.forum-topic-row:has(.forum-topic-manage) .forum-topic-link {

  grid-column: 1;

}

.forum-topic-row:has(.forum-topic-manage) .forum-topic-meta {

  grid-column: 1;

}

.forum-topic-row:has(.forum-topic-manage) .forum-topic-manage {

  grid-column: 2;

  grid-row: 1 / span 2;

}

@media (max-width: 640px) {

  .forum-topic-row:has(.forum-topic-manage) {

    grid-template-columns: 1fr;

  }

  .forum-topic-row:has(.forum-topic-manage) .forum-topic-manage {

    grid-column: 1;

    grid-row: auto;

  }

}

.forum-topic-page .forum-topic-manage {

  margin: 0;

  flex-shrink: 0;

}

.forum-topic-page .forum-board-head {

  align-items: center;

  margin-bottom: .65rem;

}



/* ?? J?t?kt?r ?? */

.play-kicker {

  margin: 0 0 .35rem;

  font-family: var(--font-display);

  font-size: .78rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--gold);

}

.play-title {

  margin: 0 0 .35rem;

  font-family: var(--font-display);

  letter-spacing: .04em;

  color: var(--gold);

}

.play-lead {

  margin: .25rem 0 0;

  max-width: 40rem;

  font-size: .95rem;

  line-height: 1.5;

}

.play-hero {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 1rem;

  align-items: flex-start;

  margin: 0 0 1.1rem;

  padding-bottom: .9rem;

  border-bottom: 1px solid var(--line);

}

.play-hero-meta {

  display: flex;

  flex-wrap: wrap;

  gap: .55rem;

}

.play-section-title {

  font-family: var(--font-display);

  font-size: 1.25rem;

  color: var(--gold);

  margin: 1.75rem 0 .35rem;

}

.play-section-note {

  margin: 0 0 .85rem;

  font-size: .9rem;

}

.play-section-lead {

  margin: 0 0 1rem;

}



/* Tev?kenys?gek ? k?rk?r?s fantasy hub */

.act-realm {

  position: relative;

  isolation: isolate;

  min-height: min(72vh, 42rem);

  padding: 1.25rem 1.1rem 2.25rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  overflow: hidden;

  background: #141210;

}

.act-realm-bg {

  position: absolute;

  inset: 0;

  background-image: var(--act-city-image);

  background-size: cover;

  background-position: center;

  transform: scale(1.04);

  filter: saturate(1.05) contrast(1.08) brightness(1.08);

  z-index: 0;

}

.act-realm-veil {

  position: absolute;

  inset: 0;

  z-index: 1;

  background:

    radial-gradient(ellipse 62% 52% at 50% 48%, rgba(20, 16, 12, 0.2), rgba(18, 14, 10, 0.5) 68%, rgba(14, 12, 10, 0.72)),

    linear-gradient(180deg, rgba(22, 18, 14, 0.3), rgba(16, 14, 12, 0.45) 55%, rgba(12, 10, 8, 0.65));

  pointer-events: none;

}

.act-realm-head,

.act-stage,

.act-realm > .banner-tip {

  position: relative;

  z-index: 2;

}

.act-realm-head {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 1rem 1.5rem;

  align-items: flex-start;

  margin-bottom: 1rem;

}

.act-kicker {

  margin: 0 0 .3rem;

  font-size: .78rem;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: rgba(232, 220, 190, 0.72);

}

.act-kicker a { color: var(--gold); }

.act-title {

  margin: 0 0 .4rem;

  font-family: var(--font-display);

  font-size: clamp(1.45rem, 3vw, 2rem);

  color: var(--gold);

  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);

}

.act-lead { margin: 0; max-width: 36rem; line-height: 1.5; color: #e8dfd0; }

.act-ap-badge {

  display: flex;

  align-items: baseline;

  gap: .35rem;

  padding: .7rem 1rem;

  border: 1px solid rgba(201, 168, 106, 0.4);

  background: linear-gradient(160deg, rgba(28, 24, 18, 0.92), rgba(10, 12, 16, 0.88));

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 220, 160, 0.12);

}

.act-ap-label {

  font-size: .72rem;

  letter-spacing: .08em;

  color: var(--muted);

}

.act-ap-badge strong {

  font-family: var(--font-display);

  font-size: 1.55rem;

  color: var(--gold);

}

.act-stage {

  display: grid;

  place-items: center;

  padding: .75rem 0 1.25rem;

  perspective: 1100px;

}

.act-box {

  position: relative;

  width: min(100%, 36rem);

  max-width: 100%;

  aspect-ratio: 1;

  --act-spin: 0deg;

  --act-orbit: 36;

}

.act-box:focus-visible {

  outline: 2px solid rgba(201, 168, 106, 0.55);

  outline-offset: .35rem;

}

.act-box-shell {

  position: absolute;

  inset: 0;

  border-radius: 1.15rem;

  pointer-events: none;

  transform: rotateX(11deg);

  transform-style: preserve-3d;

  background:

    linear-gradient(155deg, #3a3126 0%, #1a1712 38%, #0d0e12 72%, #090a0d 100%);

  border: 1px solid rgba(201, 168, 106, 0.42);

  box-shadow:

    0 36px 58px rgba(0, 0, 0, 0.62),

    0 10px 18px rgba(0, 0, 0, 0.4),

    inset 0 1px 0 rgba(255, 220, 160, 0.16),

    inset 0 -22px 40px rgba(0, 0, 0, 0.45);

}

.act-box-nodes {

  position: absolute;

  inset: .7rem;

  z-index: 6;

  pointer-events: none;

}

.act-wheel {

  position: absolute;

  inset: 0;

  transform: rotate(var(--act-spin));

  transition: transform .52s cubic-bezier(.22, .7, .25, 1);

}

.act-box.is-spin-snap .act-wheel {

  transition: none;

}

.act-box-bevel {

  position: absolute;

  width: 1.35rem;

  height: 1.35rem;

  z-index: 4;

  pointer-events: none;

  border-color: rgba(201, 168, 106, 0.55);

  border-style: solid;

  opacity: .9;

}

.act-box-bevel--tl { top: .55rem; left: .55rem; border-width: 2px 0 0 2px; }

.act-box-bevel--tr { top: .55rem; right: .55rem; border-width: 2px 2px 0 0; }

.act-box-bevel--bl { bottom: .55rem; left: .55rem; border-width: 0 0 2px 2px; }

.act-box-bevel--br { bottom: .55rem; right: .55rem; border-width: 0 2px 2px 0; }

.act-box-face {

  position: absolute;

  inset: .7rem;

  border-radius: .85rem;

  overflow: visible;

  pointer-events: none;

  background:

    radial-gradient(circle at 50% 48%, rgba(55, 44, 28, 0.55), transparent 42%),

    linear-gradient(180deg, rgba(22, 20, 16, 0.92), rgba(10, 11, 14, 0.98));

  border: 1px solid rgba(180, 150, 100, 0.22);

  box-shadow:

    inset 0 0 0 1px rgba(0, 0, 0, 0.35),

    inset 0 18px 36px rgba(0, 0, 0, 0.35);

}

.act-box-floor {

  position: absolute;

  inset: 8%;

  border-radius: 50%;

  background:

    repeating-conic-gradient(from 0deg, rgba(201, 168, 106, 0.045) 0deg 8deg, transparent 8deg 16deg);

  opacity: .7;

  pointer-events: none;

  transform: rotate(var(--act-spin, 0deg));

  transition: transform .52s cubic-bezier(.22, .7, .25, 1);

}

.act-box.is-spin-snap .act-box-floor,

.act-box.is-spin-snap .act-ring {

  transition: none;

}

.act-ring {

  position: absolute;

  inset: 14%;

  border-radius: 50%;

  border: 1px solid rgba(201, 168, 106, 0.32);

  box-shadow:

    0 0 0 1px rgba(0, 0, 0, 0.4) inset,

    0 0 24px rgba(201, 168, 106, 0.08);

  pointer-events: none;

  transform: rotate(var(--act-spin, 0deg));

  transition: transform .52s cubic-bezier(.22, .7, .25, 1);

}

.act-ring--inner {

  inset: 28%;

  border-style: dashed;

  border-color: rgba(201, 168, 106, 0.2);

  box-shadow: none;

  opacity: .85;

}

.act-core-disc {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 6.6rem;

  height: 6.6rem;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  border: 1px solid rgba(201, 168, 106, 0.42);

  background:

    radial-gradient(circle at 35% 28%, rgba(90, 70, 40, 0.88), rgba(18, 15, 12, 0.96) 70%);

  box-shadow:

    0 12px 26px rgba(0, 0, 0, 0.5),

    inset 0 1px 0 rgba(255, 220, 160, 0.14);

  z-index: 2;

  pointer-events: none;

}

.act-pager {

  position: absolute;

  left: 50%;

  top: 50%;

  z-index: 8;

  transform: translate(-50%, -50%);

  display: grid;

  grid-template-columns: auto minmax(5.5rem, 7.2rem) auto;

  align-items: center;

  gap: .35rem;

  pointer-events: auto;

}

.act-pager-core {

  display: grid;

  justify-items: center;

  gap: .12rem;

  text-align: center;

  min-height: 4.4rem;

  place-content: center;

  padding: .35rem .2rem;

}

.act-pager-page {

  font-family: var(--font-display);

  font-size: 1.05rem;

  color: var(--gold);

  letter-spacing: .04em;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);

  line-height: 1.1;

}

.act-pager-city {

  font-size: .68rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: rgba(232, 220, 190, 0.72);

  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);

  max-width: 7rem;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.act-pager-hint {

  font-size: .62rem;

  letter-spacing: .04em;

  margin-top: .1rem;

}

.act-pager-btn {

  width: 2.15rem;

  height: 2.15rem;

  border-radius: 50%;

  border: 1px solid rgba(201, 168, 106, 0.55);

  background: linear-gradient(160deg, rgba(48, 40, 30, 0.96), rgba(12, 12, 16, 0.96));

  color: var(--gold);

  font-size: 1.35rem;

  line-height: 1;

  cursor: pointer;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 220, 160, 0.14);

  transition: border-color .18s ease, transform .18s ease, filter .18s ease;

}

.act-pager-btn:hover:not(:disabled),

.act-pager-btn:focus-visible:not(:disabled) {

  border-color: rgba(230, 190, 120, 0.8);

  transform: scale(1.06);

  filter: brightness(1.08);

  outline: none;

}

.act-pager-btn:disabled {

  opacity: .35;

  cursor: default;

}

.act-empty {

  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  margin: 0;

  padding: 2rem;

  text-align: center;

  color: var(--muted);

  z-index: 3;

}

.act-node {

  position: absolute;

  width: 7rem;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%) rotate(calc(-1 * var(--act-spin, 0deg)));

  display: grid;

  justify-items: center;

  gap: .32rem;

  text-decoration: none;

  color: inherit;

  z-index: 3;

  pointer-events: auto;

  cursor: pointer;

  opacity: 0;

  transition:

    left .52s cubic-bezier(.22, .7, .25, 1),

    top .52s cubic-bezier(.22, .7, .25, 1),

    opacity .35s ease,

    transform .18s ease,

    filter .18s ease;

}

.act-node.is-on-orbit {

  opacity: 1;

}

.act-node.is-focus .act-node-plate {

  box-shadow: 0 0 0 2px rgba(220, 180, 100, .55), 0 0 14px rgba(180, 140, 60, .35);

}

.act-box.is-turning .act-node {

  pointer-events: none;

}

.act-node:hover,

.act-node:focus-visible {

  transform: translate(-50%, -50%) rotate(calc(-1 * var(--act-spin, 0deg))) scale(1.07);

  filter: brightness(1.1);

  outline: none;

  z-index: 5;

}

.act-node-plate {

  width: 4.75rem;

  height: 4.75rem;

  border-radius: .9rem;

  border: 1px solid rgba(201, 168, 106, 0.55);

  background: linear-gradient(160deg, rgba(48, 40, 30, 0.98), rgba(12, 12, 16, 0.98));

  box-shadow:

    0 14px 24px rgba(0, 0, 0, 0.58),

    0 0 0 1px rgba(0, 0, 0, 0.35),

    inset 0 1px 0 rgba(255, 220, 160, 0.16);

  display: grid;

  place-items: center;

  overflow: hidden;

}

.act-node:hover .act-node-plate,

.act-node:focus-visible .act-node-plate {

  border-color: rgba(230, 190, 120, 0.75);

  box-shadow:

    0 16px 28px rgba(0, 0, 0, 0.6),

    0 0 18px rgba(201, 168, 106, 0.22),

    inset 0 1px 0 rgba(255, 220, 160, 0.2);

}

.act-node-icon {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.act-node-fallback {

  font-family: var(--font-display);

  font-size: 1.4rem;

  color: var(--gold);

}

.act-node-name {

  font-family: var(--font-display);

  font-size: .88rem;

  line-height: 1.15;

  max-width: 7.2rem;

  color: var(--gold);

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);

  text-align: center;

}

.act-module-head { margin-bottom: 1rem; }

.atelier {

  position: relative;

  overflow: visible;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background:

    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(55, 44, 28, 0.35), transparent 55%),

    linear-gradient(180deg, rgba(18, 16, 14, 0.96), rgba(10, 11, 14, 0.98));

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 220, 160, 0.08);

  padding: 1.15rem 1.15rem 1.4rem;

  border-radius: var(--radius);

}

.atelier-head {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 1rem 1.5rem;

  align-items: flex-start;

  margin-bottom: 1.15rem;

}

.atelier-stage { position: relative; }

.atelier-scrolls {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));

  gap: .85rem 0.75rem;

}

.atelier-scroll {

  appearance: none;

  font: inherit;

  color: inherit;

  background: transparent;

  border: 0;

  padding: 0;

  cursor: pointer;

  display: grid;

  justify-items: center;

  gap: .35rem;

  text-align: center;

  transition: transform .18s ease, filter .18s ease;

}

.atelier-scroll:hover,

.atelier-scroll:focus-visible {

  transform: translateY(-3px) scale(1.03);

  filter: brightness(1.08);

  outline: none;

}

.atelier-scroll-plate {

  width: 5.6rem;

  height: 5.6rem;

  border-radius: .85rem;

  border: 1px solid rgba(201, 168, 106, 0.55);

  background: linear-gradient(160deg, rgba(48, 40, 30, 0.98), rgba(12, 12, 16, 0.98));

  box-shadow:

    0 14px 24px rgba(0, 0, 0, 0.55),

    inset 0 1px 0 rgba(255, 220, 160, 0.16);

  display: grid;

  place-items: center;

  overflow: hidden;

}

.atelier-scroll:hover .atelier-scroll-plate,

.atelier-scroll:focus-visible .atelier-scroll-plate {

  border-color: rgba(230, 190, 120, 0.8);

  box-shadow:

    0 16px 28px rgba(0, 0, 0, 0.58),

    0 0 18px rgba(201, 168, 106, 0.2),

    inset 0 1px 0 rgba(255, 220, 160, 0.2);

}

.atelier-scroll-icon {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.atelier-scroll-fallback {

  font-family: var(--font-display);

  font-size: 1.6rem;

  color: var(--gold);

}

.atelier-scroll-name {

  font-family: var(--font-display);

  font-size: .92rem;

  color: var(--gold);

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);

  line-height: 1.15;

}

.atelier-scroll-meta {

  font-size: .72rem;

  line-height: 1.25;

  max-width: 8rem;

}

.atelier-bench {

  animation: atelier-bench-in .4s ease;

}

.atelier-bench-loading {

  padding: 1.25rem .5rem 1.75rem;

  text-align: center;

  font-size: .95rem;

}

.atelier-bench.is-enter {

  animation: atelier-bench-in .4s ease;

}

@keyframes atelier-bench-in {

  from { opacity: 0; transform: translateY(.6rem); }

  to { opacity: 1; transform: none; }

}

@media (prefers-reduced-motion: reduce) {

  .atelier-bench,

  .atelier-bench.is-enter,

  .atelier-scroll { transition: none; animation: none; }

}

.atelier-bench-bar {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  gap: .75rem 1rem;

  margin-bottom: .9rem;

  padding-bottom: .75rem;

  border-bottom: 1px solid rgba(180, 150, 100, 0.22);

}

.atelier-bench-title {

  flex: 1;

  min-width: 12rem;

}

.atelier-bench-title h2 {

  margin: 0 0 .2rem;

  font-family: var(--font-display);

  font-size: clamp(1.2rem, 2.4vw, 1.55rem);

  color: var(--gold);

}

.atelier-bench-title p { margin: 0; font-size: .9rem; }

.atelier-rank {

  font-size: .78rem;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: rgba(232, 220, 190, 0.8);

  border: 1px solid rgba(201, 168, 106, 0.35);

  padding: .35rem .55rem;

  background: rgba(0, 0, 0, 0.22);

}

.atelier-toolbar {

  display: flex;

  flex-wrap: wrap;

  gap: .55rem;

  align-items: center;

  justify-content: space-between;

  margin: 0 0 .75rem;

}

.atelier-recipe-list {

  display: grid;

  gap: .55rem;

}

.atelier-recipe {

  display: grid;

  grid-template-columns: 3.4rem minmax(0, 1fr) auto;

  gap: .7rem .85rem;

  align-items: center;

  padding: .65rem .75rem;

  border: 1px solid rgba(180, 150, 100, 0.24);

  background: rgba(0, 0, 0, 0.2);

  transition: border-color .18s ease, background .18s ease;

}

.atelier-recipe.is-ready:hover {

  border-color: rgba(201, 168, 106, 0.5);

  background: rgba(28, 24, 18, 0.45);

}

.atelier-recipe.is-locked,

.atelier-recipe.is-no-ap {

  opacity: .72;

}

.atelier-recipe-icon {

  position: relative;

  width: 3.4rem;

  height: 3.4rem;

  border: 1px solid rgba(180, 150, 100, 0.3);

  background: rgba(0, 0, 0, 0.28);

  display: grid;

  place-items: center;

  overflow: visible;

  cursor: pointer;

}

.atelier-recipe-icon:focus-visible {

  outline: 1px solid rgba(201, 168, 106, 0.7);

  outline-offset: 2px;

}

.atelier-recipe-icon.is-open {

  z-index: 6;

  border-color: rgba(201, 168, 106, 0.65);

}

.atelier-recipe-icon.rarity-uncommon { border-color: rgba(110, 160, 120, 0.55); }

.atelier-recipe-icon.rarity-rare { border-color: rgba(90, 140, 180, 0.6); }

.atelier-recipe-icon.rarity-epic { border-color: rgba(201, 168, 106, 0.7); }

.atelier-recipe-icon img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  pointer-events: none;

}

.atelier-recipe-icon span {

  font-family: var(--font-display);

  color: var(--gold);

}

.atelier-recipe-qty {

  position: absolute;

  right: 2px;

  bottom: 1px;

  font-size: .65rem;

  line-height: 1;

  color: #f0e6d2;

  text-shadow: 0 1px 2px #000;

  pointer-events: none;

}

.atelier-recipe-icon .craft-item-popover,

.atelier-recipe-icon .inv-popover {

  position: absolute;

  left: 50%;

  bottom: calc(100% + 8px);

  top: auto;

  transform: translateX(-50%);

  width: min(16rem, calc(100vw - 1.5rem));

  max-width: calc(100vw - 1.5rem);

  padding: .55rem .65rem;

  background: #1a1612;

  border: 1px solid rgba(201, 168, 106, 0.45);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);

  text-align: left;

  z-index: 8;

  pointer-events: none;

  box-sizing: border-box;

}

.craft-item-popover.is-anchored,

body > .craft-item-popover.is-anchored {

  position: fixed;

  left: 0;

  top: 0;

  right: auto;

  bottom: auto;

  transform: none;

  width: min(16rem, calc(100vw - 1.5rem));

  max-width: calc(100vw - 1.5rem);

  max-height: min(70dvh, 24rem);

  overflow-y: auto;

  overflow-wrap: anywhere;

  z-index: 14000;

  pointer-events: auto;

  padding-right: 2rem;

  box-sizing: border-box;

  background: #1a1612;

  border: 1px solid rgba(201, 168, 106, 0.45);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);

  padding: .55rem .65rem;

  text-align: left;

}

.atelier-recipe-icon .craft-item-popover.is-flip-down,

.atelier-recipe-icon .inv-popover.is-flip-down {

  bottom: auto;

  top: calc(100% + 8px);

}

.craft-item-popover.is-anchored.is-flip-down {

  bottom: auto;

  top: auto;

}

.atelier-recipe-icon .craft-item-popover strong,

.atelier-recipe-icon .inv-popover strong {

  display: block;

  color: #f0e6d2;

  font-size: .92rem;

  margin-bottom: .2rem;

}

.atelier-recipe-icon .inv-pop-meta,

.atelier-recipe-icon .inv-pop-stats,

.atelier-recipe-icon .inv-pop-desc {

  margin: .2rem 0 0;

  font-size: .78rem;

  line-height: 1.35;

  color: #b8ae9a;

}

.atelier-recipe-icon .inv-pop-stats { color: #9ec4a0; }

.atelier-recipe-icon .inv-pop-desc { color: #d2c8b4; }

.atelier-recipe-body { min-width: 0; }

.atelier-recipe-top {

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  justify-content: space-between;

  gap: .35rem .75rem;

  margin-bottom: .25rem;

}

.atelier-recipe-top h3 {

  margin: 0;

  font-family: var(--font-display);

  font-size: 1.02rem;

  color: #f0e6d2;

}

.atelier-recipe-ap {

  font-size: .78rem;

  color: var(--gold);

  letter-spacing: .04em;

}

.atelier-mats {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-wrap: wrap;

  gap: .3rem .55rem;

  font-size: .8rem;

}

.atelier-mats li {

  display: inline-flex;

  gap: .3rem;

  padding: .12rem .4rem;

  border: 1px solid rgba(180, 150, 100, 0.18);

  background: rgba(0, 0, 0, 0.18);

}

.atelier-mats .is-ok { color: #8fbf8f; }

.atelier-mats .is-short { color: #c87060; }

.atelier-recipe-req {

  margin: .35rem 0 0;

  font-size: .75rem;

}

.atelier-recipe-action {

  justify-self: end;

  text-align: right;

  max-width: 9.5rem;

}

.atelier-lock {

  display: block;

  font-size: .75rem;

  line-height: 1.3;

  color: var(--muted);

}

@media (max-width: 820px) {

  .atelier-scrolls {

    grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr));

  }

  .atelier-scroll-plate { width: 4.8rem; height: 4.8rem; }

  .atelier-recipe {

    grid-template-columns: 3rem minmax(0, 1fr);

  }

  .atelier-recipe-action {

    grid-column: 1 / -1;

    justify-self: stretch;

    max-width: none;

    text-align: left;

  }

  .atelier-recipe-action .btn {

    width: 100%;

  }

  .atelier-bench-bar [data-atelier-back] {

    min-height: var(--touch-min);

  }

  .atelier-toolbar input[data-atelier-search] {

    min-height: var(--touch-min);

    width: 100%;

  }

}

.atelier-scroll.is-dim {

  opacity: .72;

}

.atelier-scrolls--treasury {

  grid-template-columns: repeat(auto-fit, minmax(10rem, 14rem));

  justify-content: center;

  gap: 1.1rem;

}



/* ??? Munka (?ll?s-tekercsek) ??? */

.act-work-head {

  display: flex;

  gap: .9rem 1.1rem;

  align-items: flex-start;

}

.act-work-hub-icon {

  width: 4.5rem;

  height: 4.5rem;

  border-radius: .55rem;

  border: 1px solid rgba(201, 168, 106, .45);

  object-fit: cover;

  box-shadow: 0 10px 22px rgba(0, 0, 0, .45);

  flex-shrink: 0;

}

.atelier-scrolls--work {

  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));

}

.work-plate {

  position: relative;

}

.work-plate::before {

  content: "";

  position: absolute;

  inset: 0;

  background:

    radial-gradient(circle at 30% 25%, rgba(255, 220, 160, .12), transparent 45%),

    linear-gradient(145deg, rgba(70, 55, 35, .35), transparent 60%);

  pointer-events: none;

}

.work-plate--karavanrakodo {

  background: linear-gradient(160deg, rgba(62, 48, 28, .98), rgba(14, 12, 10, .98));

}

.work-plate--orjarat {

  background: linear-gradient(160deg, rgba(40, 48, 58, .98), rgba(10, 12, 16, .98));

}

.work-plate--rakparti {

  background: linear-gradient(160deg, rgba(36, 52, 58, .98), rgba(10, 14, 16, .98));

}

.work-plate--pecsetmasolo {

  background: linear-gradient(160deg, rgba(58, 42, 36, .98), rgba(14, 10, 10, .98));

}

.work-plate--ercvalogato {

  background: linear-gradient(160deg, rgba(52, 44, 32, .98), rgba(12, 12, 10, .98));

}

.work-plate--szentelyszolga {

  background: linear-gradient(160deg, rgba(48, 40, 52, .98), rgba(12, 10, 14, .98));

}

.work-plate--hadiraktar {

  background: linear-gradient(160deg, rgba(56, 44, 28, .98), rgba(14, 12, 10, .98));

}

.work-job-icon {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.work-shift-icon {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: inherit;

  display: block;

}

.work-wage-chip {

  white-space: nowrap;

}

.work-shift {

  display: grid;

  grid-template-columns: auto 1fr;

  gap: 1rem 1.25rem;

  align-items: center;

  max-width: 36rem;

  padding: 1.05rem 1.15rem;

  border: 1px solid rgba(180, 150, 100, .28);

  background:

    radial-gradient(ellipse 80% 70% at 0% 0%, rgba(201, 168, 106, .08), transparent 55%),

    rgba(0, 0, 0, .22);

}

.work-shift-seal {

  width: 4.6rem;

  height: 4.6rem;

  border-radius: .75rem;

  border: 1px solid rgba(201, 168, 106, .5);

  display: grid;

  place-items: center;

  font-family: var(--font-display);

  font-size: 1.75rem;

  color: var(--gold);

  box-shadow: 0 12px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 220, 160, .14);

}

.work-shift-body {

  display: grid;

  gap: .55rem;

}

.work-shift-line {

  margin: 0;

}

@media (max-width: 560px) {

  .act-work-head {

    flex-direction: column;

  }

  .work-shift {

    grid-template-columns: 1fr;

    justify-items: start;

  }

}



.act-theft .theft-result {

  margin: 0 0 1rem;

  padding: 1rem 1.1rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: linear-gradient(160deg, rgba(24, 20, 14, 0.92), rgba(8, 10, 14, 0.9));

  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.08);

}

.act-theft .theft-result.is-success {

  border-color: rgba(140, 180, 120, 0.35);

}

.act-theft .theft-result.is-fail {

  border-color: rgba(180, 110, 90, 0.4);

}

.act-theft .theft-result-lead,

.act-theft .theft-result-body {

  margin: 0;

}

.act-theft .theft-result-body {

  margin-top: .45rem;

  color: var(--muted);

}

.act-theft .theft-result-body strong {

  color: var(--gold);

}

.act-theft .theft-panel,

.act-panel {

  display: grid;

  gap: .75rem;

  max-width: 34rem;

  padding: 1rem;

  border: 1px solid rgba(180, 150, 100, 0.22);

  background:

    linear-gradient(180deg, rgba(40, 32, 24, 0.35), rgba(0, 0, 0, 0.22)),

    rgba(0, 0, 0, 0.2);

  box-shadow: inset 0 0 0 1px var(--frame-inner);

}

.act-theft .theft-id-label,

.act-panel-label {

  font-size: .85rem;

  color: var(--muted);

}

.act-theft .theft-id-row {

  display: flex;

  gap: .5rem;

  align-items: center;

}

.act-theft .theft-id-input {

  width: 10rem;

  max-width: 100%;

}

.act-theft .theft-status,

.act-status {

  margin: 0;

  font-size: .95rem;

}

.act-theft .theft-status.is-ok strong,

.act-status.is-ok strong {

  color: var(--gold);

}

.act-theft .theft-status.is-bad,

.act-status.is-bad {

  color: #d7a090;

}

.act-theft .theft-candidates {

  display: flex;

  flex-wrap: wrap;

  gap: .4rem;

  margin-top: .25rem;

}

.act-theft .theft-candidate.is-active {

  border-color: rgba(201, 168, 106, 0.55);

  color: var(--gold);

}

.act-pathrite-lead {

  margin: 0 0 1.1rem;

  max-width: 40rem;

}

.act-pathrite-born {

  margin: .55rem 0 0;

  font-size: .88rem;

}

.act-pathrite-panel {

  margin: 0 0 1rem;

  padding: .85rem 1rem;

  border: 1px solid rgba(180, 150, 100, 0.22);

  background: rgba(12, 10, 8, 0.35);

}

.act-pathrite-sub {

  margin: 0 0 .4rem;

  font-family: var(--font-display);

  font-size: 1.05rem;

  color: var(--gold);

}

.act-pathrite-form {

  max-width: 28rem;

  margin: 0 0 1.25rem;

}

.act-pathrite-form select {

  width: 100%;

  margin-top: .3rem;

}

.act-pathrite-foot {

  margin: 0;

  max-width: 40rem;

  font-size: .82rem;

  line-height: 1.45;

}

.act-pathrite-foot p { margin: 0; }

.atelier .act-module-head {

  display: flex;

  align-items: center;

  gap: .85rem;

}

.atelier .act-module-hub-icon {

  width: 4.5rem;

  height: 4.5rem;

  object-fit: contain;

  flex: 0 0 auto;

  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35));

}

.act-panel-line {

  margin: 0;

}

.act-panel-line strong {

  color: var(--gold);

}

.act-karavan .atelier-scroll-plate {

  background-size: cover;

  background-position: center;

  overflow: hidden;

}

.act-karavan .atelier-scroll-city {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.treasury-badge {

  display: grid;

  gap: .45rem;

  padding: .7rem 1rem;

  border: 1px solid rgba(201, 168, 106, 0.4);

  background: linear-gradient(160deg, rgba(28, 24, 18, 0.92), rgba(10, 12, 16, 0.88));

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 220, 160, 0.12);

  min-width: 10rem;

}

.treasury-badge-row {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: .75rem;

}

.treasury-badge-row strong {

  font-family: var(--font-display);

  color: var(--gold);

  font-size: 1.05rem;

}

.treasury-form {

  max-width: 28rem;

}

.treasury-quick {

  display: flex;

  flex-wrap: wrap;

  gap: .45rem;

  margin: .15rem 0 .35rem;

}

.guild-panel {

  display: grid;

  gap: .7rem;

  padding: 1rem;

  border: 1px solid rgba(180, 150, 100, 0.24);

  background: rgba(0, 0, 0, 0.2);

  max-width: 34rem;

}

.guild-ladder {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

}

.guild-ladder-step {

  font-size: .78rem;

  letter-spacing: .04em;

  padding: .28rem .55rem;

  border: 1px solid rgba(180, 150, 100, 0.22);

  color: var(--muted);

  background: rgba(0, 0, 0, 0.18);

}

.guild-ladder-step.is-done {

  color: var(--gold);

  border-color: rgba(201, 168, 106, 0.5);

  background: rgba(201, 168, 106, 0.12);

}

.guild-ladder-step.is-next {

  color: #f0e6d2;

  border-color: rgba(230, 190, 120, 0.55);

}

.guild-status {

  margin: 0;

  font-size: .95rem;

}

.guild-xp-label { margin: 0; font-size: .82rem; }

.guild-xp-bar { max-width: 18rem; }

.guild-actions {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .55rem .75rem;

  margin-top: .25rem;

}

.karavan-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));

  gap: .9rem;

}

.karavan-dest {

  display: grid;

  grid-template-rows: 8.5rem auto;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: rgba(0, 0, 0, 0.22);

  overflow: hidden;

  transition: border-color .2s ease, transform .2s ease;

}

.karavan-dest:not(.is-locked):hover {

  border-color: rgba(201, 168, 106, 0.55);

  transform: translateY(-2px);

}

.karavan-dest.is-locked { opacity: .72; }

.karavan-dest-art {

  background-image:

    linear-gradient(180deg, rgba(8, 10, 14, 0.15), rgba(8, 10, 14, 0.72)),

    var(--karavan-city);

  background-size: cover;

  background-position: center;

}

.karavan-dest-body {

  padding: .75rem .85rem .9rem;

  display: grid;

  gap: .28rem;

}

.karavan-dest-name {

  margin: 0;

  font-family: var(--font-display);

  font-size: 1.15rem;

  color: var(--gold);

  letter-spacing: .02em;

}

.karavan-dest-epithet,

.karavan-dest-route {

  margin: 0;

  font-size: .82rem;

  line-height: 1.35;

}

.karavan-dest-form {

  margin-top: .45rem;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .45rem .65rem;

}

.act-admin-table th, .act-admin-table td { vertical-align: top; }

.act-admin-cell {

  display: flex;

  align-items: center;

  gap: .35rem;

  margin: .2rem 0;

  font-size: .85rem;

  white-space: nowrap;

}

@media (max-width: 820px) {

  .act-box {

    width: min(100%, 22.5rem);

    --act-orbit: 39;

  }

  .act-box-shell { transform: rotateX(6deg); }

  .act-node {

    width: 4.75rem;

    gap: .25rem;

    min-height: var(--touch-min);

    padding: .15rem;

  }

  .act-node-plate { width: 3.5rem; height: 3.5rem; border-radius: .7rem; }

  .act-node-name {

    font-size: .58rem;

    max-width: 4.35rem;

    line-height: 1.12;

    letter-spacing: .01em;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

    word-break: break-word;

    hyphens: auto;

  }

  .act-core-disc { width: 5.2rem; height: 5.2rem; }

  .act-pager { grid-template-columns: auto minmax(4.6rem, 6rem) auto; gap: .35rem; }

  .act-pager-btn {

    width: var(--touch-min);

    height: var(--touch-min);

    font-size: 1.35rem;

  }

  .act-pager-page { font-size: .95rem; }

  .act-pager-hint { display: none; }

}

@media (prefers-reduced-motion: reduce) {

  .act-box-shell { transform: none; }

  .act-wheel,

  .act-ring,

  .act-box-floor,

  .act-node { transition: none; }

}

.play-hero-stat {

  padding: .45rem .7rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: rgba(0, 0, 0, 0.18);

  font-size: .82rem;

  color: var(--muted);

}

.play-hero-stat strong {

  display: block;

  font-family: var(--font-display);

  color: var(--gold);

  font-size: 1.15rem;

}

.play-fold { margin-top: .7rem; }

.play-fold > summary {

  gap: .65rem;

}

.play-fold > summary::before {

  /* Város-motívum a cím előtt; a nyíl marad a CSS-háromszög */

  order: 2;

  margin-left: auto;

  margin-right: 0;

}

.play-fold-motif {

  order: 0;

  --motif-size: 1.35rem;

  opacity: .9;

  color: var(--theme-accent, var(--gold));

  background-color: var(--theme-accent, var(--gold));

}

.play-fold-title {

  order: 1;

  flex: 1;

  min-width: 0;

}

.play-fold[data-city] > summary {

  background: linear-gradient(90deg, color-mix(in srgb, var(--theme-accent, var(--gold)) 14%, transparent), transparent 72%);

}

.play-fold-body { display: grid; gap: .7rem; }

.play-region-blurb {

  margin: 0;

  font-size: .92rem;

  line-height: 1.5;

  color: var(--ink);

}

.play-room-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: .35rem;

}

.play-room-list--hub {

  margin-top: .35rem;

}

.play-hub-rooms {

  margin: .85rem 0 1rem;

}

.play-hub-rooms .forum-topic-panel-label {

  margin: 0 0 .45rem;

}

.play-room-link {

  display: flex;

  justify-content: space-between;

  gap: .75rem;

  align-items: center;

  flex-wrap: nowrap;

  padding: .55rem .65rem;

  min-height: var(--touch-min);

  border: 1px solid rgba(180, 150, 100, 0.22);

  background: rgba(0, 0, 0, 0.16);

  color: inherit;

  text-decoration: none;

}

.play-room-link:hover {

  border-color: rgba(201, 168, 106, 0.5);

  color: inherit;

}

.play-room-link strong {

  font-family: var(--font-display);

  color: var(--gold);

  font-weight: 600;

}

.play-room-link-main {

  display: flex;

  flex-wrap: nowrap;

  align-items: baseline;

  gap: .2rem .35rem;

  min-width: 0;

  flex: 1 1 auto;

  overflow: hidden;

}

.play-room-link-main strong {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  min-width: 0;

}

.play-room-meta {

  font-size: .82rem;

  text-align: right;

  line-height: 1.35;

  flex: 0 1 auto;

  max-width: 48%;

  min-width: 0;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.play-room-meta .char-code {

  white-space: nowrap;

}

.play-loc-meta .play-room-meta {

  display: inline;

  font-size: inherit;

  text-align: left;

  max-width: none;

  white-space: normal;

  overflow: visible;

  text-overflow: unset;

}

.play-room-link--locked {

  opacity: 0.62;

  cursor: not-allowed;

  border-style: dashed;

}

.play-clan-hall {

  padding: .65rem 0;

  border-top: 1px solid rgba(180, 150, 100, 0.15);

}

.play-clan-hall:first-of-type { border-top: 0; padding-top: 0; }

.play-clan-hall-head {

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  justify-content: space-between;

  gap: .4rem;

  margin-bottom: .45rem;

}

.play-clan-hall-head h3 {

  margin: 0;

  font-family: var(--font-display);

  font-size: 1.05rem;

}

.play-clan-hall-head h3 a { color: var(--gold); }

.play-hall-badge {

  font-size: .72rem;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: var(--muted);

  border: 1px solid rgba(180, 150, 100, 0.28);

  padding: .12rem .4rem;

}

.play-empty {

  margin: .35rem 0;

  color: var(--muted);

  font-style: italic;

  line-height: 1.5;

}



.play-layout {

  display: grid;

  grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);

  gap: .9rem;

  align-items: start;

}

.play-tree {

  position: sticky;

  top: .65rem;

  max-height: calc(100vh - 1.5rem);

  max-height: calc(100dvh - 1.5rem);

  overflow: auto;

}

.play-tree-fold > summary.play-tree-summary {

  cursor: pointer;

  list-style: none;

  font-family: var(--font-display);

  font-size: .78rem;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--gold);

  margin: 0 0 .55rem;

  padding: .55rem 0 .4rem;

  min-height: var(--touch-min);

  display: flex;

  align-items: center;

  border-bottom: 1px solid rgba(180, 150, 100, 0.22);

}

.play-tree-fold > summary.play-tree-summary::-webkit-details-marker { display: none; }

.play-tree-back {

  margin: 0 0 .55rem;

  font-size: .85rem;

}

.play-tree-back a { color: var(--muted); }

.play-tree-back a:hover { color: var(--gold); }

.play-loc-hero {

  margin: 0 0 .85rem;

  padding-bottom: .75rem;

  border-bottom: 1px solid rgba(180, 150, 100, 0.28);

}

.play-loc-meta { margin: .2rem 0 0; font-size: .88rem; }

.play-loc-actions {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

  margin-top: .55rem;

}

.play-composer {

  margin-bottom: .25rem;

}

.play-compose-foot {

  margin: .85rem 0 0;

  text-align: center;

}

.loc-desc-btn {

  margin-top: .35rem;

  font-size: .85rem;

  padding: .25rem .7rem;

}

.loc-desc-dialog {

  border: 1px solid rgba(180, 150, 100, 0.35);

  border-radius: 0;

  padding: 0;

  max-width: min(40rem, calc(100vw - 2rem));

  width: 100%;

  background:

    linear-gradient(180deg, rgba(48, 40, 30, 0.97), rgba(24, 20, 16, 0.98));

  color: var(--ink);

  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);

}

.loc-desc-dialog::backdrop {

  background: rgba(8, 6, 4, 0.72);

}

.loc-desc-panel { padding: 1.1rem 1.25rem 1.25rem; }

.loc-desc-head {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: .75rem;

  margin-bottom: .85rem;

  padding-bottom: .65rem;

  border-bottom: 1px solid rgba(180, 150, 100, 0.22);

}

.loc-desc-head h2 {

  margin: 0;

  font-family: var(--font-display);

  font-size: 1.25rem;

  color: var(--gold);

}

.loc-desc-body {

  max-height: min(60vh, 28rem);

  overflow: auto;

  font-size: 1.02rem;

  line-height: 1.7;

  color: #f0e6d4;

  min-height: 3rem;

}

.loc-desc-banner {

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 0 1.35rem;

  padding: .35rem;

  width: 100%;

  height: clamp(11rem, 34vh, 15rem);

  box-sizing: border-box;

  text-align: center;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: rgba(0, 0, 0, 0.28);

  overflow: hidden;

}

.loc-desc-banner img {

  display: block;

  max-width: 100%;

  max-height: 100%;

  width: auto;

  height: auto;

  object-fit: contain;

  object-position: center;

}

.loc-desc-text {

  margin: 0;

}

.loc-desc-banner + .loc-desc-text {

  margin-top: 0.15rem;

}

.loc-tree-banner-preview {

  margin: .35rem 0 .5rem;

}

.loc-tree-banner-preview img {

  display: block;

  max-width: 100%;

  height: auto;

  border: 1px solid rgba(180, 150, 100, 0.25);

  object-fit: cover;

}

.loc-desc-edit {

  margin-top: 1rem;

  padding-top: .75rem;

  border-top: 1px solid rgba(180, 150, 100, 0.2);

}

.loc-desc-edit > summary {

  cursor: pointer;

  color: var(--staff-ink, #e6d5a0);

  font-size: .9rem;

  margin-bottom: .5rem;

}

.play-tree .tree { list-style: none; padding: 0; margin: 0; }

.play-tree .tree ul { list-style: none; padding-left: .85rem; margin: .25rem 0; }

.play-tree .tree > li { margin: 0 0 .45rem; }

.play-tree a {

  color: var(--muted);

  font-size: .9rem;

  display: inline-block;

  padding: .15rem 0;

  line-height: 1.35;

}

@media (max-width: 820px) {

  .play-tree a,

  .play-tree .tree-locked {

    min-height: var(--touch-min);

    padding: .45rem 0;

    display: flex;

    align-items: center;

  }

}

.play-tree a:hover { color: var(--ink); }

.play-tree a.active {

  color: var(--gold);

  font-weight: 600;

  border-left: 2px solid var(--copper);

  padding-left: .45rem;

  margin-left: -.45rem;

}

.play-tree .tree-locked {

  color: var(--muted);

  opacity: .72;

  font-style: italic;

  font-size: .9rem;

  display: inline-block;

  padding: .15rem 0;

  line-height: 1.35;

  cursor: default;

}

.play-tree .tree-root {

  display: inline-flex;

  align-items: center;

  gap: .4rem;

  font-family: var(--font-display);

  font-size: .78rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--gold);

  opacity: .9;

  padding: .2rem 0;

  line-height: 1.35;

}

.play-tree .tree-root .play-tree-motif {

  --motif-size: 1rem;

  opacity: .88;

  background-color: var(--theme-accent, var(--gold));

}

.play-tree .tree-root.is-current {

  opacity: 1;

  color: var(--ink);

}

.loc-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }



.stat-list { list-style: none; padding: 0; margin: 0; }

.stat-list li {

  display: flex; align-items: center; gap: .75rem; justify-content: space-between;

  padding: .4rem 0;

  border-bottom: 1px solid rgba(180,150,100,.1);

}

.inv-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }

.inv-list li {

  display: flex; justify-content: space-between; gap: .75rem; align-items: start;

  padding: .5rem .65rem;

  background: rgba(0,0,0,.14);

  border: 1px solid rgba(180,150,100,.12);

}



.tag {

  display: inline-block;

  font-size: .72rem;

  padding: .08rem .35rem;

  border: 1px solid var(--line);

  color: var(--gold);

  border-radius: var(--radius);

  margin-left: .3rem;

  font-family: var(--font-display);

  letter-spacing: .04em;

}



.bars { display: grid; gap: .4rem; margin: .7rem 0; }

.bar { display: grid; grid-template-columns: 2rem 1fr auto; gap: .5rem; align-items: center; font-size: .88rem; }

.bar-track {

  height: .45rem;

  background: var(--input);

  border-radius: var(--radius);

  overflow: hidden;

  border: 1px solid rgba(180,150,100,.15);

}

.bar-fill { height: 100%; width: 0; transition: width .3s ease; }

.bar-fill.hp { background: #8a4540; }

.bar-fill.mp { background: #5a7a7e; }



.table-scroll {

  width: 100%;

  max-width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

}



/* K?z?s UI primit?vek (2. hull?m b?v?ti) */

.ui-empty {

  margin: var(--space-2) 0;

  padding: var(--space-3);

  text-align: center;

  color: var(--muted);

  font-style: italic;

  line-height: 1.5;

  border: 1px dashed rgba(180, 150, 100, 0.22);

  background: rgba(0, 0, 0, 0.12);

}

.ui-empty-title {

  margin: 0 0 var(--space-1);

  font-family: var(--font-display);

  font-style: normal;

  font-size: 1rem;

  letter-spacing: .04em;

  color: var(--gold);

}

.ui-empty-cta {

  margin-top: var(--space-2);

  font-style: normal;

}

.ui-fold > summary {

  cursor: pointer;

  list-style: none;

  min-height: var(--touch-min);

  display: flex;

  align-items: center;

  gap: .5rem;

  padding: .55rem .15rem;

}

.ui-fold > summary::-webkit-details-marker { display: none; }



/* Fold touch ritmus ? sheet / clan / admin */

.sheet-fold > summary,

.clan-fold > summary,

.admin-fold > summary {

  min-height: var(--touch-min);

  box-sizing: border-box;

}



/* ?res ?llapotok ? k?z?s hang */

.play-empty,

.craft-empty,

.lore-empty,

.clan-empty,

.bazaar-empty,

.adv-empty,

.forum-board-empty {

  color: var(--muted);

  font-style: italic;

  line-height: 1.55;

}

.play-empty,

.craft-empty,

.lore-empty,

.adv-empty {

  padding: var(--space-3) var(--space-2);

}



.table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: .92rem; }

.table th, .table td {

  border-bottom: 1px solid rgba(180,150,100,.12);

  padding: .5rem .35rem;

  text-align: left;

  vertical-align: top;

  overflow-wrap: anywhere;

  word-break: break-word;

  hyphens: auto;

}

.table th {

  color: var(--muted);

  font-family: var(--font-display);

  font-weight: 500;

  font-size: .8rem;

  letter-spacing: .04em;

}

/* Admin / sz?les t?bl?k: a panel ne l?gjon ki v?zszintesen */

.panel > .table,

.panel > form > .table,

.panel > .form-stack > .table {

  display: block;

  overflow-x: auto;

  max-width: 100%;

}

.panel > .table > thead,

.panel > .table > tbody,

.panel > form > .table > thead,

.panel > form > .table > tbody,

.panel > .form-stack > .table > thead,

.panel > .form-stack > .table > tbody {

  display: table;

  width: 100%;

  table-layout: fixed;

}



.form-inline, .inline { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }



.world-map {

  position: relative; width: 100%; aspect-ratio: 16 / 10; margin-top: 1rem;

  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;

  background: var(--bg1);

}

.map-pin {

  position: absolute; transform: translate(-50%, -50%);

  min-width: 1rem; min-height: 1rem;

  border-radius: 50%;

  background: var(--copper);

  color: var(--ink); font-size: .78rem; padding: .15rem;

}

.map-pin span {

  position: absolute; left: 120%; top: 50%; transform: translateY(-50%);

  white-space: nowrap; background: rgba(20,18,16,.9);

  padding: .15rem .4rem; border: 1px solid var(--line); border-radius: var(--radius);

}

.pin-region { background: var(--gold); width: 12px; height: 12px; }

.pin-child { background: var(--sea); width: 9px; height: 9px; }



.chat-panel { display: grid; gap: .7rem; }

.chat-head {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: .75rem;

  flex-wrap: wrap;

}

.chat-head h1 { margin: 0; }

.chat-head-actions {

  display: flex;

  flex-wrap: wrap;

  gap: .4rem;

  align-items: center;

}

.chat-tabs {

  display: flex;

  flex-wrap: nowrap;

  gap: .35rem;

  border-bottom: 1px solid var(--line);

  padding-bottom: .45rem;

  align-items: stretch;

  position: relative;

  z-index: 30; /* Klánok menü a chat-log fölé */

  overflow: visible;

}

.chat-tabs-track {

  display: flex;

  flex-wrap: nowrap;

  gap: .35rem;

  flex: 1 1 auto;

  min-width: 0;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;

  align-items: stretch;

}

.chat-tab {

  appearance: none;

  background: transparent;

  border: 1px solid transparent;

  border-bottom: 0;

  color: var(--muted);

  font: inherit;

  font-family: var(--font-display);

  font-size: .92rem;

  letter-spacing: .03em;

  padding: 0;

  border-radius: var(--radius) var(--radius) 0 0;

  display: inline-flex;

  align-items: stretch;

  gap: 0;

  flex: 0 0 auto;

  white-space: nowrap;

  max-width: 16rem;

}

.chat-tab[hidden],

.chat-tab-overflow[hidden] { display: none !important; }

.chat-tab-overflow {

  position: relative;

  flex: 0 0 auto;

  align-self: stretch;

  z-index: 1;

}

.chat-tab-overflow-btn {

  appearance: none;

  display: inline-flex;

  align-items: center;

  gap: .35rem;

  height: 100%;

  padding: .4rem .75rem;

  border: 1px solid transparent;

  border-bottom: 0;

  border-radius: var(--radius) var(--radius) 0 0;

  background: transparent;

  color: var(--muted);

  font: inherit;

  font-family: var(--font-display);

  font-size: .92rem;

  letter-spacing: .03em;

  cursor: pointer;

  white-space: nowrap;

}

.chat-tab-overflow-btn:hover {

  color: var(--ink);

  border-color: var(--line);

}

.chat-tab-overflow-btn[aria-expanded="true"] {

  color: var(--gold);

  border-color: rgba(201, 168, 106, 0.45);

  background: rgba(0, 0, 0, 0.12);

}

.chat-tab-overflow-chevron {

  font-size: .75em;

  opacity: .75;

}

.chat-tab-menu {

  position: absolute;

  top: calc(100% + .2rem);

  right: 0;

  z-index: 50;

  min-width: 14rem;

  max-width: min(22rem, 90vw);

  max-height: min(22rem, 60vh);

  display: flex;

  flex-direction: column;

  gap: .35rem;

  padding: .45rem;

  background: var(--panel, #1a1510);

  border: 1px solid rgba(180, 150, 100, 0.35);

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);

}

.chat-tab-menu[hidden] { display: none !important; }

.chat-tab-menu-search input {

  width: 100%;

  box-sizing: border-box;

  font: inherit;

  font-size: .9rem;

  padding: .35rem .5rem;

}

.chat-tab-menu-list {

  overflow: auto;

  display: flex;

  flex-direction: column;

  gap: .15rem;

  max-height: 16rem;

}

.chat-tab-menu-item {

  appearance: none;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: .5rem;

  width: 100%;

  text-align: left;

  padding: .4rem .55rem;

  border: 0;

  border-radius: 2px;

  background: transparent;

  color: var(--ink);

  font: inherit;

  cursor: pointer;

}

.chat-tab-menu-item:hover,

.chat-tab-menu-item:focus-visible {

  background: rgba(201, 168, 106, 0.12);

  outline: none;

}

.chat-tab-menu-item.is-active {

  color: var(--gold);

  background: rgba(201, 168, 106, 0.1);

}

.chat-tab-menu-name {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  min-width: 0;

}

.chat-tab-open {

  appearance: none;

  background: transparent;

  border: 0;

  color: inherit;

  font: inherit;

  font-family: inherit;

  letter-spacing: inherit;

  padding: .4rem .75rem;

  cursor: pointer;

  display: inline-flex;

  align-items: baseline;

  gap: .35rem;

  min-width: 0;

  max-width: 100%;

}

.chat-tab-open .chat-tab-label {

  overflow: hidden;

  text-overflow: ellipsis;

}

.chat-tab:hover {

  color: var(--ink);

  background: rgba(180, 150, 100, 0.08);

}

.chat-tab.is-active {

  color: var(--gold);

  border-color: var(--line);

  background: var(--input);

}

.chat-tab-close {

  appearance: none;

  display: none;

  align-items: center;

  justify-content: center;

  margin: 0;

  padding: 0 .4rem 0 .1rem;

  border: 0;

  background: transparent;

  color: var(--muted);

  font: inherit;

  font-size: .95rem;

  line-height: 1;

  cursor: pointer;

  opacity: .65;

  flex: 0 0 auto;

}

.chat-tab-close:hover {

  color: var(--copper);

  opacity: 1;

}

.chat-tab[data-room-kind="dm"] .chat-tab-close,

.chat-tab[data-room-kind="private"] .chat-tab-close {

  display: inline-flex;

}

.chat-tab[data-room-kind="dm"] .chat-tab-open,

.chat-tab[data-room-kind="private"] .chat-tab-open {

  padding-right: .25rem;

}

.chat-tab-badge {

  font-family: var(--font-body, inherit);

  font-size: .72rem;

  font-weight: 600;

  letter-spacing: 0;

  color: var(--panel, #1a1510);

  background: var(--copper, #b87333);

  min-width: 1.15rem;

  padding: .05rem .28rem;

  border-radius: .2rem;

  line-height: 1.25;

  text-align: center;

}

.chat-tab-badge[hidden] { display: none !important; }

.chat-layout {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 15.5rem;

  gap: .75rem;

  align-items: stretch;

  position: relative;

  z-index: 1;

}

.chat-main {

  display: grid;

  grid-template-rows: minmax(0, 1fr) auto auto auto;

  gap: .55rem;

  min-width: 0;

  min-height: 0;

}

.chat-log {

  height: min(58vh, 520px);

  max-height: min(58vh, 520px);

  overflow: auto;

  padding: .45rem;

  background: var(--input);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  display: flex;

  flex-direction: column;

  gap: .28rem;

  overscroll-behavior: contain;

}

.chat-line {

  margin: 0;

  padding: .4rem .55rem;

  font-size: .95rem;

  line-height: 1.45;

  border-radius: var(--radius);

  background: rgba(180, 150, 100, 0.015);

  border: 1px solid rgba(180, 150, 100, 0.03);

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  gap: .35rem .55rem;

}

.chat-line:nth-child(even) {

  background: rgba(0, 0, 0, 0.04);

}

.chat-line--mine {

  background: rgba(201, 168, 106, 0.045);

  border-color: rgba(201, 168, 106, 0.08);

}

.chat-line--staff .chat-line-body {

  color: var(--staff-ink, #e6d5a0);

}

.chat-line--system {

  justify-content: flex-start;

  background: transparent;

  border-color: transparent;

}

.chat-system-body {

  flex: 1 1 auto;

  font-size: .82rem;

  font-style: italic;

  color: var(--muted);

  word-break: break-word;

}

.chat-name {

  font-weight: 400;

  flex: 0 0 auto;

}

.chat-time {

  font-size: .78rem;

  flex: 0 0 auto;

  white-space: nowrap;

}

.chat-line-body {

  color: var(--ink);

  word-break: break-word;

  flex: 1 1 8rem;

  min-width: 0;

}

.chat-emoji {

  display: inline-block;

  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;

  font-size: 1.08em;

  line-height: 1;

  vertical-align: -0.08em;

  margin: 0 0.02em;

}

.chat-mention {

  color: var(--gold);

  font-weight: 600;

}

.chat-mention--me {

  color: var(--copper);

  background: rgba(184, 136, 74, 0.18);

  padding: 0 .12rem;

  border-radius: .15rem;

}

.chat-msg-del {

  appearance: none;

  margin-left: auto;

  flex: 0 0 auto;

  border: 0;

  background: transparent;

  color: var(--muted);

  font-size: 1.05rem;

  line-height: 1;

  padding: .1rem .35rem;

  cursor: pointer;

  opacity: .55;

}

.chat-msg-del:hover { color: var(--copper); opacity: 1; }

.chat-ban-notice {

  margin: 0;

  font-size: .88rem;

  color: var(--copper);

}

.chat-ban-notice[hidden] { display: none !important; }

.chat-status {

  margin: 0;

  font-size: .88rem;

  line-height: 1.35;

}

.chat-status[hidden] { display: none !important; }

.chat-status.is-error { color: var(--copper); }

.chat-status.is-ok { color: var(--gold); }

.chat-online-list li {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .3rem .4rem;

  margin: 0;

  padding: .28rem .4rem;

  border-radius: var(--radius);

  background: rgba(180, 150, 100, 0.015);

  border: 1px solid rgba(180, 150, 100, 0.03);

}

.chat-online-list li:nth-child(even) {

  background: rgba(0, 0, 0, 0.04);

}

.chat-online-list li.is-me {

  background: rgba(201, 168, 106, 0.045);

  border-color: rgba(201, 168, 106, 0.08);

}

.chat-online-actions {

  display: inline-flex;

  align-items: center;

  gap: .15rem;

  margin-left: auto;

  flex-shrink: 0;

}

.chat-icon-btn {

  appearance: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 1.55rem;

  height: 1.55rem;

  margin: 0;

  padding: 0;

  border: 1px solid transparent;

  border-radius: var(--radius);

  background: transparent;

  color: var(--muted);

  cursor: pointer;

  line-height: 0;

  transition: color .15s ease, border-color .15s ease, background .15s ease;

}

.chat-icon-btn:hover,

.chat-icon-btn:focus-visible {

  color: var(--gold);

  border-color: rgba(201, 168, 106, 0.35);

  background: rgba(201, 168, 106, 0.08);

  outline: none;

}

.chat-icon {

  width: .95rem;

  height: .95rem;

  display: block;

}

.chat-mod-menu {

  position: relative;

}

.chat-mod-menu > summary {

  list-style: none;

}

.chat-mod-menu > summary::-webkit-details-marker {

  display: none;

}

.chat-mod-menu[open] > summary {

  color: var(--copper);

  border-color: rgba(184, 136, 74, 0.4);

  background: rgba(184, 136, 74, 0.1);

}

.chat-mod-panel {

  position: absolute;

  right: 0;

  top: calc(100% + .25rem);

  z-index: 5;

  min-width: 7.5rem;

  padding: .35rem;

  background: var(--bg2, #1a1713);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);

}

.chat-ban-select {

  font: inherit;

  font-size: .72rem;

  width: 100%;

  max-width: 8.5rem;

  padding: .2rem .3rem;

  color: var(--ink);

  background: var(--input);

  border: 1px solid var(--line);

  border-radius: var(--radius);

}

.chat-ext-link {

  color: var(--gold);

  text-decoration: underline;

  text-underline-offset: 2px;

}

.chat-blocked-link {

  color: var(--muted);

  text-decoration: line-through;

  cursor: help;

}

.chat-archive-hint { margin: .25rem 0 .75rem; font-size: .9rem; }

.chat-archive-filters {

  display: flex;

  flex-wrap: wrap;

  gap: .6rem .85rem;

  align-items: end;

  margin-bottom: .85rem;

}

.chat-archive-filters label {

  display: grid;

  gap: .25rem;

  font-size: .85rem;

  color: var(--muted);

}

.chat-archive-filters select {

  font: inherit;

  color: var(--ink);

  background: var(--input);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: .35rem .5rem;

  min-width: 10rem;

}

.chat-archive-title {

  margin: 0 0 .55rem;

  font-size: 1.05rem;

  color: var(--gold);

  font-family: var(--font-display);

}

.chat-archive-log {

  height: min(65vh, 560px);

}

.chat-private-bar {

  display: flex;

  flex-wrap: wrap;

  gap: .45rem .65rem;

  align-items: end;

  margin: .15rem 0 .35rem;

}

.chat-private-bar[hidden] { display: none !important; }

.chat-private-invite {

  display: grid;

  gap: .2rem;

  font-size: .8rem;

  color: var(--muted);

}

.chat-private-invite select {

  font: inherit;

  font-size: .85rem;

  color: var(--ink);

  background: var(--input);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: .3rem .45rem;

  min-width: 11rem;

}

.chat-tab[data-room-kind="private"] .chat-tab-label::before,

.chat-tab[data-room-kind="dm"] .chat-tab-label::before {

  content: 'Priv?t ? ';

  color: var(--copper);

  font-size: .78em;

  letter-spacing: 0;

}

.chat-form {

  display: grid;

  grid-template-columns: 1fr auto;

  gap: .5rem;

  align-items: center;

}

.chat-form input[type="text"] {

  min-width: 0;

  width: 100%;

}

.chat-online {

  margin: 0;

  padding: .7rem .75rem;

  display: grid;

  align-content: start;

  gap: .35rem;

}

.chat-online-toggle {

  appearance: none;

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  gap: .35rem .55rem;

  width: 100%;

  margin: 0;

  padding: 0;

  border: 0;

  background: transparent;

  color: inherit;

  font: inherit;

  text-align: left;

  cursor: default;

}

.chat-online-toggle h2 {

  margin: 0;

  font-size: .95rem;

  font-family: var(--font-display);

  color: var(--gold);

}

.chat-online-count { margin: 0; font-size: .8rem; }

.chat-online-chevron { display: none; }

.chat-online-body { min-width: 0; }

.chat-online-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: .3rem;

  max-height: min(50vh, 420px);

  overflow: auto;

  font-size: .88rem;

}

.chat-online-list .chat-name {

  font-weight: 400;

  white-space: nowrap;

}

.form-inline-row {

  display: flex;

  flex-wrap: wrap;

  gap: .5rem .75rem;

  align-items: end;

  margin: .35rem 0 .75rem;

}

.form-inline-row label { margin: 0; font-size: .85rem; }

.check-inline {

  display: inline-flex;

  align-items: center;

  gap: .35rem;

}

.inline-form { display: inline; }



@media (max-width: 820px) {

  .chat-panel { gap: .55rem; }

  .chat-head h1 { font-size: 1.35rem; }

  .chat-layout { grid-template-columns: 1fr; }

  .chat-online {

    order: -1;

    max-height: none;

    padding: .55rem .65rem;

  }

  .chat-online-toggle {

    cursor: pointer;

    display: flex;

    align-items: center;

    min-height: var(--touch-min);

    padding: .35rem 0;

  }

  .chat-online-chevron {

    display: inline-block;

    margin-left: auto;

    width: .55rem;

    height: .55rem;

    border-right: 2px solid var(--muted);

    border-bottom: 2px solid var(--muted);

    transform: rotate(45deg);

    transition: transform .15s ease;

  }

  .chat-online.is-collapsed .chat-online-chevron {

    transform: rotate(-135deg);

  }

  .chat-online.is-collapsed .chat-online-body {

    display: none;

  }

  .chat-online-list {

    max-height: 8.5rem;

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    gap: .3rem;

  }

  .chat-online-list li {

    flex-wrap: nowrap;

  }

  .chat-log {

    height: min(48dvh, 420px);

    max-height: min(48dvh, 420px);

  }

  .chat-form {

    position: sticky;

    bottom: 0;

    z-index: 2;

    gap: .45rem;

    align-items: stretch;

    padding: .45rem 0 .2rem;

    margin: 0 -.05rem;

    background: var(--panel);

    box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, 0.35);

  }

  .chat-form input[type="text"],

  .chat-form .btn {

    min-height: var(--touch-min);

  }

  .chat-tab-open {

    display: inline-flex;

    align-items: center;

    box-sizing: border-box;

    min-height: var(--touch-min);

    font-size: .9rem;

    padding: .45rem .75rem;

  }

  .chat-tab-close {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: var(--touch-min);

    min-height: var(--touch-min);

    padding: 0;

  }

  .chat-tab[data-room-kind="dm"] .chat-tab-open,

  .chat-tab[data-room-kind="private"] .chat-tab-open {

    padding-right: .35rem;

  }

  .chat-icon-btn {

    width: var(--touch-min);

    height: var(--touch-min);

  }

  .chat-icon {

    width: 1.05rem;

    height: 1.05rem;

  }

  .chat-archive-filters select {

    min-width: 0;

    width: 100%;

    min-height: var(--touch-min);

  }

}



@media (min-width: 821px) and (min-height: 800px) {

  .chat-log {

    height: min(62vh, 600px);

    max-height: min(62vh, 600px);

  }

}



.play-char-count {

  display: block;

  margin-top: .25rem;

  font-size: .82rem;

}

.play-char-count.is-short {

  color: var(--copper);

}

.forum-compose-jump {

  margin: .35rem 0 .75rem;

}

.unread strong { color: var(--copper); }

.linkish { background: none; border: 0; color: var(--gold); cursor: pointer; font: inherit; padding: 0; text-align: left; }



/* H?rn?k ? kompakt lista */

.hirnok.panel {

  padding: .85rem 1rem 1.1rem;

}

.hirnok-head {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  gap: .75rem;

  flex-wrap: wrap;

  margin: 0 0 .75rem;

  padding-bottom: .55rem;

  border-bottom: 1px solid var(--line);

}

.hirnok-head-text {

  min-width: 0;

}

.hirnok-title-page {

  margin: 0;

  font-size: 1.15rem;

  letter-spacing: .04em;

  font-weight: 600;

}

.hirnok-lead {

  margin: .15rem 0 0;

  font-size: .78rem;

}

.hirnok-reply {

  margin: 0 0 .85rem;

  padding: .65rem .75rem;

  border: 1px solid var(--line);

  background: rgba(0, 0, 0, .14);

}

.hirnok-reply-title {

  margin: 0 0 .35rem;

  font-size: .95rem;

  font-weight: 600;

}

.hirnok-reply-meta {

  margin: 0 0 .45rem;

  font-size: .78rem;

}

.hirnok-reply-form textarea {

  font-size: .88rem;

  min-height: 4.5rem;

}

.hirnok-label {

  font-size: .8rem;

}

.hirnok-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: .4rem;

}

.hirnok-item {

  padding: .45rem .55rem;

  border: 1px solid var(--line);

  background: rgba(0, 0, 0, .14);

  font-size: .86rem;

}

.hirnok-item.is-unread {

  border-color: rgba(201, 168, 106, .45);

  border-left: 2px solid var(--gold);

  background: rgba(201, 168, 106, .06);

}

.hirnok-item-head {

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  gap: .25rem .5rem;

}

.hirnok-kind {

  font-size: .6rem;

  letter-spacing: .06em;

  text-transform: uppercase;

  padding: .05rem .28rem;

  border: 1px solid var(--line);

  color: var(--muted);

  line-height: 1.3;

}

.hirnok-kind--raven {

  border-color: rgba(140, 160, 180, .4);

  color: #a8c0d4;

}

.hirnok-kind--system {

  border-color: rgba(180, 140, 70, .35);

  color: var(--gold);

}

.hirnok-item-title {

  flex: 1 1 8rem;

  font-weight: 600;

  font-size: .88rem;

  line-height: 1.3;

  color: var(--ink);

}

.hirnok-date {

  font-size: .72rem;

  margin-left: auto;

  white-space: nowrap;

}

.hirnok-meta {

  margin: .2rem 0 0;

  font-size: .75rem;

  line-height: 1.35;

}

.hirnok-body {

  margin: .3rem 0 0;

  white-space: pre-wrap;

  line-height: 1.4;

  font-size: .84rem;

  color: var(--text);

}

.hirnok-actions {

  margin-top: .35rem;

  gap: .25rem;

}

.hirnok-actions .btn-tiny {

  padding: .12rem .4rem;

  font-size: .72rem;

}

.hirnok-hint {

  font-size: .72rem;

}

.hirnok-empty {

  font-size: .84rem;

  padding: .35rem 0;

  list-style: none;

}

.hirnok-quote {

  margin: 0 0 .55rem;

  padding: .35rem .5rem;

  border-left: 2px solid var(--line);

  color: var(--muted);

  font-size: .8rem;

  line-height: 1.4;

  white-space: pre-wrap;

}

@media (max-width: 640px) {

  .hirnok-actions.btn-row {

    gap: .25rem;

  }

}



/* Szem?lyes csere + Er?pr?ba */

.act-lead {

  margin: .25rem 0 0;

  font-size: .84rem;

  max-width: 36rem;

}

.trade-section-title {

  margin: 1rem 0 .5rem;

  font-size: 1rem;

  font-weight: 600;

  letter-spacing: .03em;

}

.trade-offer-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: .45rem;

}

.trade-offer {

  padding: .55rem .65rem;

  border: 1px solid var(--line);

  background: rgba(0, 0, 0, .14);

  font-size: .86rem;

}

.trade-offer.is-focus {

  border-color: rgba(201, 168, 106, .55);

}

.trade-offer-head {

  margin: 0 0 .35rem;

}

.trade-offer-bits {

  margin: 0 0 .45rem;

  padding-left: 1.1rem;

  font-size: .8rem;

}



/* Karakterkeres? (csere / er?pr?ba) */

.char-picker {

  position: relative;

  margin: 0 0 .85rem;

}

.char-picker-label {

  display: grid;

  gap: .3rem;

  font-size: .84rem;

}

.char-picker-label input[type="search"] {

  width: 100%;

  min-height: 2.35rem;

  padding: .45rem .7rem;

  font: inherit;

  color: inherit;

  border: 1px solid rgba(180, 150, 100, 0.35);

  background: rgba(0, 0, 0, 0.35);

}

.char-picker.has-pick .char-picker-label input {

  display: none;

}

.char-picker-picked {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .4rem .65rem;

  margin: .35rem 0 0;

  font-size: .88rem;

}

.char-picker-list {

  position: absolute;

  z-index: 8;

  left: 0;

  right: 0;

  top: calc(100% - .15rem);

  margin: 0;

  padding: .25rem 0;

  list-style: none;

  max-height: 14rem;

  overflow: auto;

  border: 1px solid rgba(180, 150, 100, 0.4);

  background: rgba(18, 14, 12, 0.97);

  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);

}

.char-picker-option {

  display: block;

  width: 100%;

  text-align: left;

  padding: .45rem .7rem;

  border: 0;

  background: transparent;

  color: inherit;

  font: inherit;

  cursor: pointer;

}

.char-picker-option:hover,

.char-picker-option:focus {

  background: rgba(201, 168, 106, 0.14);

  outline: none;

}

.char-picker-option.is-away,

.char-picker-option:disabled {

  opacity: .55;

  cursor: not-allowed;

  color: var(--muted);

}

.char-picker-option.is-away:hover,

.char-picker-option:disabled:hover {

  background: transparent;

}

.char-picker-status {

  margin: .25rem 0 0;

  font-size: .78rem;

  min-height: 1.1em;

}

.char-picker.is-searching .char-picker-list {

  opacity: .7;

}



/* Szem?lyes csere ? compose */

.trade-compose {

  display: grid;

  gap: .85rem;

  max-width: 40rem;

}

.trade-silver-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: .65rem;

}

.trade-silver-row label {

  display: grid;

  gap: .25rem;

  font-size: .84rem;

}

.trade-silver-row input[type="number"] {

  width: 100%;

  min-height: 2.2rem;

  padding: .35rem .55rem;

  font: inherit;

}

.trade-wallet-hint {

  font-size: .72rem;

}

.trade-bag-block {

  display: grid;

  gap: .45rem;

}

.trade-bag-head {

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  justify-content: space-between;

  gap: .25rem .75rem;

}

.trade-bag-title {

  margin: 0;

  font-size: .92rem;

  font-weight: 600;

  letter-spacing: .03em;

}

.trade-bag-hint {

  margin: 0;

  font-size: .75rem;

}

.trade-bag-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr));

  gap: .35rem;

}

.trade-bag-slot {

  position: relative;

  aspect-ratio: 1;

  padding: 0;

  margin: 0;

  border: 1px solid rgba(180, 150, 100, 0.35);

  border-radius: 2px;

  background: linear-gradient(160deg, rgba(50, 42, 32, 0.95), rgba(22, 18, 14, 0.98));

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);

  cursor: pointer;

  color: inherit;

  font: inherit;

  display: grid;

  place-items: center;

}

.trade-bag-slot img {

  width: 72%;

  height: 72%;

  object-fit: contain;

  pointer-events: none;

}

.trade-bag-letter {

  font-family: var(--font-display);

  font-size: .95rem;

  color: var(--gold);

}

.trade-bag-qty {

  position: absolute;

  right: 2px;

  bottom: 1px;

  font-size: .62rem;

  font-weight: 700;

  color: #f0e6d0;

  text-shadow: 0 1px 2px #000;

}

.trade-bag-slot.is-selected {

  border-color: rgba(201, 168, 106, 0.85);

  box-shadow: inset 0 0 0 1px rgba(201, 168, 106, 0.35), 0 0 0 1px rgba(201, 168, 106, 0.25);

}

.trade-bag-slot.rarity-uncommon { border-color: rgba(110, 160, 120, 0.55); }

.trade-bag-slot.rarity-rare { border-color: rgba(90, 140, 180, 0.6); }

.trade-bag-slot.rarity-epic { border-color: rgba(201, 168, 106, 0.7); }



.trade-offer-tray {

  padding: .55rem .65rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: rgba(0, 0, 0, 0.18);

  display: grid;

  gap: .45rem;

}

.trade-tray-slots {

  display: grid;

  gap: .4rem;

}

.trade-tray-row {

  display: grid;

  grid-template-columns: 2.2rem minmax(0, 1fr) auto auto;

  gap: .45rem .55rem;

  align-items: center;

  font-size: .84rem;

}

.trade-tray-icon {

  width: 2.2rem;

  height: 2.2rem;

  display: grid;

  place-items: center;

  border: 1px solid rgba(180, 150, 100, 0.3);

  background: rgba(0, 0, 0, 0.3);

  font-family: var(--font-display);

  color: var(--gold);

}

.trade-tray-icon img {

  width: 78%;

  height: 78%;

  object-fit: contain;

}

.trade-tray-meta {

  min-width: 0;

}

.trade-tray-meta strong {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-weight: 600;

}

.trade-tray-qty {

  display: inline-flex;

  align-items: center;

  gap: .2rem;

  font-variant-numeric: tabular-nums;

}



@media (max-width: 560px) {

  .trade-silver-row {

    grid-template-columns: 1fr;

  }

  .trade-tray-row {

    grid-template-columns: 2.2rem minmax(0, 1fr);

  }

  .trade-tray-qty,

  .trade-tray-row > .btn {

    grid-column: 2;

  }

}



.eroproba-meta {

  margin: 0 0 .75rem;

  font-size: .8rem;

}

.eroproba-seen {

  margin: 0 0 1rem;

  padding: .55rem .7rem;

  border: 1px solid var(--line);

  background: rgba(0, 0, 0, .12);

  font-size: .86rem;

}

.eroproba-stage {

  margin: 0 0 1.1rem;

  padding: .75rem .85rem;

  border: 1px solid var(--line);

  background: rgba(0, 0, 0, .2);

}

.eroproba-result {

  margin: 0 0 .65rem;

  font-size: .84rem;

}

.eroproba-rounds {

  display: grid;

  gap: .65rem;

}

.eroproba-beat {

  margin: 0;

  font-size: .88rem;

  line-height: 1.5;

  color: var(--ink);

  white-space: pre-wrap;

  opacity: 0;

  transform: translateY(.35rem);

  transition: opacity .45s ease, transform .45s ease;

}

.eroproba-beat.is-in {

  opacity: 1;

  transform: none;

}

.eroproba-challenge {

  max-width: 28rem;

}

.rarity-rare { border-color: rgba(90,122,126,.5) !important; }

.rarity-epic { border-color: rgba(201,168,106,.55) !important; }

.crumb { color: var(--muted); font-size: .88rem; margin: 0 0 .4rem; }

.region-block + .region-block {

  margin-top: 1.1rem;

  padding-top: .9rem;

  border-top: 1px solid rgba(180,150,100,.12);

}



.avatar-sm { border-radius: var(--radius); border: 1px solid var(--line); vertical-align: middle; object-fit: cover; width: 28px; height: 28px; }

.avatar-lg { border-radius: var(--radius); border: 1px solid var(--line); object-fit: cover; width: 100px; height: 100px; }

.avatar-album {

  display: grid;

  gap: .45rem;

}

.avatar-album-head {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: .5rem;

}

.avatar-album-head h3 {

  margin: 0;

  font-size: .72rem;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--gold);

  border: 0;

  padding: 0;

}

.avatar-album-nav {

  display: inline-flex;

  align-items: center;

  gap: .35rem;

}

.avatar-album-meta {

  min-width: 5.5rem;

  text-align: center;

  font-family: var(--font-display);

  font-size: .82rem;

  color: var(--muted);

  letter-spacing: .03em;

}

.avatar-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));

  gap: .4rem;

  max-height: none;

  overflow: visible;

  padding: .55rem;

  background: var(--input);

  border: 1px solid var(--line);

  border-radius: var(--radius);

}

.avatar-pick {

  padding: 2px;

  border: 1px solid transparent;

  background: transparent;

  cursor: pointer;

  border-radius: var(--radius);

  line-height: 0;

  transition: border-color .12s ease, transform .12s ease;

}

.avatar-pick:hover {

  border-color: rgba(201, 168, 106, 0.55);

  transform: translateY(-1px);

}

.avatar-pick.is-selected {

  border-color: var(--gold);

  box-shadow: 0 0 0 1px rgba(201, 168, 106, 0.35);

}

.avatar-pick img {

  display: block;

  width: 100%;

  aspect-ratio: 1;

  height: auto;

  max-width: 75px;

  margin: 0 auto;

  object-fit: cover;

  border-radius: var(--radius);

}

.avatar-album legend {

  color: var(--gold);

  font-family: var(--font-display);

  margin-bottom: .4rem;

  font-size: .95rem;

}

.char-head { display: flex; gap: .85rem; align-items: center; }



fieldset {

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: .75rem .9rem;

  margin: 0;

}

legend {

  padding: 0 .35rem;

  color: var(--gold);

  font-family: var(--font-display);

  font-size: .9rem;

}



@media (max-width: 820px) {

  .play-layout { grid-template-columns: 1fr; }

  .play-tree {

    position: static;

    max-height: none;

    overflow: visible;

  }

  .play-hero { flex-direction: column; }

  .play-composer {

    position: sticky;

    bottom: 0;

    z-index: 3;

    margin: 0 calc(-1 * var(--space-1, .35rem));

    padding: .55rem var(--space-1, .35rem) .35rem;

    background:

      linear-gradient(180deg, transparent, rgba(20, 18, 16, 0.92) 28%, rgba(20, 18, 16, 0.98));

    box-shadow: 0 -10px 18px -12px rgba(0, 0, 0, 0.55);

  }

  .play-stream,

  .play-main {

    scroll-padding-bottom: 8rem;

    padding-bottom: .5rem;

  }

  .play-composer textarea {

    min-height: 5.5rem;

  }

  .play-loc-actions .btn,

  .play-loc-actions .btn-tiny {

    min-height: var(--touch-min);

  }

  .split { grid-template-columns: 1fr; }

  .header-inner {

    flex-wrap: wrap;

    gap: .45rem .5rem;

    min-height: 3rem;

  }

  .header-aside {

    order: 1;

    flex: 1 1 auto;

    min-width: 0;

    margin-left: 0;

    justify-content: flex-start;

  }

  .header-user {

    order: unset;

    width: auto;

    margin-left: 0;

    margin-right: 0;

    flex: 1 1 auto;

    justify-content: flex-start;

    gap: .35rem;

    min-width: 0;

  }

  .header-tools {

    order: unset;

    margin-left: auto;

    flex: 0 0 auto;

  }

  .header-logout-form {

    margin-left: 0;

  }

  .nav-toggle {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    order: 3;

    margin-left: 0;

    flex: 0 0 auto;

    width: var(--touch-min);

    height: var(--touch-min);

    padding: 0;

  }

  .header-inner:not(:has(.header-tools)) .nav-toggle {

    margin-left: auto;

  }

  /* Vend?g: a k?t auth gomb + hamburger egy sorban maradjon */

  .header-inner:not(:has(.header-tools)) .header-aside {

    flex: 1 1 auto;

  }

  .header-inner:not(:has(.header-tools)) .header-user {

    flex: 1 1 auto;

    flex-wrap: nowrap;

    overflow: hidden;

  }

  .header-inner:not(:has(.header-tools)) .header-user .btn {

    flex: 0 1 auto;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

  }

  .header-user .active-char {

    max-width: none;

    flex: 1 1 auto;

    min-width: 0;

  }

  .header-user .active-char-name {

    max-width: none;

    overflow: visible;

    text-overflow: unset;

    white-space: normal;

  }

  .aharion-date {

    display: none;

  }

  .header-user .btn {

    min-height: var(--touch-min);

    padding: .35rem .65rem;

    font-size: .82rem;

  }

  .header-inner:has(.header-tools) .header-user .btn {

    flex-shrink: 0;

  }

  .header-user .btn-primary,

  .header-user .btn-ghost {

    white-space: nowrap;

  }

  .site-nav {

    display: none;

    order: 4;

    flex: 1 1 100%;

    width: 100%;

    max-width: 100%;

    flex-direction: column;

    padding: .65rem 0 .85rem;

    border-top: 1px solid var(--line);

    gap: 1rem;

    background: var(--bg0);

  }

  .site-nav.open { display: flex; }

  .nav-group {

    flex-direction: column;

    align-items: stretch;

    gap: .4rem;

  }

  .nav-group-label {

    font-size: var(--text-micro);

    padding: 0 .15rem;

    opacity: .95;

  }

  .nav-group-links {

    flex-direction: column;

    gap: .15rem;

  }

  .site-nav a {

    display: flex;

    align-items: center;

    min-height: var(--touch-min);

    padding: .55rem .65rem;

    border: 1px solid transparent;

    border-bottom: 1px solid rgba(180, 150, 100, 0.12);

    font-size: .88rem;

    letter-spacing: .07em;

  }

  .site-nav a:hover,

  .site-nav a.is-active {

    border-bottom-color: var(--gold);

    background: rgba(201, 168, 106, 0.06);

  }

  .site-nav a.is-active {

    border-color: rgba(201, 168, 106, 0.22);

  }

  .btn,

  .btn-tiny {

    min-height: var(--touch-min);

  }

  .btn-tiny {

    padding: .4rem .7rem;

  }

  .forum-pager-link,

  .forum-pager-current {

    min-width: var(--touch-min);

    min-height: var(--touch-min);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

  }

  .form-grid,

  .form-inline-row,

  .stat-grid {

    grid-template-columns: 1fr;

  }

  .map-pin span { left: 50%; top: 130%; transform: translateX(-50%); }

  .panel,

  .sheet,

  .sheet-box,

  .map-panel {

    --frame-inset: 3px;

    --frame-corner: 11px;

  }

  .main-content {

    padding: var(--space-3) 0 var(--space-4);

  }

}

@media (max-width: 480px) {

  .header-auth-full { display: none; }

  .header-auth-short { display: inline; }

  .header-inner:not(:has(.header-tools)) .header-user .btn {

    flex: 1 1 auto;

    padding: .35rem .5rem;

    font-size: .78rem;

  }

  .header-user .btn-ghost {

    padding: .35rem .5rem;

    font-size: .78rem;

  }

  .wrap {

    width: calc(100% - 1.25rem);

  }

}



.ambient-toggle {

  position: fixed;

  left: 1rem;

  right: auto;

  bottom: 1rem;

  z-index: 15;

  font-family: var(--font-display);

  font-size: .72rem;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: var(--muted);

  background: rgba(20, 18, 16, 0.92);

  border: 1px solid var(--line);

  padding: .4rem .65rem;

  cursor: pointer;

  border-radius: var(--radius);

  box-shadow: var(--shadow);

}

.ambient-toggle:hover,

.ambient-toggle.is-on {

  color: var(--gold);

  border-color: var(--line-strong);

}

@media (max-width: 820px) {

  .ambient-toggle {

    bottom: 4.75rem;

  }

}



/* Globális Zene gomb (header) — nem ikonnégyzet, ne olvadjon a „váltás”-ba */

.header-tools {

  gap: .45rem;

}

.header-tools::before {

  content: "";

  display: inline-block;

  width: 1px;

  height: 1.15rem;

  background: var(--line);

  opacity: .85;

  flex: 0 0 auto;

  align-self: center;

}

button.header-tool.mood-toggle {

  width: auto;

  min-width: 2.75rem;

  height: auto;

  min-height: calc(var(--touch-min) - 4px);

  padding: .28rem .55rem;

  font-family: var(--font-display);

  font-size: .62rem;

  font-weight: 600;

  letter-spacing: .1em;

  text-transform: uppercase;

  line-height: 1.15;

  color: var(--muted);

  background: rgba(0, 0, 0, 0.22);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  cursor: pointer;

  white-space: nowrap;

  flex: 0 0 auto;

}

button.header-tool.mood-toggle:hover,

button.header-tool.mood-toggle.is-on {

  color: var(--gold);

  border-color: rgba(201, 168, 106, 0.55);

  background: rgba(201, 168, 106, 0.08);

}

button.header-tool.mood-toggle.is-on.is-pending {

  color: var(--muted);

  border-color: var(--line);

  background: rgba(0, 0, 0, 0.22);

  opacity: 0.92;

}

button.header-tool.mood-toggle.is-off {

  color: var(--muted);

  opacity: .7;

  border-style: dashed;

  background: transparent;

}

html.is-soft-nav {

  cursor: progress;

}



/* ?? Vil?glexikon (kr?nika / k?tet) ?? */

.lore-tome {

  position: relative;

  overflow: visible;

  background:

    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(90, 60, 28, 0.18), transparent 55%),

    linear-gradient(165deg, rgba(48, 40, 30, 0.55) 0%, transparent 42%),

    linear-gradient(180deg, #231c16 0%, #1a1511 48%, #16120f 100%);

}

.lore-tome::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: .55;

  background-image:

    repeating-linear-gradient(

      -18deg,

      transparent 0,

      transparent 2px,

      rgba(180, 150, 100, 0.018) 2px,

      rgba(180, 150, 100, 0.018) 3px

    ),

    radial-gradient(ellipse at 20% 30%, rgba(201, 168, 106, 0.04), transparent 45%),

    radial-gradient(ellipse at 80% 70%, rgba(0, 0, 0, 0.2), transparent 50%);

}

.lore-tome > * { position: relative; z-index: 1; }



.lore-ornament {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: .65rem;

  margin: .55rem 0 .75rem;

  max-width: 22rem;

}

.lore-ornament::before,

.lore-ornament::after {

  content: "";

  flex: 1;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(201, 168, 106, 0.55), transparent);

}

.lore-ornament span {

  width: .45rem;

  height: .45rem;

  transform: rotate(45deg);

  border: 1px solid var(--gold);

  background: rgba(201, 168, 106, 0.2);

  box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.08);

}

.lore-article-head .lore-ornament,

.lore-hero .lore-ornament { margin-left: 0; }



.lore-lexicon { overflow: visible; }

.lore-hub-intro {

  margin: 0 0 1rem;

  max-width: 46rem;

}

.lore-hub-intro .lore-illust {

  float: right;

}

.lore-hero {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 1rem;

  align-items: flex-start;

  margin: 0 0 1.15rem;

  padding-bottom: .9rem;

  border-bottom: 1px solid rgba(180, 150, 100, 0.28);

}

.lore-kicker {

  margin: 0 0 .35rem;

  font-family: var(--font-display);

  font-size: .78rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--gold);

}

.lore-title {

  margin: 0 0 .2rem;

  font-family: var(--font-display);

  letter-spacing: .06em;

  color: var(--gold);

  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);

}

.lore-lead {

  margin: .35rem 0 0;

  max-width: 40rem;

  font-size: .98rem;

  line-height: 1.55;

  color: #d8cbb8;

}

.lore-quick {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

  margin: .75rem 0 0;

}

.lore-fold { margin-top: .75rem; }

.lore-tome .lore-fold > summary {

  letter-spacing: .08em;

}

.lore-fold-body { display: grid; gap: .85rem; }

.lore-banner {

  position: relative;

  margin: 0;

  max-width: min(100%, 42rem);

  border: 1px solid rgba(180, 150, 100, 0.22);

  overflow: hidden;

  background: rgba(0, 0, 0, 0.35);

  box-shadow: inset 0 0 0 1px rgba(201, 168, 106, 0.06);

}

.lore-banner--strip {

  max-height: 11rem;

}

.lore-banner--strip::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    linear-gradient(90deg, rgba(18, 14, 10, 0.4), transparent 14%, transparent 86%, rgba(18, 14, 10, 0.4)),

    linear-gradient(180deg, rgba(18, 14, 10, 0.2), transparent 35%, rgba(18, 14, 10, 0.35));

}

.lore-banner img {

  display: block;

  width: 100%;

  height: auto;

  object-fit: cover;

  object-position: center;

}

.lore-banner--strip img {

  height: 11rem;

  object-fit: cover;

  object-position: center center;

  opacity: .78;

  filter: saturate(.88) contrast(1.04) brightness(.94);

}

.lore-show-hero img {

  display: block;

  width: 100%;

  height: auto;

  object-fit: cover;

  object-position: center;

}

.lore-show-hero--scene {

  position: relative;

  margin: 0 0 1.15rem;

  max-width: min(100%, 42rem);

  border: 1px solid rgba(180, 150, 100, 0.22);

  border-radius: 0;

  overflow: hidden;

  box-shadow: inset 0 0 0 1px rgba(201, 168, 106, 0.06);

}

.lore-show-hero--scene img {

  max-height: 15rem;

  object-position: center center;

  filter: saturate(.95) contrast(1.03) brightness(.94);

}

.lore-show-hero--scene::after {

  content: "";

  position: absolute;

  inset: auto 0 0;

  height: 55%;

  background: linear-gradient(180deg, transparent, rgba(30, 24, 18, 0.9));

  pointer-events: none;

}

.lore-reading {

  position: relative;

}

.lore-reading::after {

  content: "";

  display: table;

  clear: both;

}

.lore-show-hero--portrait {

  float: right;

  width: 8.75rem;

  margin: .15rem 0 1rem 1.15rem;

  border: 1px solid rgba(180, 150, 100, 0.4);

  box-shadow:

    inset 0 0 0 1px rgba(201, 168, 106, 0.1),

    0 6px 16px rgba(0, 0, 0, 0.28);

}

.lore-show-hero--portrait img {

  max-height: 11.5rem;

  aspect-ratio: 3 / 4;

  object-fit: cover;

}

.lore-article-head { margin-bottom: .85rem; }



/* Kr?nika sz?veg ? inici?l? + k?t has?b */

.lore-prose {

  font-size: 1.05rem;

  line-height: 1.78;

  color: #ebe2d4;

  max-width: 46rem;

}

.lore-prose--tome {

  max-width: none;

}

@media (min-width: 900px) {

  .lore-prose--tome {

    column-count: 2;

    column-gap: 2.1rem;

    column-rule: 1px solid rgba(180, 150, 100, 0.22);

  }

  /* Csak fejezetcímek törnek teljes szélességre — a drop-inicialé column-span

     + ős overflow:hidden együtt elnyelte a törzset egyes böngészőkben. */

  .lore-prose--tome .lore-prose-h {

    column-span: all;

  }

  .lore-tome--has-portrait .lore-prose--tome {

    column-count: 1;

    max-width: 42rem;

  }

}

.lore-prose p {

  margin: 0 0 1rem;

  text-align: justify;

  hyphens: auto;

  -webkit-hyphens: auto;

}

.lore-prose-h {

  margin: 1.35rem 0 .65rem;

  padding-bottom: .35rem;

  font-family: var(--font-display);

  font-size: 1.05rem;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--gold);

  border-bottom: 1px solid rgba(180, 150, 100, 0.28);

  break-after: avoid;

}

.lore-prose-h:first-child { margin-top: 0; }

.lore-prose strong { color: #f0e2c8; }

.lore-prose em { color: #d4c4a8; }



/* Kis festett bet?tek ? a sz?veg mellett, nem teljes sz?less?g? t?r?s */

.lore-illust {

  float: right;

  clear: right;

  width: 7.75rem;

  margin: .15rem 0 .9rem 1rem;

  max-width: none;

  text-align: center;

  break-inside: avoid;

}

.lore-illust img {

  display: block;

  width: 100%;

  height: auto;

  max-height: 6.5rem;

  object-fit: cover;

  border: 1px solid rgba(180, 150, 100, 0.4);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

}

.lore-illust figcaption {

  margin-top: .3rem;

  font-size: .72rem;

  line-height: 1.3;

  color: var(--muted);

  font-style: italic;

}

.lore-subhead {

  margin: .25rem 0 0;

  font-family: var(--font-display);

  font-size: .85rem;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--gold);

}

.lore-calendar { margin: 0; }

.lore-section-lead {

  margin: 0 0 .65rem;

  max-width: 42rem;

  line-height: 1.55;

  font-size: .95rem;

  color: #d2c4b0;

}

.lore-city-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));

  gap: .7rem;

}

.lore-city-card {

  display: grid;

  gap: .45rem;

  padding: .5rem;

  border: 1px solid rgba(180, 150, 100, 0.34);

  background:

    linear-gradient(180deg, rgba(52, 42, 32, 0.95), rgba(22, 18, 14, 0.98));

  color: inherit;

  text-decoration: none;

  font-size: .88rem;

  min-width: 0;

  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;

  box-shadow: inset 0 1px 0 rgba(201, 168, 106, 0.08);

}

.lore-city-card:hover {

  border-color: rgba(201, 168, 106, 0.6);

  color: inherit;

  transform: translateY(-2px);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);

}

.lore-city-art {

  display: block;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: #120f0c;

}

.lore-city-art img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.lore-city-body {

  display: grid;

  gap: .2rem;

  padding: 0 .15rem .1rem;

}

.lore-city-body strong {

  font-family: var(--font-display);

  color: var(--gold);

  font-size: .98rem;

  letter-spacing: .03em;

}

.lore-city-card p { margin: .15rem 0 0; color: var(--muted); font-size: .82rem; }

.lore-card-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));

  gap: .7rem;

}

.lore-card-grid--text {

  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));

}

.lore-card {

  display: grid;

  gap: .45rem;

  color: inherit;

  text-decoration: none;

  border: 1px solid rgba(180, 150, 100, 0.34);

  background:

    linear-gradient(180deg, rgba(52, 42, 32, 0.95), rgba(22, 18, 14, 0.98));

  padding: .55rem;

  min-width: 0;

  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;

  box-shadow: inset 0 1px 0 rgba(201, 168, 106, 0.08);

}

.lore-card:hover {

  border-color: rgba(201, 168, 106, 0.6);

  color: inherit;

  transform: translateY(-2px);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);

}

.lore-card--compact { padding: .7rem .8rem; }

.lore-card-art {

  display: block;

  aspect-ratio: 3 / 4;

  overflow: hidden;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: #120f0c;

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);

}

.lore-card-art--square { aspect-ratio: 1; }

.lore-card-art img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.lore-card-body {

  display: grid;

  gap: .25rem;

  font-size: .86rem;

  line-height: 1.4;

}

.lore-card-body strong {

  font-family: var(--font-display);

  color: var(--gold);

  font-size: .95rem;

  letter-spacing: .03em;

}

.lore-article-list { margin: .15rem 0 0; }

.lore-cta-row { margin: .25rem 0 0; }

.lore-empty { font-style: italic; }



/* Inici?l? ? csak .help-initial (ne ::first-letter is, az dupl?zna) */

.lore-prose > p.lore-drop::first-letter,

.lore-prose > .lore-drop::first-letter {

  /* kikapcsolva: a span.help-initial v?gzi az inici?l?t */

  float: none;

  font-size: inherit;

  font-weight: inherit;

  line-height: inherit;

  padding: 0;

  margin: 0;

  color: inherit;

  text-shadow: none;

  border: none;

}



.lore-mech {

  margin: 1.35rem 0 0;

  padding: .85rem .95rem;

  border: 1px solid rgba(180, 150, 100, 0.38);

  border-left: 3px solid var(--gold);

  background:

    linear-gradient(90deg, rgba(201, 168, 106, 0.06), transparent 40%),

    rgba(0, 0, 0, 0.22);

  max-width: 46rem;

}

.lore-mech h2 {

  margin: 0 0 .45rem;

  font-family: var(--font-display);

  font-size: .8rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--gold);

}

.lore-mech-dl {

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: .35rem;

  margin: .55rem 0;

}

.lore-mech-dl div {

  text-align: center;

  padding: .3rem;

  background: rgba(0, 0, 0, 0.22);

  border: 1px solid rgba(180, 150, 100, 0.18);

}

.lore-mech-dl dt {

  margin: 0;

  font-size: .65rem;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: var(--muted);

}

.lore-mech-dl dd {

  margin: .1rem 0 0;

  font-family: var(--font-display);

  color: var(--ink);

}

.lore-mech-list {

  margin: .45rem 0 0;

  padding-left: 1.1rem;

  font-size: .9rem;

  line-height: 1.45;

}

.lore-colophon {

  margin: 1.75rem 0 0;

  text-align: center;

}

.lore-colophon .lore-ornament {

  margin-left: auto;

  margin-right: auto;

}

.lore-colophon p {

  margin: .35rem 0 0;

  font-family: var(--font-display);

  font-size: .72rem;

  letter-spacing: .14em;

  text-transform: uppercase;

}

.lore-pager {

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  gap: .65rem 1rem;

  align-items: stretch;

  margin: 1.25rem 0 0;

  padding-top: 1rem;

  border-top: 1px solid rgba(180, 150, 100, 0.28);

}

.lore-pager-side { min-width: 0; }

.lore-pager-side--next { text-align: right; }

.lore-pager-link {

  display: grid;

  gap: .15rem;

  padding: .55rem .65rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: rgba(0, 0, 0, 0.18);

  color: inherit;

  text-decoration: none;

  min-height: 100%;

  transition: border-color .15s ease, background .15s ease;

}

.lore-pager-link:hover {

  border-color: rgba(201, 168, 106, 0.55);

  color: inherit;

  background: rgba(201, 168, 106, 0.06);

}

.lore-pager-link--disabled {

  opacity: .55;

  border-style: dashed;

}

.lore-pager-dir {

  font-family: var(--font-display);

  font-size: .68rem;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--muted);

}

.lore-pager-link strong {

  font-family: var(--font-display);

  font-weight: 600;

  font-size: .92rem;

  color: var(--gold);

  line-height: 1.3;

}

.lore-pager-link--disabled strong { color: var(--muted); }

.lore-pager-toc {

  align-self: center;

  white-space: nowrap;

}

@media (max-width: 640px) {

  .lore-pager {

    grid-template-columns: 1fr;

  }

  .lore-pager-side--next { text-align: left; }

  .lore-pager-toc { order: -1; justify-self: center; }

}



@media (max-width: 820px) {

  .lore-banner--strip { max-height: 8.5rem; }

  .lore-banner--strip img { height: 8.5rem; }

  .lore-show-hero--scene img { max-height: 11.5rem; }

  .lore-show-hero--portrait {

    float: none;

    width: 7.5rem;

    margin: 0 auto 1rem;

  }

  .lore-illust {

    float: none;

    width: auto;

    max-width: 8.5rem;

    margin: .75rem auto 1rem;

  }

  .lore-illust img { max-height: 5.5rem; }

  .lore-mech-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .lore-card-grid { grid-template-columns: 1fr 1fr; }

  .lore-prose p { text-align: left; hyphens: none; }

}

@media (max-width: 480px) {

  .lore-card-grid { grid-template-columns: 1fr; }

}



@media (prefers-reduced-motion: reduce) {

  .main-content,

  .flash,

  .btn,

  .btn-primary,

  .create-panel,

  .page-ink-in,

  .lore-card,

  .lore-city-card {

    animation: none !important;

    transition: none !important;

    transform: none !important;

  }

  .flash-host.is-enhanced .flash.is-visible {

    opacity: 1;

  }

  .flash-host.is-enhanced .flash.is-leaving {

    opacity: 0;

  }

}



/* ?? S?g? ?? */

.help-page { overflow: hidden; }

.help-hero {

  margin-bottom: 1rem;

}

.help-title {

  font-family: var(--font-display);

  font-size: clamp(1.6rem, 3vw, 2.1rem);

  color: var(--gold);

  margin: 0 0 .65rem;

  letter-spacing: .04em;

}

.help-toc {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

  margin: 0;

}

.help-fold { margin-top: .45rem; }

.help-fold-body { padding-top: .35rem; }

.help-dl {

  margin: 0;

  display: grid;

  gap: .55rem;

}

.help-row {

  display: grid;

  grid-template-columns: minmax(6.5rem, 9rem) 1fr;

  gap: .45rem .75rem;

  padding: .45rem 0;

  border-bottom: 1px solid rgba(180, 150, 100, 0.14);

}

.help-row:last-child { border-bottom: 0; }

.help-row dt {

  font-family: var(--font-display);

  font-size: .82rem;

  letter-spacing: .04em;

  color: var(--gold);

  margin: 0;

}

.help-row dd {

  margin: 0;

  color: var(--ink);

  font-size: .92rem;

  line-height: 1.45;

}

@media (max-width: 820px) {

  .help-row {

    grid-template-columns: 1fr;

    gap: .15rem;

  }

}



/* OOC szabályzat */

.rules-page .rules-meta {

  margin: .35rem 0 0;

  font-size: var(--text-small);

}

.rules-prose {

  max-width: 42rem;

}

.rules-edit-ta {

  min-height: 28rem;

  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;

  font-size: .92rem;

  line-height: 1.45;

  white-space: pre-wrap;

}

@media (max-width: 820px) {

  .rules-edit-ta { min-height: 22rem; }

}



/* Lexikon / játéktér motivum-dísz */

.lore-city-card {

  position: relative;

}

.lore-city-motif {

  position: absolute;

  top: .65rem;

  right: .65rem;

  z-index: 2;

  width: 2.2rem;

  height: 2.2rem;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: rgba(10, 9, 8, 0.55);

  border: 1px solid color-mix(in srgb, var(--theme-accent, var(--gold)) 55%, transparent);

  pointer-events: none;

}

.lore-card-motif {

  display: grid;

  place-items: center;

  min-height: 7rem;

  background:

    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--theme-accent, var(--gold)) 18%, transparent), transparent 65%),

    rgba(0, 0, 0, 0.22);

  border-bottom: 1px solid rgba(180, 150, 100, 0.18);

}

.play-title.motif-title {

  gap: .55rem;

}

.play-title .motif-icon {

  opacity: .9;

}

.act-kicker.motif-title {

  gap: .4rem;

}

.help-title.motif-title {

  gap: .55rem;

}



@media (prefers-reduced-motion: reduce) {

  .btn,

  .btn-primary {

    transition: none;

  }

  .btn-primary:hover {

    transform: none;

  }

}



/* S?g? ? m?gia katal?gus */

.help-magic {

  margin-top: 1.25rem;

  padding-top: 1rem;

  border-top: 1px solid rgba(180, 150, 100, 0.22);

}

.help-magic-heading {

  font-family: var(--font-display);

  font-size: 1.15rem;

  color: var(--gold);

  margin: 0 0 .35rem;

  letter-spacing: .04em;

}

.help-magic-lead {

  margin: 0 0 .85rem;

  font-size: .9rem;

  line-height: 1.45;

  max-width: 42rem;

}

.help-magic-nav {

  display: flex;

  flex-wrap: wrap;

  gap: .4rem;

  margin: 0 0 1.1rem;

  position: sticky;

  top: .35rem;

  z-index: 2;

  padding: .35rem 0;

  background: linear-gradient(180deg, rgba(14, 13, 12, 0.96), rgba(14, 13, 12, 0.88));

}

.help-magic-nav-link {

  font-family: var(--font-display);

  font-size: .78rem;

  letter-spacing: .05em;

  text-decoration: none;

  color: var(--path-accent, var(--gold));

  border: 1px solid color-mix(in srgb, var(--path-accent, var(--gold)) 45%, transparent);

  padding: .28rem .65rem;

  background: rgba(20, 18, 16, 0.85);

}

.help-magic-nav-link:hover,

.help-magic-nav-link:focus-visible {

  background: color-mix(in srgb, var(--path-accent, var(--gold)) 18%, transparent);

}

.help-magic-path {

  margin: 0 0 1.6rem;

  padding: .85rem .75rem 1rem;

  border: 1px solid color-mix(in srgb, var(--path-accent, #888) 35%, transparent);

  background:

    linear-gradient(165deg, color-mix(in srgb, var(--path-accent, #888) 12%, transparent), transparent 55%),

    rgba(12, 11, 10, 0.35);

}

.help-magic-path-title {

  font-family: var(--font-display);

  font-size: 1.05rem;

  margin: 0 0 .25rem;

  color: var(--path-accent, var(--gold));

  letter-spacing: .04em;

}

.help-magic-path-blurb {

  margin: 0 0 .5rem;

  font-size: .88rem;

  line-height: 1.4;

}

.help-magic-level-jump {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

  margin: 0;

  font-size: .8rem;

}

.help-magic-level-jump a {

  color: var(--gold);

  text-decoration: none;

  border-bottom: 1px solid rgba(180, 150, 100, 0.35);

  padding: 0 .15rem;

}

.help-magic-level {

  margin-top: 1rem;

  scroll-margin-top: 3rem;

}

.help-magic-level-title {

  font-family: var(--font-display);

  font-size: .88rem;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: var(--ink-muted, #9a8b78);

  margin: 0 0 .55rem;

}

.help-magic-cards {

  display: grid;

  gap: .75rem;

}

.help-magic-card {

  padding: .75rem .8rem .85rem;

  border: 1px solid rgba(180, 150, 100, 0.18);

  background: rgba(18, 16, 14, 0.55);

  scroll-margin-top: 3.25rem;

}

.help-magic-card-name {

  font-family: var(--font-display);

  font-size: 1rem;

  margin: 0 0 .2rem;

  color: var(--ink);

  letter-spacing: .03em;

}

.help-magic-card-meta {

  margin: 0 0 .4rem;

  font-size: .78rem;

}

.help-magic-card-tags {

  display: flex;

  flex-wrap: wrap;

  gap: .3rem;

  margin: 0 0 .65rem;

}

.help-magic-tag {

  font-size: .68rem;

  letter-spacing: .04em;

  padding: .12rem .4rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  color: var(--ink-muted, #9a8b78);

}

.help-magic-tag--stance {

  border-color: color-mix(in srgb, var(--path-accent, var(--gold)) 40%, transparent);

  color: var(--path-accent, var(--gold));

}

.help-magic-block {

  margin-top: .45rem;

}

.help-magic-block-title {

  font-family: var(--font-display);

  font-size: .72rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--gold);

  margin: 0 0 .25rem;

}

.help-magic-block p {

  margin: 0;

  font-size: .9rem;

  line-height: 1.45;

}

.help-magic-example {

  margin-top: .4rem !important;

  font-size: .84rem !important;

  font-style: italic;

  line-height: 1.4 !important;

}

.help-magic-block--tech {

  margin-top: .65rem;

  padding-top: .55rem;

  border-top: 1px dashed rgba(180, 150, 100, 0.16);

}

@media (min-width: 900px) {

  .help-magic-cards {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}

@media (min-width: 600px) and (max-width: 899px) {

  .help-magic-cards {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



/* ?? M?gia: Var?zsl?k Tornya, hat?sok, karakterlap ?? */

.magic-tower {

  border: 1px solid rgba(180, 150, 100, 0.28);

  background:

    radial-gradient(ellipse 65% 50% at 50% 0%, rgba(55, 44, 28, 0.32), transparent 58%),

    linear-gradient(180deg, rgba(18, 16, 14, 0.96), rgba(10, 11, 14, 0.98));

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 220, 160, 0.08);

  padding: 1.15rem 1.15rem 1.4rem;

}

.magic-tower-intro { margin-bottom: 1rem; }

.magic-path-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));

  gap: .85rem;

}

.magic-path-card {

  display: grid; gap: .45rem; padding: .85rem .75rem 1rem; text-align: center;

  border: 1px solid rgba(180, 150, 100, 0.24);

  background: linear-gradient(165deg, rgba(28, 24, 18, 0.88), rgba(12, 12, 14, 0.92));

  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.06);

}

.magic-path-card-plate {

  display: grid; place-items: center; width: 5.5rem; height: 5.5rem; margin: 0 auto;

  border: 1px solid color-mix(in srgb, var(--path-accent, var(--copper)) 45%, transparent);

  background: radial-gradient(circle at 50% 35%, rgba(255, 220, 160, 0.08), rgba(0, 0, 0, 0.35));

}

.magic-path-fallback { font-family: var(--font-display); font-size: 2rem; color: var(--path-accent, var(--gold)); }

.magic-path-name { margin: 0; font-family: var(--font-display); font-size: 1.05rem; color: var(--gold); letter-spacing: .04em; }

.magic-path-blurb { margin: 0; font-size: .88rem; line-height: 1.45; }

.magic-path-form { margin-top: .25rem; }

.magic-tower-path-head { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; margin-bottom: .65rem; }

.sheet-magic-path {

  font-family: var(--font-display);

  font-size: .88em;

  letter-spacing: .04em;

  color: var(--path-accent, var(--sheet-accent, #c4a35a));

  border-bottom: 1px solid color-mix(in srgb, var(--path-accent, #c4a35a) 45%, transparent);

  padding: 0 .05rem .05rem;

}

.sheet-fold--magic {

  width: 100%;

}

.sheet-magic-spells {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: .4rem;

}

.sheet-magic-spell-row {

  display: grid;

  grid-template-columns: 2.25rem 1fr;

  gap: .5rem;

  align-items: center;

  padding: .35rem .4rem;

  border: 1px solid rgba(180, 150, 100, 0.18);

  background: rgba(0, 0, 0, 0.12);

}

.sheet-magic-spell-icon {

  width: 2.25rem;

  height: 2.25rem;

  object-fit: cover;

  border-radius: 2px;

  display: block;

}

.sheet-magic-spell-icon--empty {

  background: rgba(0, 0, 0, 0.25);

  border: 1px solid rgba(180, 150, 100, 0.2);

}

.sheet-magic-spell-body {

  display: grid;

  gap: .1rem;

  min-width: 0;

}

.sheet-magic-spell-name {

  font-family: var(--font-display);

  font-size: .9rem;

  color: var(--ink);

  line-height: 1.25;

}

.sheet-magic-spell-meta {

  font-size: .72rem;

}



.magic-spell-icon {

  width: 3rem;

  height: 3rem;

  object-fit: cover;

  border-radius: 2px;

  margin-bottom: .25rem;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);

}

.magic-learn-track {

  height: .35rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: rgba(0, 0, 0, 0.28);

  overflow: hidden;

}

.magic-learn-fill {

  display: block;

  height: 100%;

  background: linear-gradient(90deg, rgba(160, 130, 70, 0.7), rgba(210, 175, 100, 0.95));

}

.magic-learn-status {

  margin: .2rem 0 0;

  font-size: .75rem;

}



.magic-mp {

  display: inline-flex; align-items: baseline; gap: .3rem; font-size: .88rem;

  padding: .28rem .55rem; border: 1px solid rgba(90, 122, 126, 0.45); background: rgba(20, 24, 26, 0.55);

}

.magic-mp-label { color: var(--muted); font-size: .72rem; letter-spacing: .06em; }

.magic-mp strong { color: var(--sea); font-family: var(--font-display); }

.magic-mp--inline { font-size: .78rem; margin-left: .45rem; vertical-align: middle; }

.magic-level-pips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .45rem; }

.magic-level-pip {

  width: 1.65rem; height: 1.65rem; display: grid; place-items: center;

  font: 600 .72rem/1 var(--font-display); color: var(--muted);

  border: 1px solid rgba(180, 150, 100, 0.22); background: rgba(0, 0, 0, 0.18);

}

.magic-level-pip.is-done { color: var(--gold); border-color: rgba(201, 168, 106, 0.5); background: rgba(201, 168, 106, 0.12); }

.magic-level-pip.is-next { color: #f0e6d2; border-color: rgba(230, 190, 120, 0.55); }

.magic-tower-meta { margin: 0 0 1rem; font-size: .88rem; }

.magic-level-section { margin-bottom: 1.35rem; }

.magic-level-title { margin: 0 0 .55rem; font-family: var(--font-display); font-size: 1rem; color: var(--gold); letter-spacing: .04em; }

.magic-spell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .65rem; }

.magic-spell-card {

  display: grid; gap: .4rem; padding: .7rem .75rem .8rem;

  border: 1px solid rgba(180, 150, 100, 0.2); background: rgba(0, 0, 0, 0.2);

}

.magic-spell-card.is-learned { border-color: rgba(90, 122, 98, 0.45); background: rgba(20, 28, 22, 0.35); }

.magic-spell-card.is-locked { opacity: .62; }

.magic-spell-card.is-ready { border-color: rgba(201, 168, 106, 0.42); box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.08); }

.magic-spell-head { display: grid; gap: .15rem; }

.magic-spell-role { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.magic-spell-name { margin: 0; font-family: var(--font-display); font-size: .95rem; color: var(--ink); line-height: 1.3; }

.magic-spell-meta { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem .75rem; font-size: .82rem; }

.magic-spell-meta-row { display: inline-flex; gap: .25rem; }

.magic-spell-meta-row dt { color: var(--muted); margin: 0; }

.magic-spell-meta-row dd { margin: 0; color: var(--gold); }

.magic-spell-blurb { margin: 0; font-size: .86rem; line-height: 1.45; }

.magic-spell-tech { margin: .35rem 0 0; font-size: .78rem; line-height: 1.4; opacity: .92; }

.magic-spell-foot { margin-top: .15rem; }

.magic-spell-status { font-size: .82rem; color: var(--muted); }

.magic-spell-status--learned { color: #8fb896; }

.magic-spell-status--locked { color: var(--ooc); }

.magic-effect-head { margin-bottom: 1rem; }

.magic-effect-sub { margin: .25rem 0 0; }

.magic-effect-expired .act-panel-line { color: var(--muted); }

.magic-effect-spell { margin: 0 0 .65rem; font-family: var(--font-display); color: var(--gold); font-size: 1.15rem; }

.magic-effect-list { margin: 0; display: grid; gap: .5rem; }

.magic-effect-row {

  display: grid; grid-template-columns: minmax(5rem, 7rem) 1fr; gap: .35rem .75rem;

  padding: .35rem 0; border-bottom: 1px solid rgba(180, 150, 100, 0.14);

}

.magic-effect-row:last-child { border-bottom: 0; }

.magic-effect-row dt { margin: 0; font-family: var(--font-display); font-size: .82rem; color: var(--gold); letter-spacing: .04em; }

.magic-effect-row dd { margin: 0; color: var(--ink); }

.magic-effect-tips { margin-top: 1rem; }

.magic-effect-tips-title { margin: 0 0 .45rem; font-family: var(--font-display); font-size: .95rem; color: var(--gold); }

.magic-effect-tips-list { margin: 0; padding-left: 1.15rem; color: var(--ink); font-size: .92rem; line-height: 1.5; }

.sheet-cast {

  margin-top: .85rem; padding: .75rem .85rem;

  border: 1px solid rgba(180, 150, 100, 0.24); background: rgba(0, 0, 0, 0.22);

}

.sheet-cast-title { margin: 0 0 .45rem; font-family: var(--font-display); font-size: .9rem; color: var(--gold); letter-spacing: .04em; }

.sheet-cast-list { margin: 0; display: grid; gap: .4rem; }

.ic-spell-outcome,

.ic-meselo-outcome {

  color: var(--staff-ink, #e6d5a0);

  font-style: italic;

  margin: .55rem 0 0;

  line-height: 1.45;

}

.ic-meselo-outcome.is-soft-fail {

  opacity: .88;

}

.ic-meselo-stack {

  display: grid;

  gap: .55rem;

  margin: .55rem 0 0;

}

.ic-meselo-stack .ic-meselo-outcome {

  margin: 0;

}



.play-apply {

  display: grid;

  gap: .65rem;

  margin: .45rem 0 .75rem;

  padding: .75rem .8rem .85rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  border-radius: 2px;

  background:

    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(90, 60, 28, 0.14), transparent 55%),

    linear-gradient(180deg, rgba(28, 24, 18, 0.55), rgba(14, 12, 10, 0.35));

  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.05);

}

.play-toolkit-head {

  display: grid;

  gap: .15rem;

}

.play-toolkit-kicker {

  margin: 0;

  font-family: var(--font-display);

  font-size: .68rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--copper, #b8884a);

}

.play-toolkit-lead {

  margin: 0;

  font-size: .82rem;

  line-height: 1.4;

}

.play-toolkit-lead strong { color: var(--gold); font-weight: 600; }



.play-toolkit {

  display: grid;

  grid-template-columns: repeat(var(--toolkit-cols, 3), minmax(0, 1fr));

  gap: .45rem;

}

.play-toolkit-tab {

  display: grid;

  grid-template-columns: auto minmax(0, 1fr);

  align-items: center;

  gap: .55rem;

  margin: 0;

  padding: .65rem .7rem;

  min-height: var(--touch-min, 2.5rem);

  text-align: left;

  cursor: pointer;

  color: inherit;

  font: inherit;

  border: 1px solid rgba(180, 150, 100, 0.32);

  border-radius: 2px;

  background:

    linear-gradient(165deg, rgba(48, 40, 30, 0.95), rgba(18, 14, 10, 0.98));

  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.06);

  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;

}

.play-toolkit-tab:hover,

.play-toolkit-tab:focus-visible {

  border-color: rgba(201, 168, 106, 0.65);

  outline: none;

  box-shadow:

    inset 0 1px 0 rgba(255, 220, 160, 0.1),

    0 0 0 1px rgba(201, 168, 106, 0.18);

}

.play-toolkit-tab.is-active {

  border-color: var(--gold);

  box-shadow:

    inset 0 0 0 1px rgba(201, 168, 106, 0.28),

    0 0 0 1px rgba(201, 168, 106, 0.22);

  background:

    linear-gradient(165deg, rgba(70, 54, 34, 0.98), rgba(24, 18, 12, 0.99));

}

.play-toolkit-tab.has-pick:not(.is-active) {

  border-color: rgba(184, 136, 74, 0.55);

}

.play-toolkit-tab.has-pick .play-toolkit-tab-status {

  color: var(--gold);

}

.play-toolkit-tab .motif-icon {

  --motif-size: 1.45rem;

  opacity: .9;

}

.play-toolkit-tab-text {

  display: grid;

  gap: .1rem;

  min-width: 0;

}

.play-toolkit-tab-label {

  font-family: var(--font-display);

  font-size: .88rem;

  letter-spacing: .03em;

  color: var(--ink);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.play-toolkit-tab-status {

  font-size: .72rem;

  line-height: 1.25;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.play-toolkit-stage {

  display: grid;

  gap: .5rem;

}

.play-toolkit-panel {

  display: grid;

  gap: .5rem;

  padding: .65rem .7rem .75rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  border-radius: 2px;

  background: rgba(0, 0, 0, 0.22);

  animation: playToolkitIn .18s ease;

}

.play-toolkit-panel[hidden] {

  display: none !important;

}

@keyframes playToolkitIn {

  from { opacity: 0; transform: translateY(-4px); }

  to { opacity: 1; transform: translateY(0); }

}

@media (prefers-reduced-motion: reduce) {

  .play-toolkit-tab { transition: none; }

  .play-toolkit-panel { animation: none; }

}



.play-apply-section {

  /* panel inherits */

}

.play-apply-heading {

  margin: 0;

  font-family: var(--font-display, Georgia, serif);

  font-size: .95rem;

  font-weight: 600;

  letter-spacing: .02em;

  color: var(--ink);

}

.play-apply-cubes {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(3.35rem, 1fr));

  gap: .4rem;

  max-width: 28rem;

}

.play-apply-cube {

  position: relative;

  aspect-ratio: 1;

  min-width: 0;

  padding: 0 0 .95rem;

  margin: 0;

  border: 1px solid rgba(180, 150, 100, 0.4);

  border-radius: 3px;

  background:

    linear-gradient(165deg, rgba(58, 48, 36, 0.98), rgba(18, 14, 10, 0.99));

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);

  cursor: pointer;

  color: inherit;

  font: inherit;

  display: grid;

  place-items: center;

  overflow: hidden;

}

.play-apply-cube:hover,

.play-apply-cube:focus-visible {

  border-color: rgba(201, 168, 106, 0.75);

  outline: none;

  box-shadow:

    inset 0 0 0 1px rgba(201, 168, 106, 0.25),

    0 0 0 1px rgba(201, 168, 106, 0.2);

}

.play-apply-cube.is-on {

  border-color: rgba(201, 168, 106, 0.9);

  box-shadow:

    inset 0 0 0 1px rgba(201, 168, 106, 0.35),

    0 0 0 1px rgba(201, 168, 106, 0.28);

}

.play-apply-cube.rarity-uncommon { border-color: rgba(110, 160, 120, 0.55); }

.play-apply-cube.rarity-rare { border-color: rgba(90, 140, 180, 0.6); }

.play-apply-cube.rarity-epic { border-color: rgba(201, 168, 106, 0.7); }

.play-apply-cube--spell {

  border-color: color-mix(in srgb, var(--spell-path, #c9a86a) 55%, rgba(180, 150, 100, 0.35));

}

.play-apply-cube img {

  width: 70%;

  height: 70%;

  object-fit: contain;

  pointer-events: none;

}

.play-apply-cube-letter {

  font-family: var(--font-display);

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--spell-path, var(--gold));

  line-height: 1;

  text-shadow: 0 1px 2px #000;

}

.play-apply-cube-qty {

  position: absolute;

  right: 3px;

  top: 2px;

  z-index: 2;

  min-width: .85rem;

  padding: 0 2px;

  font-size: .62rem;

  font-weight: 700;

  color: #f5ecd8;

  text-shadow: 0 1px 2px #000;

  line-height: 1.15;

  background: rgba(0, 0, 0, 0.5);

  border-radius: 2px;

}

.play-apply-cube-tag {

  position: absolute;

  left: 2px;

  right: 2px;

  bottom: 2px;

  z-index: 2;

  font-size: .52rem;

  font-weight: 700;

  font-family: var(--font-display);

  color: var(--gold);

  text-align: center;

  text-shadow: 0 1px 2px #000;

  line-height: 1.1;

  pointer-events: none;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.play-apply-pop {

  position: fixed;

  z-index: 85;

  width: min(22rem, calc(100vw - 1rem));

  margin: 0;

  border: 1px solid rgba(180, 150, 100, 0.5);

  border-radius: 2px;

  background: linear-gradient(180deg, #221c16 0%, #15120e 100%);

  color: var(--ink);

  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);

}

.play-apply-pop[hidden] { display: none !important; }

.play-apply-pop-panel {

  display: grid;

  gap: .55rem;

  padding: .85rem .95rem .9rem;

}

.play-apply-pop-head {

  display: grid;

  grid-template-columns: auto minmax(0, 1fr) auto;

  gap: .6rem;

  align-items: start;

}

.play-apply-pop-icon {

  width: 48px;

  height: 48px;

  display: grid;

  place-items: center;

  border: 1px solid rgba(180, 150, 100, 0.35);

  background: rgba(0, 0, 0, 0.35);

  border-radius: 2px;

}

.play-apply-pop-icon img {

  width: 40px;

  height: 40px;

  object-fit: contain;

}

.play-apply-pop-copy {

  min-width: 0;

}

.play-apply-pop-copy strong {

  display: block;

  font-family: var(--font-display);

  color: var(--gold);

  font-size: 1.02rem;

  line-height: 1.25;

  margin-bottom: .2rem;

}

.play-apply-pop-copy strong.rarity-uncommon { color: #9fcc9a; }

.play-apply-pop-copy strong.rarity-rare { color: #8eb4d4; }

.play-apply-pop-copy strong.rarity-epic { color: #e0c888; }

.play-apply-pop-stats,

.play-apply-pop-desc {

  margin: 0 0 .25rem;

  font-size: .8rem;

  line-height: 1.4;

  color: var(--muted, #a89a82);

}

.play-apply-pop-desc { color: #d8ceb8; }

.play-apply-pop-note {

  margin: 0;

  font-size: .72rem;

}

.play-apply-field select {

  width: 100%;

}

.play-apply-mode {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

}

.play-mode-btn.is-active {

  border-color: rgba(201, 168, 106, .55);

  background: rgba(201, 168, 106, .16);

  color: var(--ink);

  box-shadow: inset 0 0 0 1px rgba(201, 168, 106, .2);

}

.play-apply-picker-label {

  display: block;

  font-size: .78rem;

  margin-bottom: .2rem;

  color: var(--muted);

}

.play-apply-target-summary {

  margin: 0;

  font-size: .8rem;

  line-height: 1.35;

}

.play-apply-hint {

  margin: 0;

  font-size: .78rem;

  line-height: 1.4;

}



/* Legacy details folds (ha még léteznének) */

.play-apply-fold {

  margin-top: .15rem;

  border-bottom: 0;

  padding-bottom: 0;

}

.play-apply-fold > summary {

  list-style: none;

  cursor: pointer;

  display: flex;

  flex-wrap: nowrap;

  align-items: baseline;

  gap: 0;

  width: 100%;

  box-sizing: border-box;

  padding: .15rem 0;

}

.play-apply-fold > summary::-webkit-details-marker { display: none; }

.play-apply-fold-body {

  display: grid;

  gap: .45rem;

  padding: .45rem 0 .15rem;

}



@media (max-width: 820px) {

  .play-toolkit {

    grid-template-columns: 1fr;

  }

  .play-toolkit-tab {

    grid-template-columns: auto minmax(0, 1fr);

    padding: .7rem .75rem;

  }

  .play-apply-cubes,

  .play-stall-grid {

    max-width: none;

    grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr));

  }

}

@media (min-width: 821px) and (max-width: 980px) {

  .play-toolkit-tab-label {

    font-size: .8rem;

  }

}



/* IC piaci stand — composer (toolkit panel) */

.play-stall-picked {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: .3rem;

}

.play-stall-picked[hidden] { display: none !important; }

.play-stall-picked-row {

  display: grid;

  grid-template-columns: auto minmax(0, 1fr) 3.4rem 4.6rem auto;

  gap: .3rem .4rem;

  align-items: center;

  padding: .35rem .4rem;

  border: 1px solid rgba(180, 150, 100, 0.18);

  border-radius: 2px;

  background: rgba(0, 0, 0, 0.18);

}

.play-stall-picked-icon {

  width: 28px;

  height: 28px;

  object-fit: contain;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: rgba(0, 0, 0, 0.35);

}

.play-stall-picked-name {

  min-width: 0;

  font-size: .82rem;

  line-height: 1.25;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.play-stall-picked-name .muted { font-size: .72rem; margin-left: .25rem; }

.play-stall-qty input,

.play-stall-price input {

  width: 100%;

  min-height: 1.9rem;

  padding: .2rem .3rem;

  font: inherit;

  font-size: .8rem;

}

.play-stall-remove {

  min-width: 1.75rem;

  padding: .15rem .35rem;

  line-height: 1;

}

.play-stall-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(3.35rem, 1fr));

  gap: .4rem;

  max-width: 28rem;

  max-height: 11rem;

  overflow: auto;

  padding: .1rem 0;

}

.play-stall-pick {

  appearance: none;

  position: relative;

  aspect-ratio: 1;

  min-width: 0;

  margin: 0;

  padding: .2rem;

  border: 1px solid rgba(180, 150, 100, 0.4);

  border-radius: 3px;

  background:

    linear-gradient(165deg, rgba(40, 34, 26, 0.95), rgba(12, 10, 8, 0.98));

  cursor: pointer;

  color: inherit;

}

.play-stall-pick img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.play-stall-pick-qty {

  position: absolute;

  right: 1px;

  bottom: 1px;

  font-size: .65rem;

  line-height: 1;

  padding: .05rem .18rem;

  background: rgba(0, 0, 0, 0.72);

  color: var(--gold);

}

.play-stall-pick:hover,

.play-stall-pick:focus-visible {

  border-color: rgba(201, 168, 106, 0.55);

  outline: none;

}

.play-stall-pick.is-on {

  border-color: rgba(201, 168, 106, 0.7);

  box-shadow: inset 0 0 0 1px rgba(201, 168, 106, 0.35);

  opacity: .45;

  pointer-events: none;

}

.play-stall-hint {

  margin: 0;

  font-size: .72rem;

  line-height: 1.3;

}



.play-deck-compose {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: .55rem;

}

.play-deck-lead {

  margin: 0;

  font-size: .88rem;

  line-height: 1.45;

  color: var(--muted, #a89a88);

}

.play-deck-lead strong { color: var(--gold); font-weight: 600; }

.play-dice-compose {

  display: grid;

  gap: .7rem;

  justify-items: start;

}

.play-dice-lead {

  margin: 0;

  font-size: .88rem;

  line-height: 1.45;

  max-width: 36rem;

}

.play-dice-counts {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

}

.play-dice-count {

  min-width: 2.4rem;

  min-height: 2.4rem;

  padding: .2rem .45rem;

  border: 1px solid rgba(180, 150, 100, 0.4);

  background: rgba(20, 16, 12, 0.75);

  color: var(--gold);

  font-family: var(--font-display);

  font-size: 1rem;

  cursor: pointer;

}

.play-dice-count.is-on,

.play-dice-count[aria-pressed="true"] {

  border-color: #d4b06a;

  background: linear-gradient(180deg, rgba(212, 176, 106, 0.22), rgba(20, 16, 12, 0.9));

  color: #f0d9a0;

  box-shadow: inset 0 0 0 1px rgba(212, 176, 106, 0.35);

}

.play-dice-hint {

  margin: 0;

  font-size: .72rem;

  line-height: 1.3;

}

.play-dice-arm[aria-pressed="true"] {

  opacity: .85;

}



.ic-dice-roll {

  margin: .95rem 0 0;

}

.ic-dice-row {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-end;

  gap: .45rem .55rem;

}

.ic-die {

  display: block;

  width: 4.4rem;

  height: 5.5rem;

  overflow: visible;

  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55));

}

.ic-die--t1 { transform: rotate(-7deg); }

.ic-die--t2 { transform: rotate(5deg) translateY(.12rem); }

.ic-die--t3 { transform: rotate(-3deg) translateY(-.08rem); }

.ic-die--t4 { transform: rotate(8deg); }

.ic-die--t5 { transform: rotate(-5deg) translateY(.1rem); }

.ic-die--t6 { transform: rotate(4deg); }

.ic-die-svg {

  display: block;

  width: 100%;

  height: 100%;

}

.ic-die-shadow {

  fill: rgba(0, 0, 0, 0.55);

}

.ic-die-side-l {

  fill: #0a0806;

}

.ic-die-side-r {

  fill: #16120e;

}

.ic-die-face {

  fill: #14110e;

  stroke: #d4b06a;

  stroke-width: 1.15;

}

.ic-die-sheen {

  fill: #d4b06a;

  opacity: .14;

}

.ic-die-filigree {

  fill: none;

  stroke: #d4b06a;

  stroke-width: .7;

  stroke-dasharray: 1.1 1.35;

  opacity: .85;

}

.ic-die-spark {

  fill: #f0d9a0;

}

.ic-die-crown {

  fill: none;

  stroke: #d4b06a;

  stroke-width: .85;

  stroke-linejoin: round;

  opacity: .9;

}

.ic-die-num {

  fill: #e8c97a;

  font-family: var(--font-display), Cinzel, serif;

  font-size: 18px;

  font-weight: 600;

  letter-spacing: .02em;

}

.ic-dice-caption {

  margin: .45rem 0 0;

  font-size: .78rem;

  letter-spacing: .04em;

  color: rgba(212, 176, 106, 0.78);

  font-style: italic;

}



.ic-deck-draw {

  margin: .85rem 0 0;

  padding: .7rem .75rem .8rem;

  width: fit-content;

  max-width: 100%;

  border: 1px solid rgba(180, 150, 100, 0.35);

  background:

    linear-gradient(165deg, rgba(42, 34, 26, 0.94), rgba(14, 12, 10, 0.97));

  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.06);

  text-align: center;

}

.ic-deck-draw img {

  display: block;

  width: min(140px, 42vw);

  height: auto;

  margin: 0 auto;

  border: 1px solid rgba(201, 168, 106, 0.45);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);

  background: #1a1510;

}

.ic-deck-draw figcaption {

  margin: .55rem 0 0;

  max-width: 16rem;

}

.ic-deck-flavor {

  display: block;

  font-size: .82rem;

  line-height: 1.4;

  color: rgba(232, 214, 180, 0.92);

  font-style: italic;

}



.deck-admin-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

  gap: 1rem;

  margin: 1rem 0 1.5rem;

}

.deck-admin-card {

  display: flex;

  flex-direction: column;

  gap: .45rem;

  padding: .65rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: rgba(20, 16, 12, 0.55);

}

.deck-admin-card.is-off {

  opacity: .55;

}

.deck-admin-card img {

  width: 100%;

  height: auto;

  aspect-ratio: 5 / 7;

  object-fit: cover;

  border: 1px solid rgba(201, 168, 106, 0.35);

  background: #15110d;

}

.deck-admin-card-form {

  gap: .35rem;

}

.deck-admin-card .check-inline {

  display: flex;

  align-items: center;

  gap: .35rem;

  font-size: .8rem;

}



@media (max-width: 520px) {

  .play-stall-picked-row {

    grid-template-columns: auto minmax(0, 1fr) auto;

    grid-template-areas:

      "icon name remove"

      "qty qty price";

  }

  .play-stall-picked-icon { grid-area: icon; }

  .play-stall-picked-name { grid-area: name; }

  .play-stall-remove { grid-area: remove; }

  .play-stall-qty { grid-area: qty; }

  .play-stall-price { grid-area: price; }

}



.ic-stall {

  margin: .75rem 0 0;

  padding: .65rem .7rem .7rem;

  border: 1px solid rgba(180, 150, 100, 0.32);

  background:

    linear-gradient(165deg, rgba(48, 38, 28, 0.92), rgba(16, 13, 11, 0.96));

  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.06);

}

.ic-stall-head {

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  gap: .35rem .75rem;

  margin: 0 0 .55rem;

  padding-bottom: .4rem;

  border-bottom: 1px solid rgba(180, 150, 100, 0.2);

}

.ic-stall-title {

  font-family: var(--font-display);

  font-size: .78rem;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--gold);

}

.ic-stall-hint-inline {

  font-size: .72rem;

}

.ic-stall-cubes {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr));

  gap: .4rem;

  max-width: 22rem;

}

.ic-stall-cube {

  position: relative;

  aspect-ratio: 1;

  min-width: 0;

  padding: 0 0 .95rem;

  margin: 0;

  border: 1px solid rgba(180, 150, 100, 0.4);

  border-radius: 3px;

  background:

    linear-gradient(165deg, rgba(58, 48, 36, 0.98), rgba(18, 14, 10, 0.99));

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);

  cursor: pointer;

  color: inherit;

  font: inherit;

  display: grid;

  place-items: center;

  overflow: hidden;

}

.ic-stall-cube:hover,

.ic-stall-cube:focus-visible {

  border-color: rgba(201, 168, 106, 0.75);

  outline: none;

  box-shadow:

    inset 0 0 0 1px rgba(201, 168, 106, 0.25),

    0 0 0 1px rgba(201, 168, 106, 0.2);

}

.ic-stall-cube.rarity-uncommon { border-color: rgba(110, 160, 120, 0.55); }

.ic-stall-cube.rarity-rare { border-color: rgba(90, 140, 180, 0.6); }

.ic-stall-cube.rarity-epic { border-color: rgba(201, 168, 106, 0.7); }

.ic-stall-cube img {

  width: 70%;

  height: 70%;

  object-fit: contain;

  pointer-events: none;

}

.ic-stall-cube-qty {

  position: absolute;

  right: 3px;

  top: 2px;

  z-index: 2;

  min-width: .85rem;

  padding: 0 2px;

  font-size: .62rem;

  font-weight: 700;

  color: #f5ecd8;

  text-shadow: 0 1px 2px #000;

  line-height: 1.15;

  background: rgba(0, 0, 0, 0.5);

  border-radius: 2px;

}

.ic-stall-cube-price {

  position: absolute;

  left: 2px;

  right: 2px;

  bottom: 2px;

  z-index: 2;

  font-size: .58rem;

  font-weight: 700;

  font-family: var(--font-display);

  color: var(--gold);

  text-align: center;

  text-shadow: 0 1px 2px #000;

  line-height: 1.1;

  pointer-events: none;

}

.ic-stall-cube-dur {

  position: absolute;

  left: 3px;

  right: 3px;

  bottom: 1.05rem;

  height: 3px;

  z-index: 2;

  background: rgba(0, 0, 0, 0.55);

  border-radius: 1px;

  overflow: hidden;

  pointer-events: none;

}

.ic-stall-cube-dur > span {

  display: block;

  height: 100%;

  background: linear-gradient(90deg, #7a9a5a, #c9a86a);

}

.ic-stall-cube-dur.is-mid > span {

  background: linear-gradient(90deg, #a89040, #c9a86a);

}

.ic-stall-cube-dur.is-low > span,

.ic-stall-cube-dur.is-zero > span {

  background: linear-gradient(90deg, #8a4030, #c06040);

}



.ic-stall-pop {

  position: fixed;

  z-index: 80;

  width: min(22rem, calc(100vw - 1rem));

  margin: 0;

  padding: 0;

  border: 1px solid rgba(180, 150, 100, 0.5);

  border-radius: 2px;

  background:

    linear-gradient(180deg, #221c16 0%, #15120e 100%);

  color: var(--ink);

  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);

}

.ic-stall-pop[hidden] {

  display: none !important;

}

.ic-stall-cube.is-open {

  border-color: rgba(201, 168, 106, 0.9);

  box-shadow:

    inset 0 0 0 1px rgba(201, 168, 106, 0.35),

    0 0 0 1px rgba(201, 168, 106, 0.28);

}

.ic-stall-dialog-panel {

  display: grid;

  gap: .7rem;

  padding: .9rem 1rem 1rem;

}

.ic-stall-dialog-head {

  display: grid;

  grid-template-columns: auto minmax(0, 1fr) auto;

  gap: .65rem;

  align-items: start;

}

.ic-stall-dialog-head img {

  width: 56px;

  height: 56px;

  object-fit: contain;

  border: 1px solid rgba(180, 150, 100, 0.35);

  background: rgba(0, 0, 0, 0.35);

  border-radius: 2px;

}

.ic-stall-dialog-copy {

  min-width: 0;

}

.ic-stall-dialog-head h2 {

  margin: 0 0 .25rem;

  font-size: 1.05rem;

  font-family: var(--font-display);

  color: var(--gold);

  line-height: 1.25;

}

.ic-stall-dialog-head h2.rarity-uncommon { color: #9fcc9a; }

.ic-stall-dialog-head h2.rarity-rare { color: #8eb4d4; }

.ic-stall-dialog-head h2.rarity-epic { color: #e0c888; }

.ic-stall-dialog-meta,

.ic-stall-dialog-stats,

.ic-stall-dialog-desc {

  margin: 0 0 .3rem;

  font-size: .8rem;

  line-height: 1.4;

  color: var(--muted, #a89a82);

}

.ic-stall-dialog-desc { color: #d8ceb8; }

.ic-stall-dialog-price {

  margin: .35rem 0 0;

  color: var(--gold);

  font-family: var(--font-display);

  font-size: .95rem;

}

.ic-stall-dialog-qty {

  display: grid;

  gap: .25rem;

  font-size: .85rem;

}

.ic-stall-dialog-actions {

  display: flex;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: .45rem;

}



@media (max-width: 640px) {

  .play-stall-picked-row {

    grid-template-columns: auto minmax(0, 1fr) auto;

    grid-template-areas:

      "icon name remove"

      "icon qty price";

  }

  .play-stall-picked-icon { grid-area: icon; }

  .play-stall-picked-name { grid-area: name; }

  .play-stall-remove { grid-area: remove; }

  .play-stall-qty { grid-area: qty; }

  .play-stall-price { grid-area: price; }

  .ic-stall-cubes {

    grid-template-columns: repeat(auto-fill, minmax(3.15rem, 1fr));

    max-width: none;

  }

}



.visually-hidden {

  position: absolute !important;

  width: 1px; height: 1px;

  padding: 0; margin: -1px;

  overflow: hidden; clip: rect(0, 0, 0, 0);

  white-space: nowrap; border: 0;

}

.magic-ic-hint {

  margin: .35rem 0 0;

  font-size: .78rem;

  line-height: 1.4;

}

@media (max-width: 640px) {

  .magic-spell-grid { grid-template-columns: 1fr; }

  .magic-effect-row { grid-template-columns: 1fr; gap: .1rem; }

}



/* S?g? / lore inici?l? ? egy bet? */

.help-drop .help-initial,

.lore-drop .help-initial {

  float: left;

  font-family: var(--font-display);

  font-size: 2.75em;

  line-height: .82;

  padding: .08em .28em .05em 0;

  margin: .05em .2em 0 0;

  color: var(--gold);

  font-weight: 700;

  border-right: 1px solid rgba(201, 168, 106, 0.35);

  padding-right: .35em;

  margin-right: .4em;

  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);

}

.help-dl dd .help-drop { display: inline; }

.help-dl dd .help-initial {

  float: none;

  font-size: 1.15em;

  padding: 0 .05em 0 0;

  margin: 0;

  border: none;

  text-shadow: none;

}



/* Admin staff hub */

.admin-hub-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));

  gap: 1rem 1.25rem;

  margin-top: 1rem;

}

.admin-hub-block .admin-subhead {

  margin: 0 0 .45rem;

}

.admin-hub-block .link-list {

  margin: 0;

}



/* Admin tartalomhub */

.admin-content-head { margin-bottom: .85rem; }

.admin-content-lead { margin: .25rem 0 0; }

.admin-content-tab-hint {

  margin: .55rem 0 0;

  font-size: .9rem;

}

.admin-content-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }

.admin-content-cross {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

  margin: 0 0 .65rem;

}

.admin-content-note {

  margin: 0 0 .55rem;

  font-size: .85rem;

}

.admin-content-search {

  display: block;

  margin: 0 0 .65rem;

}

.admin-content-search input {

  width: 100%;

  box-sizing: border-box;

}

.admin-content-cat-fold {

  margin: 0 0 .45rem;

  border-bottom: 1px solid rgba(180, 150, 100, 0.12);

  padding-bottom: .25rem;

}

.admin-content-cat-fold > summary {

  cursor: pointer;

  list-style: none;

}

.admin-content-cat-fold > summary::-webkit-details-marker { display: none; }

.admin-content-layout {

  display: grid;

  grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);

  gap: 1rem;

  align-items: start;

}

.admin-content-list {

  max-height: min(75vh, 42rem);

  overflow: auto;

  border: 1px solid rgba(180, 150, 100, 0.22);

  padding: .55rem .65rem;

  background: rgba(0, 0, 0, 0.12);

}

.admin-content-list .link-list { margin: 0 0 .35rem; padding: 0; list-style: none; }

.admin-content-list .link-list a.is-active { color: var(--gold); font-weight: 600; }

.admin-content-cat {

  margin: .15rem 0 .25rem;

  font-size: .72rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--muted);

}

.admin-content-spell-list { font-size: .9rem; }

.admin-content-row {

  border: 1px solid rgba(180, 150, 100, 0.18);

  padding: .55rem;

  margin: 0 0 .55rem;

}

.admin-content-field {

  display: block;

  margin: .45rem 0 0;

}

.admin-content-label {

  display: block;

  margin-bottom: .3rem;

  font-size: .9rem;

}

.content-toolbar {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .35rem;

  margin-bottom: .45rem;

  padding: .4rem .5rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background:

    linear-gradient(180deg, rgba(40, 34, 28, 0.92), rgba(28, 24, 20, 0.88));

  border-radius: var(--radius);

  box-shadow: inset 0 1px 0 rgba(201, 168, 106, 0.08);

}

.content-tool-btn {

  min-width: 2rem;

  min-height: 2rem;

  padding: .2rem .45rem;

  border: 1px solid rgba(180, 150, 100, 0.32);

  background: rgba(0, 0, 0, 0.22);

  color: var(--ink);

  font-family: var(--font-body);

  font-size: .92rem;

  line-height: 1;

  border-radius: var(--radius);

  cursor: pointer;

}

.content-tool-btn:hover,

.content-tool-btn:focus-visible {

  border-color: var(--gold);

  color: var(--gold);

  outline: none;

}

.content-tool-btn--label {

  min-width: auto;

  font-size: .78rem;

  letter-spacing: .02em;

  text-transform: uppercase;

  color: var(--muted);

}

.content-tool-sep {

  width: 1px;

  align-self: stretch;

  margin: .15rem .15rem;

  background: rgba(180, 150, 100, 0.28);

}

.content-color-palette {

  display: inline-flex;

  flex-wrap: wrap;

  gap: .28rem;

  align-items: center;

}

.content-color-swatch {

  width: 1.15rem;

  height: 1.15rem;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.22);

  padding: 0;

  cursor: pointer;

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);

}

.content-color-swatch:hover,

.content-color-swatch:focus-visible {

  outline: 2px solid var(--gold);

  outline-offset: 1px;

}

.content-color-swatch--ink { background: var(--ink); }

.content-color-swatch--gold { background: var(--gold); }

.content-color-swatch--copper { background: var(--copper); }

.content-color-swatch--muted { background: var(--muted); }

.content-color-swatch--blood { background: var(--blood); }

.content-color-swatch--sea { background: var(--sea); }

.content-color-swatch--staff { background: var(--staff-ink); }

.content-wysiwyg .content-color--gold { color: var(--gold); }

.content-wysiwyg .content-color--copper { color: var(--copper); }

.content-wysiwyg .content-color--ink { color: var(--ink); }

.content-wysiwyg .content-color--muted { color: var(--muted); }

.content-wysiwyg .content-color--blood { color: var(--blood); }

.content-wysiwyg .content-color--sea { color: var(--sea); }

.content-wysiwyg .content-color--staff { color: var(--staff-ink); }

.content-wysiwyg u { text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent); }

textarea.content-source {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  border: 0 !important;

  opacity: 0 !important;

  pointer-events: none !important;

}

.content-wysiwyg {

  min-height: 4.5rem;

  padding: .65rem .75rem;

  border: 1px solid rgba(180, 150, 100, 0.35);

  background: rgba(0, 0, 0, 0.18);

  border-radius: 2px;

  line-height: 1.55;

  outline: none;

  white-space: pre-wrap;

  word-break: break-word;

  font-family: var(--font-body);

  color: var(--ink);

}

/* Vil?glexikon: ugyanazok a bet?sz?nek, mint a nyilv?nos lore-prose-ban */

.content-wysiwyg[data-mode="lore"] {

  font-size: 1.05rem;

  line-height: 1.78;

  color: #ebe2d4;

}

.content-wysiwyg[data-mode="lore"] strong,

.content-wysiwyg[data-mode="lore"] b {

  color: #f0e2c8;

  font-weight: 700;

}

.content-wysiwyg[data-mode="lore"] em,

.content-wysiwyg[data-mode="lore"] i {

  color: #d4c4a8;

  font-style: italic;

}

.content-wysiwyg--multi {

  min-height: 16rem;

  max-height: min(70vh, 36rem);

  overflow: auto;

}

.content-wysiwyg:focus {

  border-color: rgba(212, 175, 55, 0.55);

  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.2);

}

.content-wysiwyg[data-mode="help"][data-drop="1"]::first-letter,

.content-wysiwyg p[data-drop="1"]::first-letter,

.content-wysiwyg[data-mode="lore"] > p:first-of-type::first-letter {

  font-family: var(--font-display);

  font-size: 2.15em;

  line-height: .85;

  float: left;

  padding: .05em .1em 0 0;

  color: var(--gold);

  font-weight: 600;

}

.content-wysiwyg[data-mode="help"][data-drop="1"]::first-letter {

  float: none;

  font-size: 1.25em;

  padding: 0 .05em 0 0;

}

.content-wysiwyg h2.lore-prose-h,

.content-wysiwyg[data-mode="lore"] h2 {

  margin: 1.35rem 0 .65rem;

  padding-bottom: .35rem;

  font-family: var(--font-display);

  font-size: 1.05rem;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--gold);

  border-bottom: 1px solid rgba(180, 150, 100, 0.28);

}

.content-wysiwyg p { margin: 0 0 .75rem; }

.content-wysiwyg .lore-illust {

  position: relative;

  margin: .75rem 0;

  max-width: 16rem;

}

.content-wysiwyg .lore-illust img {

  display: block;

  width: 100%;

  height: auto;

  border: 1px solid rgba(180, 150, 100, 0.3);

}

.content-wysiwyg .lore-illust figcaption {

  font-size: .8rem;

  color: var(--muted);

  margin-top: .25rem;

}

.content-illust-remove {

  position: absolute;

  top: .25rem;

  right: .25rem;

  width: 1.6rem;

  height: 1.6rem;

  border: 0;

  border-radius: 2px;

  background: rgba(20, 14, 10, 0.75);

  color: #f0e6d2;

  cursor: pointer;

  font-size: 1.1rem;

  line-height: 1;

}

.content-preview {

  margin-top: .55rem;

  padding: .65rem;

  border: 1px dashed rgba(180, 150, 100, 0.35);

  max-height: 16rem;

  overflow: auto;

}

.admin-content-actions {

  display: flex;

  flex-wrap: wrap;

  gap: .45rem;

  margin-top: .75rem;

}

.admin-narr-groups {

  display: flex;

  flex-wrap: wrap;

  gap: .3rem;

  margin: 0 0 .55rem;

}

.admin-narr-list {

  margin: 0;

  padding: 0;

  list-style: none;

}

.admin-narr-list a {

  display: flex;

  flex-direction: column;

  gap: .15rem;

  padding: .4rem .2rem;

  border-bottom: 1px solid rgba(180, 150, 100, 0.12);

  text-decoration: none;

}

.admin-narr-list-title {

  font-size: .92rem;

  color: inherit;

}

.admin-narr-list-preview {

  font-size: .75rem;

  line-height: 1.35;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.admin-narr-guide {

  margin: 0 0 .85rem;

  padding: .65rem .75rem;

  border-left: 3px solid var(--gold);

  background: rgba(0, 0, 0, 0.16);

}

.admin-narr-guide-title {

  margin: 0 0 .35rem;

  font-size: .9rem;

}

.admin-narr-guide-list {

  margin: 0;

  padding-left: 1.1rem;

  font-size: .88rem;

  line-height: 1.45;

}

.admin-narr-guide-list code {

  color: var(--gold);

}

.admin-narr-hint {

  margin: .2rem 0 .75rem;

  font-size: .88rem;

}

.admin-narr-lines {

  display: flex;

  flex-direction: column;

  gap: .65rem;

}

.admin-narr-line {

  display: grid;

  grid-template-columns: 1fr auto;

  gap: .45rem;

  align-items: start;

  padding: .55rem .65rem;

  border: 1px solid rgba(180, 150, 100, 0.22);

  background: rgba(0, 0, 0, 0.14);

}

.admin-narr-line-label {

  display: flex;

  flex-direction: column;

  gap: .3rem;

  margin: 0;

}

.admin-narr-textarea {

  width: 100%;

  min-height: 4.5rem;

  resize: vertical;

  font-family: var(--font-body);

  font-size: .95rem;

  line-height: 1.45;

  color: var(--ink);

  background: rgba(0, 0, 0, 0.2);

  border: 1px solid rgba(180, 150, 100, 0.28);

  padding: .5rem .6rem;

}

.admin-content-layout--narr {

  grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);

}

.content-image-dialog {

  border: 1px solid rgba(180, 150, 100, 0.4);

  padding: 1rem;

  max-width: 28rem;

  background: var(--panel, #1a1612);

  color: inherit;

}

@media (max-width: 800px) {

  .admin-content-layout { grid-template-columns: 1fr; }

  .admin-content-list { max-height: 14rem; }

}





/* Sz?rnykr?nika */

.monster-level-nav {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

  margin: 1rem 0 1.25rem;

}

.monster-level-chip {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 2rem;

  padding: .28rem .45rem;

  font-family: var(--font-display);

  font-size: .78rem;

  letter-spacing: .04em;

  color: var(--muted);

  text-decoration: none;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: rgba(20, 16, 12, 0.55);

}

.monster-level-chip:hover,

.monster-level-chip.is-active {

  color: var(--gold);

  border-color: rgba(201, 168, 106, 0.55);

}

.monster-level-heading {

  font-family: var(--font-display);

  font-size: 1.15rem;

  color: var(--gold);

  margin: 1.4rem 0 .35rem;

}

.monster-level-lead { margin: 0 0 .85rem; }

.monster-catalog-head {

  display: block;

  margin: 0 0 .85rem;

  padding-bottom: .65rem;

  border-bottom: 1px solid rgba(180, 150, 100, 0.22);

}

.monster-catalog-head-row {

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  justify-content: space-between;

  gap: .5rem 1rem;

}

.monster-catalog-banner {

  margin: .75rem 0 0;

  max-width: min(100%, 48rem);

}

.monster-catalog-title {

  margin: 0;

  font-family: var(--font-display);

  font-size: clamp(1.35rem, 3vw, 1.75rem);

  letter-spacing: .04em;

  color: var(--ink);

}

.monster-catalog-nav {

  margin: 0;

  font-size: .9rem;

}

.lore-catalog-cta {

  margin: 1.25rem 0 0;

  padding-top: 1rem;

  border-top: 1px solid rgba(180, 150, 100, 0.22);

}

.monster-chronicle .lore-lead-prose {

  max-width: 38rem;

  margin: .55rem 0 .75rem;

}

.monster-chronicle .lore-lead-prose p {

  margin: 0;

  color: #cfc6b8;

  font-size: 1.02rem;

  line-height: 1.55;

}

.monster-detail-prose {

  max-width: 40rem;

  margin: 0 0 1.1rem;

}

.monster-detail-prose p {

  margin: 0 0 .75rem;

  line-height: 1.65;

  color: #e8e2d8;

  font-size: 1.02rem;

}

.monster-detail-prose p:last-child { margin-bottom: 0; }

.monster-card-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));

  gap: .75rem;

  margin-bottom: 1rem;

}

.monster-card-grid--compact {

  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));

}

.monster-card {

  display: grid;

  grid-template-columns: 5.5rem 1fr;

  gap: .65rem;

  align-items: start;

  padding: .55rem;

  text-decoration: none;

  color: inherit;

  border: 1px solid rgba(180, 150, 100, 0.3);

  background: linear-gradient(180deg, rgba(48, 38, 28, 0.95), rgba(18, 14, 12, 0.98));

  transition: border-color .15s ease, transform .15s ease;

}

.monster-card:hover {

  border-color: rgba(201, 168, 106, 0.55);

  transform: translateY(-1px);

}

.monster-card-art {

  display: block;

  width: 5.5rem;

  height: 5.5rem;

  overflow: hidden;

  border: 1px solid rgba(180, 150, 100, 0.28);

  background: #120e0c;

}

.monster-card-art img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.monster-card-body { display: grid; gap: .2rem; min-width: 0; }

.monster-card-name {

  font-family: var(--font-display);

  font-size: .95rem;

  color: var(--gold);

  letter-spacing: .02em;

  overflow-wrap: anywhere;

  line-height: 1.25;

}

.monster-card-meta { font-size: .78rem; }

.monster-card-blurb { font-size: .84rem; color: #d8d0c4; line-height: 1.4; }

.monster-detail-hero {

  display: grid;

  grid-template-columns: 12rem 1fr;

  gap: 1.1rem;

  align-items: center;

  margin: .75rem 0 1.25rem;

}

.monster-detail-art {

  margin: 0;

  width: 12rem;

  height: 12rem;

  border: 1px solid rgba(180, 150, 100, 0.35);

  overflow: hidden;

  background: #120e0c;

  box-shadow: 0 12px 28px rgba(0,0,0,.35);

}

.monster-detail-art img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.monster-detail-level { margin: .25rem 0 0; }

.monster-traits {

  display: grid;

  gap: .7rem;

  margin: 0;

  max-width: 40rem;

  padding: .9rem 1rem;

  border: 1px solid rgba(180, 150, 100, 0.28);

  border-left: 3px solid var(--gold);

  background: rgba(20, 16, 12, 0.45);

}

.monster-traits > div {

  display: grid;

  gap: .18rem;

}

.monster-traits dt {

  font-family: var(--font-display);

  font-size: .72rem;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--gold);

  margin: 0;

}

.monster-traits dd {

  margin: 0;

  color: #e6e0d4;

  line-height: 1.45;

}

@media (max-width: 640px) {

  .monster-detail-hero { grid-template-columns: 1fr; }

  .monster-detail-art { width: min(12rem, 70vw); height: min(12rem, 70vw); }

  .monster-card { grid-template-columns: 4.5rem 1fr; }

  .monster-card-art { width: 4.5rem; height: 4.5rem; }

}



/* —— Szörnyaréna —— */

.act-szarena .szarena-meta {

  margin: 0 0 .85rem;

  font-size: .9rem;

}

.szarena-block {

  margin: 0 0 .75rem;

  padding: .55rem .75rem;

  border-left: 3px solid var(--copper);

  background: rgba(20, 16, 12, 0.35);

}

.szarena-stage {

  margin: 0 0 1.1rem;

}

.szarena-pit {

  position: relative;

  overflow: hidden;

  border: 1px solid rgba(160, 120, 70, 0.35);

  background:

    radial-gradient(ellipse 80% 55% at 50% 78%, rgba(120, 78, 36, 0.5), transparent 68%),

    linear-gradient(180deg, #1a1612 0%, #241c16 42%, #2a2218 100%);

  min-height: 15.5rem;

  padding: 1.4rem 1rem 2.2rem;

  box-shadow: inset 0 -36px 50px rgba(0, 0, 0, 0.35);

}

.szarena-bout-lvl {

  position: absolute;

  top: .55rem;

  left: 50%;

  transform: translateX(-50%);

  margin: 0;

  z-index: 2;

  font-family: var(--font-display);

  font-size: .68rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: rgba(212, 176, 106, 0.7);

}

.szarena-sand {

  position: absolute;

  left: 10%;

  right: 10%;

  bottom: 6%;

  height: 42%;

  border-radius: 50% 50% 42% 42%;

  background:

    radial-gradient(ellipse at 50% 40%, #8a6a3e 0%, #6b4e2c 55%, #4a351c 100%);

  opacity: .88;

  box-shadow: inset 0 8px 24px rgba(0, 0, 0, 0.35);

  pointer-events: none;

}

.szarena-torch {

  position: absolute;

  top: 14%;

  width: 9px;

  height: 26px;

  border-radius: 2px;

  background: linear-gradient(180deg, #e8b45a, #8a4020 70%, #3a2414);

  box-shadow: 0 0 16px rgba(232, 160, 60, 0.4);

  animation: szarena-flicker 2.4s ease-in-out infinite;

}

.szarena-torch--l { left: 7%; }

.szarena-torch--r { right: 7%; animation-delay: -1.1s; }

@keyframes szarena-flicker {

  0%, 100% { opacity: .85; filter: brightness(1); }

  40% { opacity: 1; filter: brightness(1.12); }

  70% { opacity: .72; filter: brightness(.92); }

}

.szarena-fighters {

  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1rem;

  align-items: end;

  min-height: 11.5rem;

}

.szarena-fighter-visual {

  text-align: center;

}

.szarena-float {

  display: inline-block;

  animation: szarena-float 4.2s ease-in-out infinite;

}

.szarena-fighter-visual--b .szarena-float {

  animation-delay: -2.1s;

}

@keyframes szarena-float {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-11px); }

}

.szarena-portrait {

  width: min(8.5rem, 36vw);

  height: min(8.5rem, 36vw);

  object-fit: cover;

  border: 2px solid rgba(200, 160, 90, 0.45);

  background: #120e0a;

  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.48);

}

.szarena-pit .szarena-name {

  margin: .55rem 0 0;

  font-family: var(--font-display);

  font-size: 1.05rem;

  color: var(--gold);

  letter-spacing: .04em;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);

}

.szarena-cards {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: .85rem 1.1rem;

  margin: .85rem 0 0;

}

.szarena-card {

  padding: .75rem .8rem .7rem;

  border: 1px solid rgba(160, 120, 70, 0.22);

  background: rgba(18, 14, 10, 0.42);

}

.szarena-card-head { margin-bottom: .35rem; }

.szarena-card-title {

  margin: 0;

  font-family: var(--font-display);

  font-size: 1rem;

  color: var(--gold);

  letter-spacing: .03em;

}

.szarena-lvl {

  margin: .15rem 0 0;

  font-size: .82rem;

}

.szarena-trait {

  margin: .28rem 0;

  font-size: .84rem;

  line-height: 1.35;

}

.szarena-trait span {

  display: block;

  font-family: var(--font-display);

  font-size: .66rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--copper);

}

.szarena-lex {

  margin: .45rem 0 0;

  font-size: .84rem;

}

.szarena-intro {

  margin: .85rem 0 0;

  padding: .65rem .8rem;

  border-left: 3px solid var(--gold);

  background: rgba(20, 16, 12, 0.4);

  font-style: italic;

  color: #d8d0c2;

}

.szarena-bet {

  margin: 0;

  padding: .9rem 0 0;

  border-top: 1px solid var(--line);

}

.szarena-stakes {

  margin: 0 0 .9rem;

  padding: 0;

  border: 0;

}

.szarena-stakes legend {

  font-family: var(--font-display);

  font-size: .75rem;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: .5rem;

}

.szarena-stake-hint {

  margin: 0 0 .65rem;

  font-size: .88rem;

}

.szarena-stake-inputs {

  display: flex;

  flex-wrap: wrap;

  gap: .65rem 1rem;

}

.szarena-stake-inputs label {

  display: grid;

  gap: .25rem;

  font-size: .88rem;

  color: var(--muted);

}

.szarena-stake-inputs input[type="number"] {

  width: 7.5rem;

  padding: .35rem .5rem;

  border: 1px solid var(--line);

  background: var(--input, #12100e);

  color: var(--ink);

  font: inherit;

}

.szarena-actions {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: .6rem;

}

.szarena-actions .btn { width: 100%; }

.szarena-result {

  margin: 0 0 1.1rem;

  padding: .95rem 1rem;

  border: 1px solid var(--line);

  border-left-width: 3px;

  background: rgba(20, 16, 12, 0.45);

  animation: szarena-result-in .45s ease both;

}

.szarena-result.is-win { border-left-color: #7a9a5a; }

.szarena-result.is-lose { border-left-color: var(--blood); }

@keyframes szarena-result-in {

  from { opacity: 0; transform: translateY(6px); }

  to { opacity: 1; transform: none; }

}

.szarena-result-nums { margin: .2rem 0 .7rem; }

.szarena-beat {

  margin: 0 0 .6rem;

  line-height: 1.5;

  opacity: 0;

  animation: szarena-beat-in .55s ease forwards;

  animation-delay: calc(var(--i, 0) * .18s);

}

@keyframes szarena-beat-in {

  from { opacity: 0; transform: translateY(4px); }

  to { opacity: 1; transform: none; }

}

@media (max-width: 720px) {

  .szarena-cards,

  .szarena-fighters,

  .szarena-actions { grid-template-columns: 1fr; }

  .szarena-fighters { min-height: 0; gap: 1.25rem; }

  .szarena-pit { min-height: 0; }

}

@media (prefers-reduced-motion: reduce) {

  .szarena-float,

  .szarena-torch,

  .szarena-result,

  .szarena-beat {

    animation: none !important;

    opacity: 1;

    transform: none;

  }

}



/* —— Szörnyvadászat —— */

.act-hunt {

  position: relative;

  overflow: hidden;

  --hunt-ink: #e7dfd0;

  --hunt-muted: rgba(180, 168, 148, .88);

  --hunt-line: rgba(180, 140, 80, .28);

  --hunt-parchment: rgba(28, 22, 16, .72);

  --hunt-tint: rgba(40, 32, 22, .35);

}

.act-hunt::before {

  content: '';

  position: absolute;

  inset: 0;

  background:

    linear-gradient(180deg, var(--hunt-tint), rgba(8, 6, 4, .72)),

    var(--hunt-bg, none) center/cover no-repeat;

  opacity: .55;

  pointer-events: none;

  z-index: 0;

}

.act-hunt::after {

  content: '';

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  background:

    radial-gradient(ellipse at 50% 20%, transparent 35%, rgba(0, 0, 0, .55) 100%);

}

.act-hunt--path { --hunt-tint: rgba(42, 48, 34, .42); }

.act-hunt--deep { --hunt-tint: rgba(22, 36, 40, .48); }

.act-hunt--wild { --hunt-tint: rgba(48, 28, 18, .48); }

.act-hunt > * { position: relative; z-index: 1; }



.hunt-blurb { font-size: .95rem; max-width: 36rem; color: var(--hunt-ink); }

.hunt-meta { font-size: .85rem; margin-bottom: 1rem; }

.hunt-deferred-warn {

  margin: 0 0 .85rem;

  padding: .45rem .65rem;

  font-size: .85rem;

  color: #e8c0a0;

  border-left: 2px solid rgba(180, 100, 70, .55);

  background: rgba(60, 30, 20, .28);

}

.hunt-scout-form { display: grid; gap: 1rem; max-width: 28rem; }

.hunt-risk-set {

  margin: 0;

  padding: 0;

  border: 0;

  display: grid;

  gap: .55rem;

}

.hunt-risk-legend {

  padding: 0;

  margin: 0 0 .2rem;

  font-family: var(--font-display, Georgia, serif);

  font-size: .72rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: rgba(201, 164, 92, .8);

}

.hunt-path { display: block; cursor: pointer; }

.hunt-path input {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}

.hunt-path-frame {

  display: grid;

  grid-template-columns: 1.15rem 1fr;

  gap: .7rem;

  align-items: start;

  padding: .7rem .8rem;

  border: 1px solid rgba(180, 140, 80, .22);

  background:

    linear-gradient(135deg, rgba(255, 255, 255, .03), transparent 40%),

    rgba(12, 10, 8, .45);

  transition: border-color .2s ease, background .2s ease;

}

.hunt-path--path .hunt-path-frame {

  background:

    linear-gradient(120deg, rgba(70, 90, 50, .18), transparent 55%),

    rgba(12, 10, 8, .45);

}

.hunt-path--deep .hunt-path-frame {

  background:

    linear-gradient(120deg, rgba(35, 70, 75, .22), transparent 55%),

    rgba(12, 10, 8, .45);

}

.hunt-path:hover .hunt-path-frame { border-color: rgba(201, 164, 92, .45); }

.hunt-path input:checked + .hunt-path-frame {

  border-color: rgba(201, 164, 92, .7);

  background:

    linear-gradient(120deg, rgba(201, 164, 92, .1), transparent 50%),

    rgba(16, 12, 8, .55);

}

.hunt-path-mark {

  width: .72rem;

  height: .72rem;

  margin-top: .3rem;

  border: 1px solid rgba(201, 164, 92, .4);

  transform: rotate(45deg);

  background: transparent;

  transition: background .2s ease, border-color .2s ease;

}

.hunt-path input:checked + .hunt-path-frame .hunt-path-mark {

  background: rgba(201, 164, 92, .6);

  border-color: rgba(201, 164, 92, .9);

}

.hunt-path-copy {

  display: grid;

  gap: .2rem;

  line-height: 1.35;

}

.hunt-path-copy strong {

  font-family: var(--font-display, Georgia, serif);

  font-weight: 600;

  font-size: 1rem;

  letter-spacing: .04em;

  color: #efe6d6;

}

.hunt-path-copy em {

  font-style: normal;

  font-size: .8rem;

  color: var(--muted);

}

.hunt-path input:focus-visible + .hunt-path-frame {

  outline: 1px solid rgba(201, 164, 92, .7);

  outline-offset: 2px;

}

.hunt-wild-note {

  margin: 0;

  font-size: .88rem;

  color: var(--hunt-muted);

}

.hunt-start-btn { justify-self: start; }



.act-hunt .act-module-title-row--bare {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  gap: .75rem 1rem;

  justify-content: space-between;

}



.hunt-arena { display: grid; gap: .85rem; }

.hunt-locus {

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  gap: .35rem .45rem;

  font-family: var(--font-display, Georgia, serif);

  font-size: .78rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: rgba(201, 164, 92, .78);

}

.hunt-locus-sep { opacity: .45; }

.hunt-locus-round { color: rgba(230, 220, 200, .7); letter-spacing: .08em; }



.hunt-stage {

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  gap: .75rem;

  align-items: start;

}

.hunt-fighter {

  text-align: center;

  padding: .2rem 0;

}

.hunt-fighter.is-hit { animation: hunt-hit .35s ease; }

.hunt-fighter.is-rage .hunt-meter--hp .hunt-meter-fill { filter: saturate(1.35) brightness(1.08); }



.hunt-seal {

  display: inline-grid;

  place-items: center;

  padding: .28rem;

  border: 1px solid rgba(180, 140, 80, .35);

  background:

    linear-gradient(160deg, rgba(255, 240, 210, .06), transparent 55%),

    rgba(10, 8, 6, .55);

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);

}

.hunt-seal--mon {

  border-color: rgba(140, 90, 70, .4);

}

.hunt-portrait {

  width: 88px;

  height: 88px;

  object-fit: cover;

  display: block;

  filter: saturate(.92) contrast(1.05);

}

.hunt-nameplate {

  font-family: var(--font-display, Georgia, serif);

  font-size: .92rem;

  font-weight: 600;

  margin: .45rem 0 .4rem;

  letter-spacing: .03em;

  color: var(--hunt-ink);

}

.hunt-mon-level {

  display: block;

  font-family: var(--font-body, Georgia, serif);

  font-size: .72rem;

  font-weight: 500;

  margin-top: .15rem;

  letter-spacing: .04em;

}

.hunt-intent {

  margin: .4rem 0 0;

  font-size: .72rem;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: rgba(210, 190, 160, .78);

}

.hunt-intent-k {

  display: block;

  opacity: .55;

  font-size: .62rem;

  margin-bottom: .1rem;

}

.hunt-intent[data-intent="flee"] { color: #c9b07a; }

.hunt-intent[data-intent="wary"] { color: #a8b8c4; }

.hunt-intent[data-intent="attack"] { color: #c99078; }



.hunt-soft-error {

  margin: 0 0 .5rem;

  padding: .45rem .6rem;

  font-size: .85rem;

  color: #e8c0a0;

  border-left: 2px solid rgba(180, 100, 70, .55);

  background: rgba(60, 30, 20, .25);

}

.hunt-feed .hunt-soft-error {

  position: sticky;

  top: 0;

  z-index: 2;

  backdrop-filter: blur(2px);

}

.hunt-meters { display: grid; gap: .28rem; }

.hunt-meter {

  position: relative;

  height: 1.05rem;

  border: 1px solid rgba(255, 255, 255, .08);

  background: rgba(0, 0, 0, .4);

  overflow: hidden;

  font-size: .68rem;

}

.hunt-meter-fill {

  display: block;

  height: 100%;

  width: 0;

  transition: width .45s ease;

}

.hunt-meter--hp .hunt-meter-fill { background: linear-gradient(90deg, #5a241c, #a84434); }

.hunt-meter--mp .hunt-meter-fill { background: linear-gradient(90deg, #1a334c, #356a96); }

.hunt-meter.is-low .hunt-meter-fill { animation: hunt-pulse 1.2s ease-in-out infinite; }

.hunt-meter-label {

  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  color: #f2ebe0;

  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);

}

.hunt-chips {

  display: flex;

  flex-wrap: wrap;

  gap: .65rem;

  justify-content: center;

  margin-top: .4rem;

  font-size: .72rem;

  letter-spacing: .02em;

  opacity: .72;

  font-weight: 400;

}

.hunt-chip {

  display: inline-grid;

  gap: .05rem;

  justify-items: center;

  min-width: 2.6rem;

}

.hunt-chip-k {

  font-size: .62rem;

  letter-spacing: .06em;

  text-transform: uppercase;

  opacity: .7;

}

.hunt-chips em {

  font-style: normal;

  font-weight: 600;

  font-size: .82rem;

  opacity: .98;

  color: #efe6d6;

}



.hunt-vs {

  align-self: center;

  display: grid;

  place-items: center;

  padding-top: 1.6rem;

}

.hunt-vs-mark {

  width: .55rem;

  height: .55rem;

  border: 1px solid rgba(201, 164, 92, .45);

  transform: rotate(45deg);

  opacity: .7;

}

.act-hunt--path .hunt-vs-mark { border-color: rgba(140, 170, 100, .5); }

.act-hunt--deep .hunt-vs-mark { border-color: rgba(100, 150, 160, .55); }

.act-hunt--wild .hunt-vs-mark { border-color: rgba(180, 110, 70, .55); }



.hunt-float {

  min-height: 1.1rem;

  font-size: .85rem;

  font-weight: 700;

  color: #e8c48a;

  opacity: 0;

  transform: translateY(4px);

}

.hunt-float.is-in { animation: hunt-float .9s ease forwards; }



.hunt-finish-banner {

  margin: 0;

  padding: .45rem .7rem;

  font-family: var(--font-display, Georgia, serif);

  font-size: .88rem;

  letter-spacing: .02em;

  color: #e6d3b0;

  border-left: 2px solid rgba(201, 164, 92, .55);

  background: rgba(40, 28, 16, .45);

}



.hunt-feed--chronicle {

  max-height: 16rem;

  overflow: auto;

  padding: .85rem 1rem;

  border: 1px solid var(--hunt-line);

  background:

    linear-gradient(180deg, rgba(255, 236, 200, .04), transparent 30%),

    var(--hunt-parchment);

  font-size: .9rem;

  line-height: 1.58;

  color: #e8dfd0;

  box-shadow: inset 0 0 40px rgba(0, 0, 0, .25);

}

.hunt-beat { margin: 0 0 .5rem; opacity: 1; }

.hunt-beat.is-in { animation: hunt-beat-in .4s ease forwards; }

.hunt-beat--round {

  margin: .75rem 0 .4rem;

  font-family: var(--font-display, Georgia, serif);

  font-size: .7rem;

  letter-spacing: .1em;

  text-transform: uppercase;

  opacity: .55;

  text-align: center;

}

.hunt-beat--loot {

  color: #d4b06a;

  font-style: italic;

}



.hunt-tray { display: grid; gap: .45rem; }

.hunt-panel--inline {

  position: static;

  min-width: 0;

  max-width: none;

  max-height: 10rem;

  overflow: auto;

  padding: .55rem .65rem;

  border: 1px solid rgba(180, 140, 80, .22);

  background: rgba(14, 11, 8, .85);

  display: grid;

  gap: .3rem;

}

.hunt-panel-head {

  margin: 0 0 .15rem;

  font-family: var(--font-display, Georgia, serif);

  font-size: .68rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: rgba(201, 164, 92, .75);

}

.hunt-panel-item { font-size: .8rem; text-align: left; }



.hunt-actions--seals {

  display: flex;

  flex-wrap: wrap;

  gap: .45rem;

  position: sticky;

  bottom: 0;

  padding: .65rem 0 .25rem;

  background: linear-gradient(180deg, transparent, rgba(10, 8, 6, .94) 28%);

  z-index: 2;

}

.hunt-act-form {

  display: contents;

}

.hunt-seal-btn {

  border-radius: 0;

  letter-spacing: .04em;

  min-width: 5.5rem;

}

.act-hunt.is-urgent .hunt-seal-btn.is-urgent-act {

  border-color: rgba(201, 164, 92, .55);

  color: #f0e2c8;

}

.act-hunt.is-busy .hunt-actions button { opacity: .55; pointer-events: none; }



.hunt-end {

  text-align: center;

  padding: 1rem 0 .5rem;

  border-top: 1px solid rgba(180, 140, 80, .2);

  margin-top: .15rem;

}

.hunt-outcome {

  font-family: var(--font-display, Georgia, serif);

  font-size: 1.15rem;

  font-weight: 600;

  margin: 0 0 .45rem;

  letter-spacing: .04em;

}

.hunt-loot-reveal {

  min-height: 1.2em;

  margin: 0 0 .85rem;

  font-size: .88rem;

  color: #d4b06a;

}

.hunt-loot-line {

  margin: 0 0 .25rem;

  opacity: 1;

}

.hunt-loot-line.is-in { animation: hunt-beat-in .4s ease forwards; }

.hunt-end-actions {

  display: flex;

  flex-wrap: wrap;

  gap: .5rem;

  justify-content: center;

}



@keyframes hunt-hit {

  0%, 100% { transform: none; }

  30% { transform: translateX(-3px); }

  60% { transform: translateX(3px); }

}

@keyframes hunt-float {

  0% { opacity: 0; transform: translateY(6px); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translateY(-14px); }

}

@keyframes hunt-beat-in {

  from { opacity: 0; transform: translateY(3px); }

  to { opacity: 1; transform: none; }

}

@keyframes hunt-pulse {

  0%, 100% { filter: brightness(1); }

  50% { filter: brightness(1.25); }

}

@media (max-width: 720px) {

  .hunt-stage { grid-template-columns: 1fr; }

  .hunt-vs { display: none; }

  .hunt-portrait { width: 72px; height: 72px; }

  .hunt-actions--seals { padding-bottom: max(.4rem, env(safe-area-inset-bottom)); }

  .hunt-feed--chronicle { max-height: 13rem; }

}

@media (prefers-reduced-motion: reduce) {

  .hunt-meter-fill,

  .hunt-float,

  .hunt-beat,

  .hunt-loot-line,

  .hunt-fighter.is-hit,

  .hunt-meter.is-low .hunt-meter-fill {

    animation: none !important;

    transition: none !important;

    opacity: 1;

    transform: none;

  }

}



/* —— Főoldal toplisták —— */

.home-boards {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1.25rem;

  margin: 1.5rem 0;

}

.home-board {

  padding: .9rem 1rem;

  border-radius: .4rem;

  background: rgba(0,0,0,.16);

}

.home-board-title {

  font-size: 1.05rem; margin: 0 0 .35rem;

}

.home-board-lead { font-size: .85rem; margin: 0 0 .7rem; }

.home-board-table {

  width: 100%; border-collapse: collapse; font-size: .82rem;

}

.home-board-table th,

.home-board-table td {

  text-align: left; padding: .28rem .2rem;

  border-bottom: 1px solid rgba(255,255,255,.08);

}

.home-board-table th { font-weight: 600; opacity: .75; }

.home-board-rank {

  width: 2.1rem;

  font-variant-numeric: tabular-nums;

  font-weight: 600;

  opacity: .72;

  color: rgba(245, 230, 200, .78);

}

.home-board-row--top1,

.home-board-row--top2,

.home-board-row--top3 {

  background: linear-gradient(

    90deg,

    rgba(201, 162, 66, .18) 0%,

    rgba(201, 162, 66, .06) 42%,

    transparent 100%

  );

}

.home-board-row--top1 .home-board-rank {

  color: #f0d78c;

  opacity: 1;

  text-shadow: 0 0 10px rgba(232, 196, 90, .45);

}

.home-board-row--top2 .home-board-rank {

  color: #e8d6a0;

  opacity: .95;

  text-shadow: 0 0 8px rgba(220, 190, 110, .32);

}

.home-board-row--top3 .home-board-rank {

  color: #dcc48a;

  opacity: .9;

  text-shadow: 0 0 6px rgba(200, 160, 70, .25);

}

.home-board-row--top1 td:nth-child(2) {

  color: #f3e2b0;

  font-weight: 600;

}

.home-board-row--top2 td:nth-child(2),

.home-board-row--top3 td:nth-child(2) {

  color: #ead9a8;

}

.home-board-empty { font-size: .85rem; margin: 0; }

@media (max-width: 800px) {

  .home-boards { grid-template-columns: 1fr; }

}



/* —— Lexikon / súgó helybeni staff szerkesztés —— */

.lore-staff-edit-bar,

.help-fold-edit {

  margin: .35rem 0 .6rem;

}

.lore-staff-edit-bar {

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

  align-items: center;

}

.lore-card-wrap {

  display: flex;

  flex-direction: column;

  gap: .25rem;

}

.lore-card-wrap .lore-card {

  flex: 1;

}

.lore-card-edit {

  align-self: flex-start;

}

.help-fold > summary {

  display: flex;

  align-items: center;

  gap: .5rem;

  flex-wrap: wrap;

}

.help-fold-edit {

  margin-left: auto;

}

.content-focus-edit .admin-content-editor--focus {

  max-width: 52rem;

}







/* —— Bányászat (act-mine) —— */

.act-mine {

  position: relative;

  overflow: hidden;

  --mine-ink: #e8dcc8;

  --mine-muted: rgba(180, 168, 148, .88);

  --mine-line: rgba(140, 120, 80, .28);

  --mine-parchment: rgba(28, 22, 16, .72);

  --mine-tint: rgba(40, 32, 22, .35);

  color: var(--mine-ink);

}

.act-mine::before {

  content: "";

  position: absolute;

  inset: 0;

  background:

    linear-gradient(180deg, var(--mine-tint), rgba(8, 6, 4, .72)),

    var(--mine-bg, none) center/cover no-repeat;

  opacity: .55;

  pointer-events: none;

  z-index: 0;

}

.act-mine::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  background: radial-gradient(ellipse at 50% 20%, transparent 35%, rgba(0, 0, 0, .55) 100%);

}

.act-mine--shallow { --mine-tint: rgba(48, 44, 34, .42); }

.act-mine--deep { --mine-tint: rgba(28, 36, 44, .5); }

.act-mine--abyss { --mine-tint: rgba(36, 22, 28, .55); }

.act-gather--meadow { --mine-tint: rgba(40, 52, 36, .42); }

.act-gather--thicket { --mine-tint: rgba(32, 44, 30, .5); }

.act-gather--shadow { --mine-tint: rgba(28, 32, 40, .55); }

.act-gather-tip {

  margin: .45rem 0 0;

  max-width: 36rem;

  font-size: .88rem;

  line-height: 1.4;

  color: #d4c4a8;

  font-style: italic;

}

.act-mine > * { position: relative; z-index: 1; }

.act-mine.is-busy { pointer-events: none; opacity: .92; }

.act-mine.is-urgent .mine-seal-btn.is-urgent-act {

  box-shadow: 0 0 0 1px rgba(200, 120, 70, .45);

}

.mine-blurb { font-size: .95rem; max-width: 36rem; }

.mine-meta { font-size: .85rem; margin-bottom: 1rem; }

.mine-deferred-warn {

  margin: 0 0 .85rem;

  padding: .45rem .65rem;

  font-size: .85rem;

  color: #e8c0a0;

  border-left: 2px solid rgba(180, 100, 70, .55);

  background: rgba(60, 30, 20, .28);

  display: flex;

  flex-wrap: wrap;

  gap: .5rem;

  align-items: center;

}

.mine-depth-set { border: 0; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }

.mine-depth-legend {

  font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;

  color: var(--mine-muted); margin-bottom: .35rem;

}

.mine-path { display: block; cursor: pointer; }

.mine-path input { position: absolute; opacity: 0; pointer-events: none; }

.mine-path-frame {

  display: flex; gap: .75rem; align-items: center;

  padding: .65rem .8rem; border: 1px solid var(--mine-line);

  background: var(--mine-parchment); border-radius: 4px;

  transition: border-color .15s ease, background .15s ease;

}

.mine-path input:checked + .mine-path-frame {

  border-color: rgba(200, 160, 90, .55);

  background: rgba(40, 30, 18, .82);

}

.mine-path-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }

.mine-path-mark {

  width: 14px; height: 14px; border-radius: 50%;

  border: 2px solid rgba(180, 150, 90, .6); flex-shrink: 0;

}

.mine-path input:checked + .mine-path-frame .mine-path-mark { background: rgba(200, 160, 90, .85); }

.mine-path-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

.mine-path-copy strong { font-size: .95rem; }

.mine-path-copy em { font-style: normal; font-size: .82rem; color: var(--mine-muted); }

.mine-start-btn { margin-top: .25rem; }

.mine-locus {

  display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline;

  margin-bottom: .85rem; font-size: .9rem; color: var(--mine-muted);

}

.mine-locus-place { color: var(--mine-ink); font-weight: 600; }

.mine-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: .85rem; }

@media (max-width: 700px) { .mine-stage { grid-template-columns: 1fr; } }

.mine-fighter, .mine-haul-panel {

  padding: .75rem; border: 1px solid var(--mine-line);

  background: var(--mine-parchment); border-radius: 4px;

}

.mine-portrait {

  width: 72px; height: 72px; object-fit: cover; border-radius: 4px; border: 1px solid var(--mine-line);

}

.mine-nameplate { margin: .35rem 0 .5rem; font-weight: 600; }

.mine-meters { display: grid; gap: .45rem; }

.mine-meter-row {

  display: grid;

  grid-template-columns: 5.5rem minmax(0, 1fr);

  gap: .4rem;

  align-items: center;

}

.mine-meter-cap {

  font-size: .72rem;

  letter-spacing: .03em;

  text-transform: uppercase;

  opacity: .78;

  line-height: 1.1;

}

.mine-meter {

  position: relative; height: 1.15rem; border-radius: 2px;

  background: rgba(0, 0, 0, .35); overflow: hidden; border: 1px solid rgba(255, 255, 255, .06);

}

.mine-meter-fill {

  display: block; height: 100%; width: 0;

  transition: width .25s ease;

}

.mine-meter--hp .mine-meter-fill {

  background:

    radial-gradient(ellipse 80% 120% at 30% 20%, rgba(255, 90, 70, 0.55), transparent 55%),

    linear-gradient(180deg, #e02028 0%, #b01018 38%, #8a0a12 62%, #4a0508 100%);

  box-shadow:

    inset 0 1px 0 rgba(255, 160, 140, 0.45),

    inset 0 -2px 4px rgba(40, 0, 0, 0.55),

    0 0 12px rgba(180, 20, 30, 0.7),

    0 0 4px rgba(220, 40, 50, 0.5);

}

.mine-meter--stab .mine-meter-fill { background: linear-gradient(90deg, #8a6a3a, #d0a45a); }

.mine-meter--stab.is-low .mine-meter-fill { background: linear-gradient(90deg, #8a3a3a, #d07050); }

.mine-meter-label {

  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;

  font-size: .72rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .8);

}

.mine-float {

  min-height: 1.2rem; margin-top: .35rem; font-weight: 700; color: #f0a080;

  opacity: 0; transform: translateY(4px);

}

.mine-float.is-in { opacity: 1; transform: translateY(0); transition: opacity .2s ease, transform .2s ease; }

.mine-haul-title { margin: 0 0 .4rem; font-size: .85rem; letter-spacing: .03em; }

.mine-haul-list {

  list-style: none; margin: 0; padding: 0; font-size: .88rem; display: grid; gap: .2rem;

  max-height: 8rem; overflow: auto;

}

.mine-hazard { margin: .65rem 0 0; font-size: .85rem; color: #e0c090; }

.mine-hazard[data-hazard="critical"] { color: #f0a080; }

.mine-hazard-k {

  display: inline-block; margin-right: .35rem; opacity: .7;

  text-transform: uppercase; font-size: .72rem; letter-spacing: .04em;

}

.mine-feed {

  min-height: 7rem; max-height: 14rem; overflow: auto; margin: 0 0 .85rem;

  padding: .65rem .75rem; border: 1px solid var(--mine-line);

  background: rgba(12, 10, 8, .55); border-radius: 4px; font-size: .9rem;

}

.mine-beat { margin: 0 0 .4rem; }

.mine-beat--round { color: var(--mine-muted); font-size: .8rem; letter-spacing: .03em; }

.mine-beat--encounter { font-weight: 600; color: #e8d4a8; }

.mine-beat.is-in { animation: mineBeatIn .35s ease; }

@keyframes mineBeatIn {

  from { opacity: 0; transform: translateY(4px); }

  to { opacity: 1; transform: none; }

}

.mine-actions--seals { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .75rem; }

.mine-soft-error {

  margin: 0 0 .5rem;

  padding: .45rem .6rem;

  color: #f0a080;

  font-size: .88rem;

  border-left: 2px solid rgba(180, 100, 70, .45);

  background: rgba(60, 30, 20, .22);

}

.mine-feed .mine-soft-error {

  position: sticky;

  top: 0;

  z-index: 2;

  backdrop-filter: blur(2px);

}

.mine-end { margin-top: .5rem; }

.mine-outcome { font-size: 1.05rem; font-weight: 600; margin: 0 0 .5rem; }

.mine-loot-reveal { display: grid; gap: .35rem; margin-bottom: .75rem; }

.mine-loot-heading {

  margin: .2rem 0 0;

  font-size: .75rem;

  letter-spacing: .04em;

  text-transform: uppercase;

  opacity: .78;

}

.mine-loot-heading--lost { color: #d0a090; }

.mine-loot-list { display: grid; gap: .25rem; }

.mine-loot-item {

  padding: .3rem .5rem; background: rgba(50, 40, 24, .55);

  border-left: 2px solid rgba(200, 160, 90, .45); font-size: .88rem; opacity: 0;

}

.mine-loot-item--lost {

  border-left-color: rgba(160, 80, 70, .55);

  color: #c9a090;

  text-decoration: line-through;

}

.mine-loot-item.is-in { opacity: 1; transition: opacity .25s ease; }

.mine-end-actions { display: flex; flex-wrap: wrap; gap: .45rem; }



/* —— Boszorkányház (act-witch) —— */

.act-witch {

  position: relative;

  isolation: isolate;

  --witch-ink: #e4d8c4;

  --witch-muted: rgba(168, 158, 140, .9);

  --witch-line: rgba(120, 140, 100, .32);

  --witch-bronze: rgba(180, 130, 70, .7);

  --witch-bronze-soft: rgba(140, 100, 50, .22);

  --witch-ready: rgba(110, 168, 120, .72);

  --witch-ready-soft: rgba(70, 130, 90, .28);

  color: var(--witch-ink);

}

.act-witch::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:

    linear-gradient(180deg, rgba(28, 36, 28, .42), rgba(10, 8, 6, .78)),

    var(--witch-bg, none) center/cover no-repeat;

  border-radius: inherit;

}

.act-witch > * { position: relative; z-index: 1; }

.witch-brew-form { gap: .85rem; }

.witch-recipe-legend {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .45rem .75rem;

  font-size: .82rem;

  margin: 0;

}

.witch-dot {

  display: inline-block;

  width: .65rem;

  height: .65rem;

  border-radius: 2px;

  vertical-align: -1px;

  margin-right: .2rem;

}

.witch-dot--learned {

  background: var(--witch-bronze);

  box-shadow: 0 0 0 1px rgba(200, 150, 80, .4);

}

.witch-dot--ready {

  background: var(--witch-ready);

  box-shadow: 0 0 0 1px rgba(140, 190, 130, .45);

}

.witch-recipe-columns {

  display: grid;

  gap: .85rem;

  grid-template-columns: 1fr;

}

@media (min-width: 900px) {

  .witch-recipe-columns {

    grid-template-columns: 1fr 1fr;

    align-items: start;

  }

}

.witch-recipe-pane {

  border: 1px solid rgba(140, 120, 90, .28);

  border-radius: 6px;

  background: rgba(8, 10, 8, .4);

  padding: .55rem .55rem .65rem;

  min-width: 0;

}

.witch-recipe-pane--feny {

  border-color: rgba(190, 160, 90, .38);

  background: linear-gradient(180deg, rgba(40, 34, 18, .35), rgba(8, 10, 8, .45));

}

.witch-recipe-pane--ej {

  border-color: rgba(90, 110, 130, .4);

  background: linear-gradient(180deg, rgba(18, 24, 36, .4), rgba(8, 8, 12, .5));

}

.witch-recipe-pane-head {

  margin: 0 0 .45rem;

  padding: 0 .15rem .4rem;

  border-bottom: 1px solid rgba(140, 120, 90, .22);

}

.witch-recipe-pane--feny .witch-recipe-pane-head {

  border-bottom-color: rgba(200, 170, 90, .28);

}

.witch-recipe-pane--ej .witch-recipe-pane-head {

  border-bottom-color: rgba(100, 120, 150, .3);

}

.witch-recipe-pane-title {

  margin: 0;

  font-size: 1rem;

  font-weight: 700;

  letter-spacing: .02em;

}

.witch-recipe-pane--feny .witch-recipe-pane-title {

  color: #e8d7a8;

}

.witch-recipe-pane--ej .witch-recipe-pane-title {

  color: #b8c8d8;

}

.witch-recipe-pane-lead {

  margin: .15rem 0 0;

  font-size: .78rem;

}

.witch-recipe-empty {

  margin: .35rem .2rem;

  font-size: .85rem;

}

.witch-recipe-list {

  display: grid;

  gap: .45rem;

  max-height: min(22rem, 48vh);

  overflow: auto;

  padding: .15rem;

}

.witch-recipe {

  display: flex;

  align-items: center;

  gap: .65rem;

  text-align: left;

  width: 100%;

  padding: .55rem .7rem;

  border: 1px solid rgba(140, 120, 90, .28);

  background: rgba(12, 14, 12, .45);

  color: inherit;

  border-radius: 4px;

  cursor: pointer;

  font: inherit;

  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;

}

.witch-recipe-main {

  display: grid;

  gap: .12rem;

  flex: 1;

  min-width: 0;

}

.witch-recipe-icon {

  flex: 0 0 auto;

  width: 40px;

  height: 40px;

  object-fit: contain;

  border-radius: 3px;

  background: rgba(0, 0, 0, .25);

  border: 1px solid rgba(140, 120, 90, .25);

}

.witch-dot--locked {

  background: rgba(120, 120, 120, .55);

  box-shadow: 0 0 0 1px rgba(100, 100, 100, .35);

}

.witch-recipe:disabled,

.witch-recipe.is-locked {

  opacity: .72;

  cursor: pointer;

}

.witch-recipe.is-locked:not(.is-selected) {

  filter: grayscale(.25);

}

.witch-brew-active {

  margin-bottom: 1rem;

}

.witch-brew-actions {

  display: flex;

  gap: .5rem;

  flex-wrap: wrap;

  align-items: center;

}

.witch-brew-primary {

  min-height: var(--touch-min, 2.5rem);

}

@media (max-width: 899px) {

  .witch-recipe-list {

    max-height: none;

  }

}

@media (pointer: coarse) {

  .inv-pop-actions .btn,

  .witch-recipe {

    min-height: var(--touch-min, 2.5rem);

  }

}

.witch-recipe.is-learned {

  border-color: rgba(190, 140, 70, .55);

  background: linear-gradient(90deg, var(--witch-bronze-soft), rgba(12, 14, 12, .4));

  color: #f0e2c8;

  box-shadow: inset 3px 0 0 var(--witch-bronze);

}

.witch-recipe.is-ready {

  border-color: rgba(120, 180, 130, .7);

  background: linear-gradient(90deg, var(--witch-ready-soft), rgba(12, 16, 12, .42));

  color: #e6f4e4;

  box-shadow: inset 3px 0 0 var(--witch-ready);

}

.witch-recipe.is-selected {

  outline: 1px solid rgba(220, 200, 150, .55);

  outline-offset: 1px;

}

.witch-recipe-name {

  font-weight: 600;

  font-size: .95rem;

}

.witch-recipe-effect {

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  font-size: .78rem;

  line-height: 1.3;

  color: rgba(200, 185, 150, .9);

  opacity: .88;

}

.witch-recipe.is-ready .witch-recipe-effect {

  color: rgba(180, 220, 175, .9);

}

.witch-recipe-meta {

  font-size: .8rem;

  color: var(--witch-muted);

}

.witch-recipe.is-learned .witch-recipe-meta {

  color: rgba(210, 180, 130, .85);

}

.witch-recipe.is-ready .witch-recipe-meta {

  color: rgba(180, 210, 175, .85);

}

.witch-recipe-detail {

  margin: .15rem 0 0;

  padding: .7rem .8rem;

  border: 1px solid var(--witch-line);

  background: rgba(10, 12, 10, .55);

  border-radius: 4px;

}

.witch-detail-head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: .75rem;

  margin-bottom: .45rem;

}

.witch-detail-title {

  margin: 0;

  font-weight: 600;

  font-size: .95rem;

}

.witch-detail-effect {

  margin: .2rem 0 0;

  font-size: .82rem;

}

.witch-detail-desc {

  margin: 0 0 .55rem;

  font-size: .82rem;

  line-height: 1.4;

}

.witch-detail-icon {

  flex: 0 0 auto;

  width: 48px;

  height: 48px;

  object-fit: contain;

  border-radius: 3px;

  background: rgba(0, 0, 0, .3);

  border: 1px solid rgba(140, 120, 90, .3);

}

.witch-mat-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: .45rem;

}

.witch-mat {

  display: grid;

  gap: .2rem;

  padding: .4rem .5rem;

  border-left: 2px solid rgba(140, 120, 90, .4);

  background: rgba(20, 18, 14, .4);

  font-size: .88rem;

}

.witch-mat.is-ok {

  border-left-color: rgba(110, 168, 120, .75);

  color: #cfe8cc;

}

.witch-mat.is-missing {

  border-left-color: rgba(180, 120, 80, .65);

  color: #e8d4b8;

}

.witch-mat-head { font-weight: 600; }

.witch-mat-hint {

  font-size: .8rem;

  color: var(--witch-muted);

  font-style: italic;

  line-height: 1.35;

}

.witch-mat-cta {

  display: inline-block;

  margin-top: .2rem;

  font-size: .8rem;

  color: #c9b07a;

  text-decoration: underline;

  text-underline-offset: 2px;

}

.witch-mat-cta:hover { color: #e6d4a8; }

.witch-detail-note { margin: .65rem 0 0; font-size: .85rem; }



/* —— C/D polish: mobil + pergamen finomhangolás (redesign nélkül) —— */

@media (max-width: 480px) {

  .atelier-bench-title { min-width: 0; }

  .atelier-scrolls--work,

  .atelier-scrolls--treasury {

    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));

  }

  .home-hero,

  .home-hero--realm {

    width: 100%;

    max-width: 100%;

    margin-left: 0;

    margin-right: 0;

  }

  .home-city-rail {

    width: 100%;

    max-width: 100%;

  }

}



.act-panel-flavor {

  font-style: italic;

  font-size: .88rem;

  margin: 0 0 .55rem;

  line-height: 1.45;

}

.treasury-form label {

  font-family: var(--font-display);

  font-size: .78rem;

  letter-spacing: .05em;

  text-transform: uppercase;

  color: rgba(232, 220, 190, 0.78);

}

.treasury-form input[type="number"] {

  min-height: 2.45rem;

  font-size: 1.02rem;

}

.treasury-quick .btn-tiny {

  border-color: rgba(180, 150, 100, 0.22);

  color: var(--muted);

  background: rgba(0, 0, 0, 0.18);

}

.treasury-quick .btn-tiny:hover {

  color: var(--ink);

  border-color: rgba(201, 168, 106, 0.4);

}



.atelier.panel {

  border-color: rgba(180, 150, 100, 0.32);

}

.atelier.panel::before,

.atelier.panel::after {

  opacity: .55;

}



@keyframes aharion-atmosphere-breathe {

  0%, 100% { opacity: .82; }

  50% { opacity: .95; }

}

@keyframes aharion-badge-glow {

  0%, 100% { box-shadow: inset 0 0 0 1px rgba(201, 168, 106, 0.28); }

  50% { box-shadow: inset 0 0 0 1px rgba(201, 168, 106, 0.48), 0 0 10px rgba(180, 130, 60, 0.12); }

}

@keyframes aharion-plate-idle {

  0%, 100% { filter: brightness(1); }

  50% { filter: brightness(1.06); }

}



.bg-atmosphere::after {

  animation: aharion-atmosphere-breathe 11s ease-in-out infinite;

}

.act-ap-badge,

.treasury-badge {

  animation: aharion-badge-glow 5.5s ease-in-out infinite;

}

.atelier-scroll-plate {

  animation: aharion-plate-idle 6.5s ease-in-out infinite;

}



@media (prefers-reduced-motion: reduce) {

  .bg-atmosphere::after,

  .act-ap-badge,

  .treasury-badge,

  .atelier-scroll-plate {

    animation: none !important;

  }

}