:root{
  --bg:#070b20;
  --panel:#10183d;
  --cyan:#39f5ff;
  --violet:#9d5cff;
  --pink:#ff4ee8;
  --yellow:#ffe45a;
  --cell:min(calc((100vw - 28px)/8), 58px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#050718;font-family:Inter,ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,sans-serif;color:white;overflow-x:hidden}
body{display:flex;justify-content:center}
button{font:inherit;color:inherit}
.app-shell{width:min(100vw,480px);min-height:100svh;position:relative;overflow:hidden;padding:calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 12px);background:
radial-gradient(circle at 25% 4%,#223d90 0 13%,transparent 36%),
radial-gradient(circle at 90% 72%,#7a166e 0 8%,transparent 35%),
linear-gradient(180deg,#0a1235 0%,#080b25 52%,#090721 100%)}
.app-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(87,169,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(87,169,255,.045) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(to bottom,#000,transparent 80%)}
.ambient{position:absolute;border-radius:50%;filter:blur(35px);opacity:.26;pointer-events:none}.ambient-a{width:220px;height:220px;background:#255cff;top:130px;left:-120px}.ambient-b{width:240px;height:240px;background:#ff2bc9;right:-160px;bottom:100px}
.topbar{position:relative;z-index:3;height:58px;display:grid;grid-template-columns:64px 1fr 44px;align-items:center;gap:8px}
.level-chip{height:48px;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#1a2453,#111738);border:1px solid rgba(104,227,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 20px rgba(34,211,238,.18)}
.level-chip .eyebrow{font-size:8px;letter-spacing:1.4px;color:#9ddfff}.level-chip strong{font-size:22px;line-height:20px;color:white;text-shadow:0 0 12px #4deaff}
.title-lockup{text-align:center;min-width:0}.game-title{font-weight:1000;font-size:clamp(16px,4.6vw,22px);letter-spacing:.5px;white-space:nowrap;text-shadow:0 2px 0 #1e275f,0 0 18px #25eaff}.game-title span{color:#ffe04e}.mission{margin-top:1px;font-size:10px;color:#b7c6ff;letter-spacing:.4px}
.icon-button{border:1px solid rgba(112,221,255,.6);background:linear-gradient(145deg,#1b2658,#101636);height:42px;width:42px;border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 14px rgba(69,226,255,.16)}
.hud-row{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr .9fr;gap:7px;margin:4px 0 8px}.hud-pill{height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(180deg,rgba(24,36,82,.95),rgba(13,19,53,.95));border:1px solid rgba(82,135,226,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 5px 15px rgba(0,0,0,.24)}.hud-pill b{font-size:14px}.hud-pill small{font-size:8px;color:#96a7d9}.hud-icon{color:#4bf2ff}.stars{gap:2px;color:#ffe43c;font-size:15px;text-shadow:0 0 9px rgba(255,228,60,.8)}.stars .dim{color:#46517d;text-shadow:none}
.board-wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}.board{--bw:calc(var(--cell)*8);--bh:calc(var(--cell)*9);position:relative;width:var(--bw);height:var(--bh);border-radius:20px;background:#111736;border:3px solid #5ef5ff;box-shadow:0 0 0 2px #163d86,0 0 22px rgba(67,232,255,.42),inset 0 0 32px rgba(40,130,255,.16);overflow:visible}
.board:after{content:"";position:absolute;inset:7px;border-radius:13px;border:1px solid rgba(148,128,255,.35);pointer-events:none;box-shadow:inset 0 0 22px rgba(116,92,255,.12)}
.grid-overlay{position:absolute;inset:0;border-radius:17px;overflow:hidden;background-color:#111736;background-image:linear-gradient(45deg,#171b43 25%,transparent 25%,transparent 75%,#171b43 75%,#171b43),linear-gradient(45deg,#171b43 25%,#101532 25%,#101532 75%,#171b43 75%,#171b43);background-position:0 0,var(--cell) var(--cell);background-size:calc(var(--cell)*2) calc(var(--cell)*2);opacity:1}.grid-overlay:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(113,125,190,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(113,125,190,.11) 1px,transparent 1px);background-size:var(--cell) var(--cell);background-position:-1px -1px}
.piece,.mechanic,.companion,.key-cell{position:absolute;left:calc(var(--x)*var(--cell) + 4px);top:calc(var(--y)*var(--cell) + 4px);width:calc(var(--w,1)*var(--cell) - 8px);height:calc(var(--h,1)*var(--cell) - 8px)}
.piece{z-index:5;border:2px solid rgba(255,255,255,.62);box-shadow:inset 0 3px 0 rgba(255,255,255,.36),inset 0 -8px 18px rgba(0,0,40,.30),0 5px 8px rgba(0,0,0,.40),0 0 14px var(--glow);display:flex;align-items:center;justify-content:center;transition:.25s ease;filter:saturate(1.18)}
.piece:before{content:"";position:absolute;inset:4px;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.18),transparent 42%);pointer-events:none}.piece-symbol{font-size:clamp(18px,6vw,30px);filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));z-index:2}.count-badge{position:absolute;right:-5px;top:-6px;z-index:3;background:linear-gradient(180deg,#fff,#d9ecff);color:#18224f;border-radius:12px;min-width:24px;height:22px;padding:0 5px;display:grid;place-items:center;font-weight:1000;font-size:11px;border:2px solid var(--glow);box-shadow:0 2px 7px rgba(0,0,0,.4),0 0 8px var(--glow)}
.p-single{border-radius:15px}.p-domino{border-radius:18px}.p-square{border-radius:22px}
/* V3 : les polyominos concaves sont de vraies silhouettes SVG avec un unique contour extérieur. */
.p-l,.p-cross{border:0;background:none!important;box-shadow:none;filter:drop-shadow(0 5px 5px rgba(0,0,0,.38)) drop-shadow(0 0 7px var(--glow));overflow:visible}
.p-l:before,.p-cross:before{display:none}
.poly-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.poly-fill{filter:none}
.poly-shine{pointer-events:none}
.poly-outline{fill:none;stroke:rgba(255,255,255,.82);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.p-l .piece-symbol,.p-cross .piece-symbol{position:absolute;z-index:2}
.p-l .piece-symbol{left:24%;top:61%;transform:translate(-50%,-50%)}
.p-cross .piece-symbol{left:50%;top:50%;transform:translate(-50%,-50%)}
.aqua-piece{--glow:#39ebff;background:linear-gradient(145deg,#52f5ff,#168dd9 54%,#1655a8)}.fire-piece{--glow:#ff6b4a;background:linear-gradient(145deg,#ffd55a,#ff6b2c 55%,#d62867)}.volt-piece{--glow:#ffe936;background:linear-gradient(145deg,#fff267,#ffca20 55%,#e4761c)}.leaf-piece{--glow:#66ff95;background:linear-gradient(145deg,#86ff9c,#26c872 55%,#168467)}.myst-piece{--glow:#d45cff;background:linear-gradient(145deg,#ef74ff,#9446ee 55%,#5d2fd2)}
.companion{z-index:4;border-radius:50% 50% 44% 44%;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.7);box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -8px 15px rgba(0,0,50,.25),0 0 16px var(--glow),0 4px 7px rgba(0,0,0,.4);animation:floaty 2.3s ease-in-out infinite}.companion:after{content:"";position:absolute;width:60%;height:22%;bottom:-5px;border-radius:50%;background:rgba(0,0,0,.32);filter:blur(4px);z-index:-1}.companion .element{font-size:clamp(14px,4.5vw,22px);transform:translateY(-5px)}.companion .face{position:absolute;font-size:12px;letter-spacing:7px;color:#0a1435;transform:translate(3px,8px);font-weight:1000}.aqua{--glow:#42efff;background:linear-gradient(145deg,#b4fbff,#39dfff 55%,#168fe4)}.fire{--glow:#ff7046;background:linear-gradient(145deg,#fff08a,#ff8e32 48%,#f13d44)}.volt{--glow:#fff24b;background:linear-gradient(145deg,#fff9a6,#ffd928 55%,#ff9f24)}.leaf{--glow:#63ff9b;background:linear-gradient(145deg,#c1ffb4,#53de65 55%,#17955d)}.myst{--glow:#e16cff;background:linear-gradient(145deg,#ffb3ff,#b355f0 55%,#7138d5)}
.mechanic{z-index:3;border-radius:13px;display:grid;place-items:center;font-size:22px;font-weight:900}.fixed{background:linear-gradient(145deg,#263256,#11182e);border:2px solid #61709a;box-shadow:inset 0 0 0 4px #1b2440,inset 0 2px 0 rgba(255,255,255,.15)}.striped-yellow{background:repeating-linear-gradient(135deg,#f8da30 0 8px,#1e2437 8px 16px);border:2px solid #fff16b;box-shadow:0 0 12px rgba(255,229,64,.5);color:#fff}.frozen{background:linear-gradient(145deg,rgba(205,249,255,.92),rgba(84,187,255,.84));border:2px solid #d8fbff;box-shadow:inset 0 0 10px white,0 0 14px #6be6ff;color:white;text-shadow:0 0 10px #2a8ed8}.locked{background:linear-gradient(145deg,#563076,#221642);border:2px solid #d16cff;box-shadow:0 0 13px #a836ff}
.key-cell{z-index:4;display:grid;place-items:center;border-radius:13px;background:radial-gradient(circle,#fff8bd 0 20%,#ffcc35 21% 35%,rgba(255,204,53,.10) 36%);font-size:20px;filter:drop-shadow(0 0 8px #ffd94f)}
.door{position:absolute;z-index:8;display:flex;align-items:center;gap:6px;padding:4px 10px;background:linear-gradient(#1e2b68,#10173f);border:1px solid #58ecff;border-radius:12px;box-shadow:0 0 13px rgba(83,241,255,.35);font-size:8px;letter-spacing:.8px;color:#9ff8ff}.door-top{top:-11px;left:50%;transform:translateX(-50%)}.portal-core{width:12px;height:12px;border-radius:50%;background:#64f3ff;box-shadow:0 0 10px #4ceaff,inset 0 0 4px white;animation:pulse 1.6s infinite}
.side-gate{position:absolute;z-index:8;right:-13px;top:calc(var(--y)*var(--cell) + 5px);width:18px;height:calc(var(--cell) - 10px);border-radius:0 9px 9px 0;background:linear-gradient(180deg,#42318e,#1d1749);border:2px solid #bc63ff;border-left:0;box-shadow:0 0 14px #9e48ff}.gate-light{position:absolute;inset:7px 3px;border-radius:5px;background:#e66cff;box-shadow:0 0 8px #e66cff;animation:pulse 1.1s infinite}.waiting-companion{position:absolute;z-index:7;right:-43px;top:calc(var(--y)*var(--cell) + 4px);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#9ff8ff,#2ec8ed);border:2px solid white;box-shadow:0 0 15px #48edff;font-size:17px}.waiting-companion small{position:absolute;right:-5px;bottom:-4px;background:#fff;color:#243764;border-radius:9px;padding:1px 4px;font-size:8px;font-weight:900}
.board-caption{width:calc(var(--cell)*8);display:flex;justify-content:center;gap:12px;margin:6px 0 3px;color:#8998c5;font-size:8px}.board-caption span{display:flex;align-items:center;gap:4px}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.legend-dot.mobile{background:#42efff}.legend-dot.special{background:#d56cff}.legend-dot.friend{background:#79ff9c}
.bottom-panel{position:relative;z-index:3;margin-top:4px}.guide-card{height:78px;display:grid;grid-template-columns:72px 1fr;align-items:center;background:linear-gradient(145deg,rgba(22,31,74,.97),rgba(12,16,48,.97));border:1px solid rgba(111,185,255,.5);border-radius:20px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 9px 18px rgba(0,0,0,.24)}.guide-card img{width:72px;height:78px;object-fit:cover;object-position:50% 35%;filter:saturate(1.1) contrast(1.05)}.speech{padding:0 12px 0 9px;display:flex;flex-direction:column;gap:3px}.speech strong{color:#5cf2ff;font-size:10px;letter-spacing:1px}.speech span{font-size:10px;line-height:1.25;color:#d5ddff}.speech b{color:white}.actions{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;margin-top:8px}.action-btn{height:42px;border:0;border-radius:15px;font-weight:900;font-size:12px;letter-spacing:.2px;box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 6px 13px rgba(0,0,0,.3)}.action-btn.secondary{background:linear-gradient(180deg,#252f66,#151b45);border:1px solid #5668a9}.action-btn.primary{background:linear-gradient(180deg,#6af4ff,#2ebed9 50%,#2171be);border:1px solid #b7fbff;text-shadow:0 1px 2px #14507d;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 0 16px rgba(55,226,255,.25),0 6px 13px rgba(0,0,0,.3)}
@keyframes pulse{50%{opacity:.52;transform:scale(.84)}}@keyframes floaty{50%{transform:translateY(-3px)}}
.hint-pulse{animation:hint .85s ease-in-out 3}@keyframes hint{50%{filter:brightness(1.5) drop-shadow(0 0 12px #fff);transform:scale(1.04)}}
@media (min-width:481px){body{padding:20px}.app-shell{border-radius:34px;min-height:min(920px,calc(100vh - 40px));box-shadow:0 30px 80px rgba(0,0,0,.5);border:1px solid #263265}.waiting-companion{right:-38px}}
@media (max-height:760px){:root{--cell:min(calc((100vw - 28px)/8),50px)}.topbar{height:52px}.hud-row{margin-top:0}.guide-card{height:68px}.guide-card img{height:68px}.actions{margin-top:6px}.action-btn{height:36px}.board-caption{margin-top:4px}}


/* ===== LUMIS V4 : GEOMETRIE STRICTE DU PLATEAU ===== */
/* 8 x 9, une seule unite de mesure : --cell. Le cadre est peint uniquement a l'exterieur. */
.board-stage{
  position:relative;
  width:calc(var(--cell) * 8);
  padding:30px 0;
}
.board{
  width:calc(var(--cell) * 8);
  height:calc(var(--cell) * 9);
  border:0;
  border-radius:8px;
  background:#111736;
  box-shadow:
    0 0 0 3px #5ef5ff,
    0 0 0 5px #163d86,
    0 0 22px rgba(67,232,255,.42);
  overflow:visible;
}
.board:after{
  display:none;
}
.grid-overlay{
  inset:0;
  border-radius:8px;
  background:
    conic-gradient(
      from 90deg,
      #121735 0 25%,
      #171b40 0 50%,
      #121735 0 75%,
      #171b40 0 100%
    ) 0 0 / calc(var(--cell) * 2) calc(var(--cell) * 2);
}
.grid-overlay:after{
  background-size:var(--cell) var(--cell);
}

/* Le contour de toutes les pieces a exactement 4 px d'arrondi. */
.piece,
.p-single,
.p-domino,
.p-square{
  border-radius:4px;
}
.piece:before{
  border-radius:4px;
}

/* Les formes concaves sont tracees en SVG et leur rayon de 4 px est genere en JS. */
.p-l,.p-cross{
  border-radius:0;
}
.poly-shape{
  overflow:visible;
}
.poly-outline{
  stroke-linejoin:round;
  stroke-linecap:round;
}

/* Les portes sont exclusivement sur les bords haut/bas et restent hors des cases. */
.door{
  left:calc((var(--door-x) + .5) * var(--cell));
  right:auto;
  z-index:12;
  white-space:nowrap;
}
.door-top{
  top:0;
  transform:translate(-50%,-50%);
}
.door-bottom{
  top:auto;
  bottom:0;
  transform:translate(-50%,50%);
}
.waiting-companion{
  position:absolute;
  left:50%;
  right:auto;
  top:32px;
  width:34px;
  height:34px;
  transform:translateX(-50%);
}
.door-bottom .waiting-companion{
  top:auto;
  bottom:31px;
}

.board-caption{
  width:calc(var(--cell) * 8);
  margin-top:2px;
}

/* ===== LUMIS V5 : PIECES CALEES PIXEL POUR PIXEL SUR LA GRILLE ===== */
/*
   Regle stricte : une piece occupe exactement l'union des cases qui la composent.
   Aucun retrait, aucune marge et aucune sur-largeur. Le contour est dessine vers
   l'interieur afin que la limite externe reste exactement sur la limite des cases.
*/
.piece{
  left:calc(var(--x) * var(--cell));
  top:calc(var(--y) * var(--cell));
  width:calc(var(--w,1) * var(--cell));
  height:calc(var(--h,1) * var(--cell));
  margin:0;
  box-sizing:border-box;
}

/* Pieces convexes : le border CSS est inclus dans les dimensions exactes. */
.p-single,.p-domino,.p-square{
  border-radius:4px;
  overflow:hidden;
}

/* Silhouettes concaves : le SVG occupe exactement la boite de cellules. */
.p-l,.p-cross{
  overflow:visible;
}
.p-l .poly-shape,.p-cross .poly-shape{
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
/* Le trait fait 4 px mais il est clippe a la silhouette : il reste donc uniquement dedans. */
.poly-outline{
  stroke-width:4;
  vector-effect:non-scaling-stroke;
}

/* ===== LUMIS V6 : GEOMETRIE UNIFIEE POUR TOUTES LES FORMES ===== */
/* Les formes speciales utilisent exactement la meme unite --cell que le damier. */
.p-l,.p-cross{
  left:calc(var(--x) * var(--cell));
  top:calc(var(--y) * var(--cell));
  width:calc(var(--w) * var(--cell));
  height:calc(var(--h) * var(--cell));
  margin:0;
  padding:0;
  overflow:visible;
}
.p-l .poly-shape,.p-cross .poly-shape{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:visible;
}
/* Un trait SVG de 8 px, clippe a la silhouette, donne exactement 4 px visibles vers l'interieur. */
.p-l .poly-outline,.p-cross .poly-outline{
  stroke-width:8;
  vector-effect:non-scaling-stroke;
}

/* ===== LUMIS V7 : ALIGNEMENT STRICT DE TOUTES LES PIECES ET MECANIQUES ===== */
/*
   Regle universelle : piece mobile, obstacle special, cle, cadenas, zone zebree,
   bloc gele ou grille verticale utilisent tous exactement la meme geometrie
   que le damier. Aucune marge, aucun retrait, aucun padding externe.
*/
.piece,
.mechanic,
.key-cell{
  left:calc(var(--x) * var(--cell));
  top:calc(var(--y) * var(--cell));
  width:calc(var(--w, 1) * var(--cell));
  height:calc(var(--h, 1) * var(--cell));
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* Toutes les silhouettes rectangulaires restent exactement sur les lignes de cases. */
.p-domino,
.fixed,
.striped-yellow,
.frozen,
.locked,
.key-cell{
  border-radius:4px;
  overflow:hidden;
}

/* Les contenus decoratifs restent centres sans modifier l'emprise geometrique. */
.mechanic > span,
.key-cell > span{
  position:relative;
  z-index:2;
  pointer-events:none;
}

/* Le bloc de 2 cases est explicitement verrouille sur 2 x 1 cellules. */
.p-domino{
  width:calc(var(--w, 2) * var(--cell));
  height:calc(var(--h, 1) * var(--cell));
}

/* ===== LUMIS V9 : SPRITES DECOUPES FOURNIS PAR L UTILISATEUR ===== */
.companion{
  left:calc(var(--x) * var(--cell));
  top:calc(var(--y) * var(--cell));
  width:var(--cell);
  height:var(--cell);
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.companion:after{display:none}
.companion .lumi-sprite{
  display:block;
  width:calc(100% - 2px);
  height:calc(100% - 2px);
  object-fit:contain;
  object-position:center center;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)) drop-shadow(0 0 5px var(--glow));
  transform-origin:center bottom;
}
.companion.aqua{--glow:#42efff}.companion.fire{--glow:#ff7046}.companion.volt{--glow:#fff24b}.companion.leaf{--glow:#63ff9b}.companion.myst{--glow:#e16cff}

/* ===== LUMIS V10 : SPRITES STRICTEMENT DANS UNE CASE + PORTES + HUD COMPACT ===== */
/*
   Les PNG fournis par l'utilisateur sont recadres uniquement sur leurs pixels
   non transparents (aucun visuel regenere). La boite compagnon fait exactement
   une case et coupe tout debordement. Le sprite garde au minimum 1 px de marge.
*/
.companion{
  left:calc(var(--x) * var(--cell));
  top:calc(var(--y) * var(--cell));
  width:var(--cell);
  height:var(--cell);
  overflow:hidden;
  display:block;
  border:0;
  background:none;
  box-shadow:none;
}
.companion .lumi-sprite{
  position:absolute;
  left:50%;
  top:50%;
  width:auto;
  height:auto;
  max-width:calc(100% - 2px);
  max-height:calc(100% - 2px);
  object-fit:unset;
  object-position:unset;
  transform:translate(-50%,-50%);
  transform-origin:center center;
  filter:none;
  margin:0;
  padding:0;
}

/* Le cadre reste entierement a l'exterieur des 72 cases. */
.board{
  border-radius:4px;
  overflow:visible;
}
.grid-overlay{
  border-radius:0;
  overflow:hidden;
}

/* Une porte occupe exactement la largeur d'une colonne et touche le damier. */
.board-stage{
  padding:34px 0;
}
.door{
  position:absolute;
  left:calc(var(--door-x) * var(--cell));
  width:var(--cell);
  height:34px;
  padding:0;
  margin:0;
  transform:none;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
  z-index:12;
}
.door-top{
  top:34px;
  transform:translateY(-100%);
}
.door-bottom{
  bottom:34px;
  transform:translateY(100%);
}
.door-frame{
  position:absolute;
  inset:0;
  border:2px solid #65f5ff;
  background:linear-gradient(180deg,#274485 0%,#111b49 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28),0 0 10px rgba(72,233,255,.55);
  overflow:hidden;
}
.door-top .door-frame{border-radius:8px 8px 0 0;border-bottom:0}
.door-bottom .door-frame{border-radius:0 0 8px 8px;border-top:0}
.door-panel{
  position:absolute;
  left:6px;
  right:6px;
  top:5px;
  bottom:0;
  border:1px solid #8aa8ff;
  background:linear-gradient(90deg,#17234f 0 47%,#2e4d8d 48% 52%,#17234f 53% 100%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.26),inset 0 3px 7px rgba(101,245,255,.18);
}
.door-bottom .door-panel{top:0;bottom:5px}
.door-window{
  position:absolute;
  left:50%;
  top:5px;
  width:12px;
  height:9px;
  transform:translateX(-50%);
  border-radius:6px 6px 3px 3px;
  background:#5ef5ff;
  border:1px solid #d7ffff;
  box-shadow:0 0 8px #36eaff,inset 0 0 4px #fff;
}
.door-bottom .door-window{top:auto;bottom:5px;border-radius:3px 3px 6px 6px}
.door-rib{
  position:absolute;
  left:50%;
  top:16px;
  bottom:2px;
  width:2px;
  transform:translateX(-50%);
  background:#5577c8;
  box-shadow:0 0 4px rgba(94,245,255,.5);
}
.door-bottom .door-rib{top:2px;bottom:16px}

/* Zone conteur volontairement compacte pour rendre de la hauteur au plateau. */
.bottom-panel{margin-top:1px}
.guide-card{
  height:52px;
  grid-template-columns:48px 1fr;
  border-radius:14px;
}
.guide-card img{
  width:46px;
  height:50px;
  object-fit:contain;
  object-position:center center;
  justify-self:center;
}
.speech{padding:0 9px 0 4px;gap:1px}
.speech strong{font-size:8px}
.speech span{font-size:8.5px;line-height:1.15}
.actions{margin-top:5px;gap:7px}
.action-btn{height:36px;border-radius:12px;font-size:11px}

@media (max-height:760px){
  .guide-card{height:46px}
  .guide-card img{width:40px;height:44px}
  .speech span{font-size:8px}
  .action-btn{height:32px}
  .board-stage{padding:30px 0}
  .door-top{top:30px}
  .door-bottom{bottom:30px}
  .door{height:30px}
}

/* ===== LUMIS V11 : VALIDATION DESIGN - MARGE UNIVERSELLE 1 PX ===== */
/* Tous les blocs et mecanismes laissent 1 px avec le damier, sans changer leur emprise logique. */
.piece,
.mechanic,
.key-cell{
  left:calc(var(--x) * var(--cell) + 1px);
  top:calc(var(--y) * var(--cell) + 1px);
  width:calc(var(--w, 1) * var(--cell) - 2px);
  height:calc(var(--h, 1) * var(--cell) - 2px);
  box-sizing:border-box;
}
/* Les formes concaves utilisent la meme boite geometrique, avec une marge externe de 1 px. */
.p-l,.p-cross{
  left:calc(var(--x) * var(--cell) + 1px);
  top:calc(var(--y) * var(--cell) + 1px);
  width:calc(var(--w) * var(--cell) - 2px);
  height:calc(var(--h) * var(--cell) - 2px);
}
/* Les Lumis au repos restent strictement dans une case, avec 1 px visible tout autour. */
.companion{
  left:calc(var(--x) * var(--cell) + 1px);
  top:calc(var(--y) * var(--cell) + 1px);
  width:calc(var(--cell) - 2px);
  height:calc(var(--cell) - 2px);
  overflow:hidden;
}
.companion .lumi-sprite{
  max-width:100%;
  max-height:100%;
}

/* ===== LUMIS V14 : IDENTITE COULEUR DES BLOCS =====
   Fond elementaire plus clair et translucide (50%), contour plus sombre de la meme famille.
   Le damier reste perceptible sous la piece tout en conservant le rendu glossy.
*/
.piece{
  border-width:2px;
  border-style:solid;
  backdrop-filter:saturate(1.2) brightness(1.06);
  -webkit-backdrop-filter:saturate(1.2) brightness(1.06);
}
.aqua-piece{
  --glow:#45edff;
  border-color:#0876b8;
  background:linear-gradient(145deg,rgba(134,249,255,.50),rgba(61,200,244,.50) 54%,rgba(42,139,218,.50));
}
.fire-piece{
  --glow:#ff7953;
  border-color:#b72b39;
  background:linear-gradient(145deg,rgba(255,222,112,.50),rgba(255,126,70,.50) 54%,rgba(232,70,91,.50));
}
.volt-piece{
  --glow:#ffe83f;
  border-color:#b77808;
  background:linear-gradient(145deg,rgba(255,249,137,.50),rgba(255,218,64,.50) 54%,rgba(246,171,39,.50));
}
.leaf-piece{
  --glow:#69ff9c;
  border-color:#117a50;
  background:linear-gradient(145deg,rgba(177,255,183,.50),rgba(80,222,126,.50) 54%,rgba(43,166,112,.50));
}
.myst-piece{
  --glow:#db67ff;
  border-color:#6327a9;
  background:linear-gradient(145deg,rgba(246,157,255,.50),rgba(184,104,242,.50) 54%,rgba(125,72,218,.50));
}
/* Les L et croix sont en SVG : meme logique de contour sombre + remplissage clair/translucide. */
.fire-piece .poly-fill{fill:rgba(255,126,70,.50)}
.fire-piece .poly-outline{stroke:#b72b39}
.myst-piece .poly-fill{fill:rgba(184,104,242,.50)}
.myst-piece .poly-outline{stroke:#6327a9}
.p-l .poly-shine,.p-cross .poly-shine{opacity:.35}

/* ===== LUMIS V13 : CONTOURS DES FORMES CONCAVES =====
   La boite 2x2 / 3x3 reste strictement technique et totalement invisible.
   Seule la silhouette SVG reelle du L ou de la croix est dessinee.
   Son contour visible est de 2 px, identique aux pieces simples. */
.piece.p-l,
.piece.p-cross{
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.38)) drop-shadow(0 0 7px var(--glow));
}
.piece.p-l::before,
.piece.p-cross::before{
  display:none !important;
}
.p-l .poly-outline,
.p-cross .poly-outline{
  stroke-width:4 !important; /* clippe a la silhouette = 2 px visibles vers l'interieur */
  vector-effect:non-scaling-stroke;
}
/* ===== LUMIS V15 : MOTEUR DE JEU ===== */
.level-chip span{font-size:8px;letter-spacing:1.2px;color:#9ddfff}.game-title em{font-style:normal;color:#ffe04e}.board{touch-action:none;user-select:none}.board-stage{padding:34px 0}.entity{position:absolute;z-index:4;pointer-events:none}.piece.game-piece{z-index:6;cursor:grab;touch-action:none;transition:none}.piece.game-piece.dragging{z-index:30;cursor:grabbing;filter:brightness(1.12) drop-shadow(0 0 10px var(--glow));transition:none}.piece.game-piece.blocked{animation:blocked .18s ease 2}.piece.game-piece .piece-symbol{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.game-piece.poly{border:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible}.game-piece.poly:before{display:none}.game-piece.poly svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.game-piece.poly .poly-outline{fill:none;stroke-width:4;vector-effect:non-scaling-stroke}.game-piece.poly .poly-shine{opacity:.35}.game-piece.poly .piece-symbol{z-index:3}.companion.game-lumi{z-index:5;overflow:hidden;animation:floaty 2.3s ease-in-out infinite}.companion.game-lumi img{display:block;width:100%;height:100%;object-fit:contain}.mechanic.game-mechanic,.key-cell.game-key{z-index:4}.door{pointer-events:none}.door-window{display:none!important}.door-panel:after{content:"";position:absolute;left:4px;right:4px;top:4px;height:2px;background:rgba(120,220,255,.35)}.door.open .door-panel{animation:doorOpen .55s forwards}.arrival{animation:arrive .55s ease-out}.vanish{animation:vanish .42s forwards}.splash{position:absolute;z-index:40;pointer-events:none;font-size:30px;transform:translate(-50%,-50%);animation:fx .7s forwards}.hinted{animation:hint 0.8s ease-in-out 3!important}
.modal,.level-menu{position:fixed;inset:0;z-index:100;background:rgba(3,5,20,.72);display:grid;place-items:center;padding:22px;backdrop-filter:blur(7px)}.hidden{display:none!important}.modal-card,.level-menu-card{width:min(360px,92vw);border-radius:24px;padding:22px;background:linear-gradient(145deg,#18245a,#0c1236);border:1px solid #5ceeff;box-shadow:0 0 30px rgba(72,232,255,.3);text-align:center}.modal-card h2{margin:5px 0}.modal-card p{font-size:12px;color:#cbd6ff}.modal-stars{font-size:30px;color:#ffe43c}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0}.level-grid button{aspect-ratio:1;border-radius:12px;border:1px solid #596eae;background:#17204d;color:white;font-weight:900}.level-grid button.current{border-color:#5cf2ff;box-shadow:0 0 10px #39dfff}.level-menu-card .action-btn{width:100%}
@keyframes blocked{50%{transform:translateX(3px)}}@keyframes vanish{to{opacity:0;transform:scale(.15) rotate(10deg)}}@keyframes fx{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1.45)}}@keyframes doorOpen{to{transform:translateY(-92%);opacity:.25}}@keyframes arrive{0%{opacity:0;transform:translateY(var(--arrivalY)) scale(.7)}100%{opacity:1;transform:none}}

/* ===== LUMIS V16 : GLISSEMENT FLUIDE, LIENS DE BLOCAGE, TUTORIELS ===== */
.actions-three{grid-template-columns:1fr 1.2fr 1fr}.actions-three .action-btn{min-width:0;padding:0 7px}
.piece.game-piece{will-change:left,top,transform;transition:left .13s cubic-bezier(.2,.8,.2,1),top .13s cubic-bezier(.2,.8,.2,1),transform .08s linear}
.piece.game-piece.dragging{transition:left .10s cubic-bezier(.2,.8,.2,1),top .10s cubic-bezier(.2,.8,.2,1),transform .04s linear}
.piece.game-piece.bump{animation:bump .24s ease}
@keyframes bump{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(var(--bump-x,0),var(--bump-y,0),0)}}

.block-chain{position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg);display:flex;align-items:center;gap:3px;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.65))}
.block-chain .links{font-size:18px;letter-spacing:-5px;color:#c8d6ff;text-shadow:0 0 5px #65e9ff}
.block-chain .cause{min-width:24px;height:24px;padding:0 4px;border-radius:50%;display:grid;place-items:center;font-size:14px;background:linear-gradient(145deg,#1b285c,#0d1233);border:2px solid #d7f9ff;box-shadow:0 0 10px rgba(98,236,255,.55)}
.block-chain.fire .cause{border-color:#ffad71;box-shadow:0 0 10px rgba(255,101,65,.7)}
.block-chain.volt .cause{border-color:#ffe65b;box-shadow:0 0 10px rgba(255,222,50,.7)}
.block-chain.key .cause{border-color:#d8c2ff;box-shadow:0 0 10px rgba(190,120,255,.7)}
.mechanic .dependency-badge{position:absolute;right:3px;top:3px;z-index:3;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#10183d;border:1px solid rgba(255,255,255,.8);font-size:12px;box-shadow:0 0 8px rgba(85,232,255,.5)}

.tutorial-card{width:min(370px,92vw);border-radius:24px;padding:20px;background:linear-gradient(145deg,#18245a,#0c1236);border:1px solid #5ceeff;box-shadow:0 0 32px rgba(72,232,255,.34);text-align:center}
.tutorial-kicker{font-size:9px;letter-spacing:1.7px;color:#75efff;font-weight:900}.tutorial-card h2{margin:5px 0 12px;font-size:20px}.tutorial-card p{margin:12px 4px 16px;color:#cbd6ff;font-size:12px;line-height:1.35}.tutorial-card .action-btn{width:100%}
.tutorial-visual{height:118px;border-radius:18px;border:1px solid rgba(103,219,255,.35);background:linear-gradient(145deg,rgba(33,46,99,.95),rgba(13,18,52,.95));display:grid;place-items:center;overflow:hidden;position:relative;box-shadow:inset 0 0 22px rgba(66,101,255,.15)}
.tutorial-row{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:8px}.tuto-cell{width:46px;height:46px;border-radius:8px;display:grid;place-items:center;font-size:24px;border:2px solid rgba(255,255,255,.55);box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 0 12px var(--tc,#46eaff)}
.tuto-cell.aqua{--tc:#42efff;background:rgba(61,200,244,.5)}.tuto-cell.fire{--tc:#ff7046;background:rgba(255,126,70,.5)}.tuto-cell.volt{--tc:#fff24b;background:rgba(255,218,64,.5)}.tuto-cell.leaf{--tc:#63ff9b;background:rgba(80,222,126,.5)}.tuto-cell.myst{--tc:#e16cff;background:rgba(184,104,242,.5)}
.tuto-arrow{font-size:26px;color:#80f5ff;text-shadow:0 0 10px #45dfff}.tuto-obstacle{width:44px;height:44px;border-radius:8px;border:2px solid #566899;background:repeating-linear-gradient(135deg,#202b57 0 7px,#111938 7px 14px);display:grid;place-items:center;font-size:20px}.tuto-chain{font-size:24px}.tuto-door{width:46px;height:54px;border:2px solid #65f5ff;border-radius:8px 8px 2px 2px;background:linear-gradient(90deg,#17234f 0 47%,#2e4d8d 48% 52%,#17234f 53% 100%);box-shadow:0 0 10px rgba(72,233,255,.55);display:grid;place-items:center}.tuto-lumi{font-size:30px;animation:floaty 2s ease-in-out infinite}

.unblock-flash{animation:unblockFlash .8s ease-in-out 2!important}
@keyframes unblockFlash{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5) drop-shadow(0 0 12px #fff)}}

@media (max-width:390px){.actions-three .action-btn{font-size:9.5px}.tutorial-visual{height:104px}.tuto-cell{width:40px;height:40px}}

/* V17 - pieces semi-mobiles */
.axis-badge{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);z-index:6;min-width:22px;height:16px;padding:0 4px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:1000;color:#fff;background:rgba(8,12,38,.78);border:1px solid rgba(255,255,255,.72);box-shadow:0 0 7px var(--glow);pointer-events:none}
.game-piece:has(.axis-h)::after,.game-piece:has(.axis-v)::after{content:"";position:absolute;z-index:1;pointer-events:none;opacity:.7;border-radius:2px;background:rgba(255,255,255,.55)}
.game-piece:has(.axis-h)::after{left:5px;right:5px;top:50%;height:2px;transform:translateY(-50%)}
.game-piece:has(.axis-v)::after{top:5px;bottom:5px;left:50%;width:2px;transform:translateX(-50%)}
/* V18 - variantes etoilees et portes interieures */
.star-badge{position:absolute;left:3px;top:3px;z-index:8;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#34225f;color:#fff06a;border:1px solid #fff6a6;font-size:12px;box-shadow:0 0 8px #ffe95a}
.star-lumi{box-shadow:inset 0 0 0 1px rgba(255,238,90,.7),0 0 10px rgba(255,225,70,.55)}
.lumi-star{position:absolute;right:2px;top:1px;z-index:8;color:#fff04e;font-size:15px;text-shadow:0 0 5px #ffca00,0 1px 2px #000}
.inner-gate{background:repeating-linear-gradient(90deg,#26335f 0 6px,#6c7cc5 6px 9px,#172044 9px 15px);border:2px solid #8eeeff;box-shadow:inset 0 0 8px #121936,0 0 10px rgba(82,225,255,.65);color:#d7fbff}
.game-piece.poly.p-l{overflow:visible}


/* ===== LUMIS V19 : CONSOLIDATION MOTEUR / LISIBILITE ===== */
/* Drag sans saccade : aucune interpolation de left/top pendant le geste. */
.piece.game-piece{transition:left .12s cubic-bezier(.2,.8,.2,1),top .12s cubic-bezier(.2,.8,.2,1)}
.piece.game-piece.dragging{transition:none!important}
/* Aucun contour blanc sur les blocs : la famille garde sa propre teinte. */
.aqua-piece{border-color:#0876b8!important}.fire-piece{border-color:#b72b39!important}.volt-piece{border-color:#b77808!important}.leaf-piece{border-color:#117a50!important}.myst-piece{border-color:#6327a9!important}
.game-piece.poly .poly-outline{stroke-width:4!important}
/* Les rails ne donnent aucune illusion de mouvement sur l'axe interdit. */
.game-piece:has(.axis-h)::after,.game-piece:has(.axis-v)::after{background:rgba(12,18,48,.55);box-shadow:0 0 5px var(--glow)}
/* Etoiles : aucun encadrement, uniquement le glyphe colore et place sur une cellule pleine. */
.star-lumi{box-shadow:none!important;outline:0!important;border:0!important}
.lumi-star{right:2px;top:1px;background:none!important;border:0!important;width:auto!important;height:auto!important;border-radius:0!important;font-size:15px;text-shadow:0 0 5px currentColor,0 1px 2px #000}
.star-badge{transform:translate(-50%,-50%);background:none!important;border:0!important;border-radius:0!important;width:auto!important;height:auto!important;padding:0!important;font-size:16px;text-shadow:0 0 6px currentColor,0 1px 2px #000;box-shadow:none!important}
/* Grosses cibles tactiles pour les popups. */
.modal-card .action-btn,.tutorial-card .action-btn{min-height:54px;font-size:14px;border-radius:17px;padding:0 18px;touch-action:manipulation}
#nextBtn,#startLevelBtn{width:100%;min-height:58px}

/* V20 - interactions tactiles : pas de zoom sur double-tap. */
html, body, .app-shell, button, .board, .game-piece { touch-action: manipulation; }
.board, .game-piece { touch-action: none; }


/* ===== LUMIS V22 : CADRE SEPARE DE LA GRILLE =====
   La grille ne touche jamais son cadre : 2 px reels de respiration tout autour. */
.board{
  border:0!important;
  box-shadow:inset 0 0 32px rgba(40,130,255,.16)!important;
}
.board::before{
  content:"";
  position:absolute;
  inset:-5px;
  border:3px solid #5ef5ff;
  border-radius:13px;
  box-sizing:border-box;
  pointer-events:none;
  z-index:20;
  box-shadow:0 0 0 2px #163d86,0 0 22px rgba(67,232,255,.42);
}

/* ===== LUMIS V24 : FINITION DU DRAG ET ANIMATIONS DES LUMIS ===== */
/* Aucun effet de blocage ne doit révéler la boîte rectangulaire technique d'un polyomino. */
.game-piece.poly.blocked,
.game-piece.poly.unblock-flash{
  outline:none!important;
  box-shadow:none!important;
  filter:none!important;
}
.game-piece.poly.blocked{animation:none!important}
.block-chain .cause.cause-pulse{animation:causePulse .72s ease-in-out 2}
@keyframes causePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18);filter:brightness(1.45)}}

/* Suivi direct du doigt ; l'aimantation visible n'existe qu'au relâchement. */
.piece.game-piece.dragging{transition:none!important;will-change:transform}
.piece.game-piece.snapping{transition:left .12s cubic-bezier(.2,.85,.2,1),top .12s cubic-bezier(.2,.85,.2,1),transform .12s cubic-bezier(.2,.85,.2,1)!important}

/* Chaque famille de Lumi possède un mouvement propre et chaque instance démarre à une phase différente. */
.companion.game-lumi{animation:none!important}
.companion.game-lumi .lumi-sprite{transform-origin:50% 65%;animation-delay:var(--lumi-phase,0s)!important;will-change:transform}
.lumi-aqua .lumi-sprite{animation:lumiAqua 2.9s ease-in-out infinite}
.lumi-fire .lumi-sprite{animation:lumiFire 1.65s ease-in-out infinite}
.lumi-volt .lumi-sprite{animation:lumiVolt 1.15s steps(1,end) infinite}
.lumi-leaf .lumi-sprite{animation:lumiLeaf 3.35s ease-in-out infinite}
.lumi-myst .lumi-sprite{animation:lumiMyst 4.1s ease-in-out infinite}
@keyframes lumiAqua{0%,100%{transform:translateY(1px) scale(1)}35%{transform:translateY(-4px) scaleX(1.025) scaleY(.985)}65%{transform:translateY(-1px) scaleX(.99) scaleY(1.02)}}
@keyframes lumiFire{0%,100%{transform:translateY(1px) scale(1) rotate(-1deg)}50%{transform:translateY(-3px) scale(1.035,.97) rotate(1.5deg)}}
@keyframes lumiVolt{0%,20%,100%{transform:translate(0,0) rotate(0)}22%{transform:translate(1px,-2px) rotate(1deg)}25%{transform:translate(-1px,-1px) rotate(-1deg)}28%{transform:translate(0,-2px) rotate(0)}}
@keyframes lumiLeaf{0%,100%{transform:translateY(1px) rotate(-1.5deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes lumiMyst{0%,100%{transform:translate(0,1px) rotate(-1deg)}25%{transform:translate(2px,-2px) rotate(1deg)}50%{transform:translate(0,-4px) rotate(2deg)}75%{transform:translate(-2px,-1px) rotate(0)}}
.companion.game-lumi.vanish{animation:vanish .42s forwards!important}
.companion.game-lumi.arrival{animation:arrive .55s ease-out!important}

/* ===== LUMIS V25 : CORRECTIONS CIBLEES =====
   1) Les etats glace/electricite lies a une piece ciblee sont representes par la chaine
      sur la silhouette elle-meme : aucun rectangle technique ne doit etre dessine autour.
   2) Les animations des Lumis conservent en permanence le centrage -50%/-50% du sprite,
      afin qu'ils restent entierement confines dans leur case. */
.game-piece.poly,
.game-piece.poly.blocked,
.game-piece.poly.unblock-flash,
.game-piece.poly:focus,
.game-piece.poly:active{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.game-piece.poly svg{
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.38)) drop-shadow(0 0 7px var(--glow));
}
.game-piece.poly.blocked svg,
.game-piece.poly.unblock-flash svg{
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.38)) drop-shadow(0 0 7px var(--glow));
}

.companion.game-lumi{
  overflow:hidden!important;
}
.companion.game-lumi .lumi-sprite{
  left:50%!important;
  top:50%!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  transform-origin:50% 50%!important;
}
@keyframes lumiAqua{
  0%,100%{transform:translate(-50%,-50%) translateY(.5px) scale(.985)}
  35%{transform:translate(-50%,-50%) translateY(-1px) scaleX(.99) scaleY(.975)}
  65%{transform:translate(-50%,-50%) translateY(0) scaleX(.98) scaleY(.99)}
}
@keyframes lumiFire{
  0%,100%{transform:translate(-50%,-50%) translateY(.5px) scale(.98) rotate(-.6deg)}
  50%{transform:translate(-50%,-50%) translateY(-1px) scale(.99,.965) rotate(.8deg)}
}
@keyframes lumiVolt{
  0%,20%,100%{transform:translate(-50%,-50%) scale(.98) rotate(0)}
  22%{transform:translate(-50%,-50%) translate(.7px,-.7px) scale(.975) rotate(.7deg)}
  25%{transform:translate(-50%,-50%) translate(-.7px,-.3px) scale(.975) rotate(-.7deg)}
  28%{transform:translate(-50%,-50%) translateY(-.7px) scale(.98) rotate(0)}
}
@keyframes lumiLeaf{
  0%,100%{transform:translate(-50%,-50%) translateY(.5px) scale(.98) rotate(-.7deg)}
  50%{transform:translate(-50%,-50%) translateY(-1px) scale(.975) rotate(.9deg)}
}
@keyframes lumiMyst{
  0%,100%{transform:translate(-50%,-50%) translate(0,.5px) scale(.975) rotate(-.5deg)}
  25%{transform:translate(-50%,-50%) translate(.7px,-.6px) scale(.97) rotate(.5deg)}
  50%{transform:translate(-50%,-50%) translate(0,-1px) scale(.97) rotate(.8deg)}
  75%{transform:translate(-50%,-50%) translate(-.7px,-.3px) scale(.975) rotate(0)}
}


/* ===== LUMIS V26 : CORRECTIONS DE FINITION =====
   - Les mecanismes cibles (glace/electricite sur une piece) ne creent jamais de collision
     dans les cellules transparentes de la boite englobante : la collision suit la silhouette.
   - Portes haut/bas decalees de 2 px vers l'exterieur.
   - Disparition des blocs par contraction vers le Lumi capture, sans rebond/rotation.
   - Motif des obstacles fixes etendu jusqu'a 1 px maximum du bord. */
.door-top{top:32px!important}
.door-bottom{bottom:32px!important}

.piece.game-piece.piece-vanish{
  animation:pieceCaptureV26 .36s cubic-bezier(.3,.02,.15,1) forwards!important;
}
@keyframes pieceCaptureV26{
  from{opacity:1;transform:scale(1)}
  to{opacity:0;transform:scale(.035)}
}

.mechanic.fixed{
  border:1px solid #61709a!important;
  background:
    linear-gradient(90deg,rgba(116,139,202,.28) 1px,transparent 1px) 0 0/9px 9px,
    linear-gradient(rgba(116,139,202,.28) 1px,transparent 1px) 0 0/9px 9px,
    linear-gradient(145deg,#263256,#11182e)!important;
  background-clip:border-box!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 7px rgba(44,73,137,.25)!important;
}
.mechanic.fixed>span{
  margin:0!important;
  padding:0!important;
}


/* ===== LUMIS V28 : NIVEAU DE REFERENCE ===== */
.blue-piece{--glow:#3f72ff;background:rgba(50,105,235,.50)!important;border-color:#174fa5!important}
.cyan-piece{--glow:#28e8f4;background:rgba(48,210,225,.50)!important;border-color:#0a8ca9!important}
.green-piece{--glow:#4ce76d;background:rgba(65,190,85,.50)!important;border-color:#16733a!important}
.yellow-piece{--glow:#ffe441;background:rgba(236,214,45,.50)!important;border-color:#a77b00!important}
.red-piece{--glow:#ff4052;background:rgba(216,48,55,.50)!important;border-color:#9d1c27!important}
.violet-piece{--glow:#ae55ff;background:rgba(117,54,186,.50)!important;border-color:#572191!important}
.orange-piece{--glow:#ff992f;background:rgba(222,119,30,.50)!important;border-color:#a64b00!important}
.pink-piece{--glow:#ff71ad;background:rgba(226,98,158,.50)!important;border-color:#a83267!important}
.white-piece{--glow:#dfe7f4;background:rgba(225,230,238,.50)!important;border-color:#8d96aa!important}
.game-piece.poly.blue-piece .poly-fill{fill:rgba(50,105,235,.50)}.game-piece.poly.blue-piece .poly-outline{stroke:#174fa5}
.game-piece.poly.cyan-piece .poly-fill{fill:rgba(48,210,225,.50)}.game-piece.poly.cyan-piece .poly-outline{stroke:#0a8ca9}
.game-piece.poly.green-piece .poly-fill{fill:rgba(65,190,85,.50)}.game-piece.poly.green-piece .poly-outline{stroke:#16733a}
.game-piece.poly.yellow-piece .poly-fill{fill:rgba(236,214,45,.50)}.game-piece.poly.yellow-piece .poly-outline{stroke:#a77b00}
.game-piece.poly.red-piece .poly-fill{fill:rgba(216,48,55,.50)}.game-piece.poly.red-piece .poly-outline{stroke:#9d1c27}
.game-piece.poly.violet-piece .poly-fill{fill:rgba(117,54,186,.50)}.game-piece.poly.violet-piece .poly-outline{stroke:#572191}
.game-piece.poly.orange-piece .poly-fill{fill:rgba(222,119,30,.50)}.game-piece.poly.orange-piece .poly-outline{stroke:#a64b00}
.game-piece.poly.pink-piece .poly-fill{fill:rgba(226,98,158,.50)}.game-piece.poly.pink-piece .poly-outline{stroke:#a83267}
.game-piece.poly.white-piece .poly-fill{fill:rgba(225,230,238,.50)}.game-piece.poly.white-piece .poly-outline{stroke:#8d96aa}
.companion.game-lumi.lumi-blue{--glow:#3f72ff}.companion.game-lumi.lumi-cyan{--glow:#28e8f4}.companion.game-lumi.lumi-green{--glow:#4ce76d}
.companion.game-lumi.lumi-yellow{--glow:#ffe441}.companion.game-lumi.lumi-red{--glow:#ff4052}.companion.game-lumi.lumi-violet{--glow:#ae55ff}
.companion.game-lumi.lumi-orange{--glow:#ff992f}.companion.game-lumi.lumi-pink{--glow:#ff71ad}.companion.game-lumi.lumi-white{--glow:#dfe7f4}
.door-frame{position:relative}
.door-waiting-lumi{position:absolute;left:50%;top:50%;width:78%;height:78%;object-fit:contain;transform:translate(-50%,-50%);z-index:8;pointer-events:none;opacity:.94}
.door-queue-count{position:absolute;right:-9px;top:-9px;z-index:12;min-width:22px;height:20px;padding:0 4px;border-radius:10px;background:#f4f7ff;color:#17204b;border:2px solid #62efff;display:grid;place-items:center;font-size:10px;font-weight:1000;box-shadow:0 2px 5px rgba(0,0,0,.45)}
.door-bottom .door-queue-count{top:auto;bottom:-9px}

/* ===== LUMIS V29 : FINITIONS PIECES / PORTES =====
   - suppression des halos lumineux autour de toutes les pieces
   - transparence renforcee sur les polyominos complexes
   - portes clairement visibles, largeur strictement egale a une case */
.piece,
.piece.game-piece,
.piece.game-piece.dragging,
.piece.game-piece.snapping{
  box-shadow:inset 0 3px 0 rgba(255,255,255,.20),inset 0 -8px 18px rgba(0,0,40,.22),0 4px 7px rgba(0,0,0,.30)!important;
  filter:none!important;
}
.game-piece.poly,
.game-piece.poly svg,
.game-piece.poly.blocked svg,
.game-piece.poly.unblock-flash svg{
  filter:none!important;
  box-shadow:none!important;
}
.game-piece.poly .poly-fill{
  opacity:.62!important;
}
.game-piece.poly .poly-shine{
  opacity:.08!important;
}

/* Les portes font exactement une colonne de large et restent entierement visibles hors grille. */
.door{
  width:var(--cell)!important;
  height:30px!important;
  box-sizing:border-box!important;
}
.door-top{
  top:34px!important;
  transform:translateY(calc(-100% - 2px))!important;
}
.door-bottom{
  bottom:34px!important;
  transform:translateY(calc(100% + 2px))!important;
}
.door-frame{
  width:100%!important;
  height:100%!important;
}

/* ===== LUMIS V31 : BADGES SUR CELLULE PLEINE + DRAG POLY SANS CONTOUR FANTOME ===== */
/* Le conteneur technique d'une forme complexe reste totalement invisible dans tous ses etats. */
.game-piece.poly,
.game-piece.poly.dragging,
.game-piece.poly.snapping,
.game-piece.poly.blocked,
.game-piece.poly.unblock-flash,
.game-piece.poly:focus,
.game-piece.poly:active{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  filter:none!important;
  -webkit-filter:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
.game-piece.poly::before,
.game-piece.poly.dragging::before,
.game-piece.poly.dragging::after{
  display:none!important;
  content:none!important;
}
.game-piece.poly svg{
  pointer-events:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* Le compteur d'un polyomino est place DANS une cellule pleine choisie en JS. */
.game-piece.poly .count-badge.poly-count{
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  min-width:22px;
  height:20px;
  padding:0 4px;
  box-sizing:border-box;
  box-shadow:0 2px 5px rgba(0,0,0,.38)!important;
}

/* ===== LUMIS V32 : SYMBOLE + ETOILE STRICTEMENT DANS UNE CELLULE PLEINE ===== */
/* Les positions sont calculees en JS a partir des cellules occupees de la silhouette. */
.game-piece.poly .piece-symbol{
  transform:translate(-50%,-50%)!important;
  max-width:calc((100% / var(--w)) - 4px);
  max-height:calc((100% / var(--h)) - 4px);
  pointer-events:none;
}
.game-piece.poly .star-badge{
  transform:translate(-50%,-50%)!important;
  font-size:min(16px,calc((100vw - 28px) / 8 * .42))!important;
  line-height:1!important;
  pointer-events:none;
}
\n\n/* ===== LUMIS V33 : COMPTEURS DE PORTES A L'EXTERIEUR ===== */
.door-frame{overflow:visible!important}
.door-queue-count{
  left:calc(100% + 5px)!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  min-width:24px!important;
  height:22px!important;
  padding:0 5px!important;
  border-radius:11px!important;
  font-size:11px!important;
  z-index:20!important;
  white-space:nowrap!important;
}
.door-bottom .door-queue-count{
  top:50%!important;
  bottom:auto!important;
}