/* machine/machine.css
 * Part-variant styles ported from play/index.html so the engine renders
 * correctly on the home page (a different document). Rules are copied verbatim
 * from their source lines; see each comment for the origin.
 * New stage/finale rules are appended at the bottom.
 */

/* --- Marquee (play/index.html lines 63-66) --- */
.marquee { background: #ff0055; color: #fff200; font-weight: bold; font-size: 22px;
  padding: 8px 0; white-space: nowrap; overflow: hidden; border-bottom: 4px dashed #00ff2a; }
.marquee > span { display: inline-block; padding-left: 100%; animation: scroll 12s linear infinite; }  /* only the OUTER span scrolls (a nested counter span must not) */
@keyframes scroll { to { transform: translateX(-100%); } }

/* --- Base game button — renderer maps type:'button' to class 'btn' (renderer.js line 7) ---
 * Source: play/index.html line 88. */
.btn { cursor: pointer; font-family: inherit; font-weight: bold; border: none; border-radius: 10px; padding: 10px 16px; }

/* --- Switch button variant (play/index.html lines 93-95) --- */
.switch { width: 66px; height: 66px; border-radius: 50%; font-size: 30px; border: 4px solid #ffd400;
  background: #333; color: #888; cursor: pointer; font-family: inherit; }
.switch.on { background: #22c55e; color: #06280f; box-shadow: 0 0 18px #22c55e; }

/* --- Disabled / locked button state (renderer.js line 44 adds class 'locked') ---
 * Source: play/index.html line 89. */
.locked { opacity: .45; filter: grayscale(.7); cursor: not-allowed; }

/* --- Decoy CTA button variant (play/index.html lines 80-84) --- */
.decoy-cta { display: block; margin: 18px auto; padding: 22px 40px; font-size: 30px;
  font-family: inherit; font-weight: bold; cursor: pointer; color: #fff;
  background: linear-gradient(#ff8a00, #ff0055); border: 5px solid #fff200;
  border-radius: 14px; box-shadow: 0 8px 0 #7a0028; animation: throb 0.8s ease-in-out infinite alternate; }
@keyframes throb { to { transform: scale(1.06); } }

/* --- Download link variant — renderer maps type:'link' to class 'dl-link' (renderer.js line 7) ---
 * Source: play/index.html line 165. */
.dl-link { color: #9a9a9a; font-size: 13px; text-decoration: underline; cursor: pointer; }

/* --- Popup and close control (play/index.html lines 97-104) --- */
.popup { position: absolute; z-index: 100; background: #fffbe6; color: #222; border: 6px solid #ff0055;
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.6); padding: 22px; text-align: center; }
.popup h3 { margin: 0 0 8px; color: #d1006c; font-size: 22px; }
.popup p { margin: 0 0 14px; font-size: 15px; }
.popup .big-sub { background: #00b800; color: #fff; font-size: 22px; padding: 14px 26px; }
.tiny-x { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; line-height: 18px;
  text-align: center; font-size: 13px; color: #bbb; background: #eee; border: 1px solid #ccc;
  border-radius: 3px; cursor: pointer; }

/* --- flow-page wrapper — renderer.js creates this div for flow parts (renderer.js lines 59-63).
 * No explicit CSS rule exists in play/index.html; the renderer sets position/z-index/text-align
 * inline. Provide a baseline here so the class is not unstyled on the home page. --- */
.flow-page { position: relative; z-index: 1; text-align: center; }

/* --- Noise / muted helper text (play/index.html line 86) --- */
.noise { text-align: center; color: #fff; opacity: .85; font-size: 15px; margin: 6px 40px; }

/* --- Hero title + subtitle (play/index.html lines 71-73) --- */
h1 { text-align: center; margin: 14px 10px 4px; font-size: 40px; color: #fff200;
  text-shadow: 3px 3px 0 #ff0055, 6px 6px 0 #00e5ff; }
.sub { text-align: center; font-size: 20px; color: #00ff2a; margin: 0 0 10px; }

/* --- The Machine stage: a fixed 1000-wide canvas (height from the doc), scaled to fit via JS (hero-machine.js) --- */
#machine-wrap { position: relative; width: 100%; overflow: hidden; min-height: 120px; }
#machine-stage { position: relative; width: 1000px; height: 260px; transform-origin: top left; margin: 0; }
#machine-stage .flow-page { position: relative; }

/* Escape hatch — pinned, always clickable, OUTSIDE the machine layer. */
.machine-escape { display: block; text-align: center; margin: 10px auto 0; font-size: 15px; color: #cbb8ff; position: relative; z-index: 3000; }

/* Static fallback shown until the machine boots (and if JS/engine fails). */
#machine-fallback { text-align: center; }
#machine-wrap.booted #machine-fallback { display: none; }

/* Finale: PLAY door iris + shake. */
@keyframes machine-shake { 10%,90% { transform: translateX(-2px);} 50% { transform: translateX(3px);} }
#machine-wrap.finale #machine-stage { animation: machine-shake .5s linear 3; }
#play-door { position: absolute; inset: 0; z-index: 2500; display: none; align-items: center; justify-content: center;
  background: radial-gradient(circle, #00e5ff 0, #1b0033 70%); clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.1s ease-in; }
#machine-wrap.finale #play-door { display: flex; clip-path: circle(150% at 50% 50%); }
#play-door span { font-size: 40px; font-weight: bold; color: #fff200; text-shadow: 3px 3px 0 #ff0055; }