/* Main-Street-Spotlight auf games.c-arena.com.
   Eigene Datei statt Ergaenzung von styles.css: alles traegt den Praefix msm-,
   der Rueckweg ist das Loeschen dieser Datei und der beiden Bloecke im Markup.
   Die drei Schnitte liegen lokal, es geht kein Abruf nach aussen. */
@font-face{font-family:"MSM Sans";src:url('assets/msm/msm-dmsans-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:"MSM Sans";src:url('assets/msm/msm-dmsans-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:"MSM Serif";src:url('assets/msm/msm-fraunces-700.ttf') format('truetype');font-weight:700;font-display:swap}
.msm-hub{padding:64px max(24px,5vw);background:#080a11;color:#f4ebd6;font-family:"MSM Sans",Barlow,Arial,sans-serif}.msm-kicker{font-size:10px;letter-spacing:.16em;color:#bca9b9;margin:0 0 24px}.msm-spotlight{position:relative;overflow:hidden;min-height:590px;border:1px solid #ffffff16;background:radial-gradient(ellipse at 77% 45%,#79616b,#50374f 45%,#302331 100%);border-radius:12px}.msm-copy{position:relative;z-index:2;width:44%;padding:42px 0 45px 42px}.msm-category{font-size:9px;letter-spacing:.12em}.msm-logo{display:block;width:265px;max-width:100%;height:auto;margin:24px 0}.msm-copy h2{font:700 clamp(35px,3.5vw,54px)/1.06 "MSM Serif",Georgia,serif;letter-spacing:-.04em;margin:25px 0}.msm-copy>p:not(.msm-category){max-width:340px;font-size:14px;line-height:1.75;color:#ddcdd6}.msm-cta{display:inline-flex;gap:20px;align-items:center;background:#f4ebd6;color:#302331;border-radius:6px;padding:15px 20px;min-height:48px;font-size:12px;font-weight:700;text-decoration:none;margin-top:14px}.msm-status{display:block;font-size:8px;letter-spacing:.15em;color:#c5b5bd;margin-top:20px}.msm-city{position:absolute;width:83%;height:100%;right:-15%;top:25px;pointer-events:none}.msm-city>svg{width:100%;height:100%;overflow:visible}.msm-city .vehicle{animation:msm-van 22s linear infinite}.msm-city .walk-body{animation:msm-walk 14s linear infinite}.msm-city .window-1{animation:msm-window 12s ease-in-out infinite}.msm-motion{position:absolute;bottom:20px;right:25px;z-index:3;background:#302331cc;border:1px solid #f4ebd644;color:#f4ebd6;border-radius:22px;min-height:44px;padding:9px 13px;font:10px "MSM Sans",Barlow,Arial,sans-serif;cursor:pointer}.msm-paused svg *,.msm-offscreen svg *,.msm-tab-hidden svg *{animation-play-state:paused!important}.msm-cta:focus-visible,.msm-motion:focus-visible{outline:3px solid #c59164;outline-offset:5px}@keyframes msm-van{0%,8%{transform:translate(115px,57px);opacity:0}12%,70%{opacity:1}82%,100%{transform:translate(-500px,-250px);opacity:0}}@keyframes msm-walk{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,15px)}}@keyframes msm-window{0%,100%{opacity:1}50%{opacity:.45}}@media(max-width:700px){.msm-hub{padding:42px 24px}.msm-spotlight{min-height:840px}.msm-copy{width:100%;padding:30px 24px}.msm-copy h2{font-size:38px}.msm-copy>p:not(.msm-category){font-size:13px}.msm-city{width:650px;height:395px;right:50%;transform:translateX(50%);top:450px}.msm-logo{width:235px}.msm-motion{right:20px;bottom:15px}.msm-cta{font-size:11px;padding:13px 15px}}@media(prefers-reduced-motion:reduce){.msm-city svg *{animation:none!important}.msm-motion{display:none}.msm-city .vehicle{opacity:1}}

/* Kartenmotiv im Spiele-Grid: dieselbe Mechanik wie bei den Nachbarkarten,
   aber nur auf die eigene Karte gezielt. */
.art-main-street-mogul>.art-image{object-position:50% 46%}
.art-main-street-mogul>.game-logo{width:min(78%,300px);left:50%;top:10%;transform:translateX(-50%);filter:drop-shadow(0 8px 14px #30233140)}
.game-card:hover .art-main-street-mogul>.game-logo{transform:translateX(-50%) scale(1.03)}

/* Zweitlink zum TestFlight-Zugang: klar als sekundaer gesetzt, damit der
   Hauptweg die Spielseite bleibt. */
.msm-second{display:inline-flex;align-items:center;min-height:44px;margin:14px 0 0 16px;padding:12px 0;font-size:11px;font-weight:700;color:#f4ebd6;text-decoration:underline;text-underline-offset:4px}
.msm-second:focus-visible{outline:3px solid #c59164;outline-offset:5px}
/* Der Zweitlink macht den Textblock auf dem Handy rund 140 px hoeher. Die
   Stadtgrafik der Vorlage beginnt dort fest bei 450 px und lag damit quer ueber
   Zweitlink und Statuszeile (gemessen bei 390 px: Text endete auf 585, Grafik
   begann auf 451). Grafik nach unten, Karte entsprechend hoeher. */
@media(max-width:700px){
  .msm-second{margin:12px 0 0;display:inline-flex}
  .msm-spotlight{min-height:1020px}
  .msm-city{top:610px}
}