/* Presentation only. Geography and input coordinates never follow writing direction. */
@font-face {
  font-family: "Covenant Arabic";
  src: url("./assets/covenant/fonts/NotoSansArabic.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
}
:root {
  --ink: #101e2a;
  --panel: #182c35;
  --gold: #c4a66a;
  --paper: #dccbad;
  --muted: #b7b7ac;
  --line: #51605c;
}
.war-screen[data-scenario="guandu"] { background-image: url('./assets/covenant/scenes/map-guandu.webp'); }
.war-screen[data-scenario="chibi"] { background-image: url('./assets/covenant/scenes/map-chibi.webp'); }
html[lang="ar"] {
  --display: "Covenant Arabic", "Geeza Pro", Tahoma, sans-serif;
  --body: "Covenant Arabic", "Geeza Pro", Tahoma, sans-serif;
}
html[lang="ar"] :is(h1,h2,h3,h4,button,small,.wordmark,.seal,.phase-steps) {
  letter-spacing: normal;
  text-transform: none;
}
html[lang="ar"] :is(h1,h2,h3,.wordmark) { line-height: 1.55; }
html[lang="ar"] :is(p,.instruction,.skill-description,.gallery-skills,.room-paper) { line-height: 1.85; }
.language-control { display: inline-flex; align-items: center; gap: .45rem; font: 12px/1.5 var(--body); }
.language-control > span { color: var(--muted); }
.language-control select { min-width: 92px; width: auto; padding: 5px 8px; margin: 0; background: #142632; color: #f4e7cf; border: 1px solid #8e805d; border-radius: 4px; }
.room-paper > .language-control { display: flex; justify-content: flex-end; margin-block-end: 12px; }
.dialog > .language-control { margin-block: 8px 16px; }
.dialog .language-control > span { color: #514a3b; }
.ending-story { margin-block: 16px; padding: 12px 16px; border-inline-start: 3px solid #9b8454; background: #d7c9aa55; text-align: start; }
.ending-story p { margin-block: 6px; line-height: 1.8; }
.character-story { padding-block-end: 14px; margin-block-end: 14px; border-block-end: 1px solid #b7a989; }
.character-story h3 { margin-block: 0 8px; color: #5e5133; }
.character-story p { margin-block: 6px; }
.faction-story { max-width: 42rem; color: #e2d6bd; line-height: 1.8; font-size: 14px; }
.faction-card, .hero-card, .draft-card, .hero-detail-side, .gallery-card, .battle-dialog, .dialog, .surrender-hero, .result-card {
  border-image: none;
}
.portrait { object-position: 50% 24%; }
.battle-bust-img { object-fit: contain; object-position: center; border-radius: 6px; box-shadow: 0 12px 38px #080d15aa; }
.home-header nav { flex-wrap: wrap; justify-content: flex-end; }
.home-header .wordmark { flex-shrink: 0; }
.home-screen { height: auto; min-height: 100dvh; }
body:has(.home-screen) { overflow-y: auto; }
.manual-landscape .home-screen { height: 100%; min-height: 0; overflow-y: auto; }
.home-header { height: auto; min-height: 92px; padding-block: 12px; flex-wrap: wrap; }
.home-header nav { gap: 8px; }
.home-layout { flex: 1 0 auto; min-height: min-content; padding-block: 24px; }
.seal { flex-shrink: 0; height: auto; min-height: 68px; padding: 4px; font-size: 14px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; letter-spacing: normal; }
.chosen-faction > div { min-width: 0; }
html[lang="en"] .wordmark { font-size: clamp(16px,1.7vw,26px); letter-spacing: .025em; }
html[lang="en"] .home-copy h1 { font-size: clamp(32px,4vw,60px); line-height: 1.15; }
html[lang="ar"] .home-copy h1 { font-size: clamp(30px,4vw,56px); }
:is(.faction-card-copy,.hero-card-info,.roster-row,.skill-description,.gallery-card,.room-paper) { overflow-wrap: anywhere; }
.canvas-wrap, .sand-map-canvas, .dice-row, .quantity-control, .room-share-id, #room-endpoint, #room-id {
  direction: ltr;
}
.sand-map-canvas { transform: none; }
.room-share-id, .die, .resources strong { unicode-bidi: isolate; }
html[dir="rtl"] .home-screen { text-align: right; }
html[dir="rtl"] :is(.roster-row,.faction-card-copy,.hero-card-info,.command-panel,.skill-description,.gallery-card,.room-paper,.dialog) { text-align: start; }
html[dir="rtl"] :is(.home-copy,.faction-note,.faction-story,.home-lead) { text-align: start; }
html[dir="rtl"] .hero-card-info { left: auto; right: 10px; }
html[dir="rtl"] .selected-mark { left: 10px; right: auto; }
html[dir="rtl"] .dialog-header { text-align: start; }
html[dir="rtl"] :is(.battle-log,.blocked-routes) { padding-inline-start: 24px; padding-inline-end: 0; }
html[dir="rtl"] .battle-log li { text-align: start; }
html[dir="rtl"] .career-hero-card small { text-align: end; }
html[dir="rtl"] .route-summary svg { transform: rotate(180deg); }
html[dir="rtl"] :is(.reserve-breakdown,.target-list button,.hero-card) { text-align: start; }
html[dir="rtl"] .faction-roster { border-right: 0; border-left: 1px solid #7c683e; }
html[dir="rtl"] .command-panel { border-left: 0; border-right: 1px solid #7c683e; }
html[dir="rtl"] .roster-row.current { border-left: 0; border-right: 3px solid #fde08a; padding-left: 8px; padding-right: 6px; }
html[dir="rtl"] .roster-row.current::before { left: auto; right: -2px; }
@media (max-height:700px) and (orientation:landscape) {
  .home-screen { height: auto; min-height: 100dvh; }
  .home-header { min-height: 60px; padding-block: 8px; }
  .home-layout { align-items: start; padding-block: 16px; }
  .faction-grid { max-height: none; }
  .seal { min-height: 43px; font-size: 10px; }
  .language-control { gap: 4px; font-size: 11px; }
  .language-control select { min-width: 78px; padding: 3px 5px; }
  .home-header .language-control > span { display: none; }
  .faction-story { font-size: 12px; line-height: 1.55; margin-block: 8px; }
  html[lang="ar"] .home-copy h1 { font-size: 31px; line-height: 1.4; }
  html[lang="en"] .home-copy h1 { font-size: 33px; }
  html[lang="ar"] :is(.command-panel,.hero-card-info,.roster-row) { font-size: 12px; }
}
@media (orientation:portrait) and (max-width:800px) {
  .home-header nav { justify-content: flex-start; }
  .home-header .language-control { flex-basis: 100%; }
  .faction-story { max-width: none; font-size: 13px; }
  html[lang="ar"] .home-copy h1 { line-height: 1.45; }
  .character-story { padding-block-end: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* WeChat's portrait WebView leaves a short virtual landscape viewport. */
@media (max-height: 520px) and (orientation: landscape) {
  .home-screen, .manual-landscape .home-screen {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .home-header { min-height: 0; height: auto; padding-block: 4px; flex-wrap: nowrap; gap: 8px; }
  .home-header .wordmark { font-size: 15px; }
  .home-header nav { flex: 1; min-width: 0; gap: 2px; }
  .home-header nav button { padding: 4px 5px; min-height: 28px; }
  .home-layout { height: 100%; min-height: 0; margin: 0; padding-block: 6px; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .home-copy { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .home-copy h1, html[lang="en"] .home-copy h1, html[lang="ar"] .home-copy h1 {
    font-size: 22px; line-height: 1.2; margin-block: 0 4px;
  }
  .home-copy .faction-story { display: none; }
  .faction-grid { height: 100%; min-height: 0; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .home-footer { height: auto; min-height: 18px; line-height: 1.3; }
  .dialog { min-height: 0; max-height: calc(100dvh - 12px); }
  .dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}