/* =====================================================================
   KORHŰ LÁTVÁNY: villanykörtés cím, létra-menü, kikötő-jelenet, képregény
   ===================================================================== */

/* ---------- cím- és menüképernyő ---------- */
.title-screen { position: fixed; inset: 0; overflow: hidden; background: #000 center / cover no-repeat; z-index: 2; }
.title-screen.has-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 70%, transparent 30%, rgba(0, 0, 0, .75)); pointer-events: none; }
.title-screen .ph-city { position: absolute; left: 0; right: 0; bottom: 18%; height: 30%; opacity: .9; }
.title-screen.has-art .ph-city, .title-screen.has-art .ph-man, .title-screen.has-art .ph-boards, .title-screen.has-art .ph-glow { display: none; }
.title-screen .ph-city svg { width: 100%; height: 100%; filter: drop-shadow(0 0 30px rgba(233, 169, 75, .35)); }
.title-screen .ph-glow { position: absolute; left: 10%; right: 10%; bottom: 20%; height: 22%; background: radial-gradient(ellipse at 50% 100%, rgba(233, 169, 75, .45), transparent 70%); filter: blur(10px); }
.title-screen .ph-man { position: absolute; left: 50%; bottom: 6%; width: min(90px, 12vw); transform: translateX(-50%); }
.title-screen .ph-boards { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(rgba(0, 0, 0, 0), #000), repeating-linear-gradient(90deg, #120d09 0 38px, #1b140d 38px 40px); opacity: .85; }
.title-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.title-top { position: absolute; top: 3vh; left: 50%; transform: translateX(-50%); width: min(1100px, 94vw, 100vh); z-index: 7; pointer-events: none; filter: drop-shadow(0 6px 18px rgba(0,0,0,.9)); }
.marquee { display: block; }
.loading-bar { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); width: min(420px, 70vw); height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(212, 174, 79, .5); overflow: hidden; z-index: 3; }
.loading-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(45deg, var(--gold) 0 8px, var(--brass) 8px 16px); animation: load 1.6s ease-out forwards; }
@keyframes load { to { width: 100%; } }
.title-screen .over { position: absolute; inset: 0; z-index: 4; overflow-y: auto; }
/* a cím magassága a szélesség 0,42-szerese (marquee.js): a panel mindig alatta kezdődik */
.title-screen .auth { padding-top: calc(3vh + min(1100px, 94vw, 100vh) * .42 + 12px); }
.title-screen .auth .panel { margin-top: 0; }

/* ---------- a leereszkedő fémlétra ---------- */
.ladder-wrap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(460px, 90vw); z-index: 5; height: 100%; overflow-y: auto; scrollbar-width: none; }
.ladder { position: relative; margin: 0 auto; width: 100%; padding: calc(3vh + min(1100px, 94vw, 100vh) * .42 + 8px) 0 40px; }
.ladder.has-art { background: center top / 100% auto repeat-y; }
.ladder .rail { position: absolute; top: 0; bottom: 0; width: 18px; border-radius: 6px; background: linear-gradient(90deg, #2d3a30, #5b6b5c 40%, #2b362d); box-shadow: inset 0 0 0 2px #1a221c, 0 6px 18px rgba(0, 0, 0, .6); }
.ladder .rail::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 60px, rgba(140, 70, 30, .5) 60px 64px, transparent 64px 90px); border-radius: 6px; }
.ladder .rail.l { left: 4%; } .ladder .rail.r { right: 4%; }
.ladder.has-art .rail { display: none; }
.rung { position: relative; display: block; width: 84%; margin: 0 auto 16px; padding: 12px 16px; border: 0; border-radius: 6px; cursor: pointer; text-align: center;
  font-family: var(--font-deco); font-size: clamp(16px, 2.4vw, 21px); letter-spacing: .06em; color: #2a2118;
  background: linear-gradient(180deg, #f6eed9, #e3d3ad); box-shadow: 0 0 0 3px #3a2a1a, 0 6px 0 #1a120a, 0 10px 18px rgba(0, 0, 0, .55); transform-origin: 50% -20px; transition: transform .15s, filter .15s; }
.rung.has-art { background: center / 100% 100% no-repeat; box-shadow: none; }
.rung::before, .rung::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f0d488, #7a5a1e); }
.rung::before { left: 8px; } .rung::after { right: 8px; }
.rung:hover:not(:disabled) { filter: brightness(1.08); animation: swing .9s ease-in-out; }
.rung:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 3px #3a2a1a, 0 3px 0 #1a120a; }
.rung:disabled { opacity: .45; cursor: default; }
.rung small { display: block; font-family: var(--font); font-size: 11px; letter-spacing: .02em; color: #6b5a40; }
@keyframes swing { 25% { transform: rotate(1.5deg); } 60% { transform: rotate(-1deg); } }
.menu-user { position: absolute; top: 12px; right: 14px; z-index: 6; display: flex; gap: 8px; align-items: center; }
.menu-back { margin-right: 6px; }

/* ---------- kikötő-jelenet ---------- */
.game { grid-template-rows: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "hud side" "opps side" "scene side" "dock side" "me side"; }
.game .scene { grid-area: scene; }
/* asztali nézet: a jelenet és a dokk (fő nyersanyagok / zsákok) osztozik a maradék magasságon – alacsony (768 px-es) kijelzőn se csússzon a dokk a kézre */
@media (min-width: 981px) {
  /* a jelenet sora pontosan a (fix arányú) jelenet magassága, a maradék a dokké; az oldal maga nem görget */
  .game { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
  .game .scene { height: auto; min-height: 0; max-height: none; }
  .game .dock { min-height: 0; }
}
@media (max-width: 980px) { .game { grid-template-areas: "hud" "opps" "scene" "dock" "me"; } }
.scene { position: relative; height: clamp(240px, 42vh, 460px); border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(212, 174, 79, .3); background: #081018; isolation: isolate; }
.scene .ph { width: 100%; height: 100%; display: block; }
.scene .has-art > .ph { visibility: hidden; }
.sc-sky { position: absolute; inset: 0 0 45% 0; background: radial-gradient(ellipse at 70% 0, #1f3a60, #0a1422 70%) center / cover; }
.sc-sky::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 12% 20%, #fff8, transparent), radial-gradient(1px 1px at 38% 12%, #fff6, transparent), radial-gradient(1.5px 1.5px at 66% 30%, #fff9, transparent), radial-gradient(1px 1px at 84% 16%, #fff7, transparent), radial-gradient(1px 1px at 52% 40%, #fff5, transparent); }
.sc-skyline { position: absolute; left: 0; right: 0; top: 12%; height: 36%; background: center bottom / cover no-repeat; }
.sc-water { position: absolute; left: 0; right: 0; top: 46%; bottom: 0; background: linear-gradient(#0d2238, #06101b); background-size: auto 100%; overflow: hidden; }
.sc-water i { position: absolute; left: -50%; width: 200%; height: 100%; background: repeating-radial-gradient(ellipse 40px 6px at 50% 50%, transparent 0 6px, rgba(233, 169, 75, .14) 6px 7px, transparent 7px 18px); animation: wave 18s linear infinite; }
.sc-water i:nth-child(2) { top: 20px; opacity: .6; animation-duration: 26s; animation-direction: reverse; }
.sc-water.has-art i { display: none; }
.sc-ships { position: absolute; left: 0; right: 0; top: 30%; height: 34%; }
.sc-ship { position: absolute; bottom: 0; width: clamp(70px, 11%, 150px); transform: translateX(-50%); animation: bob 3.2s ease-in-out infinite; animation-delay: var(--bob); }
@keyframes bob { 50% { transform: translateX(-50%) translateY(-4px) rotate(-1.2deg); } }
.sc-ship-art { aspect-ratio: 4 / 3; background: center / contain no-repeat; }
.sc-ship.is-agent { opacity: .45; filter: grayscale(.7); }
.sc-ship.is-me .sc-ship-name { color: var(--gold-2); border-color: var(--gold); }
.sc-ship-name { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); white-space: nowrap; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(143, 163, 189, .4); }
.sc-crate { position: absolute; left: 38%; bottom: 24%; width: 22%; aspect-ratio: 1; background: repeating-linear-gradient(90deg, #8a6036 0 5px, #6b4a2b 5px 6px); border: 2px solid #2a1a0c; border-radius: 2px; transform: scale(0); transition: transform .3s cubic-bezier(.2, 1.6, .4, 1); }
.sc-crate.on { transform: scale(1); }
.sc-crate.thump { animation: shake .4s; }
.sc-crate.pried { transform: scale(1.15) rotate(-6deg); background: repeating-linear-gradient(90deg, #a07040 0 5px, #6b4a2b 5px 6px); }
.sc-crate.sealed::after { content: ''; position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d64545, #7a1010); box-shadow: 0 0 8px #d64545; animation: stamp .35s cubic-bezier(.2, 1.6, .4, 1); }
.sc-sign { position: absolute; left: 50%; top: -22px; transform: translateX(-50%) scale(0); background: #f4ecd8; color: #2a2118; font-size: 11px; font-weight: 700; padding: 1px 6px; border: 2px solid #5a3d22; border-radius: 3px; white-space: nowrap; transition: transform .3s cubic-bezier(.2, 1.6, .4, 1); }
.sc-sign.on { transform: translateX(-50%) scale(1); }
.sc-splash { position: absolute; left: 20%; bottom: 0; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #9ad0ff; animation: splash .9s ease-out forwards; }
@keyframes splash { to { transform: scale(2.5); opacity: 0; } }
.sc-pier { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: center bottom / 100% 100% no-repeat; }
.sc-wh { position: absolute; top: 4%; font-size: 10px; background: #f4ecd8; color: #2a2118; padding: 0 5px; border: 2px solid #5a3d22; border-radius: 2px; transform: scale(0); transition: transform .4s; white-space: nowrap; }
.sc-wh.on { transform: scale(1); }
.sc-wh[data-wh="0"] { left: 2%; } .sc-wh[data-wh="1"] { left: 18%; } .sc-wh[data-wh="2"] { right: 2%; }
.sc-truck, .sc-police { position: absolute; bottom: 48%; width: clamp(70px, 9%, 130px); aspect-ratio: 15 / 8; background: center / contain no-repeat; }
.sc-truck { left: 30%; } .sc-police { left: 66%; }
.sc-police .bell { animation: blink .5s infinite alternate; }
.sc-boat { position: absolute; left: 2%; top: 62%; width: clamp(64px, 8%, 110px); z-index: 3; }
.sc-boat-art { aspect-ratio: 2 / 1; background: center / contain no-repeat; animation: bobBoat 2.4s ease-in-out infinite; }
@keyframes bobBoat { 50% { transform: translateY(-3px) rotate(1deg); } }
.sc-boat-label { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-size: 10px; white-space: nowrap; color: var(--gold-2); text-shadow: 0 1px 2px #000; }
.sc-fog { position: absolute; inset: 30% -10% 0; pointer-events: none; background: radial-gradient(ellipse at 30% 60%, rgba(200, 215, 235, .10), transparent 60%), radial-gradient(ellipse at 75% 50%, rgba(200, 215, 235, .08), transparent 55%); animation: fog 30s ease-in-out infinite alternate; }
.sc-flycrate { position: absolute; width: 22px; height: 22px; z-index: 6; background: repeating-linear-gradient(90deg, #8a6036 0 4px, #6b4a2b 4px 5px); background-size: contain; border: 2px solid #2a1a0c; }
.sc-flycrate.seized { outline: 2px solid #d64545; }
.sc-pow { position: absolute; left: 50%; top: -30px; transform: translateX(-50%) rotate(-8deg); z-index: 7; font-family: var(--font-deco); font-size: 20px; color: #fff3c4; -webkit-text-stroke: 1.5px #2a1a0c; text-shadow: 3px 3px 0 #d64545; animation: pow .9s cubic-bezier(.2, 1.6, .4, 1) forwards; white-space: nowrap; }
@keyframes pow { 0% { transform: translateX(-50%) rotate(-8deg) scale(.2); } 30% { transform: translateX(-50%) rotate(-8deg) scale(1.2); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-14px) rotate(-8deg); } }
.sc-caption { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%) scale(.3); opacity: 0; z-index: 8; text-align: center; pointer-events: none; transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), opacity .3s; }
.sc-caption.show { transform: translate(-50%, -50%) scale(1) rotate(-3deg); opacity: 1; }
.sc-caption b { display: block; font-family: var(--font-deco); font-weight: 400; font-size: clamp(20px, 3.6vw, 40px); padding: 4px 18px; border: 4px solid currentColor; border-radius: 8px; background: rgba(8, 14, 24, .78); text-shadow: 0 0 20px currentColor; white-space: nowrap; }
.sc-caption small { display: block; margin-top: 4px; color: var(--text); font-size: 13px; text-shadow: 0 1px 2px #000; }
.sc-caption.ok { color: #7ff0a8; } .sc-caption.blue { color: #9ad0ff; } .sc-caption.amber { color: #ffc86b; } .sc-caption.bad { color: #ff7070; } .sc-caption.gold { color: var(--gold-2); }

/* ---------- képregény-panelek ---------- */
.sc-comics { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 8px; justify-content: flex-end; z-index: 9; pointer-events: none; }
.comic { position: relative; display: flex; gap: 8px; align-items: flex-start; max-width: min(360px, 48%); padding: 8px; background-color: #f4ecd8; color: #1a1209; border: 3px solid #111; box-shadow: 5px 5px 0 #111;
  background-image: radial-gradient(rgba(0, 0, 0, .12) 1px, transparent 1.4px); background-size: 6px 6px; animation: comicIn .35s cubic-bezier(.2, 1.4, .4, 1); transform: rotate(-1deg); }
.comic.agent { transform: rotate(1deg); background-color: #dfe7f0; }
.comic.out { animation: comicOut .45s ease-in forwards; }
@keyframes comicIn { from { transform: translateY(40px) scale(.6) rotate(-6deg); opacity: 0; } }
@keyframes comicOut { to { transform: translateX(-60px) rotate(-8deg); opacity: 0; } }
.comic-portrait { flex: none; width: 58px; height: 58px; border: 3px solid #111; background: #fff; overflow: hidden; }
.comic-portrait img, .comic-portrait svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.comic-bubble { position: relative; background: #fff; border: 2.5px solid #111; border-radius: 16px; padding: 5px 9px; font-family: 'Comic Neue', var(--font); font-size: 13px; line-height: 1.3; }
.comic-bubble::before { content: ''; position: absolute; left: -12px; top: 12px; border: 7px solid transparent; border-right: 11px solid #111; }
.comic-bubble b { display: block; font-family: var(--font-deco); font-weight: 400; font-size: 11px; letter-spacing: .06em; color: #8a2229; }
.comic.agent .comic-bubble b { color: #1f4270; }
.comic-word { position: absolute; right: -10px; top: -18px; font-family: var(--font-deco); font-size: 18px; color: #ffe066; -webkit-text-stroke: 1.5px #111; text-shadow: 2px 2px 0 #d64545; transform: rotate(10deg); }
@media (max-width: 700px) {
  .comic { max-width: 92%; }
  .sc-comics { flex-direction: column; align-items: stretch; }
  .comic:not(:last-child) { display: none; }
  .scene { height: 30vh; }
}

/* ---------- menü-intró: Thompson-os lövészek ---------- */
.gunner { position: absolute; bottom: -2%; width: min(28vw, 280px); aspect-ratio: 22 / 26; z-index: 8; pointer-events: none; animation: gunIn .6s cubic-bezier(.2, 1.2, .4, 1) both; }
.gunner.left { left: -1%; } .gunner.right { right: -1%; }
.gunner-art { width: 100%; height: 100%; background: center bottom / contain no-repeat; filter: drop-shadow(0 0 18px rgba(255, 170, 60, .25)); }
.gunner-art .ph { width: 100%; height: 100%; }
.gunner-art.has-art > * { display: none; }
.gunner.right .gunner-art:not(.has-art) { transform: scaleX(-1); }
.gunner.firing .gunner-art { animation: recoil .07s linear infinite; }
.gunner.right.firing .gunner-art:not(.has-art) { animation: recoilR .07s linear infinite; }
@keyframes recoil { 50% { transform: translate(-3px, 2px) rotate(-1deg); } }
@keyframes recoilR { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translate(-3px, 2px) rotate(-1deg); } }
@keyframes gunIn { from { transform: translateY(60%); opacity: 0; } }
.gunner.leave { animation: gunOut 1.2s ease-in .3s forwards; }
@keyframes gunOut { to { transform: translateY(80%); opacity: 0; } }
.gunner .flash { display: none; }
.shootout-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9; pointer-events: none; }

/* generált kikötő-háttér és hajó-sprite-ok */
.scene.has-backdrop { background: #081018 center / cover no-repeat; }

.sc-flag { display: none; position: absolute; left: 58%; top: 2%; width: 16%; height: 12%; background: var(--flag); clip-path: polygon(0 0, 100% 50%, 0 100%); box-shadow: 0 0 6px rgba(0,0,0,.6); animation: flag 1.6s ease-in-out infinite; transform-origin: left center; }
.sc-ship-art.has-art + .sc-flag { display: block; }
@keyframes flag { 50% { transform: scaleX(.8) skewY(-6deg); } }

/* ---------- videó-bejátszás a kikötő-jelenet fölött (a felirat z-index 8, efölött marad) ---------- */
.sc-clip { position: absolute; inset: 0; z-index: 7; background: #000; cursor: pointer; overflow: hidden; border-radius: inherit; animation: clip-in .35s ease-out; }
.sc-clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-clip::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 6px #0b0b0b, inset 0 0 60px rgba(0, 0, 0, .7); }
.sc-clip.out { opacity: 0; transition: opacity .35s; }
@keyframes clip-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* ---------- rétegzett kikötő generált textúrákkal (oldalnézet: ég 0–46%, víz 46–76%, rakpart 76–100%) ---------- */
.scene.has-sky .sc-sky { inset: 0 0 54% 0; background-position: center bottom; background-size: cover; }
.scene.has-sky .sc-sky::after { display: none; }
.scene.has-sky .sc-skyline { display: none; }              /* a városkép az ég képén van */
.sc-water.has-art { background-position: center top; background-size: cover; }
/* rakpart: a deszkázatot és a víz felőli gerendát a kód rajzolja, így mindig egyenes */
.scene.art-pier .sc-pier > .ph { display: none; }
.scene.art-pier .sc-pier {
  background:
    linear-gradient(#1b120a, #2a1b0e) top / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 150px, #120c07 150px 162px) 0 2px / 100% 16px no-repeat,
    linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .55)),
    repeating-linear-gradient(90deg, transparent 0 117px, rgba(0, 0, 0, .45) 117px 119px),
    repeating-linear-gradient(180deg, #4b3420 0 12px, #3b281a 12px 22px, #1e140b 22px 24px);
  box-shadow: 0 -8px 18px rgba(0, 0, 0, .55);
}
.sc-house { position: absolute; bottom: 30%; height: 150%; aspect-ratio: 1.1; background: center bottom / contain no-repeat; z-index: 1; pointer-events: none; }
.sc-house.a { left: -1%; } .sc-house.b { right: -1%; }
.sc-truck, .sc-police { z-index: 2; }
.scene.art-pier .sc-wh { top: auto; bottom: 102%; z-index: 3; }
.scene.art-pier .sc-wh[data-wh="0"] { left: 1%; } .scene.art-pier .sc-wh[data-wh="1"] { left: 50%; } .scene.art-pier .sc-wh[data-wh="2"] { left: auto; right: 1%; }
/* ügynöki csónak: a hajók előtti, közelebbi vízsávban jár (a bal raktár mellől indul) */
.scene.art-pier .sc-boat { top: 65%; left: 12%; z-index: 4; }
/* ---------- fix arányú színpad: a világ egy 1200×525-ös vásznon, egyetlen szorzóval méretezve (scene.js) ---------- */
.scene { height: auto; aspect-ratio: 16 / 7; width: min(100%, calc(46vh * 16 / 7)); max-width: 100%; margin-inline: auto; container-type: inline-size; }
.sc-stage { position: absolute; left: 0; top: 0; width: 1200px; height: 525px; transform-origin: 0 0; }
.sc-ship { width: 8.6%; }
.sc-ship-name { font-size: 15px; padding: 1px 7px; bottom: -22px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.sc-sign { font-size: 14px; top: -26px; }
.sc-boat { width: 7.5%; }
.sc-boat-label { font-size: 13px; top: -18px; }
.sc-truck, .sc-police { width: 9%; }
.sc-wh { font-size: 13px; }
.sc-pow { font-size: 24px; }
.sc-house { height: 120%; }
.scene.tiny .sc-ship-name, .scene.tiny .sc-boat-label, .scene.tiny .sc-sign, .scene.tiny .sc-wh { display: none; }
/* a vásznon kívüli felületi rétegek: olvasható méret, a jelenethez igazítva */
.sc-caption b { font-size: max(16px, 3.4cqw); }
.sc-caption small { font-size: max(10px, 1.2cqw); }
.sc-flycrate { width: 2cqw; height: 2cqw; }
.comic { max-width: 44cqw; }
.comic-portrait { width: max(40px, 5cqw); height: max(40px, 5cqw); }
.comic-bubble { font-size: max(11px, 1.15cqw); }

/* ---------- telefon, fekvő mód: cím balra, létra-menü / belépőpanel jobbra, görgetés nélkül ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .title-top { left: 3vw; top: 50%; transform: translateY(-50%); width: min(46vw, 110vh); }
  .ladder-wrap { left: auto; right: 3vw; transform: none; width: min(46vw, 420px); overflow: hidden; }
  .ladder { padding: 56px 0 0; }
  .rung { margin-bottom: 4px; padding: 0 12px; height: min(34px, calc((100dvh - 64px) / 10 - 4px)); display: flex; flex-direction: column; justify-content: center; font-size: 13px; line-height: 1.05; }
  .rung small { font-size: 9px; }
  .title-screen .auth { padding: 3vh 3vw 8px; margin: 0 3vw 0 auto; max-width: min(46vw, 400px); }
  .title-screen .auth .panel { padding: 10px 12px; }
}
/* rakpart-sávok: hátul a rendőrautó és a raktárak, elöl (a nézőhöz közelebb) a teherautó – kihajtáskor előttük halad el, nem beléjük */
.sc-house { bottom: 40%; z-index: 1; }
.sc-police { bottom: 52%; z-index: 2; width: 8.2%; }
.sc-truck { bottom: 10%; z-index: 3; }

/* ---------- menü: kovácsoltvas létra, gravírozott sárgaréz táblák ---------- */
.ladder.has-art { background: center top / 100% 100% no-repeat; }
.ladder.has-art .rail { display: none; }
.rung.has-art { background-color: transparent; background-size: 100% 100%; box-shadow: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .65)); transform-origin: 50% 0;
  color: #3a2408; font-family: var(--font-deco); letter-spacing: .14em; text-transform: uppercase; font-weight: 400;
  text-shadow: 0 1px 0 rgba(255, 238, 190, .75), 0 -1px 0 rgba(60, 35, 5, .55); padding-inline: 12%; }
.rung.has-art::before, .rung.has-art::after { display: none; }        /* a szegecsek a képen vannak */
.rung.has-art:hover:not(:disabled) { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .65)) brightness(1.12) saturate(1.1); }
.rung.has-art:disabled { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)) grayscale(.8) brightness(.7); opacity: 1; }
.rung.has-art small { color: #5a3d14; text-shadow: none; letter-spacing: .04em; text-transform: none; }
/* egyképes folyó-háttér: a rakpart fölötti teljes terület (0–76%); a külön vízréteg és városkép ilyenkor nem kell */
.scene.has-river .sc-sky { inset: 0 0 24% 0; background-size: cover; background-position: center 58%; }
.scene.has-river .sc-sky::after, .scene.has-river .sc-skyline, .scene.has-river .sc-water { display: none; }
.rung.has-art { aspect-ratio: 1266 / 197; height: auto; padding: 0 13%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  white-space: nowrap; font-size: clamp(12px, 1.5vw, 17px); line-height: 1.1; margin-bottom: 10px; }
.rung.has-art small { font-size: .62em; margin-top: 1px; }
@media (orientation: landscape) and (max-height: 520px) { .rung.has-art { aspect-ratio: auto; font-size: 11px; margin-bottom: 4px; } }
.ladder-wrap { width: min(540px, 92vw); }
.rung.has-art { font-size: clamp(13px, 1.9vw, 20px); width: 88%; }
@media (orientation: landscape) and (max-height: 520px) { .ladder-wrap { width: min(46vw, 420px); } .rung.has-art { font-size: 11px; } }
/* fekvő telefon: 10 sárgaréz tábla egymás alatt csak torzítva férne el → két oszlop, a tábla eredeti arányával */
@media (orientation: landscape) and (max-height: 520px) {
  .ladder { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 8px; align-content: center; min-height: 100%; padding: 50px 0 8px; }
  .ladder.has-art { background: none; }
  .rung.has-art { width: 100%; height: auto; aspect-ratio: 1266 / 197; margin: 0; font-size: clamp(9px, 1.45vw, 12px); padding: 0 11%; letter-spacing: .08em; }
  .rung.has-art small { display: none; }
}

/* ---------- menü: a szélesség ÉS a magasság szerint méretezve – egyik felbontáson se lógjon ki semmi ----------
   --tw: a villanykörtés cím szélessége (a magassága .42 × ennyi), --lw: a létra szélessége.
   Egy oszlop: 2vh + cím + 10 tábla (tábla magassága = lw × .88 × 197/1266) + 9 rés ≤ 100dvh.
   Alacsony fekvő ablakban (521–820 px, pl. 1366×768 laptop) két oszlop, hogy a táblák olvashatók maradjanak.
   A 520 px alatti fekvő telefonos elrendezés fent, külön szabályban van. */
@media (orientation: portrait), (min-height: 521px) {
  .title-screen { --tw: min(94vw, 71dvh); --lw: min(92vw, 38dvh); --gap: 1dvh; }
  .title-top { top: 2dvh; width: var(--tw); }
  .title-screen .auth { padding-top: calc(2dvh + var(--tw) * .42 + 12px); }
  .ladder-wrap { width: var(--lw); container-type: inline-size; overflow: hidden; }
  .ladder { padding: calc(2dvh + var(--tw) * .42 + 8px) 0 2dvh; }
  .rung.has-art { margin-bottom: var(--gap); font-size: 4.1cqw; letter-spacing: .12em; line-height: 1; }
  .rung.has-art small { font-size: .56em; margin-top: .25em; line-height: 1; letter-spacing: .02em; }
  .menu-user { top: max(8px, 1.2dvh); right: max(10px, 1.2vw); }
}
@media (orientation: landscape) and (min-height: 521px) and (max-height: 820px) {
  .title-screen { --lw: min(92vw, 112dvh); --gap: 8px; }
  .ladder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap) 10px; align-content: start; }
  .ladder.has-art { background: none; }
  .ladder .rail { display: none; }
  .rung.has-art { width: 100%; margin: 0; font-size: 2.05cqw; }
}
/* nagy felbontáson (1440p, 4K) a sarokban lévő pontszám-jelvények is nőjenek a menüvel együtt */
@media (min-height: 1300px) { .menu-user { zoom: 1.5; } }
@media (min-height: 1900px) { .menu-user { zoom: 2; } }

/* ---------- játékasztal PC-n: FIX 1600 × 900-as elrendezés, egyben méretezve ----------
   Az asztal belső elrendezése mindig ugyanaz (nem nyúlik, nem nyomódik össze), az egészet a display.js arányosan
   az ablakhoz méretezi (--gk): a felbontás adja a maximumot (kitölti az ablakot torzítás nélkül), a minimum 0,55×.
   Felosztás: fent a fejléc és a játékosok (8 játékosig egy sorban); bal felül a kikötő, alatta balra a pakli és a
   fő nyersanyag-kártyák egy sorban; jobbra a ládák 2 × 4-es rácsban; lent balra a teendő, jobbra a kéz; mellette a csevegés.
   (A 980 px-nél keskenyebb és az 520 px-nél alacsonyabb – telefonos – nézetnek saját elrendezése van.) */
@media (min-width: 981px) and (min-height: 521px) {
  html:has(body .game), body:has(.game) { overflow: hidden; }
  body .game { position: fixed; left: 50%; top: 50%; width: 1600px; height: 900px; min-height: 0; margin: 0;
    transform: translate(-50%, -50%) scale(var(--gk, 1)); transform-origin: 50% 50%;
    grid-template-columns: 896px 360px 320px; grid-template-rows: 50px 104px 392px minmax(0, 1fr) 170px; gap: 8px; padding: 0;
    grid-template-areas: "hud hud side" "opps opps side" "scene bags side" "main bags side" "me me side"; }
  .game .scene { width: 896px; height: 392px; max-width: none; aspect-ratio: auto; margin: 0; align-self: start; justify-self: start; }
  /* játékosok: fejlécként, egy sorban, egyforma szélesen */
  .game .opps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; overflow: visible; padding: 11px 0 0; }
  .game .opp { min-width: 0; padding: 4px 8px; }
  .game .opp .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .game .opp .stats { flex-wrap: nowrap; overflow: hidden; gap: 6px; }
  /* lent: balra a teendő + gombok, jobbra a kéz */
  .game .me { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bar hand" "rest hand" "stand hand"; column-gap: 12px; row-gap: 4px; align-items: center; min-height: 0; overflow: hidden; }
  .game .me .actionbar { grid-area: bar; min-width: 0; margin: 0; }
  .game .me .hand-rest { grid-area: rest; }
  .game .me .standrow { grid-area: stand; margin: 0; }
  .game .me .hand { grid-area: hand; max-width: 760px; align-self: end; }
  .game .me .hint { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* a piac elemei közvetlenül a rácsba kerülnek (a játék végi eredménylista kivételével) */
  .game .dock:not([data-phase="ended"]) { display: contents; }
  .game .dock:not([data-phase="ended"]) > h3 { display: none; }
  .game .dock[data-phase="ended"] { grid-area: auto; grid-row: 3 / 5; grid-column: 1 / 3; min-height: 0; }
  /* fő nyersanyag-kártyák: pakli + legfeljebb 6 kártya egy sorban, eredeti arányban */
  .game .center-row { grid-area: main; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 8px; min-height: 0; height: 100%; }
  .game .maincard, .game .center-row .deckpile { flex: 0 1 auto; height: 100%; width: auto; aspect-ratio: 158 / 196; min-width: 0; max-width: 158px; }
  .game .maincard .mh { min-height: 0; padding: 3px 6px; font-size: 12px; }
  .game .maincard .mart { height: 32%; min-height: 0; }
  .game .maincard .mb { padding: 3px 6px; font-size: 10.5px; line-height: 1.3; }
  .game .maincard .vp { padding: 1px; font-size: 12px; }
  /* ládák: jobbra, 2 oszlop × 4 sor */
  .game .bags { grid-area: bags; margin: 0; min-height: 0; overflow-y: auto; align-content: start; padding: 8px; scrollbar-width: thin;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    border-radius: var(--radius); background: radial-gradient(ellipse at 50% 0, rgba(31, 66, 112, .55), rgba(12, 21, 34, .6)); border: 1px solid rgba(143, 163, 189, .2); }
  .game .bag { padding: 6px; border-radius: 8px; min-width: 0; }
  .game .bag-title { font-size: 11px; margin-bottom: 3px; }
  .game .bag .crate { height: 28px; margin-bottom: 4px; font-size: 11px; }
  /* a bélyegző (TISZTA / ÁTENGEDVE / ELKOBOZVA) teljes egészében a láda csíkján belül */
  .game .bag .stamp { top: 50%; font-size: 13px; line-height: 1; padding: 2px 7px; max-width: 92%; white-space: nowrap; transform: translate(-50%, -50%) rotate(-4deg); }
  .game .bag .stamp.fresh { animation-name: stamp-flat; }
  .game .bag .crate::before, .game .bag .crate::after { height: 2px; }
  .game .bag .crate::before { top: 4px; } .game .bag .crate::after { bottom: 4px; }
  .game .bag .decl { font-size: 12px; flex-wrap: wrap; gap: 2px 6px; }
  .game .bag .revealed { font-size: 11px; margin-top: 3px; }
  .game .bag .agent-actions { flex-wrap: wrap; gap: 3px; margin-top: 4px; }
  .game .bag .agent-actions .btn { flex: 1 1 100%; min-width: 0; padding: 2px 6px; font-size: 12px; min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .game .bag .decl > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .game .deal .btn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .game .deal { font-size: 11px; padding: 3px 5px; margin-top: 4px; gap: 3px; }
  .game .deal .btn { padding: 2px 7px; font-size: 11px; min-height: 0; }
  .game .side { min-height: 0; }
  /* a ládák helye minden körben keretes panel (ládák nélküli körben is), hogy az elrendezés ne ugráljon */
  body .game::after { content: attr(data-bags-label); grid-area: bags; z-index: 0; pointer-events: none; padding: 10px 12px;
    font-family: var(--font-deco); font-size: 13px; letter-spacing: .08em; color: rgba(233, 212, 160, .35);
    border-radius: var(--radius); background: radial-gradient(ellipse at 50% 0, rgba(31, 66, 112, .45), rgba(12, 21, 34, .5)); border: 1px solid rgba(143, 163, 189, .2); }
  .game .bags { position: relative; z-index: 1; }
  /* az ajánlat-űrlap a kéz sávja fölött, lebegő panelként nyílik (a fix magasságú sávba nem férne be) */
  .game .me { overflow: visible; position: relative; z-index: 5; }
  .game #offerbox { position: relative; }
  .game #offerbox > .panel { position: absolute; left: 0; bottom: calc(100% + 6px); width: 560px; max-height: 640px; overflow-y: auto; margin: 0 !important;
    z-index: 30; box-shadow: 0 -10px 40px rgba(0, 0, 0, .7); border: 1px solid rgba(212, 174, 79, .5); background: #0f1b2c; }
}
@keyframes stamp-flat { from { transform: translate(-50%, -50%) rotate(-4deg) scale(3); opacity: 0; } }

/* ---------- váróterem és lobbi PC-n: ugyanúgy fix 1600 × 900-as felület, egyben méretezve (--gk) ----------
   A csevegés kitölti a maradék magasságot (az alja mindig látszik); nagy ablakban sem nyúlik szét a felület. */
@media (min-width: 981px) and (min-height: 521px) {
  body:has(#app > .room), body:has(#app > .lobby) { overflow: hidden; }
  #app:has(> .room), #app:has(> .lobby) { position: fixed; left: 50%; top: 50%; width: 1600px; height: 900px; min-height: 0;
    transform: translate(-50%, -50%) scale(var(--gk, 1)); transform-origin: 50% 50%; display: flex; flex-direction: column; overflow: hidden; }
  #app > .topbar { position: relative; flex: none; }
  #app > .room { flex: 1; min-height: 0; width: 1000px; max-width: none; margin: 0 auto; padding: 20px 0; display: flex; flex-direction: column; }
  #app > .room > .panel:first-child { flex: none; }
  #app > .room > .chatbox { flex: 1; min-height: 0; height: auto; }
  #app > .lobby { flex: 1; min-height: 0; width: 1200px; max-width: none; overflow-y: auto; scrollbar-width: thin; }
}