:root{
  --bg:#000610;--panel:#010e1c;--panel2:#011828;--border:#0e2a40;
  --cyan:#00c8f0;--red:#ff2033;--green:#00ff9d;--amber:#f0a500;--violet:#8b5cf6;
  --text:#7ab8d4;--dim:#2a5a7a;--bright:#b8dcf0;--white:#e0f2ff;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif,sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none}
body::after{content:'';position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,16,30,.08) 2px,rgba(0,16,30,.08) 4px);z-index:1}

.wrap{position:relative;z-index:2;height:100vh;display:grid;grid-template-columns:1fr 320px;gap:1rem;padding:1rem}
@media(max-width:900px){.wrap{grid-template-columns:1fr;grid-template-rows:1fr auto;overflow-y:auto}}

.left{display:flex;flex-direction:column;gap:.8rem;align-items:center;justify-content:flex-start;min-width:0;overflow:auto}
.right{display:flex;flex-direction:column;gap:.6rem;overflow-y:auto;padding:.4rem 0}

/* ─── Header ─── */
.head{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:740px;padding:.4rem .2rem;gap:.6rem;flex-wrap:wrap}
.title{font-family:"Impact", "Arial Black", system-ui, sans-serif,sans-serif;font-size:1.25rem;letter-spacing:.12em;color:var(--white);filter:drop-shadow(0 0 8px var(--cyan))}
.title em{color:var(--cyan);font-style:normal}
.indicators{display:flex;gap:.5rem}
.ind{background:color-mix(in srgb,var(--cyan) 6%,transparent);border:1px solid var(--border);border-left:3px solid var(--cyan);padding:.3rem .6rem;min-width:78px;text-align:center}
.ind.red{border-left-color:var(--red)}
.ind.green{border-left-color:var(--green)}
.ind label{display:block;font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace,monospace;font-size:.5rem;letter-spacing:.15em;color:var(--dim)}
.ind .v{font-family:"Impact", "Arial Black", system-ui, sans-serif,sans-serif;font-size:1rem;color:var(--white);line-height:1.2}
.ind.red .v{color:var(--red)}
.ind.green .v{color:var(--green)}

/* ─── Plateau ─── */
.boardWrap{background:var(--panel);border:1px solid var(--border);padding:6px;display:inline-block}
#board{display:grid;gap:1px;background:var(--border)}
.cell{
  width:28px;height:28px;background:var(--panel2);
  display:flex;align-items:center;justify-content:center;
  font-family:"Impact", "Arial Black", system-ui, sans-serif,sans-serif;font-weight:700;font-size:.85rem;color:var(--text);
  cursor:pointer;position:relative;transition:background .1s,box-shadow .1s;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.cell:hover:not(.revealed){background:color-mix(in srgb,var(--cyan) 12%,var(--panel2))}
.cell.revealed{background:var(--panel);cursor:default;border-top:1px solid color-mix(in srgb,var(--cyan) 14%,transparent);border-left:1px solid color-mix(in srgb,var(--cyan) 14%,transparent)}
.cell.revealed.empty{background:#020a14}
.cell.flag::after{content:'⚑';color:var(--red);font-size:1rem;text-shadow:0 0 4px var(--red)}
.cell.mine{background:rgba(255,32,51,.4);color:#fff}
.cell.mine::after{content:'✸';color:#fff;font-size:1rem;text-shadow:0 0 8px #fff}
.cell.wrong{background:rgba(255,32,51,.15)}
.cell.wrong::after{content:'✕';color:var(--red);font-size:1rem}

.n1{color:#3b82f6}.n2{color:var(--green)}.n3{color:var(--red)}
.n4{color:var(--violet)}.n5{color:#fb923c}.n6{color:var(--cyan)}
.n7{color:var(--white)}.n8{color:var(--amber)}

/* Heatmap : applique au-dessus des cases non révélées */
.cell.h-safe{box-shadow:inset 0 0 0 2px var(--green),0 0 8px rgba(0,255,157,.3)}
.cell.h-mine{box-shadow:inset 0 0 0 2px var(--red),0 0 8px rgba(255,32,51,.3)}
.cell.prob{position:relative}
.cell.prob .pl{position:absolute;left:1px;bottom:0;font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace,monospace;font-size:.45rem;color:#fff;padding:0 2px;background:rgba(0,0,0,.45);pointer-events:none}

/* Boutons */
.btn{font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace,monospace;font-size:.62rem;letter-spacing:.14em;
  padding:.45rem 1rem;border:1px solid var(--cyan);color:var(--cyan);background:transparent;cursor:pointer;
  transition:all .15s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.btn:hover{background:color-mix(in srgb,var(--cyan) 12%,transparent);color:var(--white)}
.btn.violet{border-color:var(--violet);color:var(--violet)}
.btn.violet:hover{background:color-mix(in srgb,var(--violet) 14%,transparent);color:var(--white)}
.btn.amber{border-color:var(--amber);color:var(--amber)}
.btn.amber:hover{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--white)}
.btn.red{border-color:var(--red);color:var(--red)}
.btn.red:hover{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--white)}
.btn.active{background:color-mix(in srgb,var(--violet) 14%,transparent)}
.btn:disabled{opacity:.4;cursor:not-allowed}

select.lvl{background:color-mix(in srgb,var(--cyan) 4%,transparent);border:1px solid var(--border);border-bottom:2px solid var(--cyan);
  padding:.35rem .6rem;color:var(--text);font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace,monospace;font-size:.6rem;outline:none;cursor:pointer}

.controls{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}

/* ─── Panneau IA ─── */
.panel{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--violet);padding:.7rem .9rem}
.panel h3{font-family:"Impact", "Arial Black", system-ui, sans-serif,sans-serif;font-size:.78rem;color:var(--violet);letter-spacing:.1em;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem}
.panel h3::before{content:'◆';color:var(--violet)}
.panel.cyan{border-left-color:var(--cyan)}
.panel.cyan h3{color:var(--cyan)}
.panel.cyan h3::before{color:var(--cyan)}
.row{display:flex;justify-content:space-between;align-items:center;font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace,monospace;font-size:.6rem;letter-spacing:.06em;padding:.18rem 0;color:var(--text)}
.row b{color:var(--white);font-weight:400}
.row b.c{color:var(--cyan)}
.row b.g{color:var(--green)}
.row b.a{color:var(--amber)}
.row b.v{color:var(--violet)}
.row b.r{color:var(--red)}
.legend{display:grid;grid-template-columns:auto 1fr;gap:.3rem .5rem;align-items:center;font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace,monospace;font-size:.55rem;color:var(--text);margin-top:.3rem}
.legSwatch{width:14px;height:14px;border:1px solid var(--border)}
.legSwatch.safe{background:rgba(0,255,157,.18);box-shadow:inset 0 0 0 2px var(--green)}
.legSwatch.mine{background:rgba(255,32,51,.18);box-shadow:inset 0 0 0 2px var(--red)}
.legSwatch.unk{background:var(--panel2)}

.log{font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace,monospace;font-size:.52rem;color:var(--dim);background:var(--panel2);border:1px solid var(--border);padding:.4rem .55rem;max-height:130px;overflow-y:auto;line-height:1.7}
.log .l{display:block}
.log .l.move{color:var(--cyan)}
.log .l.safe{color:var(--green)}
.log .l.mine{color:var(--red)}
.log .l.warn{color:var(--amber)}

.foot{font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace,monospace;font-size:.5rem;color:var(--dim);text-align:center;letter-spacing:.15em;padding:.2rem}
.foot .kbd{display:inline-block;padding:1px 5px;background:var(--panel2);border:1px solid var(--border);font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace,monospace;font-size:.55rem;color:var(--text);margin:0 1px}

/* Retour menu — bouton flottant top-left */
.back-to-menu{position:fixed;top:.7rem;left:.7rem;z-index:9999;background:rgba(4,7,15,.85);color:#5dd4f7;border:1px solid rgba(93,212,247,.35);padding:.5rem .85rem;border-radius:8px;font-size:.78rem;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none;letter-spacing:.02em;backdrop-filter:blur(6px);transition:background .15s,border-color .15s,transform .12s}
.back-to-menu:hover,.back-to-menu:focus-visible{background:rgba(93,212,247,.2);border-color:#5dd4f7;outline:none}
.back-to-menu:active{transform:translateY(1px)}
@media (max-width:600px){
  .back-to-menu{font-size:.7rem;padding:.4rem .65rem;top:.4rem;left:.4rem}
}