/* v0.69 LANDSCAPE ONLY (the owner, 2026-10-27) — a phone held either way gets a landscape screen (js/land.js turns an upright one).
   This sheet lays the game out for that SHORT screen (844x390 iPhone 14 .. 740x360 small Android): Codex concept
   tools/mock/redesign/landscape (L_field / L_panel / L_map / L_chat, spec.md). The world stays visible; a slim icon rail on the left
   replaces the bottom dock; panels use the full height; the chat is a see-through drawer on the right. PC (taller screens) unchanged. */
@media (max-height: 640px), (max-width: 1100px) { /* v0.72.1: was max-height 500px; a narrow window is small too */
  /* ---- the icon rail (was the bottom dock) ---- */
  html.land body #v2dock { left: 0 !important; top: 0 !important; bottom: 0 !important; right: auto !important; width: 52px; transform: none !important; zoom: 1 !important;
    flex-direction: column; justify-content: center; gap: 2px; padding: 6px 0; border-radius: 0; box-shadow: 1px 0 0 #0005; }
  html.land body #v2dock button { flex: 0 0 auto !important; width: 52px !important; height: 38px; padding: 0 !important; justify-content: center; font-size: 0 !important; gap: 0; position: relative; }
  html.land body #v2dock button svg { width: 22px; height: 22px; }
  html.land body #v2dock button.on { box-shadow: inset 3px 0 0 var(--org); }
  html.land body #v2dock .more-only { display: flex !important; }
  html.land body #v2dock .more, body #v2dock .dmore { display: none !important; }
  html.land body #v2dock .dbadge { top: 2px; right: 6px; font-size: 10px; }

  /* ---- panels: full height next to the rail, compact one-line header ---- */
  html.land body #inst { left: 58px !important; right: 6px !important; top: 6px !important; bottom: 6px !important; width: auto !important; max-height: none !important;
    transform: none !important; zoom: 1 !important; border-radius: 4px; }
  html.land body #inst > * { zoom: .82; }
  html.land body #inst .ihead { padding: 4px 8px 4px 12px; gap: 10px; min-height: 0; }
  html.land body #inst .ihead h1 { font-size: 22px; }
  html.land body #inst .ihead .x { width: 34px; height: 34px; }
  html.land body #inst .ibody { padding: 8px 12px 10px; }

  /* ---- field HUD (L_field): small corner cards, the centre free for the world ---- */
  html.land body #v2hud { zoom: 1 !important; }
  html.land body #v2hud .fld { left: 52px; }
  html.land body #v2hud .ftop { left: auto !important; right: 6px !important; top: 6px !important; height: 40px !important; gap: 12px !important; padding: 0 10px !important; zoom: .85; }
  html.land body #v2hud .flogo, body #v2hud .facct { display: none !important; }
  html.land body #v2hud .floc { left: 6px !important; top: 6px !important; min-width: 0 !important; max-width: 300px; padding: 5px 10px !important; zoom: .8; }
  html.land body #v2hud .floc b { font-size: 19px; }
  html.land body #v2hud .fgoal { right: 6px !important; top: 54px !important; width: 270px !important; padding: 6px 10px 8px !important; zoom: .8; max-height: calc((100vh - 62px) * 1.25); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
  /* 7.10.2 (the owner: long quest names hid "Go there" and the card would not scroll): the card scrolls, its buttons stay pinned */
  html.land body #v2hud .fgoal .fgrow b { font-size: 14px !important; line-height: 1.2; }
  html.land body #v2hud .fgoal .fgos { position: sticky !important; bottom: -8px; margin: 6px -10px -8px !important; padding: 6px 10px 8px; background: var(--shell); z-index: 1; }
  html.land body #v2hud .fpcard { left: 6px !important; right: auto !important; bottom: 6px !important; width: 300px !important; padding: 8px !important; zoom: .78; }
  html.land body #v2hud .fhunt { display: flex !important; left: 248px !important; right: auto !important; bottom: 6px !important; top: auto !important; width: auto !important; zoom: .78; }
  html.land body #v2hud .ftownnote { left: 6px !important; top: 66px !important; zoom: .8; }

  /* ---- chat (L_chat): a see-through drawer on the right; the field stays visible behind it ---- */
  html.land body.v2 #chat { left: auto !important; right: 6px !important; top: 52px !important; bottom: 6px !important; width: 300px; zoom: 1 !important; } /* under the Tamer bar */
  html.land body.v2.v2open #chat { top: 6px !important; } /* over a panel: full height */
  html.land body.v2 #chat .ch-panel { width: 100% !important; height: 100% !important; background: #0d162659 !important; border-color: #3a5a8a66 !important; }
  html.land body.v2 #chat .ch-panel:focus-within { background: #0d16268c !important; }
  html.land body.v2 #chat .ch-log { font-size: 12px; }

  /* ---- map (the owner: "map on the left, the menu on the right"): the map fills the left, the picked place's card is a column on the right ---- */
  html.land body #inst.mapwin .ibody.mp2 { flex-direction: row; align-items: stretch; height: 100%; overflow: hidden; gap: 8px; }
  html.land body #inst.mapwin .mpstage { flex: 1 1 auto; height: auto !important; min-width: 0; }
  html.land body #inst.mapwin .mpstrip2 { flex: 0 0 340px; overflow-y: auto; overscroll-behavior: contain; }
  html.land body #inst.mapwin .mpstrip2 .mpline { flex-direction: column; align-items: stretch; gap: 6px; }

  /* ---- the world under the HUD starts right of the rail; field bosses = one row of small chips (sprite + count) under the location card ---- */
  html.land body.v2 #field { left: 52px !important; }
  html.land body.v2 #field > .bosshud { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; gap: 4px; left: 6px !important; right: auto !important; transform: none !important;
    max-width: 52% !important; scrollbar-width: none; }
  html.land body.v2 #field > .bosshud .bh { flex: none; flex-direction: column; gap: 0; padding: 2px 3px !important; border-width: 1px !important; border-radius: 6px !important; min-width: 40px; }
  html.land body.v2 #field > .bosshud .bh img { width: 28px !important; height: 28px !important; }
  html.land body.v2 #field > .bosshud .bh > span { display: none !important; }
  html.land body.v2 #field > .bosshud .bhc { display: block; font: 700 9px/1 var(--mono, monospace); font-style: normal; color: #ffd8d0; text-align: center; }
  html.land body.v2 #field > .bosshud .bh.ready .bhc { color: #ffd34a; }

  /* ---- crowded maps (raid + field bosses + wilds): smaller sprites, one-line small name tags (army / role tag dropped) ---- */
  html.land body.v2 #field .wander .wbox { width: calc(66px * var(--sz, 1)) !important; height: calc(66px * var(--sz, 1)) !important; }
  html.land body.v2 #field .wander .lbl { font-size: 10px !important; padding: 0 5px !important; }
  html.land body.v2 #field .wander .lbl em { display: none; }
  html.land body.v2 #field .wander.boss img, body.v2 #field .wander.raidboss img { filter: drop-shadow(0 0 4px #ff4060) !important; }

  /* ---- v0.69 the owner: "boss icons WAY smaller", "Auto Hunt widget WAAAY smaller, the screen is cluttered" ---- */
  html.land body.v2 #field .wander.boss .wbox, html.land body.v2 #field .wander.raidboss .wbox { width: 52px !important; height: 52px !important; }
  html.land body.v2 #field > .bosshud .bh { min-width: 30px; }
  html.land body.v2 #field > .bosshud .bh img { width: 20px !important; height: 20px !important; }
  html.land body.v2 #field > .bosshud .bhc { font-size: 8px; }
  html.land body #v2hud .fhunt { zoom: 1 !important; padding: 3px 8px !important; gap: 6px !important; min-height: 0 !important; height: 26px; align-items: center; display: flex !important;
    left: 172px !important; bottom: 6px !important; }
  html.land body #v2hud .fhunt .fhh small, html.land body #v2hud .fhunt .fhint { display: none !important; }
  html.land body #v2hud .fhunt .fhh b, html.land body #v2hud .fhunt .fst { font-size: 11px !important; letter-spacing: .04em; }
  html.land body #v2hud .fhunt .fsw { transform: scale(.7); transform-origin: center; margin: 0 -4px; }
  html.land body #v2hud .fpcard { width: 220px !important; zoom: .7 !important; }
  html.land body #v2hud .fpcard .fpface { width: 54px !important; height: 54px !important; }
  html.land body #v2hud .floc .fspd { display: none !important; }

  /* v0.71.1 (a Samsung A55): the partner's portrait stays inside its square; the "N here" chip never sits on the map name */
  html.land body #v2hud .fpcard .fpface { overflow: hidden; display: grid !important; place-items: center; }
  html.land body #v2hud .fpcard .fpface img { max-width: 50px !important; max-height: 50px !important; width: auto; height: auto; object-fit: contain; }
  html.land body #v2hud .floc { padding-right: 88px !important; }

  /* v0.72.1 (the owner: "the NPC menus need adapting"): two-column panels become list -> detail (tap a row, ‹ goes back) */
  html.land #inst .ws2 { grid-template-columns: 1fr !important; height: calc(100% - 60px) !important; }
  html.land #inst .ws2:not(.detail) .wdet { display: none !important; }
  html.land #inst .ws2.detail .wcol { display: none !important; }
  html.land #inst .ws2.detail .wdet { display: block !important; }
  html.land #inst .ws2 .wcol { min-height: 0; overflow-y: auto; }
  html.land #inst .gearw { grid-template-columns: 1fr !important; }
  html.land #inst .gearw:not(.detail) .wdet { display: none !important; }
  html.land #inst .gearw.detail .doll, html.land #inst .gearw.detail .bagc { display: none !important; }
  html.land #inst .gearw.detail .wdet { display: block !important; }
  html.land #inst .ibody > .tabs, html.land #inst .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html.land #inst .ibody > .tabs button, html.land #inst .filters .fb { white-space: nowrap; flex: none; }
}
/* ---- v0.72.1 (the owner, 2026-10-28: "the town menu is HUGE", "no craft, no tamer synth, no hatching, no cloning" on a phone,
   "swiping is not optimal", "enlarge the screen and they appear"): every NPC panel's action is on screen without scrolling,
   at every window size. Not tied to the landscape mode. ---- */

/* the DATS services fold into one Services button (a grid opens under it) unless the window is very wide: the full bar used to
   push the NPC panel past the right edge on anything under ~1700 px (a 1280x720 laptop never saw DATS Lab or the Tamer Hall) */
@media (max-width: 1700px), (max-height: 640px) {
  #inst.walkmode .wkbar { position: relative; flex-wrap: wrap; overflow: visible !important; max-width: min(560px, calc(100% - 12px)) !important; gap: 10px; padding: 4px 8px; }
  #inst.walkmode .wkmenu { display: inline-flex !important; }
  #inst.walkmode .wkbar:not(.open) .wksv { display: none !important; }
  #inst.walkmode .wkbar.open .wksv { position: absolute; left: -4px; top: calc(100% + 4px); width: min(560px, calc(100vw - 72px)); max-height: calc(100vh - 90px);
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 4px; overflow-y: auto; overflow-x: hidden; padding: 6px;
    background: #132B36f5; border-left: 4px solid var(--org); box-shadow: 0 4px 0 #0005; overscroll-behavior: contain; z-index: 5; }
  #inst.walkmode .wkbar.open .wks { min-width: 0; padding: 6px 4px; }
  #inst.walkmode .wkbar.open .wks span { white-space: normal; text-align: center; line-height: 1.1; }
  #inst.walkmode .wktip { display: none; }
}
#inst.walkmode .wkmenu { display: none; align-items: center; gap: 6px; border: 1px solid var(--org); background: var(--org); color: #fff; font: 700 13px var(--hd); letter-spacing: .04em;
  text-transform: uppercase; padding: 6px 12px; cursor: pointer; }
#inst.walkmode .wkmenu b { background: #0003; padding: 0 6px; border-radius: 8px; font-size: 11px; }

/* action bars stick to the bottom of their scrolling panel (Craft, Inject / Hatch, Transcend, Synthesise...), and scroll areas show a bar */
#inst .craftbar { position: sticky; bottom: 0; z-index: 3; background: var(--paper); padding-top: 6px; padding-bottom: 6px; box-shadow: 0 -6px 8px -6px #0004; }
#inst .tsel { position: sticky; bottom: 0; z-index: 3; background: var(--paper); box-shadow: 0 -6px 8px -6px #0004; }
#inst :is(.tnb, .wdet, .wcol, .wlist, .rlist, .clist2) { scrollbar-width: thin; scrollbar-color: var(--org) #0001; }
#inst :is(.tnb, .wdet, .wcol, .wlist, .rlist, .clist2)::-webkit-scrollbar { width: 6px; display: block; }
#inst :is(.tnb, .wdet, .wcol, .wlist, .rlist, .clist2)::-webkit-scrollbar-thumb { background: var(--org); border-radius: 3px; }
/* DATS Lab rows: name | bar | odds | Clone, squeezed to the panel instead of running past its edge */
#inst .crow2 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr) auto !important; }
#inst .crow2 > * { min-width: 0; overflow-wrap: anywhere; }

/* the lab animations (clone / hatch / scan chamber) shrink on short windows so the controls under them fit */
@media (max-height: 820px) { #inst .chamber { zoom: .6; } }
@media (max-height: 640px), (max-width: 1100px) {
  #inst .chamber { zoom: .42; }
  #inst .tnb button .tface { width: 30px; height: 30px; }
}

/* v0.72.2 (the owner: "clicked the Tamer Hall, I can't see the window"): a window opened during a talk was capped at 100vh - 340px
   (72 px on a phone). On small screens it gets the whole panel area; js/v2/ui.js also closes the talk there. */
@media (max-height: 640px), (max-width: 1100px) {
  #inst.town:has(.tkscene) .tnpc { top: 6px !important; bottom: 6px !important; right: 6px !important; max-height: none !important; }
}
/* v0.72.2: lists capped at "screen height minus N px" collapse on short screens (Item Make / Nanomon showed a 30 px list on a
   360 px phone); there the whole panel body scrolls instead */
@media (max-height: 640px), (max-width: 1100px) {
  #inst .mklist { max-height: none !important; overflow: visible !important; }
  #inst .zgrid { max-height: none !important; min-height: 0 !important; overflow: visible !important; }
}
/* v0.72.3 (the owner: "on mobile we can't touch the Digimon spawning overworld"): the closed chat kept an invisible 300x354 box on the
   right of the field that swallowed taps; closed, it lets every tap through (the dock's Chat button opens it) */
#chat.collapsed { pointer-events: none !important; }
/* v0.72.3: the Archive's search / role / Sort row wraps instead of scrolling, so Sort is always on screen */
#inst .filters.tafl { flex-wrap: wrap !important; overflow: visible !important; gap: 4px; }
#inst .filters.tafl .search { flex: 1 1 160px; min-width: 0; }
#inst .filters.tafl select { flex: none; }
/* v0.73: the rail holds 10 buttons with Full screen; on the shortest phones (360 px) they share the height */
@media (max-height: 640px), (max-width: 1100px) {
  html.land body #v2dock button { height: min(38px, calc((100vh - 34px) / 10)) !important; }
}
/* v0.73.1 BACK (the owner: "all menus are missing a back button"): the header ‹ was display:none everywhere except old portrait
   phones; it shows whenever there is a step to go back to (js/v2/ui.js navMark sets its visibility) */
#inst .ihead .back, #inst .tnh .back { display: inline-flex !important; align-items: center; justify-content: center; min-width: 34px; min-height: 30px; font-size: 20px; line-height: 1; }
#inst .tnh .back { margin-right: 6px; }