/* Wargame Nexus app: "Get the app" panel, floating prompt and iPhone instructions. Uses the variables in styles.css. */
.app-band{padding:clamp(2.5rem,6vw,4rem) 0 0}
.app-card{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem 2rem;align-items:center;
  background:var(--panel);border:1px solid var(--line-2);border-left:3px solid var(--amber);border-radius:var(--radius);
  padding:clamp(1.25rem,3vw,2rem)}
.app-icon{border-radius:16px;box-shadow:0 0 0 1px var(--line-2)}
.app-copy{display:grid;gap:.5rem;max-width:62ch}
.app-copy h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:0}
.app-copy p{margin:0;color:var(--fg-2)}
.app-copy .label{color:var(--amber)}
.app-status{font-family:var(--mono);font-size:.82rem;color:var(--amber-2)!important;min-height:1.2em}
.app-status:empty{display:none}
.app-actions{display:grid;gap:.6rem;min-width:14rem}
.app-actions .btn{width:100%;justify-content:center}
.app-actions [hidden]{display:none}
.app-band.is-on .app-card{border-left-color:var(--green)}
@media (max-width:820px){
  .app-card{grid-template-columns:auto 1fr}
  .app-actions{grid-column:1/-1;min-width:0}
  .app-icon{width:56px;height:56px;border-radius:13px}
}

.app-banner{position:fixed;z-index:60;left:50%;bottom:calc(4.25rem + env(safe-area-inset-bottom));/* clears Netlify's badge */transform:translateX(-50%);
  width:min(30rem,calc(100% - 2rem));display:flex;align-items:center;gap:.8rem;padding:.7rem .7rem .7rem .8rem;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.55);
  animation:app-up .35s ease-out}
.app-banner img{border-radius:10px;flex:none}
.app-banner div{display:grid;gap:.1rem;flex:1;min-width:0}
.app-banner strong{font-family:var(--display);font-size:.98rem;color:var(--fg)}
.app-banner span{font-size:.82rem;color:var(--fg-3)}
.app-banner .btn{padding:.55rem 1rem;flex:none}
.app-x{flex:none;width:2.25rem;height:2.25rem;border:0;border-radius:6px;background:transparent;color:var(--fg-3);
  font-size:1.5rem;line-height:1;cursor:pointer}
.app-x:hover,.app-x:focus-visible{color:var(--fg);background:var(--line)}
@keyframes app-up{from{opacity:0;transform:translate(-50%,1rem)}}

.app-sheet{position:fixed;inset:0;z-index:70;display:grid;align-items:end;justify-items:center;
  background:rgba(3,6,10,.72);padding:1rem;padding-bottom:max(1rem,env(safe-area-inset-bottom))}
.app-sheet-card{position:relative;width:min(26rem,100%);display:grid;gap:.9rem;justify-items:start;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;padding:1.5rem;animation:app-rise .3s ease-out}
.app-sheet-card img{border-radius:12px}
.app-sheet-card h3{margin:0;font-size:1.35rem}
.app-sheet-card ol{margin:0;padding-left:1.2rem;display:grid;gap:.6rem;color:var(--fg-2)}
.app-sheet-card ol svg{vertical-align:-3px;color:var(--cyan)}
.app-sheet-card .btn{width:100%;justify-content:center}
.app-sheet-card .app-x{position:absolute;top:.6rem;right:.6rem}
.app-note{margin:0;font-size:.88rem;color:var(--amber-2)}
@keyframes app-rise{from{opacity:0;transform:translateY(1.5rem)}}

/* Inside the installed app the floating prompt is never needed. */
.is-app .app-banner{display:none}
@media (prefers-reduced-motion:reduce){.app-banner,.app-sheet-card{animation:none}}