:root{
    --felt1:#12634a; --felt2:#0a3a2b; --edge:#062018;
    --gold:#e7c366; --gold-d:#b8963f;
    --card:#fbf7ee; --ink:#1a1a2e; --red:#c0392b;
    --hi:#ffe27a; --good:#57d38c; --bad:#e35d5d;
    --panel:rgba(4,20,15,.82); --line:rgba(231,195,102,.28);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:var(--edge); color:#f3f0e6; overflow:hidden;
    user-select:none; -webkit-user-select:none;
    touch-action:manipulation;
  }
  #app{
    position:fixed; inset:0;
    display:flex; flex-direction:column;
    max-width:520px; margin:0 auto;
    /* card sizing knobs — scaled up at breakpoints below */
    --cw:44px; --ch:62px;      /* played (trick) card */
    --hw:50px; --hh:72px;      /* hand card */
    --adv:26px;                /* visible strip per fanned hand card */
    background:radial-gradient(120% 80% at 50% 34%, var(--felt1), var(--felt2) 62%, var(--edge));
    padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
  }

  /* ---------- Brand bar ---------- */
  #brandbar{
    display:flex; align-items:baseline; justify-content:space-between;
    padding:7px 12px 0; z-index:6;
  }
  .brand{
    font-size:15px; font-weight:800; letter-spacing:3px; color:var(--gold);
    display:inline-flex; align-items:center; gap:5px;
    text-shadow:0 1px 2px rgba(0,0,0,.4);
  }
  .brand .s{font-size:.9em;}
  .brand .s.dark{color:#e9e4d4;}
  .brand .s.red{color:var(--red);}
  .target-note{font-size:11px; letter-spacing:.5px; color:rgba(243,240,230,.55);}

  /* ---------- Top bar ---------- */
  #topbar{
    display:flex; align-items:stretch; gap:9px;
    padding:6px 10px 6px; z-index:5;
  }
  .scorebar{
    flex:1; display:flex; align-items:stretch; min-width:0;
    background:linear-gradient(180deg, rgba(11,34,25,.92), rgba(5,19,13,.92));
    border:1px solid var(--line); border-radius:16px; overflow:hidden;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    box-shadow:0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .team{
    flex:1; min-width:0; padding:7px 12px;
    display:flex; flex-direction:column; justify-content:center; gap:3px;
  }
  .team.them{align-items:flex-end; text-align:right;}
  .team .tn{
    font-size:12px; font-weight:700; letter-spacing:.2px; max-width:100%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .team .tt{font-size:10px; opacity:.55; letter-spacing:.3px;}
  .team.us{box-shadow:inset 3px 0 0 var(--good);}
  .team.them{box-shadow:inset -3px 0 0 #ff8a6b;}
  .team.us .tn{color:#c3f0d5;}
  .team.them .tn{color:#ffccbb;}
  .team.pulse{animation:scorePulse .7s ease;}
  @keyframes scorePulse{0%{background:rgba(255,226,122,0);}35%{background:rgba(255,226,122,.16);}100%{background:rgba(255,226,122,0);}}
  .gp{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:7px;
    padding:0 14px; background:rgba(0,0,0,.28);
    box-shadow:inset 1px 0 0 rgba(255,255,255,.05), inset -1px 0 0 rgba(0,0,0,.3);
  }
  .gp .s{font-size:27px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums;}
  .gp #scoreA{color:var(--good);}
  .gp #scoreB{color:#ff9d7a;}
  .gp .sep{font-size:17px; opacity:.35; font-weight:700; margin-top:-2px;}

  /* Trump medallion */
  .med-wrap{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;}
  #medallion{
    width:58px; height:58px; flex:0 0 auto; perspective:640px;
  }
  #medallion .coin{
    position:relative; width:100%; height:100%;
    transform-style:preserve-3d; transition:transform .7s cubic-bezier(.5,1.4,.4,1);
  }
  #medallion.flipped .coin{transform:rotateY(180deg);}
  .coin .face{
    position:absolute; inset:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:27px; font-weight:800; backface-visibility:hidden;
    border:2.5px solid var(--gold);
    background:radial-gradient(circle at 34% 26%, #216b53, #072318 78%);
    box-shadow:0 3px 10px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.55), 0 0 0 3px rgba(231,195,102,.1);
  }
  .coin .front{color:var(--gold); opacity:.8;}
  .coin .back{transform:rotateY(180deg);}
  #medallion.flipped .coin .back{
    box-shadow:0 3px 12px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.5),
               0 0 0 3px rgba(231,195,102,.22), 0 0 16px rgba(231,195,102,.4);
  }
  #medLabel{font-size:8px; text-align:center; opacity:.65; margin-top:3px; letter-spacing:1.5px; font-weight:700;}

  /* Streak banner */
  #streakBanner{
    margin:0 10px; min-height:24px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:12px; z-index:4;
  }
  #streakBanner .pill{
    background:var(--panel); border:1px solid var(--line);
    padding:3px 12px; border-radius:20px;
    display:flex; align-items:center; gap:8px;
    animation:pop .3s ease;
  }
  .dots{display:flex; gap:4px;}
  .dots .d{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.22);}
  .dots .d.on{background:var(--hi); box-shadow:0 0 6px var(--hi);}

  /* ---------- Table ---------- */
  #table{
    position:relative; flex:1; min-height:0;
    margin:4px 6px;
    border-radius:20px;
    background:
      radial-gradient(120% 70% at 50% 40%, rgba(38,120,92,.35), rgba(0,0,0,0) 60%),
      radial-gradient(100% 100% at 50% 50%, var(--felt1), var(--felt2) 70%);
    box-shadow:0 10px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  }
  /* table rail (stadium ring) */
  #table::before{
    content:''; position:absolute; inset:8px; border-radius:110px; pointer-events:none;
    border:1.5px solid rgba(231,195,102,.14);
    box-shadow:inset 0 0 0 6px rgba(255,255,255,.018), inset 0 0 40px rgba(3,16,11,.35);
  }
  /* soft vignette for depth */
  #table::after{
    content:''; position:absolute; inset:0; pointer-events:none; border-radius:20px;
    box-shadow:inset 0 0 100px 26px rgba(3,16,11,.6);
  }
  .felt-emblem{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-size:150px; line-height:1; font-weight:900; pointer-events:none; z-index:0;
    color:rgba(231,195,102,.05); text-shadow:0 2px 6px rgba(0,0,0,.2);
    transition:color .5s ease;
  }
  #trickArea{z-index:2;}
  .seat{
    position:absolute; z-index:2; display:flex; flex-direction:column; align-items:center; gap:4px;
    transition:transform .2s;
  }
  .seat .avatar{
    width:42px; height:42px; border-radius:50%;
    background:radial-gradient(circle at 34% 28%, #2f7358, #0a3123);
    border:2px solid rgba(231,195,102,.32);
    display:flex; align-items:center; justify-content:center;
    font-size:19px; position:relative;
    box-shadow:0 3px 8px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.1);
  }
  .seat.tA .avatar{border-color:rgba(87,211,140,.55);}
  .seat.tB .avatar{border-color:rgba(255,138,107,.5);}
  .seat .nm{
    font-size:11px; font-weight:700; letter-spacing:.2px; color:#eae5d6;
    background:rgba(4,20,15,.55); padding:2px 9px; border-radius:11px;
    border:1px solid rgba(231,195,102,.14); white-space:nowrap;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  }
  .seat .nm .badge{font-size:9px; opacity:.55; font-weight:500; color:var(--good);}
  .seat.active .avatar{
    border-color:var(--hi);
    box-shadow:0 0 0 3px rgba(255,226,122,.28), 0 0 16px rgba(255,226,122,.65), inset 0 1px 2px rgba(255,255,255,.1);
    animation:pulse 1.1s ease-in-out infinite;
  }
  .seat.active .nm{border-color:rgba(255,226,122,.5); color:#fff;}
  .seat .think{
    position:absolute; top:-6px; right:-6px; font-size:9px;
    background:var(--hi); color:#3a2c00; border-radius:8px; padding:1px 4px;
    opacity:0; transition:opacity .2s; font-weight:700;
  }
  .seat.active.bot .think{opacity:1;}

  .seat.north{top:2px; left:50%; transform:translateX(-50%);}
  .seat.west{left:4px; top:44%; transform:translateY(-50%);}
  .seat.east{right:4px; top:44%; transform:translateY(-50%);}
  .seat.south{bottom:2px; left:50%; transform:translateX(-50%);}
  .seat.south .avatar{width:34px;height:34px;}

  .backfan{display:flex; height:26px;}
  .backfan.vert{flex-direction:column; height:auto;}
  .cardback{
    width:20px; height:28px; border-radius:3px;
    background:repeating-linear-gradient(45deg,#123f5e,#123f5e 3px,#0d2f47 3px,#0d2f47 6px);
    border:1px solid rgba(231,195,102,.4); margin-left:-13px;
    box-shadow:0 1px 2px rgba(0,0,0,.3);
  }
  .backfan.vert .cardback{margin-left:0; margin-top:-19px; width:26px; height:20px;}
  .cardback:first-child{margin:0;}
  .ct{font-size:9px; opacity:.6;}

  /* Trick area */
  #trickArea{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:calc(var(--cw)*2.15); height:calc(var(--ch)*2.35);
  }
  .slot{
    position:absolute; width:var(--cw); height:var(--ch);
    transition:opacity .2s ease, transform .2s ease; opacity:0;
  }
  .slot.filled{opacity:1;}
  .slot.north{left:50%; top:0;    transform:translate(-50%,0) rotate(-2deg);}
  .slot.south{left:50%; bottom:0; transform:translate(-50%,0) rotate(2deg);}
  .slot.west{ left:0;   top:50%;  transform:translate(0,-50%) rotate(-3deg);}
  .slot.east{ right:0;  top:50%;  transform:translate(0,-50%) rotate(3deg);}
  .slot .pcard{box-shadow:0 4px 12px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.07);}
  .slot.win .pcard{box-shadow:0 0 0 2px var(--hi),0 0 18px var(--hi); animation:winPop .4s ease;}
  /* cards slide in from their player's direction */
  .slot.dealt.north .pcard{animation:dealN .32s cubic-bezier(.3,1.1,.5,1);}
  .slot.dealt.south .pcard{animation:dealS .32s cubic-bezier(.3,1.1,.5,1);}
  .slot.dealt.west  .pcard{animation:dealW .32s cubic-bezier(.3,1.1,.5,1);}
  .slot.dealt.east  .pcard{animation:dealE .32s cubic-bezier(.3,1.1,.5,1);}
  @keyframes dealN{from{opacity:0;transform:translateY(-46px) scale(.86);}to{opacity:1;transform:none;}}
  @keyframes dealS{from{opacity:0;transform:translateY(46px) scale(.86);}to{opacity:1;transform:none;}}
  @keyframes dealW{from{opacity:0;transform:translateX(-56px) scale(.86);}to{opacity:1;transform:none;}}
  @keyframes dealE{from{opacity:0;transform:translateX(56px) scale(.86);}to{opacity:1;transform:none;}}
  @keyframes winPop{0%{transform:scale(1);}45%{transform:scale(1.12);}100%{transform:scale(1);}}

  /* ---------- Cards ---------- */
  .pcard,.hcard{
    border-radius:9px; color:var(--ink); position:relative; overflow:hidden;
    background:linear-gradient(158deg,#ffffff 0%,#f6f0e2 100%);
    box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.07);
    font-weight:800;
  }
  .corner{
    position:absolute; display:flex; flex-direction:column; align-items:center;
    line-height:.82; letter-spacing:-.02em;
  }
  .corner.tl{top:.32em; left:.42em;}
  .corner.br{bottom:.32em; right:.42em; transform:rotate(180deg);}
  .corner .r{font-size:1em;}
  .corner .s{font-size:.82em; margin-top:.06em;}
  .pip{
    position:absolute; inset:0; display:grid; place-items:center;
    font-size:2.35em; opacity:.16;
  }
  .red{color:var(--red);}
  .pcard{width:var(--cw); height:var(--ch); font-size:calc(var(--cw)*.30);}
  .pcard .pip{font-size:1.9em; opacity:.9;}

  /* Hand */
  #hand{
    display:flex; align-items:flex-end; justify-content:center;
    padding:14px 10px calc(12px + env(safe-area-inset-bottom)); position:relative;
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(2,14,10,.55) 100%);
  }
  #hand .fan{display:flex; align-items:flex-end; padding-top:22px;}
  .hcard{
    width:var(--hw); height:var(--hh); font-size:calc(var(--hw)*.30);
    margin-left:calc(var(--adv) - var(--hw));
    transition:transform .16s cubic-bezier(.34,1.4,.5,1), box-shadow .16s;
    cursor:default; flex:0 0 auto;
  }
  .hcard:first-child{margin-left:0;}
  .hcard.trumpcard{box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 0 0 2px var(--gold-d);}
  .hcard.trumpcard::after{
    content:''; position:absolute; top:3px; right:3px; width:6px; height:6px; border-radius:50%;
    background:var(--gold); box-shadow:0 0 5px var(--gold);
  }
  #hand.awaiting .hcard:not(.legal){opacity:.4; filter:grayscale(.5) brightness(.9);}
  #hand.awaiting .hcard.legal{
    cursor:pointer; transform:translateY(-10px);
    box-shadow:0 8px 16px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,226,122,.9),
               0 0 14px rgba(255,226,122,.35);
  }
  #hand.awaiting .hcard.legal:active{transform:translateY(-24px) scale(1.04);}
  @media (hover:hover){#hand.awaiting .hcard.legal:hover{transform:translateY(-22px) scale(1.03); z-index:5;}}
  .hcard.illegal{animation:shake .3s;}

  /* ---------- Modals ---------- */
  #modalRoot .overlay{
    position:fixed; inset:0; background:rgba(2,10,7,.72);
    display:flex; align-items:center; justify-content:center; z-index:50;
    padding:20px; backdrop-filter:blur(3px); animation:fade .2s ease;
  }
  .modal{
    width:100%; max-width:360px; background:linear-gradient(180deg,#0f4936,#0a3325);
    border:1px solid var(--line); border-radius:18px; padding:22px 20px;
    box-shadow:0 12px 40px rgba(0,0,0,.6); text-align:center; animation:pop .25s ease;
  }
  .modal h2{font-size:22px; margin-bottom:6px; color:var(--gold); letter-spacing:1px;}
  .modal .modal-body{font-size:14px; line-height:1.5; opacity:.92; margin-bottom:16px;}
  .modal-actions{display:flex; flex-direction:column; gap:9px;}
  .btn{
    border:1px solid var(--gold-d); background:linear-gradient(180deg,#1a5c45,#124232);
    color:#fdf8ec; font-size:15px; font-weight:600; padding:12px; border-radius:12px;
    cursor:pointer; transition:transform .1s, filter .15s;
  }
  .btn:active{transform:scale(.97);}
  .btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold-d)); color:#3a2c00; border-color:var(--gold);}
  .suit-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .suit-btn{
    font-size:30px; padding:14px; border-radius:14px; border:1px solid var(--line);
    background:var(--card); cursor:pointer; transition:transform .1s;
    display:flex; flex-direction:column; align-items:center; gap:2px;
  }
  .suit-btn .lbl{font-size:11px; font-weight:700; color:var(--ink);}
  .suit-btn:active{transform:scale(.95);}
  .suit-btn .cnt{font-size:10px; color:#555; font-weight:600;}
  .minihand{display:flex; justify-content:center; margin:8px 0 16px; flex-wrap:wrap; gap:5px;}
  .minihand .pcard{width:46px; height:64px; font-size:14px;}
  .summary-row{display:flex; justify-content:space-between; padding:5px 4px; border-bottom:1px solid rgba(255,255,255,.08); font-size:14px;}
  .summary-row b{color:var(--gold);}
  .tag-win{color:var(--good); font-weight:700;}
  .tag-lose{color:#ff9d7a;}
  .scored{color:var(--hi); font-size:13px; margin-top:8px; font-weight:600;}

  /* Toast */
  #toast{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9);
    background:var(--panel); border:1px solid var(--gold-d); color:var(--gold);
    padding:12px 18px; border-radius:14px; font-size:15px; font-weight:600;
    z-index:40; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
    text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.5);
  }
  #toast.show{opacity:1; transform:translate(-50%,-50%) scale(1);}

  /* ---------- Scale up on larger screens ---------- */
  @media (min-width:640px){
    #app{
      max-width:720px;
      --cw:56px; --ch:80px; --hw:64px; --hh:92px; --adv:34px;
    }
    #brandbar{padding:10px 18px 0;}
    .brand{font-size:19px; letter-spacing:4px;}
    .target-note{font-size:13px;}
    .icon-btn{width:46px; height:46px; font-size:26px; border-radius:13px;}
    #topbar{padding:8px 16px 8px; gap:12px;}
    .team{padding:9px 16px;}
    .team .tn{font-size:14px;}
    .team .tt{font-size:12px;}
    .gp{padding:0 18px; gap:9px;}
    .gp .s{font-size:34px;}
    .gp .sep{font-size:22px;}
    .felt-emblem{font-size:210px;}
    #medallion{width:70px; height:70px;}
    .coin .face{font-size:32px;}
    #medLabel{font-size:10px;}
    #streakBanner{font-size:15px; min-height:28px;}

    .seat .avatar{width:54px; height:54px; font-size:25px;}
    .seat.south .avatar{width:44px; height:44px;}
    .seat .nm{font-size:14px;}
    .seat .nm .badge{font-size:11px;}
    .cardback{width:28px; height:38px; margin-left:-18px;}
    .backfan{height:38px;}
    .backfan.vert .cardback{margin-left:0; margin-top:-26px; width:38px; height:28px;}
    .ct{font-size:12px;}

    .modal{max-width:440px; padding:26px 24px;}
    .modal h2{font-size:26px;}
    .modal .modal-body{font-size:15px;}
  }
  @media (min-width:1040px){
    #app{
      max-width:900px;
      --cw:66px; --ch:94px; --hw:74px; --hh:106px; --adv:40px;
    }
    .seat .avatar{width:60px; height:60px; font-size:28px;}
    .seat.south .avatar{width:48px; height:48px;}
  }

  @keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
  @keyframes pop{from{transform:scale(.85); opacity:0;}to{transform:scale(1); opacity:1;}}
  @keyframes fade{from{opacity:0;}to{opacity:1;}}
  @keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

  /* ---------- Settings icon ---------- */
  .brand-right{display:flex; align-items:center; gap:10px;}
  .icon-btn{
    width:40px; height:40px; border-radius:11px; border:1px solid var(--line);
    background:rgba(4,20,15,.6); color:var(--gold); font-size:23px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; line-height:1;
    transition:transform .15s, background .15s;
  }
  .icon-btn:active{transform:scale(.9) rotate(30deg);}
  @media (hover:hover){.icon-btn:hover{background:rgba(231,195,102,.16);}}

  /* ---------- Dealer / trump-caller badges ---------- */
  .seat.is-dealer .avatar::after{
    content:'D'; position:absolute; bottom:-4px; right:-4px;
    width:16px; height:16px; border-radius:50%; font-size:9px; font-weight:800;
    background:linear-gradient(180deg,#f6f0e2,#d7cdb2); color:#3a2c00;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 3px rgba(0,0,0,.45); border:1px solid rgba(0,0,0,.15);
  }
  .seat.is-caller .avatar::before{
    content:'\2605'; position:absolute; top:-5px; left:-5px; z-index:2;
    width:16px; height:16px; border-radius:50%; font-size:9px;
    background:var(--gold); color:#3a2c00;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 3px rgba(0,0,0,.45);
  }

  /* ---------- Trick sweep to winner ---------- */
  .slot .pcard{transition:transform .34s ease, opacity .34s ease;}
  #trickArea.sweep-north .slot .pcard{transform:translateY(-150px) scale(.65); opacity:0;}
  #trickArea.sweep-south .slot .pcard{transform:translateY(150px)  scale(.65); opacity:0;}
  #trickArea.sweep-west  .slot .pcard{transform:translateX(-170px) scale(.65); opacity:0;}
  #trickArea.sweep-east  .slot .pcard{transform:translateX(170px)  scale(.65); opacity:0;}

  /* ---------- Confetti ---------- */
  .confetti{position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden;}
  .confetti i{position:absolute; top:-18px; width:9px; height:14px; border-radius:2px; animation:confFall linear forwards;}
  @keyframes confFall{0%{transform:translateY(-20px) rotate(0);}100%{transform:translateY(108vh) rotate(760deg);}}

  /* ---------- Settings & How-to panels ---------- */
  .modal.settings, .modal.howto{text-align:left; position:relative;}
  .modal.settings h2, .modal.howto h2{text-align:center;}
  .modal-x{
    position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:8px;
    background:rgba(255,255,255,.07); border:1px solid var(--line); color:#f3f0e6;
    font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .set-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:13px 2px; border-bottom:1px solid rgba(255,255,255,.08); font-size:15px;
  }
  .set-row.col{flex-direction:column; align-items:stretch; gap:10px;}
  .toggle{
    width:48px; height:27px; border-radius:14px; border:1px solid var(--line);
    background:rgba(0,0,0,.35); position:relative; cursor:pointer; flex:0 0 auto; transition:background .2s;
  }
  .toggle i{position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%; background:#cfc9b8; transition:.2s;}
  .toggle.on{background:var(--good); border-color:var(--good);}
  .toggle.on i{left:23px; background:#fff;}
  .seg{display:flex; gap:6px;}
  .seg button{
    flex:1; padding:10px; border-radius:10px; border:1px solid var(--line);
    background:rgba(0,0,0,.25); color:#e9e4d4; font-size:13px; font-weight:600; cursor:pointer;
  }
  .seg button.sel{background:linear-gradient(180deg,var(--gold),var(--gold-d)); color:#3a2c00; border-color:var(--gold);}
  .howto-body p{margin-bottom:10px; font-size:14px; line-height:1.5;}
  .howto-body b{color:var(--gold);}

  /* ---------- Four-colour deck ---------- */
  body.fourcolor .suit-D{color:#2a7fd0;}
  body.fourcolor .suit-C{color:#1f9b57;}

  /* ---------- Accessibility ---------- */
  .hcard:focus-visible,.btn:focus-visible,.suit-btn:focus-visible,.icon-btn:focus-visible,
  .toggle:focus-visible,.seg button:focus-visible,.modal-x:focus-visible{outline:2px solid var(--hi); outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.06s !important; scroll-behavior:auto !important;}
  }

  /* ---------- Menu · lobby · name entry (Play with Friends) ---------- */
  .modal.lobby{text-align:left;}
  .modal.lobby h2{text-align:center;}
  .field{
    width:100%; padding:12px 14px; border-radius:12px; font-size:16px;
    border:1px solid var(--line); background:var(--card); color:var(--ink);
    font-weight:600; outline:none; margin-bottom:4px;
  }
  .field:focus{border-color:var(--gold);}
  .hint{font-size:12px; opacity:.6; margin:4px 2px 12px;}
  .err{color:var(--bad); font-size:13px; font-weight:600; margin:2px 0 10px; min-height:16px;}
  .link-box{
    display:flex; gap:8px; align-items:stretch; margin:6px 0 4px;
  }
  .link-box input{
    flex:1; min-width:0; padding:11px 12px; border-radius:11px; font-size:13px;
    border:1px solid var(--line); background:rgba(0,0,0,.28); color:#f3f0e6;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  .copybtn{
    flex:0 0 auto; padding:0 16px; border-radius:11px; font-size:14px; font-weight:700;
    border:1px solid var(--gold); background:linear-gradient(180deg,var(--gold),var(--gold-d));
    color:#3a2c00; cursor:pointer; transition:transform .1s;
  }
  .copybtn:active{transform:scale(.95);}
  .copybtn.ok{background:var(--good); border-color:var(--good); color:#08120c;}
  .lobby-list{list-style:none; margin:12px 0; display:flex; flex-direction:column; gap:8px;}
  .lobby-list li{
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
    background:rgba(0,0,0,.22); border:1px solid rgba(231,195,102,.14); font-size:15px;
  }
  .lobby-list .pl-av{
    width:30px; height:30px; border-radius:50%; flex:0 0 auto; font-size:16px;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 34% 28%,#2f7358,#0a3123); border:1px solid rgba(231,195,102,.32);
  }
  .lobby-list .pl-nm{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600;}
  .lobby-list .pl-tag{font-size:11px; opacity:.6; font-weight:600;}
  .lobby-list li.empty{opacity:.5; font-style:italic;}
  .lobby-list li.me{border-color:rgba(255,226,122,.45);}
  .lobby-count{text-align:center; font-size:13px; opacity:.7; margin-bottom:4px;}
  .spin{
    display:inline-block; width:18px; height:18px; border-radius:50%;
    border:2.5px solid rgba(255,255,255,.2); border-top-color:var(--gold);
    animation:spin .7s linear infinite; vertical-align:middle;
  }
  @keyframes spin{to{transform:rotate(360deg);}}