@font-face{font-family:BlackOpsOne;src:url('fonts/BlackOpsOne-Regular.ttf');font-display:swap}
@font-face{font-family:Knewave;src:url('fonts/Knewave-Regular.ttf');font-weight:400;font-display:swap}
/* STRUCTURE: shared geometry, text placement and proportional scaling only. */
@font-face{font-family:Barlow;src:url('assets/BarlowCondensed-Bold.ttf');font-weight:700;font-display:swap}
@font-face{font-family:RoadRage;src:url('assets/RoadRage-Regular.ttf');font-display:swap}
@font-face{font-family:Bangers;src:url('fonts/Bangers-Regular.ttf');font-display:swap}
@font-face{font-family:Bungee;src:url('fonts/Bungee-Regular.ttf');font-display:swap}
@font-face{font-family:FugazOne;src:url('fonts/FugazOne-Regular.ttf');font-weight:400;font-style:normal;font-display:swap}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#151619;color:#eee;font-family:Arial,sans-serif}
.toolbar{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding:20px 24px}.toolbar h1{font-size:20px;margin:0}.toolbar label{font-size:15px}.status{font-size:14px;color:#babdc5;margin:0 24px 20px}
.comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:0 24px 24px;min-width:900px}.comparison-wrap{overflow-x:auto}.card-stage{width:100%;aspect-ratio:5/7;position:relative;overflow:hidden}
.card{width:var(--card-w);height:var(--card-h);padding:var(--perimeter);transform-origin:top left;position:relative;isolation:isolate;font-family:Barlow,sans-serif}
.frame{height:100%;padding:var(--frame-band);position:relative;isolation:isolate}
.interior{display:grid;grid-template-rows:var(--header-h) var(--artwork-h) repeat(2,var(--attack-h)) var(--tagline-h) var(--footer-h);width:var(--inner-w);height:var(--inner-h);position:relative}
[data-region]{position:relative;min-width:0;min-height:0}
/* Header tracks derive from its section height; columns retained for later review. */
.header{--icon-col:var(--header-icon-col);--icon-name-gap:var(--header-icon-name-gap);--hp-col:var(--header-hp-col);--type-row:var(--header-type-row);--name-row:calc(var(--header-h) - var(--header-gap) - var(--type-row));display:grid;grid-template-columns:var(--icon-col) var(--icon-name-gap) minmax(0,1fr) var(--hp-col);grid-template-rows:var(--name-row) var(--type-row) var(--header-gap);isolation:isolate}
.icon{grid-column:1;grid-row:1/3;margin:4px 8px 8px 10px;min-height:0}
.name{grid-column:3;grid-row:1;display:grid;place-items:center;padding:0 10px}
.name-art{width:100%;height:100%;object-fit:contain;min-height:0}
.name-fallback{font:700 80px/1.05 Barlow,sans-serif;text-align:center;text-transform:uppercase;overflow-wrap:normal}
.type{grid-column:3;grid-row:2;display:flex;align-items:center;gap:44px;margin:0 26px;position:relative;top:-3px;font:700 46px/1 Barlow;letter-spacing:.26em;white-space:nowrap}.panel-text{position:relative}
/* Optical alignment for Barlow capitals; preserve the line and layout positions. */
.type > .panel-text{top:-2px}
.type::before,.type::after{content:'';flex:1;min-width:0;height:4px;border-radius:2px}
.hp{grid-column:4;grid-row:1/3;align-self:center;width:var(--header-hp-w);height:var(--header-hp-h);padding:4px}
.hp-text{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;white-space:nowrap}.hp-label{font:700 42px/1 Barlow}.hp-value{font:700 108px/1 Barlow}
.art{margin:var(--section-inset) 0;overflow:hidden;border-radius:14px}.art img{width:100%;height:100%;object-fit:cover;object-position:50% 43%;display:block}
.attack{isolation:isolate;display:grid;grid-template-columns:var(--stars-w) var(--name-gap) minmax(0,1fr) var(--damage-w);grid-template-rows:var(--attack-line-h) calc(2*var(--description-line-h));row-gap:var(--attack-gap);padding:var(--attack-pad-top) var(--attack-pad-x) 0}
.stars{display:flex;align-items:center;gap:var(--star-gap);grid-column:1;grid-row:1}.star{width:var(--star-size);height:var(--star-size);flex:none}
.attack-name{grid-column:3;grid-row:1;font-size:var(--attack-font);line-height:var(--attack-line-h);white-space:nowrap}.damage{grid-column:4;grid-row:1;font-size:var(--damage-font);line-height:var(--attack-line-h);text-align:right}
.description{grid-column:1/5;grid-row:2;margin:0;font:var(--description-font)/var(--description-line-h) Arial,sans-serif}
.tagline{display:flex;align-items:center;justify-content:center;gap:var(--tagline-gap);padding:var(--tagline-pad-y) var(--tagline-pad-x)}
.tagline-text{flex:0 0 auto;position:relative;font:var(--tagline-font)/1 BlackOpsOne;letter-spacing:.02em;white-space:nowrap}
.tagline-rule{flex:1 1 var(--tagline-rule-max);min-width:var(--tagline-rule-min);max-width:var(--tagline-rule-max);height:var(--tagline-rule-height);border-top:var(--tagline-rule-stroke) solid currentColor;border-bottom:var(--tagline-rule-stroke) solid currentColor}

.footer{display:flex;align-items:center;justify-content:space-between;isolation:isolate;padding:var(--section-inset) var(--footer-pad-x) 0;font-size:42px;letter-spacing:.08em;line-height:1;white-space:nowrap;text-transform:uppercase}
/* Debug labels are overlays and never participate in measurement. */
.debug [data-region]{outline:2px solid #f0f;outline-offset:-2px}.debug [data-region]::after{content:attr(data-bounds);position:absolute;left:0;top:0;bottom:auto;height:auto;width:auto;background:#16051ee8;color:#fff;font:22px/1.2 monospace;padding:3px;z-index:10;pointer-events:none;white-space:nowrap}.debug .interior::after{top:auto;bottom:0}.debug .name::after{top:28px}

/* Standalone icon art uses the same contain box on every card. */
.icon-artwork{display:block;width:100%;height:100%;object-fit:contain;object-position:center}

/* Bounded asset profile: enabled only by the explicit header asset specification. */
.card[data-header-profile="bounded"] .icon{margin:var(--header-icon-padding) calc(var(--header-icon-padding) - var(--header-icon-offset-x)) var(--header-icon-padding) calc(var(--header-icon-padding) + var(--header-icon-offset-x))}
.card[data-header-profile="bounded"] .name{padding:var(--header-name-padding-top) var(--header-name-padding-x) 0}
.card[data-header-profile="bounded"] .hp{margin-left:var(--header-hp-clearance)}
.card[data-header-profile="bounded"] .type{margin:0 var(--header-name-padding-x);gap:40px;top:var(--header-type-offset)}
.card[data-header-profile="bounded"] .type > .panel-text{top:var(--header-type-label-offset)}

/* A small shared palette of character-appropriate tagline lettering. */
.card[data-tagline-style="block"] .tagline-text{font-family:Bungee;letter-spacing:.01em}
.card[data-tagline-style="swept"] .tagline-text{font-family:FugazOne;letter-spacing:.01em}
.card[data-tagline-style="comic"] .tagline-text{font-family:Bangers;letter-spacing:.035em}
.card[data-tagline-style="brush"] .tagline-text{font-family:Knewave;letter-spacing:.01em}

/* Burning Ash: use the title canvas's transparent side space; visible art stays inside its bounds. */
.card[data-card="burning-ash"] .name-art{transform:scaleX(1.3);transform-origin:center}

/* Approved tagline font additions, October 2026. */
@font-face{font-family:LilitaOne;src:url('fonts/LilitaOne-Regular.ttf');font-weight:400;font-style:normal;font-display:swap}
.card[data-tagline-style="lilita"] .tagline-text{font-family:LilitaOne;letter-spacing:.01em}
@font-face{font-family:Boogaloo;src:url('fonts/Boogaloo-Regular.ttf');font-weight:400;font-style:normal;font-display:swap}
.card[data-tagline-style="boogaloo"] .tagline-text{font-family:Boogaloo;letter-spacing:.01em}
@font-face{font-family:RussoOne;src:url('fonts/RussoOne-Regular.ttf');font-weight:400;font-style:normal;font-display:swap}
.card[data-tagline-style="russo"] .tagline-text{font-family:RussoOne;letter-spacing:.01em}
@font-face{font-family:Audiowide;src:url('fonts/Audiowide-Regular.ttf');font-weight:400;font-style:normal;font-display:swap}
.card[data-tagline-style="digital"] .tagline-text{font-family:Audiowide;letter-spacing:.01em}
@font-face{font-family:RubikDistressed;src:url('fonts/RubikDistressed-Regular.ttf');font-weight:400;font-style:normal;font-display:swap}
.card[data-tagline-style="distressed"] .tagline-text{font-family:RubikDistressed;letter-spacing:.01em}
@font-face{font-family:RubikWetPaint;src:url('fonts/RubikWetPaint-Regular.ttf');font-weight:400;font-style:normal;font-display:swap}
.card[data-tagline-style="molten"] .tagline-text{font-family:RubikWetPaint;letter-spacing:.01em}
@font-face{font-family:Lacquer;src:url('fonts/Lacquer-Regular.ttf');font-weight:400;font-style:normal;font-display:swap}
.card[data-tagline-style="scratch"] .tagline-text{font-family:Lacquer;letter-spacing:.01em}
@font-face{font-family:MetalMania;src:url('fonts/MetalMania-Regular.ttf');font-weight:400;font-style:normal;font-display:swap}
.card[data-tagline-style="metal"] .tagline-text{font-family:MetalMania;letter-spacing:.01em}

/* Heavier tagline lettering on the six annotated characters. */
.card[data-card="watermelon-viking-duck"] .tagline-text,
.card[data-card="lemon-ninja"] .tagline-text,
.card[data-card="run-to-mommy"] .tagline-text,
.card[data-card="screen-time"] .tagline-text,
.card[data-card="burning-ash"] .tagline-text,
.card[data-card="dory-toe-dude"] .tagline-text{font-weight:700;-webkit-text-stroke:1.4px currentColor;paint-order:stroke fill}

/* Fixed-size printable cards must not receive mobile text inflation. */
.card{-webkit-text-size-adjust:none;text-size-adjust:none}
.card-load-fallback{display:grid;place-content:center;text-align:center;height:100%;padding:24px;border:1px solid #555;background:#24262a;color:#ddd;font:16px/1.5 Arial;margin:0}

/* Fill the wide title slot while keeping its crown and height intact. */
.card[data-card="chunky-monkey"] .name-art{transform:scaleX(1.4);transform-origin:center}

.card[data-card="pain-bot"] .name-art{transform:scale(1.35,1.65);transform-origin:center}

.card[data-card="pain-bot"] .art img{object-position:50% 10%}

.card[data-card="skulleton"] .name-art{transform:scale(1.75,1.6);transform-origin:center}
.card[data-card="skulleton"] .art img{object-position:50% 10%}

.card[data-card="rotten-rosie"] .name-art{transform:scale(1.35,1.2);transform-origin:center}
.card[data-card="rotten-rosie"] .art img{object-position:50% 15%}