/* Shared sports UI for hoops / kicks / pong / skiing. */
body {
  background:radial-gradient(ellipse at 50% 18%,color-mix(in srgb,var(--a1) 14%,#060b15),#060b15 70%);
}
#app { box-shadow:0 0 100px #0009,0 0 0 1px #ffffff12; }
.overlay { background:linear-gradient(180deg,#03091466,#030914c9); }
.panel {
  background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--a1) 13%,transparent),transparent 65%),linear-gradient(150deg,#142132f5,#080f1bf7);
  border-color:#b9d9ff24; border-radius:24px;
  box-shadow:0 30px 80px #0009,inset 0 1px #ffffff18;
}
.panel::before { height:3px; background:linear-gradient(90deg,var(--a1),var(--a2),transparent)!important; }
.hero { border-radius:14px; border-color:#ffffff18; box-shadow:inset 0 0 30px #0003; }
.hero::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,#ffffff0d,transparent 45%,#02081544); }
.title { color:#f4f8ff; background:none; -webkit-text-fill-color:currentColor; filter:none; animation:none; letter-spacing:3px; }
.subtitle { color:var(--a1); font-size:10px; letter-spacing:5px; margin-top:7px; }
.best { display:inline-block; border:1px solid #ffffff13; border-radius:6px; padding:4px 10px; margin-top:10px; font-size:11px; color:#bac9db; background:#ffffff05; }
.mode-btn { border-width:1px; border-color:#ffffff19; border-radius:12px; background:#030a1638; transition:background .18s,border-color .18s,transform .18s; }
.mode-btn.active { background:linear-gradient(140deg,color-mix(in srgb,var(--a1) 20%,#101927),#101927); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 25%,transparent),0 4px 18px #0002; }
.mode-btn.active::after { width:15px; height:15px; line-height:15px; font-size:10px; border-radius:4px; }
.mode-btn .pips i { width:5px; height:3px; border-radius:1px; box-shadow:none; }
.difficulty-select { background:#030a164d; border-color:#ffffff12; border-radius:12px; }
.difficulty-btn { border-radius:7px; }
.btn { border-radius:12px; box-shadow:0 7px 22px color-mix(in srgb,var(--a1) 20%,transparent),inset 0 1px #ffffff40; }
.btn.big { color:#06131e; text-shadow:0 1px #ffffff30; background:linear-gradient(115deg,color-mix(in srgb,var(--a1) 75%,white),var(--a1)); }
.btn.big::after { content:'↗'; font-size:21px; margin-left:8px; font-weight:500; }
.btn.ghost { border-color:#ffffff15; background:#ffffff05; color:#c2cedc; }
#game-nav a { border-style:solid; border-color:#ffffff1c; background:#091320d9; box-shadow:none; }
#game-nav { left:116px; gap:4px; }
#game-nav a { flex:1; min-width:0; padding:0 5px; font-size:10px; gap:3px; }
#game-nav a svg { width:13px; height:13px; flex:none; }
#proj-tag { border-radius:10px; border-color:#ffffff20; box-shadow:0 4px 20px #0003; }
.hud-box { border-radius:10px; border-color:#ffffff26; box-shadow:0 5px 18px #0003,inset 0 1px #ffffff10; font-variant-numeric:tabular-nums; }
#hud-score { color:#fff; -webkit-text-fill-color:currentColor; background:linear-gradient(130deg,color-mix(in srgb,var(--a1) 20%,#091320),#091320); background-clip:border-box; }
#btn-pause { border-radius:10px; }
#hud-sub { border-radius:8px; font-variant-numeric:tabular-nums; }
.theme-pong #hud-sub.hud-progress::before,.theme-kicks #hud-sub.hud-progress::before { background:linear-gradient(90deg,transparent,var(--a1),transparent); }
.theme-pong .hud-metric.is-accent .hm-value,.theme-kicks .hud-metric.is-accent .hm-value { color:var(--a1); text-shadow:none; }
#skill-dock { border-color:#ffffff26; background:#081421ed; border-radius:14px; box-shadow:0 8px 30px #0006; }
.skill-btn { border-radius:9px; transition:background .15s,border-color .15s,transform .15s; }
.skill-btn[data-skill="power"] { --skill-color:#ffc071; }
.skill-btn[data-skill="curve"] { --skill-color:#80dfff; }
.skill-btn[data-skill="feint"] { --skill-color:#d9a4ff; }
.skill-btn.active { border-color:var(--skill-color,var(--a1)); background:color-mix(in srgb,var(--skill-color,var(--a1)) 19%,#091320); }
.skill-btn.active b { color:var(--skill-color,var(--a1)); }
@media (hover:hover) {
  .mode-btn:hover,.difficulty-btn:hover { border-color:var(--a1); background:color-mix(in srgb,var(--a1) 12%,#111c2b); }
  .btn:hover { transform:translateY(-1px); }
}
@media (max-height:640px) {
  .panel { border-radius:18px; }
  .best { padding:2px 8px; margin-top:4px; }
}
@media (max-width:350px) {
  #proj-tag { left:10px; padding:0 8px; gap:4px; }
  #game-nav { left:103px; right:8px; gap:3px; }
  #game-nav a { padding:0 3px; font-size:9px; }
  #game-nav a svg { width:11px; height:11px; }
}
.theme-ski #hud-sub.hud-progress { border-color:#78d9ef66; background:linear-gradient(150deg,#153b50f5,#0b1b30f5); }
.theme-ski #hud-sub.hud-progress::before { background:linear-gradient(90deg,transparent,#9eefff,transparent); }
.theme-ski .hud-metric.is-accent .hm-value { color:#a1f1ff; text-shadow:none; }
.theme-ski .hud-metric { min-width:0; padding-left:7px; padding-right:7px; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important; }
}