/* mobile-fix.css : à charger APRÈS style.css
   1) déplacer un meuble ne sélectionne plus de texte / n'ouvre plus le menu « copier »
   2) l'écran garde la bonne hauteur sur mobile (appli installée) */
.hit,.hit *,.garden,.garden *,.hedit-on #hedit .tile,.hedit-on #hedit .stab{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}
.hit{touch-action:none;cursor:grab}
.hit img,.hit svg{pointer-events:none;-webkit-user-drag:none}
.hedit-on{-webkit-user-select:none;user-select:none}
.hedit-on input,.hedit-on textarea{-webkit-user-select:text;user-select:text}

html{height:100%;-webkit-text-size-adjust:100%}
body.in-app{height:100vh;height:100dvh;padding-top:env(safe-area-inset-top)}
body.in-app header{padding-top:0}
body:not(.in-app) main{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

/* total de pièces sous la maison (onglet Amis) */
.hcoins{flex:none;display:flex;justify-content:center;padding:10px 12px 2px}
.hcoins .coinline{margin:0;padding:5px 14px;border:2px solid var(--line);border-radius:999px;background:var(--card);font-size:15px}

/* pièces de la maison */
.hrooms{flex:none;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:10px 12px 0}
.hrooms[hidden]{display:none}
.rtab,.rbuy{border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.rtab.on{border-color:var(--accent);color:var(--accent)}
.rbuy{border-style:dashed}
.rbuy .pi{color:#e8a91f}
.rbuy.poor{opacity:.55}

/* ===== v4 : barre d'onglets toujours visible sur Android + pas de zoom / sélection ===== */
/* l'appli remplit l'écran réellement visible (la hauteur « 100vh » d'Android compte la barre d'adresse et cachait la barre du bas) */
body.in-app{position:fixed;top:0;left:0;right:0;bottom:0;height:var(--app-h,auto);min-height:0;overflow:hidden}
.tabbar{position:relative;z-index:6;min-height:52px;padding-bottom:max(env(safe-area-inset-bottom),0px)}

/* pas de zoom au double-tap ni au pincement */
html,body,button,.app,.garden,.dpad{touch-action:manipulation}
.dpad,.dpad button{touch-action:none}

/* pas de sélection de texte dans l'appli (sauf les champs de saisie) */
body.in-app,.dpad,.dpad *,.hcoins,.hcoins *,.gnote,.tabbar,.tabbar *{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}
body.in-app input,body.in-app textarea{-webkit-user-select:text;user-select:text}
.dpad svg,.dpad .pi,.tabbar svg,.tabbar .pi{pointer-events:none}

/* bandeau « Installer l'app » */
.instbar{position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:30;max-width:520px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--card);color:var(--ink);border:2px solid var(--accent);box-shadow:0 6px 24px #0003;font-size:14px;font-weight:600}
.instbar span{flex:1;min-width:0}
.instbar .x{border:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;padding:4px 6px;cursor:pointer}

/* ===== Onglet MiniJeux ===== */
.mg-menu{padding:12px}
.mg-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:4px 4px 12px}
.mg-top .coinline{margin:0}
.mg-top small{color:var(--muted);text-align:right;font-size:12px}
.mg-card{display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:12px;margin-bottom:10px;border:2px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);cursor:pointer;font:inherit}
.mg-card:active{border-color:var(--accent)}
.mg-ic{flex:none;width:60px;height:60px;border-radius:12px;background:var(--bg);display:grid;place-items:center}
.mg-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.mg-t b{font-size:17px}
.mg-t small{color:var(--muted);font-size:13px}
.mg-t i{font-style:normal;font-size:12px;color:var(--accent);font-weight:700}
.mg-stage{position:relative;flex:1;min-height:0;width:100%;max-width:440px;margin:0 auto;touch-action:none;background:#000;overflow:hidden}
.mg-stage canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.mg-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;background:rgba(20,14,30,.74);color:#fff}
.mg-ov[hidden]{display:none}
.mg-ov b{font-size:22px}
.mg-ov p{margin:0;max-width:270px;font-size:14px;opacity:.92}
.mg-ov .gain{font-size:28px;font-weight:800;color:#ffd23f}
.mg-ov .row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* ===== v5 : la barre d'onglets a exactement la couleur de la page ===== */
body.in-app,body.in-app header,body.in-app main,.app,.app .chat,.app .tab-body,.tabbar{background:var(--card)}
.tabbar{border-top:1px solid var(--line);box-shadow:none}
.tabbar button,.tabbar button:active,.tabbar button:focus{background:transparent;outline:0}

/* ===== v6 : rien de blanc sous la barre d'onglets (derrière les boutons Android) ===== */
:root{color-scheme:light dark}
html,body.in-app{background:var(--card)}
body.in-app{padding-bottom:0}
.tabbar{padding-bottom:max(env(safe-area-inset-bottom),0px);background:var(--card)}

/* ===== v8 : familiers à taille variable, posés sur la même ligne de sol que l'avatar ===== */
.gav .fl.pet{position:absolute;left:0;right:0;bottom:1px;padding:0;display:flex;justify-content:center}
.gav .fl.pet .av{flex:none}

/* ===== v9 : plus aucune sélection / surbrillance bleue quand on appuie sur les flèches ou qu'on déplace un meuble ===== */
/* surbrillance de toucher désactivée partout (sinon Android colore en bleu tout élément cliquable) */
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
/* l'appli entière, y compris la fenêtre Décorer, les flèches ◀▲▼▶ et la boutique : jamais de sélection (sauf les champs de saisie) */
body.in-app,body.in-app *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.in-app input,body.in-app textarea{-webkit-user-select:text;user-select:text}
body.in-app ::selection{background:transparent;color:inherit}
body.in-app input::selection,body.in-app textarea::selection{background:#7c5cff55}
/* boutons de déplacement : pas de double-tap, pas d'anneau de focus bleu */
.dpad button,.dnud button,#dsel button,.dopen,.dtile{touch-action:manipulation;outline:0}
.dpad button:focus,.dpad button:focus-visible{outline:0}
.dpad,.dpad *{-webkit-user-select:none;user-select:none}
.deco,.deco *,.dsel,.dsel *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.deco .hi,.hit img{-webkit-user-drag:none;pointer-events:auto}
.hit img,.hit svg{pointer-events:none}

/* ===== v10 : clavier ouvert (écrire un message) : l'écran visible est suivi, l'en-tête et la barre d'onglets se cachent pour laisser la conversation et le champ de saisie visibles ===== */
body.in-app{top:var(--app-top,0px)}
html.kb body.in-app header,html.kb body.in-app .tabbar{display:none}
html.kb .app .chat form{padding-bottom:12px}
.chat form input{font-size:16px}

/* ===== v11 : boutons d'émotion de part et d'autre des flèches + bulle au-dessus de l'avatar ===== */
.dpad{gap:6px;padding:0 8px;flex-wrap:nowrap}
.dpad button{flex:0 1 54px;min-width:0}
.dpad button.emo{flex:0 1 44px;font-size:22px;line-height:1;color:var(--ink);touch-action:manipulation}
.dpad button.emo:active{background:var(--bg);transform:translateY(1px)}
.ebub{position:absolute;left:50%;bottom:100%;margin-bottom:-2px;padding:2px 7px 3px;border-radius:12px;background:#fff;border:2px solid #2b2433;font-size:18px;line-height:1.2;white-space:nowrap;pointer-events:none;z-index:5;transform:translateX(-50%);animation:ebpop 3s ease-out forwards;-webkit-user-select:none;user-select:none}
.ebub::after{content:"";position:absolute;left:50%;top:100%;width:7px;height:7px;background:#fff;border-right:2px solid #2b2433;border-bottom:2px solid #2b2433;transform:translate(-50%,-4px) rotate(45deg)}
@keyframes ebpop{0%{opacity:0;transform:translateX(-50%) translateY(6px) scale(.4)}8%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.15)}14%{transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.ebub{animation:none}}

/* ===== v12 : champ « bulle de texte » sous les flèches ===== */
.saybar{display:flex;gap:6px;padding:0 8px;margin:6px 0 2px}
.saybar input{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
.saybar button{flex:none;width:50px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;touch-action:manipulation}
.saybar button:active{background:var(--bg);transform:translateY(1px)}
.ebub.say{white-space:normal;width:max-content;max-width:150px;text-align:center;font-size:13px;font-weight:600;line-height:1.25;color:#2b2433;overflow-wrap:anywhere}
/* clavier ouvert : on garde la maison et le champ, le reste se cache */
html.kb .dpad,html.kb .hcoins,html.kb .hrooms,html.kb .gnote{display:none}
/* la barre de recherche contient le champ qui a le focus : la cacher fermait le clavier aussitôt */
html.kb .searchbar{display:flex}
html.kb .app .garden.house{width:min(calc(100% - 24px),240px)}

/* ===== v13 : jeux à deux ===== */
.duo-h{font-weight:800;font-size:15px;margin:6px 4px 8px}
.duo-inv{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;margin-bottom:8px;border:2px solid var(--accent);border-radius:14px;background:var(--card)}
.duo-inv span{flex:1 1 150px}
.duo-act{display:block;width:100%;text-align:left;padding:10px 12px;margin-bottom:8px;border:2px solid var(--accent);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.duo-ic{font-size:34px;line-height:1}
.mg-card[disabled]{opacity:.5}
.duo-note{margin:2px 4px 16px;font-size:12px;color:var(--muted)}
.duopick{position:fixed;inset:0;z-index:80;background:rgba(20,12,32,.6);display:grid;place-items:center;padding:16px}
.duopick-b{width:min(380px,100%);max-height:80vh;overflow:auto;background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.duolist{display:flex;flex-direction:column;gap:6px}
.duofr{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.duofr i{font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}.duofr i.on{color:#2f9e6e}
.duotoast{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:12px;right:12px;max-width:420px;margin:0 auto;z-index:90;padding:12px 14px;border-radius:14px;background:var(--accent);color:#fff;font-weight:700;font-size:14px;text-align:center;box-shadow:0 6px 24px #0005;cursor:pointer}
.duo{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 12px 16px}
.duo-pls{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:14px}
.duo-pls em{font-style:normal;color:var(--muted);font-size:12px}
.duo .pl{padding:3px 10px;border:2px solid var(--line);border-radius:999px;font-weight:700}
.duo .pl.on{border-color:var(--accent);color:var(--accent)}
.duo-st{text-align:center;font-size:15px;display:flex;flex-direction:column;gap:2px;align-items:center}
.duo-st.done b{font-size:22px}.duo-st .gain{font-size:22px;font-weight:800;color:#e8a91f}
.duo-body{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}
.duo-foot{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.duo-hint{font-size:13px;color:var(--muted);text-align:center}
.duo-pop{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:rgba(20,12,32,.8);color:#fff;border-radius:12px}
.duo-pop>div{display:flex;gap:8px}
.duo-pop .btn{font-size:28px;line-height:1;padding:10px 14px}
/* échecs */
.chs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:min(100%,420px);aspect-ratio:1;border:3px solid #5c3a1e;border-radius:6px;overflow:hidden;touch-action:manipulation}
.chs .sq{position:relative;border:0;padding:0;margin:0;display:grid;place-items:center;cursor:pointer;min-width:0;min-height:0;overflow:hidden}
.sq.l{background:#f0d9b5}.sq.d{background:#b58863}
.sq.lm{box-shadow:inset 0 0 0 100px rgba(255,235,59,.35)}
.sq.sel{box-shadow:inset 0 0 0 3px #7c5cff,inset 0 0 0 100px rgba(124,92,255,.25)}
.sq.chk{box-shadow:inset 0 0 0 100px rgba(229,72,77,.55)}
.sq.tg::after{content:"";position:absolute;width:32%;height:32%;border-radius:50%;background:rgba(124,92,255,.6)}
.sq.cap{box-shadow:inset 0 0 0 4px rgba(229,72,77,.8)}
.chs .pc{font-size:min(9vw,40px);line-height:1;pointer-events:none}
.pc.w{color:#fff;text-shadow:0 0 2px #000,0 0 2px #000,1px 1px 0 #000,-1px -1px 0 #000}
.pc.b{color:#1a1420}
/* cartes */
.ucard{display:inline-grid;place-items:center;flex:none;width:54px;height:80px;border-radius:9px;border:3px solid #fff;color:#fff;font-weight:800;font-size:22px;box-shadow:0 2px 0 #0005;padding:0;font-family:inherit}
.cR{background:#e5484d}.cG{background:#2f9e6e}.cB{background:#3b82f6}.cY{background:#f5a524;color:#2b2433}
.cX{background:conic-gradient(#e5484d,#f5a524,#2f9e6e,#3b82f6,#e5484d)}
.ucard.dim{opacity:.4;filter:grayscale(.5)}
.uhand{display:flex;gap:6px;overflow-x:auto;padding:8px 4px;max-width:100%}
.uopp{font-size:14px}
.umid{display:flex;gap:22px;align-items:center;justify-content:center}
.udeck,.utop{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;color:var(--ink);font:inherit;cursor:pointer}
.udeck small,.utop small{font-size:12px;color:var(--muted)}
.udeck[disabled]{opacity:.5}
.udot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;border:1px solid #0004}
.ucol{width:54px;height:54px;border-radius:50%;border:3px solid #fff;cursor:pointer}
/* chasse aux pièces + labyrinthe */
.gr7{min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:3px;width:min(100%,380px);aspect-ratio:1;touch-action:manipulation}
.gc{border:0;border-radius:7px;background:var(--bg);color:var(--ink);font:inherit;font-size:min(6vw,24px);font-weight:800;padding:0;display:grid;place-items:center;cursor:pointer;min-width:0;min-height:0;overflow:hidden}
.gc.rk{background:#6b5b73}.gc.bk{background:#2b2433}
.gc.p0{background:#3b82f6;color:#fff}.gc.p1{background:#ff7eb6;color:#fff}
.gc{position:relative}
.gc .av{position:absolute;inset:0;display:block;margin:0}
.gc.p0:has(.av){outline:3px solid #3b82f6;outline-offset:-3px}.gc.p1:has(.av){outline:3px solid #ff7eb6;outline-offset:-3px}
.gc:has(.av){background:transparent}
.gc .av svg{display:block;width:100%;height:100%;border-radius:0;pointer-events:none;image-rendering:pixelated}
.gc.me{box-shadow:0 0 0 3px #ffd23f}.gc.ghost{opacity:.65}
.gc.tg{background:rgba(124,92,255,.35);box-shadow:inset 0 0 0 2px #7c5cff}
.gc.tgb{background:rgba(229,72,77,.25);box-shadow:inset 0 0 0 2px #e5484d}
/* dés */
.dsc{display:flex;gap:16px;justify-content:center}
.dsc>div{min-width:110px;text-align:center;padding:8px 12px;border:2px solid var(--line);border-radius:12px}
.dsc>div.on{border-color:var(--accent)}
.dsc small{display:block;color:var(--muted);font-size:12px}.dsc b{font-size:28px}
.dface{font-size:80px;line-height:1}
.duo .row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* ---- correctifs : en-tête (boutons son) + labyrinthe ---- */
/* les boutons 🎵 / 🔊 restent à côté du logo au lieu de passer à la ligne */
header .logo{display:flex;align-items:center;flex:none;white-space:nowrap}
header .logo svg{flex:none}
header .logo .mutebtn{margin-left:6px}
header .logo .mutebtn:first-of-type{margin-left:10px}
header nav{flex:0 1 auto;min-width:0}

/* labyrinthe : l'anneau doré de mon pion passe AU-DESSUS de l'avatar (une ombre « inset » est cachée par l'image) */
.gc.me,.gc.me.ghost{box-shadow:none;outline:3px solid #ffd23f;outline-offset:-3px;z-index:1}
.gc.me.p0:has(.av),.gc.me.p1:has(.av){outline:3px solid #ffd23f;outline-offset:-3px}
.gc:has(.av){overflow:hidden;border-radius:7px}
.gc .av,.gc .av svg{border-radius:0}

/* labyrinthe : cases bloquées = vrais murs en briques, bien visibles (avant : presque la même couleur que le fond sombre) */
.gc.bk{
  background-color:#8a5a44;
  background-image:
    linear-gradient(#0000 calc(50% - 1px),#0006 calc(50% - 1px),#0006 calc(50% + 1px),#0000 calc(50% + 1px)),
    linear-gradient(90deg,#0000 calc(50% - 1px),#0006 calc(50% - 1px),#0006 calc(50% + 1px),#0000 calc(50% + 1px));
  background-size:100% 100%,50% 50%;
  box-shadow:inset 0 0 0 2px #0003;
}
/* cases libres un peu plus lisibles sur fond sombre */
.gr7 .gc:not(.bk):not(.tg):not(.tgb):not(.p0):not(.p1){background:color-mix(in srgb,var(--ink) 7%,var(--bg))}
/* l'adversaire a aussi son contour (rose) bien visible */
.gc.p1:not(.me):has(.av){outline:3px solid #ff7eb6;outline-offset:-3px}
.gc.p0:not(.me):has(.av){outline:3px solid #3b82f6;outline-offset:-3px}

/* labyrinthe : l'avatar remplit TOUTE la case (pour les deux joueurs) ; les anneaux de couleur sont dessinés à l'extérieur, dans l'espace entre les cases */
.gc.p0:has(.av),.gc.p1:has(.av),.gc.me:has(.av),.gc.me.p0:has(.av),.gc.me.p1:has(.av),
.gc.p0:not(.me):has(.av),.gc.p1:not(.me):has(.av){outline:0}
.gc:has(.av) .av{inset:0;width:100%;height:100%}
.gc:has(.av) .av svg{width:100%;height:100%}
.gc.p0:has(.av){box-shadow:0 0 0 2px #3b82f6}
.gc.p1:has(.av){box-shadow:0 0 0 2px #ff7eb6}
.gc.me:has(.av),.gc.me.p0:has(.av),.gc.me.p1:has(.av){box-shadow:0 0 0 2px #ffd23f;z-index:1}

/* labyrinthe : l'image de l'avatar est étirée pour remplir toute la case (aucune bande vide sur les côtés) */
.gc:has(.av) .av svg{width:100%;height:100%;max-width:none;max-height:none}

/* labyrinthe : toutes les cases (avec ou sans avatar) font exactement la même taille, carrées */
.gr7 .gc{box-sizing:border-box;width:100%;height:auto;aspect-ratio:1/1;align-self:start;justify-self:stretch;min-width:0;min-height:0}
.gr7 .gc:has(.av) .av{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.gr7 .gc:has(.av) .av svg{position:absolute;inset:0;width:100%;height:100%}

/* ===== v24 : joystick à la place des 4 flèches ===== */
.dpad{align-items:center}
.joy{position:relative;flex:none;width:96px;height:96px;border-radius:50%;border:2px solid var(--line);background:radial-gradient(circle at 50% 50%,var(--bg) 0 38%,var(--card) 39%);box-shadow:inset 0 0 0 5px var(--card),inset 0 0 0 6px var(--line);touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.joy.on{border-color:var(--accent);cursor:grabbing}
.joy-k{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:var(--accent);border:3px solid var(--accent2,var(--accent));box-shadow:0 3px 0 rgba(0,0,0,.25);pointer-events:none;transition:transform .12s ease-out}
.joy.on .joy-k{transition:none;filter:brightness(1.1)}
@media(prefers-reduced-motion:reduce){.joy-k{transition:none}}
@media(max-width:360px){.joy{width:84px;height:84px}.joy-k{width:38px;height:38px;margin:-19px 0 0 -19px}}

/* ===== v25 : bouton « Décorer » = palette pixel art dans le coin de la maison ===== */
.decopal{position:absolute;top:6px;right:8px;z-index:8;width:40px;height:36px;padding:0;margin:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.decopal svg{width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.decopal:hover{transform:translateY(-1px) scale(1.06)}
.decopal:active{transform:translateY(1px) scale(.96)}
.decopal:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.decopal:hover,.decopal:active{transform:none}}

/* ---------- Puissance 4 ---------- */
.c4{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:4px;width:min(100%,380px);aspect-ratio:7/6;padding:8px;box-sizing:border-box;background:#2b4fa8;border-radius:14px;overflow:hidden;touch-action:manipulation}
.c4c{position:relative;border:0;padding:0;margin:0;border-radius:50%;background:#16224d;min-width:0;min-height:0;cursor:pointer}
.c4c .c4d{position:absolute;inset:6%;border-radius:50%;overflow:hidden;box-sizing:border-box;border:3px solid;display:grid;place-items:center;font-weight:800;color:#2b2433;font-size:min(5vw,22px)}
.c4c.p0 .c4d{border-color:#ffc93c;background:#ffc93c}
.c4c.p1 .c4d{border-color:#e5484d;background:#e5484d;color:#fff}
.c4c .c4d .av{position:absolute;inset:0;display:block;margin:0}
.c4c .c4d .av,.c4c .c4d .av svg{width:100%;height:100%;display:block;border-radius:0}
.c4c.new .c4d{animation:c4drop .45s ease-in}
.c4c.win .c4d{border-color:#fff;animation:c4pulse .7s ease-in-out infinite alternate}
@media(hover:hover){.c4c:hover{box-shadow:inset 0 0 0 3px rgba(255,210,63,.7)}}
@keyframes c4drop{from{transform:translateY(calc((var(--r,0) + 1) * -110%))}to{transform:none}}
@keyframes c4pulse{from{transform:scale(1)}to{transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.c4c .c4d{animation:none!important}}

/* ---------- Bataille navale ---------- */
.nv{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:2px;width:min(100%,360px);aspect-ratio:1;padding:4px;box-sizing:border-box;background:#2b4fa8;border-radius:10px;touch-action:manipulation}
.nv.sm{width:min(72%,260px)}
.nc{border:0;padding:0;margin:0;border-radius:4px;display:grid;place-items:center;min-width:0;min-height:0;font:inherit;font-weight:800;font-size:min(5vw,20px);line-height:1;color:#fff;background:color-mix(in srgb,#3b82f6 30%,#dcebff)}
button.nc{cursor:pointer}
button.nc:disabled{cursor:default}
.nc.miss{color:#5b7bb5}
.nc.ship{background:#6b7a99}
.nc.ship.sel{background:#7c5cff}
.nc.rev{background:#6b7a99;opacity:.6}
.nc.hit{background:#e5484d}
.nc.sunk{background:#7a1f24}
.nc.last{outline:3px solid #ffd23f;outline-offset:-3px}
@media(hover:hover){.nv.fire .nc:not(:disabled):hover{outline:3px solid #7c5cff;outline-offset:-3px}}
.nv-t{font-size:13px;font-weight:700;color:var(--muted);text-align:center}
.nvfleet{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.nship{display:flex;gap:2px;padding:6px 8px;border:2px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer}
.nship i{display:block;width:14px;height:14px;border-radius:3px;background:#6b7a99}
.nship.on{border-color:var(--accent)}
.nship.ok:not(.on){opacity:.5}
.duo-hint.err{color:var(--bad);font-weight:700}