/* The Word Bank. Same stage, tiles and type as the game. Motion is transform/opacity
   only and switches off with reduced motion. */
.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bank-shell{position:relative;z-index:1}
.bank-play{background:var(--yellow);color:var(--plum);border:2px solid var(--plum);border-radius:14px;padding:8px 14px;font-weight:1000;font-size:15px;text-decoration:none;box-shadow:0 3px 0 var(--plum)}
.bank-hero{text-align:center;padding-block:4px 18px;color:var(--white)}
.bank-wordmark{margin-block:16px 10px}
.bank-hero h1{display:grid;justify-items:center;gap:2px;margin-block-start:22px}
.bank-total{font-size:clamp(48px,15vw,76px);font-weight:1000;line-height:1;letter-spacing:-1.5px;text-shadow:0 4px 0 var(--plum);font-variant-numeric:tabular-nums}
.bank-total-label{font-size:15px;font-weight:1000;letter-spacing:1.5px;text-transform:uppercase}
.bank-sub{font-size:14px;font-weight:800;line-height:1.5;margin-block-start:12px;opacity:.95}

.bank-tabs{display:flex;gap:6px;padding:5px;margin-block:4px 16px;border-radius:20px;background:var(--plum);box-shadow:0 4px 0 color-mix(in oklch,var(--plum),black 25%)}
.bank-tabs button{flex:1;min-block-size:46px;border-radius:15px;background:transparent;color:var(--white);font-size:16px;font-weight:1000}
.bank-tabs button[aria-selected="true"]{background:var(--yellow);color:var(--plum)}
.tab-count{display:inline-grid;place-items:center;min-inline-size:24px;padding-inline:6px;border-radius:12px;background:var(--pink);color:var(--plum);font-size:13px;margin-inline-start:4px}

.bank-controls{position:sticky;inset-block-start:0;z-index:5;display:grid;gap:8px;padding:10px;margin-inline:-10px;border-radius:0 0 20px 20px;background:color-mix(in oklch,oklch(66% .17 285) 92%,transparent)}
.bank-search{display:flex}
.bank-search input{flex:1;min-block-size:46px;border:3px solid var(--plum);border-radius:16px;padding-inline:16px;font-size:max(17px,1rem);font-weight:900;color:var(--plum);background:var(--white);box-shadow:0 3px 0 var(--plum)}
.bank-search input::placeholder{color:color-mix(in oklch,var(--plum) 45%,transparent)}
.segmented{display:flex;gap:4px;padding:4px;border-radius:15px;background:var(--plum)}
.segmented button{flex:1;min-block-size:40px;padding-inline:12px;border-radius:11px;background:transparent;color:var(--white);font-size:14px;font-weight:1000;white-space:nowrap}
.segmented button[aria-pressed="true"]{background:var(--yellow);color:var(--plum)}
.segmented.small button{min-block-size:36px;font-size:13px}
.bank-toggles{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:10px 2px;margin-inline-end:30px}
.bank-toggles::-webkit-scrollbar{display:none}
.toggle-chip{flex:none;min-block-size:38px;padding-inline:14px;border-radius:19px;border:2px solid var(--plum);background:color-mix(in oklch,var(--white) 88%,transparent);color:var(--plum);font-size:13px;font-weight:1000}
.toggle-chip[aria-pressed="true"]{background:var(--mint)}
.sort-label{flex:none;color:var(--white);font-size:12px;font-weight:1000;letter-spacing:1px;text-transform:uppercase;margin-inline-start:4px}
.bank-toggles .segmented{flex:none}

.length-chart{display:flex;align-items:end;gap:4px;block-size:122px;margin-block:16px 6px;margin-inline-end:30px}
.length-bar{flex:1;display:grid;grid-template-rows:1fr auto auto;justify-items:center;align-items:end;block-size:100%;padding:0;background:transparent;color:var(--white);font-weight:1000}
.length-bar .bar{display:block;inline-size:100%;block-size:calc(6px + var(--h)*72px);border-radius:8px 8px 3px 3px;background:var(--plum);border:2px solid color-mix(in oklch,var(--white) 80%,transparent);transform-origin:bottom}
.length-bar .bar-count{font-size:10px;opacity:.9;margin-block-end:3px}
.length-bar .bar-len{font-size:13px;margin-block-start:4px}
.length-bar[aria-pressed="true"] .bar{background:var(--yellow);border-color:var(--plum)}
.length-bar[aria-pressed="true"] .bar-len{color:var(--yellow)}
.bank-result{color:var(--white);font-size:14px;font-weight:900;margin-block:10px 12px;min-block-size:20px}
.bank-result strong{font-size:18px}

.bank-list{position:relative;--cols:3;margin-inline-end:30px}
.bank-row,.bank-head{position:absolute;inset-block-start:0;inset-inline:0;will-change:transform}
.bank-row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:8px;block-size:44px;perspective:500px}
.bank-word{min-inline-size:0;block-size:44px;border-radius:13px;border:2px solid color-mix(in oklch,var(--white) 80%,transparent);background:var(--plum);color:var(--white);font-size:15px;font-weight:1000;letter-spacing:.6px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:6px;box-shadow:0 3px 0 color-mix(in oklch,var(--plum),black 25%)}
.bank-word.long{font-size:12px;letter-spacing:0}
.bank-word.rare{background:color-mix(in oklch,var(--plum) 70%,var(--violet));border-style:dashed}
.bank-word.flagged{background:var(--pink);color:var(--plum);border-color:var(--plum)}
.bank-word:active{transform:translateY(2px);box-shadow:0 1px 0 var(--plum)}
.bank-head{display:flex;align-items:center;gap:12px;block-size:64px;padding-block-start:8px;color:var(--white)}
.head-tile{display:grid;place-items:center;min-inline-size:52px;block-size:52px;padding-inline:8px;border-radius:15px;background:var(--yellow);color:var(--plum);border:3px solid var(--plum);font-size:30px;font-weight:1000;box-shadow:0 4px 0 var(--plum)}
.head-label{font-size:12px;font-weight:1000;letter-spacing:1.5px}
.head-count{margin-inline-start:auto;font-size:13px;font-weight:1000;opacity:.9}
.bank-loading{display:flex;justify-content:center;gap:8px;padding-block:40px}
.bank-loading span{display:grid;place-items:center;inline-size:46px;block-size:50px;border-radius:13px;background:var(--plum);color:var(--white);font-size:28px;font-weight:1000}

.bank-watermark{position:fixed;inset-block-start:34%;inset-inline-end:2vw;z-index:0;font-size:min(46vh,60vw);font-weight:1000;line-height:1;color:color-mix(in oklch,var(--white) 13%,transparent);pointer-events:none;user-select:none;text-transform:uppercase}

.alpha-rail{transition:opacity 200ms,transform 200ms}.alpha-rail:not(.shown){opacity:0;pointer-events:none}
.alpha-rail{position:fixed;inset-inline-end:max(4px,env(safe-area-inset-right));inset-block-start:50%;transform:translateY(-50%);z-index:8;display:flex;flex-direction:column;align-items:center;padding:6px 3px;border-radius:16px;background:color-mix(in oklch,var(--plum) 72%,transparent);touch-action:none;user-select:none;-webkit-user-select:none}
.alpha-rail button{inline-size:22px;block-size:min(19px,calc((80dvh - 12px)/27));padding:0;background:transparent;color:var(--white);font-size:11px;font-weight:1000;line-height:1}
.alpha-rail button.current{color:var(--yellow)}
.rail-bubble{position:fixed;inset-block-start:0;inset-inline-end:46px;z-index:9;display:grid;place-items:center;min-inline-size:64px;block-size:64px;padding-inline:10px;border-radius:18px;background:var(--yellow);color:var(--plum);border:3px solid var(--plum);font-size:38px;font-weight:1000;box-shadow:0 5px 0 var(--plum);pointer-events:none}

.board-intro{color:var(--white);text-align:center;display:grid;justify-items:center;gap:10px;margin-block-end:16px}
.board-intro h2{font-size:30px;font-weight:1000;text-shadow:0 3px 0 var(--plum)}
.board-intro p{font-size:14px;font-weight:800;line-height:1.5;max-inline-size:30rem}
.requests{display:grid;gap:12px;padding-block-end:24px}
.request-card{display:grid;gap:8px;padding:16px;border-radius:22px;background:color-mix(in oklch,var(--white) 94%,var(--mint));color:var(--plum);border:3px solid var(--plum);box-shadow:0 5px 0 var(--plum)}
.request-card.closed{opacity:.7}
.card-word{display:flex;flex-wrap:wrap;gap:4px;padding:0;background:transparent;justify-self:start}
.more{font-size:20px;font-weight:1000;color:var(--plum);align-self:end}
.request-reason{font-size:14px;font-weight:800;line-height:1.45}
.reason-badge{display:inline-block;padding:3px 10px;border-radius:12px;background:var(--plum);color:var(--yellow);font-size:12px;font-weight:1000;margin-inline-end:6px}
.reason-badge.done{background:var(--mint);color:var(--plum)}
.request-by{font-size:12px;font-weight:900;opacity:.7}
.vote-bar{block-size:8px;border-radius:4px;background:color-mix(in oklch,var(--mint) 70%,var(--white));overflow:hidden;border:2px solid var(--plum)}
.vote-bar span{display:block;block-size:100%;inline-size:100%;background:var(--pink);transform-origin:left;transform:scaleX(var(--share))}
.vote-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vote{min-block-size:46px;border-radius:15px;border:3px solid var(--plum);font-size:15px;font-weight:1000;color:var(--plum);box-shadow:0 3px 0 var(--plum)}
.vote strong{margin-inline-start:6px;font-size:17px}
.vote.keep{background:color-mix(in oklch,var(--mint) 45%,var(--white))}.vote.keep[aria-pressed="true"]{background:var(--mint)}
.vote.remove{background:color-mix(in oklch,var(--pink) 40%,var(--white))}.vote.remove[aria-pressed="true"]{background:var(--pink)}
.board-empty{text-align:center;color:var(--white);font-weight:900;display:grid;gap:10px;justify-items:center;padding:30px 10px;border:3px dashed color-mix(in oklch,var(--white) 60%,transparent);border-radius:22px}

.word-sheet{inline-size:min(100%,34rem);max-inline-size:100%;max-block-size:92dvh;margin:auto auto 0;padding:28px 20px calc(24px + env(safe-area-inset-bottom));border:0;border-radius:28px 28px 0 0;background:var(--white);color:var(--plum);box-shadow:0 -6px 0 var(--plum);overflow-y:auto}
.word-sheet::backdrop{background:color-mix(in oklch,var(--plum) 65%,transparent)}
.sheet-close{position:absolute;inset-block-start:12px;inset-inline-end:12px;inline-size:40px;block-size:40px;border-radius:20px;background:color-mix(in oklch,var(--plum) 10%,transparent);color:var(--plum);font-size:16px;font-weight:1000}
.sheet-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-block:8px 16px;perspective:600px}
.sheet-tile{display:grid;place-items:center;inline-size:clamp(28px,calc((100vw - 60px)/var(--n,6) - 5px),54px);aspect-ratio:1;border-radius:22%;background:var(--plum);color:var(--white);border:2px solid color-mix(in oklch,var(--white) 75%,var(--violet));box-shadow:0 4px 0 color-mix(in oklch,var(--plum),black 15%);font-size:clamp(16px,6vw,30px);font-weight:1000}
.sheet-tile:nth-child(3n+2){background:var(--yellow);color:var(--plum);border-color:var(--plum)}
.sheet-tile.mini{inline-size:28px;font-size:15px;border-radius:8px;box-shadow:0 2px 0 var(--plum)}
.sheet-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.meta-chip{padding:6px 12px;border-radius:14px;background:color-mix(in oklch,var(--plum) 8%,transparent);font-size:13px;font-weight:1000}
.meta-chip.points{background:var(--yellow)}.meta-chip.everyday{background:var(--mint)}.meta-chip.rare{background:color-mix(in oklch,var(--violet) 25%,transparent)}
.sheet-define{display:block;text-align:center;margin-block:14px;font-weight:1000;color:var(--violet)}
.sheet-request{display:grid;gap:8px;border-block-start:2px dashed color-mix(in oklch,var(--plum) 20%,transparent);padding-block-start:16px}
.request-status{font-size:13px;font-weight:1000;letter-spacing:1px;text-transform:uppercase;color:var(--violet)}
.request-form{display:grid}
.form-title{font-size:17px;font-weight:900}
.reason-chips{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:10px}
.reason-chip input{position:absolute;opacity:0;pointer-events:none}
.reason-chip span{display:inline-block;padding:9px 13px;border-radius:16px;border:2px solid var(--plum);font-size:13px;font-weight:1000;cursor:pointer}
.reason-chip input:checked+span{background:var(--yellow);box-shadow:0 2px 0 var(--plum)}
.reason-chip input:focus-visible+span{outline:3px solid var(--violet);outline-offset:2px}
.request-form textarea,.request-form input:not([type=radio]){border:2px solid var(--plum);border-radius:14px;padding:10px 12px;font:inherit;font-size:max(16px,1rem);font-weight:800;color:var(--plum)}
.request-form .primary{margin-block-start:16px}
.ask-remove{color:var(--plum)}

@media(prefers-reduced-motion:no-preference){
  .bank-wordmark span{animation:bank-drop 520ms cubic-bezier(.2,.9,.3,1.25) both}
  .bank-wordmark span:nth-child(2){animation-delay:60ms}.bank-wordmark span:nth-child(3){animation-delay:120ms}.bank-wordmark span:nth-child(4){animation-delay:180ms}.bank-wordmark span:nth-child(5){animation-delay:240ms}
  .length-bar .bar{animation:bar-grow 640ms cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(200ms + var(--i)*45ms)}
  .bank-row.enter .bank-word{animation:tile-flip 300ms cubic-bezier(.23,1,.32,1) both;animation-delay:calc(var(--k)*26ms)}
  .bank-head.enter .head-tile{animation:head-pop 360ms cubic-bezier(.2,.9,.3,1.3) both}
  .sheet-tile{animation:tile-flip 380ms cubic-bezier(.23,1,.32,1) both;animation-delay:calc(var(--i)*45ms)}
  .word-sheet[open]{animation:sheet-up 300ms cubic-bezier(.23,1,.32,1)}
  .request-card{animation:card-in 360ms cubic-bezier(.23,1,.32,1) both;animation-delay:calc(var(--n)*40ms)}
  .bank-loading span{animation:loading-bob 900ms ease-in-out infinite alternate;animation-delay:calc(var(--d,0)*1ms)}
  .bank-loading span:nth-child(2){--d:120}.bank-loading span:nth-child(3){--d:240}.bank-loading span:nth-child(4){--d:360}.bank-loading span:nth-child(5){--d:480}
  .vote-bar span{transition:transform 300ms cubic-bezier(.23,1,.32,1)}
}
@keyframes bank-drop{from{transform:translateY(-60px) rotate(-12deg);opacity:0}}
@keyframes bar-grow{from{transform:scaleY(0)}}
@keyframes tile-flip{from{transform:rotateX(-80deg) translateY(8px);opacity:0}to{transform:none;opacity:1}}
@keyframes head-pop{from{transform:scale(.4) rotate(-10deg);opacity:0}}
@keyframes sheet-up{from{transform:translateY(40%);opacity:.4}}
@keyframes card-in{from{transform:translateY(18px) scale(.97);opacity:0}}
@keyframes loading-bob{to{transform:translateY(-12px)}}
@media(min-width:700px){
  .bank-list{margin-inline-end:40px}
  .length-chart{block-size:150px}.length-bar .bar{block-size:calc(6px + var(--h)*100px)}
  .word-sheet{margin-block-end:auto;border-radius:28px;box-shadow:0 6px 0 var(--plum)}
}