:root{
  --felt-900:#0F1E19;--felt-800:#15281F;--felt-700:#1C3428;--felt-line:#2E5140;
  --cream:#F6EFDD;--ink:#22262C;--brass:#D9A441;--red:#C8503F;
  --blue:#4C86F5;--orange:#F08A3E;--violet:#9E77F0;
}
*{margin:0;padding:0;box-sizing:border-box}
/* A phone reads two quick taps on one target as "zoom in", which is exactly the
   gesture that arms a card and plays it. `manipulation` keeps scrolling and
   pinch-zoom and drops double-tap zoom, so the second tap reaches the card. */
body{touch-action:manipulation}
button{touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,255,255,.07)}
html,body{height:100%}
body{font-family:'Instrument Sans',system-ui,sans-serif;color:var(--cream);
  background:radial-gradient(900px 600px at 70% -10%,#21382d 0%,transparent 60%),#0B1712;
  display:flex;justify-content:center;min-height:100%}
#app{width:min(480px,100%);min-height:100vh;padding:18px 16px 24px;display:flex;flex-direction:column;gap:14px}
h1,h2,.brand{font-family:'Bricolage Grotesque','Instrument Sans',sans-serif;font-weight:800}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8FA898;font-weight:600}
.btn{font:600 15px 'Instrument Sans';border:none;border-radius:14px;padding:14px 18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.btn:disabled{opacity:.45;cursor:default}
.btn-brass{background:var(--brass);color:#241A04}
.btn-line{background:transparent;color:var(--cream);border:1.5px solid #3C5F4C}
.btn-cream{background:var(--cream);color:var(--ink)}
.card-panel{background:var(--felt-700);border:1px solid var(--felt-line);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px}
input{background:#0E1B15;border:1.5px solid #335846;border-radius:14px;color:var(--cream);
  font:600 16px 'Instrument Sans';padding:13px;width:100%}
input.code{font:700 18px 'Bricolage Grotesque';letter-spacing:.3em;text-transform:uppercase;text-align:center}
select.select{background:#0E1B15;border:1.5px solid #335846;border-radius:14px;color:var(--cream);
  font:600 14px 'Instrument Sans';padding:12px}
.hint{font-size:12px;color:#7E9787;text-align:center;line-height:1.5}
.row{display:flex;gap:10px;align-items:center}
.spacer{flex:1}
.screen{display:none;flex-direction:column;gap:14px;animation:fade .22s ease}
.screen.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
/* login */
.login-hero{text-align:center;padding-top:40px}
.login-hero h1{font-size:38px;line-height:1.05}
.login-hero h1 span{color:var(--brass)}
.login-hero p{color:#A9BFAF;margin-top:10px;font-size:15px}
.fan{display:flex;justify-content:center;margin-bottom:18px}
.fan div{width:42px;height:60px;background:var(--cream);border-radius:8px;color:var(--ink);
  display:flex;align-items:center;justify-content:center;font:800 19px 'Bricolage Grotesque';
  box-shadow:0 6px 16px rgba(0,0,0,.45)}
.fan div+div{margin-left:-13px}
.fan div:nth-child(1){transform:rotate(-10deg)}
.fan div:nth-child(2){transform:translateY(-6px);z-index:1;color:var(--red)}
.fan div:nth-child(3){transform:rotate(9deg)}
/* game picker */
.gamegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){ .gamegrid{grid-template-columns:repeat(3,1fr)} }
.gtile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--felt-700);border:1px solid var(--felt-line);border-radius:18px;padding:18px 12px;
  color:var(--cream);font-family:inherit;cursor:pointer;transition:transform .12s,border-color .12s}
.gtile:hover{transform:translateY(-2px);border-color:#4C7A61}
.gtile .gart{font-size:34px;line-height:1.1;letter-spacing:.02em;font-variant-emoji:text;
  font-family:'Instrument Sans','Apple Symbols','Segoe UI Symbol','DejaVu Sans',sans-serif}
.gtile .gart i{font-style:normal;color:var(--red)}
.gtile .gname{font:700 13.5px 'Instrument Sans';text-align:center}
.gtile.soon{opacity:.62;cursor:default}
.gtile.soon:hover{transform:none;border-color:var(--felt-line)}
.gbadge{position:absolute;top:8px;right:8px;font:700 9px 'Instrument Sans';letter-spacing:.1em;
  text-transform:uppercase;color:#241A04;background:var(--brass);border-radius:999px;padding:3px 7px}
/* ---- shared table chrome ----------------------------------------------------
   Every game gets a table browser, a lobby of seats, a HUD and a result screen,
   so their furniture lives here rather than in one game's stylesheet. A game's
   own file styles only what is its own (a board, a hand, a trick). */
.check{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#A9BFAF;cursor:pointer}
.check input{width:16px;height:16px;flex:none;accent-color:var(--brass)}
.tables{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto}
.trow{display:flex;align-items:center;gap:10px;background:var(--felt-800);border:1px solid var(--felt-line);
  border-radius:14px;padding:10px 12px}
.tmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tmeta b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmeta span{font-size:11px;color:#8FA898}
/* a table that is already playing but has a seat free */
.tmeta .ttag{display:inline-block;align-self:flex-start;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#14231A;background:var(--brass);border-radius:5px;padding:1px 5px}
/* the six characters you read out to a friend. Its own column, so it sits in the
   same place whether or not the host named the table. */
.tcode{font:800 14px 'Bricolage Grotesque';letter-spacing:.14em;color:var(--brass);white-space:nowrap}
.code-card{border:1px dashed #46705A;border-radius:18px;padding:12px 16px;display:flex;align-items:center;gap:10px}
.code-card .code{font:800 26px 'Bricolage Grotesque';letter-spacing:.16em;flex:1}
.seat{display:flex;align-items:center;gap:10px;background:var(--felt-800);border:1px solid var(--felt-line);
  border-radius:14px;padding:10px 12px}
.seat.open{border-style:dashed;color:#8FA898}
.pav{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;color:#fff;flex:none}
.pname{flex:1;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tteam{font-size:10px;font-weight:700;letter-spacing:.08em}
/* one colour per team — or per seat, in a cut-throat game like Spades */
.t0 .pav,.pav.t0{background:#2F63D8}
.t1 .pav,.pav.t1{background:#D96F23}
.t2 .pav,.pav.t2{background:#7C50E0}
.t3 .pav,.pav.t3{background:#2E9E6B}
.t0 .tteam{color:#8FB4FF}.t1 .tteam{color:#FFC08A}.t2 .tteam{color:#C9B0FF}.t3 .tteam{color:#8FE0BB}
.kick,.mini{background:none;border:1px solid #5A3328;color:#E89880;border-radius:8px;font-size:11px;
  font-weight:700;padding:6px 9px;cursor:pointer}
.mini{border-color:#3C5F4C;color:#CFE0D2}
.tag{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--brass)}
.hud{display:flex;align-items:center;gap:8px}
.turnpill{display:flex;align-items:center;gap:8px;background:var(--felt-800);border:1px solid var(--felt-line);
  border-radius:999px;padding:7px 12px;flex:1;min-width:0}
.turnpill .who{font-size:13px;font-weight:700;line-height:1.15}
.turnpill .sub{font-size:10.5px;color:#8FA898;font-weight:500;display:block}
.timer{font:800 14px 'Bricolage Grotesque';color:var(--brass);background:#2A2412;border:1px solid #4A3D18;
  border-radius:999px;padding:8px 11px;min-width:48px;text-align:center}
.hand-area{display:flex;flex-direction:column;gap:8px}
.banner{border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.45;display:flex;gap:10px;align-items:center}
.banner.wait{background:#3A2F16;border:1px solid #5C4A1E;color:#F2DCA8}
.banner.spec{background:#1E3341;border:1px solid #2E4E63;color:#BBDBF2}
.banner.go{background:#1E3A2A;border:1px solid #2F6047;color:#BFEBD0}
.emotes{display:flex;gap:8px}
.emotes button{flex:1;background:transparent;border:1.5px solid #3C5F4C;border-radius:12px;padding:9px;font-size:15px;cursor:pointer}
.win-hero{text-align:center;padding-top:8px}
.win-hero h2{font-size:34px;line-height:1.05;margin:6px 0}
.stats{display:flex;gap:8px}
.stat{flex:1;background:var(--felt-800);border:1px solid var(--felt-line);border-radius:14px;padding:11px 6px;text-align:center}
.stat b{display:block;font:800 19px 'Bricolage Grotesque'}
.stat span{font-size:10px;color:#8FA898;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.thumbs{display:flex;gap:8px}
.thumbs button{width:44px;height:44px;border-radius:12px;border:1.5px solid #3C5F4C;background:transparent;font-size:17px;cursor:pointer}
.thumbs button.on{background:var(--brass);border-color:var(--brass)}
/* activity rail — any game fills it; the shell owns the chrome */
.activity{position:fixed;display:none;flex-direction:column;gap:10px;background:var(--felt-700);
  border:1px solid var(--felt-line);border-radius:18px;padding:14px;z-index:30;
  box-shadow:0 12px 32px rgba(0,0,0,.5)}
.activity.open{display:flex;left:12px;right:12px;bottom:12px;max-height:58vh}
.scrim{position:fixed;inset:0;z-index:29;display:none}
.scrim.on{display:block}
.loglist{list-style:none;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-right:2px}
.logrow{display:flex;gap:8px;align-items:baseline;font-size:12.5px;line-height:1.35;color:#CFE0D2}
.logrow .dot{width:8px;height:8px;border-radius:50%;flex:none;background:#5C7A69;transform:translateY(1px)}
.logrow.t0 .dot{background:#2F63D8}.logrow.t1 .dot{background:#D96F23}.logrow.t2 .dot{background:#7C50E0}
.logrow.t3 .dot{background:#2E9E6B}
.logrow b{font-weight:700;color:var(--cream)}
.logrow .card{font-weight:700}
.logrow .card.red{color:#F0907F}
.logrow .meta{color:#7E9787;font-size:11px;white-space:nowrap}
.logempty{font-size:12px;color:#7E9787}
@media(min-width:1180px){
  .activity.live,.activity.live.open{display:flex;top:18px;right:18px;left:auto;bottom:auto;
    width:300px;max-height:calc(100vh - 36px)}
  #btn-activity,#btn-activity-close,.scrim{display:none!important}
}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#243D30;border:1px solid #355947;
  border-radius:999px;padding:9px 16px;font-size:13px;color:#CFE3D3;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw}
.toast.show{opacity:1}