/* App shell on phones: the page itself never scrolls or drags sideways; only the content area scrolls vertically.
   The home screen is compact so it fits one screen on common phones. Desktop layout is untouched. */
@media (max-width:640px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:pan-y}
  body{position:fixed;inset:0;width:100%;margin:0}
  .desktop-note{display:none}
  .app{height:100dvh;min-height:0;max-width:none;width:100%;margin:0;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;overflow:hidden}
  #demo,#header{flex:none}
  main#main{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:18px}
  #nav{position:static;flex:none;width:100%;max-width:none}
  .tile,.tile-art,.banner,.up-next{max-width:100%}
  .tile,.tiles{overflow:hidden}

  /* Home: everything visible at once */
  body[data-page=home] main#main{display:flex;flex-direction:column;overflow-y:auto}
  body[data-page=home] .home-greeting{font-size:clamp(26px,4.2dvh,35px);margin:2px 0 0}
  body[data-page=home] .subtitle{font-size:clamp(15px,2.3dvh,19px);margin:2px 0 clamp(6px,1.4dvh,14px)}
  body[data-page=home] .tiles{margin-top:0;gap:8px;flex:1 1 auto;min-height:0;grid-template-rows:1fr 1fr}
  body[data-page=home] .tile{min-height:0;padding:6px 4px 8px;justify-content:center;gap:0}
  body[data-page=home] .tile{display:flex;flex-direction:column}
  body[data-page=home] .tile-art{flex:1 1 0;min-height:0;height:auto;width:100%;margin:0;position:relative}
  body[data-page=home] .tile-art>.approved-art{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);height:100%!important;width:auto!important;max-height:none!important;overflow:hidden}
  body[data-page=home] .tile strong,body[data-page=home] .tile small{flex:none}
  body[data-page=home] .section-head{margin:clamp(6px,1.4dvh,14px) 0 0}
  body[data-page=home] .section-head h2{font-size:clamp(18px,2.8dvh,24px);margin:0}
  body[data-page=home] .up-next{margin-top:4px;padding:8px 10px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}
  body[data-page=home] .up-next .approved-race-hero{display:none}
  body[data-page=home] .up-next h2{font-size:clamp(17px,2.6dvh,22px);margin:0}
  body[data-page=home] .up-next p{margin:0;font-size:14px}
  body[data-page=home] .up-next .badge{display:none}
  body[data-page=home] .up-next .primary{grid-column:2;grid-row:1/3;margin:0;padding:10px 14px;white-space:nowrap}
  body[data-page=home] .info{display:flex;flex-wrap:wrap;gap:0 8px;align-items:center;padding:7px 12px;margin:0 0 2px;font-size:13px;line-height:1.3;border-radius:14px}
  body[data-page=home] .info *{font-size:inherit}
  body[data-page=home] .empty{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;text-align:left;padding:8px 12px;margin:4px 0 0;border-radius:16px}
  body[data-page=home] .empty h3{margin:0;font-size:16px}
  body[data-page=home] .empty p{grid-column:1;margin:0;font-size:13px;line-height:1.25}
  body[data-page=home] .empty .secondary{grid-column:2;grid-row:1/3;margin:0;padding:9px 14px;white-space:nowrap}
  body[data-page=home] .banner{margin:8px 0 0;padding:7px 12px;gap:12px;flex:none}
  body[data-page=home] .banner small{display:none}
  #header{padding-top:6px;padding-bottom:6px}
  /* iPhone Safari zooms in on any field under 16px and stays zoomed, so the fixed screen starts to drag. */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
}

.medal-art svg{display:block;width:100%;height:100%;overflow:visible}