/* CSS Cog: attributes.css */
.attr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1em;margin:1em 0;}
.attr-box{background:var(--bg-darkest);border:1px solid var(--border-thin);border-radius:var(--radius-md);padding:1em;text-align:center;}
.attr-box .attr-name{font-family:var(--font-display);font-size:0.8em;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);margin-bottom:0.3em;}
.attr-box .attr-die{font-family:var(--font-code);font-size:1.6em;color:var(--accent-cyan);font-weight:700;}
.attr-box .attr-die.clickable{cursor:pointer;transition:color 0.15s;}.attr-box .attr-die.clickable:hover{color:var(--accent-amber);}
.attr-box .attr-die.debuffed{color:var(--accent-red);}
.attr-box select{margin-top:0.5em;background:var(--bg-light);color:var(--text-primary);border:1px solid var(--border-thin);border-radius:4px;padding:0.3em;font-family:var(--font-code);text-align:center;width:100%;}
.attr-status-badge{font-size:0.65em;color:#a3be8c;background:rgba(107,142,35,0.2);border:1px solid rgba(107,142,35,0.4);border-radius:12px;padding:0.1em 0.5em;margin-top:0.3em;display:inline-block;}

/* Status effects */
.status-tags{display:flex;flex-wrap:wrap;gap:0.4em;margin-top:0.75em;padding-top:0.5em;border-top:1px solid var(--border-thin);}
.status-tag{display:inline-flex;align-items:center;gap:0.3em;background:rgba(107,142,35,0.15);border:1px solid rgba(107,142,35,0.4);border-radius:16px;padding:0.2em 0.6em;font-size:0.75em;color:#a3be8c;font-family:var(--font-display);letter-spacing:0.05em;}
.status-tag.status-custom{background:rgba(88,101,242,0.15);border-color:rgba(88,101,242,0.4);color:var(--accent-blue);}
.status-x{cursor:pointer;font-size:1.1em;line-height:1;margin-left:0.2em;color:inherit;opacity:0.6;}.status-x:hover{opacity:1;color:var(--accent-red);}

/* Inflict button */
.btn-inflict{display:inline-flex;align-items:center;gap:0.3em;padding:0.25em 0.6em;border-radius:var(--radius-sm);background:rgba(107,142,35,0.2);border:1px solid rgba(107,142,35,0.5);color:#a3be8c;font-family:var(--font-display);font-size:0.65em;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:all 0.15s;float:right;margin-left:0.3em;}
.btn-inflict:hover{background:rgba(107,142,35,0.35);color:#c3d89c;}
.btn-inflict-plus{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(107,142,35,0.2);border:1px solid rgba(107,142,35,0.5);color:#a3be8c;font-size:0.75em;font-weight:700;cursor:pointer;transition:all 0.15s;float:right;margin-left:0.3em;}
.btn-inflict-plus:hover{background:rgba(107,142,35,0.35);color:#c3d89c;}

/* IP restore button */
.btn-ip-restore{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(88,101,242,0.15);border:1px solid rgba(88,101,242,0.3);color:var(--accent-blue);font-size:0.6em;cursor:pointer;transition:all 0.15s;margin-left:0.4em;padding:0;}
.btn-ip-restore:hover{background:rgba(88,101,242,0.3);color:var(--accent-cyan);}

.status-tag.status-boost{background:rgba(88,166,242,0.15);border-color:rgba(88,166,242,0.35);color:#88a6f2;}
.attr-box .attr-die.boosted{color:#88a6f2;}