/* The lobby's game picker: a 3D "coverflow" carousel (views/lobby.js: pickerHTML / cardTpl). Everything here is scoped under .cv-.
   Colours and fonts come from base.css: warm ink, gold hairlines, Rothek for the titles, Manrope for the labels.
   Layout in one line: the stage (.cv) holds a backdrop (.cv-bg), the card track (.cv-track), the two double-chevron buttons (.cv-skip),
   and a dock (.cv-dock) with the position counter, the arc track and the small arrows.
   Each card carries three numbers set from JS: --o its place from the centre (-3..3), --a its distance (0..3), --sg its side (-1, 0, 1).
   The transform, dimming and stacking below are all calc() on those, so moving to another game is one transition and no re-render.
   Sizes follow the stage's own width (container units), so the same rules serve a phone and a wide desktop. */

@property --cw{syntax:"<length>";inherits:true;initial-value:300px}
@property --t{syntax:"<number>";inherits:true;initial-value:0}

/* ------------------------------------------------------------ category row: uppercase items, thin dividers, underline on the active one */
.cv-cats{display:flex;align-items:stretch;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-bottom:1px solid var(--hair)}
.cv-cats::-webkit-scrollbar{display:none}
.cv-cat{--cv-gap:clamp(14px,2vw,26px);position:relative;flex:none;min-height:var(--lb-hit,44px);padding:0 var(--cv-gap);border:0;border-radius:0;background:none;color:var(--stone-400);
  font-family:var(--font-body);font-size:var(--fs-12);font-weight:500;line-height:1;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:color var(--dur-1) var(--ease)}
.cv-cat:first-child{padding-left:0;padding-right:calc(var(--cv-gap) + 4px)} /* "All" keeps a 44px-wide target */
.cv-cat+.cv-cat::before{content:"";position:absolute;left:0;top:50%;width:1px;height:14px;margin-top:-7px;background:var(--hair-strong)}
.cv-cat::after{content:"";position:absolute;left:var(--cv-gap);right:var(--cv-gap);bottom:0;height:2px;background:var(--gold-500);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease)}
.cv-cat:first-child::after{left:0}
.cv-cat:hover{color:var(--ivory-100)}
.cv-cat[aria-pressed=true]{color:var(--ivory-100)}
.cv-cat[aria-pressed=true]::after{transform:scaleX(1)}
.cv-cat:focus-visible{outline:1px solid var(--gold-500);outline-offset:-6px}
/* phones: the row swipes sideways, edge to edge, with a fade where more items wait */
@media(max-width:720px){.cv-cats{margin-inline:calc(var(--pad-x,20px) * -1);padding-inline:var(--pad-x,20px) calc(var(--pad-x,20px) + 28px);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}}

/* ------------------------------------------------------------ the stage */
.cv-frame{container:cv / inline-size;margin-inline:calc(var(--pad-x,20px) * -1)} /* bleeds to the page's padding edge; the stage clips whatever sticks out */
.cv{--cw:min(74cqi,330px);--ch:calc(var(--cw) * 5 / 3);--cv-pt:22px;--cv-pb:18px;--ry:15deg;--stepf:.78;--step:calc(var(--cw) * var(--stepf));--arc-d:26px;
  position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}
@container cv (min-width:560px){.cv{--cw:max(220px,min(44cqi,330px,calc((100svh - 372px) * .6)));--ry:22deg;--stepf:.82}}
@container cv (min-width:1000px){.cv{--cw:max(236px,min(28cqi,352px,calc((100svh - 372px) * .6)));--ry:26deg;--stepf:.9}}

/* backdrop: engraved orbit lines and a platform ring under the cards */
/* the backdrop fades out toward the stage's left, right and bottom edges, so the stage never reads as a box on a wide screen */
.cv-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,#000 82%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,#000 82%,transparent);mask-composite:intersect}
.cv-orbits{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:radial-gradient(ellipse 74% 80% at 50% 54%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 74% 80% at 50% 54%,#000 52%,transparent 100%)}
.cv-orbits ellipse{vector-effect:non-scaling-stroke;stroke:var(--hair);stroke-width:1}
.cv-orbits .o1,.cv-orbits .o3{stroke:var(--hair-gold);opacity:.6}
.cv-orbits .o2{opacity:.9}
.cv-orbits .o4{stroke:var(--hair-gold);stroke-dasharray:1 7;opacity:.75}
.cv-floor{position:absolute;left:50%;top:calc(var(--cv-pt) + var(--ch) + 12px - var(--cw) * .25);width:calc(var(--cw) * 3.7);height:calc(var(--cw) * .5);transform:translateX(-50%);border-radius:50%;
  border:1px solid var(--hair-gold);background:radial-gradient(closest-side,color-mix(in srgb,var(--gold-500) 7%,transparent),transparent 80%)}
.cv-floor::before{content:"";position:absolute;inset:-26% -10%;border-radius:50%;border:1px solid var(--hair)}

/* the cards sit in a perspective box; a card's own transform does the arc */
.cv-track{position:relative;z-index:1;height:calc(var(--ch) + var(--cv-pt) + var(--cv-pb));perspective:calc(var(--cw) * 4);perspective-origin:50% 42%;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cv-card{--cv-r:6px;position:absolute;left:50%;top:var(--cv-pt);width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);
  container:card / size;display:grid;grid-template-rows:auto minmax(0,1fr) auto;isolation:isolate;overflow:hidden;
  border:1px solid var(--hair);border-radius:var(--cv-r);background:var(--ink-900);box-shadow:var(--shadow-raised);
  z-index:calc(10 - var(--a));
  transform:translate3d(calc(var(--o) * var(--step) * (1 - .1 * (var(--a) - 1))),0,calc(var(--a) * -70px)) rotateY(calc(var(--sg) * var(--ry) * -1 * (.7 + .3 * min(var(--a),2)))) scale(calc(1 - .08 * var(--a)));
  transition:transform var(--cv-dur,.55s) var(--ease),opacity var(--cv-dur,.55s) var(--ease),visibility 0s,border-color var(--dur-1) var(--ease)}
.cv-card[data-c]{border-color:var(--hair-gold)}
/* off stage: faded out, and only then hidden (visible at once on the way in, so the focus can move to a card the moment it is picked) */
.cv-card[data-far]{opacity:0;visibility:hidden;pointer-events:none;
  transition:transform var(--cv-dur,.55s) var(--ease),opacity var(--cv-dur,.55s) var(--ease),visibility 0s linear var(--cv-dur,.55s),border-color var(--dur-1) var(--ease)}
/* the further a card, the dimmer: an opaque wash, so a card behind never shows through the one in front */
.cv-card::after{content:"";position:absolute;inset:0;z-index:3;background:var(--ink-950);opacity:calc(var(--a) * .22);pointer-events:none;transition:opacity var(--cv-dur,.55s) var(--ease)}
@media(hover:hover){.cv-card:not([data-c]):hover{border-color:var(--hair-gold)}.cv-card:not([data-c]):hover::after{opacity:calc(var(--a) * .22 - .08)}}

/* the whole card is one button: choose this game */
.cv-hit{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cv-card[data-c] .cv-hit{cursor:default}
.cv-hit:focus-visible{outline:1px solid var(--gold-500);outline-offset:-7px}

/* top bar: the index "[ 03 ]" on the left, the name and a circled + (How to play) on the right */
.cv-top{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;padding:0 50px 0 16px;border-bottom:1px solid var(--hair)}
.cv-idx{flex:none;font-family:var(--font-body);font-size:11px;font-weight:500;line-height:1;letter-spacing:.24em;color:var(--stone-400)}
.cv-name{min-width:0;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-body);font-size:11px;font-weight:500;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-100)}
/* pinned to the header's corner (not pushed by the name), with the same gap above, below and to the right of its ring */
.cv-plus{position:absolute;right:2px;top:50%;translate:0 -50%;z-index:2;flex:none;width:44px;height:44px;margin:0;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--gold-500);cursor:pointer}
.cv-plus::before{content:"";position:absolute;inset:9px;border-radius:50%;border:1px solid var(--hair-gold);transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.cv-plus .ico{position:relative;width:14px;height:14px;stroke-width:1.6;transition:rotate var(--dur-1) var(--ease)}
.cv-plus:hover::before{border-color:var(--gold-500);background:var(--gold-soft)}
.cv-plus[aria-expanded=true] .ico{rotate:45deg}
.cv-plus:focus-visible{outline-offset:-3px}

/* the picture: the game's art in one warm gold tone (gameart.css .gart-card), with two hairline rings behind it echoing the orbits */
.cv-art{position:relative;min-height:0;overflow:hidden}
.cv-art::before,.cv-art::after{content:"";position:absolute;left:50%;top:52%;aspect-ratio:1;border-radius:50%;border:1px solid var(--hair);transform:translate(-50%,-50%);opacity:.7}
.cv-art::before{width:74%}
.cv-art::after{width:112%;opacity:.45}
/* 4% more at the top puts the picture's centre at 52%, the rings' centre, so a centred subject sits inside them */
.cv-art .gart.gart-card{inset:calc(14px + 4%) 16px 14px}
.cv-card.is-landed .cv-art .gart{animation:cvLand .7s var(--ease)}
@keyframes cvLand{from{transform:scale(.93)}to{transform:none}}
@keyframes cvIn{from{opacity:0}}
.cv-track.cv-in .cv-card:not([data-far]){animation:cvIn .55s var(--ease) both}

/* bottom: Play this game + two round buttons, a dotted hairline, the two-line title and a small tagline */
.cv-foot{position:relative;display:grid;gap:14px;padding:0 16px 16px}
.cv-acts{position:relative;z-index:2;display:flex;align-items:center;gap:8px;min-width:0}
.cv-ctl{transition:opacity var(--dur-1) var(--ease) .1s,visibility var(--dur-1) var(--ease) .1s}
.cv-card:not([data-c]) .cv-ctl{opacity:0;visibility:hidden}
.cv-play{flex:0 1 auto;min-width:0;margin-right:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:5px 7px 5px 16px;border:1px solid var(--gold-600);border-radius:var(--radius-1);
  background:transparent;color:var(--ivory-100);font-family:var(--font-body);font-size:11px;font-weight:600;line-height:1;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
/* the label gives way on a narrow card, so the arrow keeps its inset and never touches the border */
.cv-play>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cv-play i{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--gold-500);color:var(--ink-950)}
.cv-play .ico{width:15px;height:15px;stroke-width:1.7}
.cv-play:hover{background:var(--gold-soft);border-color:var(--gold-500);color:var(--gold-300)}
.cv-rb{position:relative;flex:none;width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:50%;background:transparent;border:1px solid var(--hair-strong);color:var(--ivory-100);cursor:pointer;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.cv-rb .ico{width:18px;height:18px;stroke-width:1.5}
.cv-rb:hover{border-color:var(--gold-500);color:var(--gold-300)}
.cv-fav[aria-pressed=true]{color:var(--gold-500);border-color:var(--hair-gold);background:var(--gold-soft)}
.cv-fav[aria-pressed=true] .ico{fill:currentColor}
.cv-info[aria-expanded=true]{color:var(--gold-500);border-color:var(--hair-gold);background:var(--gold-soft)}
.cv-tb{display:grid;gap:8px;padding-top:14px;border-top:1px dotted color-mix(in srgb,var(--stone-400) 55%,transparent)}
.cv-title{margin:0;display:grid;align-content:end;min-height:2em;font-family:var(--font-display);font-weight:500;font-size:clamp(24px,11.4cqw,40px);line-height:.98;letter-spacing:.004em;text-transform:uppercase;
  font-variant-numeric:lining-nums;font-optical-sizing:auto;overflow-wrap:anywhere;color:var(--ivory-100)}
.cv-title span{display:block}
.cv-tag{margin:0;min-height:1.4em;font-family:var(--font-body);font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a narrow card (a phone) has room for "Play" only; the rest stays in the accessible name */
@container card (max-width:305px){.cv-play-x{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cv-play{padding-left:18px}}

/* double-chevron buttons at the far left and right, level with the middle of the cards */
.cv-skip{position:absolute;z-index:4;top:calc(var(--cv-pt) + var(--ch) / 2 - 24px);width:48px;height:48px;padding:0;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--hair-strong);background:color-mix(in srgb,var(--ink-950) 72%,transparent);color:var(--ivory-100);cursor:pointer;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease)}
.cv-skip.prev{left:clamp(8px,2.2vw,28px)}.cv-skip.next{right:clamp(8px,2.2vw,28px)}
.cv-skip .ico{width:20px;height:20px}.cv-skip.next .ico{transform:scaleX(-1)}
.cv-skip:hover:not(:disabled){border-color:var(--gold-500);color:var(--gold-300)}
.cv-skip:disabled,.cv-step:disabled{opacity:.3;cursor:not-allowed}
@container cv (max-width:559px){.cv-skip{width:44px;height:44px}.cv-skip .ico{width:18px;height:18px}.cv-skip.prev{left:6px}.cv-skip.next{right:6px}}

/* dock: the position counter, the arc track with a dot on it, and the small arrows under it */
.cv-dock{position:relative;z-index:2;display:grid;justify-items:center;padding:0 clamp(16px,6cqi,72px) 10px}
.cv-meter{display:grid;grid-template-columns:auto minmax(96px,1fr) auto;align-items:start;gap:clamp(12px,2.4cqi,28px);width:min(100%,780px)}
.cv-count{font-family:var(--font-body);font-size:12px;font-weight:500;line-height:1;letter-spacing:.2em;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--stone-400)}
.cv-count b{font-weight:500;color:var(--gold-300)}
.cv-arc{position:relative;display:block;height:var(--arc-d);margin-top:6px;transition:--t .55s var(--ease)}
.cv-arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cv-arc path{fill:none;stroke:var(--hair-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.cv-dot{position:absolute;left:calc(var(--t) * 100%);top:calc(4 * var(--arc-d) * var(--t) * (1 - var(--t)));width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--gold-500)}
.cv-arrows{display:flex;gap:6px;margin-top:2px}
.cv-step{width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--stone-400);cursor:pointer;transition:color var(--dur-1) var(--ease)}
.cv-step .ico{width:16px;height:16px;stroke-width:1.6}.cv-step.prev .ico{transform:scaleX(-1)}
.cv-step:hover:not(:disabled){color:var(--gold-300)}

/* "Scroll to discover": a small vertical label at the bottom left, wide screens only */
.cv-scroll{display:none}
@container cv (min-width:1000px){
  .cv-scroll{position:absolute;z-index:3;left:14px;bottom:12px;display:grid;place-items:center;width:44px;padding:8px 0;border:0;background:none;cursor:pointer;
    writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;color:var(--stone-400);transition:color var(--dur-1) var(--ease)}
  .cv-scroll:hover{color:var(--gold-300)}
}
.cv-cats,.cv-skip,.cv-step,.cv-play,.cv-rb,.cv-plus,.cv-scroll{touch-action:manipulation}

/* the main menu (lobby) sits on pure black: page, top bar and sidebar, with no grain; the cards keep their own raised surface */
html:has(body[data-view=lobby]),body[data-view=lobby]{--menu-black:#000;background:var(--menu-black)}
body[data-view=lobby] #top,body[data-view=lobby] #nav{background:var(--menu-black)}
body[data-view=lobby]::before{display:none}

/* the title and tagline sit centred under the picture */
.cv-tb{text-align:center;justify-items:center}
.cv-title{justify-items:center}