/* studio-games.css: styles for studio-games.js.   v1.1.0 (2026-10-10)
   The intro is the studio's own look and the same in every game. The dialog and the sound button take
   the game's look: set these variables in the game's own CSS (the defaults suit a dark game). */
:root {
  --sg-bg: #1b2030;
  --sg-text: #e8e4d8;
  --sg-border: #47506a;
  --sg-btn-bg: #2a3146;
  --sg-main-bg: #f0a43a;
  --sg-main-text: #1b1b1b;
  --sg-radius: 6px;
  --sg-font: inherit;
}

/* ---- confirm dialog: Cancel | verb, main button last ---- */
.sg-dialog {
  max-width: min(92vw, 420px); padding: 18px 20px 16px; border: 1px solid var(--sg-border);
  border-radius: calc(var(--sg-radius) + 4px); background: var(--sg-bg); color: var(--sg-text); font: var(--sg-font);
}
.sg-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.sg-dialog-title { margin: 0 0 6px; font-size: 1.1rem; }
.sg-dialog-body { margin: 0 0 14px; opacity: 0.85; }
.sg-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.sg-btn {
  min-height: 36px; padding: 6px 14px; border: 1px solid var(--sg-border); border-radius: var(--sg-radius);
  background: var(--sg-btn-bg); color: var(--sg-text); font: inherit; cursor: pointer;
}
.sg-btn-main { background: var(--sg-main-bg); border-color: var(--sg-main-bg); color: var(--sg-main-text); font-weight: 600; }
.sg-btn:focus-visible { outline: 3px solid var(--sg-main-bg); outline-offset: 2px; }

/* ---- sound: icon only (Owner, 2026-10-09: "2a") ---- */
.sg-sound { min-width: 36px; min-height: 36px; font-size: 1.1em; line-height: 1; }

.sg-version { font-size: 0.75em; opacity: 0.7; margin-left: 0.5em; }

/* ---- the studio intro (from CHEF!'s front screens, via RISEN! and ZEKE!) ---- */
.sg-screen {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center;
  justify-content: center; background: #120a0c; color: #f4e8d8; overflow: hidden;
}
.sg-brand { background: radial-gradient(ellipse at center, #2a1216 0%, #120a0c 70%); cursor: pointer; }
.sg-gate-mark { width: min(22vw, 140px); opacity: 0.85; animation: sg-breathe 2.4s ease-in-out infinite; }
.sg-gate-text { margin-top: 18px; font: 600 16px/1.4 "Baloo 2", Inter, "Segoe UI", sans-serif; letter-spacing: 0.08em; color: #b39f93; }
.sg-brand-wrap { position: relative; width: min(60vw, 1000px); }
.sg-brand-logo {
  display: block; width: 100%; filter: drop-shadow(0 12px 40px rgba(229, 50, 59, 0.3));
  animation: sg-pop 1.1s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
/* The hearts off the "a": positions from the Art Director's still. */
.sg-brand-heart { position: absolute; opacity: 0; animation: sg-heart-up 2.2s ease-out forwards; }
.sg-heart-a { left: 88%; top: -8%; width: 7%; animation-delay: 0.9s; }
.sg-heart-b { left: 95%; top: 8%; width: 5%; animation-delay: 1.15s; }
.sg-brand.sg-out { animation: sg-fade 0.6s ease-in forwards; }
.sg-skip { position: absolute; bottom: 18px; right: 22px; margin: 0; font: 13px Inter, "Segoe UI", sans-serif; color: #6f5d57; }
@keyframes sg-heart-up { 0% { opacity: 0; transform: translateY(40%) scale(0.4); } 25% { opacity: 1; transform: translateY(0) scale(1.1); } 40% { transform: scale(1); } 100% { opacity: 1; transform: translateY(-20%) scale(1); } }
@keyframes sg-pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sg-fade { to { opacity: 0; } }
@keyframes sg-breathe { 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sg-gate-mark, .sg-brand-logo, .sg-brand-heart, .sg-brand.sg-out { animation-duration: 0.01s; animation-delay: 0s; }
}