/* Buzzword bingo (/bingo.html). Rides on styles.css variables and the .person-art sprite. */
.bingo-page>h1 em{font-style:normal;color:var(--accent)}
.bingo-app{margin-top:44px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.bingo-bar{display:flex;flex-wrap:wrap;align-items:end;gap:14px 22px;margin-bottom:26px}
.bingo-meeting{display:grid;gap:6px}
.bingo-meeting select{font:650 15px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;color:var(--ink);background:var(--paper);border:1px solid var(--ink);padding:11px 34px 11px 12px;border-radius:0;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.bingo-cardno{align-self:center;padding-top:16px}
.bingo-cardno a{color:var(--ink);text-decoration:none;border-bottom:1px dashed var(--muted)}
.bingo-actions{display:flex;gap:10px;margin-left:auto}
.bingo-app button.button{font:inherit;font-weight:750;cursor:pointer;background:var(--paper)}
.bingo-app button.button.primary{background:var(--ink);color:#fff}
.bingo-app button.button:active{transform:translateY(2px)}

.bingo-layout{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:40px;align-items:start}
.bingo-board{position:relative}
.bingo-letters{display:grid;grid-template-columns:repeat(5,1fr);background:var(--ink);color:var(--acid);border:2px solid var(--ink);border-bottom:0;font:900 clamp(18px,3.4vw,30px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center}
.bingo-letters span{padding:10px 0 9px}
.bingo-card{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:2px solid var(--ink);box-shadow:0 10px 0 var(--ink);background:var(--paper)}

.bingo-cell{position:relative;aspect-ratio:1/1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;background:var(--paper);color:var(--ink);border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font:750 clamp(11px,1.9vw,17px)/1.12 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.01em;text-align:center;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:background .15s ease}
.bingo-cell:nth-child(5n){border-right:0}
.bingo-cell:nth-last-child(-n+5){border-bottom:0}
.bingo-cell:hover{background:#fbf5e6}
.bingo-cell:focus-visible{outline:3px solid var(--accent);outline-offset:-4px;z-index:1}
.bingo-word{display:block;max-width:100%;transform:rotate(var(--tilt,0deg));overflow-wrap:normal}
.bingo-word.tight{overflow-wrap:anywhere}
.bingo-cell[aria-pressed="true"] .bingo-word{opacity:.78}
.bingo-cell.free{background:var(--acid);cursor:default}
.bingo-cell.free small{font:800 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.bingo-cell.free .bingo-word{opacity:1;font-style:italic}

/* the marker X */
.bingo-x{position:absolute;inset:6%;width:88%;height:88%;pointer-events:none;overflow:visible;mix-blend-mode:multiply}
.bingo-x path{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;opacity:.86;stroke-dasharray:1;stroke-dashoffset:1}
.bingo-cell:not([aria-pressed="true"]) .bingo-x{visibility:hidden}
.bingo-cell[aria-pressed="true"] .bingo-x path{stroke-dashoffset:0}
.bingo-cell.just .bingo-x path{animation:bingo-draw .18s cubic-bezier(.5,0,.6,1) both}
.bingo-cell.just .bingo-x path+path{animation-delay:.14s}
.bingo-cell.free .bingo-x path{stroke:var(--ink);opacity:.22}
@keyframes bingo-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* who said it, revealed when crossed */
.bingo-who{position:absolute;right:4px;bottom:4px;display:flex;opacity:0;transform:scale(.6);transition:opacity .2s ease .25s,transform .25s cubic-bezier(.2,1.6,.4,1) .25s}
.bingo-cell[aria-pressed="true"] .bingo-who{opacity:1;transform:none}
.bingo-who-face{display:block;width:clamp(16px,3.4vw,26px);height:clamp(16px,3.4vw,26px);border-radius:50%;border:1.5px solid var(--ink);margin-left:-6px}
.bingo-who-face:first-child{margin-left:0}

/* winning line */
.bingo-cell.win{background:var(--acid)}
.bingo-cell.win .bingo-x path{opacity:.7}
.bingo-cell.win.free .bingo-x path{stroke:var(--accent);opacity:.7}

/* big stamp */
.bingo-stamp{position:absolute;left:50%;top:52%;z-index:3;pointer-events:none;border:6px solid var(--accent);color:var(--accent);background:rgba(255,253,248,.9);font:900 clamp(44px,10vw,96px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;padding:10px 22px 12px;box-shadow:0 0 0 3px var(--paper);opacity:0;transform:translate(-50%,-50%) rotate(-12deg)}
.bingo-stamp.go{animation:bingo-stamp 3.2s cubic-bezier(.2,1.6,.4,1) both}
@keyframes bingo-stamp{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(2.6)}
  12%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
  16%{transform:translate(-50%,-50%) rotate(-10deg) scale(1.04)}
  20%,78%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(.96)}
}
.bingo-confetti{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:2}
.bingo-confetti i{position:absolute;top:30%;width:9px;height:14px;border:1px solid var(--ink);animation:bingo-fall 1.2s cubic-bezier(.2,.6,.4,1) both}
@keyframes bingo-fall{from{transform:translateY(-120px) rotate(0);opacity:1}to{transform:translateY(340px) rotate(var(--r));opacity:0}}

/* side panel */
.bingo-side{display:grid;gap:22px}
.bingo-talk,.bingo-win{background:var(--paper);border:1px solid var(--ink);box-shadow:0 8px 0 var(--ink);padding:22px}
.bingo-talk>.eyebrow{margin-bottom:14px}
.bingo-locked{display:flex;gap:14px;align-items:center;border:1px dashed var(--line);padding:16px}
.bingo-locked p{margin:0;color:var(--muted)}
.bingo-dots{display:flex;gap:6px}
.bingo-dots i{width:14px;height:14px;border:2px solid var(--ink);border-radius:50%;transition:background .2s ease}
.bingo-dots i.on{background:var(--accent);border-color:var(--accent)}
.bingo-lead{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:14px}
.bingo-lead-face{display:block;width:64px;height:64px;border-radius:50%;border:2px solid var(--ink);box-shadow:0 0 0 3px var(--acid)}
.bingo-callout{font-size:18px;line-height:1.28;letter-spacing:-.01em;margin:0 0 8px}
.bingo-doctrine{margin:0;color:#403c35;font-size:14px}
.bingo-doctrine small{display:block;font:800 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-top:6px}
.bingo-rank{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bingo-rank li{display:grid;grid-template-columns:30px 62px 1fr 22px;gap:10px;align-items:center;font-size:14px;font-weight:700}
.bingo-rank-face{display:block;width:30px;height:30px;border-radius:50%;border:1px solid var(--ink)}
.bingo-rank-bar{height:12px;border:1px solid var(--ink);background:var(--bg)}
.bingo-rank-bar span{display:block;height:100%;background:var(--ink);transition:width .3s ease}
.bingo-rank li.lead .bingo-rank-bar span{background:var(--accent)}
.bingo-rank b{font:800 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:right}

.bingo-win{background:var(--acid);position:relative;overflow:hidden}
.bingo-win-stamp{position:absolute;right:14px;top:16px;transform:rotate(-12deg);border:3px solid var(--accent);color:var(--accent);font:900 20px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;padding:7px 11px;background:rgba(255,253,248,.85)}
.bingo-winner{display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:center;padding-right:80px}
.bingo-winner-face{display:block;width:84px;height:84px;border-radius:50%;border:2px solid var(--ink);background-color:var(--paper)}
.bingo-winner .eyebrow{color:var(--ink);margin-bottom:4px}
.bingo-winner h2{font-size:30px;letter-spacing:-.035em;line-height:1;margin:0}
.bingo-win-arch{margin:4px 0 0;font-weight:750;color:var(--accent)}
.bingo-win-line{font-size:17px;margin:16px 0}
.bingo-win-actions{display:flex;gap:10px;flex-wrap:wrap}
.bingo-error{grid-column:1/-1;padding:40px;margin:0}
.bingo-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media(max-width:900px){
  .bingo-layout{grid-template-columns:1fr;gap:34px}
  .bingo-board{max-width:640px}
}
@media(max-width:560px){
  .bingo-app{margin-top:30px}
  .bingo-bar{gap:12px}
  .bingo-meeting{flex:1 1 100%}
  .bingo-cardno{padding-top:0}
  .bingo-actions{margin-left:auto}
  .bingo-app .bingo-bar .button{padding:10px 13px;font-size:14px}
  .bingo-page>h1{font-size:clamp(38px,11vw,56px)}
  .bingo-board{margin:0 -12px}
  .bingo-cell{padding:2px;gap:1px;font-size:11.5px;line-height:1.06;letter-spacing:-.02em}
  .bingo-word{hyphens:auto;-webkit-hyphens:auto}
  .bingo-x path{stroke-width:7;opacity:.72}
  .bingo-cell.free small{font-size:8px}
  .bingo-who{right:2px;bottom:2px}
  .bingo-who-face{margin-left:-5px;border-width:1px}
  .bingo-talk,.bingo-win{padding:18px}
  .bingo-winner{grid-template-columns:64px 1fr;padding-right:70px}
  .bingo-winner-face{width:64px;height:64px}
  .bingo-winner h2{font-size:24px}
  .bingo-win-stamp{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .bingo-cell.just .bingo-x path{animation:none}
  .bingo-stamp.go{animation-duration:2.4s;animation-timing-function:steps(1,end)}
}