/* ═══════════════════════════════════════════════════════════
   IN-SECT — Guerre des Colonies
   style.css — Design tokens, layouts, composants, freemium UI
   ═══════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  --bg:#08080F; --bg2:#0C0C1A; --card:#101020; --panel:#13132A; --border:#1E1E3A;
  --gold:#D4A017; --gold-l:#F0C040; --gold-d:#8A6800; --gold-glow:rgba(212,160,23,.3);
  --text:#E0DCFF; --text-dim:#9090C8; --text-muted:#6A6A96;
  --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
  --cs:min(9.5vw,52px); --r:10px;
  --cy:#F0C030; --cg:#30D060; --cb:#4090FF; --cr:#FF3050;
  --cgy:rgba(240,192,48,.5); --cgg:rgba(48,208,96,.5); --cgb:rgba(64,144,255,.5); --cgr:rgba(255,48,80,.5);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none;}
body{color:var(--text);font-family:'Exo 2',sans-serif;touch-action:manipulation;user-select:none;font-size:15px;}

/* ── Canvas layers ── */
#c-ambient{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.4;}
#c-fx{position:fixed;inset:0;pointer-events:none;z-index:100;}
#c-victory{position:fixed;inset:0;pointer-events:none;z-index:500;display:none;}

/* ── Screens ── */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;z-index:10;overflow:hidden;transition:opacity .3s ease,transform .3s ease;}
.screen.hidden{opacity:0;pointer-events:none;transform:translateY(14px);}
.screen.hidden *{pointer-events:none !important;}

/* ── Splash ── */
#s-splash{justify-content:flex-end;background:var(--bg);z-index:200;}
/* Image occupe tout l'espace au-dessus du bouton */
.splash-bg{
  width:100%;
  flex:1;
  min-height:0;
  background:url('images_insecte.png') center center/contain no-repeat;
  position:relative;
  z-index:0;
  filter:brightness(1.18) contrast(1.05);
}
/* Bouton + barre dans le flux, sous l'image */
.splash-bottom{
  width:100%;
  max-width:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  z-index:1;
  padding:0 20px calc(var(--safe-bot)+28px);
  flex-shrink:0;
}
.splash-sub{font-size:.75rem;letter-spacing:.3em;color:rgba(255,255,255,.7);text-transform:uppercase;text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.9);}
.splash-bar{width:100%;height:3px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden;}
.splash-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold-d),var(--gold-l));animation:loadbar 2.2s ease-out .2s forwards;}
@keyframes loadbar{to{width:100%;}}

/* ── Tagline animée splash — dans le flux, juste au-dessus du bouton ── */
.splash-tagline {
  width:100%;
  max-width:320px;
  text-align:center;
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(.88rem,4.5vw,1.2rem);
  font-weight:700;
  color:rgba(255,255,255,.95);
  text-shadow:0 0 18px rgba(240,192,48,.55),0 2px 10px rgba(0,0,0,.95);
  letter-spacing:.05em;
  line-height:1.5;
  padding:0 24px 4px;
  animation:taglineIn 1s ease-out 1s both;
  z-index:2;
  flex-shrink:0;
}
@keyframes taglineIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ── Hint sous le bouton ── */
.splash-hint {
  font-size:.62rem;
  color:rgba(255,255,255,.45);
  text-align:center;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ── Bouton Entrer (splash) ── */
.splash-enter-btn{
  width:100%;
  height:50px;
  border:1.5px solid rgba(212,160,23,.6);
  border-radius:var(--r);
  background:linear-gradient(160deg,rgba(20,10,50,.92),rgba(60,30,120,.88));
  font-family:'Cinzel Decorative',serif;
  font-size:.85rem;
  font-weight:700;
  color:var(--gold-l);
  letter-spacing:.18em;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(212,160,23,.2), 0 4px 20px rgba(100,50,200,.35), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(4px);
  transition:transform .15s, box-shadow .15s;
  text-shadow:0 0 12px rgba(240,192,48,.6);
}
.splash-enter-btn::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,transparent 60%);
  pointer-events:none;
}
.splash-enter-btn::after{
  content:'';
  position:absolute;
  top:0;left:-120%;
  width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(240,192,48,.18),transparent);
  animation:splashShimmer 3s ease-in-out 2.4s infinite;
}
@keyframes splashShimmer{0%{left:-120%;}60%{left:140%;}100%{left:140%;}}
@keyframes splashBtnPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(212,160,23,.2),0 4px 20px rgba(100,50,200,.35),inset 0 1px 0 rgba(255,255,255,.08);}
  50%{box-shadow:0 0 0 1px rgba(212,160,23,.5),0 4px 28px rgba(100,50,200,.55),0 0 18px rgba(212,160,23,.25),inset 0 1px 0 rgba(255,255,255,.08);}
}
.splash-enter-btn:active{transform:scale(.96);}

/* ── Menu ── */
#s-menu{padding:calc(var(--safe-top)+32px) 18px calc(var(--safe-bot)+32px);gap:0;justify-content:space-between;}
.menu-header{width:100%;max-width:400px;display:flex;align-items:center;justify-content:space-between;padding:2px 0 10px;}
.menu-logo{font-family:'Cinzel Decorative',serif;font-size:clamp(1.3rem,7vw,2rem);font-weight:900;background:linear-gradient(135deg,#7040FF,#B070FF 45%,#8050FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 8px rgba(160,96,255,.4));letter-spacing:.07em;}
.menu-sub{font-size:.65rem;color:var(--text-muted);letter-spacing:.25em;text-transform:uppercase;margin-top:2px;}

/* ── Barre de statut freemium (sous le logo) ── */
.menu-status-bar{width:100%;max-width:400px;display:flex;align-items:center;justify-content:space-between;background:rgba(16,12,32,.9);border:1px solid var(--border);border-radius:var(--r);padding:7px 12px;margin-bottom:4px;gap:8px;}
.status-left{display:flex;flex-direction:column;gap:3px;}
.status-counter{font-size:.78rem;font-weight:800;color:var(--gold-l);letter-spacing:.04em;}
.status-counter.danger{color:#FF3050;}
.status-shares{font-size:.6rem;color:var(--text-muted);}
.status-badge{display:inline-flex;align-items:center;gap:4px;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:20px;position:relative;z-index:2;cursor:pointer;pointer-events:auto;}
.status-badge.free    {background:rgba(128,80,255,.18);color:#A070FF;border:1px solid rgba(128,80,255,.3);}
.status-badge.freemium{background:rgba(48,208,96,.15);color:#30D060;border:1px solid rgba(48,208,96,.3);}
.status-badge.premium {background:rgba(212,160,23,.18);color:var(--gold-l);border:1px solid rgba(212,160,23,.3);}
.status-badge.unlocked{background:rgba(212,160,23,.18);color:var(--gold-l);border:1px solid rgba(212,160,23,.3);}

.menu-sound{background:transparent;border:1px solid var(--border);border-radius:8px;width:36px;height:36px;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:all .2s;}
.menu-sound:active{border-color:var(--gold);color:var(--gold);}

/* ── Score victoires/défaites dans le menu ── */
.menu-score {
  font-size:.6rem;
  font-weight:700;
  color:var(--text-muted);
  letter-spacing:.08em;
  text-align:right;
  white-space:nowrap;
}
.menu-score .score-w { color:#30D060; }
.menu-score .score-l { color:#FF3050; }

/* ── Badge point tuto ── */
.tuto-badge {
  display:inline-block;
  color:#9050FF;
  font-size:.55rem;
  vertical-align:super;
  animation:tutoBadgePulse 1.5s ease-in-out infinite;
}
@keyframes tutoBadgePulse{0%,100%{opacity:.5;}50%{opacity:1;}}
.tuto-badge.hidden-badge { display:none; }

/* ── Mode preview ── */
.mode-preview{width:100%;max-width:400px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:0;}
.preview-svg{width:min(200px,48vw);height:min(200px,48vw);display:block;filter:drop-shadow(0 0 12px rgba(140,80,255,.2));animation:previewPulse 3s ease-in-out infinite;}
@keyframes previewPulse{0%,100%{filter:drop-shadow(0 0 8px rgba(140,80,255,.15));}50%{filter:drop-shadow(0 0 20px rgba(140,80,255,.35));}}
.preview-tagline{font-size:.78rem;color:var(--text-dim);font-style:italic;text-align:center;letter-spacing:.04em;}

/* ── Config ── */
.menu-config{width:100%;max-width:400px;display:flex;flex-direction:column;gap:9px;flex-shrink:0;}
.sec-label{font-size:.62rem;letter-spacing:.22em;color:#9090C0;text-transform:uppercase;text-align:center;padding:2px 0;}
.mode-row{display:flex;gap:8px;}
.mbtn{flex:1;padding:11px 8px;border-radius:var(--r);border:1.5px solid rgba(80,60,140,.5);background:rgba(16,12,32,.9);color:var(--text-dim);cursor:pointer;font-family:'Exo 2',sans-serif;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .2s;}
.mbtn .mt{font-size:.95rem;font-weight:900;letter-spacing:.08em;color:var(--text);}
.mbtn .ms{font-size:.72rem;color:#A0A0D0;font-style:italic;}
.mbtn.sel{border-color:#8050FF;background:rgba(80,40,160,.25);box-shadow:0 0 0 1px rgba(128,80,255,.2),0 0 16px rgba(128,80,255,.15);}
.mbtn:active{transform:scale(.96);}
.colony-row{display:flex;gap:8px;justify-content:center;}
.cbtn{flex:1;max-width:80px;height:46px;border-radius:var(--r);border:1.5px solid rgba(80,60,140,.4);background:rgba(16,12,32,.8);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:all .2s;}
.cbtn .cn{font-size:.62rem;letter-spacing:.1em;font-weight:700;color:#B0B0D8;}
.cbtn[data-c=yellow]{border-color:rgba(240,192,48,.3);}.cbtn[data-c=red]{border-color:rgba(255,48,80,.3);}
.cbtn[data-c=green]{border-color:rgba(48,208,96,.3);}.cbtn[data-c=blue]{border-color:rgba(64,144,255,.3);}
.cbtn[data-c=random]{border-color:rgba(128,80,255,.3);}
.cbtn[data-c=yellow].sel{border-color:var(--cy);box-shadow:0 0 12px rgba(240,192,48,.35);background:rgba(60,40,0,.5);}
.cbtn[data-c=red].sel{border-color:var(--cr);box-shadow:0 0 12px rgba(255,48,80,.35);background:rgba(60,0,8,.5);}
.cbtn[data-c=green].sel{border-color:var(--cg);box-shadow:0 0 12px rgba(48,208,96,.35);background:rgba(0,40,12,.5);}
.cbtn[data-c=blue].sel{border-color:var(--cb);box-shadow:0 0 12px rgba(64,144,255,.35);background:rgba(0,16,60,.5);}
.cbtn[data-c=random].sel{border-color:#8050FF;box-shadow:0 0 12px rgba(128,80,255,.35);}
.cbtn:active{transform:scale(.93);}
.ailrow{display:flex;gap:8px;}
.ailbtn{flex:1;padding:10px 4px;border-radius:var(--r);border:1.5px solid rgba(80,60,140,.4);background:rgba(16,12,32,.8);color:var(--text-dim);cursor:pointer;font-family:'Exo 2',sans-serif;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .18s;}
.ailbtn .aln{font-size:.85rem;font-weight:900;letter-spacing:.06em;color:var(--text);}
.ailbtn .ali{font-size:.65rem;color:#A0A0D0;font-style:italic;}
.ailbtn.sel{border-color:#8050FF;background:rgba(80,40,160,.22);box-shadow:0 0 10px rgba(128,80,255,.18);}
.ailbtn:active{transform:scale(.94);}

/* ── Bouton JOUER ── */
.btn-play{width:100%;height:52px;border:none;border-radius:var(--r);background:linear-gradient(160deg,#4020A0,#9050FF 40%,#7040E0 60%,#3010A0);font-family:'Cinzel Decorative',serif;font-size:1rem;font-weight:700;color:#F0E8FF;letter-spacing:.15em;cursor:pointer;box-shadow:0 0 0 1px rgba(160,96,255,.25),0 4px 24px rgba(128,64,255,.3);position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s;animation:playPulse 3s ease-in-out infinite;}
.btn-play::after{content:'';position:absolute;top:0;left:-120%;width:70%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:shimmer 3.5s ease-in-out infinite;}
@keyframes shimmer{0%,100%{left:-120%;}55%{left:140%;}}
@keyframes playPulse{0%,100%{box-shadow:0 0 0 1px rgba(160,96,255,.25),0 4px 24px rgba(128,64,255,.3);}50%{box-shadow:0 0 0 1px rgba(160,96,255,.4),0 4px 32px rgba(128,64,255,.5);}}
.btn-play:active{transform:scale(.97);animation:none;}

/* État désactivé quand le compteur atteint 0 */
.btn-play:disabled,.btn-play.locked{background:linear-gradient(160deg,#1A1A2A,#2A2040);color:var(--text-muted);cursor:not-allowed;animation:none;box-shadow:none;opacity:.7;}
.btn-play:disabled::after,.btn-play.locked::after{display:none;}

.bottom-nav{width:100%;max-width:400px;display:flex;gap:6px;flex-shrink:0;padding-top:4px;}
.bnav{flex:1;height:40px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#8888C0;font-size:1.15rem;transition:all .18s;}
.bnav:active{border-color:#8050FF;color:#B080FF;background:rgba(80,40,160,.2);}

/* ── Game screen ── */
#s-game{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:calc(var(--safe-top)+6px) 8px calc(var(--safe-bot)+6px);
  gap:0;
  height:100%;
  overflow:hidden;
}

/* TOPBAR */
.tban{width:100%;max-width:480px;background:linear-gradient(135deg,var(--card),var(--bg2));border-radius:var(--r);display:flex;align-items:center;gap:0;border:1px solid rgba(128,80,255,.2);transition:border-color .3s,box-shadow .3s;height:48px;flex-shrink:0;overflow:hidden;margin-bottom:4px;}
.btn-back-game{background:rgba(255,60,60,.28);border:none;border-right:2px solid rgba(255,80,80,.5);border-radius:var(--r) 0 0 var(--r);width:60px;height:100%;flex-shrink:0;color:#FF8080;font-size:1.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;line-height:1;padding:0;text-shadow:0 0 10px rgba(255,80,80,.7);}
.btn-back-game:active{background:rgba(255,48,80,.55);transform:scale(.94);color:#fff;}
.tban-center{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:0 8px;overflow:hidden;}
.tban-piece-icon{width:26px;height:26px;flex-shrink:0;object-fit:contain;}
.tban-piece-name{font-size:.88rem;font-weight:900;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.tdot{width:11px;height:11px;border-radius:50%;flex-shrink:0;transition:all .3s;box-shadow:0 0 6px currentColor;}
.topbar-btns{display:flex;align-items:center;gap:5px;padding-right:8px;}
.btn-mini{background:rgba(0,0,0,.4);border:1.5px solid rgba(128,80,255,.25);border-radius:7px;padding:4px 7px;color:var(--gold);font-family:'Exo 2',sans-serif;font-size:.7rem;cursor:pointer;letter-spacing:.05em;min-height:28px;min-width:30px;transition:all .15s;}
.btn-mini:active{border-color:var(--gold);background:rgba(212,160,23,.15);transform:scale(.93);}

/* INFO ZONE : description de la pièce */
.info-zone{
  width:100%;max-width:480px;
  background:linear-gradient(135deg,var(--card),var(--bg2));
  border:1px solid rgba(128,80,255,.2);
  border-radius:var(--r);
  padding:6px 12px;
  flex-shrink:0;
  min-height:52px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  transition:border-color .3s,box-shadow .3s;
  margin-bottom:4px;
}
.info-desc{font-size:.92rem;color:var(--text-dim);line-height:1.55;min-height:1.2em;}
.info-desc b{color:var(--text);}
/* Séparateur pointillé entre desc et phase */
.info-zone.has-phase .info-desc{border-bottom:1px dashed rgba(128,80,255,.25);padding-bottom:4px;margin-bottom:1px;}
/* Message phase — masqué dans info-zone, remplacé par capsule flottante */
.info-phase{display:none !important;}

/* ── CAPSULE FLOTTANTE — messages d'action en haut de l'échiquier ── */
#action-capsule{
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(12,8,28,.95);
  border:1px solid rgba(128,80,255,.5);
  border-radius:20px;
  padding:5px 18px;
  font-size:.88rem;
  font-weight:700;
  color:var(--gold-l);
  z-index:20;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s;
  box-shadow:0 2px 14px rgba(0,0,0,.7);
  text-align:center;
  max-width:90%;
  white-space:nowrap;
}
#action-capsule.visible{opacity:1;}
.sp-spin-msg{font-family:'Cinzel Decorative',serif;font-size:.72rem;color:#C080FF;letter-spacing:.1em;animation:spMsgPulse .6s ease-in-out infinite;}
@keyframes spMsgPulse{0%,100%{opacity:.8;}50%{opacity:1;color:#E0A0FF;}}

/* BOARD WRAP — prend tout l'espace restant, échiquier centré */
.bwrap{
  width:100%;
  max-width:480px;
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.bframe{border:1.5px solid rgba(128,80,255,.3);border-radius:8px;box-shadow:0 0 0 1px rgba(0,0,0,.95),0 0 30px rgba(128,80,255,.12);overflow:hidden;position:relative;}
.bframe.shake{animation:boardShake .38s cubic-bezier(.36,.07,.19,.97);}
@keyframes boardShake{0%,100%{transform:none;}20%{transform:translate(-5px) rotate(-.4deg);}40%{transform:translate(5px) rotate(.4deg);}60%{transform:translate(-3px);}80%{transform:translate(3px);}}
#board{background:#02020A;position:relative;display:block;touch-action:none;}
.cell{position:absolute;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,box-shadow .12s;}
.cell.l{background:#32305A;}.cell.d{background:#06040F;}
.cell.lab{background:radial-gradient(circle,rgba(212,160,23,.6),rgba(160,110,0,.2));box-shadow:inset 0 0 0 2px rgba(212,160,23,.9),0 0 14px rgba(212,160,23,.4);}
.cell.sc{box-shadow:0 0 0 2.5px #A070FF,0 0 16px rgba(160,112,255,.7)!important;background:rgba(120,70,220,.4)!important;z-index:5;}
.cell.vm{background:rgba(48,208,96,.25)!important;box-shadow:inset 0 0 0 2px rgba(48,208,96,.75);}
.cell.vm::after{content:'';position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(48,208,96,.8);box-shadow:0 0 10px rgba(48,208,96,.9);}
.cell.vk{background:rgba(255,48,80,.3)!important;box-shadow:inset 0 0 0 2.5px rgba(255,48,80,.95);animation:pulseKill .5s ease-in-out infinite;}
@keyframes pulseKill{0%,100%{box-shadow:inset 0 0 0 2.5px rgba(255,48,80,.95);}50%{box-shadow:inset 0 0 0 2.5px #FF3050,0 0 18px rgba(255,48,80,.65);}}
.cell.vd{background:rgba(255,180,40,.25)!important;box-shadow:inset 0 0 0 2px rgba(255,180,40,.8);}
.cell.vplace{background:rgba(160,100,255,.25)!important;box-shadow:inset 0 0 0 2px rgba(160,100,255,.85);animation:pulsePl .6s ease-in-out infinite;}
@keyframes pulsePl{0%,100%{box-shadow:inset 0 0 0 2px rgba(160,100,255,.85);}50%{box-shadow:inset 0 0 0 2px #A064FF,0 0 14px rgba(160,100,255,.55);}}
.cell.vrep-o{background:rgba(255,80,80,.28)!important;box-shadow:inset 0 0 0 2px rgba(255,80,80,.9);}
.cell.vrep-d{background:rgba(255,160,40,.28)!important;box-shadow:inset 0 0 0 2px rgba(255,160,40,.9);}
.labsvg{position:absolute;width:60%;height:60%;opacity:.7;}
.piece{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:left var(--anim,.38s) cubic-bezier(.4,0,.2,1),top var(--anim,.38s) cubic-bezier(.4,0,.2,1),transform .15s,filter .15s;z-index:10;pointer-events:all;background:transparent;border:none;overflow:visible;}
.piece canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;pointer-events:none;}
.piece.selp{transform:scale(1.18);z-index:20;filter:brightness(1.2);}
.piece.moving{transition:left var(--anim,.38s) cubic-bezier(.4,0,.2,1),top var(--anim,.38s) cubic-bezier(.4,0,.2,1);}
.piece.flash-kill{animation:flashKill .45s ease-out forwards;}
@keyframes flashKill{0%{filter:brightness(4) saturate(0) invert(1);transform:scale(1.4);}30%{filter:brightness(2) saturate(0) invert(1);transform:scale(1.2);}100%{filter:brightness(1) saturate(0);transform:scale(1);}}
/* Flash pacte : pièce protégée clignote en orange */
.piece.flash-pact{animation:flashPact .6s ease-out;}
@keyframes flashPact{0%{filter:drop-shadow(0 0 0px #FF9040);}30%{filter:drop-shadow(0 0 12px #FF9040) brightness(1.4);}70%{filter:drop-shadow(0 0 8px #FF9040);}100%{filter:none;}}

/* BOTTOM ZONE : tour + pacte + SP + copyright */
.bottom-zone{width:100%;max-width:480px;display:flex;flex-direction:column;gap:0;flex-shrink:0;}
/* Barre de tour — collée à l'échiquier */
.turn-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 0 8px;margin-top:0;}
.turn-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor;}
.turn-txt{font-size:1.05rem;font-weight:800;letter-spacing:.04em;}
/* Lignes toggle */
.btog-row{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid var(--border);cursor:pointer;user-select:none;margin-bottom:5px;}
.btog-label{font-size:.92rem;font-weight:700;color:var(--text-dim);flex:1;letter-spacing:.03em;}
/* Case à cocher */
.btog-check{width:22px;height:22px;border-radius:5px;border:2px solid var(--border);background:rgba(255,255,255,.04);flex-shrink:0;position:relative;transition:border-color .2s,background .2s;cursor:pointer;}
.btog-check.on{background:rgba(128,80,255,.3);border-color:#8050FF;box-shadow:0 0 5px rgba(128,80,255,.35);}
.btog-check.on::after{content:'';position:absolute;left:4px;top:1px;width:9px;height:12px;border-right:2.5px solid #C090FF;border-bottom:2.5px solid #C090FF;transform:rotate(40deg);}
/* Copyright plus visible */
.game-copyright{text-align:center;font-size:.72rem;color:rgba(255,255,255,.3);letter-spacing:.12em;text-transform:uppercase;padding:4px 0 2px;}
/* Points colorés du pacte */
.pact-colors{display:flex;align-items:center;gap:4px;margin-right:6px;}
.pact-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.pact-color-name{font-size:.68rem;font-weight:900;}
.pact-sep{font-size:.62rem;color:var(--text-muted);margin:0 2px;}
.pact-inactive-txt{font-size:.65rem;color:var(--text-muted);font-style:italic;}
/* ── Aura super pouvoir case ── */
.cell.sp-aura::after{content:'';position:absolute;inset:0;border-radius:3px;box-shadow:inset 0 0 14px rgba(200,120,255,.9),0 0 18px rgba(180,80,255,.6);pointer-events:none;animation:spAura 1.2s ease-in-out infinite;}
@keyframes spAura{0%,100%{opacity:.7;}50%{opacity:1;}}
/* ── Pièce avec super pouvoir ── */
.piece.has-sp{animation:spPieceGlow 1.4s ease-in-out infinite;}
@keyframes spPieceGlow{
  0%,100%{filter:drop-shadow(0 0 4px #C060FF) drop-shadow(0 0 8px rgba(180,80,255,.5));outline:2px solid rgba(200,120,255,.4);outline-offset:2px;}
  50%{filter:drop-shadow(0 0 10px #E090FF) drop-shadow(0 0 20px rgba(200,80,255,.9)) drop-shadow(0 0 4px #fff);outline:2px solid rgba(230,160,255,.9);outline-offset:3px;}
}
.pi{display:none;}.pp{display:none;}
.pii{font-size:1.6rem;line-height:1;flex-shrink:0;}
.pin{font-size:.92rem;font-weight:900;letter-spacing:.05em;line-height:1;}
.pid{font-size:.68rem;color:var(--text-dim);line-height:1.45;margin-top:3px;font-style:italic;}
.sound-modal-body{display:flex;flex-direction:column;gap:16px;padding:4px 0;}
.sound-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  padding:10px 14px;
  border-radius:var(--r);
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  transition:background .15s, border-color .15s;
  gap:12px;
}
.sound-toggle-row:active{background:rgba(128,80,255,.08);border-color:rgba(128,80,255,.3);}
.sound-toggle-info{display:flex;align-items:center;gap:10px;}
.sound-toggle-icon{font-size:1.3rem;line-height:1;}
.sound-toggle-label{font-size:.88rem;font-weight:700;color:var(--text);letter-spacing:.04em;}

/* Case à cocher personnalisée */
.sound-toggle-track{
  width:20px;
  height:20px;
  border-radius:5px;
  border:2px solid var(--border);
  background:rgba(255,255,255,.04);
  flex-shrink:0;
  position:relative;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.sound-toggle-track.on{
  background:rgba(128,80,255,.3);
  border-color:#8050FF;
  box-shadow:0 0 8px rgba(128,80,255,.35);
}
/* Coche ✓ quand activé */
.sound-toggle-track.on::after{
  content:'';
  position:absolute;
  left:4px;top:2px;
  width:8px;height:12px;
  border-right:2.5px solid #C090FF;
  border-bottom:2.5px solid #C090FF;
  transform:rotate(40deg);
}
/* Supprimer l'ancien thumb */
.sound-toggle-thumb{display:none;}

/* ── Aura super pouvoir sur une case ── */
.cell.sp-aura::after{content:'';position:absolute;inset:0;border-radius:3px;box-shadow:inset 0 0 14px rgba(200,120,255,.9),0 0 18px rgba(180,80,255,.6);pointer-events:none;animation:spAura 1.2s ease-in-out infinite;}
@keyframes spAura{0%,100%{opacity:.7;}50%{opacity:1;}}
/* ── Pièce avec super pouvoir — halo fort ── */
.piece.has-sp{animation:spPieceGlow 1.4s ease-in-out infinite;}
@keyframes spPieceGlow{
  0%,100%{filter:drop-shadow(0 0 4px #C060FF) drop-shadow(0 0 8px rgba(180,80,255,.5));outline:2px solid rgba(200,120,255,.4);outline-offset:2px;}
  50%{filter:drop-shadow(0 0 10px #E090FF) drop-shadow(0 0 20px rgba(200,80,255,.9)) drop-shadow(0 0 4px #fff);outline:2px solid rgba(230,160,255,.9);outline-offset:3px;}
}
/* ── Bille SP sur le canvas FX ── */
#sp-orb-canvas{position:fixed;inset:0;pointer-events:none;z-index:110;}
/* ── Message spirale au-dessus plateau ── */
.sp-spin-msg{font-family:'Cinzel Decorative',serif;font-size:.72rem;color:#C080FF;letter-spacing:.18em;text-align:center;text-shadow:0 0 10px rgba(180,80,255,.7);animation:spMsgPulse .6s ease-in-out infinite;}
@keyframes spMsgPulse{0%,100%{opacity:.8;}50%{opacity:1;text-shadow:0 0 16px rgba(200,100,255,.9);}}
/* ── Boutons pacte ── */
.btn-pact-yes,.btn-pact-no{flex:1;height:46px;border:none;border-radius:var(--r);font-family:'Exo 2',sans-serif;font-size:.88rem;font-weight:900;letter-spacing:.06em;cursor:pointer;transition:transform .15s;}
.btn-pact-yes{background:linear-gradient(160deg,#0A3A0A,#18A830);color:#E0FFE8;}
.btn-pact-no{background:linear-gradient(160deg,#3A0010,#A82030);color:#FFE0E4;}
.btn-pact-yes:active,.btn-pact-no:active{transform:scale(.96);}
/* ── Toasts ── */
.toast{position:fixed;bottom:calc(var(--safe-bot)+80px);left:50%;transform:translateX(-50%);background:rgba(16,12,32,.96);border:1px solid rgba(128,80,255,.4);border-radius:10px;padding:8px 18px;font-size:.8rem;font-weight:700;color:var(--text);white-space:nowrap;z-index:300;animation:toastIn .25s ease-out;}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px);}to{opacity:1;transform:translate(-50%,0);}}
.cap-flash{position:fixed;inset:0;pointer-events:none;z-index:150;animation:cfAdh .3s ease-out;}
@keyframes cfAdh{0%{opacity:1;}100%{opacity:0;}}
::-webkit-scrollbar{width:3px;}::-webkit-scrollbar-thumb{background:var(--gold-d);border-radius:3px;}

/* ── Icônes insectes PNG ── */
.insect-icon{display:inline-block;width:1.4em;height:1.4em;object-fit:contain;vertical-align:middle;image-rendering:auto;}
.insect-icon--lg,.freemium-icon .insect-icon{width:3rem;height:3rem;}
.rpsym .insect-icon{width:1.6rem;height:1.6rem;}
.insect-icon--pii{width:2rem;height:2rem;object-fit:contain;vertical-align:middle;}
.ppi-img{display:inline-block;width:1.4rem;height:1.4rem;object-fit:contain;vertical-align:middle;filter:drop-shadow(0 0 2px rgba(0,0,0,.6));}
.ppi-img--dead{opacity:.22;filter:grayscale(1) brightness(.7);}

/* ══════════════════════════════════════
   POPUP FREEMIUM
══════════════════════════════════════ */
#modal-freemium .modal-box{border-color:rgba(212,160,23,.5);}
.freemium-icon{font-size:3rem;text-align:center;padding:8px 0 4px;}
.freemium-title{font-family:'Cinzel Decorative',serif;font-size:1.1rem;font-weight:900;color:var(--gold-l);text-align:center;letter-spacing:.05em;line-height:1.3;}
.freemium-sub{font-size:.82rem;color:var(--text-dim);text-align:center;line-height:1.6;padding:0 4px;}
.freemium-actions{display:flex;flex-direction:column;gap:10px;padding:4px 0;}
.btn-share{width:100%;height:54px;border:none;border-radius:var(--r);background:linear-gradient(160deg,#0A3A0A,#18A830 40%,#0A6A18);font-family:'Exo 2',sans-serif;font-size:.92rem;font-weight:900;color:#E0FFE8;letter-spacing:.08em;cursor:pointer;box-shadow:0 4px 20px rgba(30,160,60,.35);display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s;}
.btn-share:active{transform:scale(.97);}
.share-badge{background:rgba(255,255,255,.15);border-radius:20px;padding:2px 8px;font-size:.72rem;font-weight:700;}
.btn-premium{width:100%;height:54px;border:none;border-radius:var(--r);background:linear-gradient(160deg,#3A2A00,#C08010 40%,#7A5000);font-family:'Exo 2',sans-serif;font-size:.92rem;font-weight:900;color:#FFF0C0;letter-spacing:.08em;cursor:pointer;box-shadow:0 4px 20px rgba(180,130,0,.3);display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s;}
.btn-premium:active{transform:scale(.97);}
.freemium-or{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;}
.freemium-or::before,.freemium-or::after{content:'';flex:1;height:1px;background:var(--border);}
.share-progress{background:rgba(48,208,96,.08);border:1px solid rgba(48,208,96,.2);border-radius:var(--r);padding:10px 14px;display:flex;align-items:center;justify-content:space-between;}
.share-progress-label{font-size:.75rem;color:rgba(48,208,96,.8);}
.share-progress-dots{display:flex;gap:6px;}
.share-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(48,208,96,.4);background:transparent;transition:all .3s;}
.share-dot.done{background:#30D060;border-color:#30D060;box-shadow:0 0 8px rgba(48,208,96,.6);}

/* ── Modals ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:450;display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--safe-bot);backdrop-filter:blur(6px);transition:opacity .3s;pointer-events:auto;}
.modal-overlay.hidden{opacity:0;pointer-events:none !important;}
.modal-box{background:linear-gradient(170deg,#0D0B1E,#08060F);border:1px solid var(--gold-d);border-radius:18px 18px 0 0;width:100%;max-width:500px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -10px 50px rgba(0,0,0,.7);transition:transform .3s cubic-bezier(.2,0,.3,1);}
.modal-overlay.hidden .modal-box{transform:translateY(30px);}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--gold-d);flex-shrink:0;}
.modal-title{font-family:'Exo 2',sans-serif;font-size:.8rem;font-weight:900;letter-spacing:.2em;color:var(--gold);}
.modal-close{background:transparent;border:1px solid var(--gold-d);border-radius:7px;color:var(--gold-d);font-size:.9rem;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.modal-close:active{border-color:var(--gold);color:var(--gold);}
.modal-body{overflow-y:auto;padding:14px 18px 24px;display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch;}
.rule-section{display:flex;flex-direction:column;gap:6px;}
.rule-stitle{font-size:.7rem;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;border-bottom:1px solid rgba(128,80,255,.18);padding-bottom:4px;}
.rule-text{font-size:.88rem;color:rgba(224,220,255,.75);line-height:1.7;}
.rpiece{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;color:rgba(224,220,255,.7);line-height:1.55;margin-bottom:5px;}
.rpsym{font-size:1.25rem;flex-shrink:0;width:1.6rem;text-align:center;}
.rule-copyright{font-size:.6rem;color:var(--text-muted);text-align:center;padding-top:8px;}

/* ── End screen ── */
#s-end{justify-content:center;gap:16px;padding:30px 20px;}
.ecrown{font-size:4rem;animation:crownPulse 1.5s ease-in-out infinite;}
@keyframes crownPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.etitle{font-family:'Cinzel Decorative',serif;font-size:2.2rem;font-weight:900;letter-spacing:.06em;text-align:center;}
.esub{font-size:.85rem;color:var(--text-dim);text-align:center;font-style:italic;max-width:320px;}
.ewinner{font-size:.9rem;font-weight:700;text-align:center;letter-spacing:.04em;}
.end-stats{width:100%;max-width:320px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;display:flex;flex-direction:column;gap:8px;}
.end-stat-row{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-dim);}
.end-stat-row b{color:var(--gold-l);}
.btn-primary{width:100%;max-width:320px;height:50px;border:none;border-radius:var(--r);background:linear-gradient(160deg,#4020A0,#9050FF 40%,#3010A0);font-family:'Cinzel Decorative',serif;font-size:.9rem;color:#F0E8FF;letter-spacing:.12em;cursor:pointer;box-shadow:0 4px 20px rgba(128,64,255,.35);transition:transform .15s;}
.btn-primary:active{transform:scale(.97);}
.btn-secondary{width:100%;max-width:320px;height:44px;border-radius:var(--r);border:1.5px solid var(--border);background:transparent;font-family:'Exo 2',sans-serif;font-size:.82rem;font-weight:700;color:var(--text-dim);letter-spacing:.08em;cursor:pointer;transition:all .2s;}
.btn-secondary:active{border-color:#8050FF;color:#B080FF;}