/* Created by: Justin Linwood Ross */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

:root{
  --bg1:#050012;
  --neon-pink:#d4709a;
  --neon-blue:#709ad4;
  --glass-bg: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; padding:0; font-family:'Orbitron',sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{
  background: radial-gradient(circle at 30% 20%, #120023 0%, #04000a 60%, #000 100%);
  color:#c8b8d8;
  overflow:hidden;
  position:relative;
}

#bg { position:fixed; inset:0; z-index:0; display:block; }

.glass-panel{
  position:fixed; z-index:2;
  padding:22px; border-radius:16px;
  background: rgba(10,5,20,0.55);
  border: 1px solid rgba(212,112,154,0.15);
  box-shadow:
    0 8px 40px rgba(0,0,0,0.5),
    0 0 35px rgba(212,112,154,0.06),
    0 0 80px rgba(112,154,212,0.04);
  backdrop-filter: blur(12px) saturate(140%);
  color:#d4c8e0;
}

#translator-panel{
  width:700px; max-width:92vw;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(244,160,200,0.4) transparent;
  /* Centrage parfait sans transform */
  left:0; right:0; top:0; bottom:0;
  margin:auto;
}
#translator-panel::-webkit-scrollbar{ width:6px; }
#translator-panel::-webkit-scrollbar-thumb{ background:rgba(244,160,200,0.4); border-radius:6px; }

.visually-hidden{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

.neon-title{
  font-size:3rem; color:var(--neon-pink); margin:4px 0 6px;
  text-shadow: 0 0 10px var(--neon-pink), 0 0 40px var(--neon-blue), 0 0 90px var(--neon-pink);
  letter-spacing:2px;
  animation: neonFlicker 2.5s infinite alternate;
}
@keyframes neonFlicker {
  0%,100%{ text-shadow:0 0 10px #d4709a,0 0 40px #709ad4,0 0 90px #d4709a; }
  25%{ text-shadow:0 0 15px #d4709a,0 0 50px #709ad4,0 0 100px #d4709a; }
  50%{ text-shadow:0 0 12px #d4709a,0 0 45px #709ad4,0 0 95px #d4709a; }
  75%{ text-shadow:0 0 18px #d4709a,0 0 55px #709ad4,0 0 105px #d4709a; }
}

.subtitle{ color:#a898b8; margin:0; font-size:0.95rem; }
.subtitle-row{ display:flex; align-items:center; justify-content:space-between; margin:0 0 12px; flex-wrap:nowrap; }

.controls{ display:flex; flex-direction:column; gap:12px; }
textarea{
  width:100%; min-height:180px; resize:vertical; border-radius:10px; padding:16px; font-size:16px;
  background: rgba(0,0,0,0.4); border:1px solid rgba(212,112,154,0.15); color:#d4c8e0; outline:none;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
  font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.controls-row{ display:flex; gap:12px; align-items:center; }
.select-wrap{ flex:1; }
.actions{ display:flex; gap:8px; align-items:center; }

select, button{
  padding:12px 16px; border-radius:10px; border:1px solid rgba(212,112,154,0.15);
  background: rgba(0,0,0,0.4); color:#d4c8e0; font-weight:700; font-size:15px;
}
button{
  background: linear-gradient(90deg,var(--neon-pink),var(--neon-blue));
  background-size:200% 200%;
  color:#fff; cursor:pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  animation: buttonGlow 4s ease infinite;
}
button:hover{ transform:translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.5); }
#clearBtn{ background:rgba(0,0,0,0.3); border:1px solid rgba(212,112,154,0.15); color:#a898b8; box-shadow:none; animation:none; padding:4px 12px; font-size:0.75rem; font-weight:400; flex-shrink:0; white-space:nowrap; }
#clearBtn:hover{ background:rgba(212,112,154,0.15); border-color:var(--neon-pink); color:#d4c8e0; }
@keyframes buttonGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.output-title{ margin:32px 0 4px; color:var(--neon-blue); font-size:1.1rem; text-align:center; }
.detected-lang{ color:#a898b8; font-size:0.85rem; margin:4px 0; text-align:center; }
.detected-lang span{ color:var(--neon-blue); font-weight:700; }
.output-glass{ margin:24px 0; background: rgba(0,0,0,0.35); border-radius:10px; padding:16px; border:1px solid rgba(212,112,154,0.1); color:#d4c8e0; line-height:1.5; min-height:80px;
box-shadow: 0 0 8px rgba(112,154,212,0.2), 0 0 24px rgba(212,112,154,0.12), 0 0 48px rgba(112,154,212,0.06);
animation: panelPulse 3s infinite alternate;}
@keyframes panelPulse {
  0%{box-shadow:0 0 8px rgba(112,154,212,0.2),0 0 24px rgba(212,112,154,0.12),0 0 48px rgba(112,154,212,0.06);}
  50%{box-shadow:0 0 12px rgba(112,154,212,0.3),0 0 30px rgba(212,112,154,0.18),0 0 60px rgba(112,154,212,0.1);}
  100%{box-shadow:0 0 8px rgba(112,154,212,0.2),0 0 24px rgba(212,112,154,0.12),0 0 48px rgba(112,154,212,0.06);}
}
.copy-btn{ display:block; margin:8px auto 0; background:rgba(0,0,0,0.3); border:1px solid rgba(212,112,154,0.15); color:#a898b8; padding:6px 16px; border-radius:6px; cursor:pointer; font-size:0.8rem; font-family:'Orbitron',sans-serif; transition:all 0.2s; }
.copy-btn:hover{ background:rgba(212,112,154,0.15); border-color:var(--neon-pink); color:#d4c8e0; transform:none; box-shadow:0 0 12px rgba(212,112,154,0.15); }
.copy-btn.copied{ background:rgba(112,154,212,0.15); border-color:var(--neon-blue); color:var(--neon-blue); }
.output-text{ color:#d4c8e0; font-size:16px; min-height:40px; font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

.ripple { position: absolute; left: 50%; transform: translateX(-50%); border-radius:50%; border: 2px solid rgba(112,154,212,0.15); pointer-events:none; animation:ripple 2s ease-out forwards; top: 6px; filter: blur(1.8px);}
.ripple.small { width:80px; height:80px; }
.ripple.medium { width:120px; height:120px; }
.ripple.large { width:160px; height:160px; }
@keyframes ripple { to { transform: translateX(-50%) scale(6); opacity:0; } }

.arc { position: fixed; width:6px; height:6px; border-radius:50%; background: var(--neon-blue); box-shadow: 0 0 24px var(--neon-blue); pointer-events:none; animation: arcfade 280ms ease-out forwards; }
@keyframes arcfade { to { transform: scale(2); opacity:0; } }

.flicker { animation: flicker 200ms linear 0s 3; }
@keyframes flicker { 0%{opacity:1} 50%{opacity:0.85; transform:translateY(-2px);} 100%{opacity:1} }

/* Responsive - Tablettes */
@media (max-width:768px) {
  #translator-panel{ width:90vw; padding:18px; }
  .neon-title{ font-size:2.2rem; }
  textarea{ min-height:140px; font-size:15px; padding:14px; }
  .subtitle{ font-size:0.85rem; }
  .controls-row{ gap:10px; }
  select, button{ padding:10px 14px; font-size:14px; }
  .output-glass{ padding:14px; }
  .output-text{ font-size:0.95rem; }
}

/* Responsive - Petits téléphones */
@media (max-width:480px) {
  #translator-panel{ width:94vw; padding:14px; max-height:calc(100vh - 20px); border-radius:12px; }
  .neon-title{ font-size:1.6rem; letter-spacing:1px; }
  textarea{ min-height:100px; font-size:14px; padding:12px; }
  .subtitle{ font-size:0.75rem; margin:0 0 10px; }
  .controls-row{ flex-direction:column; gap:8px; }
  .select-wrap{ width:100%; }
  .actions{ width:100%; }
  .actions button{ width:100%; }
  select, button{ padding:10px 12px; font-size:14px; width:100%; }
  #clearBtn{ width:auto; }
  .output-glass{ padding:12px; min-height:60px; }
  .output-text{ font-size:0.9rem; min-height:30px; }
  .output-glass h2{ font-size:0.95rem; }
  .ripple.small { width:50px; height:50px; }
  .ripple.medium { width:80px; height:80px; }
  .ripple.large { width:110px; height:110px; }
}

/* Responsive - Très petits écrans */
@media (max-width:360px) {
  #translator-panel{ width:96vw; padding:10px; }
  .neon-title{ font-size:1.3rem; }
  textarea{ min-height:80px; font-size:13px; padding:10px; }
  .output-glass{ padding:10px; }
}