/* ==========================================================================
     AANGAN — "Aangan at dusk" design system
     Childhood nostalgia: cousins on a korai grass mat on the courtyard floor,
     one warm lamp overhead, bright cream cards in hand.
     Color psychology (chosen mindfully):
       floor  = deep earthen brown  → grounded, safe, home
       mat    = toasted straw weave → warmth, memory, the play surface itself
       marigold = primary action    → festivity, auspiciousness (garlands)
       kanku red / indigo = accents → tradition (sindoor) / dusk & dyed thread
       tulsi green = success        → alive, positive
     ========================================================================== */
  :root{
    --cream:#fff9ec; --ink:#f9efdc; --muted:#cbb389;
    --s-S:#26221c; --s-H:#d0342c; --s-D:#d0342c; --s-C:#26221c;
    --red:#d0342c; --black:#26221c;
    --gold:#f2b13d; --gold-deep:#cf8c1f;
    --coral:#e2634d; --coral-deep:#b94a36;
    --teal:#6f95cc; --teal-deep:#3d5a85;   /* indigo-dye blue (name kept for compat) */
    --good:#9ed36a;
    --shadow:0 10px 22px rgba(20,10,2,.45);
    /* Display serif for brand/headings; card faces keep a classic book serif so pip layout stays exact. */
    --serif:"Fraunces",Georgia,"Iowan Old Style","Times New Roman",serif;
    --card-serif:Georgia,"Iowan Old Style","Times New Roman",serif;
    --sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Gujarati","Noto Sans Devanagari",sans-serif;
    /* In-game HUD numbers: a display serif reads badly at 12–16px, so scores use lining tabular sans. */
    --num:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    /* Card-back deck theme (overridden by [data-deck]) */
    --back-a:#26221c; --back-b:#120f0a;
    --back-line:rgba(208,52,44,.30); --back-edge:rgba(208,52,44,.48);
    --back-glyph:rgba(208,52,44,.62); --back-sym:"\2726";
    /* warm dark surfaces (panels, bars, toasts) — lamplit wood/earth */
    --surface-1:#33220f; --surface-2:#241710;
    --bar:rgba(32,20,10,.78); --bar-strong:rgba(26,16,8,.96);
  }
  [data-deck="marigold"]{
    --back-a:#7a3d06; --back-b:#3a1c02;
    --back-line:rgba(255,190,60,.32); --back-edge:rgba(255,190,60,.55);
    --back-glyph:rgba(255,214,120,.85); --back-sym:"\273A";
  }
  [data-deck="peacock"]{
    --back-a:#0c4250; --back-b:#04202b;
    --back-line:rgba(34,211,197,.30); --back-edge:rgba(34,211,197,.55);
    --back-glyph:rgba(140,244,236,.85); --back-sym:"\274B";
  }
  [data-deck="indigo"]{
    --back-a:#2a2b6b; --back-b:#14143a;
    --back-line:rgba(150,160,255,.28); --back-edge:rgba(150,160,255,.50);
    --back-glyph:rgba(190,200,255,.85); --back-sym:"\2756";
  }
  [data-deck="henna"]{
    --back-a:#2f5a1e; --back-b:#16300d;
    --back-line:rgba(160,220,120,.28); --back-edge:rgba(160,220,120,.50);
    --back-glyph:rgba(205,240,175,.85); --back-sym:"\2740";
  }
  [data-deck="lotus"]{
    --back-a:#8a2f5c; --back-b:#43122c;
    --back-line:rgba(255,170,215,.28); --back-edge:rgba(255,170,215,.50);
    --back-glyph:rgba(255,205,235,.90); --back-sym:"\273F";
  }

  /* ---- Mat themes (the korai mat is the table; the floor never changes) ----
     ids kept from the old felt themes so JS + saved prefs keep working:
       emerald  → natural straw, madder + indigo end-stripes
       royal    → indigo-dyed weave, straw + madder stripes
       rosewood → madder-dyed weave, straw + indigo stripes  */
  :root{
    /* the room: earthen floor at dusk, one warm lamp from above */
    --felt-1:#2e1e10; --felt-2:#20140a; --rim:#130c05;
    --tint:rgba(242,169,59,.13);
  }
  /* Mat colourways — matched to a real reversible korai mat (owner's reference photo):
     red cloth-bound edge; lengthwise dusty bands separated by mustard stripe pairs
     with a thin green core; dotted weave texture + cream flecks over everything. */
  :root, [data-table="emerald"]{               /* "Panchrangi" — the reference mat: indigo + madder */
    --mat-edge:#a5301f;
    --band-1:#7d97bd; --band-1b:#6b83a8;       /* dusty indigo band (+ its darker weave rows) */
    --band-2:#b34a2c; --band-2b:#9c3d24;       /* madder band */
    --stripe-g:#c39136; --stripe-x:#667c3e;    /* mustard pair + green core */
    --fleck:rgba(244,229,196,.16);
    --tbl-shade:rgba(46,26,10,.42); --tbl-glow:rgba(255,224,150,.20);
  }
  [data-table="royal"]{                        /* indigo-dyed: blues + cream, madder accents */
    --mat-edge:#2d4266;
    --band-1:#54719e; --band-1b:#475f88;
    --band-2:#8fa6c6; --band-2b:#7c92b3;
    --stripe-g:#d8c290; --stripe-x:#a5301f;
    --fleck:rgba(235,240,250,.15);
    --tbl-shade:rgba(12,20,38,.45); --tbl-glow:rgba(190,214,255,.20);
  }
  [data-table="rosewood"]{                     /* madder-dyed: reds + rust, gold accents */
    --mat-edge:#5e1d12;
    --band-1:#b34a2c; --band-1b:#9c3d24;
    --band-2:#8a2f22; --band-2b:#77281d;
    --stripe-g:#c39136; --stripe-x:#d8c290;
    --fleck:rgba(255,225,190,.15);
    --tbl-shade:rgba(40,12,6,.45); --tbl-glow:rgba(255,200,150,.20);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%}
  body{font-family:var(--sans);color:var(--ink);
    background:
      radial-gradient(140% 100% at 50% 0%, var(--tint) 0%, transparent 42%),
      repeating-linear-gradient(45deg, rgba(255,240,210,.012) 0 2px, transparent 2px 7px),
      radial-gradient(120% 120% at 50% 18%, var(--felt-1) 0%, var(--felt-2) 55%, var(--rim) 100%);
    background-attachment:fixed;
    min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-text-size-adjust:100%;
    overscroll-behavior-y:none;text-rendering:optimizeLegibility}
  /* respect notches / rounded corners on modern phones */
  .wrap{max-width:1000px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
    padding:calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}
  button{-webkit-appearance:none;appearance:none}
  input,textarea{font-size:16px}   /* 16px stops iOS Safari auto-zooming when a field is focused */
  /* kill the 300ms tap delay / double-tap-zoom on anything interactive */
  button,.btn,.gcard,.cbtn,.hcard,.shoptile,.grouprow,.onlinerow,.tabbar button,.lang button,.sbtn,.ab-suit,.bigbtn,.selgame .sgc,.hh-me,.joinbanner{touch-action:manipulation}

  header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
  .brand{display:flex;align-items:baseline;gap:10px}
  .brand h1{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:.5px;margin:0}
  .brand .sub{font-size:11px;color:var(--muted);letter-spacing:2px;text-transform:uppercase}
  .tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  .tools .btn{padding:6px 10px;font-size:12px}
  .tools .langsel button{padding:5px 8px;font-size:11px}
  .homehead .langsel{flex:0 0 auto}
  .homehead .langsel button{padding:4px 7px;font-size:10px}
  .btn{font-family:var(--sans);font-size:13px;color:var(--ink);background:rgba(255,235,200,.06);
    border:1px solid rgba(255,235,200,.16);padding:7px 12px;border-radius:999px;cursor:pointer;
    transition:background .15s,border-color .15s,transform .05s}
  .btn:hover{background:rgba(255,235,200,.12)} .btn:active{transform:translateY(1px)}
  .lang{display:flex;border:1px solid rgba(255,235,200,.16);border-radius:999px;overflow:hidden}
  .lang button{font-family:var(--sans);font-size:12px;color:var(--muted);background:transparent;border:0;padding:6px 10px;cursor:pointer}
  .lang button.on{background:var(--gold);color:#33270a;font-weight:600}

  /* scoreboard (filled per game) */
  .board{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 8px;flex-wrap:wrap;min-height:30px}
  .teambox{display:flex;align-items:center;gap:8px;font-size:13px}
  .teambox .dot{width:10px;height:10px;border-radius:50%}
  .teambox.t0 .dot{background:var(--gold)} .teambox.t1 .dot{background:var(--coral)}
  .teambox b{font-family:var(--num);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
  .pills{display:flex;gap:6px;flex-wrap:wrap}
  .ppill{font-size:12px;padding:5px 10px;border-radius:999px;background:rgba(255,235,200,.06);
    border:1px solid rgba(255,235,200,.16);display:flex;gap:6px;align-items:center}
  .ppill b{font-family:var(--num);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.2px}
  .ppill.me{border-color:var(--gold)} .ppill .dt{width:8px;height:8px;border-radius:50%}
  .ppill.s0 .dt{background:var(--gold)} .ppill.s1 .dt{background:var(--teal)} .ppill.s2 .dt{background:var(--coral)}
  .ppill.done{opacity:.55} .ppill.over{border-color:var(--coral)}
  .trumpchip{font-size:12px;padding:5px 11px;border-radius:999px;background:rgba(255,235,200,.06);
    border:1px solid rgba(255,235,200,.16);display:flex;gap:6px;align-items:center;white-space:nowrap}
  .tensrow{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 8px;flex-wrap:wrap;min-height:0}
  .tensrow.hide{display:none}
  .coin{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--num);
    font-size:14px;font-weight:700;background:radial-gradient(circle at 35% 30%, #4a3a24, #2c2113);
    border:2px solid rgba(255,235,200,.10);color:var(--muted)}
  .coin .s{font-size:13px;opacity:.85}
  .coin.team0{color:#3a2a08;background:radial-gradient(circle at 35% 30%, #ffe5a0, var(--gold-deep));border-color:#f6d488}
  .coin.team1{color:#3a1408;background:radial-gradient(circle at 35% 30%, #ffb597, var(--coral-deep));border-color:#f3a98c}

  /* table = the korai mat from the reference photo: red cloth binding, lengthwise dusty
     indigo/madder bands split by mustard stripe pairs with a green core, dotted
     reversible weave + cream flecks, lamplit centre */
  .table{position:relative;flex:1;min-height:380px;border-radius:14px;margin-top:2px;overflow:hidden;
    background:
      /* lamplight sheen + dusk vignette */
      radial-gradient(60% 50% at 50% 44%, rgba(255,241,200,.12) 0%, rgba(255,241,200,0) 60%),
      radial-gradient(130% 130% at 50% 42%, rgba(0,0,0,0) 46%, var(--tbl-shade) 100%),
      /* cream weave flecks (the dotted reversible texture) */
      radial-gradient(circle at 3px 2px, var(--fleck) 0 1.2px, transparent 1.9px),
      /* fine weft rows running across the bands */
      repeating-linear-gradient(0deg, rgba(60,34,12,.10) 0 1px, transparent 1px 5px),
      /* the lengthwise band pattern: indigo · gold/green/gold · madder · gold/cream/gold */
      repeating-linear-gradient(90deg,
        var(--band-1)  0 26px,  var(--band-1b) 26px 52px,
        var(--stripe-g) 52px 57px, var(--stripe-x) 57px 60px, var(--stripe-g) 60px 65px,
        var(--band-2)  65px 92px, var(--band-2b) 92px 118px,
        var(--stripe-g) 118px 123px, #e8d8ae 123px 126px, var(--stripe-g) 126px 131px);
    background-size:auto,auto,7px 5px,auto,auto;
    border:7px solid var(--mat-edge);
    box-shadow:inset 0 0 60px var(--tbl-shade), inset 0 0 0 1px rgba(255,240,210,.25), 0 12px 34px rgba(0,0,0,.45)}
  /* binding stitch: the pale running stitch just inside the red cloth edge */
  .table::before{content:"";position:absolute;inset:3px;border-radius:9px;pointer-events:none;
    border:1px dashed rgba(255,240,210,.38)}
  .table::after{content:"";position:absolute;left:50%;top:44%;width:150px;height:150px;transform:translate(-50%,-50%);
    border-radius:50%;pointer-events:none;background:radial-gradient(circle, var(--tbl-glow) 0%, transparent 70%)}

  /* ---- mat-unroll intro: the korai mat unrolls onto the floor when a game begins ---- */
  .table.unroll{animation:matUnrollClip .95s cubic-bezier(.22,.8,.3,1) both}
  @keyframes matUnrollClip{
    from{clip-path:inset(0 0 100% 0 round 14px)}
    to{clip-path:inset(0 0 0 0 round 14px)}
  }
  /* the rolled-up mat: a straw cylinder that travels down as the mat opens behind it */
  #matRoll{height:46px;border-radius:23px;pointer-events:none;
    background:
      repeating-linear-gradient(90deg, var(--band-1) 0 26px, var(--stripe-g) 26px 30px, var(--band-2) 30px 56px, var(--stripe-g) 56px 60px),
      linear-gradient(180deg, rgba(255,240,210,.35) 0%, transparent 30%, rgba(30,15,5,.45) 100%);
    background-blend-mode:normal;
    box-shadow:0 10px 22px rgba(0,0,0,.5), inset 0 -4px 9px rgba(30,15,5,.55), inset 0 3px 6px rgba(255,240,200,.3);
    border:2px solid var(--mat-edge)}
  /* rolled spiral visible at both ends of the cylinder */
  #matRoll::before,#matRoll::after{content:"";position:absolute;top:2px;width:38px;height:38px;border-radius:50%;
    background:repeating-radial-gradient(circle at 50% 50%, var(--band-2) 0 3px, var(--band-1) 3px 6px);
    border:1px solid var(--mat-edge)}
  #matRoll::before{left:2px} #matRoll::after{right:2px}
  @media (prefers-reduced-motion: reduce){
    .table.unroll{animation:none}
    #matRoll{display:none}
    .play,.dealing,.hcard{transition:none}
    .deck.shuffling i{animation:none}
    .play.impact .card,.table.shake{animation:none}
    .shockwave{display:none}
  }

  .deck{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:46px;height:64px;z-index:4;display:none}
  .deck.show{display:block}
  .deck i{position:absolute;inset:0;border-radius:8px;
    background:repeating-linear-gradient(45deg, transparent 0 7px, var(--back-line) 7px 8px),
      linear-gradient(135deg,var(--back-a),var(--back-b));border:1px solid var(--back-edge);box-shadow:var(--shadow)}
  /* riffle: the stack physically jitters while the shuffle sound plays */
  .deck.shuffling i{animation:deckShuffle .34s ease}
  @keyframes deckShuffle{
    0%,100%{margin-left:0;margin-top:0}
    22%{margin-left:-7px;margin-top:-2px}
    50%{margin-left:6px;margin-top:1px}
    78%{margin-left:-3px;margin-top:0}
  }
  .dealLayer{position:absolute;inset:0;pointer-events:none;z-index:6}
  .dealing{position:absolute;width:42px;height:60px;left:50%;top:44%;opacity:0;transform:translate(-50%,-50%) scale(1);
    transition:left .19s cubic-bezier(.2,.7,.3,1), top .19s cubic-bezier(.2,.7,.3,1), transform .19s, opacity .1s}

  /* Fixed height + top-anchored content: every seat's avatar lands on its seat point,
     regardless of whether the name/count/card-backs below it are present. */
  .seat{position:absolute;transform:translate(-50%,-50%);text-align:center;width:120px;
    height:92px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
  .seat .av{width:48px;height:48px;border-radius:50%;margin:0 auto 4px;display:grid;place-items:center;flex:0 0 48px;
    font-family:var(--serif);font-size:18px;color:#2c1608;position:relative;
    background:radial-gradient(circle at 35% 30%, #d99a5b, #a0602c);border:2px solid rgba(255,235,200,.20)}
  .seat .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
  /* card count rides on the avatar — it can no longer crowd the player's name */
  .seat .av .cnt{position:absolute;bottom:-6px;right:-10px;z-index:2;font-family:var(--num);font-size:10.5px;font-weight:700;
    padding:1px 6px;border-radius:999px;background:var(--bar-strong);border:1px solid rgba(255,235,200,.32);
    color:#f3e3bd;font-variant-numeric:tabular-nums;line-height:1.5}
  .seat.t0 .av{background:radial-gradient(circle at 35% 30%, #ffe08a, var(--gold-deep));border-color:#fff0b8}
  .seat.t1 .av{background:radial-gradient(circle at 35% 30%, #ff9bb0, var(--coral-deep));border-color:#ffd0d8}
  .seat.s0 .av{background:radial-gradient(circle at 35% 30%, #ffe08a, var(--gold-deep));border-color:#fff0b8}
  .seat.s1 .av{background:radial-gradient(circle at 35% 30%, #a9c4ea, var(--teal-deep));border-color:#cfdef5}
  .seat.s2 .av{background:radial-gradient(circle at 35% 30%, #ff9bb0, var(--coral-deep));border-color:#ffd0d8}
  .seat.active .av{box-shadow:0 0 0 3px var(--good),0 0 22px rgba(158,211,106,.7)}
  .seat .nm{font-size:12px;color:var(--ink);font-weight:600;line-height:1.25;max-width:120px;
    text-shadow:0 1px 3px rgba(30,18,6,.65);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .seat .meta{font-size:11px;color:#f3e3bd;text-shadow:0 1px 3px rgba(30,18,6,.65);min-height:14px;font-variant-numeric:tabular-nums}
  .seat .backs{display:flex;justify-content:center;margin-top:3px;min-height:26px}
  .seat .backs i{width:18px;height:26px;border-radius:3px;margin-left:-10px;
    background:linear-gradient(135deg,var(--back-a),var(--back-b));border:1px solid var(--back-edge)}
  /* side seats sit ON the rim now — narrow the label box so names never clip */
  @media (max-width:560px){ .seat{width:82px} .seat .nm{font-size:11px;max-width:82px} }
  /* shared turn indicator — "whose turn now · who's next", fed by every game (owner 2026-07-15) */
  .turnbar{position:absolute;top:3px;left:50%;transform:translateX(-50%);z-index:22;display:none;
    align-items:center;gap:8px;max-width:94%;padding:4px 12px;border-radius:999px;
    background:linear-gradient(180deg,rgba(38,25,12,.92),rgba(24,15,7,.92));border:1px solid rgba(255,235,200,.22);
    box-shadow:0 4px 14px rgba(0,0,0,.4);font-size:12px;color:var(--ink);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;pointer-events:none}
  .turnbar.show{display:flex}
  .turnbar .tb-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--good);box-shadow:0 0 8px rgba(158,211,106,.8)}
  .turnbar .tb-now{font-weight:700}
  .turnbar .tb-now.you{color:var(--gold)}
  .turnbar .tb-sep{opacity:.4;margin:0 1px}
  .turnbar .tb-next{color:var(--muted)}
  .turnbar .tb-next b{color:#f3e3bd;font-weight:600}
  body.kodi .turnbar,body.rummy .turnbar{top:4px}
  /* per-seat target badge for 2-3-5 / 7-8: "won/target", Callbreak-style */
  .tgtchip{display:inline-block;font-family:var(--num);font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;
    background:rgba(26,16,8,.72);border:1px solid rgba(255,235,200,.28);color:#f3e3bd;font-variant-numeric:tabular-nums}
  .tgtchip.done{border-color:var(--good);color:var(--good)}
  .tgtchip.over{border-color:var(--coral);color:#ffb09e}
  /* trick-win ritual: the winner's score badge / captured-ten coin pops */
  .teambox.bump b,.ppill.bump b{display:inline-block;animation:lakBump .5s ease}
  .coin.justwon{animation:lakBump .55s ease}

  /* ---- the mat's own furniture: brand mark, woven trim, diya + lakhoti toys ---- */
  /* the brand woven INTO the mat: MULTIPLY blend makes each letter take the darker shade of
     whatever coloured thread-band it sits over (red → deep madder, indigo → deep blue,
     gold → deep gold) — position-matched, no box (owner 2026-07-13). Text follows the language. */
  #matBrand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;pointer-events:none;
    text-align:center;user-select:none;white-space:nowrap;mix-blend-mode:multiply;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
  #matBrand .mb-name{display:block;font-family:var(--serif);font-size:clamp(44px,13vw,86px);letter-spacing:3px;
    font-weight:700;color:#5a3b1e}                        /* mid warm tone → multiply darkens to the band's own hue */
  #matBrand .mb-sub{display:block;font-family:var(--sans);font-size:clamp(9px,2.6vw,12px);font-weight:800;
    letter-spacing:8px;margin-top:7px;text-indent:8px;text-transform:uppercase;color:#5a3b1e}
  #matTrim{position:absolute;inset:0;pointer-events:none;z-index:1;border:10px solid transparent;opacity:.5;border-radius:8px}
  #matDiya{position:absolute;right:12px;top:10px;width:46px;height:34px;z-index:2;
    background:none;border:0;padding:0;cursor:pointer;opacity:.95;overflow:visible}
  /* the diya actually lights its corner of the mat: a breathing warm pool + flame halo */
  #matDiya::before{content:"";position:absolute;left:50%;top:40%;width:150px;height:110px;
    transform:translate(-50%,-50%);pointer-events:none;z-index:0;filter:blur(3px);
    background:radial-gradient(closest-side, rgba(255,196,90,.5), rgba(255,150,40,.18) 55%, transparent 78%);
    animation:diyaPool 2.8s ease-in-out infinite}
  @keyframes diyaPool{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
  #matDiya svg{width:100%;height:100%;position:relative;z-index:1}
  #matDiya .dfl{filter:drop-shadow(0 0 7px rgba(255,196,90,.9))}
  #matDiya .dfl,#matDiya .dfl2{transform-origin:20px 17px;animation:diyaFlick 2.8s ease-in-out infinite}
  #matDiya .dfl2{animation-duration:2.1s}
  #matDiya .dglow{transform-origin:20px 15px;animation:diyaGlow 2.8s ease-in-out infinite}
  @keyframes diyaFlick{0%,100%{transform:scaleY(1) skewX(0)}30%{transform:scaleY(.9) skewX(2.5deg)}60%{transform:scaleY(1.08) skewX(-2deg)}}
  @keyframes diyaGlow{0%,100%{opacity:.5}45%{opacity:.85}}
  #matDiya.flare .dfl,#matDiya.flare .dfl2{animation:diyaFlare .8s ease}
  @keyframes diyaFlare{35%{transform:scale(1.6) scaleY(1.25)}}
  #matMarble{position:absolute;left:14px;bottom:12px;width:22px;height:22px;z-index:2;
    background:none;border:0;padding:0;cursor:pointer;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
  #matMarble svg{width:100%;height:100%}
  #matMarble.roll{animation:marbleRoll .7s cubic-bezier(.3,.7,.4,1)}
  @keyframes marbleRoll{40%{transform:translateX(18px) rotate(150deg)}100%{transform:translateX(0) rotate(360deg)}}

  /* first-run chalk guide over the hand */
  #guideTip{position:relative;margin:0 auto 10px;max-width:min(92vw,430px);text-align:center;
    font-family:var(--serif);font-style:italic;font-size:13.5px;color:#f4e2b8;padding:7px 14px;
    border:1.5px dashed rgba(244,226,184,.55);border-radius:12px;background:rgba(30,18,8,.6)}
  #guideTip .ga{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);color:#f4e2b8;
    font-size:12px;animation:gaBob 1.1s ease-in-out infinite}
  @keyframes gaBob{50%{transform:translateX(-50%) translateY(4px)}}
  #guideTip.hide{display:none}

  /* ---------- Kodi / Amdavad board ---------- */
  body.kodi .board,body.kodi .tensrow,body.kodi .handwrap,body.kodi #trickArea,body.kodi #deck,
  body.kodi #dealLayer,body.kodi #reactSeatBtn,body.kodi #fxLayer{display:none!important}
  #kodiWrap{position:absolute;inset:0;display:none}
  body.kodi #kodiWrap{display:block}
  /* the game lives on a real Indian wood-framed slate (opaque), resting on the mat */
  #kdFrame{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:min(90%,360px);aspect-ratio:1;
    padding:15px;border-radius:11px;
    background:linear-gradient(135deg,#c99e60,#a9793f 55%,#8a5f30),
      repeating-linear-gradient(92deg, rgba(60,34,12,.14) 0 2px, transparent 2px 7px);
    background-blend-mode:multiply;
    box-shadow:0 18px 38px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,240,210,.35), inset 0 -3px 6px rgba(40,20,6,.5)}
  #kdSlate{position:relative;width:100%;height:100%;border-radius:5px;overflow:hidden;
    background:radial-gradient(130% 110% at 32% 22%, #232a22 0%, #0f130f 60%, #080a08 100%);
    box-shadow:inset 0 0 30px rgba(0,0,0,.95), inset 0 0 0 1px #000}
  /* faint chalk-dust smudges on the slate */
  #kdSlate::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background:
      radial-gradient(40% 22% at 26% 30%, rgba(238,240,226,.06), transparent 70%),
      radial-gradient(35% 20% at 74% 66%, rgba(238,240,226,.05), transparent 70%),
      radial-gradient(30% 40% at 60% 18%, rgba(238,240,226,.04), transparent 70%)}
  /* black taped corners with a little screw, like the real slate */
  .kdcorner{position:absolute;width:26px;height:26px;background:#141414;z-index:3;box-shadow:0 1px 2px rgba(0,0,0,.6)}
  .kdcorner::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#eee,#999);top:50%;left:50%;transform:translate(-50%,-50%)}
  .kdcorner.tl{top:6px;left:6px;clip-path:polygon(0 0,100% 0,0 100%);border-top-left-radius:6px}
  .kdcorner.tr{top:6px;right:6px;clip-path:polygon(0 0,100% 0,100% 100%);border-top-right-radius:6px}
  .kdcorner.bl{bottom:6px;left:6px;clip-path:polygon(0 0,0 100%,100% 100%);border-bottom-left-radius:6px}
  .kdcorner.br{bottom:6px;right:6px;clip-path:polygon(100% 0,100% 100%,0 100%);border-bottom-right-radius:6px}
  .kdcorner.tl::after{top:34%;left:34%} .kdcorner.tr::after{top:34%;left:66%}
  .kdcorner.bl::after{top:66%;left:34%} .kdcorner.br::after{top:66%;left:66%}
  #kdBoard{position:absolute;inset:0;width:100%;height:100%}
  #kdPawns{position:absolute;inset:0;pointer-events:none}
  /* gotis: broken glass-bangle shards in each player's colour */
  .kdpawn{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);display:grid;place-items:center;
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.55))}
  .kdpawn .bgsvg{width:100%;height:100%;display:block}
  .kdpawn.box{width:17px;height:17px;opacity:.92}
  .kdpawn.move{cursor:pointer;pointer-events:auto;animation:kdPulse 1.1s ease-in-out infinite}
  @keyframes kdPulse{0%,100%{filter:drop-shadow(0 3px 4px rgba(0,0,0,.55)) drop-shadow(0 0 0 rgba(158,211,106,0))}
    50%{filter:drop-shadow(0 3px 4px rgba(0,0,0,.55)) drop-shadow(0 0 5px rgba(158,211,106,.95))}}
  /* the hopping goti travelling square to square */
  .kdhopper{transition:none;z-index:30}
  .kdhopper.hopping .bgsvg{animation:kdHop .155s ease}
  @keyframes kdHop{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-11px) scale(1.09)}100%{transform:translateY(0) scale(1)}}
  #kdHud{position:absolute;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;
    flex-direction:column;align-items:center;gap:8px;z-index:5}
  #kdTurn{font-size:13px;color:var(--ink);display:flex;align-items:center;gap:7px;background:var(--bar-strong);
    padding:6px 14px;border-radius:999px;border:1px solid rgba(255,235,200,.2)}
  #kdTurn .kddot{width:11px;height:11px;border-radius:50%}
  .cowrie{position:relative}
  .cowrie .cwsvg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
  .cowrie .cface-up{display:none}
  .cowrie.up .cface-up{display:block}
  .cowrie.up .cface-down{display:none}
  .cowrie.down .cface-up{display:none}
  .cowrie.down .cface-down{display:block}
  /* physics cowries live ON the slate: flick to throw, they bounce off the wooden frame + settle */
  #kdCow{position:absolute;inset:0;pointer-events:none;z-index:6}
  #kdCow .cowrie.phys{position:absolute;top:0;left:0;transform-origin:50% 50%;will-change:transform}
  #kdSlate{cursor:grab}
  /* the roll's value badge, shown on the slate once the shells settle */
  #kdCount{position:absolute;left:50%;top:14%;transform:translate(-50%,-6px) scale(.7);z-index:9;
    font-family:var(--num);font-weight:800;font-size:32px;color:#fff4dc;text-shadow:0 2px 8px rgba(0,0,0,.8),0 0 14px rgba(242,177,61,.6);
    opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
  #kdCount.show{opacity:1;transform:translate(-50%,0) scale(1)}
  .kdhint{font-size:11px;color:var(--muted);opacity:0;transition:opacity .3s;min-height:15px;text-align:center;letter-spacing:.3px}
  .kdhint.show{opacity:.85}
  /* the Aangan mark burned into the bottom of the wooden slate frame — subtle & classy */
  #kdBrand{position:absolute;left:0;right:0;bottom:2px;text-align:center;z-index:4;pointer-events:none;
    font-family:var(--serif);font-size:11px;letter-spacing:3px;font-weight:700;
    color:rgba(60,34,12,.5);text-shadow:0 1px 0 rgba(255,240,210,.28),0 -1px 1px rgba(0,0,0,.3)}
  #kdThrowBtn{font-size:14px;padding:9px 20px}

  /* layout & board games sit on a BOLD, SOLID board laid over the mat — no busy stripes
     showing through the play area (owner 2026-07-13). The mat is the floor; the board is on it. */
  body.sevens #matBrand,body.kodi #matBrand{display:none!important}
  /* board/layout games never show leftover trick-game seats. Rummy keeps its OWN seats (.rmseat). */
  body.sevens .seat,body.bluff .seat,body.kodi .seat,body.rummy .seat:not(.rmseat),body.sevens .tensrow,body.bluff .tensrow,body.rummy .tensrow,body.bluff #trickArea,body.rummy #trickArea{display:none!important}
  /* ---------- Rummy ---------- */
  body.rummy .board,body.rummy #deck,body.rummy #dealLayer,body.rummy #reactSeatBtn,body.rummy #fxLayer,body.rummy .handwrap,body.rummy #matBrand{display:none!important}
  #rummyWrap{position:absolute;inset:0;display:none;flex-direction:column;align-items:stretch;gap:4px;padding:8px}
  body.rummy #rummyWrap{display:flex}
  #rmField{position:relative;flex:1;width:100%;min-height:0}
  #rmSeats{position:absolute;inset:0;pointer-events:none}
  .rmseat{width:70px}
  .rmseat .av{width:40px;height:40px;flex:0 0 40px;font-size:15px}
  .rmseat .nm{font-size:11px;max-width:70px}
  .rmseat .cnt{position:absolute;bottom:-6px;right:-8px;z-index:2;font-family:var(--num);font-size:10px;font-weight:700;
    background:var(--gold);color:#26221c;min-width:17px;height:17px;border-radius:999px;display:grid;place-items:center;padding:0 3px}
  .rmjoker{display:flex;gap:8px;justify-content:center;margin-top:8px;width:100%}
  #rmBoard{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:flex;gap:14px;align-items:flex-start;justify-content:center}
  .rmpile{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
  .rmpile .rmlbl{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
  .rmpile .rmcardback,.rmpile #rmWildCard .card,.rmpile #rmOpenCard .card{width:48px;aspect-ratio:52/76}
  .rmpile .rmcardback{width:48px;aspect-ratio:52/76;border-radius:6px;
    background:repeating-linear-gradient(45deg,transparent 0 6px,var(--back-line) 6px 7px),repeating-linear-gradient(-45deg,transparent 0 6px,var(--back-line) 6px 7px),linear-gradient(135deg,var(--back-a),var(--back-b));border:1px solid var(--back-edge)}
  .rmpile #rmWildCard,.rmpile #rmOpenCard{width:48px;aspect-ratio:52/76}
  .rmpile .rmcount{position:absolute;right:-6px;top:14px;background:var(--gold);color:#26221c;font-weight:800;font-family:var(--num);
    font-size:11px;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;padding:0 4px}
  .rmpile.hot{cursor:pointer} .rmpile.hot .rmcardback,.rmpile.hot #rmOpenCard{box-shadow:0 0 0 2px var(--good),0 0 12px rgba(158,211,106,.6);border-radius:6px}
  .rmempty{width:48px;aspect-ratio:52/76;border-radius:6px;border:1px dashed rgba(255,235,200,.25);display:grid;place-items:center;color:rgba(255,235,200,.4)}
  .card.jkcard{background:linear-gradient(160deg,#3a2350,#241238);border-color:#6b4a8a;display:grid;place-items:center;color:#f0e2ff}
  .card.jkcard .jkw{position:absolute;top:4px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:1px;font-weight:800;opacity:.8}
  .card.jkcard .jkg{font-size:22px}
  #rmHandArea{flex:0 0 auto;width:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}
  /* flat, freely-arrangeable fan — no meld boxes; drag to reorder, tap to discard */
  #rmHandRow{display:flex;justify-content:center;align-items:flex-end;padding:20px 6px 6px;min-height:78px;touch-action:none;user-select:none}
  #rmHandRow .rmcard{width:40px;aspect-ratio:52/76;flex:0 0 auto;transition:transform .1s;cursor:grab;position:relative}
  #rmHandRow.candisc .rmcard{cursor:pointer}
  #rmHandRow .rmcard .card{width:100%;height:100%;box-shadow:0 2px 6px rgba(0,0,0,.4)}
  #rmHandRow .rmcard.dragging{cursor:grabbing;filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
  @media (hover:hover){ #rmHandRow .rmcard:hover{transform:translateY(-10px);z-index:6} }
  #rmActions{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:30px;padding-bottom:4px}
  #rmActions .rmprompt{font-size:12px;color:var(--ink)} #rmActions .rmprompt.dim{color:var(--muted)}
  .rmactrow{display:flex;gap:10px;justify-content:center;align-items:center}
  #rmActions .btn{padding:7px 18px}
  #rmActions .btn.ghost{background:rgba(255,235,200,.06);border:1px solid rgba(255,235,200,.2);color:var(--ink)}
  /* ---------- Sevens / Satti layout board ---------- */
  body.sevens .board,body.sevens .tensrow,body.sevens #trickArea,body.sevens #deck,
  body.sevens #dealLayer,body.sevens #reactSeatBtn,body.sevens #fxLayer{display:none!important}
  #sevensWrap{position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;gap:12px;padding:18px 16px;
    border-radius:8px;
    background:
      radial-gradient(130% 90% at 50% 32%, rgba(255,228,180,.08), rgba(255,228,180,0) 60%),
      repeating-linear-gradient(93deg, rgba(0,0,0,.05) 0 3px, rgba(255,255,255,.012) 3px 6px),
      linear-gradient(180deg,#3c2819,#20120a)}
  body.sevens #sevensWrap{display:flex}
  #svRows{display:flex;flex-direction:column;gap:12px;padding:20px 15px;border-radius:14px;width:100%;
    background:linear-gradient(180deg,#241812,#160d08);border:1px solid rgba(255,235,200,.18);
    box-shadow:inset 0 1px 0 rgba(255,240,210,.07), 0 14px 30px rgba(0,0,0,.55)}
  .svrow{display:flex;align-items:center;gap:8px}
  .svrow .svsuit{width:28px;text-align:center;font-size:26px;flex:0 0 28px;
    text-shadow:0 1px 3px rgba(20,10,2,.7)}
  .svrow.red .svsuit{color:#ff8f7a} .svrow.blk .svsuit{color:#f3e7cf}
  .svslots{display:flex;gap:4px;flex:1}
  .svslot{flex:1;min-width:0;aspect-ratio:2/3;max-width:38px;border-radius:5px;display:grid;place-items:center;
    font-family:var(--num);font-size:15px;font-weight:700;
    background:rgba(255,235,200,.06);border:1px solid rgba(255,235,200,.14);color:transparent}
  .svslot.anc{border-color:rgba(242,177,61,.6);color:rgba(242,177,61,.8);background:rgba(242,177,61,.08)}
  .svslot.on{background:linear-gradient(160deg,#fff8ee,#f2e2c2);border-color:rgba(40,24,8,.35);color:#26221c;box-shadow:0 2px 5px rgba(0,0,0,.35)}
  .svrow.red .svslot.on{color:#b3241a}
  .svslot.can{border-color:var(--good);box-shadow:0 0 0 1px var(--good),0 0 8px rgba(158,211,106,.5);color:var(--good)}
  #svTurn{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:2px}
  .svchip{font-size:11px;padding:3px 9px;border-radius:999px;background:rgba(255,235,200,.06);
    border:1px solid rgba(255,235,200,.16);font-family:var(--num);display:flex;align-items:center;gap:4px}
  .svchip.me{border-color:var(--gold)} .svchip.act{background:rgba(242,177,61,.16);border-color:var(--gold)}
  .svchip::before{content:"";width:7px;height:7px;border-radius:50%;display:inline-block}
  .svchip.s0::before{background:var(--gold)} .svchip.s1::before{background:var(--teal)} .svchip.s2::before{background:var(--coral)}

  /* ---------- Bluff / Cheat ---------- */
  body.bluff .board,body.bluff .tensrow,body.bluff #trickArea,body.bluff #deck,
  body.bluff #dealLayer,body.bluff #reactSeatBtn,body.bluff #fxLayer{display:none!important}
  /* Bluff plays ON the mat (owner 2026-07-13) — the pile/chips sit on the korai like a real game */
  #bluffWrap{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px}
  body.bluff #bluffWrap{display:flex}
  #blChips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
  .blchip{font-size:11px;padding:3px 9px;border-radius:999px;background:rgba(255,235,200,.06);
    border:1px solid rgba(255,235,200,.16);font-family:var(--num);display:flex;align-items:center;gap:4px}
  .blchip.me{border-color:var(--gold)} .blchip.act{background:rgba(242,177,61,.16);border-color:var(--gold)}
  .blchip::before{content:"";width:7px;height:7px;border-radius:50%;display:inline-block}
  .blchip.s0::before{background:var(--gold)} .blchip.s1::before{background:var(--teal)} .blchip.s2::before{background:var(--coral)}
  #blPile{position:relative;display:flex;align-items:center;justify-content:center;min-height:110px}
  .blstack{position:relative;width:96px;height:104px}
  .blcard{position:absolute;width:60px;height:84px;border-radius:7px;
    border:1.5px solid rgba(255,225,190,.35);box-shadow:0 4px 12px rgba(0,0,0,.4);
    background-image:radial-gradient(circle at 50% 50%,rgba(242,177,61,.22) 0 22%,transparent 24%),linear-gradient(150deg,#8a2a1c,#5a140d)}
  .blempty{width:60px;height:84px;border-radius:7px;border:1.5px dashed rgba(255,235,200,.2);
    display:grid;place-items:center;font-size:10px;color:rgba(255,235,200,.4);text-transform:uppercase;letter-spacing:1px}
  .blcount{position:absolute;right:-6px;bottom:-6px;background:var(--gold);color:#26221c;font-weight:800;
    font-family:var(--num);font-size:13px;min-width:24px;height:24px;border-radius:999px;display:grid;place-items:center;padding:0 5px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
  #blClaim{min-height:22px;text-align:center}
  .blclaimtxt{font-size:13px;color:var(--ink);background:rgba(24,15,7,.7);padding:5px 14px;border-radius:999px;
    border:1px solid rgba(242,177,61,.35)}
  .blclaimtxt.dim{opacity:.7;border-color:rgba(255,235,200,.14)}
  /* bluff-call picker: the challenged cards face-down, tap one to flip */
  .blpickrow{display:flex;gap:8px;justify-content:center;align-items:center}
  .blpickcard{width:52px;height:73px;border-radius:7px;cursor:pointer;padding:0;position:relative;
    border:1.5px solid rgba(255,225,190,.4);
    background-image:radial-gradient(circle at 50% 50%,rgba(242,177,61,.22) 0 22%,transparent 24%),linear-gradient(150deg,#8a2a1c,#5a140d);
    box-shadow:0 4px 12px rgba(0,0,0,.45);transition:transform .18s}
  .blpickcard:hover,.blpickcard:active{transform:translateY(-6px) scale(1.05)}
  .blpickcard.flip{background:none;border:0;box-shadow:none;transform:translateY(-8px) scale(1.12);width:56px;height:79px}
  .blpickcard .card{width:100%;height:100%}
  .hcard.sel{transform:rotate(var(--fr,0deg)) translateY(calc(var(--fy,0px) - 26px))!important;z-index:70!important}
  .hcard.sel .card{box-shadow:var(--shadow),0 0 0 2px var(--gold),0 0 16px rgba(242,177,61,.6)}
  .blbar{display:none;flex-direction:column;gap:7px;align-items:center;margin-bottom:8px;
    padding:8px 10px;border-radius:12px;background:var(--bar);border:1px solid rgba(242,177,61,.4)}
  body.bluff .blbar.show{display:flex}   /* scoped: a leftover bar can never bleed into another game */
  .blclaimrow{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:center}
  .blclaimrow .bllbl{font-size:11px;color:var(--muted);margin-right:2px}
  .blrank{width:28px;height:30px;border-radius:7px;background:var(--cream);border:1.5px solid rgba(40,24,8,.22);
    color:#26221c;font-family:var(--num);font-weight:700;font-size:13px;cursor:pointer}
  .blrank.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 2px rgba(242,177,61,.4)}
  .blactrow{display:flex;gap:8px;align-items:center}
  .blactrow .btn{padding:7px 16px;font-size:13px}
  .btn.danger{background:linear-gradient(180deg,#c0392b,#96271c);border-color:#7a1d14;color:#fff}

  /* trick pile sits above the seats so a played card is never clipped by a neighbour's avatar/backs */
  .trick{position:absolute;inset:0;pointer-events:none;z-index:5}
  /* the centre pile — thrown cards land here; big and readable, they own the middle now */
  .play{position:absolute;width:clamp(56px,8.5vw,76px);height:auto;aspect-ratio:46/64;transform:translate(-50%,-50%);transition:all .25s ease}
  .play.win .card{box-shadow:0 0 0 2px var(--good),0 0 22px rgba(158,211,106,.6)}
  /* a MINDI hits the mat: the card slams down over everything and the mat jolts */
  .play.impact{z-index:6}
  .play.impact .card{animation:mindiSlam .5s cubic-bezier(.2,.85,.3,1);
    box-shadow:0 0 0 3px var(--red), 0 0 34px rgba(208,52,44,.75), var(--shadow)}
  @keyframes mindiSlam{0%{transform:scale(1.65)}55%{transform:scale(.94)}75%{transform:scale(1.06)}100%{transform:scale(1)}}
  .shockwave{position:absolute;width:20px;height:20px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
    border:3px solid rgba(208,52,44,.65);box-shadow:0 0 18px rgba(208,52,44,.5);animation:shockOut .55s ease-out forwards}
  @keyframes shockOut{from{width:20px;height:20px;opacity:.95}to{width:230px;height:230px;opacity:0}}
  .table.shake{animation:tableShake .38s ease}
  @keyframes tableShake{0%,100%{margin-left:0;margin-top:0}25%{margin-left:4px;margin-top:-2px}50%{margin-left:-4px;margin-top:2px}75%{margin-left:2px;margin-top:-1px}}
  /* a trump / Ser-suit card: calm indigo shimmer */
  .play.trumpglow .card{box-shadow:0 0 0 2px var(--teal), 0 0 20px rgba(111,149,204,.7), var(--shadow)}

  /* cards */
  .card{width:100%;height:100%;border-radius:8px;background:linear-gradient(160deg,#ffffff 0%, #fff6e2 100%);
    border:1px solid rgba(40,24,8,.22);box-shadow:var(--shadow);position:relative;font-family:var(--card-serif);user-select:none;overflow:hidden}
  .card .r{position:absolute;top:3px;left:5px;font-size:15px;line-height:1;font-weight:700;z-index:2}
  .card .r.b{top:auto;left:auto;bottom:3px;right:5px;transform:rotate(180deg)}
  /* thin craft frame on number cards; courts and aces draw their own */
  .card .cif{position:absolute;inset:7% 8%;border:1px solid rgba(43,26,14,.16);border-radius:5px;pointer-events:none}
  .card .courtart,.card .acesvg{position:absolute;inset:0;width:100%;height:100%}
  .card.s-S{color:var(--s-S)} .card.s-H{color:var(--s-H)} .card.s-D{color:var(--s-D)} .card.s-C{color:var(--s-C)}
  .card.ten{border-color:var(--red)}
  .card.ten::before{content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;z-index:3;
    box-shadow:inset 0 0 0 2px var(--red), inset 0 0 14px rgba(208,52,44,.5)}
  .card .pips{position:absolute;inset:14% 17%}
  .card .pip{position:absolute;transform:translate(-50%,-50%);font-size:13px;line-height:1}
  .card .pip.fl{transform:translate(-50%,-50%) rotate(180deg)}
  .card .ace{position:absolute;inset:0;display:grid;place-items:center}
  .card .ace .apip{position:relative;font-size:34px}
  .card .ace .apip::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);
    border:1.5px solid currentColor;border-radius:50%;opacity:.32}
  .card .court{position:absolute;inset:0}
  .card .court .cf{position:absolute;inset:13% 12%;border:1.5px solid currentColor;border-radius:6px;opacity:.45}
  .card .court .cl{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;font-weight:700;letter-spacing:.5px}
  .card .court .cs{position:absolute;left:50%;bottom:19%;transform:translateX(-50%);font-size:15px}
  .card.back{background:
      repeating-linear-gradient(45deg, transparent 0 7px, var(--back-line) 7px 8px),
      repeating-linear-gradient(-45deg, transparent 0 7px, var(--back-line) 7px 8px),
      linear-gradient(135deg,var(--back-a),var(--back-b));border:1px solid var(--back-edge)}
  .card.back::after{content:var(--back-sym);position:absolute;inset:0;display:grid;place-items:center;color:var(--back-glyph);font-size:20px}

  /* ---- in-game: compact the chrome so the mat + cards nearly fill the screen (owner 2026-07-13) ---- */
  body.playing .wrap{padding:calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left))}
  body.playing header{margin-bottom:4px}
  body.playing .brand{display:none}                       /* the mat carries the brand now — free the row */
  body.playing .tools{gap:5px}
  body.playing .tools .btn{padding:5px 10px;font-size:12px}
  body.playing .board{margin:0 0 4px}
  body.playing .tensrow{margin-bottom:2px}
  body.playing .handwrap{margin-top:4px}
  body.playing .table{min-height:0}                       /* let the mat collapse so the hand always fits on-screen */
  /* bigger cards while playing (sized so a full fan still fits above the screen edge) */
  body.playing .hcard{width:clamp(74px,21vw,104px)}
  body.playing .hand{height:150px;padding:38px 8px 18px}   /* bottom cushion: rotated corners never dip off-screen */
  body.playing .play{width:clamp(66px,11vw,92px)}
  /* hand */
  .handwrap{margin-top:8px}
  .actionbar{display:none;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-bottom:8px;
    padding:9px 12px;border-radius:12px;background:var(--bar);border:1px solid rgba(242,177,61,.38)}
  .actionbar.show{display:flex}
  /* president 30s organise grace bar */
  .orgbar{display:none;align-items:center;justify-content:center;gap:10px;margin-bottom:8px;
    padding:8px 14px;border-radius:12px;background:var(--bar);border:1px solid rgba(242,177,61,.45)}
  .orgbar.show{display:flex}
  .orgbar #orgTxt{font-size:12.5px;color:var(--ink);font-weight:600}
  .orgbar .orgclock{font-family:var(--serif,serif);font-size:17px;font-weight:700;color:var(--gold,#e6b95c);
    min-width:26px;text-align:center}
  .orgbar .btn{padding:5px 14px;font-size:13px}
  .actionbar .ab-txt{font-size:13px;color:var(--ink);font-weight:600}
  .actionbar .ab-suit{width:42px;height:42px;border-radius:9px;background:var(--cream);border:2px solid rgba(40,24,8,.22);
    font-family:var(--serif);font-size:22px;cursor:pointer;display:grid;place-items:center}
  .actionbar .ab-suit.red{color:var(--red)} .actionbar .ab-suit.black{color:var(--black)}
  .actionbar .ab-suit:hover{outline:3px solid var(--good)}
  .actionbar .ab-btn{font-family:var(--sans);font-size:13px;padding:8px 14px;border-radius:999px;cursor:pointer;
    background:var(--gold);color:#33270a;border:0;font-weight:600}
  .actionbar .ab-btn.alt{background:rgba(255,235,200,.1);color:var(--ink);border:1px solid rgba(255,235,200,.25)}
  .handlabel{font-size:11px;color:var(--muted);text-align:center;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;min-height:14px}
  /* the hand is a FAN anchored to the bottom edge: big cards, tops visible, bottoms
     bleeding off-screen like cards actually held up close (see fanHand()) */
  /* the fan sits at the bottom; headroom ABOVE lets a lifted/peeked card rise fully into
     view without ever being clipped (the old fixed-height overflow:hidden cut the cards off). */
  .hand{display:flex;justify-content:center;align-items:flex-end;height:150px;min-height:0;overflow:visible;
    flex-wrap:nowrap;gap:0;padding:40px 8px 0;position:relative;z-index:1}
  /* cards are big & readable; more cards → deeper overlap, never smaller. */
  .hcard{width:clamp(70px,19.5vw,96px);flex:0 0 auto;height:auto;aspect-ratio:52/76;cursor:pointer;position:relative;
    transform:rotate(var(--fr,0deg)) translateY(var(--fy,0px));transform-origin:50% 100%;transition:transform .16s cubic-bezier(.3,.7,.3,1)}
  /* slide a finger across → the card under it pops up, fully visible, on its own */
  .hcard.peek{transform:rotate(0deg) translateY(-38px) scale(1.26);z-index:130!important}
  /* tapped/selected → held up, front and centre, ready to throw */
  .hcard.sel{transform:rotate(0deg) translateY(-46px) scale(1.3);z-index:150!important}
  .hcard.sel .card{box-shadow:var(--shadow),0 0 0 2px var(--gold),0 10px 22px rgba(0,0,0,.5)}
  .hcard.sel::after{content:"▲";position:absolute;top:-20px;left:50%;transform:translateX(-50%);
    font-size:13px;color:var(--gold,#e6b95c);text-shadow:0 1px 3px rgba(0,0,0,.6);animation:throwHint 1s ease-in-out infinite}
  @keyframes throwHint{0%,100%{transform:translateX(-50%) translateY(0);opacity:.6}50%{transform:translateX(-50%) translateY(-4px);opacity:1}}
  /* gesture states */
  .hcard.grab{transition:none;z-index:200}
  .hcard.lift{transition:none}
  .hcard.snap{transition:transform .2s cubic-bezier(.3,.7,.3,1)!important}
  .hcard.armed .card{box-shadow:var(--shadow),0 0 0 2px var(--good),0 0 20px rgba(158,211,106,.75)}
  .hcard.thrown{pointer-events:none}
  /* reorder drop preview: a bright caret at the slot the dragged card will land in */
  .hcard.dropat::before{content:"";position:absolute;left:-7px;top:6%;bottom:6%;width:4px;border-radius:3px;
    background:var(--gold,#e6b95c);box-shadow:0 0 10px rgba(242,177,61,.9);z-index:200}
  .hcard.dropend::after{content:"";position:absolute;right:-7px;top:6%;bottom:6%;width:4px;border-radius:3px;
    background:var(--gold,#e6b95c);box-shadow:0 0 10px rgba(242,177,61,.9);z-index:200}
  /* illegal card bounces back with a red flash */
  .hcard.bounce{animation:cardBounce .42s ease}
  @keyframes cardBounce{
    0%{transform:rotate(0) translateY(-34px) scale(1.18)}
    30%{transform:rotate(0) translateY(-52px) scale(1.2)}
    100%{transform:rotate(var(--fr,0deg)) translateY(var(--fy,0px)) scale(1)}}
  .hcard.bounce .card{box-shadow:var(--shadow),0 0 0 2px var(--red),0 0 18px rgba(208,52,44,.6)}
  /* a lifted card always shows its full art, even when the packed fan went compact */
  .hand.compact .hcard.peek .card .pips,.hand.compact .hcard.peek .card .courtart,.hand.compact .hcard.peek .card .acesvg,.hand.compact .hcard.peek .card .cif,
  .hand.compact .hcard.sel .card .pips,.hand.compact .hcard.sel .card .courtart,.hand.compact .hcard.sel .card .acesvg,.hand.compact .hcard.sel .card .cif{display:block}
  .hand.compact .hcard.peek .card .r,.hand.compact .hcard.sel .card .r{font-size:15px;top:3px;left:5px}
  /* no-overlap rule: a packed fan drops the art — clean rank+suit strips only */
  .hand.compact .card .pips,.hand.compact .card .courtart,.hand.compact .card .acesvg,.hand.compact .card .cif{display:none}
  .hand.compact .card .r{font-size:19px;top:5px;left:6px;line-height:1.05}
  /* 7–10 seats: smaller chips so the rim never crowds */
  .table.dense .seat{width:64px}
  .table.dense .seat .av{width:36px;height:36px;flex:0 0 36px;font-size:14px}
  .table.dense .seat .nm{font-size:10px;max-width:64px}
  .table.dense .seat .av .cnt{font-size:9.5px;padding:0 5px;bottom:-5px;right:-9px}
  /* the player's chosen deck skin, shown as a themed edge on their own (face-up) cards */
  .hcard .card{border:2px solid var(--back-edge);box-shadow:var(--shadow),0 0 0 1px var(--back-line)}

  /* overlays */
  .overlay{position:fixed;inset:0;background:rgba(22,13,5,.78);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    display:none;align-items:center;justify-content:center;z-index:30;
    padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom))}
  .overlay.show{display:flex}
  .panel{width:min(480px,94vw);max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
    border:1px solid rgba(255,235,200,.12);border-radius:16px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.5);text-align:center}
  .panel h2{font-family:var(--serif);margin:0 0 4px;font-size:24px}
  /* pause overlay — softer, calmer than the result panel */
  #pauseBtn.on{color:var(--gold,#e6b95c);box-shadow:0 0 0 1px rgba(230,185,92,.5) inset}
  #pauseOv{z-index:40;background:rgba(20,12,4,.86)}
  .pausepanel{width:min(360px,90vw)}
  .pauseglyph{font-size:46px;line-height:1;margin:2px 0 6px;color:var(--gold,#e6b95c);filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
  .pausead{margin:14px auto 4px;min-height:120px;width:100%;max-width:320px;display:flex;align-items:center;justify-content:center;gap:8px;
    border:1px dashed rgba(255,235,200,.28);border-radius:12px;background:rgba(255,235,200,.04);color:var(--muted);font-size:13px}
  .pausead .adtag{font-size:9px;font-weight:800;letter-spacing:1px;padding:2px 6px;border-radius:4px;background:rgba(255,235,200,.14);color:#f3e3bd}
  .panel p{font-size:13px;color:var(--muted);margin:6px 0;line-height:1.5}
  .gamewrap{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px}
  .gcard{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;cursor:pointer;text-align:left;
    background:rgba(255,235,200,.05);border:1px solid rgba(255,235,200,.16);transition:all .12s}
  .gcard:hover{background:rgba(255,235,200,.12);border-color:var(--gold)}
  .gcard.sel{border-color:var(--gold);background:rgba(240,198,116,.12)}
  .gcard .gi{flex:0 0 42px;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-size:23px;background:rgba(255,235,200,.05);overflow:hidden}
  .gcard .gi.num{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.3px}
  .gcard>div:last-child{min-width:0}
  .gcard .gt{font-size:15px;font-weight:600;color:var(--ink)} .gcard .gd{font-size:11px;color:var(--muted)}
  /* wrap: the stepper + the rummy joker toggle (and Kodi's 4 tiles) must never
     spill off a phone — they stack instead of clipping (owner no-overlap rule) */
  .subchoose{display:none;gap:10px;justify-content:center;margin:6px 0;flex-wrap:wrap}
  .subchoose.show{display:flex}
  /* player-count stepper: − N + */
  .pstep{display:flex;align-items:center;gap:14px;padding:6px 10px;border-radius:14px;
    background:rgba(255,235,200,.05);border:1px solid rgba(255,235,200,.16)}
  .pstep .pbtn{width:44px;height:44px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;
    background:rgba(255,235,200,.08);border:1px solid rgba(255,235,200,.25);color:var(--ink)}
  .pstep .pbtn:disabled{opacity:.3;cursor:default}
  .pstep .pbtn:not(:disabled):active{transform:scale(.92);background:var(--gold);color:#33270a}
  .pstep .pnum{min-width:86px;text-align:center}
  .pstep .pnum b{display:block;font-family:var(--num);font-size:26px;font-weight:700}
  .pstep .pnum span{font-size:11px;color:var(--muted)}
  .cbtn{min-width:86px;padding:10px 12px;border-radius:10px;cursor:pointer;background:rgba(255,235,200,.05);
    border:1px solid rgba(255,235,200,.16);color:var(--ink);text-align:center;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  .cbtn .big{font-family:var(--num);font-weight:700;font-size:22px;line-height:1;display:block;text-align:center}
  .cbtn .sm{font-size:11px;color:var(--muted);text-align:center}
  .cbtn.sel{border-color:var(--gold);background:rgba(240,198,116,.12)}
  .cta{margin-top:16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .cta .btn.primary{background:var(--gold);color:#33270a;border-color:var(--gold);font-weight:600;font-size:14px;padding:9px 18px}
  .ser-suits{display:flex;gap:10px;justify-content:center;margin:14px 0;flex-wrap:wrap}
  .sbtn{width:60px;height:60px;border-radius:12px;background:var(--cream);border:2px solid rgba(40,24,8,.22);
    font-family:var(--serif);font-size:30px;cursor:pointer;display:grid;place-items:center}
  .sbtn.red{color:var(--red)} .sbtn.black{color:var(--black)} .sbtn:hover{outline:3px solid var(--good)}
  .result-tens{display:flex;gap:18px;justify-content:center;margin:16px 0;flex-wrap:wrap}
  .rt{font-size:12px;color:var(--muted)} .rt .num{font-family:var(--serif);font-size:30px;line-height:1;color:var(--ink)}
  .rrow{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px 0}
  .rcell{padding:8px 12px;border-radius:10px;border:1px solid rgba(255,235,200,.16);font-size:12px}
  .rcell.ok{border-color:var(--good);background:rgba(158,211,106,.1)} .rcell.no{border-color:var(--coral);background:rgba(226,99,77,.1)}
  .rcell b{font-family:var(--num);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;display:block}
  .tally{font-size:12px;color:var(--muted);margin-top:12px} .tally b{color:var(--ink)}
  .slot{margin-top:16px;font-size:11px;color:var(--muted)}
  /* after-game strip: marbles won + wallet, above the reserved ad space */
  .lakline{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;
    font-size:13px;color:var(--muted);margin-bottom:10px}
  .lakline b{color:var(--ink);font-family:var(--num)}
  .lakline .lakwon{color:var(--gold);font-weight:700;display:inline-flex;align-items:center;gap:4px;
    animation:lakBump .45s ease}
  .lakline .lakicon{width:15px;height:15px}
  .adslot{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;
    border:1px dashed rgba(255,235,200,.22);border-radius:10px;color:var(--muted);font-size:12px;
    background:rgba(255,235,200,.03)}
  .adslot .adtag{font-size:9px;font-weight:800;letter-spacing:1px;padding:2px 6px;border-radius:4px;
    border:1px solid rgba(255,235,200,.3);color:rgba(255,235,200,.5)}
  .help-body{text-align:left;max-height:58vh;overflow:auto}
  .help-body h3{font-family:var(--serif);font-size:15px;margin:14px 0 4px;color:var(--gold)}
  .help-body ul{margin:4px 0;padding-left:18px;font-size:13px;color:var(--ink);line-height:1.5}
  .toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--bar-strong);
    border:1px solid rgba(255,235,200,.16);padding:8px 16px;border-radius:999px;font-size:13px;z-index:40;opacity:0;transition:opacity .2s;pointer-events:none}
  .toast.show{opacity:1}

  /* ---------- in-game fx layer: timer ring + reaction bubbles (above seats, survives re-render) ---------- */
  #fxLayer{position:absolute;inset:0;pointer-events:none;z-index:7}
  /* reaction button anchored to the LEFT of the player's own (bottom-centre) avatar */
  #reactSeatBtn{position:absolute;left:calc(50% - 58px);top:calc(87% - 28px);transform:translate(-50%,-50%);
    width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,235,200,.25);
    background:var(--bar-strong);font-size:21px;cursor:pointer;z-index:8;display:none;line-height:1;padding:0}
  #reactSeatBtn.show{display:grid;place-items:center}
  #reactSeatBtn:active{transform:translate(-50%,-50%) scale(.9)}
  /* timer ring: small badge sitting just to the RIGHT of the active player's avatar */
  .tring{position:absolute;width:34px;height:34px;transform:translate(-50%,-50%);pointer-events:none;
    background:rgba(30,18,8,.55);border-radius:50%}
  .tring svg{width:100%;height:100%;transform:rotate(-90deg)}
  .tring .trk{fill:none;stroke:rgba(255,235,200,.16);stroke-width:5}
  .tring .arc{fill:none;stroke:var(--good);stroke-width:5;stroke-linecap:round;transition:stroke .2s}
  .tring.warn .arc{stroke:var(--coral)}
  /* reaction bubble: pops toward the table centre from the reacting player's avatar —
     big enough to read across the room, never clipped by the mat edge */
  .reactfx{position:absolute;transform:translate(-50%,-50%);font-size:46px;pointer-events:none;z-index:9;
    animation:reactPop 2.5s ease-out forwards;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55))}
  @keyframes reactPop{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
    18%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}
    35%{transform:translate(-50%,-50%) scale(1)}
    80%{opacity:1;transform:translate(-50%,-58%) scale(1)}
    100%{opacity:0;transform:translate(-50%,-70%) scale(.9)}
  }

  /* reaction tray */
  .reacttray{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translateX(-50%) scale(.9);
    display:none;gap:6px;padding:8px 10px;border-radius:999px;z-index:41;
    background:var(--bar-strong);border:1px solid rgba(255,235,200,.18);box-shadow:0 12px 30px rgba(0,0,0,.5)}
  .reacttray.show{display:flex;animation:trayPop .16s ease-out}
  @keyframes trayPop{from{opacity:0;transform:translateX(-50%) scale(.8)}to{opacity:1;transform:translateX(-50%) scale(1)}}
  .reacttray button{background:transparent;border:0;font-size:32px;cursor:pointer;line-height:1;padding:3px 5px;
    transition:transform .1s}
  .reacttray button:hover{transform:scale(1.25)} .reacttray button:active{transform:scale(.9)}

  /* recent-moves log — clean Twitch-style chat feed */
  #logPanel{position:fixed;top:0;right:0;height:100%;width:min(300px,82vw);z-index:42;transform:translateX(100%);
    transition:transform .22s ease;background:rgba(26,16,8,.97);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    border-left:1px solid rgba(255,235,200,.12);box-shadow:-12px 0 34px rgba(0,0,0,.45);display:flex;flex-direction:column;
    padding:calc(10px + env(safe-area-inset-top)) 0 calc(10px + env(safe-area-inset-bottom))}
  #logPanel.show{transform:translateX(0)}
  #logPanel h3{font-family:var(--sans);font-weight:700;font-size:14px;margin:0 0 6px;padding:0 12px;
    display:flex;justify-content:space-between;align-items:center;letter-spacing:.3px}
  #logPanel .logclose{background:transparent;border:0;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
  #logList{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:0;padding:0 4px}
  /* each entry is one chat line: no boxes, just readable text */
  .logitem{font-size:13px;color:var(--ink);line-height:1.5;padding:4px 8px;border-radius:6px;word-break:break-word}
  .logitem:nth-child(odd){background:rgba(255,235,200,.03)}
  .logitem b{color:#f4c877;font-weight:700}                 /* player names in lamplight amber */
  .logitem.trick b{color:var(--good)} .logitem.ser b,.logitem.result b{color:var(--gold)}
  .logitem.result{color:var(--gold);font-weight:600}
  .logitem .lc{font-weight:700}
  .logitem .lc.red{color:#ff8f7a} .logitem .lc.black{color:#e8e0d0}

  /* in-app-browser hint */
  #iabHint{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:60;display:none;
    padding:10px 12px;border-radius:12px;font-size:12px;color:var(--ink);align-items:center;gap:10px;
    background:var(--bar-strong);border:1px solid var(--gold)}
  #iabHint.show{display:flex}
  #iabHint .x{margin-left:auto;background:transparent;border:0;color:var(--muted);font-size:18px;cursor:pointer}

  /* account bar / sign-in / groups */
  .acctbar{display:none;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    padding:8px 12px;margin-bottom:6px;border-radius:12px;background:rgba(255,235,200,.05);border:1px solid rgba(255,235,200,.14);font-size:12px}
  .acctbar .acct-me{display:flex;align-items:center;gap:8px}
  .acctbar .acct-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
    font-family:var(--serif);font-size:13px;background:var(--gold);color:#33270a;font-weight:700}
  .acctbar .acct-group{display:flex;align-items:center;gap:6px;color:var(--muted)}
  .acctbar .acct-group b{color:var(--ink);font-family:var(--serif);font-weight:600}
  .acctbar .acct-group .code{font-size:10px;letter-spacing:1px;padding:2px 6px;border-radius:999px;background:rgba(255,235,200,.08)}
  .acctbar .acct-actions{display:flex;gap:6px}
  .authdivider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px}
  .authdivider::before,.authdivider::after{content:"";flex:1;height:1px;background:rgba(255,235,200,.16)}
  .authform{display:flex;flex-direction:column;gap:8px;text-align:left}
  .authform input{font-family:var(--sans);font-size:16px;padding:10px 12px;border-radius:10px;
    background:rgba(255,235,200,.06);border:1px solid rgba(255,235,200,.18);color:var(--ink)}
  .authform input::placeholder{color:var(--muted)}
  .authform .btn.primary{margin-top:2px}
  .authswitch{font-size:12px;color:var(--muted);text-align:center;margin:4px 0 0}
  .authswitch a{color:var(--gold);cursor:pointer;text-decoration:underline}
  .autherr{font-size:12px;color:var(--coral);min-height:14px;text-align:center;margin:4px 0 0}
  .grouplist{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto;-webkit-overflow-scrolling:touch;margin-bottom:4px}
  .grouplist .gcard{cursor:pointer}
  .wallrow{padding:10px 12px;border-radius:12px;background:rgba(255,235,200,.05);border:1px solid rgba(255,235,200,.16);text-align:left}
  .wallrow .wn{font-family:var(--serif);font-size:15px;color:var(--ink);margin-bottom:4px}
  .wallrow .wl{font-size:12px;color:var(--muted);line-height:1.5}
  .wallrow .wb{margin-top:6px;font-size:17px;display:flex;gap:7px}
  .walllegend{font-size:11px;color:var(--muted);line-height:1.7}
  .walllegend b{color:var(--ink)}
  /* "a friend opened a table" — must be un-missable: slides in, pulses gold, chair bobs (owner 2026-07-16) */
  .joinbanner{display:none;margin:10px 0 2px;padding:13px 14px;border-radius:14px;cursor:pointer;text-align:left;
    background:linear-gradient(180deg,rgba(242,177,61,.20),rgba(111,149,204,.14));
    border:1.5px solid var(--gold);font-size:14px;color:var(--ink)}
  .joinbanner.show{display:flex;align-items:center;gap:10px;
    animation:jbIn .45s cubic-bezier(.2,.9,.3,1.2),jbPulse 1.6s ease-in-out .45s infinite}
  .joinbanner b{color:var(--gold)}
  .joinbanner .jbchair{font-size:22px;flex:0 0 auto;animation:jbBob 1.1s ease-in-out infinite}
  .joinbanner .jbtxt{flex:1;min-width:0}
  .joinbanner .jbgo{flex:0 0 auto;background:var(--gold);color:#33270a;font-weight:700;font-family:var(--sans);
    font-size:12px;padding:6px 12px;border-radius:999px;white-space:nowrap}
  @keyframes jbIn{from{opacity:0;transform:translateY(-14px) scale(.97)}}
  @keyframes jbPulse{0%,100%{box-shadow:0 0 0 0 rgba(242,177,61,.55)}50%{box-shadow:0 0 16px 5px rgba(242,177,61,.28)}}
  @keyframes jbBob{50%{transform:translateY(-3px) rotate(-6deg)}}
  @media (prefers-reduced-motion:reduce){
    .joinbanner.show{animation:none;box-shadow:0 0 12px 3px rgba(242,177,61,.35)}
    .joinbanner .jbchair{animation:none}
  }
  .lobbyseat{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;text-align:left;
    background:rgba(255,235,200,.05);border:1px solid rgba(255,235,200,.16);font-size:13px}
  .lobbyseat .lav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 30px;overflow:hidden;
    font-family:var(--serif);font-size:14px;background:var(--gold);color:#33270a;font-weight:700}
  .lobbyseat .lav img{width:100%;height:100%;object-fit:cover;border-radius:50%}
  .lobbyseat.empty .lav{background:rgba(255,235,200,.10);color:var(--muted)}
  .lobbyseat.empty{color:var(--muted)}
  .lobbyhint{font-size:12px;color:var(--muted);margin-top:10px}
  .lobbyhint b{color:var(--gold);letter-spacing:2px}

  /* ---------- Home / menu ---------- */
  .panel.page{width:min(560px,96vw);height:min(92vh,860px);height:min(92dvh,860px);padding:0;display:flex;flex-direction:column;text-align:left;overflow:hidden}
  .homehead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,235,200,.12);flex:0 0 auto}
  .homehead .hh-back{background:transparent;border:0;color:var(--ink);font-size:20px;cursor:pointer;padding:0 4px;display:none;line-height:1}
  .homehead .hh-back.show{display:block}
  .homehead .hh-title{font-family:var(--serif);font-size:18px;flex:1;margin:0}
  .hh-me{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--muted);min-width:0}
  /* base avatar chip — used in the header AND standalone in Settings; must clip its own image
     everywhere, not only inside .hh-me, or an uploaded photo overflows the row (owner 2026-07-15) */
  .hh-av{border-radius:50%;display:grid;place-items:center;overflow:hidden;
    font-family:var(--serif);background:var(--gold);color:#33270a;font-weight:700}
  .hh-av img{width:100%;height:100%;object-fit:cover;display:block}
  .hh-me .hh-av{width:30px;height:30px;flex:0 0 30px;font-size:14px}
  .hh-me .hh-nm{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
  .homebody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px}
  .pane{display:none} .pane.on{display:block}
  .pane h3{font-family:var(--serif);font-size:15px;margin:18px 0 8px;color:var(--gold)}
  .pane h3:first-child{margin-top:2px}
  .pane .muted{font-size:12px;color:var(--muted);line-height:1.5}

  /* tab bar: kept bright & obvious — players must SEE there are tabs (owner 2026-07-16) */
  .tabbar{display:flex;flex:0 0 auto;border-top:2px solid rgba(242,177,61,.45);background:rgba(24,15,7,.92);
    box-shadow:0 -6px 14px rgba(20,10,2,.35);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar button{flex:1;background:transparent;border:0;cursor:pointer;padding:9px 2px 10px;position:relative;
    display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink);font-family:var(--sans);font-size:10px}
  .tabbar button .ti{font-size:19px;line-height:1;filter:saturate(.85) opacity(.9)}
  .tabbar button.on{color:var(--gold)}
  .tabbar button.on .ti{filter:none;transform:scale(1.12)}
  .tabbar button.on::after{content:"";position:absolute;top:-2px;left:18%;right:18%;height:2px;background:var(--gold);border-radius:2px}
  .tabbar button:disabled{opacity:.35;cursor:not-allowed}
  /* attention dot (e.g. a table opened while you're on another tab) */
  .tabbar button.badge::before{content:"";position:absolute;top:5px;left:calc(50% + 9px);width:9px;height:9px;border-radius:50%;
    background:var(--coral);box-shadow:0 0 0 2px rgba(24,15,7,.9);animation:dotPulse 1.2s ease-in-out infinite}
  @keyframes dotPulse{50%{transform:scale(1.35)}}

  .bigbtn{width:100%;display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;cursor:pointer;text-align:left;
    background:rgba(255,235,200,.05);border:1px solid rgba(255,235,200,.16);color:var(--ink);font-family:var(--sans);margin-bottom:10px;
    transition:background .12s,border-color .12s}
  .bigbtn:hover{background:rgba(255,235,200,.10)}
  .bigbtn.primary{background:linear-gradient(180deg,rgba(242,177,61,.18),rgba(242,177,61,.08));border-color:var(--gold)}
  .bigbtn .bi{font-size:24px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;line-height:1}
  .bigbtn .bt{font-size:15px;font-weight:600}
  .bigbtn .bs{font-size:11px;color:var(--muted)}
  .bigbtn:disabled{opacity:.45;cursor:not-allowed}

  .selgame{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;margin-bottom:12px;
    background:rgba(255,235,200,.05);border:1px solid rgba(255,235,200,.16)}
  .selgame .sgi{font-size:22px;font-family:var(--serif)}
  .selgame .sgt{flex:1;min-width:0}
  .selgame .sgt b{font-size:14px;display:block}
  .selgame .sgt span{font-size:11px;color:var(--muted)}
  .selgame .sgc{font-size:12px;color:var(--gold);cursor:pointer;background:transparent;border:0;text-decoration:underline;font-family:var(--sans)}

  .onlinerow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;font-size:13px;
    background:rgba(255,235,200,.04);border:1px solid rgba(255,235,200,.12);margin-bottom:6px}
  .onlinerow .dotp{width:8px;height:8px;border-radius:50%;background:#5b4b37;flex:0 0 8px}
  .onlinerow.on .dotp{background:var(--good);box-shadow:0 0 8px var(--good)}
  .onlinerow.on{color:var(--ink)} .onlinerow{color:var(--muted)}
  .onlinerow .oav{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:0 0 24px;overflow:hidden;
    font-family:var(--serif);font-size:11px;background:rgba(255,235,200,.10);color:var(--ink)}
  .onlinerow .oav img{width:100%;height:100%;object-fit:cover;border-radius:50%}
  .onlinerow .crown{margin-left:auto;font-size:13px}

  .feeditem{font-size:12px;color:var(--muted);padding:8px 10px;border-radius:10px;margin-bottom:6px;line-height:1.45;
    background:rgba(255,235,200,.04);border:1px solid rgba(255,235,200,.10)}
  .feeditem b{color:var(--ink)}
  .feeditem .ago{opacity:.65;font-size:11px}

  .subtabs{display:flex;gap:6px;margin-bottom:12px}
  .subtabs button{flex:1;padding:8px;border-radius:999px;cursor:pointer;font-family:var(--sans);font-size:12px;
    background:rgba(255,235,200,.06);border:1px solid rgba(255,235,200,.16);color:var(--muted)}
  .subtabs button.on{background:var(--gold);color:#33270a;border-color:var(--gold);font-weight:600}

  .lbrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;font-size:13px;margin-bottom:6px;
    background:rgba(255,235,200,.04);border:1px solid rgba(255,235,200,.12)}
  .lbrow .rank{width:20px;font-family:var(--serif);color:var(--muted);flex:0 0 20px}
  .lbrow .lbn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lbrow .lbv{font-family:var(--serif);color:var(--gold)}
  .lbrow.first{border-color:var(--gold)}

  .shoptile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;margin-bottom:8px;cursor:pointer;
    background:rgba(255,235,200,.04);border:1px solid rgba(255,235,200,.16);transition:border-color .12s,background .12s}
  .shoptile:hover{background:rgba(255,235,200,.08)}
  .shoptile.on{border-color:var(--gold);background:rgba(242,177,61,.10)}
  .shoptile .sti{width:40px;height:56px;border-radius:6px;flex:0 0 40px;position:relative;overflow:hidden;
    background:repeating-linear-gradient(45deg,transparent 0 6px,var(--pv-line) 6px 7px),linear-gradient(135deg,var(--pv-a),var(--pv-b));
    border:1px solid var(--pv-edge)}
  .shoptile .sti::after{content:var(--pv-sym);position:absolute;inset:0;display:grid;place-items:center;color:var(--pv-glyph);font-size:15px}
  .shoptile[data-deck="classic"]{--pv-a:#26221c;--pv-b:#120f0a;--pv-line:rgba(208,52,44,.30);--pv-edge:rgba(208,52,44,.48);--pv-glyph:rgba(208,52,44,.72);--pv-sym:"\2726"}
  .shoptile[data-deck="marigold"]{--pv-a:#7a3d06;--pv-b:#3a1c02;--pv-line:rgba(255,190,60,.32);--pv-edge:rgba(255,190,60,.55);--pv-glyph:rgba(255,214,120,.9);--pv-sym:"\273A"}
  .shoptile[data-deck="peacock"]{--pv-a:#0c4250;--pv-b:#04202b;--pv-line:rgba(34,211,197,.30);--pv-edge:rgba(34,211,197,.55);--pv-glyph:rgba(140,244,236,.9);--pv-sym:"\274B"}
  .shoptile[data-deck="indigo"]{--pv-a:#2a2b6b;--pv-b:#14143a;--pv-line:rgba(150,160,255,.28);--pv-edge:rgba(150,160,255,.5);--pv-glyph:rgba(190,200,255,.9);--pv-sym:"\2756"}
  .shoptile[data-deck="henna"]{--pv-a:#2f5a1e;--pv-b:#16300d;--pv-line:rgba(160,220,120,.28);--pv-edge:rgba(160,220,120,.5);--pv-glyph:rgba(205,240,175,.9);--pv-sym:"\2740"}
  .shoptile[data-deck="lotus"]{--pv-a:#8a2f5c;--pv-b:#43122c;--pv-line:rgba(255,170,215,.28);--pv-edge:rgba(255,170,215,.5);--pv-glyph:rgba(255,205,235,.95);--pv-sym:"\273F"}
  .shoptile .stt{font-size:13px;font-weight:600}
  .shoptile .sts{font-size:11px;color:var(--muted)}
  .shoptile .stbadge{margin-left:auto;font-size:11px;color:var(--gold);white-space:nowrap;display:flex;align-items:center;gap:4px}
  .shoptile.locked .sti,.shoptile.locked .sfelt{filter:saturate(.45) brightness(.75)}
  .shoptile .stbadge .lakicon{width:13px;height:13px}

  /* lakhoti (glass-marble currency) chip */
  .lakchip{display:flex;align-items:center;gap:5px;padding:4px 10px 4px 6px;border-radius:999px;cursor:default;
    background:rgba(255,235,200,.06);border:1px solid rgba(255,235,200,.16);
    font-family:var(--num);font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  .lakicon{width:17px;height:17px;flex:0 0 auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
  .lakchip.bump{animation:lakBump .45s ease}
  @keyframes lakBump{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}
  /* mat-theme tile: swatch shows the striped weave itself */
  .shoptile .sfelt{width:52px;height:40px;border-radius:6px;flex:0 0 52px;
    background:
      repeating-linear-gradient(0deg, rgba(60,34,12,.10) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(90deg, var(--tv-1) 0 12px, var(--tv-g) 12px 15px, var(--tv-2) 15px 27px, var(--tv-g) 27px 30px);
    border:2px solid var(--tv-edge)}
  .shoptile[data-table="emerald"]{--tv-1:#7d97bd;--tv-2:#b34a2c;--tv-g:#c39136;--tv-edge:#a5301f}
  .shoptile[data-table="royal"]{--tv-1:#54719e;--tv-2:#8fa6c6;--tv-g:#d8c290;--tv-edge:#2d4266}
  .shoptile[data-table="rosewood"]{--tv-1:#b34a2c;--tv-2:#8a2f22;--tv-g:#c39136;--tv-edge:#5e1d12}

  .waicon{width:20px;height:20px;fill:currentColor;flex:0 0 20px;vertical-align:middle}
  .onlinerow .ogrp{color:var(--muted);font-size:11px;margin-left:4px}
  .onlinerow .oyou{color:var(--gold);font-size:11px;margin-left:4px}

  .grouprow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;margin-bottom:8px;cursor:pointer;
    background:rgba(255,235,200,.04);border:1px solid rgba(255,235,200,.16)}
  .grouprow:hover{background:rgba(255,235,200,.08)}
  .grouprow.on{border-color:var(--gold);background:rgba(242,177,61,.10);cursor:default}
  .grouprow .gri{font-size:18px}
  .grouprow .grn{flex:1;min-width:0}
  .grouprow .grn b{display:block;font-size:13px}
  .grouprow .grn span{font-size:11px;color:var(--muted);letter-spacing:1px}
  .grouprow .grbadge{font-size:11px;color:var(--gold)}
  .codechip{font-family:var(--sans);letter-spacing:3px;font-weight:700;color:var(--gold);font-size:18px}

  .setrow{margin-bottom:16px}
  .setrow label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
  .setrow input{width:100%;font-family:var(--sans);font-size:16px;padding:10px 12px;border-radius:10px;
    background:rgba(255,235,200,.06);border:1px solid rgba(255,235,200,.18);color:var(--ink)}
  .setrow .inline{display:flex;gap:8px}
  .gated{opacity:.5;pointer-events:none;cursor:progress}
  .shuffrow{display:none;align-items:center;gap:8px;justify-content:center;margin:10px 0 2px;font-size:13px;color:var(--ink);cursor:pointer}
  .shuffrow input{width:18px;height:18px;accent-color:var(--gold)}
  .ovclose{position:absolute;top:10px;right:12px;background:transparent;border:0;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
  .ovclose:hover{color:var(--ink)}
  .panel{position:relative}

  /* ---------- First-run onboarding (language pick + welcome) ---------- */
  /* these appear earlier in the DOM than homeOv, so lift them above it (same-z overlays
     otherwise let the later homeOv paint on top when it's already open) */
  #langOv, #welcomeOv{z-index:60}
  .langbig{display:flex;flex-direction:column;gap:10px;margin-top:14px}
  .langbig button{display:flex;align-items:baseline;gap:10px;justify-content:center;padding:13px 14px;border-radius:14px;cursor:pointer;
    background:rgba(255,235,200,.05);border:1px solid rgba(255,235,200,.2);color:var(--ink);font-family:var(--serif)}
  .langbig button b{font-size:19px;font-weight:600}
  .langbig button span{font-size:12px;color:var(--muted);font-family:var(--sans)}
  .langbig button:hover{background:rgba(242,177,61,.12);border-color:var(--gold)}
  #welcomeOv .panel{width:min(430px,94vw)}
  .welcomemsg{font-family:var(--serif);font-style:italic;font-size:14.5px;line-height:1.65;color:var(--ink);
    margin:10px 0 18px;text-align:left}

  /* five language chips must fit a 375px header — tighter than the 3-chip layout */
  .homehead .langsel button{padding:4px 5px;font-size:9.5px}
  .tools .langsel button{padding:5px 6px;font-size:10.5px}
  @media (max-width:420px){ .hh-me .hh-nm{display:none} }

  /* ---------- Coach-marks: gold ring + dim + chalk tip; taps pass through to the real button ---------- */
  #coachOv{position:fixed;inset:0;z-index:120;display:none;pointer-events:none}
  #coachOv.show{display:block}
  #coachOv .coachring{position:absolute;border:3px solid var(--gold);border-radius:16px;
    box-shadow:0 0 0 9999px rgba(10,5,2,.72),0 0 18px 4px rgba(242,177,61,.45);
    animation:coachGlow 1.4s ease-in-out infinite}
  @keyframes coachGlow{50%{box-shadow:0 0 0 9999px rgba(10,5,2,.72),0 0 26px 8px rgba(242,177,61,.75)}}
  #coachOv .coachtip{position:absolute;pointer-events:auto;cursor:pointer;max-width:min(86vw,340px);
    font-family:var(--serif);font-style:italic;font-size:14px;color:#f4e2b8;padding:9px 14px;
    border:1.5px dashed rgba(244,226,184,.6);border-radius:12px;background:rgba(30,18,8,.95);
    box-shadow:0 8px 20px rgba(0,0,0,.5)}
  #coachOv .coachtip .ca{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);color:#f4e2b8;
    font-size:12px;animation:gaBob 1.1s ease-in-out infinite}
  #coachOv .coachtip.below .ca{bottom:auto;top:-15px;transform:translateX(-50%) rotate(180deg)}
  @media (prefers-reduced-motion:reduce){ #coachOv .coachring,#coachOv .coachtip .ca{animation:none} }