:root{
    --felt:#10463A;        /* table felt */
    --felt-2:#0B3429;      /* deeper felt */
    --tile:#F4EEDC;        /* ivory tile */
    --tile-2:#EBE2C9;
    --edge:#D9CDAC;        /* tile bottom edge */
    --ink:#1C2B26;
    --ink-soft:#5C6B63;
    --red:#C0392B;         /* red dragon / dealer / minus */
    --green:#1E7A52;       /* plus */
    --gold:#C9A24B;        /* streak */
    --primary:#C9A24B;
    --primary-hi:#E6C167;
    --success:#1E7A52;
    --danger:#C0392B;
    --muted:#8A988F;
    --sheet:#0E3E33;
    /* ---- design tokens (consistency pass) ---- */
    --ease:cubic-bezier(.22,1,.36,1);   /* shared motion curve */
    --dur:.13s;                          /* shared press/hover speed */
    --dur-view:.32s;                     /* view transitions */
    --r-sm:10px;   /* inputs, segments, icon buttons */
    --r-md:12px;   /* rows, chips, count, rule cards */
    --r-lg:14px;   /* primary action buttons */
    --r-xl:16px;   /* raised tiles & panels */
    --press:scale(.96);                  /* flat controls */
    --lift:translateY(2px);              /* raised buttons */
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    background:
      radial-gradient(120% 80% at 50% -10%, #1A6354 0%, var(--felt) 42%, var(--felt-2) 100%),
      var(--felt-2);
    background-attachment:fixed;
    color:var(--tile);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(150% 100% at 50% 0%, transparent 52%, rgba(0,0,0,.32) 100%);
  }
  .wrap{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 16px calc(100px + env(safe-area-inset-bottom));}
  @supports (padding: max(0px)){
    .wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));}
  }
  .tnum{font-variant-numeric:tabular-nums;}

  /* Header */
  .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
  .brand{display:flex;align-items:center;gap:9px;}
  .brand-home{font:inherit;font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0;padding:0;border:0;background:none;color:var(--tile);cursor:pointer;}
  .brand .cjk{color:var(--red);font-weight:800;font-size:13px;background:linear-gradient(180deg,#FBF6E8,var(--tile-2));padding:3px 7px;border-radius:6px;border-bottom:2px solid var(--edge);box-shadow:0 2px 6px rgba(0,0,0,.28);}
  .iconbtn{
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
    color:var(--tile);border-radius:11px;padding:8px 11px;font-size:14px;font-weight:600;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .12s, background .12s;
  }
  .iconbtn:active{transform:scale(.94);}

  /* Status strip */
  .status{
    display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.24));
    border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:11px 13px;margin-bottom:16px;
    box-shadow:0 4px 16px rgba(0,0,0,.18);
  }
  .dealer-tile{
    width:46px;height:58px;border-radius:9px;background:linear-gradient(180deg,#FBF6E8,var(--tile) 45%,var(--tile-2));
    border-bottom:4px solid var(--edge);display:flex;flex-direction:column;align-items:center;justify-content:center;
    flex:0 0 auto;box-shadow:0 3px 9px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.85);
  }
  .dealer-tile .zhuang{color:var(--red);font-weight:800;font-size:21px;line-height:1;}
  .dealer-tile .lab{color:var(--ink-soft);font-size:8px;font-weight:700;letter-spacing:.08em;margin-top:2px;}
  .status .info{flex:1;min-width:0;}
  .status .who{font-weight:700;font-size:15px;color:var(--tile);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .status .sub{font-size:12px;color:rgba(244,238,220,.6);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .dicebtn{flex:0 0 auto;padding:8px 9px;}
  .streakctl{display:flex;align-items:center;gap:6px;}
  .streakctl button{
    width:44px;height:44px;border-radius:9px;border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.07);color:var(--tile);font-size:18px;font-weight:700;cursor:pointer;line-height:1;transition:transform .1s;
  }
  .streakctl button:active{transform:scale(.88);}
  .streak-val{min-width:22px;text-align:center;font-weight:800;color:var(--gold);font-size:17px;}

  /* Double round bar */
  .droundbar{
    display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
    background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.22));
    border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);
    padding:11px 13px;margin-bottom:16px;color:var(--tile);
    transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
  }
  .droundbar:active{transform:scale(.99);}
  .droundbar .dr-x{
    flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
    font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(244,238,220,.55);
    transition:all var(--dur) var(--ease);
  }
  .droundbar .dr-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
  .droundbar .dr-txt b{font-size:15px;font-weight:800;}
  .droundbar .dr-sub{font-size:11.5px;color:rgba(244,238,220,.5);margin-top:1px;}
  .droundbar .dr-toggle{flex:0 0 auto;width:48px;height:28px;border-radius:99px;background:rgba(255,255,255,.15);position:relative;transition:background var(--dur) var(--ease);}
  .droundbar .dr-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left var(--dur) var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.3);}
  /* ON state — gold, glowing, unmistakable */
  .droundbar.on{
    background:linear-gradient(180deg,rgba(201,162,75,.26),rgba(201,162,75,.14));
    border-color:rgba(201,162,75,.6);box-shadow:0 0 0 1px rgba(201,162,75,.35),0 6px 20px rgba(201,162,75,.22);
    animation:drPulse 2.4s ease-in-out infinite;
  }
  .droundbar.on .dr-x{background:linear-gradient(180deg,#E6C167,var(--gold));border-color:transparent;color:var(--felt);box-shadow:0 3px 9px rgba(201,162,75,.5);}
  .droundbar.on .dr-sub{color:rgba(244,238,220,.78);}
  .droundbar.on .dr-toggle{background:var(--gold);}
  .droundbar.on .dr-knob{left:23px;}
  @keyframes drPulse{0%,100%{box-shadow:0 0 0 1px rgba(201,162,75,.3),0 4px 16px rgba(201,162,75,.16);}50%{box-shadow:0 0 0 1px rgba(201,162,75,.55),0 6px 22px rgba(201,162,75,.34);}}
  /* a thin gold frame around the player grid while doubling, for ambient context */
  #game.droundon .players{outline:1.5px solid rgba(201,162,75,.3);outline-offset:6px;border-radius:4px;}

  /* Player grid */
  .players{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
  .players.p3{grid-template-columns:1fr 1fr;}
  @media (min-width:381px){
    .players.p3{grid-template-columns:1fr 1fr 1fr;}
    .players.p3.has-add{grid-template-columns:1fr 1fr;}
  }
  .players.p3:not(.has-add) .pcard:nth-child(3):last-child{grid-column:1 / -1;}
  .pcard{
    border:0;border-bottom:5px solid var(--edge);font:inherit;text-align:left;width:100%;
    background:linear-gradient(180deg,#FBF6E8,var(--tile) 42%,var(--tile-2));
    border-radius:16px;
    padding:13px 13px 14px;position:relative;color:var(--ink);min-height:114px;
    display:flex;flex-direction:column;justify-content:space-between;
    box-shadow:0 5px 14px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.82);
    transition:transform .2s cubic-bezier(.2,.8,.2,1);
  }
  .pcard:active{transform:scale(.985);}
  /* in-game seat drag (same pointer pattern as the seating screen) */
  #players .pcard{touch-action:none;user-select:none;-webkit-user-select:none;}
  .pcard.dragging{opacity:.35;}
  .pcard.seat-over{outline:2.5px dashed var(--red);outline-offset:2px;}
  .pcard-float{position:fixed;z-index:9999;pointer-events:none;box-shadow:0 12px 28px rgba(0,0,0,.45);transform:translate(-50%,-50%) scale(1.04);}
  /* empty seat: hollow drop target — drag a subbed-out chip onto it to rejoin */
  .pcard-add{
    background:transparent;border:2px dashed rgba(244,238,220,.32);border-bottom-width:2px;
    box-shadow:none;color:rgba(244,238,220,.8);align-items:center;justify-content:center;
    text-align:center;font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s;
  }
  .pcard-add .seat{color:rgba(244,238,220,.4);}
  .pcard-add .pname{color:rgba(244,238,220,.8);}
  .pcard-add.drop-ok{border-color:var(--red);background:rgba(192,57,43,.12);}
  .pcard.dealer{outline:2.5px solid var(--red);outline-offset:-1px;}
  .pcard.dealer::after{content:"";position:absolute;inset:0;border-radius:15px;pointer-events:none;animation:dealerPulse 2.8s ease-in-out infinite;}
  .pcard .seat{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase;}
  .pcard .pname{font-size:15px;font-weight:700;margin:2px 0 6px;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;}
  .pcard .pscore{font-size:35px;font-weight:800;letter-spacing:-.02em;line-height:1;}
  .pscore.pos{color:var(--green);} .pscore.neg{color:var(--red);} .pscore.zero{color:var(--ink-soft);}
  .pbadge{
    position:absolute;top:8px;right:8px;background:linear-gradient(180deg,#D14A3A,var(--red));color:#fff;font-size:9px;font-weight:800;
    padding:3px 7px;border-radius:6px;letter-spacing:.05em;display:flex;align-items:center;gap:3px;box-shadow:0 2px 6px rgba(192,57,43,.45);
  }
  /* subtle hint that tapping the card opens the player menu */
  .pmore{position:absolute;right:10px;bottom:8px;color:var(--ink-soft);font-size:16px;font-weight:800;line-height:1;opacity:.55;pointer-events:none;}

  /* Subbed-out players */
  .retired{margin:-8px 0 18px;}
  .retired .rtitle{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,238,220,.45);margin:0 0 7px 2px;}
  .retired .rchips{display:flex;flex-wrap:wrap;gap:8px;}
  .rchip{display:inline-flex;align-items:center;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:7px 11px;font-size:13px;color:rgba(244,238,220,.7);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;}
  .rchip.dragging{opacity:.35;}
  .rchip-float{position:fixed;z-index:9999;pointer-events:none;box-shadow:0 10px 22px rgba(0,0,0,.45);transform:translate(-50%,-50%) scale(1.06);}
  .rchip b{color:var(--tile);font-weight:700;}
  .rchip .rs{font-variant-numeric:tabular-nums;font-weight:800;margin-left:7px;}
  .rchip-x{margin-left:9px;background:rgba(192,57,43,.16);border:1px solid rgba(192,57,43,.4);color:#ffb4aa;border-radius:7px;width:22px;height:22px;font-size:15px;line-height:1;font-weight:700;cursor:pointer;padding:0;flex:0 0 auto;}
  .rchip.confirming{background:rgba(192,57,43,.18);border-color:rgba(192,57,43,.5);}
  .rm-warn{font-size:12px;color:#ffb4aa;font-weight:700;}
  .rm-no{margin-left:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:var(--tile);border-radius:7px;padding:5px 10px;font-size:12px;font-weight:700;cursor:pointer;}
  .rm-yes{margin-left:6px;background:var(--red);border:none;color:#fff;border-radius:7px;padding:5px 11px;font-size:12px;font-weight:800;cursor:pointer;}
  .rs.pos{color:var(--green);} .rs.neg{color:var(--red);} .rs.zero{color:var(--muted);}

  .tut-icon{display:inline-block;vertical-align:-.2em;flex:0 0 auto;}
  .record-actions{
    position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:20;
    display:grid;grid-template-columns:1.35fr 1fr;gap:8px;margin:14px 0 18px;padding:8px;
    border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);
    background:rgba(11,52,41,.94);box-shadow:0 8px 28px rgba(0,0,0,.35);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  .record-primary,.record-secondary{
    min-height:52px;border-radius:var(--r-lg);font:inherit;font-weight:800;cursor:pointer;
  }
  .record-primary{background:linear-gradient(180deg,#E6C167,var(--gold));color:var(--felt-2);border:0;box-shadow:0 5px 14px rgba(201,162,75,.3);}
  .record-secondary{background:rgba(255,255,255,.08);color:var(--tile);border:1px solid rgba(255,255,255,.16);}
  .picker-list{display:grid;gap:8px;}
  .picker-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:10px 13px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);background:rgba(255,255,255,.07);color:var(--tile);text-align:left;cursor:pointer;}
  .picker-option span{font-weight:800;}
  .picker-option small{color:rgba(244,238,220,.58);font-size:11px;text-align:right;}

  /* History */
  .hist{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:4px;}
  .hist-head{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 8px;}
  .hist-head span{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,238,220,.5);}
  .undo{background:rgba(192,57,43,.18);border:1px solid rgba(192,57,43,.4);color:#ffb4aa;border-radius:9px;padding:6px 13px;min-height:44px;font-size:12px;font-weight:700;cursor:pointer;}
  .undo:disabled{opacity:.35;cursor:default;}
  .hist-list{max-height:240px;overflow-y:auto;}
  .hrow{padding:9px 10px;border-radius:10px;}
  .hrow:nth-child(odd){background:rgba(255,255,255,.03);}
  .hrow .ht{font-size:13px;font-weight:700;color:var(--tile);display:flex;align-items:baseline;gap:8px;}
  .hrow .ht-time{margin-left:auto;font-size:10.5px;font-weight:600;color:rgba(244,238,220,.45);flex:0 0 auto;}
  .hrow-x{flex:0 0 auto;margin-left:8px;background:none;border:none;color:rgba(244,238,220,.35);
    font-size:15px;font-weight:700;line-height:1;cursor:pointer;padding:2px 4px;border-radius:6px;}
  .hrow-x:first-child{margin-left:auto;}   /* no timestamp → align right on its own */
  .hrow-x.armed{background:rgba(192,57,43,.2);border:1px solid rgba(192,57,43,.45);color:#ffb4aa;
    font-size:11px;padding:3px 8px;}
  #game.viewonly .hrow-x{display:none;}
  .hrow .hd{font-size:12px;color:rgba(244,238,220,.6);margin-top:3px;line-height:1.4;}
  .empty{text-align:center;color:rgba(244,238,220,.4);font-size:13px;padding:24px 10px;}

  /* Sheet */
  .backdrop{position:fixed;inset:0;background:rgba(8,20,16,.55);opacity:0;pointer-events:none;transition:opacity .22s;z-index:40;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
  .backdrop.on{opacity:1;pointer-events:auto;}
  .sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--sheet);
    border-radius:22px 22px 0 0;padding:24px 16px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(110%);transition:transform .36s cubic-bezier(.22,1,.36,1);
    max-width:520px;margin:0 auto;border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 -12px 44px rgba(0,0,0,.42);
    max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .sheet::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);}
  .sheet.on{transform:translateY(0);}
  .sheet h3{margin:0 0 2px;font-size:18px;font-weight:800;color:var(--tile);}
  .sheet .hint{font-size:12.5px;color:rgba(244,238,220,.6);margin:0 0 14px;}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,238,220,.55);margin-bottom:7px;}
  .chips{display:flex;flex-wrap:wrap;gap:8px;}
  .chip{
    border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--tile);
    border-radius:11px;padding:11px 14px;font-size:14px;font-weight:700;cursor:pointer;flex:1 1 auto;text-align:center;min-width:64px;
    transition:transform .12s, background .14s, border-color .14s, box-shadow .14s;
  }
  .chip:active{transform:scale(.95);}
  .chip.sel{background:var(--tile);color:var(--ink);border-color:var(--tile);box-shadow:0 3px 10px rgba(0,0,0,.25);}
  .chip.dis{opacity:.3;pointer-events:none;}
  .note{font-size:12px;color:var(--gold);margin:-4px 0 12px;min-height:16px;}
  /* actions stay reachable even when the sheet content scrolls */
  .sheet-actions{display:flex;gap:10px;margin-top:6px;position:sticky;bottom:0;
    background:var(--sheet);padding:10px 0 4px;}

  /* skeleton rows while a list loads with no cache to paint from */
  .skel{height:64px;border-radius:13px;margin-bottom:9px;
    background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.05) 75%);
    background-size:200% 100%;animation:skel 1.2s linear infinite;}
  @keyframes skel{to{background-position:-200% 0;}}
  .btn-cancel{flex:0 0 auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--tile);border-radius:13px;padding:14px 20px;font-size:15px;font-weight:700;cursor:pointer;transition:transform .12s;}
  .btn-cancel:active{transform:scale(.97);}
  .btn-apply{flex:1;background:linear-gradient(180deg,#2A8F63,var(--green));border:none;color:#fff;border-radius:13px;padding:14px;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 5px 14px rgba(30,122,82,.4);transition:transform .12s;}
  .btn-apply:active{transform:translateY(2px);}
  .btn-apply:disabled{opacity:.4;cursor:default;box-shadow:none;}

  /* Player-menu rename row */
  .pmrename{display:flex;gap:8px;align-items:center;}
  .pmrename .nameinput{flex:1;}
  .pmrename .btn-cancel{flex:0 0 auto;padding:11px 16px;font-size:14px;}

  /* Win reminder (soft) */
  .warnreminder{font-size:12px;color:#ffe08a;background:rgba(201,162,75,.12);border:1px solid rgba(201,162,75,.32);border-radius:10px;padding:9px 11px;margin:-4px 0 14px;line-height:1.35;}

  /* Dice roller */
  .dice-wrap{display:flex;gap:18px;justify-content:center;margin:10px 0 14px;perspective:560px;}
  /* real 3D dice: a cube of six pip faces that tumbles to the rolled value */
  .die3d{width:62px;height:62px;position:relative;}
  .cube{position:absolute;inset:0;transform-style:preserve-3d;
    transition:transform .95s cubic-bezier(.16,.88,.24,1);}
  .dface{position:absolute;inset:0;border-radius:12px;
    background:linear-gradient(180deg,#FBF6E8,var(--tile) 45%,var(--tile-2));
    display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:9px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(0,0,0,.05);
    backface-visibility:hidden;}
  /* face order in markup: 1,6,3,4,2,5 (opposites sum to 7) */
  .dface:nth-child(1){transform:translateZ(31px);}
  .dface:nth-child(2){transform:rotateY(180deg) translateZ(31px);}
  .dface:nth-child(3){transform:rotateY(90deg) translateZ(31px);}
  .dface:nth-child(4){transform:rotateY(-90deg) translateZ(31px);}
  .dface:nth-child(5){transform:rotateX(90deg) translateZ(31px);}
  .dface:nth-child(6){transform:rotateX(-90deg) translateZ(31px);}
  .pip{width:9px;height:9px;border-radius:50%;background:var(--ink);align-self:center;justify-self:center;}
  .pip.red{background:var(--red);}
  .dice-total{text-align:center;margin:0 0 14px;font-size:13px;color:rgba(244,238,220,.55);}
  .dice-total b{font-size:30px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;vertical-align:-4px;margin-left:5px;}
  .dice-result{background:rgba(201,162,75,.12);border:1px solid rgba(201,162,75,.35);border-radius:12px;padding:11px 12px;margin:0 0 16px;text-align:center;font-size:14px;font-weight:700;color:var(--gold);}
  .dice-result b{color:var(--tile);}

  /* Setup */
  .setup{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;}
  .setup h2{font-size:15px;font-weight:800;margin:0 0 12px;color:var(--tile);}
  .count{display:flex;gap:8px;margin-bottom:16px;}
  .count button{flex:1;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--tile);border-radius:10px;padding:12px;font-size:15px;font-weight:800;cursor:pointer;}
  .count button.sel{background:var(--tile);color:var(--ink);border-color:var(--tile);}
  .namerow{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
  .nameseat{width:34px;height:34px;flex:0 0 auto;border-radius:8px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--gold);}
  .nameinput{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:11px 12px;color:var(--tile);font-size:15px;font-family:inherit;}
  .nameinput:focus{outline:none;border-color:var(--gold);}
  .dealerpick{font-size:12px;color:rgba(244,238,220,.55);margin:14px 0 7px;font-weight:700;letter-spacing:.05em;}
  .start{width:100%;background:linear-gradient(180deg,var(--primary-hi),var(--primary));border:none;color:var(--felt-2);border-radius:13px;padding:16px;font-size:16px;font-weight:800;cursor:pointer;margin-top:16px;box-shadow:0 6px 18px rgba(201,162,75,.35);transition:transform .12s;}

  /* Settings page */
  .setpage-head{position:sticky;top:env(safe-area-inset-top);z-index:10;display:flex;align-items:center;justify-content:space-between;margin:0 -16px 12px;padding:10px 16px 12px;background:linear-gradient(180deg,var(--felt) 78%,rgba(16,70,58,0));}
  .setpage-head h2{font-size:20px;font-weight:800;margin:0;}
  .setsec{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;margin-bottom:14px;}
  .setsec h3{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,238,220,.6);}
  .setdetails{padding:0;overflow:hidden;}
  .setdetails summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 16px;list-style:none;cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,238,220,.78);}
  .setdetails summary::-webkit-details-marker{display:none;}
  .setdetails summary::after{content:"⌄";font-size:18px;line-height:1;color:var(--gold);transform:rotate(-90deg);transition:transform .18s var(--ease);}
  .setdetails[open] summary{border-bottom:1px solid rgba(255,255,255,.08);}
  .setdetails[open] summary::after{transform:rotate(0);}
  .setdetails[open] > :not(summary){margin-left:16px;margin-right:16px;}
  .setdetails[open] > .setnote{margin-top:12px;}
  .togrow{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .togrow .lbl{font-size:14px;font-weight:700;}
  .togrow .sub2{font-size:11.5px;color:rgba(244,238,220,.55);margin-top:2px;}
  .toggle{width:48px;height:28px;border-radius:99px;background:rgba(255,255,255,.15);position:relative;cursor:pointer;flex:0 0 auto;border:none;}
  .toggle.on{background:var(--green);}
  .toggle::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s;}
  .toggle.on::after{left:23px;}

  /* Rule editor cards */
  .rule{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;margin-bottom:10px;}
  .rule-top{display:flex;align-items:center;gap:8px;margin-bottom:11px;}
  .rule-name{flex:1;font-size:15px;font-weight:800;color:var(--tile);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 10px;font-family:inherit;min-width:0;}
  .rule-name:focus{outline:none;border-color:var(--gold);}
  .rule-name.fixed{background:none;border:none;padding:0;}
  .shape-tag{font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--felt);background:var(--gold);padding:4px 7px;border-radius:6px;flex:0 0 auto;}
  .shape-tag.b{background:#86A99A;}
  .rule-del{flex:0 0 auto;background:rgba(192,57,43,.16);border:1px solid rgba(192,57,43,.4);color:#ffb4aa;border-radius:8px;width:32px;height:32px;font-size:17px;font-weight:700;cursor:pointer;line-height:1;}
  .pts{display:flex;flex-wrap:wrap;gap:8px;}
  .pt{flex:1 1 84px;}
  .pt label{display:block;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:rgba(244,238,220,.5);margin-bottom:5px;}
  .pt input{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:10px 8px;color:var(--tile);font-size:16px;font-weight:800;font-family:inherit;text-align:center;font-variant-numeric:tabular-nums;}
  .pt input:focus{outline:none;border-color:var(--gold);}
  .rule-warn{font-size:11.5px;color:#ffb4aa;margin-top:8px;}
  .rule-take{font-size:11.5px;color:var(--gold);margin-top:9px;font-weight:600;line-height:1.35;}

  /* Add combo */
  .seg{display:flex;gap:6px;}
  .seg button{flex:1;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--tile);border-radius:9px;padding:10px 6px;font-size:11.5px;font-weight:700;cursor:pointer;}
  .seg button.sel{background:var(--tile);color:var(--ink);border-color:var(--tile);}
  .rulesetseg{margin:2px 0 14px;}
  #game.hkmode .streakctl{display:none;}
  #sheet .note{white-space:pre-line;}
  .hkstep{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .hkstep label{display:flex;flex-direction:column;gap:2px;}
  .hkstep .streakctl button{width:34px;height:34px;font-size:18px;}
  .hktier{flex:1 1 100%;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);margin:6px 0 -2px;}
  .hkhands{max-height:none;}
  .addbtn{width:100%;background:linear-gradient(180deg,#2A8F63,var(--green));border:none;color:#fff;border-radius:11px;padding:14px;font-size:15px;font-weight:800;cursor:pointer;margin-top:16px;box-shadow:0 5px 14px rgba(30,122,82,.38);transition:transform .12s;}
  .addbtn:active{transform:translateY(2px);}
  .addbtn:disabled{opacity:.4;cursor:default;box-shadow:none;}

  .danger{width:100%;background:rgba(192,57,43,.16);border:1px solid rgba(192,57,43,.4);color:#ffb4aa;border-radius:11px;padding:13px;font-weight:700;cursor:pointer;margin-top:2px;transition:transform .12s, background .15s;}
  .danger.armed{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 5px 14px rgba(192,57,43,.4);}
  .danger:active{transform:scale(.99);}

  /* ---- Rooms + roster (Phase 2) ---- */
  .roomlist{display:flex;flex-direction:column;gap:9px;margin-top:6px;}
  .roomcard{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
    background:linear-gradient(180deg,#FBF6E8,var(--tile) 45%,var(--tile-2));
    border:none;border-bottom:4px solid var(--edge);border-radius:13px;padding:13px 14px;color:var(--ink);cursor:pointer;transition:transform .12s;}
  .roomcard:active{transform:translateY(2px);}
  .roomcard .rc-main{flex:1 1 auto;min-width:0;}
  .roomcard .rc-name{font-weight:800;font-size:16px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .roomcard .rc-sub{font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:2px;}
  .roomcard .rc-arrow{flex:0 0 auto;font-size:22px;color:var(--ink-soft);font-weight:700;line-height:1;}
  .roomrow{display:flex;align-items:center;gap:8px;}
  .roomrow .nameinput{flex:1 1 auto;width:auto;}
  .roomrow.confirming{background:rgba(192,57,43,.1);border:1px solid rgba(192,57,43,.32);border-radius:11px;padding:8px 10px;font-size:13px;color:#ffb4aa;justify-content:space-between;}
  .roomrow .rm-no,.roomrow .rm-yes{border:none;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:700;cursor:pointer;}
  .roomrow .rm-no{background:rgba(255,255,255,.08);color:var(--tile);}
  .roomrow .rm-yes{background:var(--red);color:#fff;}
  .backlink{background:none;border:none;color:rgba(244,238,220,.7);font-size:14px;font-weight:700;cursor:pointer;padding:4px 0;margin-bottom:8px;}
  .brand-home:focus-visible{border-radius:4px;}

  /* ---- Seating (Phase 3) ---- */
  .seatslots{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
  .seatslot{position:relative;background:rgba(0,0,0,.16);border:1.5px dashed rgba(255,255,255,.18);border-radius:13px;padding:10px;min-height:74px;display:flex;flex-direction:column;gap:6px;}
  .seatslot.over{border-color:var(--gold);background:rgba(201,162,75,.12);}
  .seatslot .slotlab{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;}
  .bench{display:flex;flex-wrap:wrap;gap:8px;min-height:46px;background:rgba(0,0,0,.12);border:1.5px dashed rgba(255,255,255,.12);border-radius:13px;padding:9px;}
  .bench.over{border-color:var(--gold);background:rgba(201,162,75,.12);}
  .pchip{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#FBF6E8,var(--tile) 45%,var(--tile-2));color:var(--ink);border:none;border-bottom:3px solid var(--edge);border-radius:11px;padding:9px 12px;font-size:14px;font-weight:700;cursor:grab;touch-action:none;user-select:none;}
  .pchip.dealer{outline:2.5px solid var(--red);outline-offset:-1px;}
  .pchip .zh{color:var(--red);font-weight:800;font-size:12px;}
  .pchip.dragging{opacity:.35;}
  .pchip-float{position:fixed;z-index:9999;pointer-events:none;box-shadow:0 8px 22px rgba(0,0,0,.4);transform:translate(-50%,-50%) scale(1.04);}
  .seatslot .empty-slot{color:rgba(244,238,220,.35);font-size:12px;font-weight:600;margin-top:2px;}

  /* ---- Game bar / sync status ---- */
  .gamebar{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
  .gamebar .gmeta{flex:1 1 auto;font-size:12px;font-weight:700;color:rgba(244,238,220,.55);text-align:right;}
  .syncstatus{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:30px;padding:0 9px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:rgba(244,238,220,.68);font-size:11px;font-weight:700;white-space:nowrap;}
  .syncdot{width:9px;height:9px;border-radius:50%;background:var(--green);transition:background .2s;}
  .syncdot.saving{background:var(--gold);}
  .syncdot.offline,.syncdot.error{background:var(--red);}
  .syncdot.retry{background:var(--gold);}

  /* ---- Leaderboard + games rows ---- */
  .lbrow{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:10px 12px;}
  .lbrow .lb-rank{flex:0 0 auto;width:20px;font-weight:800;color:var(--gold);font-size:13px;}
  .lbrow .lb-medal{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;font-size:12px;font-weight:900;}
  .lb-medal.gold{background:linear-gradient(145deg,#F7D77E,var(--gold));color:#4A3210;}
  .lb-medal.silver{background:linear-gradient(145deg,#E7ECE8,#A8B5AF);color:#273630;}
  .lb-medal.bronze{background:linear-gradient(145deg,#E1A474,#A85F35);color:#3B2115;}
  .lbrow .lb-name{flex:1 1 auto;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lbrow .lb-sub{font-size:11px;color:var(--muted);font-weight:600;}
  .lb-sub .gw{color:#5fd39a;font-variant-numeric:tabular-nums;}
  .lb-sub .gl{color:#ff8a7a;font-variant-numeric:tabular-nums;}
  .lbrow .lb-total{flex:0 0 auto;font-weight:800;font-variant-numeric:tabular-nums;}
  .lbrow .lb-total.pos{color:#5fd39a;} .lbrow .lb-total.neg{color:#ff8a7a;} .lbrow .lb-total.zero{color:var(--muted);}
  .gamerow{display:flex;align-items:stretch;gap:0;width:100%;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.07);border-radius:11px;color:var(--tile);}
  .gamerow .gr-main{flex:1 1 auto;min-width:0;}
  .gr-open{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;padding:10px 8px 10px 12px;border:0;background:none;color:var(--tile);font:inherit;text-align:left;cursor:pointer;}
  .gr-menu{flex:0 0 44px;width:44px;min-height:44px;border:0;border-left:1px solid rgba(255,255,255,.1);border-radius:0 10px 10px 0;background:rgba(255,255,255,.05);color:var(--tile);font:inherit;font-size:22px;line-height:1;cursor:pointer;}
  .gamerow .gr-title{font-weight:700;font-size:14px;}
  .gamerow .gr-sub{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .gamerow .gr-badge{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;}
  .gamerow .gr-badge.active{background:rgba(30,122,82,.25);color:#7fe0b0;border:1px solid rgba(30,122,82,.5);}
  .gamerow .gr-badge.ended{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid rgba(255,255,255,.12);}
  /* Swipe-to-delete keeps the row anchored while revealing a confirmed action. */
  .gw{position:relative;overflow:hidden;border-radius:11px;}
  .gw .gamerow{background:#0E3C32;touch-action:pan-y;position:relative;z-index:1;transition:padding-right .22s cubic-bezier(.22,1,.36,1);}
  .gw.open .gamerow{padding-right:92px;}
  .gw-del{position:absolute;top:0;right:0;height:100%;width:92px;border:none;border-radius:11px;background:linear-gradient(180deg,#B3402F,#8C2F22);color:#fff;font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;z-index:2;transform:translateX(100%);transition:transform .22s cubic-bezier(.22,1,.36,1);will-change:transform;}
  .gw.open .gw-del,.gw.hovered .gw-del{transform:translateX(0);}
  .gw.open .gr-menu,.gw.hovered .gr-menu{opacity:0;pointer-events:none;}
  .gw.dragging .gw-del,.gw.dragging .gamerow{transition:none;}
  .gw-del.armed{background:linear-gradient(180deg,#E0533F,#B3402F);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);}
  #game.viewonly .undo, #game.viewonly .streakctl, #game.viewonly .dicebtn, #game.viewonly .players, #game.viewonly .retired{opacity:.55;pointer-events:none;}
  #game.viewonly .droundbar{pointer-events:none;}

  /* ---- Consistent section spacing for room / leaderboard / seating ---- */
  .sec-label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,238,220,.5);margin:24px 0 10px 2px;}
  .sec-label.first{margin-top:18px;}
  .navrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:14px 15px;margin-top:10px;color:var(--tile);cursor:pointer;font-weight:700;font-size:15px;transition:transform .12s, background .15s;}
  .navrow:active{transform:scale(.99);}
  .navrow .nav-ic{font-size:17px;line-height:1;}
  .navrow .nav-arrow{margin-left:auto;color:var(--muted);font-size:20px;line-height:1;}
  .navrow .nav-count{margin-left:auto;color:var(--muted);font-weight:700;font-size:13px;}
  .navrow .nav-count + .nav-arrow{margin-left:8px;}
  .navgroup{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
  .navgroup .navrow{margin-top:0;}
  .roomfield{margin-top:12px;}
  .room-foot{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.07);}
  [hidden]{display:none !important;}
  .hidden{display:none !important;}

  /* ---------- Animations ---------- */
  @keyframes viewIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
  .viewin{animation:viewIn .34s cubic-bezier(.22,1,.36,1) both;}

  @keyframes dealerPulse{0%,100%{box-shadow:0 0 13px 0 rgba(192,57,43,.22);}50%{box-shadow:0 0 22px 3px rgba(192,57,43,.5);}}

  @keyframes scorePop{0%{transform:scale(1);}42%{transform:scale(1.24);}100%{transform:scale(1);}}
  .pscore.pop{animation:scorePop .44s cubic-bezier(.3,1.5,.5,1);display:inline-block;transform-origin:left center;}

  @keyframes deltaFloat{0%{opacity:0;transform:translate(-50%,8px) scale(.8);}16%{opacity:1;transform:translate(-50%,0) scale(1);}100%{opacity:0;transform:translate(-50%,-46px) scale(1);}}
  .delta{position:absolute;left:50%;top:44%;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;pointer-events:none;text-shadow:0 2px 7px rgba(0,0,0,.2);animation:deltaFloat 1.05s ease-out forwards;z-index:5;}
  .delta.up{color:var(--green);} .delta.down{color:var(--red);}

  @keyframes flashPos{0%{box-shadow:0 5px 14px rgba(0,0,0,.2),0 0 0 0 rgba(30,122,82,0);}30%{box-shadow:0 5px 14px rgba(0,0,0,.2),0 0 0 3px rgba(30,122,82,.55);}100%{box-shadow:0 5px 14px rgba(0,0,0,.2),0 0 0 0 rgba(30,122,82,0);}}
  @keyframes flashNeg{0%{box-shadow:0 5px 14px rgba(0,0,0,.2),0 0 0 0 rgba(192,57,43,0);}30%{box-shadow:0 5px 14px rgba(0,0,0,.2),0 0 0 3px rgba(192,57,43,.5);}100%{box-shadow:0 5px 14px rgba(0,0,0,.2),0 0 0 0 rgba(192,57,43,0);}}
  .pcard.flash-pos{animation:flashPos .7s ease-out;}
  .pcard.flash-neg{animation:flashNeg .7s ease-out;}

  @keyframes celebrate{0%{transform:translateY(0) scale(1);}25%{transform:translateY(-5px) scale(1.045);}55%{transform:translateY(0) scale(1);}}
  .pcard.celebrate{animation:celebrate .62s cubic-bezier(.3,1.3,.5,1);z-index:3;}
  .pcard.celebrate::before{content:"";position:absolute;inset:0;border-radius:15px;pointer-events:none;animation:goldRing .9s ease-out;}
  @keyframes goldRing{0%{box-shadow:0 0 0 0 rgba(201,162,75,.75);}100%{box-shadow:0 0 0 16px rgba(201,162,75,0);}}

  @keyframes hrowIn{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:none;}}
  .hrow.fresh{animation:hrowIn .3s ease-out;}

  /* ===================================================================
     CONSISTENCY PASS — one radius scale, one motion curve, one press feel,
     one button height. Appended last so it normalizes the rules above.
     =================================================================== */

  /* 1. Shared transition (same duration + easing everywhere) */
  .iconbtn,.dicebtn,.chip,.count button,.seg button,.streakctl button,.toggle,
  .navrow,.roomcard,.pcard,.start,.btn-apply,.btn-cancel,.addbtn,.danger,
  .record-primary,.record-secondary,.undo,.rule-del,.rchip-x,.gw-del,.backlink,.pchip,.rm-no,.rm-yes{
    transition:transform var(--dur) var(--ease), background var(--dur) var(--ease),
               border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }

  /* 2. Shared press feedback — flat controls scale, raised buttons depress */
  .iconbtn:active,.dicebtn:active,.chip:active,.count button:active,.seg button:active,
  .streakctl button:active,.toggle:active,.navrow:active,.pcard:active,.undo:active,
  .rule-del:active,.rchip-x:active,.gw-del:active,.rm-no:active,.rm-yes:active,
  .pchip:active,.backlink:active{ transform:var(--press); }
  .roomcard:active,.start:active,.btn-apply:active,
  .record-primary:active,.record-secondary:active,
  .btn-cancel:active,.addbtn:active,.danger:active{ transform:var(--lift); }

  /* 3. One radius scale */
  .start,.btn-apply,.btn-cancel,.addbtn,.danger{border-radius:var(--r-lg);}
  .pcard,.roomcard,.setup,.setsec,.status{border-radius:var(--r-xl);}
  .chip,.count button,.navrow,.gamerow,.lbrow,.gw,.gw .gamerow,.gw-del,
  .rule,.pchip,.dice-result,.seatslot,.bench{border-radius:var(--r-md);}
  .seg button,.nameinput,.rule-name,.pt input,.iconbtn,.undo{border-radius:var(--r-sm);}

  /* 4. Primary action buttons — identical height, padding, alignment */
  .start,.btn-apply,.btn-cancel,.addbtn,.danger{
    min-height:52px;display:inline-flex;align-items:center;justify-content:center;
    padding:0 20px;font-size:15px;line-height:1;
  }
  .start{font-size:16px;}

  /* 5. Consistent tap targets for compact controls */
  .chip,.count button{min-height:46px;display:flex;align-items:center;justify-content:center;}
  .seg button{min-height:44px;}
  .iconbtn,.dicebtn{min-height:44px;min-width:44px;}

  /* Loading state for the red primary buttons (Sign in, Create/Start game,
     End game, Delete room). Text fades out, a spinner takes its place, taps
     are blocked until the async action resolves. */
  .start.loading,.danger.loading{color:transparent !important;pointer-events:none;position:relative;}
  .start.loading::after,.danger.loading::after{
    content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
    border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
    animation:btnspin .6s linear infinite;
  }
  @keyframes btnspin{to{transform:rotate(360deg);}}

  /* 6. View transition shares the system curve */
  .viewin{animation:viewIn var(--dur-view) var(--ease) both;}

  /* 7. Section label uniformity — same weight/size/color across all labels */
  .hist-head span, .sec-label,
  .setsec h3, .field label, .rtitle{
    letter-spacing:.12em;
  }
  /* 8. Retired section — remove negative top margin, use consistent gap */
  .retired{margin:0 0 18px;}

  /* 9. Tighten the wrap bottom so it doesn't over-scroll on short games */
  .wrap{padding-bottom:calc(100px + env(safe-area-inset-bottom));}

  /* 10. Leaderboard + game rows — consistent vertical padding */
  .lbrow{padding:11px 13px;}
  .gamerow{padding:11px 13px;}

  /* 11. Room cards — match lbrow rhythm */
  .roomcard{padding:13px 15px;}


  /* 13. Room hub — breathing room before games list */
  .sec-label{margin-top:20px;}
  .navgroup + .sec-label{margin-top:22px;}

  /* ---- Hong Kong tutorial (HK games only) ---- */
  .tut-open{width:100%;display:flex;align-items:center;gap:10px;margin-bottom:16px;
    background:linear-gradient(180deg,rgba(201,162,75,.2),rgba(201,162,75,.1));
    border:1px solid rgba(201,162,75,.45);border-radius:var(--r-md);padding:12px 14px;color:var(--tile);
    cursor:pointer;font-weight:700;font-size:14px;text-align:left;}
  .tut-open .ti{font-size:18px;line-height:1;}
  .tut-open .ta{margin-left:auto;color:var(--gold);font-weight:800;}
  .tut-open .tsub{display:block;font-size:11.5px;font-weight:600;color:rgba(244,238,220,.6);margin-top:2px;}
  .tut-link{background:none;border:none;padding:6px 2px;margin:2px 0 10px;cursor:pointer;
    min-height:44px;display:inline-flex;align-items:center;
    font-size:12.5px;font-weight:700;color:var(--gold);text-align:left;}
  .tut-link:active{opacity:.7;}

  /* ---- Toast ---- */
  #toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,16px);
    z-index:80;max-width:min(440px,88vw);background:#0B2B22;border:1px solid rgba(201,162,75,.4);
    color:var(--tile);font-size:13px;font-weight:600;line-height:1.4;padding:11px 16px;border-radius:12px;
    box-shadow:0 8px 28px rgba(0,0,0,.5);opacity:0;pointer-events:none;
    transition:opacity .22s var(--ease), transform .22s var(--ease);}
  #toast.on{opacity:1;transform:translate(-50%,0);}

  /* ---- Tile confetti ---- */
  .confetti{position:fixed;inset:0;pointer-events:none;z-index:70;}
  .confetti .cf{position:absolute;width:17px;height:23px;background:#F4EEDC;border-radius:3px;
    padding:1.5px;box-shadow:0 1px 3px rgba(0,0,0,.35);opacity:0;
    animation:cfFly 1.15s cubic-bezier(.15,.8,.3,1) forwards;}
  @keyframes cfFly{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.4);}
    12%{opacity:1;}
    100%{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 90px)) rotate(var(--rot)) scale(1);}
  }
  .tutsheet{position:fixed;left:0;right:0;top:0;bottom:0;z-index:60;background:var(--felt-2);
    max-width:520px;margin:0 auto;transform:translateY(100%);transition:transform var(--dur-view) var(--ease);
    display:flex;flex-direction:column;}
  .tutsheet.on{transform:none;}
  .tut-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:16px 16px 13px;border-bottom:1px solid rgba(255,255,255,.1);
    background:linear-gradient(180deg,rgba(0,0,0,.18),transparent);}
  .tut-head h3{margin:0;font-size:18px;font-weight:800;color:var(--tile);}
  .tut-head .cjk2{color:var(--red);font-weight:800;font-size:12px;background:linear-gradient(180deg,#FBF6E8,var(--tile-2));padding:3px 7px;border-radius:6px;border-bottom:2px solid var(--edge);margin-left:8px;}
  .tut{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:18px 16px calc(40px + env(safe-area-inset-bottom));}
  .tut h4{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:26px 0 10px;}
  .tut h4:first-child{margin-top:0;}
  .tut p{font-size:14px;line-height:1.55;color:rgba(244,238,220,.82);margin:0 0 11px;}
  .tut p b{color:var(--tile);}
  .tut .lead{font-size:14.5px;color:var(--tile);}
  .tut ul{margin:0 0 12px;padding-left:20px;}
  .tut li{font-size:13.5px;line-height:1.5;color:rgba(244,238,220,.8);margin-bottom:5px;}
  .tut .tilerow{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px;}
  .tut .tlabel{font-size:11.5px;font-weight:700;color:rgba(244,238,220,.6);margin:8px 0 4px;}
  .tut .mtile{width:40px;height:54px;background:linear-gradient(180deg,#FBF6E8,var(--tile) 45%,var(--tile-2));
    border-bottom:3px solid var(--edge);border-radius:6px;padding:3px;box-shadow:0 2px 5px rgba(0,0,0,.25);}
  .tut .mtile img{width:100%;height:100%;object-fit:contain;display:block;}
  .tut table{width:100%;border-collapse:collapse;margin:0 0 12px;font-variant-numeric:tabular-nums;}
  .tut th,.tut td{text-align:left;padding:7px 9px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.07);}
  .tut th{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,238,220,.55);}
  .tut td.n,.tut th.n{text-align:right;font-weight:800;color:var(--gold);white-space:nowrap;}
  .tut .cjk2{color:var(--red);font-weight:800;font-size:11px;background:linear-gradient(180deg,#FBF6E8,var(--tile-2));padding:1px 5px;border-radius:5px;border-bottom:2px solid var(--edge);margin-left:4px;white-space:nowrap;}
  .tut tr:nth-child(odd) td{background:rgba(255,255,255,.025);}
  .tut .tier{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);
    background:var(--gold);padding:2px 6px;border-radius:5px;}
  .tut .ex{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);padding:13px 14px;margin:0 0 12px;}
  .tut .ex .eh{font-size:14px;font-weight:800;color:var(--tile);margin-bottom:4px;}
  .tut .ex .em{font-size:12.5px;color:rgba(244,238,220,.65);line-height:1.5;}
  .tut .ex .er{margin-top:8px;font-size:13px;font-weight:800;color:var(--gold);}
  .tut .ex .er .pos{color:#5fd39a;} .tut .ex .er .neg{color:#ff8a7a;}
  .tut .callout{background:rgba(201,162,75,.12);border:1px solid rgba(201,162,75,.32);border-radius:var(--r-md);
    padding:11px 13px;margin:0 0 12px;font-size:13px;line-height:1.5;color:#ffe9b8;}
  .tut .pat{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-md);padding:11px 12px;margin:0 0 9px;}
  .tut .pat-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
  .tut .pat-name{font-size:14px;font-weight:800;color:var(--tile);flex:1 1 auto;}
  .tut .pat-faan{font-size:13px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .tut .pat .tilerow{margin:0;}
  .tut .pat .mtile{width:30px;height:41px;}
  .tut .meld{display:inline-flex;gap:2px;margin:0 9px 6px 0;}     /* one set/pair, spaced from the next */
  .tut .meld.pair{opacity:.95;}
  .tut .pat-ex{font-size:11px;color:rgba(244,238,220,.5);margin-top:3px;}
  .tut .pat-ex b{color:rgba(244,238,220,.7);font-weight:700;}

  /* 14. Contrast: lift the dimmest micro-text toward WCAG AA on the dark felt */
  .empty{color:rgba(244,238,220,.55);}
  .rtitle{color:rgba(244,238,220,.6) !important;}
  .hist-head span,.sec-label{color:rgba(244,238,220,.62);}
  .pt label{color:rgba(244,238,220,.65);}
  .droundbar .dr-sub{color:rgba(244,238,220,.62);}
  .tut .pat-ex{color:rgba(244,238,220,.6);}

  /* 15. Keyboard: visible focus ring on anything focusable */
  :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  @media (max-width:360px){
    .status{gap:8px;padding:10px;}
    .dealer-tile{width:42px;height:54px;}
    .status .info{min-width:54px;}
  }

  /* ---- Boot loading bar: a lightweight cue, not a separate screen ---- */
  #bootBar{
    position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
    background-size:60% 100%;background-repeat:no-repeat;
    animation:bootbar 1.1s ease-in-out infinite;
    transition:opacity .25s ease;
  }
  #bootBar.gone{opacity:0;pointer-events:none;}
  @keyframes bootbar{0%{background-position:-60% 0;}100%{background-position:160% 0;}}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  }