/* ============================================================
   KAMU BÍRÓSÁG – "magyar tárgyalótermi TV-show" réteg
   1) design tokenek (--court-*): a színek, árnyékok, méretek és z-sorrend egyetlen helyen
   2) kamera-keret és élő terem (fény, por, sodródás)
   3) közös komponensek: gomb, kártya, jelvény, pecsét, pergamen, időzítő
   A régi stílusok (style.css) megmaradnak; ez a fájl utána töltődik, és csak kiegészít / felülír.
   ============================================================ */

/* ---------------- 1) DESIGN TOKENEK ---------------- */
:root {
  /* paletta: sötét fa, bordó, arany, pergamen */
  --court-bg: #17110e;
  --court-wood: #4a3020;
  --court-wood-dark: #2a1c12;
  --court-red: #b3353a;
  --court-red-bright: #e5484d;
  --court-gold: #f2c14e;
  --court-gold-dark: #8a6420;
  --court-paper: #f6efdc;
  --court-paper-edge: #d8c9a3;
  --court-ink: #2b2620;
  --court-green: #22c55e;
  --court-purple: #a78bfa;
  --court-blue: #3b82f6;
  --court-amber: #f5a524;
  --court-text: #f4ecd8;
  --court-text-dim: #c9bca0;

  /* szerepszínek (egyeznek a client.js ROLE_COLOR-jával) */
  --court-role-prosecutor: #e5484d;
  --court-role-defendant: #f5a524;
  --court-role-defender: #3b82f6;
  --court-role-witness: #22c55e;
  --court-role-juror: #a78bfa;
  --court-role-judge: #f2c14e;

  /* felületek */
  --court-panel: rgba(18, 12, 9, 0.86);
  --court-panel-line: rgba(223, 185, 109, 0.45);
  --court-radius: 12px;
  --court-radius-sm: 8px;
  --court-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  --court-glow-gold: 0 0 22px rgba(242, 193, 78, 0.45);

  /* mozgás */
  --court-ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --court-ease-bounce: cubic-bezier(0.2, 1.5, 0.4, 1);
  --court-dur-fast: 0.18s;
  --court-dur: 0.45s;
  --court-dur-slow: 0.9s;

  /* z-sorrend (a jelenet 0, a HUD fölötte, a jelenet-rétegek a HUD fölött, a hibák legfölül) */
  --z-court-scene: 0;
  --z-court-hud: 80;
  --z-court-layer: 120;
  --z-court-stamp: 130;
  --z-court-toast: 150;
}

/* ---------------- 2) KAMERA ÉS ÉLŐ TEREM ---------------- */
/* A kamera a fókuszt mozgatja (court.js állítja a --cam-* változókat); a drift a lassú, alig látható sodródás. */
.court-camera {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  transform-origin: var(--cam-ox, 50%) var(--cam-oy, 55%);
  transform: translate3d(var(--cam-x, 0), var(--cam-y, 0), 0) scale(var(--cam-s, 1));
  transition: transform var(--court-dur-slow) var(--court-ease);
  will-change: transform;
}
.court-drift {
  position: absolute; inset: 0;
  animation: court-drift 52s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes court-drift {
  from { transform: translate3d(-0.35%, 0.1%, 0) scale(1.012); }
  to   { transform: translate3d(0.35%, -0.25%, 0) scale(1.03); }
}

/* Fény-rétegek: a háttér fölött, a karakterek alatt; csak opacity/transform animálódik. */
.court-ambience { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.ca-ray {
  position: absolute; top: -10%; width: 20%; height: 120%;
  background: linear-gradient(180deg, rgba(255, 226, 160, 0.30), rgba(255, 226, 160, 0.0) 72%);
  mix-blend-mode: screen; opacity: 0.16; transform: rotate(14deg);
  animation: ca-ray 11s ease-in-out infinite alternate;
}
.ca-ray-1 { left: 6%; }
.ca-ray-2 { left: 21%; width: 12%; animation-delay: -4s; animation-duration: 14s; }
.ca-ray-3 { left: 63%; width: 14%; animation-delay: -7s; opacity: 0.1; transform: rotate(-12deg); }
@keyframes ca-ray { from { opacity: 0.07; } to { opacity: 0.2; } }

.ca-lamp {
  position: absolute; top: 14%; width: 11%; aspect-ratio: 1;
  border-radius: 50%; transform: translate(-50%, 0);
  background: radial-gradient(circle, rgba(255, 214, 130, 0.55), rgba(255, 214, 130, 0) 68%);
  mix-blend-mode: screen; opacity: 0.55;
  animation: ca-lamp 7s ease-in-out infinite alternate;
}
.ca-lamp-l { left: 7%; }
.ca-lamp-r { left: 90%; animation-delay: -3s; animation-duration: 9s; }
@keyframes ca-lamp { from { opacity: 0.38; } to { opacity: 0.62; } }

/* Lebegő porszemek: tíz apró pont (a 6.–15. gyerek), mindegyik saját pályán, nagyon halványan. */
.ca-dust {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 238, 200, 0.85); opacity: 0;
  animation: ca-dust 18s linear infinite;
}
.ca-dust:nth-child(6)  { left: 12%; top: 70%; animation-delay: -1s;  animation-duration: 20s; }
.ca-dust:nth-child(7)  { left: 24%; top: 60%; animation-delay: -6s;  animation-duration: 17s; }
.ca-dust:nth-child(8)  { left: 33%; top: 78%; animation-delay: -11s; animation-duration: 23s; }
.ca-dust:nth-child(9)  { left: 46%; top: 66%; animation-delay: -3s;  animation-duration: 19s; }
.ca-dust:nth-child(10)  { left: 55%; top: 74%; animation-delay: -9s;  animation-duration: 21s; }
.ca-dust:nth-child(11)  { left: 63%; top: 58%; animation-delay: -14s; animation-duration: 18s; }
.ca-dust:nth-child(12)  { left: 72%; top: 80%; animation-delay: -5s;  animation-duration: 24s; }
.ca-dust:nth-child(13)  { left: 81%; top: 64%; animation-delay: -12s; animation-duration: 16s; }
.ca-dust:nth-child(14)  { left: 89%; top: 72%; animation-delay: -8s;  animation-duration: 22s; }
.ca-dust:nth-child(15) { left: 40%; top: 52%; animation-delay: -16s; animation-duration: 25s; }
@keyframes ca-dust {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: 0.5; }
  80%  { opacity: 0.35; }
  100% { transform: translate3d(14px, -90px, 0); opacity: 0; }
}

/* Mozgás-csökkentés: a kamera áll, a fény statikus, a por nem látszik. (A régi szabály az animációkat és átmeneteket amúgy is leállítja.) */
.reduced-motion .court-drift, .reduced-motion .court-camera { animation: none !important; transition: none !important; transform: none !important; }
.reduced-motion .ca-dust { display: none; }
@media (prefers-reduced-motion: reduce) {
  .court-drift, .court-camera { animation: none !important; transition: none !important; transform: none !important; }
  .ca-dust { display: none; }
}

/* ---------------- 3) KÖZÖS KOMPONENSEK ---------------- */
/* Pergamen: a vád, a bizonyíték, a kihívás és a pecsét alapja. */
.court-parchment {
  position: relative; color: var(--court-ink);
  background: linear-gradient(180deg, #fbf5e4, var(--court-paper) 55%, #ead9ae);
  border: 1px solid var(--court-paper-edge); border-radius: 6px;
  box-shadow: var(--court-shadow), inset 0 0 40px rgba(138, 100, 32, 0.18);
}
/* Pecsét: nagy, kissé elforgatott, vörös (vagy zöld / arany) körvonalas felirat. */
.court-stamp {
  display: inline-block; padding: 4px 16px;
  font-family: var(--font-disp); letter-spacing: 6px; text-transform: uppercase;
  color: var(--stamp, var(--court-red)); border: 5px double var(--stamp, var(--court-red)); border-radius: 8px;
  transform: rotate(-6deg); text-shadow: 0 0 1px currentColor;
  background: rgba(255, 248, 230, 0.06); mix-blend-mode: normal;
}
/* Jelvény: szerep, HOST, VENDÉG, READY. */
.court-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  font: 600 11px var(--font-disp); letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap;
  color: var(--badge, var(--court-gold)); border: 1px solid var(--badge, var(--court-gold)); border-radius: 999px;
  background: rgba(10, 8, 6, 0.55);
}
.court-badge.fill { color: #1a1208; background: var(--badge, var(--court-gold)); }
/* Lebegő felirat-kártya a jelenetben (intro, bizonyíték, kihívás, fázis-HUD): sötét fa + arany keret. */
.court-card {
  background: linear-gradient(180deg, rgba(44, 28, 18, 0.94), rgba(20, 13, 9, 0.94));
  border: 2px solid var(--court-gold-dark); border-radius: var(--court-radius);
  box-shadow: var(--court-shadow), inset 0 0 0 1px rgba(242, 193, 78, 0.18);
  color: var(--court-text);
}
/* Látható fókusz mindenhol, ahol a játék gombjai és kártyái billentyűzettel is elérhetők. */
.court-focusable:focus-visible, .btn:focus-visible, .cm-act:focus-visible, .react-btn:focus-visible {
  outline: 3px solid var(--court-gold); outline-offset: 2px;
}
/* Képernyőolvasónak szóló, látszólag rejtett szöveg. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* A széles lobbiban a csevegő a bal oldalra dokkol: a sarok-kapcsolók a panel mellé kerülnek, nem alá. */
body.chat-docked .comfort-dock { left: 372px; }

/* A fázispanel takarná a bíró buborékját (kis telefon): ilyenkor a díszítő buborék rejtve marad. */
.judge-bubble.bubble-covered { visibility: hidden; }


/* ---------------- Avatár × szerep ---------------- */
/* Asset-first fallback: hiányzó role sprite esetén az eredeti avatar marad, csak HTML szerepjelvény jelenik meg. */
.st-art.av-figure { position: relative; }
.role-fallback-badge {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 4;
  padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.6);
  color: #fff; background: rgba(18,12,9,.88); box-shadow: 0 2px 8px rgba(0,0,0,.45);
  font: 700 10px var(--font-disp); letter-spacing: .8px; white-space: nowrap; pointer-events: none;
}
.role-fallback-judge { background: rgba(72,54,12,.92); color: var(--court-gold); }
.role-fallback-prosecutor { background: rgba(143,31,45,.94); }
.role-fallback-defendant { background: rgba(188,84,9,.95); }
.role-fallback-defender { background: rgba(38,69,122,.95); }
.role-fallback-witness { background: rgba(47,125,77,.95); }
.role-fallback-juror { background: rgba(91,63,174,.95); }
/* Feltöltött, teljes alakos szerep-kép (assets/roles/avatar_NN_<szerep>.webp): a fix figurákhoz hasonlóan, keret nélkül. */
.st-art.role-sprite .st-base { object-fit: contain; object-position: 50% 100%; border: 0; background: none; border-radius: 0; }

/* ---------------- 4) CINEMATIC COURTROOM HUD ---------------- */
.court-focus{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .45s var(--court-ease);background:radial-gradient(circle at 50% 55%,transparent 0 18%,rgba(4,2,1,.12) 45%,rgba(4,2,1,.46) 100%)}
.court-focus.active{opacity:1}.court-focus[data-focus="left"]{background:radial-gradient(circle at 20% 62%,transparent 0 17%,rgba(4,2,1,.15) 42%,rgba(4,2,1,.52) 100%)}.court-focus[data-focus="right"],.court-focus[data-focus="witness"]{background:radial-gradient(circle at 73% 61%,transparent 0 17%,rgba(4,2,1,.15) 42%,rgba(4,2,1,.52) 100%)}
.court-intro,.court-evidence{position:absolute;inset:0;z-index:125;display:grid;place-items:center;pointer-events:none;background:rgba(5,3,2,.38);opacity:0;transition:opacity .3s ease}.court-intro.show,.court-evidence.show{opacity:1}.court-intro-card{width:min(660px,82vw);padding:28px 36px;text-align:center;transform:translateY(18px) scale(.95) rotate(-1deg);transition:transform .55s var(--court-ease-bounce)}.court-intro.show .court-intro-card{transform:translateY(0) scale(1) rotate(-1deg)}.ci-kicker{font:800 15px var(--font-disp);letter-spacing:4px;color:#8a6420}.ci-vs{margin:7px 0;font:900 clamp(28px,4vw,54px) var(--font-disp);color:#201711}.ci-vs span{color:var(--court-red);font-size:.55em}.ci-label{display:inline-block;margin-top:5px;padding:2px 12px;background:#2b211a;color:#f6efdc;font:800 11px var(--font-disp);letter-spacing:3px}.ci-charge{margin:12px auto 20px;max-width:540px;font:700 clamp(16px,2vw,23px) var(--font-body);line-height:1.25}.court-intro-card .court-stamp{font-size:18px}
.evidence-folder{position:relative;width:min(520px,78vw);min-height:250px;padding:54px 34px 30px;color:#2b211a;background:linear-gradient(135deg,#caa86c,#e1c68e 55%,#b99355);border:2px solid #8a6420;border-radius:7px;box-shadow:0 24px 60px #0009,inset 0 0 45px #7a4f1d33;transform:translateY(45px) rotate(4deg) scale(.9);transition:transform .5s var(--court-ease-bounce)}.court-evidence.show .evidence-folder{transform:translateY(0) rotate(-2deg) scale(1)}.ev-tab{position:absolute;top:-22px;left:22px;padding:8px 22px;background:#d8ba7d;border:2px solid #8a6420;border-bottom:0;border-radius:7px 7px 0 0;font:800 13px var(--font-disp);letter-spacing:2px}.ev-pin{float:left;display:grid;place-items:center;width:105px;height:125px;margin:0 24px 10px 0;background:#eee2c4;border:8px solid #f6efdc;box-shadow:0 4px 10px #0004;font:900 64px Georgia;color:#6b5638;transform:rotate(-4deg)}.ev-text{padding-top:20px;font:800 clamp(17px,2.4vw,27px) var(--font-disp);line-height:1.2}.ev-stamp{position:absolute;right:25px;bottom:24px;font-size:12px;letter-spacing:2px}
@media(max-width:700px){.court-intro-card{padding:20px 18px}.ci-kicker{font-size:11px}.evidence-folder{min-height:210px;padding:44px 22px 24px}}
.reduced-motion .court-intro-card,.reduced-motion .evidence-folder{transition:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.court-intro-card,.evidence-folder{transition:none!important;transform:none!important}}

/* ---------------- 5) CHALLENGE + VERDICT PRESENTATION ---------------- */
.court-challenge,.court-verdict{position:absolute;inset:0;z-index:128;display:grid;place-items:center;pointer-events:none;background:rgba(5,3,2,.36);opacity:0;transition:opacity .28s ease}.court-challenge.show,.court-verdict.show{opacity:1}
.challenge-card{width:min(430px,78vw);padding:28px 28px 24px;text-align:center;transform:translateY(42px) rotate(3deg) scale(.9);transition:transform .48s var(--court-ease-bounce)}.court-challenge.show .challenge-card{transform:translateY(0) rotate(-2deg) scale(1)}.cc-kicker{font:900 13px var(--font-disp);letter-spacing:3px;color:#8a6420}.cc-title{margin:8px 0 12px;font:900 clamp(25px,4vw,42px) var(--font-disp);color:#2b211a}.cc-text{font:700 clamp(15px,2vw,20px) var(--font-body);line-height:1.3;color:#3d3024}
.verdict-card{position:relative;width:min(590px,84vw);padding:34px 28px;text-align:center;transform:scale(.78) rotate(-3deg);transition:transform .36s var(--court-ease-bounce);overflow:hidden}.court-verdict.show .verdict-card{transform:scale(1) rotate(-1deg)}.verdict-card.guilty{--verdict:#c81e2b}.verdict-card.acquitted{--verdict:#159447}.verdict-kicker{font:800 13px var(--font-disp);letter-spacing:4px;color:#80663d}.verdict-name{margin:7px 0 18px;font:900 clamp(22px,4vw,40px) var(--font-disp);color:#241b13}.verdict-card .court-stamp{--stamp:var(--verdict);font-size:clamp(27px,6vw,62px);letter-spacing:5px;border-width:7px;animation:verdict-hit .38s var(--court-ease-bounce) both}.verdict-sub{margin-top:18px;font:800 13px var(--font-disp);letter-spacing:2px;color:#6f5837}@keyframes verdict-hit{0%{transform:scale(2.1) rotate(-14deg);opacity:0}100%{transform:scale(1) rotate(-6deg);opacity:1}}
.court-verdict.flash-guilty{background:rgba(142,8,18,.32)}.court-verdict.flash-acquitted{background:rgba(5,108,49,.26)}
.reduced-motion .challenge-card,.reduced-motion .verdict-card,.reduced-motion .verdict-card .court-stamp{transition:none!important;animation:none!important;transform:none!important}@media(prefers-reduced-motion:reduce){.challenge-card,.verdict-card,.verdict-card .court-stamp{transition:none!important;animation:none!important;transform:none!important}}

/* A raszter-háttér burkolója: a JS (renderFurniture) a háttérkép tényleges méretére és helyére igazítja; a kép teteje (belesütött cím) kilóg és levágódik. */
.stage-bg-wrap { position: absolute; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%); mask-image: linear-gradient(180deg, transparent 0, #000 13%); }

/* ---------------- 6) HUD: alcím + szerver-idő a szerepsávban ---------------- */
.rb-sub { color: var(--court-text-dim); font: 600 12px var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rb-time {
  display: inline-flex; align-items: center; padding: 1px 10px; border-radius: 999px; min-width: 52px; justify-content: center;
  font: 800 14px var(--font-disp); letter-spacing: 1px; color: var(--court-text); background: rgba(10, 8, 6, 0.6); border: 1px solid var(--court-panel-line);
  font-variant-numeric: tabular-nums;
}
.rb-time.warn { color: #1a1208; background: var(--court-amber); border-color: var(--court-amber); }
.rb-time.danger { color: #fff; background: var(--court-red-bright); border-color: var(--court-red-bright); animation: rb-pulse 0.5s ease-in-out infinite alternate; }
@keyframes rb-pulse { from { transform: scale(1); } to { transform: scale(1.12); } }
@media (max-width: 760px) { .rb-sub { display: none; } .rb-time { font-size: 12px; padding: 0 7px; min-width: 40px; } }

/* ---------------- 7) INTRO / BIZONYÍTÉK / KIHÍVÁS: kiegészítések ---------------- */
.ci-role { margin: 0 0 10px; font: 700 13px var(--font-disp); letter-spacing: 2px; color: #6f5837; }
.ci-role b { color: var(--court-red); }
.ci-skip { margin-top: 10px; font: 600 11px var(--font-body); color: #8a7a5c; letter-spacing: 1px; }
.court-intro.step2 { background: rgba(5, 3, 2, 0.5); }
.court-open { text-align: center; animation: court-open-hit 0.5s var(--court-ease-bounce) both; }
.co-text { font: 900 clamp(30px, 6vw, 78px) var(--font-disp); line-height: 1.05; letter-spacing: 4px; color: var(--court-gold); text-shadow: 0 0 36px rgba(242, 193, 78, 0.7), 0 4px 0 #5b4210; }
@keyframes court-open-hit { 0% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.ev-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ev-list li { display: flex; gap: 12px; align-items: baseline; font: 700 clamp(15px, 2vw, 21px) var(--font-body); line-height: 1.25; }
.ev-list li b { flex: none; font: 900 14px var(--font-disp); letter-spacing: 1px; color: #6b5638; background: #eee2c4; border: 2px solid #f6efdc; padding: 2px 8px; transform: rotate(-3deg); }
.cc-line { margin: 4px 0; font: 700 clamp(15px, 2vw, 20px) var(--font-body); line-height: 1.3; color: #3d3024; }
.cc-line b { color: var(--court-red); letter-spacing: 1px; }
.cc-note { margin-top: 10px; font: 800 11px var(--font-disp); letter-spacing: 2px; color: #80663d; }
.cc-stamp { margin-top: 14px; font-size: 16px; }

/* ---------------- 8) ÍTÉLET: rázkódás, rövid alcím ---------------- */
.court-shake { animation: court-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes court-shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 1px, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, -1px, 0); } 40%, 60% { transform: translate3d(6px, 1px, 0); }
}
.verdict-sub b { color: #241b13; }

/* ---------------- 9) VISSZASZÁMLÁLÁS 3-2-1 ---------------- */
.court-countdown {
  position: absolute; left: 50%; top: 38%; z-index: 126; transform: translate(-50%, -50%); pointer-events: none;
  font: 900 clamp(90px, 18vw, 220px) var(--font-disp); line-height: 1; color: #fff;
  text-shadow: 0 0 40px rgba(229, 72, 77, 0.85), 0 6px 0 #6e1616; opacity: 0.92;
}
.court-countdown.n3 { color: var(--court-amber); } .court-countdown.n2 { color: #ff8a3d; } .court-countdown.n1 { color: var(--court-red-bright); }
.court-countdown.pulse { animation: cd-pulse 0.9s ease-out both; }
@keyframes cd-pulse { 0% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } 25% { opacity: 0.95; } 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; } }

/* ---------------- 10) PONT-FELREPÜLÉS ---------------- */
.court-score { position: fixed; inset: 0; z-index: 140; pointer-events: none; overflow: hidden; }
.score-float {
  position: absolute; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; gap: 1px;
  animation: score-up 2.4s ease-out forwards; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.score-float b { font: 900 clamp(26px, 4vw, 40px) var(--font-disp); color: var(--court-gold); }
.score-float span { font: 800 10px var(--font-disp); letter-spacing: 2px; color: #fff; background: rgba(18, 12, 9, 0.8); padding: 1px 8px; border-radius: 999px; }
.score-float.mine b { color: var(--court-green); }
@keyframes score-up { 0% { transform: translate(-50%, 10px) scale(0.6); opacity: 0; } 15% { transform: translate(-50%, -8px) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -70px) scale(1); opacity: 0; } }
.sb-row.score-bump { animation: sb-bump 0.7s ease-out; }
@keyframes sb-bump { 0% { background: rgba(242, 193, 78, 0.45); transform: scale(1.03); } 100% { background: transparent; transform: scale(1); } }
.reduced-motion .score-float { animation: none !important; transform: translate(-50%, -40px); opacity: 1; }
.reduced-motion .court-countdown.pulse, .reduced-motion .court-open, .reduced-motion .court-shake, .reduced-motion .rb-time.danger { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .score-float { animation: none !important; transform: translate(-50%, -40px); opacity: 1; }
  .court-countdown.pulse, .court-open, .court-shake, .rb-time.danger { animation: none !important; }
}

/* ---------------- 11) KÁRTYÁK ELHELYEZÉSE, SZALAG ---------------- */
/* A bizonyíték- és kihívás-kártya a jelenet FELSŐ felében áll, hogy az alsó fázispanel ne takarja. Az intro és az ítélet középen marad. */
.court-evidence, .court-challenge { place-items: start center; padding-top: clamp(64px, 12vh, 140px); }
body.court-intro-on .accusation-ticker { visibility: hidden; }
.verdict-unanimous {
  margin: 12px auto 0; display: inline-block; padding: 4px 18px; font: 900 clamp(13px, 2.2vw, 20px) var(--font-disp); letter-spacing: 3px; color: #fff3d0;
  background: linear-gradient(180deg, #8a6420, #5b4210); border: 2px solid var(--court-gold); border-radius: 4px; box-shadow: 0 0 22px rgba(242, 193, 78, 0.55);
  animation: unan-in 0.45s 0.45s var(--court-ease-bounce) both;
}
@keyframes unan-in { from { transform: scale(1.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.reduced-motion .verdict-unanimous { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .verdict-unanimous { animation: none !important; } }

/* ---------------- 12) VÉGEREDMÉNY: díjak (csak mért statisztikából) ---------------- */
.phase-content[data-phase="game_over"] .awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; width: 100%; }
.phase-content[data-phase="game_over"] .award-card { width: auto; }
.award-stat { font: 800 11px var(--font-disp); letter-spacing: 1px; color: var(--court-text-dim); }

/* ---------------- 13) LOBBI: gyors / egyéni játék, készenlét ---------------- */
.lobby-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 10px; }
.lobby-mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; cursor: pointer; text-align: center;
  color: var(--court-text); background: rgba(10, 8, 6, 0.55); border: 2px solid var(--court-gold-dark); border-radius: var(--court-radius-sm);
  font-family: var(--font-disp); transition: background var(--court-dur-fast), border-color var(--court-dur-fast), transform var(--court-dur-fast);
}
.lobby-mode-btn b { font-size: 16px; letter-spacing: 2px; }
.lobby-mode-btn small { font: 600 11px var(--font-body); color: var(--court-text-dim); letter-spacing: 0; }
.lobby-mode-btn:hover { transform: translateY(-1px); border-color: var(--court-gold); }
.lobby-mode-btn[aria-selected="true"] { background: linear-gradient(180deg, rgba(242, 193, 78, 0.28), rgba(138, 100, 32, 0.28)); border-color: var(--court-gold); box-shadow: var(--court-glow-gold); }
.lobby-mode-btn:focus-visible { outline: 3px solid var(--court-gold); outline-offset: 2px; }
.quick-summary { margin: 0 0 12px; }
#btnReady.green { background: linear-gradient(180deg, #34d673, #159447); color: #04210f; border-color: #0d6a32; }
.p-state-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 2px 0 4px; min-height: 20px; }
.p-state-row .court-badge { font-size: 10px; padding: 1px 7px; }
.p-notready { color: var(--court-text-dim); opacity: 0.8; }
@media (max-width: 560px) {
  #screen-game .objection-phase .objection-waiting { text-align: center; } .lobby-mode { grid-template-columns: 1fr; } }

/* ---------------- 14) KAPCSOLAT-SÁV, AVATÁRVÁLASZTÓ ---------------- */
#connBar.ok { background: linear-gradient(180deg, #1f7a46, #14532d); border-color: #4ade80; }
.avatar-preview-box { position: relative; flex: none; }
.avatar-stamp { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%) rotate(-6deg); white-space: nowrap; font-size: 10px; letter-spacing: 1px; border-width: 3px; padding: 1px 8px;
  color: var(--court-green); border-color: var(--court-green); background: rgba(8, 20, 12, 0.88); pointer-events: none; }
.avatar-stamp:empty { display: none; }
.avatar-stamp.stamp-in { animation: stamp-in 0.35s var(--court-ease-bounce) both; }
@keyframes stamp-in { from { transform: translateX(-50%) rotate(-14deg) scale(1.8); opacity: 0; } to { transform: translateX(-50%) rotate(-6deg) scale(1); opacity: 1; } }
.reduced-motion .avatar-stamp.stamp-in { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .avatar-stamp.stamp-in { animation: none !important; } }

/* ============================================================
   15) KOMPAKT FÁZISPANEL, SZEREP-FÜZET, Z-RÉTEGEK  –  "TARTÓS UI = SZÉLEKEN, KÖZÉP = JÁTÉKVILÁG"
   A jelenet közepén és a karakterek előtt nincs tartós panel. Tartós: felső fázis-sáv (idő), bal felső szerep-füzet, bal alsó KÁRTYÁIM, jobb oldali ponttábla,
   alul csak kompakt műveleti sáv. Átmeneti (rövid ideig, egyszerre egy): intro, bizonyíték, kihívás-kártya, ítélet.
   Z-rétegek (játékképernyő), alulról felfelé:
     0 jelenet (háttér, karakterek, névtáblák: a #stage saját rétegében) · 70 fázis-gombok (#scenePanel) · 74 KÁRTYÁIM + szerep-füzet · 76 HUD-sávok
     85 ponttábla-oldalsáv, konfetti · 90 kártya-nagyító · 92 reakciók · 120–128 jelenet-overlayek (intro, ítélet, kihívás, bizonyíték) · 140 pont-felrepülés
     150 értesítések, kapcsolat-sáv · 200 rendszer-ablakok (súgó, megerősítés)
   ============================================================ */
:root {
  --z-panel: 70; --z-hand: 74; --z-hud: 76; --z-side: 85; --z-preview: 90; --z-reactions: 92;
  --z-overlay: 125; --z-score-fly: 140; --z-toast: 150; --z-modal: 200;
}
.reaction-layer { z-index: var(--z-reactions); }

/* üres panel nem rajzolódik (felkészülés, beszédfázisok nézőknek) */
#screen-game .content-zone.is-empty { display: none; }
/* nagy átmeneti overlay alatt a kapcsolódó műveleti sáv megvárja a végét (kihívás-bemutató, ítélet-pecsét): nincs két nagy felület egyszerre */
body[data-court-major="challenge"] #screen-game[data-phase="challenge_review"] #scenePanel,
body[data-court-major="verdict"] #screen-game[data-phase="verdict"] #scenePanel { visibility: hidden; }

/* beszédfázis / tanú: csak a saját gombom, panel nélkül (a cím, a beszélő és az idő a felső sávban) */
#screen-game .content-zone[data-layout="speech"] { width: auto; max-width: calc(100% - var(--hud-rail) - 32px); }
#screen-game .content-zone[data-layout="speech"] .phase-content { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; }
#screen-game .content-zone[data-layout="speech"] .inline-actions .btn { min-width: 200px; min-height: 52px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); }
/* vádemelés és szavazás: alacsony sáv */
#screen-game .content-zone[data-layout="accusation"] .phase-content { padding: 8px 14px; gap: 4px; }
#screen-game .content-zone[data-layout="accusation"] .btn.big { min-height: 46px; }
#screen-game .content-zone[data-layout="verdict_vote"] { width: min(520px, calc(100% - var(--hud-rail) - 32px)); }
#screen-game .content-zone[data-layout="verdict_vote"] .phase-content { padding: 8px 14px; gap: 4px; }
#screen-game .content-zone[data-layout="verdict_vote"] .vote-btn { min-height: 52px; font-size: 20px; }
#screen-game .content-zone[data-layout="verdict_vote"] .drumroll { font-size: 15px; letter-spacing: 3px; }

/* KIHÍVÁS-ELLENŐRZÉS: egyetlen kompakt sáv alul, a karakterek alatt (a nagy kártya 2 mp után eltűnt) */
#screen-game .content-zone[data-layout="challenge_review"] { width: min(700px, calc(100% - var(--hud-rail) - 32px)); }
#screen-game .content-zone[data-layout="challenge_review"] .phase-content { padding: 9px 14px; gap: 0; }
.rv-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; width: 100%; }
.rv-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-count { font: 800 11px var(--font-disp); letter-spacing: 1.5px; color: var(--role, var(--court-gold)); }
.rv-who { font-size: 12px; color: #d6d8df; } .rv-who b { color: #fff; } .rv-who i { color: var(--court-amber); font-style: normal; }
.rv-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font: 700 15px/1.25 var(--font-body); color: #fff4dd; }
.rv-noted { font-size: 11px; color: var(--court-green); }
.rv-actions { display: flex; flex-direction: column; gap: 6px; min-width: 262px; }
.rv-decide { display: flex; gap: 8px; }
.rv-decide .btn { flex: 1; min-height: 42px; padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.rv-wait, .rv-result { font-size: 12px; line-height: 1.3; color: #d6d8df; }
.rv-result.ok { color: var(--court-green); font-weight: 800; } .rv-result.no { color: var(--court-red-bright); font-weight: 800; }
.rv-fun { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--court-text-dim); }
.rv-fun-label { font: 800 10px var(--font-disp); letter-spacing: 1.2px; }
.rv-fun .btn.small { min-height: 30px; padding: 2px 10px; }

/* ÍTÉLET: ítélet-szó + mondat + gombok; a szavazatok és kihívások lenyithatók (felfelé nyílnak) */
#screen-game .content-zone[data-layout="result"] .phase-content[data-phase="verdict"] { overflow: visible; padding: 9px 14px; }
.vd-details summary { cursor: pointer; padding: 3px 10px; list-style: none; border: 1px solid #d6b87388; border-radius: 999px; font: 800 10px var(--font-disp); letter-spacing: 1.2px; color: var(--court-gold); }
.vd-details summary::-webkit-details-marker { display: none; }
.vd-details summary:focus-visible { outline: 3px solid var(--court-gold); outline-offset: 2px; }
.vd-body { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 3; max-height: 34dvh; overflow: auto; padding: 10px; background: rgba(9, 12, 20, 0.97); border: 1px solid #d6b87388; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); }
.vd-strip .sentence-card { margin: 0; }
.vd-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.vd-actions .btn { min-height: 40px; }

/* KÖR VÉGE: a pontokat a jobb oldali ponttábla mutatja – széles képernyőn nincs második pontlista a jelenet előtt (kis kijelzőn, ahol a ponttábla lehúzható, marad) */
@media (min-width: 901px) { #screen-game .phase-content[data-phase="round_results"] .score-table { display: none; } }
#screen-game .content-zone[data-layout="result"] .phase-content[data-phase="round_results"] { padding: 9px 14px; }
#screen-game .phase-content[data-phase="round_results"] .results-scroll { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }

/* SZEREP-FÜZET (bal felső, a BÍRÓI FIGYELŐ általánosítva): a vád-sáv alatt, hogy ne takarja a vádat és a karaktereket */
#screen-game .judge-watch-bar { top: 178px; width: 196px; max-width: 196px; }
#screen-game .jw-label { font-size: 11px; letter-spacing: 0.8px; font-weight: 800; }
.jw-sub { margin: 2px 0 3px; font: 800 10px var(--font-disp); letter-spacing: 1px; color: var(--court-gold); }
.jw-brief { margin: 0 0 4px; padding-left: 16px; font-size: 12px; line-height: 1.38; color: #d6d8df; }
@media (max-height: 650px) and (min-width: 701px) { #screen-game .judge-watch-bar { top: 150px; } }
@media (max-width: 700px) {
  #screen-game .judge-watch-bar { top: 150px; left: 6px; width: auto; max-width: 168px; }
  #screen-game .judge-watch-bar .jw-head { min-height: 36px; }
  #screen-game .jw-label { font-size: 10px; letter-spacing: 0.3px; }
  #screen-game .jw-brief { font-size: 11px; }
}

/* nagy átmeneti overlay alatt a vád-sáv (tartós, felül) átmenetileg elhalványul, hogy ne ússzon rá a kártyára */
body[data-court-major] #screen-game .accusation-ticker { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }

/* ---------------- 16) A KOMPAKT SÁVOK ÉS A KÁRTYA-KÉZ EGYMÁS MELLETT ---------------- */
/* széles képernyőn a bal alsó pakli mellett, a maradék sávban középre igazítva; keskeny képernyőn (lehúzható ponttábla) a pakli fölött */
@media (min-width: 901px) {
  body.has-hand #screen-game .content-zone:not([data-layout="speech"]) {
    left: calc(244px + (100% - var(--hud-rail) - 244px) / 2); max-width: calc(100% - var(--hud-rail) - 268px); min-width: 0;
  }
  #screen-game .content-zone[data-layout="challenge_review"], #screen-game .content-zone[data-layout="result"] { width: min(640px, calc(100% - var(--hud-rail) - 32px)); }
}
@media (max-width: 900px) {
  body.has-hand #screen-game .content-zone, body.has-hand #screen-game .content-zone[data-layout] { bottom: calc(54px + 62px + 8px); }
}

/* ---------------- 17) KOMPAKT SÁVOK: minden tartós panel ≤ ~125 px magas, hogy a vádlott és a terem ne legyen takarva ---------------- */
.rv-actions { min-width: 214px; }
.rv-decide .btn { padding: 6px 8px; font-size: 12.5px; }
/* ítélet: ítélet-szó | mondat | gombok (a szavazatok és kihívások lenyithatók, felfelé nyílnak) */
.vd-strip { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; width: 100%; }
.vd-word { padding: 2px 12px; border-radius: 4px; font: 900 20px/28px var(--font-disp); letter-spacing: 2px; color: #fff; }
.vd-word.guilty { background: #c81e2b; } .vd-word.not-guilty { background: #159447; }
.vd-mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vd-strip .sentence-card { margin: 0; padding: 6px 10px; font-size: 14px; line-height: 1.3; display: block; }
.vd-strip .sentence-stamp { display: none; }
.vd-strip .favorite-note { margin: 0; padding: 0; font-size: 11px; }
.vd-small { display: flex; gap: 6px; align-items: center; }
.vd-small .btn { min-height: 30px; padding: 3px 10px; font-size: 11px; white-space: nowrap; }
.vd-details summary { min-height: 30px; display: inline-flex; align-items: center; white-space: nowrap; }
.vd-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
/* tiltakozás: szöveg balra, gombok jobbra – egy alacsony sor */
#screen-game .objection-phase { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; }
#screen-game .objection-phase > .objection-phase-sub, #screen-game .objection-phase > .objection-rule, #screen-game .objection-phase > .objection-instruction,
#screen-game .objection-phase > .objection-waiting, #screen-game .objection-phase > .objection-result { grid-column: 1; margin: 0; }
#screen-game .objection-phase > .objection-buttons, #screen-game .objection-phase > #iaDone { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
#screen-game .objection-phase .objection-phase-sub, #screen-game .objection-phase .objection-instruction { font-size: 13px; padding: 2px 4px; }
#screen-game .objection-phase .objection-rule { font-size: 11px; }
#screen-game .objection-phase .objection-buttons .btn, #screen-game .objection-phase #iaDone { min-height: 44px; font-size: 14px; }
#screen-game .content-zone[data-layout="objection"] .phase-content { padding: 8px 14px; }
#screen-game .content-zone[data-layout="objection"] { width: min(640px, calc(100% - var(--hud-rail) - 32px)); }
/* kihívás-szavazás (esküdt-mód): a sorok két oszlopban, a felső sáv már kérdezi, hogy teljesítették-e */
#screen-game .content-zone[data-layout="challenge_vote"] .phase-content { padding: 8px 12px; }
.cv-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 6px 10px; width: 100%; }
@media (max-width: 560px) {
  .rv-strip, .vd-strip { grid-template-columns: minmax(0, 1fr); }
  .rv-actions { min-width: 0; }
  .vd-word { justify-self: start; }
  #screen-game .objection-phase { grid-template-columns: minmax(0, 1fr); }
  #screen-game .objection-phase > .objection-buttons, #screen-game .objection-phase > #iaDone { grid-column: 1; grid-row: auto; }
}

/* tiltakozás: a nem-bíróknak egyetlen sor várakozás (nincs keretes doboz) */
#screen-game .objection-phase .objection-waiting { padding: 2px 4px; border: 0; background: none; box-shadow: none; font-size: 13px; text-align: left; }

/* keskeny asztali kijelzőn (a ponttábla és a pakli mellett kevés a hely) az ítélet-sáv két oszlopos: fent az ítélet-szó, alatta a mondat és a gombok */

@media (min-width: 561px) and (max-width: 1100px) {
  /* három oszlop: ítélet-szó | egyhangú-jelzés | gombok (a gombok két sort töltenek ki); alattuk a mondat – nem nő a sáv */
  .vd-strip { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; }
  .vd-word { grid-column: 1; grid-row: 1; justify-self: start; font-size: 14px; line-height: 20px; padding: 0 10px; }
  .vd-strip .vd-mid { display: contents; }
  .vd-strip .favorite-note { grid-column: 2; grid-row: 1; justify-self: start; align-self: center; font-size: 10px; }
  .vd-strip .sentence-card { grid-column: 1 / span 2; grid-row: 2; }
  .vd-strip .sc-text { -webkit-line-clamp: 3; }
  .vd-actions { grid-column: 3; grid-row: 1 / span 2; justify-content: center; }
}

/* ============================================================
   18) ESKÜDT-MÓD (kihívás-szavazás) + HOSSZÚ SZÖVEGEK: egyszerre egy kihívás, lapozó sorszám-gombokkal; a vágott szöveg koppintásra teljesen olvasható
   ============================================================ */
body[data-court-major="challenge"] #screen-game[data-phase="challenge_vote"] #scenePanel { visibility: hidden; }
#screen-game .content-zone[data-layout="challenge_vote"] { width: min(640px, calc(100% - var(--hud-rail) - 32px)); }
#screen-game .content-zone[data-layout="challenge_vote"] .phase-content { padding: 8px 14px; gap: 0; }
.cv-strip { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.cv-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-chips { display: flex; gap: 4px; }
.cv-chip { min-width: 38px; min-height: 30px; padding: 0 8px; cursor: pointer; border-radius: 6px; border: 1px solid #d6b87388; background: rgba(10, 8, 6, 0.6); color: var(--court-text); font: 800 13px var(--font-disp); }
.cv-chip.on { background: var(--court-gold); border-color: var(--court-gold); color: #1a1208; }
.cv-chip.done:not(.on) { border-color: var(--court-green); color: var(--court-green); }
.cv-chip:focus-visible { outline: 3px solid var(--court-gold); outline-offset: 2px; }
.cv-who { flex: 1 1 auto; min-width: 0; font-size: 12px; color: #d6d8df; } .cv-who b { color: #fff; }
.cv-top .vote-status { margin-left: auto; padding: 2px 10px; font-size: 12px; }
.cv-main { display: flex; align-items: center; gap: 12px; }
.cv-text { flex: 1 1 auto; min-width: 0; font: 700 15px/1.25 var(--font-body); color: #fff4dd; }
.cv-btns { display: flex; gap: 8px; flex: none; }
.cv-btns .btn { min-width: 88px; min-height: 42px; padding: 6px 14px; font-size: 14px; }
.cv-btns .btn[disabled] { opacity: 0.55; }
.cv-btns .btn.chosen { opacity: 1; box-shadow: 0 0 0 2px var(--court-gold); }

/* a vágott (3 sor) szöveg: koppintásra / kattintásra / Enterre kinyílik, újra összecsukódik; látható jelzés a sarokban */
[data-clamp] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
[data-clamp].is-clamped { position: relative; cursor: pointer; padding-right: 18px; }
[data-clamp].is-clamped::after { content: '▾'; position: absolute; right: 2px; bottom: 0; color: var(--court-gold); font-size: 14px; line-height: 1; }
[data-clamp].is-clamped:focus-visible { outline: 2px solid var(--court-gold); outline-offset: 2px; border-radius: 3px; }
[data-clamp].open { display: block; -webkit-line-clamp: unset; max-height: min(40dvh, 340px); overflow-y: auto; }
[data-clamp].open::after { content: '▴'; }
.sc-text { -webkit-line-clamp: 3; }

@media (max-width: 560px) {
  .cv-main { flex-direction: column; align-items: stretch; gap: 6px; }
  .cv-btns .btn { flex: 1; }
  #screen-game .content-zone[data-layout="challenge_vote"] { width: calc(100% - 16px); }
}
#screen-game .vd-strip .sentence-card { font-size: 14px; }

/* ---------------- Szerep-képek (átlátszó, derékig látszó karakterek) ---------------- */
/* A képek 3:4 vásznon készültek (scripts/build-role-assets.js): az arc mindig ugyanott és ugyanakkora; a slot magasságát a JS adja (jelenet × ROLE_LAYOUT).
   Nincs kártya- / téglalap-háttér: a karakter közvetlenül a terem világában áll; a derék a bútor mögött marad, a nyitott térben az alja puhán elhalványul (a képbe sütve).
   Az eltolás / nagyítás a független "translate" / "scale" tulajdonságokkal megy (a belépő animáció a "transform"-ot használja, így nem akadnak össze). */
.stage-slot.sprite-slot { aspect-ratio: 3 / 4; }
.stage-slot.sprite-slot::after { display: none; }                         /* a beszélő téglalap-kerete helyett a körvonal-ragyogás (glow-pulse) jelez */
.st-art.role-sprite .st-base {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%; border: 0; background: none; border-radius: 0;
  translate: calc(var(--rx, 0) * 1%) calc(var(--ry, 0) * 1%);
  transform-origin: 50% 100%;
  opacity: 0;                                                             /* betöltésig rejtve: nincs fehér / zöld villanás, nincs törött kép */
}
.st-art.role-sprite.sprite-ready .st-base { opacity: 1; }
/* A belépő a burkolón (.st-art) fut, "backwards" kitöltéssel: a végén a normál állapot marad, így a beszélő-kiemelés (glow-pulse a képen, nagyítás a burkolón) és a
   bíró saját szabályai (#screen-game .judge-slot.round-judge .st-fig img { animation: none }) nem ütköznek vele, és a beszéd végén sem játszódik le újra. */
.st-art.role-sprite.sprite-ready { animation: spr-juror 320ms ease-out backwards; }
.stage-slot[data-role="judge"] .st-art.role-sprite.sprite-ready { animation: spr-judge 420ms cubic-bezier(.2, .8, .2, 1) backwards; }
.stage-slot[data-role="prosecutor"] .st-art.role-sprite.sprite-ready, .stage-slot[data-role="defender"] .st-art.role-sprite.sprite-ready { animation: spr-prosecutor 340ms cubic-bezier(.2, .8, .2, 1) backwards; }
.stage-slot[data-role="defendant"] .st-art.role-sprite.sprite-ready { animation: spr-defendant 440ms cubic-bezier(.3, 1.3, .5, 1) backwards; }
.stage-slot[data-role="witness"] .st-art.role-sprite.sprite-ready { animation: spr-witness 340ms cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes spr-judge { from { opacity: 0; transform: translateY(3%) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes spr-prosecutor { from { opacity: 0; transform: translateX(-10%); } to { opacity: 1; transform: none; } }
@keyframes spr-defendant { 0% { opacity: 0; transform: translateY(8%); } 55% { opacity: 1; transform: translateY(-2%); } 100% { opacity: 1; transform: none; } }
@keyframes spr-witness { from { opacity: 0; transform: translateX(10%); } to { opacity: 1; transform: none; } }
@keyframes spr-juror { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.reduced-motion .st-art.role-sprite.sprite-ready, .reduced-motion .stage-slot .st-art.role-sprite.sprite-ready { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .st-art.role-sprite.sprite-ready, .stage-slot .st-art.role-sprite.sprite-ready { animation: none !important; } }
/* mélység: finom kontakt-árnyék a talpnál (a bútor mögötti alakoknál a bútor eltakarja), a hátsó sor kicsit sötétebb */
.stage-slot.sprite-slot::before {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: -1%; height: 6%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(8, 4, 2, .5), rgba(8, 4, 2, .2) 50%, transparent 74%);
}
#screen-game .stage-slot.sprite-slot:not(.speaking):not(.dim) .st-fig img { filter: drop-shadow(0 6px 10px #0006) brightness(var(--depth, 1)); }
#screen-game .stage-slot.sprite-slot.dim .st-fig img { filter: drop-shadow(0 6px 10px #0006) brightness(calc(var(--depth, 1) * .82)); }
/* a beszélő: enyhe kiemelés (a mellszobor-méretű képnél a régi 20%-os nagyítás túl sok volna) */
.stage-slot.sprite-slot.speaking .st-art, #screen-game .stage-slot.sprite-slot.speaking .st-art { transform: scale(1.05); }
.stage-slot.sprite-slot.speaking, #screen-game .stage-slot.sprite-slot.speaking { transform: translateX(-50%); animation: none; }
.judge-slot.sprite-slot .st-art { clip-path: none; }
.judge-slot.sprite-slot.asset-missing .st-art { clip-path: none; }

/* Kisebb asztali képernyő (≤ 1480 px: 1366 × 768, 1024 × 768): a vád-sáv 2 sorra vágva (a 3. sor az esküdtek arcába lógna), a teljes vád koppintásra kinyílik */
@media (max-width: 1479px) and (min-width: 701px) { #screen-game .accusation-ticker .charge-text { -webkit-line-clamp: 2; } }
/* Fekvő telefon / alacsony képernyő: a vád-sáv egy sorra szűkül, a díszítő buborék elrejtőzik, hogy a karakterek arca látszódjon (a teljes vád koppintásra kinyílik) */
@media (max-height: 520px) and (min-width: 701px) {
  #screen-game .accusation-ticker { padding: 4px 10px 3px; font-size: 13px; line-height: 1.2; }
  #screen-game .accusation-ticker .charge-file-head, #screen-game .accusation-ticker .charge-expand-hint { display: none; }
  #screen-game .accusation-ticker .charge-text { -webkit-line-clamp: 1; }
  #screen-game .judge-bubble { display: none; }
}
/* Alacsony telefon (pl. 360 × 640): a vád-sáv egy sorra vágva (a teljes vád koppintásra kinyílik), így a bíró és az esküdtek arca nincs alatta */
@media (max-width: 700px) and (max-height: 700px) {
  #screen-game .accusation-ticker { padding: 5px 10px 4px; }
  #screen-game .accusation-ticker .charge-text { -webkit-line-clamp: 1; font-size: 17px; line-height: 1.2; }
  #screen-game .accusation-ticker .charge-file-head { display: none; }
}
/* A hátsó sor (esküdtek) névtáblái szerep-képeknél elrejtve: a bíró / a tanú arcára kerülnének (a pulpitus körül a buborék, a bíró táblája és a vád-sáv is ott van);
   a nevek a ponttáblán és az esküdt-figura title-jében (hover / képernyőolvasó) megvannak. */
#screen-game .stage-plate[data-role="juror"][data-spr] { display: none; }