/* Ombres de Cendrebois — direction artistique V2.
   Surcouche non destructive : supprimer ce lien pour revenir au style d'origine. */
:root {
  --bg: #070a12;
  --ink: #f1e8d7;
  --muted: #b7a9a0;
  --gold: #cba86c;
  --gold2: #f5db9b;
  --panel: rgba(10, 13, 23, .96);
  --line: rgba(207, 168, 102, .40);
}
.screen {
  isolation: isolate;
  background:
    radial-gradient(ellipse 54% 58% at 50% 45%, rgba(54, 48, 90, .40), transparent 80%),
    radial-gradient(ellipse 90% 80% at 50% 110%, rgba(26, 46, 66, .55), transparent 70%),
    linear-gradient(155deg, #111525 0%, #080a12 52%, #030509 100%);
}
.screen::before {
  background:
    radial-gradient(ellipse at 50% 115%, rgba(91, 105, 172, .20), transparent 58%),
    repeating-linear-gradient(110deg, transparent 0 72px, rgba(255,255,255,.012) 73px, transparent 74px);
  opacity: .9;
}
.titlebox, .pinbox, .loadbox, .deathbox { z-index: 1; }
.titlebox { max-width: 650px; padding: clamp(22px, 5vw, 48px); }
.titlebox::before, .pinbox::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: 1px solid rgba(214, 181, 120, .16);
  background: linear-gradient(145deg, rgba(22,26,43,.65), rgba(6,9,18,.32));
  box-shadow: 0 22px 90px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.04);
  border-radius: 12px;
}
.logo {
  background: linear-gradient(180deg, #fff6dc 0%, #edcd8d 39%, #b78b48 72%, #f0d6a4 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(111,127,230,.18));
  letter-spacing: .065em;
}
.tag { max-width: 460px; margin: 12px auto 28px; line-height: 1.5; color: #d1c5b9; }
.btn {
  border-radius: 6px;
  background: linear-gradient(180deg, #303044, #151622);
  border-color: rgba(212,178,116,.48);
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 5px 18px rgba(0,0,0,.42);
  transition: transform .14s ease, border-color .2s ease, filter .2s ease, box-shadow .2s ease;
}
.btn.primary {
  background: linear-gradient(180deg, #73503c, #402b31 55%, #2a2030);
  border-color: #d9ad73; color: #fff0d6;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); border-color: #f0d8a0; filter: brightness(1.12); box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 18px rgba(160,137,204,.13); }
}
.btn:focus-visible, .pinpad button:focus-visible { outline: 2px solid #d9c8ff; outline-offset: 3px; }
.lbar { height: 8px; border-radius: 6px; overflow: hidden; background: #0b1020; }
.lbar i { background: linear-gradient(90deg, #5767ac, #a48ae1, #e4c28c); box-shadow: 0 0 12px rgba(164,138,225,.65); }
.pindots i.on { box-shadow: 0 0 12px rgba(164,138,225,.75); }
.panel { border-color: var(--line); }
@media (max-width: 600px) {
  .titlebox, .pinbox { width: calc(100% - 24px); padding: 24px 16px; }
  .tag { font-size: 16px; }
  .btn.big { min-width: min(260px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .lbar i { transition: none; }
}