/* Shared layout fixes come AFTER every palette, including pink.css. */
:root {
  --app-safe-top: 0px;
  --app-safe-bottom: env(safe-area-inset-bottom,0px);
  --app-safe-left: 0px;
  --app-safe-right: 0px;
  --metric-label: #b5b7c0;
}
html[data-theme="light"] { --metric-label:#536579; }
html[data-theme="pink"] { --metric-label:#74515f; }

#menu {
  position:fixed;
  z-index:40;
  top:var(--menu-top,calc(var(--app-safe-top) + 54px));
  left:var(--menu-left,16px);
  right:auto;
  width:var(--menu-width,min(320px,calc(100vw - 32px)));
  min-width:0;
  max-height:var(--menu-height,calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 72px));
  padding:10px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  border:1px solid var(--hairline);
  border-radius:20px;
  box-shadow:0 12px 36px #0002;
}
#menu > [data-go] { min-height:44px; font-size:14px; padding:11px 12px; }
#menu .language-picker { flex-wrap:wrap; gap:8px; margin:0; padding:10px 4px; }
#menu .language-title, #menu .theme-title { font-size:12px; }
#menu .language-toggle button { min-height:36px; }
#menu .currency-toggle button { min-width:30px; padding-inline:5px; }
#menu .theme-picker { padding:10px 4px; gap:8px; }
#menu .theme-picker select { min-height:38px; font-size:12px; }
#menu-shade { position:fixed; inset:0; z-index:30; background:#0003; }
#telegram-top-guard { position:fixed; inset:0 0 auto; height:var(--app-safe-top); background:var(--ground); z-index:25; pointer-events:none; }
body.in-telegram .phone { padding-top:var(--app-safe-top); }

/* Reference composition: square tile, 85% gift anchored bottom-right.
   Only the card boundary crops the artwork, never a short inner paint box. */
:root #gifts .portfolio-gift,
:root #s-catalogue .gifts .gift {
  aspect-ratio:1;
  min-height:0;
}
:root #gifts .portfolio-gift .name,
:root #s-catalogue .gifts .gift .name {
  display:block; top:10px; left:10px; right:8px;
  font-size:13px; line-height:16px; max-height:16px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
:root #gifts .portfolio-gift .glyph,
:root #s-catalogue .gifts .gift .glyph {
  position:absolute; inset:auto; right:-10%; bottom:-13%;
  width:85%; height:85%; min-width:0; min-height:0; z-index:1;
}
:root #gifts .portfolio-gift .glyph > img,
:root #s-catalogue .gifts .gift .glyph > img {
  position:absolute; inset:0; display:block;
  width:100% !important; height:100% !important;
  min-width:0; min-height:0; max-width:100%; max-height:100%;
  object-fit:contain;
}
/* Model/serial and liquidity details stay in the opened gift and tile title. */
:root #gifts .portfolio-gift .gift-identity,
:root #gifts .portfolio-gift .meta { display:none; }
:root #gifts .portfolio-gift .chg,
:root #s-catalogue .gifts .gift .chg {
  top:29px; left:10px; right:auto; bottom:auto;
  z-index:3; font-size:10px; line-height:12px;
  padding:0; border-radius:0; background:none;
}
:root #gifts .portfolio-gift .tile-price,
:root #s-catalogue .gifts .gift .tile-price { left:7px; bottom:8px; padding:2px 5px; }
:root #gifts .portfolio-gift .trend-chart,
:root #s-catalogue .gifts .gift .trend-chart {
  left:0; bottom:10%; width:100%; height:58%; opacity:.85; z-index:0;
}

/* Two readable columns on phones instead of four tiny, low-contrast boxes. */
:root #s-collection .market-stats, :root #gm-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
:root #s-collection .market-stats .market-stat, :root #gm-stats > div {
  padding:12px; border:1px solid var(--hairline); border-radius:14px;
  background:var(--surface); color:var(--ink);
}
:root #s-collection .market-stats .market-stat small, :root #gm-stats small {
  color:var(--metric-label); font-size:11px; line-height:1.4;
  white-space:normal; overflow:visible; text-overflow:clip;
}
:root #s-collection .market-stats .market-stat b, :root #gm-stats b {
  color:var(--ink); font-size:16px; line-height:1.3; margin-top:5px;
  overflow-wrap:anywhere; white-space:normal; overflow:visible; text-overflow:clip;
}
@media (max-width:340px) {
  #menu .language-picker { justify-content:flex-start; }
  #menu .language-title { width:100%; }
  :root #gifts .portfolio-gift .tile-price,
  :root #s-catalogue .gifts .gift .tile-price { font-size:9px; padding-inline:4px; }
  :root #gifts .portfolio-gift .chg,
  :root #s-catalogue .gifts .gift .chg { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { #menu:not([hidden]) { animation:none; } }