/* Bluff Parlor – „Kripto” fül (18+): sci-fi terminál / holografikus HUD. Neon cián + lila, Orbitron a címekhez, monospace a számokhoz.
   A háttér gyertyadiagramját a trading.js rajzolja (canvas, ~30 fps, csak ezen a fülön); a többi réteg tiszta CSS. */
body[data-theme="trading"] { --bg: #03040b; --panel: rgba(8, 12, 28, .78); --line: rgba(0, 240, 255, .22); --text: #e6fbff; --muted: #8aa3bd;
  --accent: #00f0ff; --accent-2: #b44cff; --btn-ink: #02040a; --grad: linear-gradient(110deg, #00f0ff, #6f7dff 50%, #b44cff); --mono: ui-monospace, 'Cascadia Mono', 'Consolas', monospace; }
body[data-theme="trading"] .fx-trading { opacity: 1; }
[data-theme="trading"] h1, [data-theme="trading"] h2, [data-theme="trading"] h3 { font-family: var(--font-head); letter-spacing: -.01em; }

/* ---------- háttér ---------- */
.fx-trading { background: radial-gradient(ellipse at 50% -20%, #0b1a3a 0%, #03040b 60%); overflow: hidden; }
.fx-trading canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.fx-trading .glow { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; filter: blur(110px); opacity: .20; }
.fx-trading .glow.a { background: #00f0ff; top: -32vw; left: -22vw; }
.fx-trading .glow.b { background: #b44cff; bottom: -34vw; right: -20vw; }
/* holografikus pásztázó sáv + finom scanline-ok */
.fx-trading .scan { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 240, 255, .035) 0 1px, transparent 1px 4px); }
.fx-trading .sweep { position: absolute; left: 0; right: 0; height: 22vh; top: -22vh; background: linear-gradient(180deg, transparent, rgba(0, 240, 255, .06) 75%, rgba(0, 240, 255, .12) 92%, transparent);
  animation: tr-sweep 9s linear infinite; will-change: transform; }
@keyframes tr-sweep { to { transform: translateY(130vh); } }
.fx-trading .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0, 0, 0, .8)); }

/* ---------- oldal ---------- */
.trading { display: grid; gap: 0; }
.tr-intro h1 { text-shadow: none; }
.tr-kicker { font: 700 12px/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.tr-kicker::before { content: '> '; opacity: .6; }
.tr-disclaimer { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin: 0 0 22px; border-radius: 12px; font-size: 14px; line-height: 1.45;
  background: linear-gradient(90deg, rgba(255, 196, 0, .12), rgba(255, 196, 0, .04)); border: 1px solid rgba(255, 196, 0, .55); color: #ffe9a8; }
.tr-disclaimer .ico { font-size: 18px; line-height: 1.2; color: #ffc400; }

/* HUD-keret: sarokjelölők, üvegpanel */
.tr-hero, .tr-frame, .tr-stat, .tr-mod { position: relative; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.tr-hero::before, .tr-frame::before { content: ''; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
  background: linear-gradient(var(--accent), var(--accent)) 0 0 / 18px 2px, linear-gradient(var(--accent), var(--accent)) 0 0 / 2px 18px,
    linear-gradient(var(--accent-2), var(--accent-2)) 100% 100% / 18px 2px, linear-gradient(var(--accent-2), var(--accent-2)) 100% 100% / 2px 18px;
  background-repeat: no-repeat; }
.tr-hero { border-radius: 16px; padding: clamp(18px, 4vw, 34px); display: grid; gap: 12px; overflow: hidden; box-shadow: 0 0 40px rgba(0, 240, 255, .08), inset 0 0 60px rgba(0, 240, 255, .04); }
.tr-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 1px dashed rgba(0, 240, 255, .25);
  box-shadow: 0 0 0 30px rgba(0, 240, 255, .03), 0 0 0 60px rgba(180, 76, 255, .03); animation: tr-spin 40s linear infinite; pointer-events: none; }
@keyframes tr-spin { to { transform: rotate(360deg); } }
.tr-hud { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tr-badge { font: 800 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; color: var(--btn-ink); background: var(--grad); }
.tr-mode { display: inline-flex; gap: 8px; align-items: center; font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; }
.tr-mode i { width: 8px; height: 8px; border-radius: 50%; background: #3dff9a; box-shadow: 0 0 8px #3dff9a; animation: tr-blink 1.6s ease-in-out infinite; }
@keyframes tr-blink { 50% { opacity: .3; } }
.tr-name { position: relative; margin: 0; font-size: clamp(34px, 7vw, 64px); font-weight: 900; line-height: 1; text-transform: uppercase;
  background: linear-gradient(180deg, #fff, #9ff6ff 60%, #00f0ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(0, 240, 255, .45)); }
.tr-hero p { margin: 0; max-width: 720px; color: #c6d8ea; }

/* mutatók */
.tr-metrics .section-title { flex-wrap: wrap; }
.tr-live, .tr-last { display: inline-flex; gap: 8px; align-items: center; font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tr-live { color: #3dff9a; } .tr-live i { width: 8px; height: 8px; border-radius: 50%; background: #3dff9a; box-shadow: 0 0 8px #3dff9a; animation: tr-blink 1.2s ease-in-out infinite; }
.tr-last b { color: var(--text); }
.tr-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tr-stat { border-radius: 12px; padding: 14px 14px 12px; display: grid; gap: 6px; overflow: hidden; }
.tr-stat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); opacity: .7; }
.tr-stat .k { font: 700 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tr-stat .v { font: 700 clamp(20px, 2.6vw, 28px)/1.1 var(--mono); color: var(--text); text-shadow: 0 0 14px rgba(0, 240, 255, .35); overflow-wrap: anywhere; }
.tr-stat .na { color: var(--muted); }
.tr-fine { margin: 8px 0 0; font-size: 12px; }

/* modulok */
.tr-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.tr-mod { border-radius: 14px; padding: 18px; display: grid; gap: 8px; align-content: start; transition: transform .2s, border-color .2s, box-shadow .25s; }
.tr-mod:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 12px 36px rgba(0, 240, 255, .16); }
.tr-mod .ico { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; color: var(--accent);
  background: rgba(0, 240, 255, .07); border: 1px solid var(--line); box-shadow: inset 0 0 14px rgba(0, 240, 255, .15); }
.tr-mod.m-ai .ico { color: var(--accent-2); background: rgba(180, 76, 255, .09); border-color: rgba(180, 76, 255, .4); box-shadow: inset 0 0 14px rgba(180, 76, 255, .2); }
.tr-mod h3 { margin: 0; font-size: 16px; }
.tr-mod p { margin: 0; font-size: 14px; color: var(--muted); }

/* „képernyők” */
.tr-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tr-frame { margin: 0; border-radius: 14px; padding: 12px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.tr-frame.wide { grid-column: 1 / -1; }
.tr-frame figcaption { display: grid; gap: 2px; }
.tr-frame figcaption b { font: 700 13px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.tr-screen { position: relative; border-radius: 10px; background: #0a0f1f; border: 1px solid rgba(0, 240, 255, .14); overflow: hidden; min-height: 60px; }
.tr-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); }
.tr-screen.scroll { overflow-x: auto; }
.tr-screen img { display: block; width: 100%; min-width: 640px; height: auto; opacity: 0; transition: opacity .4s; }
.tr-screen img.show { opacity: 1; }
.tr-walls { display: block; width: 100%; height: auto; padding: 8px; }
.tr-walls .bid { fill: rgba(0, 240, 255, .35); } .tr-walls .ask { fill: rgba(180, 76, 255, .38); }
.tr-walls .bid.wall { fill: #00f0ff; filter: drop-shadow(0 0 5px #00f0ff); } .tr-walls .ask.wall { fill: #c77dff; filter: drop-shadow(0 0 5px #b44cff); }
.tr-walls .axis { stroke: rgba(255, 255, 255, .15); } .tr-walls .spread { stroke: rgba(255, 196, 0, .5); stroke-dasharray: 3 4; }
.tr-walls .lbl { font: 700 9px var(--mono); fill: #e6fbff; letter-spacing: .06em; text-transform: uppercase; }
.tr-legend { display: flex; gap: 14px; padding: 0 12px 10px; font: 600 11px var(--mono); color: var(--muted); }
.tr-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.tr-legend .bid::before { background: #00f0ff; } .tr-legend .ask::before { background: #b44cff; }
.tr-flow { list-style: none; margin: 0; padding: 14px; display: grid; gap: 22px; counter-reset: s; }
.tr-flow li { position: relative; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tr-flow li:not(:last-child)::after { content: '▼'; position: absolute; left: 50%; bottom: -19px; transform: translateX(-50%); font-size: 10px; color: var(--accent); opacity: .7; }
.tr-flow .node { font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 240, 255, .06); color: var(--text); }
.tr-flow .n-ai { border-color: rgba(180, 76, 255, .6); background: rgba(180, 76, 255, .12); }
.tr-flow .n-exec { border-color: rgba(61, 255, 154, .5); background: rgba(61, 255, 154, .08); color: #b8ffd9; }
.tr-notice { background: rgba(0, 240, 255, .05); border-color: rgba(0, 240, 255, .3); line-height: 1.6; }
.tr-notice b { color: #ffe9a8; font-weight: 600; }
.tr-gate .big { color: var(--accent); filter: drop-shadow(0 0 16px rgba(0, 240, 255, .7)); }
.tr-gate h2 { color: var(--text); }

/* ---------- zene: ♪ gomb + hangerő (csak ezen a fülön, jobb alsó sarokban) ---------- */
.tr-music { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(4, 8, 20, .88); border: 1px solid var(--line); backdrop-filter: blur(10px);
  box-shadow: 0 0 24px rgba(0, 240, 255, .18), 0 10px 30px rgba(0, 0, 0, .5); }
.tr-note { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 240, 255, .06); color: var(--text); font: 700 13px/1 var(--mono); letter-spacing: .06em; }
.tr-note .ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: var(--btn-ink); background: var(--grad); box-shadow: 0 0 12px rgba(0, 240, 255, .5); }
.tr-note:hover { border-color: var(--accent); }
.tr-note:focus-visible, .tr-vol input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tr-note .eq { display: none; gap: 2px; align-items: flex-end; height: 14px; }
.tr-note.on .eq { display: inline-flex; }
.tr-note .eq i { width: 3px; height: 100%; background: var(--accent); transform-origin: bottom; animation: tr-eq .9s ease-in-out infinite; }
.tr-note .eq i:nth-child(2) { animation-delay: -.3s; } .tr-note .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes tr-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.tr-vol input { width: 110px; accent-color: #00f0ff; cursor: pointer; }

@media (max-width: 900px) { .tr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .tr-shots { grid-template-columns: minmax(0, 1fr); }
  .tr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-stats .tr-stat:last-child { grid-column: 1 / -1; }
  .tr-vol input { width: 80px; }
  .tr-note .lbl { display: none; }
  body[data-theme="trading"] .foot { padding-bottom: 96px; }   /* a lebegő zene-gomb ne takarja a lábléc linkjeit */
}
@media (prefers-reduced-motion: reduce) {
  .fx-trading .sweep, .tr-hero::after, .tr-mode i, .tr-live i, .tr-note .eq i { animation: none; }
  .fx-trading .sweep { display: none; }
  .tr-mod, .tr-screen img { transition: none; }
}

/* élő műszerfal link (átláthatóság) + a win rate magyarázó sora */
.tr-hero .tr-livelink { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; max-width: none; }
.tr-hero .tr-livelink .btn { box-shadow: 0 0 18px rgba(46, 230, 255, .35); }
.tr-stat .muted.small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.3; opacity: .8; }
.tr-stat .v .pos { color: #3dffa8; text-shadow: 0 0 14px rgba(61,255,168,.45); }
.tr-stat .v .neg { color: #ff5b7a; }