.encounter-preview{display:flex;align-items:start;gap:18px;padding:15px 18px;margin-top:19px;background:#fff8dc;border:1px solid #cfb87a;border-left:4px solid #bc8f37;border-radius:7px;color:#5c5638}.encounter-preview strong{white-space:nowrap;font-size:12px;padding-top:2px}.encounter-preview p{font-size:12px;line-height:1.9;margin:0}
/* A game HUD, not a notice card. The rail stays outside the board and uses existing boss art. */
.encounter-status{--boss-metal:#d5b976;--boss-dark:#5f5033;position:relative;isolation:isolate;display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:center;min-height:128px;padding:14px 24px 13px 18px;margin:0 0 10px;background:radial-gradient(ellipse at 15% 0,#46544844,transparent 65%),linear-gradient(180deg,#23322f,#101e21 55%,#142326);color:#fff0cd;border-block:1px solid #b99b5b;box-shadow:inset 0 3px #0c171f,inset 0 4px #d7bc7238,inset 0 -3px #0a1720;font-variant-numeric:tabular-nums}
.encounter-status[hidden]{display:none}
.encounter-status:before,.encounter-status:after{content:"";position:absolute;pointer-events:none;width:70px;height:7px;left:calc(50% - 35px);background:linear-gradient(90deg,#72603b,#f5d58a,#72603b);clip-path:polygon(0 0,100% 0,84% 42%,56% 42%,50% 100%,44% 42%,16% 42%);top:0}
.encounter-status:after{top:auto;bottom:0;transform:rotate(180deg);opacity:.6}
.encounter-emblem{position:relative;width:76px;height:80px;align-self:start;margin-top:3px;filter:drop-shadow(0 3px 3px #0008);background:linear-gradient(130deg,#f2d493,#8e7140 38%,#e7cb88 50%,#77603e 72%,#dac28e);clip-path:polygon(20% 0,80% 0,100% 20%,100% 76%,50% 100%,0 76%,0 20%)}
.encounter-emblem:before{content:"";position:absolute;inset:3px;background:radial-gradient(circle at 50% 38%,#71432a,#18262b 65%);clip-path:inherit}
.encounter-emblem>span{position:absolute;inset:3px;display:grid;place-items:center;font-size:37px;color:#dbc485;text-shadow:0 0 18px #c6b77999}
.encounter-emblem canvas{position:absolute;inset:3px;display:block;width:calc(100% - 6px);height:calc(100% - 6px);aspect-ratio:auto;filter:drop-shadow(0 2px 1px #0009)}
.encounter-emblem canvas[hidden]{display:none}
.encounter-vitals{min-width:0}
.encounter-heading{display:flex;align-items:baseline;gap:12px;margin-bottom:9px;min-width:0}
.encounter-heading>[data-encounter-label]{flex:none;font-size:10px;letter-spacing:.11em;color:#e5c782;font-weight:900}
.encounter-heading>strong{flex:1;min-width:0;font-size:21px;line-height:1.15;font-weight:900;letter-spacing:.02em;color:#fff1cf;text-shadow:0 2px 2px #000;overflow-wrap:anywhere}
.encounter-heading>[data-encounter-zone]{flex:none;font-size:10px;letter-spacing:.1em;color:#cbb788;font-weight:800}
.encounter-life{position:relative;height:20px;padding:3px;background:linear-gradient(180deg,#2a1f1b,#101315);border:1px solid #ad8c53;box-shadow:0 0 0 1px #070f12,inset 0 1px #f0d18a55;transform:skewX(-8deg);margin-right:2px}
.encounter-life:after{content:"";pointer-events:none;position:absolute;inset:3px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#160f1b77 calc(10% - 1px),#160f1b77 10%);box-shadow:inset 0 1px #ffffff66,inset 0 -2px #0005}
.encounter-life progress{display:block;appearance:none;width:100%;height:100%;border:0;background:#24171b;accent-color:#ed5d49}
.encounter-life progress::-webkit-progress-bar{background:#24171b}
.encounter-life progress::-webkit-progress-value{background:linear-gradient(180deg,#ffb987 0,#ed6e50 25%,#c63839 65%,#7e202e 100%);box-shadow:inset -2px 0 #ffe3ad}
.encounter-life progress::-moz-progress-bar{background:linear-gradient(180deg,#ffb987 0,#ed6e50 25%,#c63839 65%,#7e202e 100%)}
.encounter-life>[data-encounter-health-text]{position:absolute;z-index:1;inset:0;display:grid;place-items:center;font-size:11px;font-weight:900;line-height:18px;letter-spacing:.06em;color:#fff9e7;text-shadow:0 1px 2px #16070c,1px 0 #16070c,-1px 0 #16070c;transform:skewX(8deg)}
.encounter-pattern{margin-top:8px;border:0;padding:0}
.encounter-pattern>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;min-height:24px;font-size:12px;line-height:1.5;color:#bfcfc4;font-weight:700}
.encounter-pattern>summary::-webkit-details-marker{display:none}
.encounter-pattern>summary:before{content:"◆";color:#b5a47c;font-size:9px}
.encounter-pattern>summary>strong{min-width:0;flex:1;font-size:12px}
.encounter-more{flex:none;color:#acb9ad;font-size:10px;font-weight:500}
.encounter-more:after{content:" +";color:#dfc686}
.encounter-pattern[open] .encounter-more:after{content:" −"}
.encounter-pattern>summary:focus-visible{outline:2px solid #e4c480;outline-offset:2px}
.encounter-pattern>p{font-size:12px;line-height:1.65;margin:4px 0 0;padding-left:17px;color:#c3cfc5;overflow-wrap:anywhere}
.encounter-status[data-kind=warning] .encounter-pattern>summary{color:#ffdc8e}
.encounter-status[data-kind=warning] .encounter-pattern>summary:before{content:"!";display:grid;place-items:center;width:15px;height:15px;border:1px solid #d9a95b;color:#ffdc8e;font-size:11px;background:#65481d66;transform:rotate(-5deg)}
.encounter-status[data-kind=active] .encounter-pattern>summary{color:#ffa38a}
.encounter-status[data-kind=active] .encounter-pattern>summary:before{color:#fb8d77}
.encounter-status[data-kind=normal] .encounter-life{border-color:#6e7863;background:#0c2025}
.encounter-status[data-kind=normal] progress::-webkit-progress-value{background:linear-gradient(180deg,#bbdec4,#4d9d89 35%,#28655d 100%)}
.encounter-status[data-kind=normal] progress::-moz-progress-bar{background:linear-gradient(180deg,#bbdec4,#4d9d89 35%,#28655d 100%)}
.encounter-status[data-kind=normal] .encounter-emblem:before{background:radial-gradient(circle at 50% 38%,#3d695d,#18262b 65%)}
.preview-arena>.encounter-status{margin:0;border-inline:0;border-radius:0}
#game .encounter-status{margin:0;border-inline:0}
@media(min-width:701px) and (min-height:650px){#game .arena-column{display:grid;grid-template-rows:auto minmax(260px,1fr) auto}#game .stage{height:100%;min-height:260px}#game .field-caption{position:static}}
@media(max-width:600px){.encounter-preview{gap:10px;padding:12px}.encounter-preview strong{font-size:11px}.encounter-status{grid-template-columns:50px minmax(0,1fr);gap:10px;min-height:96px;padding:12px 12px 10px 10px}.encounter-emblem{width:50px;height:58px;margin-top:0}.encounter-emblem>span{font-size:28px}.encounter-heading{gap:7px;flex-wrap:wrap;margin-bottom:7px}.encounter-heading>[data-encounter-label]{font-size:9px;letter-spacing:.04em}.encounter-heading>strong{font-size:16px;flex-basis:115px}.encounter-heading>[data-encounter-zone]{display:none}.encounter-life{height:18px}.encounter-life>[data-encounter-health-text]{font-size:10px;line-height:16px}.encounter-pattern{margin-top:5px}.encounter-pattern>summary>strong{font-size:11px}.encounter-more{font-size:9px}.encounter-pattern>p{padding-left:0;font-size:12px}.encounter-pattern>summary{gap:6px}.encounter-status:before,.encounter-status:after{width:48px;left:calc(50% - 24px)}}
@media(max-width:350px){.encounter-status{grid-template-columns:42px minmax(0,1fr);gap:8px;padding-inline:8px}.encounter-emblem{width:42px;height:52px}.encounter-heading{gap:5px}.encounter-heading>strong{font-size:15px;flex-basis:105px}.encounter-more{display:none}}