#vaszonDoboz {
position: relative; width: 100%; aspect-ratio: 16 / 10;
max-height: min(70vh, 640px); min-height: 260px;
border-radius: var(--radius-sm); overflow: hidden;
background: var(--bg-deep); border: 1px solid var(--border-soft);
touch-action: pan-y;
}
#vaszon { display: block; width: 100%; height: 100%; }
#vaszonDoboz .sugo {
position: absolute; left: 12px; bottom: 10px; margin: 0;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
text-transform: uppercase; pointer-events: none;
color: rgba(255,255,255,.78); text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
#vaszonDoboz .nagyit { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
#vaszonDoboz .nagyit .btn { padding: 4px 10px; background: var(--bg-card); }
.btn.ikon { display: inline-flex; align-items: center; justify-content: center;
padding: 4px 9px; line-height: 0; }
#teljesGomb .be { display: none; }
#teljesGomb[aria-pressed="true"] .ki { display: none; }
#teljesGomb[aria-pressed="true"] .be { display: block; }
#modellKartya:fullscreen        { --teljes: 1; }
#modellKartya:-webkit-full-screen { --teljes: 1; }
#modellKartya.teljes            { --teljes: 1; position: fixed; inset: 0; z-index: 60;
overflow: auto; -webkit-overflow-scrolling: touch; }
body.teljes-nyit { overflow: hidden; }
#modellKartya:fullscreen, #modellKartya.teljes,
#modellKartya:-webkit-full-screen {
background: var(--bg); border: 0; border-radius: 0;
padding: 10px 14px 14px; display: flex; flex-direction: column;
}
#modellKartya:fullscreen #vaszonDoboz,
#modellKartya:-webkit-full-screen #vaszonDoboz,
#modellKartya.teljes #vaszonDoboz {
flex: 1 1 auto; aspect-ratio: auto; max-height: none; min-height: 150px;
}
#modellKartya:fullscreen #allapot,
#modellKartya:-webkit-full-screen #allapot,
#modellKartya.teljes #allapot { flex: none; }
#modellKartya:fullscreen #vaszonDoboz          { min-height: 58vh; }
#modellKartya:-webkit-full-screen #vaszonDoboz { min-height: 58vh; }
#modellKartya.teljes #vaszonDoboz              { min-height: 58vh; }
@media (orientation: landscape) and (max-height: 540px) {
#modellKartya:fullscreen, #modellKartya:-webkit-full-screen, #modellKartya.teljes {
flex-direction: row; gap: 14px; padding: 10px 12px;
}
#modellKartya:fullscreen #vaszonDoboz,
#modellKartya:-webkit-full-screen #vaszonDoboz,
#modellKartya.teljes #vaszonDoboz { min-height: 0; height: 100%; flex: 1 1 62%; }
#modellKartya:fullscreen .teljes-oszlop,
#modellKartya:-webkit-full-screen .teljes-oszlop,
#modellKartya.teljes .teljes-oszlop {
flex: 0 0 min(340px, 38%); overflow-y: auto; padding-right: 4px;
}
#modellKartya.teljes .vsor, #modellKartya:fullscreen .vsor { margin: 8px 0; }
}
.vsor { display: grid; grid-template-columns: 92px 1fr auto; align-items: center;
gap: 12px; margin: 10px 0; }
.vsor > label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em;
text-transform: uppercase; color: var(--fg-mute); }
.vsor input[type=range] { width: 100%; accent-color: var(--accent); height: 26px; }
.vsor .ertek { font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim);
font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }
.vsor .gombsor { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 2 / -1; }
.vsor .gombsor .btn.aktiv { background: var(--accent-dim); color: var(--fg); border-color: var(--accent-dim); }
#allapot { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-mute);
margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft);
min-height: 34px; white-space: pre-wrap;
font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
@media (max-width: 980px) {
#modell { display: flex; flex-direction: column; padding-top: 26px; }
#modell > .sec-head { order: 2; margin: 20px 0 0; }
#modell > .card     { order: 1; }
#modell > .legend   { order: 3; margin-top: 14px; }
.sb-foot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.sb-foot .controls { margin-bottom: 0; }
.sb-foot > .mono { display: none; }
}
@media (max-width: 640px) {
#vaszonDoboz { aspect-ratio: 1 / 1; max-height: 56vh; min-height: 280px; }
.vsor { grid-template-columns: 1fr auto; gap: 8px 10px; margin: 12px 0; }
.vsor > label { grid-column: 1 / -1; margin-bottom: -6px; }
.vsor .gombsor { grid-column: 1 / -1; }
#allapot { font-size: 11px; }
}