/* Skin: the finishing layer over site.css and fx.css. Slanted glass plates, shaded marbles, a control console. */
:root { --tape: 0px; --bar: 66px; --cut: 11px; --silver: #cfd6df; --bronze: #d58c4b; }

/* Marbles are drawn as shaded spheres everywhere they appear in the interface. */
.dot { width: 18px; height: 18px; background: radial-gradient(circle at 32% 28%, #fff 0 7%, var(--c2, #999) 26%, var(--c1, #666) 66%, #000 165%); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55); }

/* ---- top bar: separate slanted plates floating over the race ---- */
.topbar { top: 10px; left: 12px; right: 12px; height: 46px; gap: 3px; }
.topbar > * { backdrop-filter: blur(12px) saturate(1.4); background: rgba(9, 10, 16, 0.72); padding-left: 22px; padding-right: 22px; clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.topbar > .bug { background: var(--accent); color: var(--accent-ink); clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); padding-left: 14px; font-size: 20px; }
.bug i { background: radial-gradient(circle at 32% 30%, #fff 0 12%, #2a2c38 36%, #000 120%); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.slate b { font-size: 24px; letter-spacing: 0.02em; }
.slate span { font-size: 16px; }
.state { clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); padding: 2px 12px; }
.tabs { padding: 0 14px; }
.tabs button { padding: 0 13px; font-size: 16px; }
.tabs button .i { color: var(--accent); }
.clock b { font-size: 22px; }
.topbar > .follow { background: var(--ink); color: var(--accent-ink); clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%); }
.topbar > .follow:hover { background: var(--accent); }

/* ---- timing tower ---- */
.tower { top: calc(var(--bar) + 14px); width: 276px; }
.tower header { font-size: 16px; padding: 5px 12px; clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.tower li { background: rgba(9, 10, 16, 0.74); backdrop-filter: blur(10px) saturate(1.3); border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding-right: 12px; }
.tower li b { width: 32px; font-size: 18px; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.tower li[data-pos="1"] b { background: var(--gold); color: #1a1200; }
.tower li[data-pos="2"] b { background: var(--silver); color: #14161c; }
.tower li[data-pos="3"] b { background: var(--bronze); color: #1c0f04; }
.tower li.followed { box-shadow: inset -4px 0 0 var(--accent); background: rgba(40, 42, 58, 0.9); }
.tower li.followed b, .tower li.mine b { background: var(--accent); color: var(--accent-ink); }
.tower li:hover { transform-origin: left; filter: brightness(1.35); }

/* ---- title card ---- */
.kicker { clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding: 3px 18px 3px 12px; }
.opener h1::after { content: ""; display: block; width: 0.9em; height: 0.085em; margin-top: 0.14em; background: var(--accent); box-shadow: 0 0 24px var(--accent); }
.opener.in h1::after { animation: grow 0.6s 0.75s backwards cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }
.facts li { background: rgba(9, 10, 16, 0.6); backdrop-filter: blur(8px); padding: 2px 16px 2px 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); text-shadow: none; }
.facts { gap: 6px; }

/* ---- control console ---- */
.deck { justify-content: center; gap: 4px; bottom: calc(var(--tabbar) + 16px); }
.transport { flex: 0 1 540px; max-width: none; gap: 10px; background: rgba(9, 10, 16, 0.74); backdrop-filter: blur(12px) saturate(1.4); padding: 6px 18px 6px 6px; clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.transport .key { background: none; border: 0; color: var(--dim); }
.transport .key:hover { color: var(--ink); }
#playBtn { background: var(--accent); color: var(--accent-ink); width: 42px; height: 42px; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
#playBtn:hover { filter: brightness(1.15); color: var(--accent-ink); }
.transport output { font-size: 22px; min-width: 70px; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; background: linear-gradient(90deg, var(--accent) var(--p, 0%), rgba(255, 255, 255, 0.2) var(--p, 0%)); cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 22px; background: var(--ink); box-shadow: 0 0 14px var(--accent); transform: skewX(-12deg); }
input[type=range]::-moz-range-thumb { width: 12px; height: 22px; border: 0; border-radius: 0; background: var(--ink); box-shadow: 0 0 14px var(--accent); }
.cams { border: 0; background: rgba(9, 10, 16, 0.74); backdrop-filter: blur(12px) saturate(1.4); clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%); padding-left: 8px; }
.camico { display: grid; place-items: center; padding: 0 10px 0 12px; color: var(--accent); font-size: 20px; }
.cams button { padding: 0 15px; height: 54px; font-size: 16px; position: relative; }
.cams button.on { background: none; color: var(--ink); }
.cams button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

/* ---- ride search ---- */
.ridebox { position: fixed; right: 18px; bottom: calc(var(--tabbar) + 78px); z-index: 6; width: 290px; max-height: min(52vh, 440px); display: flex; flex-direction: column; background: rgba(9, 10, 16, 0.88); backdrop-filter: blur(14px) saturate(1.4); border-top: 3px solid var(--accent); animation: rise 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ridebox .find { margin: 0; padding: 4px 12px; border-bottom: 1px solid var(--rule); }
.ridebox input { background: none; border: 0; padding: 9px 0; font: 600 17px var(--text); color: var(--ink); outline: none; width: 100%; }
.ridebox ul { overflow-y: auto; }
.ridebox li { display: flex; align-items: center; gap: 9px; padding: 6px 12px; font: 600 16px var(--text); cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ridebox li:hover, .ridebox li.on { background: rgba(255, 255, 255, 0.1); }
.ridebox li.on { box-shadow: inset 4px 0 0 var(--accent); }
.ridebox li b { font: 800 17px var(--cond); width: 26px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ridebox li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ridebox li.none { color: var(--dim); cursor: default; }

/* ---- panels ---- */
.panel { background: rgba(9, 10, 16, 0.84); backdrop-filter: blur(18px) saturate(1.4); border-left-width: 4px; top: calc(var(--bar) + 2px); bottom: calc(var(--tabbar) + 0px); }
.panel > header { padding: 18px 20px 14px; }
.panel h2 { font-size: 44px; letter-spacing: 0.01em; }
.panel h2::after { content: ""; display: block; width: 46px; height: 5px; margin-top: 8px; background: var(--accent); }
.panel-body { padding: 18px 20px 30px; }
.sheet .dot { width: 22px; height: 22px; }
.sheet td { padding: 8px 8px; }
.sheet tbody tr:nth-child(1) td:first-child { color: var(--gold); }
.sheet tbody tr:nth-child(2) td:first-child { color: var(--silver); }
.sheet tbody tr:nth-child(3) td:first-child { color: var(--bronze); }
.log li { border-top: 0; background: rgba(255, 255, 255, 0.045); padding: 14px 16px; margin-bottom: 4px; box-shadow: inset 4px 0 0 var(--accent); }
.log li.note { box-shadow: none; text-align: center; }
.log .top b { font-size: 26px; }
.log .win .dot { width: 34px; height: 34px; }
.log .win .i { color: var(--gold); font-size: 20px; }
.champ { background: rgba(255, 255, 255, 0.06); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding-right: 18px; }
.champ .dot { width: 24px; height: 24px; }
.tier { box-shadow: inset 4px 0 0 var(--accent); background: rgba(255, 255, 255, 0.045); }
.tier b { color: var(--accent); }
.chip { clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding: 7px 16px; }
.buy { background: rgba(255, 255, 255, 0.045); }
.marble.big { width: 250px; height: 250px; }

.presented small, .presented span { backdrop-filter: blur(8px); background: rgba(9, 10, 16, 0.6); }
.presented b { clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%); padding-left: 18px; }
.pod { backdrop-filter: blur(10px); background: rgba(9, 10, 16, 0.8); }
.toast { bottom: calc(var(--tabbar) + 90px); }
.shade { background:
  linear-gradient(to bottom, rgba(5, 6, 10, 0.55), transparent 130px),
  linear-gradient(to top, rgba(5, 6, 10, 0.7), transparent 200px),
  linear-gradient(to right, rgba(5, 6, 10, 0.45), transparent 400px); }

/* ---- phones ---- */
@media (max-width: 860px) {
  :root { --bar: 46px; }
  .topbar { top: 0; left: 0; right: 0; gap: 2px; }
  .topbar > * { padding-left: 12px; padding-right: 12px; clip-path: none; }
  .topbar > .bug, .topbar > .follow { clip-path: none; }
  .slate b { font-size: 18px; }
  .tower { width: 200px; top: calc(var(--bar) + 8px); }
  .deck { bottom: calc(var(--tabbar) + 8px); gap: 4px; }
  .transport { flex: 1 1 100%; clip-path: none; padding-right: 10px; }
  .cams { clip-path: none; padding-left: 0; }
  .cams button { height: 44px; padding: 0 4px; }
  .camico { padding: 0 8px; }
  .ridebox { left: 8px; right: 8px; width: auto; bottom: calc(var(--tabbar) + 112px); }
  .panel { top: auto; }
  .panel h2 { font-size: 34px; }
}