/* ---------------------------------------------------------------
   Function Foundry — a single committed visual world (blueprint /
   schematic, dark-first by design, like a lab instrument panel).
   Colors are declared explicitly rather than theme-switched: this
   is a deliberate single-theme artifact, per the design guidance.
----------------------------------------------------------------- */
:root{
  --ink:      #0d1b2e;   /* page ground */
  --panel:    #142a44;   /* card surface */
  --panel-2:  #1b3654;   /* recessed / machine-box surface */
  --line:     #3a5a80;   /* structural rules & borders */
  --grid:     rgba(120,170,220,0.10);
  --f-cyan:   #5ad1e6;   /* function f accent */
  --g-amber:  #ff9d4d;   /* function g accent */
  --text:     #eaf1f8;
  --muted:    #8ea3bd;
  --success:  #6fe3a0;
  --error:    #ff6b6b;
  --radius:   10px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background:
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 32px),
    var(--ink);
  color:var(--text);
  font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  min-height:100vh;
  padding:32px 18px 64px;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:720px; margin:0 auto; }

/* ---------------- header plate ---------------- */
.plate{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 26px;
  margin-bottom:18px;
}
.plate::before, .plate::after,
.plate .rivet-tl, .plate .rivet-tr{
  content:'';
  position:absolute;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--line);
}
.plate::before{ top:10px; left:10px; }
.plate::after{ top:10px; right:10px; }
.plate .rivet-tl{ bottom:10px; left:10px; }
.plate .rivet-tr{ bottom:10px; right:10px; }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 6px;
}
.eyebrow b.f{ color:var(--f-cyan); }
.eyebrow b.g{ color:var(--g-amber); }

h1{
  font-family:'Big Shoulders Display', ui-sans-serif, sans-serif;
  font-weight:800;
  font-size:clamp(34px, 7vw, 50px);
  letter-spacing:.01em;
  line-height:.95;
  margin:0 0 8px;
  text-wrap:balance;
}

.sub{
  color:var(--muted);
  font-size:15px;
  max-width:54ch;
  margin:0;
}

/* ---------------- status bar ---------------- */
.statusbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:18px 0 16px;
  font-family:'IBM Plex Mono', monospace;
}
.stat{ text-align:center; }
.stat .num{
  font-size:22px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.stat .lbl{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.ticks{
  display:flex;
  gap:4px;
  flex:1;
  justify-content:center;
  padding:0 8px;
}
.tick{
  width:14px; height:6px;
  border-radius:2px;
  background:var(--panel-2);
  border:1px solid var(--line);
}
.tick.done{ background:var(--g-amber); border-color:var(--g-amber); }
.tick.now{ background:var(--f-cyan); border-color:var(--f-cyan); }

/* ---------------- game panel ---------------- */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
}

.machine-row{
  display:flex;
  align-items:stretch;
  gap:10px;
  margin-bottom:22px;
}
.machine{
  flex:1 1 0;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 14px;
  min-width:0;
}
.machine.f{ border-color: color-mix(in srgb, var(--f-cyan) 55%, var(--line)); }
.machine.g{ border-color: color-mix(in srgb, var(--g-amber) 55%, var(--line)); }
.machine .m-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.machine.f .m-label{ color:var(--f-cyan); }
.machine.g .m-label{ color:var(--g-amber); }
.machine .m-expr{
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(15px, 4vw, 19px);
  font-weight:500;
  white-space:nowrap;
  overflow-x:auto;
}

.arrow-col{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  width:22px;
}
.arrow-col.f{ color:var(--f-cyan); }
.arrow-col.g{ color:var(--g-amber); }
.arrow-col span{ display:inline-block; }
@media (prefers-reduced-motion: no-preference){
  .arrow-col span{ animation: drift 1.6s ease-in-out infinite; }
  .arrow-col.g span{ animation-direction: reverse; }
}
@keyframes drift{
  0%,100%{ transform:translateX(0); opacity:.55; }
  50%{ transform:translateX(3px); opacity:1; }
}

.combiner{
  flex:0 0 auto;
  width:56px; height:56px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at center, var(--panel-2) 0 62%, transparent 63%),
    conic-gradient(from 180deg, var(--f-cyan), var(--g-amber), var(--f-cyan));
  padding:3px;
}
.combiner span{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800;
  font-size:26px;
  color:var(--text);
}

.prompt-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.prompt{
  font-size:18px;
  font-weight:600;
  text-wrap:balance;
}
.prompt .op-mono{ font-family:'IBM Plex Mono', monospace; }

.hint-btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  background:transparent;
  border:1px dashed var(--line);
  border-radius:6px;
  padding:6px 10px;
  cursor:pointer;
  white-space:nowrap;
}
.hint-btn:hover{ color:var(--text); border-color:var(--muted); }
.hint-btn:focus-visible, button:focus-visible{
  outline:2px solid var(--f-cyan);
  outline-offset:2px;
}

.hint-box{
  display:none;
  font-family:'IBM Plex Mono', monospace;
  font-size:13.5px;
  color:var(--muted);
  background:var(--panel-2);
  border:1px dashed var(--line);
  border-radius:6px;
  padding:10px 12px;
  margin:-4px 0 16px;
}
.hint-box.show{ display:block; }

.answers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:6px;
}
@media (max-width:420px){ .answers{ grid-template-columns:1fr; } }

.answer-btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:16px;
  color:var(--text);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 12px;
  cursor:pointer;
  text-align:center;
  transition:border-color .12s, background .12s, transform .08s;
}
.answer-btn:hover:not(:disabled){ border-color:var(--f-cyan); }
.answer-btn:active:not(:disabled){ transform:scale(.98); }
.answer-btn:disabled{ cursor:default; }
.answer-btn.correct{
  border-color:var(--success);
  background:color-mix(in srgb, var(--success) 16%, var(--panel-2));
  color:var(--success);
}
.answer-btn.wrong{
  border-color:var(--error);
  background:color-mix(in srgb, var(--error) 14%, var(--panel-2));
  color:var(--error);
}
.answer-btn.dim{ opacity:.45; }

.feedback{
  display:none;
  margin-top:16px;
  padding:14px 16px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--panel-2);
}
.feedback.show{ display:block; }
.feedback .verdict{
  font-weight:600;
  margin-bottom:6px;
}
.feedback.correct .verdict{ color:var(--success); }
.feedback.wrong .verdict{ color:var(--error); }
.feedback .work{
  font-family:'IBM Plex Mono', monospace;
  font-size:13.5px;
  color:var(--muted);
  overflow-x:auto;
  white-space:nowrap;
}
.feedback .insight{
  margin-top:8px;
  font-size:13px;
  color:var(--muted);
  border-top:1px dashed var(--line);
  padding-top:8px;
}

.cta-row{
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
}
.btn-main{
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600;
  font-size:15px;
  color:var(--ink);
  background:var(--g-amber);
  border:none;
  border-radius:8px;
  padding:12px 22px;
  cursor:pointer;
}
.btn-main:hover{ filter:brightness(1.08); }
.btn-main:disabled{ opacity:.4; cursor:default; filter:none; }

.btn-ghost{
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600;
  font-size:15px;
  color:var(--text);
  background:transparent;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 22px;
  cursor:pointer;
}
.btn-ghost:hover{ border-color:var(--f-cyan); }

/* ---------------- start / end screens ---------------- */
.center-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
  padding:20px 6px 8px;
}
.op-badges{
  display:flex;
  gap:10px;
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700;
  font-size:22px;
}
.op-badges span{
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--muted);
}

.results-score{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800;
  font-size:56px;
  line-height:1;
}
.results-sub{ color:var(--muted); font-size:14px; margin-top:2px; }

.op-bars{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:420px; margin-top:6px; }
.op-bar-row{ display:flex; align-items:center; gap:10px; }
.op-bar-sym{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700;
  font-size:18px;
  width:22px;
  color:var(--muted);
}
.op-bar-track{
  flex:1;
  height:10px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden;
}
.op-bar-fill{
  height:100%;
  background:var(--success);
}
.op-bar-count{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--muted);
  width:38px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.footnote{
  text-align:center;
  color:var(--muted);
  font-size:12.5px;
  margin-top:22px;
  line-height:1.6;
}
.footnote code{
  font-family:'IBM Plex Mono', monospace;
  background:var(--panel);
  border:1px solid var(--line);
  padding:1px 5px;
  border-radius:4px;
}

.hidden{ display:none !important; }