#drague-app{
  --dg-bg:#1c1117;
  --dg-bg-2:#271620;
  --dg-bg-3:#2f1c28;
  --dg-line:#4a2f3f;
  --dg-gold:#c99a4b;
  --dg-gold-dim:#8f713a;
  --dg-rose:#d98b93;
  --dg-cool:#7c8fa0;
  --dg-text:#f3e9dd;
  --dg-text-dim:#ad8f9c;
  --dg-text-dimmer:#7d6270;
  --dg-danger:#b3564f;
  --dg-good:#8fae7a;

  background:radial-gradient(ellipse at 20% -10%, #3a2130 0%, var(--dg-bg) 55%);
  color:var(--dg-text);
  font-family:'Work Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  max-width:920px;margin:0 auto;padding:32px 20px 80px;
  box-sizing:border-box;
}
#drague-app *{box-sizing:border-box;}
#drague-app .serif{font-family:'Fraunces', serif;}
#drague-app .mono{font-family:'JetBrains Mono', monospace;}

/* ---------- HERO ---------- */
#drague-app .hero{padding:28px 4px 40px;border-bottom:1px solid var(--dg-line);margin-bottom:36px;}
#drague-app .hero .eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dg-gold);margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
#drague-app .hero .eyebrow::before{content:"";width:22px;height:1px;background:var(--dg-gold-dim);display:inline-block;}
#drague-app .hero h1{
  font-family:'Fraunces',serif;font-weight:500;font-style:italic;
  font-size:clamp(38px,7vw,58px);line-height:1.02;margin:0 0 16px;
  color:var(--dg-text);
}
#drague-app .hero p{color:var(--dg-text-dim);font-size:16px;line-height:1.55;max-width:56ch;margin:0;}

/* ---------- SCREENS ---------- */
#drague-app .screen{display:none;}
#drague-app .screen.active{display:block;animation:drague-fade .35s ease;}
@keyframes drague-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ---------- LEVEL MENU ---------- */
#drague-app .menu-title{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dg-text-dimmer);margin:0 0 18px;}
#drague-app .level-card{
  border:1px solid var(--dg-line);border-radius:2px;background:linear-gradient(180deg,var(--dg-bg-2),var(--dg-bg));
  padding:22px 24px;margin-bottom:14px;cursor:pointer;position:relative;overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
#drague-app .level-card:hover{border-color:var(--dg-gold-dim);transform:translateX(4px);background:linear-gradient(180deg,var(--dg-bg-3),var(--dg-bg-2));}
#drague-app .level-card .row1{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;}
#drague-app .level-card .lvl-name{font-family:'Fraunces',serif;font-size:22px;font-weight:500;color:var(--dg-text);}
#drague-app .level-card .lvl-num{font-family:'JetBrains Mono',monospace;color:var(--dg-text-dimmer);font-size:12px;margin-right:10px;}
#drague-app .level-card .dots{font-family:'JetBrains Mono',monospace;font-size:14px;letter-spacing:2px;color:var(--dg-gold);white-space:nowrap;}
#drague-app .level-card .dots .off{color:var(--dg-line);}
#drague-app .level-card .lvl-scene{color:var(--dg-text-dimmer);font-size:12px;margin-top:4px;font-style:italic;}
#drague-app .level-card p.desc{color:var(--dg-text-dim);font-size:14px;line-height:1.5;margin:12px 0 0;max-width:62ch;}

/* ---------- CONVERSATION SCREEN ---------- */
#drague-app .convo-wrap{display:grid;grid-template-columns:230px 1fr;gap:22px;}
@media(max-width:720px){#drague-app .convo-wrap{grid-template-columns:1fr;}}

#drague-app .scene-panel{border:1px solid var(--dg-line);border-radius:2px;padding:20px;background:var(--dg-bg-2);height:fit-content;}
#drague-app .scene-panel .p-name{font-family:'Fraunces',serif;font-size:24px;font-style:italic;color:var(--dg-rose);margin:0 0 2px;}
#drague-app .scene-panel .p-where{font-size:12px;color:var(--dg-text-dimmer);margin-bottom:18px;}
#drague-app .gauge-label{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--dg-text-dimmer);margin-bottom:6px;}
#drague-app .gauge-track{height:6px;border-radius:3px;background:var(--dg-line);overflow:hidden;margin-bottom:22px;}
#drague-app .gauge-fill{height:100%;background:linear-gradient(90deg,var(--dg-cool),var(--dg-gold),var(--dg-rose));transition:width .5s ease;}
#drague-app .chips{display:flex;flex-direction:column;gap:6px;}
#drague-app .chip{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;padding:7px 10px;border:1px solid var(--dg-line);border-radius:2px;color:var(--dg-text-dimmer);
}
#drague-app .chip.done{border-color:var(--dg-gold-dim);color:var(--dg-text);}
#drague-app .chip .sc{font-family:'JetBrains Mono',monospace;color:var(--dg-gold);}
#drague-app .end-btn{
  margin-top:20px;width:100%;padding:10px;background:transparent;border:1px solid var(--dg-danger);
  color:var(--dg-danger);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;border-radius:2px;
}
#drague-app .end-btn:hover{background:var(--dg-danger);color:var(--dg-bg);}

#drague-app .chat-panel{border:1px solid var(--dg-line);border-radius:2px;background:var(--dg-bg-2);display:flex;flex-direction:column;min-height:520px;}
#drague-app .chat-log{flex:1;padding:20px;overflow-y:auto;max-height:520px;}
#drague-app .bubble{max-width:80%;padding:11px 15px;border-radius:2px;margin-bottom:12px;font-size:14.5px;line-height:1.5;position:relative;}
#drague-app .bubble.her{background:var(--dg-bg-3);border-left:2px solid var(--dg-rose);margin-right:auto;color:var(--dg-text);}
#drague-app .bubble.me{background:transparent;border:1px solid var(--dg-gold-dim);margin-left:auto;color:var(--dg-text);}
#drague-app .bubble .tip{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--dg-gold);margin-top:6px;opacity:.85;}
#drague-app .bubble.thinking{color:var(--dg-text-dimmer);font-style:italic;}
#drague-app .chat-input{border-top:1px solid var(--dg-line);padding:14px;display:flex;gap:10px;align-items:center;}
#drague-app .chat-input input{
  flex:1;background:var(--dg-bg);border:1px solid var(--dg-line);border-radius:2px;color:var(--dg-text);
  padding:11px 13px;font-family:'Work Sans',sans-serif;font-size:14px;
}
#drague-app .chat-input input:focus{outline:none;border-color:var(--dg-gold-dim);}
#drague-app .mic-btn, #drague-app .send-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--dg-line);background:var(--dg-bg);
  color:var(--dg-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .2s ease;
}
#drague-app .mic-btn:hover, #drague-app .send-btn:hover{border-color:var(--dg-gold-dim);color:var(--dg-gold);}
#drague-app .mic-btn.listening{background:var(--dg-danger);border-color:var(--dg-danger);color:var(--dg-bg);animation:drague-pulse 1.2s infinite;}
@keyframes drague-pulse{0%,100%{box-shadow:0 0 0 0 rgba(179,86,79,.5);}50%{box-shadow:0 0 0 8px rgba(179,86,79,0);}}
#drague-app .scene-flavor{padding:14px 20px;border-bottom:1px solid var(--dg-line);font-size:13px;color:var(--dg-text-dimmer);font-style:italic;}

#drague-app .back-link{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dg-text-dimmer);cursor:pointer;letter-spacing:.06em;margin-bottom:18px;display:inline-block;}
#drague-app .back-link:hover{color:var(--dg-gold);}

/* ---------- BULLETIN (ticket) ---------- */
#drague-app .ticket{
  background:#f3e9dd;color:#2a1a20;max-width:420px;margin:0 auto;padding:34px 30px;
  border-radius:2px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  clip-path:polygon(0 0,100% 0,100% 97%,97% 100%,94% 97%,91% 100%,88% 97%,85% 100%,82% 97%,79% 100%,76% 97%,73% 100%,70% 97%,67% 100%,64% 97%,61% 100%,58% 97%,55% 100%,52% 97%,49% 100%,46% 97%,43% 100%,40% 97%,37% 100%,34% 97%,31% 100%,28% 97%,25% 100%,22% 97%,19% 100%,16% 97%,13% 100%,10% 97%,7% 100%,4% 97%,0 100%);
  padding-bottom:44px;
}
#drague-app .ticket-head{text-align:center;border-bottom:1px dashed #b8a48f;padding-bottom:14px;margin-bottom:16px;}
#drague-app .ticket-head .t-title{font-family:'Fraunces',serif;font-style:italic;font-size:22px;margin:0;}
#drague-app .ticket-head .t-sub{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8a7060;margin-top:4px;}
#drague-app .ticket-global{text-align:center;margin:18px 0 20px;}
#drague-app .ticket-global .num{font-family:'JetBrains Mono',monospace;font-size:52px;font-weight:700;line-height:1;}
#drague-app .ticket-global .out-of{font-family:'JetBrains Mono',monospace;font-size:16px;color:#8a7060;}
#drague-app .ticket-global .label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#8a7060;margin-top:6px;}
#drague-app .ticket-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;padding:6px 0;border-bottom:1px dotted #d8c8b5;}
#drague-app .ticket-row .cat{color:#4a3730;}
#drague-app .ticket-row .val{font-family:'JetBrains Mono',monospace;font-weight:700;}
#drague-app .ticket-row .val.na{color:#b09985;font-weight:400;}
#drague-app .ticket-summary{margin-top:20px;font-size:13px;line-height:1.6;color:#4a3730;padding-top:14px;border-top:1px dashed #b8a48f;}
#drague-app .ticket-summary b{color:#2a1a20;}
#drague-app .replay-btn{
  display:block;width:100%;margin-top:24px;padding:12px;background:var(--dg-gold);color:#1c1117;border:none;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;border-radius:2px;
}
#drague-app .disclaimer{max-width:920px;margin:40px auto 0;font-size:11.5px;color:var(--dg-text-dimmer);text-align:center;line-height:1.6;padding:0 20px;}

/* ---------- HISTORIQUE ---------- */
#drague-app .history-link{
  margin-top:22px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--dg-gold-dim);cursor:pointer;letter-spacing:.05em;
}
#drague-app .history-link:hover{color:var(--dg-gold);}
#drague-app .history-empty{color:var(--dg-text-dim);font-size:14px;line-height:1.6;}
#drague-app .hist-summary-row{
  display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--dg-text-dim);border:1px solid var(--dg-line);padding:14px 18px;border-radius:2px;
  margin-bottom:16px;background:var(--dg-bg-2);
}
#drague-app .hist-priority{
  border:1px solid var(--dg-gold-dim);border-radius:2px;padding:16px 18px;margin-bottom:22px;
  background:var(--dg-bg-2);font-size:13px;line-height:1.6;
}
#drague-app .hist-priority b{color:var(--dg-gold);font-family:'Fraunces',serif;font-size:15px;}
#drague-app .hist-priority ul{margin:10px 0 0;padding-left:18px;color:var(--dg-text-dim);}
#drague-app .hist-priority li{margin-bottom:8px;}
#drague-app .history-row{
  border:1px solid var(--dg-line);border-radius:2px;padding:14px 18px;margin-bottom:10px;cursor:pointer;
  background:linear-gradient(180deg,var(--dg-bg-2),var(--dg-bg));transition:border-color .2s ease, transform .2s ease;
}
#drague-app .history-row:hover{border-color:var(--dg-gold-dim);transform:translateX(4px);}
#drague-app .hr-top{display:flex;justify-content:space-between;align-items:baseline;font-size:16px;}
#drague-app .hr-top .hr-score{font-family:'JetBrains Mono',monospace;color:var(--dg-gold);font-size:14px;}
#drague-app .hr-meta{font-size:11.5px;color:var(--dg-text-dimmer);margin-top:4px;}
#drague-app .clear-history-btn{
  margin-top:22px;background:transparent;border:1px solid var(--dg-danger);color:var(--dg-danger);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 16px;border-radius:2px;cursor:pointer;
}
#drague-app .clear-history-btn:hover{background:var(--dg-danger);color:var(--dg-bg);}

/* ---------- AVATARS ---------- */
#drague-app .avatar-badge{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--dg-bg-2),var(--dg-bg));
  border:1px solid var(--dg-gold-dim);color:var(--dg-gold);
}
#drague-app .avatar-badge svg{width:58%;height:58%;}
#drague-app .lvl-name-wrap{display:flex;align-items:center;gap:10px;}
#drague-app .p-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
#drague-app .p-head .p-name{margin:0;}
#drague-app .p-head .p-where{margin:0;}
#drague-app .ticket-head{display:flex;align-items:center;gap:12px;}
#drague-app .hr-persona{display:inline-flex;align-items:center;gap:8px;}

@media (max-width:480px){
  #drague-app{padding:20px 14px 60px;}
}