/* ═══════════════════════════════════════════════════════════════════════
   KROWNIA — Game Manual (shared styles)

   The illustrated Game Manual (#modal-manual) originally only existed in
   the game room (index.html / game.js), styled by rules scattered through
   the much larger style.css. Added here (2026-08-16) so the SAME modal can
   also open from the Lobby, without the Lobby having to load all of
   style.css (a large, game-board-specific stylesheet unrelated to anything
   else in lobby.html, and a real risk of unrelated class-name collisions).

   This file is a literal copy of every style.css rule the manual actually
   uses (selectors: .man-*, .modal-manual, .modal (base box only — the
   manual's own <div class="modal modal-manual"> needs both), .lang-switch,
   .lang-switch--manual, .lang-btn, .mbtn, .overlay), plus the handful of
   --surface-*, --text-*, --border-1, --modal-overlay, --tint-soft, --lc-*
   custom properties those rules read (lobby.css uses an entirely different
   token system — --ink-rgb, --page-base, etc. — so these are net-new names,
   confirmed not to collide with anything lobby.css/header.css/ui-dialog.css/
   avatar-badge.css already defines).

   Deliberately a COPY, not a shared include: the game room's own manual
   (style.css + game.js) is left completely untouched by this file, so nothing
   here can affect that already-working, tested feature. The trade-off is two
   places to update if the manual's content/look ever changes — accepted
   given how rarely a static rules reference like this changes, weighed
   against the risk of routing the game room's manual through new shared
   code (see AGENTS.md's gameplay-change safety posture). See lobby.js's own
   Game Manual section for the matching JS (i18n, open/close, TOC scroll-spy,
   image loading) — a deliberately simplified copy of game.js's own logic,
   dropping only the Tideport-mode-specific image swapping (the Lobby has no
   "active game mode" to swap for; it always shows the default Classic Mode
   art, exactly like a fresh game room would before any mode is chosen).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --lc-border: #ccc8be;
  --lc-text: #3a3020;
  --surface-1: #fff;
  --surface-2: #f5f0e8;
  --surface-3: #ece8de;
  --text-1: #1d1d1d;
  --text-2: #5a4a2e;
  --text-3: #8a7860;
  --border-1: #d6d1c6;
  --modal-overlay: rgba(0, 0, 0, .65);
  --tint-soft: rgba(0, 0, 0, .06);
}

:root[data-theme="dark"] {
  --lc-border: #383c4a;
  --lc-text: #e7e1d3;
  --surface-1: #262a34;
  --surface-2: #2c303c;
  --surface-3: #343948;
  --text-1: #ece8e0;
  --text-2: #cbc2b2;
  --text-3: #948c7c;
  --border-1: #3c4150;
  --modal-overlay: rgba(0, 0, 0, .75);
  --tint-soft: rgba(255, 255, 255, .06);
}

/* ── Generic modal/overlay chrome (style.css's own base rules) ── */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}

.modal {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  padding: 22px;
  max-width: 420px;
  width: 92%;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .35);
  color: var(--lc-text);
}

.mbtn {
  flex: 1;
  padding: 9px;
  border: none;
  border-radius: 7px;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .18s;
}

.mbtn:disabled {
  opacity: .28;
  cursor: not-allowed;
}

.mbtn:not(:disabled):hover {
  opacity: .85;
}

.mbtn.primary {
  background: #257838;
  color: #fff;
}

/* ── Language switcher (EN / فارسی / Deutsch) ── */
.lang-switch--manual {
  position: absolute;
  top: 12px;
  left: 14px;
  margin-bottom: 0;
  z-index: 4;
}

.lang-btn {
  border: 1px solid var(--lc-border, #c9c2b4);
  background: rgba(150, 150, 150, .14);
  color: inherit;
  font-size: .74rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  transition: background .14s, border-color .14s, color .14s;
}

.lang-btn:hover {
  border-color: #c0a030;
}

.lang-btn.active {
  background: #c0a030;
  border-color: #c0a030;
  color: #1a1a1a;
}

.modal-manual.lang-fa {
  font-family: "Vazirmatn", Tahoma, "Segoe UI", "Iranian Sans", sans-serif;
}

.modal-manual[dir="rtl"] {
  text-align: right;
}

.modal-manual[dir="rtl"] .man-cover,
.modal-manual[dir="rtl"] .man-toc {
  text-align: center;
}

.modal-manual[dir="rtl"] .man-ol,
.modal-manual[dir="rtl"] .man-ul {
  padding-right: 22px;
  padding-left: 0;
}

.modal-manual[dir="rtl"] .man-flow-step {
  flex-direction: row-reverse;
}

.modal-manual[dir="rtl"] .man-robber-head {
  flex-direction: row-reverse;
}

.modal-manual[dir="rtl"] .man-vp td,
.modal-manual[dir="rtl"] .man-cost-name {
  text-align: right;
}

/* ── The manual's own modal shell ── */
.modal-manual {
  max-width: 680px;
  width: 94%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.man-x {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .28);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}

.man-x:hover {
  background: rgba(0, 0, 0, .5);
}

.man-cover {
  text-align: center;
  padding: 18px 22px 14px;
  background: linear-gradient(140deg, #f3d27a 0%, #e6b347 45%, #c98f2c 100%);
  border-bottom: 1px solid #b8893a;
  flex-shrink: 0;
}

.man-cover-logo {
  height: 86px;
  width: auto;
  object-fit: contain;
  margin: -8px 0 10px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .25));
}

.man-cover-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #4a3206;
  letter-spacing: .5px;
}

.man-cover-sub {
  font-size: .82rem;
  color: #5a4310;
  max-width: 460px;
  margin: 4px auto 0;
  line-height: 1.5;
}

.man-toc {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  padding: 12px 22px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border-1);
}

.man-toc a {
  font-size: .74rem;
  text-decoration: none;
  cursor: pointer;
  color: var(--text-2);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  padding: 3px 10px;
}

@media (hover: hover) {
  .man-toc a {
    transition: background .12s, color .12s;
  }

  .man-toc a:hover {
    background: #c98f2c;
    color: #fff;
    border-color: #c98f2c;
  }
}

.man-toc a.toc-active {
  background: #c98f2c;
  color: #fff;
  border-color: #c98f2c;
}

.man-body {
  overflow-y: auto;
  padding: 6px 22px 8px;
  scroll-behavior: smooth;
}

.man-sec {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-1);
}

.man-sec:last-child {
  border-bottom: none;
}

.man-sec p {
  margin: 6px 0;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--text-1);
}

.man-h {
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--text-1);
  margin: 0 0 4px;
  scroll-margin-top: 8px;
}

.man-note {
  font-size: .8rem !important;
  color: var(--text-2) !important;
  background: var(--surface-3);
  border-left: 3px solid #c98f2c;
  border-radius: 0 6px 6px 0;
  padding: 7px 11px;
  margin-top: 8px !important;
}

.man-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-3);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 10px 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-1);
}

.man-callout--gold {
  background: linear-gradient(120deg, #fbf1d4, #f3e0a8);
  border: 1px solid #e2c374;
}

.man-callout-big {
  font-size: 1.7rem;
  font-weight: 800;
  color: #b07d1e;
  flex-shrink: 0;
}

.man-ol,
.man-ul {
  margin: 8px 0;
  padding-left: 22px;
}

.man-ol li,
.man-ul li {
  font-size: .86rem;
  line-height: 1.55;
  color: var(--text-1);
  margin: 5px 0;
}

.man-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0;
}

.man-tile {
  margin: 0;
  text-align: center;
}

.man-hex {
  display: inline-block;
  width: 74px;
  height: 82px;
}

.man-hex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
}

.man-tile figcaption {
  font-size: .76rem;
  line-height: 1.4;
  color: var(--text-1);
  margin-top: 4px;
}

.man-count {
  font-size: .72rem;
  color: var(--text-3);
}

.man-res-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.man-res {
  margin: 0;
  text-align: center;
}

.man-res img {
  width: 100%;
  max-width: 80px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}

.man-res figcaption {
  font-size: .76rem;
  color: var(--text-1);
  margin-top: 5px;
}

.man-piece-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0;
  align-items: end;
}

.man-piece {
  margin: 0;
  text-align: center;
}

.man-piece img {
  height: 64px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .25));
}

.man-piece figcaption {
  font-size: .78rem;
  line-height: 1.4;
  color: var(--text-1);
  margin-top: 6px;
}

.man-road-demo {
  display: inline-block;
  width: 14px;
  height: 56px;
  border-radius: 5px;
  background: #d84040;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .25);
  transform: rotate(-18deg);
}

.man-dice-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 14px 0;
}

.man-die {
  width: 52px;
  height: 52px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 11px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 6px rgba(0, 0, 0, .06);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 8px;
  gap: 2px;
}

.man-die i {
  width: 9px;
  height: 9px;
  background: #2a2118;
  border-radius: 50%;
  align-self: center;
  justify-self: center;
}

.man-die:first-child i:nth-child(1) { grid-area: 1 / 1; }
.man-die:first-child i:nth-child(2) { grid-area: 1 / 3; }
.man-die:first-child i:nth-child(3) { grid-area: 2 / 2; }
.man-die:first-child i:nth-child(4) { grid-area: 3 / 1; }
.man-die:first-child i:nth-child(5) { grid-area: 3 / 3; }
.man-die:nth-child(2) i:nth-child(1) { grid-area: 1 / 1; }
.man-die:nth-child(2) i:nth-child(2) { grid-area: 2 / 2; }
.man-die:nth-child(2) i:nth-child(3) { grid-area: 3 / 3; }

.man-dice-eq {
  font-size: 1.4rem;
  font-weight: 800;
  color: #b07d1e;
}

.man-hot {
  color: #d83030;
}

.man-snake {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.man-snake span {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 6px;
  padding: 5px 11px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-2);
}

.man-snake-turn {
  background: #c98f2c !important;
  color: #fff !important;
  border-color: #c98f2c !important;
}

.man-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.man-flow-step {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 9px;
  padding: 9px 12px;
}

.man-flow-step div {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text-1);
}

.man-flow-n {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #c98f2c;
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.man-cost {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.man-cost td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border-1);
  vertical-align: middle;
}

.man-cost tr:last-child td {
  border-bottom: none;
}

.man-cost-name {
  font-size: .85rem;
  width: 32%;
}

.man-cost-name .man-count {
  display: block;
  font-weight: 400;
}

.man-cost-ico {
  white-space: nowrap;
  width: 30%;
}

.man-cost-ico img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  margin-right: 1px;
  vertical-align: middle;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
}

.man-cost-txt {
  font-size: .82rem;
  color: var(--text-2);
}

.man-port-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0;
}

.man-port {
  margin: 0;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.man-port > img {
  height: 110px;
  width: auto;
  object-fit: contain;
}

.man-port-imgs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
}

.man-port-imgs img {
  height: 84px;
  width: auto;
  object-fit: contain;
}

.man-rate {
  font-size: 1.2rem;
  font-weight: 800;
  color: #b07d1e;
}

.man-port figcaption {
  font-size: .76rem;
  line-height: 1.45;
  color: var(--text-1);
}

.man-dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.man-dev {
  margin: 0;
  display: flex;
  gap: 11px;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 9px 11px;
}

.man-dev img {
  width: 52px;
  flex-shrink: 0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
}

.man-dev figcaption {
  font-size: .8rem;
  line-height: 1.45;
  color: var(--text-1);
}

.man-robber-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 10px 0;
}

.man-robber-img {
  height: 70px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3));
}

.man-special-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}

.man-special {
  margin: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 11px;
}

.man-special img {
  width: 64px;
  flex-shrink: 0;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.man-special figcaption {
  font-size: .8rem;
  line-height: 1.45;
  color: var(--text-1);
}

.man-vp {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.man-vp td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-1);
  font-size: .87rem;
  color: var(--text-1);
}

.man-vp tr:last-child td {
  border-bottom: none;
}

.man-vp-n {
  text-align: right;
  font-weight: 800;
  color: #b07d1e;
  white-space: nowrap;
}

@media (max-width: 540px) {
  .modal-manual {
    width: 96%;
    max-height: 92vh;
  }

  .man-cover {
    padding: 14px 14px 12px;
  }

  .man-cover-logo {
    height: 64px;
  }

  .man-cover-title {
    font-size: 1.2rem;
  }

  .man-toc {
    padding: 8px 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .man-toc a {
    flex-shrink: 0;
  }

  .man-body {
    padding: 4px 14px 6px;
  }

  .man-tile-grid,
  .man-piece-grid,
  .man-port-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .man-res-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .man-dev-grid {
    grid-template-columns: 1fr;
  }

  .man-special-grid {
    grid-template-columns: 1fr;
  }

  .man-cost-name {
    width: auto;
  }

  .man-cost-ico img {
    width: 19px;
    height: 19px;
  }
}