/* ---- playing cards ----
   A real card face: an index in two opposite corners, a proper pip layout
   for the spot cards, a court panel for the picture cards, and a lattice
   back. Everything is drawn in CSS, so nothing is fetched. */
.pcard{width:64px;height:92px;border-radius:3px;position:relative;flex-shrink:0;user-select:none;
  background:linear-gradient(157deg,#fffefb 0%,#f6f4ef 52%,#eae7dc 100%);
  color:#111c3a;font-family:var(--hd);font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,0.9) inset,0 3px 10px rgba(5,9,18,0.5),0 0 0 1px rgba(16,26,53,0.35);
  overflow:hidden}
.pcard::after{content:'';position:absolute;inset:3px;border-radius:4px;
  border:1px solid rgba(16,27,57,0.10);pointer-events:none}
.pcard.red{color:#c8102e}

/* corner index, upright top-left and inverted bottom-right */
.pcard .ix{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;
  font-family:var(--hd);font-weight:800;letter-spacing:-0.5px}
.pcard .ix.tl{top:4px;left:5px}
.pcard .ix.br{bottom:4px;right:5px;transform:rotate(180deg)}
.pcard .ix b{font-size:0.82rem;line-height:0.95}
.pcard .ix i{font-size:0.66rem;font-style:normal;line-height:1;margin-top:1px}

/* pip field: three columns by seven rows, the classic layout */
.pcard .pips{position:absolute;left:16px;right:16px;top:8px;bottom:8px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(7,1fr)}
.pcard .pips u{font-style:normal;text-decoration:none;font-size:0.78rem;line-height:1;
  display:flex;align-items:center;justify-content:center}
.pcard .pips u.inv{transform:rotate(180deg)}

/* ace: one large centred suit */
.pcard .ace{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:2.15rem;line-height:1}

/* court cards: a panel with the letter, mirrored the way a real one is */
.pcard .court{position:absolute;left:13px;right:13px;top:11px;bottom:11px;border-radius:4px;
  background:linear-gradient(180deg,rgba(200,16,46,0.10) 0%,rgba(16,27,57,0.06) 50%,rgba(200,16,46,0.10) 100%);
  border:1px solid rgba(16,27,57,0.16);display:flex;flex-direction:column;overflow:hidden}
.pcard.red .court{background:linear-gradient(180deg,rgba(200,16,46,0.14) 0%,rgba(200,16,46,0.05) 50%,rgba(200,16,46,0.14) 100%)}
.pcard .court span{flex:1;display:flex;align-items:center;justify-content:center;
  font-size:1.02rem;line-height:1;gap:2px}
.pcard .court span.b{transform:rotate(180deg)}
.pcard .court em{font-style:normal;font-size:0.62rem;opacity:0.75}

/* back */
.pcard.back{color:rgba(255,255,255,0.55);
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,0.10) 0 2px,transparent 2px 7px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,0.10) 0 2px,transparent 2px 7px),
    linear-gradient(150deg,#35a29b,#21706b 55%,#144945);
  box-shadow:0 3px 10px rgba(5,9,18,0.5),0 0 0 1px rgba(9,20,20,0.6)}
.pcard.back::after{border-color:rgba(255,255,255,0.34);inset:4px;border-radius:4px}
.pcard.back .bk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;color:rgba(255,255,255,0.42)}

/* dealing: a card arrives, it does not appear. The hole card turns over
   rather than swapping, so the reveal reads as a turn of the hand. */
@keyframes szDealIn{
  0%  {opacity:0;transform:translate(26px,-46px) rotate(13deg) scale(0.86)}
  70% {opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes szFlipIn{
  0%  {transform:rotateY(90deg) scale(0.94)}
  55% {transform:rotateY(-12deg) scale(1.02)}
  100%{transform:none}
}
.pcard.new{animation:szDealIn .34s cubic-bezier(.2,.85,.3,1.05) both}
.pcard.flip{animation:szFlipIn .40s ease-out both;backface-visibility:hidden}
@media (prefers-reduced-motion: reduce){
  .pcard.new,.pcard.flip{animation:none}
}
.pcard.kept{box-shadow:0 0 0 3px var(--sz-amber),0 3px 10px rgba(5,9,18,0.5)}
.pcard .keep{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);background:var(--sz-amber);
  color:#0a1123;font-family:var(--mn);font-size:0.52rem;font-weight:700;padding:1px 6px;border-radius:3px;
  display:none;z-index:3}
.pcard.kept .keep{display:block}
.hand-row{display:flex;gap:7px;align-items:center;justify-content:center;flex-wrap:wrap;min-height:88px}
.hand-lab{font-family:var(--mn);font-size:0.66rem;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--sz-mute);width:100%;text-align:center;margin-bottom:2px}
.hand-tot{font-family:var(--mn);font-size:0.9rem;color:var(--sz-amber-hi);font-weight:600}
.hand-box{border:1px solid var(--sz-edge);border-radius:3px;padding:9px;width:100%;max-width:560px}
.hand-box.active{border-color:var(--sz-amber);background:rgba(213,173,73,0.06)}
.act-row{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.act-row .mini{min-width:82px}
.act-row .mini:disabled{opacity:0.35;cursor:not-allowed}

/* ---- pay table shown beside a draw-and-hold board ---- */
.pt{width:100%;max-width:420px;border:1px solid var(--sz-edge);border-radius:3px;overflow:hidden;
  font-family:var(--mn);font-size:0.7rem}
.pt div.h{background:var(--sz-bg3);color:var(--sz-amber);padding:6px 10px;letter-spacing:1px;text-transform:uppercase;font-size:0.62rem}
.pt table{width:100%;border-collapse:collapse}
.pt td{padding:4px 10px;border-top:1px solid var(--sz-line2);color:var(--sz-mute)}
.pt td.m{text-align:right;color:var(--sz-ink)}
.pt tr.hit td{background:rgba(213,173,73,0.2);color:#fff}
.pt tr.hit td.m{color:var(--sz-amber-hi)}

/* ---- number mat ---- */
.ring-wrap{display:grid;grid-template-columns:210px 1fr;gap:14px;align-items:start;width:100%}
.ring-stage{width:210px;max-width:210px;position:relative}
.ring-out{font-family:var(--mn);font-size:0.78rem;color:var(--sz-mute);text-align:center;margin-top:6px}
.ring-out b{color:var(--sz-amber-hi);font-size:1.05rem}
.mat{display:flex;flex-direction:column;gap:5px;min-width:0}
.mat-mode{display:flex;gap:4px;flex-wrap:wrap}
.mat-mode button{flex:1 1 auto;padding:5px 8px;border-radius:3px;border:1px solid var(--sz-edge);
  background:transparent;color:var(--sz-mute);font-size:0.66rem;font-weight:700;cursor:pointer;white-space:nowrap}
.mat-mode button.on{background:var(--sz-blue);border-color:var(--sz-blue-hi);color:#fff}
.mat-num{display:flex;gap:4px;min-width:0}
.mat-zero{display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.mat-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(3,1fr);gap:3px;flex:1;min-width:0}
.mat-cell{position:relative;min-width:0;aspect-ratio:1;border-radius:3px;border:1px solid rgba(5,9,18,0.35);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--mn);font-size:0.62rem;font-weight:600;color:#fff;padding:0}
.mat-cell.a{background:#c39a32}
.mat-cell.b{background:#2a8e87}
.mat-cell.z{background:#5e594e;font-size:0.6rem}
.mat-cell:hover{outline:2px solid var(--sz-amber)}
.mat-cell.pre{outline:2px solid #fff}
.mat-out{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.mat-out2{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.mat-out button,.mat-out2 button{position:relative;padding:7px 3px;border-radius:3px;border:1px solid var(--sz-edge);
  background:var(--sz-bg);color:var(--sz-ink);font-size:0.66rem;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden}
.mat-out button:hover,.mat-out2 button:hover{border-color:var(--sz-amber);color:var(--sz-amber)}
.mat-out2 button.ba{border-color:#c39a32;color:#d2b262}
.mat-out2 button.bb{border-color:#38cbc2;color:#75e8e0}
.wchip{position:absolute;top:-5px;right:-5px;background:var(--sz-amber);color:#0a1123;font-family:var(--mn);
  font-size:0.52rem;font-weight:800;border-radius:999px;padding:0 4px;min-width:15px;text-align:center;z-index:2}
.mat-foot{display:flex;gap:6px;justify-content:space-between;align-items:center;font-family:var(--mn);
  font-size:0.66rem;color:var(--sz-mute);flex-wrap:wrap}
@media(max-width:980px){
  .ring-wrap{grid-template-columns:1fr;justify-items:stretch}
  .ring-stage{width:130px;max-width:130px;margin:0 auto}
  .mat-cell{font-size:0.52rem}
  .pcard{width:46px;height:66px}
  .pcard .r{font-size:1rem}.pcard .s{font-size:0.85rem}
  .hand-row{min-height:68px}
}
@media(max-width:560px){
  .mat-grid{gap:2px}
  .mat-cell{font-size:0.46rem;border-radius:4px}
  .pcard{width:38px;height:55px}
  .pcard .r{font-size:0.85rem}.pcard .s{font-size:0.7rem}
}