/* FRANKOS 2.1 — Mission Control page (merged screenshots: BUILD YOUR MAP + FRANKOS palette) */
.view#view-mc{ background:#0a0e17; }
.mc-hero{ text-align:center; padding:18px 12px 6px; }
.mc-build{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight:900; font-size:28px; letter-spacing:2px; color:#f3dcae; text-shadow:0 0 24px rgba(212,175,120,.45); margin:0; }
.mc-shell{ display:flex; flex-direction:column; gap:16px; padding: 14px 16px 22px; }
.mc-stats{ width:100%; }
.mc-map{ width:100%; }
.mc-missions{ width:100%; }
.mc-constellation{ width:100%; }
.mc-panel{ background:rgba(16,20,30,.92); border:1px solid rgba(212,175,120,.35); border-radius:14px; padding:14px 16px; color:#b9a489; }
.mc-panel h3{ margin:0 0 10px; font-size:11px; letter-spacing:1.6px; color:#f3dcae; text-transform:uppercase; }
.badge{ background:linear-gradient(180deg,#d4af78,#a87440); color:#1c120b; padding:3px 8px; border-radius:10px; font-weight:800; letter-spacing:1px; }
.mc-hero-num{ color:#fff; font-weight:900; font-size:26px; letter-spacing:.5px; margin:6px 0 2px; }
.mc-sub{ color:#8a94a6; font-size:11px; margin-left:6px; letter-spacing:1px; text-transform:uppercase; }
.mc-bars{ margin:12px 0 6px; display:flex; flex-direction:column; gap:7px; }
.mc-bar-row{ display:grid; grid-template-columns:80px 1fr 46px; align-items:center; gap:8px; padding:2px 0; }
.mc-bar-row .label{ color:#cfd6e0; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-bar-row .value{ color:#f3dcae; font-weight:700; font-size:12px; text-align:right; }
.mc-bar-track{ height:9px; background:rgba(212,175,120,.12); border-radius:5px; overflow:hidden; min-width:0; }
.mc-bar-track>i{ display:block; height:100%; background:linear-gradient(90deg,#5fe3ff,#4ac6ff); width:0%; transition:width .4s ease; }
.mc-distro{ display:grid; grid-template-columns: 1fr 1fr; gap:6px; margin-top:10px; }
.mc-distro .box{ background:rgba(212,175,120,.08); border:1px solid rgba(212,175,120,.18); border-radius:12px; padding:8px 10px; }
.mc-distro .box .k{ color:#8a94a6; font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.mc-distro .box .v{ color:#f3dcae; font-weight:800; font-size:16px; }
.mc-gaugges{ display:flex; gap:10px; margin-top:10px; }
.mc-gauge{ flex:1; text-align:center; color:#8a94a6; font-size:10px; letter-spacing:1px; }
.mc-gauge .ring{ height:8px; background:rgba(212,175,120,.12); border-radius:4px; overflow:hidden; margin-top:4px; }
.mc-gauge .ring>i{ display:block; height:100%; background:linear-gradient(90deg,#d4af78,#f3dcae); }
.mc-pulse{ margin-top:10px; }
.mc-peak{ color:#f3dcae; font-weight:700; font-size:12px; margin-bottom:6px; }
.mc-log{ max-height:180px; overflow:hidden; }
.mc-log .row{ display:flex; gap:8px; padding:3px 0; border-bottom:1px solid rgba(212,175,120,.06); font-size:11px; color:#8a94a6; }
.mc-log .row .ts{ color:#f3dcae; min-width:38px; }
#mcOrb{ display:block; width:100%; height:auto; margin:0 auto; }
.mc-map-label{ text-align:center; color:#9bd17e; font-weight:900; letter-spacing:2px; margin-top:6px; text-shadow:0 0 14px #9bd17e; }
.mc-legend{ color:#9aa3b2; font-size:11px; line-height:1.45; }
.mc-cards{ display:flex; gap:14px; flex-wrap:wrap; }
.mc-card{ flex:1; min-width:140px; background:linear-gradient(160deg,rgba(52,33,18,.92),rgba(34,21,11,.95)); border:1px solid rgba(212,175,120,.35); border-radius:14px; padding:12px 14px; }
.mc-card-head{ color:#f3dcae; font-weight:800; font-size:11px; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.mc-card-val{ color:#fff; font-weight:900; font-size:22px; }
.mc-bar{ height:8px; background:rgba(212,175,120,.12); border-radius:4px; overflow:hidden; margin-top:6px; }
.mc-bar>i{ display:block; height:100%; background:linear-gradient(90deg,#d4af78,#f3dcae); width:0%; transition:width .4s ease; }
.mc-orb-frame{ text-align:center; position:relative; display:inline-block; }
.mc-map-sub{ color:#9aa3b2; font-size:10px; letter-spacing:.6px; margin-top:4px; }

@media (max-width: 980px){
  .mc-shell{ padding: 10px 8px 18px; }
  .mc-stats,.mc-map,.mc-missions,.mc-constellation{ width:100%; }
  /* Mobile: collapse 3-col grid → 1-col stack, cards full-width */
  .mc-grid-main{ grid-template-columns:1fr; grid-template-rows:auto; }
  .mc-grid-main .mc-g{ grid-column:span 1; grid-row:auto; }
  .mc-mini-stats{ grid-template-columns:repeat(3,1fr); gap:4px; }
  .mc-sys-row{ gap:8px; font-size:10px; }
  .mc-orb-frame canvas{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .mc-bar>i{ transition:none; }
}

/* Each .view gets a hero canvas pinned behind its topbar header */
.f2p-hero{
  position:relative;
  width:100%;
  height:148px;
  margin:-6px -14px 12px;
  border-radius:0 0 22px 22px;
  overflow:hidden;
  background:radial-gradient(120% 140% at 50% -20%, rgba(212,175,120,.18), transparent 60%);
  box-shadow:inset 0 -1px 0 rgba(243,220,174,.18);
}
.f2p-hero canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.f2p-hero .f2p-title{
  position:absolute; left:16px; bottom:12px; z-index:2;
  font-size:19px; font-weight:800; letter-spacing:.3px;
  color:var(--gold2,#f3dcae);
  text-shadow:0 2px 14px rgba(0,0,0,.6), 0 0 20px rgba(212,175,120,.35);
}
.f2p-hero .f2p-sub{
  position:absolute; left:16px; bottom:-4px; z-index:2;
  font-size:11px; color:rgba(243,220,174,.6); transform:translateY(18px);
}

/* orb -> page bloom continuity: the active page's hero pulses once on show */
.view.active .f2p-hero{ animation:f2pbloom .9s ease-out; }
@keyframes f2pbloom{ 0%{filter:brightness(1.8) saturate(1.4)} 100%{filter:none} }

/* interactive: tap-to-expand panels, glow on press */
.panel, .kpi, .wig, .mlabel{
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .25s, background .25s;
  cursor:pointer;
}
.panel:active, .kpi:active, .wig:active{ transform:scale(.985); }
.panel.f2p-open{ box-shadow:0 0 0 1px rgba(212,175,120,.5), 0 12px 40px rgba(0,0,0,.5); background:rgba(40,26,14,.6); }
/* MC panels: NEVER minimize/collapse — full content always visible */
.mc-shell .panel,
.mc-stats, .mc-map, .mc-missions, .mc-constellation,
.mc-panel, .mc-hero-num, .mc-hero, .mc-shell{ max-height:none!important; opacity:1!important; overflow:visible!important; }
.f2p-chev{ float:right; color:var(--gold2,#f3dcae); transition:transform .3s; font-size:12px; }
.panel.f2p-open .f2p-chev{ transform:rotate(180deg); }

/* live sparkline strip under Stat metrics */
.f2p-spark{ display:block; width:100%; height:34px; margin-top:6px; opacity:.85; }

/* section start: hide by default, .view.active reveals its hero (canvas drawn on show) */
.f2p-hero{ display:none; }
.view.active .f2p-hero{ display:block; }

/* Frank card mini-stats (real metrics, not empty) */
.mc-mini-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:8px 0 4px; }
.mc-mini-stats .ms{ background:rgba(212,175,120,.08); border:1px solid rgba(212,175,120,.25); border-radius:10px; padding:8px 4px; text-align:center; }
.mc-mini-stats .ms-v{ color:#f3dcae; font-weight:900; font-size:18px; line-height:1; min-height:20px; display:block; }
.mc-mini-stats .ms-k{ color:#8a94a6; font-size:9px; letter-spacing:.6px; margin-top:3px; }

/* Frank card bottom system strip — fills the card, no empty void */
.mc-sys-row{ display:flex; gap:18px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.mc-sys-row .ss{ display:flex; align-items:center; gap:5px; font-size:12px; color:#8a94a6; }
.mc-sys-row .ss b{ color:#d4af78; font-weight:800; letter-spacing:.4px; }
.mc-sys-row .ss span{ color:#f3dcae; font-weight:600; }

/* Activity card real stats strip */
.mc-act-stats{ display:flex; gap:14px; margin:8px 0 4px; flex-wrap:wrap; }
.mc-act-stats .as{ font-size:11px; color:#8a94a6; }
.mc-act-stats .as b{ color:#f3dcae; font-weight:800; font-size:14px; margin-right:3px; }

@media (prefers-reduced-motion: reduce){
  .view.active .f2p-hero{ animation:none; }
  .f2p-hero canvas{ animation:none!important; }
}