/* Rise of Empire II - wiki online. v3 (16.10.2026 seara, Filip: "less AI, more natural"): ramele sint ale JOCULUI, nu
   desenate in CSS - static/ui/ (extrag_ui.py din pack-urile publicate): board.png = rama ferestrei (ui.Board, 9 felii de
   32), titlebar.png = bara de titlu rosie ROE (23 px), hbar.png = HorizontalBar (titlurile de sectiune), thin.png =
   ThinBoard (tooltip-urile), slot.png = slotul octogonal. Peste pictura site-ului (bg-sakura.jpg), sub un voal.
   Culorile textului = ale tooltip-ului din joc (uitooltip.py). Doar tema inchisa, ca site-ul si ca jocul. */
@font-face { font-family: "Albertus Nova"; src: url("/fonts/AlbertusNova.woff2") format("woff2"); font-display: swap; }

:root {
  --bg: #0a0e14;
  --line: rgba(229, 182, 107, 0.16);
  --line-2: rgba(229, 182, 107, 0.34);
  --gold: #e5b66b;
  --gold-2: #fbbf24;
  --gold-hi: #f6dca2;
  --gold-brd: #6b4e22;
  --wood-1: #3a2c19;
  --wood-2: #241a10;
  --wood-3: #150f09;
  --parch: #e8cfa0;
  --text: #c9c6bf;
  --text-hi: #f2e7c1;
  --muted: #8f8a80;
  --link: #e5b66b;
  --tt-title: #f2e7c1;
  --tt-special: #ffc800;
  --tt-normal: #c2c2c2;
  --tt-pos: #8ab98e;
  --tt-pos-2: #b0dfb4;
  --tt-neg: #e57976;
  --tt-price: #ffb96d;
  --tt-cond: #beb47d;
  --head: "Albertus Nova", "Cinzel", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --game: Tahoma, Verdana, "Segoe UI", sans-serif;
  --ui: /wiki/static/ui;
  --veil: linear-gradient(180deg, rgba(8, 11, 16, 0.66) 0%, rgba(8, 11, 16, 0.84) 50%, rgba(8, 11, 16, 0.93) 100%);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before { z-index: -2; background: #0a0e14 url("/uploads/theme/bg-sakura.jpg") 62% 18% / cover no-repeat; }
body::after { z-index: -1; background: var(--veil); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 400; line-height: 1.25; text-wrap: balance; margin: 0 0 .5em; color: var(--text-hi); }
h1 { font-size: 30px; letter-spacing: .3px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8); }
h3 { font-size: 17px; margin-top: 1.3em; }
p { margin: 0 0 .9em; max-width: 75ch; }
.num, td.num { font-variant-numeric: tabular-nums; }

/* ---------- bara de sus (aceleasi legaturi ca site-ul) ---------- */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; height: 62px; padding: 0 20px;
  background: rgba(10, 13, 18, 0.96); border-bottom: 1px solid rgba(229, 182, 107, 0.35); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.top .brand { display: flex; align-items: center; gap: 10px; color: var(--text-hi); font-family: var(--head); font-size: 17px; white-space: nowrap; }
.top .brand:hover { text-decoration: none; }
.top .brand img { width: 42px; height: 42px; }
.top .brand small { color: var(--gold); font-size: 11.5px; letter-spacing: 3px; text-transform: uppercase; display: block; line-height: 1.1; }
.top nav { display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.top nav a { font-family: var(--head); font-size: 13.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #c6bca2; padding: 8px 11px; white-space: nowrap; border-bottom: 2px solid transparent; }
.top nav a:hover { color: var(--gold-hi); text-decoration: none; }
.top nav a.on { color: var(--gold); border-bottom-color: #8a1a12; }
.top .grow { flex: 1; }
.search { position: relative; width: 300px; }
.search input {
  width: 100%; height: 34px; padding: 0 34px 0 12px; background: #0c0b0a; color: var(--text-hi);
  border: 1px solid #4a4038; font: 14px var(--body); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}
.search input:focus { border-color: var(--gold); outline: none; }
.search input::placeholder { color: var(--muted); }
.search kbd { position: absolute; right: 8px; top: 8px; font: 11px var(--body); color: var(--muted); border: 1px solid #4a4038; padding: 0 5px; }
.search .res {
  position: absolute; top: 40px; left: 0; right: 0; max-height: 60vh; overflow-y: auto; display: none;
  border: 16px solid transparent; border-image: url("/wiki/static/ui/thin.png") 16 / 16px round; background: rgba(0, 0, 0, 0.88); background-clip: padding-box;
  margin: -8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.search .res.open { display: block; }
.search .res a { display: flex; align-items: center; gap: 10px; padding: 5px 8px; color: var(--text); }
.search .res a:hover, .search .res a.sel { background: rgba(139, 26, 18, 0.45); text-decoration: none; color: var(--text-hi); }
.search .res img { width: 24px; height: 24px; object-fit: contain; }
.search .res .k { margin-left: auto; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.lang select { height: 34px; background: #0c0b0a; color: var(--text-hi); border: 1px solid #4a4038; padding: 0 8px; font: 13px var(--body); }
.menu-btn { display: none; background: #0c0b0a; border: 1px solid #4a4038; color: var(--gold); height: 34px; width: 38px; font-size: 18px; cursor: pointer; }

/* ---------- ferestrele: rama Board din joc + bara de titlu rosie ---------- */
.wrap { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 14px; max-width: 1420px; margin: 0 auto; padding: 18px 16px 34px; align-items: start; }
.side, main {
  border: 32px solid transparent; border-image: url("/wiki/static/ui/board.png") 32 fill / 32px round;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
}
/* bara de titlu sta ca in joc: la 7 px de sus si 8 px din stinga ramei, latimea = fereastra - 15 */
.winbar {
  display: block; height: 23px; margin: -25px -35px 16px -34px; padding: 0 26px; overflow: hidden;
  border-image: url("/wiki/static/ui/titlebar.png") 0 32 fill / 0 32px stretch;
  font: bold 13px/23px var(--game); color: #f0e6d0; text-align: center; letter-spacing: .3px; white-space: nowrap; text-overflow: ellipsis;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000;
}
.side { position: sticky; top: 80px; padding: 0; }
.side .winbar { margin: -25px -25px 10px -24px; }
/* derularea sta inauntru, ca bara de titlu (care iese in rama) sa nu fie taiata */
.side-in { max-height: calc(100vh - 160px); overflow-y: auto; padding: 0 2px 4px 0; scrollbar-width: thin; scrollbar-color: #4a4038 transparent; }
/* titlurile de grup = HorizontalBar din joc */
.side h4, .hb {
  height: 26px; margin: 12px -6px 6px; padding: 0 12px; overflow: hidden;
  border-image: url("/wiki/static/ui/hbar.png") 3 32 3 32 fill / 3px 32px round;
  font: bold 12.5px/26px var(--game); color: #f2e2b6; letter-spacing: .4px; text-shadow: 1px 1px 0 #000;
}
.side h4:first-of-type { margin-top: 0; }
.side a { display: flex; align-items: center; gap: 8px; padding: 3px 8px; color: var(--text); font-size: 14px; border-left: 2px solid transparent; }
.side a .c { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.side a:hover { background: rgba(255, 255, 255, 0.04); text-decoration: none; color: var(--text-hi); }
.side a.on { background: rgba(139, 26, 18, 0.35); color: #fff3d6; border-left-color: #c0392b; }
.side img { width: 20px; height: 20px; object-fit: contain; }
main { padding: 0 10px 36px; min-width: 0; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--gold); }
.crumbs span { margin: 0 6px; opacity: .6; }
.lead { color: var(--text); font-size: 16px; max-width: 75ch; }
/* titlu de sectiune: banda HorizontalBar pe toata latimea, textul in stinga */
h2 {
  height: 30px; margin: 1.8em -6px .8em; padding: 0 14px; overflow: hidden;
  border-image: url("/wiki/static/ui/hbar.png") 3 32 3 32 fill / 3px 32px round;
  font: 400 17px/30px var(--head); color: #f2e2b6; letter-spacing: .3px; text-shadow: 1px 1px 0 #000;
}

/* ---------- casute (rama subtire a tooltip-urilor din joc) ---------- */
.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tile, .cat-tile, .gcard {
  border: 16px solid transparent; border-image: url("/wiki/static/ui/thin.png") 16 / 16px round;
  background: rgba(0, 0, 0, 0.5); background-clip: padding-box; color: var(--text-hi);
}
.tile { display: flex; align-items: center; gap: 12px; padding: 0 2px; }
.tile:hover, .cat-tile:hover, .gcard:hover { background-color: rgba(139, 26, 18, 0.3); text-decoration: none; color: #fff3d6; }
.tile img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.tile b { display: block; font-weight: 600; font-size: 14px; }
.tile small { color: var(--muted); font-size: 12px; }
.cat-tiles { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cat-tile { display: block; padding: 0 4px; }
.cat-tile h3 { margin: 0 0 2px; font-size: 17px; color: var(--gold); }
.cat-tile p { margin: 0; color: var(--text); font-size: 13.5px; }
.cat-tile .icons { display: flex; gap: 4px; margin-bottom: 8px; min-height: 32px; align-items: flex-end; }
.cat-tile .icons img { width: 32px; height: 32px; object-fit: contain; background: url("/wiki/static/ui/slot.png") center / 32px no-repeat; }

/* ---------- pagina de start a wiki-ului ---------- */
.whero {
  margin: 0 -6px 4px; padding: 34px 26px 28px; border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  background: linear-gradient(90deg, rgba(8, 9, 12, 0.9) 0%, rgba(8, 9, 12, 0.6) 50%, rgba(8, 9, 12, 0.15) 100%),
              url("/uploads/theme/bg-sakura.jpg") 70% 24% / cover no-repeat;
}
.whero h1 { font-size: 36px; margin-bottom: 10px; }
.whero .lead { color: #e2ddd2; text-shadow: 1px 1px 2px #000; max-width: 60ch; }
.whint { margin: 4px 0 0; color: #b9ae96; font-size: 13.5px; text-shadow: 1px 1px 2px #000; }
.whint kbd { font: 600 11.5px/1.4 var(--body); color: var(--parch); padding: 1px 7px; border: 1px solid #5a4a30; background: #1a1410; }
.gcards { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gcard { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px 0 0; text-align: center; }
.gfig { height: 112px; display: flex; align-items: flex-end; justify-content: center; }
.gfig img { max-height: 112px; max-width: 124px; width: auto; height: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.7)); }
.gcard b { font: bold 13px/1.3 var(--game); color: #f2e2b6; text-shadow: 1px 1px 0 #000; }

/* ---------- liste cu filtre ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; align-items: center; }
.filters input, .filters select {
  height: 30px; background: #0c0b0a; color: var(--text-hi); border: 1px solid #4a4038; padding: 0 9px; font: 13.5px var(--body);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}
.filters input:focus, .filters select:focus { border-color: var(--gold); outline: none; }
.filters .count { color: var(--muted); font-size: 13px; margin-left: auto; }
.tbl-wrap { overflow-x: auto; border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); background: rgba(0, 0, 0, 0.35); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font: bold 12px var(--game); color: #f2e2b6; letter-spacing: .3px; text-shadow: 1px 1px 0 #000;
  background: linear-gradient(180deg, #2b2621, #171410); padding: 7px 10px; border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); white-space: nowrap;
}
td { padding: 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); vertical-align: middle; }
tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.018); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(139, 26, 18, 0.22); }
td.ic { width: 46px; text-align: center; }
td.ic img { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; background: url("/wiki/static/ui/slot.png") center / 32px no-repeat; }
td.num, th.num { text-align: right; }
.it { display: inline-flex; align-items: center; gap: 8px; }
.it img { width: 32px; height: 32px; object-fit: contain; background: url("/wiki/static/ui/slot.png") center / 32px no-repeat; }

/* ---------- pagina de item: tooltip-ul din joc (ThinBoard + negru 51%) ---------- */
.item-head { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.tt {
  border: 16px solid transparent; border-image: url("/wiki/static/ui/thin.png") 16 / 16px round;
  background: rgba(0, 0, 0, 0.82); background-clip: padding-box;
  padding: 2px 4px; font: 12.5px/1.5 var(--game); color: var(--tt-normal); text-align: center;
}
.tt .ico { display: block; margin: 2px auto 8px; max-width: 64px; }
.tt .name { color: var(--tt-title); font-weight: bold; font-size: 13.5px; margin-bottom: 5px; }
.tt .name.special { color: var(--tt-special); }
.tt .l { margin: 0; }
.tt .pos { color: var(--tt-pos); }
.tt .pos2 { color: var(--tt-pos-2); }
.tt .neg { color: var(--tt-neg); }
.tt .cond { color: var(--tt-cond); }
.tt .price { color: var(--tt-price); }
.tt hr { border: 0; border-top: 1px solid #3a3226; margin: 7px 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; font-size: 14px; margin: 8px 0 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--text-hi); }
.badge { display: inline-block; font: bold 11px/1.6 var(--game); padding: 0 7px; border: 1px solid #5a4a30; color: var(--gold); margin-right: 4px; vertical-align: middle; background: #120f0c; }
.badge.boss { color: #ffb19c; border-color: #7a2418; background: #3a0d08; }
.badge.king { color: var(--gold-2); }
.badge.stone { color: #9fc6e8; border-color: #36506a; background: #0d1620; }
.chance { color: var(--tt-pos-2); font-variant-numeric: tabular-nums; }
.note { border-left: 2px solid #8a1a12; background: rgba(0, 0, 0, 0.35); padding: 9px 14px; margin: 12px 0; max-width: 80ch; color: #b9b3a8; }
.empty { color: var(--muted); font-style: italic; }

/* ---------- ghiduri ---------- */
.guide .banner { width: 100%; max-width: 860px; border: 1px solid #000; display: block; margin: 0 0 16px; }
.guide ul { padding-left: 20px; max-width: 80ch; }
.guide li { margin: 4px 0; }
.guide li::marker { color: #a8783a; }
.guide .items-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 14px; }
.guide .items-row a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.guide .items-row img { width: 32px; height: 32px; object-fit: contain; background: url("/wiki/static/ui/slot.png") center / 32px no-repeat; }

footer.foot { color: #9b9180; font-size: 13px; padding: 20px 34px; text-align: center; background: rgba(8, 9, 12, 0.92); border-top: 1px solid rgba(229, 182, 107, 0.25); }

/* ---------- telefon ---------- */
@media (max-width: 1000px) {
  .wrap { grid-template-columns: minmax(0, 1fr); padding: 10px 6px 24px; gap: 0; }
  .side, main { border-width: 24px; border-image-width: 24px; }
  .winbar { margin: -19px -23px 14px -22px; }
  .side .winbar { margin: -19px -19px 10px -18px; }
  .side {
    position: fixed; z-index: 30; top: 62px; left: 0; bottom: 0; width: 290px;
    transform: translateX(-105%); transition: transform .2s ease;
  }
  .side-in { max-height: calc(100vh - 120px); }
  body.side-open .side { transform: none; }
  .menu-btn { display: inline-block; flex: none; }
  .top { gap: 8px; padding: 0 10px; }
  .top nav, .top .grow { display: none; }
  .search { width: auto; flex: 1 1 auto; min-width: 0; }
  .search .res { position: fixed; top: 58px; left: 8px; right: 8px; margin: 0; }
  .search kbd { display: none; }
  .top .brand { flex: none; }
  .top .brand span { display: none; }
  .lang { flex: none; }
  .lang select { width: 62px; padding: 0 4px; }
  main { padding: 0 4px 30px; }
  .item-head { grid-template-columns: minmax(0, 1fr); }
  .item-head .tt { order: -1; }
  h1 { font-size: 25px; }
  .whero { padding: 24px 14px 20px; background-position: 64% 20%; }
  .whero h1 { font-size: 28px; }
  .gcards { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .gfig { height: 90px; }
  .gfig img { max-height: 90px; max-width: 104px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }