/* Helpdesk '86 – retro (EGA) UI. A paletta a canvas jelenetnek is forrása (palette.js olvassa). */

@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../font/vt323-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../font/vt323-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* EGA alappaletta (16 szín) */
  --ega-0: #000000;  /* fekete */
  --ega-1: #0000aa;  /* kék */
  --ega-2: #00aa00;  /* zöld */
  --ega-3: #00aaaa;  /* cián */
  --ega-4: #aa0000;  /* piros */
  --ega-5: #aa00aa;  /* bíbor */
  --ega-6: #aa5500;  /* barna */
  --ega-7: #aaaaaa;  /* világosszürke */
  --ega-8: #555555;  /* sötétszürke */
  --ega-9: #5555ff;  /* világoskék */
  --ega-10: #55ff55; /* világoszöld */
  --ega-11: #55ffff; /* világoscián */
  --ega-12: #ff5555; /* világospiros */
  --ega-13: #ff55ff; /* világosbíbor */
  --ega-14: #ffff55; /* sárga */
  --ega-15: #ffffff; /* fehér */

  --bg: var(--ega-0);
  --panel: var(--ega-1);
  --panel-2: #000077; /* a kék sötétebb árnyalata nem EGA: csak háttérre */
  --text: var(--ega-15);
  --muted: var(--ega-7);
  --accent: var(--ega-14);
  --link: var(--ega-11);
  --ok: var(--ega-10);
  --partial: var(--ega-14);
  --fail: var(--ega-12);
  --p1: var(--ega-12);
  --p2: var(--ega-14);
  --p3: var(--ega-11);
  --p4: var(--ega-7);
  --scale: 2;
  --fs: 22px;
  --gutter: 16px;          /* oldalsó margó (main) */
  --px: 12px;              /* panel vízszintes belső margó */
  --tap: 44px;             /* minimális érintési célpont */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  color-scheme: dark;
}
@media (max-width: 899px) {
  :root { --fs: 21px; }
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'VT323', ui-monospace, 'Courier New', monospace;
  font-size: var(--fs);
  line-height: 1.15;
  -webkit-font-smoothing: none;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button, summary, label, a, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; }
p { margin: 0 0 .5em; }
a { color: var(--link); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: #000; padding: 4px 8px; z-index: 2000; }
.skip:focus { left: 8px; }

:focus-visible { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* --- felső sáv --- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  background: var(--ega-7); color: var(--ega-0);
  padding: calc(2px + var(--sa-t)) max(12px, var(--sa-r)) 2px max(12px, var(--sa-l));
  border-bottom: 2px solid var(--ega-8);
}
.brand { font-size: 1.15em; letter-spacing: 1px; }
.brand-btn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ega-1); min-height: 32px; display: inline-flex; align-items: center; }
.brand-btn::first-letter { color: var(--ega-4); }
.topnav { display: flex; gap: 6px; flex-wrap: wrap; }
.tbtn {
  background: var(--ega-7); color: var(--ega-0); border: 0; padding: 0 8px; cursor: pointer;
  min-height: 32px;
}
@media (hover: hover) { .tbtn:hover { background: var(--ega-3); color: var(--ega-0); } }
.tbtn[aria-pressed="false"] { color: var(--ega-8); }
.tbtn .ts { display: none; }

main {
  padding: 12px max(var(--gutter), var(--sa-r)) calc(80px + var(--sa-b)) max(var(--gutter), var(--sa-l));
  max-width: 1600px; margin: 0 auto; outline: none;
}

/* --- panelek, gombok --- */
.panel {
  background: var(--panel);
  border: 4px double var(--ega-7);
  box-shadow: 6px 6px 0 var(--ega-0);
  padding: 8px var(--px) 10px;
  position: relative;
}
.panel > .ptitle, .ptitle {
  display: block; text-align: center; margin: -8px auto 8px; padding: 0 8px; width: fit-content;
  background: var(--ega-7); color: var(--ega-1); font-size: 1em; transform: translateY(-14px);
  margin-bottom: -6px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--ega-7); color: var(--ega-0);
  border: 0; padding: 4px 14px; min-height: 40px; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ega-0);
  text-align: center;
}
@media (hover: hover) { .btn:hover:not(:disabled) { background: var(--ega-15); } }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ega-0); }
.btn.primary { background: var(--ega-3); color: var(--ega-0); }
@media (hover: hover) { .btn.primary:hover:not(:disabled) { background: var(--ega-11); } }
.btn.warn { background: var(--ega-6); color: var(--ega-15); }
.btn:disabled { background: var(--ega-8); color: var(--ega-7); cursor: not-allowed; box-shadow: none; }
.btn .key { color: var(--ega-4); }
.btn.small { min-height: 32px; padding: 0 10px; }
.btnrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.btnrow.end { justify-content: flex-end; }
.muted { color: var(--muted); }
.small { font-size: .85em; }
.accent { color: var(--accent); }
.pix { image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: middle; }

/* --- kezdőképernyő --- */
.start { max-width: 860px; margin: 0 auto; display: grid; gap: 22px; }
.title-card { text-align: center; padding: 18px 12px 14px; }
.title-big {
  font-size: clamp(48px, 13vw, 104px); line-height: .9; color: var(--accent);
  text-shadow: 4px 4px 0 var(--ega-4), 8px 8px 0 var(--ega-0);
  letter-spacing: 2px;
}
.title-sub { color: var(--ega-11); margin-top: 8px; }
.cursor { display: inline-block; width: .55em; height: .9em; background: currentColor; vertical-align: -.1em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.title-cast { display: flex; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.form-grid { display: grid; gap: 14px; }
.field label, .legend { display: block; color: var(--accent); margin-bottom: 4px; }
.txt {
  width: 100%; background: var(--ega-0); color: var(--ega-10); border: 2px solid var(--ega-7);
  padding: 4px 8px; min-height: 40px; caret-color: var(--ega-10);
}
.txt:focus { border-color: var(--accent); outline: none; }
.choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0; padding: 0; border: 0; }
.choices legend { padding: 0; }
.radio-card {
  display: block; position: relative; cursor: pointer; background: var(--panel-2); border: 2px solid var(--ega-8);
  padding: 6px 10px 8px 34px;
}
.radio-card input { position: absolute; left: 10px; top: 10px; accent-color: var(--ega-14); width: 16px; height: 16px; }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--ega-0); }
.radio-card:has(input:focus-visible) { outline: 2px dashed var(--accent); outline-offset: 2px; }
.radio-card b { font-weight: 400; color: var(--ega-15); font-size: 1.1em; }
.radio-card .desc { display: block; color: var(--muted); font-size: .9em; line-height: 1.05; margin-top: 2px; }
.radio-card .mult { color: var(--ega-11); }
.resume { border-color: var(--ega-14); }
.form-error { color: var(--fail); min-height: 1.1em; }

/* --- játék elrendezés --- */
.game { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.scene-wrap {
  position: relative; justify-self: center; line-height: 0;
  border: 4px solid var(--ega-8); box-shadow: 6px 6px 0 #000;
  background: #000;
}
#scene {
  width: calc(320px * var(--scale)); max-width: 100%; height: auto; aspect-ratio: 16 / 10;
  image-rendering: pixelated; image-rendering: crisp-edges; display: block; margin: 0 auto;
}
.scanlines { position: absolute; inset: 0; pointer-events: none; display: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0, rgba(0,0,0,.28) 1px, transparent 1px, transparent 3px),
              radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.35) 100%);
}
body.crt .scanlines { display: block; }
body.crt::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1500;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.10) 0, rgba(0,0,0,.10) 1px, transparent 1px, transparent 3px);
}

@media (min-width: 900px) {
  .game {
    grid-template-columns: calc(320px * var(--scale) + 8px) minmax(380px, 1fr);
    grid-template-rows: auto auto 1fr;
    align-items: start;
  }
  .hud { grid-column: 1 / -1; }
  .scene-wrap { grid-column: 1; grid-row: 2; justify-self: start; }
  .inbox { grid-column: 1; grid-row: 3; }
  .work { grid-column: 2; grid-row: 2 / span 2; min-height: 100%; }
}
@media (max-width: 899px) {
  .game.has-event .inbox { display: none; }
  .game:not(.has-event) .work.idle { display: none; }
}

/* --- HUD --- */
.hud {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  background: var(--ega-0); border: 2px solid var(--ega-8); padding: 4px 10px;
}
.hud .clock { font-size: 2em; line-height: 1; color: var(--ega-10); min-width: 3.2em; }
.hud .clock.ot { color: var(--fail); }
.hud .stat { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.hud .lbl { color: var(--muted); }
.hud .val { color: var(--ega-15); }
.bar { display: inline-flex; gap: 2px; }
.bar i { display: inline-block; width: 8px; height: 14px; background: var(--ega-8); }
.bar.sat i.on { background: var(--ega-10); }
.bar.boss i.on { background: var(--ega-11); }
.bar.low i.on { background: var(--ega-12); }
.cups { display: inline-flex; gap: 2px; }
.cups img { opacity: .25; }
.cups img.on { opacity: 1; }
.badge { padding: 0 6px; background: var(--ega-4); color: var(--ega-15); }
.badge.warn { background: var(--ega-6); }
.blinkbg { animation: blinkbg 1s steps(1) infinite; }
@keyframes blinkbg { 50% { background: var(--ega-0); color: var(--ega-12); } }
.hud .spacer { flex: 1; }

/* --- inbox --- */
.inbox { padding-top: 14px; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.inbox-head h2 { color: var(--accent); font-size: 1.1em; }
.inbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
@media (min-width: 900px) {
  .inbox-list { max-height: calc(100vh - 230px - 200px * var(--scale)); min-height: 140px; overflow-y: auto; scrollbar-color: var(--ega-7) var(--ega-1); }
}
.ibtn {
  width: 100%; display: grid; grid-template-columns: 28px 3ch minmax(0, 1fr) auto; gap: 2px 8px; align-items: center;
  background: var(--panel-2); border: 0; border-left: 4px solid var(--ega-8); text-align: left; cursor: pointer;
  padding: 4px 8px; min-height: 44px;
}
@media (hover: hover) { .ibtn:hover:not([aria-disabled="true"]) { background: var(--ega-0); } }
.ibtn:focus-visible { background: var(--ega-0); }
.ibtn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.ibtn.is-open { opacity: 1; border-left-color: var(--accent); background: var(--ega-0); }
.ibtn .ch { grid-row: 1 / span 2; }
.ibtn .prio { grid-row: 1 / span 2; font-size: 1.05em; }
.ibtn .ttl { color: var(--ega-15); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibtn .frm { color: var(--muted); font-size: .85em; grid-column: 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibtn .wait { grid-column: 4; grid-row: 1 / span 2; text-align: right; font-size: .85em; color: var(--muted); line-height: 1; }
.ibtn .wait b { display: block; font-weight: 400; color: var(--ega-15); font-size: 1.2em; }
.prio-P1 { color: var(--p1); }
.prio-P2 { color: var(--p2); }
.prio-P3 { color: var(--p3); }
.prio-P4 { color: var(--p4); }
.ibtn.b-P1 { border-left-color: var(--p1); }
.ibtn.b-P2 { border-left-color: var(--p2); }
.ibtn.b-P3 { border-left-color: var(--p3); }
.ibtn.urgent { animation: urgent 1s steps(1) infinite; }
@keyframes urgent { 50% { background: var(--ega-4); } }
.empty { color: var(--muted); padding: 10px 0; text-align: center; }

/* --- munkaterület: esemény, eredmény --- */
.work { padding-top: 14px; }
.work.idle { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--muted); min-height: 200px; }
.ev-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; margin-bottom: 8px; }
.ev-head .portrait { grid-column: 1; grid-row: 1 / span 2; background: var(--ega-0); border: 2px solid var(--ega-8); padding: 2px; line-height: 0; align-self: start; }
.ev-title { grid-column: 2; grid-row: 1; font-size: 1.4em; color: var(--accent); line-height: 1; outline: none; }
.ev-meta { grid-column: 2 / span 2; grid-row: 2; color: var(--muted); font-size: .9em; display: flex; gap: 2px 8px; flex-wrap: wrap; align-items: center; }
.ev-prio { grid-column: 3; grid-row: 1; font-size: 1.4em; padding: 0 6px; background: var(--ega-0); align-self: start; }
.ev-text { white-space: pre-wrap; margin: 6px 0 10px; color: var(--ega-15); font-size: 1.05em; line-height: 1.12; }
.timer { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: .9em; color: var(--muted); }
.timer .track { flex: 1; height: 10px; background: var(--ega-0); border: 1px solid var(--ega-8); }
.timer .fill { height: 100%; background: var(--ega-10); width: 100%; }
.timer.mid .fill { background: var(--ega-14); }
.timer.low .fill { background: var(--ega-12); }
.timer.over .fill { background: var(--ega-8); }
.hintbox { border: 2px dashed var(--ega-14); padding: 6px 10px; margin: 8px 0; color: var(--ega-14); background: var(--ega-0); }
.hintbox b { font-weight: 400; color: var(--ega-15); }
/* Tipp / Beküldés sáv: a munkaterület aljára tapad, így hosszú ügynél is kéznél van. A természetes
   helyén (a panel alján) nem takar semmit, görgetés közben a panel háttere alatt csúszik a tartalom. */
.ev-actions {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center;
  position: sticky; bottom: 0; z-index: 5;
  margin: 12px calc(-1 * var(--px)) -10px; padding: 8px var(--px) calc(8px + var(--sa-b));
  background: var(--panel); border-top: 2px solid var(--ega-8);
  box-shadow: 0 -6px 0 rgba(0, 0, 0, .35);
}
.hintbtn .hsub { margin-left: .35em; }
.section-label { color: var(--accent); margin: 10px 0 4px; }
.ev-actions .kbd-help { order: 3; flex-basis: 100%; text-align: right; }
.kbd-help { color: var(--muted); font-size: .8em; }

/* opciók */
.opts { display: grid; gap: 6px; list-style: none; padding: 0; margin: 0; }
.opt {
  width: 100%; display: grid; grid-template-columns: 2.2ch minmax(0, 1fr); gap: 8px; text-align: left;
  background: var(--panel-2); color: var(--ega-15); border: 2px solid var(--ega-8); padding: 6px 10px; cursor: pointer;
  line-height: 1.1; min-height: 44px;
}
.opt .num { color: var(--ega-14); white-space: nowrap; }
@media (hover: hover) { .opt:hover:not(:disabled) { border-color: var(--ega-7); background: var(--ega-0); } }
/* kijelölt opció: sárga keret, világoscián háttér, fekete szöveg. Minden állapotban (hover, fókusz,
   aktív, mobilon "beragadt" hover) ugyanígy látszik, a szöveg sosem olvad bele a háttérbe. */
.opt[aria-checked="true"], .opt[aria-checked="true"]:hover, .opt[aria-checked="true"]:focus, .opt[aria-checked="true"]:active {
  border-color: var(--ega-14); background: var(--ega-11); color: var(--ega-0);
  box-shadow: inset 0 0 0 2px var(--ega-14);
}
.opt[aria-checked="true"] .num, .opt[aria-checked="true"]:hover .num { color: var(--ega-1); }
.opt:active:not(:disabled):not([aria-checked="true"]) { background: var(--ega-0); color: var(--ega-15); }
.opt.removed, .opt:disabled { text-decoration: line-through; color: var(--ega-8); cursor: not-allowed; border-style: dashed; }
.opt.removed .num { color: var(--ega-8); }

/* terminál */
.term {
  background: #000; color: var(--ega-7); border: 2px solid var(--ega-8); padding: 8px 10px; margin: 0 0 10px;
  font-family: 'VT323', monospace; font-size: .95em; line-height: 1.05; max-height: 360px;
  /* a sorok nem törnek (oszlopos kimenetek), a blokk maga görget, nem az oldal */
  white-space: pre; overflow-wrap: normal; overflow: auto; max-width: 100%;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.term.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.term-wrap { min-width: 0; }
.term-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.term-tip { flex: 1; }
.term-tools .btn[aria-pressed="true"] { background: var(--ega-3); }
.term .prompt { color: var(--ega-10); }
.term .cmd { color: var(--ega-15); }

/* phishing */
.mail { background: var(--ega-15); color: var(--ega-0); border: 2px solid var(--ega-7); margin-bottom: 10px; }
.mail-bar { background: var(--ega-1); color: var(--ega-15); padding: 2px 8px; display: flex; justify-content: space-between; }
.mail-head { padding: 6px 10px; border-bottom: 2px solid var(--ega-7); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; }
.mail-head dt { color: var(--ega-8); }
.mail-head dd { margin: 0; overflow-wrap: anywhere; }
.mail-body { padding: 8px 10px; white-space: pre-wrap; line-height: 1.12; overflow-wrap: anywhere; }
.mail-link { color: var(--ega-1); text-decoration: underline; cursor: pointer; background: none; border: 0; padding: 0; }
.mail-status { background: var(--ega-7); color: var(--ega-0); padding: 0 8px; min-height: 1.2em; font-size: .85em; overflow-wrap: anywhere; }
.hs-inline { background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted var(--ega-8); color: inherit; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.hs-inline.on { background: var(--ega-14); text-decoration: none; box-shadow: 0 0 0 2px var(--ega-12); }
.hotspots { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 6px; padding: 0; }
.hs {
  background: var(--panel-2); color: var(--ega-15); border: 2px solid var(--ega-8); padding: 2px 10px; cursor: pointer; min-height: 40px; text-align: left;
  max-width: 100%; overflow-wrap: anywhere;
}
.hotspots li { max-width: 100%; }
.hs[aria-pressed="true"] { border-color: var(--ega-12); background: var(--ega-4); }
.hs[aria-pressed="true"]::before { content: '⚑ '; color: var(--ega-14); }

/* order / triage */
.sortlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sitem {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 6px;
  background: var(--panel-2); border: 2px solid var(--ega-8); padding: 2px 4px 2px 2px; min-height: 48px;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.sitem .grip {
  width: 40px; align-self: stretch; min-height: 44px; cursor: grab; touch-action: none; border: 0; padding: 4px 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background-color: transparent;
  background-image: repeating-linear-gradient(to bottom, var(--ega-7) 0 2px, transparent 2px 5px);
  background-size: 16px 12px; background-repeat: no-repeat; background-position: center calc(100% - 6px);
}
.sitem.dragging .grip { cursor: grabbing; }
.sitem .pos { color: var(--ega-14); line-height: 1; }
.sitem .stext { cursor: pointer; line-height: 1.08; background: none; border: 0; text-align: left; padding: 4px 0; color: var(--ega-15); min-height: 44px; overflow-wrap: anywhere; }
.sitem .arrows { display: flex; gap: 4px; }
.sitem .arrows button { min-width: 40px; min-height: 40px; background: var(--ega-7); border: 0; color: var(--ega-0); cursor: pointer; }
.sitem .arrows button:disabled { background: var(--ega-8); color: var(--ega-7); }
.sitem.dragging { border-color: var(--ega-14); background: var(--ega-0); box-shadow: 4px 4px 0 var(--ega-0); position: relative; z-index: 2; }
.sitem.picked { border-color: var(--ega-11); background: var(--ega-3); }
.sitem.picked .stext { color: var(--ega-0); }
.sitem.hinted { border-color: var(--ega-14); }
.sitem.hinted .stext::after { content: '  ← TIPP: ez az első'; color: var(--ega-14); }
.sitem.picked.hinted .stext::after { color: var(--ega-1); }

/* kábelezés */
.rig { position: relative; display: flex; flex-wrap: wrap; gap: 34px 40px; justify-content: center; padding: 14px 4px 34px; background: #000; border: 2px solid var(--ega-8); margin-bottom: 8px; }
.rig svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.device { background: var(--ega-7); color: var(--ega-0); border: 0; padding: 4px 8px 8px; min-width: 130px; box-shadow: 4px 4px 0 var(--ega-8); position: relative; z-index: 1; }
.device .dlabel { text-align: center; color: var(--ega-1); border-bottom: 2px solid var(--ega-8); margin-bottom: 6px; }
.device .ports { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.port {
  display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--ega-8); color: var(--ega-15);
  border: 2px solid var(--ega-0); padding: 4px 6px; min-width: 60px; min-height: 52px; cursor: pointer; touch-action: none; font-size: .9em; line-height: 1;
}
.port .jack { width: 30px; height: 20px; image-rendering: pixelated; }
@media (hover: hover) { .port:hover:not(:disabled) { border-color: var(--ega-15); } }
.port.sel { border-color: var(--ega-14); background: var(--ega-0); box-shadow: 0 0 0 2px var(--ega-14); }
.port.used { background: var(--ega-0); }
.port.cand { border-color: var(--ega-10); animation: cand .6s steps(1) infinite; }
@keyframes cand { 50% { border-color: var(--ega-2); } }
.port.nope { opacity: .35; }
.port.hintp { box-shadow: 0 0 0 2px var(--ega-14); }
.port.over { border-color: var(--ega-15); background: var(--ega-2); animation: none; }
.port { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overflow-wrap: anywhere; max-width: 100%; }
.port .jack { pointer-events: none; }
.kindtag { font-size: .8em; padding: 0 4px; color: #000; }
.hand { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 6px; }
.cablechip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; background: var(--panel-2); border: 2px solid var(--ega-8); }
.cablechip.used { opacity: .55; }
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.links li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.cablechip { max-width: 100%; flex-wrap: wrap; }
.rig-msg { min-height: 1.2em; color: var(--ega-14); }
.rig-msg.err { color: var(--ega-12); }

/* --- eredmény --- */
.result { text-align: left; }
.grade { text-align: center; font-size: 3em; line-height: 1; padding: 10px 0 6px; letter-spacing: 3px; }
.grade.ok { color: var(--ok); text-shadow: 3px 3px 0 var(--ega-2); }
.grade.partial { color: var(--partial); text-shadow: 3px 3px 0 var(--ega-6); }
.grade.fail { color: var(--fail); text-shadow: 3px 3px 0 var(--ega-4); }
.grade.pop { animation: pop .5s steps(4); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.deltas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0 10px; list-style: none; padding: 0; }
.delta { background: var(--ega-0); padding: 2px 10px; border: 2px solid var(--ega-8); display: inline-flex; align-items: center; gap: 6px; }
.delta.pos { color: var(--ok); border-color: var(--ega-2); }
.delta.neg { color: var(--fail); border-color: var(--ega-4); }
.delta.zero { color: var(--muted); }
.fb { background: var(--ega-0); padding: 8px 12px; border-left: 4px solid var(--ega-7); margin: 8px 0; white-space: pre-wrap; }
.lesson { background: var(--ega-0); padding: 8px 12px; border-left: 4px solid var(--ega-14); margin: 8px 0; color: var(--ega-14); }
.lesson::before { content: 'TANULSÁG: '; color: var(--ega-15); }
.reveal { margin-top: 8px; }
.reveal h3 { color: var(--ega-11); font-size: 1em; margin: 8px 0 4px; }
.reveal ol, .reveal ul { margin: 0; padding-left: 1.6em; }
.reveal li { margin-bottom: 3px; line-height: 1.1; }
.reveal .yes { color: var(--ok); }
.reveal .no { color: var(--fail); }
.reveal .expl { color: var(--muted); display: block; font-size: .9em; }

/* --- összesítő --- */
.summary { max-width: 980px; margin: 0 auto; display: grid; gap: 22px; }
.sum-head { text-align: center; padding-top: 18px; }
.sum-reason { font-size: 1.4em; color: var(--ega-11); }
.sum-reason.bad { color: var(--fail); }
.final { font-size: clamp(56px, 14vw, 110px); line-height: 1; color: var(--accent); text-shadow: 4px 4px 0 var(--ega-6); }
.formula { color: var(--muted); }
.formula b { font-weight: 400; color: var(--ega-15); }
.achs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; }
.ach { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; background: var(--ega-0); border: 2px solid var(--ega-14); padding: 6px 8px; }
.ach b { font-weight: 400; color: var(--ega-14); display: block; }
.ach span { color: var(--ega-7); font-size: .9em; line-height: 1.05; display: block; }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.item details { background: var(--panel-2); border: 2px solid var(--ega-8); }
.item details[open] { border-color: var(--ega-7); }
.item summary { cursor: pointer; padding: 6px 10px; display: grid; grid-template-columns: 7.5ch minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; list-style: none; }
.item summary::-webkit-details-marker { display: none; }
.item summary .t { color: var(--ega-15); }
.item summary .f { color: var(--muted); font-size: .85em; grid-column: 2; }
.item summary .pr { white-space: nowrap; }
.item summary .t .tag { font-size: .75em; margin-left: 6px; }
.item summary .g { grid-column: 3; grid-row: 1 / span 2; text-align: right; }
.item .body { padding: 4px 12px 10px; border-top: 2px solid var(--ega-8); }
.tag { display: inline-block; padding: 0 6px; margin-right: 4px; font-size: .9em; }
.tag.fake { background: var(--ega-5); color: var(--ega-15); }
.tag.hidden { background: var(--ega-4); color: var(--ega-15); }
.tag.sla { background: var(--ega-6); color: var(--ega-15); }
.tag.skip { background: var(--ega-8); color: var(--ega-15); }
.g-ok { color: var(--ok); }
.g-partial { color: var(--partial); }
.g-fail { color: var(--fail); }

/* --- toplista --- */
.board { max-width: 760px; margin: 0 auto; display: grid; gap: 16px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; border: 0; }
.seg legend { color: var(--accent); margin-bottom: 4px; width: 100%; }
.seg button { background: var(--panel-2); color: var(--ega-15); border: 2px solid var(--ega-8); padding: 2px 12px; min-height: 40px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ega-3); color: var(--ega-0); border-color: var(--ega-14); }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 3px 8px; border-bottom: 1px solid var(--ega-8); vertical-align: top; }
.tbl th { color: var(--ega-14); font-weight: 400; }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl tr.me td { background: var(--ega-3); color: var(--ega-0); }
.tbl .rank1 { color: var(--ega-14); }
.note { color: var(--muted); font-size: .85em; }

/* --- toast --- */
.toasts { position: fixed; left: 50%; bottom: calc(16px + var(--sa-b)); transform: translateX(-50%); display: grid; gap: 8px; z-index: 1800; width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.toast { background: var(--ega-7); color: var(--ega-0); padding: 6px 14px; box-shadow: 4px 4px 0 #000; border-left: 8px solid var(--ega-1); animation: toastin .25s steps(3); pointer-events: none; overflow-wrap: anywhere; }
.toast.err { border-left-color: var(--ega-4); }
.toast.warn { border-left-color: var(--ega-6); }
.toast.ok { border-left-color: var(--ega-2); }
@keyframes toastin { from { transform: translateY(20px); opacity: 0; } }

/* --- súgó („Hogyan játssz?”): natív modális dialógus --- */
html.modal-open { overflow: hidden; }
dialog.help {
  padding: 0; border: 4px double var(--ega-7); background: var(--panel); color: var(--text);
  width: min(720px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  box-shadow: 8px 8px 0 #000; flex-direction: column; overflow: hidden;
}
dialog.help[open] { display: flex; }
dialog.help::backdrop { background: rgba(0, 0, 0, .72); }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--ega-7); color: var(--ega-1); padding: 0 0 0 12px; }
.help-head h2 { font-size: 1.1em; letter-spacing: 1px; }
.help-x { min-width: var(--tap); min-height: var(--tap); font-size: 1.1em; }
.help-body { overflow-y: auto; padding: 4px 14px 10px; overscroll-behavior: contain; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
.help-sec h3 { color: var(--accent); display: flex; gap: 8px; align-items: center; margin: 10px 0 2px; font-size: 1.05em; }
.help-sec p { margin: 0 0 4px; line-height: 1.15; }
.help-glyph { display: inline-block; width: 16px; text-align: center; color: var(--ega-14); }
.help-stats { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.help-stats > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.help-key { font-weight: 400; color: var(--ega-11); }
.help-foot { display: flex; justify-content: flex-end; padding: 8px 14px calc(8px + var(--sa-b)); border-top: 2px solid var(--ega-8); }
@media (max-width: 599px), (max-height: 500px) {
  dialog.help { width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: 0; box-shadow: none; }
  .help-head { padding: var(--sa-t) var(--sa-r) 0 max(12px, var(--sa-l)); }
  .help-body { padding-left: max(14px, var(--sa-l)); padding-right: max(14px, var(--sa-r)); }
}

/* kis pixeles óra ikon (a ⏱ jel sok betűkészletből hiányzik) */
.clock-ico {
  display: inline-block; position: relative; width: 14px; height: 14px; flex: none;
  border: 2px solid var(--ega-14); border-radius: 50%; vertical-align: -2px;
}
.clock-ico::before, .clock-ico::after { content: ''; position: absolute; background: var(--ega-14); left: 4px; }
.clock-ico::before { top: 1px; width: 2px; height: 4px; }
.clock-ico::after { top: 4px; width: 4px; height: 2px; }

/* --- kávé: a gomb mellett mindig ott a magyarázat --- */
.coffee-box { display: inline-flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.coffee-box .btn { line-height: 1; }
.csub { font-size: .8em; color: var(--ega-1); }
.coffee-box .btn:disabled .csub { color: inherit; }
.coffee-why { flex: 1 1 180px; line-height: 1.05; }

/* --- új mezők: környezetfüggő megjegyzés, gyakorló kör --- */
.envnote {
  background: var(--ega-0); border: 2px solid var(--ega-14); color: var(--ega-15);
  padding: 6px 12px; margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere;
}
.envnote b { font-weight: 400; color: var(--ega-14); }
.badge.practice { background: var(--ega-5); color: var(--ega-15); }
.practice-note {
  display: grid; gap: 2px; justify-items: center; margin: 4px auto 10px; padding: 6px 12px; max-width: 640px;
  background: var(--ega-5); color: var(--ega-15); border: 2px solid var(--ega-13);
}
.practice-note b { font-weight: 400; font-size: 1.2em; letter-spacing: 1px; }
.practice-note span { font-size: .9em; }

/* --- HUD sorok (asztalon egy folytonos sor) --- */
.hud-row { display: contents; }
.hud .lbl-done-s { display: none; }

/* --- toplista táblázat --- */
.board-tbl td.name { overflow-wrap: anywhere; }

/* --- érintés: >= 44 px célpontok, a billentyűzetes súgók rejtve --- */
@media (max-width: 899px), (pointer: coarse) {
  .btn, .btn.small, .tbtn, .seg button, .hs, .brand-btn { min-height: var(--tap); }
  .btn.small { padding: 0 12px; }
  .tbtn { min-width: var(--tap); padding: 0 10px; }
  .sitem .grip { width: var(--tap); }
  .sitem { grid-template-columns: var(--tap) minmax(0, 1fr) auto; }
  .sitem .arrows button { min-width: var(--tap); min-height: var(--tap); }
  .port { min-height: 56px; }
  .radio-card input { width: 20px; height: 20px; top: 9px; }
  .item summary { min-height: var(--tap); }
  .sortbtn { min-height: var(--tap); min-width: var(--tap); padding: 0 4px; }
  .stats-filters label.chk { min-height: var(--tap); }
}
@media (hover: none) and (pointer: coarse) {
  .keys-only { display: none !important; }
}

/* --- telefon / kis tablet (egy oszlop) --- */
@media (max-width: 899px) {
  :root { --px: 10px; }
  main { padding-top: 10px; padding-bottom: calc(24px + var(--sa-b)); }
  .panel { box-shadow: 4px 4px 0 #000; }
  .hud .lbl-long { display: none; }
  .ev-title { font-size: 1.25em; }
  .rig { gap: 30px 16px; padding: 12px 2px 28px; }
  .device { min-width: 0; flex: 1 1 140px; }
  .port { min-width: 54px; }
  .term { font-size: .85em; max-height: min(360px, 55vh); }
  .grade { font-size: 2.4em; }

  /* nyitott ügynél a munkaterület jön elöl, a jelenet utána */
  .hud { order: 0; }
  .game.has-event .work { order: 1; }
  .game.has-event .scene-wrap { order: 2; }
  .game.has-event .inbox { order: 3; }

  /* a toastok felül jelennek meg, így nem takarják a Beküldés sávot */
  .toasts { top: calc(8px + var(--sa-t)); bottom: auto; }
  .toast { animation-name: toastdown; }
  @keyframes toastdown { from { transform: translateY(-20px); opacity: 0; } }

  /* HUD: két sor (óra, pont, tipp, kész | elégedettség, Laci, energia), a jelzések alattuk */
  .hud { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 8px; }
  .hud-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; flex-basis: 100%; }
  .hud .clock { font-size: 1.7em; min-width: 0; }
  .hud .spacer { display: none; }
  .hud .who { position: absolute; right: 10px; top: 6px; }
  .hud { position: relative; }
}
@media (max-width: 479px) {
  :root { --gutter: 12px; --fs: 20px; }
  .topbar { padding-left: max(8px, var(--sa-l)); padding-right: max(8px, var(--sa-r)); gap: 4px; }
  .brand { font-size: 1.05em; }
  .topnav { gap: 4px; }
  .tbtn { padding: 0 8px; }
  .tbtn .tl { display: none; }
  .tbtn .ts { display: inline; }
  .hud .who { display: none; }
  .hud .val { min-width: 0; }
  .hud .lbl-done { display: none; }
  .hud .lbl-done-s { display: inline; }
  .hud .hud-b .val { display: none; }
  .bar { gap: 1px; }
  .bar i { width: 5px; height: 12px; }
  .hud .stat { gap: 4px; }
  /* a jelenet a margóba lóg ki: 320 px-en is pontosan 1× */
  .scene-wrap {
    justify-self: stretch; margin-inline: calc(-1 * max(var(--gutter), var(--sa-l)));
    border-left: 0; border-right: 0; box-shadow: none;
  }
  .ev-head .portrait { padding: 1px; }
  .ev-meta { font-size: .85em; }
  /* Tipp / Beküldés egymás mellett, teljes szélességben */
  .ev-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px; }
  .ev-actions > .btn:only-of-type { grid-column: 1 / -1; }
  .ev-actions > span:empty { display: none; }
  .ev-actions .btn { padding: 4px 8px; }
  .hintbtn { flex-wrap: wrap; gap: 0 6px; line-height: 1; }
  .hintbtn .hsub { margin: 0; font-size: .75em; flex-basis: 100%; }
  .hintbtn img { display: none; }
  .sitem .arrows { flex-direction: column; }
  .sitem .stext { padding: 4px 0; }
  .rig { gap: 26px 10px; }
  .item summary { grid-template-columns: 6ch minmax(0, 1fr) auto; gap: 2px 8px; padding: 6px 8px; }
  .formula { font-size: .85em; }
  .sum-reason { font-size: 1.2em; }
  .term-tip { display: none; }
}
@media (max-width: 359px) {
  :root { --gutter: 10px; --px: 8px; }
  .brand { font-size: .95em; }
  .hud-row { gap: 4px 10px; }
  .hud .clock { font-size: 1.5em; }
}

/* --- fekvő telefon: alacsony képernyő. A jelenet kicsi (1×) a bal oszlopban, ragad; a munka-
       terület / inbox a jobb oszlopban, így az ügy szövege és a válasz azonnal látszik --- */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 560px) {
  .game { grid-template-columns: calc(320px * var(--scale) + 8px) minmax(0, 1fr); align-items: start; column-gap: 12px; }
  .hud { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .hud-row { display: contents; }
  .hud .clock { font-size: 1.5em; }
  .hud .spacer { display: block; }
  .hud .who { position: static; }
  .scene-wrap { grid-column: 1; grid-row: 2; position: sticky; top: calc(6px + var(--sa-t)); order: 0 !important; }
  .inbox, .work { grid-column: 2; grid-row: 2; order: 0 !important; }
  .game:not(.has-event) .work.idle { display: none; }
  .ev-head .portrait canvas, .ev-head .portrait img { max-width: 48px; height: auto; }
  .term { max-height: 70vh; }
  main { padding-top: 6px; }
  /* alacsony képernyőn a sticky sáv egy sor: Tipp és Beküldés egymás mellett */
  .ev-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px; padding-top: 6px; padding-bottom: calc(6px + var(--sa-b)); }
  .ev-actions > .btn:only-of-type { grid-column: 1 / -1; }
  .ev-actions > span:empty { display: none; }
  .ev-actions .btn { padding: 2px 8px; }
  .hintbtn { flex-wrap: wrap; gap: 0 6px; line-height: 1; }
  .hintbtn .hsub { margin: 0; font-size: .75em; flex-basis: 100%; }
  .hintbtn img { display: none; }
  .topbar { padding-top: max(0px, var(--sa-t)); }
}
/* --- toplista mobilon: rang | név (alatta az időpont) | pont --- */
@media (max-width: 559px) {
  .board-tbl thead { display: none; }
  .board-tbl, .board-tbl tbody { display: block; }
  .board-tbl tr { display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; gap: 0 10px; border-bottom: 1px solid var(--ega-8); padding: 4px 0; }
  .board-tbl td { border: 0; padding: 0 4px; }
  .board-tbl td.num:first-child { grid-row: 1 / span 2; align-self: center; }
  .board-tbl td.name { grid-column: 2; }
  .board-tbl td.num:nth-child(3) { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 1.15em; }
  .board-tbl td.when { grid-column: 2; color: var(--muted); }
  .board-tbl tr.me { background: var(--ega-3); color: var(--ega-0); }
  .board-tbl tr.me td { background: transparent; }
  .board-tbl tr.me td.when { color: var(--ega-1); }
  .seg button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- /stats admin oldal --- */
.stats-page main { max-width: none; }
.stats-panel { padding-top: 16px; }
.stats-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin-bottom: 8px; }
.stats-filters label { display: grid; gap: 2px; color: var(--accent); }
.stats-filters label.chk { display: flex; gap: 6px; align-items: center; color: var(--ega-15); min-height: 40px; }
.stats-filters select.txt, .stats-filters input.txt { width: auto; min-width: 140px; }
.table-scroll { overflow-x: auto; }
.stats-tbl { font-size: .9em; min-width: 760px; }
.stats-tbl tr:not(.opts-row) td { border-bottom: 0; padding-top: 8px; }
.stats-tbl tr.opts-row td { padding: 2px 8px 8px 24px; }
.stats-tbl tr.opts-row .small { color: var(--muted); }
.stats-tbl th { white-space: nowrap; position: sticky; top: 0; background: var(--panel); }
.sortbtn { background: none; border: 0; color: var(--ega-14); cursor: pointer; padding: 0; }
.stats-tbl td.mono { color: var(--ega-11); white-space: nowrap; }
.stats-tbl tr.sus td { background: var(--ega-4); }
.stats-tbl tr.sus td .tag.hidden { background: var(--ega-14); color: var(--ega-0); }
.optdist { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.optdist li { display: grid; grid-template-columns: 60px 3.5ch 4.5ch minmax(0, 1fr); gap: 6px; align-items: start; line-height: 1; }
.optdist .obar { margin-top: 4px; }
.optdist .obar { height: 8px; background: var(--ega-0); border: 1px solid var(--ega-8); }
.optdist .obar i { display: block; height: 100%; background: var(--ega-7); }
.optdist li.best .obar i { background: var(--ega-10); }
.optdist li.bad .obar i { background: var(--ega-12); }
.optdist .on, .optdist .os { text-align: right; color: var(--muted); }
.optdist .ot { overflow-wrap: anywhere; }
.brand a.brand-btn { text-decoration: none; }

/* /stats mobilon: a táblázat sorai kártyák, a fejléc rendező gombsor */
@media (max-width: 760px) {
  .table-scroll { overflow-x: visible; }
  .stats-tbl { min-width: 0; }
  .stats-tbl, .stats-tbl thead, .stats-tbl tbody, .stats-tbl tr, .stats-tbl td { display: block; width: auto; }
  .stats-tbl thead tr { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
  .stats-tbl thead th { position: static; border: 1px solid var(--muted); padding: 4px 8px; }
  .stats-tbl tr:not(.opts-row) { border-top: 2px solid var(--accent); margin-top: 12px; padding-top: 6px; }
  .stats-tbl td, .stats-tbl td.num { padding: 2px 4px; border: 0; text-align: left; white-space: normal; }
  .stats-tbl td.mono { overflow-wrap: anywhere; }
  .stats-tbl td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); }
  .stats-tbl tr.opts-row td { padding: 4px 4px 10px; }
  .stats-filters select.txt, .stats-filters input.txt { min-width: 0; width: 100%; }
  .stats-filters label:not(.chk) { flex: 1 1 140px; }
}