/* ===== JULIE · Le Monde des Jeux — base ===== */
:root{
  --bg:#05060d;
  --ink:#eef2ff;
  --dim:#9aa3c7;
  --acc:#5ce1e6;
  --acc2:#ff5fa2;
  --ok:#7ed957;
  --bad:#ff4d5e;
  --panel:rgba(12,16,32,.94);
  --line:rgba(120,140,220,.28);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:ui-monospace,'Cascadia Mono','Consolas',monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:#000;color:var(--ink);font-family:var(--font);overflow:hidden;overscroll-behavior:none}
body{display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none}

#stage{position:relative;width:960px;height:540px;transform-origin:center center;background:var(--bg);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 90px rgba(0,0,0,.8);overflow:hidden}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto}

#layer{position:absolute;inset:0;pointer-events:none}
#layer > *{pointer-events:auto}
.hide{display:none !important}

/* ---------- HUD ---------- */
#hud{position:absolute;top:0;left:0;right:0;height:46px;display:flex;justify-content:space-between;align-items:center;
  padding:6px 10px;z-index:40;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,6,14,.85),rgba(4,6,14,0))}
.hud-left,.hud-right{display:flex;gap:6px;align-items:center;pointer-events:auto}
.hud-chip{background:rgba(10,14,30,.78);border:1px solid var(--line);border-radius:999px;padding:4px 10px;
  font-size:13px;font-weight:700;letter-spacing:.3px;display:flex;gap:5px;align-items:center;white-space:nowrap}
.hud-chip span{color:var(--acc)}
.hud-chip.pop{animation:chipPop .45s ease}
@keyframes chipPop{0%{transform:scale(1)}35%{transform:scale(1.25);filter:brightness(1.6)}100%{transform:scale(1)}}
.hud-bar{position:relative;width:120px;height:16px;border-radius:999px;background:rgba(10,14,30,.8);
  border:1px solid var(--line);overflow:hidden}
.hud-bar i{position:absolute;inset:0;width:0%;background:linear-gradient(90deg,#5ce1e6,#8b6cff);transition:width .35s ease}
.hud-bar b{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;text-shadow:0 1px 2px #000}
.hud-btn{background:rgba(10,14,30,.8);border:1px solid var(--line);color:var(--ink);border-radius:10px;
  width:32px;height:30px;font-size:16px;cursor:pointer;line-height:1}
.hud-btn:hover{background:rgba(92,225,230,.2);border-color:var(--acc)}

/* ---------- Dialogues ---------- */
#dlg{position:absolute;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  padding:0 0 16px;pointer-events:auto;cursor:pointer;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 45%)}
.dlg-box{width:min(860px,94%);min-height:120px;display:flex;gap:12px;padding:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.6);
  animation:dlgIn .22s ease}
@keyframes dlgIn{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.dlg-face{width:96px;height:96px;flex:0 0 96px;border-radius:14px;background:#0a0f22;border:1px solid var(--line);
  overflow:hidden;display:grid;place-items:center}
.dlg-face svg{width:100%;height:100%}
.dlg-body{flex:1;position:relative;min-width:0}
.dlg-name{font-size:12px;letter-spacing:2px;color:var(--acc);font-weight:800;margin-bottom:4px}
.dlg-text{font-size:17px;line-height:1.5;white-space:pre-wrap;min-height:66px}
.dlg-next{position:absolute;right:2px;bottom:0;color:var(--acc);animation:blink 1s infinite;font-size:14px}
@keyframes blink{50%{opacity:.15}}
.dlg-box.glitchy{border-color:#4ce04c;box-shadow:0 0 30px rgba(76,224,76,.3)}
.dlg-box.glitchy .dlg-name{color:#4ce04c}
.dlg-box.glitchy .dlg-text{font-family:var(--mono);text-shadow:1px 0 #f0f,-1px 0 #0ff}

/* ---------- Panneaux ---------- */
#panelWrap{position:absolute;inset:0;z-index:70;display:grid;place-items:center;background:rgba(3,5,12,.72);
  backdrop-filter:blur(3px);animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.panel{width:min(760px,94%);max-height:88%;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.7);animation:dlgIn .2s ease}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);
  font-weight:800;letter-spacing:2px;font-size:14px;color:var(--acc)}
.panel-x{background:none;border:none;color:var(--dim);font-size:18px;cursor:pointer}
.panel-x:hover{color:var(--bad)}
.panel-body{padding:14px 16px;overflow:auto;font-size:14px;line-height:1.5}
.panel-body::-webkit-scrollbar{width:8px}
.panel-body::-webkit-scrollbar-thumb{background:rgba(120,140,220,.3);border-radius:8px}

.btn{display:inline-block;padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:var(--ink);font-weight:700;font-size:13px;cursor:pointer;transition:.15s;font-family:var(--font)}
.btn:hover{background:rgba(92,225,230,.18);border-color:var(--acc);transform:translateY(-1px)}
.btn.pri{background:linear-gradient(135deg,#5ce1e6,#8b6cff);border-color:transparent;color:#04101c}
.btn.dgr{background:rgba(255,77,94,.15);border-color:rgba(255,77,94,.5);color:#ffbfc6}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:10px}
.dim{color:var(--dim)}
.mono{font-family:var(--mono)}
.big{font-size:26px;font-weight:800}
h3.sec{margin:14px 0 8px;font-size:12px;letter-spacing:2px;color:var(--acc);text-transform:uppercase}

/* ---------- Toasts ---------- */
#toasts{position:absolute;left:50%;top:56px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;
  gap:6px;align-items:center;pointer-events:none;width:100%}
.toast{background:rgba(10,14,30,.95);border:1px solid var(--acc);border-radius:12px;padding:8px 16px;font-size:14px;
  font-weight:700;box-shadow:0 8px 26px rgba(0,0,0,.6);animation:toastIn .35s cubic-bezier(.2,1.5,.4,1),toastOut .4s 2.2s forwards}
.toast.gold{border-color:#ffd25e;color:#ffe9a8}
.toast.bad{border-color:var(--bad);color:#ffbfc6}
@keyframes toastIn{from{transform:translateY(-24px) scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateY(-14px) scale(.95);opacity:0}}

/* ---------- Transitions ---------- */
#trans{position:absolute;inset:0;z-index:90;pointer-events:none}
#trans.on{pointer-events:auto}
.tr-fade{position:absolute;inset:0;background:#05060d;opacity:0;animation:trFade .5s forwards}
@keyframes trFade{0%{opacity:0}45%{opacity:1}55%{opacity:1}100%{opacity:0}}
.tr-app{position:absolute;inset:0;background:radial-gradient(circle at var(--ox,50%) var(--oy,50%),var(--c,#5ce1e6),#05060d 60%);
  opacity:0;animation:trApp .55s forwards}
@keyframes trApp{0%{opacity:0;transform:scale(.2)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
.tr-glitch{position:absolute;inset:0;background:#000;animation:trGl .6s steps(8) forwards;
  background-image:repeating-linear-gradient(0deg,#0f0 0 2px,#000 2px 5px);opacity:.9;mix-blend-mode:screen}
@keyframes trGl{0%{opacity:0;transform:translateX(0)}20%{opacity:.9;transform:translateX(-14px)}
  40%{transform:translateX(12px)}60%{transform:translateX(-6px)}100%{opacity:0}}
.tr-white{position:absolute;inset:0;background:#fff;animation:trW .8s forwards}
@keyframes trW{0%{opacity:0}30%{opacity:1}70%{opacity:1}100%{opacity:0}}

/* ---------- Manette tactile ---------- */
#touch{position:absolute;inset:auto 0 0 0;height:150px;z-index:35;pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-end;padding:10px 14px}
#touch button{pointer-events:auto;background:rgba(20,26,50,.6);border:1px solid rgba(150,170,255,.4);color:#dfe6ff;
  border-radius:14px;font-size:18px;font-weight:800;width:54px;height:54px;touch-action:none}
#touch button:active{background:rgba(92,225,230,.45)}
.tpad{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:54px 54px;gap:5px}
.tpad button:nth-child(1){grid-area:2/1}
.tpad button:nth-child(2){grid-area:1/2}
.tpad button:nth-child(3){grid-area:2/2}
.tpad button:nth-child(4){grid-area:2/3}
.tbtns{display:flex;gap:10px;align-items:flex-end}
.tbtns .tb1{width:86px;height:66px;background:rgba(92,225,230,.25)}
.tbtns .tb2{width:74px;height:54px}

#rotate{display:none;position:fixed;inset:0;background:#05060d;color:#eef2ff;place-items:center;text-align:center;
  font-size:20px;padding:30px;z-index:999}
@media (orientation:portrait) and (max-width:820px){
  #rotate{display:grid}
}

/* ---------- Divers ---------- */
.kbd{display:inline-block;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;
  font-family:var(--mono);font-size:12px;background:rgba(255,255,255,.06)}
.shake{animation:shk .35s}
@keyframes shk{25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,-3px)}}
.glitch-text{position:relative;font-family:var(--mono);text-shadow:1.5px 0 #f0f,-1.5px 0 #0ff;animation:gt .18s infinite}
@keyframes gt{50%{text-shadow:-1.5px 0 #f0f,1.5px 0 #0ff}}