/* Spades Pro — clean mobile layout. Everything fits in one screen, no scrolling. */
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:#04111c}
body{color:#eef3ed;font:14px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
button,select{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid #ffffff22;background:#14303f;border-radius:12px;padding:10px 14px}
button:disabled{cursor:default}
button:focus-visible{outline:3px solid #ffd87a;outline-offset:2px}

#app{
  --gold:#e6c27a;--blue:#3d9be0;--red:#e5604f;
  max-width:480px;margin:0 auto;height:100dvh;
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;
  padding:env(safe-area-inset-top) 12px 0;
  background:radial-gradient(ellipse at 50% 40%,#0b3a4a 0,#04192a 60%,#020f1c 100%);
  overflow:hidden
}

/* Header */
header{display:flex;align-items:center;gap:10px;height:clamp(40px,6dvh,50px)}
.brand{flex:1;font:700 clamp(20px,3.2dvh,25px) Georgia,serif;letter-spacing:2px;color:#f4dfb2;white-space:nowrap}
.brand span{color:var(--gold);font-size:.8em}
.levelpill{background:#e6c27a14;border:1px solid var(--gold);border-radius:20px;padding:4px 10px;color:var(--gold);font-weight:800;font-size:11px;letter-spacing:1px}
header button{background:none;border:0;padding:4px 2px 4px 10px;font:22px Arial,sans-serif;color:#d9d3c4}

/* Score bar */
.scorebar{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}
.scorebar>.blue,.scorebar>.red{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;column-gap:8px;align-items:center;padding:6px 10px;border-radius:12px;border:1px solid #4c9dd666;background:#0a2238}
.scorebar>.red{border-color:#e8847766;background:#2c1f29}
.scorebar small{grid-column:1/-1;font-size:10px;font-weight:800;letter-spacing:1px;color:#8fcaff}
.scorebar .red small{color:#ff9e8d}
.scorebar b{font-size:clamp(22px,3.6dvh,28px);font-weight:800;line-height:1.1}
.scorebar span{font-size:10px;color:#b7c6d0;text-align:right}
.scorebar span:before{content:'Bags';display:block;color:#7f97a6;font-size:9px;text-transform:uppercase;letter-spacing:1px}
.target{display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:9px;letter-spacing:1px;color:#c7b58e}
.target b{font-size:17px;color:var(--gold)}

/* Table */
.table{position:relative;margin:10px 0 8px;min-height:0;border:2px solid #b48c44;border-radius:clamp(40px,10dvh,90px);
  background:radial-gradient(ellipse at 50% 45%,#0c5a5b,#03363a 80%);
  box-shadow:inset 0 0 0 3px #e3c17a1f,inset 0 0 40px #001c25,0 6px 20px #0006}
.tablemark{display:none}
#roundtag{position:absolute;left:clamp(16px,9%,40px);top:clamp(12px,5%,22px);white-space:pre-line!important;line-height:1.5;font-size:9px;letter-spacing:2px;color:#9cc7bdaa;pointer-events:none}

/* Seats */
.player{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;gap:0;pointer-events:none}
.player strong{display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;border:1px solid #80c8f6;background:linear-gradient(#2386bd,#00356b);color:#fff;font-size:11px;font-weight:800;letter-spacing:1px;white-space:nowrap}
.enemy strong{border-color:#ffa58a;background:linear-gradient(#f06a55,#a8231d)}
.player strong em{font-style:normal;font-size:9px;background:var(--gold);color:#2b1d07;border-radius:50%;width:15px;height:15px;display:grid;place-items:center}
.player .numbers{margin-top:-2px;padding:3px 10px 2px;border:1px solid #ba913e88;border-top:0;border-radius:0 0 12px 12px;background:#03141f;font-size:12px;color:#c9d6dc;white-space:nowrap}
.player .numbers b{font-size:14px;color:#fff;margin-right:3px}
.active strong{box-shadow:0 0 0 2px var(--gold),0 0 14px #e6c27a99}
.north{top:8px;left:50%;transform:translateX(-50%)}
.south{bottom:8px;left:50%;transform:translateX(-50%)}
.west{left:8px;top:50%;transform:translateY(-50%)}
.east{right:8px;top:50%;transform:translateY(-50%)}

/* Trick area */
/* Trick cards sit in the open felt between the four seats. */
#trick{position:absolute;inset:clamp(44px,17%,58px) 0;container-type:size}
.played{position:absolute!important;height:min(47cqh,92px);aspect-ratio:5/7;left:50%;top:50%}
.played.fresh{animation:enter .2s ease-out}
.played.pos2{transform:translate(-50%,-102%)}
.played.pos0{transform:translate(-50%,2%)}
.played.pos1{transform:translate(-155%,-50%) rotate(-5deg)}
.played.pos3{transform:translate(55%,-50%) rotate(5deg)}
.winning{box-shadow:0 0 0 2px var(--gold),0 0 16px #e6c27a!important}
#trick:empty:after{content:'♠';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:clamp(40px,8dvh,64px) Georgia;color:#ffffff0d}
@keyframes enter{from{opacity:0;scale:.85}to{opacity:1;scale:1}}

/* ---------- Playing cards ---------- */
.card,.played{
  container-type:inline-size;position:relative;overflow:hidden;
  padding:0;border:0;border-radius:7px;
  background:#fdfcf8;color:#1b1f24;
  box-shadow:0 0 0 1px #00000026,0 2px 5px #0006;text-align:left
}
.heart{color:#cf2b2b}
.idx{position:absolute;left:7%;top:5%;display:flex;flex-direction:column;align-items:center;line-height:.95}
.idx b{font:700 34cqi/1 -apple-system,"SF Pro Display","Segoe UI",Roboto,Arial,sans-serif;letter-spacing:-.06em}
.idx i{font-style:normal;font-size:24cqi;line-height:1;margin-top:2cqi}
.big{position:absolute;right:6%;bottom:2%;font-size:62cqi;line-height:1}
.big.ace{right:auto;left:56%;bottom:auto;top:60%;transform:translate(-50%,-50%);font-size:62cqi}
.face{position:absolute;right:7%;bottom:6%;width:56%;height:56%;border-radius:4px;
  background:linear-gradient(160deg,#fbf0d4,#ecd39a);box-shadow:inset 0 0 0 1.5px #c39a45;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.face b{font:700 34cqi/1 Georgia,serif;color:#8a6423}
.face i{font-style:normal;font-size:24cqi}

/* Controls */
.controls{display:flex;flex-direction:column;gap:6px;padding-bottom:4px}
#status{align-self:center;max-width:100%;padding:5px 12px;border:1px solid #ddb66a99;border-radius:20px;background:#0a2a33;color:#f6d686;font-size:12px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bids{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
#bids:empty{display:none}
#bids button{height:clamp(30px,4.6dvh,38px);padding:0;border-color:#b59a5d55;font-weight:700}
#bids button:disabled{opacity:.35}

/* Hand: 7 on top, 6 centered below. No overlap, nothing clipped. */
#hand{--g:5px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g);padding:4px 0 2px}
#hand .card{
  flex:0 0 calc((100% - 6*var(--g))/7);
  aspect-ratio:5/7;max-height:12.5dvh;
  transition:transform .12s ease,box-shadow .12s ease
}
#hand .card.illegal{background:#cfccc4;opacity:.45;filter:saturate(.4)}
#hand .card.selected{transform:translateY(-6px);box-shadow:0 0 0 3px var(--gold),0 6px 14px #000a}

.primary{width:100%;height:clamp(40px,6dvh,48px);padding:0;border:0;border-radius:30px;background:linear-gradient(#ffe49c,#d9a944);color:#30220e;font-size:17px;font-weight:800;box-shadow:inset 0 1px 2px #fff8,0 3px 10px #0005}
.primary:disabled{opacity:.55}
.save{display:flex;justify-content:space-between;font-size:9px;color:#8ea4b1;padding:0 2px}

/* Ad slot */
.ad{margin:0 -12px;height:50px;padding:6px 0 calc(6px + env(safe-area-inset-bottom));background:#081522;border-top:1px solid #ffffff12;text-align:center;color:#526b7d;box-sizing:content-box}
.ad span{font-size:7px;letter-spacing:2px}
.ad div{font-size:11px;margin-top:6px;color:#7b90a0}

/* Dialogs */
dialog{background:#102836;color:#eef3ed;border:1px solid #a78d58;border-radius:20px;width:min(430px,92vw);max-height:90dvh;overflow:auto;padding:22px;box-shadow:0 25px 80px #0009;margin:auto}
dialog::backdrop{background:#020c15bb;backdrop-filter:blur(5px)}
dialog h2{font:24px Georgia,serif;color:#f1d498;margin-bottom:12px}
dialog p{font-size:13px;line-height:1.6;color:#b8ccd7;margin:12px 0}
dialog label{display:block;margin:15px 0;font-size:12px}
dialog select{width:100%;margin-top:7px;padding:10px;background:#071c2b;color:#fff;border:1px solid #49606c;border-radius:8px}
dialog button{margin-top:9px}
dialog table{width:100%;font-size:13px;border-collapse:collapse}
dialog td,dialog th{padding:8px 4px;border-bottom:1px solid #ffffff18;text-align:left}
.quiet{width:100%;background:transparent}

/* Short screens (iPhone SE, browser chrome showing) */
@media (max-height:680px){
  .scorebar>.blue,.scorebar>.red{padding:4px 8px}
  .scorebar span:before{display:none}
  .table{margin:6px 0 5px}
  .player strong{font-size:10px;padding:2px 8px}
  .player .numbers{font-size:11px;padding:2px 8px 1px}
  .controls{gap:4px}
  #status{padding:3px 10px;font-size:11px}
}

/* Last-trick button on the table */
.peek{position:absolute;right:clamp(14px,8%,36px);top:clamp(10px,4.5%,20px);z-index:4;padding:3px 9px;border-radius:14px;border:1px solid #e6c27a66;background:#03141fcc;color:#e9d3a0;font-size:10px;font-weight:700;letter-spacing:.5px}
.peek[hidden]{display:none}

/* Replay / last-trick board inside dialogs */
.peekboard{position:relative;height:clamp(200px,34dvh,260px);margin:4px -6px 0;border:1.5px solid #b48c44;border-radius:40px;background:radial-gradient(ellipse,#0c5a5b,#03363a 80%);container-type:size}
.peekboard .played{height:min(36cqh,88px)}
.peekboard .seat{position:absolute;font-size:9px;font-weight:800;letter-spacing:1px;color:#9fd2ff}
.peekboard .s1,.peekboard .s3{color:#ffab9b;top:50%;transform:translateY(-50%)}
.peekboard .s0{bottom:6px;left:50%;transform:translateX(-50%)}.peekboard .s2{top:6px;left:50%;transform:translateX(-50%)}
.peekboard .s1{left:10px}.peekboard .s3{right:10px}
.peekcap{text-align:center;margin:10px 0!important}.peekcap b{color:#f1d498}
.tally th,.tally td{text-align:center!important;font-size:11px;padding:5px 2px!important}
.tally th.us{color:#8fcaff}.tally th.opp{color:#ff9e8d}
.stepper{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.stepper button:disabled{opacity:.35}
.logbox{width:100%;height:150px;background:#071c2b;color:#cfe;border:1px solid #49606c;border-radius:8px;font:11px ui-monospace,monospace;padding:8px}

.levelpill:after{content:' ▾';font-size:9px}
dialog h3{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#9fc3d6;margin:14px 0 -4px}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fine{font-size:11px!important;color:#8fa6b3!important}
.levels{display:grid;gap:8px}
.lvl{display:grid;grid-template-columns:1fr auto;text-align:left;gap:2px 8px;margin:0!important;padding:10px 12px;background:#0a1f2c}
.lvl b{font-size:15px}.lvl span{grid-column:1;font-size:11px;color:#a9bcc7}.lvl em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-size:11px;color:#c7b58e}
.lvl.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:#1c2a24}
/* 13-trick sheet */
.sheet{width:100%;border-collapse:collapse;table-layout:fixed}
.sheet th{font-size:9px!important;letter-spacing:.5px;text-align:center!important;padding:4px 1px!important}
.sheet th.us{color:#8fcaff}.sheet th.opp{color:#ff9e8d}
.sheet td{text-align:center!important;padding:2px 1px!important;font-size:11px}
.sheet td.n{color:#7f97a6;font-size:10px}
.sheet tr.tot td{color:#f1d498;font-weight:700;padding-top:6px!important}
.chip{display:inline-block;min-width:34px;padding:2px 4px;border-radius:5px;background:#fdfcf8;color:#1b1f24;font-weight:700;font-size:12px;line-height:1.25;border-bottom:2px solid transparent}
.chip.heart{color:#cf2b2b}
.chip.win{background:#f6d27e;box-shadow:0 0 0 1px #b8892f}
.chip.lead{border-bottom-color:#3d9be0}
.sheet.small td,.sheet.small th{font-size:12px!important;padding:6px!important}
td.good{color:#7fe0a0}td.bad{color:#ff9e8d}

/* ---------- Settings page ---------- */
.opthead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.opthead h2{margin:0}
.coins{border:1px solid #e6c27a66;border-radius:14px;padding:3px 10px;color:#f1d498;font-size:12px;font-weight:700}
.optgroup{display:grid;gap:8px}
.tog{display:flex;align-items:center;gap:12px;width:100%;margin:0!important;padding:10px 12px;text-align:left;background:#0a1f2c;border-color:#ffffff1c}
.tog .box{flex:0 0 26px;height:26px;border-radius:7px;border:2px solid #e6c27a88;display:grid;place-items:center;font-weight:900;font-size:15px;color:#2b1d07;background:transparent;transition:background .15s}
.tog.on .box{background:linear-gradient(#ffe49c,#d9a944);border-color:#ffe1a0}
.tog .tl{display:flex;flex-direction:column;gap:1px}.tog b{font-size:15px}.tog small{font-size:11px;color:#91a8b5}
.optlabel{margin:14px 0 6px;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#9fc3d6}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #b59a5d77;border-radius:12px;overflow:hidden;background:#071c2b}
.seg button{margin:0!important;border:0;border-radius:0;border-right:1px solid #b59a5d44;background:transparent;padding:9px 2px;font-size:12px;font-weight:700;color:#c9d6dc}
.seg button:last-child{border-right:0}
.seg button.on{background:linear-gradient(#ffe49c,#d9a944);color:#30220e}
.row{display:flex;align-items:center;gap:10px;width:100%;margin:0!important;padding:11px 14px;background:#0a1f2c;text-align:left}
.row b{flex:1;font-size:15px;color:#f1d498}.row span{font-size:11px;color:#c7b58e}.row i{font-style:normal;font-size:20px;color:#e6c27a}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.tile{margin:0!important;display:flex;align-items:center;gap:8px;padding:12px;background:#0f2c3b;font-weight:700;font-size:13px;text-align:left}
.tile b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#e6c27a22;color:#f1d498;font-size:13px}
.danger{color:#ff9e8d!important}
.center{text-align:center}
/* Statistics */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.statgrid div{background:#0a1f2c;border:1px solid #ffffff14;border-radius:10px;padding:8px 2px;text-align:center}
.statgrid b{display:block;font-size:17px;color:#f1d498}.statgrid span{font-size:9px;color:#91a8b5;letter-spacing:.3px}
@media (max-height:700px){
  dialog{padding:16px}
  .opthead{margin-bottom:6px}
  .tog{padding:7px 10px}.tog small{display:none}.tog .box{flex-basis:22px;height:22px}
  .optlabel{margin:9px 0 5px}
  .seg button{padding:7px 2px}
  .row{padding:8px 12px}
  .grid2{margin-top:9px;gap:6px}.tile{padding:8px 10px}
  .btnrow{gap:6px}
  dialog button{margin-top:6px}
  .primary{height:40px}
}

/* Bot avatars on the seat badges */
.player strong{padding-left:4px}
.player:not(.south) strong{gap:6px}
.av{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;font:12px/1 Arial,sans-serif;color:#fff;
  box-shadow:0 0 0 1.5px #e6c27a,0 1px 3px #0008;flex:0 0 auto}
.av2{background:radial-gradient(circle at 35% 30%,#5fb8f0,#0b4f8a)}
.av1,.av3{background:radial-gradient(circle at 35% 30%,#ff8a73,#9c1f18)}
.south strong{padding-left:10px}
@media (max-height:680px){.av{width:17px;height:17px;font-size:10px}}

/* ---------- Casino table: padded leather rail, wood trim, felt ---------- */
#app{--felt1:#0f6466;--felt2:#05434a;--felt3:#022a2e}
#app[data-felt="Teal"]{--felt1:#0f6466;--felt2:#04393d;--felt3:#022a2e}
#app[data-felt="Green"]{--felt1:#1d7a3e;--felt2:#0b4a24;--felt3:#063418}
#app[data-felt="Burgundy"]{--felt1:#8a1f2e;--felt2:#4f0f19;--felt3:#360910}
.table{
  --rail:clamp(6px,1.2dvh,9px);
  margin:12px 2px 9px;
  border:var(--rail) solid transparent;
  border-radius:clamp(56px,13dvh,110px);
  background:
    radial-gradient(ellipse at 50% 42%,var(--felt1),var(--felt2) 62%,var(--felt3)) padding-box,
    repeating-conic-gradient(from 8deg,#0000 0 13deg,#00000070 13deg 13.5deg,#ffffff0d 13.5deg 14deg) border-box,
    linear-gradient(170deg,#4a4a50 0%,#232326 35%,#141416 60%,#2c2c30 100%) border-box;
  box-shadow:
    inset 0 0 0 2px #6b2a12,                 /* wood trim between rail and felt */
    inset 0 0 0 3.5px #d9b06a66,              /* thin gold bead */
    inset 0 0 50px #00000080,                 /* felt vignette */
    0 0 0 3px #7b3416,                        /* outer wood rim */
    0 0 0 4.5px #3b1407,
    0 0 0 5.5px #c9a05a55,
    0 10px 26px #000a;
}
/* stitching around the middle of the padded rail */
.table:after{content:'';position:absolute;pointer-events:none;
  inset:calc(var(--rail) * -0.5);border-radius:inherit;
  border:1.3px dashed #b98a5a90;
  /* radius grows with the inset so the stitch follows the rail */
  border-radius:calc(clamp(56px,13dvh,110px) - var(--rail) * 0.5)}
/* subtle leather highlight on the rail top edge */
.table:before{border-radius:inherit}
.peekboard{border:9px solid transparent;border-radius:46px;
  background:radial-gradient(ellipse at 50% 42%,var(--felt1),var(--felt2) 62%,var(--felt3)) padding-box,
    repeating-conic-gradient(from 8deg,#0000 0 13deg,#00000070 13deg 13.5deg) border-box,
    linear-gradient(170deg,#4a4a50,#141416 60%,#2c2c30) border-box;
  box-shadow:inset 0 0 0 2px #6b2a12,inset 0 0 30px #0008,0 0 0 2.5px #7b3416}
.seat{text-shadow:0 1px 2px #000}
.felts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.felts .sw{margin:0!important;padding:7px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:700;background:#0a1f2c}
.felts .sw i{width:30px;height:18px;border-radius:9px;box-shadow:0 0 0 2px #2a2a2e,0 0 0 3px #7b3416}
.felts .sw.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.f-Royalblue{background:radial-gradient(#2257c4,#0e3283)}.f-Teal{background:radial-gradient(#0f6466,#04393d)}
.f-Green{background:radial-gradient(#1d7a3e,#0b4a24)}.f-Burgundy{background:radial-gradient(#8a1f2e,#4f0f19)}
@media (max-height:700px){.felts .sw{padding:5px 2px 4px}.felts .sw i{height:14px}}

/* Felt texture like a real table: mottled suede plus a faint woven nap */
.table:before{inset:0;opacity:1;mix-blend-mode:soft-light;border-radius:calc(clamp(56px,13dvh,110px) - var(--rail));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg,#ffffff08 0 1px,#0000 1px 3px),repeating-linear-gradient(-45deg,#00000010 0 1px,#0000 1px 3px)}
.peekboard{position:relative;overflow:hidden}
/* trick cards: a touch smaller so they clear the seat badges inside the rail */
.played{height:min(42cqh,82px)}
.played.pos1{transform:translate(-148%,-50%) rotate(-5deg)}
.played.pos3{transform:translate(48%,-50%) rotate(5deg)}
#trick{inset:clamp(40px,16%,54px) 0}

/* seats back in their original spots; side trick cards tuck in toward the middle instead */
.played.pos1{transform:translate(-128%,-50%) rotate(-4deg)}
.played.pos3{transform:translate(28%,-50%) rotate(4deg)}
.played.pos2{transform:translate(-50%,-106%)}
.played.pos0{transform:translate(-50%,6%)}
.played.pos1,.played.pos3{z-index:1}.played.pos0,.played.pos2{z-index:2}
/* dealer chip sits on the badge corner instead of widening it */
.player strong{position:relative}
.player strong em{position:absolute;top:-7px;right:-7px;width:16px!important;height:16px!important;font-size:9px!important;box-shadow:0 0 0 1.5px #3b1407,0 1px 3px #000a}
.played{height:min(39cqh,80px)}
@media (max-height:620px){#trick{inset:clamp(42px,20%,52px) 0}.played{height:min(37cqh,70px)}}

/* ===== Preview: UI round 2 ===== */
.primary.statusbar{background:linear-gradient(#123744,#0a2430);color:#f3d58e;border:1px solid #ddb66a88;box-shadow:inset 0 1px 0 #ffffff12;font-size:15px;font-weight:700;opacity:1!important}
/* bigger trick cards */
.played{height:min(46cqh,98px)}
@media (max-height:620px){.played{height:min(42cqh,80px)}}
/* deal-in from each seat */
.played.fresh{animation:none}
.played.fresh.pos0{animation:fromS .28s cubic-bezier(.2,.8,.3,1)}
.played.fresh.pos1{animation:fromW .28s cubic-bezier(.2,.8,.3,1)}
.played.fresh.pos2{animation:fromN .28s cubic-bezier(.2,.8,.3,1)}
.played.fresh.pos3{animation:fromE .28s cubic-bezier(.2,.8,.3,1)}
@keyframes fromS{from{translate:0 160%;opacity:.4}}
@keyframes fromN{from{translate:0 -160%;opacity:.4}}
@keyframes fromW{from{translate:-170% 0;opacity:.4}}
@keyframes fromE{from{translate:170% 0;opacity:.4}}
/* sweep the finished trick to the winner */
.played{transition:translate .32s ease-in,opacity .32s ease-in,scale .32s ease-in}
#trick.sweep .played{opacity:0;scale:.7}
#trick.to0 .played{translate:0 170%}#trick.to2 .played{translate:0 -170%}
#trick.to1 .played{translate:-190% 0}#trick.to3 .played{translate:190% 0}
/* labelled won / bid */
.player .numbers{display:flex;align-items:baseline;gap:3px;padding:3px 9px 2px}
.player .numbers .k{font-size:7.5px;letter-spacing:.8px;color:#8fa9b6;font-weight:800}
.player .numbers b{font-size:13px;margin:0 2px 0 0}
.player .numbers .sep{width:1px;height:10px;background:#ba913e66;margin:0 3px;align-self:center}
/* softer "can't play this" */
#hand .card.illegal{background:#e9e5da;opacity:.55;filter:saturate(.55)}
/* side players sit on the rail edge, freeing felt for bigger trick cards */
.west{left:-18px}.east{right:-18px}
.played{height:min(44cqh,90px)}
@media (max-height:700px){.played{height:min(42cqh,80px)}}
@media (max-height:620px){.played{height:min(40cqh,72px)}}

/* ===== Mockup match ===== */
/* brand: ♠ SPADES .GURU */
.brand{display:flex;align-items:baseline;justify-content:center;gap:6px;padding-left:60px;letter-spacing:1.5px}
.brand .spade{color:var(--gold);font-size:.8em}
.brand sup{font:800 10px system-ui,sans-serif;letter-spacing:1.5px;color:var(--gold);align-self:flex-start;margin:-2px 0 0 -2px}
/* card-back fans behind each bot */
.player .fan{position:absolute;left:50%;bottom:calc(100% - 14px);width:74px;height:46px;translate:-50% 0;pointer-events:none;z-index:-1}
.fan i{position:absolute;left:50%;bottom:0;width:30px;height:42px;margin-left:-15px;border-radius:4px;border:1.5px solid #e6c787;
  background:radial-gradient(circle at 50% 55%,#e2bc70 0 3px,transparent 3.5px),repeating-linear-gradient(45deg,#0000 0 4px,#4d7fa844 4px 5px),repeating-linear-gradient(-45deg,#0b2c48 0 4px,#24557c 4px 5px);
  box-shadow:inset 0 0 0 2px #0f3a5e,0 2px 4px #0009;transform-origin:50% 120%}
.fan i:nth-child(1){rotate:-24deg}.fan i:nth-child(2){rotate:-12deg}.fan i:nth-child(3){rotate:0deg}.fan i:nth-child(4){rotate:12deg}.fan i:nth-child(5){rotate:24deg}
.fan i:only-child{rotate:0deg}
.north .fan{bottom:calc(100% - 10px)}
.table{margin-top:34px}
/* "Tricks 1 / Bid 3" */
.player .numbers{display:flex;align-items:baseline;gap:5px;padding:4px 12px 3px;font-size:11.5px;color:#d9e2e6}
.player .numbers b{font-size:13px;color:#fff;margin:0}
.player .numbers .sep{width:auto;height:auto;background:none;color:#ba913e;font-style:normal;margin:0}
.west .numbers,.east .numbers{flex-direction:column;align-items:center;gap:0;line-height:1.25;padding:3px 10px 4px}
.west .numbers .sep,.east .numbers .sep{display:none}
/* empty slot for your card */
.played.slot{background:#ffffff08!important;box-shadow:inset 0 0 0 1.5px #ffffff3a!important;border-radius:9px}
/* status pill with gold rules either side */
#status{position:relative;overflow:visible;font-size:13px;padding:5px 16px;border-color:#ddb66acc;background:#071c26}
#status:before,#status:after{content:'';position:absolute;top:50%;width:min(80px,16vw);height:1.5px}
#status:before{right:calc(100% + 8px);background:linear-gradient(to left,#e6c27a,#e6c27a00)}
#status:after{left:calc(100% + 8px);background:linear-gradient(to right,#e6c27a,#e6c27a00)}
/* fanned hand */
#hand{--g:2px;padding-top:8px}
#hand .card{rotate:var(--r,0deg);translate:0 var(--y,0px);transform-origin:50% 90%;box-shadow:0 0 0 1px #00000030,0 3px 8px #0007;transition:translate .14s,box-shadow .14s}
#hand .card.selected{transform:none;translate:0 calc(var(--y,0px) - 12px);box-shadow:0 0 0 2.5px var(--gold),0 0 18px #f2c96a99,0 8px 14px #000a;z-index:5}
/* Play button + caption */
#hint{text-align:center;font-size:12px;color:#9db1bc;min-height:15px;margin-top:-2px}
.save{display:none}
.primary:disabled{opacity:.5}
/* house ad */
.ad{height:auto;min-height:0;padding:6px 12px calc(6px + env(safe-area-inset-bottom));background:transparent;border-top:0}
.house{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border:1.5px solid #c9a05a;border-radius:24px;background:#071a26;color:#d6e0e6;font-size:13px}
.adtag{font-size:9px;font-weight:800;letter-spacing:1px;border:1px solid #8ea4b1;border-radius:10px;padding:1px 7px;color:#b8c7cf}
.adtext{flex:1;text-align:center;border-left:1px solid #ffffff22;padding-left:10px}.adtext b{color:#f1d498}
.adgo{font-size:22px;color:#e6c27a}
@media (max-height:700px){.house{height:34px;font-size:11.5px}.table{margin-top:28px}#hint{font-size:11px;min-height:13px}.player .fan{height:38px;width:62px}.fan i{width:24px;height:34px;margin-left:-12px}}
.house span,.house b{letter-spacing:normal;font-size:inherit}
.house .adtag{font-size:9px;letter-spacing:1px}.house .adgo{font-size:22px}
#hand .card.illegal{background:#f3efe4;opacity:.62;filter:saturate(.5) brightness(.93)}
#trick{inset:clamp(52px,19%,66px) 0 clamp(46px,17%,58px)}
.played{height:min(46cqh,90px)}
.played.pos2{transform:translate(-50%,-102%)}
.played.pos0{transform:translate(-50%,2%)}
#trick{inset:clamp(56px,20.5%,70px) 0 clamp(50px,18.5%,62px)}

/* ======== Spades.GURU art pack ======== */
body{background:#06070a}
#app{background:#06070a url(assets/marble.webp) center/cover no-repeat}
/* header */
.brand{padding-left:56px}
.brand img{height:clamp(24px,4.2dvh,32px);width:auto;display:block}
#menu img{width:26px;height:26px;display:block}
header button{border-left:1px solid #ffffff30}
.levelpill{background:linear-gradient(#0d2232,#03101a);border:2px solid #c9a05a;color:#f6ead2;letter-spacing:1.5px}
/* score panels */
.scorebar>.blue{border:0;background:none;border-image:url(assets/ui/score-team.webp) 60 fill / 14px stretch}
.scorebar>.red{border:0!important;background:none!important;border-image:url(assets/ui/score-opponent.webp) 60 fill / 14px stretch}
/* table: the pack's gold-rimmed felt, 9-sliced so corners keep their shape at any size */
.table{border:0!important;background:none!important;box-shadow:0 12px 30px #000c!important;
  border-image:url(assets/table.webp) 170 fill / clamp(40px,10dvh,64px) stretch;border-radius:clamp(40px,10dvh,64px)}
.table:after{display:none}
.table:before{inset:6px;border-radius:clamp(36px,9dvh,58px);opacity:.55;mix-blend-mode:soft-light}
/* faint SPADES emblem on the felt */
#trick:empty:after,#trick:after{content:'';position:absolute;left:50%;top:50%;width:min(56cqw,70cqh);aspect-ratio:1;translate:-50% -50%;
  background:url(assets/emblem.webp) center/contain no-repeat;opacity:.13;font:0/0 a;color:transparent;pointer-events:none;z-index:0}
/* seat badges and stat chips */
.player strong{background:none!important;border:0!important;box-shadow:none;border-image:url(assets/ui/badge-team-blank.webp) 66 fill / 13px stretch;padding:4px 14px 4px 6px;text-shadow:0 1px 2px #0008}
.enemy strong{border-image:url(assets/ui/badge-opponent-blank.webp) 66 fill / 13px stretch}
.south strong{padding:4px 16px}
.active strong{box-shadow:none;filter:drop-shadow(0 0 6px #f2cf78) drop-shadow(0 0 2px #f2cf78)}
.player .numbers{background:none;border:0;border-image:url(assets/ui/stats-wide.webp) 60 fill / 12px stretch;margin-top:-1px}
.west .numbers,.east .numbers{border-image:url(assets/ui/stats-tall.webp) 50 fill / 12px stretch}
.player strong em.dealer{background:url(assets/icons/dealer.webp) center/contain no-repeat!important;border-radius:50%;box-shadow:none!important;width:18px!important;height:18px!important;top:-8px;right:-8px}
/* card-back fans use the GURU back */
.fan i{background:url(assets/cards/back-guru.webp) center/cover!important;border:0!important;box-shadow:0 2px 5px #000a!important;border-radius:3px}
/* playing cards: pack artwork */
.card,.played{background:transparent!important;box-shadow:0 2px 6px #000a!important;border-radius:6%/4.3%}
.face-img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none}
.card .idx,.card .big,.card .face,.played .idx,.played .big,.played .face{display:none}
#hand .card.selected{box-shadow:0 0 18px #f2c96aaa,0 8px 14px #000a!important}
#hand .card.selected:after,#hand .card.illegal:after{content:'';position:absolute;inset:0;pointer-events:none;background:center/100% 100% no-repeat}
#hand .card.selected:after{background-image:url(assets/cards/selected-overlay.webp)}
#hand .card.illegal{opacity:1;filter:none;background:transparent!important}
#hand .card.illegal:after{background-image:url(assets/cards/disabled-overlay.webp);opacity:.55}
.played.slot{background:url(assets/cards/empty-slot.webp) center/100% 100% no-repeat!important;box-shadow:none!important;opacity:.7}
.winning{box-shadow:0 0 0 2px var(--gold),0 0 16px #e6c27a!important}
/* status pill, Play button, ad */
#status{border:0;background:none;border-image:url(assets/ui/status.webp) 76 fill / 15px stretch;padding:6px 20px}
.primary{border:0;background:none;box-shadow:none;border-image:url(assets/ui/button-normal.webp) 116 fill / 22px stretch;color:#2b1d07}
.primary:active{border-image-source:url(assets/ui/button-pressed.webp)}
.primary:disabled{opacity:1;border-image-source:url(assets/ui/button-disabled.webp);color:#5a4520}
.house{border:0;background:none;border-image:url(assets/ui/ad-banner.webp) 82 fill / 20px stretch}
.peek{display:flex;align-items:center;gap:4px}.peek img{width:13px;height:13px}
.coins:before{content:'';display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:-1px;background:url(assets/icons/coin.webp) center/contain no-repeat}
/* dialogs sit on the marble too */
dialog{background:#0b1620 url(assets/marble.webp) center/cover;box-shadow:0 0 0 1px #c9a05a,0 25px 80px #000c}
dialog::before{content:'';position:absolute;inset:0;background:#081520cc;border-radius:inherit;pointer-events:none;z-index:-1}
dialog{isolation:isolate}
/* border-image only paints when a border style is set */
.table,.player strong,.player .numbers,.scorebar>.blue,.scorebar>.red,#status,.primary,.house{border-style:solid!important;border-color:transparent!important;border-width:0!important}
.levelpill{white-space:nowrap;padding:4px 10px}
.east strong em.dealer{right:auto;left:-8px}
.table{border-image:url(assets/table.webp) 170 fill / clamp(40px,10dvh,64px) stretch!important}
.player strong{border-image:url(assets/ui/badge-team-blank.webp) 66 fill / 13px stretch!important}
.enemy strong{border-image:url(assets/ui/badge-opponent-blank.webp) 66 fill / 13px stretch!important}
.scorebar>.red{border-image:url(assets/ui/score-opponent.webp) 60 fill / 14px stretch!important}
.scorebar>.blue{border-image:url(assets/ui/score-team.webp) 60 fill / 14px stretch!important}
#roundtag{left:clamp(30px,13%,56px)!important;top:clamp(18px,8%,30px)!important}
/* pill images: top and bottom halves meet exactly, so no seam at any height */
.primary{border-image:url(assets/ui/button-normal.webp) 116 120 fill / 50% 24px stretch!important}
.primary:active{border-image-source:url(assets/ui/button-pressed.webp)!important}
.primary:disabled{border-image-source:url(assets/ui/button-disabled.webp)!important}
.player strong{border-image:url(assets/ui/badge-team-blank.webp) 66 70 fill / 50% 13px stretch!important}
.enemy strong{border-image:url(assets/ui/badge-opponent-blank.webp) 66 70 fill / 50% 13px stretch!important}
#status{border-image:url(assets/ui/status.webp) 76 80 fill / 50% 15px stretch!important}
.house{border-image:url(assets/ui/ad-banner.webp) 82 86 fill / 50% 20px stretch!important}
/* custom gold Play button */
.primary{border-image:url(assets/ui/gold-button.webp) 0 105 fill / 0 26px stretch!important;color:#3a2606;text-shadow:0 1px 0 #ffe9a866}
.primary:active{border-image-source:url(assets/ui/gold-button-pressed.webp)!important}
.primary:disabled{border-image-source:url(assets/ui/gold-button-disabled.webp)!important;color:#4a3a1c;text-shadow:none}

/* ===== Layout fix: seats on screen, trick cards never overlap, bigger hand ===== */
/* 1. Duke and Rook fully on screen, slimmer */
.west{left:4px!important}.east{right:4px!important}
.west strong,.east strong{font-size:11px;padding:3px 12px 3px 5px;gap:5px}
.west .numbers,.east .numbers{font-size:11px;padding:2px 9px 3px}
.west .fan,.east .fan{width:58px;height:38px}
.west .fan i,.east .fan i{width:24px;height:34px;margin-left:-12px}
/* 2. Trick: a cross with gaps, sized from the space left between the side seats */
#trick{--side:96px}
.played{height:min(calc((100cqh - 8px) / 2), calc((100cqw - 2 * var(--side) - 14px) / 2.142), 96px)!important}
.played.pos2{transform:translate(-50%, calc(-100% - 4px))!important}
.played.pos0{transform:translate(-50%, 4px)!important}
.played.pos1{transform:translate(calc(-150% - 7px), -50%)!important}
.played.pos3{transform:translate(calc(50% + 7px), -50%)!important}
.peekboard{--side:28px}
.peekboard .played{height:min(calc((100cqh - 8px) / 2), calc((100cqw - 56px - 14px) / 2.142), 96px)!important}
/* 3. Hand: cards overlap like a real hand, so they can be much bigger and the corner stays visible */
#hand{--ov:.24;gap:0!important;row-gap:4px!important;padding:6px 0 2px}
#hand .card{flex:0 0 calc(100% / (7 - 6 * var(--ov)))!important;max-height:none!important;margin-left:calc(-1 * var(--ov) * 100% / (7 - 6 * var(--ov)))!important}
#hand .card:nth-child(7n+1){margin-left:0!important}
#hand .card.selected{z-index:20}
#hand.bidding .card{max-height:none!important}
@media (max-height:700px){#hand{--ov:.18}}
/* new logo with the guru */
.brand{padding-left:0;justify-content:flex-start}
.brand img{height:clamp(30px,5.4dvh,42px)}
header{height:clamp(44px,7dvh,56px)}
/* balance: cap hand cards so the table keeps enough room for readable trick cards */
#hand{--cw:min(calc(100% / (7 - 6 * var(--ov))), 8dvh)}
#hand .card{flex-basis:var(--cw)!important;margin-left:calc(-1 * var(--ov) * var(--cw))!important}
#hand .card:nth-child(7n+1){margin-left:0!important}
#trick{inset:60px 0 56px!important}
@media (max-height:700px){#trick{inset:52px 0 50px!important}#hand{--cw:min(calc(100% / (7 - 6 * var(--ov))), 7.4dvh)}}
@media (max-height:620px){#trick{inset:48px 0 46px!important}.table{margin-top:24px}#hand{--cw:min(calc(100% / (7 - 6 * var(--ov))), 7dvh)}}
@media (max-height:700px){#trick{inset:57px 0 53px!important}}
@media (max-height:620px){#trick{inset:54px 0 50px!important}}
@media (max-height:620px){#trick{inset:57px 0 50px!important}}
#hand .brk{flex-basis:100%;height:0}
#hand .card:nth-child(7n+1){margin-left:calc(-1 * var(--ov) * var(--cw))!important}
#hand .card.row-start{margin-left:0!important}
#hand{--cw:min(calc(100% / (7.08 - 6 * var(--ov))), 8dvh)}
@media (max-height:700px){#hand{--cw:min(calc(100% / (7.08 - 6 * var(--ov))), 7.4dvh)}}
@media (max-height:620px){#hand{--cw:min(calc(100% / (7.08 - 6 * var(--ov))), 7dvh)}}

/* ===== Mockup round 3 ===== */
/* navy background like the mockup (marble removed) */
body{background:#061428}
#app{background:radial-gradient(ellipse at 50% 35%,#123a63 0%,#0a2445 45%,#061428 100%)!important}
dialog{background:linear-gradient(#0f2c48,#081a2e)!important}
dialog::before{display:none}
/* Duke & Rook inside the felt, bigger badges and fans */
.west{left:clamp(12px,4%,18px)!important}.east{right:clamp(12px,4%,18px)!important}
.west,.east{top:54%!important}
.west strong,.east strong{font-size:12.5px;padding:4px 13px 4px 5px;gap:5px}
.west .numbers,.east .numbers{font-size:12px;padding:3px 10px 4px;line-height:1.3}
.west .fan,.east .fan{width:70px;height:46px}
.west .fan i,.east .fan i{width:30px;height:42px;margin-left:-15px}
/* trick: spread top / middle / bottom like the mockup */
#trick{--side:100px;--gap:9px}
.played{height:min(calc((100cqh - var(--gap)) / 2), calc((100cqw - 2 * var(--side) - 2 * var(--gap)) / 2.142), 104px)!important}
.played.pos2{top:0!important;transform:translate(-50%,0)!important}
.played.pos0{top:100%!important;transform:translate(-50%,-100%)!important}
.played.pos1{top:50%!important;transform:translate(calc(-150% - var(--gap)),-50%)!important}
.played.pos3{top:50%!important;transform:translate(calc(50% + var(--gap)),-50%)!important}
.peekboard .played.pos2{top:4px!important}.peekboard .played.pos0{top:calc(100% - 4px)!important}
/* hand ~10% smaller so the table gets the room */
#hand{--cw:min(calc(100% / (7.08 - 6 * var(--ov))), 7.2dvh)!important}
@media (max-height:700px){#hand{--cw:min(calc(100% / (7.08 - 6 * var(--ov))), 6.7dvh)!important}}
@media (max-height:620px){#hand{--cw:min(calc(100% / (7.08 - 6 * var(--ov))), 6.3dvh)!important}}
.table{box-shadow:none!important;filter:drop-shadow(0 10px 18px #000a)}
#trick{--side:108px}
.east strong em.dealer{left:auto!important;right:-8px!important}

/* ===== Robust to large text (Android text scaling) and to the bidding screen ===== */
html,body{overflow-x:hidden;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#app{width:100%;max-width:min(480px,100vw)}
#app>*{min-width:0}
.controls{min-width:0;overflow-x:clip}
header{min-width:0}.brand{min-width:0;flex:1 1 auto}.brand img{max-width:100%;object-fit:contain;object-position:left center}
.scorebar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important}
.scorebar>div{min-width:0}.scorebar small{overflow:hidden;text-overflow:ellipsis}
#status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 30px)}
#status:before,#status:after{display:none}
.controls{position:relative}
.controls:before,.controls:after{content:'';position:absolute;top:14px;width:12%;height:1.5px;pointer-events:none}
.controls:before{left:0;background:linear-gradient(to left,#e6c27a,#e6c27a00)}
.controls:after{right:0;background:linear-gradient(to right,#e6c27a,#e6c27a00)}
#bids{grid-template-columns:repeat(7,minmax(0,1fr))!important}
#bids button{min-width:0;padding:0;font-size:15px}
/* while you bid: bid buttons replace the Play button + hint, so the table keeps its size */
#app.is-bidding #action,#app.is-bidding #hint{display:none}
#app.is-bidding #bids{margin-top:2px}
.adtext{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.house{min-width:0}

/* ===== Short screens + large text: one-row north/south seats, overlapped hand rows ===== */
.north,.south{flex-direction:row!important;align-items:center;gap:0}
.north strong,.south strong{z-index:4}
.north .numbers,.south .numbers{margin:0 0 0 -10px!important;padding:3px 12px 3px 16px!important;border-image:url(assets/ui/stats-wide.webp) 60 fill / 12px stretch!important}
.north{top:6px!important}.south{bottom:8px!important}
.north .fan{left:22%!important}
#trick{inset:42px 0 40px!important}
@media (max-height:700px){#trick{inset:38px 0 36px!important}}
@media (max-height:620px){#trick{inset:36px 0 34px!important}}
/* hand: second row tucks under the first, like the mockup */
#hand{row-gap:0!important}
#hand .brk~.card{margin-top:calc(var(--cw) * -0.2)}

/* ===== Bigger played cards: slim fixed-width side seats on the rail edge ===== */
.west,.east{width:86px!important;top:52%!important}
.west{left:-4px!important}.east{right:-4px!important}
.west strong,.east strong{width:100%;justify-content:center;font-size:12px;padding:3px 8px 3px 4px;gap:4px;white-space:nowrap;overflow:hidden}
.west strong .av,.east strong .av{width:17px;height:17px;font-size:10px}
.west .numbers,.east .numbers{width:78px;font-size:11.5px;padding:2px 6px 3px}
.west .fan,.east .fan{width:64px;height:42px}
#trick{--side:86px;--gap:7px}
#roundtag{top:auto!important;bottom:clamp(10px,7%,22px)!important;left:clamp(26px,9%,40px)!important;font-size:8px;line-height:1.35}
.east strong em.dealer{right:auto!important;left:2px!important;top:-9px!important}
.west strong{overflow:visible}.east strong{overflow:visible}
/* numbers only: "won / bid" */
.player .numbers{flex-direction:row!important;align-items:baseline;justify-content:center;gap:5px!important;line-height:1.2}
.player .numbers b{font-size:15px}
.player .numbers .sep{display:inline!important;color:#c9a05a;font-size:13px}
.west .numbers,.east .numbers{width:auto!important;min-width:54px;padding:3px 10px!important}
.north .numbers,.south .numbers{padding:3px 12px 3px 16px!important}
/* Ace and You centered: badge in the middle, numbers hang off its right side */
.north,.south{left:50%!important;transform:translateX(-50%)!important;width:auto!important}
.north .numbers,.south .numbers{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin:0 0 0 -10px!important;white-space:nowrap;z-index:3}
.north .fan{left:50%!important}
/* one tap plays: no Play button during card play (it returns for Next Round / results) */
#app.is-playing #action{display:none}
#hint{min-height:18px;font-size:13px;color:#c9d6dc}
.peek{top:auto!important;bottom:clamp(10px,7%,22px)!important;right:clamp(22px,8%,36px)!important}
.west .numbers,.east .numbers{border-image:url(assets/ui/stats-wide.webp) 60 fill / 12px stretch!important}
.peek{top:clamp(10px,6%,20px)!important;bottom:auto!important;right:clamp(16px,6%,30px)!important;width:32px;height:32px;padding:0!important;border-radius:50%!important;justify-content:center}
.peek img{width:16px!important;height:16px!important}
/* guru emblem in the middle of the felt, behind the cards */
#trick:after,#trick:empty:after{background-image:url(assets/table-emblem.webp)!important;opacity:.32!important;width:min(44cqw,72cqh)!important;aspect-ratio:330/360!important;filter:saturate(.9)}
#trick .played{z-index:1}
/* header logo on the left */
.brand img{height:clamp(30px,5.6dvh,44px)}

/* ===== Bid slider ===== */
#bids{display:block!important}
#bids:empty{display:none!important}
.bidslider{display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px 6px 0}
.bidval{display:flex;align-items:baseline;gap:8px;line-height:1}
.bidval b{font:800 34px/1 Georgia,serif;color:#f6d686;text-shadow:0 2px 6px #0008;min-width:40px;text-align:center}
.bidval span{font-size:13px;color:#b9cbd6}
#bidrange{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;margin:0;--p:23%;touch-action:none}
#bidrange::-webkit-slider-runnable-track{height:10px;border-radius:6px;border:1px solid #c9a05a88;background:linear-gradient(90deg,#e6b953 0 var(--p),#0a2232 var(--p))}
#bidrange::-moz-range-track{height:10px;border-radius:6px;border:1px solid #c9a05a88;background:linear-gradient(90deg,#e6b953 0 var(--p),#0a2232 var(--p))}
#bidrange::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:-12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2b8,#e7b74d 55%,#a8701c);border:2px solid #fff3c4;box-shadow:0 2px 8px #000a}
#bidrange::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2b8,#e7b74d 55%,#a8701c);border:2px solid #fff3c4;box-shadow:0 2px 8px #000a}
.ticks{display:flex;justify-content:space-between;width:calc(100% - 22px);margin-top:-4px}
.ticks span{flex:0 0 auto;width:20px;text-align:center;font-size:10.5px;color:#8fa6b3;cursor:pointer;padding:3px 0}
.ticks span.on{color:#f6d686;font-weight:800}
#bids.nonil .ticks span[data-tick="0"]{opacity:.3;text-decoration:line-through}
#bidgo{width:min(260px,80%);height:44px!important;margin-top:4px;font-size:17px}
@media (max-height:700px){.bidval b{font-size:28px}#bidrange{height:30px}#bidgo{height:38px!important}}
/* compact bid slider: slider + ticks, then value and button side by side */
.bidslider{gap:2px}
.bidrow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:2px}
.bidval{flex:0 0 auto;padding-left:6px}
.bidval b{font-size:30px}
#bidgo{flex:1 1 auto;width:auto;max-width:220px;margin:0!important;height:42px!important}
@media (max-height:700px){.bidval b{font-size:26px}#bidgo{height:38px!important}#bidrange{height:28px}}
#trick:empty:after{transform:none!important}
/* longer level names (MEDIUM 1) shrink to fit the side badge */
.west strong,.east strong{font-size:clamp(9.5px,3vw,12px)}
.west strong.long,.east strong.long{letter-spacing:0;font-size:10.5px}

/* ===== Last-trick / replay mini table: same felt + layout rules as the main table ===== */
.peekboard{--gap:8px;--side:64px;height:clamp(230px,40dvh,300px)!important;margin:6px 0 0!important;
  border:0 solid transparent!important;background:none!important;box-shadow:none!important;
  border-image:url(assets/table.webp) 170 fill / 44px stretch!important;container-type:size;overflow:visible!important}
.peekboard .played{height:min(calc((100cqh - 2 * 22px - var(--gap)) / 2), calc((100cqw - 2 * var(--side) - 2 * var(--gap)) / 2.142), 104px)!important}
.peekboard .played.pos2{top:22px!important;transform:translate(-50%,0)!important}
.peekboard .played.pos0{top:calc(100% - 22px)!important;transform:translate(-50%,-100%)!important}
.peekboard .played.pos1{top:50%!important;transform:translate(calc(-150% - var(--gap)),-50%)!important}
.peekboard .played.pos3{top:50%!important;transform:translate(calc(50% + var(--gap)),-50%)!important}
.peekboard .seat{z-index:3;font-size:10px;padding:2px 8px;border-radius:10px;background:#03141fcc;color:#cfe3f2;letter-spacing:1px}
.peekboard .s1,.peekboard .s3{color:#ffb3a3}
.peekboard .s0{bottom:4px}.peekboard .s2{top:4px}
.peekboard .s1{left:8px}.peekboard .s3{right:8px}
.peekboard{--side:80px}
.played.winning,#trick .played.winning,.peekboard .played.winning{box-shadow:0 0 0 2.5px #f2c96a,0 0 18px #e6c27acc,0 2px 6px #000a!important}
/* match history */
#scorebar{cursor:pointer}
.sheet.hist th{font-size:9px!important;line-height:1.15}.sheet.hist th small{font-size:8px;color:#8fa6b3;font-weight:500}
.sheet.hist td{font-size:12px;padding:7px 2px!important}
.sheet.hist .hrow{cursor:pointer}.sheet.hist .hrow:active{background:#ffffff10}
.sheet.hist td.go{color:#e6c27a;font-size:16px;width:12px}
.pastm{margin-top:6px!important}.pastm span{font-size:11px!important}
dialog{max-height:92dvh}
.sheet.hist{table-layout:fixed}
.sheet.hist td,.sheet.hist th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet.hist td{font-size:12.5px;padding:8px 1px!important}
.sheet.hist td{font-size:12px}
.sheet.hist th{font-size:8.5px!important}
/* Last trick: pill just above the table's top-right corner */
.peek{top:auto!important;bottom:calc(100% + 4px)!important;right:6px!important;left:auto!important;width:auto!important;height:24px!important;
  padding:0 10px 0 8px!important;border-radius:13px!important;gap:5px;font-size:11px;font-weight:700;letter-spacing:.3px;
  background:#071a26!important;border:1px solid #c9a05a!important;color:#f1d498!important;box-shadow:0 2px 6px #0008;z-index:6}
.peek img{width:13px!important;height:13px!important}
@media (max-height:620px){.table{margin-top:30px!important}.peek{height:21px!important;font-size:10px;bottom:calc(100% + 3px)!important}}
/* Bot training pill: top-left above the table, mirroring Last trick */
.trainbtn{right:auto!important;left:6px!important;display:flex!important}
.trainbtn[hidden]{display:flex!important}
.tb-ico{font-size:13px;line-height:1;color:#e6c27a}
/* New Game in the middle of the table once the match is over */
.centergo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;width:min(62%,240px)!important;height:52px!important;font-size:20px!important;filter:drop-shadow(0 6px 16px #000c)}
.centergo[hidden]{display:none!important}
/* bigger, longer SPADES.GURU logo */
header{height:clamp(50px,8dvh,64px)!important}
.brand img{height:min(52px,7dvh,calc((100vw - 196px) / 3.43))!important;max-width:none!important}
.centergo{width:min(200px,calc(100% - 210px))!important;min-width:132px;height:48px!important;font-size:18px!important;
  border-image:none!important;border:0!important;background:url(assets/ui/gold-button.webp) center/100% 100% no-repeat!important}
.centergo:active{background-image:url(assets/ui/gold-button-pressed.webp)!important}

/* logo a little larger (about 12%) */
.brand img{height:min(58px,7.8dvh,calc((100vw - 180px) / 3.43))!important}
header{height:clamp(54px,8.6dvh,68px)!important}
/* share */
.sharebtn{border-color:#c9a05a!important;color:#f1d498!important;font-weight:700}
.sharecard{width:100%;border-radius:10px;border:1px solid #c9a05a66;display:block;margin:4px 0 10px}
.sharegrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shr{display:flex;align-items:center;justify-content:center;height:42px;border-radius:12px;font-weight:800;text-decoration:none;color:#fff;margin:0!important;border:0}
.shr.fb{background:#1877f2}.shr.x{background:#111;border:1px solid #444}.shr.wa{background:#25d366;color:#08301a}.shr.cp{background:#14303f;border:1px solid #ffffff33}
.savecard{display:flex;align-items:center;justify-content:center;height:40px;margin-top:8px;border:1px solid #ffffff22;border-radius:12px;color:#eef3ed;text-decoration:none}