/* The Lakbay card pages: /games/lakbay/cards/ and /games/lakbay/cards/<slug>/. Classes start with lc-.
   Layout in the site's own tokens, so light and dark follow the site. The printed cards are lakbay-card.css. */
.lc { max-width: 1100px; display: grid; gap: 16px; min-width: 0; }
.lc > * { min-width: 0; }
.lc h1 { font: 800 clamp(28px, 5vw, 42px)/1.1 var(--display); color: var(--txt-hi); margin: 0; }
.lc-crumb { margin: 0; font: 500 12px var(--mono); color: var(--txt-3); }
.lc-crumb a { color: var(--link); font-weight: 600; }
.lc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.lc-search { flex: 0 1 260px; min-width: 200px; }
.lc-search input { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--txt); font: 500 var(--fld) var(--ui); }
/* text tabs: the row's line is a shadow, so the active tab's underline sits on top of it */
.lc-chips { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--line); }
.lc-chip { flex: none; height: 44px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--txt-2); font: 500 15px var(--ui); cursor: pointer; }
.lc-chip:hover { color: var(--txt-hi); }
.lc-chip:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.lc-chip[aria-pressed=true] { color: var(--txt-hi); border-bottom-color: var(--link); }
.lc :focus-visible { outline: 2px solid var(--tang); outline-offset: 2px; }
.lc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 18px 12px; justify-items: center; }
.lc-tile { position: relative; display: grid; align-content: start; gap: 1px; justify-items: center; text-align: center; color: var(--txt); padding-bottom: 4px; min-width: 0; width: 100%; }
.lc-tile:hover { text-decoration: none; }
.lc-tile[hidden] { display: none; }
.lc-tile b { margin-top: 8px; font: 700 13.5px var(--ui); color: var(--txt-hi); }
.lc-tile small { font-size: 11.5px; color: var(--txt-2); }
.lc-tile small.lc-t-espesyal, .lc-pill.lc-t-espesyal { color: var(--tang-ink); font-weight: 700; }
.lc-tile small.lc-t-bihira, .lc-pill.lc-t-bihira { color: var(--sun-ink); font-weight: 600; }
.lc-tile small.lc-t-karaniwan, .lc-pill.lc-t-karaniwan { color: var(--aqua-ink); font-weight: 600; }
.lc-tile small.lc-t-mutya, .lc-pill.lc-t-mutya { color: var(--rose); font-weight: 600; }
/* the site's grape is closer to blue, so Legend has its own purple */
.lc { --legend: #7e22ce; }
:root[data-theme="dark"] .lc { --legend: #c084fc; }
.lc-tile small.lc-t-alamat, .lc-pill.lc-t-alamat { color: var(--legend); font-weight: 600; }
.lc-mini { display: block; height: 204px; width: 146px; }
.lc-mini .card { zoom: .52; --rest-x: 0deg; --rest-y: 0deg; }
.lc-mini .gs { display: none; }
.lc-own { position: absolute; top: 0; right: 4px; padding: 1px 8px; border-radius: 99px; background: var(--ok); color: #fff; font: 700 10.5px var(--ui); }
.lc-own[hidden] { display: none; }
.lc-none { margin: 0; color: var(--txt-2); }
.lc-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 99px; background: var(--tang); color: var(--tang-on); font: 700 14px var(--ui); }
.lc-btn:hover { text-decoration: none; filter: brightness(.96); }
/* one card */
.lc-dt { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 28px; align-items: start; }
.lc-dt > * { min-width: 0; }
.lc-stage { display: grid; place-items: center; min-height: 420px; padding: 20px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.lc-big { max-width: 100%; height: auto; border-radius: 14px; }
.lc-term { font-size: clamp(28px, 4.5vw, 36px); }
.lc-pos { margin: 4px 0 0; font: 500 12px var(--mono); color: var(--txt-2); }
.lc-tag { margin: 8px 0 0; font-style: italic; color: var(--txt-2); }
.lc-def { margin: 10px 0 0; font-size: 16px; }
.lc-pill { display: inline-block; padding: 2px 9px; border-radius: 99px; background: var(--sunk); font: 700 12px var(--ui); }
.lc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 14px 0 0; padding: 14px 0; border-block: 1px solid var(--line); }
.lc-facts dt { font: 500 11px var(--mono); color: var(--txt-3); }
.lc-facts dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--txt-hi); }
.lc-wide { grid-column: 1 / -1; }
.lc-own-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.lc-own-note[hidden] { display: none; }
.lc-sub { margin: 18px 0 8px; font: 700 15px var(--display); color: var(--txt-hi); }
.lc-copies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.lc-copies li { padding: 7px 2px; border: 1px dashed var(--line); border-radius: 7px; text-align: center; font-size: 10.5px; color: var(--txt-3); }
.lc-copies b { display: block; font: 500 13px var(--mono); color: var(--txt-2); }
.lc-copies li.held { border-style: solid; background: var(--sunk); }
.lc-copies li.held b { color: var(--txt-hi); }
.lc-copies li.later { opacity: .55; }
.lc-copies li.mine { border-color: var(--ok); background: var(--ok-bg); }
.lc-copies li.mine span { color: var(--ok); font-weight: 700; }
.lc-copies.dense { grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 3px; }
.lc-copies.dense li { padding: 3px 0; border-radius: 4px; }
.lc-copies.dense b { font-size: 9.5px; }
.lc-copies.dense span { display: none; }
.lc-fine { margin: 8px 0 0; font-size: 12px; color: var(--txt-3); }
.lc-rel { margin: 0; }
.lc-rel a { color: var(--link); font-weight: 600; }
@media (max-width: 760px) {
  .lc-dt { grid-template-columns: minmax(0, 1fr); }
  .lc-facts { grid-template-columns: minmax(0, 1fr); }
  .lc-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}