/* ============================================
   D&D Name Generator — Styles
   ============================================ */
.dng-wrap {
    --dng-crimson: #9B2335;
    --dng-crimson-lt: #BF2D43;
    --dng-crimson-dk: #6E1826;
    --dng-gold: #C9A84C;
    --dng-gold-lt: #E4CA7A;
    --dng-parch: #F8F4EC;
    --dng-parch-dk: #EDE7D9;
    --dng-ink: #1A1820;
    --dng-ink2: #2A2836;
    --dng-txt: #3A3844;
    --dng-muted: #807E8A;
    --dng-bdr: #D8D4C8;
    --dng-w: #FFFFFF;
    --dng-sh: 0 4px 24px rgba(26,24,32,.07);
    --dng-sh-lg: 0 12px 48px rgba(26,24,32,.11);
    --dng-r: 14px;
    --dng-rs: 10px;
    --dng-e: .3s cubic-bezier(.4,0,.2,1);
    /* Race colors */
    --rc-human: #6B7280;
    --rc-elf: #3B82F6;
    --rc-dwarf: #B45309;
    --rc-halfling: #16A34A;
    --rc-dragonborn: #DC2626;
    --rc-tiefling: #9333EA;
    --rc-gnome: #0891B2;
    --rc-halforc: #4D7C0F;
    max-width: 920px; margin: 40px auto; padding: 0 20px;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--dng-txt); line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.dng-wrap *,.dng-wrap *::before,.dng-wrap *::after{box-sizing:border-box;margin:0;padding:0}

/* Header */
.dng-header{text-align:center;padding:48px 24px 32px}
.dng-d20{display:flex;justify-content:center;margin-bottom:16px}
.dng-d20-svg{width:64px;height:64px;color:var(--dng-gold);filter:drop-shadow(0 2px 10px rgba(201,168,76,.35));animation:dng-spin 25s linear infinite}
@keyframes dng-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.dng-title{font-family:'Cinzel Decorative',serif;font-size:36px;font-weight:700;color:var(--dng-ink);letter-spacing:1px;margin-bottom:8px;line-height:1.15}
.dng-subtitle{font-size:16px;color:var(--dng-muted);max-width:520px;margin:0 auto;line-height:1.5}

/* Controls */
.dng-controls{background:var(--dng-w);border:1px solid var(--dng-bdr);border-radius:var(--dng-r);padding:28px 28px 24px;margin-bottom:24px;box-shadow:var(--dng-sh);position:relative;overflow:hidden}
.dng-controls::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--dng-crimson),var(--dng-gold),var(--dng-crimson));opacity:.6}
.dng-control-row{display:flex;gap:20px;margin-bottom:18px}
.dng-control-row:last-child{margin-bottom:0}
.dng-control-group{flex:1;min-width:0}
.dng-race-group{flex:1 1 100%}
.dng-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--dng-muted);margin-bottom:8px}
.dng-toggle-group{display:flex;gap:6px;flex-wrap:wrap}
.dng-race-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.dng-toggle-btn{flex:1;min-width:fit-content;padding:9px 14px;border:1.5px solid var(--dng-bdr);border-radius:var(--dng-rs);background:var(--dng-w);color:var(--dng-txt);font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;cursor:pointer;transition:var(--dng-e);white-space:nowrap;text-align:center}
.dng-toggle-btn:hover{border-color:var(--dng-crimson);color:var(--dng-crimson);background:rgba(155,35,53,.03)}
.dng-toggle-btn.active{background:linear-gradient(145deg,var(--dng-crimson),var(--dng-crimson-lt));color:var(--dng-w);border-color:var(--dng-crimson);box-shadow:0 3px 14px rgba(155,35,53,.28);font-weight:600}
.dng-race-btn{display:flex;align-items:center;justify-content:center;gap:5px}
.dng-race-icon{font-size:15px;line-height:1}

/* Generate */
.dng-gen-wrap{text-align:center;margin-bottom:32px}
.dng-gen-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 48px;background:linear-gradient(145deg,var(--dng-crimson),var(--dng-crimson-dk));color:var(--dng-w);border:none;border-radius:60px;font-family:'Cinzel',serif;font-size:16px;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:var(--dng-e);box-shadow:0 4px 22px rgba(155,35,53,.35);position:relative;overflow:hidden}
.dng-gen-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.12),transparent);opacity:0;transition:var(--dng-e)}
.dng-gen-btn:hover{transform:translateY(-2px);box-shadow:0 8px 34px rgba(155,35,53,.45)}
.dng-gen-btn:hover::before{opacity:1}
.dng-gen-btn:active{transform:translateY(0)}
.dng-gen-btn:hover svg{transform:rotate(45deg)}
.dng-gen-btn svg{transition:transform .4s ease}

/* Results */
.dng-results{display:flex;flex-direction:column;gap:14px;margin-bottom:40px}
.dng-results:empty{margin-bottom:0}

/* Name Card */
.dng-card{background:var(--dng-w);border:1px solid var(--dng-bdr);border-radius:var(--dng-r);overflow:hidden;box-shadow:var(--dng-sh);opacity:0;transform:translateY(16px);animation:dng-in .5s ease forwards;transition:border-color .3s,box-shadow .3s}
.dng-card:hover{box-shadow:var(--dng-sh-lg)}
@keyframes dng-in{to{opacity:1;transform:translateY(0)}}
.dng-card-top{display:flex;align-items:stretch}

/* Left panel */
.dng-card-left{width:150px;min-width:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 14px;position:relative;overflow:hidden}
.dng-card-left::before{content:'';position:absolute;width:90px;height:90px;border-radius:50%;top:-25px;right:-25px;opacity:.06;background:#fff}
.dng-card-left::after{content:'';position:absolute;width:50px;height:50px;border-radius:50%;bottom:-15px;left:-15px;opacity:.04;background:#fff}
.dng-race-emoji{font-size:32px;margin-bottom:6px;position:relative;z-index:1}
.dng-race-label{font-family:'Cinzel',serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.85);position:relative;z-index:1}
.dng-gender-pill{margin-top:8px;padding:2px 10px;border-radius:20px;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;position:relative;z-index:1;background:rgba(255,255,255,.12);color:rgba(255,255,255,.8)}

/* Panel race colors */
.dng-panel-human{background:linear-gradient(160deg,#4B5563,#374151)}
.dng-panel-elf{background:linear-gradient(160deg,#1E40AF,#2563EB)}
.dng-panel-dwarf{background:linear-gradient(160deg,#92400E,#B45309)}
.dng-panel-halfling{background:linear-gradient(160deg,#15803D,#16A34A)}
.dng-panel-dragonborn{background:linear-gradient(160deg,#991B1B,#DC2626)}
.dng-panel-tiefling{background:linear-gradient(160deg,#6B21A8,#9333EA)}
.dng-panel-gnome{background:linear-gradient(160deg,#0E7490,#0891B2)}
.dng-panel-halforc{background:linear-gradient(160deg,#3F6212,#4D7C0F)}

/* Right details */
.dng-card-right{flex:1;padding:22px 26px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.dng-char-name{font-family:'Cinzel',serif;font-size:22px;font-weight:700;color:var(--dng-ink);margin-bottom:2px;letter-spacing:.3px}
.dng-char-title{font-size:13px;color:var(--dng-muted);margin-bottom:12px;font-style:italic}
.dng-tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.dng-tag{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:500}
/* Race-colored tags */
.dng-tag-human{background:rgba(107,114,128,.08);border:1px solid rgba(107,114,128,.12);color:#4B5563}
.dng-tag-elf{background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.12);color:#1D4ED8}
.dng-tag-dwarf{background:rgba(180,83,9,.06);border:1px solid rgba(180,83,9,.12);color:#92400E}
.dng-tag-halfling{background:rgba(22,163,74,.06);border:1px solid rgba(22,163,74,.12);color:#15803D}
.dng-tag-dragonborn{background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.12);color:#991B1B}
.dng-tag-tiefling{background:rgba(147,51,234,.06);border:1px solid rgba(147,51,234,.12);color:#7E22CE}
.dng-tag-gnome{background:rgba(8,145,178,.06);border:1px solid rgba(8,145,178,.12);color:#0E7490}
.dng-tag-halforc{background:rgba(77,124,15,.06);border:1px solid rgba(77,124,15,.12);color:#3F6212}

.dng-class-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--dng-gold)}

/* Actions */
.dng-card-acts{display:flex;border-top:1px solid var(--dng-bdr)}
.dng-act{flex:1;padding:10px;border:none;background:transparent;color:var(--dng-muted);font-family:'Inter',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:var(--dng-e);display:flex;align-items:center;justify-content:center;gap:5px}
.dng-act:hover{background:var(--dng-parch);color:var(--dng-crimson)}
.dng-act+.dng-act{border-left:1px solid var(--dng-bdr)}
.dng-act svg{width:13px;height:13px}
.dng-act.dng-copied{color:#16a34a;background:rgba(22,163,74,.05)}

/* Border hover per race */
.dng-card[data-race="human"]:hover{border-color:var(--rc-human)}
.dng-card[data-race="elf"]:hover{border-color:var(--rc-elf)}
.dng-card[data-race="dwarf"]:hover{border-color:var(--rc-dwarf)}
.dng-card[data-race="halfling"]:hover{border-color:var(--rc-halfling)}
.dng-card[data-race="dragonborn"]:hover{border-color:var(--rc-dragonborn)}
.dng-card[data-race="tiefling"]:hover{border-color:var(--rc-tiefling)}
.dng-card[data-race="gnome"]:hover{border-color:var(--rc-gnome)}
.dng-card[data-race="halforc"]:hover{border-color:var(--rc-halforc)}

/* Info */
.dng-info-section{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px;padding-top:28px;border-top:1px solid var(--dng-bdr)}
.dng-info-card{text-align:center;padding:26px 18px;border-radius:var(--dng-r);background:var(--dng-w);border:1px solid var(--dng-bdr);transition:var(--dng-e)}
.dng-info-card:hover{transform:translateY(-3px);box-shadow:var(--dng-sh);border-color:var(--dng-gold)}
.dng-info-ic{font-size:28px;margin-bottom:8px}
.dng-info-card h4{font-family:'Cinzel',serif;font-size:14px;font-weight:600;color:var(--dng-ink);margin-bottom:6px}
.dng-info-card p{font-size:12.5px;color:var(--dng-muted);line-height:1.5}

/* Responsive */
@media(max-width:768px){
    .dng-wrap{margin:20px auto;padding:0 12px}
    .dng-header{padding:32px 16px 24px}
    .dng-title{font-size:26px}
    .dng-controls{padding:18px}
    .dng-control-row{flex-direction:column;gap:14px}
    .dng-race-grid{grid-template-columns:repeat(3,1fr)}
    .dng-card-top{flex-direction:column}
    .dng-card-left{width:100%;min-width:unset;padding:18px 14px;flex-direction:row;gap:12px}
    .dng-race-emoji{font-size:26px;margin-bottom:0}
    .dng-gender-pill{margin-top:0}
    .dng-card-right{padding:18px}
    .dng-char-name{font-size:19px}
    .dng-info-section{grid-template-columns:1fr;gap:10px}
    .dng-gen-btn{padding:13px 36px;font-size:14px}
    .dng-d20-svg{width:50px;height:50px}
}
@media(max-width:480px){
    .dng-race-grid{grid-template-columns:repeat(2,1fr)}
    .dng-toggle-btn{padding:8px 10px;font-size:12px}
}