:root{--bg:#06121f;--bg2:#0b2238;--gold:#ffd27a;--gold2:#ffb340;--ink:#fff;--mut:#9fb7cc;--glass:rgba(255,255,255,.08);--line:rgba(255,255,255,.14);--r:22px;--f:'Lilita One',system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Nunito,system-ui,sans-serif;font-weight:800;overflow:hidden;touch-action:manipulation}
body{background:radial-gradient(120% 70% at 50% 0%,#14456b 0%,#0a2740 45%,#06121f 100%)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit}
#app{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;padding:max(14px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom))}
#app::before{content:"";position:fixed;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60'%3E%3Cpath d='M0 30 Q25 18 50 30 T100 30 T150 30 T200 30' fill='none' stroke='%23ffffff' stroke-opacity='.035' stroke-width='2'/%3E%3C/svg%3E");animation:waves 14s linear infinite;z-index:-1}
@keyframes waves{to{background-position:200px 60px}}
.wrap{max-width:560px;margin:0 auto}
h1,h2,h3{font-family:var(--f);font-weight:400;letter-spacing:.5px;margin:.2em 0}
h2{font-size:28px}
.logo{font-family:var(--f);font-size:min(17vw,84px);line-height:.9;text-align:center;background:linear-gradient(180deg,#fff6d6 0%,#ffd27a 45%,#ff9f2e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 0 #7a3d06) drop-shadow(0 14px 20px rgba(0,0,0,.5));margin-top:6vh}
.logo small{display:block;font-size:.42em;letter-spacing:.3em;margin-top:.2em}
.tag{text-align:center;color:var(--mut);margin:14px 0 26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 22px;border-radius:999px;background:linear-gradient(180deg,#ffe08f,#ffb340);color:#4a2400;font-family:var(--f);font-size:21px;box-shadow:0 5px 0 #a8590c,0 12px 24px rgba(0,0,0,.35);transition:transform .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #a8590c}
.btn.ghost{background:var(--glass);color:#fff;box-shadow:inset 0 0 0 2px var(--line)}
.btn.big{font-size:30px;padding:20px 54px}
.btn.wide{width:100%}
.btn.pink{background:linear-gradient(180deg,#ff8cc0,#ff4f9a);color:#fff;box-shadow:0 5px 0 #a1215a}
.btn.blue{background:linear-gradient(180deg,#6fe6ff,#19a8e8);color:#032a3d;box-shadow:0 5px 0 #0b6a96}
.btn.green{background:linear-gradient(180deg,#8ff0a8,#2fc46a);color:#04361a;box-shadow:0 5px 0 #157a3d}
.btn.red{background:linear-gradient(180deg,#ff8f8f,#e8394a);color:#fff;box-shadow:0 5px 0 #8f1622}
.btn:disabled{opacity:.4;pointer-events:none}
.center{text-align:center}.small{font-size:13px;color:var(--mut);font-weight:600}
.row{display:flex;gap:10px;align-items:center}.row.wrap2{flex-wrap:wrap}.grow{flex:1}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:12px 0;backdrop-filter:blur(8px)}
.seg{display:flex;background:rgba(0,0,0,.25);border-radius:999px;padding:4px;gap:4px}
.seg button{flex:1;padding:11px 6px;border-radius:999px;color:var(--mut);font-size:16px}
.seg button.on{background:var(--gold);color:#4a2400}
/* intro */
#intro{position:fixed;inset:0;z-index:50;background:#000;display:none}
#intro.on{display:block}
#intro video{width:100%;height:100%;object-fit:cover}
#skip,#sound{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));padding:10px 16px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:14px;backdrop-filter:blur(6px)}
#skip{right:16px}#sound{left:16px;display:none}
.splash{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:radial-gradient(80% 60% at 50% 40%,#123d5f,#040b14);z-index:60}
.splash .tap{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.07)}}
/* joueurs */
.pl{display:flex;gap:10px;align-items:center;padding:10px;border-radius:18px;background:rgba(0,0,0,.2);margin:8px 0;border:2px solid transparent}
.pl.sel{border-color:var(--c)}
.pl .av{font-size:34px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--c);box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.pl input{flex:1;min-width:0;background:rgba(255,255,255,.1);border:0;border-radius:12px;padding:12px;color:#fff;font-weight:800;font-size:17px;user-select:text;-webkit-user-select:text}
.avs{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:8px}
.avs button{font-size:26px;padding:6px 0;border-radius:12px;background:rgba(255,255,255,.06)}
.avs button.on{background:rgba(255,255,255,.3)}
.team{font-size:12px;padding:3px 8px;border-radius:99px;background:var(--tc);color:#fff;white-space:nowrap}
/* îles */
.isles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.isle{position:relative;border-radius:24px;padding:16px 14px 14px;min-height:150px;text-align:left;overflow:hidden;background:var(--g);box-shadow:0 8px 0 rgba(0,0,0,.25),0 14px 30px rgba(0,0,0,.3);transition:transform .1s}
.isle:active{transform:scale(.97)}
.isle .e{font-size:44px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.isle b{display:block;font-family:var(--f);font-weight:400;font-size:21px;margin-top:6px;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.isle span{display:block;font-size:12.5px;opacity:.92;margin-top:3px;font-weight:700}
.isle.hero{grid-column:1/-1;min-height:170px}
.isle.hero .e{font-size:58px}
.isle::after{content:"";position:absolute;right:-30px;bottom:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.12)}
.isle .badge{position:absolute;top:12px;right:12px;font-size:11px;background:rgba(0,0,0,.3);padding:4px 8px;border-radius:99px}
.board{display:flex;flex-direction:column;gap:6px}
.brow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:rgba(0,0,0,.22);border-left:6px solid var(--c)}
.brow b{font-family:var(--f);font-weight:400;font-size:22px;margin-left:auto}
.top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.top h2{flex:1;font-size:24px}
.ico{width:44px;height:44px;border-radius:50%;background:var(--glass);display:grid;place-items:center;font-size:20px;box-shadow:inset 0 0 0 1px var(--line)}
/* modale */
.modal{position:fixed;inset:0;z-index:100;background:rgba(2,8,16,.7);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px);animation:fade .2s}
.modal .card{width:100%;max-width:440px;max-height:88vh;overflow:auto;background:linear-gradient(180deg,#173c5c,#0c2135);border:1px solid var(--line);border-radius:26px;padding:22px;box-shadow:0 30px 60px rgba(0,0,0,.5);animation:popin .25s cubic-bezier(.3,1.5,.6,1)}
.modal .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.modal .btns .btn{flex:1;font-size:18px;padding:13px 14px}
.modal.flip .card{transform:rotate(180deg)}
.rules{font-weight:600;line-height:1.45;color:#dce9f4;font-size:15px}.rules b{color:var(--gold)}
.rules li{margin:4px 0}
@keyframes fade{from{opacity:0}}@keyframes popin{from{transform:scale(.8);opacity:0}}
.prow{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:6px 0;border-radius:14px;background:rgba(0,0,0,.25);border-left:6px solid var(--c);font-size:18px}
.prow em{margin-left:auto;font-style:normal;font-family:var(--f);color:var(--gold)}
.toast{position:fixed;left:50%;top:max(14px,env(safe-area-inset-top));transform:translateX(-50%);background:rgba(0,0,0,.75);padding:10px 16px;border-radius:999px;z-index:200;font-size:14px;white-space:nowrap;transition:.4s;backdrop-filter:blur(6px)}
.toast.out{opacity:0;transform:translate(-50%,-20px)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;background:var(--c);color:#fff;font-size:15px}
/* TABLE (téléphone posé au milieu) */
.table{position:fixed;inset:0;z-index:40;background:radial-gradient(70% 50% at 50% 50%,#174a70,#071423);display:grid;touch-action:none}
.corner{position:absolute;width:50%;height:25%;padding:8px;display:flex;flex-direction:column}
.corner .who{font-size:13px;text-align:center;padding:4px;color:#fff;opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.corner .cscore{margin-left:6px;font-family:var(--f);color:var(--gold)}
.corner .cbody{flex:1;display:flex;gap:6px;min-height:0}
.seat-bl{left:0;bottom:0}.seat-br{right:0;bottom:0}.seat-tl{left:0;top:0}.seat-tr{right:0;top:0}
.seat-b{left:0;right:0;bottom:0;width:100%}.seat-t{left:0;right:0;top:0;width:100%}
.flip{transform:rotate(180deg)}
.pad{flex:1;border-radius:22px;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--c) 70%,#fff),var(--c));box-shadow:inset 0 -8px 0 rgba(0,0,0,.25),0 6px 16px rgba(0,0,0,.35);font-family:var(--f);font-size:22px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25);touch-action:none;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;padding:4px;min-width:0}
.pad:active,.pad.hit{transform:scale(.96);filter:brightness(1.25)}
.pad.dead{filter:saturate(.45) brightness(.5)}
.pad.win{animation:pulse .5s 3}
.pad.opt{font-family:Nunito;font-weight:900;font-size:15px;line-height:1.1}
.mid{position:absolute;left:0;right:0;top:25%;bottom:25%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px 14px;pointer-events:none}
.mid .midcore{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:100%}
.midtxt{text-align:center;width:100%;font-size:19px;line-height:1.2;min-height:1em}
.midtxt .big{font-family:var(--f);font-size:58px;line-height:1}
.midtxt .big.go{color:#7dffa8}
.midtxt .sub{font-size:14px;color:var(--mut)}
.tquit{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.4);z-index:5;font-size:14px}
.qtxt{font-size:18px;padding:0 4px}
@media (min-width:700px){.midtxt{font-size:24px}.pad{font-size:28px}.pad.opt{font-size:19px}}

.compact .midtxt{font-size:15px}.compact .midtxt .big{font-size:36px}
.pc{display:inline-block;background:#fff;border-radius:7px;padding:3px 6px;margin:2px;font-family:Georgia,serif;font-weight:700;font-size:20px;box-shadow:0 3px 6px rgba(0,0,0,.35);min-width:34px;text-align:center}
.pc.back{background:linear-gradient(135deg,#b3202f,#6a0d18);color:#fff}
.cards{display:flex;justify-content:center;flex-wrap:wrap}
.hand{font-size:13px;display:flex;align-items:center;flex-wrap:wrap;gap:2px;justify-content:center}.hand .pc{font-size:15px;padding:2px 4px;min-width:26px}.hand b{font-family:var(--f);font-size:18px;color:var(--gold);margin:0 4px}
.acts{display:flex;gap:4px;flex:1;min-height:44px}
.slot{font-size:44px;letter-spacing:4px}
.pad small{display:block;font-size:11px;opacity:.9}

.midcore{position:relative}
.aflash{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);background:rgba(0,0,0,.6);padding:10px 18px;border-radius:999px;font-family:var(--f);font-size:20px;white-space:nowrap;pointer-events:none;animation:popin .25s;z-index:3;max-width:96%;overflow:hidden;text-overflow:ellipsis}
.seg{flex-wrap:wrap}.seg button{min-width:44px}

.vict{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#3a1d6b 0%,#0a0618 75%);animation:fade .3s;overflow:hidden}
.vict.out{opacity:0;transition:.4s}
.rays{position:absolute;width:220vmax;height:220vmax;background:repeating-conic-gradient(rgba(255,210,122,.22) 0 10deg,transparent 10deg 20deg);animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vav{font-size:min(38vw,190px);position:relative;animation:boing 1s cubic-bezier(.3,1.8,.5,1);filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.vtxt{position:relative;font-family:var(--f);font-size:min(11vw,56px);text-align:center;padding:0 12px;background:linear-gradient(180deg,#fff6d6,#ffd27a 50%,#ff9f2e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 #7a3d06);animation:popin .6s .3s both}
@keyframes boing{from{transform:scale(0) rotate(-30deg)}}

.seat-b3l,.seat-b3m,.seat-b3r{bottom:0;width:33.34%}.seat-b3l{left:0}.seat-b3m{left:33.33%}.seat-b3r{right:0}
.seat-b3l .who,.seat-b3m .who,.seat-b3r .who{font-size:11.5px}
.seat-t3l,.seat-t3m,.seat-t3r{top:0;width:33.34%}.seat-t3l{left:0}.seat-t3m{left:33.33%}.seat-t3r{right:0}
.seat-t3l .who,.seat-t3m .who,.seat-t3r .who{font-size:11.5px}

/* ====== V2 : finitions « waouh » ====== */
/* ciel étoilé + aurores qui dérivent derrière tout */
body::before{content:"";position:fixed;inset:-20%;pointer-events:none;z-index:0;background:
 radial-gradient(38% 30% at 22% 28%,rgba(255,79,154,.20),transparent 70%),
 radial-gradient(42% 34% at 80% 18%,rgba(25,198,232,.22),transparent 70%),
 radial-gradient(46% 36% at 60% 85%,rgba(139,92,255,.22),transparent 70%),
 radial-gradient(30% 24% at 12% 78%,rgba(255,179,64,.14),transparent 70%);
 animation:aurora 26s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate3d(-3%,-2%,0) rotate(0deg) scale(1)}50%{transform:translate3d(4%,3%,0) rotate(8deg) scale(1.12)}100%{transform:translate3d(-2%,5%,0) rotate(-6deg) scale(1.05)}}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.7;background-image:
 radial-gradient(1.6px 1.6px at 12% 18%,#fff,transparent 60%),radial-gradient(1.2px 1.2px at 28% 62%,#ffe9b0,transparent 60%),
 radial-gradient(1.8px 1.8px at 47% 9%,#fff,transparent 60%),radial-gradient(1.2px 1.2px at 63% 41%,#bfeaff,transparent 60%),
 radial-gradient(1.6px 1.6px at 81% 72%,#fff,transparent 60%),radial-gradient(1.2px 1.2px at 91% 24%,#ffd0e6,transparent 60%),
 radial-gradient(1.4px 1.4px at 37% 88%,#fff,transparent 60%),radial-gradient(1.2px 1.2px at 72% 93%,#fff,transparent 60%),
 radial-gradient(1.4px 1.4px at 6% 49%,#fff,transparent 60%),radial-gradient(1.2px 1.2px at 55% 66%,#ffe9b0,transparent 60%);
 animation:twinkle 4.5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.25}to{opacity:.8}}
#app{z-index:1}
/* titres dorés */
.top h2{background:linear-gradient(180deg,#fff6d6,#ffd27a 55%,#ff9f2e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(90,40,0,.8)) drop-shadow(0 8px 14px rgba(0,0,0,.4));font-size:28px}
.logo{animation:logoFloat 4s ease-in-out infinite}
@keyframes logoFloat{50%{transform:translateY(-8px) rotate(-1deg)}}
/* cartes des îles : relief, reflet, entrée en cascade */
.isle{border-radius:28px;box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -10px 0 rgba(0,0,0,.2),0 10px 0 rgba(0,0,0,.28),0 22px 40px rgba(0,0,0,.4);animation:isleIn .55s cubic-bezier(.2,1.5,.4,1) backwards;transition:transform .12s,filter .12s}
.isle:nth-child(1){animation-delay:.03s}.isle:nth-child(2){animation-delay:.09s}.isle:nth-child(3){animation-delay:.15s}.isle:nth-child(4){animation-delay:.21s}.isle:nth-child(5){animation-delay:.26s}.isle:nth-child(6){animation-delay:.31s}.isle:nth-child(7){animation-delay:.36s}.isle:nth-child(8){animation-delay:.41s}.isle:nth-child(9){animation-delay:.46s}.isle:nth-child(10){animation-delay:.5s}
@keyframes isleIn{from{opacity:0;transform:translateY(40px) scale(.85) rotate(-2deg)}}
.isle:active{transform:scale(.95) translateY(5px);filter:brightness(1.15)}
.isle::before{content:"";position:absolute;top:-60%;left:-60%;width:45%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transform:rotate(22deg);animation:shine 5.5s ease-in-out infinite;pointer-events:none}
.isle:nth-child(2n)::before{animation-delay:1.8s}.isle:nth-child(3n)::before{animation-delay:3.4s}
@keyframes shine{0%,62%{left:-60%}100%{left:150%}}
.isle::after{background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.28),rgba(255,255,255,.06) 70%);animation:bubble 7s ease-in-out infinite alternate}
@keyframes bubble{to{transform:translate(-14px,-12px) scale(1.15)}}
.isle .e{display:inline-block;animation:bob 3.2s ease-in-out infinite;filter:drop-shadow(0 8px 8px rgba(0,0,0,.35))}
.isle:nth-child(2n) .e{animation-delay:-1.1s}.isle:nth-child(3n) .e{animation-delay:-2.1s}
@keyframes bob{50%{transform:translateY(-7px) rotate(-6deg) scale(1.06)}}
.isle b{font-size:22px;text-shadow:0 3px 0 rgba(0,0,0,.3),0 6px 14px rgba(0,0,0,.25)}
.isle .badge{background:rgba(0,0,0,.38);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);font-weight:900;letter-spacing:.04em;backdrop-filter:blur(4px)}
.isle.hero{min-height:178px}
.isle.hero .e{position:absolute;right:18px;top:38px;font-size:96px;opacity:.96}
.isle.hero b{font-size:26px;margin-top:66px;max-width:64%}
.isle.hero span:not(.badge){max-width:70%}
.isle.hero .badge{left:14px;right:auto}
/* bouton tournoi arc-en-ciel */
#tour{position:relative;background:linear-gradient(100deg,#ff4f9a,#ff9a2e,#ffd34d,#2fd36a,#19c6e8,#8b5cff,#ff4f9a);background-size:300% 100%;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 6px 0 rgba(0,0,0,.35),0 16px 34px rgba(139,92,255,.45);animation:rainbow 6s linear infinite}
@keyframes rainbow{to{background-position:300% 0}}
/* boutons : reflet brillant */
.btn{position:relative;overflow:hidden;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 5px 0 #a8590c,0 12px 24px rgba(0,0,0,.35)}
.seg{box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.seg button{transition:background .15s,color .15s,transform .1s}.seg button:active{transform:scale(.95)}
.seg button.on{background:linear-gradient(180deg,#ffe9a8,#ffbf4d);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 3px 0 #a8590c}
.ico{box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 0 0 1px var(--line),0 6px 14px rgba(0,0,0,.3);transition:transform .1s}.ico:active{transform:scale(.9)}
/* panneaux en verre */
.panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 34px rgba(0,0,0,.28);animation:isleIn .5s .3s cubic-bezier(.2,1.4,.4,1) backwards}
.wrap{animation:fade .35s}
/* classement de la soirée */
.brow{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 28%,transparent),rgba(0,0,0,.22) 70%);border-left-width:7px;animation:rowIn .45s cubic-bezier(.2,1.3,.4,1) backwards}
.brow:nth-child(2){animation-delay:.06s}.brow:nth-child(3){animation-delay:.12s}.brow:nth-child(4){animation-delay:.18s}.brow:nth-child(5){animation-delay:.24s}.brow:nth-child(6){animation-delay:.3s}
.brow:first-child{box-shadow:0 0 0 2px rgba(255,210,122,.75),0 0 26px rgba(255,190,80,.35)}
.brow:first-child b{color:var(--gold);font-size:26px}
@keyframes rowIn{from{opacity:0;transform:translateX(-30px)}}
.prow{animation:rowIn .45s cubic-bezier(.2,1.3,.4,1) backwards;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 30%,transparent),rgba(0,0,0,.25) 75%)}
.prow:nth-of-type(2){animation-delay:.15s}.prow:nth-of-type(3){animation-delay:.3s}.prow:nth-of-type(4){animation-delay:.45s}.prow:nth-of-type(5){animation-delay:.6s}.prow:nth-of-type(6){animation-delay:.75s}
/* fenêtres */
.modal .card{background:linear-gradient(180deg,#1d4a72,#0c2135 70%);box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 0 0 2px rgba(255,210,122,.25),0 30px 70px rgba(0,0,0,.6)}
.modal h2{background:linear-gradient(180deg,#fff6d6,#ffd27a 60%,#ffab3d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(90,40,0,.7))}
/* table de jeu : coins lumineux et gros boutons « bonbon » */
.table{background:radial-gradient(60% 42% at 50% 50%,#1b5a86 0%,#0b2a47 55%,#050d18 100%)}
.table::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.03) 0 9deg,transparent 9deg 18deg)}
.corner .who{font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.corner .who::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);margin-right:5px;vertical-align:1px}
.pad{position:relative;overflow:hidden;border-radius:24px;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c) 55%,#fff) 0%,var(--c) 55%,color-mix(in srgb,var(--c) 75%,#000) 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -9px 0 rgba(0,0,0,.28),0 0 22px color-mix(in srgb,var(--c) 55%,transparent),0 8px 18px rgba(0,0,0,.4);transition:transform .06s,filter .06s}
.pad::before{content:"";position:absolute;left:8%;right:8%;top:5%;height:34%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));pointer-events:none}
.pad:active,.pad.hit{transform:scale(.93) translateY(3px);filter:brightness(1.35) saturate(1.2)}
.midtxt .big{background:linear-gradient(180deg,#fff,#ffe9a8 55%,#ffb340);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(0,0,0,.45));animation:popin .3s cubic-bezier(.3,1.8,.5,1)}
.midtxt .big.go{background:linear-gradient(180deg,#eaffef,#7dffa8 55%,#1fc46a);-webkit-background-clip:text;background-clip:text;color:transparent}
.tquit{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
/* cartes à jouer : ivoire, jamais blanc pur */
.pc{background:linear-gradient(160deg,#fff4d9,#f1dcae);color:#1a1208;box-shadow:inset 0 0 0 1px rgba(120,80,20,.35),0 4px 8px rgba(0,0,0,.4)}
.toast{background:linear-gradient(180deg,rgba(30,60,95,.95),rgba(8,20,36,.95));box-shadow:0 0 0 1px rgba(255,210,122,.4),0 10px 24px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}

/* ====== personnage personnalisé ====== */
.pers{position:relative;display:inline-block;line-height:1}
.pers i{position:absolute;font-style:normal;pointer-events:none;line-height:1}
.pers .ph{left:50%;top:-.4em;transform:translateX(-50%) rotate(-10deg);font-size:.62em}
.pers .po{right:-.3em;bottom:-.12em;font-size:.5em;transform:rotate(12deg)}
.pers .pe{left:-.28em;top:-.08em;font-size:.42em;animation:pulse 1.2s ease-in-out infinite}
.pl .av{overflow:visible}
.avs.opt{grid-template-columns:repeat(7,1fr)}
.avs button.on{background:linear-gradient(180deg,#ffe9a8,#ffbf4d);box-shadow:0 3px 0 #a8590c}
.corner .who{overflow:visible}
/* ====== vrais jetons de casino ====== */
.jeton{--jc:#1e6fd9;display:inline-grid;place-items:center;width:min(46px,10.5vw);height:min(46px,10.5vw);border-radius:50%;flex:none;
 background:radial-gradient(circle,var(--jc) 0 46%,#f4e3b5 47% 50%,var(--jc) 51% 62%,transparent 63%),repeating-conic-gradient(#f6ead0 0 15deg,var(--jc) 15deg 45deg);
 box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),inset 0 3px 3px rgba(255,255,255,.35),0 3px 0 color-mix(in srgb,var(--jc) 55%,#000),0 5px 0 rgba(0,0,0,.45),0 8px 10px rgba(0,0,0,.4)}
.jeton i{font:900 14px Nunito;font-style:normal;color:#fff3cf;text-shadow:0 1px 2px #000}
.jeton.mini{width:18px;height:18px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 2px 0 rgba(0,0,0,.5);vertical-align:middle}
.jeton.mini i{display:none}
.jpile{display:inline-flex;align-items:center;margin-right:4px}.jpile .jeton{margin-left:-9px}.jpile .jeton:first-child{margin-left:0}
.jrow{display:flex;justify-content:space-around;align-items:center;flex:1;min-height:0}
.jbtn{padding:2px;border-radius:50%;transition:transform .06s}.jbtn:active{transform:scale(.88) translateY(3px)}
.jbtn.jpop{animation:jpop .25s}
@keyframes jpop{40%{transform:translateY(-12px) rotate(20deg) scale(1.1)}}
.jbar{display:flex;align-items:center;gap:6px;background:linear-gradient(180deg,#0f5a32,#0a3f23);border-radius:14px;padding:4px 6px;box-shadow:inset 0 0 0 2px #c99a3c,inset 0 4px 10px rgba(0,0,0,.4)}
.jtot{flex:1;display:flex;align-items:center;justify-content:center;min-width:0}.jtot b{font-family:var(--f);font-weight:400;font-size:20px;color:var(--gold)}
.jx,.jok{width:38px;height:34px;border-radius:10px;font-size:17px;font-weight:900;color:#fff}
.jx{background:rgba(0,0,0,.35)}.jok{background:linear-gradient(180deg,#8ff0a8,#2fc46a);color:#04361a;box-shadow:0 3px 0 #157a3d}
.seat-b3l .jeton:not(.mini),.seat-b3m .jeton:not(.mini),.seat-b3r .jeton:not(.mini),.seat-t3l .jeton:not(.mini),.seat-t3m .jeton:not(.mini),.seat-t3r .jeton:not(.mini){width:28px;height:28px}
.seat-b3l .jeton i,.seat-b3m .jeton i,.seat-b3r .jeton i,.seat-t3l .jeton i,.seat-t3m .jeton i,.seat-t3r .jeton i{font-size:9px}

/* ---- titre d'intro ---- */
#ititle{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 50% 46%,rgba(60,10,40,.15),rgba(10,4,24,.72))}
#ititle .ifl{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,#ffd34d,#ff7a2e 55%,transparent 75%);animation:ifl .7s ease-out forwards}
@keyframes ifl{0%{opacity:.95}100%{opacity:0}}
#ititle .irays{position:absolute;left:50%;top:46%;width:220vmax;height:220vmax;margin:-110vmax;background:repeating-conic-gradient(rgba(255,211,77,.20) 0 7deg,transparent 7deg 20deg);animation:irot 14s linear infinite,ifd .5s both;-webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%)}
@keyframes irot{to{transform:rotate(360deg)}}@keyframes ifd{from{opacity:0}}
#ititle .ilogo{position:relative;text-align:center;transform:translateY(-4vh);animation:ishake .5s .12s both}
#ititle .ilogo span{display:block;font:400 min(19vw,112px)/1 'Lilita One',system-ui;letter-spacing:.02em;white-space:nowrap}
#ititle u{display:inline-block;text-decoration:none;background:linear-gradient(180deg,#fff3b0 8%,#ffd34d 40%,#ff8a1f 78%,#c2410c);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #5a1606;filter:drop-shadow(0 5px 0 #5a1606) drop-shadow(0 12px 18px rgba(0,0,0,.55));animation:ilet .42s calc(var(--k)*.045s) cubic-bezier(.2,1.6,.4,1) both}
@keyframes ilet{0%{transform:translateY(-90vh) scale(2.6) rotate(-18deg);opacity:0}70%{opacity:1}100%{transform:none;opacity:1}}
#ititle small{display:inline-block;margin-top:8px;padding:4px 22px 6px;border-radius:14px;font:400 min(11vw,64px)/1 'Lilita One',system-ui;letter-spacing:.22em;text-indent:.22em;color:#3a0a1e;background:linear-gradient(180deg,#ff5fa2,#ff2d6f);box-shadow:0 5px 0 #7a0b35,0 14px 24px rgba(0,0,0,.5);transform:rotate(-4deg);animation:ipop .45s .55s cubic-bezier(.2,1.8,.4,1) both}
@keyframes ipop{0%{transform:rotate(14deg) scale(0)}100%{transform:rotate(-4deg) scale(1)}}
#ititle em{display:block;margin-top:18px;font:900 min(4.4vw,22px) Nunito,system-ui;font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:#ffe9b8;text-shadow:0 2px 8px #000;animation:ifd .6s 1s both}
@keyframes ishake{0%,100%{transform:translateY(-4vh)}20%{transform:translate(-7px,calc(-4vh + 6px))}40%{transform:translate(7px,calc(-4vh - 5px))}60%{transform:translate(-4px,calc(-4vh + 3px))}80%{transform:translate(3px,-4vh)}}
#ititle .iem{position:absolute;left:50%;top:46%;font-size:min(10vw,52px);margin:-.6em;animation:iem .9s calc(.5s + var(--d)) cubic-bezier(.15,.9,.3,1) both}
@keyframes iem{0%{transform:rotate(var(--a)) translateY(0) rotate(calc(-1*var(--a))) scale(0);opacity:0}100%{transform:rotate(var(--a)) translateY(min(-40vw,-34vh)) rotate(calc(-1*var(--a))) scale(1);opacity:1}}

/* ---- personnages dessinés ---- */
svg.face{width:1.15em;height:1.15em;vertical-align:-.25em;display:inline-block;overflow:visible;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.bigface{font-size:96px;text-align:center;margin:10px 0 2px;line-height:1.2}
.avs.lk{grid-template-columns:repeat(6,1fr)}.avs.lk button{font-size:34px;padding:4px 0}
.avs.sw{grid-template-columns:repeat(8,1fr)}.avs.sw button{height:38px;background:var(--sw);border:3px solid rgba(0,0,0,.35)}
.avs.sw button.on{background:var(--sw);border-color:#ffd34d;box-shadow:0 0 0 3px #ffd34d,0 0 14px #ffd34d;transform:scale(1.08)}
#sty{margin:8px 0}

/* ---- accessoires sur personnage dessiné ---- */
.pers.pf{width:1.15em;height:1.15em;vertical-align:-.25em}
.pers.pf svg.face{vertical-align:top;position:relative;z-index:1}
.pers.pf i{z-index:2;filter:drop-shadow(0 .03em .02em rgba(0,0,0,.45))}
.pers.pf .ph{left:50%;top:-.2em;font-size:.56em;transform:translateX(-50%) rotate(-8deg);transform-origin:50% 100%;animation:phbob 2.4s ease-in-out infinite}
@keyframes phbob{0%,100%{transform:translateX(-50%) rotate(-8deg)}50%{transform:translateX(-50%) translateY(-.04em) rotate(-3deg)}}
.pers.pf .po{right:-.12em;bottom:.02em;font-size:.44em;transform:rotate(-14deg);transform-origin:30% 90%;animation:pobob 1.8s ease-in-out infinite}
@keyframes pobob{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(-2deg) translateY(-.03em)}}
.pers.pf .pe{left:50%;top:40%;font-size:.3em;margin:-.5em;animation:porb 3.2s linear infinite;z-index:3}
.pers.pf .pe2{animation-delay:-1.6s;font-size:.24em}
@keyframes porb{0%{transform:rotate(0) translateX(2.1em) rotate(0) scale(1)}25%{transform:rotate(90deg) translateX(2.1em) rotate(-90deg) scale(.8)}50%{transform:rotate(180deg) translateX(2.1em) rotate(-180deg) scale(1)}75%{transform:rotate(270deg) translateX(2.1em) rotate(-270deg) scale(1.2)}100%{transform:rotate(360deg) translateX(2.1em) rotate(-360deg) scale(1)}}
.pers.pf .pg{position:absolute;inset:-.08em;border-radius:50%;z-index:0;background:radial-gradient(circle,rgba(255,211,77,.55),rgba(255,95,162,.25) 45%,transparent 70%);animation:pglow 1.6s ease-in-out infinite;filter:none}
@keyframes pglow{50%{transform:scale(1.12);opacity:.7}}

/* ---- chaque effet a sa propre animation ---- */
.pers.pf .pe{animation:none;margin:0;left:auto;top:auto;transform:none;font-size:.3em}
.pers.pf .pg{background:radial-gradient(circle,var(--ag,rgba(255,211,77,.55)),transparent 68%)}
.pers.fx0{--ag:rgba(255,240,150,.6)}.pers.fx0 .pe{left:-.15em;top:.05em;animation:fxTw 1.1s ease-in-out infinite}.pers.fx0 .pe2{left:auto;right:-.2em;top:.35em;animation-delay:-.55s}
@keyframes fxTw{0%,100%{transform:scale(.3) rotate(0);opacity:.2}50%{transform:scale(1.25) rotate(90deg);opacity:1}}
.pers.fx1{--ag:rgba(255,110,20,.6)}.pers.fx1 .pe{left:-.12em;bottom:0;animation:fxFire 1s ease-in infinite}.pers.fx1 .pe2{left:auto;right:-.12em;animation-delay:-.5s}
@keyframes fxFire{0%{transform:translateY(0) scale(1.1);opacity:1}100%{transform:translateY(-2.6em) scale(.4);opacity:0}}
.pers.fx2{--ag:rgba(255,80,150,.55)}.pers.fx2 .pe{left:.1em;top:.1em;animation:fxHeart 1.8s ease-out infinite}.pers.fx2 .pe2{left:auto;right:0;animation-delay:-.9s}
@keyframes fxHeart{0%{transform:translate(0,.6em) scale(.4);opacity:0}25%{opacity:1}100%{transform:translate(.4em,-2.4em) scale(1.2) rotate(15deg);opacity:0}}
.pers.fx3{--ag:rgba(120,190,255,.6)}.pers.fx3 .pe{left:-.25em;top:.3em;font-size:.36em;animation:fxZap .7s steps(2) infinite}.pers.fx3 .pe2{left:auto;right:-.25em;top:.1em;animation-delay:-.35s;transform:scaleX(-1)}
@keyframes fxZap{0%{opacity:1;translate:0 0}50%{opacity:.15;translate:.15em -.1em}}
.pers.fx3 svg.face{animation:fxShake .25s steps(2) infinite}
@keyframes fxShake{50%{transform:translate(.012em,-.01em)}}
.pers.fx4{--ag:rgba(150,140,255,.45)}.pers.fx4 .pe{right:-.05em;top:0;animation:fxZ 2.4s linear infinite}.pers.fx4 .pe2{animation-delay:-1.2s}
@keyframes fxZ{0%{transform:translate(0,0) scale(.4);opacity:0}20%{opacity:1}100%{transform:translate(1.6em,-2.2em) scale(1.3) rotate(-15deg);opacity:0}}
.pers.fx5{--ag:rgba(255,40,40,.55)}.pers.fx5 .pe{right:-.04em;top:.08em;font-size:.36em;animation:fxAngry .5s ease-in-out infinite}.pers.fx5 .pe2{display:none}
@keyframes fxAngry{50%{transform:scale(1.45) rotate(10deg)}}
.pers.fx5 svg.face{animation:fxRed 1s ease-in-out infinite}@keyframes fxRed{50%{filter:drop-shadow(0 0 .08em #ff2020) saturate(1.6)}}
.pers.fx6{--ag:rgba(80,220,200,.5)}.pers.fx6 .pe{right:-.1em;top:.15em;animation:fxNote 2s ease-in-out infinite}.pers.fx6 .pe2{animation-delay:-1s;font-size:.24em}
@keyframes fxNote{0%{transform:translate(0,0) rotate(0);opacity:0}20%{opacity:1}50%{transform:translate(1.2em,-1em) rotate(20deg)}100%{transform:translate(2.6em,-.4em) rotate(-10deg);opacity:0}}
.pers.fx6 svg.face{animation:fxSway 1s ease-in-out infinite;transform-origin:50% 90%}@keyframes fxSway{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
.pers.fx7{--ag:rgba(255,220,90,.5)}.pers.fx7 .pe{left:50%;top:.02em;margin-left:-.5em;animation:fxDizzy 1.4s linear infinite}.pers.fx7 .pe2{animation-delay:-.7s}
@keyframes fxDizzy{0%{transform:translateX(-1.7em) scale(.7);z-index:0}25%{transform:translate(0,.35em) scale(1.1)}50%{transform:translateX(1.7em) scale(.7)}75%{transform:translate(0,-.35em) scale(.55);opacity:.6}100%{transform:translateX(-1.7em) scale(.7)}}
.pers.fx8{--ag:rgba(200,200,255,.35)}.pers.fx8 .pe{left:-.3em;top:.35em;animation:fxPeek 2.6s ease-in-out infinite}.pers.fx8 .pe2{left:auto;right:-.3em;animation-delay:-1.3s}
@keyframes fxPeek{0%,40%,100%{transform:translateX(0) scale(.2);opacity:0}55%,85%{transform:translateX(0) scale(1.15);opacity:1}70%{transform:translateX(.2em) scale(1.15)}}
.pers.fx9{--ag:rgba(150,100,40,.5)}.pers.fx9 .pe{left:-.18em;bottom:-.02em;font-size:.34em;animation:fxPoop .9s cubic-bezier(.3,0,.7,1) infinite}.pers.fx9 .pe2{left:auto;right:-.25em;bottom:.45em;font-size:.2em;animation:fxFly 1.3s linear infinite}
.pers.fx9 .pe2{font-size:0}.pers.fx9 .pe2::after{content:'🪰';font-size:.2rem;font-size:max(9px,.55em)}
@keyframes fxPoop{0%,100%{transform:translateY(0) scale(1.15,.85)}50%{transform:translateY(-.9em) scale(.9,1.1)}}
@keyframes fxFly{0%{transform:translate(0,0)}25%{transform:translate(-.6em,-.5em)}50%{transform:translate(-1.4em,0)}75%{transform:translate(-.6em,.5em)}100%{transform:translate(0,0)}}

/* ---- casino : vrais jetons v2 + nouveaux jeux ---- */
.jeton{background:
 radial-gradient(circle,rgba(255,255,255,.18) 0 30%,transparent 31%),
 radial-gradient(circle,color-mix(in srgb,var(--jc) 80%,#fff) 0 33%,#f3e6c4 34% 36%,var(--jc) 37% 58%,rgba(255,255,255,.55) 59% 60%,transparent 61%),
 repeating-conic-gradient(from 7deg,#f6ead0 0 16deg,var(--jc) 16deg 60deg);
 border:1px solid color-mix(in srgb,var(--jc) 50%,#000)}
.jeton i{font-size:13px;letter-spacing:-.03em}
.jeton::after{content:'';position:absolute}
.jpile .jeton{box-shadow:0 2px 0 color-mix(in srgb,var(--jc) 45%,#000),0 3px 3px rgba(0,0,0,.5)}
.seg{flex-wrap:wrap}.seg:has(>:nth-child(6)){border-radius:22px}.seg:has(>:nth-child(6)) button{flex:1 0 30%;font-size:14px;border-radius:16px}
.bac{display:flex;gap:16px;justify-content:center}.bac>div{text-align:center}.bac b{font:400 30px 'Lilita One',system-ui;color:var(--gold)}
.dice{display:flex;gap:10px;justify-content:center;margin:6px 0}
.die{display:inline-grid;place-items:center;width:58px;height:58px;font-size:66px;line-height:1;color:#b3121f;background:linear-gradient(160deg,#fff8ee,#e8d9c4);border-radius:14px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15),0 6px 12px rgba(0,0,0,.5);overflow:hidden;animation:dieIn .25s}
.pad .die{width:24px;height:24px;font-size:28px;border-radius:6px;vertical-align:middle;box-shadow:none}
@keyframes dieIn{from{transform:rotate(-30deg) scale(.6)}}
.race{width:min(86vw,340px);display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:14px;background:linear-gradient(180deg,#3b7a2a,#2a5c1e);box-shadow:inset 0 0 0 3px #c99a3c}
.lane2{position:relative;height:26px;border-bottom:1px dashed rgba(255,255,255,.35)}
.lane2 .hn{position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;font:900 12px/20px Nunito;text-align:center;color:#fff;text-shadow:0 1px 1px #000}
.lane2 .hz{position:absolute;top:-2px;font-size:24px;transform:scaleX(-1);transition:left .06s linear}
.lane2 .fin{position:absolute;right:0;top:0;font-size:18px}

.vprow{display:flex;gap:3px;justify-content:center}
.vpc{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 2px;border-radius:8px}
.vpc .pc{font-size:15px;padding:6px 3px;min-width:0}.vpc small{font:900 8px Nunito;color:var(--gold);min-height:9px}
.vpc.held{background:rgba(255,211,77,.25);box-shadow:0 0 0 2px var(--gold)}
.kn{border-radius:7px;background:rgba(255,255,255,.1);color:#fff;font:800 12px Nunito;min-height:22px}
.kn.on{background:var(--gold);color:#4a2400}.kn.hitk{background:#2fd36a;color:#04361a;box-shadow:0 0 8px #2fd36a}
.balls{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:300px;margin:6px auto}
.ball{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:900 14px Nunito;color:#3a2400;background:radial-gradient(circle at 35% 30%,#fff8d8,#ffd34d 45%,#c98a1a);box-shadow:0 3px 6px rgba(0,0,0,.5);animation:dieIn .3s}
.scr{position:relative;border-radius:12px;background:linear-gradient(160deg,#fff3c4,#ffd34d);color:#5a1606;font:400 20px 'Lilita One',system-ui;overflow:hidden}
.scr::after{content:'🪙';position:absolute;inset:0;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#a7a9b4 0 6px,#c4c6cf 6px 12px);font-size:22px;transition:opacity .25s}
.scr.open::after{opacity:0}
.coins{display:flex;gap:18px;justify-content:center;font-size:70px}.coin.spin{animation:cspin .22s linear infinite}@keyframes cspin{50%{transform:scaleX(.1)}}
.rocket{font-size:70px;animation:rk .3s ease-in-out infinite}@keyframes rk{50%{transform:translate(2px,-4px) rotate(-3deg)}}
/* ---- adaptation automatique à la taille de chaque coin (1 à 6 joueurs) ---- */
.corner{container-type:inline-size;container-name:coin}
.cbody>*{min-width:0}
.pad{min-width:0;overflow-wrap:anywhere}
@container coin (max-width:210px){
 .pad{font-size:18px;border-radius:18px}
 .pad.opt{font-size:12.5px;padding:2px 3px;letter-spacing:-.01em}
 .acts{gap:3px}
 .hand .pc{font-size:13px;min-width:20px;padding:2px 3px}
 .vprow{gap:1px}.vpc{padding:2px 0}.vpc .pc{font-size:12px;padding:5px 1px;margin:1px}
 .kn{font-size:10px;min-height:19px;border-radius:5px}
 .cbody:has(.kn){gap:1px!important}
 .scr{font-size:16px}
 .jx,.jok{width:30px;height:30px;font-size:14px}.jtot b{font-size:16px}
}
@container coin (max-width:140px){
 .pad{font-size:15px;border-radius:14px}
 .pad.opt{font-size:10.5px}
 .pad small{font-size:9px}
 .vpc .pc{font-size:10px;padding:4px 0}
 .vpc small{font-size:6px}
 .kn{font-size:8.5px;min-height:16px}
 .jx,.jok{width:24px;height:26px;font-size:12px}.jtot b{font-size:13px}
 .hand .pc{font-size:11px;min-width:16px;padding:1px 2px}
 .scr{font-size:13px}
}
@container coin (max-width:140px){
 .corner .jeton:not(.mini){width:25px!important;height:25px!important}
 .corner .jeton:not(.mini) i{font-size:8px!important}
 .jbtn{padding:0}.jrow{justify-content:space-evenly;gap:1px}
 .jbar{gap:2px;padding:3px}
 .scr{font-size:11px}
}

/* ===== tout à l'endroit + boutons égaux ===== */
.table .flip,.modal.flip .card{transform:none}
.table .midtxt.flip{display:none}
.table .mid{top:max(46px,env(safe-area-inset-top));bottom:var(--ph,25%)}
.table .corner{padding:5px}
.table .corner .who{font-size:12px!important}
.table.turn .corner.act{box-shadow:inset 0 0 0 3px var(--c),0 0 30px color-mix(in srgb,var(--c) 50%,transparent);border-radius:20px}
.table.turn .corner.act .who{font-size:15px!important}
/* règles inline */
.rbox{max-height:34vh;overflow:auto;text-align:left;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 12px;margin:10px 0;font-size:14px;line-height:1.35}
.rbox ul{margin:6px 0;padding-left:18px}.rbox li{margin:3px 0}
/* écran comment jouer */
.howm .card{max-width:420px}
.howto h2{margin:6px 0 2px}
.howto .amode{display:inline-block;padding:4px 12px;border-radius:99px;background:rgba(255,211,77,.15);color:var(--gold);font-weight:900;font-size:14px;margin:4px 0}
.howto .ahow{font-size:16px;line-height:1.35;margin:8px 0 4px}
.aorder{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
.aorder span{padding:4px 10px;border-radius:99px;border:2px solid var(--c);font-weight:800;font-size:13px}
.art{position:relative;height:170px;display:flex;align-items:center;justify-content:center;gap:16px;border-radius:18px;background:radial-gradient(80% 90% at 50% 100%,rgba(255,180,60,.25),transparent),linear-gradient(160deg,#1d2a55,#120d2e);overflow:hidden}
.art .aemo{font-size:62px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));animation:abob 2s ease-in-out infinite}
.aphone{position:relative;width:96px;height:150px;border-radius:18px;background:#05070f;padding:7px;box-shadow:0 0 0 3px #3a3f5c,0 10px 24px rgba(0,0,0,.6)}
.ascr{position:relative;width:100%;height:100%;border-radius:12px;background:linear-gradient(180deg,#1b2350,#2a1450);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px 6px}
.fing{position:absolute;font-size:34px;right:-6px;bottom:-14px;font-style:normal;animation:atap 1.6s ease-in-out infinite;filter:drop-shadow(0 4px 4px rgba(0,0,0,.6))}
.abtn{width:100%;height:34px;border-radius:10px;background:linear-gradient(180deg,#ffd34d,#ff8a1f);box-shadow:0 3px 0 #8a3b0a;animation:apress 1.6s infinite}
.abtn.hot{animation-duration:.4s}.art-mash .fing,.art-exact .fing,.art-ballon .fing,.art-bombe .fing{animation-duration:.4s}
.abtn.hold{animation:none;filter:brightness(1.2);box-shadow:0 0 14px #ffd34d}.art-tiens .fing{animation:none;bottom:-4px}
.aq{font:400 34px 'Lilita One',system-ui;color:#fff}
.aopts{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%}.aopts i{height:22px;border-radius:6px;background:rgba(255,255,255,.2)}
.aopts i.ok{animation:aok 1.6s infinite}
.aroll,.anum{position:relative;width:100%;height:56px;font-size:30px;text-align:center}
.aroll span,.anum span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;animation:aroll 2.4s infinite}
.anum span{font:900 17px Nunito;color:#fff}
.aroll span:nth-child(2),.anum span:nth-child(2){animation-delay:.8s}.aroll span:nth-child(3),.anum span:nth-child(3){animation-delay:1.6s}
.aroll span.ok{text-shadow:0 0 12px #7dffa8}
.plus{position:absolute;right:8px;bottom:44px;color:#7dffa8;font:900 16px Nunito;animation:aplus .4s infinite}
.alight{width:46px;height:46px;border-radius:50%;animation:alight 2.4s steps(1) infinite}
.abomb{font-size:40px;animation:ashake .2s infinite}
.aballoon{font-size:30px;animation:agrow 1.6s ease-in infinite}
.abar{position:relative;width:100%;height:16px;border-radius:99px;background:rgba(255,255,255,.18);margin-top:18px}
.abar i{position:absolute;left:42%;width:16%;top:-3px;bottom:-3px;border-radius:5px;background:#2fd36a}
.abar b{position:absolute;top:50%;width:16px;height:16px;margin:-8px;border-radius:50%;background:#ffd34d;box-shadow:0 0 10px #ffd34d;animation:aslide 1.6s ease-in-out infinite alternate}
@keyframes abob{50%{transform:translateY(-8px) rotate(-4deg)}}
@keyframes atap{0%,40%,100%{transform:translate(0,0)}55%{transform:translate(-14px,-12px) scale(.9)}}
@keyframes apress{0%,50%,100%{transform:none}57%{transform:translateY(3px);filter:brightness(1.3)}}
@keyframes aok{0%,50%{background:rgba(255,255,255,.2)}58%,100%{background:#2fd36a;box-shadow:0 0 10px #2fd36a}}
@keyframes aroll{0%{opacity:0;transform:translateY(14px)}8%,30%{opacity:1;transform:none}38%,100%{opacity:0;transform:translateY(-14px)}}
@keyframes aplus{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-16px)}}
@keyframes alight{0%{background:#ff3b3b;box-shadow:0 0 18px #ff3b3b}55%{background:#2fd36a;box-shadow:0 0 18px #2fd36a}}
@keyframes ashake{50%{transform:rotate(8deg) translateX(2px)}}
@keyframes agrow{0%{transform:scale(.6)}90%{transform:scale(1.5)}100%{transform:scale(.6)}}
@keyframes aslide{from{left:5%}to{left:95%}}