/* v0.20.1 · one declaration title; large comic focus with protected HUD paint.
   HUD layout is owned by v19.css. No timing, artwork, sound or rule changes. */
.tb-shell .arena-effects{z-index:18;overflow:hidden;pointer-events:none}
.tb-shell .arena-effects .fx-source-frame>.fx-tag,
.tb-shell .arena-effects .fx-target-frame>.fx-tag{display:none!important}
.tb-shell .arena-effects .fx-fly-card{padding:3px;border-radius:0;box-shadow:2px 3px 0 #132c2490}
.tb-shell .arena-effects .fx-fly-card>b{display:none!important}
.tb-shell .arena-effects .fx-target-hit>b{display:none!important}
.tb-shell .arena-effects .fx-target-hit .fx-impact-ring{opacity:.7}
.fx-play-name{position:absolute;z-index:25;display:block;width:max-content;padding:2px 3px 4px;border:0;background:transparent;color:#f4dfb0;box-shadow:none;font:1000 italic clamp(20px,3.2vw,30px)/1.12 var(--sans,sans-serif);-webkit-text-stroke:1.25px #142d25;paint-order:stroke fill;text-shadow:1px 2px 0 #142d25,3px 3px 0 #b54a35;text-align:center;overflow-wrap:anywhere;transform:translate(-50%,-50%);pointer-events:none}
.fx-play-name>b{font:inherit;letter-spacing:.01em}
/* The flying image hands its heading to the settled pile only after motion.
   While a comic or skill owns the heading, the pile is a quiet history layer. */
.tb-shell:has(.arena-effects .fx-play-name) .tb-pile .tb-pcard.is-newest>b,
.tb-shell:has(.arena-effects .fx-comic-theatre) .tb-pile .tb-pcard.is-newest>b,
.tb-shell:has(.arena-effects .fx-role-skill:not(.fx-role-skill-mini)) .tb-pile .tb-pcard.is-newest>b{visibility:hidden}
.tb-shell:has(.arena-effects .fx-comic-theatre) .tb-pile,
.tb-shell:has(.arena-effects .fx-role-skill:not(.fx-role-skill-mini)) .tb-pile{opacity:.16}
.tb-shell .arena-effects .fx-comic-theatre{overflow:hidden;contain:layout paint style;border-radius:0;--fx-title-h:27px;--fx-caption-h:25px}
.tb-shell .arena-effects .fx-comic-theatre>.fx-panel15{inset:2px;transform:none;background:transparent;border:0;border-radius:0;box-shadow:none}
.tb-shell .arena-effects .fx-comic-theatre>.fx-card-title{left:4px;right:4px;top:var(--fx-title-top,3px);max-width:none;min-height:24px;width:auto;margin:0;padding:2px 4px 4px;transform:none;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;color:#f4dfb0!important;-webkit-text-stroke:1.3px #142d25;paint-order:stroke fill;text-shadow:1px 2px 0 #142d25,3px 3px 0 #b54a35;white-space:normal;overflow-wrap:anywhere;text-overflow:clip;text-align:center;font-size:clamp(21px,calc(var(--theatre-h,200px) * .12),30px);line-height:1.08;letter-spacing:0;animation:none!important}
.tb-shell .arena-effects .fx-comic-theatre>.fx-main-actor{inset:3px 0 18px;transform-origin:50% 65%}
.tb-shell .arena-effects .fx-comic-theatre .fx-main-sprite{object-fit:contain}
.tb-shell .arena-effects .fx-comic-theatre>.fx-perspective-cut{inset:23% 3% 19%;overflow:hidden;opacity:.65}
.tb-shell .arena-effects .fx-comic-theatre>.fx-impact-word{left:auto;right:5%;top:35%;max-width:80%;font-size:clamp(30px,calc(var(--theatre-h,200px) * .26),48px);line-height:1.05;letter-spacing:-.04em;text-align:right;text-shadow:1px 2px #f1deb5,2px 3px #142d25;overflow-wrap:anywhere}
.tb-shell .arena-effects .fx-comic-theatre>.fx-scene-caption{left:50%;right:auto;top:auto;bottom:3px;max-width:calc(100% - 8px);width:max-content;padding:2px 4px;transform:translateX(-50%);border:0!important;border-radius:0;box-shadow:none!important;background:transparent!important;color:#f4dfb0!important;-webkit-text-stroke:.55px #142d25;paint-order:stroke fill;text-shadow:1px 1px #142d25,2px 2px #142d25;white-space:normal;overflow-wrap:anywhere;text-overflow:clip;font-size:clamp(12px,calc(var(--theatre-h,200px) * .065),15px);line-height:1.18;letter-spacing:0}
.tb-shell .arena-effects .fx-comic-theatre[data-fx-layout=land]>.fx-main-actor{inset:1px 0 3px}
.tb-shell .arena-effects .fx-comic-theatre[data-fx-layout=land] .fx-main-sprite{object-fit:cover;object-position:50% 42%}
.tb-shell .arena-effects .fx-comic-theatre.has-human-cutout .fx-main-sprite,
.tb-shell .arena-effects .fx-comic-theatre.has-human-cutout .fx-perspective-sprite{object-fit:contain;object-position:50% 50%;border:0;border-radius:0;background:transparent;box-shadow:none}
.tb-shell .arena-effects .fx-comic-theatre[data-fx-layout=land]>.fx-scene-caption{display:none!important}
.tb-shell .arena-effects .fx-comic-theatre>.fx-mode-state{right:4px;left:auto;top:auto;bottom:27px;font-size:11px;max-width:70%;padding:2px 4px;gap:3px}
.tb-shell .arena-effects .fx-comic-theatre[data-fx-layout=tight]{--fx-caption-h:2px;--fx-title-h:23px}
.tb-shell .arena-effects .fx-comic-theatre[data-fx-layout=tight]>.fx-card-title{font-size:15px;line-height:1.05}
.tb-shell .arena-effects .fx-comic-theatre[data-fx-layout=tight]>.fx-scene-caption,
.tb-shell .arena-effects .fx-comic-theatre[data-fx-layout=tight]>.fx-impact-word,
.tb-shell .arena-effects .fx-comic-theatre[data-fx-layout=tight]>.fx-mode-state,
.tb-shell .arena-effects .fx-comic-theatre[data-fx-layout=tight]>.fx-perspective-cut{display:none!important}
/* Main occupational gestures keep their portrait animation; copy has a stable
   footer and a single skill name. Secondary triggers use one small bookmark. */
.tb-shell .arena-effects .fx-role-skill:not(.fx-role-skill-mini){overflow:hidden;contain:layout paint style}
.tb-shell .arena-effects .fx-role-skill:not(.fx-role-skill-mini) .sk19-copy{left:3px!important;right:3px!important;bottom:3px!important;gap:3px;align-items:center;text-align:center;transform:none;min-height:35px}
.tb-shell .arena-effects .fx-role-skill:not(.fx-role-skill-mini) .sk19-copy strong{font-size:clamp(22px,3.6vw,32px)!important;line-height:1.12;letter-spacing:-.025em;-webkit-text-stroke:.8px #142d25;text-shadow:1px 2px #142d25,2px 3px var(--sk-accent);overflow-wrap:anywhere}
.tb-shell .arena-effects .fx-role-skill .fx-skill-meta{display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px!important;line-height:13px;letter-spacing:0;color:#f1d6a3}
.fx-skill-meta>em,.fx-skill-tag>i{display:grid;place-items:center;flex:none;width:15px;height:15px;border-radius:50%;background:var(--sk-accent,#43816a);color:#142d25;font:1000 10px/1 var(--sans,sans-serif);font-style:normal;text-shadow:none}
.tb-shell .arena-effects .fx-role-skill:not(.fx-role-skill-mini) .sk19-actor{bottom:12%!important;height:97%!important}
.tb-shell .arena-effects .fx-role-skill:not(.fx-role-skill-mini) .sk19-prop-wrap{height:45%;top:8%}
.tb-shell .arena-effects .fx-role-skill:not(.fx-role-skill-mini) .sk19-word{right:5%!important;top:7%!important;max-width:65%;font-size:clamp(26px,4vw,40px)!important;line-height:1.1}
.tb-shell .arena-effects .fx-role-skill.is-tight .sk19-word,
.tb-shell .arena-effects .fx-role-skill.is-tight .sk19-echo,
.tb-shell .arena-effects .fx-role-skill.is-tight .sk19-prop-wrap{display:none!important}
.tb-shell .arena-effects .fx-role-skill.is-tight .sk19-actor{height:100%!important;bottom:0!important;opacity:.35}
/* A red-hot attack uses the actual caster's public portrait. The shared face
   anchors in v19.css place blush, brows and steam on skin only. Never tint the
   full character, card or theatre. Match the normal avatar's exact 3:4 fit. */
.role-expression-frame{position:relative;display:block;height:100%;width:auto;aspect-ratio:3/4;margin-inline:auto;overflow:visible;isolation:isolate;background:none;border:0;box-shadow:none}
.tb-shell .arena-effects .role-expression-frame>img.role-portrait{position:absolute;inset:auto;left:50%;top:3%;right:auto;bottom:auto;display:block;width:114%!important;height:auto!important;max-width:none!important;max-height:none!important;margin:0;object-fit:contain;object-position:top center;transform:translateX(-50%)!important;filter:drop-shadow(0 3px 4px #0007)!important;border-radius:0}
.tb-shell .arena-effects .role-expression-frame>.redhot-heat{--card-w:140px;font-size:clamp(18px,4vw,28px)}
.tb-shell .arena-effects .fx-redhot-cast{position:absolute;display:block;z-index:12;transform:translate(-50%,-50%);pointer-events:none;background:none;border:0;box-shadow:none;overflow:visible}
.tb-shell .arena-effects .fx-redhot-caster{position:absolute;left:4%;bottom:1%;width:auto;height:96%;aspect-ratio:3/4;z-index:6;pointer-events:none;overflow:visible}
.tb-shell .arena-effects .fx-main-actor.is-redhot-attack>.fx-main-sprite{opacity:.58}
.tb-shell .arena-effects .sk19-scene.is-redhot-attack>.sk19-echo{opacity:.16}
.tb-shell .arena-effects .fx-cast-anger{position:absolute;z-index:8;right:-15%;top:8%;padding:0;background:none;border:0;box-shadow:none;color:#f1d49d;font:1000 italic clamp(21px,4vw,31px)/1 var(--sans,sans-serif);white-space:nowrap;-webkit-text-stroke:1px #612e24;paint-order:stroke fill;text-shadow:2px 2px #a93d2c,3px 3px #142d25;transform:rotate(-8deg);pointer-events:none}
.tb-shell .arena-effects .fx-redhot-cast>.fx-cast-anger{right:-35%;top:auto;bottom:26%}
.tb-shell .arena-effects .sk19-scene>.fx-cast-anger{right:4%;top:9%}
.tb-shell .arena-effects .fx-role-skill-mini{display:flex;align-items:center;justify-content:center;overflow:hidden;contain:layout paint style}
.fx-skill-tag{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:24px;padding:2px 5px;box-sizing:border-box;background:#eddbb4;color:#19362b;box-shadow:2px 2px #173429;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);font-family:var(--sans,sans-serif)}
.fx-skill-tag>b{font-size:12px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic}
.fx-skill-tag>small{font-size:9px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.76}
.fx-skill-tag.context-passive>i{background:#b0b6a3}.fx-skill-tag.context-break>i{background:#ce715c}
.tb-shell .arena-effects .fx-skill-cut{max-width:none;min-width:0!important;min-height:0!important;height:auto!important;box-sizing:border-box;gap:6px!important;padding:4px 6px!important;border-radius:0;overflow:hidden;contain:layout paint style}
.tb-shell .arena-effects .fx-skill-cut .portrait{width:42px!important;height:58px!important;border-radius:0!important}
.tb-shell .arena-effects .fx-skill-cut strong{font-size:clamp(16px,2.6vw,24px)!important;white-space:normal;line-height:1.12!important}
.tb-shell .arena-effects .fx-skill-cut small{font-size:10px!important;letter-spacing:0}
.tb-shell .arena-effects .fx-skill-cut.is-tight .portrait,
.tb-shell .arena-effects .fx-skill-cut.is-tight small{display:none!important}
/* Public broadcast: one title, one practical effect, one countdown. Long rules
   remain available through an explicit disclosure instead of filling the card. */
.event-announcement.is-compact-event{display:grid;gap:10px}
.event-announcement.is-compact-event .event-hero{display:grid;grid-template-columns:minmax(76px,112px) minmax(0,1fr);align-items:center;gap:12px;min-height:0;margin:0}
.event-announcement.is-compact-event .event-hero-art{width:100%;height:auto;aspect-ratio:4/3;max-height:108px;background:none}
.event-announcement.is-compact-event .event-hero-art>.event-illustration,
.event-announcement.is-compact-event .event-hero-art>.card-illustration{inset:0;width:100%;height:100%;border-radius:0;object-fit:contain;box-shadow:none;filter:none}
.event-announcement.is-compact-event .event-meta{display:block;margin:0 0 5px;color:#c3b18e;font:800 11px/1.3 var(--sans,sans-serif);letter-spacing:.04em}
.event-announcement.is-compact-event .event-big-title{margin:0 0 7px;font:1000 italic clamp(22px,5vw,31px)/1.1 var(--sans,sans-serif);letter-spacing:-.03em;color:#f2ddae;overflow-wrap:anywhere}
.event-announcement.is-compact-event .event-core-effect{margin:0;color:#e9dfc4;font-size:13px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.event-announcement.is-compact-event .event-countdown{display:flex;align-items:center;justify-content:center;gap:6px;min-height:28px;margin:0;padding:5px 8px 7px;background:#122f27;color:#eec987;font-size:11px;line-height:15px}
.event-announcement.is-compact-event .event-countdown>b{font-size:22px;line-height:23px}
.event-announcement.is-compact-event .event-countdown>i{height:2px}
.event-announcement.is-compact-event .event-rules-detail{margin:0;padding:0;border:0;font-size:12px;line-height:1.5;color:#d4d8bf}
.event-announcement.is-compact-event .event-rules-detail>summary{width:max-content;min-height:34px;cursor:pointer;color:#b8c9b4;font-size:11px;line-height:34px}
.event-announcement.is-compact-event .event-rules-detail>p{margin:6px 0;padding:0;white-space:normal;overflow-wrap:anywhere}
.event-announcement.is-compact-event .event-rules-detail .event-line{font-size:12px;font-style:italic;opacity:.8}
.event-announcement.is-compact-event .modal-actions{margin:0}
.event-announcement.is-compact-event .modal-actions>.btn{min-height:40px;font-size:13px;border-radius:0}
@media(orientation:portrait) and (max-width:420px){
 .event-announcement.is-compact-event .event-hero{grid-template-columns:88px minmax(0,1fr);gap:9px}
 .event-announcement.is-compact-event .event-hero-art{max-height:86px}
 .event-announcement.is-compact-event .event-big-title{font-size:24px}
 .event-announcement.is-compact-event .event-core-effect{font-size:12px;line-height:1.5}
}
@media(orientation:landscape) and (max-height:450px){
 .event-announcement.is-compact-event{gap:7px}
 .event-announcement.is-compact-event .event-hero{grid-template-columns:96px minmax(0,1fr);gap:10px}
 .event-announcement.is-compact-event .event-hero-art{max-height:76px}
 .event-announcement.is-compact-event .event-big-title{font-size:24px;margin-bottom:4px}
 .event-announcement.is-compact-event .event-core-effect{font-size:12px;line-height:1.4}
 .event-announcement.is-compact-event .event-countdown{min-height:24px;padding-block:3px 5px}
}
@media(prefers-reduced-motion:reduce){.fx-play-name,.fx-skill-tag{animation:none!important;transition:none!important}.tb-shell .arena-effects .fx-comic-theatre>.fx-card-title{animation:none!important;opacity:1!important}}

/* v21: hand-delivered coffee, with a tray swing rather than copied papers. */
.motif-coffee-delivery{--sk-gesture:sk19-copy;--sk-prop-gesture:sk21-coffee-tray}
@keyframes sk21-coffee-tray{0%{transform:translate(-50px,18px) rotate(-18deg) scale(.7);opacity:0}24%{transform:translate(10px,-10px) rotate(12deg) scale(1.08);opacity:1}42%{transform:translate(0,0) rotate(-5deg) scale(1)}60%{transform:translate(0,0) rotate(3deg)}85%,100%{transform:translate(0,0) rotate(0)}}