/* ---------- מסך משחק (טאב) ---------- */
.mvh { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background:
  linear-gradient(180deg, rgba(4, 9, 15, .8), rgba(4, 9, 15, .2)), repeating-linear-gradient(90deg, #0d4b2a 0 40px, #0f5630 40px 80px); }
.mvl { flex: 1; font-weight: 600; } .mvs { display: flex; align-items: center; gap: 16px; } .mvr { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.tm { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; text-shadow: 0 1px 6px #000; } .sc { font-size: 30px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; text-shadow: 0 0 18px rgba(25, 230, 140, .4); }
.live-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; padding: 2px 6px; border-radius: 3px; background: var(--red); color: #fff; }
.crest { display: inline-grid; place-items: center; flex: none; border-radius: 50%; border: 2px solid var(--c); background: #08111b; color: var(--tx); font-weight: 800; letter-spacing: -.02em; }

/* תפריט כפתורים לרוחב: כל כפתור = נושא אחד (במקום גלילה למטה) */
.mvmenu { flex: none; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r); background: #050d16; overflow-x: auto; }
.mvb { flex: 1; min-width: 96px; padding: 9px 12px; border-radius: 4px; color: var(--mut); text-align: center; font-weight: 600; white-space: nowrap; }
.mvb:hover { color: var(--tx); background: rgba(255, 255, 255, .03); } .mvb.on { background: rgba(34, 211, 238, .13); color: var(--cy); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .4); }
.mvbody { flex: 1; min-height: 0; display: flex; }
.mv-g { flex: 1; min-height: 0; display: grid; gap: 10px; } .mv-g.g2 { grid-template-columns: 1fr 1fr; }
.box { min-height: 0; min-width: 0; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, var(--panel2), var(--panel)); display: flex; flex-direction: column; gap: 10px; } .box.wide1 { flex: 1; }
.bt { font-weight: 700; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .bt.sm { font-size: 11.5px; font-weight: 600; color: var(--mut); } .bt .mut { font-weight: 400; }
.chartbox { flex: 1; min-height: 100px; display: flex; } .chartbox .chart { height: 100%; min-height: 100px; } .chart { width: 100%; display: block; } .chart .grid { stroke: rgba(255, 255, 255, .07); }

.bnrow { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; } .bn small { display: block; color: var(--mut); } .bn:last-child { text-align: right; }
.bn b { font-size: 44px; line-height: 1; font-weight: 800; } .bn.hot b { color: var(--em); text-shadow: 0 0 16px rgba(25, 230, 140, .4); } .bn.warm b { color: var(--cy); } .bn.cool b { color: var(--tx); }
.mbar { height: 9px; border-radius: 5px; background: var(--red); overflow: hidden; } .mbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--em), #12b873); box-shadow: 0 0 10px var(--em); transition: width .6s; }

.tbl { width: 100%; border-collapse: collapse; } .tbl th, .tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 12px; } .tbl th { color: var(--mut); font-size: 11px; } .tbl .sum td { font-weight: 700; border-bottom: 0; }
.ccrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cc { display: grid; gap: 6px; } .cc small { color: var(--mut); } .cc b { font-size: 52px; line-height: 1; font-weight: 800; } .cc.hot b { color: var(--em); } .cc.warm b { color: var(--cy); } .cc span { font-size: 11px; }
.cbar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; } .cbar i { display: block; height: 100%; background: var(--cy); transition: width .5s; } .cc.hot .cbar i { background: var(--em); }
.legend { margin-left: auto; font-size: 11px; color: var(--mut); font-weight: 400; } .legend i { display: inline-block; width: 8px; height: 3px; margin: 0 3px 2px 6px; } .lg1 { background: var(--bl); } .lg2 { background: var(--red); }

.statsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 36px; align-content: start; }
.srow { display: grid; grid-template-columns: 56px 1fr 56px; gap: 10px; align-items: center; font-size: 14px; } .srow b:last-child { text-align: right; } .lbl { text-align: center; font-size: 11.5px; color: #cfe3f3; }
.bar { display: flex; gap: 2px; height: 5px; margin-top: 3px; } .bar i { background: var(--em); border-radius: 2px; } .bar i.b { background: var(--red); }
.tl { list-style: none; padding: 0; } .tl li { display: grid; grid-template-columns: 70px 34px 16px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); } .tl li i { font-style: normal; color: var(--em); text-align: center; } .tl li.signal i, .tl li.signal span:last-child { color: var(--cy); }

@media (max-width: 900px) {
  .mvh { flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; } .mvl { flex: none; width: 100%; font-size: 11px; } .mvs { gap: 8px; } .tm { font-size: 12px; flex-direction: column; gap: 3px; text-align: center; } .sc { font-size: 24px; } .mvr { flex: none; margin-left: auto; }
  .mvb { min-width: 84px; padding: 8px; } .mv-g.g2, .ccrow, .statsgrid { grid-template-columns: 1fr; } .mv-g.g2 { grid-template-rows: auto 1fr; overflow: auto; } .bn b { font-size: 34px; } .cc b { font-size: 38px; }
}