/* CC Electric — 16-bit "arcade" UI kit.
   Shared by the Code Arcade, the True Cost page and the NEC quick guide.
   Only defines new class names (ff-*, tc-*, nec-*) so it is safe to load
   alongside site.css and components.css on any page. */

:root{
  --ff-font:'Press Start 2P',monospace;
  --ff-win-a:#1a2a8c;      /* classic menu window blue, top */
  --ff-win-b:#0a1450;      /* bottom */
  --ff-edge:#e8f0ff;       /* white outer bevel */
  --ff-edge-2:#5878d8;     /* inner bevel */
  --ff-text:#f8f8f8;
  --ff-dim:#9aa8d8;
  --ff-gold:#f0d838;
  --ff-green:#38c838;
  --ff-red:#e04848;
  --ff-cyan:#58e0f0;
}

/* ── Window frame ───────────────────────────────────────────────── */
.ff-win{
  background:linear-gradient(180deg,var(--ff-win-a),var(--ff-win-b));
  border:4px solid var(--ff-edge);
  box-shadow:0 0 0 4px #0a1450, inset 0 0 0 2px var(--ff-edge-2);
  border-radius:6px;
  color:var(--ff-text);
  font-family:var(--ff-font);
  image-rendering:pixelated;
  position:relative;
}
.ff-win.tight{box-shadow:0 0 0 2px #0a1450, inset 0 0 0 2px var(--ff-edge-2);border-width:3px;}
.ff-win-hdr{
  font-size:9px;letter-spacing:.14em;color:var(--ff-gold);
  padding:12px 14px 10px;border-bottom:2px solid rgba(88,120,216,.5);
  line-height:1.6;
}
.ff-win-body{padding:14px;}

/* ── Type scale (Press Start 2P is tiny; these are the only sizes used) ── */
.ff-t7{font-family:var(--ff-font);font-size:7px;line-height:1.9;letter-spacing:.04em;}
.ff-t8{font-family:var(--ff-font);font-size:8px;line-height:1.9;letter-spacing:.04em;}
.ff-t10{font-family:var(--ff-font);font-size:10px;line-height:1.8;letter-spacing:.06em;}
.ff-t14{font-family:var(--ff-font);font-size:14px;line-height:1.6;letter-spacing:.04em;}
@media(min-width:700px){
  .ff-t7{font-size:8px}.ff-t8{font-size:9px}.ff-t10{font-size:12px}.ff-t14{font-size:18px}
}
.ff-gold{color:var(--ff-gold)}.ff-green{color:var(--ff-green)}
.ff-red{color:var(--ff-red)}.ff-cyan{color:var(--ff-cyan)}.ff-dim{color:var(--ff-dim)}

/* ── Buttons / menu rows: the FF cursor slides in on hover+focus ── */
.ff-btn{
  display:block;width:100%;text-align:left;
  font-family:var(--ff-font);font-size:8px;line-height:1.8;letter-spacing:.05em;
  background:transparent;color:var(--ff-text);
  border:2px solid transparent;border-radius:4px;
  padding:13px 12px 13px 26px;margin:0 0 6px;
  cursor:pointer;position:relative;
  min-height:44px; /* tap target */
  transition:background .1s,border-color .1s;
}
.ff-btn::before{
  content:'▶';position:absolute;left:8px;top:50%;transform:translateY(-50%);
  color:var(--ff-gold);opacity:0;transition:opacity .08s;
}
.ff-btn:hover,.ff-btn:focus-visible{background:rgba(88,120,216,.28);border-color:var(--ff-edge-2);outline:none;}
.ff-btn:hover::before,.ff-btn:focus-visible::before{opacity:1;animation:ffCursor .5s steps(2) infinite;}
@keyframes ffCursor{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(3px)}}
.ff-btn[disabled]{opacity:.45;cursor:default;}
.ff-btn[disabled]:hover{background:transparent;border-color:transparent;}
.ff-btn.correct{background:rgba(56,200,56,.3);border-color:var(--ff-green);}
.ff-btn.wrong{background:rgba(224,72,72,.3);border-color:var(--ff-red);}

.ff-cta{
  display:inline-block;font-family:var(--ff-font);font-size:8px;letter-spacing:.08em;
  background:#0f7a34;color:#fff;border:3px solid #38c838;border-radius:4px;
  padding:14px 18px;cursor:pointer;line-height:1.7;text-decoration:none;
  box-shadow:0 4px 0 #063d19;transition:transform .08s,box-shadow .08s;
}
.ff-cta:hover{transform:translateY(2px);box-shadow:0 2px 0 #063d19;}
.ff-cta.alt{background:#123a8c;border-color:#5878d8;box-shadow:0 4px 0 #061a45;}
.ff-cta.alt:hover{box-shadow:0 2px 0 #061a45;}

/* ── Dialogue box (the "story" beats) ───────────────────────────── */
.ff-dialog{
  background:linear-gradient(180deg,#101c60,#060c38);
  border:3px solid var(--ff-edge);
  box-shadow:inset 0 0 0 2px var(--ff-edge-2);
  border-radius:5px;padding:13px 14px;
  font-family:var(--ff-font);font-size:8px;line-height:2;color:var(--ff-text);
}
.ff-dialog .who{color:var(--ff-gold);display:block;margin-bottom:8px;}
.ff-dialog.good{border-color:#8cf0a0;box-shadow:inset 0 0 0 2px #2a8c40;}
.ff-dialog.bad{border-color:#f0a0a0;box-shadow:inset 0 0 0 2px #8c2a2a;}

/* ── HUD ────────────────────────────────────────────────────────── */
.ff-hud{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  font-family:var(--ff-font);font-size:8px;color:var(--ff-dim);letter-spacing:.06em;}
.ff-hud b{color:var(--ff-text);font-weight:400;}
.ff-hp{display:inline-flex;gap:3px;vertical-align:middle;}
.ff-hp i{width:9px;height:9px;background:var(--ff-red);border:1px solid #7a1818;display:block;font-style:normal;}
.ff-hp i.gone{background:#2a2a44;border-color:#1a1a2a;}

/* ── Pixel scene canvas ─────────────────────────────────────────── */
.ff-stage{
  width:100%;display:block;image-rendering:pixelated;
  background:#0a1450;border:3px solid var(--ff-edge-2);border-radius:4px;
  touch-action:manipulation;
}

/* ── Shake / zap feedback ───────────────────────────────────────── */
@keyframes ffShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-4px,2px)}
  40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(3px,2px)}}
.ff-shake{animation:ffShake .32s steps(2) 2;}
@keyframes ffFlash{0%,100%{opacity:0}50%{opacity:.85}}
.ff-flash{position:absolute;inset:0;background:#fff;pointer-events:none;animation:ffFlash .18s steps(1) 3;}
@keyframes ffBlink{0%,60%{opacity:1}61%,100%{opacity:0}}
.ff-blink{animation:ffBlink 1.1s steps(1) infinite;}

/* ── Arcade cabinet grid (game select) ──────────────────────────── */
.ff-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:22px;}
@media(min-width:620px){.ff-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.ff-grid{grid-template-columns:1fr 1fr 1fr;}}
.ff-card{
  background:linear-gradient(180deg,#1a2a8c,#0a1450);
  border:3px solid var(--ff-edge);box-shadow:0 0 0 3px #0a1450, inset 0 0 0 2px var(--ff-edge-2);
  border-radius:6px;padding:0;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .1s;font-family:var(--ff-font);color:var(--ff-text);
}
.ff-card:hover,.ff-card:focus-visible{transform:translateY(-3px);outline:none;border-color:var(--ff-gold);}
.ff-card canvas{width:100%;height:auto;display:block;background:#050a28;border-bottom:2px solid var(--ff-edge-2);}
.ff-card .cb{padding:13px 13px 15px;flex:1;display:flex;flex-direction:column;gap:8px;}
.ff-card .ct{font-size:9px;color:var(--ff-gold);line-height:1.7;letter-spacing:.06em;}
.ff-card .cd{font-size:7px;color:#c0ccf0;line-height:2;letter-spacing:.03em;}
.ff-card .cc{font-size:7px;color:var(--ff-green);line-height:1.8;margin-top:auto;}

/* ── Full-screen cartridge overlay ──────────────────────────────── */
.ff-overlay{
  position:fixed;inset:0;z-index:9000;background:rgba(2,5,20,.96);
  display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px;
}
.ff-overlay.open{display:block;}
.ff-sheet{max-width:560px;margin:0 auto;padding-bottom:30px;}
.ff-close{
  position:sticky;top:0;z-index:5;float:right;
  font-family:var(--ff-font);font-size:9px;background:#3a0a0a;color:#ffb8b8;
  border:2px solid #e04848;border-radius:4px;padding:11px 13px;cursor:pointer;min-height:44px;
}

/* ── Scanline flavour (subtle, disabled for reduced motion) ─────── */
.ff-scan{position:relative;}
.ff-scan::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.5;
}
@media(prefers-reduced-motion:reduce){
  .ff-scan::after{display:none}
  .ff-shake,.ff-flash,.ff-blink,.ff-btn:hover::before{animation:none}
}

/* ── Shared dark "arcade" page section ──────────────────────────── */
.ff-sec{background:#050a28;padding:54px 18px;
  background-image:radial-gradient(circle at 20% 10%,rgba(88,120,216,.16),transparent 55%),
                   radial-gradient(circle at 85% 80%,rgba(56,200,56,.1),transparent 50%);}
.ff-in{max-width:1080px;margin:0 auto;}
.ff-h{font-family:var(--ff-font);font-size:14px;line-height:1.7;color:#fff;letter-spacing:.04em;margin-bottom:14px;}
@media(min-width:700px){.ff-h{font-size:20px}}
.ff-p{font-size:.95rem;line-height:1.75;color:#a8b8e0;max-width:660px;font-family:Inter,system-ui,sans-serif;}
.ff-p a{color:var(--ff-cyan);font-weight:700;}

/* ── Arc Hunter wall (whack engine) ──────────────────────────── */
.ff-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.ff-cell{position:relative;aspect-ratio:1/1;min-height:60px;cursor:pointer;
  background:repeating-linear-gradient(90deg,#2a2018 0 12px,#241b14 12px 13px);
  border:3px solid #4a3a28;border-radius:2px;padding:0;
  display:flex;align-items:center;justify-content:center;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.ff-cell .spark{font-size:22px;line-height:1;opacity:0;transition:opacity .05s;pointer-events:none;
  filter:drop-shadow(0 0 5px #f0c020);}
.ff-cell.hot{background:#5a3a10;border-color:#f0c020;box-shadow:0 0 12px rgba(240,192,32,.65) inset;}
.ff-cell.hot .spark{opacity:1;animation:ffZap .18s steps(2,end) infinite;}
.ff-cell.burn{background:#3a1010;border-color:var(--ff-red);}
@keyframes ffZap{0%{transform:scale(1) rotate(-6deg)}100%{transform:scale(1.22) rotate(6deg)}}
@media(prefers-reduced-motion:reduce){
  .ff-cell.hot .spark{animation:none;}
}