/* Shared frame for the co-op mini-game prototypes. Game-specific styles live in each game's own stylesheet. */
:root{color-scheme:dark;--bg:#080f17;--panel:#111e2a;--panel2:#0c1721;--line:#2b3d4c;--ink:#edf1ef;--muted:#a6b4bc;--mint:#a5e0c9;--gold:#e7c18b;--rose:#f0a08c;--sky:#92b9e4;--leaf:#b8cf8b;
  --order:#e9d38a;--chaos:#e57a8f;--growth:#8fd18a;--void:#9a86e0;--decay:#b39a6b;--energy:#6fc8e8;--tap:44px}
*{box-sizing:border-box}
body.mg{margin:0;min-height:100vh;background:radial-gradient(ellipse at 20% 0,#1c303b 0,transparent 55%),var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent}
.mg button,.mg select,.mg input,.mg textarea{font:inherit;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--ink);padding:9px 12px}
.mg button{cursor:pointer;min-height:var(--tap);touch-action:manipulation}
.mg button:hover:enabled{border-color:var(--mint);background:#203a40}
.mg button:disabled{opacity:.45;cursor:default}
.mg :focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.mg .primary{background:var(--mint);color:#112921;border-color:var(--mint);font-weight:700}
.mg .primary:hover:enabled{background:#c4efdf;color:#112921}
.mg .mg-quiet{background:transparent;color:var(--muted)}
.mg a{color:var(--mint)}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.17em;color:var(--gold);margin:0 0 6px}
.mg-head{display:flex;align-items:center;gap:14px;padding:14px 4vw;border-bottom:1px solid var(--line);background:#080f17cc;position:sticky;top:0;z-index:5;backdrop-filter:blur(6px)}
.mg-head .brand{font-weight:800;letter-spacing:.16em;text-decoration:none;color:var(--ink);white-space:nowrap}
.mg-head .brand span{font-size:10px;color:var(--muted);letter-spacing:.1em}
.mg-head h1{font:22px/1.1 Georgia,serif;margin:0}
.mg-head #mgExport{margin-left:auto}
.mg-role{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;border-radius:20px;padding:4px 9px;border:1px solid}
.mg-role-commander{color:var(--sky);border-color:#4b6a8c}.mg-role-lieutenant{color:var(--rose);border-color:#8c5a4b}.mg-role-logistics{color:var(--leaf);border-color:#64784b}
.mg-role-research{color:var(--sky);border-color:#4b6a8c}.mg-role-exploration{color:var(--rose);border-color:#8c5a4b}.mg-role-reserve{color:var(--muted);border-color:#3a4a56}
.mg-main{max-width:1280px;margin:auto;padding:18px 4vw 40px}
.mg-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between}
.mg-meters{display:flex;flex-wrap:wrap;gap:8px}
.mg-meter{min-width:86px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.mg-meter span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mg-meter b{font-size:19px;font-variant-numeric:tabular-nums}
.mg-meter.mg-good b{color:var(--mint)}.mg-meter.mg-warn b{color:var(--gold)}.mg-meter.mg-bad b{color:var(--rose)}
.mg-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.mg-controls label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)}
.mg-controls input{width:120px}
.mg-status{min-height:26px;margin:12px 0;color:var(--gold)}
.mg-status.mg-good{color:var(--mint)}.mg-status.mg-bad,.mg-status.mg-warn{color:var(--rose)}
.mg-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.mg-stage{min-width:0}
.mg-side{padding:16px;border:1px solid var(--line);border-radius:12px;background:#111e2acc;font-size:13px}
.mg-rules{margin:0 0 14px;padding-left:18px;color:var(--muted)}.mg-rules li{margin:5px 0}.mg-rules b{color:var(--ink)}
.mg-output{margin:0 0 10px}.mg-inspired{font-size:11px;color:var(--muted);margin:0}
.mg-result{position:fixed;inset:0;background:#03070bcc;display:grid;place-items:center;padding:16px;z-index:20}
.mg-result[hidden]{display:none}
.mg-card{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 20px 60px #000a;animation:mg-rise .25s ease-out}
.mg-card h2{font:38px/1 Georgia,serif;margin:2px 0 8px}
.mg-tier-perfect{color:var(--gold)}.mg-tier-good{color:var(--mint)}.mg-tier-partial{color:var(--sky)}.mg-tier-failed{color:var(--rose)}.mg-tier-auto{color:var(--muted)}
.mg-headline{font-size:16px;margin:0 0 8px}
.mg-near{margin:0 0 10px;padding:9px 12px;border-left:3px solid var(--gold);background:#e7c18b14;color:var(--gold);font-size:14px}
.mg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:12px 0}
.mg-stats div{padding:8px 10px;background:var(--panel2);border-radius:8px}.mg-stats dt{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.mg-stats dd{margin:0;font-weight:700}
.mg-produces{font-size:13px;color:var(--mint)}
.mg-rate{border:1px solid var(--line);border-radius:10px;margin:14px 0;padding:8px 12px 12px}.mg-rate legend{font-size:11px;color:var(--muted);padding:0 4px}
.mg-scale{display:flex;align-items:center;gap:5px;margin:6px 0}.mg-scale span{width:84px;font-size:12px;color:var(--muted)}
.mg-scale button{min-height:36px;min-width:36px;padding:4px}.mg-scale button.on{background:var(--gold);color:#241a08;border-color:var(--gold)}
.mg-rate textarea{width:100%;margin-top:6px}
.mg-card-actions{display:flex;gap:10px;justify-content:flex-end}
.mg-pop{animation:mg-pop .35s ease-out}
.mg-shake{animation:mg-shake .3s ease-in-out}
@keyframes mg-pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes mg-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes mg-rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
body.mg-embedded .mg-head{display:none}
body.mg-embedded .mg-main{padding-top:12px}
body.mg-embedded .mg-controls label,body.mg-embedded #mgNew,body.mg-embedded .mg-rate,body.mg-embedded .mg-inspired{display:none}
@media (max-width:900px){.mg-layout{grid-template-columns:1fr}.mg-side{order:2}}
@media (max-width:520px){.mg-head{flex-wrap:wrap;gap:8px}.mg-head h1{font-size:18px}.mg-controls input{width:96px}}