:root{--bg:#2b1810;--bg2:#4a2c1a;--cream:#f6ead3;--gold:#e8b04a;--teal:#2bb5a0;--felt:#1d5c46;--cw:52px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:radial-gradient(circle at 50% 0,var(--bg2),var(--bg));color:var(--cream);font-family:system-ui,'Segoe UI',Tahoma,Arial,sans-serif;overflow:hidden;touch-action:manipulation}
#app{height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button{font:inherit;color:inherit;cursor:pointer}

/* ---------- Accueil ---------- */
.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:16px;text-align:center}
.logo{width:min(46vw,190px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:4px solid var(--gold);box-shadow:0 8px 24px #0009;background:#3b2418;display:grid;place-items:center}
.logo img{width:100%;height:100%;object-fit:cover}
.logo-fallback{display:none;font-size:80px;place-items:center}
h1{margin:0;font-size:clamp(22px,6vw,32px);color:var(--gold)}
.langs{display:flex;gap:14px;direction:ltr}
.modes{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.circle{border:0;border-radius:50%;color:#fff;font-weight:800;display:grid;place-items:center;box-shadow:0 6px 0 #150a05,inset 0 3px 6px #ffffff40,0 10px 18px #0008;transition:transform .08s}
.circle:active{transform:translateY(4px);box-shadow:0 2px 0 #150a05,inset 0 3px 6px #ffffff40}
.circle.sm{width:56px;height:56px;font-size:18px;background:radial-gradient(circle at 30% 25%,#7a5336,#3b2418)}
.circle.sm.on{background:radial-gradient(circle at 30% 25%,#ffd986,#c98a1b);color:#3b2418}
.circle.lg{width:min(38vw,150px);height:min(38vw,150px);font-size:20px;align-content:center;gap:6px}
.circle.lg span{font-size:38px}
.circle.online{background:radial-gradient(circle at 30% 25%,#62e3ce,#168a78)}
.circle.offline{background:radial-gradient(circle at 30% 25%,#ffb36a,#d0592a)}

/* ---------- Hub ---------- */
.hub{flex:1;display:flex;flex-direction:column;padding:12px}
.hubbar{display:flex;align-items:center;gap:10px}
.hubbar h2{margin:0;flex:1;text-align:center;color:var(--gold)}
.icon{background:#00000040;border:0;border-radius:12px;width:42px;height:42px;font-size:20px}
.badge{width:42px;text-align:center;font-size:22px}
.tiles{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px 4px;align-content:center}
.tile{aspect-ratio:1;border:0;border-radius:24px;background:linear-gradient(160deg,#8a5a37,#4a2c1a);box-shadow:0 6px 0 #150a05,0 12px 20px #0008,inset 0 2px 4px #ffffff30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:20px;position:relative}
.tile .ic{font-size:clamp(40px,14vw,64px)}
.tile.soon{opacity:.45;filter:grayscale(.5);cursor:default}
.tile small{position:absolute;top:8px;inset-inline-end:10px;background:var(--gold);color:#3b2418;border-radius:10px;padding:2px 8px;font-size:12px;font-weight:700}
.tile:not(.soon):active{transform:translateY(4px)}

/* ---------- Partie ---------- */
.game{flex:1;display:flex;flex-direction:column;min-height:0;direction:ltr}
.gbar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#00000040}
.gbar .score{flex:1;text-align:center;font-size:15px}
.gbar .info{font-size:12px;opacity:.85;white-space:nowrap}
.board{flex:1;min-height:0;display:grid;gap:6px;padding:6px;
  grid-template-areas:"top top top" "left center right" "me me me";grid-template-columns:62px minmax(0,1fr) 62px;grid-template-rows:auto 1fr auto}
.board.n2{grid-template-areas:"top" "center" "me";grid-template-columns:minmax(0,1fr)}
.top{grid-area:top}.left{grid-area:left}.right{grid-area:right}.center{grid-area:center}.me{grid-area:me}
.seat{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px;border-radius:12px;border:2px solid transparent;position:relative}
.seat.active{border-color:var(--gold);background:#e8b04a1c}
.seat.ally .nm::after{content:' 🤝'}
.nm{font-size:12px;font-weight:700}
.cnt{font-size:11px;opacity:.8}
.backs{display:flex;direction:ltr}
.backs .card{margin-inline-start:-18px}.backs .card:first-child{margin-inline-start:0}
.backs.col{flex-direction:column}
.backs.col .card{margin-inline-start:0;margin-top:-34px}.backs.col .card:first-child{margin-top:0}
.center{background:radial-gradient(circle,#2a7a5e,var(--felt));border-radius:20px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:auto;box-shadow:inset 0 0 30px #0008}
.tablecards{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-content:center;--cw:44px}
.empty{opacity:.6;font-size:14px}
.msg{min-height:20px;font-size:13px;text-align:center;color:#ffe9b8;direction:ltr}
.hint{font-size:12px;min-height:16px;color:var(--gold)}
.me{padding-bottom:10px}
.hand{display:flex;gap:6px;justify-content:center;max-width:100%;padding:8px 6px 4px}
.hand.uno{justify-content:flex-start;overflow-x:auto}
.hand.uno .card{margin-inline-end:-14px}
.hand.uno .card:first-child{margin-inline-start:auto}
.hand.uno::after{content:'';margin-inline-end:auto}
.piles{display:flex;gap:18px;align-items:center}
.pile{position:relative;cursor:pointer}
.pile .pcount{position:absolute;bottom:-6px;right:-6px;background:#000a;border-radius:10px;padding:1px 7px;font-size:12px}
.dot{width:26px;height:26px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 8px #000a}

/* ---------- Cartes (rendu réaliste) ---------- */
.card{position:relative;width:var(--cw);height:calc(var(--cw)*1.45);border-radius:calc(var(--cw)*.11);background:linear-gradient(160deg,#fff 0%,#f5f0e2 100%);color:#1a1a1a;border:1px solid #cfc8b4;box-shadow:0 1px 0 #fff8 inset,0 3px 8px #000a;user-select:none;direction:ltr;flex:0 0 auto;transition:transform .12s;transform:rotate(var(--rot,0deg))}
.card.red{color:#c8262b}
.card.sel{outline:3px solid var(--gold);transform:rotate(var(--rot,0deg)) translateY(-10px)}
.card.fresh{animation:drop .35s ease-out}
@keyframes drop{from{transform:scale(1.4) rotate(-10deg);opacity:.2}}
/* cartes à points (chkobba) */
.pc .ix{position:absolute;left:7%;top:4%;display:flex;flex-direction:column;align-items:center;line-height:.95;font-size:calc(var(--cw)*.22);z-index:2}
.pc .ix b{font-weight:800}.pc .ix i{font-style:normal;font-size:.95em}
.pc .ix.br{left:auto;right:7%;top:auto;bottom:4%;transform:rotate(180deg)}
.pc .pips{position:absolute;left:12%;right:12%;top:10%;bottom:10%}
.pc .pip{position:absolute;transform:translate(-50%,-50%);font-style:normal;font-size:calc(var(--cw)*.27);line-height:1}
.pc .pip.fl{transform:translate(-50%,-50%) rotate(180deg)}
.pc .pip.big{font-size:calc(var(--cw)*.7)}
.pc .face{position:absolute;left:19%;right:19%;top:15%;bottom:15%;background:#fbf1d3;border:1px solid #c9a24a;border-radius:3px;overflow:hidden}
.pc .face svg{width:100%;height:100%;display:block}
/* dos de carte */
.card.back{background:#fff;border:1px solid #cfc8b4}
.card.back::before{content:'';position:absolute;inset:6%;border-radius:calc(var(--cw)*.07);background:repeating-linear-gradient(45deg,#7a1f1f 0 4px,#a82f2f 4px 8px);box-shadow:inset 0 0 0 2px #fff6}
.card.back .bk{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cw)*.42);color:#fffc;text-shadow:0 1px 3px #0008}
.card.back.ub{background:#fff;border:calc(var(--cw)*.05) solid #fff}
.card.back.ub::before{inset:0;border-radius:calc(var(--cw)*.08);background:#141414;box-shadow:none}
.card.back.ub::after{content:'';position:absolute;left:12%;right:12%;top:20%;bottom:20%;border-radius:50%;background:#d6453d;transform:rotate(-28deg)}
.card.back.ub .bk{z-index:1;color:#ffd53d;font-weight:900;font-style:italic}
.card.small{--cw:30px}
/* cartes UNO */
.card.uno{border:calc(var(--cw)*.07) solid #fff;background:var(--uc);box-shadow:0 3px 8px #000a}
.cR{--uc:#d6453d}.cY{--uc:#f2b81c}.cG{--uc:#2f9e5b}.cB{--uc:#2f6fd1}.cW{--uc:#161616}
.uno .oval{position:absolute;left:10%;right:10%;top:12%;bottom:12%;border-radius:50%;background:#fff;transform:rotate(-28deg);box-shadow:inset 0 0 0 1px #0002}
.uno.cW .oval{background:conic-gradient(from 20deg,#d6453d 0 25%,#f2b81c 0 50%,#2f9e5b 0 75%,#2f6fd1 0)}
.uno .big{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cw)*.56);font-weight:900;font-style:italic;color:var(--uc);-webkit-text-stroke:1px #0004;text-shadow:calc(var(--cw)*.03) calc(var(--cw)*.03) 0 #0004;line-height:1}
.uno.cW .big{color:#fff;-webkit-text-stroke:1.5px #000;font-size:calc(var(--cw)*.5)}
.uno .cn{position:absolute;color:#fff;font-size:calc(var(--cw)*.2);font-weight:800;font-style:italic;text-shadow:1px 1px 0 #0006;line-height:1}
.uno .cn.tl{left:9%;top:5%}.uno .cn.br{right:9%;bottom:5%;transform:rotate(180deg)}
.hand .card{--cw:64px}
.hand.uno .card{--cw:58px;transform:none}
.hand.uno .card.ok{transform:translateY(-10px);box-shadow:0 0 0 3px var(--gold),0 6px 10px #0009}
.hand.uno .card.no{filter:brightness(.55)}
.center .card{--cw:56px}
.tablecards .card{--cw:50px}
.backs .card{--cw:30px}

/* ---------- Fenêtres ---------- */
#ov:empty{display:none}
#ov{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;padding:14px;z-index:10}
.sheet{background:linear-gradient(160deg,#4a2c1a,#2b1810);border:2px solid var(--gold);border-radius:20px;padding:18px;width:min(380px,94vw);max-height:92dvh;overflow:auto;box-shadow:0 14px 40px #000c}
.sheet.center{text-align:center}
.sheet h2{margin:0 0 10px;color:var(--gold);text-align:center}
.sheet p{margin:6px 0}
.note{font-size:13px;opacity:.8;text-align:center}
.row{display:flex;gap:10px;justify-content:center;margin-top:14px}
.btn{border:0;border-radius:14px;padding:11px 20px;font-weight:800;background:linear-gradient(#ffd986,#c98a1b);color:#3b2418;box-shadow:0 4px 0 #6b4510}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #6b4510}
.btn.ghost{background:#ffffff1f;color:var(--cream);box-shadow:none}
.chips{display:flex;gap:10px;justify-content:center;margin:10px 0}
.chip{width:54px;height:54px;border-radius:50%;border:2px solid var(--gold);background:transparent;font-size:20px;font-weight:800}
.chip.on{background:var(--gold);color:#3b2418}
.res{width:100%;border-collapse:collapse;font-size:14px}
.res th,.res td{padding:6px 4px;border-bottom:1px solid #ffffff22;text-align:center}
.res td:first-child{text-align:start}
.res .tot td{font-weight:800;color:var(--gold)}
.spinner{font-size:48px;animation:spin 1.4s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.count{font-size:54px;font-weight:900;color:var(--gold);line-height:1.1}
.colors{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.swatch{height:70px;border-radius:16px;border:3px solid #fff;box-shadow:0 4px 0 #0007}
@media (max-height:640px){.hand .card{--cw:54px}.hand.uno .card{--cw:50px}.tablecards .card{--cw:42px}.center .card{--cw:48px}}

/* ---------- Choix du mode + sièges en ligne ---------- */
.modesw{display:flex;gap:12px;justify-content:center;margin:4px 0 10px}
.mbtn{flex:1;border:2px solid #ffffff30;border-radius:16px;background:#ffffff12;padding:10px 6px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:4px}
.mbtn span{font-size:26px}
.mbtn.on{border-color:var(--gold);background:#e8b04a2e}
.slots{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.slot{min-width:64px;padding:8px 10px;border-radius:14px;background:#ffffff14;border:2px dashed #ffffff40;font-weight:700;display:flex;flex-direction:column;align-items:center}
.slot.me{border:2px solid var(--teal);background:#2bb5a022}
.slot.bot{border:2px solid var(--gold);background:#e8b04a22}
.slot small{font-size:11px;opacity:.85}
.uno-btn{background:linear-gradient(#ff7a6e,#c8262b);color:#fff;font-size:20px;box-shadow:0 4px 0 #6b1414;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}

/* ---------- Belote ---------- */
.trick{display:grid;grid-template-areas:". t ." "l . r" ". b .";grid-template-columns:repeat(3,auto);gap:4px 14px;justify-items:center;align-items:center;min-height:200px}
.trick .t{grid-area:t}.trick .l{grid-area:l}.trick .r{grid-area:r}.trick .b{grid-area:b}
.trick>div{min-width:46px;min-height:67px}
.trick .card{--cw:46px}
.card.win{outline:3px solid var(--gold);box-shadow:0 0 14px var(--gold)}
.bidbox{display:flex;flex-direction:column;align-items:center;gap:8px}
.bidbox small{opacity:.85}
.bidbox .card{--cw:60px}
.acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:4px 0}
.suitbtn{width:54px;height:54px;border-radius:14px;border:2px solid var(--gold);background:#fffdf6;color:#222;font-size:30px;line-height:1;box-shadow:0 4px 0 #6b4510}
.suitbtn.red{color:#c8262b}
.suitbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #6b4510}
.rd{color:#ff8a80}

/* ---------- Rami ---------- */
.rcenter{justify-content:flex-start}
.rcenter .piles{gap:22px;margin-top:2px}
.rcenter .pile .card{--cw:48px}
.pile.hot .card{box-shadow:0 0 0 3px var(--gold),0 0 14px var(--gold)}
.melds{display:flex;flex-direction:column;gap:6px;width:100%;align-items:stretch}
.meld{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:4px 6px;border-radius:10px;background:#00000033;border:2px solid transparent}
.meld.tgt{border-color:var(--gold);cursor:pointer}
.meld small{font-size:10px;opacity:.8;margin-inline-end:4px;width:100%}
.center .melds .card{--cw:36px}
.hand.rh{flex-wrap:wrap;gap:4px;justify-content:center;overflow:visible;padding:6px 2px 2px}
.hand.rh .card{--cw:42px;margin:0;transform:none}
.hand.rh .card.sel{transform:translateY(-8px)}
.staged{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;font-size:12px;margin:2px 0}
.staged .g{display:flex;gap:2px;background:#00000040;border-radius:8px;padding:3px}
.staged .card{--cw:32px}
.btn.sm{padding:8px 14px;font-size:14px;border-radius:12px}
.card.joker{background:linear-gradient(160deg,#fff,#efe3ff);color:#6a2fb8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.card.joker .jk{font-size:calc(var(--cw)*.6);line-height:1}
.card.joker b{font-size:calc(var(--cw)*.17);letter-spacing:.5px}
.hand.uno .card:last-of-type{margin-inline-end:0}

.board>*{min-width:0}

/* ---------- Accueil : façade du café ---------- */
.cafe{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto;background:#1a0e09}
.scene{position:relative;flex:0 0 auto;width:min(100%,calc(44dvh*390/360),520px);aspect-ratio:390/360;margin:0 auto}
.cafe-svg{display:block;width:100%;height:100%}
.chocho{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#2b1810}
.chocho img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chocho .cf{font-size:clamp(28px,11vw,52px)}
.chocho img+.cf{display:none}
.counter{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 16px 22px;text-align:center;background:linear-gradient(#6b3b1d,#3d2212 40%,#2b1810);border-top:6px solid #9a5a2d;box-shadow:0 -6px 18px #0009}
.counter h1{margin:0;font-size:clamp(20px,5.4vw,28px);color:var(--gold);text-shadow:0 2px 0 #0008}
.counter .circle.lg{width:min(30vw,128px);height:min(30vw,128px);font-size:17px}
.counter .circle.lg span{font-size:32px}
.btn.install{background:linear-gradient(#7be3c9,#1d9a86);color:#0b3a31;box-shadow:0 4px 0 #0e5246}
.btn.install.small{align-self:center;margin:6px auto 12px}
.bulb{fill:#ffd25a;filter:drop-shadow(0 0 4px #ffb300);animation:tw 1.8s ease-in-out infinite}
@keyframes tw{50%{opacity:.4}}
.neon{filter:drop-shadow(0 0 3px #ff5d8f);animation:neon 2.4s ease-in-out infinite}
@keyframes neon{0%,100%{opacity:1}45%{opacity:.55}50%{opacity:1}}
.steam{transform-box:fill-box;animation:steam 2.4s ease-in infinite}
.steam.s2{animation-delay:.5s}.steam.s3{animation-delay:1s}
@keyframes steam{0%{transform:translateY(2px);opacity:0}30%{opacity:.9}100%{transform:translateY(-9px);opacity:0}}

/* ---------- Menu : 4 carrés ---------- */
.hubc{flex:1;display:flex;flex-direction:column;padding:12px;overflow-y:auto;background:radial-gradient(circle at 50% 0,#4a2c1a,#2b1810)}
.chalk{margin:12px auto 4px;padding:8px 26px;border-radius:12px;background:#1f3a30;border:4px solid #8a5a30;box-shadow:inset 0 0 14px #0009,0 4px 8px #0008;color:#f1f0e6;font-size:18px;font-weight:700;text-align:center}
.gtiles{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 2px;align-content:center}
.gtile{position:relative;aspect-ratio:1;border:0;padding:0;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(circle at 50% 35%,#2f8a66,#17513c);border:4px solid #9a5a2d;box-shadow:0 6px 0 #150a05,0 12px 20px #0009,inset 0 0 22px #0007}
.gtile:active{transform:translateY(4px);box-shadow:0 2px 0 #150a05,0 6px 12px #0009,inset 0 0 22px #0007}
.fan{position:relative;flex:1}
.fan .card{--cw:min(15vw,60px);position:absolute;left:50%;bottom:6%;margin-left:calc(var(--cw)/-2);transform-origin:50% 150%;box-shadow:0 3px 8px #000b}
.fan .card:nth-child(1){transform:translateX(calc(var(--cw)*-.5)) rotate(-18deg)}
.fan .card:nth-child(2){transform:rotate(0deg);z-index:2}
.fan .card:nth-child(3){transform:translateX(calc(var(--cw)*.5)) rotate(18deg);z-index:1}
.ribbon{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;padding:6px 4px 7px;background:linear-gradient(#d23a3a,#9c1f23);border-top:3px solid #ffd98a;color:#fff7e0}
.ribbon b{font-size:clamp(16px,4.6vw,20px);line-height:1.15;text-shadow:0 1px 2px #0008}
.ribbon small{font-size:11px;opacity:.9}

/* ---------- Aide installation ---------- */
.steps{margin:8px 0;padding-inline-start:22px;line-height:1.7}
.steps li{margin-bottom:6px}

/* ajustements menu */
.hubc{justify-content:flex-start}
.chalk{margin-top:20px}
.gtiles{flex:0 0 auto;padding:18px 2px 8px}
.btn.install.small{margin-top:auto}
.fan .card{--cw:min(13.5vw,54px)}
.fan .card:nth-child(1){transform:translateX(calc(var(--cw)*-.42)) rotate(-14deg)}
.fan .card:nth-child(3){transform:translateX(calc(var(--cw)*.42)) rotate(14deg)}