/* ===== SHEETS: sheet editor widgets (sections, attrs, skills, vitals, portrait) ===== */

/* Sheet sections */
.sheet-header-section{background:linear-gradient(135deg,rgba(30,17,24,.8),rgba(18,9,14,.9));border:1px solid rgba(139,0,0,.2);border-top:3px solid var(--blood);padding:2rem;margin-bottom:2rem;position:relative;}
.sheet-header-section::before{content:'Character Sheet';position:absolute;top:-.6rem;left:50%;transform:translateX(-50%);background:var(--void);padding:0 1rem;font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--blood-bright);}
.sheet-field{margin-bottom:.8rem;}
.sheet-field-label{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--silver);display:block;margin-bottom:.3rem;}
.sheet-field-input{width:100%;background:rgba(0,0,0,.3);border:none;border-bottom:1px solid rgba(139,0,0,.3);color:var(--bone);font-family:'EB Garamond',serif;font-size:1rem;padding:.3rem .5rem;outline:none;transition:border-color .3s;}
.sheet-field-input:focus{border-bottom-color:var(--blood);}
.sheet-field-input::placeholder{color:rgba(168,152,128,.25);}
select.sheet-field-input{cursor:pointer;-webkit-appearance:none;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='rgba(168,152,128,.5)'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;background-color:rgba(0,0,0,.3);}
select.sheet-field-input option{background:var(--shadow);}
.sheet-section{background:linear-gradient(135deg,rgba(30,17,24,.8),rgba(18,9,14,.9));border:1px solid rgba(139,0,0,.2);padding:1.8rem;margin-bottom:1.5rem;overflow:hidden;}
.sheet-section-title{font-family:'Cinzel',serif;font-size:.65rem;letter-spacing:.5em;text-transform:uppercase;color:var(--blood-bright);text-align:center;margin-bottom:1.5rem;position:relative;}
.sheet-section-title::before,.sheet-section-title::after{content:'';position:absolute;top:50%;width:30%;height:1px;}
.sheet-section-title::before{right:calc(50% + 6em);background:linear-gradient(270deg,transparent,rgba(139,0,0,.4));}
.sheet-section-title::after{left:calc(50% + 6em);background:linear-gradient(90deg,transparent,rgba(139,0,0,.4));}

/* Attribute column titles */
.attr-col-title{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--silver);text-align:center;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid rgba(139,0,0,.2);}

/* Attribute rows and specialties */
.attr-row{display:flex;flex-direction:column;margin-bottom:.5rem;min-width:0;overflow:hidden;}
.attr-row-top{display:flex;align-items:center;justify-content:space-between;gap:.25rem;min-width:0;overflow:hidden;}
.attr-name{font-size:.85rem;color:var(--pale);white-space:normal;line-height:1.25;flex:1 1 0;min-width:0;}
.stat-block{margin-bottom:.1rem;}
.spec-input{width:100%;background:none;border:none;border-bottom:1px solid transparent;color:rgba(168,152,128,.4);font-family:'EB Garamond',serif;font-size:.72rem;font-style:italic;padding:0 .1rem;outline:none;transition:all .25s;text-align:right;overflow:hidden;text-overflow:ellipsis;}
.spec-input::placeholder{color:rgba(168,152,128,.2);font-style:italic;}
.spec-input:focus{color:var(--silver);border-bottom-color:rgba(139,0,0,.2);}
.spec-input:not(:placeholder-shown){color:rgba(168,152,128,.65);}

/* Stat tooltip */
#stat-tooltip{position:fixed;z-index:500;max-width:260px;background:linear-gradient(135deg,rgba(18,9,14,.98),rgba(30,17,24,.97));border:1px solid rgba(139,0,0,.35);border-top:2px solid var(--blood-bright);padding:.7rem .9rem;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;box-shadow:0 8px 24px rgba(0,0,0,.7);}
#stat-tooltip.visible{opacity:1;transform:translateY(0);}
.tooltip-name{font-family:'Cinzel',serif;font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--bone);margin-bottom:.4rem;}
.tooltip-body{font-size:.78rem;color:var(--silver);line-height:1.5;}
.tooltip-spec{font-size:.72rem;color:var(--gold);margin-top:.4rem;font-style:italic;opacity:.8;}

/* Attribute dots */
.attr-dot.ghost{background:linear-gradient(90deg,currentColor 50%,transparent 50%);opacity:.35;border-style:solid;}
.attr-dot.ghost:hover{transform:scale(1.2);opacity:.55;}
.attr-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(139,0,0,.4);background:transparent;cursor:pointer;transition:all .2s;flex-shrink:0;}
.attr-dots{display:flex;gap:3px;align-items:center;}
.attr-dot.filled{background:var(--blood-bright);border-color:var(--blood-bright);box-shadow:0 0 5px rgba(192,57,43,.5);}
.attr-dot:hover{border-color:var(--blood);transform:scale(1.2);}

/* Skill rows */
.skill-row{display:flex;flex-direction:column;margin-bottom:.5rem;min-width:0;overflow:hidden;}
.skill-name{font-size:.82rem;color:var(--pale);white-space:normal;line-height:1.25;flex:1 1 0;min-width:0;}

/* Custom editable rows */
.custom-name-input{flex:1 1 0;min-width:0;max-width:100%;background:rgba(0,0,0,.2);border:none;border-bottom:1px solid rgba(139,0,0,.2);color:var(--bone);font-family:'EB Garamond',serif;font-size:.85rem;padding:.15rem .3rem;outline:none;overflow:hidden;text-overflow:ellipsis;}
.custom-name-input:focus{border-bottom-color:var(--blood);}
.custom-name-input::placeholder{color:rgba(168,152,128,.3);}
.btn-remove-custom{background:none;border:none;color:rgba(248,113,113,.4);cursor:pointer;font-size:.8rem;line-height:1;padding:0 .2rem;flex-shrink:0;transition:color .2s;}
.btn-remove-custom:hover{color:#f87171;}
.add-custom-row{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;cursor:pointer;opacity:.45;transition:opacity .2s;}
.add-custom-row:hover{opacity:.85;}
.add-custom-row-icon{font-size:.8rem;color:var(--silver);}
.add-custom-row-label{font-family:'Cinzel',serif;font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--silver);}

/* Disciplines */
.discipline-row{display:flex;align-items:center;gap:.8rem;}
.discipline-name-input{flex:1;background:rgba(0,0,0,.2);border:none;border-bottom:1px solid rgba(139,0,0,.2);color:var(--bone);font-family:'EB Garamond',serif;font-size:.9rem;padding:.2rem .4rem;outline:none;}
.discipline-name-input:focus{border-bottom-color:var(--blood);}
.discipline-name-input::placeholder{color:rgba(168,152,128,.25);}

/* Vital labels and tracks */
.vital-label{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--silver);margin-bottom:.8rem;}
.vital-track{display:flex;gap:6px;flex-wrap:wrap;}

/* Health / Willpower / Rage / Gnosis boxes */
.health-box{width:24px;height:24px;border:1px solid rgba(139,0,0,.4);cursor:pointer;transition:all .2s;position:relative;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:transparent;}
.health-box:hover{border-color:var(--blood);}
.health-box.bashing{background:rgba(255,165,0,.2);border-color:orange;color:orange;}
.health-box.lethal{background:rgba(139,0,0,.3);border-color:var(--blood-bright);color:var(--blood-bright);}
.health-box.aggravated{background:rgba(80,0,0,.5);border-color:#600;}
.health-box.aggravated::before,.health-box.aggravated::after{content:'';position:absolute;background:#aa0000;width:70%;height:1.5px;border-radius:1px;}
.health-box.aggravated::before{transform:rotate(45deg);}
.health-box.aggravated::after{transform:rotate(-45deg);}
.wp-box{width:20px;height:20px;border-radius:50%;border:1px solid rgba(139,0,0,.4);cursor:pointer;transition:all .2s;}
.wp-box:hover{border-color:var(--blood);}
.wp-box.filled{background:var(--blood-bright);border-color:var(--blood-bright);box-shadow:0 0 5px rgba(192,57,43,.4);}

/* Rage/Gnosis squares */
.rage-box{width:20px;height:20px;border:1px solid rgba(220,38,38,.35);cursor:pointer;transition:all .2s;flex-shrink:0;}
.rage-box:hover{border-color:var(--rage);transform:scale(1.1);}
.rage-box.filled{background:var(--rage-bright);border-color:var(--rage);box-shadow:0 0 5px rgba(220,38,38,.4);}
.gnosis-box{width:20px;height:20px;border:1px solid rgba(14,165,233,.3);border-radius:50%;cursor:pointer;transition:all .2s;flex-shrink:0;}
.gnosis-box:hover{border-color:var(--gnosis);transform:scale(1.1);}
.gnosis-box.filled{background:var(--gnosis-bright);border-color:var(--gnosis);box-shadow:0 0 5px rgba(14,165,233,.4);}

/* Renown pips — triangles via border trick */
.renown-pip{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid rgba(100,100,100,.3);cursor:pointer;transition:all .2s;flex-shrink:0;}
.renown-pip:hover{border-bottom-color:rgba(200,200,200,.5);}
.renown-pip.glory{border-bottom-color:var(--renown-glory);}
.renown-pip.honor{border-bottom-color:var(--renown-honor);}
.renown-pip.wisdom{border-bottom-color:var(--renown-wisdom);}

/* Glam/Ban diamonds */
.glam-box{width:18px;height:18px;border:1px solid rgba(107,33,168,.45);transform:rotate(45deg);cursor:pointer;transition:all .2s;flex-shrink:0;}
.glam-box:hover{border-color:var(--glamour);transform:rotate(45deg) scale(1.15);}
.glam-box.filled{background:var(--glamour-bright);border-color:var(--glamour-bright);box-shadow:0 0 6px rgba(168,85,247,.5);}
.glam-box.spent{background:rgba(107,33,168,.15);border-color:rgba(107,33,168,.45);}
.ban-box{width:18px;height:18px;border:1px solid rgba(100,116,139,.45);transform:rotate(45deg);cursor:pointer;transition:all .2s;flex-shrink:0;}
.ban-box:hover{border-color:#94a3b8;transform:rotate(45deg) scale(1.15);}
.ban-box.filled{background:#64748b;border-color:#94a3b8;}
.nightmare-box{width:18px;height:18px;border:1px solid rgba(239,68,68,.35);transform:rotate(45deg);cursor:pointer;transition:all .2s;flex-shrink:0;}
.nightmare-box.filled{background:#ef4444;border-color:#ef4444;box-shadow:0 0 5px rgba(239,68,68,.4);}

/* Sheet textareas */
.sheet-textarea{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(139,0,0,.2);color:var(--bone);font-family:'EB Garamond',serif;font-size:.95rem;padding:.8rem;outline:none;resize:vertical;min-height:80px;transition:border-color .3s;line-height:1.6;}
.sheet-textarea:focus{border-color:rgba(139,0,0,.5);}
.sheet-textarea::placeholder{color:rgba(168,152,128,.25);}

/* Mage pool boxes */
.arete-box{width:20px;height:20px;border-radius:50%;border:1px solid rgba(232,121,249,.4);cursor:pointer;transition:all .2s;flex-shrink:0;}
.arete-box:hover{border-color:var(--arete);transform:scale(1.1);}
.arete-box.filled{background:var(--arete);border-color:var(--arete);box-shadow:0 0 6px rgba(232,121,249,.5);}
.paradox-box{width:18px;height:18px;border:1px solid rgba(249,115,22,.35);transform:rotate(45deg);cursor:pointer;transition:all .2s;flex-shrink:0;}
.paradox-box:hover{border-color:var(--paradox);transform:rotate(45deg) scale(1.15);}
.paradox-box.filled{background:var(--paradox);border-color:var(--paradox);box-shadow:0 0 5px rgba(249,115,22,.5);}
.quint-box{width:20px;height:20px;border-radius:50%;border:1px solid rgba(52,211,153,.35);cursor:pointer;transition:all .2s;flex-shrink:0;}
.quint-box:hover{border-color:var(--quint);transform:scale(1.1);}
.quint-box.filled{background:var(--quint);border-color:var(--quint);box-shadow:0 0 5px rgba(52,211,153,.5);}

/* Renown row (werewolf sheet) */
.renown-row{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem;}
.renown-label{font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;min-width:70px;}
.renown-label.glory{color:var(--renown-glory);}
.renown-label.honor{color:var(--renown-honor);}
.renown-label.wisdom{color:var(--renown-wisdom);}
.renown-pips{display:flex;gap:4px;flex-wrap:wrap;align-items:center;}

/* Health legend */
.health-legend{display:flex;gap:1rem;margin-top:.8rem;font-size:.72rem;color:var(--silver);flex-wrap:wrap;}
.health-legend span{display:flex;align-items:center;gap:.3rem;}
.legend-box{width:12px;height:12px;border:1px solid;flex-shrink:0;}
.legend-box.b{border-color:orange;background:rgba(255,165,0,.2);}
.legend-box.l{border-color:var(--blood-bright);background:rgba(139,0,0,.3);}
.legend-box.a{border-color:#600;background:rgba(80,0,0,.5);}
.health-hint{font-size:.68rem;color:var(--silver);opacity:.6;margin-top:.4rem;}

/* Conviction / Virtue pool boxes (hunter) */
.conviction-box{width:22px;height:22px;border-radius:50%;border:1px solid rgba(251,146,60,.35);cursor:pointer;transition:all .2s;flex-shrink:0;}
.conviction-box:hover{border-color:var(--conviction);transform:scale(1.1);}
.conviction-box.filled{background:var(--conviction);border-color:var(--conviction);box-shadow:0 0 5px rgba(251,146,60,.5);}
.virtue-box{width:22px;height:22px;border-radius:3px;border:1px solid rgba(163,230,53,.3);cursor:pointer;transition:all .2s;flex-shrink:0;}
.virtue-box:hover{border-color:var(--virtue);transform:scale(1.1);}
.virtue-box.filled{background:var(--virtue);border-color:var(--virtue);box-shadow:0 0 5px rgba(163,230,53,.45);}

/* ===== GALLERY & PORTRAIT (sheet editor) ===== */
.portrait-panel{display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.portrait-frame{width:160px;height:200px;border:2px solid rgba(139,0,0,.3);background:rgba(0,0,0,.35);overflow:hidden;position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .3s;}
.portrait-frame:hover:not(.no-hover){border-color:rgba(139,0,0,.65);}
.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.portrait-placeholder{font-size:3rem;opacity:.15;user-select:none;}
.portrait-frame-hint{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);color:var(--silver);font-family:'Cinzel',serif;font-size:.48rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:.3rem 0;opacity:0;transition:opacity .2s;}
.portrait-frame:hover:not(.no-hover) .portrait-frame-hint{opacity:1;}
.gallery-strip{width:160px;display:flex;flex-direction:column;gap:.35rem;}
.gallery-strip-row{display:flex;gap:4px;flex-wrap:wrap;}
.gallery-thumb-sm{width:46px;height:46px;object-fit:cover;object-position:center top;cursor:pointer;border:2px solid transparent;transition:all .2s;opacity:.65;}
.gallery-thumb-sm:hover{opacity:1;border-color:rgba(168,152,128,.5);}
.gallery-thumb-sm.active-portrait{border-color:var(--gold);opacity:1;box-shadow:0 0 5px rgba(201,168,76,.35);}
.gallery-add-btn{width:46px;height:46px;border:1px dashed rgba(139,0,0,.3);background:rgba(0,0,0,.15);cursor:pointer;color:rgba(168,152,128,.5);font-size:1.1rem;transition:all .2s;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.gallery-add-btn:hover{border-color:var(--blood);color:var(--pale);background:rgba(139,0,0,.07);}
#gallery-file-input{display:none;}
.gallery-strip-status{font-size:.62rem;color:var(--silver);opacity:.6;text-align:center;}
.portrait-toggle-row{width:160px;display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.55rem;color:var(--silver);opacity:.7;cursor:pointer;letter-spacing:.1em;text-transform:uppercase;font-family:'Cinzel',serif;text-align:center;}
.portrait-toggle-row input{margin:0;cursor:pointer;flex-shrink:0;}
.portrait-toggle-row:hover{opacity:1;}
body.readonly .portrait-toggle-row{display:none;}