@font-face { font-family: 'Bebas Neue'; src: url('../fonts/BebasNeue-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../fonts/DMMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #07080c;
  --surface: #0e1017;
  --surface2: #1a1f2c;
  --border: #29303f;
  --accent: #d4f53a;
  --positiv: #3af5b4;
  --negativ: #ff3f5e;
  --text: #f3f4f1;
  --muted: #7e828b;
  --dim: #b9bbc2;
  --row-alt: #0e1017;
  --coral: #fa9278;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; min-height: 100vh; touch-action: manipulation; }
html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; overscroll-behavior: none; }
* { touch-action: manipulation; }
button { caret-color: transparent; -webkit-user-select: none; user-select: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
.hero-eyebrow { color: var(--accent); font-size: .7rem; font-weight: 600; letter-spacing: .18em; line-height: 1.2; text-transform: uppercase; }
.sh-title { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; font-weight: 400; letter-spacing: .05em; }
.sh-meta { color: var(--muted); font-size: .7rem; }
.widget-label { color: var(--dim); font-family: 'DM Mono', monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .75rem; }
.mc-score-main { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; letter-spacing: .05em; color: var(--text); line-height: 1; }
.primary-button, .secondary-button { min-height: 38px; border-radius: 999px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: .85rem; padding: .5rem .85rem; }
.primary-button { border: 1px solid var(--accent); background: var(--accent); color: var(--bg); font-weight: 600; }
.secondary-button { border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 500; transition: all .15s; white-space: nowrap; }
.secondary-button:hover, .secondary-button:focus-visible { border-color: var(--accent); color: var(--accent); }
.match-scope-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.04); }
.match-scope-toggle button { border: 0; border-radius: 999px; background: transparent; color: var(--dim); cursor: pointer; font: 600 .82rem 'DM Sans', sans-serif; padding: .35rem .75rem; }
.match-scope-toggle button.active { background: var(--surface2); color: var(--accent); }
.match-scope-toggle button:disabled { cursor: default; opacity: .45; }
.modal-close-button { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 50%; background: rgba(7,8,12,.86); color: var(--text); cursor: pointer; padding: 0 0 4px; font-size: 1.3rem; font-weight: 300; }
.modal-close-button:hover { color: var(--accent); border-color: var(--accent); }
table.rt th { text-align: right; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding: 10px 16px; border-bottom: 1px solid var(--border); }
table.rt td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: right; }
table.rt tr:last-child td { border-bottom: none; }
table.rt tbody tr:nth-child(even) { background: var(--row-alt); }
table.rt tbody tr:hover { background: var(--surface); }
html, body { width: 100%; height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
html { scrollbar-gutter: auto; }
body { font-size: 14px; line-height: 1.6; }
button, select, a { -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.pong-shell { max-width: 1160px; margin: auto; height: 100vh; height: 100dvh; min-height: 440px; padding: max(16px, env(safe-area-inset-top)) 28px max(16px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; }
.pong-header { display: grid; grid-template-columns: 1fr; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.pong-header h1 { justify-self: start; }
h1.sh-title { font-size: clamp(32px, 4vw, 48px); line-height: 1; }
h1 span { color: var(--accent); }
.game-layout { max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 470px) minmax(140px, 1fr); gap: 32px; min-height: 0; }
.field-notes { padding-top: 58px; max-width: 215px; }
.touch-instruction { display: none; }
.right-notes { justify-self: end; }
.eyebrow { margin-bottom: 12px; }
h2.sh-title { line-height: 1.1; margin-bottom: 12px; }
.field-notes p:not(.eyebrow) { margin-bottom: 22px; }
.field-notes .note { color: var(--accent) !important; border-top: 1px solid var(--border); padding-top: 17px; }
.micro { font-size: 9px; }
.key-grid { display: grid; grid-template-columns: repeat(3, 27px); gap: 4px; margin: 28px 0 18px; }
.key-grid span { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); text-align: center; }
.key-grid span:first-child { grid-column: 2; }
.key-grid span:nth-child(2) { grid-column: 1; }
.arena { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) 32px; gap: 9px; }
.scoreboard { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 5px 10px; }
.team-label { display: flex; align-items: center; gap: 13px; font-size: 10px; letter-spacing: 1px; }
.team-label strong { color: inherit; font-size: 36px; line-height: 1.2; font-weight: 400; }
.human-label { color: var(--accent); }
.computer-label { color: var(--coral); }
.score-goal { text-align: center; line-height: 1.2; }
.score-goal > span { display: block; white-space: nowrap; }
#game-time { font-variant-numeric: tabular-nums; }
.court-wrap { position: relative; min-height: 0; }
canvas { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; touch-action: none; }
.countdown-display { position: absolute; inset: 50% auto auto 50%; z-index: 2; transform: translate(-50%, -50%); pointer-events: none; color: rgba(232, 243, 106, .92); font: 400 clamp(72px, 18vw, 128px)/1 'Bebas Neue', sans-serif; text-shadow: 0 3px 0 rgba(16, 29, 41, .7), 0 0 24px rgba(232, 243, 106, .28); }
.lob-status { position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); padding: 4px 8px; border: 1px solid currentColor; border-radius: 999px; background: rgba(7,8,12,.86); font: 600 9px 'DM Mono', monospace; letter-spacing: .08em; pointer-events: none; white-space: nowrap; }
.lob-status-human { bottom: 15%; color: var(--accent); }
.lob-status-opponent { top: 8px; color: var(--coral); }
.game-overlay { max-height: 100%; overflow-y: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(240px, 94%); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 16px 48px #0006; padding: 23px 16px; text-align: center; }
.game-overlay h2 { color: var(--accent); margin-bottom: 0px; font-size: 26px; }
.game-overlay p { font-size: 13px; margin: 12px 0; }
.game-overlay #overlay-text { margin: 2px 0; }
.game-overlay .eyebrow { font-size: 9px; margin: 0 0 12px 0; }
.game-overlay .primary-button, .game-overlay .secondary-button { width: 100%; padding: 9px 18px; justify-content: center; }
.game-overlay .secondary-button { display: flex; margin: 10px 0 0; }
.overlay-content, .overlay-actions, .online-setup { display: grid; gap: 10px; width: 100%; }
.game-overlay.game-over-actions .overlay-content { gap: 18px; }
.game-overlay.game-over-actions #enter-win:not([hidden]),
.game-overlay.game-over-actions #leaderboard-after-game,
.game-overlay.game-over-actions #game-over-back { margin-top: 12px; }
.overlay-divider { margin: 16px 0; border-top: 1px solid var(--border); }
.game-overlay .difficulty-choice { width: 100%; margin: 4px 0 0; }
.game-overlay .match-scope-toggle { display: flex; width: 100%; }
.game-overlay .match-scope-toggle button { flex: 1; }
.status { text-align: center; align-self: center; font-size: 12px; line-height: 1.35; }
.height-demo { height: 55px; position: relative; margin: 24px 0 14px; }
.height-demo span { position: absolute; width: 9px; height: 9px; background: var(--accent); top: 0; left: 23px; box-shadow: 2px 2px #465635; }
.height-demo i { position: absolute; height: 32px; border-left: 1px dashed #738393; left: 27px; top: 13px; }
.height-demo b { position: absolute; width: 14px; height: 4px; background: #445467; left: 20px; bottom: 1px; }
.controls { border-top: 1px solid var(--border); display: flex; gap: 24px; align-items: center; justify-content: center; padding-top: 12px; position: relative; }
.controls, .controls * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.controls { touch-action: manipulation; }
.power-display { width: 190px; }
.power-display label { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .5px; }
#power-label { color: var(--accent); }
.power-display.danger #power-label { color: var(--coral); }
meter { width: 100%; height: 9px; display: block; margin-top: 5px; }
meter::-webkit-meter-bar { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
meter::-webkit-meter-optimum-value { background: var(--accent); }
meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--coral); }
.action-buttons { display: flex; gap: 7px; align-items: center; }
.playback-settings { display: flex; gap: 7px; align-items: center; }
.audio-toggle { gap: 6px; padding-inline: 10px; white-space: nowrap; }
.audio-toggle svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.audio-toggle[aria-pressed="true"] .mute-mark,
.audio-toggle[aria-pressed="false"] .sound-waves { display: none; }
.fps-toggle { width: 72px; justify-content: center; white-space: nowrap; }
.mobile-help { display: none; }
.mobile-menu-button { display: none; }
@media (max-height: 690px) and (min-width: 801px) { .field-notes { padding-top: 20px; } .field-notes p:not(.eyebrow) { margin-bottom: 12px; } .key-grid { margin: 12px 0; } .height-demo { margin: 8px 0; } }
@media (max-width: 800px) {
  .pong-shell { padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); gap: 8px; }
  .pong-header { padding-bottom: 9px; }
  h1.sh-title { font-size: 32px; }
  .field-notes { display: none; }
  .game-layout { grid-template-columns: minmax(0, 1fr); width: min(100%, 480px); justify-self: center; }
  .arena { gap: 5px; grid-template-rows: auto minmax(0, 1fr) 28px; }
  .scoreboard { padding: 3px 10px; }
  .team-label strong { font-size: 26px; }
  .controls { gap: 12px; flex-wrap: wrap; padding-top: 8px; }
  .power-display { width: 140px; }
  .mobile-help { display: block; font-size: 10px; }
  .mobile-help summary { list-style: none; padding: 8px 7px; min-height: 36px; font-size: 9px; line-height: 18px; }
  .mobile-help summary::-webkit-details-marker { display: none; }
}
@media (pointer: coarse), (max-width: 800px) {
  .power-display { width: 105px; }
  .controls { gap: 9px; }
  .action-buttons { flex-wrap: wrap; max-width: 150px; gap: 5px; }
  .action-buttons button, .action-buttons select { padding: 7px 9px; }
}
@media (max-width: 360px) { h1.sh-title { font-size: 28px; } .back-link { font-size: 11px; } .power-display { width: 83px; } .power-display label { font-size: 7px; } .action-buttons { max-width: 128px; } .action-buttons button { font-size: 9px; padding: 7px; } #fps { width: 64px; } .mobile-help summary { font-size: 8px; padding-inline: 4px; } }
@media (max-height: 520px) and (orientation: landscape) {
  .pong-shell { min-height: 300px; grid-template-columns: minmax(0, 1fr) 160px; gap: 6px 15px; }
  .pong-header { grid-column: 1 / -1; }
  .game-layout { grid-column: 1; grid-row: 2 / 4; }
  .controls { grid-column: 2; grid-row: 2 / 4; flex-direction: column; border-top: 0; justify-content: center; }
  .controls .power-display { width: 100%; max-width: 150px; }
  .action-buttons { flex-wrap: wrap; max-width: 150px; }
  .field-notes { display: none; } .game-layout { grid-template-columns: 1fr; }
  .game-overlay { padding: 9px; } .game-overlay h2 { font-size: 20px; margin: 3px; } .game-overlay p { margin: 6px; } .game-overlay .eyebrow { display: none; }
}

@media (pointer: coarse), (max-width: 800px) {
  .controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-top: 6px; }
  .controls .power-display { width: 100%; max-width: 105px; min-width: 0; }
  .controls > .action-buttons { display: none; }
  .mobile-menu-button { display: inline-flex; justify-self: end; }
  .game-menu { box-sizing: border-box; width: min(240px, calc(100vw - 28px)); min-width: min(240px, calc(100vw - 28px)); max-width: min(320px, calc(100vw - 28px)); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .controls { display: flex; }
  .mobile-menu-button { align-self: center; }
}
.game-menu { margin: auto; width: min(320px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); padding: 24px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; overflow: auto; overscroll-behavior: contain; }
.game-menu::backdrop { background: rgba(3,4,8,.82); backdrop-filter: blur(6px); }
.game-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.game-menu-header h2 { margin: 0; }
.game-menu .modal-close-button { position: static; flex-shrink: 0; }
.action-divider { display: none; }
.game-menu .action-buttons { display: grid; grid-template-columns: 1fr; max-width: none; gap: 12px; }
.game-menu .action-divider { display: block; border-top: 1px solid var(--border); margin: 4px 0; }
.game-menu .playback-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.game-menu .audio-toggle { gap: 2px; padding-inline: 3px; }
.game-menu .audio-toggle svg { width: 13px; height: 13px; flex-basis: 13px; }
.game-menu .action-buttons button, .game-menu .mobile-help summary { width: 100%; font-size: .85rem; justify-content: center; }
.game-menu .audio-toggle, .game-menu .fps-toggle { font-size: .85rem !important; }
.game-menu .mobile-help { display: block; }
.game-menu .mobile-help summary { display: flex; list-style: none; }
.game-menu .mobile-help summary::-webkit-details-marker { display: none; }
.game-menu .mobile-instructions { display: grid; gap: 24px; padding-top: 24px; }
.game-menu .field-notes { display: block; max-width: none; padding: 0; justify-self: stretch; }
.game-menu .field-notes + .field-notes { border-top: 1px solid var(--border); padding-top: 24px; }
.game-menu .field-notes .sh-meta { font-size: 1rem; }
.game-menu .field-notes .micro { font-size: .75rem; }
.game-menu .field-notes p:last-child { margin-bottom: 0; }
.game-menu .desktop-instruction, .game-menu .key-grid { display: none; }
.game-menu .touch-instruction { display: block; }
@media (pointer: coarse) and (min-width: 801px) {
  .game-layout { grid-template-columns: minmax(0, 470px); justify-content: center; }
}

/* The leaderboard occupies the page content, without a dialog or a second game loop. */
.pong-shell.show-leaderboard { grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.leaderboard-panel { min-height: 0; overflow: auto; padding: 8px 4px 24px; }
.leaderboard-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.leaderboard-heading h2.sh-title { margin: 0; }
.pong-win-form { max-width: 440px; display: grid; gap: 14px; margin-top: 24px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.pong-win-form label { font-size: .85rem; color: var(--dim); }
.pong-win-form input { width: 100%; min-width: 0; padding: 10px 12px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.winner-name-field { position: relative; }
.pong-win-form .winner-name-field input { padding-right: 58px; }
.pong-win-form input[aria-invalid="true"] { border-color: var(--negativ); }
.winner-name-count { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--dim); font-size: .75rem; font-variant-numeric: tabular-nums; pointer-events: none; }
.winner-name-error { margin: -8px 0 0; color: var(--negativ); font-size: .78rem; }
.winner-name-error[hidden] { display: none; }
.leaderboard-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#leaderboard-message { margin: 16px 0; }
#leaderboard-message.is-success { color: var(--positiv); }
.pong-ranking { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: 16px; }
table.pong-ranking th, table.pong-ranking td { padding: 8px 24px; overflow-wrap: anywhere; }
table.pong-ranking .col-rank { width: 28px; }
table.pong-ranking .col-name { width: auto; }
.pong-ranking .col-result { width: 17%; }
.pong-ranking .col-time { width: 20%; }
.pong-ranking .col-rally { width: 19%; }
.pong-ranking th:first-child, .pong-ranking td:first-child { padding-left: 4px; padding-right: 4px; }
.pong-ranking td:first-child, .pong-ranking td:nth-child(2) { text-align: left; }
.pong-ranking td { font-size: 1rem; }
.pong-ranking td:first-child, .pong-ranking td:nth-child(n+3), .ranking-date { font-family: 'DM Mono', monospace; }
.pong-ranking td:nth-child(2) { font-family: 'DM Sans', sans-serif; font-weight: 500; }
.ranking-date { display: inline-block; margin-left: 12px; color: var(--dim); font-size: .85rem; font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: normal; white-space: nowrap; }
.pong-ranking .l { text-align: left !important; }
.time-fraction { font-size: .5em; }
.pong-ranking td:nth-child(n+3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mobile-table-label { display: none; }
@media (max-width: 800px) {
  .leaderboard-heading h2.sh-title { font-size: 1.65rem; }
  .leaderboard-heading .secondary-button { font-size: .7rem; }
  table.pong-ranking { min-width: 0; }
  table.pong-ranking th, table.pong-ranking td { padding: 6px 2px; }
  .pong-ranking .col-result { width: 14%; }
  .pong-ranking .col-time { width: 25%; }
  .pong-ranking .col-rally { width: 15%; }
  .ranking-date { display: block; margin: 2px 0 0; font-size: .75rem; }
  .desktop-table-label { display: none; }
  .mobile-table-label { display: inline; }
}

.pong-ranking .is-own-result { color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
#leaderboard-own th { padding-top: 24px; color: var(--dim); border-top: 2px solid var(--border); text-align: left; }

/* Online setup shares the in-court overlay with the other mode preparations. */
.online-setup .online-explanation { margin: 0 0 4px; }
#join-room-form { display: grid; gap: 10px; margin: 4px 0 0; }
#join-code { width: 100%; min-width: 0; padding: 12px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font: 600 20px 'DM Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; }
#join-room-form label { font-size: 14px; }
#join-message { color: var(--coral); }
.game-overlay.online-overlay { width: min(310px, 94%); max-height: 100%; overflow-y: auto; padding: 18px 16px; }
.online-overlay .eyebrow { display: none; }
.online-overlay #overlay-text { font-size: 14px; }
.online-overlay #room-info { margin: 12px 0; }
.online-overlay .room-code-label { font-size: 11px; letter-spacing: .16em; margin: 0; color: var(--dim); }
.room-code { display: block; color: var(--accent); font: 600 30px 'DM Sans', sans-serif; letter-spacing: .14em; padding-left: .14em; margin: 0; }
.game-overlay .room-code-copy { margin-top: 6px; }
.online-overlay .room-players { font-size: 13px; margin: 8px 0; }
#leave-room { font-size: 12px; min-height: 36px; }
.online-overlay #overlay-title { margin-bottom: 8px; }
@media (max-height: 520px) and (orientation: landscape) {
  .game-overlay.online-overlay { width: min(340px, 98%); padding: 8px 12px; }
  .online-overlay #room-info { margin: 4px 0; }
  .online-overlay .room-code { font-size: 24px; }
  .online-overlay #overlay-text, .online-overlay .room-players { margin: 4px 0; }
}

.local-duel .solo-controls { display: none; }
#opponent-power-label { color: var(--coral); }
#opponent-power-display.danger #opponent-power-label { color: var(--coral); }
.local-duel .power-display { width: 150px; }
@media (pointer: fine) and (min-width: 801px) {
  .local-duel .controls > #opponent-power-display { order: -1; }
  .local-duel .controls > .power-display:not(#opponent-power-display) { order: 1; }
}
@media (pointer: coarse), (max-width: 800px) {
  .local-duel .controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
}

/* Keep the pointer available whenever a game overlay or dialog is visible. */
body:not(:has(dialog[open])) .court-wrap:has(> .game-overlay[hidden]) > canvas { cursor: none; }

/* Prevent long-press selection on the entire mobile pong surface. */
@media (pointer: coarse), (max-width: 800px) {
  html, body, body * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
  }
  input, textarea {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
}

/* Difficulty choices use the shared match-scope-toggle from the league. */
.difficulty-choice { border: 0; padding: 0; margin: 12px 0; min-width: 0; }
.difficulty-choice legend { color: var(--dim); font-size: 14px; margin-bottom: 6px; }
#leaderboard-difficulty { max-width: 320px; }
.computer-label > span { max-width: 92px; text-align: right; line-height: 1.3; }
@media (max-width: 360px) { .team-label { gap: 6px; letter-spacing: 0; } .computer-label > span { max-width: 74px; } }

.power-display.short-shot label span:last-child { color: #50B7F5; }
.power-display.short-shot meter::-webkit-meter-optimum-value { background: #50B7F5; }
.power-display.short-shot meter::-moz-meter-bar { background: #50B7F5; }