:root{
  --felt:#0a2e23; --felt-2:#0e3a2c; --surface:#103d2f; --surface-2:#0c3325;
  --brass:#c9a24b; --brass-dim:#9d7d38; --cream:#f4eedd; --cream-dim:#c9c3b0;
  --garnet:#a6394a; --line:rgba(201,162,75,.22);
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --r:18px;
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  font-family:var(--body);
  color:var(--cream);
  background:radial-gradient(120% 80% at 50% -10%,var(--felt-2),var(--felt) 55%,#06231a 100%);
  background-attachment:fixed;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior:none;                  /* pas de pull-to-refresh en PWA */
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;                 /* pas de zoom double-tap */
  -webkit-user-select:none;user-select:none;
}
input{-webkit-user-select:text;user-select:text}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:0;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:4px 4px}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;
  -webkit-appearance:none;appearance:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:6px}

/* ---- shell ---- */
.app{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  padding:calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal))}
.view{width:100%;max-width:440px;margin:auto 0;display:none;animation:rise .4s cubic-bezier(.2,.7,.2,1)}
.view.active{display:block}
#view-table.active{display:flex;flex:1;width:100%;max-width:560px}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- wordmark ---- */
.mark{text-align:center;margin-bottom:28px}
.mark .suits{font-size:18px;letter-spacing:.5em;color:var(--brass);margin-bottom:6px;padding-left:.5em}
.mark h1{font-family:var(--display);font-weight:600;font-size:clamp(40px,12vw,58px);line-height:.9}
.mark h1 em{font-style:italic;color:var(--brass)}
.mark p{color:var(--cream-dim);font-size:14px;margin-top:8px}

/* ---- panel ---- */
.panel{background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:22px 18px;position:relative}
.panel::after{content:"";position:absolute;inset:6px;border:1px solid rgba(201,162,75,.10);
  border-radius:calc(var(--r) - 8px);pointer-events:none}

/* ---- boutons (cibles tactiles >= 48px) ---- */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:50px;padding:14px 16px;border-radius:12px;font-size:15px;font-weight:600;
  transition:transform .12s ease,filter .2s ease,background .2s}
.btn:active{transform:scale(.97)}
.btn-brass{background:linear-gradient(180deg,var(--brass),var(--brass-dim));color:#241a06;
  box-shadow:0 6px 18px rgba(201,162,75,.25)}
.btn-ghost{background:rgba(244,238,221,.06);border:1px solid var(--line);color:var(--cream)}
.btn-ghost.danger{color:#ffb4b4;border-color:rgba(255,140,140,.28)}
.btn-google{background:#fff;color:#1f1f1f}
.btn-google svg{width:20px;height:20px;flex:none}
.btn+.btn{margin-top:10px}
.btn[disabled]{opacity:.42;pointer-events:none}

.divider{display:flex;align-items:center;gap:12px;color:var(--cream-dim);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:20px 2px 8px}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--line)}
.pill{font-family:var(--mono);color:var(--brass);letter-spacing:0}

.guest-name,.field{display:block;margin-top:14px}
.guest-name span,.field span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-dim);margin-bottom:6px}
.guest-name input,.field input{width:100%;min-height:48px;padding:12px 14px;font-size:16px; /* 16px : évite le zoom iOS */
  font-family:var(--body);color:var(--cream);background:var(--surface-2);
  border:1px solid var(--line);border-radius:10px}
.field+.btn{margin-top:18px}
.field input::placeholder{color:rgba(201,195,176,.45)}

/* ---- compte ---- */
.who{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.who .avatar{width:44px;height:44px;flex:none;border-radius:50%;background:var(--brass);
  display:grid;place-items:center;color:#241a06;font-weight:700;font-size:18px;overflow:hidden}
.who .avatar img{width:100%;height:100%;object-fit:cover}
.who .meta{line-height:1.25;min-width:0}
.who .meta b{font-weight:600;font-size:15px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .meta span{display:block;color:var(--cream-dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .out{margin-left:auto;flex:none;min-width:48px;min-height:44px;font-size:12px;color:var(--brass);padding:8px}

.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:8px}
.stitle{font-family:var(--display);font-size:30px;font-weight:600;line-height:1;margin-bottom:6px}
.ssub{color:var(--cream-dim);font-size:13px;margin-bottom:6px}

/* ---- liste joueurs ---- */
.players{list-style:none;margin:4px 0 16px;max-height:38vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.players li{display:flex;align-items:center;gap:10px;padding:11px 4px;
  border-bottom:1px solid rgba(201,162,75,.10)}
.players li:last-child{border:none}
.players li.off{opacity:.45}
.players li.off .dot{background:#6b7c74;box-shadow:none}
.players li.empty{color:var(--cream-dim);font-size:13px;justify-content:center}
.players .dot{width:9px;height:9px;flex:none;border-radius:50%;background:#5ad19a;box-shadow:0 0 8px rgba(90,209,154,.7)}
.players .name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.players .name i{color:var(--cream-dim);font-style:normal;font-size:12px}
.players .chips{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--brass)}
.players .tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-dim);
  border:1px solid var(--line);padding:3px 7px;border-radius:20px;white-space:nowrap}
.players li.rdy .tag{color:#5ad19a;border-color:rgba(90,209,154,.4)}

.btn-ghost.on{background:rgba(90,209,154,.14);border-color:rgba(90,209,154,.5);color:#8fe3ba}
.wait{text-align:center;font-size:12px;color:var(--cream-dim);padding:16px 8px 4px;letter-spacing:.04em}
.wait[hidden]{display:none}

/* ---- gros boutons du menu Héberger / Rejoindre ---- */
.btn.big{justify-content:flex-start;gap:14px;padding:16px;text-align:left;min-height:74px}
.btn.big .ic{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;
  font-size:19px;background:rgba(36,26,6,.14)}
.btn-ghost.big .ic{background:rgba(244,238,221,.07);color:var(--brass)}
.btn.big .lbl{display:flex;flex-direction:column;gap:3px;min-width:0}
.btn.big .lbl b{font-size:15px;font-weight:600}
.btn.big .lbl i{font-style:normal;font-size:12px;font-weight:400;opacity:.72;line-height:1.3}

/* ---- menu Options ---- */
.adv{margin-top:18px;border-top:1px solid var(--line)}
.adv summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  gap:8px;font-size:12px;color:var(--cream-dim);min-height:48px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.adv summary::-webkit-details-marker{display:none}
.adv summary svg{width:15px;height:15px;transition:transform .2s ease}
.adv[open] summary{color:var(--brass)}
.adv[open] summary svg{transform:rotate(180deg)}

.adv-body{display:flex;flex-direction:column;gap:16px;padding:4px 0 8px}
.adv-group{display:flex;flex-direction:column;gap:8px}
.adv-group:empty,.adv-group.hidden{display:none}
.adv-title{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
  opacity:.75;padding-left:2px}
.danger-zone .adv-title{color:#ff9c9c}

.opt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;
  min-height:56px;padding:12px 14px;border-radius:12px;text-align:left;
  background:rgba(244,238,221,.05);border:1px solid var(--line);color:var(--cream);
  transition:background .18s ease,transform .12s ease}
.opt:active{transform:scale(.985);background:rgba(244,238,221,.1)}
.opt[hidden]{display:none}
.opt b{font-size:14px;font-weight:600;line-height:1.2}
.opt i{font-style:normal;font-size:11.5px;color:var(--cream-dim);line-height:1.35}
.opt.danger{background:rgba(166,57,74,.12);border-color:rgba(255,140,140,.3)}
.opt.danger b{color:#ffb4b4}
.opt.danger i{color:rgba(255,180,180,.72)}
.opt.danger:active{background:rgba(166,57,74,.2)}

/* ---- table ---- */
.table-wrap{display:flex;flex-direction:column;flex:1;width:100%;gap:8px;min-height:0}
.topbar{display:flex;align-items:center;gap:12px;flex:none}
.topbar .rid{font-family:var(--mono);color:var(--brass);letter-spacing:.1em;font-size:13px}
.topbar .blinds{font-family:var(--mono);font-size:12px;color:var(--cream-dim)}
.topbar .leave{margin-left:auto;min-height:44px;padding:0 10px;font-size:13px;color:var(--cream-dim)}

.felt{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;
  border-radius:28px;border:1px solid var(--line);
  background:radial-gradient(120% 100% at 50% 30%,#134a38,#0a2e23 78%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.5),var(--shadow);padding:12px}
.seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;flex:1;align-content:start}
.seat{background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.seat.me{border-color:var(--brass)}
.seat.active{border-color:#5ad19a;box-shadow:0 0 0 2px rgba(90,209,154,.22)}
.seat.folded{opacity:.42}
.seat.win{border-color:var(--brass);background:rgba(201,162,75,.14)}
.srow{display:flex;align-items:center;gap:6px}
.seat .sn{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat .sc{font-family:var(--mono);font-size:11px;color:var(--brass);margin-top:1px}
.seat .hn{font-size:10px;color:var(--cream-dim);margin-top:3px;text-transform:uppercase;letter-spacing:.06em}
.scards{display:flex;gap:4px;margin-top:6px;min-height:34px;align-items:center}
.scards .muted{font-size:11px;color:var(--cream-dim);letter-spacing:.08em;text-transform:uppercase}
.btn-d{width:18px;height:18px;flex:none;border-radius:50%;background:var(--cream);color:#241a06;
  font-size:10px;font-weight:700;display:grid;place-items:center}
.ai{font-size:9px;font-weight:700;letter-spacing:.1em;background:var(--garnet);
  color:#fff;padding:2px 5px;border-radius:4px}

.center{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0 2px}
.board{display:flex;gap:5px;justify-content:center}
.pot{font-family:var(--mono);color:var(--brass);letter-spacing:.08em;font-size:13px}
.banner{background:var(--brass);color:#241a06;font-size:12px;font-weight:700;text-align:center;
  padding:8px 12px;border-radius:10px;max-width:100%}

/* ---- cartes ---- */
.pcard{width:38px;height:52px;flex:none;border-radius:7px;background:var(--cream);color:#241a06;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 6px 14px rgba(0,0,0,.35);font-weight:700}
.pcard b{font-size:17px}
.pcard i{font-style:normal;font-size:13px}
.pcard.red{color:var(--garnet)}
.pcard.sm{width:26px;height:36px;border-radius:5px;box-shadow:0 3px 8px rgba(0,0,0,.3)}
.pcard.sm b{font-size:13px}
.pcard.sm i{font-size:9px}
.pcard.back{background:linear-gradient(135deg,#1a5a44,#0a2e23);border:1px solid var(--line);color:var(--brass)}
.pcard.back i{font-size:15px}
.pcard.slot{background:rgba(255,255,255,.04);border:1px dashed rgba(201,162,75,.2);box-shadow:none}

/* ---- hud + actions ---- */
.hud{flex:none;display:flex;align-items:center;gap:12px;padding:0 2px;min-height:38px}
.myhand{display:flex;gap:5px}
.turn{margin-left:auto;font-size:12px;color:var(--cream-dim);text-align:right;
  display:flex;align-items:baseline;gap:8px;justify-content:flex-end}
.turn b{font-family:var(--mono);font-size:16px;color:var(--brass);font-variant-numeric:tabular-nums}
.turn b[hidden]{display:none}

/* chrono de tour */
.timer{flex:none;height:4px;border-radius:2px;background:rgba(244,238,221,.10);overflow:hidden}
.timer[hidden]{display:none}
.timer span{display:block;height:100%;width:100%;border-radius:2px;background:var(--brass);
  transition:width .5s linear}
.timer.urgent span{background:var(--garnet)}
.timer.urgent{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}
.actions{flex:none;display:flex;gap:8px}
.actions[hidden]{display:none}
.actions .btn{margin:0;font-size:14px;padding:14px 8px}

.raise-panel{flex:none;background:var(--surface-2);border:1px solid var(--line);
  border-radius:14px;padding:12px}
.raise-panel[hidden]{display:none}
.raise-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;
  color:var(--cream-dim);text-transform:uppercase;letter-spacing:.12em}
.raise-head b{font-family:var(--mono);font-size:22px;color:var(--brass);letter-spacing:0}
.raise-panel input[type=range]{width:100%;height:44px;background:none;-webkit-appearance:none;appearance:none}
.raise-panel input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(244,238,221,.16)}
.raise-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;
  border-radius:50%;background:var(--brass);margin-top:-11px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.raise-panel input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(244,238,221,.16)}
.raise-panel input[type=range]::-moz-range-thumb{width:28px;height:28px;border:none;border-radius:50%;background:var(--brass)}
.quick{display:flex;gap:6px;margin-bottom:10px}
.quick button{flex:1;min-height:44px;border-radius:10px;background:rgba(244,238,221,.06);
  border:1px solid var(--line);color:var(--cream);font-size:12px;font-weight:600}
.quick button:active{background:rgba(244,238,221,.14)}
.raise-cta{display:flex;gap:8px}
.raise-cta .btn{margin:0}

/* ---- divers ---- */
.foot{text-align:center;color:var(--cream-dim);font-size:11px;margin-top:20px}
.toast{position:fixed;left:50%;bottom:calc(20px + var(--sab));transform:translateX(-50%) translateY(20px);
  background:var(--brass);color:#241a06;font-size:13px;font-weight:600;padding:11px 18px;
  border-radius:30px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.3s;z-index:60;
  max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
.net{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--garnet);color:#fff;
  font-size:12px;font-weight:600;text-align:center;padding:calc(6px + var(--sat)) 8px 6px}
.net[hidden]{display:none}
.splash{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:var(--felt)}
.splash[hidden]{display:none}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(201,162,75,.25);
  border-top-color:var(--brass);animation:sp .9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---- petits écrans (iPhone SE…) ---- */
@media (max-height:700px){
  .app{padding-top:calc(10px + var(--sat));padding-bottom:calc(10px + var(--sab))}
  .mark{margin-bottom:18px}
  .felt{border-radius:20px;padding:10px}
  .pcard{width:34px;height:47px}
  .pcard b{font-size:15px}
  .stitle{font-size:26px}
}
@media (min-width:520px){
  .seats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}