@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Share+Tech+Mono&display=swap');

:root {
  --green: #00ff41;
  --green-dim: #00cc33;
  --green-glow: rgba(0,255,65,0.35);
  --green-glow2: rgba(0,255,65,0.12);
  --amber: #ffb000;
  --amber-glow: rgba(255,176,0,0.35);
  --red: #ff3333;
  --cyan: #00e5ff;
  --cyan-glow: rgba(0,229,255,0.3);
  --dark: #000000;
  --dark2: #001100;
  --dark3: #0a0f0a;
  --card-bg: #020d02;
  --border: #1a2e1a;
  --border-bright: #00cc33;
  --text-dim: #a0c8a0;
  --text-mid: #c8e4c8;
  --font-head: 'Orbitron', monospace;
  --font-mono: 'Share Tech Mono', monospace;
  --radius: 4px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:focus-visible { outline:2px solid var(--green); outline-offset:3px; border-radius:2px; }
:focus:not(:focus-visible) { outline:none; }
html { scroll-behavior:smooth; }

body {
  background:var(--dark);
  color:var(--green);
  font-family:var(--font-mono);
  min-height:100vh;
  overflow-x:hidden;
}

/* scanlines */
body::before {
  content:'';
  position:fixed; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.07) 2px,rgba(0,0,0,0.07) 4px);
  pointer-events:none;
  z-index:9999;
}

/* ── HEADER ─────────────────────────────────────────────────────── */
header {
  position:sticky; top:0; z-index:500;
  background:rgba(0,0,0,0.97);
  border-bottom:1px solid var(--green-dim);
  backdrop-filter:blur(10px);
  height:56px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px;
}

.logo {
  font-family:var(--font-head);
  font-size:1.2rem; font-weight:900;
  letter-spacing:3px;
  animation:glow-pulse 3s ease-in-out infinite;
}

.logo span.copper { color:var(--amber); }
.logo span.sid    { color:var(--green); }
.logo sup { font-size:0.4rem; color:var(--text-dim); vertical-align:super; }

@keyframes glow-pulse {
  0%,100% { text-shadow:0 0 8px var(--green-glow); }
  50%      { text-shadow:0 0 20px var(--green-glow),0 0 40px var(--green-glow2); }
}

.header-badges { display:flex; gap:8px; }

.badge {
  padding:3px 10px; border-radius:2px;
  font-family:var(--font-head); font-size:0.62rem; font-weight:700;
  letter-spacing:2px; border:1px solid;
}
.badge-c64   { color:var(--cyan);  border-color:var(--cyan);  background:rgba(0,229,255,0.08); }
.badge-amiga { color:var(--amber); border-color:var(--amber); background:rgba(255,176,0,0.08); }

/* ── TABS ───────────────────────────────────────────────────────── */
.tabs-nav {
  background:var(--dark2);
  border-bottom:1px solid var(--border);
  display:flex; overflow-x:auto; scrollbar-width:none; padding:0 12px;
}
.tabs-nav::-webkit-scrollbar { display:none; }

.tab-btn {
  padding:12px 16px; background:none; border:none;
  color:var(--text-dim); font-family:var(--font-mono);
  font-size:0.72rem; cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:all 0.2s; letter-spacing:1px; text-transform:uppercase;
}
.tab-btn:hover { color:var(--green); }
.tab-btn.active { color:var(--green); border-bottom-color:var(--green); text-shadow:0 0 8px var(--green-glow); }
.tab-btn.active.amiga-tab { color:var(--amber); border-bottom-color:var(--amber); text-shadow:0 0 8px var(--amber-glow); }

/* ── MAIN ───────────────────────────────────────────────────────── */
main { max-width:1100px; margin:0 auto; padding:28px 16px; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

.section-title {
  font-family:var(--font-head); font-size:0.82rem;
  letter-spacing:4px; text-transform:uppercase;
  margin-bottom:20px; padding-bottom:10px;
  border-bottom:1px solid var(--border);
  color:var(--green); text-shadow:0 0 8px var(--green-glow);
}
.section-title.amber-color { color:var(--amber); text-shadow:0 0 8px var(--amber-glow); }

/* ── GRID ───────────────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:700px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

/* ── CARD ───────────────────────────────────────────────────────── */
.card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px; position:relative;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--green-dim),transparent);
  opacity:0.4;
}
.card h3 {
  font-family:var(--font-head); font-size:0.68rem;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:14px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* ── INPUTS ─────────────────────────────────────────────────────── */
label {
  font-size:0.7rem; color:var(--text-dim); display:block;
  margin-bottom:5px; letter-spacing:1px; text-transform:uppercase;
}

input[type="text"], input[type="number"], select {
  width:100%; background:var(--dark2); border:1px solid var(--border);
  color:var(--green); font-family:var(--font-mono); font-size:0.88rem;
  padding:9px 11px; border-radius:var(--radius); outline:none;
  transition:border-color 0.2s,box-shadow 0.2s; margin-bottom:12px;
}
input:focus, select:focus {
  border-color:var(--green-dim);
  box-shadow:0 0 8px var(--green-glow2);
}
select option { background:var(--dark3); }

input[type="color"] {
  width:36px; height:26px; padding:2px; margin:0;
  cursor:pointer; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--dark2);
}

.result-box {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px; min-height:40px;
  word-break:break-all; font-size:0.88rem;
}
.result-label {
  font-size:0.67rem; color:var(--text-dim); margin-bottom:5px;
  letter-spacing:1px; text-transform:uppercase;
}
.result-value {
  color:var(--green); font-size:1rem; font-weight:bold;
  text-shadow:0 0 8px var(--green-glow);
}

.info-box {
  background:rgba(0,255,65,0.04); border:1px solid var(--border);
  border-left:3px solid var(--green-dim); border-radius:var(--radius);
  padding:12px; margin-top:12px;
}

/* ── BUTTONS ────────────────────────────────────────────────────── */
.btn {
  padding:7px 14px; border-radius:var(--radius); border:1px solid;
  font-family:var(--font-mono); font-size:0.72rem; cursor:pointer;
  letter-spacing:1px; text-transform:uppercase; transition:all 0.15s;
}
.btn-green  { background:rgba(0,255,65,0.08); color:var(--green); border-color:var(--green-dim); }
.btn-green:hover  { background:rgba(0,255,65,0.2); box-shadow:0 0 10px var(--green-glow); }
.btn-amber  { background:rgba(255,176,0,0.08); color:var(--amber); border-color:var(--amber); }
.btn-amber:hover  { background:rgba(255,176,0,0.2); box-shadow:0 0 10px var(--amber-glow); }
.btn-danger { background:rgba(255,51,51,0.08); color:var(--red); border-color:var(--red); }
.btn-danger:hover { background:rgba(255,51,51,0.2); }

.btn-icon {
  background:none; border:none; color:var(--text-dim);
  cursor:pointer; font-size:0.85rem; padding:2px 6px;
  transition:color 0.1s;
}
.btn-icon:hover { color:var(--red); }

/* ── PALETTE ────────────────────────────────────────────────────── */
.palette-grid {
  display:grid; grid-template-columns:repeat(8,1fr);
  gap:5px; margin-bottom:14px;
}
.color-swatch {
  aspect-ratio:1; border-radius:3px; cursor:pointer;
  border:2px solid transparent;
  transition:transform 0.1s,border-color 0.1s,box-shadow 0.1s;
}
.color-swatch:hover  { transform:scale(1.1); border-color:var(--green); box-shadow:0 0 8px var(--green-glow); }
.color-swatch.selected { border-color:#fff; transform:scale(1.15); box-shadow:0 0 12px var(--green-glow); }

.color-info {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px;
  display:flex; align-items:center; gap:14px;
}
.color-preview-large {
  width:56px; height:56px; border-radius:var(--radius);
  border:1px solid var(--border); flex-shrink:0;
}
.color-details { flex:1; }
.color-details p { font-size:0.78rem; margin-bottom:4px; color:var(--text-dim); }
.color-details span { color:var(--green); }

/* ── PETSCII ────────────────────────────────────────────────────── */
.petscii-grid {
  display:grid; grid-template-columns:repeat(16,1fr);
  gap:2px; margin-bottom:16px;
}
.petscii-char {
  aspect-ratio:1; background:var(--dark2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:0.78rem; cursor:pointer; border-radius:2px;
  transition:all 0.1s; color:var(--green);
}
.petscii-char:hover  { background:var(--dark3); border-color:var(--green-dim); }
.petscii-char.selected { background:var(--green); color:#000; }

.petscii-output {
  background:#000820; color:#a0c8ff;
  font-family:var(--font-mono); padding:18px;
  min-height:110px; border-radius:var(--radius);
  font-size:0.95rem; white-space:pre-wrap; word-break:break-all;
  border:1px solid #1a2e4a; box-shadow:inset 0 0 20px rgba(0,100,255,0.08);
}

/* ── SID TABLE ──────────────────────────────────────────────────── */
.sid-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
.sid-table th {
  background:var(--dark2); color:var(--text-dim); padding:9px 10px;
  text-align:left; letter-spacing:2px; font-size:0.65rem;
  text-transform:uppercase; border-bottom:1px solid var(--border);
  font-family:var(--font-head);
}
.sid-table td { padding:7px 10px; border-bottom:1px solid var(--border); color:var(--text-mid); }
.sid-table tr:hover td { background:var(--dark2); color:var(--green); }
.freq-col { color:var(--amber) !important; }
.reg-col  { color:var(--green) !important; text-shadow:0 0 6px var(--green-glow2); }

/* ── REG TABLE ──────────────────────────────────────────────────── */
.reg-table { width:100%; border-collapse:collapse; font-size:0.78rem; }
.reg-table th {
  background:var(--dark2); color:var(--text-dim); padding:8px 10px;
  text-align:left; font-size:0.65rem; letter-spacing:2px;
  text-transform:uppercase; border-bottom:1px solid var(--border);
  font-family:var(--font-head);
}
.reg-table td { padding:6px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
.reg-table tr:hover td { background:var(--dark2); }
.addr-col { color:var(--amber); font-family:var(--font-mono); font-size:0.76rem; }
.name-col { color:var(--green); text-shadow:0 0 6px var(--green-glow2); }
.desc-col { color:var(--text-dim); font-size:0.73rem; }

/* ── CHIP SELECT ────────────────────────────────────────────────── */
.chip-select { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.chip-btn {
  padding:5px 14px; border-radius:2px; border:1px solid var(--border);
  background:var(--dark2); color:var(--text-dim); font-family:var(--font-mono);
  font-size:0.7rem; cursor:pointer; letter-spacing:1px;
  transition:all 0.15s; text-transform:uppercase;
}
.chip-btn:hover { color:var(--green); border-color:var(--green-dim); }
.chip-btn small { opacity:0.6; }
.chip-btn.active-c64   { background:rgba(0,255,65,0.1); color:var(--green); border-color:var(--green-dim); }
.chip-btn.active-amiga { background:rgba(255,176,0,0.1); color:var(--amber); border-color:var(--amber); }

/* ── SPRITE ─────────────────────────────────────────────────────── */
.sprite-canvas-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; }
#spriteCanvas {
  image-rendering:pixelated; border:1px solid var(--green-dim);
  box-shadow:0 0 16px var(--green-glow2); background:#000; cursor:crosshair;
}
.sprite-tools { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; }
.sprite-data {
  width:100%; background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px; font-size:0.7rem;
  color:var(--green); word-break:break-all; min-height:55px;
  text-shadow:0 0 6px var(--green-glow2); line-height:1.6;
}

/* ── BASIC TOKENS ───────────────────────────────────────────────── */
.token-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:6px;
}
.token-card {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--radius); padding:8px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; transition:all 0.15s;
}
.token-card:hover { border-color:var(--green-dim); background:rgba(0,255,65,0.06); }
.token-card.flash { background:var(--green); }
.token-byte { font-size:0.65rem; color:var(--amber); letter-spacing:1px; }
.token-kw   { font-size:0.82rem; color:var(--green); font-weight:bold; }

/* ── COPPER ─────────────────────────────────────────────────────── */
.copper-list {
  min-height:60px; display:flex; flex-direction:column; gap:4px;
}
.copper-ins {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:2px; padding:8px 12px;
  display:flex; align-items:center; gap:10px;
  font-size:0.78rem;
}
.copper-ins-text { color:var(--green); flex:1; }
.copper-ins-asm  { color:var(--amber); font-size:0.72rem; font-family:var(--font-mono); }

.copper-output {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px;
  font-family:var(--font-mono); font-size:0.78rem;
  color:var(--green); white-space:pre; overflow-x:auto;
  min-height:80px; line-height:1.7;
  text-shadow:0 0 4px var(--green-glow2);
}

/* ── BLITTER LF ─────────────────────────────────────────────────── */
.lf-table { margin:8px 0; }
.lf-row {
  display:grid; grid-template-columns:1fr 1fr 1fr 1.5fr 1fr;
  align-items:center; padding:5px 8px;
  border-bottom:1px solid var(--border); font-size:0.78rem;
}
.lf-row:first-child { border-bottom:1px solid var(--green-dim); }
.lf-header { color:var(--text-dim); font-family:var(--font-head); font-size:0.65rem; letter-spacing:1px; }
.lf-row input[type="checkbox"] {
  width:16px; height:16px; cursor:pointer; margin:0; accent-color:var(--green);
}

/* ── MODES AMIGA ────────────────────────────────────────────────── */
.mode-card { margin-bottom:0; }
.mode-header {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:10px;
}
.mode-name {
  font-family:var(--font-head); font-size:0.82rem; color:var(--amber);
  letter-spacing:2px;
}
.mode-desc  { font-size:0.8rem; color:var(--text-mid); line-height:1.7; margin-bottom:8px; }
.mode-bits  { font-size:0.72rem; color:var(--green); background:var(--dark2); padding:6px 10px; border-radius:2px; margin-bottom:6px; }
.mode-usage { font-size:0.75rem; color:var(--text-dim); }

/* ── MEMORY ─────────────────────────────────────────────────────── */
.mem-bar-wrap { margin:14px 0; }
.mem-bar-label { font-size:0.67rem; color:var(--text-dim); margin-bottom:5px; letter-spacing:1px; text-transform:uppercase; }
.mem-bar {
  height:26px; background:var(--dark2); border-radius:var(--radius);
  overflow:hidden; display:flex; border:1px solid var(--border);
}
.mem-segment {
  height:100%; display:flex; align-items:center; justify-content:center;
  font-size:0.62rem; font-weight:bold; letter-spacing:1px;
  transition:width 0.4s; overflow:hidden; font-family:var(--font-head);
}
.seg-chip { background:rgba(0,255,65,0.4); color:#000; }
.seg-fast { background:rgba(255,176,0,0.5); color:#000; }
.seg-slow { background:rgba(0,229,255,0.3); color:#000; }
.seg-free { background:transparent; }

.legend { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.legend-item { display:flex; align-items:center; gap:5px; font-size:0.7rem; color:var(--text-dim); }
.legend-dot   { width:12px; height:12px; border-radius:2px; }

/* ── PINOUT ─────────────────────────────────────────────────────── */
.pinout-wrap  { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.pinout-diagram {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px; font-size:0.72rem;
  color:var(--green); white-space:pre; flex-shrink:0;
  text-shadow:0 0 6px var(--green-glow2);
}
.pinout-table         { flex:1; min-width:200px; }
.pinout-table table   { width:100%; border-collapse:collapse; font-size:0.76rem; }
.pinout-table th      { background:var(--dark2); color:var(--text-dim); padding:6px 9px; font-size:0.65rem; letter-spacing:2px; text-transform:uppercase; border-bottom:1px solid var(--border); text-align:left; font-family:var(--font-head); }
.pinout-table td      { padding:5px 9px; border-bottom:1px solid var(--border); }
.pin-num  { color:var(--amber); font-weight:bold; }
.pin-name { color:var(--green); text-shadow:0 0 6px var(--green-glow2); }
.pin-desc { color:var(--text-dim); font-size:0.7rem; }

/* ── FOOTER ─────────────────────────────────────────────────────── */
footer {
  text-align:center; padding:24px; border-top:1px solid var(--border);
  color:var(--text-dim); font-size:0.7rem; letter-spacing:1px; margin-top:44px;
  position:relative;
}
footer::before {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg,transparent,var(--green-dim),transparent);
}
footer a { color:var(--green); text-decoration:none; }
footer a:hover { text-shadow:0 0 10px var(--green-glow); }

/* ── SCROLLBAR ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--dark); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--green-dim); }