:root {--motion-boost:1.9}
.hand-scroller {height:auto;min-height:290px;align-items:flex-end;padding:25px 12px 13px;gap:14px}
.hand-card.readable-card {display:flex;flex-direction:column;width:174px;min-width:174px;height:252px;aspect-ratio:auto;border:2px solid #998367;border-top:5px solid var(--deck-color);border-radius:7px;background:#f3e7c9;color:#30271c;text-align:left;line-height:1.25;box-shadow:3px 7px 0 #14110e70,0 13px 20px #100d0b60;overflow:visible}
.readable-card .card-name {display:flex;align-items:center;min-height:43px;padding:5px 9px;font:bold 1rem/1.08 Georgia,serif;overflow-wrap:anywhere}
.readable-card .card-art {display:block;height:64px;flex:none;position:relative;overflow:hidden;margin:0 5px;border-radius:3px;background:#d4c39d}
.readable-card .card-art img {height:100%;width:100%;object-fit:cover;object-position:50% 39%;border-radius:0}
.readable-card .card-rules {display:flex;flex-direction:column;gap:5px;padding:8px 9px 22px;flex:1;min-height:0}
.readable-card .card-effect {display:block;font-size:.88rem;line-height:1.25;font-weight:700}
.readable-card .card-prompt {display:block;font-size:.73rem;line-height:1.25;color:#5d4934;margin-top:auto}
.readable-card.resource .card-effect {font-size:.78rem;font-weight:400}
.hand-card.readable-card:hover:not(:disabled),.hand-card.readable-card:focus-visible {background:#fff0cf;transform:translateY(-16px) rotate(0);z-index:3}
.hand-card.readable-card.selected {border-color:#9ec383;transform:translateY(-15px) rotate(0);box-shadow:0 0 0 3px #42652e,3px 9px 0 #14110e70}
.hand-card.readable-card.useful {border-bottom:5px solid #eac878}
.readable-card.not-matching .card-prompt {color:#733f2d;font-weight:700}
.readable-card .key {bottom:4px;right:5px;font-size:.65rem;min-width:18px;padding:1px 4px}
.match-tab {position:absolute;left:8px;bottom:4px;font-size:.65rem;font-weight:700;color:#3c5526;line-height:1.2}
.ability-picking .readable-card.selected::after {bottom:6px;left:6px;right:27px;font-size:.72rem;padding:4px;color:#fff1d5;background:#4b341c;z-index:1}
.resource-name {font-size:.72rem;color:#ebd7b5;margin-top:2px}
.requirement {min-width:54px;width:auto;padding:5px 8px;border:1px solid #968063;border-radius:5px;background:#29241e}
.requirement.done {opacity:1;background:#34442a;border-color:#829b67}
.requirement.done .symbol {opacity:.7}
.requirement.done .counts {color:#deedc8}
.threat-name {font-weight:700}
.need-hint {font-size:.88rem;line-height:1.4}
.arena-head {display:grid;grid-template-columns:minmax(130px,1fr) minmax(230px,1.1fr) auto;gap:16px}
.companion-bar {display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:4px 0;border-bottom:1px solid #897454;min-height:50px;flex:none}
.arena-head .companion-bar {margin:0;border:0;padding:0}
.timekeeper {width:45px;height:43px;object-fit:contain;flex:none;transform-origin:50% 85%}
.companion-copy {flex:1;min-width:0;line-height:1.25}
.companion-title {display:block;color:#d8bf95;font-size:.72rem}
#companion-caption {display:block;font-size:.87rem;font-weight:700;color:#f5e3bd;margin-top:3px;overflow-wrap:anywhere}
.companion-bar.speaking .timekeeper {animation:timekeeper-talk .65s ease-in-out infinite alternate}
.companion-bar.speaking #companion-caption {color:#ffdf88}
.narrator-button {font-size:.77rem;padding:6px 12px;min-height:44px;flex:none}
.narrator-settings {border-top:1px solid #a2875e;padding-top:18px;display:grid;gap:15px}
.narrator-heading {display:flex;align-items:center;gap:16px}
.narrator-heading img {width:76px;height:72px;object-fit:contain}
.narrator-heading h3 {margin:0 0 5px;font-size:1.3rem}
.narrator-heading p {margin:0;color:#decdb0;font-size:.85rem}
.narrator-settings select {min-width:0;max-width:240px;width:100%;font-size:.9rem}
.narrator-actions {display:flex;gap:10px;flex-wrap:wrap}
#narrator-status {font-size:.88rem;color:#ffe0a1;margin:0;min-height:25px}
.narrator-help {font-size:.84rem;line-height:1.5;color:#dbc6a2;margin:0}
.compact-fullscreen {display:none}
.card-inspection {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:25px;align-items:center}
.card-inspection .wide-art {max-height:57dvh}
.inspection-rules h3 {font:700 1.6rem/1.15 Georgia,serif;margin:10px 0 16px}
.inspection-rules p {font-size:1.05rem;line-height:1.5}
.inspection-prompt {color:#f2cb7e;font-weight:700}
.card-packet .packet-piece {position:absolute;inset:0;width:100%;height:100%;min-width:0;translate:var(--packet-offset) var(--packet-offset);transform:none;animation:none;border-color:#e6c58a;box-shadow:0 15px 25px #0009;pointer-events:none}
.card-packet .packet-piece img {position:static;inset:auto;border:none;translate:none;box-shadow:none}
.card-packet .packet-piece .card-art img {height:100%;object-fit:cover;object-position:50% 39%}
.card-packet .packet-piece .symbol img {height:100%;object-fit:contain}
.combat-spark {position:fixed;width:9px;height:20px;background:#ffe49b;clip-path:polygon(50% 0,100% 70%,50% 100%,0 70%)}
.draw-recap {position:fixed;padding:4px 9px;background:#e9d494;color:#342514;border:2px solid #c5ab6c;border-radius:4px;white-space:nowrap;font-size:.85rem;font-weight:700;box-shadow:0 3px 8px #1a130c70}
.final-countdown .timer {text-shadow:0 3px 0 #472419;color:#ffd2a5}
body:has(.event-panel) .encounter-zone {display:none}
.event-panel .event-thumb {display:block;width:65px;max-height:105px;object-fit:contain;float:right;margin:0 0 8px 12px;cursor:zoom-in}
.event-panel::after {content:'';display:block;clear:both}
@keyframes timekeeper-talk {from{transform:rotate(-4deg) translateY(0)}to{transform:rotate(4deg) translateY(-3px)}}
@keyframes hand-living {0%,100%{translate:0 0;rotate:-.65deg}30%{translate:1.9px -7.6px;rotate:.85deg}65%{translate:-1.9px -3.8px;rotate:-.38deg}}
@keyframes enemy-living {0%,100%{translate:0 0;rotate:-.65deg}50%{translate:0 -9.5px;rotate:.85deg}}
@keyframes deck-living {0%,100%{translate:0 0}50%{translate:0 -5.7px}}
@media(min-width:1101px) and (min-height:650px) {
 body:has(.battle) #app {height:100dvh;min-height:0;grid-template-rows:64px minmax(0,1fr)}
 body:has(.battle) #app>main {grid-template-rows:minmax(0,1fr) auto;min-height:0}
 .battle {min-height:0;padding-top:9px}
 .hand-scroller {height:282px;min-height:282px;padding-top:22px;padding-bottom:8px}
 .hand-card.readable-card {height:252px}
 .encounter-zone {min-height:0;grid-template-columns:110px minmax(130px,1fr) minmax(220px,1.2fr)}
 .threat {max-height:100%;height:100%;width:auto}
 .threat.boss {max-height:100%;height:auto;width:100%}
 .companion-bar {margin-bottom:8px;min-height:44px}
 .timekeeper {width:40px;height:38px}
 .paid-strip {min-height:20px;max-height:40px;margin-top:8px}
 .deck-stack {max-height:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}
 .deck-stack img {width:auto;max-width:100%;height:auto;max-height:calc(100% - 40px)}
 .deck-stack .stack-count {flex:none;font-size:.75rem;margin-top:8px}
 .threat-info {padding-top:0;padding-bottom:0}
 .threat-name {font-size:1.3rem;margin:5px 0 9px}
 .need-hint {font-size:.8rem;margin:7px 0 0}
 .requirement .symbol {width:31px;height:31px}
 .requirement .counts {font-size:.95rem}
 .hand-zone {margin-top:10px;padding-top:8px;padding-bottom:5px}
 .hand-zone {display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:18px}
 .hand-top {grid-column:1;grid-row:1/3;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;max-width:100%;margin:0}
 .hand-heading {flex:none;max-width:100%}
 .hand-meta {font-size:.73rem}
 .hand-zone .ability-guide {display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;flex:1;gap:8px;padding:8px 0 7px 10px}
 .hand-zone .ability-heading {gap:5px;line-height:1.2}
 .hand-zone .ability-heading>span:first-child {flex-basis:100%;font-size:.68rem}
 .hand-zone .ability-count {flex-basis:100%}
 .hand-zone .ability-guide p {font-size:.8rem}
 .hand-zone #ability-status {font-size:.75rem}
 .hand-zone .ability-button {min-height:44px;width:100%;max-width:100%;font-size:.8rem;justify-content:center}
 .hand-scroller {grid-column:2;grid-row:1;max-width:100%;margin:0}
 .selection-bar {grid-column:2;grid-row:2;max-width:100%;margin:0}
 .footer-hint {grid-column:1/-1;grid-row:3}
 .hand-heading h3 {font-size:1.05rem}
 .selection-bar {min-height:44px}
 .footer-hint {padding-bottom:0;font-size:.68rem}
}
@media(min-width:1101px) and (min-height:650px) and (max-height:800px) {
 .hand-card.readable-card {height:220px}
 .hand-scroller {height:246px;min-height:246px;padding-top:18px;padding-bottom:8px}
 .readable-card .card-art {height:43px}
 .readable-card .card-name {min-height:36px;font-size:.94rem}
 .readable-card .card-rules {gap:4px;padding-top:6px;padding-bottom:20px}
 .readable-card .card-effect {font-size:.84rem}
 .readable-card .card-prompt {font-size:.7rem}
 .companion-bar {min-height:39px;margin-bottom:5px;padding:0}
 .timekeeper {width:35px;height:34px}
 .companion-title {font-size:.66rem}
 #companion-caption {font-size:.8rem}
 .companion-bar .narrator-button {min-height:38px;padding:5px 10px}
 .hand-top {gap:8px;margin-bottom:0}
}
@media(min-width:721px) and (max-width:1100px) {
 .hand-card.readable-card {width:168px;min-width:168px}
 .encounter-zone {grid-template-columns:100px minmax(160px,1fr) minmax(210px,1fr);min-height:270px}
 .threat {max-height:280px}
 .hand-top {gap:15px}
 .hand-heading {flex-basis:160px}
}
@media(max-width:720px) {
 .arena-head {grid-template-columns:minmax(0,1fr) auto;gap:5px 10px}
 .arena-head .companion-bar {grid-column:1/-1;grid-row:2;border-bottom:1px solid #897454;padding:2px 0 5px}
 .clock-face {grid-column:2;grid-row:1}
 .hand-scroller {height:auto;min-height:289px;gap:12px;padding:25px 10px 12px}
 .hand-card.readable-card {width:170px;min-width:170px;height:252px}
 .readable-card .card-effect {font-size:.88rem}
 .readable-card .card-prompt {font-size:.73rem}
 .ability-guide p {font-size:.82rem}
 .ability-guide {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px}
 .ability-copy {display:contents}
 .ability-heading {grid-column:1;grid-row:1}
 .ability-guide .ability-button {grid-column:2;grid-row:1}
 #ability-rule {grid-column:1/-1;grid-row:2}
 #ability-status {grid-column:1/-1;grid-row:3}
 .ability-guide .ability-targets {grid-column:1/-1;grid-row:4}
 #ability-status {font-size:.78rem}
 .ability-heading strong {font-size:1rem}
 .companion-bar {margin-bottom:9px;gap:7px}
 .timekeeper {width:38px;height:39px}
 .companion-title {font-size:.67rem}
 #companion-caption {font-size:.78rem}
 .narrator-button {font-size:.72rem;padding:7px 9px}
 .encounter-zone {min-height:0;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto;gap:7px 15px;padding:8px 0}
 .threat-wrap {grid-column:1;grid-row:1/4;height:190px;max-height:190px;align-self:center}
 .threat {height:190px;max-height:190px;width:auto;max-width:100%}
 .threat.boss {height:auto;max-height:190px;width:100%}
 .threat-info {display:contents;overflow:visible}
 .threat-info>.type-label {grid-column:2;grid-row:1;align-self:end}
 .threat-name {grid-column:2;grid-row:2;font-size:1.18rem;margin:0;align-self:center}
 .need-hint {grid-column:2;grid-row:3;font-size:.81rem;margin:0;align-self:start}
 .requirements {grid-column:1/-1;grid-row:4;justify-content:center;gap:8px}
 .paid-strip {grid-column:1/-1;grid-row:5;min-height:0;max-height:43px;margin-top:3px}
 .paid-strip:empty {display:none}
 .requirement {min-width:43px;padding:4px 5px}
 .resource-name {font-size:.65rem}
 .card-inspection {grid-template-columns:1fr;gap:18px}
 .card-inspection .wide-art {max-height:35dvh}
 .inspection-rules h3 {font-size:1.4rem}
 .narrator-settings .setting-row {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .narrator-settings input[type=checkbox] {justify-self:end}
 .narrator-actions button {flex:1}
 .event-panel p {font-size:.95rem}
 .event-panel h3 {font-size:1.2rem}
 body.using-ability .resource-name {display:none}
 body.using-ability .threat-wrap {grid-column:1;grid-row:1/4;height:95px;max-height:95px}
 body.using-ability .requirements {grid-column:2;grid-row:3;justify-content:flex-start;gap:5px}
}
@media(prefers-reduced-motion:reduce) {
 .companion-bar .timekeeper,.hand-card,.threat-wrap,.deck-stack {animation:none!important;translate:0 0!important;rotate:0deg!important}
 .combat-spark {display:none!important}
}
body.calm .companion-bar .timekeeper {animation:none!important}
body.calm .combat-spark {display:none!important}

/* Keep the complete central illustration separate from the translated rules. */
.hand-card.readable-card {height:252px}
.readable-card .card-art {height:96px}
.readable-card .card-art img {object-position:50% 25%}
.readable-card.resource .card-art {height:126px}
.readable-card.resource .card-art img {object-position:50% 50%}
.readable-card.resource .card-rules {padding:5px 9px 20px;gap:3px}
.readable-card.resource .card-effect {font-size:.75rem;line-height:1.25}
.readable-card.resource .card-prompt {font-size:.7rem;line-height:1.2}
.readable-card.action .card-rules {padding:5px 9px 20px;gap:4px}
.readable-card.action .card-effect {font-size:.82rem;line-height:1.25}
.readable-card.action .card-prompt {font-size:.7rem;line-height:1.2}
.card-packet .packet-piece .card-art img {object-position:50% 25%}
.card-packet .packet-piece.resource .card-art img {object-position:50% 50%}
@media(min-width:1101px) and (min-height:650px) and (max-height:800px){
 .hand-card.readable-card {height:252px}
 .hand-scroller {height:278px;min-height:278px}
 .readable-card .card-art {height:96px}
 .readable-card.resource .card-art {height:126px}
 .readable-card .card-rules {padding-top:6px;padding-bottom:20px}
 .readable-card.resource .card-rules {padding:5px 9px 20px}
}
@media(max-width:380px){
 .tools [data-action=fullscreen] {display:none}
 .compact-fullscreen {display:block}
}