:root{
  --night:#0b1226; --night2:#121c3a; --line:#26335e; --gold:#f2c14e; --gold2:#d9a326;
  --felt:#0f5a43; --felt2:#0a3d2e; --text:#eef1fa; --muted:#9aa6c8; --red:#d7263d; --ok:#2bb673;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--night);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;cursor:pointer}
input{font:inherit}
#app{min-height:100%}
.wrap{max-width:560px;margin:0 auto;padding:calc(16px + var(--safe-t)) 16px calc(24px + var(--safe-b))}

/* Logo */
.brand{display:flex;align-items:center;gap:12px;margin:6px 0 18px}
.brand .shield{width:46px;height:46px;flex:none}
.brand h1{margin:0;font-size:20px;letter-spacing:.06em;text-transform:uppercase;line-height:1.05}
.brand h1 span{display:block;color:var(--gold);font-size:13px;letter-spacing:.32em}
.brand .me{margin-left:auto;font-size:13px;color:var(--muted);text-align:right}
.brand .me button{background:none;color:var(--muted);text-decoration:underline;padding:0;font-size:12px}

.card-box{background:var(--night2);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px}
.card-box h2{margin:0 0 12px;font-size:15px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold)}
.btn{display:block;width:100%;padding:14px;border-radius:14px;background:var(--gold);color:#1a1300;font-weight:800;font-size:16px;text-align:center}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text);font-weight:600}
.btn.small{display:inline-block;width:auto;padding:8px 12px;font-size:13px;border-radius:10px}
.btn[disabled]{opacity:.4}
.row{display:flex;gap:10px;align-items:center}
.row>*{flex:1}
.field{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:#0a1020;color:var(--text);font-size:16px;margin-bottom:10px}
.field.code{text-transform:uppercase;letter-spacing:.4em;text-align:center;font-weight:800}
.muted{color:var(--muted);font-size:13px}
.tabs{display:flex;gap:6px;margin-bottom:14px;background:#0a1020;padding:4px;border-radius:12px}
.tabs button{flex:1;padding:10px;border-radius:9px;background:none;color:var(--muted);font-weight:700}
.tabs button.on{background:var(--night2);color:var(--text)}
.err{color:#ff8b8b;font-size:14px;min-height:18px;margin-bottom:6px}

/* Classement */
table.rank{width:100%;border-collapse:collapse;font-size:14px}
table.rank th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;text-align:right;padding:6px 4px;font-weight:600}
table.rank th:nth-child(2),table.rank td:nth-child(2){text-align:left}
table.rank td{padding:9px 4px;text-align:right;border-top:1px solid #1b2647}
table.rank td.pos{width:28px;text-align:center;font-weight:800;color:var(--muted)}
table.rank tr.q td.pos{color:var(--gold)}
table.rank tr.cut td{border-bottom:2px dashed var(--gold2)}
table.rank tr.mine td{background:#1a2650}
table.rank td.pts{font-weight:800;color:var(--gold)}
.medal{display:inline-block;width:22px;height:22px;border-radius:50%;line-height:22px;color:#1a1300;font-size:12px}
.m1{background:#f2c14e}.m2{background:#c9d1e3}.m3{background:#d08b52}
select.field{appearance:none;margin:0 0 12px}
.hist{font-size:14px;border-top:1px solid #1b2647;padding:10px 0;display:flex;gap:8px;align-items:center}
.hist .t{flex:1}
.hist .w{color:var(--gold);font-weight:700}
.tag{font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:2px 6px;border-radius:6px;background:#26335e;color:var(--muted)}

/* Salon */
.seats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px}
.seat{border-radius:14px;padding:12px;min-height:84px;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.seat.A{background:linear-gradient(160deg,#16306b,#0f1f47);border:1px solid #2c4ea0}
.seat.B{background:linear-gradient(160deg,#5b1530,#3a0d1f);border:1px solid #8c2a4c}
.seat .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.seat .nm{font-weight:800;font-size:16px}
.seat .acts{display:flex;gap:6px;flex-wrap:wrap}
.seat .acts button{background:rgba(255,255,255,.12);padding:6px 9px;border-radius:8px;font-size:12px;font-weight:600}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#555;margin-right:6px;vertical-align:middle}
.dot.on{background:var(--ok)}
.codebig{font-size:34px;font-weight:900;letter-spacing:.3em;color:var(--gold);text-align:center;margin:4px 0}

/* Table de jeu */
.game{position:fixed;inset:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 42%,var(--felt) 0%,var(--felt2) 62%,#06261d 100%);overflow:hidden}
.hud{display:flex;align-items:stretch;gap:6px;padding:calc(8px + var(--safe-t)) 8px 6px;background:rgba(5,10,24,.72);backdrop-filter:blur(6px)}
.score{flex:1;border-radius:12px;padding:6px 8px;text-align:center;position:relative}
.score.A{background:rgba(29,63,140,.7)} .score.B{background:rgba(120,25,60,.7)}
.score .who{font-size:10px;text-transform:uppercase;letter-spacing:.1em;opacity:.8}
.score .pts{font-size:22px;font-weight:900;line-height:1.1}
.score .man{position:absolute;top:5px;right:7px;display:flex;gap:3px}
.score .man i{width:7px;height:7px;border-radius:50%;border:1px solid rgba(255,255,255,.6)}
.score .man i.w{background:var(--gold);border-color:var(--gold)}
.hudmid{width:66px;text-align:center;display:flex;flex-direction:column;justify-content:center;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hudmid .tr{font-size:26px;line-height:1}
.hudmid button{background:none;color:var(--muted);font-size:10px;padding:2px;text-decoration:underline}
.board{flex:1;position:relative}
.p{position:absolute;text-align:center;font-size:13px;font-weight:700;max-width:110px}
.p .n{background:rgba(0,0,0,.38);padding:4px 9px;border-radius:999px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;border:2px solid transparent}
.p.turn .n{border-color:var(--gold);box-shadow:0 0 14px rgba(242,193,78,.7)}
.p.off .n{opacity:.5}
.p .badges{margin-top:3px;display:flex;gap:4px;justify-content:center}
.p .b{font-size:10px;font-weight:800;padding:1px 6px;border-radius:6px;background:#fff;color:#111}
.p .b.take{background:var(--gold)}
.p .backs{display:flex;justify-content:center;margin-top:4px}
.p .backs i{width:14px;height:20px;border-radius:3px;background:repeating-linear-gradient(45deg,#1f3a7a 0 3px,#14295a 3px 6px);border:1px solid #9fb3e6;margin-left:-7px}
.p .backs i:first-child{margin-left:0}
.p.top{top:8px;left:50%;transform:translateX(-50%)}
.p.left{left:6px;top:42%;transform:translateY(-50%)}
.p.right{right:6px;top:42%;transform:translateY(-50%)}
.p.bottom{bottom:6px;left:50%;transform:translateX(-50%)}
.trick{position:absolute;left:50%;top:44%;width:0;height:0}
.trick .c{position:absolute;transition:transform .25s}
.trick .pos0{transform:translate(-50%,8%)}
.trick .pos1{transform:translate(18%,-50%) rotate(8deg)}
.trick .pos2{transform:translate(-50%,-108%)}
.trick .pos3{transform:translate(-118%,-50%) rotate(-8deg)}
.trick .win{box-shadow:0 0 0 3px var(--gold),0 6px 18px rgba(0,0,0,.4)}
.center-msg{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center;width:86%;max-width:340px}
.flash{position:absolute;left:50%;top:14%;transform:translateX(-50%);background:rgba(0,0,0,.6);padding:7px 14px;border-radius:999px;font-weight:700;font-size:14px;white-space:nowrap;animation:pop .3s}
@keyframes pop{from{transform:translate(-50%,6px);opacity:0}}

/* Cartes */
.c{width:60px;height:86px;border-radius:9px;background:#fdfdfb;color:#14161f;position:relative;box-shadow:0 3px 10px rgba(0,0,0,.35);user-select:none;flex:none}
.c.red{color:var(--red)}
.c .r{position:absolute;top:4px;left:6px;font-weight:900;font-size:19px;line-height:1;letter-spacing:-.04em}
.c .s{position:absolute;top:24px;left:6px;font-size:15px;line-height:1}
.c .big{position:absolute;right:6px;bottom:4px;font-size:32px;line-height:1}
.c.fig .big{font-size:24px;font-weight:900;right:8px;bottom:8px}
.c.trumpc{background:linear-gradient(#fffaf0,#fff2cf)}
.hand{display:flex;justify-content:center;padding:10px 6px calc(12px + var(--safe-b));background:linear-gradient(transparent,rgba(0,0,0,.35));min-height:120px;align-items:flex-end}
.hand .c{margin-left:-14px;transition:transform .15s,opacity .15s}
.hand .c:first-child{margin-left:0}
.hand .c.no{filter:brightness(.55)}
.hand .c.ok{cursor:pointer}
.hand .c.sel{transform:translateY(-22px)}
@media (min-width:420px){ .c{width:66px;height:94px} .hand .c{margin-left:-10px} }
@media (max-width:360px){ .c{width:54px;height:78px} .hand .c{margin-left:-17px} .c .big{font-size:27px} }

.panel{background:rgba(6,12,28,.92);border:1px solid var(--line);border-radius:18px;padding:14px;text-align:center}
.panel .q{font-weight:700;margin-bottom:10px}
.panel .btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.panel .btns button{padding:12px 16px;border-radius:12px;font-weight:800;background:#26335e;min-width:64px;font-size:16px}
.panel .btns button.go{background:var(--gold);color:#1a1300}
.panel .btns button.suit{font-size:26px;background:#fff;color:#111;padding:6px 14px}
.panel .btns button.suit.red{color:var(--red)}
.turned{display:flex;justify-content:center;margin:6px 0 10px}

.overlay{position:fixed;inset:0;background:rgba(3,6,15,.78);display:flex;align-items:center;justify-content:center;z-index:20;padding:20px}
.overlay .panel{width:100%;max-width:360px}
.res{width:100%;border-collapse:collapse;margin:8px 0;font-size:15px}
.res td{padding:5px 4px;border-top:1px solid #1b2647}
.res td:not(:first-child){text-align:right;font-weight:700;width:70px}
.res tr.tot td{font-size:18px;color:var(--gold);border-top:2px solid var(--line)}
.outcome{font-size:24px;font-weight:900;margin:2px 0 6px;letter-spacing:.04em}
.outcome.dedans{color:#ff8b8b}.outcome.capot{color:var(--gold)}
.trophy{font-size:54px}

#toast{position:fixed;left:50%;bottom:calc(30px + var(--safe-b));transform:translateX(-50%);background:#2a1620;border:1px solid #8c2a4c;padding:10px 16px;border-radius:12px;font-size:14px;z-index:50;display:none;max-width:90%}
.spacer{height:10px}
.center{text-align:center}
.offline{position:fixed;top:0;left:0;right:0;background:#8c2a4c;text-align:center;font-size:12px;padding:calc(4px + var(--safe-t)) 4px 4px;z-index:60}

/* ===== Décor antillais ===== */
body{background:
  radial-gradient(1200px 500px at 50% -10%, rgba(31,163,192,.18), transparent 60%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='260' viewBox='0 0 220 260'%3E%3Cg fill='%23ffffff' opacity='.035'%3E%3Cpath d='M120 260c-4-60 0-110 14-150l6 2c-13 40-17 88-13 148z'/%3E%3Cpath d='M137 108c-20-22-50-28-78-18 26-2 50 6 70 24zM139 106c6-28-6-56-30-72 16 22 22 46 22 70zM141 107c22-14 52-12 74 4-24-6-48-4-68 8zM140 110c26 2 48 18 58 42-14-18-34-30-56-34zM136 112c-24 6-42 24-48 48 10-20 28-36 50-42z'/%3E%3C/g%3E%3C/svg%3E") right -40px top 40px/220px no-repeat,
  var(--night);
  background-attachment:fixed}
.madras-band{height:8px;border-radius:4px;margin:-6px 0 16px;background:
  repeating-linear-gradient(90deg,#d7263d 0 22px,#f2c14e 22px 30px,#1d8a3a 30px 44px,#f2c14e 44px 48px,#e8762c 48px 64px,#1d4fa3 64px 70px)}
.hero{padding:6px 2px 16px}
.hero-t{font-size:26px;font-weight:800;line-height:1.15}
.hero-t b{color:var(--gold)}
.hero-s{color:var(--muted);margin-top:6px;font-size:14px}

/* Thèmes de table */
.game.t-tapis{background:radial-gradient(ellipse at 50% 42%,#0f5a43 0%,#0a3d2e 62%,#06261d 100%)}
.game.t-madras{background:
  radial-gradient(ellipse at 50% 44%,rgba(0,0,0,.05) 0%,rgba(0,0,0,.45) 75%),
  repeating-linear-gradient(90deg,rgba(242,193,78,.55) 0 16px,transparent 16px 40px,rgba(29,138,58,.6) 40px 52px,transparent 52px 60px,rgba(255,255,255,.18) 60px 63px,transparent 63px 96px),
  repeating-linear-gradient(0deg,rgba(242,193,78,.5) 0 16px,transparent 16px 40px,rgba(29,138,58,.55) 40px 52px,transparent 52px 60px,rgba(255,255,255,.15) 60px 63px,transparent 63px 96px),
  repeating-linear-gradient(45deg,rgba(0,0,0,.08) 0 2px,transparent 2px 6px),
  #b3172f}
.game.t-plage{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 220'%3E%3Cg fill='%23103a2a'%3E%3Cpath d='M70 220c2-62 10-112 30-150l7 3c-18 36-26 86-28 147z'/%3E%3Cpath d='M103 70c-22-20-54-24-82-10 28-4 54 2 76 18zM105 68c4-28-10-54-36-68 18 20 26 44 28 68zM107 70c22-16 54-16 76 0-26-8-50-6-72 6zM106 73c26 0 50 14 62 38-16-18-38-28-60-32zM102 75c-24 8-40 28-44 52 10-22 26-38 48-46z'/%3E%3C/g%3E%3C/svg%3E") left -30px bottom 90px/150px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 220'%3E%3Cg fill='%23103a2a'%3E%3Cpath d='M90 220c-2-62-10-112-30-150l-7 3c18 36 26 86 28 147z'/%3E%3Cpath d='M57 70c22-20 54-24 82-10-28-4-54 2-76 18zM55 68c-4-28 10-54 36-68-18 20-26 44-28 68zM53 70c-22-16-54-16-76 0 26-8 50-6 72 6zM54 73c-26 0-50 14-62 38 16-18 38-28 60-32zM58 75c24 8 40 28 44 52-10-22-26-38-48-46z'/%3E%3C/g%3E%3C/svg%3E") right -40px bottom 130px/120px no-repeat,
  radial-gradient(circle at 82% 10%,rgba(255,236,160,.9) 0 26px,rgba(255,236,160,0) 60px),
  linear-gradient(180deg,#59c7e6 0%,#1fa3c0 26%,#0f7f9e 40%,#43c1c8 46%,#e9d29b 50%,#dcbd80 75%,#c9a466 100%)}
.game.t-lolo{background:
  radial-gradient(ellipse at 50% 44%,rgba(255,220,160,.12),rgba(0,0,0,.5) 80%),
  repeating-linear-gradient(90deg,transparent 0 78px,rgba(0,0,0,.45) 78px 81px),
  repeating-linear-gradient(90deg,#8a5a2e 0 26px,#7d5027 26px 52px,#93633a 52px 81px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 3px,transparent 3px 11px)}
.game.t-carnaval{background:
  radial-gradient(circle at 12% 20%,#f2c14e 0 3px,transparent 4px) 0 0/70px 70px,
  radial-gradient(circle at 60% 70%,#2bd1b0 0 3px,transparent 4px) 0 0/90px 90px,
  radial-gradient(circle at 40% 40%,#ff5d8f 0 2.5px,transparent 3.5px) 0 0/55px 55px,
  radial-gradient(ellipse at 50% 44%,#5b2a86 0%,#3a1660 60%,#1f0b38 100%)}
.game.t-plage .p .n,.game.t-plage .yourturn{background:rgba(0,0,0,.5)}

/* Dos des cartes */
.backs i{}
body.back-madras .p .backs i,.sw.back-madras .prev{background:repeating-linear-gradient(90deg,rgba(242,193,78,.8) 0 3px,transparent 3px 7px),repeating-linear-gradient(0deg,rgba(29,138,58,.8) 0 2px,transparent 2px 6px),#c2182f;border-color:#fff}
body.back-hibiscus .p .backs i,.sw.back-hibiscus .prev{background:radial-gradient(circle at 50% 50%,#ffd0dc 0 2px,#ff5d8f 3px 5px,transparent 6px) 0 0/10px 10px,#c2185b;border-color:#fff}
body.back-lagon .p .backs i,.sw.back-lagon .prev{background:repeating-radial-gradient(circle at 50% 120%,#7fe3e6 0 2px,#1fa3c0 2px 5px);border-color:#fff}
body.back-nuit .p .backs i,.sw.back-nuit .prev{background:repeating-linear-gradient(45deg,#1f3a7a 0 3px,#14295a 3px 6px);border-color:#c9a64a}

/* Style des cartes */
body.face-c4 .c.sD,.face-c4 .c.sD{color:#1d63c9}
body.face-c4 .c.sC,.face-c4 .c.sC{color:#1d8a3a}
body.face-big .c .r{font-size:25px;top:3px;left:5px}
body.face-big .c .s{top:29px;font-size:18px}
body.face-big .c .big{font-size:26px}
.redt{color:#ff5a6e}
.c.mini{width:30px;height:42px;border-radius:5px;margin:0 -4px}
.c.mini .r{font-size:11px;top:2px;left:3px}.c.mini .s{font-size:9px;top:14px;left:3px}.c.mini .big{font-size:14px;right:3px;bottom:2px}
.minis{display:flex;justify-content:center;margin-bottom:6px}

/* Réglages */
.settings{max-height:88vh;overflow:auto;text-align:left}
.settings .q{margin:12px 0 8px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.sw{background:#141f40;border:2px solid transparent;border-radius:12px;padding:6px;font-size:12px;font-weight:700;text-align:center}
.sw.on{border-color:var(--gold)}
.sw .prev{display:block;height:44px;border-radius:8px;margin-bottom:5px;border:1px solid rgba(255,255,255,.3)}
.sw.table-madras .prev{background:repeating-linear-gradient(90deg,rgba(242,193,78,.6) 0 6px,transparent 6px 14px,rgba(29,138,58,.6) 14px 18px,transparent 18px 26px),repeating-linear-gradient(0deg,rgba(242,193,78,.55) 0 6px,transparent 6px 14px,rgba(29,138,58,.55) 14px 18px,transparent 18px 26px),#b3172f}
.sw.table-plage .prev{background:linear-gradient(180deg,#59c7e6,#1fa3c0 45%,#e9d29b 55%,#c9a466)}
.sw.table-lolo .prev{background:repeating-linear-gradient(90deg,#8a5a2e 0 12px,#7d5027 12px 24px,rgba(0,0,0,.5) 24px 25px)}
.sw.table-carnaval .prev{background:radial-gradient(circle,#f2c14e 0 2px,transparent 3px) 0 0/12px 12px,#4a1f72}
.sw.table-tapis .prev{background:radial-gradient(#0f5a43,#06261d)}
.sw[class*="back-"] .prev{width:32px;height:46px;margin:0 auto 5px}
.tgl{display:flex;gap:8px;align-items:center;margin:14px 0;font-size:14px}
.tgl input{width:20px;height:20px}

/* Barre média + chat */
.mbar{display:flex;gap:6px;justify-content:center;padding:4px 8px}
.mbar.lobby{margin-bottom:14px}
.mb{position:relative;background:rgba(5,10,24,.6);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:5px 9px;font-size:17px;display:flex;flex-direction:column;align-items:center;min-width:48px}
.mb small{font-size:9px;opacity:.75;margin-top:1px}
.mb.on{background:var(--ok);border-color:var(--ok)}
.mbar.lobby .mb{flex:1;padding:10px;background:var(--night2)}
.badge{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;font-size:11px;font-weight:800;border-radius:999px;min-width:18px;height:18px;line-height:18px;display:none;padding:0 4px}
#chat{position:fixed;left:0;right:0;bottom:0;height:62vh;background:#0b1226f2;border-top:2px solid var(--gold2);border-radius:18px 18px 0 0;z-index:40;display:flex;flex-direction:column;transform:translateY(105%);visibility:hidden;transition:transform .25s,visibility .25s;padding-bottom:var(--safe-b);max-width:560px;margin:0 auto}
#chat.open{transform:none;visibility:visible}
.chat-h{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.chat-h button{background:none;color:var(--muted)}
.chat-l{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.msg{background:#16214a;padding:7px 11px;border-radius:12px;max-width:82%;align-self:flex-start;font-size:15px;word-wrap:break-word}
.msg.mine{align-self:flex-end;background:#2a3f86}
.msg .who{display:block;font-size:11px;color:var(--gold);font-weight:700}
.quick{display:flex;gap:6px;overflow-x:auto;padding:6px 10px}
.quick button{white-space:nowrap;background:#16214a;border-radius:999px;padding:6px 10px;font-size:13px}
#chatForm{display:flex;gap:8px;padding:8px 10px 10px}
#chatForm input{flex:1;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:#0a1020;color:var(--text);font-size:16px}
#chatForm button{background:var(--gold);color:#1a1300;font-weight:800;border-radius:12px;padding:0 14px}
.bubble{position:fixed;top:calc(70px + var(--safe-t));left:50%;transform:translateX(-50%);background:#16214af2;border:1px solid var(--line);padding:8px 14px;border-radius:14px;z-index:45;max-width:86%;font-size:14px;animation:pop .3s}
.bubble b{color:var(--gold)}
.vslot video{width:78px;height:58px;object-fit:cover;border-radius:10px;border:2px solid rgba(255,255,255,.6);margin-top:4px;background:#000;display:block;margin-left:auto;margin-right:auto}
.vslot video.me{transform:scaleX(-1)}
.p.bottom .vslot{position:absolute;right:-90px;bottom:0}
.seat .vslot video{width:100%;height:auto;aspect-ratio:4/3}
.yourturn{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);background:rgba(242,193,78,.92);color:#1a1300;font-weight:800;padding:5px 12px;border-radius:999px;font-size:13px;white-space:nowrap}
.litige{position:absolute;right:8px;bottom:8px;font-size:11px;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:8px}

.tname{font-size:28px;font-weight:900;color:var(--gold);margin:4px 0 12px;word-break:break-word}

/* ===== v2 : grandes cartes dessinées, menu masquable, dernier pli, score en direct ===== */
.game{--cw:min(25vw,112px)}
@media (orientation:landscape){ .game{--cw:min(22vh,104px)} }
.c{width:var(--cw);height:calc(var(--cw)*1.4);border-radius:calc(var(--cw)*.08);background:#fdfdfb;padding:0;overflow:hidden}
.c svg{display:block;width:100%;height:100%}
.c.trumpc{background:linear-gradient(#fffaf0,#fff0c4)}
.hand{padding:8px 8px calc(10px + var(--safe-b));min-height:calc(var(--cw)*1.4 + 20px)}
.hand .c{margin-left:min(3px,calc((100vw - 16px - var(--n)*var(--cw)) / (var(--n) - 1)))}
.hand .c:first-child{margin-left:0}
.hand .c.sel{transform:translateY(-18%)}
.trick .c{width:calc(var(--cw)*.82);height:calc(var(--cw)*1.15)}
.turned .c{width:calc(var(--cw)*.9);height:calc(var(--cw)*1.26)}
.c.med{width:64px;height:90px}
.c.mini{width:30px;height:42px;border-radius:4px;margin:0 -3px;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.minis{display:flex;justify-content:center;margin-bottom:6px}
.trick .pos0{transform:translate(-50%,6%)}
.trick .pos2{transform:translate(-50%,-106%)}
.trick .pos1{transform:translate(12%,-50%) rotate(7deg)}
.trick .pos3{transform:translate(-112%,-50%) rotate(-7deg)}

/* dernier pli sur le côté */
.lastbox{position:absolute;left:6px;bottom:8px;background:rgba(0,0,0,.42);border-radius:12px;padding:4px 6px 6px;z-index:3}
.lastbox .lbl{font-size:9px;text-transform:uppercase;letter-spacing:.08em;text-align:center;opacity:.8;margin-bottom:2px}
.lastbox .lt{position:relative;width:74px;height:78px}
.lastbox .c.mini{position:absolute;margin:0}
.lastbox .lp0{left:22px;top:34px}.lastbox .lp2{left:22px;top:0}.lastbox .lp1{left:44px;top:17px}.lastbox .lp3{left:0;top:17px}
.lastbox .c.mini.win{box-shadow:0 0 0 2px var(--gold)}

/* score en direct */
.score{padding:5px 8px 4px}
.score .donne{font-size:10px;opacity:.85;white-space:nowrap}
.score,.hudmid{cursor:pointer}

/* menu déroulant */
.gmenu{position:absolute;right:8px;bottom:8px;z-index:6;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:6px}
.gm-toggle{position:relative;width:46px;height:46px;border-radius:50%;background:rgba(5,10,24,.75);border:1px solid rgba(255,255,255,.25);font-size:21px}
.gm-list{display:flex;flex-direction:column;gap:5px;background:rgba(6,12,28,.94);border:1px solid var(--line);border-radius:14px;padding:7px;animation:pop .15s}
.gm-list button{text-align:left;padding:10px 12px;border-radius:9px;background:#141f40;font-weight:600;font-size:14px;white-space:nowrap}
.gm-list button.on{background:var(--ok)}
.gm-list .cnt{background:var(--red);border-radius:999px;padding:0 6px;font-size:11px}

/* bulles de chat à côté des joueurs */
.say{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;background:#fff;color:#111;padding:6px 10px;border-radius:14px;font-size:13px;font-weight:600;max-width:170px;width:max-content;white-space:normal;z-index:8;animation:pop .2s;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.say:after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#fff}
.p.top .say{bottom:auto;top:100%;margin:6px 0 0}
.p.top .say:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#fff}
.p.left .say{left:0;transform:none}.p.right .say{left:auto;right:0;transform:none}

/* chat : emojis + phrases perso */
.emojis{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:2px;padding:4px 10px;max-height:120px;overflow:auto}
.emojis button{background:none;font-size:24px;padding:4px}
.emo{background:#16214a!important;color:inherit!important;font-size:20px;padding:0 10px!important}
.quick .mine-q{background:#3a2a10;border:1px solid var(--gold2)}
.quick .add{background:none;border:1px dashed var(--muted);color:var(--muted)}
.quick .del{margin-left:6px;color:#ff8b8b}

/* feuille de marque */
.sheet{max-width:440px!important}
.sheet-scroll{max-height:55vh;overflow:auto}
.sheet .res td{font-size:13px;padding:5px 3px}
.sheet .res small{color:#ff8b8b}
.sheet .res tr.cur td{color:var(--gold)}

/* paysage */
@media (orientation:landscape) and (max-height:500px){
  .hud{padding:calc(4px + var(--safe-t)) 60px 4px;gap:8px}
  .score .pts{font-size:18px}.score .who{display:inline;margin-right:6px}
  .hudmid .tr{font-size:20px}
  .p.top{top:2px}.p .backs i{width:11px;height:16px}
  .p .n{font-size:12px;padding:3px 8px}
  .trick{top:46%}
  #chat{left:auto;right:0;width:min(420px,60vw);height:100%;border-radius:18px 0 0 18px}
  .vslot video{width:64px;height:48px}
}
.p{z-index:4}
.trick{z-index:2}
.sheet .res td{width:auto!important}
.sheet .res td.tk{text-align:left!important}
.sheet .res small{display:block}
@media (orientation:landscape) and (max-height:500px){
  .game{--cw:min(19vh,96px)}
  .score{display:flex;align-items:center;justify-content:center;gap:10px;padding:4px 10px}
  .score .who{font-size:11px}.score .pts{font-size:20px}
  .score .man{position:static}
  .hudmid{flex-direction:row;gap:8px;width:auto;align-items:center}
  .trick .c{width:calc(var(--cw)*.62);height:calc(var(--cw)*.87)}
  .trick{top:47%}
  .hand{min-height:0;height:calc(var(--cw)*1.02);padding-top:4px;align-items:flex-start;overflow:visible}
  .flash{top:4px;font-size:12px;padding:4px 10px}
  .lastbox{bottom:4px}.gmenu{bottom:4px}
  .center-msg .panel{padding:8px}
  .turned .c{width:calc(var(--cw)*.6);height:calc(var(--cw)*.84)}
}
@media (orientation:landscape) and (max-height:500px){ .flash{top:8px;left:auto;right:90px;transform:none} }

/* ===== Avatars ===== */
svg.avatar{border-radius:50%;flex:none;display:inline-block;vertical-align:middle;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.brand .me{display:flex;gap:8px;align-items:center}
.meav{background:none;padding:0;border-radius:50%}
.seat .nm{display:flex;align-items:center;gap:6px}
.seat .nm .dot{margin-right:0}
.p .pav{display:flex;justify-content:center;margin-bottom:3px}
.p .pav svg{border:2px solid rgba(255,255,255,.85)}
.p.turn .pav svg{border-color:var(--gold);box-shadow:0 0 12px rgba(242,193,78,.8)}
.p.bottom .pav{position:absolute;left:-52px;bottom:0}
table.rank td.who{display:flex;align-items:center;gap:8px}
.msgw{display:flex;gap:6px;align-items:flex-end;max-width:88%}
.msgw .msg{max-width:none}
.msgw.mine{align-self:flex-end;flex-direction:row-reverse}
.msgw.mine .msg{background:#2a3f86}
.msgw:not(.mine){align-self:flex-start}
.aved{max-height:92vh;overflow:auto}
.av-prev{display:flex;justify-content:center;margin:4px 0 10px}
.av-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}
.av-tabs button{white-space:nowrap;background:#141f40;padding:7px 11px;border-radius:999px;font-size:13px;font-weight:700;color:var(--muted)}
.av-tabs button.on{background:var(--gold);color:#1a1300}
.av-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;max-height:38vh;overflow:auto;margin-bottom:12px}
.av-opts.colors{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
.avo{background:#141f40;border:2px solid transparent;border-radius:12px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600}
.avo.on,.avc.on{border-color:var(--gold)}
.avc{height:44px;border-radius:50%;border:3px solid transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.linkbtn{background:none;color:var(--muted);text-decoration:underline;margin-top:8px;font-size:13px}
@media (orientation:landscape) and (max-height:500px){ .p .pav svg{width:34px;height:34px} .p.top .pav{display:none} }

.install{margin-top:4px}
.panel.tuto{max-width:420px!important;padding:10px}
.panel.tuto video{width:100%;max-height:72vh;border-radius:12px;background:#000;display:block;margin-bottom:10px}

.support{text-align:center;font-size:13px;color:var(--muted);margin-top:18px}
.support a{color:var(--gold)}