/* panels.css — the BUY shop and the TRADE screen.
   OWNS: every style for #tiShop and #tiTrade (all classes are `ti-` prefixed so
   nothing here can collide with game.css). Must NOT own: markup (shop.js /
   trade.js build it programmatically), the HUD, the lobby, or the 3D canvas.

   Tokens are docs/13-art-direction.md §7, verbatim:
     border 3px solid #14202E · radius 16px buttons / 20px panels
     depth  0 6px 0 rgba(0,0,0,.30) · gloss inset 0 3px 0 rgba(255,255,255,.35)
     press  translateY(4px) -> 0 2px 0 · font weight 900
   Sizing is docs/11 §6b: body >=18px, buttons >=24px, touch targets >=56px,
   nothing within 40px of a screen edge. */

:root {
  --ti-ink: #14202E;
  --ti-panel-bg: linear-gradient(180deg, #2E3C4E 0%, #22303F 100%);
  --ti-card-bg: linear-gradient(180deg, #3A4A5E 0%, #2A3849 100%);
  --ti-depth: 0 6px 0 rgba(0, 0, 0, .30);
  --ti-depth-lg: 0 10px 0 rgba(0, 0, 0, .35), 0 22px 40px rgba(0, 0, 0, .45);
  --ti-gloss: inset 0 3px 0 rgba(255, 255, 255, .35);
  --ti-gold: linear-gradient(#FFDF70, #F5B723);
  --ti-green: linear-gradient(#8BE86B, #3FBF3F);
  --ti-blue: linear-gradient(#6ED0F6, #2AA7E8);
  --ti-red: linear-gradient(#F98C7F, #E8503A);
  --ti-dark: linear-gradient(#4A5C74, #2E3C4E);
  --tier: #B8C4CE;
}

.ti-hidden { display: none !important; }

/* ---------------------------------------------------------------- panel -- */
.ti-panel {
  position: fixed;
  top: 40px; right: 40px; bottom: 40px; left: 40px;
  top: max(40px, env(safe-area-inset-top, 0px));
  left: max(40px, env(safe-area-inset-left, 0px));
  right: max(40px, env(safe-area-inset-right, 0px));
  bottom: max(40px, env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--ti-panel-bg);
  border: 3px solid var(--ti-ink);
  border-radius: 20px;
  box-shadow: var(--ti-depth-lg);
  font-family: "Arial Black", "Segoe UI Black", Verdana, sans-serif;
  font-weight: 900;
  color: #fff;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}

/* ----------------------------------------------------------------- head -- */
.ti-head {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #46586E 0%, #33445A 100%);
  border-bottom: 3px solid var(--ti-ink);
  box-shadow: var(--ti-gloss);
  flex: 0 0 auto;
}
.ti-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 34px; letter-spacing: 1px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .40);
}
.ti-headstats { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.ti-headstats > * { flex: 0 0 auto; }   /* never let the money chip squash its own number */
.ti-close { min-width: 56px; min-height: 56px; padding: 8px 14px !important; }

/* ----------------------------------------------------------------- chip -- */
.ti-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(20, 32, 46, .75);
  border: 3px solid var(--ti-ink);
  border-radius: 14px;
  padding: 6px 14px;
  font-size: 22px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .40);
  white-space: nowrap;
}
.ti-chip.ti-gold { color: #FFDF70; }
.ti-chip.ti-warn { color: #F98C7F; border-color: #E8503A; }

/* ----------------------------------------------------------------- icon -- */
/* Every sprite icon is outlined in #14202E — DARKER than these panels — so a
   bare icon on a dark surface loses its outline and only the fills read
   (coal / oil / crate go almost invisible). Every icon therefore sits on a
   light plate by default. Opt out with .ti-ico-bare when the parent already
   provides one. */
.ti-ico {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; line-height: 1;
  padding: 3px; border-radius: 9px;
  background: linear-gradient(180deg, #F6FAFE 0%, #CFDCE8 100%);
  box-shadow: inset 0 0 0 2px rgba(20, 32, 46, .30);
}
.ti-ico svg { display: block; }
.ti-ico-chip {
  padding: 0; box-shadow: none;
  border-radius: 8px;
  border: 2px solid var(--ti-ink);
  color: #14202E;
  font-weight: 900;
  text-shadow: none;
}
.ti-ico-bare, .ti-card-art .ti-ico { padding: 0; background: none; box-shadow: none; }

/* --------------------------------------------------------------- button -- */
.ti-btn {
  font-family: inherit; font-weight: 900; color: #fff;
  font-size: 24px;
  padding: 12px 22px;
  min-height: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 3px solid var(--ti-ink);
  border-radius: 16px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .40);
  box-shadow: var(--ti-depth), var(--ti-gloss);
  background: var(--ti-dark);
  cursor: pointer;
}
.ti-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .30), var(--ti-gloss); }
.ti-btn:disabled { filter: grayscale(.75); opacity: .55; cursor: default; }
/* scoped to .ti-btn on purpose: a bare `.ti-gold` also matched the money chip
   and painted gold text on a gold background */
.ti-btn.ti-green { background: var(--ti-green); }
.ti-btn.ti-blue { background: var(--ti-blue); }
.ti-btn.ti-red { background: var(--ti-red); }
.ti-btn.ti-gold { background: var(--ti-gold); color: #14202E; text-shadow: 0 2px 0 rgba(255, 255, 255, .35); }
.ti-btn.ti-dark { background: var(--ti-dark); }
.ti-big { font-size: 26px; min-height: 66px; flex: 1 1 0; padding: 10px 16px; }

/* ----------------------------------------------------------------- tabs -- */
.ti-tabs {
  display: flex; gap: 10px; padding: 12px 18px;
  background: rgba(20, 32, 46, .45);
  border-bottom: 3px solid var(--ti-ink);
  flex: 0 0 auto;
  overflow-x: auto;
}
.ti-tab {
  flex: 1 1 0; min-width: 130px; min-height: 62px;
  font-size: 20px; padding: 8px 12px;
  background: var(--ti-dark);
  flex-direction: column; gap: 2px;
}
.ti-tab .ti-tab-t { font-size: 17px; letter-spacing: .5px; }
.ti-tab.ti-on {
  background: var(--ti-blue);
  outline: 4px solid #FFDF70;
  outline-offset: -4px;
}

/* ----------------------------------------------------------------- grid -- */
.ti-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
  padding: 18px;
  align-content: start;
  /* a grid item that is itself a flex column WITH overflow:hidden collapses its
     row to a sliver in Chrome — this pins rows to their real content height */
  grid-auto-rows: max-content;
}
.ti-empty { grid-column: 1 / -1; font-size: 20px; color: #A9BACB; padding: 30px; text-align: center; }
.ti-empty-sm { padding: 10px 4px; font-size: 17px; text-align: left; }

/* ----------------------------------------------------------------- card -- */
.ti-card {
  position: relative;
  background: var(--ti-card-bg);
  border: 3px solid var(--ti-ink);
  border-radius: 20px;
  box-shadow: var(--ti-depth), var(--ti-gloss);
  padding: 0 0 12px;
  display: flex; flex-direction: column; gap: 8px;
  align-self: start;
}
/* Dim the CONTENT, never the tier band — the colour ladder is the progression
   and it has to stay readable on a card you cannot buy yet. */
.ti-card.ti-poor { background: linear-gradient(180deg, #36434F 0%, #28323D 100%); }
.ti-card.ti-poor .ti-card-art { opacity: .62; filter: saturate(.5); }
.ti-card.ti-poor .ti-card-name,
.ti-card.ti-poor .ti-card-prod,
.ti-card.ti-poor .ti-card-stats { opacity: .68; }
.ti-card.ti-locked { background: linear-gradient(180deg, #2C3742 0%, #232C36 100%); }
.ti-card.ti-locked .ti-card-art { opacity: .40; filter: grayscale(1); }
.ti-card.ti-locked .ti-card-name,
.ti-card.ti-locked .ti-card-prod,
.ti-card.ti-locked .ti-card-stats,
.ti-card.ti-locked .ti-recipe,
.ti-card.ti-locked .ti-cost { opacity: .5; }
.ti-card.ti-ready { box-shadow: var(--ti-depth), var(--ti-gloss), 0 0 0 3px rgba(139, 232, 107, .35); }
.ti-card.ti-bought { animation: ti-pop .4s ease-out; }
.ti-card.ti-shake { animation: ti-shake .35s ease-in-out; }
@keyframes ti-pop { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes ti-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

.ti-band {
  background: var(--tier);
  color: #14202E;
  font-size: 16px; letter-spacing: 3px;
  padding: 5px 14px;
  border-radius: 17px 17px 0 0;   /* the card no longer clips, so clip here */
  border-bottom: 3px solid var(--ti-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .40);
}
.ti-card[data-tier="secret"] .ti-band { color: #FFDF70; text-shadow: 0 0 10px #FFDF70; }
.ti-card[data-tier="divine"] .ti-band { color: #7A5C00; }

.ti-card-top { display: flex; gap: 12px; padding: 12px 14px 0; align-items: flex-start; }
.ti-card-art {
  width: 78px; height: 78px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  /* light plate: the icons are ink-outlined and vanish on a dark surface */
  background: linear-gradient(180deg, #FFFFFF 0%, #CBDAE7 100%);
  border: 3px solid var(--ti-ink);
  border-radius: 16px;
  box-shadow: inset 0 0 0 3px var(--tier);
}
.ti-card-head { min-width: 0; flex: 1 1 auto; }
.ti-card-name {
  font-size: 24px; line-height: 1.1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .40);
  margin-bottom: 6px;
}
.ti-card-prod {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 18px; color: #CFE6FF;
}
.ti-card-prod b { color: #8BE86B; font-size: 19px; }
.ti-card-prod .ti-sell { color: #FFDF70; }
.ti-card-prod-desc { font-size: 17px; color: #A9BACB; font-weight: 900; }
.ti-dim { color: #93A6B8; font-size: 17px; }

.ti-card-stats {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  padding: 0 14px; font-size: 17px; color: #B7C7D6;
}
.ti-stat { display: inline-flex; align-items: center; gap: 5px; }

.ti-recipe {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 2px 14px 0;
  padding: 8px 10px;
  background: rgba(20, 32, 46, .55);
  border: 3px solid var(--ti-ink);
  border-radius: 14px;
  min-height: 52px;
}
.ti-recipe-lbl { font-size: 15px; letter-spacing: 2px; color: #8FA3B6; }
.ti-recipe-none {
  opacity: .75; min-height: 0; padding: 2px 10px; border-radius: 0; background: none;
  border-width: 0 0 0 6px; border-color: var(--tier);
}
.ti-mat {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 4px;
  border: 3px solid var(--ti-ink);
  border-radius: 12px;
  background: rgba(255, 255, 255, .10);
  font-size: 18px;
}
.ti-mat b { font-size: 19px; }
.ti-mat-n { font-size: 15px; color: #C3D3E1; }
.ti-mat.ti-mat-have { background: rgba(139, 232, 107, .22); border-color: #2E5C22; }
.ti-mat.ti-mat-short { background: rgba(232, 80, 58, .28); border-color: #7A2A1E; }

.ti-buyrow { display: flex; align-items: center; gap: 10px 12px; padding: 4px 14px 0; flex-wrap: wrap; }
.ti-cost {
  font-size: 30px; color: #FFDF70;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
  flex: 1 1 110px; min-width: 0;
}
.ti-buy { min-width: 130px; flex: 0 0 auto; }

.ti-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 14px; font-size: 17px; min-height: 0;
}
.ti-note-short { color: #FFC4BB; }
.ti-note-lock { color: #B7C7D6; }
.ti-note-deny { color: #FFD9D2; }
.ti-shortlist { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.ti-short { display: inline-flex; align-items: center; gap: 5px; }

/* ----------------------------------------------------------------- foot -- */
.ti-foot {
  flex: 0 0 auto;
  padding: 12px 18px;
  background: rgba(20, 32, 46, .55);
  border-top: 3px solid var(--ti-ink);
  font-size: 19px;
}
.ti-footline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ================================================================ TRADE == */
.ti-trade-body {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "send live" "parcel parcel";
  gap: 0;
}
.ti-col { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 18px 22px; min-height: 0; }
.ti-col-live { background: rgba(20, 32, 46, .40); border-left: 3px solid var(--ti-ink); }

.ti-col-send { grid-area: send; }
.ti-col-live { grid-area: live; }

/* The parcel bar: full width, always on screen, never scrolls. Do NOT move it
   back inside the send column — on the iPad that left one visible row of
   materials. */
.ti-parcel {
  grid-area: parcel;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  padding: 12px 18px 14px;
  background: linear-gradient(180deg, #3A4A5E 0%, #2A3849 100%);
  border-top: 3px solid var(--ti-ink);
  box-shadow: 0 -8px 18px rgba(0, 0, 0, .28);
}
.ti-parcel .ti-section { margin: 0 0 4px; }

.ti-section {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; letter-spacing: 3px; color: #8FA3B6;
  margin: 16px 0 8px;
}
.ti-section:first-child { margin-top: 2px; }
.ti-count {
  background: var(--ti-red); color: #fff;
  border: 3px solid var(--ti-ink); border-radius: 999px;
  padding: 0 10px; font-size: 16px; letter-spacing: 0;
}

/* ribbon + gate */
.ti-ribbon {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; font-size: 20px;
  border-bottom: 3px solid var(--ti-ink);
  flex: 0 0 auto;
}
.ti-ribbon-good { background: linear-gradient(#3FBF3F, #2E9A2E); }
.ti-ribbon-bad { background: linear-gradient(#E8503A, #B93A28); }
.ti-ribbon-info { background: linear-gradient(#2AA7E8, #1B7FBF); }
.ti-ribbon-act { min-height: 48px; font-size: 20px; padding: 6px 16px; margin-left: auto; }

.ti-gate {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 14px 18px 0; padding: 14px 18px;
  background: rgba(245, 183, 35, .16);
  border: 3px solid #F5B723; border-radius: 20px;
  flex: 0 0 auto;
}
.ti-gate-txt { flex: 1 1 220px; min-width: 0; }
.ti-gate-h { font-size: 22px; color: #FFDF70; text-shadow: 0 2px 0 rgba(0, 0, 0, .40); }
.ti-gate-p { font-size: 18px; color: #E7D9B4; margin-top: 4px; }

/* partner */
.ti-partner-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--ti-card-bg);
  border: 3px solid var(--ti-ink); border-radius: 20px;
  box-shadow: var(--ti-depth), var(--ti-gloss);
}
.ti-partner-card.ti-on { outline: 4px solid #FFDF70; outline-offset: -4px; }
.ti-partner-txt { flex: 1 1 auto; min-width: 0; }
.ti-partner-name { font-size: 28px; text-shadow: 0 2px 0 rgba(0, 0, 0, .40); }
.ti-partner-sub { font-size: 18px; color: #A9BACB; }
.ti-dot {
  font-size: 15px; letter-spacing: 1px; padding: 5px 12px;
  border: 3px solid var(--ti-ink); border-radius: 999px;
}
.ti-dot-on { background: #3FBF3F; }
.ti-dot-off { background: #4A5C74; color: #C7D3DE; }

/* material grid */
.ti-matgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  grid-auto-rows: max-content;   /* see .ti-grid — flex-column grid items collapse without this */
  gap: 10px;
}
.ti-mattile {
  font-family: inherit; font-weight: 900; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 132px; padding: 10px 6px; align-self: start;
  background: var(--ti-card-bg);
  border: 3px solid var(--ti-ink);
  border-left: 7px solid var(--tier);
  border-radius: 16px;
  box-shadow: var(--ti-depth), var(--ti-gloss);
  cursor: pointer;
}
.ti-mattile:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .30), var(--ti-gloss); }
.ti-mattile-n { font-size: 16px; color: #CFE6FF; text-align: center; line-height: 1.05; }
.ti-mattile-mine { font-size: 24px; color: #FFDF70; }
.ti-mattile-theirs { font-size: 14px; color: #8FA3B6; }
.ti-mattile.ti-mattile-empty { filter: saturate(.2) brightness(.72); }
.ti-mattile.ti-on { outline: 4px solid #FFDF70; outline-offset: -4px; filter: none; }

/* amount */
.ti-amount {
  flex: 1 1 300px; min-width: 0;
  background: rgba(20, 32, 46, .55);
  border: 3px solid var(--ti-ink); border-radius: 20px;
  padding: 6px 14px 8px;
}
.ti-amount-big { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; min-height: 54px; }
.ti-amount-lbl { font-size: 15px; letter-spacing: 3px; color: #8FA3B6; }
.ti-amount-n { font-size: 40px; color: #FFDF70; text-shadow: 0 3px 0 rgba(0, 0, 0, .45); line-height: 1; }
.ti-amount-m { font-size: 21px; color: #CFE6FF; }
.ti-amount-have { font-size: 17px; color: #93A6B8; margin-left: auto; }
.ti-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; margin: 12px 0 2px;
  background: linear-gradient(#1A2735, #22303F);
  border: 3px solid var(--ti-ink); border-radius: 999px;
  outline: none;
}
.ti-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ti-gold);
  border: 3px solid var(--ti-ink);
  box-shadow: var(--ti-depth), var(--ti-gloss);
  cursor: pointer;
}
.ti-slider::-moz-range-thumb {
  width: 50px; height: 50px; border-radius: 50%;
  background: #F5B723; border: 3px solid var(--ti-ink); cursor: pointer;
}
.ti-slider:disabled { opacity: .5; }
.ti-quick { display: flex; gap: 10px; flex: 0 1 auto; }
.ti-quick .ti-btn { flex: 1 1 0; min-width: 86px; }
.ti-actions { display: flex; gap: 12px; flex: 1 1 320px; }
.ti-actions .ti-btn { white-space: nowrap; }

/* requests / convoys / log */
.ti-req, .ti-convoy {
  background: var(--ti-card-bg);
  border: 3px solid var(--ti-ink); border-radius: 18px;
  box-shadow: var(--ti-depth), var(--ti-gloss);
  padding: 10px 12px; margin-bottom: 10px;
}
.ti-req-in { border-color: #F5B723; }
.ti-req-top, .ti-convoy-top { display: flex; align-items: center; gap: 10px; }
.ti-req-txt, .ti-convoy-txt { min-width: 0; flex: 1 1 auto; }
.ti-req-h { font-size: 20px; line-height: 1.15; }
.ti-req-sub, .ti-convoy-sub { display: flex; align-items: center; gap: 5px; font-size: 16px; color: #A9BACB; margin-top: 3px; }
.ti-req-row { display: flex; gap: 10px; margin-top: 10px; }
.ti-req-row .ti-btn { flex: 1 1 0; font-size: 22px; }
.ti-ok { color: #8BE86B; }
.ti-bad { color: #F98C7F; }

.ti-convoy-h { font-size: 19px; }
.ti-convoy-in { border-color: #4FC3F7; }
.ti-bar {
  height: 16px; margin-top: 8px;
  background: rgba(20, 32, 46, .8);
  border: 3px solid var(--ti-ink); border-radius: 999px; overflow: hidden;
}
.ti-bar-fill { height: 100%; background: var(--ti-green); }

.ti-log {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 10px; margin-bottom: 6px;
  background: rgba(20, 32, 46, .45);
  border: 3px solid var(--ti-ink); border-radius: 14px;
  font-size: 17px;
}
.ti-log-in { border-color: #3FBF3F; }
.ti-log-amt { font-size: 19px; color: #FFDF70; }
.ti-log-m { color: #CFE6FF; }
.ti-log-who { color: #A9BACB; margin-left: auto; }
.ti-log-at { color: #7E90A2; font-size: 15px; }

/* ------------------------------------------------------------ narrow -- */
@media (max-width: 900px) {
  .ti-trade-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr) auto;
    grid-template-areas: "send" "live" "parcel";
  }
  .ti-col-live { border-left: 0; border-top: 3px solid var(--ti-ink); }
  .ti-title { font-size: 26px; }
  .ti-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .ti-amount, .ti-quick, .ti-actions { flex: 1 1 100%; }
}
@media (max-width: 860px) {
  .ti-title { font-size: 24px; }
  .ti-head { gap: 10px; padding: 12px 14px; }
  .ti-chip { font-size: 19px; padding: 5px 11px; }
}
@media (max-height: 700px) {
  .ti-panel { top: 24px; bottom: 24px; }
  .ti-tab { min-height: 56px; }
}

/* ============================================================== SHOP BOX ==
   The BUY shop is a MODEST CENTRED DIALOG, not the whole screen. Owner's
   note: "the purchasing we need to make a little bit smaller, so it does not
   go all over the screen — and then you can scroll, it doesn't have to occupy
   the full space." Modelled on Mini War's Items box: a small centred panel,
   small dense tiles, ONE scrollbar.

   SCOPED TO `.ti-shop` ON PURPOSE — do not move these into `.ti-panel`.
   `.ti-panel` is shared with `.ti-trade`, whose body is a two-column grid
   (send / live) plus a full-width parcel bar that must stay on screen without
   scrolling; shrinking it re-creates the "one visible row of materials" bug
   the .ti-parcel comment warns about. Trade genuinely wants the big treatment,
   so the shared base is left byte-identical. `.ti-shop` is already on the
   element (shop.js:434) — no JS change was needed.

   `!important` appears ONLY where iconEl() writes width/height as INLINE
   styles onto the .ti-ico wrapper; nothing else here needs it. game.css has no
   `.ti-` rules at all, so there is no specificity war with it, and every
   selector here is (0,2,0)+ so it also outranks the `.ti-panel` / `.ti-grid`
   rules in the media queries above regardless of source order. */

/* ---- the dialog ---------------------------------------------------------- */
.ti-panel.ti-shop {
  box-sizing: border-box;
  top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  width: min(62vw, 1080px);
  height: min(70vh, 780px);
  /* never collapse into a sliver, never outgrow the viewport */
  min-width: min(560px, calc(100vw - 24px));
  min-height: min(420px, calc(100vh - 24px));
  border-radius: 18px;
}

/* head — smaller chrome buys the grid its rows back */
.ti-shop .ti-head { gap: 10px; padding: 8px 12px; }
.ti-shop .ti-title { font-size: 21px; letter-spacing: .5px; gap: 8px; }
.ti-shop .ti-title .ti-ico { width: 30px !important; height: 30px !important; }
.ti-shop .ti-headstats { gap: 7px; }
.ti-shop .ti-chip { font-size: 15px; padding: 4px 9px; gap: 6px; border-width: 2px; border-radius: 11px; }
.ti-shop .ti-chip .ti-ico { width: 21px !important; height: 21px !important; padding: 2px; border-radius: 6px; }
.ti-shop .ti-close { min-width: 52px; min-height: 52px; padding: 6px 10px !important; border-radius: 13px; }
.ti-shop .ti-close .ti-ico { width: 26px !important; height: 26px !important; }

/* tabs — all five fit without the overflow-x safety valve firing */
.ti-shop .ti-tabs { gap: 8px; padding: 8px 12px; }
.ti-shop .ti-tab {
  min-width: 92px; min-height: 52px;
  font-size: 13px; padding: 5px 6px; gap: 1px;
  border-radius: 13px;
}
.ti-shop .ti-tab .ti-tab-t { font-size: 11px; letter-spacing: .3px; }
.ti-shop .ti-tab .ti-ico { width: 24px !important; height: 24px !important; padding: 2px; border-radius: 6px; }
.ti-shop .ti-tab.ti-on { outline-width: 3px; outline-offset: -3px; }

/* THE one scroll region: the grid. Head, tabs and foot are flex:0 0 auto. */
.ti-shop .ti-grid {
  min-height: 0;                       /* explicit: never let it push the foot out */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  padding: 12px;
  overscroll-behavior: contain;        /* iPad: don't rubber-band the world behind */
}
.ti-shop .ti-empty { font-size: 15px; padding: 18px; }

/* ---- the tile ------------------------------------------------------------ */
.ti-shop .ti-card { border-radius: 14px; padding: 0 0 7px; gap: 4px; }
.ti-shop .ti-band {
  font-size: 11px; letter-spacing: 1.5px;
  padding: 3px 9px;
  border-radius: 11px 11px 0 0;
  border-bottom-width: 2px;
}

.ti-shop .ti-card-top { gap: 7px; padding: 7px 9px 0; }
.ti-shop .ti-card-art {
  box-sizing: border-box;
  width: 46px; height: 46px;
  border-radius: 11px;
  box-shadow: inset 0 0 0 2px var(--tier);
}
.ti-shop .ti-card-art .ti-ico { width: 100% !important; height: 100% !important; }
/* icons.js sizes the <svg> with width/height ATTRIBUTES (viewBox 0 0 64 64), so
   a plain CSS width beats them — only the .ti-ico wrapper needs !important. */
.ti-shop .ti-ico > svg { width: 100%; height: 100%; }

.ti-shop .ti-card-name {
  font-size: 14px; line-height: 1.15; margin-bottom: 3px;
  overflow-wrap: anywhere;             /* "Curved Asphalt Road" must not overflow */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.ti-shop .ti-card-prod { font-size: 12px; gap: 4px; }
.ti-shop .ti-card-prod b { font-size: 13px; }
.ti-shop .ti-card-prod-desc { font-size: 12px; }
.ti-shop .ti-dim { font-size: 12px; }
.ti-shop .ti-card-prod .ti-ico,
.ti-shop .ti-recipe .ti-ico,
.ti-shop .ti-note .ti-ico,
.ti-shop .ti-buy .ti-ico { width: 20px !important; height: 20px !important; padding: 2px; border-radius: 6px; }

.ti-shop .ti-card-stats { gap: 3px 8px; padding: 0 9px; font-size: 12px; }
.ti-shop .ti-card-stats .ti-stat { gap: 4px; }
.ti-shop .ti-card-stats .ti-ico { width: 16px !important; height: 16px !important; padding: 1px; border-radius: 5px; }

.ti-shop .ti-recipe {
  margin: 0 9px; padding: 4px 6px; gap: 4px;
  min-height: 0; border-width: 2px; border-radius: 10px;
}
.ti-shop .ti-recipe-lbl { font-size: 10px; letter-spacing: 1px; }
.ti-shop .ti-recipe-none { padding: 1px 8px; border-width: 0 0 0 5px; }
.ti-shop .ti-mat { font-size: 12px; gap: 3px; padding: 2px 6px 2px 2px; border-width: 2px; border-radius: 8px; }
.ti-shop .ti-mat b { font-size: 13px; }
.ti-shop .ti-mat-n { font-size: 10px; }

.ti-shop .ti-buyrow { gap: 6px 8px; padding: 4px 9px 0; }
.ti-shop .ti-cost { font-size: 18px; flex: 1 1 auto; min-width: 0; }
.ti-shop .ti-buy {
  flex: 1 1 auto; min-width: 62px; min-height: 46px;
  font-size: 15px; padding: 6px 10px; gap: 6px;
  border-radius: 12px;
}
.ti-shop .ti-note { font-size: 12px; gap: 5px; padding: 0 9px; }
.ti-shop .ti-shortlist { gap: 6px; }

/* foot */
.ti-shop .ti-foot { padding: 7px 12px; font-size: 13px; }
.ti-shop .ti-foot .ti-ico { width: 18px !important; height: 18px !important; padding: 1px; border-radius: 5px; }

/* ---- viewport shapes -----------------------------------------------------
   iPad LANDSCAPE 1180x820 -> 731x574 dialog, 4 columns of ~168px.
   iPad PORTRAIT  820x1180 -> 560x780 dialog, 3 columns of ~170px.
   Both stay a centred box. Only a genuinely narrow OR short viewport (phone,
   short laptop window) goes near-fullscreen, because at that size a 62x70
   box is a useless letterbox. Reverting to the inset model here keeps the
   safe-area handling of the base rule. */
@media (max-width: 700px), (max-height: 700px) {
  .ti-panel.ti-shop {
    transform: none;
    width: auto; height: auto;
    min-width: 0; min-height: 0;
    top: max(12px, env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================= ITEMS BOX ==
   ITEMS (items.js) is the same centred dialog as the SHOP BOX above — same
   62vw x 70vh, same one-scroll-region, same near-fullscreen fallback — because
   it is the other half of the same gesture and the two must not jump around
   each other when he flips between them.

   SCOPED TO `.ti-items`, and every new class here is scoped under it too, for
   the reason the SHOP BOX comment gives: `.ti-panel` is shared with `.ti-trade`
   which genuinely wants the big treatment. Nothing above this line is touched.

   The tiles are SMALLER than the shop's (minmax 140 vs 160): an items tile has
   no cost, no recipe and no button, so the same width would be mostly air, and
   more columns is the point — the panel is a wall of what he owns.

   `!important` appears ONLY where iconEl() writes width/height as INLINE styles
   onto the .ti-ico wrapper, same as the shop block. */

/* ---- the dialog ---------------------------------------------------------- */
.ti-panel.ti-items {
  box-sizing: border-box;
  top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  width: min(62vw, 1080px);
  height: min(70vh, 780px);
  min-width: min(560px, calc(100vw - 24px));
  min-height: min(420px, calc(100vh - 24px));
  border-radius: 18px;
}

/* head */
.ti-items .ti-head { gap: 10px; padding: 8px 12px; }
.ti-items .ti-title { font-size: 21px; letter-spacing: .5px; gap: 8px; }
.ti-items .ti-title .ti-ico { width: 30px !important; height: 30px !important; }
.ti-items .ti-headstats { gap: 7px; }
.ti-items .ti-chip { font-size: 15px; padding: 4px 9px; gap: 6px; border-width: 2px; border-radius: 11px; }
.ti-items .ti-chip .ti-ico { width: 21px !important; height: 21px !important; padding: 2px; border-radius: 6px; }
/* 56px is the floor for anything tappable (docs/11 §6b) — the shop trims its
   close button to 52 to buy grid rows, but this panel has a shorter tile and
   can afford the honest target. */
.ti-items .ti-close { min-width: 56px; min-height: 56px; padding: 6px 10px !important; border-radius: 13px; }
.ti-items .ti-close .ti-ico { width: 26px !important; height: 26px !important; }

/* tabs — SIX of them, one more than the shop, and they still have to fit the
   560px minimum dialog: 6 x 78 + 5 x 7 + 24 padding = 527. `.ti-tabs` keeps its
   overflow-x safety valve for anything narrower. */
.ti-items .ti-tabs { gap: 7px; padding: 8px 12px; }
.ti-items .ti-tab {
  min-width: 78px; min-height: 56px;
  font-size: 13px; padding: 5px 4px; gap: 1px;
  border-radius: 13px;
}
.ti-items .ti-tab .ti-ico { width: 24px !important; height: 24px !important; padding: 2px; border-radius: 6px; }
.ti-items .ti-tab.ti-on { outline-width: 3px; outline-offset: -3px; }
.ti-items .ti-tab-t {
  display: flex; align-items: baseline; justify-content: center; gap: 5px;
  font-size: 11px; letter-spacing: .3px;
}
.ti-items .ti-items-n { font-size: 14px; color: #FFDF70; }
/* A tab with nothing in it is DIMMED, never hidden — "MILITARY 0" is the whole
   teaching. Never dim the tab he is standing on, or the panel looks broken. */
.ti-items .ti-tab.ti-items-zero:not(.ti-on) { opacity: .45; }
.ti-items .ti-tab.ti-items-zero:not(.ti-on) .ti-items-n { color: #93A6B8; }

/* THE one scroll region */
.ti-items .ti-grid {
  min-height: 0;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 12px;
  overscroll-behavior: contain;        /* iPad: don't rubber-band the world behind */
}
.ti-items .ti-empty { font-size: 15px; padding: 18px; }

/* ---- the tile ------------------------------------------------------------ */
.ti-items .ti-card { border-radius: 14px; padding: 0 0 8px; gap: 3px; }
.ti-items .ti-band {
  font-size: 11px; letter-spacing: 1.5px;
  padding: 3px 9px;
  border-radius: 11px 11px 0 0;
  border-bottom-width: 2px;
}

.ti-items .ti-card-top { gap: 7px; padding: 7px 9px 0; align-items: center; }
.ti-items .ti-card-art {
  box-sizing: border-box;
  width: 44px; height: 44px;
  border-radius: 11px;
  box-shadow: inset 0 0 0 2px var(--tier);
}
.ti-items .ti-card-art .ti-ico { width: 100% !important; height: 100% !important; }
/* icons.js sizes the <svg> with width/height ATTRIBUTES (viewBox 0 0 64 64), so
   a plain CSS width beats them — only the .ti-ico wrapper needs !important. */
.ti-items .ti-ico > svg { width: 100%; height: 100%; }

.ti-items .ti-card-name {
  font-size: 13px; line-height: 1.15; margin-bottom: 0;
  overflow-wrap: anywhere;             /* "Curved Asphalt Road" must not overflow */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}

/* the count — the reason this panel exists, so it outweighs everything else on
   the tile the way .ti-cost does in the shop */
.ti-items .ti-items-x {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 1px 9px 0;
}
.ti-items .ti-items-x > b {
  font-size: 30px; line-height: 1; color: #FFDF70;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
.ti-items .ti-items-b {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px 2px 3px;
  background: rgba(110, 208, 246, .18);
  border: 2px solid var(--ti-ink);
  border-radius: 9px;
  font-size: 11px; color: #CFE6FF;
}
.ti-items .ti-items-b .ti-ico { width: 16px !important; height: 16px !important; padding: 1px; border-radius: 5px; }

.ti-items .ti-card-prod { font-size: 12px; gap: 4px; padding: 0 9px; }
.ti-items .ti-card-prod b { font-size: 13px; }
.ti-items .ti-card-prod-desc {
  font-size: 11px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.ti-items .ti-dim { font-size: 12px; }
.ti-items .ti-card-prod .ti-ico { width: 20px !important; height: 20px !important; padding: 2px; border-radius: 6px; }

.ti-items .ti-card-stats { gap: 3px 8px; padding: 0 9px; font-size: 11px; }
.ti-items .ti-card-stats .ti-stat { gap: 4px; }
.ti-items .ti-card-stats .ti-ico { width: 16px !important; height: 16px !important; padding: 1px; border-radius: 5px; }

/* foot */
.ti-items .ti-foot { padding: 7px 12px; font-size: 13px; }
.ti-items .ti-foot .ti-ico { width: 18px !important; height: 18px !important; padding: 1px; border-radius: 5px; }

/* ---- viewport shapes -----------------------------------------------------
   iPad LANDSCAPE 1180x820 -> 731x574 dialog, 4 columns of ~168px.
   iPad PORTRAIT  820x1180 -> 560x780 dialog, 3 columns of ~170px.
   Same rule as the shop: only a genuinely narrow OR short viewport goes
   near-fullscreen, and reverting to the inset model keeps the safe-area
   handling of the base `.ti-panel`. */
@media (max-width: 700px), (max-height: 700px) {
  .ti-panel.ti-items {
    transform: none;
    width: auto; height: auto;
    min-width: 0; min-height: 0;
    top: max(12px, env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
}