/* click.css · Ki 2:56 PM Oct 19 2026 "click everything": photos are the buttons. Pairs with click.js. Revert = drop the <link>. */
/* tap badge on photos */
.ck-bd{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62);color:#fff;box-shadow:0 0 0 1.5px rgba(255,255,255,.55),0 4px 10px -4px #000;pointer-events:none;transition:transform .2s,background .2s}
.ck-bd svg{width:15px;height:15px}.ck-bd-play svg{margin-left:2px}
a.ck-a,a.ck-vt,.ktrk{-webkit-tap-highlight-color:transparent}
/* timeline photo cards: whole card taps */
.tl-ph a.tl-c.ck-a{cursor:pointer}
.tl-ph a.tl-c.ck-a figure{position:relative}
.tl-ph a.tl-c.ck-a figure img{transition:transform .35s ease,filter .35s}
@media (hover:hover){.tl-ph a.tl-c.ck-a:hover figure img{transform:scale(1.03);filter:brightness(1.08)}.tl-ph a.tl-c.ck-a:hover .ck-bd{transform:scale(1.12);background:#39ff14;color:#041}}
.tl-ph a.tl-c.ck-a:active{transform:scale(.985)}
/* era photos etc: the photo taps to its source */
figure>a.ck-a{position:relative;display:block;border-radius:8px;overflow:hidden;cursor:pointer}
figure>a.ck-a img{transition:transform .35s ease,filter .35s}
@media (hover:hover){figure>a.ck-a:hover img{transform:scale(1.04);filter:brightness(1.08)}figure>a.ck-a:hover .ck-bd{transform:scale(1.12);background:#39ff14;color:#041}}
figure>a.ck-a:active img{transform:scale(.98)}
.bp-ph figure>a.ck-a .ck-bd{width:26px;height:26px;right:6px;bottom:6px}.bp-ph figure>a.ck-a .ck-bd svg{width:13px;height:13px}
/* key tracks: album-cover tiles (still play in-page) */
.world .tracks.ck-tl{display:grid;grid-template-columns:1fr;gap:6px}
@media (min-width:640px){.world .tracks.ck-tl{grid-template-columns:1fr 1fr}}
.world .tracks.ck-tl button.ktrk{display:flex!important;align-items:center;gap:12px;width:100%;min-height:62px!important;padding:7px 12px 7px 7px!important;border-radius:14px!important;border:0!important;background:rgba(0,0,0,.6)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);font-weight:700;font-size:15px;text-align:left;cursor:pointer;transition:transform .15s,box-shadow .2s}
.world .tracks.ck-tl button.ktrk>i:not(.ck-cv i){display:none}
.world .tracks.ck-tl .ck-cv{position:relative;flex:none;width:48px;height:48px;border-radius:8px;overflow:hidden;background:#111;box-shadow:0 3px 10px -4px #000}
.world .tracks.ck-tl .ck-cv img{width:100%;height:100%;object-fit:cover;display:block}
.world .tracks.ck-tl .ck-cv .ck-bd{right:50%;bottom:50%;transform:translate(50%,50%);width:26px;height:26px;background:rgba(0,0,0,.5)}
.world .tracks.ck-tl .ck-cv .ck-bd svg{width:13px;height:13px}
.world .tracks.ck-tl .ck-nocv{background:linear-gradient(135deg,#1c3a14,#071a05)}
@media (hover:hover){.world .tracks.ck-tl button.ktrk:hover{box-shadow:inset 0 0 0 1.5px #39ff14}.world .tracks.ck-tl button.ktrk:hover .ck-bd{background:#39ff14;color:#041}}
.world .tracks.ck-tl button.ktrk:active{transform:scale(.98)}
.world .tracks.ck-tl button.ktrk.on{box-shadow:inset 0 0 0 2px #39ff14,0 0 16px rgba(57,255,20,.4)!important}
.world .tracks.ck-tl button.ktrk.on .ck-bd{background:#39ff14;color:#041}
.world .tracks.ck-tl button.ktrk.wait .ck-cv img{filter:brightness(.6)}
/* Slimeball trilogy: official video thumbnails instead of pills */
.bp-chips.ck-vg{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
.bp-chips.ck-vg a.ck-vt{display:flex!important;flex-direction:column;gap:5px;min-height:0!important;padding:0!important;border:0!important;background:none!important;border-radius:0!important;color:inherit;text-decoration:none;font-size:13px;font-weight:700;line-height:1.2}
.ck-th{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#111}
.ck-th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
@media (hover:hover){a.ck-vt:hover .ck-th img{transform:scale(1.05)}a.ck-vt:hover .ck-bd{background:#39ff14;color:#041}}
a.ck-vt:active .ck-th{transform:scale(.98)}
.ck-th .ck-bd{right:50%;bottom:50%;transform:translate(50%,50%)}
.vl.ck-vl{display:flex;margin-top:4px}
/* TV room: service circles under posters (only where it really streams) */
.ck-svc{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ck-s{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--ck-bg,#000);box-shadow:0 0 0 1.5px rgba(255,255,255,.28),0 3px 8px -4px #000;overflow:hidden;transition:transform .15s,box-shadow .2s}
.ck-s svg{width:100%;height:100%;display:block}
@media (hover:hover){.ck-s:hover{transform:scale(1.1);box-shadow:0 0 0 2px #7cff3a}}
.ck-s:active{transform:scale(.94)}
.tv2tx .ck-svc{margin-top:12px;gap:8px}.tv2tx .ck-s{width:36px;height:36px}
/* home + JDM countdown: the extra "Who Dat Is" pill goes (it plays from its own photo in LATEST DROPS) */
.count .btn.wdi{display:none!important}
.tl-i a.tl-c.ck-a{cursor:pointer}@media (hover:hover){.tl-i a.tl-c.ck-nb:hover{border-color:#39ff14}}
.world .tracks.ck-tl span.ck-cv{padding:0!important;border:0!important;border-radius:8px!important;background:#111!important;font-size:0;backdrop-filter:none!important}
.world .tracks.ck-tl span.ck-cv .ck-bd{padding:0!important;border:0!important;border-radius:50%!important;background:rgba(0,0,0,.5)!important;backdrop-filter:none!important}
.world .tracks.ck-tl button.ktrk:hover span.ck-cv .ck-bd,.world .tracks.ck-tl button.ktrk.on span.ck-cv .ck-bd{background:#39ff14!important;color:#041}
.world .tracks.ck-tl span.ck-nocv{background:linear-gradient(135deg,#1c3a14,#071a05)!important}
.world .tracks.ck-tl .ck-cv img{border:0!important;border-radius:0!important;padding:0!important;animation:none!important;transform:none!important;box-shadow:none!important;max-width:none!important}