/* =====================================================================
   Kalandfüzet-stílus - lásd a UI-tervezési jegyzeteket a projektben.
   Ez a fájl ugyanazokat a class-neveket célozza, amiket a sablonok már
   használnak (.card, .btn, h1, table stb.) - így a sablonok HTML-jét
   nem kellett módosítani, csak ezt a fájlt és a base.html-t.
   ===================================================================== */

/* A betűtípusok WOFF-ban is elérhetők (részhalmazolva + zlib-tömörítve:
   1620 kB -> 579 kB) - a böngésző az első ismert formátumot választja,
   a TTF csak tartalék. Újragenerálás: python3 tools/build_fonts.py */
@font-face { font-family: "Celestia Antiqua"; src: url("fonts/CelestiaAntiquaStd.woff") format("woff"), url("fonts/CelestiaAntiquaStd.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; }
/* A számjegyeket (0-9) mindenhol a Celestia Antiqua SC-ből kérjük, ahol
   a normál (nem félkövér, nem dőlt) Celestia Antiqua fut - unicode-range
   szerinti betűkészlet-csere, ezért nem kell a sablonokban/CSS-ben
   külön megjelölni a számjegyeket, a böngésző automatikusan ebből a
   fájlból veszi a 0-9 glyphokat, minden mást a fenti fájlból. */
@font-face { font-family: "Celestia Antiqua"; src: url("fonts/Celestia_Antiqua_SC.woff") format("woff"), url("fonts/Celestia_Antiqua_SC.ttf") format("truetype"); font-weight: normal; font-style: normal; unicode-range: U+0030-0039; font-display: swap; }
@font-face { font-family: "Celestia Antiqua"; src: url("fonts/Celestia_Antiqua_Std_Italic.woff") format("woff"), url("fonts/Celestia_Antiqua_Std_Italic.ttf") format("truetype"); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: "Celestia Antiqua"; src: url("fonts/Celestia_Antiqua_Std_Semibold.woff") format("woff"), url("fonts/Celestia_Antiqua_Std_Semibold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Pterra"; src: url("fonts/Pterra_Regular_2.woff") format("woff"), url("fonts/Pterra_Regular_2.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "Scala Sans"; src: url("fonts/Scala_Sans_LF_Regular.woff") format("woff"), url("fonts/Scala_Sans_LF_Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "Scala Sans"; src: url("fonts/Scala_Sans_LF_Bold.woff") format("woff"), url("fonts/Scala_Sans_LF_Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Scala Sans"; src: url("fonts/Scala_Sans_LF_Regular_Italic.woff") format("woff"), url("fonts/Scala_Sans_LF_Regular_Italic.ttf") format("truetype"); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: "Vitriol"; src: url("fonts/Vitriol_Regular.woff") format("woff"), url("fonts/Vitriol_Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; }

:root {
  --ink: #1c1a17;
  --ink-soft: #47423a;
  --ink-faint: #837b6c;
  --paper: #fbfaf7;
  --rule: #1c1a17;
  --line: rgba(28, 26, 23, 0.16);

  /* Egyetlen közös skála a dísz-csík összes darabjához (fej, vonalak,
     csík) - lásd a UI-tervezési jegyzeteket: nincs felnagyítás. */
  --scale: 0.42;
  --side-w: calc(205px * var(--scale));
  --top-h: calc(120px * var(--scale));

  --fs-body: 1.02rem;
  --fs-kulcs: 0.9rem;
  --fs-alcim: 1.15rem;
  --fs-cim: 1.55rem;
  --fs-fejezetcim: clamp(2rem, 4.2vw, 3rem);
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Celestia Antiqua", Georgia, serif;
  font-size: var(--fs-body);
  line-height: 11pt;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.icon { width: 1em; height: 1em; display: inline-block; fill: currentColor; flex-shrink: 0; }

/* ---------- Felső sáv: két villa-fej + vonalak, alattuk a menüsor ---------- */
.top-rule { position: relative; height: var(--top-h); }

.top-rule__line {
  position: absolute; top: 0; height: 100%; width: 50%;
  background-repeat: repeat-x; background-position: top;
  background-size: calc(320px * var(--scale)) calc(120px * var(--scale));
}
.top-rule__line--left { left: calc(320px * var(--scale)); background-image: url("img/ornament/ornament_L_linetile.png"); background-position: top left; }
.top-rule__line--right { right: calc(320px * var(--scale)); background-image: url("img/ornament/ornament_R_linetile.png"); background-position: top right; }

.top-rule__head {
  position: absolute; top: 0; height: 100%; width: calc(320px * var(--scale));
  background-repeat: no-repeat; background-position: top;
  background-size: calc(320px * var(--scale)) calc(120px * var(--scale));
}
.top-rule__head--left { left: 0; background-image: url("img/ornament/ornament_L_head.png"); background-position: top left; }
.top-rule__head--right { right: 0; background-image: url("img/ornament/ornament_R_head.png"); background-position: top right; }

.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.nav-bar__brand {
  display: flex; align-items: center; gap: 0.5em; text-decoration: none;
  color: var(--ink); font-family: "Pterra", serif; letter-spacing: 0.1em;
  font-size: 0.78rem; text-transform: uppercase; white-space: nowrap;
}
.nav-bar__brand .icon { width: 1.4em; height: 1.4em; color: var(--ink-soft); }
.nav-bar__links { display: flex; align-items: center; gap: clamp(0.75rem, 2.5vw, 1.75rem); flex-wrap: wrap; }

.nav__link {
  display: flex; align-items: center; gap: 0.4em; text-decoration: none;
  color: var(--ink-soft); font-family: "Scala Sans", sans-serif; font-size: 0.82rem;
  letter-spacing: 0.01em; text-transform: uppercase; line-height: 1;
  white-space: nowrap; padding: 0.2em 0.1em; transition: color 0.15s ease;
}
.nav__link .icon { width: 1.05em; height: 1.05em; color: var(--ink-faint); transition: color 0.15s ease; }
.nav__link:hover, .nav__link:focus-visible { color: var(--ink); outline: none; }
.nav__link:hover .icon, .nav__link:focus-visible .icon { color: var(--ink); }
.nav__link--active { color: var(--ink); font-weight: 700; }
.nav__link--active .icon { color: var(--ink); }

/* ---------- Fő elrendezés: dísz-csík | (fej+vonal / menüsor / tartalom) | dísz-csík ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) 1fr var(--side-w); align-items: stretch; min-height: 100vh; }
.middle { min-width: 0; padding: 0 clamp(1rem, 2.5vw, 1.75rem); }

.side { position: relative; }
.side .tile {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background-repeat: repeat-y;
  background-size: calc(205px * var(--scale)) calc(300px * var(--scale));
}
.side--left .tile { background-image: url("img/ornament/ornament_L_tile.png"); background-position: top left; }
.side--right .tile { background-image: url("img/ornament/ornament_R_tile.png"); background-position: top right; }

/* ---------- Tipográfia ---------- */
h1 {
  font-family: "Pterra", serif; text-transform: uppercase; font-size: var(--fs-cim);
  letter-spacing: 0.03em; text-align: right; border-bottom: 2px solid var(--rule);
  padding-bottom: 0.3em; margin: 0 0 0.7em; font-weight: normal;
}
h2 {
  font-family: "Pterra", serif; text-transform: uppercase; font-size: var(--fs-alcim);
  letter-spacing: 0.03em; margin: 1.2em 0 0.5em; font-weight: normal;
}
h3 {
  font-family: "Pterra", serif; font-size: var(--fs-kulcs); letter-spacing: 0.02em;
  margin: 1em 0 0.35em; color: var(--ink-soft); font-weight: normal;
}

/* A karakter neve (character_view) - a "fejezetcím" különleges kiemelése */
.character-fullscreen-header h1 {
  font-family: "Vitriol", serif; font-variant-caps: small-caps; font-size: var(--fs-fejezetcim);
  text-align: right; line-height: 1.05; border-bottom: none; padding-bottom: 0; letter-spacing: 0;
}

p { margin: 0 0 11pt; }

/* ---------- Panelek ---------- */
.container { max-width: 900px; margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.25rem) 0 3rem; }
.container-wide { max-width: 1200px; }

.card {
  background: transparent; border: 1px solid var(--line); border-radius: 0;
  padding: 1.5rem 1.75rem; box-shadow: none; margin-bottom: 1.5rem;
}
.card-narrow { max-width: 480px; margin-left: auto; margin-right: auto; }

/* ---------- Űrlapok - aláhúzott mezők, nem dobozok ---------- */
form { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }

label {
  font-family: "Pterra", serif; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.72rem; color: var(--ink-soft); margin-top: 14px;
}

input, textarea, select {
  padding: 8px 4px; border: none; border-bottom: 1px solid var(--ink-faint);
  border-radius: 0; background: transparent; font-size: 0.95rem;
  font-family: "Celestia Antiqua", Georgia, serif; color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: none; border-bottom: 2px solid var(--ink); }

/* ---------- Gombok ---------- */
.btn {
  margin-top: 18px; padding: 0.6em 1.1em; border-radius: 0; border: 1.5px solid var(--ink);
  background: transparent; cursor: pointer; font-family: "Scala Sans", sans-serif; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.85rem; text-decoration: none; color: var(--ink);
  display: inline-block; text-align: center; transition: background-color 0.15s ease, color 0.15s ease;
}
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-primary:hover { background: transparent; color: var(--ink); }

.button-row { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

.muted { color: var(--ink-faint); font-size: 0.9rem; margin-top: 16px; }
.muted-link { color: var(--ink-faint); text-decoration: none; font-size: 0.9rem; margin-top: auto; }
.muted-link:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Flash üzenetek - visszafogott, monokróm, bal szegéllyel jelölve ---------- */
.flash-container { margin-bottom: 20px; }
.flash {
  padding: 0.7em 1em; border-left: 3px solid var(--ink); margin-bottom: 8px;
  font-size: 0.92rem; font-family: "Scala Sans", sans-serif; background: rgba(28,26,23,0.03);
}
.flash-success { border-left-color: #2f5c3f; }
.flash-danger { border-left-color: #7a2a22; }
.flash-info { border-left-color: var(--ink-faint); }

/* ---------- Karakterek --- */
.characters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid var(--rule); padding-bottom: 0.3em; }
.characters-header h1 { margin: 0; border-bottom: none; padding-bottom: 0; }

.add-character-btn {
  width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink);
  color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  line-height: 1; text-decoration: none; box-shadow: none; transition: background-color 0.15s ease, color 0.15s ease;
}
.add-character-btn:hover { background: var(--ink); color: var(--paper); }

/* ---------- Karaktereim lista - négyhasábos rács: táblázat (1-2. hasáb),
   sorra kattintva a 3. hasábban a "szörnyek könyve"-szerű kivonat, a 4.
   hasábban a műveletek (mindig: új karakter; kiválasztva: megtekintés/
   folytatás + törlés) jelennek meg - lásd game_sessions.html analóg
   mintáját (.session-layout). ---------- */
.character-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1.75rem; align-items: start; }
.character-table-col { grid-column: 1 / 3; min-width: 0; }

/* ---------- Egységes "adattáblázat" sablon ----------
   Ezt használja minden kattintható/interaktív táblázat: karakterek,
   játékalkalmak, az 1. lépés tulajdonság-, faj- és kaszttáblázata, és a
   3. lépés szakértelem-táblázata is ezt a vizuális nyelvet követi. Az
   interaktív elemek (gombok, kattintható táblázatok) és a hozzájuk
   tartozó szöveg mindig Scala Sansszal íródnak, nem a Celestia Antiquával. */
.data-table { width: 100%; border-collapse: collapse; font-family: "Scala Sans", sans-serif; font-size: var(--fs-body); }
.data-table th {
  text-align: left; vertical-align: bottom; font-weight: 700; font-family: "Scala Sans", sans-serif;
  padding: 0.3em 0.6em; border: none; line-height: 11pt;
}
.data-table td { text-align: left; vertical-align: top; padding: 0.25em 0.6em; border: none; line-height: 11pt; }
.data-table tbody tr:nth-child(odd) { background: rgba(28, 26, 23, 0.09); }
.data-table tbody tr.is-clickable { cursor: pointer; }
.data-table tbody tr.is-clickable:hover { background: rgba(28, 26, 23, 0.1); }
.data-table tbody tr.is-selected { background: rgba(28, 26, 23, 0.2); }
.data-table tbody tr.is-dragover { background: rgba(28, 26, 23, 0.1); }
.data-table tbody tr.is-clickable:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.character-detail { display: none; grid-column: 3 / 4; }
.character-detail.is-active { display: block; }

.character-actions-col { grid-column: 4 / 5; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.new-character-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.55em 1em; border-radius: 0; border: 1.5px solid var(--ink);
  background: var(--paper); color: var(--ink); text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.new-character-btn:hover { background: var(--ink); color: var(--paper); }
.new-character-btn .icon { width: 1.3em; height: 1.3em; }
.new-character-btn__plus { font-family: "Scala Sans", sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1; }

.character-actions { display: none; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.character-actions.is-active { display: flex; }
.character-actions form { margin-top: 0; }
.btn-danger-outline { border-color: #7a2a22; color: #7a2a22; }
.btn-danger-outline:hover { background: #7a2a22; color: var(--paper); }

/* "Szörnyek könyve"-szerű bejegyzés: nincs doboz/rács, csak folyó
   szöveg, a "*label:*" mintát a félkövér <strong> adja vissza, a
   fejléc két sora (név+kaszt, méret+faj) pedig teljes egészében
   félkövér. */
.statblock { font-family: "Celestia Antiqua", Georgia, serif; font-size: var(--fs-body); }
.statblock p { margin: 0 0 0.4em; line-height: 11pt; }
.statblock-header { font-weight: 700; margin-bottom: 2px; }
.statblock-header--sub { margin-bottom: 0.6em; }
.statblock strong { font-weight: 700; }

.character-fullscreen { min-height: calc(100vh - 160px); display: flex; flex-direction: column; }
.character-fullscreen-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; flex-wrap: wrap; gap: 0.5rem; }

/* Karakter-statisztikák - NINCS szegély, háttér vagy dobozolás, a
   törzsszöveggel egyező betűvel, egyszerű sorokban (lásd a
   tervezési jegyzetek "Kalandtáblázat" szakaszát). */
.character-stats { display: flex; flex-wrap: wrap; gap: 0 2rem; margin-bottom: 1.5rem; font-family: "Celestia Antiqua", Georgia, serif; }
.character-stat { background: transparent; border-radius: 0; padding: 0; box-shadow: none; min-width: 0; }
.character-stat-label { display: inline; font-size: inherit; color: var(--ink); text-transform: none; letter-spacing: normal; margin-bottom: 0; font-weight: 600; }
.character-stat-label::after { content: ": "; }
.character-stat-value { display: inline; font-size: inherit; font-weight: normal; }

/* ---------- Badge-ek - monokróm, keret jelöli az állapotot ---------- */
.badge {
  display: inline-block; padding: 0.15em 0.6em; border-radius: 0; font-size: 0.72rem;
  font-family: "Pterra", serif; text-transform: uppercase; letter-spacing: 0.03em;
  background: transparent; color: var(--ink-soft); border: 1px solid var(--line);
}
.badge-confirmed { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.badge-waitlist { border-style: dashed; }
.badge-danger { border-color: #7a2a22; color: #7a2a22; }
#spent-total.is-over-budget { color: #7a2a22; font-weight: 700; }

/* ---------- Játékalkalmak lista - négyhasábos rács: táblázat (1-2. hasáb),
   sorra kattintva a jelentkezés (3.) és a beszélgetés (4.) jelenik meg ---------- */
.session-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1.75rem; align-items: start; }
.session-table-col { grid-column: 1 / 3; min-width: 0; }
.session-row-icon { margin-left: 0.5em; width: 0.95em; height: 0.95em; color: var(--ink-faint); vertical-align: middle; }

.session-detail { display: none; }
.session-detail-signup { grid-column: 3 / 4; }
.session-detail-comments { grid-column: 4 / 5; }
.session-detail.is-active { display: block; }

.session-description { white-space: pre-wrap; }
.role-description { margin-top: 4px; font-size: 0.82rem; }

/* ---------- Jelentkezési listák ---------- */
.signup-lists { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 18px; }
.plain-list { list-style: none; padding: 0; margin: 8px 0 0; }
.plain-list li { padding: 4px 0; font-size: 0.92rem; border-bottom: 1px dotted var(--line); }

/* ---------- Fórum / kommentek - nincs doboz, aláhúzott küldő-sor ---------- */
.comment-composer { display: flex; flex-direction: row; align-items: baseline; gap: 0.5em; margin: 0 0 1.25rem; flex-wrap: nowrap; }
.comment-composer__label { margin: 0; white-space: nowrap; font-family: "Celestia Antiqua"; text-transform: none; letter-spacing: normal; font-size: inherit; color: var(--ink); font-weight: 600; }
.comment-composer__input {
  flex: 1; min-width: 0; border: none; border-bottom: 1px solid var(--ink-faint); background: transparent;
  padding: 0 0 2px; font-family: "Celestia Antiqua", Georgia, serif; font-size: var(--fs-body); color: var(--ink);
}
.comment-composer__input:focus { outline: none; border-bottom: 2px solid var(--ink); }
.comment-composer__send {
  flex-shrink: 0; border: none; background: none; cursor: pointer; padding: 0 2px; color: var(--ink);
  display: flex; align-items: center;
}
.comment-composer__send .icon { width: 1.2em; height: 1.2em; }
.comment-composer__send:hover { color: var(--ink-soft); }

.comment-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.comment { margin: 0 0 0.6em; line-height: 11pt; }
.comment-author { font-weight: 600; }
.comment-text { white-space: pre-wrap; }

@media (max-width: 860px) {
  .session-layout { grid-template-columns: 1fr; }
  .session-table-col, .session-detail-signup, .session-detail-comments { grid-column: 1; }
  .session-table th:nth-child(3), .session-table td:nth-child(3) { display: none; }

  .character-layout { grid-template-columns: 1fr; }
  .character-table-col, .character-detail, .character-actions-col { grid-column: 1; }
  .character-table th:nth-child(3), .character-table td:nth-child(3),
  .character-table th:nth-child(5), .character-table td:nth-child(5) { display: none; }
  .character-actions-col { flex-direction: column; }
}

/* ---------- Admin táblázat ---------- */
.admin-table-wrapper { background: transparent; border: 1px solid var(--line); border-radius: 0; box-shadow: none; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-family: "Scala Sans", sans-serif; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.admin-table th { color: var(--ink-soft); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-family: "Pterra", serif; }
.admin-table tr:last-child td { border-bottom: none; }

/* ---------- Karakteralkotó varázsló ---------- */
.wizard-nav { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
.wizard-step {
  display: flex; align-items: center; gap: 6px; padding: 0.5em 0.8em; border-radius: 0;
  background: transparent; color: var(--ink-faint); text-decoration: none; font-size: 0.78rem;
  font-family: "Scala Sans", sans-serif; text-transform: uppercase; letter-spacing: 0.02em;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.wizard-step-number {
  width: 1.3em; height: 1.3em; border-radius: 50%; background: transparent; border: 1px solid var(--ink-faint);
  color: var(--ink-faint); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700;
}
.wizard-step-active { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.wizard-step-active .wizard-step-number { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.wizard-step-done .wizard-step-number { border-color: var(--ink); color: var(--ink); }
.wizard-step-locked { opacity: 0.4; cursor: not-allowed; }

.rolled-value-inline {
  font-family: "Scala Sans", sans-serif; font-weight: 700; cursor: grab; user-select: none;
}
.rolled-value-inline.is-used { opacity: 0.35; text-decoration: line-through; }

.ability-table, .feat-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-family: "Scala Sans", sans-serif; }
.ability-table th, .ability-table td, .feat-table th, .feat-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 0.9rem;
}
.ability-table th, .feat-table th { color: var(--ink-soft); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; font-family: "Pterra", serif; }
.ability-final { font-weight: 700; }

.wizard-abandon { max-width: 480px; margin: 0 auto; }

/* ---------- 1. lépés: faj/kaszt/tulajdonságok összevont űrlapja ---------- */
.wizard-step1-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1.75rem; align-items: start; margin-top: 1rem; }
.wizard-step1-abilities { grid-column: 1 / 3; min-width: 0; }
.wizard-step1-race { grid-column: 3 / 4; }
.wizard-step1-class { grid-column: 4 / 5; }

/* Az 1. lépés tulajdonság-táblázata az egységes .data-table sablont
   használja - a húzás célpontja maga a sor, nincs külön "doboz". */
.ability-assign-table tbody tr[data-ability-row] { cursor: grab; }
.ability-assign-table tbody tr.is-filled .ability-value-display { font-weight: 400; }
.ability-total { font-weight: 400; }
.ability-value-cell { position: relative; }
.ability-assign-select { display: none; }

/* Faj- és kaszttáblázat - ugyanaz a .data-table sablon, a rádiógomb
   vizuálisan rejtett, a teljes sor kattintható. */
/* Sorra kattintással választható táblázatok: a rádiógomb csak az
   űrlap miatt kell, látszania nem szabad - a kijelölést a sor
   kiemelése mutatja. Korábban ez a szabály csak a faj- és
   kaszt-táblázatra vonatkozott, ezért egy új (fejlesztés-lépés)
   táblázatban kilógtak a karikák. */
.hidden-radio { position: absolute; opacity: 0; pointer-events: none; }

.option-description-panel p { margin: 0 0 0.4em; font-size: 0.9rem; line-height: 11pt; font-family: "Celestia Antiqua", Georgia, serif; }

@media (max-width: 860px) {
  .wizard-step1-layout { grid-template-columns: 1fr; }
  .wizard-step1-abilities, .wizard-step1-race, .wizard-step1-class { grid-column: 1; margin-bottom: 1.5rem; }
  .ability-value-display { display: none; }
  .ability-assign-select { display: block; }
}

.skill-points-input { width: 3.2em; padding: 4px 4px; border: none; background: transparent; font-size: 0.9rem; font-family: "Scala Sans", sans-serif; }
/* A natív szám-nyilak "megduplázzák" a sor magasságát - inkább elrejtjük
   őket, gépeléssel továbbra is módosítható az érték. */
.skill-points-input::-webkit-inner-spin-button, .skill-points-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.skill-points-input { -moz-appearance: textfield; appearance: textfield; }

/* ---------- 3. lépés: szakértelmek - négyhasábos rács a többi lépéshez
   hasonlóan: táblázat (1-2. hasáb), leírás (3. hasáb), új mesterség/
   szakma/ismeret felvétele (4. hasáb). ---------- */
.step3-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1.75rem; align-items: start; margin-top: 1rem; }
.step3-table-col { grid-column: 1 / 3; min-width: 0; }
.skill-table { table-layout: fixed; }
.skill-table th, .skill-table td { overflow-wrap: break-word; padding-left: 0.4em; padding-right: 0.4em; }
.skill-table th:nth-child(1), .skill-table td:nth-child(1) { width: 34%; }
.skill-table th:nth-child(2), .skill-table td:nth-child(2) { width: 17%; }
.skill-table th:nth-child(3), .skill-table td:nth-child(3) { width: 22%; }
.skill-table th:nth-child(4), .skill-table td:nth-child(4) { width: 10%; }
.skill-table th:nth-child(5), .skill-table td:nth-child(5) { width: 17%; }
.step3-detail-col { grid-column: 3 / 4; min-width: 0; }
.step3-actions-col { grid-column: 4 / 5; min-width: 0; }

/* Egyszerű, dísz és felirat nélküli "add hozzá a listához" mező -
   mesterség/szakma/helyi ismeret felvételéhez egyaránt, elválasztó vonal
   és blokk-keret nélkül, csak természetes bekezdés-távolsággal egymás
   alatt. */
.quick-add-form { display: flex; align-items: baseline; gap: 0.5em; margin: 0 0 0.9rem; flex-wrap: nowrap; }
.quick-add-form__input {
  flex: 1; min-width: 0; max-width: 100%; border: none; border-bottom: 1px solid var(--ink-faint); background: transparent;
  padding: 0 0 2px; font-family: "Celestia Antiqua", Georgia, serif; font-size: var(--fs-body); color: var(--ink);
}
.quick-add-form__input:focus { outline: none; border-bottom: 2px solid var(--ink); }
.quick-add-form__send {
  flex-shrink: 0; border: none; background: none; cursor: pointer; padding: 0 2px; color: var(--ink);
  display: flex; align-items: center;
}
.quick-add-form__send .icon { width: 1.2em; height: 1.2em; }
.quick-add-form__send:hover { color: var(--ink-soft); }

.skill-detail-panel p { margin: 0 0 0.4em; font-size: 0.9rem; line-height: 11pt; font-family: "Celestia Antiqua", Georgia, serif; }
.skill-detail-panel .statblock-header {
  font-family: "Pterra", serif; text-transform: uppercase; font-size: var(--fs-alcim);
  letter-spacing: 0.03em; font-weight: normal; margin: 0 0 0.5em;
}
.skill-detail-points { display: flex; align-items: baseline; gap: 0.5em; }
.skill-detail-points label { font-family: "Celestia Antiqua", Georgia, serif; }
.skill-detail-points-input {
  width: 3.6em; padding: 2px 4px; border: none; border-bottom: 1px solid var(--ink-faint); background: transparent;
  font-family: "Scala Sans", sans-serif; font-size: 0.95rem; color: var(--ink);
}
.skill-detail-points-input:focus { outline: none; border-bottom: 2px solid var(--ink); }

/* ---------- 4. lépés: képességek - négyhasábos rács: táblázat (1-2.
   hasáb), leírás/felvétel (3. hasáb), már megszerzett képességek (4.
   hasáb). ---------- */
.step4-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1.75rem; align-items: start; margin-top: 1rem; }
.step4-table-col { grid-column: 1 / 3; min-width: 0; }
.step4-detail-col { grid-column: 3 / 4; min-width: 0; }
.step4-actions-col { grid-column: 4 / 5; min-width: 0; }
.feat-choice-table th:nth-child(1), .feat-choice-table td:nth-child(1) { width: 55%; }
.feat-choice-table th:nth-child(2), .feat-choice-table td:nth-child(2) { width: 45%; }

@media (max-width: 860px) {
  .step4-layout { grid-template-columns: 1fr; }
  .step4-table-col, .step4-detail-col, .step4-actions-col { grid-column: 1; margin-bottom: 1.5rem; }
}

/* ---------- 2. lépés: karakter jellemzők - négyhasábos rács:
   istentáblázat (1-2. hasáb), személyes adatok/jellem/nyelvek (3. hasáb),
   kaszt-specifikus jellemzők (4. hasáb). ---------- */
.step2-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1.75rem; align-items: start; margin-top: 1rem; }
.step2-table-col { grid-column: 1 / 3; min-width: 0; }
.step2-info-col { grid-column: 3 / 4; min-width: 0; }
.step2-features-col { grid-column: 4 / 5; min-width: 0; }
.step2-info-col .comment-composer, .step2-features-col .comment-composer { margin-bottom: 1rem; }
.deity-table, .alignment-table, .language-table { margin-bottom: 1rem; }

@media (max-width: 860px) {
  .step2-layout { grid-template-columns: 1fr; }
  .step2-table-col, .step2-info-col, .step2-features-col { grid-column: 1; margin-bottom: 1.5rem; }
}

@media (max-width: 860px) {
  .step3-layout { grid-template-columns: 1fr; }
  .step3-table-col, .step3-detail-col, .step3-actions-col { grid-column: 1; margin-bottom: 1.5rem; }
}
.skill-section-row td { background: transparent; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); font-family: "Pterra", serif; border-bottom: 1px solid var(--ink); }

.btn-remove { margin-left: 8px; border: none; background: none; color: var(--ink-faint); cursor: pointer; font-size: 0.9rem; padding: 2px 6px; }
.btn-remove:hover { color: #7a2a22; }

.knowledge-add-forms { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.knowledge-add-form { display: flex; align-items: center; gap: 8px; }
.knowledge-add-form select { min-width: 220px; }
.knowledge-add-form input[type="text"] { min-width: 220px; padding: 8px 4px; border: none; border-bottom: 1px solid var(--ink-faint); background: transparent; font-size: 0.95rem; }

/* ---------- Képességek (feat-ek) ---------- */
.feat-taken-list { list-style: none; padding: 0; margin: 10px 0 0; }
.feat-taken-list li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dotted var(--line); font-size: 0.92rem; }
.feat-row-disabled { opacity: 0.4; }
.feat-add-form { display: flex; align-items: center; gap: 8px; }
.feat-add-form select { min-width: 160px; padding: 4px 4px; font-size: 0.85rem; }

.inline-form { display: inline; }

.language-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; margin: 12px 0; }
.language-option { display: flex; align-items: center; gap: 6px; font-size: 0.92rem; font-family: "Scala Sans", sans-serif; }

.specialization-form { display: flex; flex-direction: column; gap: 4px; max-width: 360px; }

/* ---------- 5. lépés: felszerelés - négyhasábos rács: lenyitható
   kategória-táblázatok (1-2. hasáb), aranyösszeg + vásárlási panel
   (3. hasáb), megvásárolt tárgyak + megterheltség (4. hasáb). ---------- */
.step5-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1.75rem; align-items: start; margin-top: 1rem; }
.step5-catalog-col { grid-column: 1 / 3; min-width: 0; }
.step5-detail-col { grid-column: 3 / 4; min-width: 0; }
.step5-actions-col { grid-column: 4 / 5; min-width: 0; }

.equip-category { margin-bottom: 0.4rem; }
.equip-category__toggle {
  display: flex; align-items: center; gap: 0.6em; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--ink); cursor: pointer;
  padding: 0.45em 0; font-family: "Pterra", serif; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: var(--fs-alcim); color: var(--ink);
}
.equip-category__toggle:hover { color: var(--ink-soft); }
/* Az Adventure.ttf-ben nincs nyíl-glyph, így ehhez az egyetlen "hegyes"
   ikont (icon-trap) használjuk nyílként: alapból (csukva) vízszintesen
   tükrözve mutat "nyitásra", nyitáskor pedig 90°-kal elfordul. */
.equip-category__icon { width: 0.9em; height: 0.9em; flex-shrink: 0; transform: scaleX(-1); transition: transform 0.15s ease; }
.equip-category__toggle[aria-expanded="true"] .equip-category__icon { transform: scaleX(-1) rotate(90deg); }
.equip-category__table { margin: 0.5em 0 1.1rem; }
.equip-category__table-wrapper { overflow-x: auto; }
.equip-category__table--compact th, .equip-category__table--compact td { padding: 4px 8px; white-space: nowrap; }
.equip-category__table--compact th:first-child, .equip-category__table--compact td:first-child { white-space: normal; }

.step5-gold-status { margin-bottom: 1rem; }
.item-purchase-form { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 0.5em; margin: 0.6em 0 0.2em; }
.item-purchase-form select { font-family: "Scala Sans", sans-serif; }

@media (max-width: 860px) {
  .step5-layout { grid-template-columns: 1fr; }
  .step5-catalog-col, .step5-detail-col, .step5-actions-col { grid-column: 1; margin-bottom: 1.5rem; }
}

/* ---------- 6. lépés: Összegzés - négyhasábos rács: karakter-kivonat,
   varázslat-előkészítés, felszerelés-helyek (húzd-és-ejtsd cél),
   birtokolt tárgyak (húzható lista). ---------- */
.step6-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1.75rem; align-items: start; margin-top: 1rem; margin-bottom: 2rem; }
.step6-stats-col, .step6-spells-col, .step6-slots-col, .step6-items-col { min-width: 0; }

.equip-slot {
  border: 1px dashed var(--line); padding: 0.6em 0.75em; margin-bottom: 0.75rem; transition: background-color 0.15s ease;
}
.equip-slot p { margin: 0 0 0.3em; }
.equip-slot.is-dragover { background-color: var(--paper-highlight, rgba(0, 0, 0, 0.04)); }
.equip-slot__mobile-select { display: none; margin-top: 0.4em; width: 100%; font-family: "Scala Sans", sans-serif; }

@media (max-width: 860px) {
  .step6-layout { grid-template-columns: 1fr; }
  .step6-stats-col, .step6-spells-col, .step6-slots-col, .step6-items-col { grid-column: 1; margin-bottom: 1.5rem; }
  .equip-item-row { cursor: default; }
  .equip-slot__mobile-select { display: block; }
}

/* ---------- Mobil elrendezés ---------- */
.mobile-topbar { display: none; }
.mobile-nav { display: none; }

@media (max-width: 860px) {
  .top-rule { display: none; }
  .nav-bar { display: none; }
  .mobile-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.85rem 1.1rem; background-image: url("img/ornament/ornament_R_linetile.png");
    background-repeat: repeat-x; background-position: bottom center; background-size: auto 48px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-topbar__brand { display: flex; align-items: center; gap: 0.5em; text-decoration: none; color: var(--ink); font-family: "Pterra", serif; letter-spacing: 0.1em; font-size: 0.95rem; }
  .mobile-topbar__brand .icon { width: 1.5em; height: 1.5em; }
  .mobile-topbar__toggle { border: 1.5px solid var(--ink); background: none; width: 2.4em; height: 2.4em; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .mobile-topbar__toggle .icon { width: 1.3em; height: 1.3em; }

  .mobile-nav { display: none; flex-wrap: wrap; gap: 0.4rem; padding: 0.75rem 1.1rem 1.1rem; border-bottom: 1px solid var(--line); }
  .mobile-nav.is-open { display: flex; }
  .mobile-nav a { display: flex; align-items: center; gap: 0.5em; text-decoration: none; color: var(--ink-soft); font-family: "Pterra", serif; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.55em 0.8em; border: 1px solid var(--line); }
  .mobile-nav a .icon { width: 1.3em; height: 1.3em; color: var(--ink-faint); }

  .shell { grid-template-columns: 1fr; min-height: 0; }
  .side { display: none; }
  .middle { padding: 0; }
  .container { padding: 1.5rem 1.25rem 3rem; }
  h1, .character-fullscreen-header h1 { text-align: left; }
  :root { --fs-fejezetcim: clamp(1.8rem, 8vw, 2.4rem); }
  .character-grid { grid-template-columns: 1fr 1fr; }
}

a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Adatvesztésre figyelmeztető panel (varázsló 1. lépés) ---------- */
/* Nem "doboz" a modern értelemben: a kalandmodulok bekeretezett
   figyelmeztető bekezdéseit követi - vastag felső/alsó vonal, tintaszín. */
.reset-warning {
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  padding: 0.8rem 0;
  margin: 1rem 0 1.4rem;
}
.reset-warning__title {
  font-family: "Pterra", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-alcim);
  margin: 0 0 0.4rem;
}
.reset-warning p { margin: 0 0 0.5rem; }
.reset-warning ul { margin: 0 0 0.8rem 1.2rem; }
.reset-warning li { font-family: "Scala Sans", sans-serif; font-size: var(--fs-kulcs); }
.reset-warning .button-row { margin-top: 0.6rem; }

/* Táblázat alatti lábjegyzet (pl. "egyelőre nem választható" kasztok) */
.table-footnote {
  font-family: "Scala Sans", sans-serif;
  font-size: 0.8rem;
  margin-top: 0.35rem;
}

/* A varázsló-lépések visszajelzése egérrel és billentyűzetről. Korábban
   nem volt ilyen szabály: a lépések teljesen élettelennek látszottak,
   különösen amíg az aktív lépés kijelölése is hibás volt. */
.wizard-step:hover,
.wizard-step:focus-visible {
  color: var(--ink);
  background: var(--paper-shade, rgba(0, 0, 0, 0.04));
}
.wizard-step:hover .wizard-step-number,
.wizard-step:focus-visible .wizard-step-number {
  border-color: var(--ink);
  color: var(--ink);
}
.wizard-step-active:hover,
.wizard-step-active:focus-visible { background: transparent; }

/* Kihagyott varázsló-lépés (a fejlesztésnél a 2-4.): látszik, de nem
   kattintható - a halványítás jelzi, hogy nem hiba, hanem szándék. */
.wizard-step-skipped { opacity: 0.45; cursor: default; }
.data-table tr.is-disabled { opacity: 0.5; cursor: default; }

/* A szakértelem-táblázat többkasztúnál egy oszloppal bővül (Max. szint).
   A hasáb szélessége nem nő, ezért az OSZLOPSZÉLESSÉGEKET osztjuk újra -
   a betűméret és a belső margó mindenhol változatlan marad. A hat oszlop
   összege pontosan 100%. */
.skill-table--wide th:nth-child(1), .skill-table--wide td:nth-child(1) { width: 30%; }
.skill-table--wide th:nth-child(2), .skill-table--wide td:nth-child(2) { width: 13%; }
.skill-table--wide th:nth-child(3), .skill-table--wide td:nth-child(3) { width: 18%; }
.skill-table--wide th:nth-child(4), .skill-table--wide td:nth-child(4) { width: 13%; }
.skill-table--wide th:nth-child(5), .skill-table--wide td:nth-child(5) { width: 10%; }
.skill-table--wide th:nth-child(6), .skill-table--wide td:nth-child(6) { width: 16%; }

/* Szerkeszthető szám a szövegben (fejlesztés 2. lépése: életkor, magasság).
   Addig úgy néz ki, mint a körülötte lévő szöveg, csak alá van húzva és
   mutató kezet ad - kattintásra írható. */
.inline-number-form { display: inline; }
.inline-number {
  font: inherit; color: inherit; background: transparent;
  border: none; border-bottom: 1px solid currentColor;
  width: 4.5em; padding: 0 2px; text-align: right;
  cursor: pointer; font-weight: 700;
}
.inline-number:hover { background: rgba(0, 0, 0, 0.05); }
.inline-number:focus { cursor: text; outline: none; border-bottom-width: 2px; }