/* River squeeze overlay */
.sq-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,#1a0b3acc,#05030fee 70%);backdrop-filter:blur(3px);animation:sq-in .28s ease-out;padding:12px;overflow:auto}
.sq-overlay.sq-closing{animation:sq-out .22s ease-in forwards}
@keyframes sq-in{from{opacity:0}to{opacity:1}}@keyframes sq-out{to{opacity:0}}
.sq-box{position:relative;width:min(520px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;font-family:var(--night-font,system-ui)}
.sq-title{text-align:center}.sq-title small{display:block;letter-spacing:.3em;color:#ff9be6;font-size:11px;font-weight:700}
.sq-title strong{display:block;font:800 28px/1.3 'Shippori Mincho B1',var(--serif,serif);text-shadow:0 0 18px #ff2fd2}
.sq-board{display:flex;gap:6px;align-items:center}
.sq-slot{display:inline-grid;place-items:center;width:38px;height:54px;border:1px dashed #ff8be0aa;border-radius:5px;color:#ff9be6;font-weight:800}
.sq-odds{width:100%;display:flex;flex-direction:column;gap:6px}
.sq-row{display:grid;grid-template-columns:minmax(0,1fr) auto 90px 58px;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:#ffffff0d;border:1px solid #ffffff1a;font-size:13px}
.sq-row.sq-me{border-color:#4fd0ff88;background:#4fd0ff14}
.sq-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.sq-hole{display:flex;gap:3px}.sq-hole .playing-card{transform:scale(.8);margin:-5px -3px}
.sq-bar{height:6px;border-radius:9px;background:#ffffff1f;overflow:hidden}.sq-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff3fc6,#4fd0ff);transition:width .6s ease}
.sq-row b{text-align:right;font-variant-numeric:tabular-nums}
.sq-row.sq-won{border-color:#ffd56a;background:#ffd56a1f}.sq-row.sq-won b{color:#ffd56a}.sq-row.sq-lost{opacity:.55}
.sq-hint{margin:0;font-size:13px;color:#f1d6ec}.sq-hint b{color:#ffd56a;font-size:16px}
.sq-stage{perspective:900px}
.sq-card{position:relative;width:min(44vw,210px);aspect-ratio:63/88;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.sq-card:active{cursor:grabbing}
.sq-card:focus-visible{outline:2px solid #4fd0ff;outline-offset:4px;border-radius:12px}
.sq-face{position:absolute;inset:0;border-radius:12px;background:#fbf8f2;color:#15161d;display:grid;place-items:center;border:1px solid #d9d2c3;overflow:hidden}
.sq-face.sq-red{color:#d8203c}
.sq-face>span{font-size:min(22vw,104px);line-height:1}
.sq-face>b{position:absolute;left:10%;top:6%;display:flex;flex-direction:column;align-items:center;font:800 min(9vw,40px)/1 Georgia,serif}
.sq-face>b i{font-style:normal;font-size:.7em}
.sq-face>b.sq-flip{left:auto;top:auto;right:10%;bottom:6%;transform:rotate(180deg)}
/* Pips of a real deck between the corner indices; the lower half is upside down. */
.sq-face{container-type:inline-size}
.sq-pips{position:absolute;inset:18% 29%}
.sq-face>b{left:7%;top:4.5%;font-size:14cqw}
.sq-face>b.sq-flip{right:7%;bottom:4.5%}
.sq-pips i{position:absolute;font-style:normal;line-height:1;font-size:min(7vw,30px);font-size:15cqw;transform:translate(-50%,-50%)}
.sq-pips i.down{transform:translate(-50%,-50%) rotate(180deg)}
.sq-face.rank-A>span{font-size:min(26vw,120px)}


.sq-card>.sq-face{visibility:hidden}
/* The face-down card. The part still on the felt is clipped to one side of the fold line. */
.sq-back-wrap{position:absolute;inset:0;border-radius:12px;overflow:hidden;filter:drop-shadow(0 18px 24px #000a)}
.sq-back{position:absolute;inset:0;border-radius:12px;background:repeating-linear-gradient(45deg,#2b1250 0 8px,#3a1a6b 8px 16px);border:6px solid #f4eefc;box-shadow:inset 0 0 0 2px #ff6fd8}
.sq-back:after{content:'♠';position:absolute;inset:0;display:grid;place-items:center;font-size:48px;color:#ff9be6;text-shadow:0 0 14px #ff3fc6}
/* The folded-back part: the card's face, turned over the fold line, with its own shadow on the card. */
.sq-flap{position:absolute;inset:0;pointer-events:none;display:none;filter:drop-shadow(0 6px 10px #0008)}
.sq-flap.on{display:block}
.sq-flap-face{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}
.sq-flap-face .sq-face{border-radius:12px}
.sq-flap-shine{position:absolute;inset:0;pointer-events:none}
/* Opening: the folded card is replaced by the whole card turning face up. */
.sq-opened .sq-back-wrap,.sq-opened .sq-flap{display:none}
.sq-opened.sq-overlay .sq-card>.sq-face{visibility:visible;animation:sq-turn .45s cubic-bezier(.2,.8,.3,1.2);box-shadow:0 18px 28px #000a}
@keyframes sq-turn{from{transform:rotateY(-90deg) scale(.96)}to{transform:none}}
.sq-help{margin:0;font-size:12px;color:#c9c3e6}
.sq-actions{display:flex;gap:10px}
.sq-open{min-width:140px;min-height:46px;border:0;border-radius:999px;background:linear-gradient(180deg,#ff6fd8,#c2189a);color:#fff;font:800 18px/1 var(--night-font,system-ui);letter-spacing:.2em;box-shadow:0 0 22px #ff3fc699,inset 0 -3px 0 #0003;cursor:pointer}
.sq-result{display:flex;flex-direction:column;align-items:center;gap:10px}
.sq-result strong{font:800 34px/1 'Shippori Mincho B1',var(--serif,serif);animation:sq-pop .5s cubic-bezier(.2,.9,.3,1.4)}
.sq-result.sq-good strong{color:#ffd56a;text-shadow:0 0 22px #ffb300}.sq-result.sq-bad strong{color:#c9c3e6}
@keyframes sq-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.sq-done{min-height:42px;padding:0 22px;border-radius:999px;border:1px solid #ffffff66;background:#ffffff14;color:#fff;font-weight:700;cursor:pointer}
.sq-skip{position:absolute;right:-4px;top:-4px;width:40px;height:40px;border-radius:50%;border:1px solid #ffffff44;background:#0b0620cc;color:#fff;font-size:20px;cursor:pointer}
@media (max-height:700px){.sq-card{width:min(34vw,150px)}.sq-title strong{font-size:22px}}
@media (prefers-reduced-motion:reduce){.sq-overlay,.sq-result strong,.sq-opened.sq-overlay .sq-card>.sq-face{animation:none}}
.sq-actions[hidden],.sq-help[hidden],.sq-result[hidden]{display:none}