/* EPIC Overview. The screens copy the canvas boards (inline styles in the view code);
   this file holds the page frame and the phone / tablet-portrait rearrangements. */
@import url('../assets/fonts/fonts.css');

html, body { margin: 0; height: 100%; background: #211710; }
body { color: #eadfc8; font-family: 'EB Garamond', Georgia, serif; -webkit-tap-highlight-color: transparent; }
a { color: #ead08a; }
a:hover { color: #fff1c9; }
button { font: inherit; cursor: pointer; }
button[aria-disabled="true"] { cursor: default; }
:focus-visible { outline: 3px solid #ead08a; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

#app { height: 100%; }
* { scrollbar-width: thin; scrollbar-color: #5a4330 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #5a4330; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
.k-root { height: 100vh; height: 100dvh; width: 100%; }

/* status line (errors from the rules, connection) */
.k-status { position: fixed; left: 50%; top: 76px; transform: translateX(-50%); z-index: 40; max-width: min(640px, 92vw);
  padding: 10px 16px; border-radius: 10px; background: #8d2a22; color: #fbe9cf; font: 600 16px 'Barlow Semi Condensed', sans-serif;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.k-status.k-offline { background: #47385a; }

/* ---- tablet portrait and small laptops ---- */
@media (max-width: 1100px) {
  .k-relations { grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: max-content; align-content: start; }
  .k-relations > section { min-height: auto !important; }
  .k-houses { grid-template-columns: minmax(0, 1fr) !important; }
  .k-housegrid { grid-template-rows: none !important; }
  /* the nine seats no longer fit side by side: they keep the tablet size and scroll sideways */
  .k-seats { display: flex !important; overflow-x: auto; }
  .k-seats .k-seat { flex: 0 0 128px; }
}

/* ---- phones ---- */
@media (max-width: 760px) {
  /* header, tabs: board "A-Phone" */
  .k-header { height: 60px !important; padding: 0 12px 0 16px !important; gap: 10px !important; }
  .k-header:has(.k-phonetitle) .k-roundbox, .k-header:has(.k-phonetitle) .k-spacer { display: none !important; }
  .k-phonetitle, .k-phoneround { display: block !important; }
  .k-roundbox > div:first-child { width: 40px !important; height: 40px !important; font-size: 19px !important; }
  .k-playing { flex: none; width: 48px; padding: 0 !important; justify-content: center; border-radius: 50% !important; }
  .k-playing img { width: 34px !important; height: 34px !important; }
  .k-playing-text, .k-playing svg { display: none; }
  .k-seats { display: none !important; }
  .k-dup { display: none; } /* the top bar already names the view */
  /* Diplomacy 2 table: sigil only, texts wrap */
  .k-d2row { grid-template-columns: 22px minmax(0, 1fr) 40px minmax(0, 1fr) 34px !important; gap: 6px !important; padding: 2px 0; }
  .k-d2name { display: none; }
  .k-d2house { visibility: hidden; }
  .k-wrap { white-space: normal !important; }
  /* card rows (Westeros 2, deck steps): two cards per row */
  .k-cards > figure { flex: 0 1 calc(50% - 7px); }
  .k-cards > figure > img { width: 100% !important; height: auto !important; }
  .k-main { padding: 10px 12px !important; overflow: auto !important; }
  .k-steprow { height: auto !important; }
  .k-steprow .k-fade { display: none !important; }
  .k-steprow > button { flex: 1 !important; min-width: 0 !important; }
  .k-article { margin: 4px !important; padding: 12px 14px !important; overflow: visible !important; flex: none !important; }
  .k-body { overflow: visible !important; }
  .k-stephead { flex-direction: column; align-items: flex-start !important; }
  .k-stephead h1 { font-size: 26px !important; }
  .k-mode { max-width: none !important; }
  .k-split { grid-template-columns: minmax(0, 1fr) !important; }
  .k-cards { flex-wrap: wrap; }
  .k-queue { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; row-gap: 6px !important; }
  .k-substeps, .k-guidesteps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .k-options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .k-footer { flex-wrap: wrap; }
  .k-footer > * { flex: 1 1 100% !important; min-width: 0 !important; }
  .k-guidehead { flex-wrap: wrap; }
  .k-guidehead h2 { flex: 1 1 auto; }
  .k-kinds { order: 3; flex: 1 1 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-tabs a { font-size: 13px !important; padding: 0 1px; }
  .k-housegrid { grid-template-columns: minmax(0, 1fr) !important; }
  .k-decks { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .k-abilities { grid-template-columns: minmax(0, 1fr) !important; }
  .k-bank { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .k-owerow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .k-marketgrid { grid-template-columns: minmax(0, 1fr) !important; }
  .k-logrow { grid-template-columns: 44px minmax(0, 1fr) !important; row-gap: 2px !important; padding: 6px 0 !important; }
  .k-logrow > span:nth-child(2) { grid-column: 2; }
  .k-logrow > span:nth-child(3) { grid-column: 1 / -1; }
  .k-logrow > span:nth-child(4), .k-logrow > span:nth-child(5) { grid-column: 2; justify-content: flex-start !important; }
}

/* Spend Gold: ten tiles in two rows */
.k-buy button { font-size: 14px !important; padding: 4px 7px !important; }

/* ---- replays: the bar under the screens (views/replay.js) ---- */
body.k-replaying { --rb-h: 104px; }
body.k-replaying .k-root { height: calc(100vh - var(--rb-h)); height: calc(100dvh - var(--rb-h)); }
#replaybar:empty { display: none; }
.k-replaybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--rb-h); box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 20px;
  background: #140d08; border-top: 2px solid #c9a24c; color: #eadfc8; font-family: 'Barlow Semi Condensed', sans-serif; }
.k-rb-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.k-rb-badge { flex: none; padding: 2px 10px; border-radius: 99px; background: #c9a24c; color: #211710; font-weight: 600; font-size: 14px; }
.k-rb-title { min-width: 0; font: 600 18px 'EB Garamond', Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-rb-status { color: #b9a88a; font: 500 15px 'Barlow Semi Condensed', sans-serif; }
.k-rb-spacer { flex: 1; }
.k-rb-link { flex: none; min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: 15px; }
.k-rb-exit { flex: none; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid #5a4330; background: #3b2a1d; color: #eadfc8;
  font: 600 15px 'Barlow Semi Condensed', sans-serif; }
.k-rb-controls { flex: none; display: flex; gap: 4px; }
.k-rbtn { width: 44px; height: 44px; padding: 0; border-radius: 10px; border: 1px solid #5a4330; background: #2b1f16; color: #eadfc8;
  display: flex; align-items: center; justify-content: center; }
.k-rb-seek { flex: 1; min-width: 120px; height: 44px; margin: 0; accent-color: #c9a24c; }
.k-rb-now { flex: 0 1 400px; min-width: 0; margin: 0; font-size: 15px; line-height: 1.2; color: #b9a88a; }
.k-rb-now strong { color: #eadfc8; }
.k-rb-sum { display: block; color: #eadfc8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a replay shows the past: controls that would change the game look inert (app.js refuses them) */
body.k-replaying #app [data-act]:not([data-act^="ui/"]):not([data-act^="replay/"]):not([data-act^="games/"]):not([data-act="house/choose"]) { opacity: .55; cursor: not-allowed; }
@media (max-width: 760px) {
  body.k-replaying { --rb-h: 148px; }
  .k-replaybar { padding: 6px 10px; gap: 2px; }
  .k-rb-row { gap: 8px; }
  .k-rb-status { display: none; }
  .k-rb-title { font-size: 16px; }
  .k-replaybar .k-rb-row:last-child { flex-wrap: wrap; row-gap: 0; }
  .k-rb-seek { order: 3; flex: 1 1 100%; height: 36px; }
  .k-rb-now { flex: 1 1 0; font-size: 14px; }
  .k-rbtn { width: 40px; }
}