/* Accueil mobile en cinq onglets (docs/refonte-ux/REPARTITION.md).
   Repris du prototype validé (docs/refonte-ux/prototype/_apercu-refonte-onglets.html, servi depuis public/) :
   les classes ro-* ne servent qu'ici. Le conteneur #home-tabs n'apparaît que sur
   téléphone, joueur connecté (body.has-home-tabs, posé par home-tabs.js). */
#home-tabs{display:none}
body.has-home-tabs #screen-home > :not(#home-tabs){display:none!important}
body.has-home-tabs #home-tabs{display:grid}
body.has-home-tabs.on-home #audio-controls,
body.has-home-tabs.on-home #top-left-bar,
body.has-home-tabs.on-home #playstore-banner{display:none!important}

:where(.ro-app, .ro-sheet-ov) button{font:inherit;color:inherit;border:0;background:none;padding:0;margin:0;cursor:pointer;min-height:0;box-shadow:none;text-transform:none;letter-spacing:normal}
:where(.ro-app, .ro-sheet-ov) img{display:block;max-width:100%}
:where(.ro-app, .ro-sheet-ov) ion-icon{display:block}
.ro-app{position:fixed;inset:0;z-index:30;width:100%;height:100dvh;overflow:hidden;
  grid-template-rows:auto 1fr calc(var(--ro-tabs-h) + env(safe-area-inset-bottom));
  font:500 15px/1.35 var(--font-fun);color:var(--ink);-webkit-tap-highlight-color:transparent;text-align:left;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff' fill-opacity='.035' font-family='Arial' font-size='26'%3E%3Ctext x='10' y='34'%3E%E2%99%A0%3C/text%3E%3Ctext x='70' y='34'%3E%E2%99%A5%3C/text%3E%3Ctext x='40' y='94'%3E%E2%99%A3%3C/text%3E%3Ctext x='96' y='94'%3E%E2%99%A6%3C/text%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(130% 70% at 50% 30%, #357a5f 0%, var(--felt) 42%, #1d4637 100%);
  user-select:none;-webkit-user-select:none}
:root{
  --ro-top-h:54px; --ro-tabs-h:68px;
  --ro-panel:rgba(12,22,18,.74); --ro-panel-line:rgba(255,255,255,.08);
  --ro-gold-line:rgba(255,216,122,.42);
  --ro-amber-top:#f6c968; --ro-amber-edge:#9a6a1a;
  --ro-green-top:#86df9d; --ro-green:#43a862; --ro-green-edge:#2a7442;
  --ro-red:#e5484d;
}


/* ---- Bandeau fixe ---- */
.ro-top{position:relative;z-index:5;display:flex;align-items:center;gap:6px;padding:8px 10px 6px;
  background:linear-gradient(#0d1814ee,#0d181400)}
.ro-lvl, .ro-lvl:is(:hover, :focus-visible, :active){display:flex;align-items:center;flex:1;min-width:0;background:none;border:0;box-shadow:none}
.ro-lvl-badge{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#ff7a6b,#c2322b 60%,#8e1d18);font-weight:800;font-size:17px;color:#fff;
  box-shadow:0 0 0 3px #f3c25e,0 0 0 5px #6b4410,0 3px 6px rgba(0,0,0,.5);text-shadow:0 1px 0 #6b120d}
.ro-xp{position:relative;margin-left:-8px;height:18px;flex:1;max-width:96px;border-radius:0 9px 9px 0;background:#0a1210;
  box-shadow:inset 0 0 0 1.5px #000a;overflow:hidden}
.ro-xp i{position:absolute;inset:3px 3px 3px 8px;border-radius:0 6px 6px 0;background:linear-gradient(#7fd2ff,var(--sky));width:calc((100% - 11px) * var(--xp,.6));transition:width .9s var(--ease-out-quint)}
.ro-xp b{position:absolute;left:14px;top:0;font-size:11px;line-height:18px;font-weight:800;color:#fff;text-shadow:0 1px 1px #000}
.ro-money{display:flex;align-items:center;height:30px;padding:0 3px 0 0;border-radius:15px;background:#0a1210;box-shadow:inset 0 0 0 1.5px #000a}
.ro-money img{width:30px;height:30px;margin:-2px 0 -2px -4px}
.ro-money span{min-width:44px;padding:0 6px 0 2px;font-weight:800;font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
.ro-plus{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;line-height:1;
  background:linear-gradient(var(--ro-green-top),var(--ro-green));box-shadow:0 2px 0 var(--ro-green-edge);text-shadow:0 1px 0 #1f5a33}

/* ---- Pages et glissement ---- */
.ro-viewport{position:relative;overflow:hidden;touch-action:pan-y}
.ro-track{display:flex;width:500%;height:100%;will-change:transform;transition:transform .34s var(--ease-out-quint)}
.ro-track.dragging{transition:none}
.ro-pane{width:20%;height:100%;overflow-y:auto;overflow-x:hidden;padding:4px 12px 16px;scrollbar-width:none;overscroll-behavior:contain}
.ro-pane::-webkit-scrollbar{display:none}

/* ---- Barre d'onglets ---- */
.ro-tabs{position:relative;z-index:6;display:flex;padding:0 0 env(safe-area-inset-bottom);
  background:linear-gradient(#22312b,#141d19);box-shadow:0 -2px 0 #0b100e,0 -6px 18px rgba(0,0,0,.35)}
.ro-tab{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  transition:flex-grow .3s var(--ease-out-quint),background .2s;border-right:1px solid #0b100e}
.ro-tab:last-child{border-right:0}
.ro-tab .ro-ico{width:44px;height:44px;display:grid;place-items:center;transition:transform .3s var(--ease-out-quint);filter:saturate(.75) brightness(.85)}
.ro-tab .ro-lab{height:0;overflow:hidden;opacity:0;font-weight:800;font-size:14px;line-height:1;color:#fff;text-shadow:0 1.5px 0 #000;transition:opacity .2s}
.ro-tab[aria-selected="true"]{flex-grow:1.75;background:linear-gradient(#4b9a78,#2d6c53 70%,#255a45);box-shadow:inset 0 3px 0 var(--accent),inset 0 -2px 0 rgba(0,0,0,.25)}
.ro-tab[aria-selected="true"] .ro-ico{transform:translateY(-6px) scale(1.18);filter:none}
.ro-tab[aria-selected="true"] .ro-lab{height:auto;opacity:1;margin-top:-2px}
.ro-tab[aria-disabled="true"] .ro-ico{filter:grayscale(1) brightness(.6)}
.ro-pastille{position:absolute;top:5px;right:calc(50% - 26px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--ro-red);color:#fff;font-size:12px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px #141d19}
.ro-pastille:empty{min-width:12px;width:12px;height:12px;padding:0}
.ro-tab[aria-selected="true"] .ro-pastille{display:none}
.ro-bulle{position:absolute;left:6px;bottom:calc(100% + 8px);padding:7px 12px;border-radius:12px;background:#fff;color:#1c2230;
  font-weight:800;font-size:13px;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.35);transition:opacity .3s,transform .3s}
.ro-bulle::after{content:"";position:absolute;left:26px;top:100%;border:7px solid transparent;border-top-color:#fff}
.ro-bulle.gone{opacity:0;transform:translateY(6px);pointer-events:none}
/* icônes générées (docs/refonte-ux/icones) */
.ro-tab .ro-ico img{max-width:44px;max-height:44px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.ro-mini-cards{position:relative;width:36px;height:38px}
.ro-mini-cards img{position:absolute;width:23px;height:33px;border-radius:4px;box-shadow:0 0 0 1.5px #1a1205,0 2px 3px #0008;object-fit:cover}
.ro-mini-cards img:first-child{left:2px;top:4px;transform:rotate(-14deg)}
.ro-mini-cards img:last-child{right:2px;top:2px;transform:rotate(10deg)}
.ro-spade{width:28px;height:38px;border-radius:5px;background:var(--card-bg);box-shadow:0 0 0 1.5px #1a1205,0 2px 3px #0008;
  display:grid;place-items:center;color:var(--card-black);font:700 24px/1 system-ui,Arial}

/* ---- Briques communes ---- */
.ro-panel{background:var(--ro-panel);border:1px solid var(--ro-panel-line);border-radius:var(--radius-lg);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.ro-panel.gold{border:1.5px solid var(--ro-gold-line)}
.ro-h{margin:14px 2px 8px;font-weight:800;font-size:18px;line-height:1.1;color:var(--ink-soft);text-shadow:0 2px 0 rgba(0,0,0,.35)}
.ro-h small{font-weight:600;font-size:13px;color:var(--ink-muted)}
/* boutons « jeu » en CSS, d'après la planche Flow docs/refonte-ux/icones/planche-d-boutons-v1.jpg :
   contour brun, face en dégradé, reflet arrondi, lèvre foncée séparée par un filet clair */
.ro-btn{--lip:5px;--ol:#3a2414;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:42px;padding:0 16px 3px;border-radius:13px;border:2.5px solid var(--ol);font-weight:800;font-size:16px;color:#fff;
  -webkit-text-stroke:3px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol);
  background:linear-gradient(var(--c1),var(--c2));
  box-shadow:inset 0 calc(-1*var(--lip)) 0 var(--lc),inset 0 calc(-1*var(--lip) - 2px) 0 var(--ln),0 3px 6px rgba(0,0,0,.35);
  transition:transform .08s, box-shadow .08s}
.ro-btn::before{content:"";position:absolute;z-index:-1;left:5px;right:5px;top:3px;height:36%;border-radius:999px;
  background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.15));pointer-events:none}
.ro-btn:active{transform:translateY(2px);--lip:2px}
.ro-btn.amber,.ro-play{--c1:#fbd77a;--c2:#f0ae35;--lc:#c66f1b;--ln:#f6c35a}
.ro-btn.sky,.ro-friends{--c1:#a6d8fa;--c2:#56a9ee;--lc:#2e64b5;--ln:#86c6f6}
.ro-btn.green{--c1:#aee374;--c2:#73c337;--lc:#2c862a;--ln:#9bd95c}
.ro-btn.ghost{border:0;-webkit-text-stroke:0;text-shadow:none;background:rgba(255,255,255,.07);color:var(--ink-soft);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.ro-btn.ghost::before{display:none}
.ro-btn.sm{--lip:4px;height:34px;padding:0 12px 2px;font-size:14px;border-radius:11px;-webkit-text-stroke-width:2.5px}
.ro-btn img{width:20px;height:20px}
.ro-bar{height:10px;border-radius:5px;background:#08100d;box-shadow:inset 0 0 0 1px #000a;overflow:hidden}
.ro-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(#ffe39a,var(--accent));width:var(--p,50%)}
.ro-bar.sky i{background:linear-gradient(#8fd7ff,var(--sky))}
.ro-bar.green i{background:linear-gradient(#a6f0b9,var(--ro-green))}
.ro-dot{position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;background:var(--ro-red);box-shadow:0 0 0 2px #0d1814}

/* ---- JOUER ---- */
#pane-jouer{display:flex;flex-direction:column;overflow:hidden;padding-bottom:10px}
.ro-me{display:flex;align-items:center;gap:8px;margin-top:2px}
.ro-avatar{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:800;font-size:21px;color:#5a3a06;
  background:radial-gradient(circle at 35% 30%,#ffe7a8,var(--accent));box-shadow:0 0 0 2.5px #fff6,0 3px 6px #0007}
.ro-me-name{flex:1;min-width:0;text-align:left}
.ro-me-name b{display:block;font-size:20px;line-height:1.05;font-weight:800}
.ro-me-name span{font-size:13px;color:var(--ink-muted-light)}
.ro-sq{position:relative;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:24px;color:var(--ink-soft);
  background:linear-gradient(#2c3a35,#1a2420);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),0 3px 0 #0b100e}
.ro-sq:active{transform:translateY(2px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),0 1px 0 #0b100e}
.ro-row2{display:grid;grid-template-columns:1fr 1.15fr;gap:8px;margin-top:10px}
.ro-league,.ro-passcard{display:flex;align-items:center;gap:8px;padding:6px 10px;height:54px;text-align:left}
.ro-league img{width:38px;height:38px}
.ro-league b{display:block;font-size:15px;line-height:1.1}
.ro-league div span{font-size:13px;color:var(--gold);font-weight:700}
.ro-passcard{position:relative;background:linear-gradient(#f9d681,#d9a441);border-radius:var(--radius-lg);color:var(--accent-ink);box-shadow:0 3px 0 #8f6114,0 6px 14px rgba(0,0,0,.3)}
.ro-passcard > div{flex:1;min-width:0}
.ro-passcard b{display:block;font-size:14px;line-height:1.15}
.ro-passcard .ro-bar{height:8px;margin-top:4px;background:#7a520f55}
.ro-passcard .ro-bar i{background:linear-gradient(#fff6d8,#fff)}
.ro-passcard img{width:42px;height:42px;margin-right:-4px}
.ro-stage{position:relative;flex:1;min-height:200px;margin-top:6px;display:flex;align-items:center;justify-content:center}
/* logo : flotte doucement, un reflet passe toutes les 6 s (transform seulement, rien à repeindre) */
.ro-hero{position:relative;width:min(300px,84%);animation:ro-float 5s ease-in-out infinite;will-change:transform}
.ro-hero img{width:100%;filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
.ro-shine{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask:url(logofr.webp) center/contain no-repeat;mask:url(logofr.webp) center/contain no-repeat}
.ro-shine::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:22%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4) 50%,transparent);transform:translateX(-160%) skewX(-18deg);
  animation:ro-shine 6s ease-in-out 1.2s infinite}
@keyframes ro-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes ro-shine{0%{transform:translateX(-160%) skewX(-18deg)}22%,100%{transform:translateX(560%) skewX(-18deg)}}
.ro-fan{position:absolute;left:50%;top:44%;width:0;height:0}
.ro-fan .card{position:absolute;left:0;top:0;transform-origin:50% 120%}
.ro-daily{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;width:100%;text-align:left}
.ro-daily > b{flex:1;font-size:16px;line-height:1.05}
.ro-daily > b small{display:block;font-size:12px;font-weight:600;color:var(--ink-muted)}
.ro-dcase{position:relative;width:48px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:24px;
  background:linear-gradient(#2e403a,#1c2925);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1)}
.ro-dcase.done{background:linear-gradient(#4a9a6a,#2d6b48);color:#fff}
.ro-dcase .ro-bar{position:absolute;left:6px;right:6px;bottom:4px;height:4px}
.ro-action{display:grid;grid-template-columns:76px 1fr 76px;align-items:center;gap:8px;margin-top:12px}
/* choix du mode : bouton carré ardoise (planche Flow, case 6), deux cartes au lieu d'un jeton de casino */
.ro-chip{--lip:5px;--ol:#3a2414;position:relative;isolation:isolate;width:72px;height:76px;border-radius:17px;border:3px solid var(--ol);
  display:grid;place-items:center;align-content:center;gap:1px;padding-bottom:4px;
  background:linear-gradient(#6c8478,#3f5a4e);
  box-shadow:inset 0 0 0 2px #d9b65a,inset 0 calc(-1*var(--lip)) 0 #26382f,inset 0 calc(-1*var(--lip) - 2px) 0 #d9b65a,0 6px 12px rgba(0,0,0,.4);transition:transform .08s}
.ro-chip:active{transform:translateY(3px);--lip:2px}
.ro-play{--lip:8px;--ol:#3a2414;position:relative;isolation:isolate;height:78px;padding-bottom:5px;border-radius:22px;border:3px solid var(--ol);
  font-weight:800;font-size:36px;letter-spacing:1px;color:#fff;-webkit-text-stroke:5px var(--ol);paint-order:stroke fill;text-shadow:0 3px 0 var(--ol);
  background:linear-gradient(var(--c1),var(--c2));
  box-shadow:inset 0 calc(-1*var(--lip)) 0 var(--lc),inset 0 calc(-1*var(--lip) - 3px) 0 var(--ln),0 8px 18px rgba(0,0,0,.45);transition:transform .08s}
.ro-play::before{content:"";position:absolute;z-index:-1;left:8px;right:8px;top:5px;height:34%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.12))}
.ro-play:active{transform:translateY(4px);--lip:3px}
.ro-play small{position:absolute;top:-10px;right:10px;padding:1px 8px;border-radius:8px;background:#1d222b;color:var(--gold);font-size:11px;letter-spacing:0;text-shadow:none;box-shadow:0 0 0 1.5px var(--ro-gold-line)}
.ro-friends{--lip:6px;--ol:#3a2414;position:relative;isolation:isolate;width:74px;height:74px;border-radius:50%;border:3px solid var(--ol);
  display:grid;place-items:center;align-content:center;gap:0;padding-bottom:4px;
  background:linear-gradient(var(--c1),var(--c2));box-shadow:inset 0 calc(-1*var(--lip)) 0 var(--lc),inset 0 calc(-1*var(--lip) - 2px) 0 var(--ln),0 6px 12px rgba(0,0,0,.4);
  color:#fff;font-weight:800;font-size:12px;line-height:1.05;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill;transition:transform .08s}
.ro-friends::before{content:"";position:absolute;z-index:-1;left:14%;right:14%;top:6%;height:34%;border-radius:50%;background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.1))}
.ro-friends:active{transform:translateY(3px);--lip:3px}
.ro-friends ion-icon{font-size:28px}

/* ---- BOUTIQUE ---- */
.ro-ribbon{position:relative;margin:6px auto 4px;width:max-content;padding:4px 34px 6px;font-weight:800;font-size:26px;color:#5a3606;
  background:linear-gradient(#ffe39a,#e2a93f);border-radius:8px;box-shadow:0 4px 0 #8f6114,0 8px 16px rgba(0,0,0,.3);text-shadow:0 1px 0 #fff3}
.ro-ribbon::before,.ro-ribbon::after{content:"";position:absolute;top:10px;width:22px;height:100%;background:#b47f22;z-index:-1}
.ro-ribbon::before{left:-14px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 50%)}
.ro-ribbon::after{right:-14px;clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%)}
.ro-offer{position:relative;padding:10px 12px 12px;overflow:hidden}
.ro-offer h3{margin:0;font-size:20px;line-height:1.1}
.ro-offer .timer{position:absolute;top:10px;right:10px;font-size:12px;font-weight:800;padding:2px 8px;border-radius:8px;background:#0008;color:var(--gold)}
.ro-offer-body{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:center;margin-top:6px}
.ro-offer-body img{width:118px}
.ro-offer ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:3px;font-weight:700;font-size:14px}
.ro-offer li{display:flex;align-items:center;gap:6px}
.ro-offer li img{width:22px;height:22px}
.ro-offer .old{font-size:12px;color:var(--ink-muted);text-decoration:line-through;margin-right:6px}
.ro-plus-banner{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border-radius:var(--radius-lg);text-align:left;width:100%;
  background:linear-gradient(110deg,#5b2fb8,#8a3fd1 60%,#c25bd8);box-shadow:0 0 0 1.5px #ffd87a88,0 6px 14px rgba(0,0,0,.3)}
.ro-plus-banner > div{flex:1}
.ro-plus-banner .wm{height:30px;width:auto}
.ro-plus-banner small{display:block;font-size:12px;color:#f0e4ff;font-weight:700}
.ro-plus-banner .lion{width:62px;margin:-14px 0 -8px}
.ro-duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.ro-duo > button{display:flex;align-items:center;gap:8px;padding:8px;text-align:left}
.ro-duo img{width:46px;height:46px;object-fit:contain}
.ro-duo b{display:block;font-size:14px;line-height:1.1}
.ro-duo div span{font-size:12px;color:var(--ink-muted-light)}
.ro-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ro-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px 8px;text-align:center}
.ro-item .thumb{position:relative;height:70px;display:grid;place-items:center}
.ro-item .thumb img{max-height:70px;width:auto;border-radius:6px}
.ro-item .thumb .back{height:66px;box-shadow:0 0 0 1.5px #000,0 3px 6px #0008}
.ro-item .thumb .swatch{width:74px;height:50px;border-radius:10px;box-shadow:inset 0 0 0 2px #0006,0 3px 6px #0008;background-size:cover}
.ro-item .nm{font-size:12px;font-weight:700;color:var(--ink-muted-light);line-height:1}
.ro-item .qty{font-size:17px;font-weight:800;line-height:1}
.ro-item .ro-btn{width:100%;padding:0 6px}
.ro-tag{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);padding:0 8px;border-radius:8px;white-space:nowrap;font-size:11px;font-weight:800;line-height:17px;background:var(--ro-red);color:#fff;box-shadow:0 2px 0 #8e1d18}

/* ---- CARTES ---- */
.ro-seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:#0a120f;box-shadow:inset 0 0 0 1px #000}
.ro-seg button{flex:1;height:32px;border-radius:10px;font-weight:800;font-size:14px;color:var(--ink-muted)}
.ro-seg button[aria-pressed="true"]{background:linear-gradient(var(--ro-amber-top),var(--accent));color:var(--accent-ink)}
.ro-mytable{margin-top:10px;padding:8px 10px 10px}
.ro-mytable h4{margin:0 0 6px;font-size:15px;text-align:center}
.ro-mini-table{position:relative;height:124px;border-radius:18px;overflow:hidden;border:3px solid transparent;
  background:var(--tapis,linear-gradient(#2f7a5c,#1d4637)) padding-box center/cover,
    linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 40%,rgba(0,0,0,.25)) border-box,
    repeating-linear-gradient(92deg,#9a5a24 0 6px,#8a4e1d 6px 9px,#a3652c 9px 15px) border-box;
  outline:2px solid var(--ol);outline-offset:0;
  box-shadow:inset 0 0 0 1px #f2c55a,inset 0 0 0 1.5px #6b3a12,inset 0 10px 20px rgba(0,0,0,.5),0 4px 8px rgba(0,0,0,.35)}
.ro-mini-table::after{display:none}
.ro-mini-table .ro-fan{top:58%;left:42%}
.ro-mini-table .eq-back{position:absolute;right:18px;top:22px;width:46px;height:68px;border-radius:5px;object-fit:cover;box-shadow:0 0 0 1.5px #000,0 4px 8px #000a;transform:rotate(6deg)}
.ro-cats{display:flex;justify-content:space-between;margin:12px 2px 8px}
.ro-cat{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;font-weight:800;color:var(--ink-muted)}
.ro-cat span{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:24px;
  background:linear-gradient(#2c3a35,#17211d);box-shadow:inset 0 0 0 2px rgba(255,255,255,.1)}
.ro-cat span img{width:34px;height:34px;object-fit:contain}
.ro-cat[aria-pressed="true"]{color:var(--gold)}
.ro-cat[aria-pressed="true"] span{box-shadow:inset 0 0 0 2.5px var(--accent),0 0 12px #d9a44166}
.ro-coll{padding:10px}
.ro-coll .ro-grid3{gap:10px}
.ro-cell{position:relative;aspect-ratio:2/2.7;border-radius:12px;display:grid;place-items:center;background:#0a120f;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08)}
.ro-cell > img,.ro-cell > .card,.ro-cell > .swatch{max-width:78%;max-height:84%}
.ro-cell > img.back{width:70%;aspect-ratio:2/3;object-fit:cover;border-radius:6px;box-shadow:0 0 0 1.5px #000,0 3px 6px #0009}
.ro-cell > .swatch{width:84%;height:62%;border-radius:10px;background-size:cover;box-shadow:inset 0 0 0 2px #0006}
.ro-cell.eq{box-shadow:inset 0 0 0 2.5px var(--ro-green-top),0 0 14px #6fd08a44}
.ro-cell .eqtag{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);padding:0 8px;border-radius:8px;background:var(--ro-green);color:#fff;font-size:11px;font-weight:800;white-space:nowrap;box-shadow:0 2px 0 var(--ro-green-edge)}
.ro-cell.lock > *:not(.lk){filter:grayscale(1) brightness(.45)}
.ro-cell .lk{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:2px;font-size:22px;color:#fff}
.ro-cell .lk small{font-size:11px;font-weight:800;color:var(--gold)}
.ro-cell .new{position:absolute;top:0;right:0;overflow:hidden;width:56px;height:56px;border-radius:0 12px 0 0}
.ro-cell .new i{position:absolute;top:10px;right:-18px;width:80px;transform:rotate(45deg);text-align:center;background:var(--ro-red);color:#fff;font:800 10px/16px var(--font-fun)}
.ro-found{margin:10px auto 0;width:max-content;padding:3px 14px;border-radius:12px;background:#0008;font-weight:800;font-size:14px;color:var(--ink-soft)}

/* ---- AMIS ---- */
.ro-friendcard{position:relative;margin-top:30px;padding:12px 12px 14px}
.ro-friendcard h3{margin:0;font-size:20px;line-height:1.1}
.ro-friendcard .lion{position:absolute;right:4px;top:-46px;width:92px;filter:drop-shadow(0 4px 6px #0007)}
.ro-friendcard p{margin:4px 0 12px;color:var(--ink-muted-light);font-size:14px;max-width:70%}
.ro-friendbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ro-tables{padding:4px 10px}
.ro-trow{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--ro-panel-line)}
.ro-trow:last-child{border-bottom:0}
.ro-trow > div{flex:1;min-width:0}
.ro-trow b{display:block;font-size:15px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ro-faces{display:flex;margin-top:3px}
.ro-faces i{width:22px;height:22px;border-radius:50%;margin-right:-5px;display:grid;place-items:center;font:800 11px/1 var(--font-fun);color:#fff;box-shadow:0 0 0 2px #14201b}
.ro-seats{font-weight:800;font-size:15px}
.ro-mode{padding:1px 6px;border-radius:6px;background:#0a120f;font-size:11px;font-weight:800;color:var(--gold);line-height:1.2;text-align:center}
.ro-ladder{padding:10px 10px 8px}
.ro-merow{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:linear-gradient(#f9d681,#d9a441);color:var(--accent-ink);font-weight:800}
.ro-refer{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 12px;width:100%;text-align:left;font-weight:700;font-size:14px}
.ro-refer img{width:40px}
.ro-refer b{color:var(--gold)}

/* ---- SAISON ---- */
.ro-season-head{position:relative;margin-top:8px;padding:14px 12px 12px;min-height:104px;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(120deg,#7a3c12,#b5651d 55%,#d98c2b);box-shadow:0 0 0 1.5px #ffd87a77,0 6px 14px rgba(0,0,0,.3)}
.ro-season-head::before{content:"";position:absolute;inset:0;background:url("img/calendar/banner-m10.webp") center/cover;opacity:.28;mix-blend-mode:luminosity}
.ro-season-head > *{position:relative}
.ro-season-head h3{margin:0;font-size:25px;line-height:1.05;text-shadow:0 2px 0 #4a2008}
.ro-season-head .end{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:1px 10px;border-radius:10px;background:#0007;font-size:13px;font-weight:800}
.ro-season-head .lion{position:absolute;right:-6px;bottom:-14px;width:118px}
.ro-pass{margin-top:10px;padding:10px 0 12px}
.ro-pass h4{margin:0 12px 8px;display:flex;justify-content:space-between;align-items:center;font-size:16px}
.ro-pass h4 small{font-size:13px;color:var(--gold)}
.ro-pass-scroll{display:grid;grid-template-columns:30px 1fr;overflow:hidden}
.ro-pass-side{display:grid;grid-template-rows:62px 28px 62px;font-size:11px;font-weight:800;color:var(--ink-muted)}
.ro-pass-side span{writing-mode:vertical-rl;transform:rotate(180deg);display:grid;place-items:center}
.ro-pass-side span:last-child{color:var(--gold)}
.ro-pass-track{overflow-x:auto;scrollbar-width:none;touch-action:pan-x;padding-right:10px}
.ro-pass-track::-webkit-scrollbar{display:none}
.ro-pass-cols{display:grid;grid-auto-flow:column;grid-auto-columns:56px;gap:6px}
.ro-tier{display:grid;grid-template-rows:62px 28px 62px;justify-items:center;align-items:center}
.ro-rew{position:relative;width:54px;height:56px;border-radius:12px;display:grid;place-items:center;align-content:center;background:linear-gradient(#2e403a,#1c2925);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1)}
.ro-rew.prem{background:linear-gradient(#5a4320,#2e2310);box-shadow:inset 0 0 0 1.5px #ffd87a66}
.ro-rew img{width:34px;height:34px;object-fit:contain}
.ro-rew img.back{width:26px;height:38px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px #000}
.ro-rew img.felt{width:40px;height:28px;border-radius:5px;object-fit:cover;box-shadow:0 0 0 1px #000}
.ro-rew small{font-size:11px;font-weight:800;line-height:1}
.ro-rew.got::after{content:"✓";position:absolute;inset:0;border-radius:12px;display:grid;place-items:center;background:#0009;color:var(--green);font-size:24px;font-weight:800}
.ro-rew.prem.locked::before{content:"";position:absolute;right:3px;top:3px;width:10px;height:10px;border-radius:2px;background:#ffd87a}
.ro-node{position:relative;width:100%;height:28px;display:grid;place-items:center}
.ro-node::before{content:"";position:absolute;left:-3px;right:-3px;top:12px;height:5px;background:#0a120f}
.ro-node.on::before{background:var(--accent)}
.ro-node b{position:relative;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:#24312c;box-shadow:0 0 0 2px #0a120f}
.ro-node.on b{background:var(--accent);color:var(--accent-ink)}
.ro-node.cur b{box-shadow:0 0 0 3px #fff,0 0 12px #ffd87a}
.ro-pass-cta{display:flex;justify-content:flex-end;margin:10px 12px 0}
.ro-quests{padding:6px 12px}
.ro-q{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--ro-panel-line)}
.ro-q:last-child{border-bottom:0}
.ro-q > ion-icon{font-size:24px;color:var(--gold);flex:0 0 auto}
.ro-q > img{width:38px;height:36px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.ro-dcase{overflow:visible}
.ro-dcase > img{width:42px;height:40px;object-fit:contain;translate:0 -7px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}
.ro-q > div{flex:1;min-width:0}
.ro-q b{display:block;font-size:14px;line-height:1.15}
.ro-q .ro-bar{height:8px;margin-top:5px}
.ro-q .n{font-size:13px;font-weight:800;color:var(--ink-muted-light);min-width:28px;text-align:right}
.ro-q .ro-btn{flex:0 0 auto}
.ro-q.claimed .n{color:var(--green)}
.ro-event{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;width:100%;text-align:left}
.ro-event > div{flex:1}
.ro-event b{display:block;font-size:16px;line-height:1.1}
.ro-event > div span{font-size:12px;color:var(--ink-muted-light)}
.ro-event > img{width:46px;height:46px;object-fit:contain}
.ro-event > ion-icon{font-size:22px;color:var(--ink-muted)}

/* ---- Fenêtres (sheet, dialogue, recherche, fin de partie) ---- */
.ro-layer{position:absolute;inset:0;z-index:20;display:none}
.ro-layer.open{display:block}
.ro-backdrop{position:absolute;inset:0;background:rgba(3,8,6,.6);opacity:0;transition:opacity .25s}
.ro-layer.shown .ro-backdrop{opacity:1}
.ro-sheet{position:absolute;left:0;right:0;bottom:0;max-height:82%;overflow-y:auto;padding:8px 14px calc(18px + env(safe-area-inset-bottom));
  border-radius:22px 22px 0 0;background:linear-gradient(#22312b,#16201c);box-shadow:0 -10px 30px rgba(0,0,0,.5);transform:translateY(100%);transition:transform .32s var(--ease-out-quint)}
.ro-layer.shown .ro-sheet{transform:none}
.ro-sheet .grab{width:44px;height:5px;border-radius:3px;background:#ffffff33;margin:0 auto 10px}
.ro-sheet h3{margin:0 0 10px;font-size:20px}
.ro-list button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border-bottom:1px solid var(--ro-panel-line);font-weight:700;font-size:16px;text-align:left}
.ro-list button ion-icon{font-size:22px;color:var(--gold)}
.ro-list button span{flex:1}
.ro-list button small{font-size:13px;color:var(--ink-muted);font-weight:600}
.ro-opt{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:8px;padding:10px 12px;border-radius:14px;text-align:left;background:#0a120f88;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08)}
.ro-opt[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--accent);background:#d9a4411a}
.ro-opt b{display:block;font-size:17px}
.ro-opt span{font-size:13px;color:var(--ink-muted-light)}
.ro-opt > div{flex:1}
.ro-opt i{font-style:normal;font-size:20px;color:var(--accent)}
.ro-codein{display:flex;justify-content:center;gap:8px;margin:6px 0 14px}
.ro-codein input{width:50px;height:58px;border-radius:12px;border:0;text-align:center;font:800 30px/1 var(--font-fun);text-transform:uppercase;background:var(--card-bg);color:var(--card-black);box-shadow:0 3px 0 #b9b2a0}
.ro-dialog{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-40%) scale(.96);opacity:0;padding:18px 16px 16px;text-align:center;
  border-radius:20px;background:linear-gradient(#22312b,#16201c);box-shadow:0 0 0 1.5px var(--ro-gold-line),var(--shadow-modal);transition:.22s var(--ease-out-quint)}
.ro-layer.shown .ro-dialog{transform:translateY(-50%);opacity:1}
.ro-dialog img{width:96px;margin:-62px auto 4px}
.ro-dialog h3{margin:0 0 4px;font-size:22px}
.ro-dialog p{margin:0 0 14px;color:var(--ink-muted-light)}
.ro-dialog .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ================= Style « jeu » partout (2026-10-31) =================
   Même famille que les boutons de la planche Flow : contour brun --ol, face en dégradé,
   reflet clair en haut, lèvre foncée en bas. Ce bloc vient en dernier et prime. */
:root{--ol:#2a1a0e;--slate1:#476a5b;--slate2:#2f4d41;--well:#1d3229;--gold-in:#d9b65a}
/* cadres */
.ro-panel{background:linear-gradient(var(--slate1),var(--slate2));border:2.5px solid var(--ol);border-radius:18px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.16),inset 0 -5px 0 rgba(0,0,0,.2),0 4px 0 rgba(0,0,0,.25)}
.ro-panel.gold{border:2.5px solid var(--ol);box-shadow:inset 0 0 0 2px var(--gold-in),inset 0 2px 0 4px rgba(255,255,255,.12),inset 0 -6px 0 rgba(0,0,0,.2),0 4px 0 rgba(0,0,0,.25)}
.ro-sheet,.ro-dialog{background:linear-gradient(var(--slate1),var(--slate2) 40%,#253f35);border:3px solid var(--ol)}
.ro-sheet{border-bottom:0}
.ro-dialog{box-shadow:inset 0 0 0 2px var(--gold-in),var(--shadow-modal)}
/* titres en blanc cerclé, comme le texte des boutons */
.ro-h,.ro-offer h3,.ro-friendcard h3,.ro-season-head h3,.ro-sheet h3,.ro-dialog h3{color:#fff;-webkit-text-stroke:4px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol)}
.ro-h small{-webkit-text-stroke:0;text-shadow:none;color:#cfe3d8}
/* cases et puits */
.ro-cell,.ro-rew,.ro-dcase{background:linear-gradient(#1a2c25,var(--well));border:2px solid var(--ol);box-shadow:inset 0 2px 0 rgba(0,0,0,.35),inset 0 -2px 0 rgba(255,255,255,.08)}
.ro-dcase.done{background:linear-gradient(#aee374,#73c337);box-shadow:inset 0 -4px 0 #2c863a,inset 0 2px 0 rgba(255,255,255,.4);color:#fff}
.ro-cell.eq{box-shadow:inset 0 0 0 2px var(--gold-in),0 0 0 2px var(--gold-in)}
/* petits boutons carrés du haut (journal, menu) */
.ro-sq{isolation:isolate;border:2.5px solid var(--ol);border-radius:13px;color:#fff;background:linear-gradient(#6c8478,#3f5a4e);
  box-shadow:inset 0 -4px 0 #26382f,inset 0 -6px 0 #7f988b,0 3px 5px rgba(0,0,0,.35)}
.ro-sq::before{content:"";position:absolute;z-index:-1;left:4px;right:4px;top:3px;height:34%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.08))}
.ro-sq:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 #26382f,0 1px 2px rgba(0,0,0,.35)}
.ro-sq ion-icon{filter:drop-shadow(0 2px 0 var(--ol))}
/* bandeau du haut */
.ro-lvl-badge{border:2.5px solid var(--ol);background:linear-gradient(#ff8a78,#e0443a 55%,#b52a23);
  box-shadow:inset 0 -4px 0 #8e1d18,inset 0 3px 0 rgba(255,255,255,.35),0 3px 5px rgba(0,0,0,.4);-webkit-text-stroke:3px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol)}
.ro-xp,.ro-money,.ro-bar{border:2px solid var(--ol);background:#13211b;box-shadow:inset 0 2px 0 rgba(0,0,0,.45)}
.ro-xp{height:20px;margin-left:-10px}
.ro-xp i{inset:2px 2px 2px 10px;width:calc((100% - 12px) * var(--xp,.6));background:linear-gradient(#a6d8fa,#56a9ee 55%,#3f8fd6);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.ro-xp b{line-height:16px;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill;text-shadow:none}
.ro-money{height:30px}
.ro-money span{color:#fff;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill}
.ro-plus{position:relative;isolation:isolate;border:2px solid var(--ol);border-radius:8px;background:linear-gradient(#aee374,#73c337);
  box-shadow:inset 0 -3px 0 #2c862a;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill;text-shadow:none}
/* barres de progression : creux sombre, remplissage brillant */
.ro-bar{height:12px;border-radius:7px}
.ro-bar i{box-shadow:inset 0 -3px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.35)}
/* pastilles */
.ro-pastille{border:2px solid var(--ol);background:linear-gradient(#ff6a5e,#d8322c);line-height:15px;box-shadow:inset 0 -2px 0 #8e1d18;-webkit-text-stroke:2px var(--ol);paint-order:stroke fill}
/* barre d'onglets */
.ro-tabs{background:linear-gradient(#2f4a3f,#1e3129);border-top:3px solid var(--ol);box-shadow:inset 0 2px 0 rgba(255,255,255,.1),0 -6px 18px rgba(0,0,0,.35)}
.ro-tab{border-right:2px solid rgba(0,0,0,.35)}
.ro-tab[aria-selected="true"]{background:linear-gradient(#5fb98c,#3b8d64 60%,#2f7653);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -4px 0 #225c40,inset 2px 0 0 var(--ol),inset -2px 0 0 var(--ol)}
.ro-tab[aria-selected="true"] .ro-lab{-webkit-text-stroke:3px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol)}
/* sélecteur à onglets (Cartes) */
.ro-seg{border:2.5px solid var(--ol);background:var(--well)}
.ro-seg button[aria-pressed="true"]{background:linear-gradient(#a6d8fa,#56a9ee);box-shadow:inset 0 -3px 0 #2e64b5;color:#fff;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill}
/* boutons secondaires : ardoise brillante au lieu d'un contour plat */
.ro-btn.ghost{--c1:#6c8478;--c2:#465f53;--lc:#26382f;--ln:#7f988b;border:2.5px solid var(--ol);color:#fff;-webkit-text-stroke:3px var(--ol);text-shadow:0 2px 0 var(--ol);
  background:linear-gradient(var(--c1),var(--c2));box-shadow:inset 0 calc(-1*var(--lip)) 0 var(--lc),inset 0 calc(-1*var(--lip) - 2px) 0 var(--ln),0 3px 6px rgba(0,0,0,.35)}
.ro-btn.ghost::before{display:block}
.ro-gain{background:linear-gradient(#1a2c25,var(--well));border:2px solid var(--ol);box-shadow:inset 0 2px 0 rgba(0,0,0,.35)}

/* ajouts : fonctions du vrai jeu absentes de la v1 */
.ro-ticker{display:flex;align-items:center;gap:6px;margin:8px auto 0;padding:3px 12px;width:fit-content;max-width:100%;border-radius:999px;border:2px solid var(--ol);
  background:rgba(13,24,20,.75);font-size:12.5px;font-weight:700;color:#e8f2ec;white-space:nowrap;overflow:hidden}
.ro-ticker ion-icon{color:var(--gold);flex:0 0 auto}.ro-ticker b{color:var(--gold)}
.ro-side{position:absolute;z-index:2;top:12%;display:grid;justify-items:center;gap:2px;width:58px}
.ro-side.left{left:0}.ro-side.right{right:0}
.ro-side img{width:52px;height:52px;padding:7px;border-radius:15px;border:2.5px solid var(--ol);background:linear-gradient(#6c8478,#3f5a4e);
  box-shadow:inset 0 -4px 0 #26382f,inset 0 -6px 0 #7f988b,0 3px 5px rgba(0,0,0,.35);object-fit:contain}
.ro-side span{font-weight:800;font-size:12px;line-height:1.05;text-align:center;color:#fff;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill}
.ro-side small{font-size:11px;color:var(--gold)}
.ro-side .ro-pastille{top:-4px;right:0}
.ro-side:active img{transform:translateY(2px)}
.ro-claw{display:block;width:100%;margin-top:10px;padding:0;overflow:hidden}
.ro-claw img{width:100%;display:block}


/* finitions : tout ce qui était resté plat passe dans la même famille */
.ro-passcard,.ro-merow{border:2.5px solid var(--ol);background:linear-gradient(#fbd77a,#f0ae35);
  box-shadow:inset 0 -5px 0 #c66f1b,inset 0 -7px 0 #f6c35a,inset 0 2px 0 rgba(255,255,255,.45),0 3px 5px rgba(0,0,0,.3)}
.ro-passcard b,.ro-merow > span:first-of-type{color:#fff;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill}
.ro-plus-banner{border:2.5px solid var(--ol);box-shadow:inset 0 -5px 0 rgba(40,10,70,.45),inset 0 2px 0 rgba(255,255,255,.3),0 3px 5px rgba(0,0,0,.3)}
.ro-cat span{border:2.5px solid var(--ol);background:linear-gradient(#6c8478,#3f5a4e);box-shadow:inset 0 -4px 0 #26382f,inset 0 3px 0 rgba(255,255,255,.25),0 3px 4px rgba(0,0,0,.35)}
.ro-cat[aria-pressed="true"] span{background:linear-gradient(#fbd77a,#f0ae35);box-shadow:inset 0 -4px 0 #c66f1b,inset 0 3px 0 rgba(255,255,255,.45),0 0 0 2px var(--gold-in),0 3px 4px rgba(0,0,0,.35)}
.ro-cat{color:#fff;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill}
.ro-avatar{border:2.5px solid var(--ol);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.4)}
.ro-podium .step{border:2.5px solid var(--ol);border-bottom-width:0;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.18)}
.ro-tag,.ro-found,.ro-mode{border:2px solid var(--ol)}
.ro-tag{box-shadow:inset 0 -2px 0 #8e1d18;-webkit-text-stroke:2px var(--ol);paint-order:stroke fill}
.ro-found{background:var(--well);color:#fff}
.ro-letters b{border:2.5px solid var(--ol);box-shadow:inset 0 -4px 0 #d6cdb6}
.ro-node b{border:2px solid var(--ol);box-shadow:inset 0 2px 0 rgba(255,255,255,.15)}
.ro-season-head{border:2.5px solid var(--ol);box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.3)}
.ro-side.left img,.ro-side.right img{background:linear-gradient(#fbd77a,#f0ae35);box-shadow:inset 0 -4px 0 #c66f1b,inset 0 -6px 0 #f6c35a,0 3px 5px rgba(0,0,0,.35)}

/* titre de la Boutique sur le ruban généré (planche D), carte du passe aérée */
.ro-ribbon{width:236px;height:72px;margin:2px auto 2px;padding:0 0 14px;display:grid;place-items:center;background:url(img/refonte/ruban.webp) center/contain no-repeat;
  font-size:25px;color:#fff;-webkit-text-stroke:5px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol);box-shadow:none;border-radius:0}
.ro-ribbon::before,.ro-ribbon::after{display:none}
.ro-passcard{height:58px;padding:6px 8px 10px 12px}
.ro-passcard b{font-size:15px;line-height:1.1}
.ro-passcard .ro-bar{position:relative;height:17px;margin-top:5px;border-radius:9px;background:#5a3a0c;box-shadow:inset 0 2px 0 rgba(0,0,0,.35)}
.ro-passcard .ro-bar i{display:block;height:100%;width:var(--p);border-radius:7px;background:linear-gradient(#aee374,#73c337);box-shadow:inset 0 -3px 0 #2c862a,inset 0 2px 0 rgba(255,255,255,.4)}
.ro-passcard .ro-bar em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;color:#fff;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill}
.ro-passcard img{width:44px;height:44px;object-fit:contain;flex:0 0 auto}

/* en-tête de saison : la vraie bannière du passe (img/calendar/banner-pass-grandsalon.webp, saison T4) */
.ro-season-head{min-height:132px;padding:12px 14px 12px;background:#2a1a0e}
.ro-season-head::before{background:url("img/calendar/banner-pass-grandsalon.webp") 60% 40%/cover;opacity:1;mix-blend-mode:normal}
.ro-season-head::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,10,4,.82),rgba(20,10,4,.35) 55%,transparent 80%),linear-gradient(transparent 60%,rgba(20,10,4,.5))}
.ro-season-head > *{z-index:1}
.ro-season-head .kicker{display:block;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--gold)}
.ro-season-head h3{font-size:28px;margin-top:1px}
.ro-season-head .tag{margin:2px 0 0;max-width:62%;font-size:13px;font-weight:700;line-height:1.2;color:#f3e6cf;text-shadow:0 1px 2px #000}
.ro-season-head .end{margin-top:8px;border:2px solid var(--ol);background:rgba(20,10,4,.75);color:#fff}

/* icônes de la planche F */
.ro-event > img{width:44px;height:44px;object-fit:contain}
.ro-friends img{width:40px;height:30px;object-fit:contain;margin-bottom:1px;filter:drop-shadow(0 1px 0 var(--ol))}
.ro-side img{padding:4px}

/* barre d'onglets : les icônes dépassent un peu vers le haut pour le relief */
.ro-tabs{overflow:visible}
.ro-tab .ro-ico{transform:translateY(-9px);filter:saturate(.85) brightness(.92) drop-shadow(0 3px 2px rgba(0,0,0,.35))}
.ro-tab .ro-ico img{max-width:48px;max-height:48px}
.ro-tab[aria-selected="true"] .ro-ico{transform:translateY(-17px) scale(1.22);filter:drop-shadow(0 5px 3px rgba(0,0,0,.4))}
.ro-tab[aria-selected="true"] .ro-lab{margin-top:-10px}
/* compte Rami+ (VIP) : bouton JOUER PRO, avatar couronné, bulle d'offre masquée */
.ro-pro{display:none;position:relative;isolation:isolate;width:100%;height:54px;margin-top:8px;padding:0 12px 4px 8px;align-items:center;gap:10px;border-radius:16px;
  border:2.5px solid var(--ol);background:linear-gradient(#8fd0fb,#3f93e6);text-align:left;color:#fff;
  box-shadow:inset 0 -5px 0 #2e64b5,inset 0 -7px 0 #86c6f6,0 4px 8px rgba(0,0,0,.4)}
.ro-pro::before{content:"";position:absolute;z-index:-1;left:6px;right:6px;top:3px;height:36%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.1))}
.ro-pro:active{transform:translateY(2px)}
.ro-pro img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 0 var(--ol))}
.ro-pro b{display:block;font-size:21px;line-height:1;letter-spacing:.5px;-webkit-text-stroke:4px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol)}
.ro-pro small{display:block;margin-top:2px;font-size:11.5px;font-weight:800;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill}
.ro-app.vip .ro-pro{display:flex}
.ro-app.vip .ro-bulle{display:none}
.ro-app.vip .ro-me .ro-avatar{position:relative;overflow:visible;box-shadow:0 0 0 2px var(--gold-in),0 0 12px #f5c84f99}
.ro-app.vip .ro-me .ro-avatar::after{content:"";position:absolute;left:50%;top:-15px;width:26px;height:22px;margin-left:-13px;background:url(img/refonte/ico-tournoi.webp) center/contain no-repeat}
.ro-app.vip .ro-me-name span{color:#d9b8ff;font-weight:800}

/* le logo suit la hauteur libre (accueil Rami+ plus chargé, petits écrans) */
.ro-stage{container-type:size;min-height:150px}
.ro-hero{width:min(300px,84%,96cqh)}

/* Bandeau Rami+ : scène Flow (couronne, coffre, cartes), texte à gauche */
.ro-plus-banner{position:relative;overflow:hidden;isolation:isolate;display:block;min-height:172px;padding:12px 14px;
  background:#4a1f8f url(img/refonte/rami-plus-banniere.webp) 72% center/cover no-repeat}
.ro-plus-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(52,18,110,.85) 0%,rgba(52,18,110,.55) 42%,transparent 62%)}
.ro-plus-banner > div{width:56%}
.ro-plus-banner .wm{height:34px;display:block;filter:drop-shadow(0 2px 0 var(--ol))}
.ro-plus-banner ul{list-style:none;margin:6px 0 9px;padding:0}
.ro-plus-banner li{font-size:12.5px;font-weight:800;color:#fff;line-height:1.35;padding-left:17px;position:relative;text-shadow:0 1px 2px #2a0e55}
.ro-plus-banner li::before{content:"✓";position:absolute;left:0;color:#ffd75e}

/* Un peu de vie : seulement scale/translate/rotate/opacity (les propriétés seules ne gênent pas les transform au toucher) */
.ro-play{animation:ro-breathe 2.8s ease-in-out infinite}
.ro-play,.ro-pro{position:relative;overflow:hidden}
.ro-glint{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:1}
.ro-glint::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:28%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:ro-sweep 4.5s ease-in-out infinite}
.ro-pro .ro-glint::before{animation-delay:1.5s}
.ro-plus-banner .ro-glint::before{width:20%;animation-duration:6s;animation-delay:.8s}
.ro-pastille{animation:ro-hop 2.4s ease-in-out infinite}
.ro-side img{animation:ro-bob 3.2s ease-in-out infinite}
.ro-side.right img{animation-delay:-1.6s}
.ro-side.season img{animation:ro-wobble 2.6s ease-in-out infinite;transform-origin:50% 85%}
.ro-passcard > img{animation:ro-wiggle 4s ease-in-out infinite;transform-origin:50% 90%}
.ro-claw img{animation:ro-bob 3.6s ease-in-out infinite}
.ro-tab[aria-selected="true"] .ro-ico{animation:ro-bob 2.6s ease-in-out infinite}
#ticker{display:inline-block}
@keyframes ro-breathe{0%,100%{scale:1}50%{scale:1.035}}
@keyframes ro-sweep{0%{translate:-150% 0;rotate:0deg}45%,100%{translate:480% 0}}
@keyframes ro-hop{0%,62%,100%{translate:0 0}70%{translate:0 -6px}78%{translate:0 0}84%{translate:0 -3px}90%{translate:0 0}}
@keyframes ro-bob{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes ro-wobble{0%,100%{rotate:-5deg}50%{rotate:5deg}}
@keyframes ro-wiggle{0%,72%,100%{rotate:0deg}76%{rotate:-8deg}80%{rotate:7deg}84%{rotate:-5deg}88%{rotate:3deg}92%{rotate:0deg}}
.ro-h.first{margin-top:2px}
.ro-trow b{display:block;line-height:1.2}
.ro-medal{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:19px;color:#fff;
  border:2.5px solid var(--ol);-webkit-text-stroke:3px var(--ol);paint-order:stroke fill;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.5)}
.ro-medal.r1{background:linear-gradient(#ffe27a,#e9a92c)}.ro-medal.r2{background:linear-gradient(#eef2f6,#a9b4c0)}.ro-medal.r3{background:linear-gradient(#f2b27c,#b86a32)}
/* Saison : bannière et passe collés en une seule carte */
.ro-season-head{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:0}
.ro-season-head + .ro-pass{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
/* Plaque du joueur : style jeu (contour --ol, anneau, lèvre), qui monte avec le Prestige 0–V (paliers de locales/fr.js) */
.ro-plate{--r1:#7f988b;--f1:#4d7262;--f2:#2c4a3d;--lp:#1d3229;position:relative;isolation:isolate;flex:0 1 auto;min-width:172px;max-width:236px;margin-right:auto;
  text-align:center;padding:7px 18px 9px;border-radius:16px;border:2.5px solid var(--ol);background:linear-gradient(var(--f1),var(--f2));
  box-shadow:inset 0 0 0 2.5px var(--r1),inset 0 -6px 0 var(--lp),inset 0 4px 0 rgba(255,255,255,.14),0 3px 0 rgba(0,0,0,.35),0 5px 10px rgba(0,0,0,.25)}
.ro-plate::before{content:"";position:absolute;z-index:-1;left:9px;right:9px;top:5px;height:38%;border-radius:10px;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0))}
.ro-plate:active{translate:0 2px}
.ro-pwrap{position:relative;display:inline-block;max-width:100%}
.ro-pname{display:block;font-size:24px;font-weight:900;line-height:1.08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;
  color:#fff;-webkit-text-stroke:4px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol)}
.ro-plate small{display:block;margin-top:3px;font-size:12px;font-weight:800;color:#d7e6dd;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.ro-plate em{font-style:normal;font-weight:900;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--r1)}
.ro-plate em:empty,.ro-plate em:empty + .sep{display:none}
/* I : le titre sous le pseudo, anneau bronze */
.ro-plate[data-p="1"]{--r1:#d08a4a}
/* II : pseudo en or, anneau argent */
.ro-plate[data-p="2"]{--r1:#dfe6ee}
.ro-plate[data-p="2"] .ro-pname,.ro-plate[data-p="3"] .ro-pname,.ro-plate[data-p="4"] .ro-pname,.ro-plate[data-p="5"] .ro-pname{-webkit-text-stroke:0;text-shadow:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%),linear-gradient(180deg,#fff6cf 0%,#ffd45a 45%,#e48d17 100%);
  background-size:280% 100%,100% 100%;background-position:120% 0,0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #2a1a0e) drop-shadow(1.5px 0 0 #2a1a0e) drop-shadow(-1.5px 0 0 #2a1a0e) drop-shadow(0 -1.5px 0 #2a1a0e)}
/* III : un reflet traverse le pseudo, anneau or */
.ro-plate[data-p="3"],.ro-plate[data-p="4"]{--r1:#f5c84f}
.ro-plate[data-p="3"] .ro-pname,.ro-plate[data-p="4"] .ro-pname,.ro-plate[data-p="5"] .ro-pname{animation:ro-pshine 4s ease-in-out infinite}
/* IV : étincelles, face plus riche */
.ro-plate[data-p="4"]{--f1:#2f6b57;--f2:#163d31;--lp:#0f2a21}
.ro-spark{display:none;position:absolute;inset:0;pointer-events:none}
.ro-plate[data-p="4"] .ro-spark,.ro-plate[data-p="5"] .ro-spark{display:block}
.ro-spark i{position:absolute;color:#fff1b8;font-style:normal;opacity:0;text-shadow:0 0 4px #ffd45a;animation:ro-twinkle 2.8s ease-in-out infinite}
.ro-spark i::before{content:"✦"}
.ro-spark i:nth-child(1){font-size:12px;top:-7px;right:-12px}
.ro-spark i:nth-child(2){font-size:9px;bottom:-2px;left:-11px;animation-delay:.9s}
.ro-spark i:nth-child(3){font-size:8px;top:-6px;left:30%;animation-delay:1.7s}
.ro-spark i:nth-child(4){font-size:8px;bottom:-5px;right:18%;animation-delay:2.2s}
.ro-spark i:nth-child(5){font-size:10px;top:35%;right:-17px;animation-delay:.4s}
/* V : halo doré, face violette impériale, titre qui brille */
.ro-plate[data-p="5"]{--r1:#ffd45a;--f1:rgba(8,18,14,.5);--f2:rgba(4,10,8,.72);--lp:rgba(0,0,0,.35);box-shadow:inset 0 0 0 2.5px var(--r1),inset 0 -6px 0 var(--lp),inset 0 4px 0 rgba(255,255,255,.18),0 3px 0 rgba(0,0,0,.35),0 0 14px rgba(255,212,90,.55)}
.ro-plate[data-p="5"] .ro-pwrap::before{content:"";position:absolute;inset:-8px -16px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,212,90,.45),transparent);animation:ro-halo 3s ease-in-out infinite}
.ro-plate[data-p="5"] small{color:#f3e6cf}
.ro-plate[data-p="5"] em{background:linear-gradient(100deg,#ffe27a 40%,#fff 50%,#ffe27a 60%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:ro-tshine 4s ease-in-out infinite}
@keyframes ro-pshine{0%,45%{background-position:120% 0,0 0}85%,100%{background-position:-20% 0,0 0}}
@keyframes ro-tshine{0%,40%{background-position:100% 0}80%,100%{background-position:0 0}}
@keyframes ro-twinkle{0%,100%{opacity:0;scale:.4}50%{opacity:1;scale:1}}
@keyframes ro-halo{0%,100%{opacity:.3}50%{opacity:.9}}
/* Créer salon : le carré à gauche de JOUER */
.ro-newroom{flex-direction:column;gap:0}
.ro-newroom img{width:54px;height:40px;object-fit:contain;margin-top:-2px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.ro-newroom span{font-size:12px;line-height:1.05;font-weight:900;color:#fff;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill;text-align:center}
.ro-friends ion-icon{font-size:26px;filter:drop-shadow(0 2px 0 var(--ol))}
.ro-friends img.key{width:40px;height:36px;margin:-4px 0 0;rotate:-12deg;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
/* Offre spéciale : étiquette dans l'onglet Boutique (ne déborde plus sur Créer salon) */
.ro-bulle{left:50%;bottom:5px;translate:-50% 0;padding:1px 7px 2px;border-radius:9px;white-space:nowrap;font-size:10.5px;font-weight:900;line-height:1.3;color:#fff;
  background:linear-gradient(#ff7d6b,#e0362c);border:2px solid var(--ol);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill;z-index:3}
.ro-bulle::after{display:none}
/* Catégories de la collection : tuiles carrées style jeu, icône Flow qui dépasse */
.ro-cats{margin:14px 0 8px;gap:6px}
.ro-cat{flex:1;gap:4px;font-size:12.5px}
.ro-cat span{width:100%;max-width:62px;height:52px;border-radius:16px;overflow:visible;
  background:linear-gradient(#6c8478,#3f5a4e);box-shadow:inset 0 -5px 0 #26382f,inset 0 -7px 0 #7f988b,inset 0 3px 0 rgba(255,255,255,.22),0 3px 4px rgba(0,0,0,.35)}
.ro-cat span img{width:48px;height:44px;object-fit:contain;translate:0 -9px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));transition:scale .2s}
.ro-cat[aria-pressed="true"] span{background:linear-gradient(#fbd77a,#f0ae35);box-shadow:inset 0 -5px 0 #c66f1b,inset 0 -7px 0 #f6c35a,inset 0 3px 0 rgba(255,255,255,.45),0 0 0 2px var(--gold-in),0 3px 6px rgba(0,0,0,.35)}
.ro-cat[aria-pressed="true"] span img{scale:1.12}
.ro-cat[aria-pressed="true"]{color:#ffe08a}
/* Logo plus large : il déborde de sa zone et mord sur le fil des gagnants et la barre d'ELO (les boutons latéraux restent dessus) */
.ro-stage{z-index:1}
.ro-hero{width:min(372px,108%,124cqh);z-index:1}
.ro-ticker,.ro-progress{position:relative;z-index:2}

/* ================= Intégration dans le jeu (données réelles) ================= */
.ro-top{padding-top:max(8px,env(safe-area-inset-top))}
.ro-pane{padding-bottom:22px}
.ro-shine{-webkit-mask-image:var(--logo-mask);mask-image:var(--logo-mask)}
.ro-season-head::before{background-image:var(--season-banner)}
.ro-play small img{display:inline-block;width:13px;height:13px;margin-left:3px;vertical-align:-2px}
.ro-play small{-webkit-text-stroke:0}
.ro-side[hidden]{display:none}
.ro-side span small{display:block}
.ro-empty{margin:0;padding:12px 4px;text-align:center;font-size:14px;font-weight:700;color:#cfe3d8}
.ro-more{display:flex;justify-content:center;margin-top:10px}
.ro-more .ro-btn{min-width:60%}
.ro-league .rk{width:38px;height:38px;object-fit:contain}
.ro-league div{min-width:0}
.ro-league b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ro-dcase:empty{display:none}
/* boutique : prix réels, tuiles de packs */
.ro-item .ro-btn{white-space:nowrap}
.ro-item .bonus{font-size:12px;font-weight:800;color:#bfe8ff;line-height:1}
.ro-offer-body ul li{line-height:1.2}
.ro-plus-banner.on .ro-btn{--c1:#a6d8fa;--c2:#56a9ee;--lc:#2e64b5;--ln:#86c6f6}
.ro-duo > button > div{min-width:0}
/* cartes : aperçus du jeu (paintCosmeticPreview) dans les cases */
.ro-cell{overflow:hidden;padding:6px}
.ro-cell > span:first-child{display:grid;place-items:center;width:100%;height:100%;pointer-events:none}
.ro-cell > span:first-child > *{max-width:100%;max-height:100%}
.ro-cell .nm{position:absolute;left:4px;right:4px;bottom:3px;font-size:10.5px;font-weight:800;line-height:1.1;text-align:center;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-text-stroke:2px var(--ol);paint-order:stroke fill}
.ro-cell.eq .nm{display:none}
.ro-mini-table .eq-back[hidden]{display:none}
.ro-fan .ro-fan-card{position:absolute;left:0;top:0;width:34px;height:48px;border-radius:4px;transform-origin:50% 120%;box-shadow:0 0 0 1px #0008,0 3px 6px #0007}
/* salons : classement en liste avec médailles */
.ro-lrow{display:flex;align-items:center;gap:10px;padding:6px 2px;font-weight:800}
.ro-lrow > span:nth-child(2){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ro-lrow .ro-medal{width:32px;height:32px;font-size:16px}
.ro-merow{margin-top:6px}
.ro-merow > span:first-child{flex:1}
.ro-friendcard p{max-width:64%}
/* saison : vrais paliers du passe (seasonRewardEl) */
.ro-rew > *{max-width:46px;max-height:46px}
.ro-rew .sp-reward{display:grid;place-items:center;gap:1px;font-size:10px;font-weight:800;line-height:1;text-align:center}
.ro-rew .sp-reward img{max-width:32px;max-height:30px;object-fit:contain}
.ro-q .gift{font-size:12px;font-weight:800;color:var(--gold)}
/* menu ☰ : fenêtre du jeu (.overlay, donc Échap et Retour la ferment) habillée en feuille */
.ro-sheet-ov .ro-sheet{font:500 15px/1.35 var(--font-fun);color:var(--ink);text-align:left}
.overlay.ro-sheet-ov{place-content:end center;padding:0;background:rgba(3,8,6,.6)}
.ro-sheet-ov .ro-sheet{position:relative;width:min(560px,100vw);max-height:82dvh;transform:none;animation:ro-sheet-up .32s var(--ease-out-quint)}
.ro-sheet-ov .ro-sheet > h3:first-of-type{padding-inline-end:48px}
.ro-list button[aria-checked] i{width:42px;height:24px;border-radius:12px;background:#13211b;border:2px solid var(--ol);position:relative;flex:0 0 auto}
.ro-list button[aria-checked] i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#7f988b;transition:transform .2s}
.ro-list button[aria-checked="true"] i{background:linear-gradient(#aee374,#73c337)}
.ro-list button[aria-checked="true"] i::after{transform:translateX(18px);background:#fff}
.ro-langs{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:6px}
.ro-langs button{padding:9px 10px;border-radius:12px;background:#0a120f88;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08);font-weight:700;font-size:14px;text-align:left}
.ro-langs button[aria-current="true"]{box-shadow:inset 0 0 0 2.5px var(--accent)}
@keyframes ro-sheet-up{from{transform:translateY(100%)}}
.ro-progress{display:flex;align-items:center;gap:8px;margin:2px auto 0;width:min(300px,86%);font-size:12px;font-weight:700;color:var(--ink-muted-light)}
.ro-progress .ro-bar{flex:1}
.ro-progress img{width:26px;height:26px}
.ro-app [hidden]{display:none!important}
/* bouton : la pastille de mise dépasse en haut ; la brillance (.ro-glint) se découpe elle-même */
.ro-play{overflow:visible}
.ro-ladder{display:block;width:100%}
.ro-grid3 > .ro-more{grid-column:1/-1;margin:4px 0}

/* ================= Écrans voisins habillés comme les onglets (toutes tailles) =================
   Accueil (connecté ou non, hors onglets du téléphone), « Nouveau salon » et salle d'attente.
   Uniquement de l'apparence : mêmes boutons, mêmes champs, même fonctionnement.
   Pas de « display » sur les boutons : l'attribut hidden doit continuer de les cacher. */
/* hauteur : #screen-home garde la sienne (style.css la divise par le zoom 1,2 de l'accueil ordinateur) */
#screen-create, #screen-lobby{min-height:100dvh}
:is(#screen-home, #screen-create, #screen-lobby){
  font-family:var(--font-fun);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff' fill-opacity='.035' font-family='Arial' font-size='26'%3E%3Ctext x='10' y='34'%3E%E2%99%A0%3C/text%3E%3Ctext x='70' y='34'%3E%E2%99%A5%3C/text%3E%3Ctext x='40' y='94'%3E%E2%99%A3%3C/text%3E%3Ctext x='96' y='94'%3E%E2%99%A6%3C/text%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(130% 70% at 50% 30%, #357a5f 0%, var(--felt) 42%, #1d4637 100%)}
/* cartes : le panneau sombre des onglets */
:is(#screen-home, #screen-create, #screen-lobby) .panel{
  background:var(--ro-panel);border:1px solid var(--ro-panel-line);border-radius:var(--radius-lg);box-shadow:0 6px 16px rgba(0,0,0,.25)}
#screen-home .home-panel .panel{padding:12px 14px 14px}
:is(#screen-create, #screen-lobby) .panel h2{
  color:#fff;font-weight:900;-webkit-text-stroke:4px #3a2414;paint-order:stroke fill;text-shadow:0 2px 0 #3a2414}
:is(#screen-home, #screen-create, #screen-lobby) label{
  color:var(--ink-soft);font-weight:800;font-size:17px;text-shadow:0 2px 0 rgba(0,0,0,.35)}
/* champs : creusés dans le panneau */
:is(#screen-home, #screen-create, #screen-lobby) :is(input:not([type=checkbox]):not([type=radio]), select){
  background:#0a120fcc;color:#fff;border:0;border-radius:14px;font-family:var(--font-fun);font-weight:700;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1),inset 0 3px 6px rgba(0,0,0,.45)}
:is(#screen-home, #screen-create, #screen-lobby) :is(input, select):focus{
  box-shadow:inset 0 0 0 2px var(--accent),inset 0 3px 6px rgba(0,0,0,.45),0 0 0 3px rgba(217,164,65,.3)}
/* boutons bonbon : contour sombre, lèvre colorée, reflet en haut (comme .ro-btn) */
:is(#screen-home, #screen-create, #screen-lobby) :is(button.primary, button.join){
  --lip:5px;--ol:#3a2414;position:relative;isolation:isolate;min-height:52px;border:2.5px solid var(--ol);border-radius:16px;
  font-weight:900;font-size:20px;color:#fff;-webkit-text-stroke:3.5px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol);
  background:linear-gradient(var(--c1),var(--c2));
  box-shadow:inset 0 calc(-1*var(--lip)) 0 var(--lc),inset 0 calc(-1*var(--lip) - 2px) 0 var(--ln),0 3px 6px rgba(0,0,0,.35);
  transition:transform .08s, box-shadow .08s}
:is(#screen-home, #screen-create, #screen-lobby) :is(button.primary, button.join)::before{
  content:"";position:absolute;z-index:-1;left:6px;right:6px;top:4px;height:34%;border-radius:999px;
  background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.15));pointer-events:none}
:is(#screen-home, #screen-create, #screen-lobby) button.primary{--c1:#fbd77a;--c2:#f0ae35;--lc:#c66f1b;--ln:#f6c35a}
:is(#screen-home, #screen-create, #screen-lobby) button.join{--c1:#a6d8fa;--c2:#56a9ee;--lc:#2e64b5;--ln:#86c6f6}
#screen-home .open-table button.join{--c1:#aee374;--c2:#73c337;--lc:#2c862a;--ln:#9bd95c;
  --lip:4px;min-height:34px;padding:0 12px 2px;font-size:14px;border-radius:11px;-webkit-text-stroke-width:2.5px}
:is(#screen-home, #screen-create, #screen-lobby) :is(button.primary, button.join):is(:hover, :active){
  filter:none;transform:none;background:linear-gradient(var(--c1),var(--c2));
  box-shadow:inset 0 calc(-1*var(--lip)) 0 var(--lc),inset 0 calc(-1*var(--lip) - 2px) 0 var(--ln),0 3px 6px rgba(0,0,0,.35)}
:is(#screen-home, #screen-create, #screen-lobby) :is(button.primary, button.join):active{transform:translateY(2px);--lip:2px}
:is(#screen-home, #screen-create, #screen-lobby) :is(button.primary, button.join) ion-icon{-webkit-text-stroke:0;filter:drop-shadow(0 2px 0 #3a2414)}
/* boutons secondaires : verre clair cerclé, comme .ro-btn.ghost */
#screen-home :is(.rules-btn, .link-btn),
:is(#screen-create, #screen-lobby) button:not(.primary):not(.join):not(.create-mode-card):not(.modal-inner-close){
  background:rgba(255,255,255,.07);border:0;border-radius:14px;color:var(--ink-soft);font-weight:800;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
#screen-home .link-btn{background:none;box-shadow:none;text-decoration:underline;text-underline-offset:3px}
/* cartes de mode du salon : panneaux, la carte choisie cerclée d'or */
#screen-create .create-mode-card{background:#0a120f88;border:0;border-radius:16px;opacity:.7;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1)}
#screen-create .create-mode-card.active{opacity:1;background:rgba(12,22,18,.9);box-shadow:inset 0 0 0 2.5px var(--gold),0 4px 12px rgba(0,0,0,.3)}
#screen-create .create-mode-card.private.active,
#screen-create .create-mode-card.bots.active{box-shadow:inset 0 0 0 2.5px #73c337,0 4px 12px rgba(0,0,0,.3)}

/* ================= Retours du créateur (2026-10-31, soir) ================= */
/* survol à la souris : chaque bouton garde sa couleur et s'éclaircit un peu (la règle verte de style.css ne s'applique plus ici) */
@media (hover:hover){:is(.ro-app,.ro-app-sheet) button:not(:disabled):hover{filter:brightness(1.1) saturate(1.06)}}
/* Langue : une ligne du menu avec un menu déroulant */
.ro-lang-row{display:flex;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid var(--ro-panel-line);font-weight:700;font-size:16px}
.ro-lang-row ion-icon{font-size:22px;color:var(--gold)}
.ro-lang-row span{flex:1}
.ro-lang-row select{appearance:none;-webkit-appearance:none;min-height:44px;max-width:60%;padding:0 38px 0 14px;border-radius:13px;border:2px solid var(--ol);
  font:inherit;font-size:15px;font-weight:800;color:#fff;cursor:pointer;
  background:#0a120f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23e8c46a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/15px;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.45),inset 0 0 0 1.5px rgba(255,255,255,.1)}
[dir="rtl"] .ro-lang-row select{padding:0 14px 0 38px;background-position:left 12px center}
.ro-lang-row select:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent),0 0 0 3px rgba(217,164,65,.3)}
.ro-lang-row select option{background:#1d3229;color:#fff}
/* Barre de rang : grosse barre dorée, score écrit dedans, le rang suivant au bout */
.ro-progress{width:min(330px,92%);gap:6px;margin-top:4px}
.ro-progress > img,.ro-lgnext img{width:36px;height:36px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))}
.ro-lgbar{position:relative;height:24px;border-radius:13px}
.ro-lgbar i{position:relative;overflow:hidden;min-width:14px;border-radius:11px;background:linear-gradient(#fff0b8,#f7c84a 45%,#e39a22);
  box-shadow:inset 0 -4px 0 rgba(150,80,10,.45),inset 0 3px 0 rgba(255,255,255,.6)}
.ro-lgbar i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  animation:ro-lgshine 3.4s ease-in-out 1s infinite}
@keyframes ro-lgshine{0%{translate:-120% 0}55%,100%{translate:300% 0}}
.ro-lgbar span{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff;
  -webkit-text-stroke:3px var(--ol);paint-order:stroke fill;font-variant-numeric:tabular-nums}
.ro-lgnext{display:flex;flex-direction:column;align-items:center;margin-top:8px}
.ro-lgnext small{margin-top:-4px;font-size:11px;font-weight:900;line-height:1.1;color:#fff;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill;white-space:nowrap}
/* Logo du milieu : flotte et se balance doucement */
.ro-hero{animation:ro-float 4.6s ease-in-out infinite}
@keyframes ro-float{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-10px) rotate(.8deg)}}
/* Reflets plus rares et plus lents (retour du créateur) : un passage de ~2,2 s toutes les 14 s,
   décalés pour qu'il n'y en ait jamais deux en même temps sur l'écran Jouer */
.ro-shine::before{animation:ro-shine 14s ease-in-out 2s infinite}
@keyframes ro-shine{0%{transform:translateX(-160%) skewX(-18deg)}16%,100%{transform:translateX(560%) skewX(-18deg)}}
.ro-glint::before{animation:ro-sweep 14s ease-in-out 6.5s infinite}
.ro-pro .ro-glint::before{animation-delay:8s}
.ro-plus-banner .ro-glint::before{animation-duration:14s;animation-delay:3s}
@keyframes ro-sweep{0%{translate:-150% 0;rotate:0deg}16%,100%{translate:480% 0}}
.ro-lgbar i::after{animation:ro-lgshine 14s ease-in-out 11s infinite}
@keyframes ro-lgshine{0%{translate:-120% 0}16%,100%{translate:300% 0}}
.ro-plate[data-p="3"] .ro-pname,.ro-plate[data-p="4"] .ro-pname,.ro-plate[data-p="5"] .ro-pname{animation-duration:14s}
@keyframes ro-pshine{0%,80%{background-position:120% 0,0 0}96%,100%{background-position:-20% 0,0 0}}
@keyframes ro-tshine{0%,80%{background-position:100% 0}96%,100%{background-position:0 0}}
/* petits mouvements des boutons : deux fois moins souvent, et plus doux */
.ro-play{animation-duration:4s}
.ro-pastille{animation-duration:5s}
.ro-side.season img{animation-duration:4.5s}
.ro-passcard > img{animation-duration:9s}
.ro-tab[aria-selected="true"] .ro-ico{animation-duration:3.6s}
.ro-plate[data-p="5"] em{animation-duration:14s}
/* Collection : dos et faces en forme de carte au milieu de la case, le nom en dessous (ils remplissaient toute la case) */
.ro-cell > .swatch-preview:is([class*="back-"],[class*="face-"],.mini-card-face,[style*="url("]):not(.badge-swatch-preview):not(.felt-swatch-preview):not(.emote-preview){
  width:62%;height:auto;max-height:76%;aspect-ratio:5/7;margin-bottom:14px;border-radius:8px;overflow:hidden;
  box-shadow:0 0 0 2px var(--ol),0 4px 8px rgba(0,0,0,.5)}
.ro-cell.eq > .swatch-preview:is([class*="back-"],[class*="face-"],.mini-card-face,[style*="url("]):not(.badge-swatch-preview):not(.felt-swatch-preview):not(.emote-preview){margin-bottom:18px}
/* Frise du passe : aperçus à la taille de la case, le nombre en dessous, phrase en infobulle, cases vides discrètes */
.ro-rew .sp-reward{display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:none;box-shadow:none}
.ro-rew .sp-reward-label{display:none}
.ro-rew .sp-reward-pic{width:44px;height:40px}
.ro-rew .sp-reward-pic img{width:32px;height:32px;object-fit:contain}
.ro-rew .sp-reward-pic .swatch-preview{width:28px;height:40px;border-radius:4px;box-shadow:0 0 0 1.5px var(--ol)}
.ro-rew .sp-reward-pic .swatch-preview.felt-swatch-preview{width:42px!important;height:28px!important;border-radius:5px!important} /* style.css force 72px avec !important */
.ro-rew .sp-reward-pic .badge-swatch-preview{width:40px;height:40px;border-radius:0;box-shadow:none;background:none}
.ro-rew .sp-reward-pic .badge-swatch-preview img{width:36px;height:36px}
.ro-rew .mini-card-face .corner{font-size:7px}
.ro-rew .mini-card-face .pip{font-size:14px}
.ro-rew .ro-n{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:11px;font-weight:900;line-height:1;color:#fff;
  -webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill;pointer-events:none}
.ro-rew:has(.ro-n) .sp-reward-pic{margin-top:-9px}
.ro-rew.none{opacity:.35}
.ro-rew.none .sp-reward{display:none}

/* Case « Obtenir plus » au bout de la collection : verte et vivante, elle mène au catalogue */
.ro-cell.ro-getmore{background:radial-gradient(circle at 50% 38%,#3f9a5c,#1d5a34 70%);box-shadow:inset 0 0 0 2px #8fe3a0,inset 0 3px 0 rgba(255,255,255,.25),0 0 12px #6fd08a55}
.ro-getmore .gm-ico img{width:104%;max-width:none;max-height:none;object-fit:contain;margin-bottom:10px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.45));animation:ro-gm 2.6s ease-in-out infinite}
.ro-getmore .nm{color:#fff;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill;font-size:11.5px}
.ro-getmore:hover,.ro-getmore:focus-visible{filter:brightness(1.12)}
@keyframes ro-gm{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.06)}}

/* ================= Toutes les fenêtres du jeu habillées comme les onglets (toutes tailles, 2026-10-31) =================
   Succès, connexion oubliée, boutique, profil, règles, défis, classement… : elles partagent .overlay > .rules-card.
   Uniquement l'apparence : mêmes boutons, mêmes champs, même fonctionnement ; la croix de fermeture ne change pas.
   Pas de « display » sur les boutons : l'attribut hidden doit continuer de les cacher. */
body .overlay > .rules-card:not(.admin-card){
  background:linear-gradient(var(--slate1),var(--slate2) 40%,#253f35);border:3px solid var(--ol);border-radius:22px;
  box-shadow:inset 0 0 0 2px var(--gold-in),inset 0 4px 0 2px rgba(255,255,255,.1),0 18px 50px rgba(0,0,0,.6);
  font-family:var(--font-fun);color:#eaf2ee}
/* titres blancs cerclés, comme le texte des boutons */
body .overlay > .rules-card :is(h2, h3){color:#fff;font-weight:900;-webkit-text-stroke:4px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol);letter-spacing:.2px}
body .overlay > .rules-card h3{-webkit-text-stroke-width:3px}
/* champs creusés */
body .overlay > .rules-card :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea){
  background:#0f1c17;color:#fff;border:2px solid var(--ol);border-radius:13px;font-family:var(--font-fun);font-weight:700;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.08)}
body .overlay > .rules-card :is(input, select, textarea):focus{outline:none;border-color:var(--ol);
  box-shadow:inset 0 0 0 2px var(--gold-in),inset 0 3px 6px rgba(0,0,0,.5),0 0 0 3px rgba(217,182,90,.3)}
body .overlay > .rules-card label{color:#dcebe3;font-weight:800}
/* boutons bonbon : contour sombre, lèvre colorée, reflet en haut (comme .ro-btn) */
:is(body .overlay > .rules-card, #privacy-banner) :is(button.primary, button.join, button.danger-btn, button.ghost:not(.ghost-light), button.play-now){
  --lip:5px;position:relative;isolation:isolate;border:2.5px solid var(--ol);border-radius:15px;min-height:46px;
  font-family:var(--font-fun);font-weight:900;color:#fff;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol);
  background:linear-gradient(var(--c1),var(--c2));filter:none;transform:none;
  box-shadow:inset 0 calc(-1*var(--lip)) 0 var(--lc),inset 0 calc(-1*var(--lip) - 2px) 0 var(--ln),0 3px 6px rgba(0,0,0,.35);
  transition:transform .08s, box-shadow .08s}
:is(body .overlay > .rules-card, #privacy-banner) :is(button.primary, button.join, button.danger-btn, button.ghost:not(.ghost-light), button.play-now)::before{
  content:"";position:absolute;z-index:-1;left:6px;right:6px;top:4px;height:32%;border-radius:999px;
  background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.12));pointer-events:none}
:is(body .overlay > .rules-card, #privacy-banner) :is(button.primary, button.play-now){--c1:#fbd77a;--c2:#f0ae35;--lc:#c66f1b;--ln:#f6c35a}
:is(body .overlay > .rules-card, #privacy-banner) button.join{--c1:#a6d8fa;--c2:#56a9ee;--lc:#2e64b5;--ln:#86c6f6}
:is(body .overlay > .rules-card, #privacy-banner) button.danger-btn{--c1:#ff8a78;--c2:#e0443a;--lc:#8e1d18;--ln:#ff9d8f}
:is(body .overlay > .rules-card, #privacy-banner) button.ghost:not(.ghost-light){--c1:#6c8478;--c2:#465f53;--lc:#26382f;--ln:#7f988b}
:is(body .overlay > .rules-card, #privacy-banner) :is(button.primary, button.join, button.danger-btn, button.ghost:not(.ghost-light), button.play-now):is(:hover, :focus-visible){
  background:linear-gradient(var(--c1),var(--c2));filter:brightness(1.08);transform:none;
  box-shadow:inset 0 calc(-1*var(--lip)) 0 var(--lc),inset 0 calc(-1*var(--lip) - 2px) 0 var(--ln),0 3px 6px rgba(0,0,0,.35)}
:is(body .overlay > .rules-card, #privacy-banner) :is(button.primary, button.join, button.danger-btn, button.ghost:not(.ghost-light), button.play-now):active{transform:translateY(2px);--lip:2px}
:is(body .overlay > .rules-card, #privacy-banner) :is(button.primary, button.join, button.danger-btn, button.ghost, button.play-now) :is(ion-icon, img){-webkit-text-stroke:0;filter:drop-shadow(0 2px 0 var(--ol))}
:is(body .overlay > .rules-card, #privacy-banner) :is(button.primary, button.join, button.danger-btn, button.ghost, button.play-now):disabled{filter:grayscale(.7) brightness(.8)}
:is(body .overlay > .rules-card, #privacy-banner) .link-btn{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:3px;background:none;border:0;box-shadow:none}
/* onglets de la boutique et des objets : bouton choisi bleu, comme Ma collection */
body .overlay > .rules-card .shop-tab{border:2px solid var(--ol);background:linear-gradient(#5a7468,#3c5449);backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:inset 0 -3px 0 #26382f,inset 0 2px 0 rgba(255,255,255,.18);font-weight:900;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill}
body .overlay > .rules-card .shop-tab.active{background:linear-gradient(#a6d8fa,#56a9ee);box-shadow:inset 0 -3px 0 #2e64b5,inset 0 2px 0 rgba(255,255,255,.4);border-color:var(--ol)}
/* lignes de liste (Succès…) : puits sombres */
body .overlay > .rules-card .ach-item{background:linear-gradient(#1a2c25,var(--well));border:2px solid var(--ol);border-radius:14px;
  box-shadow:inset 0 2px 0 rgba(0,0,0,.35),inset 0 -2px 0 rgba(255,255,255,.08)}
body .overlay > .rules-card .ach-item.done{box-shadow:inset 0 0 0 2px var(--gold-in),inset 0 2px 0 rgba(0,0,0,.35)}
body .overlay > .rules-card .ach-check{border:2px solid var(--ol);background:#0f1c17;box-shadow:inset 0 2px 3px rgba(0,0,0,.5)}
body .overlay > .rules-card .ach-item.done .ach-check{background:linear-gradient(#ffe08a,#f0ae35);color:#fff;-webkit-text-stroke:2px var(--ol);paint-order:stroke fill}
body .overlay > .rules-card .ach-item.claimed .ach-check{background:linear-gradient(#aee374,#73c337);color:#fff;-webkit-text-stroke:2px var(--ol);paint-order:stroke fill;box-shadow:inset 0 -3px 0 #2c862a}

/* page de connexion : le panneau et le titre « Tables ouvertes » comme les onglets */
#screen-home .home-panel .panel,
#screen-home .open-tables-wrap{background:linear-gradient(var(--slate1),var(--slate2));border:2.5px solid var(--ol);border-radius:18px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.16),inset 0 -5px 0 rgba(0,0,0,.2),0 4px 0 rgba(0,0,0,.25)}
#screen-home :is(.rules-btn){--lip:5px;position:relative;isolation:isolate;border:2.5px solid var(--ol);border-radius:15px;
  color:#fff;font-weight:900;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol);
  background:linear-gradient(#6c8478,#465f53);box-shadow:inset 0 -5px 0 #26382f,inset 0 -7px 0 #7f988b,0 3px 6px rgba(0,0,0,.35)}
#screen-home .rules-btn:is(:hover, :focus-visible){background:linear-gradient(#6c8478,#465f53);filter:brightness(1.08)}
#screen-home .rules-btn ion-icon{-webkit-text-stroke:0;filter:drop-shadow(0 2px 0 var(--ol))}
/* bandeau de confidentialité : un panneau du jeu */
#privacy-banner{background:linear-gradient(var(--slate1),var(--slate2));border:3px solid var(--ol);border-radius:18px;
  box-shadow:inset 0 0 0 2px var(--gold-in),0 10px 30px rgba(0,0,0,.5);font-family:var(--font-fun);color:#eaf2ee}
body #screen-home #open-tables-title{font-size:16px;text-transform:none;color:#fff;font-weight:900;letter-spacing:.3px;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol)}
/* la table dorée de Table Pro est large et plate : un peu plus grande pour peser autant que le lion d'à côté */
.ro-duo .ro-panel[data-act="pro"] img{width:60px;height:auto;max-height:none;margin:0 -6px 0 -8px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.4))}
/* écran large (tablette, grand téléphone) : plus de colonnes plutôt que des cases géantes où la carte paraît vide */
.ro-coll .ro-grid3{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
/* logo Rami+ de la bannière : c'est la vedette de l'encart, il doit se lire de loin */
.ro-plus-banner .wm{height:clamp(52px,13vw,76px);margin:-4px 0 4px -4px}

/* ================= Écran de partie habillé comme les onglets (toutes tailles, 2026-10-31) =================
   Seulement l'apparence : les sièges, la pioche, la barre du bas et ses boutons gardent leur rôle,
   leur place et leurs animations ; les cadres de niveau (frame-*) des sièges ne sont pas touchés. */
/* sièges des adversaires : petites plaques d'ardoise, celle qui joue cerclée d'or */
#screen-table .seat:not([class*="frame-"]){background:linear-gradient(var(--slate1),var(--slate2));border:2.5px solid var(--ol);border-radius:14px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.16),inset 0 -4px 0 rgba(0,0,0,.2),0 3px 0 rgba(0,0,0,.3)}
#screen-table .seat.turn:not([class*="frame-"]){background:linear-gradient(#5d8573,#3a5d4f);
  box-shadow:inset 0 0 0 2px var(--gold-in),inset 0 -4px 0 rgba(0,0,0,.2),0 0 14px rgba(217,182,90,.45),0 3px 0 rgba(0,0,0,.3)}
#screen-table .seat .name{color:#fff;font-weight:900;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill;text-shadow:0 1px 0 var(--ol)}
#screen-table .seat.turn .name{color:#ffe08a}
#screen-table .seat .meta{color:#dcebe3;font-weight:800}
/* étiquettes Pioche / Défausse : blanc cerclé comme les titres */
#screen-table .pile-label{color:#fff;font-weight:900;letter-spacing:.5px;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol)}
/* barre du bas : panneau d'ardoise posé sur la table */
#screen-table .hand-area{background:linear-gradient(#2f4a3f,#1e3129);border-top:3px solid var(--ol);box-shadow:inset 0 2px 0 rgba(255,255,255,.1),0 -6px 18px rgba(0,0,0,.35)}
#screen-table #turn-owner{color:#fff;font-weight:900;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol)}
#screen-table #status{color:#dcebe3;font-weight:800}
/* boutons ronds et carrés de la partie : ardoise brillante, comme les boutons du haut des onglets */
#screen-table :is(.sort-btn, .emote-btn),
body:has(:is(#screen-table, #screen-lobby, #screen-create):not([hidden])) :is(#btn-leave, #btn-audio){
  position:relative;isolation:isolate;border:2.5px solid var(--ol);border-radius:13px;color:#fff;background:linear-gradient(#6c8478,#3f5a4e);
  box-shadow:inset 0 -4px 0 #26382f,inset 0 -6px 0 #7f988b,0 3px 5px rgba(0,0,0,.35);
  font-weight:900;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill;backdrop-filter:none;-webkit-backdrop-filter:none}
#screen-table :is(.sort-btn, .emote-btn):is(:hover, :focus-visible),
body:has(:is(#screen-table, #screen-lobby, #screen-create):not([hidden])) :is(#btn-leave, #btn-audio):is(:hover, :focus-visible){background:linear-gradient(#6c8478,#3f5a4e);filter:brightness(1.1)}
#screen-table :is(.sort-btn, .emote-btn):active,
body:has(:is(#screen-table, #screen-lobby, #screen-create):not([hidden])) :is(#btn-leave, #btn-audio):active{transform:translateY(2px);box-shadow:inset 0 -2px 0 #26382f,0 1px 2px rgba(0,0,0,.35)}
#screen-table :is(.sort-btn, .emote-btn) :is(ion-icon, img),
body:has(:is(#screen-table, #screen-lobby, #screen-create):not([hidden])) :is(#btn-leave, #btn-audio) ion-icon{-webkit-text-stroke:0;filter:drop-shadow(0 2px 0 var(--ol))}
/* le drapeau reste posé au-dessus de la table (sinon il pousse tout l'écran de partie vers le bas) */
body:has(:is(#screen-table, #screen-lobby, #screen-create):not([hidden])) #btn-leave{position:fixed}
/* pseudo Prestige : son or est découpé dans le texte, le contour sombre le recouvrait */
#screen-table .seat .prestige-name, .ro-app .prestige-name{-webkit-text-stroke:0;text-shadow:none}
/* actions qui apparaissent au-dessus de la main (Ouvrir, Poser, Défausser) : bonbons dorés */
#float-actions :is(button.primary, button.ghost-light){
  --lip:5px;position:relative;isolation:isolate;border:2.5px solid var(--ol);border-radius:15px;
  font-family:var(--font-fun);font-weight:900;color:#fff;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol);
  background:linear-gradient(var(--c1),var(--c2));
  box-shadow:inset 0 calc(-1*var(--lip)) 0 var(--lc),inset 0 calc(-1*var(--lip) - 2px) 0 var(--ln),0 4px 10px rgba(0,0,0,.45)}
#float-actions button.primary{--c1:#fbd77a;--c2:#f0ae35;--lc:#c66f1b;--ln:#f6c35a}
#float-actions button.ghost-light{--c1:#6c8478;--c2:#465f53;--lc:#26382f;--ln:#7f988b}
#float-actions :is(button.primary, button.ghost-light)::before{content:"";position:absolute;z-index:-1;left:6px;right:6px;top:4px;height:32%;border-radius:999px;
  background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.12));pointer-events:none}
#float-actions :is(button.primary, button.ghost-light):is(:hover, :focus-visible){background:linear-gradient(var(--c1),var(--c2));filter:brightness(1.08)}
#float-actions :is(button.primary, button.ghost-light):active{transform:translateY(2px);--lip:2px}
/* salle d'attente : le panneau prend le liseré doré des fenêtres */
#screen-lobby.screen .panel{background:linear-gradient(var(--slate1),var(--slate2) 40%,#253f35);border:3px solid var(--ol);border-radius:20px;
  box-shadow:inset 0 0 0 2px var(--gold-in),inset 0 4px 0 2px rgba(255,255,255,.1),0 10px 30px rgba(0,0,0,.45)}
/* ligne « Toi » : le rang à gauche dans une pastille, aligné sous les médailles ; le nom au milieu comme les autres */
.ro-merow > span:first-child{flex:0 0 auto}
.ro-merow .rk{min-width:32px;height:26px;padding:0 7px;border-radius:13px;display:grid;place-items:center;font-size:13px;color:#fff;
  background:#8a5a1c;border:2px solid var(--ol);box-shadow:inset 0 2px 2px rgba(0,0,0,.35);-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill}
.ro-merow .rk:empty{visibility:hidden}
.ro-merow .me{flex:1;text-align:center;color:#fff;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill}
/* salle d'attente : le bandeau du code devient un puits, le bouton Copier une ardoise brillante */
#screen-lobby.screen .code-banner{background:linear-gradient(#1a2c25,var(--well));border:2px solid var(--ol);border-radius:14px;
  box-shadow:inset 0 2px 0 rgba(0,0,0,.35),inset 0 -2px 0 rgba(255,255,255,.08)}
#screen-lobby.screen .code-banner-code{color:#fff;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill}
#screen-lobby.screen button.ghost.code-icon-btn{border:2.5px solid var(--ol);border-radius:13px;color:#fff;background:linear-gradient(#6c8478,#3f5a4e);
  box-shadow:inset 0 -4px 0 #26382f,inset 0 -6px 0 #7f988b,0 3px 5px rgba(0,0,0,.35)}
#screen-lobby.screen button.ghost.code-icon-btn ion-icon{filter:drop-shadow(0 2px 0 var(--ol))}

/* Écran de partie : les boutons, les plaques et la barre du bas prennent la couleur du tapis choisi par le joueur
   (--felt / --felt-edge posés par applyTableSkin), éclaircie et adoucie ; l'ardoise verte au-dessus reste en secours. */
@supports (color: color-mix(in srgb, red, blue)) {
  #screen-table,
  body:has(:is(#screen-table, #screen-lobby, #screen-create):not([hidden])) :is(#btn-leave, #btn-audio){
    --t1:color-mix(in srgb, var(--felt) 58%, #b7c2bc 42%);
    --t2:color-mix(in srgb, var(--felt) 78%, #3c4644 22%);
    --tl:color-mix(in srgb, var(--felt-edge) 70%, #000 30%);
    --tn:color-mix(in srgb, var(--felt) 45%, #e4ece8 55%)}
  #screen-table :is(.sort-btn, .emote-btn),
  #screen-table :is(.sort-btn, .emote-btn):is(:hover, :focus-visible),
  body:has(:is(#screen-table, #screen-lobby, #screen-create):not([hidden])) :is(#btn-leave, #btn-audio),
  body:has(:is(#screen-table, #screen-lobby, #screen-create):not([hidden])) :is(#btn-leave, #btn-audio):is(:hover, :focus-visible){
    background:linear-gradient(var(--t1),var(--t2));box-shadow:inset 0 -4px 0 var(--tl),inset 0 -6px 0 var(--tn),0 3px 5px rgba(0,0,0,.35)}
  #float-actions button.ghost-light{--c1:var(--t1);--c2:var(--t2);--lc:var(--tl);--ln:var(--tn)}
  #screen-table .seat:not([class*="frame-"]){background:linear-gradient(var(--t1),var(--t2))}
  #screen-table .seat.turn:not([class*="frame-"]){background:linear-gradient(color-mix(in srgb, var(--t1) 80%, #fff 20%),var(--t2))}
  #screen-table .hand-area{background:linear-gradient(color-mix(in srgb, var(--felt) 70%, #000 30%),color-mix(in srgb, var(--felt-edge) 75%, #000 25%))}
}

/* Audit des fenêtres (toutes tailles) : plus aucun vert « par défaut » du site. */
/* un bouton sans habit propre est en ardoise ; au survol, chaque bouton garde sa couleur et s'éclaircit */
button{background:linear-gradient(#5f786c,#435a4f)}
button:not(:disabled):hover{filter:brightness(1.1)}
/* boutons sans classe dans une fenêtre (Annuler de l'achat…) : bonbon ardoise */
body .overlay > .rules-card button:not([class]){
  --lip:5px;position:relative;border:2.5px solid var(--ol);border-radius:15px;min-height:46px;
  font-family:var(--font-fun);font-weight:900;color:#fff;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol);
  background:linear-gradient(#6c8478,#465f53);box-shadow:inset 0 -5px 0 #26382f,inset 0 -7px 0 #7f988b,0 3px 6px rgba(0,0,0,.35)}
/* fenêtres qui imposaient leur vert avec !important */
body .overlay > :is(.starter-pack-card, .bundle-modal-card, .piggy-modal-card){
  background:linear-gradient(var(--slate1),var(--slate2) 40%,#253f35)!important;border:3px solid var(--ol)!important;
  box-shadow:inset 0 0 0 2px var(--gold-in),inset 0 4px 0 2px rgba(255,255,255,.1),0 18px 50px rgba(0,0,0,.6)!important}
/* partage : couleurs des réseaux, forme des boutons du jeu */
:is(.share-social-btn, .rank-up-social-pill){border:2.5px solid var(--ol);font-family:var(--font-fun);font-weight:900;color:#fff;
  -webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill;box-shadow:inset 0 -4px 0 rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.3),0 2px 4px rgba(0,0,0,.3)}
:is(.share-social-btn, .rank-up-social-pill) :is(ion-icon, svg, img){-webkit-text-stroke:0;filter:drop-shadow(0 1px 0 var(--ol))}
/* lignes de menu (Légal et contact) et choix « Jouer en ligne » : puits sombres comme les listes */
body .overlay > .rules-card :is(.legal-menu-item, .play-online-option-btn){background:linear-gradient(#1a2c25,var(--well));border:2px solid var(--ol);border-radius:14px;
  box-shadow:inset 0 2px 0 rgba(0,0,0,.35),inset 0 -2px 0 rgba(255,255,255,.08);color:#fff}

/* Fin de partie (toutes tailles) : panneau du jeu ; victoire = trophée qui surgit et titre sur un ruban. */
#screen-over .over-panel{background:linear-gradient(var(--slate1),var(--slate2) 40%,#253f35);border:3px solid var(--ol);border-radius:22px;
  box-shadow:inset 0 0 0 2px var(--gold-in),inset 0 4px 0 2px rgba(255,255,255,.1),0 18px 50px rgba(0,0,0,.6);font-family:var(--font-fun);color:#eaf2ee}
#over-title{color:#fff;font-size:28px;font-weight:900;-webkit-text-stroke:5px var(--ol);paint-order:stroke fill;text-shadow:0 3px 0 var(--ol)}
#over-title ion-icon{-webkit-text-stroke:0;color:#ffd24f;filter:drop-shadow(0 2px 0 var(--ol))}
#screen-over .over-sub{color:#dcebe3;font-weight:800}
.over-victory-art{position:relative;width:128px;height:142px;margin:2px auto 0;display:grid;place-items:center}
.over-victory-art[hidden],.over-header:has(#over-rank-logo:not([hidden])) .over-victory-art{display:none}
.over-victory-art::before{content:"";position:absolute;inset:-34px;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,226,140,.3) 0 10deg,transparent 10deg 30deg);
  -webkit-mask:radial-gradient(closest-side,#000 35%,transparent);mask:radial-gradient(closest-side,#000 35%,transparent);animation:ov-rays 30s linear infinite}
.over-victory-art img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25));animation:ov-pop .7s cubic-bezier(.2,1.6,.4,1) both}
#screen-over:has(.over-victory-art:not([hidden])) .over-header :is(.over-logo, .over-wordmark){display:none}
#screen-over:has(.over-victory-art:not([hidden])) #over-title{display:flex;align-items:center;justify-content:center;gap:4px;width:min(330px,96%);aspect-ratio:570/174;margin:-18px auto 8px;padding:0 16% 7%;
  background:url(img/refonte/ruban.webp) center/contain no-repeat;font-size:23px;line-height:1.05;animation:ov-ribbon .5s .3s cubic-bezier(.2,1.4,.4,1) both}
@keyframes ov-pop{0%{transform:translateY(40px) scale(.2);opacity:0}100%{transform:none;opacity:1}}
@keyframes ov-ribbon{0%{transform:scaleX(.2);opacity:0}100%{transform:none;opacity:1}}
@keyframes ov-rays{to{transform:rotate(1turn)}}
/* gains et scores : puits en verre clair (le presque noir est refusé, charte règle 8), chiffres cerclés */
#screen-over .reward-chip{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.24);border-radius:14px;color:#eef5f1;font-weight:800;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
#screen-over .reward-chip.highlight{box-shadow:inset 0 0 0 2px var(--gold-in),inset 0 2px 0 rgba(255,255,255,.08)}
#screen-over .reward-chip b{color:#fff;font-weight:900;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill}
#screen-over .reward-chip.negative b{color:#ff8a78}
#screen-over .over-scores{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.24);border-radius:16px;padding:2px 12px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
/* cartes floutées (Rami+) : restent dans leur case, fondues à droite au lieu de déborder */
#screen-over .over-hand.is-locked{max-width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
/* petites icônes au trait retirées : elles juraient avec le dessin du jeu (choix du créateur, 2026-10-31) */
#over-title ion-icon,
#screen-over :is(#btn-coach-review, #btn-rank-up-share-over) > ion-icon,
button > ion-icon[name="hammer-outline"],
#btn-claw-promo-go > ion-icon{display:none}
#screen-over .over-scores li{color:#fff;font-weight:800;border-bottom-color:rgba(255,255,255,.08)}
#screen-over .over-scores li:last-child{border-bottom:0}
#screen-over .over-scores li.reached{color:#ff9b8a}
#screen-over .over-scores .score-cell{font-weight:900;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill}
#screen-over .over-scores .delta{-webkit-text-stroke:0;color:#b9cfc4}
/* boutons bonbon : Rejouer et Partager en or, Bilan du Coach en bleu */
#screen-over .over-actions :is(button.primary, .coach-review-btn){--lip:5px;position:relative;isolation:isolate;min-height:48px;padding:10px 26px;
  border:2.5px solid var(--ol);border-radius:15px;font-family:var(--font-fun);font-weight:900;color:#fff;
  -webkit-text-stroke:3px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol);
  background:linear-gradient(var(--c1),var(--c2));box-shadow:inset 0 calc(-1*var(--lip)) 0 var(--lc),inset 0 calc(-1*var(--lip) - 2px) 0 var(--ln),0 3px 6px rgba(0,0,0,.35)}
#screen-over .over-actions :is(button.primary, .coach-review-btn)::before{content:"";position:absolute;z-index:-1;left:6px;right:6px;top:4px;height:32%;border-radius:999px;
  background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.12));pointer-events:none}
#screen-over .over-actions button.primary{--c1:#fbd77a;--c2:#f0ae35;--lc:#c66f1b;--ln:#f6c35a}
#screen-over .over-actions .coach-review-btn{--c1:#a6d8fa;--c2:#56a9ee;--lc:#2e64b5;--ln:#86c6f6}
#screen-over .over-actions :is(button.primary, .coach-review-btn):is(:hover, :focus-visible){background:linear-gradient(var(--c1),var(--c2));filter:brightness(1.08)}
#screen-over .over-actions :is(button.primary, .coach-review-btn):active{transform:translateY(2px);--lip:2px}
#screen-over .over-actions :is(button.primary, .coach-review-btn) ion-icon{color:#fff;-webkit-text-stroke:0;filter:drop-shadow(0 2px 0 var(--ol))}
#screen-over .over-actions .hint{color:#fff;font-weight:800;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill}

/* Reflets encore plus rares (retour du créateur) : un passage de ~2,2 s toutes les 30 s, toujours décalés */
.ro-shine::before{animation:ro-shine30 30s ease-in-out 3s infinite}
@keyframes ro-shine30{0%{transform:translateX(-160%) skewX(-18deg)}7.5%,100%{transform:translateX(560%) skewX(-18deg)}}
.ro-glint::before{animation:ro-sweep30 30s ease-in-out 12s infinite}
.ro-pro .ro-glint::before{animation-delay:18s}
.ro-plus-banner .ro-glint::before{animation-delay:7s}
@keyframes ro-sweep30{0%{translate:-150% 0;rotate:0deg}7.5%,100%{translate:480% 0}}
.ro-lgbar i::after{animation:ro-lgshine30 30s ease-in-out 24s infinite}
@keyframes ro-lgshine30{0%{translate:-120% 0}7.5%,100%{translate:300% 0}}
.ro-plate[data-p="3"] .ro-pname,.ro-plate[data-p="4"] .ro-pname,.ro-plate[data-p="5"] .ro-pname,.ro-plate[data-p="5"] em{animation-duration:30s}
@keyframes ro-pshine{0%,90%{background-position:120% 0,0 0}98%,100%{background-position:-20% 0,0 0}}
@keyframes ro-tshine{0%,90%{background-position:100% 0}98%,100%{background-position:0 0}}
.ro-spark i{animation-duration:5.6s}
/* Tables ouvertes : le mode avec son icône (éclair = Blitz, cartes = Rami), en pastille du jeu */
.ro-trow .ro-mode{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 3px;border-radius:10px;background:linear-gradient(var(--slate1),var(--slate2));
  font-size:12px;font-weight:900;color:#fff;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill;white-space:nowrap;box-shadow:inset 0 2px 0 rgba(255,255,255,.16)}
.ro-trow .ro-mode img{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 1px 0 var(--ol))}
/* Boutique : le mot au milieu du ruban (il était trop haut) */
.ro-ribbon{padding-bottom:5px}
/* Rami+ : les boutons d'achat restent collés en bas de la fenêtre, plus besoin de faire défiler */
body .overlay > .vip-details-card .vip-details-actions{position:sticky;bottom:0;z-index:3;margin:10px -12px 0;padding:22px 12px 12px;
  background:linear-gradient(rgba(37,63,53,0),#2b4a3e 32%,#253f35)}
body .overlay > .vip-details-card .vip-perk{background:linear-gradient(#1a2c25,var(--well));border:2px solid var(--ol);border-radius:14px;
  box-shadow:inset 0 2px 0 rgba(0,0,0,.35),inset 0 -2px 0 rgba(255,255,255,.08)}
body .overlay > .vip-details-card .vip-perk.open{box-shadow:inset 0 0 0 2px var(--gold-in),inset 0 2px 0 rgba(0,0,0,.35)}
body .overlay > .vip-details-card .vip-perk strong{color:#fff;-webkit-text-stroke:2.5px var(--ol);paint-order:stroke fill}
body .overlay > .vip-details-card .vip-perk-icon{color:var(--gold)}
/* textes posés au milieu de la bande des rubans (la police laisse de la place en bas, le texte paraissait haut) */
.ro-ribbon{padding:4px 0 0}
#screen-over:has(.over-victory-art:not([hidden])) #over-title{padding:1.5% 16% 0}
.ro-ribbon{padding:0 0 16px}
#screen-over:has(.over-victory-art:not([hidden])) #over-title{padding:0 16% 21px}

/* ================= Accueil grand écran (≥ 760 px), d'après la maquette Flow (2026-10-31) =================
   docs/refonte-ux/maquettes/grand-ecran/ : panneaux transparents sur le tapis (charte, règle 8), tables ouvertes cerclées d'or à boutons bleus,
   boutons aux couleurs du site d'origine (verre blanc, or, bleu ciel) avec la forme bombée du téléphone, « OU » dans un rond doré, Jouer en grand.
   Mêmes boutons, même fonctionnement : seuls l'apparence et (≥ 1240 px) la place des blocs changent.
   Jamais de « display » sur un élément qui porte hidden sans :not([hidden]). */
@media (min-width: 760px) {
  :root{--ch-top:rgba(255,255,255,.15);--ch-bot:rgba(255,255,255,.08);--glass-edge:rgba(255,255,255,.24);--ch-edge:#2a3238;--ch-well:rgba(255,255,255,.12)}
  /* tapis : lampe chaude en haut, bords assombris */
  #screen-home{box-shadow:inset 0 0 160px rgba(0,0,0,.28)}
  #screen-home::before{content:"";position:absolute;left:15%;right:15%;top:0;height:46%;pointer-events:none;
    background:radial-gradient(50% 70% at 50% 0%,rgba(255,214,140,.2),transparent 75%)}
  .live-ticker{background:rgba(255,255,255,.14);border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff;padding:4px 16px;min-height:30px;font-size:13.5px}

  /* panneaux de verre clair : le tapis se voit à travers */
  #screen-home :is(.home-cols, .auth-row),
  #screen-home.logged-out .home-panel .panel{background:linear-gradient(var(--ch-top),var(--ch-bot));border:2px solid var(--glass-edge);border-radius:22px;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.18);
    position:relative;z-index:1;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
  #screen-home:not(.logged-out) .home-panel .panel{background:none;border:0;box-shadow:none;padding:0}
  #screen-home .home-cols{padding:16px 18px 18px;align-items:stretch}
  #screen-home .auth-row{padding:10px 16px}

  /* tables ouvertes : grand cadre doré, titre en capitales, chaque table en puits, Rejoindre en bleu */
  #screen-home .open-tables-wrap{background:linear-gradient(var(--ch-top),var(--ch-bot));border:0;border-radius:28px;padding:16px 16px 12px;
    box-shadow:inset 0 0 0 4px var(--gold-in),inset 0 0 0 6px #7a5a1c,inset 0 8px 0 4px rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.2)}
  body #screen-home #open-tables-title{font-size:25px;text-transform:uppercase;letter-spacing:.4px;text-align:center;opacity:1;margin:2px 0 10px}
  #screen-home .open-tables{gap:9px;max-height:300px;align-content:start;scrollbar-color:rgba(255,255,255,.25) transparent}
  #screen-home .open-table{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"n n j" "c v j";column-gap:8px;align-items:center;
    background:var(--ch-well);border:1.5px solid var(--glass-edge);border-radius:16px;padding:8px 10px 8px 14px;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
  #screen-home .open-table .ot-names{grid-area:n;color:#fff;font-weight:800;font-size:15px}
  #screen-home .open-table .ot-count{grid-area:c;color:#e6ecef;opacity:1;font-weight:900;font-size:19px;line-height:1.1}
  #screen-home .open-table .ot-variant{grid-area:v;justify-self:start}
  #screen-home .open-table button.join{grid-area:j;--c1:var(--sky-top);--c2:var(--sky);--lc:var(--sky-edge);--ln:#8fd0f7;--lip:4px;min-height:40px;padding:0 14px 3px;font-size:15px;border-radius:12px;-webkit-text-stroke-width:3px}

  /* carte du joueur : bouclier et nom en grand, niveau en rond rouge, XP turquoise, pièces et diamants en puits */
  /* le bouclier occupe les deux lignes à gauche ; le nom en haut, le niveau et l'XP dessous ; l'argent à droite après un filet */
  #screen-home .auth-row{position:relative;display:grid;grid-template-columns:62px auto minmax(90px,1fr) auto;grid-template-rows:auto auto;gap:6px 10px;align-items:center;padding-inline-end:16px}
  #screen-home #auth-progress:not([hidden]){display:contents}
  #screen-home #btn-profile{grid-column:1/4;grid-row:1/3;align-self:stretch;align-items:flex-start;justify-self:stretch;justify-content:flex-start;padding:2px 0;gap:10px;font-size:24px;color:#fff;font-weight:900;-webkit-text-stroke:3.5px var(--ol);paint-order:stroke fill}
  #screen-home #btn-profile b{max-width:240px}
  /* version grande du bouclier (app.js) : l'image a des marges transparentes, d'où la taille et les marges négatives */
  #screen-home #btn-profile .rank-badge{height:92px;margin:-14px -10px -14px -12px;align-self:center;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}
  #screen-home #btn-profile ion-icon{-webkit-text-stroke:0}
  #screen-home .lvl-chip-btn{grid-column:2;grid-row:2;position:relative;z-index:1;margin-inline-start:6px}
  #screen-home .lvl-chip{width:36px;height:36px;padding:0;border-radius:50%;border:0;font-size:17px;font-weight:900;color:#fff;text-shadow:0 1px 0 #6b120d;
    background:radial-gradient(circle at 35% 30%,#ff7a6b,#c2322b 60%,#8e1d18);box-shadow:0 0 0 3px #f3c25e,0 0 0 5px #6b4410,0 3px 6px rgba(0,0,0,.5);-webkit-text-stroke:0}
  #screen-home .lvl-chip > span{display:none}
  #screen-home .lvl-chip b{color:#fff}
  #screen-home .auth-progress .xp-bar{grid-column:3;grid-row:2;position:relative;z-index:1;width:auto;max-width:220px;justify-self:stretch}
  #screen-home #auth-xp-bar{background-color:var(--ch-well);box-shadow:inset 0 0 0 1.5px var(--glass-edge)}
  #screen-home #auth-xp-bar .xp-fill{background:linear-gradient(#9de8ff,#3bc4d8);box-shadow:inset 0 1px 1px rgba(255,255,255,.6)}
  #screen-home .auth-progress .currency-pill{height:36px;min-width:118px;justify-content:flex-start;gap:6px;padding:0 10px 0 4px;border:0;border-radius:18px;
    background:var(--ch-well);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 0 0 1.5px var(--glass-edge)}
  #screen-home #home-pill-coins{grid-column:4;grid-row:1}
  #screen-home #home-pill-diamonds{grid-column:4;grid-row:2}
  #screen-home .auth-progress .currency-icon{position:static;transform:none;flex:0 0 auto;width:30px;height:30px}
  #screen-home #home-pill-diamonds{padding-inline-end:34px}
  #screen-home #home-pill-diamonds .currency-add-btn{right:6px;width:24px;height:24px}
  html[dir="rtl"] #screen-home #home-pill-diamonds .currency-add-btn{right:auto;left:6px}
  #screen-home .auth-progress .currency-val{flex:1;font-size:19px;font-weight:900;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill}
  #screen-home #home-pill-coins .currency-val{color:#ffd76a}
  #screen-home #home-pill-diamonds .currency-val{color:#a9e4ff}

  /* Boutique et Apparence : verre blanc comme sur le site d'origine, chacune avec son icône (celles des onglets du téléphone) */
  #screen-home .auth-actions{gap:12px;margin-top:12px}
  #screen-home .auth-actions .auth-btn{--lip:5px;position:relative;isolation:isolate;min-height:52px;padding:4px 16px 8px;border:2.5px solid var(--ol);border-radius:22px;
    font-family:var(--font-fun);font-weight:900;font-size:23px;color:#fff;-webkit-text-stroke:3.5px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol);
    background:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,.1));border-color:rgba(255,255,255,.32);backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.16)}
  #screen-home .auth-actions .auth-btn::before{content:"";position:absolute;z-index:-1;left:10px;right:10px;top:4px;height:32%;border-radius:999px;
    background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.1));pointer-events:none}
    #screen-home :is(#btn-shop, #btn-cosmetics):not([hidden]){display:inline-flex;align-items:center;justify-content:center;gap:8px}
  #screen-home :is(#btn-shop, #btn-cosmetics)::after{content:"";order:-1;flex:0 0 auto;width:38px;height:38px;margin:-4px 0 -6px;
    background:center/contain no-repeat;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))}
  #screen-home #btn-shop::after{background-image:url(img/refonte/tab-boutique.webp)}
  #screen-home #btn-cosmetics::after{background-image:url(img/refonte/tab-cartes.webp)}
  #screen-home .auth-actions .auth-btn:is(:hover, :focus-visible){background:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,.1));border-color:rgba(255,255,255,.32);transform:none;filter:brightness(1.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.16)}
  #screen-home .auth-actions .auth-btn:active{transform:translateY(2px)}

  /* boutons du panneau : verre blanc du site d'origine, texte seul ; Jouer en grand sur deux lignes ;
     Créer salon (or) et Rejoindre salon (bleu ciel) en pilule */
  #screen-home .home-cols .col > button{margin-top:10px;font-size:22px}
  #screen-home .home-cols .col > button:first-child{margin-top:0}
  #screen-home .home-cols .col > button.rules-btn,
  #screen-home .home-cols .col > button.rules-btn:is(:hover, :focus-visible){min-height:52px;padding:4px 12px 8px;border:2px solid rgba(255,255,255,.32);border-radius:16px;
    background:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,.1));-webkit-text-stroke:3px var(--ol);text-shadow:0 2px 0 var(--ol);transform:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.16)}
  #screen-home .home-cols .col > button.rules-btn:is(:hover, :focus-visible){filter:brightness(1.12)}
  #screen-home .home-cols .col > button.rules-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 4px rgba(0,0,0,.16)}
  #screen-home .home-cols .rules-btn ion-icon{display:none}
  #screen-home .home-cols .col > button:is(.primary, .join, .play-now, .priority-queue-btn){min-height:54px;padding:4px 12px 8px;font-size:23px}
  #screen-home #btn-play-now{flex-wrap:wrap;align-content:center;row-gap:0;min-height:92px;font-size:31px;line-height:1.05;border-radius:18px}
  #screen-home #btn-play-now > ion-icon{display:none}
  #screen-home #btn-play-now #play-stake:not([hidden]){flex-basis:100%;justify-content:center;font-size:19px;color:#fff;text-shadow:none}
  #screen-home #btn-play-now #play-stake img{width:21px;height:21px}
    #screen-home :is(#btn-create, #btn-join){border-radius:999px}
  /* or et bleu ciel du site d'origine (style.css, button.primary et button.join) */
  #screen-home button.primary{--c1:#ffc64f;--c2:#f2992a;--lc:#c9781a;--ln:#ffd77e}
  #screen-home button.join{--c1:var(--sky-top);--c2:var(--sky);--lc:var(--sky-edge);--ln:#8fd0f7}
  /* pastille de Quotidien : rond rouge dans l'angle */
  #screen-home #daily-badge:not([hidden]){position:absolute;top:-11px;inset-inline-end:-9px;margin:0;min-width:28px;height:28px;padding:0 6px;border-radius:14px;
    background:radial-gradient(circle at 35% 30%,#ff7a6b,#d5322b 60%,#9e1d18);border:2px solid #fff;color:#fff;font-size:15px;font-weight:900;
    -webkit-text-stroke:0;text-shadow:0 1px 0 #6b120d;box-shadow:0 2px 4px rgba(0,0,0,.45)}
  /* « OU » dans un rond doré, sur un filet doré */
  #screen-home .col-sep{gap:0;-webkit-text-stroke:0}
  #screen-home .col-sep .ln{width:3px;background:var(--gold-in);opacity:.85;border-radius:2px}
  #screen-home .col-sep > span:not(.ln){width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
    border:3px solid var(--gold-in);background:rgba(255,255,255,.12);color:#f3d27a;font-size:19px;font-weight:900;
    box-shadow:0 3px 8px rgba(0,0,0,.2)}

  /* champs et cartes de mode : creusés dans l'ardoise, sans fond presque noir (charte, règle 8) */
  :is(#screen-home, #screen-create, #screen-lobby) :is(input:not([type=checkbox]):not([type=radio]), select){background-color:var(--ch-well);box-shadow:inset 0 0 0 1.5px var(--glass-edge)}
  #screen-create .create-mode-card{background:rgba(255,255,255,.1)}
  /* boutons ronds du haut (langue, son) : verre blanc */
  #top-left-bar button:not(.currency-add-btn):not(.lang-row),
  .mute-btn{border:2px solid rgba(255,255,255,.32);color:#fff;background:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,.1));backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.16);font-weight:900;min-height:48px;min-width:48px}
  #top-left-bar button:not(.lang-row):is(:hover, :focus-visible),
  .mute-btn:is(:hover, :focus-visible){background:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,.1));border-color:rgba(255,255,255,.32);transform:none;filter:brightness(1.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.16)}
  #top-left-bar button:not(.lang-row):active,
  .mute-btn:active{background:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,.1));transform:translateY(2px)}
}
/* ≥ 1240 px, joueur connecté : la disposition de la maquette, en trois colonnes
   (logo | carte du joueur et Boutique/Apparence | tables ouvertes sur toute la hauteur ; les boutons sous le logo et la carte) */
@media (min-width: 1240px) {
  #screen-home:not(.logged-out) .home-grid{grid-template-columns:auto minmax(380px,1fr) 300px;grid-template-rows:auto auto 1fr auto;
    grid-template-areas:"logo player tables" "tourn tourn tables" "cols cols tables" "footer footer footer";
    max-width:1060px;column-gap:22px;row-gap:14px;align-items:stretch}
  #screen-home:not(.logged-out) :is(.home-panel, .home-panel > .panel){display:contents}
  #screen-home:not(.logged-out) .home-logo{grid-area:logo;align-self:center}
  /* logo en grand, qui déborde un peu de sa case et passe derrière les panneaux vitrés (voulu par le créateur) */
  #screen-home:not(.logged-out) .home-logo{position:relative;z-index:0}
  #screen-home:not(.logged-out) .home-logo .logo{max-width:300px;margin:-36px -34px -46px -18px}
  #screen-home:not(.logged-out) #auth-logged{grid-area:player;align-self:center;min-width:0}
  #screen-home:not(.logged-out) #tournament-banner{grid-area:tourn}
  #screen-home:not(.logged-out) .home-cols{grid-area:cols}
  /* le cadre prend la hauteur de ses tables (pas étiré pour rien) ; au-delà, la liste défile */
  #screen-home:not(.logged-out) .home-tables{grid-area:tables;align-self:start}
  #screen-home:not(.logged-out) .open-tables-wrap:not([hidden]){max-width:none}
  #screen-home:not(.logged-out) .open-tables{max-height:470px}
  #screen-home:not(.logged-out) .home-footer{grid-area:footer}
}
/* ================= Grand écran (≥ 760 px) : tout le jeu comme l'accueil validé (2026-10-31) =================
   Fenêtres, Nouveau salon, salle d'attente, fin de partie : panneaux de verre teinté du tapis, puits transparents,
   boutons en verre blanc, or et bleu ciel du site d'origine. Rien de gris, rien de presque noir (charte, règle 8).
   Le téléphone garde son habit : tout est dans ce bloc. */
@media (min-width: 760px) {
  :root{--glass-btn:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,.1));
    --glass-btn-sh:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.16);
    --glass-panel:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.06)),color-mix(in srgb, var(--felt) 70%, transparent);
    --glass-panel-sh:inset 0 0 0 3px var(--gold-in),inset 0 5px 0 3px rgba(255,255,255,.08),0 18px 46px rgba(0,0,0,.3)}
  /* panneaux et fenêtres : verre teinté du tapis, cerclé d'or */
  body .overlay > .rules-card:not(.admin-card), #screen-create.screen .panel, #screen-lobby.screen .panel, #screen-over .over-panel, #privacy-banner{
    background:var(--glass-panel);border:0;box-shadow:var(--glass-panel-sh);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  body .overlay > :is(.starter-pack-card, .bundle-modal-card, .piggy-modal-card){
    background:var(--glass-panel)!important;border:0!important;box-shadow:var(--glass-panel-sh)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  /* Rami+ : le bas collé est du même verre que la fenêtre (flou), fondu en haut, sans bord visible */
  body .overlay > .vip-details-card .vip-details-actions{bottom:-22px;margin:10px -24px -22px;padding:22px 24px 22px;background:color-mix(in srgb, var(--felt) 60%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    -webkit-mask-image:linear-gradient(transparent,#000 22px);mask-image:linear-gradient(transparent,#000 22px)}
  /* puits : transparents */
  body .overlay > .rules-card :is(.ach-item, .legal-menu-item, .play-online-option-btn),
  body .overlay > .vip-details-card .vip-perk,
  #screen-lobby.screen .code-banner, #screen-over :is(.reward-chip, .over-scores){
    background:var(--ch-well);border:1.5px solid var(--glass-edge);box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
  body .overlay > .rules-card :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea){
    background-color:var(--ch-well);border-color:var(--glass-edge);box-shadow:inset 0 0 0 1.5px var(--glass-edge)}
  #screen-create .create-mode-card.active{background:rgba(255,255,255,.18)}
  /* boutons : verre blanc par défaut, sans gris */
  button{background:var(--glass-btn)}
  body .overlay > .rules-card button:not([class]),
  body:has(:is(#screen-table, #screen-lobby, #screen-create):not([hidden])) :is(#btn-leave, #btn-audio),
  body:has(:is(#screen-table, #screen-lobby, #screen-create):not([hidden])) :is(#btn-leave, #btn-audio):is(:hover, :focus-visible),
  #screen-lobby.screen button.ghost.code-icon-btn,
  #screen-home .rules-btn, #screen-home .rules-btn:is(:hover, :focus-visible){
    background:var(--glass-btn);border:2px solid rgba(255,255,255,.32);box-shadow:var(--glass-btn-sh)}
  :is(body .overlay > .rules-card, #privacy-banner) button.ghost:not(.ghost-light){
    --c1:rgba(255,255,255,.26);--c2:rgba(255,255,255,.1);--lc:rgba(255,255,255,.08);--ln:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32)}
  /* or et bleu ciel du site d'origine (style.css, button.primary et button.join) */
  :is(#screen-home, #screen-create, #screen-lobby, body .overlay > .rules-card, #privacy-banner, #screen-over .over-actions) :is(button.primary, button.play-now){
    --c1:#ffc64f;--c2:#f2992a;--lc:#c9781a;--ln:#ffd77e}
  :is(#screen-home, #screen-create, #screen-lobby, body .overlay > .rules-card, #privacy-banner, #screen-over .over-actions) :is(button.join, .coach-review-btn){
    --c1:var(--sky-top);--c2:var(--sky);--lc:var(--sky-edge);--ln:#8fd0f7}
}
/* ================= Grand écran (≥ 760 px) : les effets du téléphone, en léger (2026-10-31) =================
   Logo penché qui flotte, Jouer qui respire avec un reflet toutes les 30 s (comme .ro-play / .ro-glint),
   pastille qui sautille, icônes qui bougent doucement. Seulement transform/translate/scale : rien ne repeint. */
@media (min-width: 760px) {
  #screen-home .home-logo .logo{rotate:-4deg;animation:ro-bob 4.6s ease-in-out infinite;will-change:translate}
  #screen-home #btn-play-now{overflow:hidden;animation:ro-breathe 2.8s ease-in-out infinite}
  #screen-home #btn-play-now::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);translate:-150% 0;animation:ro-sweep30 30s ease-in-out 12s infinite}
  #screen-home #daily-badge:not([hidden]){animation:ro-hop 2.4s ease-in-out infinite}
  #screen-home :is(#btn-shop, #btn-cosmetics)::after{animation:ro-bob 3.2s ease-in-out infinite}
  #screen-home #btn-cosmetics::after{animation-delay:-1.6s}
  #screen-over .over-actions button.primary{animation:ro-breathe 2.8s ease-in-out infinite}
}
/* Grand écran : « Jouer (Pro) » en bonbon, bleu d'origine (style.css, button.priority-queue-btn) ;
   Boutique / Apparence / Admin tiennent à trois sur la ligne sans déborder (2026-10-31) */
@media (min-width: 760px) {
  #screen-home #btn-priority-queue{--lip:5px;--c1:#38bdf8;--c2:#0284c7;--lc:#0369a1;--ln:#7fd6fb;position:relative;isolation:isolate;
    border:2.5px solid var(--ol);border-radius:16px;color:#fff;font-weight:900;-webkit-text-stroke:3.5px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol);
    background:linear-gradient(var(--c1),var(--c2));transform:none;
    box-shadow:inset 0 calc(-1*var(--lip)) 0 var(--lc),inset 0 calc(-1*var(--lip) - 2px) 0 var(--ln),0 3px 6px rgba(0,0,0,.35)}
  #screen-home #btn-priority-queue::before{content:"";position:absolute;z-index:-1;left:6px;right:6px;top:4px;height:34%;border-radius:999px;
    background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.15));pointer-events:none}
  #screen-home #btn-priority-queue:is(:hover, :focus-visible){background:linear-gradient(var(--c1),var(--c2));transform:none;filter:brightness(1.1);
    box-shadow:inset 0 calc(-1*var(--lip)) 0 var(--lc),inset 0 calc(-1*var(--lip) - 2px) 0 var(--ln),0 3px 6px rgba(0,0,0,.35)}
  #screen-home #btn-priority-queue:active{transform:translateY(2px);--lip:2px}
  /* même taille que Jouer */
  #screen-home #btn-priority-queue{min-height:92px;font-size:31px;line-height:1.05;border-radius:18px}
  #screen-home #btn-priority-queue ion-icon{-webkit-text-stroke:0;filter:drop-shadow(0 2px 0 var(--ol))}
  #screen-home .auth-actions .auth-btn{min-width:0;padding:4px 10px 8px;font-size:20px}
  #screen-home :is(#btn-shop, #btn-cosmetics):not([hidden]){gap:6px}
  #screen-home :is(#btn-shop, #btn-cosmetics)::after{width:32px;height:32px}
}
/* ================= Règle 8 partout (créateur, 2026-10-31 : « les cases trop foncées, à bannir partout ») =================
   Cases, puits, lignes de liste, jauges, porte-monnaie, champs : verre clair, le tapis se voit à travers.
   Le téléphone gardait des puits presque noirs : ils prennent ici le verre du grand écran validé. */
:root{--r8-well:rgba(255,255,255,.12);--r8-edge:rgba(255,255,255,.24);--r8-sh:inset 0 2px 0 rgba(255,255,255,.08)}
.ro-cell, .ro-rew, .ro-dcase:not(.done), .ro-gain, .ro-opt, .ro-langs button, .ro-seg,
body .overlay > .rules-card :is(.ach-item, .legal-menu-item, .play-online-option-btn),
body .overlay > .vip-details-card .vip-perk,
#screen-lobby.screen .code-banner, #screen-create .create-mode-card{
  background:var(--r8-well);border:1.5px solid var(--r8-edge);box-shadow:var(--r8-sh)}
.ro-cell.eq{box-shadow:inset 0 0 0 2px var(--gold-in),0 0 0 2px var(--gold-in)}
body .overlay > .vip-details-card .vip-perk.open{box-shadow:inset 0 0 0 2px var(--gold-in)}
#screen-create .create-mode-card.active{background:rgba(255,255,255,.2)}
/* jauges, porte-monnaie, interrupteurs, cases à cocher : piste en verre, le remplissage garde sa couleur */
.ro-xp, .ro-money, .ro-bar, .ro-list button[aria-checked] i, body .overlay > .rules-card .ach-check{
  background:var(--r8-well);border-color:var(--r8-edge);box-shadow:var(--r8-sh)}
.ro-node::before{background:rgba(255,255,255,.18)}
.ro-node b{background:rgba(255,255,255,.16)}
.ro-found{background:rgba(255,255,255,.14)}
/* champs et listes déroulantes */
:is(#screen-home, #screen-create, #screen-lobby) :is(input:not([type=checkbox]):not([type=radio]), select),
.ro-lang-row select,
body .overlay > .rules-card :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea){
  background-color:var(--r8-well);border-color:var(--r8-edge)}
/* Rami+ sur téléphone : le bas collé va jusqu'aux bords, verre teinté du tapis fondu en haut (plus de rectangle sombre coupé) */
body .overlay > .vip-details-card .vip-details-actions{bottom:-22px;margin:10px -24px -22px;padding:22px 24px 22px;background:color-mix(in srgb, var(--felt) 60%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(transparent,#000 22px);mask-image:linear-gradient(transparent,#000 22px)}
/* onglets : bandeau « … a gagné », récompenses Premium du passe, ombre du bandeau du haut */
.ro-ticker{background:var(--r8-well);border:1.5px solid var(--r8-edge);box-shadow:var(--r8-sh)}
.ro-rew.prem{background:rgba(255,200,90,.2);border:1.5px solid rgba(255,216,122,.5);box-shadow:var(--r8-sh)}
.ro-top{background:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,0))}
/* bandeau Daily Diamond après un tour : le bouton bonbon ne tient pas à côté du texte, il passe dessous */
.daily-pass-wheel-banner{flex-direction:column;align-items:stretch;gap:8px;text-align:center}
.daily-pass-wheel-banner-text{color:#eaf3ee;font-weight:700}
.daily-pass-wheel-banner-cta{white-space:normal}
/* boutique : Débloquer (Coach Pro) et Prolonger avaient gardé leur style plat ; même bonbon doré que les autres achats */
body .overlay > .rules-card :is(.btn-coach-shop-unlock, .btn-shop-extend){
  --c1:#fbd77a;--c2:#f0ae35;--lc:#c66f1b;--ln:#f6c35a;--lip:5px;position:relative;isolation:isolate;border:2.5px solid var(--ol);border-radius:15px;min-height:46px;
  font-family:var(--font-fun);font-weight:900;color:#fff;-webkit-text-stroke:3px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol);
  background:linear-gradient(var(--c1),var(--c2));filter:none;transform:none;
  box-shadow:inset 0 calc(-1*var(--lip)) 0 var(--lc),inset 0 calc(-1*var(--lip) - 2px) 0 var(--ln),0 3px 6px rgba(0,0,0,.35);transition:transform .08s, box-shadow .08s}
body .overlay > .rules-card :is(.btn-coach-shop-unlock, .btn-shop-extend)::before{
  content:"";position:absolute;z-index:-1;left:6px;right:6px;top:4px;height:32%;border-radius:999px;
  background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.12));pointer-events:none}
body .overlay > .rules-card :is(.btn-coach-shop-unlock, .btn-shop-extend):is(:hover, :focus-visible){
  background:linear-gradient(var(--c1),var(--c2));filter:brightness(1.08);transform:none;
  box-shadow:inset 0 calc(-1*var(--lip)) 0 var(--lc),inset 0 calc(-1*var(--lip) - 2px) 0 var(--ln),0 3px 6px rgba(0,0,0,.35)}
body .overlay > .rules-card :is(.btn-coach-shop-unlock, .btn-shop-extend):active{transform:translateY(2px);--lip:2px}
body .overlay > .rules-card :is(.btn-coach-shop-unlock, .btn-shop-extend) span{color:#fff !important;font-size:18px;font-weight:900;text-shadow:0 2px 0 var(--ol)}
body .overlay > .rules-card :is(.btn-coach-shop-unlock, .btn-shop-extend) :is(ion-icon, img){-webkit-text-stroke:0;color:#fff !important;filter:drop-shadow(0 2px 0 var(--ol))}

/* Salons : apprendre avec le Coach (scène Flow : tableau, livre, cartes ; le lion du tutoriel devant) */
.ro-learn-banner{position:relative;overflow:visible;isolation:isolate;display:block;width:100%;min-height:150px;margin-top:22px;padding:14px 14px 12px;text-align:left;
  border-radius:var(--radius-lg);border:2.5px solid var(--ol);box-shadow:inset 0 -5px 0 rgba(4,30,16,.45),inset 0 2px 0 rgba(255,255,255,.25),0 3px 5px rgba(0,0,0,.3);background:var(--felt) url(img/refonte/coach-lecon-banniere.webp) 85% center/cover no-repeat}
.ro-learn-banner::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(90deg,rgba(8,48,28,.88) 0%,rgba(8,48,28,.6) 40%,transparent 64%)}
.ro-learn-banner > div{width:58%;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ro-learn-banner b{font-size:19px;line-height:1.1;color:#fff;-webkit-text-stroke:4px var(--ol);paint-order:stroke fill;text-shadow:0 2px 0 var(--ol)}
.ro-learn-banner div > span:not(.ro-btn){font-size:12.5px;font-weight:800;line-height:1.3;color:#fff;text-shadow:0 1px 2px #062414}
.ro-learn-banner .ro-btn{margin-top:2px}
.ro-learn-banner .lion{position:absolute;right:-4px;bottom:0;width:112px;filter:drop-shadow(0 4px 6px #0008)}
.ro-learn-banner .ro-glint::before{width:20%;animation-duration:6s;animation-delay:2.2s}