/* Rise of Empire II - prezentarea serverului. v3 (16.10.2026 seara, "less AI, more natural"): se incarca DUPA
   /wiki/static/wiki.css si foloseste aceleasi piese din joc (rama Board, bara de titlu rosie, HorizontalBar, ThinBoard).
   Antetul ramine ca pe site-ul principal: pictura, titlul auriu (.roe-wordmark), butonul auriu; plus cele 4 clase. */

.about { --veil: linear-gradient(180deg, rgba(8, 11, 16, 0.42) 0%, rgba(8, 11, 16, 0.68) 45%, rgba(8, 11, 16, 0.86) 100%); }
.sec { padding: 6px 0 14px; }
.sec h2 { margin-top: 1.2em; }
.sec:first-of-type h2 { margin-top: 0; }
.sec .lead { margin-bottom: 16px; }
.more { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 500; }

/* ---------- antetul ---------- */
.hero {
  position: relative; max-width: 1420px; margin: 0 auto; padding: 0 20px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: end; min-height: 500px;
}
.petals { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.hero-txt { position: relative; z-index: 3; padding: 70px 10px 54px 24px; }
.hero h1 {
  font-size: clamp(46px, 6vw, 76px); line-height: 1; letter-spacing: 1px; margin: 0 0 8px;
  background: linear-gradient(180deg, #f6dca2 0%, #e5b66b 45%, #a9812f 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 16px rgba(0, 0, 0, 0.55));
}
.kicker { margin: 0 0 20px; font: 400 15px/1.2 var(--head); letter-spacing: 5px; text-transform: uppercase; color: var(--gold); opacity: .9; text-shadow: 0 1px 4px #000; }
.hero .lead { font-size: 17px; max-width: 48ch; color: #e6e1d6; text-shadow: 1px 1px 2px #000, 0 0 12px rgba(0, 0, 0, 0.8); }
.lineup { position: relative; z-index: 1; width: 100%; max-width: 760px; aspect-ratio: 760 / 470; justify-self: end; isolation: isolate; }
.lineup::before {
  content: ""; position: absolute; left: -4%; right: -4%; top: 4%; bottom: -6%; z-index: -1;
  background: radial-gradient(closest-side, rgba(8, 11, 16, 0.6), rgba(8, 11, 16, 0.25) 65%, transparent);
}
.lineup img { position: absolute; bottom: 0; width: auto; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.65)); }
.lineup .c-warrior { height: 92%; right: 0; z-index: 1; }
.lineup .c-sura { height: 80%; left: 40%; z-index: 2; }
.lineup .c-ninja { height: 76%; left: 22%; z-index: 4; }
.lineup .c-saman { height: 74%; left: 2%; z-index: 3; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* butoanele site-ului: auriul (.roe-play-btn) si lemnul (.roe-action-btn) */
.btn {
  display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 3px;
  font: 400 15px/1 var(--head); letter-spacing: 1px; text-transform: uppercase; color: #e8cfa0;
  background: linear-gradient(180deg, #3a2c19 0%, #241a10 55%, #150f09 100%);
  border: 1px solid rgba(229, 182, 107, 0.4); box-shadow: inset 0 1px 0 rgba(243, 215, 154, 0.14), 0 3px 9px rgba(0, 0, 0, 0.5);
}
.btn:hover { color: var(--gold-hi); filter: brightness(1.15); text-decoration: none; }
.btn.gold {
  color: #2a1d0a; border: 2px solid var(--gold-brd); text-shadow: 0 1px 0 rgba(255, 244, 214, 0.45);
  background: linear-gradient(180deg, #f0d191 0%, var(--gold) 40%, #b8863c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 224, 0.7), inset 0 0 0 1px rgba(107, 78, 34, 0.5), 0 3px 9px rgba(0, 0, 0, 0.5);
}
.btn.gold:hover { color: #2a1d0a; filter: brightness(1.08); }
.about .wrap { padding-top: 18px; }

/* ---------- datele serverului: lista ca in fereastra de caracter ---------- */
.stats {
  margin: 0; max-width: 640px; border: 16px solid transparent; border-image: url("/wiki/static/ui/thin.png") 16 / 16px round;
  background: rgba(0, 0, 0, 0.45); background-clip: padding-box;
}
.stats div { display: flex; gap: 16px; justify-content: space-between; padding: 5px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.stats div:last-child { border-bottom: 0; }
.stats dt { color: var(--muted); font: 13px/1.5 var(--game); }
.stats dd { margin: 0; color: var(--text-hi); font: bold 13px/1.5 var(--game); text-align: right; }
.stats-note { margin-top: 12px; color: var(--muted); font-size: 14px; }

/* ---------- clase ---------- */
.classes { display: grid; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cls {
  border: 16px solid transparent; border-image: url("/wiki/static/ui/thin.png") 16 / 16px round;
  background: rgba(0, 0, 0, 0.45); background-clip: padding-box;
  display: grid; grid-template-rows: 220px auto;
}
.cls figure { margin: 0; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.cls figure img { max-height: 210px; width: auto; max-width: 100%; height: auto; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.7)); }
.cls > div { padding: 10px 4px 2px; }
.cls h3 { margin: 0 0 6px; font-size: 20px; color: var(--gold); }
.cls p { margin: 0 0 8px; font-size: 14px; }
.cls .sets { margin: 0; font: 12px/1.45 var(--game); color: var(--tt-cond); }

/* ---------- lumea ---------- */
.mapnotes { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 4px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mapnotes li { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 14px; }
.mapnotes b { display: block; font: 400 17px/1.3 var(--head); }

/* ---------- bosii ---------- */
.bosscards { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
.bosscard {
  border: 16px solid transparent; border-image: url("/wiki/static/ui/thin.png") 16 / 16px round;
  background: rgba(0, 0, 0, 0.45); background-clip: padding-box; display: grid; grid-template-rows: 210px auto;
}
.bosscard figure { margin: 0; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.bosscard figure img { max-height: 200px; width: auto; max-width: 100%; height: auto; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.7)); }
.bosscard > div { padding: 10px 4px 0; }
.bosscard h3 { margin: 4px 0 2px; font-size: 19px; }
.bosscard .lvl { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.bosscard .facts { font-size: 13px; margin: 0; }

/* ---------- sisteme ---------- */
.sys { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; align-items: center; }
.sys.n2 { grid-template-columns: minmax(0, 1fr) 300px; }
.sys-fig { margin: 0; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.sys-fig img { height: auto; max-height: 260px; width: auto; max-width: 100%; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.7)); }
.sys.n2 .sys-fig img { height: 190px; max-height: none; max-width: none; }
ul.pts { padding-left: 20px; margin: 0; max-width: 72ch; }
ul.pts li { margin: 6px 0; }
ul.pts li::marker { color: #a8783a; }
.pets { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: flex-end; margin: 6px 0 4px; }
.pets figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 128px; }
.pets img { max-height: 116px; width: auto; max-width: 100%; height: auto; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.6)); }
.pets figcaption { font-size: 12.5px; text-align: center; line-height: 1.3; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 14px 0 0; font-size: 13.5px; }
.chips span { color: var(--muted); }
.chip b { color: var(--text-hi); font-weight: 600; margin-left: 4px; }
.items-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; }
.items-row a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.items-row img { width: 32px; height: 32px; object-fit: contain; background: url("/wiki/static/ui/slot.png") center / 32px no-repeat; }

/* ---------- taste ---------- */
table.keys { max-width: 620px; }
.tbl-wrap:has(table.keys) { max-width: 620px; }
td.key { white-space: nowrap; width: 1%; }
kbd {
  display: inline-block; min-width: 26px; padding: 1px 7px; text-align: center; font: bold 12px/1.6 var(--game); color: #f2e2b6;
  background: linear-gradient(180deg, #3b3632, #1b1815); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); border-radius: 2px;
}

/* ---------- final ---------- */
.join { text-align: center; padding: 26px 0 6px; }
.join h2 { text-align: left; }
.join p { margin: 0 auto; }
.join .cta { justify-content: center; }

/* ---------- telefon ---------- */
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 0 10px; }
  .hero-txt { padding: 16px 8px 28px; order: 2; }
  .lineup { order: 1; margin: 10px auto 0; justify-self: center; }
  .classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bosscards { grid-template-columns: minmax(0, 1fr); }
  .mapnotes { grid-template-columns: minmax(0, 1fr); }
  .sys, .sys.n2 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sys-fig { order: -1; }
  .sys-fig img { max-height: 190px; }
  .sys.n2 .sys-fig img { height: 160px; }
}
@media (max-width: 560px) {
  .cls { grid-template-rows: 160px auto; }
  .cls figure img { max-height: 150px; }
  .bosscard { grid-template-rows: 180px auto; }
}