:root{--ui:#e8e8f0;--accent:#00eaff;--green:#00ffc8;--amber:#ffcc00;--cyan:#00eaff}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:radial-gradient(1200px 700px at 70% 20%,#0f1320 0,#070a11 50%,#05070b 100%);color:#ddd;font-family:system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
.root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:12px}
.frame{position:relative;width:400px;height:600px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#090d14,#05070c);box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.06)}
canvas{display:block;width:100%;height:100%;image-rendering:auto;background:linear-gradient(180deg,#03040a,#060910)}
.hud{position:absolute;left:0;right:0;top:0;padding:6px 8px;font-size:12px;display:flex;justify-content:space-between;gap:8px;color:var(--ui);text-shadow:0 1px 0 #000;z-index:3}
.hud .left,.hud .right{display:flex;gap:10px;align-items:center}
.tag{padding:2px 6px;border-radius:6px;background:rgba(10,20,35,.7);border:1px solid #273144;box-shadow:0 0 8px rgba(0,238,255,.08) inset}
.bar{position:absolute;left:6px;right:6px;bottom:6px;height:10px;border-radius:8px;background:#0e1422;border:1px solid #273144;overflow:hidden;box-shadow:inset 0 0 6px rgba(0,0,0,.7);z-index:3}
.bar>.fill{height:100%;background:linear-gradient(90deg,#ff6a6a,#ff2a8a,#ff6a6a);width:0%}
.legend{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:10px;color:#bfc5d6;opacity:.9;z-index:3}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;pointer-events:none;z-index:4}
.panel{background:linear-gradient(180deg,rgba(7,10,17,.82),rgba(7,10,17,.6));backdrop-filter:blur(4px);border:1px solid rgba(0,238,255,.15);border-radius:14px;padding:18px 16px;max-width:88%;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 40px rgba(0,238,255,.06) inset;pointer-events:auto}
.panel code{background:rgba(255,255,255,.08);padding:1px 4px;border-radius:4px}
.overlay[hidden],.hud[hidden],.bar[hidden],.legend[hidden]{display:none!important}
.btn{display:inline-block;margin-top:10px;padding:10px 16px;border-radius:10px;border:1px solid #2b4a68;background:linear-gradient(180deg,#0b1724,#08121c);color:#9de0ff;font-weight:700;cursor:pointer;box-shadow:0 0 12px rgba(0,238,255,.1) inset,0 4px 12px rgba(0,0,0,.4)}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:translateY(1px)}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 60%,rgba(0,0,0,.35) 100%),repeating-linear-gradient(to bottom,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 2px,transparent 4px);mix-blend-mode:overlay}
@media(max-width:9999px){.frame{width:min(calc(100vw - 24px),calc((100vh - 24px)*2/3));height:calc(min(calc(100vw - 24px),calc((100vh - 24px)*2/3))*3/2)}}
.congrats-title{font-size:28px;color:#fff;text-shadow:0 0 18px rgba(0,238,255,.45);margin:0 0 10px}
.congrats-score{font-size:22px;color:#ffcc00;font-weight:900;letter-spacing:1px;animation:blink .8s linear infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.2}}
.keybar{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
  kbd{display:inline-block;padding:2px 8px;border-radius:6px;border:1px solid #2a3344;background:#0b1422;color:#cfe9ff;font-weight:700;letter-spacing:.3px}
  kbd.k-move{border-color:#2a7bd8;background:rgba(42,123,216,.12);color:#d6ecff}
  kbd.k-bomb{border-color:#ff4d6d;background:rgba(255,77,109,.12);color:#ffd6df}
  kbd.k-charge{border-color:#a970ff;background:rgba(169,112,255,.12);color:#e6d8ff}
.watermark{position:absolute;right:8px;bottom:18px;font-size:10px;color:#a9c7e6;opacity:.7;background:rgba(5,12,22,.55);border:1px solid rgba(0,238,255,.18);border-radius:8px;padding:4px 6px;backdrop-filter:blur(2px);z-index:3}
.watermark a{color:#9de0ff;text-decoration:none}
.watermark a:hover{filter:brightness(1.15)}
.fade{opacity:0;transform:translateY(6px);transition:opacity .9s ease,transform .9s ease}
.fade.on{opacity:1;transform:translateY(0)}
.sig{margin-top:10px;font-size:12px;color:#a9c7e6;opacity:.9}
.sig a{color:#9de0ff;text-decoration:none}
.sig a:hover{filter:brightness(1.15)}
/* Touch controls */
#game{touch-action:none}
#touchControls{position:absolute;inset:0;display:none;pointer-events:none;z-index:5}
#touchControls .hit{pointer-events:auto; touch-action:none;}
#joy{position:absolute;left:12px;bottom:20px;width:120px;height:120px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25)}
#btns{position:absolute;right:12px;bottom:24px;display:flex;gap:14px}
#btnBomb,#btnCharge{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center}
#btnBomb:active,#btnCharge:active{filter:brightness(1.2)}
/* Afficher l'overlay tactile sur la plupart des devices mobiles */
@media (hover:none), (pointer:coarse){#touchControls{display:flex}}
/* HUD responsive mobile */
@media (max-width: 480px) {
  .hud{
    font-size: 10px;
    padding: 4px 6px;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hud .left, .hud .right{
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  .tag{ padding: 2px 5px; }
}

/* ===== Pre-Menu (A1) ===== */
#preMenu .panel{ text-align:center; max-width:420px; }
#preMenu h1{ margin:0 0 6px; font-size:24px; color:#fff; text-shadow:0 0 18px rgba(0,238,255,.45); }
#preMenu .btn{ min-width:160px; }
#preMenu input[type="checkbox"]{ accent-color: var(--accent); transform: translateY(1px); }
#preMenu label{ display:flex; gap:8px; align-items:center; justify-content:center; margin-top:10px; font-size:12px; opacity:.9 }

@media (max-width: 420px){
  #preMenu .btn{ min-width:130px; padding:10px 12px; }
}


/* === v1.5.17 Responsive Tweaks === */
@media (max-width: 430px), (max-height: 740px) {
  .overlay .panel{
    max-height: 90vh;
    overflow-y: auto;
    padding: 10px 12px;
  }
  .overlay .panel h1{ font-size: 20px; margin-bottom: 6px; }
  .overlay .panel p{ font-size: 13px; }
  .btn{ padding: 8px 10px; font-size: 14px; }
  .theme-pills .btn{ padding: 6px 8px; font-size: 13px; }
  .keybar{ font-size: 12px; }
}
/* Focus outlines for gamepad navigation */
.btn.focused, label.focused, .theme-pill.focused{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}



/* === UX fixes === */
/* Small pause button for mobile (top-left) */
.pause-btn{
  position:absolute; left:6px; top:6px; z-index:50;
  display:none; /* hidden by default */
  padding:4px 6px; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45); color:#fff; border-radius:6px;
  font-size:14px; line-height:1; cursor:pointer;
}
@media (pointer:coarse){
  .pause-btn{ display:inline-block; }
}

/* Clearer focus highlight for gamepad nav */
.btn.focused, label.focused, .theme-pill.focused{
  outline:2px solid var(--accent); outline-offset:2px;
  box-shadow:0 0 0 2px rgba(0,0,0,.5);
}

/* Tighter mobile panel layout */
@media (max-width: 430px), (max-height: 740px){
  .overlay .panel{ max-height:88vh; padding:8px 10px; }
  .overlay .panel h1{ font-size:18px; margin-bottom:4px; }
  .overlay .panel p{ font-size:12px; }
  .theme-pills .btn{ padding:5px 6px; font-size:12px; }
  .btn{ padding:7px 9px; font-size:13px; }
  .keybar{ display:none; } /* hide keyboard help on mobile */
}

/* PC hints bottom-right (menu only) */
#pcHints{
  position:absolute; right:10px; bottom: 64px; z-index:40;
  display:none;
}
@media (pointer:fine){
  #pcHints{ display:flex; gap:8px; }
}
.hint-badge{
  padding:6px 8px; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45); color:#fff; border-radius:8px;
  font-size:12px; white-space:nowrap;
}


/* === Hints HUD (PC) === */

@media (pointer:coarse){
  
}
#hintsHUD .hint-badge{
  padding:6px 8px; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45); color:#fff; border-radius:8px;
  font-size:12px; white-space:nowrap;
}
/* Scheme-based visibility */
body[data-scheme="gamepad"] #hintsHUD .gp{ display:inline-flex !important; }
body[data-scheme="gamepad"] #hintsHUD .kb{ display:none !important; }
body[data-scheme="keyboard"] #hintsHUD .gp{ display:none !important; }
body[data-scheme="keyboard"] #hintsHUD .kb{ display:inline-flex !important; }

@media (pointer:coarse){  }

#hintsHUD{ position:absolute; right:10px !important; bottom:40px !important; top:auto !important; z-index:60; display:flex; gap:8px; ; z-index:60; right:10px; bottom:40px; }

@media (pointer:coarse){ #hintsHUD{ display:none; ; z-index:60; right:10px; bottom:40px; } }

/* === v1.5.17 Instructions Overlay === */
.overlay#instructionsOverlay{
  position:fixed; inset:0; display:block;
  background:rgba(5,7,11,0.88);
  z-index:9999;
  backdrop-filter:saturate(110%) blur(4px);
}
#instructionsOverlay[hidden]{ display:none; }
.no-scroll{ overflow:hidden; }
.instr-modal{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(860px, 92vw); max-height:min(88vh, 900px);
  overflow:auto; border-radius:16px; padding:20px 22px;
  background:linear-gradient(180deg, rgba(18,22,35,0.98), rgba(10,14,20,0.98));
  box-shadow:0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.instr-title{ margin:6px 6px 14px; font-size:22px; letter-spacing:0.2px; }
.instr-sections{ display:grid; gap:14px; }
.instr-block{ background:rgba(255,255,255,0.02); border-radius:12px; padding:12px 14px; }
.instr-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.instr-block h3{ margin:4px 0 10px; font-size:16px; }
.instr-block h4{ margin:2px 0 6px; font-size:14px; opacity:0.9; }
.instr-block ul{ margin:0; padding-left:18px; line-height:1.45; }
.instr-actions{
  display:flex; gap:10px; justify-content:flex-end; padding-top:10px;
}
.btn{ cursor:pointer; border-radius:10px; padding:10px 14px; border:none; font:inherit; }
.btn.primary{ background:var(--accent, #00eaff); color:#061018; font-weight:600; }
.btn.ghost{ background:transparent; color:#cbd5e1; outline:1px solid rgba(255,255,255,0.1); }
@media (max-width: 720px){
  .instr-grid{ grid-template-columns:1fr; }
  .instr-modal{ width:92vw; padding:16px; }
  .instr-title{ font-size:20px; }
}

/* === v1.5.17 hotfix: ensure Instructions overlay captures input === */
#instructionsOverlay{ pointer-events:auto !important; }
#instructionsOverlay .instr-modal{ pointer-events:auto !important; }


/* === v1.5.17 Mobile input tweak === */
#game, #joy{ touch-action:none; -ms-touch-action:none; }


/* === v1.5.17 overlay zindex === */
#instructionsOverlay{ pointer-events:auto !important; z-index: 2147483000 !important; }
#instructionsOverlay .instr-modal{ pointer-events:auto !important; }


/* === v1.5.17 overlay === */
#instructionsOverlay{ pointer-events:auto !important; z-index:2147483000 !important; }
#instructionsOverlay .instr-modal{ pointer-events:auto !important; }