/* The lineup slot machine (lineup-machine.js). Square edges, hard shadows, tape: the site's street-poster language. */
#website.society-bold .lineup-machine{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:center;background:var(--paper);padding-top:clamp(44px,4.5vw,64px);padding-bottom:clamp(44px,4.5vw,64px)}
#website.society-bold .lm-copy h2{margin:0;font:900 clamp(52px,6.4vw,104px)/.86 var(--display);letter-spacing:-.03em;text-transform:uppercase}
#website.society-bold .lm-lede{max-width:40ch;margin:0;font-size:16px;line-height:1.55;color:#302e2b}
.lm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(14px,2vw,28px);margin-bottom:22px}
.lm-polaroid{flex:0 0 clamp(118px,12vw,168px);margin:0;padding:8px 8px 32px;background:#fbfaf5;box-shadow:0 18px 30px -16px #14120fa6;transform:rotate(5deg);perspective:700px;position:relative}
.lm-polaroid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#e6e4dc}
.lm-polaroid figcaption{position:absolute;left:10px;bottom:8px;font:400 clamp(13px,1.3vw,17px)/1 'Permanent Marker',cursive;color:#14120f;white-space:nowrap}

.lm-cab{position:relative;padding:40px clamp(14px,2vw,24px) 22px;background:#14120f;color:#f6f5ef;box-shadow:inset 0 0 0 4px #14120f,inset 0 0 0 6px var(--lemon),10px 10px 0 var(--lemon)}
.lm-lights{position:absolute;top:15px;right:clamp(14px,2vw,24px);width:max(0px,min(42%,calc(100% - 300px)));width:max(0px,calc(round(down,min(42%,100% - 300px),32px) - 8px));height:8px;background:radial-gradient(circle at 4px 4px,var(--lemon) 0 2.6px,#0000 3.2px) 0 0/32px 8px repeat-x,radial-gradient(circle at 20px 4px,#514e49 0 2.6px,#0000 3.2px) 0 0/32px 8px repeat-x;opacity:.45}
.lm-cab.is-spinning .lm-lights{opacity:1;animation:lm-chase .2s steps(2) infinite}
.lm-cab.is-won .lm-lights{animation:lm-blink .9s steps(1) 1 forwards}
@keyframes lm-chase{to{background-position:32px 0,32px 0}}
@keyframes lm-blink{0%,33%,66%{opacity:1}16%,50%,83%{opacity:.15}100%{opacity:.45}}
.lm-marquee{position:absolute;top:-20px;left:22px;padding:7px 18px 9px;background:var(--lemon);color:#14120f;font:400 clamp(22px,2.4vw,30px)/1 'Permanent Marker',cursive;transform:rotate(-2deg);box-shadow:3px 3px 0 #14120f}

.lm-window{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:12px;background:#2a2825;box-shadow:inset 0 8px 16px #000c,inset 0 -4px 10px #0008}
.lm-reel{--h:132px;position:relative;container-type:inline-size;height:var(--h);overflow:hidden;background:#f6f5ef;transition:opacity .3s,filter .3s}
/* The drum: darker at the top and bottom edge, as a curved reel looks behind glass. */
.lm-reel::before,.lm-reel::after{content:'';position:absolute;left:0;right:0;height:26%;z-index:2;pointer-events:none}
.lm-reel::before{top:0;background:linear-gradient(#14120f8c,#14120f00)}
.lm-reel::after{bottom:0;background:linear-gradient(#14120f00,#14120f8c)}
.lm-strip{will-change:transform}
.lm-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--h);padding:0 4px;color:#14120f;text-align:center;border-bottom:1px solid #d6d3ca}
/* Long tickers (CASHCAT) shrink to the reel width instead of running past it. */
.lm-card b{font:900 min(clamp(22px,2.3vw,34px),(100cqi - 10px) / (var(--n,4) * .56))/1 var(--display);letter-spacing:.01em;white-space:nowrap}
.lm-card small{max-width:100%;overflow:hidden;font:500 11px/1.2 var(--mono);white-space:nowrap;text-overflow:ellipsis;color:#55524c}
.lm-card i{font:600 9px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#8d8a85}
.lm-card.is-crypto{background:var(--lemon)}
.lm-card.is-crypto i{color:#14120f}
.lm-card.is-blank{background:repeating-linear-gradient(135deg,#d6d3ca 0 6px,#e6e4dc 6px 12px)}
.lm-card.is-blank b{color:#8d8a85}
.lm-reel.is-off{opacity:.4;filter:grayscale(1)}
/* The last reel: the others dim, it glows and pulses until it stops. */
.lm-cab.is-tense .lm-reel:not(.is-hot):not(.is-off){opacity:.5}
.lm-reel.is-hot{z-index:1;box-shadow:0 0 0 3px var(--lemon),0 0 26px 4px #d8fa2299;animation:lm-hot .28s steps(1) infinite}
@keyframes lm-hot{50%{box-shadow:0 0 0 3px #f6f5ef,0 0 14px 2px #d8fa2255}}
.lm-cab.is-tense .lm-lights{animation-duration:.09s}
.lm-cab.is-max .lm-lights{animation:lm-strobe .16s steps(1) 10 forwards}
@keyframes lm-strobe{0%{opacity:1}50%{opacity:.1}100%{opacity:1}}
.lm-cab.is-max{box-shadow:inset 0 0 0 4px #14120f,inset 0 0 0 6px var(--lemon),10px 10px 0 var(--lemon),0 0 60px #d8fa2266}
.lm-reel.is-landed{animation:lm-land .45s ease-out}
@keyframes lm-land{0%{box-shadow:inset 0 0 0 3px var(--lemon)}100%{box-shadow:inset 0 0 0 0 var(--lemon)}}

.lm-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}
/* The LED readout: pull count, the result and its odds. */
.lm-led{position:relative;flex:1;min-width:0;max-width:300px;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:7px 34px 7px 12px;background:#0a0908;box-shadow:inset 0 2px 8px #000,inset 0 0 0 1px #2a2825;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#6f7d1a}
.lm-led-main{overflow:hidden;font:700 13px/1.1 var(--mono);letter-spacing:.08em;white-space:nowrap;text-overflow:ellipsis;color:var(--lemon);text-shadow:0 0 8px #d8fa2299}
.lm-led[data-state="rolling"] .lm-led-main{animation:lm-led-blink .5s steps(1) infinite}
.lm-led[data-state="max"] .lm-led-main{color:#ffd23f;text-shadow:0 0 10px #ffd23fcc;animation:lm-led-blink .22s steps(1) 6}
@keyframes lm-led-blink{50%{opacity:.25}}
.lm-sound{position:absolute;top:50%;right:8px;width:22px;height:22px;margin-top:-11px;padding:0;border:0;background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23716e69' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z'/%3E%3Cpath d='M17 9l4 6M21 9l-4 6'/%3E%3C/svg%3E");cursor:pointer}
.lm-sound.is-on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8fa22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E")}
.lm-sound:focus-visible{outline:2px solid #f6f5ef;outline-offset:2px}
/* The lever, on the cabinet's right side from 1100px. The arm pivots at the base; pulled, it flips past it. */
.lm-lever{display:none;position:absolute;top:40px;right:-50px;width:40px;height:150px;padding:0;border:0;background:none;cursor:pointer}
.lm-lever-base{position:absolute;left:0;top:86px;width:30px;height:46px;border-radius:0 8px 8px 0;background:linear-gradient(90deg,#14120f,#2a2825 70%,#14120f)}
.lm-lever-arm{position:absolute;left:11px;top:24px;width:9px;height:84px;background:linear-gradient(90deg,#77746e,#f6f5ef 45%,#8d8a85);transform-origin:50% 100%;border-radius:4px 4px 0 0}
.lm-lever-arm b{position:absolute;left:50%;top:-30px;width:36px;height:36px;margin-left:-18px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ffb3ab 0 12%,#e34948 42%,#8f1d1b 100%);box-shadow:0 4px 0 #14120f55}
.lm-lever:hover .lm-lever-arm{transform:rotate(4deg)}
.lm-lever-arm{transition:transform .15s}
.lm-size{display:flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#b1afac}
.lm-size ol{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.lm-size li{display:grid;place-items:center;width:32px;height:32px;border:1.5px solid #514e49;color:#8d8a85;font:900 18px/1 var(--display);transition:background .08s,color .08s,border-color .08s}
.lm-size li.is-on{background:var(--lemon);border-color:var(--lemon);color:#14120f;box-shadow:0 0 18px #d8fa2266}
#website.society-bold .lm-pull{min-height:58px;padding:0 34px;border:0;background:var(--lemon);color:#14120f;font:900 28px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 0 #8aa30f;transform:translateY(0);transition:transform .08s,box-shadow .08s}
#website.society-bold .lm-pull:hover{background:#e6ff4d}
#website.society-bold .lm-pull:active{transform:translateY(5px);box-shadow:0 1px 0 #8aa30f}
#website.society-bold .lm-pull:focus-visible{outline:3px solid #f6f5ef;outline-offset:3px}
#website.society-bold .lm-pull:disabled{cursor:progress;transform:translateY(5px);box-shadow:0 1px 0 #8aa30f}

.lm-stamp{position:absolute;left:-12px;right:-12px;bottom:38px;z-index:3;padding:4px;border:3px solid #e34948;color:#e34948;background:#fbfaf5e6;font:700 clamp(9px,.85vw,12px)/1.15 var(--mono);letter-spacing:.06em;text-align:center;text-transform:uppercase;pointer-events:none;opacity:0;transform:scale(1.8) rotate(-22deg)}
.lm-stamp.is-max{border-color:#ffd23f;color:#14120f;background:#ffd23f}
.lm-stamp.is-in{animation:lm-stamp .32s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes lm-stamp{0%{opacity:0;transform:scale(1.8) rotate(-22deg)}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
.lm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(min-width:1100px){.lm-lever{display:block}}
@media(max-width:900px){
  #website.society-bold .lineup-machine{grid-template-columns:1fr}
}
@media(max-width:620px){
  .lm-window{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lm-reel{--h:88px}
  .lm-panel{flex-wrap:wrap}
  #website.society-bold .lm-pull{flex:1}
  .lm-led{order:-1;flex-basis:100%;max-width:none;min-height:44px}
  .lm-lights{width:max(0px,calc(round(down,100% - 270px,32px) - 8px))}
}
@media(prefers-reduced-motion:reduce){
  .lm-reel.is-landed,.lm-stamp.is-in{animation:none}
  .lm-stamp.is-in{opacity:1;transform:rotate(-8deg)}
  .lm-cab .lm-lights,.lm-reel.is-hot,.lm-led-main{animation:none!important}
  #website.society-bold .lm-pull,.lm-size li,.lm-reel{transition:none}
}