/* ---------------------------------------------------------------------------
Stat Block — D&D-style monster stat block
Supports both 2024 and 2014 edition formats
--------------------------------------------------------------------------- */
.stat-block{
background:var(--color-stat-bg) var(--stat-bg-image,url('bg-stat.png'));
background-blend-mode:multiply;
background-size:cover;
border:1px solid var(--color-border);
border-top:3px solid var(--color-primary);
border-bottom:3px solid var(--color-primary);
padding:12px 14px;
font-family:var(--font-body);
font-size:0.88rem;
line-height:1.45;
color:var(--color-text);
}

.stat-block--2024,
.stat-block--2014{
max-width:900px;
}

.stat-block__columns--auto{
column-count:2;
column-gap:20px;
column-fill:balance;
}

.stat-block__columns--auto .stat-block__section-heading{
break-after:avoid;
}

.stat-block__columns--auto p,
.stat-block__columns--auto .stat-block__attr-line,
.stat-block__columns--auto .stat-block__attrs,
.stat-block__columns--auto .stat-block__scores,
.stat-block__columns--auto .stat-block__tidbits{
break-inside:avoid;
}

.stat-block--single-col{
max-width:440px;
}

.stat-block--single-col .stat-block__columns--auto{
column-count:1;
}

.stat-block__image{
width:100%;
overflow:hidden;
border-radius:4px;
box-sizing:border-box;
margin:6px 0;
break-inside:avoid;
position:relative;
cursor:ns-resize;
user-select:none;
}

.stat-block__image:active{
cursor:grabbing;
}

.stat-block__image--empty{
border:2px dashed var(--color-border);
min-height:60px;
}

/* Image is rendered via background-image (html2canvas supports this,
but does NOT support object-fit:cover on <img> tags) */
.stat-block__image-handle{
position:absolute;
width:10px;
height:10px;
background:var(--color-secondary);
border-radius:50%;
z-index:2;
opacity:0;
transition:opacity 0.15s;
}

.stat-block__image:hover .stat-block__image-handle,
.stat-block__image--resizing .stat-block__image-handle{
opacity:1;
}

.stat-block__image-handle--tl{top:-4px;left:-4px;cursor:nwse-resize;}

.stat-block__image-handle--tr{top:-4px;right:-4px;cursor:nesw-resize;}

.stat-block__image-handle--bl{bottom:-4px;left:-4px;cursor:nesw-resize;}

.stat-block__image-handle--br{bottom:-4px;right:-4px;cursor:nwse-resize;}

.stat-block__image-handle--center{
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:14px;
height:14px;
cursor:move;
background:var(--color-secondary);
border:2px solid var(--color-on-primary,#fff);
}

.stat-block__image:hover{
outline:2px solid var(--color-secondary);
outline-offset:-1px;
}

.stat-block__image-cors-warn{
position:absolute;
top:6px;
right:6px;
width:22px;
height:22px;
line-height:22px;
text-align:center;
font-size:14px;
background:rgba(0,0,0,0.6);
color:#f0ad4e;
border-radius:50%;
cursor:help;
z-index:3;
opacity:0.8;
transition:opacity 0.15s;
}

.stat-block__image-cors-warn:hover{
opacity:1;
}

.stat-block__header{
padding-bottom:4px;
margin-bottom:4px;
}

.stat-block--2024 .stat-block__header{
border-bottom:2px solid var(--color-primary);
}

.stat-block__name{
font-size:1.8em;
font-weight:700;
color:var(--color-primary);
margin:0;
line-height:1.15;
font-variant:small-caps;
letter-spacing:0.02em;
}

.stat-block__meta{
font-style:italic;
font-size:0.78rem;
color:var(--color-text);
margin-top:1px;
}

.stat-block__separator{
height:2px;
margin:6px 0;
background:linear-gradient(
to right,
var(--color-primary),
var(--color-secondary),
var(--color-primary)
);
border:none;
break-inside:avoid;
}

.stat-block__attrs{
margin:2px 0;
break-inside:avoid;
}

.stat-block__attr-line{
margin:1px 0;
font-size:0.84rem;
}

.stat-block__attr-label{
font-weight:700;
color:var(--color-primary);
margin-right:3px;
}

.stat-block__attr-note{
color:var(--color-muted);
font-size:0.82rem;
}

.stat-block__scores{
display:flex;
gap:8px;
margin:6px 0;
break-inside:avoid;
}

.score-table{
border-collapse:collapse;
table-layout:fixed;
flex:1;
min-width:0;
width:0;
font-size:0.7em;
}

.score-table--2024{
border-collapse:separate;
border-spacing:0 1px;
}

.score-table thead th{
font-weight:400;
color:var(--color-text);
font-size:0.85em;
text-transform:uppercase;
padding:0 1px;
text-align:center;
overflow:hidden;
}

.score-table tbody th{
font-weight:700;
color:var(--color-on-primary);
background:var(--color-primary);
padding:1px 2px;
text-align:left;
font-size:0.9em;
overflow:hidden;
}

.score-table tbody td{
color:var(--color-text);
padding:1px 1px;
text-align:center;
border:1px solid var(--color-primary);
overflow:hidden;
}

.score-table--2024 tbody td{
border:none;
}

.score-table--2024 tbody th{
background:var(--color-ability-bg,var(--color-primary));
color:var(--color-text);
font-weight:700;
padding-left:6px;
}

.score-table--2024 tbody td:nth-child(2){
background:var(--color-ability-bg,var(--color-primary));
color:var(--color-text);
}

.score-table--2024 tbody td:nth-child(3),
.score-table--2024 tbody td:nth-child(4){
background:var(--color-ability-mod-bg);
}

.score-table .save-proficient{
font-weight:700;
}

.score-table--2014{
width:100%;
font-size:0.85em;
}

.score-table--2014 thead th{
font-weight:700;
color:var(--color-primary);
border-bottom:1px solid var(--color-border);
padding:1px 1px;
white-space:nowrap;
font-size:1em;
text-align:center;
}

.score-table--2014 tbody td{
border:none;
padding:1px 1px;
white-space:nowrap;
font-size:1em;
font-weight:700;
text-align:center;
}

.stat-block__tidbits{
margin:4px 0;
break-inside:avoid;
}

.stat-block__tidbit{
margin:1px 0;
font-size:0.82rem;
}

.stat-block__tidbit-label{
font-weight:700;
color:var(--color-primary);
}

.stat-block__section{
margin-bottom:10px;
}

.stat-block__section-heading{
font-size:1.15em;
font-weight:700;
color:var(--color-primary);
border-bottom:1px solid var(--color-primary);
margin-bottom:6px;
padding-bottom:1px;
}

.stat-block--2024 .stat-block__section-heading{
font-variant:small-caps;
letter-spacing:0.04em;
}

.stat-block__section p{
margin:6px 0;
text-indent:0;
font-size:0.84rem;
}

.stat-block__section p strong em{
font-style:italic;
font-weight:700;
}

.editable-value{
cursor:text;
border-bottom:1px dashed transparent;
padding:0 1px;
border-radius:2px;
transition:border-color 0.15s,background-color 0.15s;
outline:none;
min-width:1.2em;
display:inline-block;
}

.editable-value:hover{
border-bottom-color:var(--color-secondary);
}

.editable-value:focus{
background:rgba(190,91,32,0.1);
border-bottom-color:var(--color-secondary);
}

@keyframes value-flash{
0%{background-color:rgba(190,91,32,0.35);}

100%{background-color:transparent;}

}

.value-changed{
animation:value-flash 0.8s ease-out;
}

.preview-resizer{
position:relative;
max-width:100%;
}

.preview-resizer__handle{
position:absolute;
top:0;
right:-6px;
width:12px;
height:100%;
cursor:ew-resize;
z-index:5;
}

.preview-resizer__handle::before{
content:'';
position:absolute;
top:0;
left:0px;
width:4px;
height:100%;
background:var(--color-secondary);
border-radius:2px;
}

.preview-resizer__handle::after{
content:'⋮⋮';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:14px;
letter-spacing:-3px;
color:var(--color-secondary);
line-height:1;
text-shadow:0 0 2px var(--color-background);
}

.preview-resizer:hover .preview-resizer__handle{
opacity:1;
}

.preview-resizer--resizing .preview-resizer__handle{
opacity:1;
}

#stat-block-container{
position:relative;
}

.review-overlay{
position:absolute;
top:0;
left:0;
width:0;
height:0;
pointer-events:none;
}

.review-marker{
position:absolute;
width:20px;
height:20px;
color:var(--color-secondary,#be5b20);
cursor:help;
pointer-events:auto;
filter:drop-shadow(0 1px 2px rgba(0,0,0,0.3));
transition:transform 0.15s ease,filter 0.15s ease;
}

.review-marker:hover{
transform:scale(1.2);
filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.review-marker svg{
width:100%;
height:100%;
}

@media (max-width:600px){
.stat-block__columns--auto{
column-count:1;
}

.stat-block--2024,
.stat-block--2014{
max-width:100%;
}

}