/* Traveling merchant and cinematic battle reports */
.merchant-hero {
  position: relative; overflow: hidden; padding: 16px; margin-bottom: 12px;
  border: 1px solid #8b622e; border-radius: 14px;
  background: linear-gradient(135deg, rgba(82,45,19,.95), rgba(142,89,34,.88)),
              radial-gradient(circle at 80% 15%, rgba(255,213,108,.45), transparent 35%);
  color: #fff4d4; box-shadow: inset 0 0 28px rgba(255,204,96,.12), 0 5px 14px rgba(34,19,8,.2);
}
.merchant-hero::after { content:""; position:absolute; inset:-50% -20%; pointer-events:none; background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.12) 50%,transparent 58%); animation:merchantShine 6s linear infinite; }
.merchant-hero h3 { margin:0 0 5px; font-size:20px; color:#ffe6a0; }
.merchant-hero p { margin:3px 0; font-size:13px; opacity:.9; }
.merchant-offers { display:grid; gap:10px; }
.merchant-offer { position:relative; padding:12px; border:1px solid rgba(102,67,27,.35); border-radius:12px; background:linear-gradient(145deg,rgba(255,252,235,.94),rgba(236,215,164,.72)); box-shadow:0 3px 10px rgba(50,30,10,.12); }
.merchant-offer h3 { display:flex; align-items:center; gap:8px; margin:0 0 7px; color:#3f2915; }
.merchant-offer .merchant-icon { font-size:27px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.16)); }
.merchant-offer .merchant-stats { display:flex; flex-wrap:wrap; gap:6px; margin:7px 0 9px; }
.merchant-pill { padding:4px 7px; border-radius:999px; background:rgba(90,58,26,.1); border:1px solid rgba(90,58,26,.18); font-size:12px; }
.merchant-pill.risk { color:#7e2419; background:rgba(173,62,42,.1); }
.merchant-bonus-list { margin:10px 0; padding:9px 11px; border-radius:10px; border:1px solid rgba(50,102,51,.25); background:rgba(79,137,65,.1); font-size:12.5px; }
.merchant-locked { opacity:.72; }
@keyframes merchantShine { from { transform:translateX(-45%); } to { transform:translateX(45%); } }

.report-diorama-launch { margin-top:8px; width:100%; }
.battle-diorama { position:fixed; inset:0; z-index:2500; display:grid; place-items:center; padding:18px; background:rgba(8,12,18,.82); backdrop-filter:blur(6px); animation:dioramaFade .35s ease-out; }
.battle-stage { position:relative; width:min(920px,96vw); height:min(520px,78vh); overflow:hidden; border:3px solid #c99b4c; border-radius:18px; background:linear-gradient(#7590a7 0 42%,#a7a06d 42% 65%,#63543e 65%); box-shadow:0 20px 70px #000, inset 0 0 70px rgba(0,0,0,.32); perspective:800px; }
.battle-stage::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 30%,rgba(255,225,157,.23),transparent 35%),linear-gradient(90deg,rgba(53,78,113,.3),transparent 45%,rgba(116,54,42,.3)); pointer-events:none; }
.battle-stage .diorama-title { position:absolute; z-index:5; top:18px; left:50%; transform:translateX(-50%); text-align:center; color:#fff5d9; text-shadow:0 2px 5px #000; width:80%; }
.diorama-title h2 { margin:0; font-size:clamp(20px,3vw,32px); }
.diorama-title small { opacity:.85; }
.diorama-side { position:absolute; z-index:2; bottom:75px; width:42%; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.diorama-side.attackers { left:2%; animation:dioramaAttack 10s cubic-bezier(.2,.7,.25,1) both; }
.diorama-side.defenders { right:2%; animation:dioramaDefend 10s cubic-bezier(.2,.7,.25,1) both; }
.diorama-unit { width:38px; height:58px; position:relative; filter:drop-shadow(0 5px 3px rgba(0,0,0,.35)); }
.diorama-unit::before { content:""; position:absolute; left:10px; top:0; width:18px; height:18px; border-radius:50%; background:#e2b07b; border:2px solid #3a2c22; }
.diorama-unit::after { content:""; position:absolute; left:7px; top:18px; width:24px; height:30px; border-radius:8px 8px 4px 4px; background:var(--army,#3466a0); border:2px solid #292019; box-shadow:-7px 25px 0 -5px #2d231d,7px 25px 0 -5px #2d231d; }
.diorama-side.defenders .diorama-unit { --army:#a23c32; transform:scaleX(-1); }
.diorama-result { position:absolute; z-index:7; left:50%; top:49%; transform:translate(-50%,-50%) scale(.7); opacity:0; padding:14px 26px; border-radius:12px; color:#fff7da; background:rgba(46,28,14,.9); border:2px solid #d9b55d; font:700 clamp(21px,4vw,38px) Georgia,serif; text-shadow:0 2px 3px #000; animation:dioramaResult 10s ease both; }
.diorama-progress { position:absolute; z-index:8; bottom:0; left:0; height:5px; background:#f3c85d; box-shadow:0 0 12px #ffd86e; animation:dioramaProgress 10s linear both; }
.diorama-skip { position:absolute; z-index:10; top:12px; right:12px; border:1px solid rgba(255,255,255,.55); border-radius:999px; background:rgba(0,0,0,.45); color:#fff; padding:7px 11px; cursor:pointer; }
@keyframes dioramaFade { from { opacity:0; } }
@keyframes dioramaAttack { 0%,15% { transform:translateX(-35%); } 48%,64% { transform:translateX(62%); } 72%,100% { transform:translateX(15%); filter:saturate(.75); } }
@keyframes dioramaDefend { 0%,15% { transform:translateX(35%); } 48%,64% { transform:translateX(-62%); } 72%,100% { transform:translateX(-15%); filter:saturate(.75); } }
@keyframes dioramaResult { 0%,66% { opacity:0; transform:translate(-50%,-50%) scale(.7); } 74%,94% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; } }
@keyframes dioramaProgress { from { width:0; } to { width:100%; } }
@media (prefers-reduced-motion:reduce) { .battle-diorama *, .merchant-hero::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; } }
@media (max-width:620px) { .battle-stage { height:70vh; } .diorama-side { bottom:65px; gap:2px; } .diorama-unit { transform:scale(.78); margin:-3px; } .diorama-side.defenders .diorama-unit { transform:scaleX(-1) scale(.78); } }

/* Artifact inventory and discovery expeditions */
.artifact-intro,
.artifact-site-hero {
  padding: 17px 19px;
  margin-bottom: 14px;
  border: 2px solid var(--wood);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,250,225,.96), rgba(231,210,163,.92));
  box-shadow: 0 5px 14px rgba(53,31,13,.18);
}
.artifact-intro h3,
.artifact-site-hero h3 { margin: 0 0 5px; }
.artifact-section-title { margin: 15px 0 8px; font-size: 17px; }
.artifact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.artifact-card,
.artifact-site-hero,
.artifact-public {
  --artifact-color: #8f9aa3;
  position: relative;
  overflow: hidden;
}
.artifact-card {
  padding: 14px;
  border: 2px solid var(--artifact-color);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255,253,240,.98), rgba(238,222,185,.94));
  box-shadow: inset 5px 0 0 var(--artifact-color), 0 4px 10px rgba(49,30,14,.15);
}
.artifact-card::after,
.artifact-site-hero::after {
  content: '';
  position: absolute;
  right: -28px;
  top: -30px;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: var(--artifact-color);
  opacity: .11;
  pointer-events: none;
}
.artifact-card-head { display: flex; gap: 11px; align-items: center; margin-bottom: 9px; }
.artifact-card-head h3 { margin: 0; font-size: 18px; line-height: 1.15; }
.artifact-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; font-size: 30px; border: 1px solid var(--artifact-color); border-radius: 50%; background: rgba(255,255,255,.68); box-shadow: 0 0 14px color-mix(in srgb, var(--artifact-color) 45%, transparent); }
.artifact-rarity { color: var(--artifact-color); font-size: 12px; text-transform: uppercase; letter-spacing: .8px; }
.artifact-card p,
.artifact-site-hero p { font-size: 13px; line-height: 1.4; margin: 7px 0; }
.artifact-bonus { padding: 7px 9px; margin: 9px 0; border-radius: 7px; color: #233b22; background: rgba(93,145,75,.14); }
.artifact-location { font-size: 12px; opacity: .78; margin: 7px 0; }
.artifact-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-top: 10px; }
.artifact-controls select { min-width: 0; width: 100%; padding: 7px; border: 1px solid var(--wood); border-radius: 6px; background: #fffaf0; font: inherit; }
.artifact-controls .btn { margin: 0; width: auto; padding: 7px 12px; }
.artifact-expedition-row { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-bottom: 7px; border: 1px solid var(--wood); border-radius: 8px; background: rgba(255,250,230,.88); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.artifact-expedition-row:hover { border-color: var(--gold); transform: translateY(-1px); }
.artifact-history p { display: flex; justify-content: space-between; gap: 8px; margin: 5px 0; padding-bottom: 5px; border-bottom: 1px solid rgba(80,52,25,.15); }
.artifact-history small { margin-left: auto; opacity: .65; }
.artifact-site-hero { border-color: var(--artifact-color); box-shadow: inset 6px 0 0 var(--artifact-color), 0 5px 14px rgba(53,31,13,.18); }
.artifact-army-select label { display: grid; grid-template-columns: minmax(0, 1fr) 95px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(70,45,20,.12); }
.artifact-army-select input { width: 100%; padding: 6px; border: 1px solid var(--wood); border-radius: 5px; background: #fffaf0; }
.artifact-army-select .btn { width: 100%; margin-top: 12px; }
.artifact-travel { text-align: center; border-color: #4c799b; }
.artifact-challenge { padding: 16px; border: 2px solid #6f4c2b; border-radius: 12px; background: radial-gradient(circle at 50% 0, rgba(255,245,192,.95), rgba(217,192,139,.95)); }
.artifact-challenge > p { margin: 9px 0 14px; font-size: 15px; line-height: 1.5; }
.artifact-choice { width: 100%; display: block; margin: 8px 0; padding: 12px 14px; border: 2px solid #73502e; border-radius: 8px; background: linear-gradient(#fff9e5, #e7d1a1); color: #372414; font: 700 14px Georgia, serif; cursor: pointer; transition: transform .12s, border-color .12s; }
.artifact-choice:hover:not(:disabled) { transform: translateX(3px); border-color: var(--gold); }
.artifact-choice:disabled { opacity: .55; cursor: wait; }
.city-artifact-showcase { margin-top: 11px; }
.artifact-public-grid { display: grid; gap: 7px; margin-top: 8px; }
.artifact-public { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-left: 5px solid var(--artifact-color); border-radius: 7px; background: rgba(255,250,230,.72); }
.artifact-public > span { font-size: 24px; }
.artifact-public div { min-width: 0; }
.artifact-public b,
.artifact-public small { display: block; }
.artifact-public small { color: var(--artifact-color); margin-top: 2px; }
@media (max-width: 620px) {
  .artifact-grid { grid-template-columns: 1fr; }
  .artifact-controls { grid-template-columns: 1fr; }
  .artifact-expedition-row { flex-direction: column; }
  .artifact-history p { display: block; }
}

/* Merchant and civic buildings use the standard parchment game-window language. */
.merchant-summary{background:rgba(255,250,235,.55);color:var(--ink);box-shadow:none}.merchant-summary::after{display:none}.merchant-summary h3{color:var(--ink);font-size:16px}.merchant-summary p{font-size:13px;opacity:1}
.merchant-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}.merchant-offer{border:2px solid var(--wood);border-radius:8px;background:rgba(255,250,235,.55);box-shadow:none}.merchant-pill{border-radius:5px;background:rgba(90,58,26,.08)}
.civic-building{margin-top:12px}.civic-summary{background:linear-gradient(180deg,rgba(255,250,235,.72),rgba(232,211,163,.48))}.civic-artifact-card{border-left:6px solid var(--gold)}
.civic-actions,.civic-form-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}.civic-form-row select,.civic-building>div>select{flex:1;min-width:190px;padding:7px;border:1px solid var(--wood);border-radius:6px;background:#fffaf0;font:inherit}.civic-actions .btn,.civic-form-row .btn{width:auto;margin:0}
.aid-grid{display:grid;grid-template-columns:repeat(4,minmax(80px,1fr));gap:7px;margin:8px 0}.aid-grid input{min-width:0;padding:7px;border:1px solid var(--wood);border-radius:6px;background:#fffaf0}
@media(max-width:620px){.merchant-offers{grid-template-columns:1fr}.aid-grid{grid-template-columns:1fr 1fr}.civic-form-row{flex-direction:column}}


/* ============================================================
   Plávajúce tlačidlá vpravo dole: návod + pozvánky
   ============================================================ */

/* --- diamant s pozvánkami ---
   Pozadie bolo var(--paper-light), ktoré nikde nie je definované,
   takže tlačidlo bolo priehľadné a nad mapou sa strácalo.
   Teraz má vlastnú nepriehľadnú výplň a stále jemne pulzuje. */
.float-referral {
  position: fixed;
  bottom: 148px;
  right: 20px;
  width: 58px;
  height: 58px;
  padding: 0;
  background: radial-gradient(circle at 50% 35%, #fffdf4 0%, #f6e4b0 55%, #e2c274 100%);
  border: 2px solid #c9992f;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45), 0 0 0 rgba(255, 208, 92, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  animation: referral-idle 2.6s ease-in-out infinite;
}
.float-referral::after {                 /* jemný záblesk prebiehajúci cez tlačidlo */
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%);
  opacity: 0;
  animation: referral-shine 2.6s ease-in-out infinite;
  pointer-events: none;
}
.float-referral img {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
  animation: referral-tilt 2.6s ease-in-out infinite;
}
.float-referral:hover { transform: scale(1.06); }
/* keď čaká nevyzdvihnutá odmena, tlačidlo poskočí a zosilnie */
.float-referral.glow { animation: referral-claim 1.2s cubic-bezier(.25, .46, .45, .94) infinite; }

@keyframes referral-idle {
  0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, .45), 0 0 0 0 rgba(255, 208, 92, .55); }
  50%      { box-shadow: 0 6px 20px rgba(0, 0, 0, .45), 0 0 22px 6px rgba(255, 208, 92, .55); }
}
@keyframes referral-shine {
  0%, 62%, 100% { opacity: 0; transform: translateX(-45%); }
  72%           { opacity: .9; transform: translateX(0); }
  86%           { opacity: 0; transform: translateX(45%); }
}
@keyframes referral-tilt {
  0%, 100% { transform: rotate(-7deg) scale(1); }
  50%      { transform: rotate(7deg) scale(1.08); }
}
@keyframes referral-claim {
  0%, 100% { transform: translateY(0);    box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
  50%      { transform: translateY(-10px); box-shadow: 0 6px 24px rgba(255, 215, 0, .95), 0 0 18px rgba(255, 255, 255, .9); border-color: #ffd700; }
}

/* --- modré tlačidlo návodu --- */
.float-guide {
  position: fixed;
  bottom: 80px;
  right: 20px;
  min-width: 58px;
  height: 58px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, #3d90e8 0%, #1f63bd 100%);
  color: #fff;
  border: 2px solid #8fc4ff;
  border-radius: 29px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  font: 700 14px/1 "Work Sans", sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  z-index: 50;
  transition: transform .12s ease, box-shadow .12s ease;
}
.float-guide .material-symbols-outlined { font-size: 26px; }
.float-guide:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(31, 99, 189, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.float-guide:active { transform: translateY(0); }

@media (max-width: 600px) {
  .float-referral { bottom: 150px; right: 14px; width: 50px; height: 50px; }
  .float-referral img { width: 29px; height: 29px; }
  .float-guide { bottom: 92px; right: 14px; height: 50px; padding: 0 13px; border-radius: 25px; font-size: 13px; }
  .float-guide .material-symbols-outlined { font-size: 23px; }
}
/* Kto nechce pohyb na obrazovke, nedostane ho. */
@media (prefers-reduced-motion: reduce) {
  .float-referral, .float-referral img, .float-referral::after { animation: none; }
}

/* ============================================================
   Okno návodu
   ============================================================ */
.guide-shell { display: flex; flex-direction: column; gap: 10px; height: 100%; }

.guide-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 2px solid var(--wood);
  border-radius: 10px;
  background: #fffaf0;
}
.guide-search input {
  flex: 1;
  border: 0;
  background: transparent;
  font: 500 14px/1.3 "Work Sans", sans-serif;
  color: inherit;
  outline: none;
}
.guide-hitcount { margin: 0 0 6px; font: 600 11.5px/1.3 "Work Sans", sans-serif; opacity: .75; }

.guide-columns { display: grid; grid-template-columns: 210px 1fr; gap: 12px; align-items: start; }
.guide-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 0; }
.guide-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font: 600 13px/1.25 "Work Sans", sans-serif;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.guide-nav-item:hover { background: rgba(0, 0, 0, .05); }
.guide-nav-item.is-active { background: rgba(31, 99, 189, .13); border-color: #3d90e8; color: #1a4f96; }
.guide-nav-item.is-dim { opacity: .32; }          /* nevyhovuje hľadaniu */
.guide-nav-icon { font-size: 17px; line-height: 1; }

.guide-article { min-width: 0; }
.guide-mobile-back {
  display: none;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 8px 11px;
  border: 1px solid #3d90e8;
  border-radius: 8px;
  background: rgba(31, 99, 189, .1);
  color: #1a4f96;
  font: 700 13px/1.2 "Work Sans", sans-serif;
  cursor: pointer;
}
.guide-h2 { margin: 0 0 10px; font: 800 20px/1.2 "Cinzel", serif; }
.guide-p { margin: 0 0 10px; font: 400 14px/1.6 "Work Sans", sans-serif; }
.guide-list, .guide-steps { margin: 0 0 12px; padding-left: 20px; font: 400 14px/1.65 "Work Sans", sans-serif; }
.guide-list li, .guide-steps li { margin-bottom: 5px; }
.guide-steps li { padding-left: 3px; }

.guide-note {
  display: flex;
  gap: 9px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 4px solid;
  border-radius: 8px;
  font: 500 13.5px/1.55 "Work Sans", sans-serif;
}
.guide-note p { margin: 0; }
.guide-note.is-tip { border-color: #2f8f4e; background: rgba(47, 143, 78, .1); }
.guide-note.is-warn { border-color: #c07a1c; background: rgba(192, 122, 28, .12); }

.guide-qa details {
  border: 1px solid var(--parch-dark);
  border-radius: 8px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, .35);
}
.guide-qa summary {
  padding: 9px 12px;
  font: 700 13.5px/1.35 "Work Sans", sans-serif;
  cursor: pointer;
}
.guide-qa details[open] summary { border-bottom: 1px solid var(--parch-dark); }
.guide-qa p { margin: 0; padding: 10px 12px; font: 400 13.5px/1.6 "Work Sans", sans-serif; }

.guide-table-box { margin: 0 0 16px; }
.guide-live {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 8px;
  padding: 9px 11px;
  border: 1px solid rgba(47, 111, 78, .28);
  border-radius: 8px;
  background: rgba(47, 143, 78, .08);
  color: #285f43;
  font: 500 12px/1.4 "Work Sans", sans-serif;
}
.guide-live > span { flex: 0 0 auto; font-size: 18px; line-height: 1.2; }
.guide-live strong { display: block; margin-bottom: 2px; font-size: 12.5px; }
.guide-live p { margin: 0; color: var(--ink); font-weight: 400; }
.guide-loading { margin: 0 0 10px; font: 500 13px/1.4 "Work Sans", sans-serif; opacity: .75; }
.guide-table-scroll { overflow-x: auto; border: 1px solid var(--parch-dark); border-radius: 8px; }
.guide-table { width: 100%; border-collapse: collapse; font: 400 12.5px/1.45 "Work Sans", sans-serif; }
.guide-table th {
  padding: 7px 9px;
  background: rgba(0, 0, 0, .06);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.guide-table td { padding: 6px 9px; border-top: 1px solid var(--parch-dark); vertical-align: top; }
.guide-td-name { font-weight: 700; white-space: nowrap; }
.guide-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, .025); }
.guide-article mark { background: #ffe680; padding: 0 1px; border-radius: 2px; }

@media (max-width: 760px) {
  .guide-columns { grid-template-columns: 1fr; }
  .guide-nav {
    position: static;
    flex-direction: column;
    overflow: visible;
    gap: 5px;
    padding-bottom: 4px;
  }
  .guide-nav-item {
    flex: 0 0 auto;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-color: rgba(90, 61, 36, .14);
    background: rgba(255, 255, 255, .34);
  }
  .guide-nav-item.is-active { background: rgba(31, 99, 189, .09); }
  .guide-hitcount { width: 100%; }
  .guide-columns.is-mobile-picker .guide-article { display: none; }
  .guide-columns.is-mobile-detail .guide-nav { display: none; }
  .guide-columns.is-mobile-detail .guide-mobile-back { display: inline-flex; }
  .guide-h2 { font-size: 18px; }
  .guide-table { min-width: 620px; }
}