:root{
  --paper:#f4f0e6;
  --paper-2:#ebe5d7;
  --ink:#090909;
  --ink-soft:#2a2a2a;
  --muted:#6b675f;
  --white:#fffdf7;
  --line:#090909;
  --accent:#090909;
  --gold:#d6a916;
  --shadow:7px 7px 0 #090909;
  --shadow-small:4px 4px 0 #090909;
  font-family:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:light}
body{
  margin:0;min-width:320px;min-height:100vh;color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%,rgba(0,0,0,.055) 0 1px,transparent 1.2px),
    radial-gradient(circle at 80% 60%,rgba(0,0,0,.035) 0 1px,transparent 1.1px),
    linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,.24));
  background-size:5px 5px,7px 7px,100% 100%;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.22;mix-blend-mode:multiply;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 1px,transparent 1px 3px);
}
button,select{font:inherit}
button,a{ -webkit-tap-highlight-color:transparent }
.creator-shell{width:min(1560px,100%);margin:auto;padding:clamp(18px,3vw,42px)}

.creator-header,.machine-topline,.sheet-heading,.progress-copy,.attribute-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.creator-header{position:relative;margin-bottom:22px;padding:18px 20px 16px;border:4px solid var(--ink);background:var(--white);box-shadow:var(--shadow);transform:rotate(-.25deg)}
.creator-header::after{content:"ISSUE 01";position:absolute;right:22px;bottom:-12px;padding:3px 9px;border:3px solid var(--ink);background:var(--ink);color:var(--white);font:900 .68rem/1 "Courier New",monospace;letter-spacing:.12em;transform:rotate(2deg)}
.creator-header h1{margin:1px 0 0;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(2.25rem,5vw,4.7rem);font-weight:900;line-height:.88;letter-spacing:.015em;text-transform:uppercase}
.eyebrow,.machine-kicker{margin:0;color:var(--ink);font:900 .72rem/1.1 "Courier New",monospace;letter-spacing:.16em;text-transform:uppercase}
.header-actions{display:flex;gap:10px;align-items:center}
.atlas-link,.danger-button,.secondary-button,.primary-button{border:3px solid var(--ink);border-radius:0;padding:.72rem 1rem;text-decoration:none;color:var(--ink);background:var(--white);font-weight:900;text-transform:uppercase;letter-spacing:.035em;cursor:pointer;box-shadow:var(--shadow-small);transition:transform .1s ease,box-shadow .1s ease,background .1s ease,color .1s ease}
.atlas-link:hover,.danger-button:hover,.secondary-button:hover{background:var(--ink);color:var(--white);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.danger-button{background:repeating-linear-gradient(-45deg,var(--white) 0 7px,#e2ddd2 7px 9px)}

.progress-card,.machine-card,.sheet-card{border:4px solid var(--ink);border-radius:0;background:rgba(255,253,247,.92);box-shadow:var(--shadow)}
.progress-card{position:relative;padding:13px 17px;margin-bottom:20px;overflow:hidden;transform:rotate(.12deg)}
.progress-card::before{content:"PROGRESS";position:absolute;right:-30px;top:-4px;width:150px;padding:4px 0;background:var(--ink);color:var(--white);font:900 .63rem/1 "Courier New",monospace;text-align:center;letter-spacing:.15em;transform:rotate(17deg)}
.progress-copy strong{font-weight:1000;text-transform:uppercase;letter-spacing:.025em}.progress-copy span{color:var(--muted);font-weight:800;font-size:.82rem}
.progress-track{height:12px;margin-top:10px;border:3px solid var(--ink);border-radius:0;background:var(--white);overflow:hidden}
.progress-fill{width:0;height:100%;background:repeating-linear-gradient(135deg,var(--ink) 0 7px,#555 7px 10px);transition:width .25s ease}

.machine-card{position:relative;padding:clamp(18px,2.2vw,28px);overflow:hidden}
.machine-card::before{content:"";position:absolute;right:-70px;top:-70px;width:290px;height:290px;opacity:.065;background:repeating-radial-gradient(circle,var(--ink) 0 2px,transparent 2px 8px);pointer-events:none}
.machine-topline{position:relative;z-index:1;align-items:flex-start;padding-bottom:14px;border-bottom:4px solid var(--ink)}
.machine-topline h2,.sheet-heading h2{margin:.15rem 0 0;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(1.8rem,3vw,2.8rem);line-height:.95;text-transform:uppercase;letter-spacing:.02em}
.attribute-hint{margin:.45rem 0 0;color:var(--ink-soft);max-width:760px;font-weight:700;line-height:1.35}
.power-bar{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.power-button{display:flex;align-items:center;gap:9px;border:3px solid var(--ink);border-radius:0;padding:.66rem .76rem;background:var(--white);color:var(--ink);font-weight:900;text-transform:uppercase;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .1s ease,box-shadow .1s ease,background .1s ease,color .1s ease}
.power-button strong{display:grid;place-items:center;min-width:28px;height:28px;border:3px solid var(--ink);border-radius:50%;background:var(--ink);color:var(--white)}
.power-button:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.power-button.special{background:repeating-linear-gradient(-45deg,var(--white) 0 7px,#ddd8cd 7px 9px)}
.power-button.active{background:var(--ink);color:var(--white);outline:4px double var(--ink);outline-offset:4px}
.power-button.active strong{background:var(--white);color:var(--ink);border-color:var(--white)}
.power-button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}

.slot-machine{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(220px,280px));justify-content:center;gap:clamp(18px,3vw,38px);margin-top:25px;padding:14px 0}
.slot-machine::before,.slot-machine::after{content:"";position:absolute;left:-28px;right:-28px;height:22px;z-index:-1;opacity:.12;background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 11px);transform:skewY(-2deg)}
.slot-machine::before{top:2px}.slot-machine::after{bottom:0;transform:skewY(2deg)}
.slot{position:relative;min-width:0;min-height:248px;padding:0;border:4px solid var(--ink);border-radius:0;overflow:visible;background:var(--white);color:var(--ink);cursor:pointer;text-align:left;box-shadow:var(--shadow-small);transition:transform .1s ease,box-shadow .1s ease}
.slot:nth-child(odd){transform:rotate(-.45deg)}.slot:nth-child(even){transform:rotate(.45deg)}
.slot::before{content:attr(data-slot);position:absolute;z-index:3;left:-9px;top:-11px;display:grid;place-items:center;width:29px;height:29px;border:3px solid var(--ink);border-radius:50%;background:var(--ink);color:var(--white);font:900 .75rem/1 "Courier New",monospace}
.slot:hover:not(:disabled){transform:translate(-3px,-5px) rotate(0deg);box-shadow:8px 9px 0 var(--ink)}
.slot.spinning{animation:slotPulse .16s steps(2,end) infinite}
.portrait-wrap{height:164px;display:grid;place-items:center;border-bottom:4px solid var(--ink);background:repeating-radial-gradient(circle at 50% 45%,#fff 0 3px,#dedbd3 3px 4px,#fff 4px 9px);overflow:hidden;filter:grayscale(70%) contrast(1.12)}
.portrait-wrap::after{content:"";position:absolute;inset:0 0 auto 0;height:164px;pointer-events:none;background:linear-gradient(115deg,transparent 48%,rgba(255,255,255,.22) 50%,transparent 52%)}
.portrait-wrap img{width:100%;height:100%;object-fit:cover}.portrait-fallback{font-family:Impact,"Arial Black",sans-serif;font-size:4.5rem;font-weight:1000;color:#222}.portrait-wrap img+.portrait-fallback{display:none}
.slot-copy{position:relative;padding:13px 12px 14px;background:var(--white)}.slot-copy::before{content:"";position:absolute;inset:0;opacity:.035;background:repeating-linear-gradient(-45deg,var(--ink) 0 1px,transparent 1px 5px);pointer-events:none}.slot-copy strong,.slot-copy span{position:relative;display:block}.slot-copy strong{font-size:1.05rem;font-weight:1000;line-height:1.1;text-transform:uppercase}.slot-copy span{margin-top:5px;color:var(--muted);font:700 .72rem/1.2 "Courier New",monospace}
.machine-message{position:relative;z-index:1;min-height:1.4em;margin:15px auto 0;width:fit-content;max-width:100%;padding:6px 12px;border:2px solid var(--ink);background:var(--white);color:var(--ink);text-align:center;font:800 .82rem/1.35 "Courier New",monospace;transform:rotate(-.2deg)}
@keyframes slotPulse{0%{filter:contrast(1)}50%{filter:contrast(1.9) invert(.08);transform:translateY(3px)}}

.sheet-card{position:relative;margin-top:20px;padding:clamp(18px,2.2vw,28px);overflow:hidden}
.sheet-card::before{content:"BUILD SHEET";position:absolute;right:-28px;top:35px;padding:5px 35px;background:var(--ink);color:var(--white);font:900 .62rem/1 "Courier New",monospace;letter-spacing:.12em;transform:rotate(90deg)}
.sheet-heading{padding-bottom:12px;border-bottom:4px solid var(--ink)}.used-count{padding:5px 8px;border:2px solid var(--ink);background:var(--white);color:var(--ink);font:800 .75rem/1 "Courier New",monospace;text-transform:uppercase}
.sheet-group{margin-top:22px}.sheet-group:first-child{margin-top:16px}.sheet-group h3{display:inline-block;margin:0 0 10px;padding:5px 12px;background:var(--ink);color:var(--white);font:900 .78rem/1 "Courier New",monospace;letter-spacing:.14em;text-transform:uppercase;transform:skewX(-8deg)}
.sheet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.attribute-card{position:relative;min-height:108px;padding:12px;border:3px dashed var(--ink);border-radius:0;background:rgba(255,255,255,.58)}
.attribute-card::after{content:"";position:absolute;right:6px;bottom:6px;width:22px;height:22px;opacity:.09;background:repeating-radial-gradient(circle,var(--ink) 0 1.5px,transparent 1.5px 4px)}
.attribute-card.filled{border-style:solid;background:var(--white);box-shadow:3px 3px 0 var(--ink)}
.attribute-card-head{align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:5px}.attribute-card-head strong{font-size:.86rem;font-weight:1000;text-transform:uppercase}.attribute-card-head span{max-width:55%;color:var(--muted);font:700 .8rem/1.2 "Courier New",monospace;text-align:right;text-transform:uppercase}.attribute-result{margin-top:11px}.blank-value{color:#777;font:900 1.7rem/1 "Courier New",monospace}.letter-grade{display:inline-block;font-family:Impact,"Arial Black",sans-serif;font-size:2.25rem;font-weight:1000;line-height:1;}.special-copy{margin:0;color:var(--ink);font-size:.8rem;font-weight:700;line-height:1.42}.strong-copy{font-size:.94rem;font-weight:900}.star-row{display:flex;gap:2px;margin-bottom:8px}.star-shell{position:relative;display:inline-block;width:24px;height:25px;font-size:24px;line-height:1}.star-base,.star-fill{position:absolute;inset:0}.star-base{color:#000;-webkit-text-stroke:1px var(--ink)}.star-fill{z-index:1;color:var(--gold);overflow:hidden;white-space:nowrap;-webkit-text-stroke:1px var(--ink)}

/* Preserve the established grade palette inside the monochrome manga shell. */
.grade-S{color:#9b59d0}.grade-Aplus,.grade-A,.grade-Aminus{color:#3678d4}.grade-Bplus,.grade-B,.grade-Bminus{color:#3e9b57}.grade-Cplus,.grade-C,.grade-Cminus{color:#d4ad25}.grade-Dplus,.grade-D,.grade-Dminus{color:#db7b2f}.grade-F{color:#d94343}.grade-PU{color:#878787}

.letter-grade,
.candidate-grade,
.grade-S,
.grade-Aplus,
.grade-A,
.grade-Aminus,
.grade-Bplus,
.grade-B,
.grade-Bminus,
.grade-Cplus,
.grade-C,
.grade-Cminus,
.grade-Dplus,
.grade-D,
.grade-Dminus,
.grade-F,
.grade-PU {
  -webkit-text-stroke: 1px #090909;
  paint-order: stroke fill;
}

.confirm-dialog{width:min(490px,calc(100vw - 28px));border:4px solid var(--ink);border-radius:0;padding:0;background:var(--paper);color:var(--ink);box-shadow:10px 10px 0 var(--ink)}
.confirm-dialog::backdrop{background:rgba(0,0,0,.72)}.confirm-dialog form{padding:24px;background-image:radial-gradient(circle,rgba(0,0,0,.05) 1px,transparent 1px);background-size:6px 6px}.confirm-dialog h2{margin:0;padding-bottom:8px;border-bottom:4px solid var(--ink);font-family:Impact,"Arial Black",sans-serif;text-transform:uppercase;font-size:2rem}.confirm-dialog p{color:var(--ink-soft);font-weight:700;line-height:1.5}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.primary-button{background:var(--ink);border-color:var(--ink);color:var(--white)}.primary-button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #555}.dialog-select-label{display:grid;gap:7px;color:var(--ink);font-weight:900;font-size:.78rem;text-transform:uppercase}.dialog-select-label select{width:100%;padding:.75rem;border:3px solid var(--ink);border-radius:0;background:var(--white);color:var(--ink);font-weight:800}

/* Character inspection / steal flow */
.slot.selected{border-color:var(--ink);box-shadow:9px 9px 0 var(--ink);transform:translate(-4px,-6px) rotate(0deg);outline:5px double var(--ink);outline-offset:3px}
.slot.selected::after{content:"SELECTED";position:absolute;z-index:4;right:-9px;top:-12px;padding:5px 7px;border:3px solid var(--ink);background:var(--white);color:var(--ink);font:900 .62rem/1 "Courier New",monospace;letter-spacing:.08em;transform:rotate(3deg)}
.slot.targetable{border-style:dashed}.slot.targetable:hover{outline:5px double var(--ink);outline-offset:2px}
.candidate-panel{position:relative;margin-top:22px;border:4px solid var(--ink);border-radius:0;background:var(--white);overflow:hidden;box-shadow:var(--shadow-small)}
.candidate-panel::before{content:"";position:absolute;right:-40px;bottom:-55px;width:240px;height:240px;opacity:.06;background:repeating-radial-gradient(circle,var(--ink) 0 2px,transparent 2px 7px);pointer-events:none}
.candidate-empty{position:relative;padding:36px 20px;color:var(--muted);text-align:center;font:800 .82rem/1.5 "Courier New",monospace;text-transform:uppercase}
.candidate-heading{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:17px 19px;border-bottom:4px solid var(--ink);background:repeating-linear-gradient(135deg,#fff 0 10px,#ece8df 10px 12px)}
.candidate-heading h3{margin:.12rem 0 0;font-family:Impact,"Arial Black",sans-serif;font-size:1.85rem;line-height:1;text-transform:uppercase}.candidate-heading>div>span,.candidate-heading>p{color:var(--ink-soft);font:700 .76rem/1.3 "Courier New",monospace}.candidate-heading>p{margin:0;text-align:right}
.candidate-groups{position:relative;padding:17px}.candidate-group+.candidate-group{margin-top:19px}.candidate-group h4{display:inline-block;margin:0 0 9px;padding:4px 9px;background:var(--ink);color:var(--white);font:900 .7rem/1 "Courier New",monospace;letter-spacing:.13em;text-transform:uppercase;transform:skewX(-7deg)}
.candidate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px}
.candidate-attribute{position:relative;min-height:94px;padding:11px;border:3px solid var(--ink);border-radius:0;background:var(--white);color:var(--ink);text-align:left;cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:transform .08s ease,box-shadow .08s ease,background .08s ease,color .08s ease}
.candidate-attribute::after{content:"→";position:absolute;right:9px;top:8px;font-size:.8rem;font-weight:1000;opacity:.35}.candidate-attribute:hover:not(:disabled){transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink);background:var(--ink);color:var(--white)}.candidate-attribute:hover:not(:disabled) .candidate-attribute-label,.candidate-attribute:hover:not(:disabled) .candidate-special-copy{color:var(--white)}.candidate-attribute:disabled{cursor:not-allowed;opacity:.36;box-shadow:none;background:#ddd8ce}
.candidate-attribute-label{display:block;margin-bottom:9px;color:var(--ink-soft);font:900 .68rem/1 "Courier New",monospace;text-transform:uppercase;letter-spacing:.07em}.candidate-attribute-value{display:block}.candidate-grade{font-family:Impact,"Arial Black",sans-serif;font-size:1.95rem;font-weight:1000;line-height:1;}.candidate-attribute:hover .candidate-grade{}.already-filled{color:var(--muted);font-size:.74rem;font-weight:900;text-transform:uppercase}.candidate-special-copy{margin:0;color:var(--ink);font-size:.76rem;font-weight:800;line-height:1.35}.candidate-attribute.special-field{grid-column:span 2}.star-row.compact{margin:0}.star-row.compact .star-shell{width:21px;height:22px;font-size:21px;line-height:1}

@media(max-width:1050px){.slot-machine{grid-template-columns:repeat(3,220px);justify-content:center;gap:24px;overflow-x:auto;padding:16px 4px 18px}.machine-topline{flex-direction:column}.power-bar{justify-content:flex-start}}
@media(max-width:700px){.creator-shell{padding:15px}.creator-header{align-items:flex-start;flex-direction:column}.creator-header::after{right:10px}.header-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.header-actions>*{text-align:center}.power-bar{display:grid;grid-template-columns:1fr;width:100%}.power-button{justify-content:space-between;width:100%}.slot-machine{grid-template-columns:repeat(3,177px);justify-content:start;gap:16px}.slot{min-height:224px}.portrait-wrap,.portrait-wrap::after{height:142px}.candidate-heading{align-items:flex-start;flex-direction:column}.candidate-heading>p{text-align:left}.candidate-attribute.special-field{grid-column:auto}.candidate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sheet-card::before{display:none}}

/* ===== Manga polish pass: safer labels, grey screentones, silver grade ink ===== */
:root{
  --panel-grey:#ecebe7;
  --panel-grey-2:#e4e3df;
  --silver:#b9bec4;
}

/* Light screentone fill for all functional boxes so bright grades/stars stand out. */
.progress-card,.machine-card,.sheet-card,.candidate-panel,.confirm-dialog{
  background-color:var(--panel-grey);
  background-image:radial-gradient(circle,rgba(9,9,9,.075) 0 1px,transparent 1.15px);
  background-size:7px 7px;
}
.slot-copy,.used-count,.attribute-card,.candidate-attribute,.machine-message,.dialog-select-label select{
  background-color:var(--panel-grey);
  background-image:radial-gradient(circle,rgba(9,9,9,.065) 0 1px,transparent 1.1px);
  background-size:7px 7px;
}
.attribute-card.filled,.candidate-attribute:not(:disabled){background-color:var(--panel-grey)}
.portrait-wrap{background-color:var(--panel-grey-2)}
.candidate-heading{
  background-color:var(--panel-grey-2);
  background-image:radial-gradient(circle,rgba(9,9,9,.07) 0 1px,transparent 1.15px);
  background-size:7px 7px;
}

/* Keep the progress manga tag fully inside its panel and reserve room for it. */
.progress-card{overflow:visible;padding:16px 17px 14px}
.progress-card::before{
  right:14px;top:-11px;width:auto;min-width:104px;padding:5px 10px;
  border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  transform:rotate(2deg);white-space:nowrap;
}
.progress-copy{padding-right:118px;min-width:0}
.progress-copy strong,.progress-copy span{min-width:0}

/* The vertical BUILD SHEET sash was crossing the character counter. The heading already
   says Build Sheet, so remove the redundant sash instead of allowing a collision. */
.sheet-card{overflow:visible}
.sheet-card::before{display:none}
.sheet-heading{min-width:0}
.used-count{flex:0 0 auto;white-space:nowrap}

/* Give stars a neutral screentone stage rather than a white field. */
.star-row{width:max-content;max-width:100%;padding:5px 7px;border:2px solid rgba(9,9,9,.28);background-color:#deddd9;background-image:radial-gradient(circle,rgba(9,9,9,.11) 0 1px,transparent 1.2px);background-size:6px 6px}
.star-row.compact{padding:4px 6px}

@media(max-width:700px){
  .progress-card{padding-top:17px}
  .progress-card::before{display:none}
  .progress-copy{padding-right:0}
  .sheet-heading{align-items:flex-start;flex-direction:column}
  .used-count{align-self:flex-start}
}

/* ===== Character image wiring ===== */
/* Slots are tall manga panels and always use characterFullBody. */
.slot{min-height:390px}
.slot::before{content:attr(data-number)}
.portrait-wrap{height:306px;position:relative;display:flex;align-items:center;justify-content:center;padding:10px;background-color:var(--panel-grey-2)}
.portrait-wrap::after{height:306px}
.portrait-wrap img.slot-full-body{width:100%;height:100%;object-fit:contain;object-position:center center;display:block}
.portrait-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:18px;text-align:center;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(1.5rem,2vw,2.35rem);line-height:.95;text-transform:uppercase}
.portrait-wrap img+.portrait-fallback{display:none}
.portrait-wrap.no-photo .portrait-fallback{display:flex}
.slot-copy{min-height:78px}

@media(max-width:1050px){
  .slot-machine{grid-template-columns:repeat(3,minmax(220px,280px));justify-content:center;gap:clamp(18px,3vw,38px)}
  .slot{min-height:390px}
}
@media(max-width:700px){
  .slot-machine{grid-template-columns:repeat(3,190px);justify-content:start;gap:16px}
  .slot{min-height:350px}
  .portrait-wrap,.portrait-wrap::after{height:270px}
}





/* ===== Build Sheet image/result layouts ===== */
.attribute-card.filled{
  min-height:0;
  display:flex;
  flex-direction:column;
}

.attribute-card-body{
  margin-top:8px;
}

.attribute-source-image{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--ink);
  background-color:var(--panel-grey-2);
  background-image:radial-gradient(circle,rgba(9,9,9,.07) 0 1px,transparent 1.15px);
  background-size:7px 7px;
}

.attribute-source-image img.build-headshot{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  filter:grayscale(70%) contrast(1.06);
}

.attribute-source-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding:8px;
  text-align:center;
  font:900 .66rem/1.15 "Courier New",monospace;
  text-transform:uppercase;
}

.attribute-source-image img + .attribute-source-fallback{display:none}
.attribute-source-image.no-photo .attribute-source-fallback{display:flex}

/* Normal letter-rated cards: [rating][headshot]. */
.attribute-card-body.letter-layout{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.attribute-card-body.letter-layout>.attribute-result,
.attribute-card-body.letter-layout>.attribute-source-image{
  aspect-ratio:1/1;
  min-width:0;
  min-height:0;
}

.attribute-card-body.letter-layout>.attribute-result{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  overflow:hidden;
  border:2px solid var(--ink);
  background-color:var(--panel-grey-2);
  background-image:radial-gradient(circle,rgba(9,9,9,.07) 0 1px,transparent 1.15px);
  background-size:7px 7px;
}

.attribute-card-body.letter-layout .letter-grade{
  font-size:clamp(2.1rem,3vw,3.35rem);
}

/* SPIRIT: all four cards stretch to the same row height. */
.group-spirit .sheet-grid{
  align-items:stretch;
}

.group-spirit .attribute-card{
  height:100%;
}

.group-spirit .attribute-card.filled .attribute-card-body{
  flex:1;
}

/* Ability / Transformation:
   [ image ]
   [ text  ]
   The image stays compact; extra row height becomes whitespace, not a giant image. */
.attribute-card-body.text-layout{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}

.attribute-card-body.text-layout>.attribute-source-image{
  width:124px;
  height:124px;
  flex:0 0 124px;
  align-self:flex-start;
}

.attribute-card-body.text-layout>.text-value{
  min-height:48px;
  padding:10px;
  border:2px solid var(--ink);
  background-color:var(--panel-grey-2);
  background-image:radial-gradient(circle,rgba(9,9,9,.07) 0 1px,transparent 1.15px);
  background-size:7px 7px;
  font-size:.8rem;
  font-weight:900;
  line-height:1.35;
}

/* WORLD: Backstory and Plot Armor always share the same row height. */
.group-world .sheet-grid{
  align-items:stretch;
}

.group-world .attribute-card{
  height:100%;
}

.group-world .attribute-card.filled .attribute-card-body{
  flex:1;
}

/* Backstory: [image][blurb] — one row only. */
.attribute-card-body.backstory-layout{
  height:100%;
  display:grid;
  grid-template-columns:124px minmax(0,1fr);
  grid-template-rows:1fr;
  gap:10px;
  align-items:stretch;
}

.attribute-card-body.backstory-layout>.attribute-source-image{
  width:124px;
  min-height:124px;
  height:100%;
  max-height:160px;
  align-self:start;
}

.attribute-card-body.backstory-layout>.backstory-copy{
  min-height:124px;
  padding:12px;
  border:2px solid var(--ink);
  background-color:var(--panel-grey-2);
  background-image:radial-gradient(circle,rgba(9,9,9,.07) 0 1px,transparent 1.15px);
  background-size:7px 7px;
  font-size:.8rem;
  font-weight:700;
  line-height:1.4;
  display:flex;
  align-items:center;
}

/* Plot Armor exactly:
   [image][ explanation... ]
   [stars][ ...spans both rows ] */
.attribute-card-body.plot-armor-layout{
  height:100%;
  display:grid;
  grid-template-columns:124px minmax(0,1fr);
  grid-template-rows:124px minmax(48px,auto);
  gap:8px 10px;
  align-items:stretch;
}

.attribute-card-body.plot-armor-layout>.attribute-source-image{
  grid-column:1;
  grid-row:1;
  width:124px;
  height:124px;
}

.attribute-card-body.plot-armor-layout>.plot-stars{
  grid-column:1;
  grid-row:2;
  padding:8px;
  min-height:48px;
  border:2px solid var(--ink);
  background-color:var(--panel-grey-2);
  background-image:radial-gradient(circle,rgba(9,9,9,.07) 0 1px,transparent 1.15px);
  background-size:7px 7px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:2px;
  flex-wrap:wrap;
}

.attribute-card-body.plot-armor-layout>.plot-copy{
  grid-column:2;
  grid-row:1 / 3;
  padding:12px;
  min-height:180px;
  border:2px solid var(--ink);
  background-color:var(--panel-grey-2);
  background-image:radial-gradient(circle,rgba(9,9,9,.07) 0 1px,transparent 1.15px);
  background-size:7px 7px;
  font-size:.8rem;
  font-weight:700;
  line-height:1.4;
  display:flex;
  align-items:flex-start;
}

@media(max-width:800px){
  .attribute-card-body.backstory-layout,
  .attribute-card-body.plot-armor-layout{
    grid-template-columns:108px minmax(0,1fr);
  }

  .attribute-card-body.backstory-layout>.attribute-source-image,
  .attribute-card-body.plot-armor-layout>.attribute-source-image{
    width:108px;
  }

  .attribute-card-body.plot-armor-layout{
    grid-template-rows:108px minmax(48px,auto);
  }

  .attribute-card-body.text-layout>.attribute-source-image{
    width:108px;
    height:108px;
    flex-basis:108px;
  }
}


/* ===== FINAL authoritative Spirit / World sizing ===== */

/* Spirit row: every card matches the same row height, but image/text content stays compact. */
.group-spirit .sheet-grid{
  align-items:stretch !important;
}
.group-spirit .attribute-card{
  height:100% !important;
}
.group-spirit .attribute-card.filled{
  display:flex !important;
  flex-direction:column !important;
}
.group-spirit .attribute-card.filled>.attribute-card-body{
  flex:1 1 auto !important;
}

/* Ability / Transformation MUST be:
   [ image ]
   [ text  ]
   Never text first; never a full-card image. */
.group-spirit .attribute-card-body.text-layout{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:124px auto 1fr !important;
  gap:8px !important;
  height:100% !important;
  align-content:start !important;
}
.group-spirit .attribute-card-body.text-layout>.attribute-source-image{
  grid-column:1 !important;
  grid-row:1 !important;
  width:124px !important;
  height:124px !important;
  min-width:124px !important;
  min-height:124px !important;
  max-width:124px !important;
  max-height:124px !important;
  aspect-ratio:1 / 1 !important;
  justify-self:start !important;
  align-self:start !important;
  flex:none !important;
}
.group-spirit .attribute-card-body.text-layout>.text-value{
  grid-column:1 !important;
  grid-row:2 !important;
  width:100% !important;
  min-height:48px !important;
  height:auto !important;
  aspect-ratio:auto !important;
  order:initial !important;
}

/* World row: Backstory + Plot Armor are equal-height cards. */
.group-world .sheet-grid{
  align-items:stretch !important;
}
.group-world .attribute-card{
  height:100% !important;
}
.group-world .attribute-card.filled{
  display:flex !important;
  flex-direction:column !important;
}
.group-world .attribute-card.filled>.attribute-card-body{
  flex:1 1 auto !important;
}

/* Backstory MUST be one horizontal row:
   [ image ][ blurb ] */
.group-world .attribute-card-body.backstory-layout{
  display:grid !important;
  grid-template-columns:124px minmax(0,1fr) !important;
  grid-template-rows:124px !important;
  gap:10px !important;
  height:auto !important;
  min-height:124px !important;
  align-items:stretch !important;
}
.group-world .attribute-card-body.backstory-layout>.attribute-source-image{
  grid-column:1 !important;
  grid-row:1 !important;
  width:124px !important;
  height:124px !important;
  min-width:124px !important;
  min-height:124px !important;
  max-width:124px !important;
  max-height:124px !important;
  aspect-ratio:1 / 1 !important;
  align-self:stretch !important;
}
.group-world .attribute-card-body.backstory-layout>.backstory-copy{
  grid-column:2 !important;
  grid-row:1 !important;
  min-height:124px !important;
  height:124px !important;
  max-height:124px !important;
  overflow:auto !important;
  align-items:center !important;
}

/* Plot Armor remains:
   [ image ][ explanation ]
   [ stars ][ explanation ] */
.group-world .attribute-card-body.plot-armor-layout{
  display:grid !important;
  grid-template-columns:124px minmax(0,1fr) !important;
  grid-template-rows:124px 48px !important;
  gap:8px 10px !important;
  height:auto !important;
  min-height:180px !important;
}
.group-world .attribute-card-body.plot-armor-layout>.attribute-source-image{
  grid-column:1 !important;
  grid-row:1 !important;
  width:124px !important;
  height:124px !important;
  min-width:124px !important;
  min-height:124px !important;
  max-width:124px !important;
  max-height:124px !important;
}
.group-world .attribute-card-body.plot-armor-layout>.plot-stars{
  grid-column:1 !important;
  grid-row:2 !important;
  height:48px !important;
  min-height:48px !important;
}
.group-world .attribute-card-body.plot-armor-layout>.plot-copy{
  grid-column:2 !important;
  grid-row:1 / span 2 !important;
  min-height:180px !important;
  height:180px !important;
  overflow:auto !important;
}

/* Missing-image fallback obeys the same compact boxes. */
.group-spirit .text-layout .attribute-source-fallback,
.group-world .backstory-layout .attribute-source-fallback,
.group-world .plot-armor-layout .attribute-source-fallback{
  width:100% !important;
  height:100% !important;
}


/* ===== Final small layout polish ===== */

/* Ability + Transformation only: center portrait and center the text block. */
.group-spirit .attribute-card-body.text-layout>.attribute-source-image{
  justify-self:center !important;
  align-self:center !important;
}
.group-spirit .attribute-card-body.text-layout>.text-value{
  text-align:center !important;
  justify-content:center !important;
  align-items:center !important;
}

/* Plot Armor stars: always keep all five on one row. */
.group-world .attribute-card-body.plot-armor-layout>.plot-stars{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:0 !important;
  overflow:visible !important;
  white-space:nowrap !important;
  padding-left:4px !important;
  padding-right:4px !important;
}
.group-world .attribute-card-body.plot-armor-layout>.plot-stars .star-shell{
  flex:0 0 auto !important;
  width:21px !important;
  height:22px !important;
  font-size:21px !important;
  margin:0 -1px !important;
}


/* Series footer on selected build-sheet panels. */
.attribute-card.filled{
  position:relative;
  padding-bottom:26px;
}
.attribute-card-footer{
  position:absolute;
  right:10px;
  bottom:7px;
  max-width:72%;
  color:var(--muted);
  font:700 .56rem/1.15 "Courier New",monospace;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}


/* Ensure selected-character series footer is visible above decorative corner art. */
.attribute-card-footer{
  z-index:2;
  right:10px;
  bottom:8px;
  color:var(--muted);
}

/* ===== Plot Armor: portrait + oversized stars, no blurb ===== */
.group-world .attribute-card-body.plot-armor-layout{
  display:grid !important;
  grid-template-columns:124px minmax(0,1fr) !important;
  grid-template-rows:124px !important;
  gap:10px !important;
  height:auto !important;
  min-height:124px !important;
  align-items:stretch !important;
}
.group-world .attribute-card-body.plot-armor-layout>.attribute-source-image{
  grid-column:1 !important;
  grid-row:1 !important;
  width:124px !important;
  height:124px !important;
  min-width:124px !important;
  min-height:124px !important;
  max-width:124px !important;
  max-height:124px !important;
}
.group-world .attribute-card-body.plot-armor-layout>.plot-stars{
  grid-column:2 !important;
  grid-row:1 !important;
  width:100% !important;
  height:124px !important;
  min-height:124px !important;
  padding:8px 14px !important;
  border:2px solid var(--ink) !important;
  background-color:var(--panel-grey-2) !important;
  background-image:radial-gradient(circle,rgba(9,9,9,.07) 0 1px,transparent 1.15px) !important;
  background-size:7px 7px !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:4px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
.group-world .attribute-card-body.plot-armor-layout>.plot-stars .star-shell{
  flex:0 1 72px !important;
  width:clamp(42px,5vw,72px) !important;
  height:clamp(46px,5.3vw,76px) !important;
  font-size:clamp(42px,5vw,72px) !important;
  line-height:1 !important;
  margin:0 !important;
}
.group-world .attribute-card-body.plot-armor-layout>.plot-copy{
  display:none !important;
}

@media(max-width:800px){
  .group-world .attribute-card-body.plot-armor-layout{
    grid-template-columns:108px minmax(0,1fr) !important;
    grid-template-rows:108px !important;
    min-height:108px !important;
  }
  .group-world .attribute-card-body.plot-armor-layout>.attribute-source-image{
    width:108px !important;
    height:108px !important;
    min-width:108px !important;
    min-height:108px !important;
    max-width:108px !important;
    max-height:108px !important;
  }
  .group-world .attribute-card-body.plot-armor-layout>.plot-stars{
    height:108px !important;
    min-height:108px !important;
    padding:6px 8px !important;
    gap:1px !important;
  }
}


/* ===== Final protagonist result ===== */
.result-card{
  margin-top:26px;
  padding:22px;
  border:4px solid var(--ink);
  background-color:var(--panel-grey);
  background-image:radial-gradient(circle,rgba(9,9,9,.075) 0 1px,transparent 1.15px);
  background-size:7px 7px;
  box-shadow:8px 8px 0 var(--ink);
  opacity:0;
  transform:translateY(12px);
  transition:opacity .22s ease,transform .22s ease;
}
.result-card.visible{opacity:1;transform:none}
.result-card[hidden]{display:none!important}
.result-heading h2{margin:2px 0 10px;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(2rem,5vw,4.4rem);line-height:.95;text-transform:uppercase}
.result-identity{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;padding:16px;border:3px solid var(--ink);background:#090909;color:#fff;box-shadow:4px 4px 0 #777}
.result-tier,.result-name{font-family:Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.result-tier{font-size:clamp(1.8rem,4vw,3.5rem)}
.result-name{font-size:clamp(1.55rem,3.5vw,3rem)}
.result-dash{font-size:2rem;font-weight:1000}
.shade-heading{margin:24px 0 10px;font:1000 1rem/1 "Courier New",monospace;letter-spacing:.14em;text-transform:uppercase}
.shade-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.shade-card{display:grid;grid-template-columns:minmax(108px,40%) 1fr;min-height:146px;border:3px solid var(--ink);background:var(--panel-grey-2);box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.shade-headshot{position:relative;min-height:140px;display:flex;align-items:center;justify-content:center;border-right:3px solid var(--ink);background:#d9d8d4;overflow:hidden}
.shade-image{width:100%;height:100%;min-height:140px;object-fit:contain;object-position:center;filter:grayscale(70%) contrast(1.06)}
.shade-fallback{padding:8px;text-align:center;font:900 .7rem/1.15 "Courier New",monospace;text-transform:uppercase}
.shade-headshot img+.shade-fallback{display:none}.shade-headshot.no-photo .shade-fallback{display:block}
.shade-copy{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px;min-width:0}
.shade-copy strong{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(1.25rem,2.2vw,2rem);line-height:.95;text-transform:uppercase}
.shade-copy span{font:800 .9rem/1.25 "Courier New",monospace;text-transform:uppercase;color:var(--muted)}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.result-actions button{min-height:54px;font-size:.9rem}
.share-button{cursor:pointer}.result-reset-button{cursor:pointer}
@media(max-width:900px){.shade-list{grid-template-columns:1fr}.shade-card{grid-template-columns:130px 1fr}.shade-headshot,.shade-image{min-height:130px}}
@media(max-width:600px){.result-card{padding:14px;box-shadow:5px 5px 0 var(--ink)}.result-identity{display:block}.result-dash{display:none}.result-tier,.result-name{display:block}.result-name{margin-top:7px}.shade-card{grid-template-columns:104px 1fr;min-height:112px}.shade-headshot,.shade-image{min-height:106px}.result-actions{grid-template-columns:1fr}}

/* ===== Share-card preview ===== */
.result-card{scroll-margin-top:22px}
.share-preview{margin-top:18px;padding:16px;border:3px solid var(--ink);background:rgba(255,255,255,.72)}
.share-preview[hidden]{display:none!important}
.share-preview-heading{margin:0 0 10px;font:1000 .9rem/1 "Courier New",monospace;letter-spacing:.12em;text-transform:uppercase}
.share-preview-frame{display:flex;justify-content:center;max-height:min(72vh,720px);padding:12px;background:#d8d7d2;border:2px solid var(--ink);overflow:auto}
.share-preview-frame img{display:block;width:min(100%,540px);height:auto;object-fit:contain;box-shadow:4px 4px 0 var(--ink)}
.share-preview-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.share-preview-actions button{min-height:48px;font-size:.8rem}
.share-status{min-height:1.2em;margin:10px 0 0;color:var(--muted);font:800 .72rem/1.35 "Courier New",monospace}
@media(max-width:800px){.share-preview-actions{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.share-preview-actions{grid-template-columns:1fr}.share-preview{padding:10px}.share-preview-frame{padding:8px}}


/* ===== Shared Welcome / FAQ controls ===== */
.header-link-button{
  border:3px solid var(--ink);background:var(--panel-grey);color:var(--ink);padding:.62rem .85rem;
  box-shadow:3px 3px 0 var(--ink);font:900 .72rem/1 "Courier New",monospace;text-transform:uppercase;cursor:pointer;
}
.header-link-button:hover,.header-link-button:focus-visible{background:var(--ink);color:#fff;outline:none;transform:translate(-1px,-1px)}
.info-dialog{width:min(820px,calc(100vw - 28px));max-height:min(82vh,820px);padding:0;border:4px solid var(--ink);background:var(--paper);box-shadow:10px 10px 0 var(--ink)}
.info-dialog::backdrop{background:rgba(9,9,9,.68);backdrop-filter:blur(2px)}
.info-dialog-panel{margin:0;display:flex;max-height:min(82vh,820px);flex-direction:column}
.info-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:4px solid var(--ink);background:var(--panel-grey-2)}
.info-dialog-header .machine-kicker{margin:0}
.info-dialog-close{width:42px;height:42px;flex:0 0 auto;border:3px solid var(--ink);background:#fff;font:900 1.5rem/1 Arial,sans-serif;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.info-dialog-close:hover,.info-dialog-close:focus-visible{background:var(--ink);color:#fff;outline:none}
.info-dialog-scroll{overflow-y:auto;overscroll-behavior:contain;padding:clamp(18px,3vw,30px);background-color:var(--paper);background-image:radial-gradient(circle,rgba(9,9,9,.055) 0 1px,transparent 1.2px);background-size:6px 6px}
.info-dialog-scroll h2{margin:0 0 20px;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(2rem,6vw,4.5rem);line-height:.95;text-transform:uppercase}
.faq-copy section{padding:0 0 20px;margin:0 0 20px;border-bottom:2px solid rgba(9,9,9,.24)}
.faq-copy section:last-child{margin-bottom:0;border-bottom:0}
.faq-copy h3{margin:0 0 8px;font-size:1.02rem;line-height:1.35}
.faq-copy p{margin:0;font-weight:700;line-height:1.55;color:var(--ink-soft)}
.welcome-dialog-copy{min-height:220px}
.welcome-dialog-copy h2{margin-bottom:18px}
.welcome-dialog-copy p{margin:0 0 18px;font-weight:700;line-height:1.55;color:var(--ink-soft)}
.welcome-dialog-copy a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
.rating-meaning-group{margin:22px 0 0;padding-top:18px;border-top:3px solid var(--ink)}
.rating-meaning-group h3{margin:0 0 10px;font-family:Impact,"Arial Black",sans-serif;font-size:1.55rem;text-transform:uppercase;letter-spacing:.03em}
.rating-meaning-group ul{margin:0;padding-left:1.35rem}
.rating-meaning-group li{margin:8px 0;font-weight:700;line-height:1.45}
@media(max-width:900px){.header-actions{flex-wrap:wrap}.slot-machine{overflow-x:auto;justify-content:start;padding-bottom:8px}}
@media(max-width:600px){.info-dialog{width:calc(100vw - 16px);max-height:88vh}.info-dialog-panel{max-height:88vh}.header-link-button{flex:1 1 auto}}


/* ===== Navigation / three-card spacing / centralized modal content v2 ===== */
.site-nav-control{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.62rem .9rem;border:3px solid var(--ink);border-radius:0;background:var(--white);color:var(--ink);box-shadow:var(--shadow-small);font-family:Impact,"Arial Black",sans-serif;font-size:1rem;font-weight:900;line-height:1.05;letter-spacing:.035em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease,background .1s ease,color .1s ease;white-space:nowrap}
.site-nav-control:hover,.site-nav-control:focus-visible{background:var(--ink);color:var(--white);outline:none;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.reset-power-button{background:repeating-linear-gradient(-45deg,var(--white) 0 7px,#e2ddd2 7px 9px)}
.slot-machine{width:min(1180px,100%);grid-template-columns:repeat(3,minmax(240px,320px));gap:clamp(32px,5vw,72px);margin-left:auto;margin-right:auto}
.info-dialog-scroll h2{font-size:clamp(1.9rem,4vw,3.15rem);line-height:1}
.welcome-dialog-copy h2{max-width:100%;font-size:clamp(2rem,4.2vw,3.35rem)}
.partial-loading{margin:0;font:800 .9rem/1.5 "Courier New",monospace}
@media(max-width:1050px){.slot-machine{width:100%;grid-template-columns:repeat(3,220px);gap:32px}}
@media(max-width:700px){.header-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.site-nav-control{width:100%;min-height:44px;padding:.55rem .5rem;font-size:.88rem}.slot-machine{width:auto;grid-template-columns:repeat(3,177px);gap:18px}}

/* ===== Pick-stat-before-roll flow ===== */
.stat-picker-card{
  position:relative;
  margin-top:20px;
  padding:clamp(18px,2.2vw,28px);
  border:4px solid var(--ink);
  background-color:var(--panel-grey);
  background-image:radial-gradient(circle,rgba(9,9,9,.075) 0 1px,transparent 1.15px);
  background-size:7px 7px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.stat-picker-heading{padding-bottom:14px;border-bottom:4px solid var(--ink)}
.stat-picker-heading h2{margin:.15rem 0 0;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(1.8rem,3vw,2.8rem);line-height:.95;text-transform:uppercase;letter-spacing:.02em}
.stat-picker-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:18px}
.stat-choice{position:relative;min-height:92px;padding:11px 12px;border:3px solid var(--ink);border-radius:0;background:var(--panel-grey);color:var(--ink);text-align:left;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease,opacity .12s ease}
.stat-choice:hover:not(:disabled){transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink);background:var(--ink);color:var(--white)}
.stat-choice strong{display:block;margin:.36rem 0;font-family:Impact,"Arial Black",sans-serif;font-size:1.25rem;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.stat-choice-group,.stat-choice-status{display:block;font:900 .61rem/1.1 "Courier New",monospace;text-transform:uppercase;letter-spacing:.08em}
.stat-choice-status{opacity:.65}
.stat-choice.used{background:#c9c8c4;color:#6d6d6d;border-color:#777;box-shadow:none;opacity:.55;cursor:not-allowed}
.stat-choice.used::after{content:"✓";position:absolute;right:9px;top:7px;font:900 1rem/1 "Courier New",monospace}

/* The picker and roll stage trade places with a short manga-panel transition. */
.stat-picker-card,.draft-stage{opacity:0;transform:translateY(24px) scale(.985);transition:opacity .24s ease,transform .24s ease}
.stat-picker-card.stage-visible,.draft-stage.stage-visible{opacity:1;transform:translateY(0) scale(1)}
.stat-picker-card.stage-leaving,.draft-stage.stage-leaving{opacity:0;transform:translateY(-18px) scale(.99)}
.stat-picker-card[hidden],.draft-stage[hidden]{display:none!important}

/* Current-round cards expose only the committed attribute. */
.slot-copy{height:auto;min-height:118px}
.slot-current-rating{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding-top:8px;border-top:2px solid var(--ink);text-align:left}
.slot-current-rating small{font:900 .66rem/1 "Courier New",monospace;text-transform:uppercase;letter-spacing:.08em}
.slot-current-rating .candidate-grade{font-size:2rem}
.slot-current-rating .candidate-special-copy{max-width:180px;margin:0;text-align:right;font-size:.7rem;line-height:1.2}
.slot-current-rating .star-row{margin:0}
.slot-rating-placeholder{font-family:Impact,"Arial Black",sans-serif;font-size:1.8rem}
.focused-candidate-pick{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px}
.focused-candidate-value{min-width:0;padding:16px;border:3px solid var(--ink);background:var(--panel-grey-2)}
.focused-candidate-value .candidate-grade{font-size:3rem}
.focused-candidate-value .candidate-special-copy{font-size:.95rem;line-height:1.45}
.take-current-stat{min-width:190px;min-height:58px}

@media(max-width:1050px){.stat-picker-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.stat-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.focused-candidate-pick{grid-template-columns:1fr}.take-current-stat{width:100%}.slot-current-rating .candidate-special-copy{max-width:130px}}

/* ===== Draft-flow fixes: 2026-09-09 ===== */
/* Picker and roll are now immediate states of the same draft flow. */
.stat-picker-card,.draft-stage{
  opacity:1;
  transform:none;
  transition:none;
}
.stat-picker-card.stage-visible,.draft-stage.stage-visible,
.stat-picker-card.stage-leaving,.draft-stage.stage-leaving{
  opacity:1;
  transform:none;
}

/* Let every three-card choice fill its grid cell from top to bottom. This keeps
   long text traits (especially Backstory) from leaving a ragged white strip. */
.slot{
  display:flex;
  flex-direction:column;
  height:100%;
}
.portrait-wrap{flex:0 0 auto;width:100%}
.slot-copy{flex:1 1 auto;width:100%}

/* .slot-copy span is intentionally broad in the original card typography.
   Plot Armor's stars contain nested spans, so that selector was turning the
   absolutely stacked fill/base layers into normal block rows. Restore the
   star layering locally inside the current-stat display. */
.slot-current-rating .star-row,
.focused-candidate-value .star-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  width:max-content;
  max-width:100%;
}
.slot-current-rating .star-shell,
.focused-candidate-value .star-shell{
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  margin:0;
}
.slot-current-rating .star-shell .star-base,
.slot-current-rating .star-shell .star-fill,
.focused-candidate-value .star-shell .star-base,
.focused-candidate-value .star-shell .star-fill{
  position:absolute;
  inset:0;
  display:block;
  margin:0;
  line-height:1;
}
.slot-current-rating .star-shell .star-base,
.focused-candidate-value .star-shell .star-base{
  color:#000;
}
.slot-current-rating .star-shell .star-fill,
.focused-candidate-value .star-shell .star-fill{
  z-index:1;
  color:var(--gold);
  overflow:hidden;
  white-space:nowrap;
}


/* ===== Plot Armor picker legibility: 2026-09-09 ===== */
/* Make the five Plot Armor stars much larger in the three-card draft while
   keeping them tightly packed so the row still fits inside each card. */
.slot-current-rating .star-row.compact{
  gap:0;
  padding:4px 5px;
}
.slot-current-rating .star-row.compact .star-shell{
  width:30px;
  height:31px;
  font-size:30px;
  line-height:1;
}
.slot-current-rating .star-row.compact .star-shell + .star-shell{
  margin-left:-1px;
}

/* Plot Armor draft-card stars: override the generic `.slot-copy span` typography.
   The star glyph layers are nested spans, so they must explicitly inherit the
   enlarged shell size instead of falling back to the card's 0.72rem metadata font. */
.slot-current-rating .star-row.compact .star-shell .star-base,
.slot-current-rating .star-row.compact .star-shell .star-fill{
  font:inherit !important;
  font-size:inherit !important;
  line-height:1 !important;
}

/* ===== Persistent draft power bar + completed-sheet reset ===== */
.stat-picker-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.picker-power-bar{
  flex:0 0 auto;
}
.picker-power-bar .power-button:disabled{
  cursor:not-allowed;
}
.sheet-heading-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:0 0 auto;
}
.sheet-reset-button{
  min-height:28px;
  padding:5px 10px;
  border:2px solid var(--ink);
  border-radius:0;
  background:repeating-linear-gradient(-45deg,var(--white) 0 7px,#e2ddd2 7px 9px);
  color:var(--ink);
  font:900 .75rem/1 "Courier New",monospace;
  text-transform:uppercase;
  cursor:pointer;
}
.sheet-reset-button:hover,.sheet-reset-button:focus-visible{
  background:var(--ink);
  color:var(--white);
  outline:none;
}
.sheet-reset-button[hidden]{display:none!important}

@media(max-width:1050px){
  .stat-picker-heading{flex-direction:column}
  .picker-power-bar{justify-content:flex-start}
}
@media(max-width:700px){
  .picker-power-bar{display:grid;grid-template-columns:1fr;width:100%}
  .sheet-heading-actions{align-self:flex-start;flex-wrap:wrap;justify-content:flex-start}
}

/* ===== Mentor + Allies selection rounds ===== */
.support-card{
  position:relative;
  margin:22px 0;
  padding:20px;
  border:4px solid var(--ink);
  background-color:var(--panel-grey);
  background-image:radial-gradient(circle,rgba(9,9,9,.075) 0 1px,transparent 1.15px);
  background-size:7px 7px;
  box-shadow:var(--shadow);
  scroll-margin-top:22px;
}
.support-card[hidden]{display:none!important}
.support-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:15px;border-bottom:4px solid var(--ink)}
.support-heading h2{margin:.15rem 0 .55rem;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(2rem,4vw,3.5rem);line-height:.95;text-transform:uppercase}
.support-heading .attribute-hint{max-width:920px;margin-bottom:0;line-height:1.5}
.support-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:20px;align-items:stretch}
.support-option{position:relative;display:flex;min-width:0;flex-direction:column;border:3px solid var(--ink);background:var(--panel-grey-2);box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.support-option.targetable{border-style:dashed;cursor:pointer}
.support-option.targetable:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.support-image-wrap{position:relative;height:220px;display:flex;align-items:center;justify-content:center;padding:10px;border-bottom:3px solid var(--ink);background:#d9d8d3;overflow:hidden}
.support-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.support-image-fallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center;padding:14px;text-align:center;font-family:Impact,"Arial Black",sans-serif;font-size:1.45rem;line-height:1;text-transform:uppercase}
.support-image-wrap .support-image+.support-image-fallback{display:none}
.support-image-wrap.no-photo .support-image-fallback{display:flex}
.support-copy{display:flex;flex:1;min-width:0;flex-direction:column;padding:13px}
.support-copy h3{margin:.35rem 0 .75rem;font-family:Impact,"Arial Black",sans-serif;font-size:1.5rem;line-height:1;text-transform:uppercase;overflow-wrap:anywhere}
.support-profile{display:grid;gap:4px;margin-bottom:11px;padding:8px;border:2px solid var(--ink);background:rgba(255,255,255,.28)}
.support-metric{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;font:800 .66rem/1.15 "Courier New",monospace;text-transform:uppercase}
.support-metric strong{font-family:Impact,"Arial Black",sans-serif;font-size:1.05rem;line-height:1}
.support-boosts{display:grid;gap:7px;margin-bottom:10px}
.support-boost-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;padding:7px;border:2px solid var(--ink);background:var(--white);font-size:.72rem;line-height:1.2}
.support-boost-row span{font-weight:900;overflow-wrap:anywhere}
.support-boost-row strong{white-space:nowrap;font-family:Impact,"Arial Black",sans-serif;font-size:1.05rem}
.support-boost-row small{grid-column:1/-1;color:var(--muted);font:800 .59rem/1.2 "Courier New",monospace;text-transform:uppercase}
.support-reasoning{margin:0 0 11px;color:var(--ink-soft);font-size:.7rem;font-weight:700;line-height:1.35}
.choose-support{width:100%;margin-top:auto;padding:.65rem .5rem;font-size:.72rem}
.support-card>.machine-message{margin-bottom:0}

@media(max-width:1250px){
  .support-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .support-image-wrap{height:250px}
}
@media(max-width:800px){
  .support-heading{flex-direction:column}
  .support-heading .power-bar{width:100%}
  .support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .support-card{padding:14px}
  .support-grid{grid-template-columns:1fr}
  .support-image-wrap{height:280px}
}


/* ===== Final mentor/allies summary + expanded site nav: 2026-09-10 ===== */
.support-summary-heading{margin:18px 0 8px;font:900 .82rem/1 "Courier New",monospace;letter-spacing:.16em;text-transform:uppercase}
.final-support-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.final-support-card{display:grid;grid-template-columns:minmax(150px,34%) minmax(0,1fr);min-height:190px;border:3px solid var(--ink);background:var(--panel-grey-2);box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.final-support-image-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:190px;padding:8px;border-right:3px solid var(--ink);background:#d9d8d3;overflow:hidden}
.final-support-image{width:100%;height:100%;max-height:210px;object-fit:contain;object-position:center;display:block;filter:grayscale(70%) contrast(1.04)}
.final-support-fallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center;padding:10px;text-align:center;font-family:Impact,"Arial Black",sans-serif;font-size:1.4rem;line-height:1;text-transform:uppercase}
.final-support-image-wrap .final-support-image+.final-support-fallback{display:none}.final-support-image-wrap.no-photo .final-support-fallback{display:flex}
.final-support-copy{display:flex;min-width:0;flex-direction:column;justify-content:center;padding:14px}
.final-support-type{margin-bottom:7px;font:900 .66rem/1 "Courier New",monospace;letter-spacing:.14em;text-transform:uppercase}
.final-support-copy strong{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(1.45rem,2.4vw,2.2rem);line-height:.95;text-transform:uppercase;overflow-wrap:anywhere}
.final-support-copy>span:not(.final-support-type){margin-top:7px;font:800 .9rem/1.25 "Courier New",monospace;text-transform:uppercase}
.final-support-copy small{margin-top:12px;padding-top:10px;border-top:2px solid var(--ink);font:800 .66rem/1.4 "Courier New",monospace;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:900px){.header-actions{gap:.45rem}.site-nav-control{font-size:.88rem;padding:.55rem .65rem}.final-support-card{grid-template-columns:130px 1fr}}
@media(max-width:680px){.final-support-list{grid-template-columns:1fr}.final-support-card{grid-template-columns:118px 1fr;min-height:150px}.final-support-image-wrap{min-height:150px}.header-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}}

/* ===== Villain gauntlet + WebP/nav pass: 2026-09-13 ===== */
.header-actions{flex-wrap:wrap;justify-content:flex-end}
.gauntlet-launch-button{width:100%;margin-top:18px;min-height:58px;font-size:1.1rem;letter-spacing:.06em}
.gauntlet-card{margin-top:28px;padding:clamp(18px,2.6vw,32px);border:4px solid var(--ink);background:var(--paper);box-shadow:var(--shadow);scroll-margin-top:22px}
.gauntlet-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.gauntlet-heading h2{margin:.25rem 0 .4rem;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(2rem,5vw,4.4rem);line-height:.92;text-transform:uppercase;letter-spacing:.02em}
.gauntlet-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.gauntlet-villain-card{appearance:none;display:flex;min-width:0;flex-direction:column;padding:0;border:3px solid var(--ink);border-radius:0;background:var(--panel-grey-2);color:var(--ink);box-shadow:3px 3px 0 var(--ink);text-align:left;overflow:hidden}
button.gauntlet-villain-card{font:inherit;cursor:pointer}
.gauntlet-villain-card.selectable:hover,.gauntlet-villain-card.selectable:focus-visible{background:var(--white);outline:none;transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink)}
.gauntlet-villain-image-wrap{position:relative;display:flex;align-items:center;justify-content:center;height:250px;padding:8px;border-bottom:3px solid var(--ink);background:#d9d8d3;overflow:hidden}
.gauntlet-villain-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:grayscale(70%) contrast(1.05)}
.gauntlet-villain-fallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center;padding:12px;text-align:center;font-family:Impact,"Arial Black",sans-serif;font-size:1.35rem;line-height:1;text-transform:uppercase}
.gauntlet-villain-image-wrap .gauntlet-villain-image+.gauntlet-villain-fallback{display:none}.gauntlet-villain-image-wrap.no-photo .gauntlet-villain-fallback{display:flex}
.gauntlet-villain-copy{display:flex;min-height:150px;flex:1 1 auto;flex-direction:column;padding:12px}
.gauntlet-villain-tier{margin-bottom:7px;font:900 .62rem/1 "Courier New",monospace;letter-spacing:.15em;text-transform:uppercase}
.gauntlet-villain-copy strong{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(1.2rem,2vw,1.75rem);line-height:.95;text-transform:uppercase;overflow-wrap:anywhere}
.gauntlet-villain-copy>span:not(.gauntlet-villain-tier){margin-top:7px;font:800 .9rem/1.25 "Courier New",monospace;text-transform:uppercase}
.gauntlet-villain-copy small{margin-top:auto;padding-top:12px;font:900 .65rem/1 "Courier New",monospace;text-transform:uppercase}
.gauntlet-lineup-wrap{margin-top:24px;padding-top:20px;border-top:4px solid var(--ink)}
.gauntlet-lineup-heading{margin:0 0 12px;font:900 .82rem/1 "Courier New",monospace;letter-spacing:.16em;text-transform:uppercase}
.gauntlet-lineup{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gauntlet-lineup .gauntlet-villain-image-wrap{height:190px}
.gauntlet-lineup .gauntlet-villain-copy{min-height:130px}
.gauntlet-boss-reveal{padding:28px;border:3px solid var(--ink);background:repeating-linear-gradient(-45deg,#fff,#fff 10px,#ecebe7 10px,#ecebe7 20px);text-align:center}
.gauntlet-boss-reveal p{margin:0 0 16px;font:900 .8rem/1.4 "Courier New",monospace;text-transform:uppercase}
@media(max-width:1180px){.gauntlet-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gauntlet-lineup{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.gauntlet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gauntlet-villain-image-wrap{height:210px}}
@media(max-width:500px){.gauntlet-grid,.gauntlet-lineup{grid-template-columns:1fr}.gauntlet-villain-card{display:grid;grid-template-columns:118px minmax(0,1fr)}.gauntlet-villain-image-wrap,.gauntlet-lineup .gauntlet-villain-image-wrap{height:170px;border-right:3px solid var(--ink);border-bottom:0}.gauntlet-villain-copy,.gauntlet-lineup .gauntlet-villain-copy{min-height:170px}}

/* ===== Villain gauntlet five-card presentation: 2026-09-13 ===== */
.gauntlet-grid{
  display:block;
  width:100%;
  min-width:0;
}
.gauntlet-roll-machine,
.gauntlet-choice-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  width:100%;
  align-items:stretch;
  padding:18px 0 22px;
}
.gauntlet-roll-card,
.gauntlet-choice-card{
  min-width:0;
  min-height:360px;
}
.gauntlet-roll-card{animation:slotPulse .16s steps(2,end) infinite}
.gauntlet-roll-card .gauntlet-villain-image-wrap,
.gauntlet-choice-card .gauntlet-villain-image-wrap{height:220px}
.gauntlet-roll-card .gauntlet-villain-copy,
.gauntlet-choice-card .gauntlet-villain-copy{min-height:120px}
.gauntlet-choice-card{transition:transform .1s ease,box-shadow .1s ease,background .1s ease}
.gauntlet-choice-card.selectable:hover,
.gauntlet-choice-card.selectable:focus-visible{
  z-index:1;
  transform:translate(-3px,-5px);
  box-shadow:8px 9px 0 var(--ink);
}
@media(max-width:1180px){
  .gauntlet-roll-machine,
  .gauntlet-choice-row{
    grid-template-columns:repeat(5,220px);
    justify-content:start;
    overflow-x:auto;
    padding:18px 4px 24px;
  }
}
@media(max-width:760px){
  .gauntlet-roll-machine,
  .gauntlet-choice-row{grid-template-columns:repeat(5,177px);gap:16px}
  .gauntlet-roll-card,
  .gauntlet-choice-card{min-height:320px}
  .gauntlet-roll-card .gauntlet-villain-image-wrap,
  .gauntlet-choice-card .gauntlet-villain-image-wrap{height:180px}
}
@media(max-width:500px){
  .gauntlet-choice-card,
  .gauntlet-roll-card{display:flex;grid-template-columns:none}
  .gauntlet-choice-card .gauntlet-villain-image-wrap,
  .gauntlet-roll-card .gauntlet-villain-image-wrap{height:180px;border-right:0;border-bottom:3px solid var(--ink)}
}


/* ===== Villain gauntlet five equal cards hard-fix: 2026-09-13 ===== */
.gauntlet-grid {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.gauntlet-grid > .gauntlet-choice-row,
.gauntlet-grid > .gauntlet-roll-machine {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 18px 0 22px !important;
  overflow: visible !important;
  align-items: stretch !important;
}

.gauntlet-grid .gauntlet-choice-card,
.gauntlet-grid .gauntlet-roll-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  grid-column: auto !important;
  transform-origin: center bottom;
}

.gauntlet-grid .gauntlet-villain-image-wrap {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  min-height: 0 !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  border-right: 0 !important;
  border-bottom: 3px solid var(--ink) !important;
}

.gauntlet-grid .gauntlet-villain-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.gauntlet-grid .gauntlet-villain-copy {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 138px !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
}

.gauntlet-grid .gauntlet-villain-copy strong {
  font-size: clamp(1rem, 1.55vw, 1.55rem) !important;
  overflow-wrap: anywhere !important;
}

/* Keep all five visible on normal desktop/tablet widths. Only allow horizontal
   scrolling once the viewport is genuinely too narrow to keep cards usable. */
@media (max-width: 820px) {
  .gauntlet-grid {
    overflow-x: auto !important;
    padding-bottom: 8px;
  }
  .gauntlet-grid > .gauntlet-choice-row,
  .gauntlet-grid > .gauntlet-roll-machine {
    width: max-content !important;
    min-width: 100% !important;
    grid-template-columns: repeat(5, 168px) !important;
    grid-auto-columns: 168px !important;
    overflow: visible !important;
  }
}

/* ===== Villain gauntlet combat system: 2026-09-13 ===== */
.gauntlet-hud{display:flex;align-items:center;gap:22px;margin:0 0 18px;padding:14px 16px;border:4px solid var(--ink);background:#fff;box-shadow:4px 4px 0 var(--ink)}
.gauntlet-hp-block{display:grid;grid-template-columns:auto minmax(220px,1fr);align-items:center;gap:14px;flex:1;min-width:0}
.gauntlet-hp-block>strong,.gauntlet-score{font:900 clamp(.9rem,1.6vw,1.25rem)/1 "Courier New",monospace;letter-spacing:.05em;white-space:nowrap}
.gauntlet-hp-track{height:24px;border:3px solid var(--ink);background:#d4d3cf;overflow:hidden}
.gauntlet-hp-fill{width:100%;height:100%;background:var(--ink);transition:width .65s cubic-bezier(.22,.61,.36,1)}
.gauntlet-hud.critical .gauntlet-hp-fill{animation:gauntletCritical .75s steps(2,end) infinite}
@keyframes gauntletCritical{50%{opacity:.45}}
.gauntlet-score{font-size:clamp(1rem,2vw,1.5rem)}
.gauntlet-combat-panel{margin-top:24px}
.combat-current{max-width:520px;margin:0 auto;padding:18px;border:4px solid var(--ink);background:#fff;box-shadow:6px 6px 0 var(--ink)}
.combat-current .gauntlet-villain-card{width:100%;box-shadow:none}
.combat-current .gauntlet-villain-image-wrap{height:310px}
.combat-fight-button{width:100%;margin-top:16px;min-height:60px;font-size:1.15rem}
.combat-effect-note{margin:14px 0 0;padding:12px;border:3px solid var(--ink);background:#ecebe7;font:900 .74rem/1.45 "Courier New",monospace;text-transform:uppercase}
.combat-result-panel{padding:22px;border:4px solid var(--ink);background:#fff;box-shadow:6px 6px 0 var(--ink)}
.combat-result-panel h3,.gauntlet-end-state h2{margin:.2rem 0 .7rem;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(2.1rem,5vw,4.5rem);line-height:.95;text-transform:uppercase}
.combat-damage-line{margin:0 0 18px;font:900 1rem/1.35 "Courier New",monospace;text-transform:uppercase}
.battle-breakdown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}
.battle-breakdown>div{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border:2px solid var(--ink);background:#ecebe7;font:800 .68rem/1.2 "Courier New",monospace;text-transform:uppercase}
.combat-next-prompt{margin:22px 0 10px;font:900 .78rem/1.3 "Courier New",monospace;text-transform:uppercase}
.combat-choice-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.combat-choice-grid button{appearance:none;display:flex;min-height:140px;flex-direction:column;gap:8px;padding:12px;border:3px solid var(--ink);background:#ecebe7;color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.combat-choice-grid button:hover,.combat-choice-grid button:focus-visible{background:#fff;outline:none;transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.combat-choice-grid strong{font-family:Impact,"Arial Black",sans-serif;font-size:1.35rem;text-transform:uppercase}
.combat-choice-grid span{font:800 .66rem/1.35 "Courier New",monospace;text-transform:uppercase}
.gauntlet-battle-log{margin-top:22px}
.battle-log-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;padding:9px 0;border-bottom:2px solid var(--ink);font:800 .72rem/1.2 "Courier New",monospace;text-transform:uppercase}
.gauntlet-end-state{padding:34px 22px;border:5px solid var(--ink);background:repeating-linear-gradient(-45deg,#fff,#fff 12px,#ecebe7 12px,#ecebe7 24px);text-align:center;box-shadow:7px 7px 0 var(--ink)}
.gauntlet-end-state>p{font:900 .85rem/1.45 "Courier New",monospace;text-transform:uppercase}
.gauntlet-final-score{display:block;margin:18px 0 24px;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(2rem,5vw,4rem);letter-spacing:.04em}
.gauntlet-end-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.gauntlet-end-actions button{min-height:52px}
@media(max-width:980px){.combat-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.battle-breakdown{grid-template-columns:1fr}}
@media(max-width:650px){.gauntlet-hud{align-items:stretch;flex-direction:column}.gauntlet-hp-block{grid-template-columns:1fr}.combat-choice-grid{grid-template-columns:1fr}.battle-log-row{grid-template-columns:1fr;gap:3px}}


/* ===== Villain card quote window: 2026-09-13 ===== */
.gauntlet-villain-quote{
  box-sizing:border-box;
  width:100%;
  height:4.7rem;
  min-height:4.7rem;
  margin-top:10px;
  padding:7px 8px 7px 0;
  border-top:2px solid var(--ink);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  font:800 .9rem/1.35 "Courier New",monospace;
  text-transform:none;
  white-space:pre-line;
  overflow-wrap:anywhere;
}
.gauntlet-villain-quote::-webkit-scrollbar{width:10px}
.gauntlet-villain-quote::-webkit-scrollbar-track{background:#d7d6d1;border-left:1px solid var(--ink)}
.gauntlet-villain-quote::-webkit-scrollbar-thumb{background:var(--ink);border:2px solid #d7d6d1}
.gauntlet-villain-quote{scrollbar-width:auto;scrollbar-color:var(--ink) #d7d6d1}