/* TANAKURA launcher — aligné sur la Direction Artistique (os / orage / nuit / chaleur, sans néon). */
:root{
  --os:#f7efc9; --ivoire:#e8deb4; --taupe:#8a806b; --orage:#4b5065; --nuit:#292b38;
  --encre:#171719; --chaleur:#c98a55; --chaleur2:#e0a568; --rose:#b47c8f;
  --text:var(--ivoire); --muted:#9a9078; --danger:#d47a5c; --ok:#a7c98a;
  --glass:rgba(23,23,25,.74); --glass2:rgba(41,43,56,.66); --line:rgba(232,222,180,.24);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{font-family:"Segoe UI",Roboto,system-ui,sans-serif;color:var(--text)}

/* fond illustré (portail) + voile orage/nuit pour faire ressortir l'os */
.bg{position:fixed;inset:0;background:var(--encre) url("bg.jpg") center/cover no-repeat;z-index:0}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 28%, rgba(23,23,25,0) 34%, rgba(23,23,25,.62) 100%),
             linear-gradient(90deg, rgba(23,23,25,.80) 0%, rgba(23,23,25,.30) 44%, rgba(23,23,25,0) 62%)}

#app{position:relative;z-index:2;height:100%;display:flex;flex-direction:column}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 26px}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{height:48px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.65))}
.brand-word{height:50px;width:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.7))}
.userbox{display:flex;gap:14px;align-items:center;color:var(--muted);font-size:14px;
  background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:7px 16px;backdrop-filter:blur(8px)}

/* scène : panneau à gauche, illustration visible à droite */
.stage{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:10px 26px 26px}

/* panneaux : fond charbon/ardoise, bordure ivoire/taupe, peu d'ornement */
.glass{background:linear-gradient(var(--glass),rgba(41,43,56,.55));border:1px solid var(--line);border-radius:16px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 22px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(247,239,201,.06)}
.card{width:100%;max-width:400px;padding:24px}
.card.wide{max-width:480px}

.tabs{display:flex;gap:8px;margin-bottom:18px}
.tab{flex:1;padding:10px;background:rgba(247,239,201,.05);border:1px solid var(--line);border-radius:12px;color:var(--muted);cursor:pointer;font-weight:700}
.tab.active{color:var(--encre);background:linear-gradient(var(--chaleur2),var(--chaleur));border-color:var(--chaleur)}
.pane{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
input{background:rgba(23,23,25,.72);border:1px solid rgba(138,128,107,.45);border-radius:11px;padding:11px 12px;color:var(--os);font-size:15px;outline:none}
input:focus{border-color:var(--chaleur);box-shadow:0 0 0 3px rgba(201,138,85,.18)}

/* bouton « os poli » (actions secondaires) */
.primary{margin-top:4px;padding:12px;border:none;border-radius:12px;cursor:pointer;font-weight:800;font-size:15px;
  color:#2a2418;background:linear-gradient(var(--os),var(--ivoire));box-shadow:0 4px 0 #8a806b}
.primary:hover{filter:brightness(1.04)} .primary:active{transform:translateY(1px);box-shadow:0 3px 0 #8a806b}
.ghost{background:rgba(247,239,201,.05);border:1px solid var(--taupe);color:var(--ivoire);border-radius:10px;padding:8px 14px;cursor:pointer;font-weight:700}
.link{background:none;border:none;color:var(--muted);cursor:pointer;text-decoration:underline;font-size:13px}
.msg{min-height:18px;font-size:13px;margin:10px 0 0}
.msg.err{color:var(--danger)} .msg.ok{color:var(--ok)}

h2{color:var(--os);font-size:17px;margin:4px 0 16px;letter-spacing:.5px;font-weight:800}
.accounts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:44vh;overflow:auto}
.acc{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(rgba(41,43,56,.6),rgba(23,23,25,.55));border:1px solid var(--line);border-radius:13px;padding:12px 14px}
.acc .info{display:flex;flex-direction:column;gap:2px}
.acc .name{font-weight:800;color:var(--os)}
.acc .sub{font-size:12px;color:var(--muted)}
.acc .actions{display:flex;gap:8px;align-items:center}
/* JOUER = action principale => accent chaud (DA : actif = accent chaud) */
.play{padding:11px 28px;border:none;border-radius:12px;cursor:pointer;font-weight:900;letter-spacing:1px;
  color:#2a1c10;background:linear-gradient(var(--chaleur2),var(--chaleur));box-shadow:0 4px 0 #7d5430}
.play:hover{filter:brightness(1.06)} .play:active{transform:translateY(1px);box-shadow:0 3px 0 #7d5430}
.del{background:none;border:1px solid var(--line);color:var(--muted);border-radius:10px;padding:9px 11px;cursor:pointer}
.del:hover{border-color:var(--danger);color:var(--danger)}
.addbox{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.addbox summary{cursor:pointer;color:var(--chaleur2);font-weight:800;padding:6px 0;list-style:none}
.empty{color:var(--muted);font-size:14px;padding:8px 0}

/* barre du bas */
.glass-bar{display:flex;align-items:center;gap:14px;margin:0 26px 20px;padding:10px 18px;border-radius:14px;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);color:var(--muted);font-size:12.5px}
.foot .spacer{flex:1}

/* Mode heroique : la tombe est signalee par un liseré rouge et un nom estompé,
   le bouton « Recommencer » reste bien visible a droite. */
.persos{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.persos h3{margin:0 0 10px;font-size:14px;letter-spacing:.5px;text-transform:uppercase;color:var(--chaleur2)}
.acc.mort{border-left:3px solid var(--danger);opacity:.85}
.acc.mort .name{color:var(--muted)}