:root{
    --cb-green:#2d6a3e; --cb-green-dark:#1e4a2b; --cb-gold:#d9a521; --cb-grey:#8a9196; --cb-black:#111417;
    --ns-blue:var(--cb-green-dark); --ns-blue-2:var(--cb-black); --ns-green:var(--cb-green); --ns-green-2:#3d8a52;
    --ns-gold:var(--cb-gold); --ns-red:#b3261e; --felt:#1b4d2e; --felt-dark:#123620;
    --cream:#f6efdf; --wood:#5a3a1e; --wood-2:#7a5230; --slate:#23282b; --chalk:#e9e4d8;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;font-family:Georgia,"Times New Roman",serif;color:var(--cream);background:var(--cb-green)}
  body{
    /* Cape Breton tartan (1957): green for the hills, gold for sunsets on the Bras d'Or,
       grey for the steel, black for the coal — one sett, repeated in both directions */
    --sett:
      transparent 0 18px, rgba(217,165,33,.55) 18px 24px, transparent 24px 42px,
      rgba(17,20,23,.75) 42px 46px, transparent 46px 56px, rgba(138,145,150,.55) 56px 68px,
      transparent 68px 78px, rgba(17,20,23,.75) 78px 82px, transparent 82px 100px,
      rgba(217,165,33,.55) 100px 104px, transparent 104px 120px;
    background:
      repeating-linear-gradient(0deg, var(--sett)),
      repeating-linear-gradient(90deg, var(--sett)),
      repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px),
      var(--cb-green);
  }
  header{
    text-align:center;padding:10px 12px 6px;
    background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.15));
    border-bottom:3px solid var(--ns-gold);
  }
  header h1{
    margin:0;font-size:2.4rem;letter-spacing:.18em;color:var(--ns-gold);
    text-shadow:0 2px 0 #000,0 0 18px rgba(217,165,33,.5);font-variant:small-caps;
  }
  header .sub{margin:2px 0 0;font-style:italic;font-size:.95rem;color:var(--cream);opacity:.9}
  header .gaelic{font-size:.8rem;letter-spacing:.2em;color:#c9cfd3;text-transform:uppercase}

  #app{display:grid;grid-template-columns:1fr 280px;gap:12px;padding:12px;max-width:1280px;margin:0 auto}
  @media (max-width:900px){#app{grid-template-columns:1fr}}

  /* ---- table ---- */
  #table{
    position:relative;border-radius:18px;min-height:600px;
    background:
      radial-gradient(ellipse at center, #246a3c 0%, var(--felt) 55%, var(--felt-dark) 100%);
    border:14px solid var(--wood);
    box-shadow:inset 0 0 40px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.6), 0 0 0 4px var(--ns-gold);
    display:grid;
    grid-template-areas:"nw north ne" "west center east" "sw south se";
    grid-template-columns:150px 1fr 150px;grid-template-rows:150px 1fr 190px;
  }
  .seat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px}
  .seat.north{grid-area:north}.seat.west{grid-area:west}.seat.east{grid-area:east}.seat.south{grid-area:south}
  .nameplate{
    background:var(--wood-2);color:var(--cream);padding:4px 12px;border-radius:6px;font-size:.85rem;
    border:2px solid var(--ns-gold);box-shadow:0 2px 6px rgba(0,0,0,.5);white-space:nowrap;z-index:2
  }
  .nameplate small{display:block;font-size:.7rem;opacity:.8;font-style:italic}
  .nameplate.dealer::after{content:" · DEALER";color:var(--ns-gold);font-weight:bold}
  .nameplate.active{outline:3px solid #fff;animation:pulse 1s infinite alternate}
  .nameplate.caller{border-color:#ff6a5e}
  @keyframes pulse{from{box-shadow:0 0 0 rgba(255,255,255,0)}to{box-shadow:0 0 14px #fff}}
  .hand{display:flex;gap:4px;margin-top:6px;justify-content:center;flex-wrap:nowrap}
  .seat.west .hand,.seat.east .hand{flex-direction:column;gap:0}
  .seat.west .hand .card,.seat.east .hand .card{margin-top:-22px;width:48px;height:34px;}
  .seat.west .hand .card:first-child,.seat.east .hand .card:first-child{margin-top:0}
  .tricks{font-size:.75rem;opacity:.85;margin-top:4px}

  #center{grid-area:center;position:relative;display:flex;align-items:center;justify-content:center}
  #status{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);border:1px solid var(--ns-gold);color:var(--cream);padding:5px 14px;border-radius:999px;font-size:.9rem;white-space:nowrap;max-width:95%;overflow:hidden;text-overflow:ellipsis;z-index:4;font-style:italic}
  .mark{position:absolute;z-index:3;font-size:.75rem;font-weight:bold;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:999px;opacity:0;transition:opacity .3s;pointer-events:none}
  .mark.show{opacity:1}
  .mark.passed{background:#444;color:#ccc;border:1px solid #777}
  .mark.called{background:var(--ns-gold);color:#2a1d05;border:1px solid #8a6412;box-shadow:0 0 10px var(--ns-gold)}
  .seat.north .mark{top:6px;right:6px}.seat.west .mark,.seat.east .mark{top:6px;left:50%;transform:translateX(-50%)}.seat.south .mark{bottom:6px;right:6px}
  .nameplate.won{background:var(--ns-gold);color:#2a1d05;transform:scale(1.08);transition:all .3s}
  .float{position:absolute;left:50%;top:40%;transform:translate(-50%,0);font-size:1.8rem;font-weight:bold;color:var(--ns-gold);text-shadow:0 0 8px #000,0 2px 0 #000;z-index:6;opacity:1;transition:all .9s ease-out;pointer-events:none}
  .float.go{transform:translate(-50%,-60px);opacity:0}
  #trick .card.sweep0{top:260px;opacity:0}#trick .card.sweep1{left:-120px;opacity:0}#trick .card.sweep2{top:-120px;opacity:0}#trick .card.sweep3{left:300px;opacity:0}
  #trick{position:relative;width:260px;height:230px}
  #trick .card{position:absolute;transition:all .8s ease}
  #trick .pos0{left:95px;top:130px}   /* south */
  #trick .pos1{left:10px;top:70px}    /* west */
  #trick .pos2{left:95px;top:5px}     /* north */
  #trick .pos3{left:180px;top:70px}   /* east */
  #trumpBadge{
    position:absolute;top:10px;left:10px;background:rgba(0,0,0,.45);border:2px solid var(--ns-gold);
    padding:6px 10px;border-radius:8px;font-size:.9rem;min-width:120px
  }
  #trumpBadge .big{font-size:2rem;line-height:1}
  #handInfo{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.45);border:2px solid var(--ns-gold);padding:6px 10px;border-radius:8px;font-size:.8rem;text-align:right}

  /* ---- cards ---- */
  .card{
    width:62px;height:88px;border-radius:7px;background:#fff;color:#111;position:relative;
    box-shadow:0 2px 5px rgba(0,0,0,.5);border:1px solid #999;font-weight:bold;user-select:none;flex:none
  }
  .card .tl{position:absolute;top:4px;left:5px;font-size:.9rem;line-height:1}
  .card .br{position:absolute;bottom:4px;right:5px;font-size:.9rem;line-height:1;transform:rotate(180deg)}
  .card .mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2rem}
  .card.red{color:#c4161c}
  .card.back{
    background:
      radial-gradient(circle at 50% 50%, var(--ns-gold) 0 3px, transparent 3px),
      repeating-linear-gradient(45deg, var(--cb-green) 0 6px, var(--cb-black) 6px 9px, var(--cb-grey) 9px 11px, var(--cb-black) 11px 14px);
    background-size:16px 16px, auto;border:3px solid #fff;
  }
  .card.back::after{content:"✠";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ns-gold);font-size:1.6rem;text-shadow:0 0 4px #000}
  .card.trumpcard{box-shadow:0 0 0 2px var(--ns-gold),0 2px 5px rgba(0,0,0,.5)}
  #me .card{cursor:not-allowed;opacity:.55;transition:transform .15s}
  #me .card.legal{cursor:pointer;opacity:1}
  #me .card.legal:hover{transform:translateY(-12px)}
  #me.idle .card{opacity:1;cursor:default}

  /* ---- bubbles ---- */
  .bubble{
    position:absolute;z-index:5;background:var(--cream);color:#222;padding:6px 10px;border-radius:12px;
    font-size:.85rem;max-width:180px;box-shadow:0 3px 8px rgba(0,0,0,.5);opacity:0;transition:opacity .25s;pointer-events:none
  }
  .bubble.show{opacity:1}
  .seat.north .bubble{top:100%;left:50%;transform:translateX(-50%)}
  .seat.west .bubble{left:100%;top:30%}
  .seat.east .bubble{right:100%;top:30%}
  .seat.south .bubble{bottom:100%;left:50%;transform:translateX(-50%)}

  /* ---- side panel ---- */
  #side{display:flex;flex-direction:column;gap:12px}
  .panel{background:rgba(0,0,0,.45);border:3px solid var(--wood-2);border-radius:10px;padding:10px;box-shadow:0 4px 12px rgba(0,0,0,.5)}
  .panel h2{margin:0 0 6px;font-size:1rem;color:var(--ns-gold);letter-spacing:.1em;font-variant:small-caps;border-bottom:1px solid var(--ns-gold)}
  #slate{background:var(--slate);border:8px solid var(--wood);font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive;color:var(--chalk)}
  #slate h2{color:var(--chalk);border-color:var(--chalk);font-family:inherit}
  #slate table{width:100%;border-collapse:collapse;font-size:1rem}
  #slate th{text-align:left;font-weight:normal;opacity:.85;font-size:.8rem}
  #slate td{padding:2px 0;border-bottom:1px dashed rgba(233,228,216,.3)}
  #slate td.num{text-align:right;font-size:1.4rem}
  #slate .target{font-size:.75rem;opacity:.7;text-align:center;margin-top:4px}
  #log{font-size:.8rem;max-height:220px;overflow-y:auto;line-height:1.35}
  #log div{padding:2px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  #log .hl{color:var(--ns-gold)}
  #log .bad{color:#ff8c84}
  #log .good{color:#8fe3a4}
  button{
    font-family:inherit;background:var(--ns-gold);color:#2a1d05;border:2px solid #8a6412;border-radius:6px;
    padding:8px 12px;font-size:.95rem;cursor:pointer;font-weight:bold;box-shadow:0 2px 0 #8a6412
  }
  button:hover{background:#f0bb3a}
  button:disabled{opacity:.45;cursor:not-allowed}
  button.secondary{background:var(--cream);border-color:#999;box-shadow:0 2px 0 #999}
  .btnrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

  /* ---- modal ---- */
  #modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:50}
  #modal.show{display:flex}
  #modal .box{
    background:var(--cream);color:#222;border:6px solid var(--wood);border-radius:12px;padding:18px 22px;max-width:560px;width:92%;
    box-shadow:0 0 0 4px var(--ns-gold),0 20px 50px rgba(0,0,0,.7);max-height:90vh;overflow:auto
  }
  #modal h3{margin:0 0 8px;color:var(--ns-blue);font-variant:small-caps;letter-spacing:.1em;font-size:1.4rem}
  #modal .bidhand{display:flex;gap:4px;justify-content:center;margin:8px 0}
  #modal .suits{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0}
  #modal .suits button{font-size:1.6rem;width:64px;height:64px;padding:0;background:#fff}
  #modal .suits button.red{color:#c4161c}
  #modal .suits button.rec{box-shadow:0 0 0 3px var(--ns-green-2),0 2px 0 #8a6412}
  #modal table{width:100%;border-collapse:collapse;margin:8px 0}
  #modal td,#modal th{padding:4px 6px;border-bottom:1px solid #ccc;text-align:left}
  #modal td.num{text-align:right;font-weight:bold}
  #modal .rules{font-size:.9rem;line-height:1.45}
  #modal .rules h4{margin:10px 0 4px;color:var(--ns-green)}
  .slang{font-style:italic;color:var(--ns-blue)}
  .announce{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;pointer-events:none;
    font-size:2.6rem;color:var(--ns-gold);text-shadow:0 0 12px #000,0 3px 0 #000;font-variant:small-caps;letter-spacing:.15em;
    opacity:0;transition:opacity .3s
  }
  .announce.show{opacity:1}
  #shown{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;background:rgba(0,0,0,.72);border:3px solid var(--ns-gold);border-radius:12px;padding:10px 14px;text-align:center;opacity:0;transition:opacity .3s;pointer-events:none}
  #shown.show{opacity:1}
  #shown .who{font-size:.9rem;margin-bottom:6px;color:var(--ns-gold);font-variant:small-caps;letter-spacing:.1em}
  #shown .cards{display:flex;gap:6px;justify-content:center}
  footer{text-align:center;font-size:.75rem;opacity:.7;padding:8px}