/* ── CHARACTER BUILDER ── */
/* ── CHARACTER BUILDER ── */
  #charakter { background: linear-gradient(180deg, #0a0818 0%, #110d2e 100%); }

  .char-builder {
    display: grid;
    grid-template-columns: 260px 1fr 260px;
    gap: 30px;
    align-items: start;
  }

  .char-panel {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(123,95,255,0.2);
    padding: 20px;
  }

  .char-panel-title {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(123,95,255,0.15);
  }

  .char-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: 6px;
    transition: border-color 0.2s, background 0.2s;
    border-radius: 4px;
  }

  .char-option:hover { background: rgba(123,95,255,0.08); border-color: rgba(123,95,255,0.3); }
  .char-option.selected { background: rgba(123,95,255,0.15); border-color: var(--purple); }

  .char-option-icon {
    width: 36px; height: 36px;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    background: rgba(123,95,255,0.12);
    flex-shrink: 0;
  }

  .char-option-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
  }

  .char-option-sub {
    font-size: 11px;
    color: rgba(200,200,230,0.4);
  }

  .char-option-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--purple);
    color: #fff;
    letter-spacing: 0.05em;
  }

  .char-option-badge.rare { background: #f0a500; }
  .char-option-badge.epic { background: #c040ff; }

  .char-preview-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .char-preview-stage {
    width: 100%;
    aspect-ratio: 1;
    background: radial-gradient(ellipse at 50% 60%, rgba(123,95,255,0.2) 0%, transparent 70%),
                linear-gradient(180deg, #110d2e 0%, #0a0818 100%);
    border: 1px solid rgba(123,95,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .char-preview-stage::before {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 60%; height: 30px;
    background: radial-gradient(ellipse, rgba(123,95,255,0.35) 0%, transparent 70%);
    filter: blur(10px);
  }

  .char-stat-bars { width: 100%; }

  .stat-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }

  .stat-bar-label {
    width: 70px;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .stat-bar-track {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
  }

  .stat-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--purple), var(--accent));
    transition: width 0.6s ease;
  }

  .stat-bar-val {
    width: 28px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-align: right;
  }

  .btn-create-char {
    width: 100%;
    padding: 14px;
    background: var(--purple);
    border: none;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    border-radius: 4px;
  }

  .btn-create-char:hover { background: var(--purple-dark); transform: translateY(-1px); }

  


/* ── CHARAKTER FORMULAR – PINK/DARK NEON ── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Barlow+Condensed:wght@700;900&display=swap');
:root{--pk:#7B5FFF;--pk2:#a084ff;--pk-glow:rgba(123,95,255,0.4);--pk-dim:rgba(123,95,255,0.12);--dark:#0d0b1e;--dark2:#0f0c25;--card:#12103a;--border:rgba(123,95,255,0.25);--text:#c8c8e8;--text-dim:rgba(200,200,230,0.45)}
.scroll-outer{position:relative;width:100%;max-width:920px;margin:0 auto;z-index:2}
@keyframes cb-unroll{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.scroll-outer{animation:cb-unroll 0.7s cubic-bezier(0.22,1,0.36,1) both}
.parchment{
  position:relative;
  background:linear-gradient(160deg,#0d0b1e 0%,#0f0c25 40%,#12103a 70%,#0d0b1e 100%);
  margin:0 14px;
  padding:50px 60px 60px;
  border-radius:12px;
  border:1px solid var(--border);
  box-shadow:0 0 0 1px rgba(123,95,255,0.08),0 0 60px rgba(123,95,255,0.15),0 30px 80px rgba(0,0,0,0.8);
  overflow:hidden
}
.parchment::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 600px 400px at 20% 0%,rgba(123,95,255,0.08) 0%,transparent 70%),
    radial-gradient(ellipse 400px 600px at 80% 100%,rgba(90,63,207,0.07) 0%,transparent 70%);
}
.parchment::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(123,95,255,0.03) 40px);
}
.parchment>*{position:relative;z-index:1}
.cb-frame-border{position:absolute;inset:14px;border:1px solid rgba(123,95,255,0.15);border-radius:8px;pointer-events:none;z-index:2}
.cb-frame-border::before{content:'';position:absolute;inset:5px;border:1px solid rgba(123,95,255,0.07);border-radius:5px}
.cb-corner{position:absolute;width:28px;height:28px;z-index:3}.cb-corner svg{width:100%;height:100%}
.cb-corner-tl{top:10px;left:10px}.cb-corner-tr{top:10px;right:10px;transform:scaleX(-1)}
.cb-corner-bl{bottom:10px;left:10px;transform:scaleY(-1)}.cb-corner-br{bottom:10px;right:10px;transform:scale(-1)}
.cb-header{text-align:center;padding-bottom:10px}
.cb-guild-seal{width:64px;height:64px;margin:0 auto 14px}.cb-guild-seal svg{width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(123,95,255,0.4))}
.cb-title-main{font-family:'Barlow Condensed',sans-serif;font-size:3rem;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;color:#fff;line-height:1;text-shadow:0 0 30px rgba(123,95,255,0.4),0 0 60px rgba(123,95,255,0.25)}
.cb-title-main span{color:#7B5FFF}
.cb-title-sub{font-family:'Cinzel',serif;font-size:0.6rem;letter-spacing:6px;text-transform:uppercase;color:var(--text-dim);margin-top:8px}
.cb-divider{display:flex;align-items:center;gap:10px;margin:18px 0}
.cb-divider-line{flex:1;height:1px;background:linear-gradient(90deg,transparent 0%,var(--border) 30%,rgba(123,95,255,0.5) 50%,var(--border) 70%,transparent 100%)}
.cb-divider-glyph{color:#7B5FFF;font-size:0.9rem;flex-shrink:0;text-shadow:0 0 8px rgba(123,95,255,0.4)}
.cb-divider-thick{height:2px;background:linear-gradient(90deg,transparent,#7B5FFF 20%,#a084ff 50%,#7B5FFF 80%,transparent);margin:8px 0;border-radius:2px;box-shadow:0 0 10px rgba(123,95,255,0.4)}
.cb-section{margin-bottom:24px}
.cb-section-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cb-section-icon{font-size:1rem;flex-shrink:0}
.cb-section-title{font-family:'Cinzel',serif;font-size:0.65rem;letter-spacing:4px;text-transform:uppercase;color:#a084ff;border-bottom:1px solid var(--border);padding-bottom:4px;flex:1}
.cb-field-row{display:grid;gap:14px;margin-bottom:12px}
.cb-cols-2{grid-template-columns:1fr 1fr}.cb-cols-3{grid-template-columns:1fr 1fr 1fr}
.cb-field{display:flex;flex-direction:column;gap:5px}
.cb-field label{font-family:'Cinzel',serif;font-size:0.55rem;letter-spacing:2.5px;text-transform:uppercase;color:#a084ff}
.cb-field input,.cb-field select,.cb-field textarea{
  background:rgba(123,95,255,0.05);
  border:none;
  border-bottom:1px solid rgba(123,95,255,0.3);
  padding:8px 10px;
  font-family:'Barlow',sans-serif;
  font-size:0.92rem;
  color:var(--text);
  outline:none;
  width:100%;
  transition:border-color .2s,background .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
  box-sizing:border-box;
  border-radius:4px 4px 0 0;
}
.cb-field input:focus,.cb-field select:focus,.cb-field textarea:focus{
  border-bottom-color:#7B5FFF;
  background:rgba(123,95,255,0.08);
  box-shadow:0 2px 0 0 #7B5FFF,inset 0 0 0 0 transparent;
}
.cb-field input::placeholder,.cb-field textarea::placeholder{color:var(--text-dim);font-style:normal;font-size:0.87rem}
.cb-field textarea{resize:vertical;min-height:72px;border:1px solid rgba(123,95,255,0.2);padding:10px;line-height:1.6;border-radius:6px}
.cb-field textarea:focus{border-color:#7B5FFF;box-shadow:0 0 0 2px rgba(123,95,255,0.15)}
.cb-field select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237B5FFF'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.cb-field select option{background:#0d0b1e;color:#c8c8e8}
.cb-custom-input{display:none;margin-top:5px;border-top:none!important;border-bottom:1px solid rgba(123,95,255,0.3)!important;background:rgba(123,95,255,0.05)!important;font-style:italic}
.cb-custom-input.visible{display:block}
.cb-two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cb-stat-box{
  text-align:center;
  border:1px solid rgba(123,95,255,0.2);
  padding:10px 4px 8px;
  background:rgba(123,95,255,0.04);
  border-radius:6px;
  transition:border-color .2s,box-shadow .2s;
}
.cb-stat-box:hover{border-color:rgba(123,95,255,0.5);box-shadow:0 0 14px rgba(123,95,255,0.15)}
.cb-stat-box label{display:block;font-family:'Cinzel',serif;font-size:0.48rem;letter-spacing:2px;text-transform:uppercase;color:#a084ff;margin-bottom:4px}
.cb-stat-box input{text-align:center;font-size:1.4rem;font-weight:bold;border:none!important;background:transparent;width:100%;color:#fff;text-shadow:0 0 10px rgba(123,95,255,0.5)}
.cb-hp-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:12px}
.cb-btn-wrap{position:relative;padding:2px;background:linear-gradient(90deg,#7B5FFF,#a084ff,#5a3fcf,#7B5FFF);border-radius:8px}
.cb-btn-send{
  width:100%;padding:16px 24px;
  background:linear-gradient(135deg,#0f0c25 0%,#0d0b1e 100%);
  border:0;outline:none;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;
  font-size:1rem;letter-spacing:5px;
  color:#a084ff;text-transform:uppercase;
  transition:all .25s;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
  position:relative;border-radius:6px;font-weight:700;
}
.cb-btn-send:hover{background:linear-gradient(135deg,#16123a,#0d0b1e);color:#fff;text-shadow:0 0 12px rgba(123,95,255,0.6);transform:translateY(-1px)}
.cb-btn-send:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.cb-send-status{display:none;text-align:center;font-family:'Barlow',sans-serif;font-size:0.9rem;margin-top:10px;padding:10px 14px;border-radius:6px}
.cb-send-status.success{display:block;color:#80ffb0;background:rgba(80,255,120,0.08);border:1px solid rgba(80,255,120,0.25)}
.cb-send-status.error{display:block;color:#a084ff;background:rgba(123,95,255,0.08);border:1px solid rgba(123,95,255,0.25)}
.cb-send-status.loading{display:block;color:var(--text-dim);background:rgba(123,95,255,0.05);border:1px solid var(--border)}
.cb-wax-seal{display:flex;justify-content:center;margin-top:24px}
.cb-wax-seal svg{width:56px;height:56px;filter:drop-shadow(0 0 14px rgba(123,95,255,0.5)) drop-shadow(0 4px 8px rgba(0,0,0,0.6))}
@media(max-width:650px){.parchment{padding:30px 20px 40px}.cb-cols-2,.cb-cols-3{grid-template-columns:1fr}.cb-two-col{grid-template-columns:1fr}.cb-title-main{font-size:2.2rem}.cb-hp-row{grid-template-columns:1fr 1fr}}