/* game-shell · shared styles for /starwar.html and /plane.html (placeholder pages) */

main{ padding: 32px 0 48px;}

.crumbs{ font-size:13px; color: var(--ink-2); margin-bottom: 14px;}
.crumbs a:hover{ color: var(--brand); }
.crumbs .sep{ color: var(--ink-3); margin: 0 6px; }

.pagehead h1{
  font-size: 32px; font-weight: 700; letter-spacing:-.02em;
  color: var(--ink);
  max-width: 720px;
  line-height:1.2;
}
.pagehead p{
  margin-top: 12px;
  font-size: 16px; color: var(--ink-2);
  max-width: 640px;
  line-height:1.5;
}
.pagehead .meta{
  margin-top: 12px;
  display:flex; gap: 6px; flex-wrap: wrap;
}
.tag{
  display:inline-block; padding: 3px 10px; border-radius:999px;
  font-size: 12px; font-weight: 600;
}
.tag.amber{ background: var(--amber-soft); color: var(--amber);}
.tag.brand{ background: var(--brand-soft); color: var(--brand);}
.tag.accent{ background: var(--accent-soft); color: var(--accent);}

.player{
  margin-top: 28px;
  background:#0f172a;
  border-radius: 18px;
  aspect-ratio: 16/9;
  display:grid; place-items:center;
  color: #cbd5e1;
  overflow: hidden;
  position: relative;
}
.player::before{
  content:'';
  position: absolute; inset:0;
  background:
    radial-gradient(circle at 30% 40%, rgba(251,191,36,.10), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(56,189,248,.08), transparent 50%);
}
.player-inner{ position: relative; text-align: center; z-index: 1;}
.player-inner .icon{
  width: 64px; height:64px; margin: 0 auto 12px;
  border-radius: 16px;
  background: rgba(251,191,36,.12);
  display:grid; place-items:center;
  color: #fbbf24;
}
.player-inner h2{ font-size: 20px; color:#f1f5f9; margin-bottom: 6px;}
.player-inner p{ font-size: 13px; color: #94a3b8; max-width: 380px; margin: 0 auto;}

.status{
  margin-top: 24px;
  display:flex; justify-content:space-between; align-items:center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.status code{
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  background: var(--line-2); padding: 1px 6px; border-radius: 4px;
  font-size: 12px;
}
.status .right{ display:flex; gap: 8px; align-items:center; flex-wrap:wrap;}

.actions{ margin-top: 16px; display:flex; gap: 8px; flex-wrap:wrap;}
.btn-primary{
  display:inline-flex; align-items:center; gap: 6px;
  padding: 10px 18px; border-radius: 10px;
  background: var(--brand); color: #fff !important;
  font-weight: 600; font-size: 14px;
}
.btn-primary:hover{ background: var(--brand-2);}
.btn-ghost{
  display:inline-flex; align-items:center; gap: 6px;
  padding: 10px 18px; border-radius: 10px;
  background: transparent; border:1px solid var(--line);
  color: var(--ink); font-weight: 500; font-size: 14px;
}
.btn-ghost:hover{ background: var(--line-2); border-color: var(--ink-3);}

.screenshots{
  margin-top: 28px;
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.screenshot{
  aspect-ratio: 4/3;
  background: var(--line-2);
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 0;
}
.screenshot img{ width:100%; height:100%; object-fit: cover; display: block;}
.screenshot figcaption{
  font-size: 12px; color: var(--ink-2);
  padding: 6px 10px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.notes{
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  display:flex; align-items:flex-start; gap:14px;
}
.notes svg{ width:18px; height:18px; color: var(--brand); flex-shrink:0; margin-top: 3px;}
.notes-body{ font-size: 13.5px; color: var(--ink-2); line-height: 1.6;}
.notes-body strong{ color: var(--ink); font-weight: 600;}
.notes-body code{
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  background: var(--line-2); padding: 1px 6px; border-radius: 4px;
  font-size: 12px;
}
.notes-body ol{ margin: 8px 0 0 18px;}

@media (max-width: 720px){
  .screenshots{ grid-template-columns: 1fr;}
  .status{ flex-direction: column; align-items: stretch; gap: 12px;}
  .status .right{ justify-content: stretch;}
  .pagehead h1{ font-size: 24px;}
}