/* Shared mobile landing proportions; web desktop adaptations live in web-layout.css. */
body:is(.vm-app-host,.vm-web-host) .vm-abovefold {
  min-height:100dvh; padding:10px 0 108px; display:flex; flex-direction:column;
  box-sizing:border-box;
}
body:is(.vm-app-host,.vm-web-host) .vm-intro { margin:0; padding:0 16px 4px; text-align:center; }
body:is(.vm-app-host,.vm-web-host) .vm-intro .eyebrow { font:400 9px/14px PT,monospace!important; letter-spacing:1px!important; }
body:is(.vm-app-host,.vm-web-host) .vm-intro h1 { margin:3px 0 0; font:900 24px/26px 'HN Cond Black',sans-serif!important; letter-spacing:0!important; }
body:is(.vm-app-host,.vm-web-host) .vm-machine-carousel { margin:0; padding-top:23px; }
body:is(.vm-app-host,.vm-web-host) .vm-machine-indicators { top:0; bottom:auto; }
body:is(.vm-app-host,.vm-web-host) .vm-machines { padding:0; }
body:is(.vm-app-host,.vm-web-host) .vm-machine { flex:0 0 50%; width:50%; padding:0 4px; }
body:is(.vm-app-host,.vm-web-host) .vm .vm-machine-art {
  --machine-art-height:clamp(110px,calc(100dvh - 592px),280px);
  margin:0 auto 4px; max-width:none; transform:scale(.84); opacity:.7;
}
body:is(.vm-app-host,.vm-web-host) .vm .vm-machine[aria-pressed=true] .vm-machine-art { transform:scale(1); opacity:1; }
body:is(.vm-app-host,.vm-web-host) .vm-machine-art::before {
  content:''; position:absolute; z-index:-2; inset:-7% -20% -5%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 57%,#fff7 0%,#ffffff30 38%,transparent 70%);
}
body:is(.vm-app-host,.vm-web-host) .vm-machine-label,
body:is(.vm-app-host,.vm-web-host) .vm-machine[aria-pressed=true] .vm-machine-label {
  display:block; min-height:30px; height:auto; margin:0; padding:0; border:0;
  background:transparent!important; box-shadow:none; color:var(--vm-ink)!important;
  text-align:center; border-radius:0;
}
body:is(.vm-app-host,.vm-web-host) .vm-machine-label b { display:block; font:700 21px/28px DM,sans-serif!important; }
body:is(.vm-app-host,.vm-web-host) .vm-machine-label :is(strong,small) { display:none!important; }
body:is(.vm-app-host,.vm-web-host) .vm-entry { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:0; padding:8px 16px 0; }
body:is(.vm-app-host,.vm-web-host) .vm-preview { margin:0 0 12px; }
body:is(.vm-app-host,.vm-web-host) .vm-preview-heading { margin-bottom:8px; min-height:28px; gap:8px; }
body:is(.vm-app-host,.vm-web-host) .vm-preview-heading h2 { font:700 14px/20px DM,sans-serif!important; text-transform:none; letter-spacing:0; }
body:is(.vm-app-host,.vm-web-host) .vm-preview-all { font:600 12px/18px DM,sans-serif!important; letter-spacing:0!important; }
body:is(.vm-app-host,.vm-web-host) .vm-ticker .vm-preview-card {
  flex:0 0 218px; width:218px; min-width:218px; max-width:218px;
  height:100px; min-height:100px; padding:6px 12px; gap:12px;
  border-radius:8px!important; background:#ffffff26!important; border:1px solid #1a1a1a20;
}
body:is(.vm-app-host,.vm-web-host) .vm-ticker .vm-preview-card>img {
  width:72px!important; height:92px!important; max-height:92px!important; object-fit:cover;
}
body:is(.vm-app-host,.vm-web-host) .vm-ticker .vm-preview-copy h3 { text-transform:none!important; font:600 14px/17px DM,sans-serif!important; max-height:34px; }
body:is(.vm-app-host,.vm-web-host) .vm-ticker .vm-preview-copy { gap:4px; }
body:is(.vm-app-host,.vm-web-host) .app-pull-purchase { padding:10px; border:1px solid #1a1a1a20; border-radius:8px; background:#ffffff26; }
body:is(.vm-app-host,.vm-web-host) .app-pull-values { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0 0 8px; text-align:center; }
body:is(.vm-app-host,.vm-web-host) .app-pull-values>div+div { border-left:1px solid #1a1a1a22; }
body:is(.vm-app-host,.vm-web-host) .app-pull-values dt { margin:0 0 3px; font:400 11px/16px DM,sans-serif; color:var(--vm-ink); opacity:.8; }
body:is(.vm-app-host,.vm-web-host) .app-pull-values dd { margin:0; font:700 19px/24px DM,sans-serif; color:var(--vm-ink); }
body:is(.vm-app-host,.vm-web-host) .app-pull-purchase .vm-start { margin:0; min-height:46px; border-radius:8px; }
body:is(.vm-app-host,.vm-web-host) .vm-learn { margin:6px 0 0; min-height:38px; padding:8px 0; font:600 11px/16px DM,sans-serif!important; }
body:is(.vm-app-host,.vm-web-host) .vm-lineup { margin-top:0; }
body:is(.vm-app-host,.vm-web-host) .vm-info-tabs { position:sticky; top:0; z-index:25; background:var(--palette-sand,#f8f7f3); display:flex; overflow-x:auto; flex-wrap:nowrap; gap:20px; margin:0 0 20px; border-bottom:1px solid var(--palette-line); }
body:is(.vm-app-host,.vm-web-host) .vm-info-tabs button { flex-shrink:0; border-radius:0; padding:12px 0; background:none; }
body:is(.vm-app-host,.vm-web-host) .vm-info-tabs button[aria-selected=true] { box-shadow:inset 0 -2px currentColor; }
@media(max-height:600px) {
  body:is(.vm-app-host,.vm-web-host) .vm .vm-machine-art { --machine-art-height:110px; }
  body:is(.vm-app-host,.vm-web-host) .vm-intro h1 { font-size:21px!important; line-height:24px!important; }
}
/* Cutout assets already fill their canvas; keep their full neck and base visible. */
body:is(.vm-app-host,.vm-web-host) .vm-ticker .vm-preview-card>img:is([src$=".png"],[src$=".webp"]) { object-fit:contain; }
@media(max-height:640px) {
  body:is(.vm-app-host,.vm-web-host) .vm .vm-machine-art { --machine-art-height:100px; }
  body:is(.vm-app-host,.vm-web-host) .vm-abovefold { padding-top:6px; padding-bottom:106px; }
  body:is(.vm-app-host,.vm-web-host) .vm-entry { padding-top:4px; }
  body:is(.vm-app-host,.vm-web-host) .vm-preview { margin-bottom:8px; }
  body:is(.vm-app-host,.vm-web-host) .vm-ticker .vm-preview-card { height:84px; min-height:84px; }
  body:is(.vm-app-host,.vm-web-host) .vm-ticker .vm-preview-card>img { height:76px!important; max-height:76px!important; }
  body:is(.vm-app-host,.vm-web-host) .app-pull-purchase { padding:8px; }
  body:is(.vm-app-host,.vm-web-host) .app-pull-values { margin-bottom:6px; }
  body:is(.vm-app-host,.vm-web-host) .app-pull-values dd { font-size:17px; line-height:21px; }
  body:is(.vm-app-host,.vm-web-host) .app-pull-purchase .vm-start { min-height:44px; }
}
@media(max-height:640px) {
  body:is(.vm-app-host,.vm-web-host) .vm-machine { flex-basis:48%; width:48%; }
}
body:is(.vm-app-host,.vm-web-host) #vm-screen { overflow-anchor:none; }

body:is(.vm-app-host,.vm-web-host) .vm-machine[aria-pressed=false] .vm-machine-label { opacity:0; }

/* Machine copy and ticker alignment are shared by app and web. */
body:is(.vm-app-host,.vm-web-host) .vm .vm-intro .vm-tagline {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; max-width:620px; margin:6px auto 0; min-height:36px;
  font:400 12px/18px DM,sans-serif; letter-spacing:0; text-transform:none;
  text-align:center; color:var(--vm-muted);
}
body:is(.vm-app-host,.vm-web-host) .vm .vm-ticker .vm-preview-copy {
  display:grid; grid-template-rows:34px 20px 18px; gap:2px;
  align-content:center; align-items:start; justify-items:start;
}
body:is(.vm-app-host,.vm-web-host) .vm .vm-ticker .vm-preview-copy h3 {
  grid-row:1; margin:0!important; height:34px; min-height:34px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  white-space:normal; overflow:hidden;
}
body:is(.vm-app-host,.vm-web-host) .vm .vm-ticker .vm-preview-value {grid-row:2;line-height:20px}
body:is(.vm-app-host,.vm-web-host) .vm .vm-ticker .vm-inventory-rarity {grid-row:3;align-self:start}