/* Wall scoreboard and LGE CC6 console replica (fixed hardware colours in both themes). */
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; background: #0b0d10; color: #e9ecef; border-radius: 16px; padding: 16px 20px; box-shadow: var(--shadow), inset 0 0 0 3px #22262c; transition: box-shadow .2s; }
.scoreboard.siren { box-shadow: var(--shadow), inset 0 0 0 3px #ffb703, 0 0 24px rgba(255, 183, 3, .5); }
.sb-side { display: grid; justify-items: center; gap: 4px; }
.sb-team { font: 800 .9rem var(--font); letter-spacing: .2em; color: #adb5bd; }
.sb-score, .sb-time { font: 700 clamp(2.4rem, 7vw, 4rem)/1 var(--mono); color: #ff4d3a; text-shadow: 0 0 12px rgba(255, 77, 58, .55); letter-spacing: .04em; }
.sb-time { color: #ffd43b; text-shadow: 0 0 12px rgba(255, 212, 59, .45); }
.sb-time.run { color: #69db7c; text-shadow: 0 0 12px rgba(105, 219, 124, .45); }
.sb-mid { display: grid; justify-items: center; gap: 6px; }
.sb-row { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: #adb5bd; }
.sb-row b { font: 700 1.2rem var(--mono); color: #ffa94d; }
.sb-lamp { width: 12px; height: 12px; border-radius: 50%; background: #3b2a12; box-shadow: inset 0 0 0 1px #5c4320; }
.sb-lamp.on { background: #ff922b; box-shadow: 0 0 10px #ff922b; }
.sb-dots { display: inline-flex; gap: 4px; }
.sb-dots i { width: 9px; height: 9px; border-radius: 50%; background: #343a40; }
.sb-dots i.on { background: #ffd43b; box-shadow: 0 0 6px #ffd43b; }
.sb-poss { display: flex; gap: 8px; align-items: center; color: #6c757d; font-size: .75rem; }
.sb-poss span { font-size: 1rem; color: #343a40; }
.sb-poss span { display: inline-flex; }
.sb-poss span.on { color: #ff4d3a; filter: drop-shadow(0 0 5px #ff4d3a); }

.lge { margin-top: 14px; background: linear-gradient(180deg, #1c1f24, #121417); border-radius: 22px; padding: 18px; color: #1b1f27; }
.lge > * { background: #e9ecef; }
.lge-top, .lge-body, .lge-brand { background: #e8ebee; }
.lge-top { display: grid; grid-template-columns: 90px 1fr 110px; gap: 12px; align-items: center; padding: 14px 16px 8px; border-radius: 12px 12px 0 0; }
.lge-model { display: grid; font: 600 .72rem var(--font); color: #343a40; line-height: 1.2; }
.lge-screen { min-width: 0; }
.lge-heads, .lge-foot { display: flex; justify-content: space-between; font: 700 .62rem var(--font); color: #343a40; padding: 0 6px; gap: 6px; }
.lge-foot { justify-content: flex-end; gap: 18px; }
.lge-lcd { background: linear-gradient(180deg, #9db36a, #8aa35a); border: 3px solid #3d4436; border-radius: 6px; padding: 8px 10px; margin: 4px 0; font: 600 clamp(.7rem, 1.6vw, 1rem)/1.45 var(--mono); color: #1d2914; white-space: pre; overflow: hidden; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
.lcd-line.small { font-size: .78em; opacity: .85; }
.lge-right { display: grid; gap: 8px; justify-items: center; }
.lge-logo { font: 900 1.4rem var(--font); background: linear-gradient(90deg, #e03131, #2f9e44, #1c7ed6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lge-body { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 8px 16px 6px; }
.lge-side { display: grid; gap: 6px; align-content: start; }
.tagA, .tagB { font: 800 .74rem var(--font); padding: 4px 10px 4px 6px; clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%); }
.tagA { background: #fcc419; }
.tagB { background: #fd7e14; color: #fff; }
.lge-grid { display: grid; grid-template-columns: 22px repeat(7, minmax(0, 1fr)); grid-auto-rows: auto; gap: 3px 8px; align-items: end; }
.rowlab { font: 800 1.2rem var(--font); color: #343a40; align-self: center; }
.lge-head { font: 700 .58rem/1.1 var(--font); color: #343a40; text-align: center; padding-top: 6px; letter-spacing: .02em; }
.lge-key { position: relative; min-height: 48px; border: 0; border-radius: 6px; display: grid; place-content: center; text-align: center; font: 800 .8rem/1.05 var(--font); cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .25); transition: transform .06s; color: #1b1f27; padding: 3px; }
.lge-key:active, .lge-key .half:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.lge-key small { font: 600 .55rem var(--font); opacity: .85; }
.lge-key.y { background: #fcc419; }
.lge-key.o { background: #f76707; color: #fff; }
.lge-key.c { background: #4dabf7; }
.lge-key.g { background: #82c91e; }
.lge-key.r { background: #e03131; color: #fff; }
.lge-key.last { outline: 3px solid #1c7ed6; outline-offset: 2px; }
.lge-key.never, .lge-key .half.never { filter: grayscale(.85) brightness(.92); }
.lge-key.never::after, .lge-key .half.never::after { content: "✕"; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #c92a2a; color: #fff; font: 800 .65rem/18px var(--font); }
.lge-key.split { display: grid; grid-template-rows: 1fr 1fr; padding: 0; overflow: visible; }
.lge-key .half { position: relative; border: 0; font: 800 .66rem var(--font); cursor: pointer; color: #1b1f27; }
.lge-key .half:first-child { border-radius: 6px 6px 0 0; }
.lge-key .half:last-child { border-radius: 0 0 6px 6px; }
.lge-key .half.c { background: #4dabf7; }
.lge-key .half.g { background: #82c91e; }
.lge-key .half.r { background: #e03131; color: #fff; }
.lge-key.siren { min-width: 90px; }
.lge-key.power { min-height: 44px; }
.lge-brand { text-align: right; font: 700 .7rem var(--font); letter-spacing: .12em; padding: 4px 18px 12px; border-radius: 0 0 12px 12px; color: #343a40; }
.lge-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; margin-top: 12px; }
.lge-controls select { width: auto; }

@media (max-width: 760px) {
  .lge { padding: 8px; border-radius: 14px; }
  .lge-top { grid-template-columns: 1fr; }
  .lge-model, .lge-logo { display: none; }
  .lge-right { justify-items: stretch; }
  .lge-body { grid-template-columns: 1fr; padding: 8px; }
  .lge-side { grid-auto-flow: column; justify-content: start; }
  .lge-grid { grid-template-columns: 16px repeat(7, minmax(0, 1fr)); gap: 2px 3px; }
  .lge-key { min-height: 44px; font-size: .66rem; }
  .lge-key small { display: none; }
  .lge-head { font-size: .5rem; }
  .lge-heads { font-size: .5rem; }
  .scoreboard { padding: 12px; gap: 6px; }
}