/* The game library's one visual unit, and the figures built from it (work/vis_lib.py, assets/lib.js).
   A host screen: a frame of the host game, darkened only enough to carry its drawn menu, with the tile at
   lower right in the orange the recording uses for the invitation tile. Sizes follow the screen's own width. */

.hs{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:var(--navy);container-type:inline-size;color:var(--light)}
.hs-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(.24cqw) brightness(.66) saturate(.95);transform:scale(1.03);transition:opacity .28s}
/* behind a menu a game blurs its own frame, which also keeps its HUD out of the way */
.hs-menu{position:absolute;left:5.5cqw;top:6.5cqw;bottom:6.5cqw;display:flex;flex-direction:column;align-items:flex-start;gap:1.7cqw;transition:opacity .28s}
.hs-title{font-size:max(14px,3.7cqw);font-weight:500;line-height:1.05;letter-spacing:-.01em;max-width:44cqw;margin-bottom:1.6cqw;text-wrap:balance}
.hs-menu i{display:block;height:max(3px,.8cqw);width:15cqw;background:var(--light);opacity:.72;border-radius:1px}
.hs-menu i:nth-of-type(2){width:11.5cqw}.hs-menu i:nth-of-type(3){width:13cqw}
.hs-menu i.q{margin-top:auto;width:5.5cqw}
.hs-tile{position:absolute;right:4.5cqw;bottom:5.5cqw;width:27cqw;display:flex;flex-direction:column;transition:opacity .28s}
.hs-art{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:2px;outline:2px solid var(--orange);outline-offset:0}
.hs-art img{display:block;width:100%;height:100%;object-fit:cover}
.hs-cap{margin-top:1.1cqw;font-size:max(11px,1.6cqw);font-weight:500;line-height:1.2}
.hs.out .hs-scene,.hs.out .hs-menu,.hs.out .hs-tile{opacity:0}
/* the tile arrives in blue and settles to orange: the one place the two accents meet, and only in motion */
.hs-tile.enter{animation:hsIn .6s cubic-bezier(.2,.7,.2,1)}
.hs-tile.enter .hs-art{animation:hsLine 1.1s ease-out}
@keyframes hsIn{from{opacity:0;transform:translateY(1.6cqw)}to{opacity:1;transform:none}}
@keyframes hsLine{0%,45%{outline-color:var(--blue)}100%{outline-color:var(--orange)}}
@media (prefers-reduced-motion:reduce){.hs-tile.enter,.hs-tile.enter .hs-art{animation:none}.hs-scene,.hs-menu,.hs-tile{transition:none}}

/* Home: who it's for. The pair runs off the right edge, as the hero figures do. */
.fg>.pairing.wide3 .hs{border-radius:2px 0 0 2px}
.pairing .pcap{display:flex;justify-content:space-between;align-items:flex-start;gap:16px 32px;flex-wrap:wrap;padding:18px var(--edge) 0 0;font-size:15px;line-height:1.5;color:var(--mid)}
.pairing .pcap p{max-width:62ch}
.pairing .pcap b{font-weight:500;color:var(--hi)}
.pairing .ctl button,.catalog .ctl button{font-size:14.5px;font-weight:500;color:var(--hi);padding:8px 12px;min-width:44px;border:1px solid var(--rule);border-radius:3px;white-space:nowrap}
.pairing .ctl button:hover,.catalog .ctl button:hover{border-color:var(--orange)}
.sec>.pairing+.routes{margin-top:var(--s-block)}
@media (max-width:820px){.fg>.pairing.wide3 .hs{border-radius:2px}.pairing .pcap{padding-right:0}}

/* Publishers: the catalogue. The live game on the left; the rest of the catalogue on the right, any of it can be offered. */
.catalog{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px;align-items:start}
.catalog .role{font-size:14.5px;line-height:1.4;color:var(--mid);margin:0 0 12px}
.cat-shelf ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px var(--gap)}
.cat-shelf li{transition:opacity .5s}
.catalog[data-dim] .cat-shelf li:not(.on):not(.was){opacity:.45}
.catalog[data-dim] .cat-shelf li.was{opacity:.7}
.cat-shelf button{display:block;width:100%;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer;border-radius:2px}
.cat-shelf .art{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#0A1122;outline:2px solid transparent;outline-offset:0;transition:outline-color .4s}
.cat-shelf .art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cat-shelf button:hover .art img{transform:scale(1.03)}
.cat-shelf li.on .art{outline-color:var(--orange)}
.cat-shelf .tag{position:absolute;left:8px;top:8px;background:var(--blue);color:var(--navy);font-size:13.5px;font-weight:500;line-height:1;padding:6px 8px;border-radius:2px;opacity:0;transition:opacity .4s}
.cat-shelf .tag:empty{display:none}
.cat-shelf li.on .tag,.cat-shelf li.was .tag{opacity:1}
.cat-shelf .nm{display:block;margin-top:8px;font-size:16px;font-weight:500;line-height:1.3}
.catalog .cmside{grid-column:1 / -1;display:flex;gap:16px 40px;align-items:center;flex-wrap:wrap;padding-top:24px}
.catalog .ctl{display:flex;gap:8px;flex-wrap:wrap}
.catalog .cmcap{font-size:15px;color:var(--mid)}
@media (max-width:1100px){.catalog{column-gap:32px}.cat-shelf ul{gap:14px 16px}.cat-shelf .nm{font-size:15px}}
@media (max-width:820px){.catalog{grid-template-columns:minmax(0,1fr);row-gap:32px}}
@media (prefers-reduced-motion:reduce){.cat-shelf li,.cat-shelf .art,.cat-shelf .art img,.cat-shelf .tag{transition:none}}

/* Platforms: what the player was browsing, above the page they opened. */
.vis-plat.vp-store.p2 .p2-shelf{display:block;margin-bottom:22px}
.vis-plat.vp-store.p2 .p2-sl{display:block;font-size:13.5px;font-weight:500;color:var(--light2);border-top:1px solid var(--rulen);padding-top:6px;margin:-6px 0 10px}
.vis-plat.vp-store.p2 .p2-row5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.vis-plat.vp-store.p2 .ss{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12px;line-height:1.2;color:var(--light2)}
.vis-plat.vp-store.p2 .ss img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px;opacity:.62}
.vis-plat.vp-store.p2 .ss.on img{opacity:1;outline:1.5px solid var(--light);outline-offset:0}
@media (max-width:640px){.vis-plat.vp-store.p2 .p2-row5{gap:6px}}
.hs-tile[hidden]{display:none}