/* Rummy columns, spades rows, team cards, deal strip */
/* Deal strip: who throws the cards this round */
  .dealstrip{flex:none;display:flex;align-items:center;gap:10px;padding:8px 12px;background:#101010;border-bottom:1px solid var(--line);}
  .dealstrip .rnd{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;}
  .dealstrip .who{flex:1;font-size:13px;color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .dealstrip .who b{color:var(--gold);font-weight:700;}
  .dealstrip .who .pk{color:var(--green);font-weight:700;}
  .dealstrip .nav{display:flex;gap:6px;}
  .dealstrip .nav button{width:34px;height:30px;border-radius:9px;background:#1e1e1e;color:var(--ink);font-size:15px;font-weight:700;display:grid;place-items:center;}
  .dealstrip .nav button:active{background:#2b2b2b;}
  .dealstrip .nav .next{background:var(--yellow);color:#1a1500;width:auto;padding:0 12px;font-size:13px;}

  .badges{display:flex;justify-content:center;gap:4px;padding:3px 2px 0;min-height:17px;}
  .bdg{font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:5px;white-space:nowrap;}
  .bdg.deal{background:rgba(242,201,76,.18);color:var(--gold);}
  .bdg.pick{background:rgba(52,199,89,.18);color:var(--green);}
  .col.isdealer .name{box-shadow:inset 0 2px 0 var(--gold);}

  /* ---- Spades ---- */
  .col.sp .name{height:44px;}
  .sphead{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;padding:5px 2px;background:#0d0d0c;border-bottom:1px solid var(--line);}
  .sphead span{font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);text-align:center;}
  .sprow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line);}
  .sprow:nth-child(even){background:var(--col-alt);}
  .sprow.cur{background:rgba(242,201,76,.09);box-shadow:inset 2px 0 0 var(--yellow);}
  .sprow span{text-align:center;font-size:16px;font-weight:700;}
  .sprow .await{color:var(--dim2);}
  .sprow .sc{font-size:15px;font-weight:800;color:var(--dim);}
  .sprow .sc.pos{color:var(--green);} .sprow .sc.neg{color:var(--red);}
  .rndbox{font-size:11px;color:var(--dim);letter-spacing:.04em;text-transform:uppercase;font-weight:700;padding:0 4px;white-space:nowrap;}
  .rndbox i{font-style:normal;color:var(--dim2);}
  .controls.sp{gap:8px;padding:12px 4px 14px;}
  .col.sp .total{min-height:64px;}
  .col.sp .total .main.pos{color:var(--green);} .col.sp .total .main.neg{color:var(--red);}
  .col.sp .total .sub{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0 0 1px;}

  .dealstrip .splane{display:flex;align-items:center;gap:10px;}
  .dealstrip .nav{align-items:center;}
  .infobtn{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--dim2);color:var(--dim);
           font-size:13px;font-weight:800;font-style:italic;font-family:Georgia,serif;display:grid;place-items:center;
           line-height:1;flex:none;margin-right:2px;}
  .infobtn:active{background:#262626;color:var(--ink);}
  .rbig{color:var(--yellow);font-size:15px;}
  .rchips{display:flex;gap:6px;overflow-x:auto;padding:8px 0 2px;-webkit-overflow-scrolling:touch;}
  .rchip{flex:none;min-width:30px;height:30px;padding:0 8px;border-radius:15px;background:#1c1c1c;color:var(--dim);font-size:13px;font-weight:700;display:grid;place-items:center;}
  .rchip.done{color:var(--ink);background:#262626;}
  .rchip.on{background:var(--yellow);color:#1a1500;}
  .rchip.lock{background:#241416;color:#c2555a;font-size:12px;}
  .spdone{margin-top:6px;font-size:12px;color:var(--green);font-weight:600;}

  .cglabel{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:12px 2px 7px;}
  .numgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
  .numchip{height:42px;border-radius:11px;background:#262626;font-size:16px;font-weight:700;}
  .numchip.on{background:var(--yellow);color:#1a1500;}
  .numchip:active{background:#3a3a3a;}
  .cgscore{text-align:center;font-size:15px;color:var(--dim);margin:16px 0 4px;}
  .cgscore b{font-size:30px;margin-left:8px;color:var(--ink);}
  .cgscore b.pos{color:var(--green);} .cgscore b.neg{color:var(--red);}
  .rulelist{display:flex;flex-direction:column;gap:7px;}
  .rule{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:#1e1e1e;border-radius:11px;padding:10px 13px;}
  .rule span{color:var(--dim);font-size:12.5px;line-height:1.3;}
  .rule b{font-size:14px;font-weight:700;text-align:left;line-height:1.35;color:var(--ink);}
  .rule b.pos{color:var(--green);} .rule b.neg{color:var(--red);}
  /* compact two-column form for short value pairs (examples) */
  #rulesEx .rule{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;}
  #rulesEx .rule b{text-align:right;white-space:nowrap;}
  #rulesSheet{max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}

  .cbtn.enter{background:var(--green);color:#06210c;}
  .cbtn.enter svg{width:52%;height:52%;}
  .lockmsg{font-size:9px;font-weight:700;color:var(--dim2);letter-spacing:.02em;text-transform:none;margin-left:6px;}
  .lockedval{background:#1a1a1a;border:1px dashed #333;border-radius:11px;padding:12px;text-align:center;font-size:26px;font-weight:800;color:var(--dim);}
  .savebtn{width:100%;height:46px;margin-top:10px;background:rgba(52,199,89,.18);color:var(--green);}
  .savebtn:active{background:rgba(52,199,89,.3);}
  .numchip.dis{opacity:.3;}

  .bagline{font-size:9.5px;font-weight:700;color:var(--dim);letter-spacing:.04em;text-transform:uppercase;margin-top:2px;}
  .bagline.warn{color:var(--orange);}
  .bagline .pen{color:var(--red);font-weight:800;}

  /* ---- Spades Partners (team mode) ---- */
  .board.teamboard{display:block;overflow-y:auto;overflow-x:hidden;padding:10px 10px 30px;}
  .tmhead{display:flex;gap:8px;margin-bottom:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;}
  .tmhead::-webkit-scrollbar{display:none;}
  .tmhead>*{flex:0 0 auto;min-width:118px;}
  .tgt{min-width:150px;}
  .countrow{display:flex;gap:8px;padding:12px 14px;}
  .cbtn2{flex:1;height:44px;border-radius:11px;background:#262626;color:var(--dim);font-size:16px;font-weight:800;}
  .cbtn2.on{background:var(--yellow);color:#1a1500;}
  .tgt,.tmtile{background:#131313;border:1px solid #202020;border-radius:14px;padding:10px;}
  .tgtlab,.tl{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
  .tgtval{font-size:28px;font-weight:800;color:var(--yellow);line-height:1.1;}
  .tgtsub{font-size:9.5px;color:var(--dim2);margin-top:2px;}
  .tmtile .tv{font-size:26px;font-weight:800;line-height:1.15;}
  .tmtile .tv.pos{color:var(--green);} .tmtile .tv.neg{color:var(--red);}
  .tmtile .bar{height:6px;border-radius:4px;background:#262626;overflow:hidden;margin:5px 0 3px;}
  .tmtile .bar i{display:block;height:100%;background:var(--green);border-radius:4px;}
  .tmtile .tsub{font-size:10px;color:var(--dim);}

  .tmcard{background:#0f0f0f;border:1px solid #202020;border-radius:16px;padding:12px;margin-bottom:12px;}
  .tmname{text-align:center;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);margin-bottom:10px;}
  .tmwin{color:var(--green);letter-spacing:0;text-transform:none;font-size:12px;}
  .tmgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .tmcell{background:#151515;border-radius:12px;padding:10px 8px;text-align:center;}
  .tmcell:only-child{grid-column:1 / -1;}
  .tmp{font-size:16px;font-weight:800;margin-bottom:6px;}
  .tmp .dot{font-size:11px;}
  .tmsub{display:grid;grid-template-columns:1fr 1fr 1fr;font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);}
  .tmval{display:grid;grid-template-columns:1fr 1fr 1fr;font-size:20px;font-weight:800;margin-top:1px;align-items:baseline;}
  .tmval .await{color:var(--dim2);}
  .tmval .psc{font-size:18px;}
  .tmval .psc.pos{color:var(--green);} .tmval .psc.neg{color:var(--red);} .tmval .psc.zero{color:var(--dim);}
  .tmnil{min-height:18px;margin-top:4px;}
  .niltag{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:8px;border:1px solid var(--dim2);color:var(--dim);}
  .niltag.ok{border-color:var(--green);color:var(--green);}
  .niltag.bad{border-color:var(--red);color:var(--red);}
  .tmbtns{display:flex;justify-content:center;gap:14px;margin-top:8px;}
  .tmbtns .cbtn,
  .tmbtns .cbtn.enter,
  .tmbtns .cbtn.trash{width:36px;height:36px;font-size:20px;}
  .tmbtns .cbtn svg,
  .tmbtns .cbtn.enter svg,
  .tmbtns .cbtn.trash svg{width:56%;height:56%;display:block;}
  .tmsum{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;background:#151515;border-radius:12px;padding:9px 6px;margin-top:10px;text-align:center;}
  .tmsum .k{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);}
  .tmsum .v{font-size:20px;font-weight:800;}
  .tmsum .v.pos{color:var(--green);} .tmsum .v.neg{color:var(--red);}
  .tmtotal{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:9px;padding-top:9px;border-top:1px solid #202020;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
  .tmtotal b{font-size:22px;letter-spacing:0;}
  .tmtotal b.pos{color:var(--green);} .tmtotal b.neg{color:var(--red);}
  .tmbags{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin-left:8px;}
  .tmbags.warn{color:var(--orange);}
  .tmbags em{font-style:normal;color:var(--red);}
  .tmempty{grid-column:1 / -1;color:var(--dim);font-size:12px;text-align:center;padding:14px;}
  .numchip.nil{border:1px solid #3a3a2a;}

  .verline{text-align:center;color:var(--dim2);font-size:11px;margin:22px 0 6px;}
  .teamsel{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
  .tsel{height:46px;border-radius:12px;background:#2c2c2e;color:var(--dim);font-size:15px;font-weight:700;}
  .tsel.on{background:var(--yellow);color:#1a1500;}
  .teambadge{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:9px;}
  .teambadge.t1{background:rgba(242,201,76,.18);color:var(--yellow);}
  .teambadge.t2{background:rgba(52,199,89,.18);color:var(--green);}

  .moveto{margin-left:auto;font-size:12px;font-weight:600;color:var(--gold);white-space:nowrap;}
  .sec-label .cnt{float:right;font-weight:600;color:var(--dim2);text-transform:none;letter-spacing:0;}

  .col.eliminated .rows,.col.eliminated .name{opacity:.42;}
  .name.outname{text-decoration:line-through;text-decoration-thickness:2px;}
  .cbtn.locked{opacity:.22;pointer-events:none;}
  .total .outtag{color:var(--red);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:10px;}
  .total .wintag{color:var(--green);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:10px;}

  /* Board */
  .board{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;}
  .col{display:flex;flex-direction:column;border-right:1px solid var(--line);}
  .col:last-child{border-right:none;}
  .name{flex:none;height:52px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:var(--nf,19px);font-weight:800;letter-spacing:-.2px;background:#0a0a09;border-bottom:1px solid var(--line);text-align:center;padding:0 6px;overflow:hidden;white-space:nowrap;}
  .name.lead{color:var(--gold);}
  .name .medal{font-size:13px;}
  .rows{flex:1;overflow-y:auto;}
  .rw{min-height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:1px solid var(--line);padding:6px 0;}
  .rw:nth-child(even){background:var(--col-alt);}
  .rw .main{font-size:22px;}
  .rw .sub{font-size:12px;color:var(--dim);margin-top:1px;}
  .rw.empty .main{color:var(--dim);}
  .rw.zero{background:rgba(52,199,89,.10);}
  .rw.zero .main{color:var(--green);font-weight:700;}
  .zmark{font-size:11px;margin-left:4px;opacity:.85;vertical-align:2px;}
  .total{flex:none;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--total-bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .total .main{font-size:24px;font-weight:800;}
  .total .sub{font-size:11px;color:var(--dim);margin-top:2px;}
  .total.out .main{color:var(--red);}
  .total.win .main{color:var(--green);}
  .controls{flex:none;padding:12px 4px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;}
  .crow{display:flex;width:100%;justify-content:space-around;align-items:center;}
  .cbtn{width:var(--btn,44px);height:var(--btn,44px);flex:none;border-radius:50%;display:grid;place-items:center;font-size:calc(var(--btn,44px) * 0.72);font-weight:800;line-height:1;}
  .cbtn svg{preserveAspectRatio:xMidYMid meet;flex:none;}
  .cbtn:active{transform:scale(.92);}
  .cbtn.add{background:var(--green);color:#06210c;}
  .cbtn.sub{background:var(--red);color:#2a0704;}
  .cbtn.undo,.cbtn.trash{width:var(--tbtn,40px);height:var(--tbtn,40px);background:var(--orange);color:#2a1600;}
  .cbtn.trash svg{width:72%;height:72%;}
  .empty-state{margin:auto;text-align:center;color:var(--dim);padding:40px;}
  .empty-state button{margin-top:12px;color:var(--gold);font-weight:700;font-size:17px;}

  /* Generic overlay + sheet */
  .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .18s;z-index:70;}
  .backdrop.show{opacity:1;pointer-events:auto;}
  .sheet{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#161616;border-radius:20px 20px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(115%);transition:transform .22s cubic-bezier(.2,.8,.2,1);box-shadow:0 -8px 30px rgba(0,0,0,.5);visibility:hidden;pointer-events:none;}
  .sheet.show{visibility:visible;pointer-events:auto;}
  .sheet.show{transform:translateY(0);}
  .grab{width:40px;height:4px;background:#444;border-radius:3px;margin:0 auto 14px;}
  .sheet h3{margin:0 0 4px;font-size:19px;font-weight:700;text-align:center;}
  .sheet .sub{text-align:center;color:var(--dim);font-size:13px;margin-bottom:14px;}

  /* Dropdown / menu list */
  .menu-list{display:flex;flex-direction:column;}
  .menu-row{display:flex;align-items:center;gap:12px;padding:16px 8px;font-size:17px;border-bottom:1px solid #262626;}
  .menu-row:last-child{border-bottom:none;}
  .menu-row .check{margin-left:auto;color:var(--gold);font-size:18px;opacity:0;}
  .menu-row.on .check{opacity:1;}
  .menu-row.on{color:var(--gold);}

  /* Game options popover style (rounded, red text) */
  .go-item{width:100%;padding:16px;border-radius:14px;background:#2a2a2c;color:var(--red);font-size:18px;font-weight:600;margin-bottom:10px;}
  .go-item:active{background:#333;}

  /* Keypad */
  .display{font-size:44px;font-weight:800;text-align:center;min-height:54px;letter-spacing:1px;margin-bottom:6px;}
  .display .sgn{color:var(--dim);}
  .display.neg{color:var(--red);}
  .capnote{text-align:center;font-size:13px;font-weight:600;color:var(--red);height:16px;opacity:0;transition:opacity .15s;margin-bottom:2px;}
  .capnote.show{opacity:1;}
  @keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
  .display.shake{animation:shk .3s;}
  .showbtn{width:100%;height:48px;border-radius:14px;background:rgba(52,199,89,.16);color:var(--green);font-size:16px;font-weight:700;margin-bottom:12px;}
  .showbtn:active{background:rgba(52,199,89,.28);}
  .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .key{height:56px;border-radius:14px;background:#262626;font-size:24px;font-weight:600;}
  .key:active{background:#333;}
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
  .abtn{height:54px;border-radius:14px;font-size:18px;font-weight:700;}
  .abtn.confirm{background:var(--green);color:#06210c;}
  .abtn.cancel{background:#2a2a2a;color:var(--ink);}
  .preds{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px;}
  .pred{height:60px;border-radius:14px;background:#262626;font-size:22px;font-weight:700;}
  .pred:active{background:#3a3a3a;}
  .pred.negmode{color:var(--red);}
  .field{width:100%;height:52px;border-radius:14px;background:#262626;color:var(--ink);font-size:20px;text-align:center;border:1px solid #333;margin-bottom:12px;outline:none;}
  .field:focus{border-color:var(--yellow);}

  /* Centered dialog (Add / Rename player) */
  #textSheet{left:50%;right:auto;bottom:auto;top:calc(env(safe-area-inset-top) + 84px);width:min(88%,380px);transform:translateX(-50%) scale(.94);opacity:0;visibility:hidden;pointer-events:none;border-radius:22px;background:#1c1c1e;padding:22px 18px;transition:transform .18s cubic-bezier(.2,.8,.2,1),opacity .18s;box-shadow:0 12px 40px rgba(0,0,0,.6);}
  #textSheet.show{transform:translateX(-50%) scale(1);opacity:1;visibility:visible;pointer-events:auto;}
  #textSheet .grab{display:none;}
  #textSheet h3{font-size:20px;margin-bottom:16px;}
  #textSheet .field{background:#2c2c2e;border:1px solid #3a3a3c;caret-color:var(--yellow);margin-bottom:16px;}
  #textSheet .field:focus{border-color:var(--yellow);}
  #textSheet .abtn{background:#2c2c2e;color:#fff;font-weight:600;}
  #textSheet .abtn.confirm{background:#2c2c2e;color:#fff;font-weight:700;}
  #textSheet .abtn:active{background:#3a3a3c;}