:root{
    --bg:#1b1717; --felt:#24201c; --felt2:#191515; --felt3:#0f0d0d;
    --paper:#fff8dc; --line:#50451f; --gold:#ffd400; --red:#d94130;
    --muted:#d7bd35; --good:#43d66b; --bad:#ff4d3d; --wood:#6f5640;
    --cw:clamp(54px,14.8vw,72px);
    --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  html,body{height:100%}
  body{
    margin:0;font:15px/1.45 "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
    color:var(--paper);background:
      radial-gradient(110% 90% at 50% 0%,#2a2522 0%,var(--bg) 48%,#0d0b0b 100%),
      repeating-linear-gradient(90deg,rgba(255,212,0,.035) 0 1px,transparent 1px 5px);
    background-attachment:fixed;
    overscroll-behavior:none;touch-action:manipulation;
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;
    display:flex;flex-direction:column;min-height:100%;
    padding:var(--safe-t) max(10px,env(safe-area-inset-left)) var(--safe-b) max(10px,env(safe-area-inset-right));
  }
  h1,h2,h3{margin:0 0 .4em;font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-weight:900;letter-spacing:.01em;text-transform:uppercase}
  button{font:inherit;cursor:pointer;border:0;border-radius:4px;padding:.62em 1em;
    background:var(--gold);color:#151111;font-weight:900;text-transform:uppercase;letter-spacing:.02em;
    box-shadow:0 4px 0 #9f8500,0 8px 0 rgba(0,0,0,.45);transition:transform .07s,box-shadow .07s,filter .12s;
    -webkit-user-select:none;user-select:none}
  button:active{transform:translateY(4px);box-shadow:0 0 0 #9f8500,0 2px 0 rgba(0,0,0,.45)}
  button:disabled{opacity:.4;box-shadow:none;transform:none}
  button.ghost{background:#2b2424;color:var(--gold);border:1px solid var(--line);box-shadow:0 4px 0 #0e0b0b,0 8px 0 rgba(0,0,0,.35)}
  button.ghost:active{box-shadow:0 0 0 #0e0b0b,0 2px 0 rgba(0,0,0,.35)}
  button.icon{padding:.5em .65em;border-radius:4px;background:#282222;color:var(--gold);border:1px solid rgba(255,212,0,.28);box-shadow:none;font-size:18px;line-height:1}
  button.icon:active{transform:scale(.9)}
  .settings-wrap{position:static}
  .settings-menu{position:fixed;right:6px;top:auto;z-index:200;min-width:170px;
    display:flex;flex-direction:column;gap:6px;padding:8px;background:rgba(15,13,13,.97);
    border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 28px rgba(0,0,0,.7);
    max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .settings-menu button{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:8px;
    padding:.58em .7em;background:#282222;color:var(--gold);border:1px solid rgba(255,212,0,.22);
    box-shadow:none;font-size:13px;line-height:1.1;text-align:left}
  .settings-menu button:active{transform:scale(.98);box-shadow:none}
  input{font:16px/1.4 inherit;padding:.7em .8em;border-radius:4px;border:1px solid var(--line);
    background:#0f0d0d;color:var(--paper);width:100%}

  header{display:flex;align-items:center;gap:6px;padding:6px 4px 10px;overflow:visible}
  header .hdr-logo{height:44px;width:auto;flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
  header .ttl{font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-weight:900;font-size:20px;letter-spacing:.02em;text-transform:uppercase;color:var(--gold);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  header .sub{color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  header .hdr-title{min-width:0;flex:1;overflow:hidden}
  header .btn-group{display:flex;align-items:center;gap:4px;flex:0 0 auto}
  .grow{flex:1}

  .stage{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0}
  .panel{background:rgba(27,23,23,.9);border:1px solid var(--line);border-radius:6px;padding:12px;
    backdrop-filter:blur(3px)}

  /* seats */
  .seats{display:flex;gap:8px}
  .seat{flex:1;min-width:0;background:linear-gradient(180deg,var(--felt2),var(--felt3));
    border:1px solid var(--line);border-radius:14px;padding:9px 10px;position:relative;transition:.18s}
  .seat.turn{border-color:var(--gold);box-shadow:0 0 0 2px rgba(231,195,73,.45),0 0 18px rgba(231,195,73,.25);
    animation:turnpulse 1.6s ease-in-out infinite}
  @keyframes turnpulse{0%,100%{box-shadow:0 0 0 2px rgba(231,195,73,.4),0 0 14px rgba(231,195,73,.18)}
    50%{box-shadow:0 0 0 2px rgba(231,195,73,.7),0 0 26px rgba(231,195,73,.4)}}
  .seat .role{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
  .seat .name{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .seat .name.you{color:var(--gold)}
  .seat .meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
  .chip{background:rgba(0,0,0,.48);border-radius:3px;padding:2px 8px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.03em}
  .chip.pos{color:var(--good)} .chip.neg{color:var(--bad)}
  .chip.dec{background:var(--gold);color:#241f06}
  .chip.role{color:var(--gold);border:1px solid rgba(255,212,0,.34);background:rgba(0,0,0,.5)}
  .pod .pos-lbl{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,212,0,.75);text-align:center;margin-top:1px;line-height:1;pointer-events:none}
  .mini{display:inline-flex;gap:2px;margin-top:4px}
  .mini i{width:9px;height:13px;border-radius:2px;background:repeating-linear-gradient(45deg,#2b2424,#2b2424 3px,#1b1717 3px,#1b1717 6px);
    border:1px solid var(--line);display:inline-block}

  /* table arena (spatial: you bottom, opponents across the top) */
  .arena{flex:1;min-height:320px;position:relative;border-radius:6px;overflow:hidden;
    background:
      linear-gradient(rgba(27,23,23,.52),rgba(27,23,23,.74)),
      repeating-linear-gradient(11deg,rgba(255,212,0,.08) 0 1px,transparent 1px 17px),
      linear-gradient(105deg,#5c4a38 0%,#3b3028 45%,#1b1717 100%);
    border:1px solid var(--line);box-shadow:inset 0 0 54px rgba(0,0,0,.58)}
  .banner{position:absolute;top:8px;left:84px;right:84px;z-index:2;
    font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-weight:900;font-size:15px;text-align:center;color:var(--paper);min-height:18px;text-transform:uppercase;letter-spacing:.02em}
  .banner .hi{color:var(--gold)}
  /* player pods */
  .pod{position:absolute;z-index:2;display:flex;flex-direction:row;align-items:center;gap:5px;width:auto}
  .pod.offline{opacity:0.45}
  .pod-inner{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:62px}
  .pod .pet-side{display:flex;flex-direction:column;align-items:center;gap:0px}
  .pod .av{width:46px;height:46px;border-radius:4px;display:flex;align-items:center;justify-content:center;
    font-size:25px;background:#201b1b;border:2px solid var(--line);
    box-shadow:0 3px 8px rgba(0,0,0,.45);transition:.18s;position:relative}
  .pod.turn .av{border-color:var(--gold);box-shadow:0 0 0 3px rgba(231,195,73,.5),0 0 20px rgba(231,195,73,.45);
    animation:turnpulse 1.6s ease-in-out infinite}
  .pod .nm{font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-weight:900;font-size:13px;letter-spacing:.02em;text-transform:uppercase;max-width:96px;white-space:normal;overflow-wrap:anywhere;line-height:1.05;text-align:center;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pod .nm.you{color:var(--gold)}
  .pod .sub{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:center}
  .pod .ct{display:none}
  .pod .ct i{width:7px;height:10px;border-radius:1.5px;border:1px solid var(--line);
    background:repeating-linear-gradient(45deg,#2b2424,#2b2424 2px,#1b1717 2px,#1b1717 4px);display:inline-block}
  .pod.podL{top:8px;left:8px}
  .pod.podR{top:8px;right:8px}
  .pod.podMe{bottom:8px;right:8px;left:auto;transform:none;z-index:16}
  .pod .crown{position:absolute;top:-8px;right:-6px;font-size:14px}
  .pod .crown.big{font-size:24px;top:-14px;right:-10px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
  /* Trick pile count: hidden from pod display but id is still rendered for bump animation target */
  .pod .pile-ct{display:none}
  .pod .pile-ct.bump{animation:pileBump .35s cubic-bezier(.2,1.4,.3,1)}
  .pod .av-img{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block}
  .pod .pet-buddy{font-size:36px;line-height:1;text-align:center;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
  .pod .pet-hat{display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
  .hat-btn{width:46px;height:38px;border:2px solid var(--line);border-radius:6px;cursor:pointer;background:rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;padding:2px;transition:border-color .12s}
  .hat-btn:hover{border-color:rgba(255,212,0,.55)}
  .hat-btn.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
  /* Drawing tool */
  .draw-modal{max-width:300px;padding:16px}
  .draw-canvas-wrap{position:relative;margin:0 auto 12px;width:240px;height:240px;border:2px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;cursor:crosshair;touch-action:none}
  #drawCanvas{display:block;width:240px;height:240px}
  .draw-colors{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-bottom:8px}
  .draw-color{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s,border-color .1s;flex:0 0 auto}
  .draw-color.active{border-color:var(--gold);transform:scale(1.2)}
  .draw-sizes{display:flex;gap:6px;justify-content:center;margin-bottom:10px}
  .draw-size{padding:4px 12px;font-size:12px;font-weight:900}
  .draw-size.active{background:var(--gold);color:#241f06;border-color:var(--gold)}
  .draw-preview{width:48px;height:48px;border-radius:50%;border:2px solid var(--line);object-fit:cover;flex:0 0 auto}
  .draw-preview-wrap{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:8px;background:rgba(0,0,0,.2);border-radius:6px;border:1px solid var(--line)}
  .draw-preview-label{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
  @keyframes pileBump{0%{transform:scale(1)}50%{transform:scale(1.55)}100%{transform:scale(1)}}
  /* bidding speech bubbles live in their own top arena layer */
  .bid-bubbles{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:visible}
  .bubble{position:absolute;white-space:nowrap;pointer-events:none;
    padding:8px 16px;border-radius:10px;font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-weight:900;font-size:22px;text-transform:uppercase;box-shadow:0 5px 22px rgba(0,0,0,.6);
    opacity:0;transform:translateX(-50%) translateY(10px) scale(.65);transition:.26s cubic-bezier(.2,.9,.3,1.4);text-align:center}
  .bubble.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  .bubble.update{animation:bubbleUpdate .28s cubic-bezier(.2,1.5,.3,1)}
  @keyframes bubbleUpdate{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.18)}}
  .bubble::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
    border:9px solid transparent;border-bottom:0}
  .bubble .bname{display:block;font-size:10px;font-weight:800;opacity:.7;letter-spacing:.06em;margin-bottom:2px}
  .bubble.bid{background:var(--gold);color:#241f06} .bubble.bid::after{border-top-color:var(--gold)}
  .bubble.yes{background:var(--good);color:#06281a} .bubble.yes::after{border-top-color:var(--good)}
  .bubble.pass{background:#6a7a6f;color:#fff} .bubble.pass::after{border-top-color:#6a7a6f}
  /* Persistent bid status text under each pod */
  .bid-strip{display:none;position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);
    white-space:nowrap;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;
    pointer-events:none;color:var(--muted);opacity:.9;text-shadow:0 1px 3px rgba(0,0,0,.8)}
  .bid-strip.pass{display:block}
  .bid-strip.won{display:block;color:var(--gold)}
  /* Thinking dots for the active bidder */
  .think-dot{position:absolute;z-index:13;background:rgba(255,248,220,.95);color:#241f06;
    border-radius:12px;padding:5px 10px;font-size:16px;font-weight:900;letter-spacing:3px;
    pointer-events:none;transform:translateX(-50%);
    opacity:0;transition:.2s}
  .think-dot.show{opacity:1}
  .think-dot span{display:inline-block;animation:dotpulse 1.1s ease-in-out infinite}
  .think-dot span:nth-child(2){animation-delay:.18s}
  .think-dot span:nth-child(3){animation-delay:.36s}
  @keyframes dotpulse{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-3px);opacity:1}}
  /* Skat face-up display in the arena during decision phase */
  .skat-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    z-index:3;display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none}
  .skat-center .skat-lbl{font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.07em}
  .skat-center .skat-row{display:flex;gap:8px}
  .skat-center .skat-drop{animation:skatDrop .38s cubic-bezier(.18,.78,.22,1) both}
  @keyframes skatDrop{from{transform:translateY(-24px) scale(.78);opacity:0}to{transform:none;opacity:1}}
  /* Speed popup active state */
  .speed-popup button.sp-on{background:var(--gold);color:#151111;box-shadow:0 2px 0 #9f8500}
  /* played-card layer, anchored to each player's position */
  /* played cards sit larger and nearer the centre of the felt, but still
     anchored to each player's side of the table */
  #play{position:absolute;inset:0;z-index:1;--cw:clamp(50px,13.8vw,76px);pointer-events:none}
  .pslot{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;will-change:transform,opacity}
  .pslot small{color:var(--muted);font-size:10px;font-weight:700}
  .pslot.left{top:39%;left:19%}
  .pslot.right{top:39%;right:19%}
  .pslot.me{bottom:27%;left:50%;transform:translateX(-50%)}
  .open-hand{position:absolute;left:50%;top:58px;z-index:3;transform:translateX(-50%);display:none;max-width:min(92%,520px);
    padding:6px 8px;border:1px solid rgba(255,212,0,.4);border-radius:4px;background:rgba(12,10,10,.66);box-shadow:0 8px 20px rgba(0,0,0,.35)}
  .open-hand .open-title{color:var(--gold);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;text-align:center;margin-bottom:4px}
  .open-hand .mini-cards{--cw:32px;justify-content:center;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .mini-cards.resorting{opacity:0.4;transition:opacity 0.12s ease-in}
  .arena .hint{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;color:var(--muted);font-size:13px}
  /* card fly-in from the owner's side */
  .pcard.in-left{animation:inL .48s cubic-bezier(.18,.78,.22,1) both}
  .pcard.in-right{animation:inR .48s cubic-bezier(.18,.78,.22,1) both}
  .pcard.in-me{animation:inM .48s cubic-bezier(.18,.78,.22,1) both}
  @keyframes inL{from{transform:translate(-22vw,-16vh) scale(.82) rotate(-7deg);opacity:0}to{transform:none;opacity:1}}
  @keyframes inR{from{transform:translate(22vw,-16vh) scale(.82) rotate(7deg);opacity:0}to{transform:none;opacity:1}}
  @keyframes inM{from{transform:translate(0,18vh) scale(.82);opacity:0}to{transform:none;opacity:1}}
  /* Lead indicator — "Your lead!" or "X is thinking..." */
  .lead-label{position:absolute;top:46%;left:50%;transform:translateX(-50%) scale(.85);
    font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-weight:900;font-size:17px;
    text-align:center;letter-spacing:.02em;pointer-events:none;z-index:6;
    padding:7px 18px;border-radius:6px;box-shadow:0 5px 18px rgba(0,0,0,.5);
    opacity:0;transition:.25s cubic-bezier(.2,.9,.3,1.3)}
  .lead-label.show{opacity:1;transform:translateX(-50%) scale(1)}
  .lead-label.yours{background:var(--gold);color:#241f06}
  .lead-label.theirs{background:rgba(30,26,26,.92);color:var(--paper);border:1px solid rgba(255,212,0,.25)}

  /* cards */
  .pcard{width:var(--cw);height:calc(var(--cw)*1.5);border-radius:4px;background:linear-gradient(160deg,#fffdf2,#eadfbe);
    color:#161111;position:relative;box-shadow:0 2px 0 rgba(0,0,0,.55),0 8px 16px rgba(0,0,0,.42);flex:0 0 auto;border:1px solid #1b1717}
  .pcard.red{color:var(--red)}
  .pcard .ix{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:.95;font-weight:800}
  .pcard .ix.tl{top:4px;left:5px;font-size:calc(var(--cw)*0.27)}
  .pcard .ix.br{bottom:4px;right:5px;transform:rotate(180deg);font-size:calc(var(--cw)*0.27)}
  .pcard .ix .su{font-size:calc(var(--cw)*0.22)}
  .pcard .pip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--cw)*0.62);opacity:.92}
  .pcard.back{background:linear-gradient(135deg,#1b1717,#3b3028);border:1px solid var(--gold)}
  .pcard.back::after{content:"♣";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:rgba(231,195,73,.45);font-size:calc(var(--cw)*0.6)}
  .pcard.win{box-shadow:0 0 0 3px var(--gold),0 0 22px rgba(231,195,73,.6);z-index:2}
  .pcard.collected{animation:collect .45s ease forwards}
  @keyframes collect{to{transform:translateY(-12px) scale(.6) rotate(8deg);opacity:0}}
  .pcard.sw-left{animation:swleft .55s cubic-bezier(.4,0,.6,1) forwards}
  .pcard.sw-center{animation:swcenter .55s cubic-bezier(.4,0,.6,1) forwards}
  .pcard.sw-right{animation:swright .55s cubic-bezier(.4,0,.6,1) forwards}
  @keyframes swleft{to{transform:translate(-38vw,-120px) scale(.35) rotate(-22deg);opacity:0}}
  @keyframes swcenter{to{transform:translate(0,-150px) scale(.35) rotate(6deg);opacity:0}}
  @keyframes swright{to{transform:translate(38vw,-120px) scale(.35) rotate(22deg);opacity:0}}
  .winlabel{position:absolute;top:24%;left:50%;transform:translateX(-50%) scale(.8);
    background:rgba(8,28,17,.92);border:1px solid var(--gold);color:var(--gold);font-weight:800;
    padding:7px 16px;border-radius:999px;opacity:0;transition:.25s;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:3;white-space:nowrap}
  .winlabel.show{opacity:1;transform:translateX(-50%) scale(1)}
  .pcard.tenter{animation:tenter .26s cubic-bezier(.2,.9,.3,1.2)}
  @keyframes tenter{from{transform:translateY(38px) scale(.8);opacity:0}to{transform:none;opacity:1}}
  .claim-slot{gap:5px;max-width:44vw}
  .claim-slot .claim-cards{display:flex;justify-content:center;align-items:flex-end;min-height:calc(var(--cw)*1.5);max-width:44vw}
  .claim-slot .pcard{margin-left:calc(var(--cw)*-.48)}
  .claim-slot .pcard:first-child{margin-left:0}

  /* hand */
  .handwrap{padding:10px 6px calc(10px + var(--safe-b));overflow:visible;display:flex;flex-direction:column;position:relative;z-index:20}
  /* Safari doesn't support the `safe` keyword — provide center fallback first */
  .handrow{justify-content:center}
  .handrow{--hand-crop:0px;--hr-pad:max(10px,env(safe-area-inset-left,4px));display:flex;justify-content:safe center;align-items:flex-end;min-height:calc(var(--cw)*1.5 + 24px);padding:24px 0 4px 0;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding-inline-start:var(--hr-pad)}
  .handrow::-webkit-scrollbar{display:none}
  /* Safari iOS ignores padding on overflow-x scroll ends — flex spacers ensure trailing room */
  /* Leading spacer is wider to absorb fan-rotation overhang of leftmost card (~10px extra) */
  .handrow::before{content:'';display:block;flex:0 0 max(22px,env(safe-area-inset-left,4px));min-width:max(22px,env(safe-area-inset-left,4px))}
  .handrow::after{content:'';display:block;flex:0 0 var(--hr-pad);min-width:var(--hr-pad)}
  .handrow .pcard{margin-left:calc(var(--cw)*-0.46);flex-shrink:0;transition:transform .12s;cursor:default;transform:translateY(calc(var(--fan-y,0px) + var(--hand-crop))) rotate(var(--fan-rot,0deg));transform-origin:50% 115%}
  .handrow .pcard:first-child{margin-left:0}
  .handrow .pcard.play{cursor:pointer}
  .handrow .pcard.play.hovering{transform:translateY(calc(var(--fan-y,0px) + var(--hand-crop) - 6px)) rotate(var(--fan-rot,0deg))}
  .handrow .pcard.sel{transform:translateY(calc(var(--fan-y,0px) + var(--hand-crop) - 18px)) rotate(var(--fan-rot,0deg));box-shadow:0 0 0 3px var(--gold),0 6px 14px rgba(0,0,0,.45)}
  .handrow .pcard.dim{opacity:0.36;filter:grayscale(0.22)}
  .handrow .pcard.enter{animation:dealfan .62s cubic-bezier(.16,.82,.24,1.04) both}
  @keyframes dealfan{
    0%{transform:translate(var(--deal-x,0),calc(-58vh + var(--safe-t))) scale(.42) rotate(var(--deal-rot,-18deg));opacity:0}
    18%{opacity:1}
    72%{transform:translate(calc(var(--deal-x,0)*.08),calc(var(--fan-y,0px) + var(--hand-crop) - 12px)) scale(1.03) rotate(calc(var(--fan-rot,0deg)*.7))}
    100%{transform:translateY(calc(var(--fan-y,0px) + var(--hand-crop))) rotate(var(--fan-rot,0deg));opacity:1}
  }
  .handhdr{display:flex;align-items:center;gap:8px;margin:0 4px 2px}
  .handhdr h3{margin:0;font-size:18px;color:var(--gold)}
  .handhdr .hint{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
  .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
  .actions.scroll{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .actions button{white-space:nowrap}

  .result{font-size:16px;font-weight:800;text-align:center;padding:2px 10px}
  .result.pos{color:var(--good)} .result.neg{color:var(--bad)}
  #resultBox{position:absolute;top:104px;left:96px;right:96px;z-index:4;display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none}
  #resultBox .result{max-width:100%;background:rgba(27,23,23,.88);border:1px solid var(--line);border-radius:4px;
    font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-size:clamp(12px,3.2vw,16px);line-height:1.15;
    font-weight:900;text-transform:uppercase;letter-spacing:.02em;text-wrap:balance}
  .result-scoreline{max-width:100%;background:rgba(0,0,0,.7);border-radius:4px;padding:4px 8px;
    color:var(--paper);font-weight:900;font-size:clamp(10px,2.8vw,13px);text-align:center;line-height:1.15}
  .result-scoreline .hi{color:var(--gold)}

  /* join */
  .overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
    padding:24px;background:var(--gold);}
  .card-modal{width:100%;max-width:clamp(320px,90vw,460px);background:var(--bg);border:2px solid #000;
    border-radius:4px;padding:22px;box-shadow:12px 12px 0 rgba(0,0,0,.35)}
  .brand-logo{display:block;width:86%;max-width:360px;height:auto;margin:-8px auto 8px;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));animation:logoIn .55s cubic-bezier(.2,.9,.3,1.3) both}
  @keyframes logoIn{from{transform:translateY(-10px) scale(.86);opacity:0}to{transform:none;opacity:1}}
  .card-modal h1{font-size:40px;line-height:.9;text-align:center;letter-spacing:.02em;color:var(--gold)}
  .card-modal .tag{color:var(--gold);text-align:center;margin:0 0 16px;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
  .field{margin-bottom:12px}
  .field label{display:block;font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.06em;margin:0 0 4px 4px}
  .full{width:100%;justify-content:center;font-size:17px;padding:.8em}
  .join-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .auth-switch{margin-top:8px;width:100%;background:transparent;color:var(--paper);border:1px solid var(--line);
    box-shadow:none;font-size:13px;padding:.58em .8em;opacity:.85}
  .auth-switch:active{transform:scale(.98);box-shadow:none}
  .learn-btn{width:100%;background:transparent;color:var(--gold);border:1px solid rgba(255,212,0,.34);
    box-shadow:none;font-size:13px;padding:.66em .8em;opacity:.88}
  .learn-btn:active{transform:scale(.98);box-shadow:none}
  .join-secondary{display:flex;flex-direction:column;gap:7px;margin-top:12px}
  .join-secondary .ghost{font-size:13px;opacity:.82;padding:.6em .8em}
  .join-lb-btn{opacity:.7}
  .err{color:var(--bad);font-size:13px;min-height:18px;text-align:center}

  .toast{position:fixed;left:50%;top:calc(var(--safe-t) + 14px);transform:translateX(-50%) translateY(-20px);
    background:#1b1717;border:1px solid var(--gold);color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.04em;
    padding:9px 18px;border-radius:4px;opacity:0;pointer-events:none;transition:.25s;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.4)}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  #confetti{position:fixed;inset:0;pointer-events:none;z-index:55}

  /* ── declaration splash ────────────────────────────────────────────────── */
  #declSplash{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;pointer-events:none}
  .decl-card{background:rgba(10,8,6,.93);border:2px solid var(--gold);border-radius:14px;padding:28px 48px;text-align:center;
    box-shadow:0 12px 48px rgba(0,0,0,.7);animation:declIn .35s cubic-bezier(.2,1.4,.4,1) both}
  @keyframes declIn{from{opacity:0;transform:scale(.65) translateY(28px)}to{opacity:1;transform:none}}
  .decl-game{font-size:56px;font-weight:900;line-height:1.1;letter-spacing:-.01em}
  .decl-who{font-size:17px;color:var(--muted,#888);margin-top:10px}
  .decl-bid{font-size:13px;color:var(--muted,#888);margin-top:4px;opacity:.7}
  .decl-card.decl-out{animation:declOut .4s ease-in forwards}
  @keyframes declOut{to{opacity:0;transform:scale(1.06)}}

  /* ── skat badge ─────────────────────────────────────────────────────────── */
  .skat-badge{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
    background:var(--gold,#f5c842);color:#111;font-size:9px;font-weight:900;
    border-radius:3px;padding:1px 4px;line-height:1.3;pointer-events:none;letter-spacing:.04em}

  /* ── chat ─────────────────────────────────────────────────────────────── */
  .chat-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:8px;
    background:#e35;color:#fff;font-size:10px;font-weight:800;
    display:flex;align-items:center;justify-content:center;padding:0 3px}
  .chat-panel{position:fixed;bottom:0;left:0;right:0;max-height:60vh;
    background:var(--bg,#1b1717);border-top:2px solid var(--gold);
    display:flex;flex-direction:column;z-index:50;
    box-shadow:0 -4px 24px rgba(0,0,0,.5)}
  .chat-hdr{display:flex;justify-content:space-between;align-items:center;
    padding:8px 12px;border-bottom:1px solid var(--line);font-weight:700;color:var(--gold)}
  .chat-msgs{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:6px;min-height:80px}
  .chat-msg .from{font-size:11px;color:var(--muted,#888);margin-bottom:1px}
  .chat-msg .body{font-size:14px;word-break:break-word}
  .chat-input-row{display:flex;gap:8px;padding:8px 12px;border-top:1px solid var(--line)}
  .chat-input-row input{flex:1;min-width:0}

  .modal-bg{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:14px}
  .prof-stat{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:6px;padding:10px 12px;text-align:center}
  .prof-stat .psv{font-family:Impact,"Arial Black",sans-serif;font-size:22px;color:var(--gold);letter-spacing:.02em}
  .prof-stat .psl{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:2px}
  .modal{width:100%;max-width:360px;max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);overflow:auto;-webkit-overflow-scrolling:touch;background:#1b1717;border:1px solid var(--line);border-radius:6px;padding:18px;box-shadow:10px 10px 0 rgba(0,0,0,.5)}
  .modal.wide{max-width:min(760px,96vw);max-height:86vh;overflow:auto}
  .modal h3{font-size:18px;margin-bottom:12px;text-align:center}
  .lb{display:flex;justify-content:space-between;padding:9px 6px;border-bottom:1px solid var(--line);font-size:15px}
  .lb:last-child{border-bottom:0}
  .lb .v{font-weight:800}
  .modal .row{display:flex;gap:10px;margin-top:16px}
  .modal .row button{flex:1}
  .tutorial-modal{max-width:min(900px,96vw);padding:0;overflow:hidden;display:flex;flex-direction:column;height:min(680px,calc(100dvh - 32px))}
  .tutorial-shell{display:grid;grid-template-columns:minmax(190px,250px) 1fr;flex:1;min-height:0;overflow:hidden}
  .tutorial-side{background:rgba(0,0,0,.28);border-right:1px solid var(--line);padding:16px 14px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
  .tutorial-side h3{text-align:left;margin:0;color:var(--gold)}
  .tutorial-progress{display:flex;flex-direction:column;gap:6px;margin-top:4px}
  .tutorial-progress button{box-shadow:none;background:transparent;color:var(--paper);border:1px solid transparent;
    text-align:left;padding:8px 9px;font-size:12px;line-height:1.15;opacity:.72}
  .tutorial-progress button.active{border-color:var(--gold);background:rgba(255,212,0,.12);color:var(--gold);opacity:1}
  .tutorial-body{padding:18px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;min-height:0}
  .tutorial-kicker{color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
  .tutorial-title{font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-size:clamp(26px,5vw,42px);line-height:.95;color:var(--gold);text-transform:uppercase}
  .tutorial-copy{font-size:16px;max-width:700px}
  .tutorial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
  .tutorial-note{background:rgba(0,0,0,.26);border:1px solid var(--line);border-radius:6px;padding:11px}
  .tutorial-note strong{display:block;color:var(--gold);font-size:15px;margin-bottom:3px}
  .tutorial-note span{font-size:14px;color:var(--paper)}
  .tutorial-table{display:grid;grid-template-columns:repeat(8,minmax(34px,1fr));gap:5px;align-items:center}
  .tutorial-cell{background:rgba(255,248,220,.08);border:1px solid var(--line);border-radius:4px;padding:7px 4px;text-align:center;font-weight:900}
  .tutorial-cell small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
  .bid-ref{display:grid;gap:10px}
  .bid-ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:5px}
  .bid-ref-val{background:rgba(255,248,220,.08);border:1px solid var(--line);border-radius:4px;
    padding:7px 4px;text-align:center;font-weight:900;color:var(--paper)}
  .bid-ref-val.common{border-color:rgba(255,212,0,.5);color:var(--gold);background:rgba(255,212,0,.1)}
  .bid-bases{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:6px}
  .bid-base{border:1px solid var(--line);border-radius:4px;padding:8px;background:rgba(0,0,0,.24);font-size:13px}
  .bid-base strong{display:block;color:var(--gold);font-size:14px}
  .bid-null{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:6px}
  .tutorial-cardrow{--cw:42px;display:flex;gap:5px;align-items:flex-end;flex-wrap:wrap}
  .tutorial-play{display:grid;grid-template-columns:1fr;gap:10px;background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:6px;padding:12px}
  .tutorial-play .prompt{font-weight:900;color:var(--gold);text-transform:uppercase}
  .tutorial-choice{--cw:48px;box-shadow:none;background:transparent;border:1px solid var(--line);padding:7px;border-radius:6px}
  .tutorial-choice.good{border-color:var(--good);background:rgba(67,214,107,.12)}
  .tutorial-choice.bad{border-color:var(--bad);background:rgba(255,77,61,.1)}
  .tutorial-feedback{min-height:24px;font-weight:900;color:var(--muted)}
  .tutorial-tip{border-left:3px solid var(--gold);padding:8px 10px;background:rgba(255,212,0,.1);font-size:14px}
  .tutorial-footer{display:flex;gap:8px;margin-top:auto}
  .tutorial-footer button{flex:1}
  .declare-modal{max-width:min(820px,96vw);padding:14px;display:grid;gap:10px}
  .declare-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:8px}
  .declare-head h3{margin:0;text-align:left;font-size:20px}
  .declare-head .bidbox{text-align:right;color:var(--muted);font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
  .declare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
  .declare-card{background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:6px;padding:10px;text-align:left;color:var(--paper);box-shadow:none;display:flex;flex-direction:column;gap:4px;text-transform:none;letter-spacing:0}
  .declare-card:active{transform:none;box-shadow:none}
  .declare-card.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,212,0,.25)}
  .declare-card .name{font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-size:17px;text-transform:uppercase;letter-spacing:.02em;color:var(--gold)}
  .declare-card .meta{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.04em}
  .declare-card.bad{border-color:rgba(255,77,61,.85)}
  .declare-card.warn{border-color:rgba(255,212,0,.65)}
  .declare-preview{border:1px solid var(--line);background:rgba(0,0,0,.32);border-radius:6px;padding:10px;display:grid;gap:6px}
  .declare-preview .pv-title{font-weight:900;color:var(--gold);text-transform:uppercase}
  .declare-preview .pv-line{display:flex;justify-content:space-between;gap:10px;font-size:13px}
  .declare-preview .pv-line strong{font-size:16px}
  .declare-preview .risk{font-weight:900;text-transform:uppercase;letter-spacing:.04em}
  .declare-preview .risk.ok{color:var(--good)}
  .declare-preview .risk.warn{color:var(--gold)}
  .declare-preview .risk.bad{color:var(--bad)}
  .rhead{text-align:center;font-size:26px;font-weight:900;margin:2px 0 2px}
  .rhead.pos{color:var(--good)} .rhead.neg{color:var(--bad)}
  .rsub{text-align:center;color:var(--paper);font-size:14px;margin-bottom:4px}
  .rpts{text-align:center;color:var(--muted);font-size:13px;margin-bottom:12px}
  .rscore{display:flex;flex-direction:column;gap:6px;background:rgba(0,0,0,.22);border-radius:12px;padding:10px 12px}
  .rscore .r{display:flex;justify-content:space-between;align-items:center;font-size:15px}
  .rscore .r .who{font-weight:700}
  .rscore .r .who small{color:var(--muted);font-weight:600;margin-left:6px;font-size:11px;text-transform:uppercase}
  .rscore .r .v{font-weight:900}
  .rscore .r .v.pos{color:var(--good)} .rscore .r .v.neg{color:var(--bad)}
  .rscore .r.decl{border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:2px}
  .tkrow{display:flex;gap:12px;justify-content:center;margin:10px 0 6px}
  .tk{display:flex;flex-direction:column;align-items:center;gap:5px}
  .tk small{color:var(--muted);font-size:11px;font-weight:700}
  /* result-modal emphasis + reveal */
  .modal{animation:pop .34s cubic-bezier(.2,.9,.3,1.25)}
  @keyframes pop{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
  .modal-bg{animation:fadein .25s ease}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  .badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0 2px}
  .badge{font-weight:900;letter-spacing:.04em;padding:6px 13px;border-radius:999px;font-size:13px;text-transform:uppercase}
  .badge.bcon{background:#123a23;color:var(--paper);border:1px solid var(--line)}
  .badge.sch{background:linear-gradient(180deg,#f3b44a,#e09a2c);color:#241400;box-shadow:0 0 16px rgba(243,180,74,.4)}
  .badge.swz{background:linear-gradient(180deg,#e2503f,#c5301f);color:#fff;box-shadow:0 0 18px rgba(226,80,63,.5)}
  .badge.ovb{background:transparent;color:var(--bad);border:1px solid var(--bad)}
  .rsplit{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 2px;font-weight:900;font-size:27px}
  .rsplit .lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
  .rsplit .dash{color:var(--muted);font-weight:400}
  .rscore-title{text-align:center;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;margin:14px 0 6px}
  .result-modal .rscore .r{font-size:17px;padding:11px 8px}
  .result-modal .rscore .r .v{font-size:21px}
  /* keep the end-of-hand modal compact so it never runs off a short phone */
  .result-modal{padding:14px 16px}
  .result-modal .rhead{font-size:22px;margin:0}
  .result-modal .rsplit{font-size:22px;margin:8px 0 2px}
  .result-modal .rsub{margin-bottom:2px}
  .result-modal .rpts{margin-bottom:6px}
  .result-modal .badges{margin:6px 0 2px}
  .result-modal .rscore-title{margin:8px 0 4px}
  .result-modal .rscore .r{padding:8px 8px}
  .result-modal .row{margin-top:10px}
  /* ── redesigned result modal (Seth layout) ─────────────────────────────── */
  .rmod{max-width:min(680px,96vw);padding:0;overflow:hidden;max-height:min(620px,calc(100dvh - 32px));display:flex;flex-direction:column}
  .rmod-body{overflow-y:auto;flex:1;min-height:0}
  .rmod-outcome{font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-weight:900;font-size:20px;letter-spacing:.02em;text-transform:uppercase;text-align:center;padding:12px 16px 0}
  .rmod-outcome.pos{color:var(--good)} .rmod-outcome.neg{color:var(--bad)}
  .rmod-body{display:flex;gap:0;min-height:0}
  .rmod-left{flex:1;min-width:0;padding:10px 12px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
  .rmod-right{width:180px;flex:0 0 180px;padding:10px 10px 14px;display:flex;flex-direction:column;gap:6px}
  /* skat reveal */
  .rmod-skat{display:flex;gap:10px}
  .rmod-skat-col{display:flex;flex-direction:column;gap:4px}
  .rmod-skat-lbl{font-size:10px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
  .rmod-skat-cards{--cw:34px;display:flex;gap:3px}
  .rmod-skat-cards .pcard{flex:0 0 auto}
  /* breakdown box */
  .rbd{background:rgba(0,0,0,.32);border:1px solid var(--line);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:0}
  .rbd-game{font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-size:16px;font-weight:900;color:var(--gold);text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:4px}
  .rbd-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 0;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.03em}
  .rbd-row .rbd-lbl{color:var(--paper);opacity:.85}
  .rbd-row .rbd-val{font-size:13px;color:var(--paper);font-weight:900}
  .rbd-row .rbd-val.pos{color:var(--good)} .rbd-row .rbd-val.neg{color:var(--bad)}
  .rbd-sep{border-top:1px solid rgba(255,255,255,.1);margin:3px 0}
  .rbd-total{font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-size:22px;font-weight:900;text-align:right;padding-top:4px;letter-spacing:.01em}
  .rbd-total.pos{color:var(--good)} .rbd-total.neg{color:var(--bad)}
  .rbd-opps{font-size:11px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;text-align:center}
  /* card-point split bar (Declarer vs Defenders) */
  .rbd-cpsplit{display:flex;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden}
  .rbd-cpsplit .cp-side{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 6px 7px;gap:2px}
  .rbd-cpsplit .cp-side+.cp-side{border-left:1px solid var(--line)}
  .rbd-cpsplit .cp-role{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
  .rbd-cpsplit .cp-pts{font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-size:28px;font-weight:900;line-height:1;letter-spacing:.01em}
  .rbd-cpsplit .cp-need{font-size:10px;color:var(--muted);font-weight:700}
  /* right column player scores */
  .rmod-scores{display:flex;flex-direction:column;gap:8px;flex:1}
  .rmod-player{display:flex;flex-direction:column;gap:1px;padding:6px 0;border-bottom:1px solid var(--line)}
  .rmod-player:last-child{border-bottom:0}
  .rmod-pname{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
  .rmod-pdelta{font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-size:20px;font-weight:900;letter-spacing:.01em}
  .rmod-pdelta.pos{color:var(--good)} .rmod-pdelta.neg{color:var(--bad)}
  .rmod-ptotal{font-size:13px;font-weight:900;color:var(--paper);opacity:.7}
  .rmod-next{width:100%;margin-top:auto;font-size:15px;padding:.75em}
  .rmod-review{width:100%;background:transparent;color:var(--gold);border:1px solid rgba(255,212,0,.34);box-shadow:none;font-size:12px;padding:.55em;margin-top:auto}
  .rmod-review:active{transform:scale(.98);box-shadow:none}
  @media (max-width:520px){
    .rmod-body{flex-direction:column}
    .rmod-left{border-right:0;border-bottom:1px solid var(--line)}
    .rmod-right{width:100%;flex:none}
  }
  .table-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
  .table-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:6px;padding:10px}
  .table-row strong{display:block;color:var(--gold);font-size:16px}
  .table-row small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
  .table-row .meta{text-align:right;color:var(--paper);font-weight:900;font-size:12px;text-transform:uppercase}
  .review-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px}
  .review-player{background:rgba(0,0,0,.24);border:1px solid var(--line);border-radius:6px;padding:10px}
  .review-player h4{display:flex;justify-content:space-between;gap:10px;margin:0 0 8px;font-size:15px;color:var(--gold)}
  .review-player h4 small{color:var(--muted);font-size:11px;text-transform:uppercase}
  .review-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:900;margin:10px 0 5px}
  .mini-cards{--cw:34px;display:flex;flex-wrap:wrap;gap:4px}
  .mini-cards .pcard{flex:0 0 auto}
  .trick-group{display:flex;align-items:center;gap:6px;margin:5px 0}
  .trick-group .n{width:20px;color:var(--muted);font-size:11px;font-weight:900;text-align:right}
  .empty-note{color:var(--muted);font-size:13px;text-align:center;padding:12px}
  /* hand review: tricks in order + dealt hands */
  .rev-tricks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
  @media (max-width:520px){.rev-tricks{grid-template-columns:1fr}}
  .rev-trick{background:rgba(0,0,0,.24);border:1px solid var(--line);border-radius:6px;padding:7px 8px}
  .rev-trick-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
  .rev-trick-h .rev-n{color:var(--gold);font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
  .rev-trick-h .rev-win{color:var(--muted);font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
  .rev-trick .tkrow{gap:7px;margin:4px 0 2px}
  .rev-trick .tk small{font-size:10px}
  .rev-trick .tk .pcard{--cw:42px}
  .rev-hand-row{display:flex;align-items:center;gap:8px;margin:5px 0;flex-wrap:wrap}
  .rev-hand-row .rev-who{min-width:78px;color:var(--gold);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
  .hide{display:none!important}

  /* ---------- responsive: PC / wide screens ---------- */
  @media (min-width:680px){
    body{justify-content:flex-start}
    #app{width:min(96vw,1100px);max-width:none;margin-inline:auto}
    #app>header{width:min(96vw,1100px);max-width:none;margin-inline:auto}
    :root{--cw:clamp(60px,8vh,84px)}
    #play{--cw:clamp(64px,8.6vh,94px)}
    .arena{min-height:420px}
    .pod-inner{min-width:80px}
    .pod .av{width:58px;height:58px;font-size:32px}
    .pod .nm{font-size:15px;max-width:132px}
    .pod .sub{font-size:12px}
    .pod .pet-buddy{font-size:44px}
    .handrow .pcard{margin-left:calc(var(--cw)*-0.36)}
    .banner{font-size:16px}
    header .ttl{font-size:28px}
    header .sub{font-size:13px}
    header .hdr-logo{height:72px}
  }
  @media (max-width:620px){
    .tutorial-shell{grid-template-columns:1fr}
    .tutorial-side{border-right:0;border-bottom:1px solid var(--line);max-height:40vh;overflow-y:auto}
    .tutorial-progress{display:grid;grid-template-columns:repeat(2,1fr)}
  }
  /* ---------- responsive: portrait — fit all 10 cards without side-scroll ---------- */
  @media (orientation:portrait) and (max-width:520px){
    :root{--cw:clamp(56px,15vw,70px)}
    .handrow{--hand-crop:calc(var(--cw)*.24);overflow-y:visible;min-height:calc(var(--cw)*1.3)}
    .handrow .pcard{margin-left:calc(var(--cw)*-0.46)}
  }
  /* ---------- responsive: landscape — fullscreen immersive layout ---------- */
  @media (orientation:landscape) and (max-height:560px){
    :root{--cw:clamp(60px,17vh,76px)}
    #play{--cw:clamp(50px,13vh,66px)}
    /* html bg fills safe-area zones so they don't show white */
    html{background:var(--bg)}
    /* body: strip the 10px side-padding; safe areas handled per-element */
    body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:0}
    /* header: full-width absolute strip, buttons pushed to the right */
    header{position:absolute;top:var(--safe-t);left:0;right:0;z-index:20;
      padding:4px calc(4px + env(safe-area-inset-right,0px)) 4px calc(4px + env(safe-area-inset-left,0px));
      justify-content:flex-end;align-items:center;gap:4px;background:transparent;border:none}
    header .hdr-logo,header .hdr-title{display:none}
    /* chat panel: compact in landscape — no wasted vertical space */
    .chat-panel{max-height:52vh;max-height:52dvh}
    .chat-msgs{min-height:0;max-height:calc(52vh - 80px);max-height:calc(52dvh - 80px)}
    /* modals: anchor to top so buttons aren't cut off on short landscape screens */
    .modal-bg{align-items:flex-start;padding-top:calc(env(safe-area-inset-top,0px) + 8px);overflow-y:auto}
    .modal{max-height:none;overflow:visible}
    /* join modal: scrollable */
    .overlay{align-items:flex-start;padding:8px;overflow-y:auto}
    .card-modal{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;padding:14px}
    .brand-logo{max-width:200px;margin:0 auto 6px}
    .card-modal h1{font-size:28px}
    /* stage/arena fill full screen */
    #app{position:relative}
    .stage{gap:0;flex:1}
    .arena{min-height:0;border-radius:0;border-left:none;border-right:none}
    /* opponents: vertically centered on their side, inside safe area */
    .pod{flex-direction:column;width:82px}
    .pod-inner{min-width:0;width:82px}
    .pod .pet-side{display:none}
    .pod .av{width:34px;height:34px;font-size:18px}
    .pod .nm{font-size:10px;max-width:82px}
    .pod .sub{gap:2px;font-size:10px}
    .pod.podL{top:36%;left:calc(6px + env(safe-area-inset-left,0px));transform:translateY(-50%);z-index:15}
    .pod.podR{top:36%;right:calc(6px + env(safe-area-inset-right,0px));transform:translateY(-50%);z-index:15}
    .pod.podMe{visibility:hidden;pointer-events:none}
    .banner{font-size:11px;top:4px;left:calc(88px + env(safe-area-inset-left,0px));right:calc(150px + env(safe-area-inset-right,0px))}
    #resultBox{top:56px;left:90px;right:90px}
    /* played card slots */
    .pslot.left{top:38%;left:20%} .pslot.right{top:38%;right:20%}
    .pslot.me{bottom:44%;left:50%;transform:translateX(-50%)}
    /* hand: floating overlay at arena bottom */
    .handwrap{position:absolute;bottom:0;left:0;right:0;z-index:20;
      background:linear-gradient(transparent 0%,transparent 12%,rgba(12,10,10,.92) 52%);
      border:none;border-radius:0;padding:0 6px calc(4px + var(--safe-b));backdrop-filter:none;
      display:flex;flex-direction:column}
    .handhdr{display:none}
    .handrow{--hand-crop:0px;--hr-pad:4px;min-height:calc(var(--cw)*1.5 + 8px);padding:8px 6px 2px;overflow:visible;justify-content:center}
    .handrow{--ls-ol:0.15}
    .handrow .pcard{margin-left:calc(var(--cw)*calc(-1*var(--ls-ol)));transform:translateY(var(--fan-y,0px)) rotate(var(--fan-rot,0deg)) scale(0.88);transition:transform .28s ease}
    .handrow .pcard.play{transform:translateY(var(--fan-y,0px)) rotate(var(--fan-rot,0deg)) scale(0.88)}
    .handrow .pcard.dim{transform:translateY(var(--fan-y,0px)) rotate(var(--fan-rot,0deg)) scale(0.8);opacity:0.45;filter:none}
    .handrow .pcard.play.hovering{transform:translateY(calc(var(--fan-y,0px) - 10px)) rotate(var(--fan-rot,0deg)) scale(1.12)}
    .handrow .pcard.sel{transform:translateY(calc(var(--fan-y,0px) - var(--cw)*.42)) rotate(var(--fan-rot,0deg)) scale(1.15);box-shadow:0 0 0 3px var(--gold),0 10px 22px rgba(0,0,0,.65)}
    .actions{margin-top:3px}
    .actions button{padding:.35em .7em;font-size:13px}
    /* animation overrides for landscape geometry */
    @keyframes inM{from{transform:translate(0,32vh) scale(.82);opacity:0}to{transform:none;opacity:1}}
    @keyframes dealfan{
      0%{transform:translate(var(--deal-x,0),calc(-36vh + var(--safe-t))) scale(.42) rotate(var(--deal-rot,-18deg));opacity:0}
      18%{opacity:1}
      72%{transform:translate(calc(var(--deal-x,0)*.08),calc(var(--fan-y,0px) - 12px)) scale(1.03) rotate(calc(var(--fan-rot,0deg)*.7))}
      100%{transform:translateY(var(--fan-y,0px)) rotate(var(--fan-rot,0deg));opacity:1}
    }
  }
  /* ── bid table ───────────────────────────────────────────────────────────── */
  .bid-grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0}
  .bid-grid{border-collapse:collapse;font-size:13px;width:100%;min-width:420px}
  .bid-grid th,.bid-grid td{border:1px solid var(--line);padding:5px 7px;vertical-align:middle}
  .bid-grid-hdr{background:rgba(0,0,0,.48);color:var(--gold);font-weight:900;text-align:center}
  .bid-grid-jacks{text-align:center;white-space:nowrap;padding:5px 8px;letter-spacing:2px;font-size:15px;line-height:1}
  .bid-grid-mult{font-size:11px;color:var(--muted);padding-left:9px;white-space:nowrap;text-align:left}
  .bid-grid-val{font-weight:900;font-size:19px;color:var(--gold);background:rgba(255,212,0,.08);text-align:center;min-width:42px}
  /* ── null game cells ─────────────────────────────────────────────────────── */
  .null-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
  .null-cell{border:1px solid var(--line);border-radius:4px;padding:8px 6px;text-align:center;background:rgba(0,0,0,.22)}
  .null-cell strong{display:block;color:var(--gold);font-size:16px;font-weight:900}
  .null-cell span{font-size:11px;color:var(--muted);display:block;margin-top:2px;text-transform:uppercase;letter-spacing:.04em}
  /* ── card ranking ────────────────────────────────────────────────────────── */
  .rank-section{display:flex;flex-direction:column;gap:10px;margin:6px 0}
  .rank-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .rank-row-label{font-size:10px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;min-width:68px}
  .rank-cards{--cw:34px;display:flex;gap:3px;flex-wrap:wrap}
  .rank-divider{width:1px;background:var(--line);align-self:stretch;margin:0 4px}
  /* ── scoring explainer ───────────────────────────────────────────────────── */
  .mult-breakdown{background:rgba(0,0,0,.26);border:1px solid var(--line);border-radius:6px;padding:10px;margin:6px 0}
  .mult-breakdown .mb-title{color:var(--gold);font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
  .mult-list{display:flex;flex-direction:column;gap:0}
  .mult-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:13px}
  .mult-row:last-child{border-bottom:0}
  .mult-row .ml{color:var(--paper)} .mult-row .mv{font-weight:900;color:var(--gold);white-space:nowrap}
  /* pet picker */
  .pet-section{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
  .pet-section .pet-label{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px 2px}
  .pet-section .pet-current{display:flex;align-items:center;gap:11px;margin-bottom:9px;padding:8px;border:1px solid rgba(255,212,0,.28);border-radius:6px;background:rgba(0,0,0,.22)}
  .account-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:8px 9px;border:1px solid rgba(255,212,0,.24);border-radius:6px;background:rgba(0,0,0,.24)}
  .account-strip .who{min-width:0;font-weight:900;color:var(--paper);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .account-strip .wallet{font-family:Impact,"Arial Black","Arial Narrow",sans-serif;color:var(--gold);font-size:18px;white-space:nowrap}
  .account-strip button{padding:.38em .55em;font-size:11px;box-shadow:none;background:#282222;color:var(--gold);border:1px solid rgba(255,212,0,.26)}
  .account-strip button:active{transform:scale(.96);box-shadow:none}
  .pet-avatar{width:52px;height:52px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:31px;background:radial-gradient(circle at 50% 32%,#393029,#171313 72%);border:2px solid var(--gold);box-shadow:0 0 0 2px rgba(255,212,0,.12),0 8px 18px rgba(0,0,0,.35);position:relative;flex:0 0 auto}
  .pet-avatar::after{content:"";position:absolute;left:9px;right:9px;bottom:5px;height:4px;border-radius:50%;background:rgba(0,0,0,.34);filter:blur(2px)}
  .pet-section .pet-name{font-size:14px;color:var(--paper);font-weight:900}
  .pet-section .pet-sub{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
  .pet-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  .pet-btn{aspect-ratio:1;border:2px solid var(--line);border-radius:6px;font-size:25px;padding:0;cursor:pointer;transition:transform .1s,border-color .12s,background .12s,box-shadow .12s;line-height:1;box-shadow:inset 0 0 12px rgba(255,255,255,.03),0 3px 0 rgba(0,0,0,.32);color:inherit;text-transform:none;letter-spacing:0;font-weight:400;background:radial-gradient(circle at 50% 30%,#332b26,#181313 74%);display:flex;align-items:center;justify-content:center}
  .pet-btn:hover{border-color:rgba(255,212,0,.55);background:radial-gradient(circle at 50% 30%,#4a3d2c,#1b1513 76%)}
  .pet-btn:active{transform:translateY(2px) scale(.94);box-shadow:inset 0 0 12px rgba(255,255,255,.03),0 1px 0 rgba(0,0,0,.32)}
  .pet-btn.sel{border-color:var(--gold);background:radial-gradient(circle at 50% 30%,#5a4822,#241c12 76%);box-shadow:0 0 0 1px var(--gold),0 0 18px rgba(255,212,0,.25)}
  .pet-btn.rare{border-color:#d7bdff;background:radial-gradient(circle at 50% 30%,#4c3a61,#191323 76%);box-shadow:0 0 12px rgba(215,189,255,.18),0 3px 0 rgba(0,0,0,.32)}
  .pet-lockup{display:flex;align-items:center;gap:11px;margin:8px 0 12px;padding:9px;border:1px solid rgba(255,212,0,.25);border-radius:6px;background:rgba(0,0,0,.2)}
  .pet-lockup .copy{min-width:0}.pet-lockup .title{font-weight:900;color:var(--paper);font-size:15px}.pet-lockup .sub{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
  .chest-modal{text-align:center;max-width:310px}
  .chest-pop{font-size:62px;line-height:1;margin:4px 0 8px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45));animation:chestPop .46s cubic-bezier(.18,1.35,.28,1)}
  @keyframes chestPop{0%{transform:translateY(12px) scale(.55);opacity:0}70%{transform:translateY(-4px) scale(1.12);opacity:1}100%{transform:none}}
  .chest-title{font-family:Impact,"Arial Black","Arial Narrow",sans-serif;color:var(--gold);font-size:22px;text-transform:uppercase;letter-spacing:.02em}
  .chest-prize{margin:10px 0;padding:10px;border:1px solid rgba(255,212,0,.3);border-radius:6px;background:rgba(0,0,0,.26)}
  .chest-coins{font-weight:900;font-size:20px;color:var(--gold)}
  .chest-item{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;font-size:14px;font-weight:900}
  .chest-item .it{font-size:28px}
  .chest-note{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}

  /* ── score sheet blade ─────────────────────────────────────────────────── */
  .blade-bg{position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.45);display:flex;justify-content:flex-end;animation:fadein .2s ease}
  .blade{width:min(96vw,580px);height:100%;background:var(--bg);border-left:2px solid var(--line);display:flex;flex-direction:column;animation:bladeIn .25s cubic-bezier(.2,.9,.3,1)}
  @keyframes bladeIn{from{transform:translateX(100%)}to{transform:none}}
  .blade-hdr{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .blade-hdr h3{margin:0;font-size:18px;flex:1;color:var(--gold)}
  .blade-body{flex:1;overflow-y:auto;padding:12px 14px}
  /* score sheet table */
  .ss-table{width:100%;border-collapse:collapse;font-size:12px}
  .ss-table th{background:rgba(0,0,0,.45);color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.04em;padding:6px 8px;text-align:center;border-bottom:2px solid var(--line);white-space:nowrap}
  .ss-table th.left{text-align:left}
  .ss-table td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;text-align:center}
  .ss-table td.left{text-align:left}
  .ss-table tr:nth-child(even) td{background:rgba(255,255,255,.03)}
  .ss-table .ss-hand{color:var(--muted);font-weight:700;font-size:11px}
  .ss-table .ss-game{font-weight:900;font-size:13px}
  .ss-table .ss-game .ss-dec{color:var(--gold)}
  .ss-table .ss-gv{font-weight:900}
  .ss-table .ss-gv.won{color:var(--good)} .ss-table .ss-gv.lost{color:var(--bad)}
  .ss-table .ss-delta{font-weight:900;font-size:13px}
  .ss-table .ss-delta.pos{color:var(--good)} .ss-table .ss-delta.neg{color:var(--bad)}
  .ss-table .ss-total-row td{border-top:2px solid var(--line);background:rgba(0,0,0,.38);font-weight:900;padding:8px}
  .ss-table .ss-total-row .ss-delta{font-size:14px}
  .ss-badge{display:inline-block;font-size:9px;font-weight:900;padding:1px 4px;border-radius:2px;text-transform:uppercase;letter-spacing:.04em;margin-left:4px;vertical-align:middle}
  .ss-badge.sch{background:#e09a2c;color:#241400}
  .ss-badge.swz{background:#c5301f;color:#fff}
  .ss-badge.ovb{border:1px solid var(--bad);color:var(--bad)}
  .ss-badge.hand{background:rgba(255,255,255,.12);color:var(--paper)}
  .ss-empty{color:var(--muted);font-size:13px;text-align:center;padding:32px}
/* ── leaderboard blade ─── */
.lb-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:0}
.lb-tab{flex:1;padding:10px;font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;transition:color .15s,border-color .15s}
.lb-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.lb-table{width:100%;border-collapse:collapse;font-size:13px}
.lb-table th{background:rgba(0,0,0,.45);color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.04em;padding:7px 8px;text-align:left;border-bottom:2px solid var(--line)}
.lb-table th.r{text-align:right}
.lb-table td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle}
.lb-table td.r{text-align:right;font-weight:900}
.lb-table tr:nth-child(even) td{background:rgba(255,255,255,.03)}
.lb-rank{font-weight:900;font-size:11px;color:var(--muted);width:28px}
.lb-rank.gold{color:#ffd400} .lb-rank.silver{color:#b0bec5} .lb-rank.bronze{color:#a1623a}
.lb-name{font-weight:900;font-size:14px}
.lb-elo{font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-size:18px;color:var(--gold)}
.lb-games{font-size:11px;color:var(--muted);font-weight:800}
.lb-empty{color:var(--muted);font-size:13px;text-align:center;padding:28px}
.lb-you{background:rgba(255,212,0,.07)!important}