/* SLINGSHOT // THE DAILY TRAJECTORY (static/js/games/slingshot.js). The canvas is the system,
   the HUD is HTML over it. No backdrop-filter, no looping animation on big surfaces. */
.sling-desk { padding: 16px 18px 28px; max-width: 1320px; }
.sling-main { display: grid; grid-template-columns: minmax(0, 960px) minmax(260px, 330px); gap: 12px; margin-top: 10px; align-items: start; justify-content: center; }
@media (max-width: 980px) { .sling-main { grid-template-columns: 1fr; } }
.sling-stage { position: relative; padding: 8px; min-width: 0; }
.sling-stage canvas { display: block; width: 100%; touch-action: none; cursor: crosshair; border-radius: 4px; position: relative; z-index: 3; }
.sling-hud { position: absolute; z-index: 4; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; font-family: var(--mono); }
.sl-gauge { padding: 5px 10px 6px; background: rgba(4, 10, 20, .82); border: 1px solid rgba(79, 227, 255, .45);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); max-width: 46%; }
.sl-gauge small { display: block; font-size: 9px; letter-spacing: .3em; color: rgba(160, 210, 235, .7); }
.sl-gauge b { font-size: 15px; letter-spacing: .08em; color: var(--holo, #4fe3ff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sl-gauge.r { text-align: right; } .sl-gauge.r b { color: var(--amber, #ffb020); font-size: 20px; }
.sl-pips { text-align: center; }
.sl-pips > div { display: flex; gap: 4px; justify-content: center; }
.sl-pips i { width: 13px; height: 13px; border: 1px solid rgba(79, 227, 255, .5); background: rgba(4, 10, 20, .8); transform: rotate(45deg); margin: 2px 3px; }
.sl-pips i.x { background: #3a2a30; border-color: #ff5a4a; }
.sl-pips i.ok { background: #3fe0a0; }
.sl-pips i.pf { background: #ffd36a; box-shadow: 0 0 8px #ffd36a; }
.sl-pips small { display: block; margin-top: 6px; font-size: 9px; letter-spacing: .3em; color: rgba(160, 210, 235, .75); }
.sl-aimread { position: absolute; left: 50%; transform: translateX(-50%); top: 52px; padding: 3px 10px; font-size: 11px; letter-spacing: .2em;
  color: #ffd36a; background: rgba(4, 10, 20, .8); border: 1px solid rgba(255, 176, 32, .45); white-space: nowrap; }
.sling-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sl-card { padding: 14px 16px; }
.sl-card > * { position: relative; z-index: 3; }
.sl-card h3 { margin: 0 0 10px; font: 700 10px/1 var(--mono); letter-spacing: .28em; color: var(--holo); }
.sl-card p { font-size: 13px; line-height: 1.55; margin: 6px 0; }
.sl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 8px; }
.sl-stats span { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border: 1px solid var(--holo-dim); border-radius: 5px;
  font: 700 9px var(--mono); letter-spacing: .2em; color: rgba(160, 210, 235, .75); }
.sl-stats b { font-size: 20px; letter-spacing: 0; color: var(--amber); text-shadow: 0 0 10px var(--glow); margin-top: 2px; }
.sl-won { color: #7dff8a; font-weight: 700; font-family: var(--mono); }
.sl-log, .sl-board { list-style: none; margin: 0 0 8px; padding: 0; }
.sl-board { counter-reset: sl; }
.sl-log li, .sl-board li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 2px; border-bottom: 1px solid rgba(79, 227, 255, .08); font: 13px var(--mono); }
.sl-board li { counter-increment: sl; }
.sl-board li::before { content: counter(sl) "."; color: var(--holo); width: 22px; }
.sl-log li span, .sl-board li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-board li small { color: rgba(160, 210, 235, .6); }
.sl-log li b, .sl-board li b { color: var(--amber); }
.sl-log li.ok span { color: #7dff8a; }
.sl-board li.me span { color: var(--amber); }
.sl-sys { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.sl-sys button { text-align: left; font: 600 11px var(--mono); letter-spacing: .08em; }
.sl-sys button.on { border-color: var(--amber); color: var(--amber); }
.sl-how p { font-size: 12px; }
.sl-k { padding: 0 3px; font: 700 11px var(--mono); }
.sl-k.bc { color: #4fe3ff; } .sl-k.rl { color: #ffb020; } .sl-k.pl { color: #ffd79a; } .sl-k.bh { color: #ff8c3c; } .sl-k.mn { color: #d8dde6; } .sl-k.wh { color: #c08cff; }
@media (max-width: 600px) {
  .sling-desk { padding: 12px 10px 24px; }
  .sling-hud { top: 12px; left: 12px; right: 12px; }
  .sl-gauge { padding: 3px 7px 4px; }
  .sl-gauge small, .sl-pips small { font-size: 7px; letter-spacing: .2em; }
  .sl-gauge b { font-size: 11px; } .sl-gauge.r b { font-size: 14px; }
  .sl-pips i { width: 9px; height: 9px; margin: 1px 2px; }
  .sl-aimread { top: 40px; font-size: 9px; }
}
.sl-sys button { background: rgba(4, 10, 20, .7); color: var(--holo); border: 1px solid var(--holo-dim); }