/* Warrior Cats Name Generator */
.wcng-wrap{
    --wc-amber:#B45309;--wc-amber-lt:#D97706;--wc-amber-dk:#78350F;
    --wc-gold:#F59E0B;--wc-gold-lt:#FCD34D;
    --wc-thunder:#B45309;--wc-river:#0369A1;--wc-wind:#6D7E3E;--wc-shadow:#581C87;--wc-sky:#0284C7;
    --wc-ink:#1C1917;--wc-ink2:#292524;--wc-txt:#44403C;--wc-muted:#78716C;--wc-bdr:#D6D3D1;
    --wc-card:#FFFFFF;--wc-bg:#FAFAF9;
    --wc-sh:0 4px 24px rgba(28,25,23,.07);--wc-sh-lg:0 12px 48px rgba(28,25,23,.11);
    --wc-r:14px;--wc-rs:10px;--wc-e:.3s cubic-bezier(.4,0,.2,1);
    max-width:900px;margin:40px auto;padding:0 20px;
    font-family:'Nunito',-apple-system,sans-serif;color:var(--wc-txt);line-height:1.6;-webkit-font-smoothing:antialiased;
}
.wcng-wrap *,.wcng-wrap *::before,.wcng-wrap *::after{box-sizing:border-box;margin:0;padding:0}

.wcng-header{text-align:center;padding:48px 24px 28px}
.wcng-paw{font-size:44px;margin-bottom:8px;animation:wc-bounce 2.5s ease-in-out infinite}
@keyframes wc-bounce{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-8deg)}}
.wcng-title{font-family:'Bitter',serif;font-size:38px;font-weight:800;color:var(--wc-ink);letter-spacing:-.3px;margin-bottom:8px;line-height:1.15}
.wcng-sub{font-size:16px;color:var(--wc-muted);max-width:480px;margin:0 auto}

.wcng-controls{background:var(--wc-card);border:1px solid var(--wc-bdr);border-radius:var(--wc-r);padding:28px;margin-bottom:24px;box-shadow:var(--wc-sh);position:relative;overflow:hidden}
.wcng-controls::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--wc-thunder),var(--wc-river),var(--wc-wind),var(--wc-shadow),var(--wc-sky));opacity:.7}
.wcng-row{display:flex;gap:20px;margin-bottom:16px}.wcng-row:last-child{margin-bottom:0}
.wcng-grp{flex:1;min-width:0}.wcng-full{flex:1 1 100%}
.wcng-lbl{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--wc-muted);margin-bottom:8px}
.wcng-tog{display:flex;gap:6px;flex-wrap:wrap}
.wcng-clan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.wcng-btn{flex:1;min-width:fit-content;padding:9px 14px;border:1.5px solid var(--wc-bdr);border-radius:var(--wc-rs);background:var(--wc-card);color:var(--wc-txt);font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:var(--wc-e);text-align:center;display:flex;align-items:center;justify-content:center;gap:5px}
.wcng-btn:hover{border-color:var(--wc-amber);color:var(--wc-amber)}
.wcng-btn.active{background:linear-gradient(145deg,var(--wc-amber),var(--wc-amber-lt));color:#fff;border-color:var(--wc-amber);box-shadow:0 3px 14px rgba(180,83,9,.25)}

.wcng-gen-wrap{text-align:center;margin-bottom:28px}
.wcng-gen{display:inline-flex;align-items:center;gap:10px;padding:15px 48px;background:linear-gradient(145deg,var(--wc-amber),var(--wc-amber-dk));color:#fff;border:none;border-radius:60px;font-family:'Bitter',serif;font-size:16px;font-weight:700;letter-spacing:.3px;cursor:pointer;transition:var(--wc-e);box-shadow:0 4px 22px rgba(180,83,9,.3)}
.wcng-gen:hover{transform:translateY(-2px);box-shadow:0 8px 34px rgba(180,83,9,.45)}
.wcng-gen:active{transform:translateY(0)}
.wcng-gen-paw{font-size:18px;transition:transform .3s}.wcng-gen:hover .wcng-gen-paw{transform:rotate(-15deg) scale(1.15)}

.wcng-res{display:flex;flex-direction:column;gap:14px;margin-bottom:36px}.wcng-res:empty{margin-bottom:0}

/* Card */
.wcng-card{background:var(--wc-card);border:1px solid var(--wc-bdr);border-radius:var(--wc-r);overflow:hidden;box-shadow:var(--wc-sh);opacity:0;transform:translateY(16px);animation:wc-in .5s ease forwards;transition:border-color .3s,box-shadow .3s}
.wcng-card:hover{box-shadow:var(--wc-sh-lg)}
@keyframes wc-in{to{opacity:1;transform:translateY(0)}}
.wcng-card[data-clan=thunder]:hover{border-color:var(--wc-thunder)}
.wcng-card[data-clan=river]:hover{border-color:var(--wc-river)}
.wcng-card[data-clan=wind]:hover{border-color:var(--wc-wind)}
.wcng-card[data-clan=shadow]:hover{border-color:var(--wc-shadow)}
.wcng-card[data-clan=sky]:hover{border-color:var(--wc-sky)}

.wcng-card-top{display:flex;align-items:stretch}
.wcng-card-left{width:140px;min-width:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 12px;position:relative;overflow:hidden}
.wcng-card-left::before{content:'';position:absolute;width:80px;height:80px;border-radius:50%;top:-20px;right:-20px;background:#fff;opacity:.05}
.wcng-p-thunder{background:linear-gradient(160deg,#78350F,#B45309)}
.wcng-p-river{background:linear-gradient(160deg,#0C4A6E,#0369A1)}
.wcng-p-wind{background:linear-gradient(160deg,#3F4F20,#6D7E3E)}
.wcng-p-shadow{background:linear-gradient(160deg,#3B0764,#581C87)}
.wcng-p-sky{background:linear-gradient(160deg,#075985,#0284C7)}
.wcng-card-emoji{font-size:28px;margin-bottom:4px;position:relative;z-index:1}
.wcng-card-clan{font-family:'Bitter',serif;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.8);position:relative;z-index:1}
.wcng-card-rank{margin-top:6px;padding:2px 10px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:rgba(255,255,255,.15);color:rgba(255,255,255,.85);position:relative;z-index:1}

.wcng-card-right{flex:1;padding:22px 24px;display:flex;flex-direction:column;justify-content:center}
.wcng-cat-name{font-family:'Bitter',serif;font-size:24px;font-weight:800;color:var(--wc-ink);margin-bottom:4px;letter-spacing:.2px}
.wcng-breakdown{font-size:13px;color:var(--wc-muted);margin-bottom:10px}
.wcng-breakdown strong{font-weight:700}
.wcng-breakdown .wcng-pre{color:var(--wc-amber)}
.wcng-breakdown .wcng-suf{color:var(--wc-river)}
.wcng-tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.wcng-tag{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.wcng-tag-prefix{background:rgba(180,83,9,.07);border:1px solid rgba(180,83,9,.12);color:var(--wc-amber)}
.wcng-tag-suffix{background:rgba(3,105,161,.07);border:1px solid rgba(3,105,161,.12);color:var(--wc-river)}
.wcng-tag-trait{background:rgba(109,126,62,.07);border:1px solid rgba(109,126,62,.12);color:var(--wc-wind)}

.wcng-card-acts{display:flex;border-top:1px solid var(--wc-bdr)}
.wcng-act{flex:1;padding:10px;border:none;background:transparent;color:var(--wc-muted);font-family:'Nunito',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:var(--wc-e);display:flex;align-items:center;justify-content:center;gap:5px}
.wcng-act:hover{background:var(--wc-bg);color:var(--wc-amber)}
.wcng-act+.wcng-act{border-left:1px solid var(--wc-bdr)}
.wcng-act svg{width:13px;height:13px}
.wcng-act.wcng-copied{color:#16a34a;background:rgba(22,163,74,.04)}

.wcng-info{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding-top:28px;border-top:1px solid var(--wc-bdr)}
.wcng-info-c{text-align:center;padding:20px 12px;border-radius:var(--wc-r);background:var(--wc-card);border:1px solid var(--wc-bdr);transition:var(--wc-e)}
.wcng-info-c:hover{transform:translateY(-3px);box-shadow:var(--wc-sh)}
.wcng-info-thunder:hover{border-color:var(--wc-thunder)}.wcng-info-river:hover{border-color:var(--wc-river)}.wcng-info-wind:hover{border-color:var(--wc-wind)}.wcng-info-shadow:hover{border-color:var(--wc-shadow)}.wcng-info-sky:hover{border-color:var(--wc-sky)}
.wcng-info-i{font-size:24px;margin-bottom:6px}
.wcng-info-c h4{font-family:'Bitter',serif;font-size:12.5px;font-weight:700;color:var(--wc-ink);margin-bottom:4px}
.wcng-info-c p{font-size:11px;color:var(--wc-muted);line-height:1.4}

@media(max-width:768px){
    .wcng-wrap{margin:20px auto;padding:0 12px}
    .wcng-title{font-size:28px}.wcng-controls{padding:18px}
    .wcng-row{flex-direction:column;gap:14px}
    .wcng-clan-grid{grid-template-columns:repeat(2,1fr)}
    .wcng-card-top{flex-direction:column}
    .wcng-card-left{width:100%;min-width:unset;padding:16px;flex-direction:row;gap:10px}
    .wcng-card-emoji{font-size:22px;margin-bottom:0}
    .wcng-card-rank{margin-top:0}
    .wcng-card-right{padding:16px}
    .wcng-cat-name{font-size:20px}
    .wcng-info{grid-template-columns:repeat(2,1fr)}
    .wcng-gen{padding:13px 36px;font-size:14px}
}
@media(max-width:480px){.wcng-clan-grid{grid-template-columns:1fr 1fr}.wcng-btn{padding:8px 10px;font-size:12px}}