/* The list card. Same deck, rail, and hard shadow as .join.
   The plates are the choice. X is the only button. */
.markline{margin-top:12px;font-size:14px;line-height:1.4;color:var(--paper)}
.jwalk .steps{display:flex;gap:6px;margin:0 0 16px}
.jwalk .steps i{width:26px;height:3px;border-radius:0;background:var(--rail)}
.jwalk .steps i.on{background:var(--volt)}
.club-plates{display:grid;gap:10px}
.club-plates.side,.club-plates.four{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:559px){ .club-plates.four{grid-template-columns:minmax(0,1fr)} }
.club-plate.wide{grid-column:1 / -1}
.club-plate{display:flex;align-items:flex-start;gap:12px;width:100%;min-width:0;min-height:72px;padding:12px;border-radius:14px;border:2px solid var(--rail);background:var(--card);color:var(--paper);text-align:start;cursor:pointer;font:inherit;white-space:normal;box-shadow:4px 4px 0 var(--void)}
.club-plate .t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.club-plate b{display:block;font-size:15px;color:var(--paper)}
.club-plate span{display:block;color:var(--haze);font-size:13px;line-height:1.35}
.club-plate canvas{width:52px;height:52px;border-radius:12px;background:var(--deck);border:2px solid var(--rail);flex:0 0 auto}
.club-plate.on,.club-plate:hover,.club-plate:focus-visible{border-color:var(--volt)}
.club-plate:focus-visible,.jx:focus-visible{outline:3px solid var(--volt);outline-offset:2px}
.jx{width:100%;margin-top:16px}
.jx:disabled{opacity:.4;cursor:default}
.jwalk .lbl.two{margin-top:16px}
.jwalk .msg{min-height:0;margin:8px 0 0}
@media (prefers-reduced-motion: no-preference) {
  .jwalk{animation:club-arrive .55s cubic-bezier(.18,1.5,.32,1)}
}
@keyframes club-arrive{
  from{opacity:0;transform:translateY(-28px) scale(.96)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce) {
  .jwalk{animation:none}
}

/* The line under Continue with X is what the press agrees to, so it reads as a sentence, not fine print. */
.consent{margin-top:12px;font-size:13px;line-height:1.4;color:var(--paper)}

/* ── the wall: who is on the list, by X photo ──────────────────────────────────────────────────────
   In the done panel. Round photos on the night ground, each with its place on a volt sticker and the
   handle under it; the hard offset under a photo says which side they joined for (punch makes, cool
   collects, both for both). Your own tile is first, ringed in volt. The box scrolls on its own and the
   page keeps scrolling past it. The drift runs only while the wall is on screen and never under reduced
   motion; a newcomer strikes in at the front and settles. */
.crowd{margin:20px 0 4px;padding-top:18px;border-top:2px solid var(--rail)}
.crowd .chead{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.crowd h4{margin:0;font-family:var(--display);font-weight:800;font-size:17px;line-height:1.1;letter-spacing:-.015em}
.crowd .ccount{font-family:var(--display);font-weight:800;font-size:13px;color:var(--volt);white-space:nowrap}
.ckey{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:8px;font-size:12px;line-height:1.4;color:var(--haze)}
.ckey .ck{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.ckey .ck::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--void);box-sizing:content-box}
.ckey .cmk::before{background:var(--punch)}
.ckey .cco::before{background:var(--cool)}
.ckey .cnote{color:#8a81ad}
.cwall{margin-top:12px;max-height:min(318px,56vh);overflow-x:hidden;overflow-y:auto;padding:16px 8px 14px;
       border:2px solid var(--rail);border-radius:18px;scrollbar-width:thin;scrollbar-color:var(--rail) transparent;
       background:radial-gradient(90% 70% at 18% 0%,rgb(106 90 214 / .3),transparent 70%),
                  radial-gradient(70% 60% at 100% 100%,rgb(255 62 165 / .14),transparent 70%),var(--void)}
.cwall:focus-visible{outline:3px solid var(--volt);outline-offset:2px}
.cfaces{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:16px 6px}
.cface{position:relative;min-width:0}
.cface .cbob{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.cface .cring{position:relative;display:block;width:52px;height:52px;border-radius:50%;overflow:hidden;
            border:2px solid var(--void);background:var(--card);box-shadow:3px 3px 0 var(--rail)}
.cface.creator .cring{box-shadow:3px 3px 0 var(--punch)}
.cface.collector .cring{box-shadow:3px 3px 0 var(--cool)}
.cface.both .cring{box-shadow:3px 3px 0 var(--punch),-3px 3px 0 var(--cool)}
.cface .cring img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cface .cmono{display:grid;place-items:center;width:100%;height:100%;font-family:var(--display);font-weight:800;
            font-size:21px;color:var(--volt);background:radial-gradient(120% 90% at 28% 18%,var(--card),var(--deck) 72%)}
.cface .cplace{position:relative;z-index:1;margin-top:-9px;padding:1px 6px;border-radius:999px;border:2px solid var(--void);
           background:var(--volt);color:var(--void);font-family:var(--display);font-weight:800;font-size:10px;
           line-height:1.3;letter-spacing:-.01em;white-space:nowrap;transform:rotate(-4deg)}
.cface .chandle{display:block;min-width:0;max-width:100%;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
           font-size:11px;font-weight:700;color:var(--paper)}
.cface.me .cring{border-color:var(--volt);box-shadow:0 0 0 3px var(--volt),5px 5px 0 var(--punch)}
.cface.me .chandle{color:var(--volt)}
.cface .cyou{position:absolute;top:-11px;left:50%;z-index:2;padding:1px 7px;border-radius:999px;border:2px solid var(--void);
           background:var(--punch);color:var(--paper);font-weight:700;font-size:10px;line-height:1.3;letter-spacing:.06em;
           text-transform:uppercase;transform:translateX(-50%) rotate(3deg)}
.cmore{width:100%;margin-top:18px}
.cjoin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-top:12px;
       padding:12px 14px;border-radius:14px;border:2px dashed var(--line);background:rgb(255 225 77 / .05)}
.cjoin p{margin:0;flex:1 1 180px;font-size:13px;line-height:1.4;color:var(--paper)}
@media (prefers-reduced-motion: no-preference) {
  .crowd.on .cface .cbob{animation:crowd-drift var(--t,5s) ease-in-out var(--d,0s) infinite alternate}
  .cface.arrive{animation:crowd-strike .8s cubic-bezier(.18,1.5,.32,1) var(--s,0ms) both}
  .cface.arrive .cbob::before{content:"";position:absolute;top:0;left:50%;width:52px;height:52px;margin-left:-26px;
                            border-radius:50%;border:3px solid var(--volt);pointer-events:none;
                            animation:crowd-burst .7s ease-out var(--s,0ms) both}
}
@media (prefers-reduced-motion: reduce) {
  .cface .cbob,.cface.arrive,.cface.arrive .cbob::before{animation:none}
}
@keyframes crowd-drift{
  from{transform:translate(-1px,-2px) rotate(-2deg)}
  to{transform:translate(1px,3px) rotate(2deg)}
}
@keyframes crowd-strike{
  0%{opacity:0;transform:scale(2.2) rotate(-14deg)}
  40%{opacity:1;transform:scale(.84) rotate(5deg)}
  65%{transform:scale(1.08) rotate(-2deg)}
  100%{opacity:1;transform:none}
}
@keyframes crowd-burst{
  from{opacity:.95;transform:scale(.7)}
  to{opacity:0;transform:scale(2.1)}
}