/* ui-werwolf.css — Blood & Mist Edition (mysteriöser, blutiger, brutaler) */

/* =========================
   THEME
   ========================= */
:root{
  --bg: #050509;
  --panel: #0b0b11;
  --panel2: #08080d;

  --text: #f0f0f5;
  --muted: #a3a3b2;

  --border: rgba(255,255,255,.07);

  --moon: #bfc7d7;         /* kaltes Mondlicht */
  --blood: #b30016;        /* brutaler */
  --blood2: #ff2b2b;       /* Highlight */
  --witch: #1fb56e;        /* Hexen-grün */
  --fog: rgba(191,199,215,.14);

  --shadow: 0 16px 44px rgba(0,0,0,.75);
  --radius: 2px;
  --radius-sm: 2px;

  --focus: 0 0 0 3px rgba(255,43,43,.14), 0 0 0 1px rgba(255,43,43,.28) inset;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 20% -10%, rgba(191,199,215,.10), transparent 62%),
    radial-gradient(700px 420px at 85% 0%, rgba(255,43,43,.10), transparent 58%),
    radial-gradient(900px 680px at 55% 120%, rgba(179,0,22,.08), transparent 70%),
    linear-gradient(180deg, #020203, var(--bg));
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================
   LAYOUT HELPERS
   ========================= */
.ui-wrap{ max-width:1200px; margin:0 auto; padding:18px; }
.ui-grid{ display:grid; gap:14px; }
.ui-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ui-spacer{ flex:1; }

/* =========================
   PANELS / CARDS (ritual frame + scratches)
   ========================= */
.ui-panel, .ui-card{
  position:relative;
  background:
    radial-gradient(600px 260px at 25% 0%, rgba(255,255,255,.045), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.22)),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.ui-card{ padding:14px; }

.ui-panel::after, .ui-card::after{
  content:"";
  position:absolute; inset:-30%;
  background:
    repeating-linear-gradient(115deg,
      transparent 0 12px,
      rgba(255,255,255,.015) 12px 13px,
      transparent 13px 26px
    );
  opacity:.55;
  transform: rotate(-2deg);
  pointer-events:none;
  mask-image: radial-gradient(circle at 40% 25%, rgba(0,0,0,.95), transparent 60%);
}

.ui-panel-header{
  padding:12px 14px;
  border-bottom: 1px solid var(--border);
  display:flex; gap:10px; align-items:center;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.22));
}
.ui-panel-body{ padding:14px; }

/* =========================
   FOG ORNAMENT
   ========================= */
.ui-fog{
  position:relative;
  overflow:hidden;
}
.ui-fog::before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 30% 40%, rgba(191,199,215,.10), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(255,43,43,.08), transparent 60%);
  filter: blur(18px);
  opacity:.85;
  pointer-events:none;
}

/* =========================
   TYPOGRAPHY
   ========================= */
.ui-title{ font-size:18px; font-weight:800; letter-spacing:.25px; }
.ui-subtitle{ color:var(--muted); font-size:12px; }

.ui-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--moon);
  font-size:12px;
}
.ui-badge--blood{ color:#ffd7da; border-color:rgba(255,43,43,.28); background:rgba(179,0,22,.16); }
.ui-badge--witch{ color:#c8ffe5; border-color:rgba(31,181,110,.28); background:rgba(31,181,110,.12); }

/* =========================
   TOOLBAR
   ========================= */
.ui-toolbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:10px 12px;
  border-radius: var(--radius);
  background:
    radial-gradient(420px 140px at 20% 0%, rgba(255,255,255,.035), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.35)),
    var(--panel2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.ui-toolbar .ui-title{ margin-right:6px; }

/* =========================
   ACTION BAR (Back left, Next/Save right)
   ========================= */
.step-actions{
  margin: 18px 0 8px;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}
.step-actions .left{ display:flex; gap:10px; }
.step-actions .right{ display:flex; gap:10px; margin-left:auto; }

/* =========================
   BUTTONS (blood & claw)
   ========================= */
/* =========================
   BUTTON – brutal, kantig
   ========================= */

.ui-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.55)),
    #0a0a0f;

  color: var(--text);
  padding: 12px 16px;

  border-radius: 4px; /* keine Rundung */

  cursor:pointer;
  font-weight:800;
  letter-spacing:.8px;
  text-transform: uppercase;

  box-shadow:
    0 0 0 1px rgba(0,0,0,.7) inset,
    0 18px 40px rgba(0,0,0,.85);

  transition: .15s ease;
  position:relative;
}

.ui-btn:hover{
  border-color: rgba(255,43,43,.35);
  box-shadow:
    0 0 0 1px rgba(255,43,43,.15) inset,
    0 22px 50px rgba(0,0,0,.95);
  filter: brightness(1.08);
}

.ui-btn:active{
  transform: translateY(2px);
  filter: brightness(0.95);
}

/* Blut-Button */
.ui-btn--blood{
  background:
    linear-gradient(180deg, rgba(179,0,22,.75), rgba(40,0,5,.65));
  border-color: rgba(255,43,43,.6);
}

.ui-btn--blood:hover{
  box-shadow:
    0 0 0 1px rgba(255,43,43,.2) inset,
    0 0 28px rgba(255,43,43,.25),
    0 24px 60px rgba(0,0,0,.95);
}

/* Ghost */
.ui-btn--ghost{
  background: #0a0a0f;
  border-color: rgba(255,255,255,.08);
  color: var(--muted);
}

.ui-btn .ui-ico{
  width: 22px; height: 22px;
  border-radius: 12px;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.30);
}

/* =========================
   INPUTS
   ========================= */
.ui-input,
.ui-textarea{
  width:100%;
  padding: 12px 14px;

  border-radius: 4px; /* keine Rundung */

  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.65)),
    #07070b;

  color: var(--text);

  box-shadow:
    0 0 0 1px rgba(0,0,0,.8) inset,
    0 12px 30px rgba(0,0,0,.75);

  transition:.15s ease;
}

.ui-input::placeholder,
.ui-textarea::placeholder{
  color: rgba(163,163,178,.65);
}

.ui-input:hover,
.ui-textarea:hover{
  border-color: rgba(255,43,43,.25);
}

.ui-input:focus,
.ui-textarea:focus{
  outline:none;
  border-color: rgba(255,43,43,.45);
  box-shadow:
    0 0 0 1px rgba(255,43,43,.2) inset,
    0 0 18px rgba(255,43,43,.2),
    0 20px 50px rgba(0,0,0,.95);
}

/* =========================
   SELECT (blood arrow)
   ========================= */
.ui-select{
  width:100%;
  padding: 12px 48px 12px 14px;

  border-radius: 0; /* keine Rundung */

  border:1px solid rgba(255,255,255,.10);

  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.65)),
    #07070b;

  color: var(--text);

  box-shadow:
    0 0 0 1px rgba(0,0,0,.8) inset,
    0 12px 30px rgba(0,0,0,.75);

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  background-repeat:no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;

  /* Blutpfeil */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff2b2b' d='M7 10l5 5l5-5z'/%3E%3C/svg%3E");
}

.ui-select:hover{
  border-color: rgba(255,43,43,.25);
}

.ui-select:focus{
  outline:none;
  border-color: rgba(255,43,43,.45);
  box-shadow:
    0 0 0 1px rgba(255,43,43,.2) inset,
    0 0 18px rgba(255,43,43,.2),
    0 20px 50px rgba(0,0,0,.95);
}

.ui-select option{
  background:#050509;
  color:#f0f0f5;
}

/* =========================
   RADIO – ritual sigil
   (HTML: <input ...><span class="sigil"></span>Text)
   ========================= */
.radio-row{ display:flex; gap:12px; flex-wrap:wrap; }

.radio-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  /*border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(180px 80px at 30% 18%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.32));
  box-shadow: 0 14px 30px rgba(0,0,0,.70);*/
  cursor:pointer;
  user-select:none;
  transition: transform .06s ease, border-color .15s ease, filter .15s ease, box-shadow .15s ease;
  position:relative;
  overflow:hidden;
}
.radio-item:hover{
  filter: brightness(1.10) contrast(1.03);
  border-color: rgba(255,43,43,.22);
  box-shadow: 0 18px 42px rgba(0,0,0,.82);
}
.radio-item:active{ transform: translateY(1px); }

.radio-item input[type="radio"]{
  position:absolute;
  opacity:0;
  width:1px; height:1px;
}

.radio-item .sigil{
  width: 20px; height: 20px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.35) inset,
    0 0 14px rgba(0,0,0,.45);
  position:relative;
}
.radio-item .sigil::before{
  content:"";
  position:absolute; inset:3px;
  border-radius:999px;
  background: conic-gradient(from 0deg, rgba(255,255,255,.18), rgba(0,0,0,0), rgba(255,255,255,.10));
  opacity:.55;
}
.radio-item .sigil::after{
  content:"";
  position:absolute; inset:6px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  opacity:0;
  transform: scale(.7);
  transition: .15s ease;
}

.radio-item input[type="radio"]:checked + .sigil{
  border-color: rgba(191,199,215,.60);
  box-shadow:
    0 0 0 3px rgba(191,199,215,.12),
    0 0 22px rgba(191,199,215,.12);
}
.radio-item input[type="radio"]:checked + .sigil::after{
  opacity:1;
  transform: scale(1);
}

.radio-item--blood input[type="radio"]:checked + .sigil{
  border-color: rgba(255,43,43,.70);
  box-shadow: 0 0 0 3px rgba(255,43,43,.14), 0 0 26px rgba(255,43,43,.16);
}
.radio-item--blood input[type="radio"]:checked + .sigil::after{
  background: rgba(255,43,43,.22);
}

.radio-item--witch input[type="radio"]:checked + .sigil{
  border-color: rgba(31,181,110,.70);
  box-shadow: 0 0 0 3px rgba(31,181,110,.14), 0 0 26px rgba(31,181,110,.14);
}
.radio-item--witch input[type="radio"]:checked + .sigil::after{
  background: rgba(31,181,110,.18);
}

/* =========================
   TABLE
   ========================= */
.ui-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.ui-table thead th{
  text-align:left;
  font-weight:800;
  font-size:12px;
  color: var(--moon);
  padding:10px 12px;
  background:
    radial-gradient(520px 120px at 15% 0%, rgba(255,255,255,.035), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.40));
  border-bottom:1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
}
.ui-table tbody td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  color: var(--text);
}
.ui-table tbody tr:hover{
  background: rgba(255,43,43,.06);
}
.ui-table .ui-muted{ color: var(--muted); }

/* =========================
   STATUS CHIPS
   ========================= */
.ui-status{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
}
.ui-status--ok{ border-color: rgba(31,181,110,.28); background: rgba(31,181,110,.12); }
.ui-status--warn{ border-color: rgba(191,199,215,.25); background: rgba(191,199,215,.10); }
.ui-status--bad{ border-color: rgba(255,43,43,.28); background: rgba(179,0,22,.16); }

/* =========================
   MODAL
   ========================= */
.ui-modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
  display:none;
  align-items:center; justify-content:center;
  padding:18px;
  z-index: 50;
}
.ui-modal-backdrop.is-open{ display:flex; }

.ui-modal{
  width:min(980px, 100%);
  max-height: 90vh;
  overflow:auto;
  border-radius: calc(var(--radius) + 2px);
  border:1px solid var(--border);
  background:
    radial-gradient(700px 260px at 25% 0%, rgba(255,255,255,.045), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.32)),
    var(--panel);
  box-shadow: 0 22px 70px rgba(0,0,0,.85);
}

.ui-modal-header{
  display:flex; gap:10px; align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  position: sticky; top:0; z-index:3;
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.28));
}
.ui-modal-body{ padding:14px; }
.ui-modal-footer{
  padding:12px 14px;
  border-top:1px solid var(--border);
  display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
}

/* =========================
   DROPDOWN (click-based)
   ========================= */
.ui-dropdown{ position:relative; }

.ui-dropdown-menu{
  position:absolute;
  top: calc(100% + 8px);
  right:0;
  min-width: 220px;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background:
    radial-gradient(420px 140px at 20% 0%, rgba(255,255,255,.03), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.42)),
    rgba(12,16,22,.98);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:none;
  z-index: 10;
}

.ui-dropdown.is-open .ui-dropdown-menu{ display:block; }

.ui-dropdown-menu button{
  width:100%;
  border:0;
  background:transparent;
  color: var(--text);
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
}
.ui-dropdown-menu button:hover{
  background: rgba(255,43,43,.10);
}







/* --- Rune (diamond) sigil --- */
.radio-item .sigil{
  width: 20px; height: 20px;
  border-radius: 6px;                 /* eckiger */
  transform: rotate(45deg);           /* diamant */
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.60);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.35) inset,
    0 0 14px rgba(0,0,0,.45);
  position:relative;
}

.radio-item .sigil::before{
  content:"";
  position:absolute; inset:3px;
  border-radius: 4px;
  background:
    conic-gradient(from 0deg, rgba(255,255,255,.16), rgba(0,0,0,0), rgba(255,255,255,.10));
  opacity:.55;
}

.radio-item .sigil::after{
  content:"";
  position:absolute; inset:6px;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
  opacity:0;
  transform: scale(.7);
  transition: .15s ease;
}

/* checked glow (default moon) */
.radio-item input[type="radio"]:checked + .sigil{
  border-color: rgba(191,199,215,.60);
  box-shadow:
    0 0 0 3px rgba(191,199,215,.12),
    0 0 22px rgba(191,199,215,.12);
}
.radio-item input[type="radio"]:checked + .sigil::after{
  opacity:1;
  transform: scale(1);
}

/* blood + witch variants */
.radio-item--blood input[type="radio"]:checked + .sigil{
  border-color: rgba(255,43,43,.70);
  box-shadow: 0 0 0 3px rgba(255,43,43,.14), 0 0 26px rgba(255,43,43,.16);
}
.radio-item--blood input[type="radio"]:checked + .sigil::after{
  background: rgba(255,43,43,.22);
}

.radio-item--witch input[type="radio"]:checked + .sigil{
  border-color: rgba(31,181,110,.70);
  box-shadow: 0 0 0 3px rgba(31,181,110,.14), 0 0 26px rgba(31,181,110,.14);
}
.radio-item--witch input[type="radio"]:checked + .sigil::after{
  background: rgba(31,181,110,.18);
}

/* Text wieder "gerade", obwohl Sigil rotiert */
.radio-item .sigil,
.radio-item .sigil *{
  pointer-events:none;
}