/* The artwork is decoded from the official printed components, including its numbers. */
.card-counters{--counter-size:26px;position:absolute;z-index:3;top:27%;right:5%;max-width:90%;display:grid;gap:4px;justify-items:end;pointer-events:none;filter:drop-shadow(0 2px 3px #000a)}
.card-counter{display:flex;gap:4px;align-items:center;justify-content:flex-end;max-width:100%}
.counter-stack{display:inline-block;position:relative;width:calc(var(--counter-size) + (var(--counter-layers) - 1)*2px);height:calc(var(--counter-size) + 5px);flex:none}
.counter-piece{position:absolute!important;width:var(--counter-size)!important;height:var(--counter-size)!important;max-width:none!important;object-fit:contain!important;left:calc((var(--counter-layers) - var(--counter-layer) - 1)*2px);top:calc((var(--counter-layers) - var(--counter-layer) - 1)*2px);z-index:var(--counter-layer);border:0!important;border-radius:0!important;box-shadow:none!important;filter:none!important;background:none!important}
.counter-multiple{position:absolute;z-index:4;right:-2px;bottom:-2px;min-width:15px;padding:1px 3px;border-radius:4px;background:#08121deb;color:#fff;font:700 9px/1.2 Barlow,Arial,sans-serif;box-shadow:0 1px 3px #0008}
.in-battle .villain-portrait,.in-battle .hero-portrait,.in-battle .main-scheme-card{position:relative}
.in-battle .field-card .card-counters{--counter-size:clamp(11px,calc(var(--table-field-card-width)/3.8),27px);gap:2px}
.in-battle .field-card .card-counter{gap:1px}
.in-battle .field-card .counter-multiple{font-size:8px}
.in-battle .villain-portrait .card-counters{--counter-size:clamp(15px,2.1vw,28px);right:4%;max-width:96%}
.in-battle .scheme-main.scheme-with-card{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px}
.in-battle .main-scheme-card{height:100%;min-height:0;min-width:0;width:auto;aspect-ratio:7/5;max-width:100%;justify-self:center;display:block;background:transparent;overflow:visible}
.in-battle .main-scheme-card>.card-art{width:100%;height:100%;object-fit:contain;display:block;box-shadow:0 3px 10px #0006}
.in-battle .main-scheme-card>.card-fallback,.in-battle .hero-portrait>.card-fallback,.in-battle .villain-portrait>.card-fallback{width:100%;height:100%;min-height:0;max-height:100%;aspect-ratio:auto;overflow:hidden}
.in-battle .main-scheme-card .card-counters{top:22%;--counter-size:clamp(17px,2vw,29px)}
.in-battle .scheme-copy{min-width:0;display:flex;flex-direction:column;gap:5px}
.in-battle .scheme-main .scheme-copy h3{white-space:normal;font-size:20px;line-height:1.05;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.in-battle .hero-portrait{width:auto;aspect-ratio:5/7;align-self:center;max-width:100%;overflow:visible}
.in-battle .hero-panel .hero-portrait .portrait{object-fit:contain;object-position:center}
.in-battle .hero-panel .card-counters{--counter-size:27px}
.in-battle .modified-stats{border-left:2px solid #d3e8a1;padding-left:5px}
.in-battle .table-mobile .hero-panel,.in-battle .table-landscape .hero-panel{grid-template-columns:36px minmax(0,1fr)}
.in-battle .table-mobile .hero-portrait,.in-battle .table-landscape .hero-portrait{width:36px;height:50px;max-height:100%;justify-self:center;align-self:center}
.in-battle .table-mobile .hero-panel .card-counters,.in-battle .table-landscape .hero-panel .card-counters{--counter-size:10px;right:0;top:25%;gap:1px;max-width:100%}
.in-battle .table-mobile .hero-panel .card-counter,.in-battle .table-landscape .hero-panel .card-counter{gap:0}
.in-battle .table-mobile .hero-panel .counter-multiple,.in-battle .table-landscape .hero-panel .counter-multiple{font-size:7px;min-width:10px;padding:0 2px}
.in-battle .table-mobile .hero-panel .modified-stats,.in-battle .table-landscape .hero-panel .modified-stats{grid-column:2;grid-row:auto;display:flex;flex-wrap:wrap;margin:0;gap:2px}
.in-battle .table-mobile .scheme-main.scheme-with-card{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:5px;padding:5px}
.in-battle .table-mobile .scheme-main .scheme-copy h3{font-size:13px;-webkit-line-clamp:3}
.in-battle .table-mobile .scheme-copy .eyebrow{font-size:6px;letter-spacing:0}
.in-battle .table-mobile .villain-portrait .card-counters{--counter-size:13px}
.in-battle .table-mobile .main-scheme-card .card-counters{--counter-size:15px;gap:1px}
.in-battle .table-landscape .scheme-main.scheme-with-card{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding:3px 5px;gap:5px}
.in-battle .table-landscape .scheme-main .scheme-copy h3{font-size:12px;-webkit-line-clamp:2}
.in-battle .table-landscape .main-scheme-card .card-counters,.in-battle .table-landscape .villain-portrait .card-counters{--counter-size:11px;gap:1px;top:22%}
.in-battle .table-landscape .card-counter{gap:0}
.in-battle .table-landscape .counter-multiple{font-size:7px;padding:0 2px;min-width:10px}
.inspect>.inspect-card-face{position:relative;align-self:start;justify-self:center;width:100%;max-width:260px}
.inspect-card-face>.card-art,.inspect-card-face>.card-fallback{display:block;width:100%;height:auto}
.inspect-card-face .card-counters{--counter-size:43px;top:27%;right:6%;gap:6px}
.inspect-card-face .counter-multiple{font-size:12px;min-width:20px}
.inspect-card-state{padding:10px 12px;border:1px solid #91aabb35;border-radius:5px;color:#cadbe6;font-size:12px;line-height:1.7}
@media(max-width:650px){.inspect>.inspect-card-face{max-width:210px}.inspect-card-face .card-counters{--counter-size:35px}}

/* The original player and villain dial artwork holds a live two-digit readout. */
.health-dial{--dial-width:148px;display:inline-block;position:relative;flex:none;width:var(--dial-width);max-width:100%;aspect-ratio:448/220;background:url('assets/dials/dial-hero.png') center/100% 100% no-repeat;vertical-align:middle;filter:drop-shadow(0 3px 4px #0007);font-size:calc(var(--dial-width)*.105)}
.health-dial-villain{aspect-ratio:671/333;background-image:url('assets/dials/dial-villain.png');font-size:calc(var(--dial-width)*.092)}
.health-readout{position:absolute;left:31%;top:35%;width:38%;height:32%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:2px;border:1px solid #bcced5;border-radius:5px;background:#08121e;box-shadow:0 0 0 1px #03101c,0 1px 3px #0008;box-sizing:border-box}
.health-dial-villain .health-readout{left:35.5%;top:39%;width:29%;height:24%;padding:1px;border-color:#d9d6d1}
.health-digit{position:relative;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;border-radius:2px;background:linear-gradient(#1d7e9c 0%,#2b91ae 47%,#105d79 51%,#267e98 100%);color:#fff;font-family:Condensed,'Arial Narrow',Arial,sans-serif;font-weight:800;font-style:italic;font-size:inherit;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 1px 1px #000;box-shadow:inset 0 1px 2px #0008}
.health-digit:after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#020a162b;pointer-events:none}
.health-dial-villain .health-digit{background:linear-gradient(#8d2528 0%,#b43c3d 47%,#722326 51%,#9f3033 100%)}
.health-unlimited{grid-column:1/-1;font-style:normal}
.health-overflow{position:absolute;right:18%;top:38%;color:#fff;font-size:.8em;font-weight:800;text-shadow:0 1px 2px #000}
.in-battle .villain-info>.health-dial{display:block;margin:4px 0}
.in-battle .hero-copy>.health-dial{display:block;margin:5px 0 2px}
.field-health-dial{position:absolute;z-index:3;bottom:12%;left:3%;right:3%;pointer-events:none;text-align:center}
.in-battle .field-health-dial>.health-dial{--dial-width:clamp(40px,calc(var(--table-field-card-width)*.94),110px)}
.in-battle .table-mobile .villain-info>.health-dial{--dial-width:82px;margin:2px 0;grid-column:1/-1}
.in-battle .table-mobile .hero-copy,.in-battle .table-landscape .hero-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:0 6px;align-items:center;min-width:0}
.in-battle .table-mobile .hero-copy>.eyebrow,.in-battle .table-mobile .hero-copy>h3,.in-battle .table-landscape .hero-copy>.eyebrow,.in-battle .table-landscape .hero-copy>h3{grid-column:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.in-battle .table-mobile .hero-copy>.health-dial,.in-battle .table-landscape .hero-copy>.health-dial{--dial-width:76px;grid-column:2;grid-row:1/span 2;margin:0}
.in-battle .table-mobile .health-dial-hero .health-readout,.in-battle .table-landscape .health-dial-hero .health-readout,.field-health-dial .health-dial-hero .health-readout{left:26%;top:28%;width:48%;height:45%;padding:1px}
.in-battle .table-mobile .health-dial-hero,.in-battle .table-landscape .health-dial-hero{font-size:calc(var(--dial-width)*.16)}
.in-battle .table-mobile .health-dial-villain .health-readout,.in-battle .table-landscape .health-dial-villain .health-readout,.field-health-dial .health-dial-villain .health-readout{left:31%;top:35%;width:38%;height:34%;padding:1px;gap:1px}
.in-battle .table-mobile .health-dial-villain,.in-battle .table-landscape .health-dial-villain,.field-health-dial .health-dial-villain{font-size:calc(var(--dial-width)*.125)}
.in-battle .table-landscape .villain-info{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:0 5px;align-items:center}
.in-battle .table-landscape .villain-info>.stage-label,.in-battle .table-landscape .villain-info>h2{grid-column:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.in-battle .table-landscape .villain-info>.health-dial{--dial-width:64px;grid-column:2;grid-row:1/span 2;margin:0}
.inspect article>.health-dial{--dial-width:180px;display:block;margin:10px 0}
@media(prefers-contrast:more){.health-readout{border:2px solid #fff}.health-digit{background:#092334}.health-dial-villain .health-digit{background:#4f1318}}

/* Card actions stay visible before the large card and its rules, also on short screens. */
.inspect-action-panel{position:sticky;top:0;z-index:8;padding:10px 34px 10px 12px;margin:0 0 14px;background:#122635f5;border:1px solid #91aabb55;border-radius:6px;box-shadow:0 4px 10px #0004;backdrop-filter:blur(10px)}
.inspect-action-buttons{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inspect-action-buttons:empty{display:none}
.inspect-action-buttons button{min-height:40px;font-size:11px;padding:10px 14px}
.inspect-action-buttons button:disabled{opacity:.55;cursor:not-allowed}
.inspect-action-reason{font-size:12px;line-height:1.5;color:#c7d9e5;margin:8px 0 0}
.inspect-action-buttons:empty+.inspect-action-reason{margin:0}
.in-battle .hand-play-hint{color:#daefad;font-weight:600}
.card-action-hint{position:absolute;z-index:4;top:5%;right:4%;padding:3px 6px;border-radius:4px;background:#d8eca9;color:#172b24;font:700 9px/1.1 Barlow,Arial,sans-serif;box-shadow:0 2px 5px #0007;pointer-events:none}
#dialog.card-inspector .close{z-index:10}
@media(max-height:450px){.inspect-action-panel{padding:6px 32px 6px 8px;margin-bottom:8px}.inspect-action-buttons button{min-height:32px;padding:7px 10px;font-size:10px}.inspect-action-reason{font-size:10px;margin-top:5px}}

/* Playable hand cards are the action; inspection remains a separate, optional control. */
.in-battle .hand-card.is-playable>.card-tile{cursor:pointer;border-radius:6px;outline:2px solid #c0e58e;outline-offset:1px;box-shadow:0 0 9px 2px #c0e58e70,0 0 24px #9bd28235}
.in-battle .hand-card.is-playable>.card-tile:hover,.in-battle .hand-card.is-playable>.card-tile:focus-visible{outline-color:#f1ffd9;box-shadow:0 0 13px 3px #c9f094a8,0 0 28px #a5dd7560}
.in-battle .hand-card.is-playable .card-art{filter:none}
.in-battle .hand-card .card-art{-webkit-touch-callout:none}
.in-battle .hand-card:focus-within{z-index:50!important}
.in-battle .hand-inspect{position:absolute;z-index:3;right:3px;top:3px;min-width:28px;height:22px;padding:2px 5px;border:1px solid #b2c9dc70;border-radius:4px;background:#071725df;color:#e5eef4;font-size:9px;line-height:1;cursor:pointer}
.in-battle .hand-inspect:hover,.in-battle .hand-inspect:focus-visible{background:#284456;border-color:#e1edda}
.in-battle .hand-fan .hand-card:hover{z-index:50!important}
.in-battle .hand-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-height:450px){.in-battle .hand-inspect{height:18px;min-width:23px;right:1px;top:1px;padding:1px 3px;font-size:8px}}
@media(prefers-contrast:more){.in-battle .hand-card.is-playable>.card-tile{outline:3px solid #fff}}
.in-battle .field-card>.can-use-card{outline:1px solid #a8dbe0;outline-offset:1px;box-shadow:0 0 8px #8fd7dc55}
.in-battle .field-inspect{position:absolute;z-index:5;right:3px;top:3px;min-width:22px;height:18px;padding:1px 3px;border:1px solid #b2c9dc70;border-radius:3px;background:#071725ed;color:#e5eef4;font-size:8px;line-height:1;cursor:pointer}
.in-battle .field-inspect:hover,.in-battle .field-inspect:focus-visible{background:#284456;border-color:#e1edda}
.in-battle .card-action-hint{top:auto;bottom:24%;right:4%;font-size:8px}