/* Bank. The table reuses the Thurupu card table (body.thurupu-mode); these
   rules cover the face-down piles, the playing stack and the result. */
.bank-tile .game-tile-art{background:radial-gradient(ellipse at 30% 25%,#c9a35a44,transparent 60%),linear-gradient(150deg,#2f4f5c,#203a31)}
.bank-tile-art{position:absolute;left:50%;top:50%;width:212px;height:150px;transform:translate(-50%,-50%)}
.bank-tile-art .playing-card{position:absolute;width:92px;height:132px}
.bank-tile-back.one{left:0;top:12px;transform:rotate(-12deg)}
.bank-tile-back.two{left:9px;top:8px;transform:rotate(-8deg)}
.bank-tile-back.three{left:18px;top:4px;transform:rotate(-4deg)}
.bank-tile-face.below{left:74px;top:4px;transform:rotate(3deg)}
.bank-tile-face.top{left:118px;top:12px;transform:rotate(12deg);box-shadow:0 0 0 3px #f3cf7b,0 8px 16px #00000033}
@media (max-width:580px){.bank-tile-art{transform:translate(-50%,-50%) scale(.9)}}
.bank-deck-note{margin-top:-6px}
.bank-rules-card h2{font-size:1.5rem}

/* Seats: a count beside the fan of backs, an "Out" badge once a pile runs out. */
.bank-seats .seat-hand{align-items:flex-end;gap:5px}
.bank-count{font-size:.68rem;font-weight:800;line-height:1;padding:2px 5px;border-radius:8px;background:#0d2e2366;color:#f1ecd2;font-variant-numeric:tabular-nums}
.bank-out-badge{display:inline-block;padding:3px 8px;border-radius:10px;background:#5c3a3299;color:#f6d9cf;font-size:.66rem;font-weight:800;white-space:nowrap}
.table-orbit .seat-circle .player-seat.bank-out{opacity:.7}
.table-orbit .seat-circle .player-seat.bank-winner{border-color:#f3cf7b;background:#6a5a2a99}
.bank-seat-dealing{display:block;width:30px;height:16px}

/* The playing stack in the middle, sized from the free space inside the seats
   (the orbit is a size container; a typed length reaches the cards as pixels). */
@property --bank-card{syntax:'<length>';inherits:true;initial-value:80px}
.bank-orbit{container-type:size}
.table-orbit.bank-orbit .thurupu-center,.audience-board .table-orbit.bank-orbit .thurupu-center{display:flex;align-items:center;justify-content:center;width:auto;grid-template-columns:none;gap:0;z-index:1;pointer-events:none}
.bank-stack{--bank-card:clamp(48px,min(calc((50cqw - var(--seat-width)) * var(--bank-fit, .92)),calc((50cqh - var(--seat-height)) * 1.05)),280px);
  position:relative;width:calc(var(--bank-card) * 1.87);height:calc(var(--bank-card) * 1.43 + 22px);display:block}
/* Six or seven seats put players beside the stack's corners. */
.bank-orbit[data-seat-count="6"] .bank-stack,.bank-orbit[data-seat-count="7"] .bank-stack{--bank-fit:.8}
.bank-stack-card{position:absolute;left:calc(var(--bank-card) * var(--stack-left, .87));top:0;width:var(--bank-card);height:calc(var(--bank-card) * 1.43);
  transform:rotate(calc(var(--stack-index) * 5deg + 2deg));z-index:calc(3 + var(--stack-index))}
.bank-stack-card .playing-card{width:100%;height:100%;border-radius:calc(var(--bank-card) * .1)}
.bank-stack-card .simple-card .card-value{font-size:calc(var(--bank-card) * .4)}
.bank-stack-card .simple-card .card-suit{font-size:calc(var(--bank-card) * .36)}
.bank-stack-empty{position:absolute;left:calc(var(--bank-card) * .435);top:0;width:var(--bank-card);height:calc(var(--bank-card) * 1.43);border:1.5px dashed #ffffff40;border-radius:calc(var(--bank-card) * .1)}
.bank-stack-count{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:.72rem;font-weight:800;color:#e9ecd7;background:#0d2e2366;border-radius:9px;padding:2px 8px;font-variant-numeric:tabular-nums}
.bank-stack.empty .bank-stack-count{opacity:.6}
/* A match: the two cards of the same rank glow while the stack is held. */
.bank-matched .bank-stack-card .playing-card{box-shadow:0 0 0 3px #f3cf7b,0 0 20px #f3cf7baa}
.bank-matched .bank-stack-count{background:#f3cf7b;color:#2f3a22}
/* Timed play: the stack is a button for every player, and it looks exactly
   like the stack at any other table, match or not. */
button.bank-stack{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:12px}
button.bank-stack:disabled{cursor:default;opacity:1}
button.bank-stack:focus-visible{outline:3px solid #f3cf7b;outline-offset:6px}
button.bank-stack::before{content:'';position:absolute;inset:-14px -10px -18px;border-radius:16px}
.bank-in-flight{visibility:hidden}

/* Face Value Bank: face-card counts on the seats, your own face cards beside
   your pile (seen only by you), and the players or stack to offer one to. */
.bank-face-count{display:inline-flex;align-items:center;gap:1px;margin-left:4px;padding:1px 6px;border-radius:9px;background:#f3cf7b;color:#2f3a22;font-size:.68rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.3}
.bank-face-count span{font-size:.7rem}
.bank-hand .bank-own-pile{gap:18px;flex-wrap:wrap}
.bank-faces{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;justify-content:center;max-width:100%}
.bank-face{position:relative;width:58px;height:83px;padding:0;border:0;background:none;border-radius:8px;flex:none;color:inherit;font:inherit}
.bank-face .playing-card{width:100%;height:100%;border-radius:8px}
.bank-face .simple-card .card-value{font-size:1.3rem}
.bank-face .simple-card .card-suit{font-size:1.15rem}
.bank-face-times{position:absolute;right:-6px;top:-6px;z-index:2;padding:1px 6px;border-radius:9px;background:var(--green);color:#fffdf0;font-size:.72rem;font-weight:800}
.bank-face-value{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);z-index:2;padding:0 6px;border-radius:8px;background:#0d2e23;color:#f3cf7b;font-size:.68rem;font-weight:800;white-space:nowrap}
button.bank-face{cursor:pointer;touch-action:manipulation}
button.bank-face .playing-card{box-shadow:0 0 0 3px #f3cf7b,0 0 12px #f3cf7b88}
.bank-faces.choosing:has(.selected) button.bank-face:not(.selected){opacity:.72}
button.bank-face.selected .playing-card{box-shadow:0 0 0 3px #f3cf7b,0 0 16px #f3cf7bcc;transform:translateY(-6px)}
button.bank-face:focus-visible{outline:3px solid #f3cf7b;outline-offset:3px}
.bank-offer-targets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bank-offer-targets .btn{min-height:40px;padding:8px 14px;font-size:.86rem}
.bank-flight{position:absolute;left:0;top:0;will-change:transform,opacity}
.bank-strip .bank-chip{font-weight:700}
.bank-rule-pick{border:1px solid var(--line);border-radius:12px;padding:10px 12px 6px;margin:0;display:grid;gap:4px}
.bank-rule-pick legend{font-size:.78rem;font-weight:650;padding:0 4px}
.bank-rule-pick .option-row{display:flex;gap:10px;align-items:flex-start;padding:6px 2px;cursor:pointer}
.bank-rule-pick .option-row input{margin-top:4px}
.bank-rule-pick .option-row strong{display:block;font-size:.86rem}
.bank-rule-pick .option-row small{display:block;color:var(--muted);font-size:.74rem;line-height:1.45}

/* Your own pile, face down. On your turn it is the button that turns a card. */
.bank-hand .hand-cards{display:flex;justify-content:center;align-items:center;overflow:visible}
.bank-own-pile{display:flex;justify-content:center;align-items:center;min-height:calc(var(--hand-card-height, 128px) + 8px)}
.bank-pile-button{position:relative;width:calc(var(--hand-card-width, 90px) + 24px);height:calc(var(--hand-card-height, 128px) + 10px);padding:0;border:0;background:none;cursor:pointer;border-radius:12px}
.bank-pile-button:disabled{cursor:default;opacity:1}
.bank-pile-layer{position:absolute;left:calc(var(--layer) * 5px);top:calc(var(--layer) * -2px + 8px)}
.bank-pile-layer .playing-card{width:var(--hand-card-width, 90px);height:var(--hand-card-height, 128px)}
.bank-pile-count{position:absolute;right:-4px;bottom:-4px;z-index:9;min-width:28px;padding:3px 7px;border-radius:12px;background:var(--green);color:#fffdf0;font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums}
.bank-pile-button.ready-to-play .bank-pile-layer:last-of-type .playing-card{box-shadow:0 0 0 3px #f3cf7b,0 0 18px #f3cf7b99}
.bank-pile-button.ready-to-play:hover .bank-pile-layer:last-of-type{transform:translateY(-4px)}
@media (prefers-reduced-motion:no-preference){.bank-pile-button.ready-to-play .bank-pile-layer:last-of-type{animation:bank-nudge 1.6s ease-in-out infinite}}
@keyframes bank-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
body.animations-off .bank-pile-button .bank-pile-layer{animation:none}

/* Result. */
.bank-result{display:grid;gap:14px}
.bank-result-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bank-result-face .gh-face{--face:76px}
.bank-result-title{font-family:Georgia,serif;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15;color:#2f4a3a;margin:4px 0 0}
.bank-result-note{font-size:.9rem;color:var(--muted);margin-top:4px}
.bank-order-title{font-size:.95rem;margin-top:4px}
.bank-order{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bank-order li{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #d7decf;border-radius:12px;background:#ffffff9a}
.bank-order li.bank-first{border:2px solid #e3c272;background:#fdf6e3}
.bank-order-place{min-width:38px;font-weight:800;color:#8a6a2e}
.bank-order-face .gh-face{--face:34px}
.bank-order-name{font-weight:700;font-size:1rem}
.bank-order small{margin-left:auto;color:var(--muted)}
.audience-board .bank-result-title{font-size:clamp(2.2rem,3.4vw,3.2rem)}
.audience-board .bank-order-name{font-size:1.3rem}
.bank-scores .score-table td.bank-takes{color:var(--muted);font-weight:500}