/* =====================================================================
   SCOUNDREL — overlay.css
   Start-/Ergebnis-Fenster und "Neues Spiel"-Knopf (oben rechts)
   ===================================================================== */

#overlay{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(60% 60% at 50% 40%, rgba(20,15,9,.86), rgba(6,5,3,.96));
  backdrop-filter:blur(3px); padding:20px; animation:fadeIn .3s ease;
}
#overlay.hide{ display:none; }

.modal{
  max-width:520px; width:100%; text-align:center;
  max-height:90vh; overflow:auto;
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  color:var(--ink); border-radius:8px; padding:32px clamp(20px,5vw,40px);
  box-shadow:0 30px 70px -20px #000, inset 0 0 40px rgba(160,127,77,.35);
  clip-path:polygon(0 3%,3% 0,20% 3%,40% 0,60% 3%,82% 0,100% 4%,99% 30%,100% 60%,98% 100%,78% 97%,55% 100%,33% 97%,12% 100%,0 96%,1% 50%);
}
.modal h2{ font-family:var(--display); font-weight:900; letter-spacing:.1em; font-size:clamp(26px,6vw,40px); margin-bottom:4px; }
.modal h2.win { color:var(--gold-deep); }
.modal h2.lose{ color:var(--blood); }
.modal p{ font-size:clamp(14px,2.8vw,16.5px); line-height:1.55; color:var(--ink-soft); margin:10px 0; }
.modal .score{ font-family:var(--display); font-weight:900; font-size:clamp(40px,11vw,68px); margin:10px 0 4px; line-height:1; }
.modal .score.win { color:var(--herb-deep); }
.modal .score.lose{ color:var(--blood); }
.modal .verdict{ font-style:italic; font-size:15px; min-height:1.4em; }

.rules{
  text-align:left; font-size:14px; line-height:1.5; color:var(--ink-soft);
  margin:10px 0 14px;
}
.rules.tight{ margin:6px 0 12px; }
.rules li{ margin:6px 0 6px 18px; }
.rules ul{ margin:4px 0 2px; }
.rules ul li{ margin:3px 0 3px 18px; list-style:'– '; color:var(--ink); }
.rules b{ color:var(--ink); }

/* Zwischenüberschriften im Anleitungs-Fenster */
.rules-head{
  font-family:var(--display); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  font-size:13px; color:var(--gold-deep); text-align:left; margin:14px 0 0;
  border-bottom:1px solid var(--parch-edge); padding-bottom:4px;
}

.start-btn{
  font-family:var(--display); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:15px; cursor:pointer; margin-top:14px;
  color:var(--parch); background:linear-gradient(180deg,var(--blood-hi),var(--blood));
  border:1px solid var(--blood-deep); border-radius:30px; padding:13px 34px;
  box-shadow:0 8px 20px -6px rgba(168,48,32,.6), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s, box-shadow .15s;
}
.start-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -6px rgba(168,48,32,.7); }
.start-btn:focus-visible{ outline:3px solid var(--gold-hi); outline-offset:3px; }
/* Variante für "Erneut" (Gold statt Blut) */
.start-btn.gold{ background:linear-gradient(180deg,var(--gold-hi),var(--gold)); border-color:var(--gold-deep); color:var(--bg-0); }

.topright{ position:fixed; top:14px; right:16px; z-index:40; }
.ghost{
  font-family:var(--serif); font-size:13px; cursor:pointer; color:var(--ink-faint);
  background:rgba(40,30,18,.5); border:1px solid var(--stone-edge); border-radius:20px;
  padding:7px 14px; transition:color .2s, border-color .2s;
}
.ghost:hover{ color:var(--gold); border-color:var(--gold-deep); }
.ghost:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }