@font-face { font-family: 'JBM'; src: url(fonts/JetBrainsMono-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JBM'; src: url(fonts/JetBrainsMono-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }

/* zöld foszfor, mint a nagyasztal dashboardon */
:root {
  --fg: #39ff7a; --dim: #1c8a45; --faint: #0f3d20; --bg: #020a05; --hi: #c8ffd9; --warn: #ffd23f;
  --bga: rgba(2, 10, 5, .86); --glow: rgba(57, 255, 122, .45);
  --gut: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body {
  font-family: 'JBM', ui-monospace, monospace; color: var(--fg); font-size: 14px; line-height: 1.4;
  text-shadow: 0 0 6px var(--glow); -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
.dim { color: var(--dim); }
.hi { color: var(--hi); }
.warn { color: var(--warn); text-shadow: 0 0 6px rgba(255, 210, 63, .45); }
.b { font-weight: 700; }

#scope { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
#scan {
  position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
}

header, #zoom, #side, #card, footer { position: fixed; z-index: 1; }
header { top: var(--gut); left: var(--gut); right: 260px; pointer-events: none; }
h1 { font-size: 18px; letter-spacing: .04em; }
h2 { font-size: 12px; color: var(--dim); font-weight: 400; letter-spacing: .08em; margin-bottom: 4px; }
#stats { margin-top: 2px; }

#zoom { top: var(--gut); right: var(--gut); display: flex; gap: 4px; }
#zoom button {
  font: inherit; font-size: 13px; color: var(--dim); background: var(--bga); border: 1px solid var(--faint);
  padding: 4px 8px; cursor: pointer; text-shadow: inherit;
}
#zoom button:hover { color: var(--fg); border-color: var(--dim); }
#zoom button[aria-pressed="true"] { color: var(--bg); background: var(--fg); border-color: var(--fg); text-shadow: none; }

#side {
  top: 60px; right: var(--gut); width: 300px; max-height: calc(100% - 110px); overflow: auto;
  background: var(--bga); border: 1px solid var(--faint); padding: 10px 12px; display: flex; flex-direction: column; gap: 12px;
}
#side ul { list-style: none; }
#side li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 3px 4px; cursor: pointer; border-left: 2px solid transparent; }
#side li:hover, #side li.sel { background: var(--faint); border-left-color: var(--fg); }
#side li .sub { grid-column: 1 / -1; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#side li.none { cursor: default; color: var(--dim); }
#side li.none:hover { background: none; border-left-color: transparent; }

#card {
  left: var(--gut); bottom: 40px; width: 300px; background: var(--bga); border: 1px solid var(--dim); padding: 8px;
}
#card.flash { animation: glitch .5s steps(2) 1; }
#card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 6px; filter: saturate(.85) contrast(1.05); }
#card .credit { font-size: 11px; color: var(--dim); margin: -4px 0 6px; }
#card .row { display: flex; justify-content: space-between; gap: 8px; }
#card .x {
  position: absolute; top: 2px; right: 4px; font: inherit; font-size: 18px; color: var(--hi); background: var(--bga);
  border: 0; width: 28px; height: 28px; cursor: pointer; text-shadow: inherit;
}
#card .x:hover { color: var(--warn); }
@keyframes glitch {
  0% { clip-path: inset(0 0 60% 0); transform: translateX(-6px); opacity: .4; }
  50% { clip-path: inset(40% 0 0 0); transform: translateX(6px); opacity: .8; }
  100% { clip-path: inset(0); transform: none; opacity: 1; }
}

footer { left: var(--gut); right: var(--gut); bottom: 10px; font-size: 11px; text-align: right; pointer-events: none; }
footer a { pointer-events: auto; color: var(--dim); }

@media (prefers-reduced-motion: reduce) { #card.flash { animation: none; } }

/* telefon: a lista alul, összecsukva csak a fejléce látszik */
.tog { display: none; }
@media (max-width: 760px) {
  body { font-size: 13px; }
  h1 { font-size: 15px; }
  header { right: var(--gut); }
  #stats { font-size: 12px; }
  #zoom { top: auto; bottom: 26px; left: var(--gut); right: var(--gut); }
  #zoom button { flex: 1; padding: 6px 0; }
  #side {
    top: auto; bottom: 66px; left: var(--gut); right: var(--gut); width: auto; max-height: 45%;
    padding: 6px 10px; gap: 8px;
  }
  #side h2 { margin: 0; cursor: pointer; display: flex; justify-content: space-between; gap: 6px; }
  #side h2 #oddn { color: var(--warn); margin-right: auto; }
  .tog { display: inline; }
  .tog::after { content: '▴'; }
  #side.open .tog::after { content: '▾'; }
  #side:not(.open) ul, #side:not(.open) section:nth-child(2) { display: none; }
  #side.open h2 { margin-bottom: 4px; }
  #card { left: var(--gut); right: var(--gut); width: auto; bottom: 104px; z-index: 2; display: grid; grid-template-columns: 120px 1fr; gap: 0 10px; }
  #card img { grid-row: span 5; margin: 0; height: 100%; aspect-ratio: auto; }
  #card > :not(img):not(.x) { grid-column: 2; }
  #card .credit { margin: 0; }
  footer { bottom: 6px; text-align: left; font-size: 10px; white-space: nowrap; }
  footer .home { display: none; }
}