:root{
  --ink:#0E1220; --slate:#161D31; --brass:#C89B3C; --brass-lo:#8A6A24;
  --bone:#EDE3CF; --muted:#8D95AC; --jade:#3BA37F; --blood:#B3382C;
  --r1:#9AA3B5; --r2:#4B7BE5; --r3:#8A4BE5; --r4:#D33C9B; --r5:#E5B23C;
  --cell:92px; --ease:cubic-bezier(.13,.78,.16,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(900px 500px at 50% -10%, #1C2542 0%, rgba(28,37,66,0) 70%), var(--ink);
  color:var(--bone); font-family:"Barlow Semi Condensed",system-ui,sans-serif;
  font-size:17px; line-height:1.45; min-height:100vh;
}
h1,h2,h3{font-family:Cinzel,Georgia,serif;font-weight:700;margin:0;letter-spacing:.01em}
.wrap{max-width:1200px;margin:0 auto;padding:28px 20px 80px}

header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid rgba(200,155,60,.3);padding-bottom:16px;margin-bottom:26px}
h1{font-size:clamp(28px,4.6vw,44px);color:var(--brass);line-height:1}
.sub{color:var(--muted);max-width:54ch;margin-top:8px}
.stamp{font-size:14px;color:var(--muted);text-align:right}
.stamp b{color:var(--bone);font-weight:600}

.cols{display:grid;grid-template-columns:326px 1fr;gap:26px;align-items:start}
@media(max-width:940px){.cols{grid-template-columns:1fr}}

.panel{background:linear-gradient(180deg,var(--slate) 0%,#121829 100%);
  border:1px solid rgba(200,155,60,.22);border-radius:4px;padding:18px}
.panel + .panel{margin-top:18px}
.panel h2{font-size:15px;color:var(--brass);margin-bottom:12px;
  border-bottom:1px solid rgba(200,155,60,.18);padding-bottom:7px;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.panel h2 span{font-family:"Barlow Semi Condensed";font-weight:400;font-size:13px;color:var(--muted)}

.opt{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer}
.opt input{accent-color:var(--brass);width:17px;height:17px;cursor:pointer}
.opt small{color:var(--muted);margin-left:auto;font-size:13px;
  max-width:46%;text-align:right;line-height:1.25;flex:0 1 auto}
.seg{display:flex;border:1px solid rgba(200,155,60,.3);border-radius:3px;overflow:hidden;margin-top:4px}
.seg button{flex:1;background:transparent;border:0;color:var(--muted);padding:9px 4px;
  font-family:inherit;font-size:15px;cursor:pointer;border-right:1px solid rgba(200,155,60,.2)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:rgba(200,155,60,.16);color:var(--bone)}
.seg button:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.field{margin-top:14px}
.field > label{display:block;font-size:14px;color:var(--muted);margin-bottom:5px}
input[type=text]{width:100%;background:#0C1020;border:1px solid rgba(200,155,60,.25);
  color:var(--bone);padding:8px 10px;font-family:inherit;font-size:16px;border-radius:3px}
input[type=text]:focus{outline:2px solid var(--brass);outline-offset:-1px}
input[type=range]{width:100%;accent-color:var(--brass)}
.players{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.link{background:none;border:0;color:var(--brass);font-family:inherit;font-size:14px;
  cursor:pointer;padding:0;text-decoration:underline}

.machine{background:linear-gradient(180deg,#1A2237 0%,#0F1425 100%);
  border:1px solid rgba(200,155,60,.35);border-radius:6px;padding:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.modebar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid rgba(200,155,60,.2);padding-bottom:16px;margin-bottom:18px}
.modelabel{font-family:Cinzel,serif;font-size:13px;color:var(--muted);letter-spacing:.08em}
.modewin{flex:1;min-width:200px;height:58px;overflow:hidden;position:relative;
  background:#090D1A;border:1px solid rgba(200,155,60,.3);border-radius:3px}
.modewin .strip{position:absolute;inset:0;will-change:transform}
.modewin .it{height:58px;display:flex;align-items:center;justify-content:center;
  font-family:Cinzel,serif;font-size:22px;color:var(--brass)}

.row{border-top:1px solid rgba(255,255,255,.06);padding-top:16px;margin-top:16px}
.row:first-of-type{border-top:0;margin-top:0;padding-top:0}
.rowhead{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.rowhead .who{font-family:Cinzel,serif;font-size:17px}
.rowhead .tag{font-size:13px;color:var(--muted)}
.rowhead .bz{font-size:12px;color:#14100A;background:var(--r4);padding:1px 8px;border-radius:2px;
  font-family:Cinzel,serif}
.rowhead .re{margin-left:auto;background:transparent;border:1px solid rgba(200,155,60,.35);
  color:var(--brass);font-family:inherit;font-size:14px;padding:4px 11px;border-radius:3px;cursor:pointer}
.rowhead .re:hover{background:rgba(200,155,60,.12)}
.rowhead .re[disabled]{opacity:.35;cursor:not-allowed}

.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.reel{position:relative;height:var(--cell);overflow:hidden;background:#090D1A;
  border:1px solid rgba(255,255,255,.09);border-radius:3px}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(9,13,26,.95) 0%,rgba(9,13,26,0) 26%,rgba(9,13,26,0) 74%,rgba(9,13,26,.95) 100%)}
.reel .strip{position:absolute;top:0;left:0;right:0;will-change:transform}
.reel .it{height:var(--cell);display:flex;flex-direction:column;justify-content:center;padding:8px 12px;gap:3px}
.reel .kind{font-size:12px;color:var(--muted);letter-spacing:.06em;font-family:Cinzel,serif}
.reel .txt{font-size:16px;line-height:1.25}
.reel .ban{position:absolute;top:3px;right:4px;z-index:2;opacity:0;transition:opacity .2s;
  background:rgba(9,13,26,.8);border:1px solid rgba(255,255,255,.18);color:var(--muted);
  font-family:inherit;font-size:12px;line-height:1;padding:3px 6px;border-radius:2px;cursor:pointer}
.reel.landed .ban{opacity:.75}
.reel .ban:hover{opacity:1;color:var(--blood);border-color:var(--blood)}
.reel.landed{border-color:var(--rc,rgba(255,255,255,.09));
  box-shadow:0 0 0 1px var(--rc,transparent), 0 0 22px -8px var(--rc,transparent)}
.reel.landed .txt{color:var(--rc,var(--bone))}
.r1{--rc:var(--r1)} .r2{--rc:var(--r2)} .r3{--rc:var(--r3)} .r4{--rc:var(--r4)} .r5{--rc:var(--r5)}

.teamcard{border:1px solid rgba(59,163,127,.45);background:rgba(59,163,127,.07);
  border-radius:4px;padding:12px 14px;margin-bottom:14px}
.teamcard .lab{font-family:Cinzel,serif;font-size:13px;color:var(--jade);margin-bottom:3px}
.teamcard .val{font-size:18px}
.betcard{border:1px solid rgba(179,56,44,.5);background:rgba(179,56,44,.08);
  border-radius:4px;padding:12px 14px;margin-bottom:18px}
.betcard .lab{font-family:Cinzel,serif;font-size:13px;color:#E0705F;margin-bottom:3px}
.betcard .val{font-size:18px}

.formatcard{border:1px solid rgba(75,123,229,.45);background:rgba(75,123,229,.08);
  border-radius:4px;padding:12px 14px;margin-bottom:14px}
.formatcard .lab{font-family:Cinzel,serif;font-size:13px;color:var(--r2);margin-bottom:6px}
.formatcard ol{margin:0;padding-left:20px}
.formatcard li{font-size:16px;padding:2px 0}

.drinkcard{border:1px solid rgba(200,155,60,.45);background:rgba(200,155,60,.07);
  border-radius:4px;padding:12px 14px;margin-bottom:18px}
.drinkcard .lab{font-family:Cinzel,serif;font-size:13px;color:var(--brass);margin-bottom:5px}
.drinkcard .val{font-size:17px;margin-bottom:3px}
.drinkcard .val b{color:var(--brass);font-weight:600}
.drinkcard .small{font-size:13px;color:var(--muted);margin-top:7px}

.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px}
.lever{background:linear-gradient(180deg,var(--brass) 0%,var(--brass-lo) 100%);color:#14100A;
  border:0;border-radius:3px;padding:14px 30px;font-family:Cinzel,serif;font-weight:700;
  font-size:18px;cursor:pointer;letter-spacing:.03em}
.lever:hover{filter:brightness(1.08)}
.lever[disabled]{filter:grayscale(.7);cursor:wait}
.ghost{background:transparent;border:1px solid rgba(200,155,60,.35);color:var(--bone);
  padding:12px 16px;font-family:inherit;font-size:16px;border-radius:3px;cursor:pointer}
.ghost:hover{background:rgba(200,155,60,.1)}
.seed{margin-left:auto;font-size:14px;color:var(--muted)}
.seed code{color:var(--brass);font-family:ui-monospace,monospace}

.empty{color:var(--muted);padding:26px 0;text-align:center}
.log{margin-top:22px}
.log li{color:var(--muted);font-size:15px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);list-style:none}
.log ul{margin:0;padding:0}
.note{font-size:14px;color:var(--muted);margin-top:14px}
.warn{color:var(--blood)}
.banlist{font-size:14px;color:var(--muted);margin-top:8px}

@media(prefers-reduced-motion:reduce){.strip{transition:none !important}}
@media(max-width:560px){:root{--cell:100px}.reels{grid-template-columns:1fr}}

/* ============================================================
   ICONS — assets/icons.svg, drawn for this project
   ============================================================ */
.ic{width:1.2em;height:1.2em;flex:0 0 auto;vertical-align:-.2em;margin-right:.4em;opacity:.9;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-txt{display:inline-block;width:auto;stroke:none;margin-right:.3em}
img.ic{stroke:none;object-fit:contain}
.reel .kind{display:flex;align-items:center}
.reel.landed .kind .ic{color:var(--rc,var(--muted));opacity:1}

/* ============================================================
   THE MACHINE, IN MOTION
   Everything here is decoration. Each block is switched off wholesale
   under prefers-reduced-motion at the bottom of this file.
   ============================================================ */
.machine{position:relative}

/* the lever, which is the whole point of a lever */
.leverarm{position:absolute;top:18px;right:-9px;width:18px;height:118px;pointer-events:none;z-index:3}
.leverarm .track{position:absolute;left:7px;top:6px;bottom:6px;width:4px;border-radius:2px;
  background:linear-gradient(180deg,rgba(200,155,60,.45),rgba(200,155,60,.12))}
.leverarm .knob{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#F0D080,var(--brass-lo));
  box-shadow:0 0 10px -2px var(--brass);
  transition:transform .55s cubic-bezier(.3,1.5,.5,1)}
.machine.pulling .leverarm .knob{transform:translateY(100px)}
@media(max-width:940px){.leverarm{display:none}}

/* the lever button dips when you pull it */
.lever{transition:transform .12s ease, filter .2s ease}
.lever:active{transform:translateY(2px)}
.machine.pulling .lever{transform:translateY(3px)}

/* a reel arriving: a short drop, then a sweep of light across the face */
@keyframes seat{0%{transform:translateY(-3px)}60%{transform:translateY(2px)}100%{transform:translateY(0)}}
@keyframes sweep{0%{opacity:0;transform:translateX(-120%)}
  25%{opacity:.75}100%{opacity:0;transform:translateX(120%)}}
.reel.landed{animation:seat .26s ease-out}
.reel.landed::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,var(--rc,#fff) 50%,transparent 65%);
  mix-blend-mode:screen;opacity:0;animation:sweep .7s ease-out}

/* rarer results get a slow breathing glow on top of the sweep */
@keyframes breathe{0%,100%{box-shadow:0 0 0 1px var(--rc),0 0 22px -8px var(--rc)}
  50%{box-shadow:0 0 0 1px var(--rc),0 0 34px -4px var(--rc)}}
.reel.landed.r4,.reel.landed.r5{animation:seat .26s ease-out, breathe 2.4s ease-in-out .3s infinite}
.reel.landed.r5::after{background:
  linear-gradient(180deg,rgba(9,13,26,.95) 0%,rgba(9,13,26,0) 26%,rgba(9,13,26,0) 74%,rgba(9,13,26,.95) 100%),
  radial-gradient(120% 90% at 50% 50%,rgba(229,178,60,.16),transparent 70%)}

/* the mode window flickers as it settles */
@keyframes flick{0%,100%{opacity:1}20%{opacity:.45}30%{opacity:1}45%{opacity:.6}}
.modewin.settled .it{animation:flick .5s ease-out}
.modewin.settled{box-shadow:inset 0 0 22px -6px var(--brass)}

/* the whole cabinet settles once the last reel is home */
@keyframes settle{0%{transform:translateY(0)}35%{transform:translateY(2px)}100%{transform:translateY(0)}}
.machine.settled{animation:settle .3s ease-out}

/* cards arrive rather than appear */
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.teamcard,.betcard,.drinkcard,.formatcard{animation:rise .45s ease-out both}

@media(prefers-reduced-motion:reduce){
  .reel.landed,.reel.landed.r4,.reel.landed.r5,.machine.settled,
  .modewin.settled .it,.teamcard,.betcard,.drinkcard,.formatcard{animation:none}
  .reel.landed::before{display:none}
  .leverarm .knob,.lever{transition:none}
}

/* ============================================================
   THE SMALL PRINT
   ============================================================ */
.legal{max-width:78ch;margin:44px auto 0;padding-top:20px;
  border-top:1px solid rgba(200,155,60,.18);
  font-size:13px;line-height:1.6;color:#6F7897;text-align:center}
.legal p{margin:0 0 9px}
.legal strong{color:var(--muted);font-weight:600}