/* Compact layout: phones, tablets and narrow windows (body.compact, set by main.js).
   Everything here is scoped to body.compact, so the desktop layout in style.css is untouched. */

body.compact { --top-h: 112px; --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); --st: env(safe-area-inset-top, 0px); }
body.compact #legend, body.touch #legend { display: none; }
body.compact #decks, body.compact #btn-help { display: none; }
body.compact #btn-menu { display: inline-flex; align-items: center; justify-content: center; }
body.compact #top { flex-wrap: wrap; gap: .35rem; padding: max(.4rem, var(--st)) max(.6rem, var(--sr)) .2rem max(.6rem, var(--sl)); }
body.compact .brand { flex: 1 1 0; }
body.compact .brand b { font-size: 1rem; letter-spacing: .2em; }
body.compact .brand span { font-size: .64rem; }
body.compact .tools { flex: 0 0 auto; gap: .3rem; }
body.compact .tools .tool { min-width: 44px; min-height: 44px; padding: 0 .7em; font-size: 1.05rem; }
#drawer-close { min-width: 44px; min-height: 44px; }
body.compact #modes { order: 3; flex-basis: 100%; }
body.compact #modes button { flex: 1; justify-content: center; min-height: 44px; padding: 0 .4em; }
body.compact #modes button kbd { display: none; }

body.compact #deck-chip { position: fixed; z-index: 10; left: max(.6rem, var(--sl)); top: calc(var(--top-h) + 4px); min-height: 44px; padding: 0 .9em; font-size: .9rem; }
body.compact.mode-walk #deck-chip { display: inline-flex; align-items: center; gap: .5em; }
body.compact.mode-walk #deck-chip::after { content: "\25BE"; color: var(--dim); }
body.compact #minimap { width: 130px; top: calc(var(--top-h) + 4px); bottom: auto; right: max(.6rem, var(--sr)); }
body.compact #hint { top: calc(var(--top-h) + 56px); max-width: 80vw; text-align: center; }

/* touch controls: thumb-sized, clear of the notch and the home bar */
body.compact #stick { left: max(1.2rem, var(--sl)); bottom: max(1.8rem, calc(var(--sb) + .8rem)); }
body.compact #touch-vert { right: max(1.2rem, var(--sr)); bottom: max(1.8rem, calc(var(--sb) + .8rem)); }
body.compact #touch-vert button { width: 60px; height: 60px; }

/* showcase caption: a slim card along the bottom edge, collapsible, never over the middle */
body.compact #caption { left: max(.5rem, var(--sl)); right: max(.5rem, var(--sr)); bottom: max(.5rem, var(--sb)); transform: none; width: auto;
  padding: .4rem .5rem; gap: .4rem; background: rgba(12, 16, 22, .66); }
body.compact #caption button.round { width: 44px; height: 44px; }
body.compact #caption h3 { font-size: .98rem; margin: 0; }
body.compact #caption p { font-size: .82rem; line-height: 1.4; margin-top: .15em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.compact #caption.min p { display: none; }
body.compact #caption .cap-main { min-width: 0; }

/* the drawer: one sheet for decks, the showcase list, view toggles and help */
body.compact #drawer { display: flex; flex-direction: column; position: fixed; z-index: 30; background: rgba(14, 19, 26, .96); border: 1px solid var(--line);
  backdrop-filter: blur(12px); transition: transform .28s cubic-bezier(.2, .8, .2, 1); visibility: hidden; }
body.compact #drawer.open { transform: none !important; visibility: visible; }
.drawer-head { display: flex; align-items: center; gap: .4rem; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.drawer-tabs { display: flex; gap: .25rem; flex: 1; min-width: 0; overflow-x: auto; }
.drawer-tabs button { flex: 1; min-height: 44px; padding: 0 .7em; background: none; border: 1px solid transparent; border-radius: 6px; white-space: nowrap; }
.drawer-tabs button.on { background: rgba(255, 180, 84, .18); border-color: var(--accent); color: var(--accent); }
.drawer-body { flex: 1; overflow-y: auto; padding: .5rem .6rem calc(.6rem + var(--sb, 0px)); }
.drawer-body section { display: none; }
.drawer-body section.on { display: block; }
#drawer #decks { display: flex; position: static; transform: none; gap: .4rem; }
#drawer #decks button { min-height: 52px; font-size: 1rem; }
#drawer #poi-panel { position: static; display: flex; width: auto; background: none; border: 0; backdrop-filter: none; }
#drawer #poi-panel.hidden { display: flex !important; }
#drawer .panel-head { padding: 0 0 .4rem; border: 0; }
#drawer .panel-head h2 { display: none; }
#drawer #btn-tour { min-height: 44px; margin-left: auto; }
#drawer #poi-list { overflow: visible; padding: 0; }
#drawer #poi-list li { min-height: 48px; align-items: center; font-size: 1rem; }
#drawer .toggle-list { display: flex; flex-direction: column; gap: .4rem; }
#drawer .toggle-list button { min-height: 52px; text-align: left; padding: 0 1em; font-size: 1rem; }
#drawer .help-cols { grid-template-columns: 1fr; }
#drawer .help-cols p { font-size: .88rem; }

@media (orientation: portrait) {
  body.compact #drawer { left: 0; right: 0; bottom: 0; height: min(62vh, 540px); border-radius: 14px 14px 0 0; transform: translateY(105%); }
}
@media (orientation: landscape) {
  body.compact { --top-h: 56px; }
  body.compact #top { flex-wrap: nowrap; align-items: center; }
  body.compact #modes { order: 0; flex-basis: auto; }
  body.compact #modes button { padding: 0 1.1em; }
  body.compact .brand span { display: none; }
  body.compact .brand { flex: 0 1 auto; margin-right: auto; }
  body.compact #minimap { width: 120px; }
  body.compact #caption { right: auto; width: min(58vw, 560px); }
  body.compact #caption p { -webkit-line-clamp: 2; }
  body.compact #drawer { top: var(--top-h); right: 0; bottom: 0; width: min(46vw, 420px); border-radius: 14px 0 0 0; transform: translateX(105%); }
  body.compact #hint { top: calc(var(--top-h) + 8px); }
}

body.touch .help-kb { display: none; }
body.touch #drawer .help-cols p { font-size: .95rem; line-height: 1.6; }