/* mgu-app.css — what the prototype never had, in the prototype's own terms.
 *
 * mgu-proto.css is design/mgu/src verbatim and is never edited. This sheet is
 * the short list of things a real app needs that a presentation prototype did
 * not: real card art in the art slot, links that must look like the
 * prototype's buttons, the story and rules text, the sign-in form, the share
 * overlay, the live odds table — and, last, the legacy class vocabulary the
 * admin screens are still written in.
 *
 * Every value here is lifted from a rule in mgu-proto.css; where a rule
 * targets `button`, the matching `a` gets the same declarations so a link and
 * a button that sit side by side are indistinguishable.
 */

/* ── links that are the prototype's buttons ─────────────────────────────── */
a.avatar{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
a.button.balance-button{white-space:nowrap}
.tabs a{display:inline-flex;align-items:center;font-size:14px;padding:9px 14px;min-height:41px;
  background:#0b1014e6;color:#c8d3d4;border:1px solid #3c535e;border-radius:2px}
.tabs a:hover{border-color:var(--accent)}
.tabs a.selected{border-color:#d5ea78;background:#293120;color:#e9f4a9}
.mobile-menu-grid a{text-align:left;display:flex;align-items:center;gap:12px;font-size:14px;padding:15px 13px;
  min-height:56px;background:#18272e;border:1px solid #3c5a63;border-radius:3px;color:var(--text)}
.mobile-menu-grid a span{color:#c7e786;font-size:20px;min-width:21px}
.mobile-menu-grid a.selected{border-color:#c7e786;background:#293923}
.review .button{font-size:12px;min-height:32px;padding:6px 10px;background:transparent;color:#e5eadf;
  border-color:#586370;margin-left:auto}
.stage-bottom .text-button,.stage-bottom a.text-button{font-size:12px}
@media(max-width:760px){
  .tabs a{white-space:nowrap;flex-shrink:0;min-height:43px;padding:10px 12px;font-size:13px}
  .mobile-menu-grid a{font-size:13px;padding:14px 11px;min-height:61px}
  .review .button{font-size:11px;min-height:31px;padding:5px 8px;white-space:nowrap}
}
@media(max-width:359px){.mobile-menu-grid{grid-template-columns:1fr}}

/* ── the art slot, with the real artwork in it ──────────────────────────────
   The prototype printed the card number because it had no art. The slot keeps
   its tinted wall, its id and its caption; the card sits in the middle. */
.art-slot.has-art{gap:8px}
.art-slot .art{display:block;height:150px;width:auto;max-width:100%;margin:0 auto;object-fit:contain;
  border:1px solid #0007;box-shadow:4px 4px 0 #0009;transform:rotate(-2deg);background:#0b1011}
.catalog-card:hover .art-slot .art{transform:rotate(0) translateY(-2px)}
.detail-card .art-slot .art{height:250px}
.result-card .art-slot .art{height:170px}
.catalog-card[hidden]{display:none}
a.catalog-card{color:inherit;border:1px solid #617176}
a.catalog-card:hover{border-color:var(--accent)}
@media(max-width:760px){
  .art-slot .art{height:118px}
  .detail-card .art-slot .art{height:200px}
  .result-card .art-slot .art{height:128px}
}

/* ── the rip room: the August cabinet inside the prototype's stage ──────────
   The cabinet is mop-scoped.css (mop.css under .moprip). These rules only fit
   it into the frame: no page background of its own (the wall shows round it),
   and it fills the stage's width instead of the viewport's. */
.rip-stage .stage-cabinet{flex:1;display:flex;align-items:center;justify-content:center;padding:22px 16px}
.rip-stage .moprip{background:none;background-image:none;min-height:0;height:auto;padding:0;width:100%}
.rip-stage .moprip .cabinet{width:min(430px,100%);box-shadow:0 0 0 2px #b9cd9f,8px 8px 0 #030405,9px 9px 0 #95a166}
@media(max-width:760px){.rip-stage .stage-cabinet{padding:14px 10px}}

.stage-center .result-card,.stage-center .contam-result{animation:mgu-rise .5s ease-out}
@keyframes mgu-rise{from{opacity:0;transform:translateY(16px) rotate(-3deg)}}
.contam-result .contam-no{font:12px/1.6 monospace;color:#c1cec5;letter-spacing:.04em}
.dock-balance{color:inherit;text-decoration:none}
.ladder-table td b{font-variant-numeric:tabular-nums}
.stage[aria-busy="true"] .pack-face{animation:reveal .65s ease-in-out infinite alternate}
.today-five{display:flex;gap:6px;margin:4px 0 2px}
.today-five i{flex:1;height:34px;border:1px solid #4e5c62;background:#0b1011;display:flex;align-items:center;
  justify-content:center;font:12px monospace;color:#6d7b80;font-style:normal;overflow:hidden}
.today-five i.h{border-color:#7b914d}
.today-five i.c{color:#ffb3af;border-color:#7a4b4f}
.today-five img{height:100%;width:auto;display:block}

/* The share overlay — mop.css's rules for it, fixed to the viewport here. */
.shareov{position:fixed;inset:0;z-index:50;background:#04070feb;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;padding:18px}
.shareov.open{display:flex}
.shareov canvas{width:min(100%,300px);border-radius:3px;box-shadow:6px 6px 0 #0009}
.shareov .row{display:flex;gap:8px;width:100%;max-width:300px}
.shareov .row>*{flex:1}
.shareov .cap{font:11px/1.6 monospace;color:#c1cec5;background:#0d1426cc;border:1px solid #4e5c62;
  padding:8px 10px;max-width:300px}

/* ── story and rules: founder-authored markdown, rendered verbatim ─────── */
.prose h1,.prose h2{font-family:Impact,'Arial Black',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:-.02em;margin:34px 0 12px;line-height:1.1}
.prose h1{font-size:34px}
.prose h2{font-size:26px}
.prose h3{font-family:'Arial Black',Arial,sans-serif;font-size:18px;margin:26px 0 8px}
.prose ul,.prose ol{color:var(--muted);line-height:1.7;padding-left:22px}
.prose li{margin:6px 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.prose strong{color:var(--text)}
.prose a{color:var(--accent);text-decoration:underline}
.prose table{white-space:normal;margin:14px 0}
.prose code{font-size:13px;overflow-wrap:anywhere}
.prose > :first-child{margin-top:0}
.story-panel{margin-top:22px}

/* ── sign-in ──────────────────────────────────────────────────────────────── */
.signin-panel{max-width:560px}
.signin-panel input[type=email]{width:100%}
.signin-panel .primary{width:100%;margin-top:4px}
.form-note{font-size:12px;color:var(--muted);line-height:1.6;margin:14px 0 0}
.inline-error:empty{display:none}
.doors{display:grid;gap:14px}

/* ── generic ─────────────────────────────────────────────────────────────── */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0}
.pager{display:flex;gap:10px;margin-top:18px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
code,.hash{overflow-wrap:anywhere;word-break:break-word}
img{max-width:100%}
html,body{overflow-x:clip}
.section-title .badge{white-space:nowrap}
.ok-msg{color:var(--accent);font-size:14px;min-height:1em;margin-top:10px}
.world-wrap iframe{background:#07090d}

/* ══════════════════════════════════════════════════════════════════════════
   LEGACY VOCABULARY — admin screens only
   ══════════════════════════════════════════════════════════════════════════
   Every public screen is written in the prototype's markup. The admin pages
   (/admin/mgu and its codes) still use the old classes; these keep them usable
   inside the new shell. Scoped under .pg so none of it can reach a prototype
   component that happens to share a class name. */
.pg .cl{font-size:11px;font-weight:700;letter-spacing:.13em;color:var(--accent);text-transform:uppercase;margin-bottom:8px}
.pg h1{font-family:Impact,'Arial Black',sans-serif;font-weight:400;text-transform:uppercase}
.pg .dim,.pg .muted{color:var(--muted)}
.pg .link{color:var(--accent)}
.pg .btnp,.pg .btng,.pg .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-weight:700;
  padding:11px 18px;border-radius:3px;border:1px solid var(--line);background:#171c22bb;color:var(--text);cursor:pointer}
.pg .btnp{border:1px solid #e9f2a1;background:#d4ef5b;color:#1b2116;font-weight:800;box-shadow:3px 3px 0 #050607}
.pg .btn.sm,.pg .btnp.sm,.pg .btng.sm{min-height:32px;padding:5px 10px;font-size:12px}
.pg .grid2{display:grid;gap:18px}
@media(min-width:900px){.pg .grid2{grid-template-columns:1fr 1fr}}
.pg .rowsplit{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.pg .rowsplit div{background:#0d1011ed;border:1px solid #53605d;padding:12px}
.pg .rowsplit span{display:block;font-size:11px;color:var(--muted)}
.pg .rowsplit b{display:block;font-family:'Arial Black',Arial,sans-serif;font-size:20px;color:#e0f185;margin-top:4px}
.pg .tbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px}
.pg .tbl th{text-align:left;font-size:11px;letter-spacing:.07em;color:#c6d4d4;background:#1d2930;padding:10px}
.pg .tbl td{padding:10px;border-top:1px solid #344b58;background:#10171c}
.pg .panel:has(.tbl){overflow-x:auto}
.pg .field{margin:12px 0;display:grid;gap:8px}
.pg .field label{font-size:14px}
.pg .field input{width:100%}
.pg .err{color:var(--red);font-size:13px;min-height:1em;margin-top:8px}
.pg .ok{color:var(--accent);font-size:13px;min-height:1em;margin-top:8px}
@media(max-width:760px){.pg .rowsplit{grid-template-columns:1fr}}

/* The live numbers in a stat carry a data-pool span so the rip room can
   update them; the prototype's `.stat span` (the label rule) must not reach it. */
.stat strong span{display:inline;margin:0;font:inherit;color:inherit;letter-spacing:inherit}

/* ── layout: the footer at the bottom, grids that wrap before they overflow ──
   The prototype sized .shell as calc(100svh - 43px) to leave room for its
   review bar, and let the workspace column end wherever its content ended —
   so on a short page the sidebar made the row taller than the content and the
   footer floated mid-page with backdrop under it. The workspace is now a column
   whose main grows, so the footer sits at the bottom of the row.
   The two-up grids wrap on the width of the CONTENT column (a container query
   on main), not the viewport: with the sidebar in, a 1180px window leaves main
   ~890px, and a 1.2fr/1fr pair there is where a panel got pushed off the edge. */
.shell{min-height:100svh}
.workspace{display:flex;flex-direction:column;min-width:0}
.workspace>main{flex:1 0 auto;width:100%;container-type:inline-size}
@container (max-width:900px){.two-col,.account-grid{grid-template-columns:minmax(0,1fr)}}
.two-col>*,.account-grid>*,.form-grid>*{min-width:0}
label.field input,label.field textarea,label.field select{width:100%;min-width:0}
@container (max-width:520px){.form-grid{grid-template-columns:minmax(0,1fr)}}

/* ── Issue #0: the cover first and large, the way in beside it ─────────────── */
.issue-zero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px;align-items:start;max-width:1280px}
@container (max-width:860px){.issue-zero{grid-template-columns:minmax(0,1fr);gap:22px}}
.issue-cover{margin:0}
.issue-cover img{display:block;width:100%;height:auto;max-width:620px;border:2px solid #d0e683;box-shadow:8px 8px 0 #030405,9px 9px 0 #95a166;background:#0b1011}
.issue-copy{padding-top:6px}
.issue-copy .eyebrow{color:#e2ea75;background:#11140cdc;padding:5px 9px;display:inline-block;border-left:3px solid #e546a0}
.issue-copy h1{font-family:Impact,'Arial Black',Arial,sans-serif;font-size:clamp(34px,4.3vw,58px);font-weight:400;text-transform:uppercase;
  letter-spacing:-.035em;line-height:1.06;text-shadow:3px 3px 0 #050607;margin:17px 0 15px}
.issue-copy .lead{background:#08090baa;display:inline;box-shadow:7px 0 0 #08090baa,-7px 0 0 #08090baa;line-height:1.8;color:#c9d2d1}
.issue-copy .actions{margin:22px 0 24px}
.issue-copy .actions .primary{font-size:16px;padding:14px 22px}
.issue-panel .eyebrow{display:block;margin-bottom:10px}
@media(max-width:760px){.issue-copy h1{font-size:34px}.issue-copy .lead{font-size:14px;line-height:1.65}}

/* ── the chapter, over the page (mgu-chapter.js) ───────────────────────────── */
.chapter-overlay{position:fixed;inset:0;z-index:100;background:#05070a;height:100dvh}
.chapter-overlay iframe{display:block;width:100%;height:100%;border:0}
html.chapter-open,html.chapter-open body{overflow:hidden}

/* ── notifications toggle (mgu-push.js) ──────────────────────────────────────
   Right by the pack: above the stage on every width, so at 390px it is on the
   first screen and nowhere near the rip dock, which is fixed to the bottom. */
.push-row{margin:0 0 14px}
.push-toggle{display:block;max-width:520px}
.push-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 14px;min-height:56px;
  background:#101619e8;border:1px solid #4d626b;border-left:4px solid #35c2cf;border-radius:3px;box-shadow:3px 3px 0 #0008;color:var(--text)}
.push-btn:hover:not(:disabled){border-color:var(--accent)}
.push-bell{flex:0 0 34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:#1b262a;color:#c7e786}
.push-bell svg{width:20px;height:20px}
.push-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.push-text b{font-family:'Arial Black',Arial,sans-serif;font-size:14px;letter-spacing:-.2px}
.push-text small{font-size:12px;color:var(--muted);line-height:1.35}
.push-switch{flex:0 0 42px;height:24px;border-radius:12px;background:#2a3438;border:1px solid #58676d;position:relative}
.push-switch i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#8a979c;transition:left .15s,background .15s}
.push-toggle[data-state="on"] .push-btn{border-left-color:#d4ef5b;background:#18200fe8}
.push-toggle[data-state="on"] .push-switch{background:#3b4d17;border-color:#9fbb4b}
.push-toggle[data-state="on"] .push-switch i{left:21px;background:#d4ef5b}
.push-toggle[data-state="on"] .push-bell{background:#2b3a12;color:#e1f48c}
.push-toggle[data-state="blocked"] .push-btn{border-left-color:#e08798}
.push-toggle[data-state="blocked"] .push-bell{color:#ffb9c8}
.push-toggle[data-state="ios-install"] .push-btn{border-left-color:#e7a34b}
.push-toggle[data-state="signed-out"] .push-btn{border-left-color:#8b9aa0}
.push-toggle[data-state="unsupported"] .push-btn,.push-toggle[data-state="unavailable"] .push-btn{opacity:.75}
.push-btn:disabled{opacity:.7}
.push-toggle.push-hint .push-btn{animation:mgu-push-pulse 1.2s ease-in-out 2}
@keyframes mgu-push-pulse{0%,100%{box-shadow:3px 3px 0 #0008}50%{box-shadow:0 0 0 4px #d4ef5b88,3px 3px 0 #0008;border-color:#d4ef5b}}
@media(prefers-reduced-motion:reduce){.push-toggle.push-hint .push-btn{animation:none;border-color:#d4ef5b}}
.panel .push-toggle{margin-top:12px}

/* The Add to Home Screen guide, in the prototype's dialog. */
.ios-steps{list-style:none;padding:0;margin:18px 0;display:grid;gap:12px;counter-reset:ios}
.ios-steps li{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid #3c5a63;background:#18272e;border-radius:3px}
.ios-steps li::before{counter-increment:ios;content:counter(ios);font:700 13px monospace;color:#c7e786;min-width:14px}
.ios-ico{flex:0 0 46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#0d1417;color:#5eb6ff}
.ios-ico img{border-radius:9px;display:block}
.ios-steps b{display:block;font-size:15px}
.ios-steps small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.5}
.code-input{letter-spacing:.3em}