.dragon-raid-overlay {
  position: fixed;
  inset: 0;
  z-index: 7200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vw, 28px);
  background:
    radial-gradient(circle at 50% 12%, rgba(128, 38, 8, .30), transparent 34%),
    linear-gradient(rgba(3, 4, 7, .84), rgba(7, 2, 2, .96));
  backdrop-filter: blur(7px);
  color: #f5eee4;
}
.dragon-raid-overlay[hidden] { display: none !important; }
.dragon-raid-shell {
  position: relative;
  width: min(1100px, 96vw);
  max-height: 94vh;
  overflow: auto;
  padding: clamp(20px, 3vw, 38px);
  border: 1px solid rgba(223, 112, 45, .55);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(28, 10, 6, .98), rgba(8, 9, 13, .98) 55%, rgba(18, 5, 5, .98));
  box-shadow: 0 30px 90px rgba(0,0,0,.8), 0 0 50px rgba(179, 50, 10, .18), inset 0 0 60px rgba(138, 28, 8, .08);
}
.dragon-raid-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent, rgba(255,145,70,.025), transparent);
}
.dragon-heading {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(225,128,67,.25);
}
.dragon-heading small,
.dragon-heart small,
.dragon-hoard small,
.dragon-summary-grid small {
  display: block;
  color: #c99370;
  font: 700 11px/1.2 var(--font-system, system-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.dragon-heading h1 {
  margin: 4px 0 0;
  color: #fff3e4;
  font: 800 clamp(24px, 4vw, 44px)/1 var(--font-display, var(--font-system, system-ui));
  letter-spacing: .035em;
  text-transform: uppercase;
  text-shadow: 0 0 26px rgba(223,78,27,.28);
}
.dragon-heading > strong {
  min-width: 100px;
  text-align: center;
  color: #ffd6a1;
  font: 800 clamp(18px, 2.6vw, 30px)/1 var(--font-mono, monospace);
  letter-spacing: .08em;
}
.dragon-heading > strong.is-critical { color: #ff8c59; animation: dragon-pulse .8s infinite alternate; }
.dragon-heading > strong.is-terminal { color: #ff4238; animation-duration: .28s; }
.dragon-heading.victory h1 { color: #ffe2a8; }
.dragon-heading.defeat h1 { color: #ff766a; }
.dragon-mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(242,130,65,.35);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180,55,18,.28), rgba(20,5,3,.82));
  font-size: 42px;
  filter: drop-shadow(0 0 16px rgba(255,83,24,.28));
}
.dragon-mark.is-burning { animation: dragon-breathe 1.8s ease-in-out infinite alternate; }
.dragon-lore {
  margin: 18px auto;
  max-width: 760px;
  color: #c9b8ab;
  text-align: center;
  font: 500 14px/1.6 var(--font-system, system-ui);
  letter-spacing: .03em;
}
.dragon-party-count {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 12px;
  color: #d6b295;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dragon-party-count b { color: #fff1db; font-size: 20px; }
.dragon-party-count span { color: #836c5c; font-size: 11px; }
.dragon-raider-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
  margin: 14px 0 20px;
}
.dragon-raider-card {
  min-height: 132px;
  padding: 12px;
  border: 1px solid rgba(181,115,75,.28);
  border-radius: 12px;
  background: rgba(16,13,14,.84);
  box-shadow: inset 0 0 24px rgba(0,0,0,.22);
}
.dragon-raider-card header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 7px;
}
.dragon-raider-card header b {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f4e8de;
  font-size: 13px;
  white-space: nowrap;
}
.dragon-raider-card header small {
  grid-column: 2;
  color: #a78f7e;
  font-size: 9px;
  letter-spacing: .14em;
}
.dragon-role-icon { grid-row: 1 / span 2; font-size: 23px; }
.dragon-raider-hp {
  height: 7px;
  margin: 14px 0 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.07);
}
.dragon-raider-hp i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7e1818, #d04a31, #ff8b52);
  box-shadow: 0 0 12px rgba(236,69,39,.35);
  transition: width .35s ease;
}
.dragon-raider-card footer {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  color: #aa9687;
  font-size: 10px;
}
.dragon-raider-card em {
  display: block;
  margin-top: 9px;
  color: #cf9b74;
  font: 700 9px/1 var(--font-system,system-ui);
  letter-spacing: .1em;
  text-align: center;
}
.dragon-raider-card.is-fallen {
  opacity: .55;
  filter: grayscale(.75);
  border-color: rgba(110,110,110,.25);
}
.dragon-raider-card.is-fallen em { color: #e66a61; }
.dragon-raider-card.is-empty {
  display: grid;
  place-items: center;
  align-content: center;
  color: #514945;
  border-style: dashed;
  text-align: center;
}
.dragon-raider-card.is-empty small { font-size: 9px; letter-spacing: .13em; }
.dragon-class-pick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.dragon-class-pick button,
.dragon-primary,
.dragon-res-btn,
.dragon-secondary {
  border: 1px solid rgba(221,112,49,.48);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(114,38,15,.45), rgba(31,14,10,.9));
  color: #f7dfca;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.dragon-class-pick button { min-height: 76px; padding: 12px; }
.dragon-class-pick button b { display:block; font-size: 15px; }
.dragon-class-pick button small { display:block; margin-top:7px; color:#ad8a71; letter-spacing:.08em; }
.dragon-class-pick button:hover,
.dragon-primary:hover,
.dragon-res-btn:hover,
.dragon-secondary:hover {
  transform: translateY(-1px);
  border-color: rgba(255,155,88,.82);
  box-shadow: 0 0 24px rgba(204,61,18,.18);
}
.dragon-class-pick button:disabled,
.dragon-primary:disabled,
.dragon-res-btn:disabled { opacity:.5; cursor:default; transform:none; }
.dragon-locked,
.dragon-intermission,
.dragon-own-roll,
.dragon-note,
.dragon-dead-loot {
  margin: 14px 0;
  padding: 11px 14px;
  border: 1px solid rgba(183,112,71,.25);
  border-radius: 8px;
  background: rgba(18,12,12,.75);
  color: #c6a78f;
  font: 700 11px/1.35 var(--font-system,system-ui);
  letter-spacing: .11em;
  text-align: center;
  text-transform: uppercase;
}
.dragon-note { color:#ffd39e; border-color:rgba(234,126,53,.45); }
.dragon-dead-loot { color:#ff8176; border-color:rgba(200,55,43,.4); }
.dragon-boss-hp {
  margin: 22px 0 18px;
  padding: 15px 18px;
  border: 1px solid rgba(164,64,34,.35);
  border-radius: 12px;
  background: rgba(39,8,5,.6);
}
.dragon-boss-hp > div { display:flex; justify-content:space-between; margin-bottom:9px; }
.dragon-boss-hp b { letter-spacing:.16em; color:#efb288; }
.dragon-boss-hp strong { color:#ffb787; }
.dragon-boss-hp > span {
  display:block;
  height:16px;
  overflow:hidden;
  border-radius:99px;
  background:#170807;
  box-shadow: inset 0 0 8px #000;
}
.dragon-boss-hp > span i {
  display:block;
  height:100%;
  background: linear-gradient(90deg,#6e0f0d,#b72516,#ed5b20,#ffa043);
  box-shadow:0 0 18px rgba(239,73,24,.55);
  transition:width .45s ease;
}
.dragon-primary {
  display:block;
  width:min(420px,100%);
  min-height:58px;
  margin:18px auto;
  font:800 15px/1 var(--font-system,system-ui);
  letter-spacing:.15em;
  text-transform:uppercase;
}
.dragon-primary.heart { border-color:rgba(147,73,158,.65); background:linear-gradient(180deg,rgba(74,26,84,.7),rgba(20,8,25,.95)); }
.dragon-secondary {
  display:block;
  margin:20px auto 0;
  padding:11px 18px;
  font-weight:700;
  letter-spacing:.1em;
}
.dragon-res-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.dragon-res-btn { padding:10px 14px; }
.dragon-round-feed {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:7px;
  margin-top:16px;
}
.dragon-round-feed span {
  padding:8px 10px;
  border-radius:7px;
  background:rgba(255,255,255,.035);
  color:#aa988a;
  font-size:10px;
}
.dragon-round-feed .hit,
.dragon-round-feed .heavy { color:#e5bd94; }
.dragon-round-feed .burn { color:#e98275; }
.dragon-round-feed b { color:inherit; }
.dragon-hoard,
.dragon-heart {
  margin:22px auto 0;
  max-width:720px;
  padding:20px;
  border:1px solid rgba(222,153,70,.35);
  border-radius:14px;
  background:radial-gradient(circle at 50% 0,rgba(158,92,20,.12),rgba(10,9,10,.85));
  text-align:center;
}
.dragon-hoard > b { display:block; margin:6px 0 14px; color:#ffd27c; font-size:34px; }
.dragon-hoard > div,
.dragon-heart-rolls { display:grid; gap:6px; }
.dragon-hoard span,
.dragon-heart-rolls span {
  display:flex;
  justify-content:space-between;
  padding:7px 10px;
  background:rgba(255,255,255,.03);
  color:#bda997;
}
.dragon-hoard span strong { color:#ffd27c; }
.dragon-heart {
  border-color:rgba(126,67,143,.45);
  background:radial-gradient(circle at 50% 0,rgba(76,22,89,.22),rgba(9,7,11,.9));
}
.dragon-heart h2 { margin:6px 0; color:#dab1e5; font-size:25px; }
.dragon-heart p { color:#927f9a; }
.dragon-heart-rolls strong { color:#d8b4e3; }
.dragon-heart.winner h2 { font-size:34px; text-transform:uppercase; }
.dragon-summary-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  max-width:620px;
  margin:24px auto 0;
}
.dragon-summary-grid > div {
  padding:16px;
  border:1px solid rgba(182,112,70,.25);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  text-align:center;
}
.dragon-summary-grid b { display:block; margin-top:5px; font-size:25px; color:#f0d3b9; }
.dragon-embers { position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; }
.dragon-embers i {
  position:absolute;
  bottom:-12px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#ff9f52;
  box-shadow:0 0 8px #ff5c27;
  animation:dragon-ember 5s linear infinite;
}
.dragon-embers i:nth-child(1){left:8%;animation-delay:-1s}.dragon-embers i:nth-child(2){left:22%;animation-delay:-3s}
.dragon-embers i:nth-child(3){left:41%;animation-delay:-4s}.dragon-embers i:nth-child(4){left:62%;animation-delay:-2s}
.dragon-embers i:nth-child(5){left:79%;animation-delay:-4.5s}.dragon-embers i:nth-child(6){left:92%;animation-delay:-.4s}
@keyframes dragon-ember { to { transform:translateY(-92vh) translateX(35px); opacity:0; } }
@keyframes dragon-breathe { from { transform:scale(.97); filter:drop-shadow(0 0 8px rgba(255,66,20,.25)); } to { transform:scale(1.04); filter:drop-shadow(0 0 24px rgba(255,90,20,.7)); } }
@keyframes dragon-pulse { to { text-shadow:0 0 18px currentColor; transform:scale(1.04); } }
@media (max-width: 820px) {
  :where(html:not(.asoc-mobile)) .dragon-raider-grid { grid-template-columns:repeat(2,1fr); }
  :where(html:not(.asoc-mobile)) .dragon-class-pick { grid-template-columns:1fr; }
  :where(html:not(.asoc-mobile)) .dragon-heading { grid-template-columns:auto 1fr; }
  :where(html:not(.asoc-mobile)) .dragon-heading > strong { grid-column:1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .dragon-embers i,.dragon-mark.is-burning,.dragon-heading > strong.is-critical { animation:none !important; }
}
.dragon-turn-banner{margin:14px 0;padding:12px 16px;border:1px solid rgba(214,80,58,.55);background:linear-gradient(90deg,rgba(89,18,13,.75),rgba(20,12,22,.9));color:#ffd7b4;text-align:center;font:800 13px/1.2 var(--font-mono,monospace);letter-spacing:.16em;text-transform:uppercase}
.dragon-action-tray{display:grid;grid-template-columns:minmax(160px,1fr) repeat(3,minmax(120px,auto));gap:9px;margin-top:14px;padding:12px;border:1px solid rgba(255,139,72,.32);background:rgba(8,6,10,.82)}
.dragon-action-tray select,.dragon-action-tray button{min-height:44px;border:1px solid rgba(183,91,255,.48);background:#140d1b;color:#f8e9ff;font:700 11px/1.2 var(--font-mono,monospace);letter-spacing:.08em;text-transform:uppercase}
.dragon-action-tray button:hover:not(:disabled){border-color:#ff8b48;box-shadow:0 0 18px rgba(255,90,45,.28)}
.dragon-action-tray button:disabled{opacity:.35;cursor:not-allowed}
.dragon-raider-card em{display:block;margin-top:6px;color:#d4a6ff;font-size:9px;letter-spacing:.09em}
.dragon-round-feed .natural20{color:#ffd35c;text-shadow:0 0 10px #ff6a00}.dragon-round-feed .fumble{color:#ff5959}
@media(max-width:780px){:where(html:not(.asoc-mobile)) .dragon-action-tray{grid-template-columns:1fr 1fr}:where(html:not(.asoc-mobile)) .dragon-action-tray select{grid-column:1/-1}}

.dragon-raid-setup-btn{border-color:#793fb0!important;background:linear-gradient(135deg,#26102f,#120b19)!important;color:#efd5ff!important;letter-spacing:.16em!important}
.dragon-raid-setup-btn::before{content:'🐉';margin-right:.55rem;filter:drop-shadow(0 0 6px #c04cff)}
.dragon-setup-overlay{position:fixed;inset:0;z-index:10080;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 35%,rgba(70,22,91,.42),rgba(2,2,6,.92) 65%);backdrop-filter:blur(8px)}
.dragon-setup-overlay[hidden]{display:none}
.dragon-setup-panel{width:min(1040px,94vw);max-height:92vh;overflow:auto;border:1px solid #74418e;background:linear-gradient(145deg,#110b17 0%,#08070b 62%,#19070a 100%);box-shadow:0 0 0 1px #100416,0 30px 90px #000,0 0 50px rgba(163,50,220,.22);color:#eee6f2}
.dragon-setup-panel>header{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid #52265f;background:linear-gradient(90deg,rgba(82,22,98,.52),rgba(90,15,23,.25))}
.dragon-setup-panel h2{margin:3px 0 0;font:800 clamp(20px,3vw,34px)/1 var(--font-display,monospace);letter-spacing:.13em}.dragon-setup-panel header small{color:#c472e9;letter-spacing:.18em}.dragon-setup-panel header button{width:42px;height:42px;border:1px solid #7d3b66;background:#190c15;color:#f2b8d1;font-size:25px}.dragon-setup-panel>p{margin:0;padding:15px 26px;border-bottom:1px solid #302034;color:#aaa0ae;letter-spacing:.06em}
.dragon-setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:20px}.dragon-setup-grid>button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-height:138px;padding:18px;border:1px solid #493052;background:linear-gradient(135deg,rgba(36,22,43,.96),rgba(12,10,15,.98));color:#eee;text-align:left;cursor:pointer;transition:.18s ease}.dragon-setup-grid>button:hover{transform:translateY(-2px);border-color:#b34ce0;box-shadow:0 0 24px rgba(178,61,226,.24)}.dragon-setup-grid>button small{color:#9f77ae;font:700 10px/1.2 monospace;letter-spacing:.14em}.dragon-setup-grid>button b{font:800 17px/1.15 var(--font-display,monospace);letter-spacing:.08em}.dragon-setup-grid>button span{color:#b8aabc;font:600 11px/1.3 monospace}.dragon-setup-grid>button em{margin-top:auto;color:#d978ff;font:800 11px/1 monospace;letter-spacing:.18em}.dragon-setup-grid>button.is-heroic{grid-column:1/-1;border-color:#9d252f;background:linear-gradient(110deg,#28090c,#11090c 65%,#321009)}.dragon-setup-grid>button.is-heroic:hover{border-color:#ff3548;box-shadow:0 0 30px rgba(255,32,50,.25)}.dragon-setup-grid>button.is-heroic em{color:#ff5363}
@media(max-width:720px){:where(html:not(.asoc-mobile)) .dragon-setup-grid{grid-template-columns:1fr}:where(html:not(.asoc-mobile)) .dragon-setup-grid>button.is-heroic{grid-column:auto}}


/* =========================================================
   CABINET OF CURIOSITIES — VISUAL STYLE PASS
   Styling only. No game logic or encounter structure changes.
   ========================================================= */
.dragon-setup-overlay{
  background:
    radial-gradient(circle at 50% 22%,rgba(92,32,118,.34),transparent 34%),
    radial-gradient(circle at 82% 18%,rgba(105,12,38,.18),transparent 28%),
    radial-gradient(circle at 12% 78%,rgba(34,55,72,.16),transparent 30%),
    linear-gradient(180deg,rgba(3,2,8,.88),rgba(1,1,4,.97));
  backdrop-filter:blur(12px) saturate(1.08);
}

.dragon-setup-panel{
  position:relative;
  isolation:isolate;
  width:min(1120px,94vw);
  border:1px solid rgba(173,92,211,.55);
  background:
    linear-gradient(180deg,rgba(20,10,26,.98),rgba(7,6,10,.985) 30%,rgba(5,5,8,.99));
  box-shadow:
    0 34px 100px rgba(0,0,0,.84),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 58px rgba(139,42,181,.14),
    0 0 120px rgba(70,12,90,.08);
  overflow:hidden;
}

.dragon-setup-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 7px),
    linear-gradient(115deg,transparent 0 42%,rgba(187,98,223,.025) 50%,transparent 58%),
    radial-gradient(circle at 18% 8%,rgba(178,82,224,.08),transparent 30%);
  opacity:.8;
}

.dragon-setup-panel>header{
  position:relative;
  min-height:112px;
  padding:28px 32px;
  border-bottom:1px solid rgba(170,74,194,.34);
  background:
    radial-gradient(circle at 20% 0%,rgba(184,75,229,.13),transparent 34%),
    linear-gradient(90deg,rgba(56,17,68,.92),rgba(44,11,38,.88) 48%,rgba(47,8,18,.94));
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.025);
}

.dragon-setup-panel>header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,116,255,.65),rgba(190,57,86,.42),transparent);
  opacity:.65;
}

.dragon-setup-panel h2{
  margin:5px 0 0;
  color:#f7edff;
  font:800 clamp(26px,3.2vw,40px)/1 var(--font-display,monospace);
  letter-spacing:.17em;
  text-shadow:0 0 22px rgba(215,138,255,.10);
}

.dragon-setup-panel header small{
  color:#d58bf3;
  font-weight:800;
  letter-spacing:.22em;
  text-shadow:0 0 12px rgba(206,102,242,.22);
}

.dragon-setup-panel header button{
  width:48px;
  height:48px;
  border:1px solid rgba(198,94,151,.52);
  background:
    linear-gradient(180deg,rgba(34,12,28,.92),rgba(16,7,15,.98));
  color:#f6bfd9;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease;
}

.dragon-setup-panel header button:hover{
  transform:translateY(-1px);
  color:#ffe1ef;
  border-color:#e45c9a;
  box-shadow:0 0 22px rgba(228,92,154,.18),inset 0 0 16px rgba(228,92,154,.05);
}

.dragon-setup-panel>p{
  position:relative;
  margin:0;
  padding:18px 32px;
  border-bottom:1px solid rgba(105,67,116,.34);
  background:
    linear-gradient(90deg,rgba(9,7,13,.96),rgba(13,9,16,.92),rgba(8,6,10,.96));
  color:#c1b6c8;
  font-weight:700;
  letter-spacing:.045em;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.012);
}

.dragon-setup-grid{
  gap:16px;
  padding:22px;
  background:
    radial-gradient(circle at 50% 0%,rgba(99,47,115,.05),transparent 34%),
    rgba(2,2,5,.16);
}

.dragon-setup-grid>button{
  --boss-accent:174,100,211;
  --boss-soft:174,100,211;
  position:relative;
  isolation:isolate;
  min-height:154px;
  padding:21px 22px 18px;
  gap:8px;
  overflow:hidden;
  border:1px solid rgba(var(--boss-accent),.30);
  background:
    linear-gradient(135deg,rgba(var(--boss-soft),.07),transparent 42%),
    linear-gradient(180deg,rgba(24,16,29,.96),rgba(9,8,13,.985));
  color:#f3edf6;
  box-shadow:
    0 14px 32px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.018),
    inset 0 -28px 50px rgba(0,0,0,.12);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.dragon-setup-grid>button::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 86% 20%,rgba(var(--boss-accent),.15),transparent 25%),
    linear-gradient(115deg,transparent 0 56%,rgba(var(--boss-accent),.045) 68%,transparent 82%);
  opacity:.82;
  transition:opacity .18s ease,transform .22s ease;
}

.dragon-setup-grid>button::after{
  content:"";
  position:absolute;
  right:-22px;
  top:-18px;
  width:150px;
  height:150px;
  z-index:-1;
  pointer-events:none;
  border:1px solid rgba(var(--boss-accent),.13);
  border-radius:50%;
  box-shadow:
    0 0 0 18px rgba(var(--boss-accent),.015),
    0 0 0 36px rgba(var(--boss-accent),.010),
    inset 0 0 35px rgba(var(--boss-accent),.05);
  opacity:.7;
  transform:rotate(-12deg);
}

.dragon-setup-grid>button:hover{
  transform:translateY(-4px);
  border-color:rgba(var(--boss-accent),.74);
  background:
    linear-gradient(135deg,rgba(var(--boss-soft),.12),transparent 48%),
    linear-gradient(180deg,rgba(28,18,34,.99),rgba(10,8,14,.99));
  box-shadow:
    0 22px 40px rgba(0,0,0,.38),
    0 0 24px rgba(var(--boss-accent),.13),
    inset 0 0 0 1px rgba(255,255,255,.032);
}

.dragon-setup-grid>button:hover::before{
  opacity:1;
  transform:scale(1.02);
}

.dragon-setup-grid>button small{
  position:relative;
  z-index:1;
  color:rgba(var(--boss-accent),.82);
  font:800 10px/1.2 var(--font-mono,monospace);
  letter-spacing:.18em;
  text-transform:uppercase;
}

.dragon-setup-grid>button b{
  position:relative;
  z-index:1;
  margin-top:2px;
  color:#faf5fc;
  font:800 19px/1.12 var(--font-display,monospace);
  letter-spacing:.09em;
  text-shadow:0 0 14px rgba(var(--boss-accent),.08);
}

.dragon-setup-grid>button span{
  position:relative;
  z-index:1;
  color:#c7bdcb;
  font:700 11px/1.35 var(--font-mono,monospace);
  letter-spacing:.015em;
}

.dragon-setup-grid>button em{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:94px;
  min-height:31px;
  margin-top:auto;
  padding:0 12px;
  border:1px solid rgba(var(--boss-accent),.32);
  background:rgba(var(--boss-accent),.045);
  color:rgb(var(--boss-accent));
  font:800 10px/1 var(--font-mono,monospace);
  letter-spacing:.19em;
  text-transform:uppercase;
  box-shadow:inset 0 0 14px rgba(var(--boss-accent),.025);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
}

.dragon-setup-grid>button:hover em{
  border-color:rgba(var(--boss-accent),.72);
  background:rgba(var(--boss-accent),.08);
  box-shadow:0 0 18px rgba(var(--boss-accent),.12),inset 0 0 14px rgba(var(--boss-accent),.04);
  color:#fff;
}

/* Boss-specific visual identities */
.dragon-setup-grid>button[data-boss-id="wendigo"]{
  --boss-accent:184,202,218;
  --boss-soft:133,157,177;
}
.dragon-setup-grid>button[data-boss-id="wendigo"]::before{
  background:
    radial-gradient(ellipse at 88% 22%,rgba(206,224,238,.14),transparent 20%),
    linear-gradient(160deg,transparent 54%,rgba(199,220,236,.055) 55% 57%,transparent 58%),
    linear-gradient(20deg,transparent 60%,rgba(153,177,198,.045) 61% 63%,transparent 64%);
}

.dragon-setup-grid>button[data-boss-id="hym"]{
  --boss-accent:142,107,196;
  --boss-soft:91,63,132;
}
.dragon-setup-grid>button[data-boss-id="hym"]::before{
  background:
    radial-gradient(ellipse at 87% 12%,rgba(128,91,186,.18),transparent 28%),
    linear-gradient(155deg,transparent 55%,rgba(110,79,156,.06) 56% 59%,transparent 60%),
    linear-gradient(25deg,transparent 68%,rgba(120,89,171,.05) 69% 72%,transparent 73%);
}

.dragon-setup-grid>button[data-boss-id="hydra"]{
  --boss-accent:103,176,110;
  --boss-soft:57,106,67;
}
.dragon-setup-grid>button[data-boss-id="hydra"]::before{
  background:
    radial-gradient(circle at 88% 20%,rgba(103,176,110,.17),transparent 23%),
    radial-gradient(circle at 76% 42%,rgba(76,146,88,.07),transparent 18%),
    linear-gradient(130deg,transparent 56%,rgba(101,166,107,.05) 57% 60%,transparent 61%);
}

.dragon-setup-grid>button[data-boss-id="necromorph"]{
  --boss-accent:190,76,76;
  --boss-soft:121,45,45;
}
.dragon-setup-grid>button[data-boss-id="necromorph"]::before{
  background:
    radial-gradient(circle at 88% 18%,rgba(196,66,66,.20),transparent 23%),
    linear-gradient(155deg,transparent 58%,rgba(183,62,62,.08) 59% 61%,transparent 62%),
    linear-gradient(25deg,transparent 66%,rgba(183,62,62,.055) 67% 69%,transparent 70%);
}

.dragon-setup-grid>button.is-heroic,
.dragon-setup-grid>button[data-boss-id="deathwing"]{
  --boss-accent:238,57,71;
  --boss-soft:149,29,39;
  grid-column:1/-1;
  min-height:164px;
  border-color:rgba(238,57,71,.48);
  background:
    radial-gradient(circle at 82% 50%,rgba(218,49,43,.12),transparent 28%),
    linear-gradient(110deg,rgba(53,7,12,.98),rgba(18,7,11,.99) 56%,rgba(60,11,8,.96));
  box-shadow:
    0 18px 42px rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 0 28px rgba(207,39,49,.08);
}

.dragon-setup-grid>button.is-heroic::before,
.dragon-setup-grid>button[data-boss-id="deathwing"]::before{
  background:
    radial-gradient(circle at 88% 48%,rgba(255,75,52,.17),transparent 25%),
    linear-gradient(145deg,transparent 58%,rgba(255,80,48,.075) 59% 61%,transparent 62%),
    linear-gradient(35deg,transparent 68%,rgba(210,45,45,.06) 69% 71%,transparent 72%);
}

.dragon-setup-grid>button.is-heroic:hover{
  border-color:rgba(255,70,84,.9);
  box-shadow:
    0 22px 44px rgba(0,0,0,.44),
    0 0 34px rgba(232,47,61,.18),
    inset 0 0 28px rgba(170,25,30,.045);
}

.dragon-setup-grid>button.is-heroic small{color:#d98b98}
.dragon-setup-grid>button.is-heroic b{
  color:#fff1f3;
  font-size:20px;
  text-shadow:0 0 15px rgba(255,58,58,.10);
}
.dragon-setup-grid>button.is-heroic span{color:#d7b6bb}
.dragon-setup-grid>button.is-heroic em{
  color:#ff6978;
  border-color:rgba(255,75,91,.45);
  background:rgba(160,18,28,.12);
}

@media(max-width:720px){
  :where(html:not(.asoc-mobile)) .dragon-setup-panel>header{min-height:auto;padding:22px 20px}
  :where(html:not(.asoc-mobile)) .dragon-setup-panel h2{font-size:24px;letter-spacing:.11em}
  :where(html:not(.asoc-mobile)) .dragon-setup-panel>p{padding:15px 20px}
  :where(html:not(.asoc-mobile)) .dragon-setup-grid{padding:14px;gap:12px}
  :where(html:not(.asoc-mobile)) .dragon-setup-grid>button{min-height:146px}
  :where(html:not(.asoc-mobile)) .dragon-setup-grid>button.is-heroic{grid-column:auto}
}

/* Heart of the Shadow: chosen transparent crimson and violet mechanical heart. */
.dragon-hos-icon{display:inline-block;width:42px;height:42px;object-fit:contain;vertical-align:middle;filter:drop-shadow(0 0 8px rgba(161,35,189,.48)) drop-shadow(0 0 8px rgba(206,14,44,.38));}
.dragon-hos-icon-large{display:block;width:80px;height:80px;margin:8px auto 4px;}
@media(prefers-reduced-motion:no-preference){.dragon-hos-icon-large{animation:dragonHosPulse 3.5s ease-in-out infinite;}}
@keyframes dragonHosPulse{0%,100%{filter:drop-shadow(0 0 7px rgba(161,35,189,.4)) drop-shadow(0 0 7px rgba(206,14,44,.35))}50%{filter:drop-shadow(0 0 16px rgba(161,35,189,.65)) drop-shadow(0 0 14px rgba(206,14,44,.55))}}


/* Shadow Broker live observer controls */
.dragon-gm-observer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:14px 0 4px;
  padding:10px 12px;
  border:1px solid rgba(175,86,211,.34);
  background:linear-gradient(90deg,rgba(45,18,58,.62),rgba(17,10,23,.86));
  color:#d9b9e8;
  font:800 10px/1.2 var(--font-mono,monospace);
  letter-spacing:.15em;
  text-transform:uppercase;
  box-shadow:inset 0 0 18px rgba(151,67,190,.04);
}
.dragon-gm-observer span::before{
  content:'◉';
  margin-right:8px;
  color:#b96dde;
  text-shadow:0 0 10px rgba(185,109,222,.5);
}
.dragon-gm-observer button{
  min-height:34px;
  padding:0 13px;
  border:1px solid rgba(220,67,79,.55);
  background:rgba(75,12,19,.52);
  color:#ff8994;
  cursor:pointer;
  font:800 10px/1 var(--font-mono,monospace);
  letter-spacing:.13em;
  text-transform:uppercase;
  transition:.16s ease;
}
.dragon-gm-observer button:hover{
  border-color:#ff5968;
  color:#ffd1d5;
  background:rgba(110,18,27,.68);
  box-shadow:0 0 18px rgba(255,70,84,.18);
}
.dragon-gm-observer button:disabled{
  opacity:.45;
  cursor:default;
}
@media(max-width:640px){
  :where(html:not(.asoc-mobile)) .dragon-gm-observer{align-items:stretch;flex-direction:column}
  :where(html:not(.asoc-mobile)) .dragon-gm-observer button{width:100%}
}


.dragon-gm-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.dragon-gm-observer button[data-dragon-action="start"]{
  border-color:rgba(108,205,132,.55);
  background:rgba(20,71,36,.48);
  color:#9ceaae;
}
.dragon-gm-observer button[data-dragon-action="start"]:hover:not(:disabled){
  border-color:#79e592;
  color:#e0ffe7;
  background:rgba(28,99,49,.66);
  box-shadow:0 0 18px rgba(82,207,112,.18);
}
.dragon-gm-observer button[data-dragon-action="start"]:disabled{
  border-color:rgba(108,205,132,.18);
  color:rgba(156,234,174,.34);
  background:rgba(20,71,36,.18);
}
@media(max-width:640px){
  :where(html:not(.asoc-mobile)) .dragon-gm-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
}


/* Heart of the Shadow claim window */
.dragon-heart-deadline{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
  margin:14px 0 12px;
  padding:10px 12px;
  border:1px solid rgba(174,93,207,.32);
  background:linear-gradient(90deg,rgba(50,16,61,.48),rgba(19,9,24,.76),rgba(50,16,61,.48));
  box-shadow:inset 0 0 18px rgba(154,67,190,.035);
}
.dragon-heart-deadline small,
.dragon-heart-deadline span{
  color:#b996c9;
  font:800 9px/1.2 var(--font-mono,monospace);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.dragon-heart-deadline span{text-align:right;color:#d28ba8}
.dragon-heart-deadline strong{
  min-width:72px;
  color:#e7b9f5;
  font:900 22px/1 var(--font-mono,monospace);
  letter-spacing:.08em;
  text-align:center;
  text-shadow:0 0 14px rgba(197,99,232,.20);
}
.dragon-heart-deadline strong.is-critical{color:#f0a2d5;text-shadow:0 0 16px rgba(235,89,180,.28)}
.dragon-heart-deadline strong.is-terminal{color:#ff6f83;text-shadow:0 0 18px rgba(255,69,92,.42)}
.dragon-heart-rolls .is-invalid{color:#ff6877!important;letter-spacing:.08em}
.dragon-heart-rolls .is-eliminated{color:#796d7e!important;font-size:10px;letter-spacing:.07em}
@media(max-width:620px){
  :where(html:not(.asoc-mobile)) .dragon-heart-deadline{grid-template-columns:1fr;justify-items:center;text-align:center}
  :where(html:not(.asoc-mobile)) .dragon-heart-deadline span{text-align:center}
}


/* Arena combatant plates */
.dragon-raider-skills{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:8px 0 2px;
}
.dragon-raider-skills span{
  padding:3px 6px;
  border:1px solid rgba(176,113,216,.22);
  background:rgba(93,48,116,.10);
  color:#bfa5cf;
  font:800 8px/1 var(--font-mono,monospace);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.dragon-raider-card.is-active{
  border-color:rgba(204,128,255,.72);
  box-shadow:
    0 0 0 1px rgba(204,128,255,.12),
    0 0 22px rgba(167,83,218,.18),
    inset 0 0 22px rgba(108,48,138,.10);
  transform:translateY(-2px);
}
.dragon-raider-card.is-active .dragon-raider-skills span{
  border-color:rgba(210,143,255,.42);
  color:#e3c7f3;
}


/* Cabinet combat arena */
.dragon-arena{
  position:relative;
  min-height:560px;
  margin:18px 0 16px;
  overflow:hidden;
  border:1px solid rgba(183,93,69,.34);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 50%,rgba(102,31,20,.18),transparent 26%),
    radial-gradient(circle at 50% 50%,rgba(147,77,188,.06),transparent 42%),
    linear-gradient(180deg,rgba(10,8,12,.96),rgba(7,5,9,.99));
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.55),
    0 18px 40px rgba(0,0,0,.30);
}
.dragon-arena::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.016) 0 1px,transparent 1px 32px);
  opacity:.6;
}
.dragon-arena-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:360px;
  height:360px;
  border:1px solid rgba(190,101,219,.16);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:
    0 0 0 44px rgba(190,101,219,.018),
    0 0 0 88px rgba(190,101,219,.012),
    inset 0 0 42px rgba(134,61,166,.05);
}
.dragon-arena-boss{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:min(310px,34%);
  transform:translate(-50%,-50%);
  text-align:center;
}
.dragon-boss-avatar{
  --boss-ring:190,90,70;
  position:relative;
  display:grid;
  place-items:center;
  width:190px;
  height:190px;
  margin:0 auto 12px;
  overflow:hidden;
  border:2px solid rgba(var(--boss-ring),.56);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 38%,rgba(var(--boss-ring),.20),transparent 34%),
    linear-gradient(180deg,rgba(28,14,17,.96),rgba(7,7,10,.98));
  box-shadow:
    0 0 0 7px rgba(var(--boss-ring),.04),
    0 0 30px rgba(var(--boss-ring),.16),
    inset 0 0 40px rgba(0,0,0,.45);
}
.dragon-boss-avatar::before,
.dragon-boss-avatar::after{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(var(--boss-ring),.14);
  border-radius:50%;
}
.dragon-boss-avatar::after{
  inset:30px;
  border-style:dashed;
  opacity:.55;
}
.dragon-boss-avatar-fallback{
  color:rgba(255,242,239,.78);
  font:900 64px/1 var(--font-display,monospace);
  text-shadow:0 0 24px rgba(var(--boss-ring),.35);
}
.dragon-arena[data-boss-id="wendigo"] .dragon-boss-avatar{--boss-ring:186,207,224}
.dragon-arena[data-boss-id="hym"] .dragon-boss-avatar{--boss-ring:145,103,200}
.dragon-arena[data-boss-id="hydra"] .dragon-boss-avatar{--boss-ring:103,176,110}
.dragon-arena[data-boss-id="necromorph"] .dragon-boss-avatar{--boss-ring:199,72,72}
.dragon-arena[data-boss-id="deathwing"] .dragon-boss-avatar{--boss-ring:238,57,71}
.dragon-boss-title small{
  display:block;
  margin-bottom:3px;
  color:#9b7c8a;
  font:800 9px/1 var(--font-mono,monospace);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.dragon-boss-title b{
  display:block;
  color:#fff0e7;
  font:900 24px/1 var(--font-display,monospace);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.dragon-arena .dragon-boss-hp{
  margin:12px 0 0;
  padding:10px 12px;
  background:rgba(20,7,10,.76);
}
.dragon-arena .dragon-boss-hp>div{
  justify-content:center;
  margin-bottom:7px;
}
.dragon-arena-party{
  position:absolute;
  inset:0;
  z-index:2;
}
.dragon-arena-party .dragon-raider-card{
  position:absolute;
  width:185px;
  min-height:134px;
  margin:0;
  transform-origin:center;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease;
}
.dragon-arena-party .dragon-raider-card:nth-child(1){
  left:50%;
  top:26px;
  transform:translateX(-50%);
}
.dragon-arena-party .dragon-raider-card:nth-child(2){
  left:34px;
  top:118px;
}
.dragon-arena-party .dragon-raider-card:nth-child(3){
  right:34px;
  top:118px;
}
.dragon-arena-party .dragon-raider-card:nth-child(4){
  left:88px;
  bottom:26px;
}
.dragon-arena-party .dragon-raider-card:nth-child(5){
  right:88px;
  bottom:26px;
}
.dragon-arena-party .dragon-raider-card.is-active:nth-child(1){
  transform:translateX(-50%) translateY(-5px) scale(1.035);
}
.dragon-arena-party .dragon-raider-card.is-active:nth-child(n+2){
  transform:translateY(-5px) scale(1.035);
}
.dragon-arena-party .dragon-raider-card.is-fallen{
  opacity:.42;
  transform:scale(.97);
}
.dragon-arena-party .dragon-raider-card.is-empty{
  opacity:.20;
}
@media(max-width:900px){
  :where(html:not(.asoc-mobile)) .dragon-arena{
    min-height:720px;
  }
  :where(html:not(.asoc-mobile)) .dragon-arena-boss{
    width:min(320px,48%);
  }
  :where(html:not(.asoc-mobile)) .dragon-arena-party .dragon-raider-card{
    width:170px;
  }
  :where(html:not(.asoc-mobile)) .dragon-arena-party .dragon-raider-card:nth-child(1){
    top:18px;
  }
  :where(html:not(.asoc-mobile)) .dragon-arena-party .dragon-raider-card:nth-child(2){
    left:18px;
    top:132px;
  }
  :where(html:not(.asoc-mobile)) .dragon-arena-party .dragon-raider-card:nth-child(3){
    right:18px;
    top:132px;
  }
  :where(html:not(.asoc-mobile)) .dragon-arena-party .dragon-raider-card:nth-child(4){
    left:40px;
    bottom:24px;
  }
  :where(html:not(.asoc-mobile)) .dragon-arena-party .dragon-raider-card:nth-child(5){
    right:40px;
    bottom:24px;
  }
}
@media(max-width:650px){
  :where(html:not(.asoc-mobile)) .dragon-arena{
    min-height:auto;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  :where(html:not(.asoc-mobile)) .dragon-arena-ring{display:none}
  :where(html:not(.asoc-mobile)) .dragon-arena-boss{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    transform:none;
    order:1;
  }
  :where(html:not(.asoc-mobile)) .dragon-boss-avatar{
    width:150px;
    height:150px;
  }
  :where(html:not(.asoc-mobile)) .dragon-arena-party{
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    order:2;
  }
  :where(html:not(.asoc-mobile)) .dragon-arena-party .dragon-raider-card,
  :where(html:not(.asoc-mobile)) .dragon-arena-party .dragon-raider-card:nth-child(n){
    position:relative;
    inset:auto;
    width:100%;
    transform:none;
  }
}


/* Card-battle motion using existing ASOC resources */
.dragon-raider-card{
  position:relative;
  overflow:hidden;
}
.dragon-raider-card::before{
  content:"";
  position:absolute;
  right:-8px;
  bottom:-4px;
  width:72px;
  height:72px;
  background:url("../assets/ui/little-hero-silhouette.png") center/contain no-repeat;
  opacity:.055;
  pointer-events:none;
  filter:grayscale(1);
}
.dragon-raider-card.is-active::before{
  opacity:.10;
}
.dragon-attack-trail{
  position:absolute;
  z-index:8;
  width:120px;
  height:12px;
  border-top:2px solid rgba(255,196,143,.78);
  border-radius:50%;
  pointer-events:none;
  transform-origin:left center;
  filter:drop-shadow(0 0 7px rgba(255,111,62,.58));
  animation:dragon-trail .34s ease-out forwards;
}
.dragon-attack-trail.is-boss{
  border-top-color:rgba(255,86,86,.82);
  filter:drop-shadow(0 0 8px rgba(255,50,50,.66));
}
.dragon-impact{
  position:absolute;
  z-index:9;
  width:28px;
  height:28px;
  margin:-14px 0 0 -14px;
  border:2px solid rgba(255,194,139,.94);
  border-radius:50%;
  pointer-events:none;
  box-shadow:
    0 0 0 8px rgba(255,118,61,.08),
    0 0 20px rgba(255,91,44,.50);
  animation:dragon-impact-burst .38s ease-out forwards;
}
.dragon-raider-card.is-hit-flash{
  box-shadow:
    0 0 0 1px rgba(255,86,86,.54),
    0 0 30px rgba(255,57,57,.30),
    inset 0 0 26px rgba(255,42,42,.13)!important;
}
.dragon-raider-card.is-heal-flash{
  box-shadow:
    0 0 0 1px rgba(105,232,173,.50),
    0 0 28px rgba(75,221,159,.26),
    inset 0 0 24px rgba(64,220,156,.11)!important;
}
.dragon-arena-boss.is-hit-flash .dragon-boss-avatar{
  box-shadow:
    0 0 0 7px rgba(var(--boss-ring),.06),
    0 0 34px rgba(255,72,56,.30),
    inset 0 0 42px rgba(255,42,38,.11);
}
.dragon-arena.is-aoe-strike{
  animation:dragon-arena-shock .46s ease-out;
}
.dragon-boss-avatar{
  transition:box-shadow .16s ease,filter .16s ease;
}
.dragon-arena-boss[data-attacking="1"] .dragon-boss-avatar{
  filter:brightness(1.12) saturate(1.08);
}
@keyframes dragon-impact-burst{
  0%{opacity:0;transform:scale(.32)}
  28%{opacity:1}
  100%{opacity:0;transform:scale(1.8)}
}
@keyframes dragon-arena-shock{
  0%,100%{transform:translate(0,0);filter:brightness(1)}
  16%{transform:translate(-3px,1px);filter:brightness(1.08)}
  32%{transform:translate(4px,-2px)}
  48%{transform:translate(-2px,2px)}
  64%{transform:translate(2px,-1px)}
}
@media(prefers-reduced-motion:reduce){
  .dragon-attack-trail,.dragon-impact,.dragon-arena.is-aoe-strike{animation:none!important}
}

/* Preserve strike rotation while animating trail growth */
@keyframes dragon-trail{
  0%{opacity:0;scale:.18 1}
  24%{opacity:1}
  72%{opacity:.86;scale:1 1}
  100%{opacity:0;scale:1.12 1}
}


/* Refined encounter-specific combat FX */
.dragon-attack-trail.is-venom{
  border-top-color:rgba(122,232,105,.95);
  filter:drop-shadow(0 0 8px rgba(83,255,103,.72));
}
.dragon-attack-trail.is-shadow{
  border-top-color:rgba(162,93,217,.78);
  filter:drop-shadow(0 0 10px rgba(132,54,191,.74));
}
.dragon-attack-trail.is-frost{
  border-top-color:rgba(191,229,255,.92);
  filter:drop-shadow(0 0 8px rgba(158,216,255,.72));
}
.dragon-attack-trail.is-necro{
  border-top-color:rgba(255,92,82,.94);
  filter:drop-shadow(0 0 9px rgba(255,50,50,.78));
}
.dragon-attack-trail.is-bite{
  border-top-color:rgba(214,242,156,.90);
  filter:drop-shadow(0 0 8px rgba(132,220,80,.64));
}
.dragon-impact.is-crit{
  width:40px;
  height:40px;
  margin:-20px 0 0 -20px;
  border-color:#ffd16d;
  box-shadow:0 0 0 12px rgba(255,180,62,.10),0 0 28px rgba(255,111,32,.72);
}
.dragon-impact.is-heavy{
  border-color:#ff9b67;
  box-shadow:0 0 0 9px rgba(255,112,66,.08),0 0 22px rgba(255,86,48,.56);
}
.dragon-impact.is-venom{
  border-color:#91ec7a;
  box-shadow:0 0 0 9px rgba(84,213,93,.08),0 0 24px rgba(69,214,91,.58);
}
.dragon-impact.is-frost{
  border-color:#cbeaff;
  box-shadow:0 0 0 9px rgba(153,219,255,.08),0 0 24px rgba(154,218,255,.54);
}
.dragon-impact.is-shadow{
  border-color:#b87ae0;
  box-shadow:0 0 0 9px rgba(137,71,185,.08),0 0 24px rgba(128,50,185,.56);
}
.dragon-impact.is-necro{
  border-color:#ff6464;
  box-shadow:0 0 0 9px rgba(255,56,56,.08),0 0 25px rgba(255,40,40,.62);
}
.dragon-impact.is-bite{
  border-color:#c7e892;
  box-shadow:0 0 0 9px rgba(152,220,90,.08),0 0 22px rgba(132,220,83,.48);
}
.dragon-slash{
  position:absolute;
  z-index:10;
  width:82px;
  height:10px;
  margin:-5px 0 0 -41px;
  border-top:3px solid rgba(255,122,92,.92);
  transform:rotate(-42deg);
  pointer-events:none;
  filter:drop-shadow(0 0 7px rgba(255,71,52,.68));
  animation:dragon-slash-cut .38s ease-out forwards;
}
.dragon-slash.is-execute{
  width:102px;
  margin-left:-51px;
  border-top-width:4px;
  border-color:#ffbe67;
}
.dragon-slash.is-rapid{
  width:72px;
  margin-left:-36px;
  border-color:#d9a0ff;
}
.dragon-slash.is-necro{
  width:112px;
  margin-left:-56px;
  border-top-width:4px;
  border-color:#ff5151;
  filter:drop-shadow(0 0 9px rgba(255,35,35,.78));
}
.dragon-raider-card.is-casting-heal{
  box-shadow:0 0 0 1px rgba(84,223,166,.48),0 0 28px rgba(57,201,143,.22),inset 0 0 24px rgba(65,202,148,.10)!important;
}
.dragon-raider-card.is-resurrecting{
  box-shadow:0 0 0 1px rgba(163,241,211,.68),0 0 36px rgba(80,224,172,.34),inset 0 0 28px rgba(86,235,183,.14)!important;
}
.dragon-raider-card.is-taunting{
  box-shadow:0 0 0 2px rgba(116,178,255,.66),0 0 30px rgba(63,139,235,.28),inset 0 0 24px rgba(71,135,220,.10)!important;
}
.dragon-raider-card.is-shielded{
  box-shadow:0 0 0 3px rgba(130,199,255,.40),0 0 34px rgba(100,177,239,.30),inset 0 0 34px rgba(98,178,242,.15)!important;
}
.dragon-raider-card.is-poison-hit{
  box-shadow:0 0 0 1px rgba(107,222,98,.58),0 0 30px rgba(86,211,83,.28),inset 0 0 28px rgba(82,196,81,.13)!important;
}
.dragon-raider-card.is-guilt-mark,
.dragon-raider-card.is-shadow-hit,
.dragon-raider-card.is-isolated-hit{
  box-shadow:0 0 0 1px rgba(159,89,211,.48),0 0 30px rgba(108,46,163,.28),inset 0 0 28px rgba(95,34,145,.16)!important;
}
.dragon-arena.is-heal-cast::after,
.dragon-arena.is-resurrection-cast::after,
.dragon-arena.is-venom-flood::after,
.dragon-arena.is-white-silence::after,
.dragon-arena.is-hym-cast::after,
.dragon-arena.is-hym-cataclysm::after,
.dragon-arena.is-crit-hit::after,
.dragon-arena.is-catastrophic-strike::after,
.dragon-arena.is-vent-ambush::after,
.dragon-arena.is-taunt-cast::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
  opacity:0;
  animation:dragon-arena-flash .62s ease-out forwards;
}
.dragon-arena.is-heal-cast::after{background:radial-gradient(circle,rgba(74,210,151,.14),transparent 52%)}
.dragon-arena.is-resurrection-cast::after{background:radial-gradient(circle,rgba(116,236,190,.22),transparent 56%)}
.dragon-arena.is-venom-flood::after{background:radial-gradient(circle,rgba(80,185,71,.24),rgba(42,90,36,.08) 44%,transparent 72%)}
.dragon-arena.is-white-silence::after{background:radial-gradient(circle,rgba(207,235,255,.22),rgba(125,170,205,.07) 50%,transparent 76%)}
.dragon-arena.is-hym-cast::after{background:radial-gradient(circle,rgba(112,49,158,.18),transparent 62%)}
.dragon-arena.is-hym-cataclysm::after{background:radial-gradient(circle,rgba(95,26,138,.28),rgba(18,8,28,.20) 54%,transparent 78%)}
.dragon-arena.is-crit-hit::after{background:radial-gradient(circle,rgba(255,169,74,.20),transparent 50%)}
.dragon-arena.is-catastrophic-strike::after{background:radial-gradient(circle,rgba(255,62,49,.24),rgba(88,9,12,.13) 48%,transparent 75%)}
.dragon-arena.is-vent-ambush::after{background:linear-gradient(135deg,transparent 25%,rgba(255,55,55,.08) 49%,transparent 52%)}
.dragon-arena.is-taunt-cast::after{background:radial-gradient(circle,rgba(84,145,230,.14),transparent 58%)}
@keyframes dragon-slash-cut{
  0%{opacity:0;scale:.45 1}
  24%{opacity:1}
  100%{opacity:0;scale:1.28 1}
}
@keyframes dragon-arena-flash{
  0%{opacity:0}
  28%{opacity:1}
  100%{opacity:0}
}


/* Readability reinforcement: status chips, telegraphs, combat text, passive cue */
.dragon-status-chips{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:7px 0 2px;
}
.dragon-status-chips span{
  padding:3px 6px;
  border:1px solid rgba(184,126,211,.22);
  background:rgba(57,29,69,.28);
  color:#cbb2d8;
  font:800 8px/1 var(--font-mono,monospace);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.dragon-status-chips .is-poisoned{border-color:rgba(115,215,103,.42);background:rgba(45,88,38,.30);color:#9be28d}
.dragon-status-chips .is-guilt{border-color:rgba(180,104,221,.40);color:#d2a3ea}
.dragon-status-chips .is-haunted{border-color:rgba(143,84,190,.36);color:#ba8ed5}
.dragon-status-chips .is-isolated{border-color:rgba(196,225,245,.34);color:#cbe7f9}
.dragon-status-chips .is-shredded{border-color:rgba(236,84,84,.42);color:#ff8f8f}
.dragon-status-chips .is-taunt,
.dragon-status-chips .is-guard,
.dragon-status-chips .is-block,
.dragon-status-chips .is-shieldwall,
.dragon-status-chips .is-shieldnegate{
  border-color:rgba(104,168,234,.42);
  color:#9dc8f2;
}
.dragon-status-chips .is-bloodlust,
.dragon-status-chips .is-sunder{
  border-color:rgba(229,92,76,.38);
  color:#f4a08f;
}
.dragon-float-text{
  position:absolute;
  z-index:18;
  transform:translate(-50%,-50%);
  pointer-events:none;
  color:#ff8a73;
  font:900 23px/1 var(--font-mono,monospace);
  letter-spacing:.03em;
  text-shadow:0 2px 3px #000,0 0 12px rgba(255,70,46,.55);
  animation:dragon-float-up .86s ease-out forwards;
}
.dragon-float-text.is-heal{color:#83e3ae;text-shadow:0 2px 3px #000,0 0 12px rgba(64,220,143,.55)}
.dragon-float-text.is-venom{color:#9ae27f;text-shadow:0 2px 3px #000,0 0 13px rgba(75,220,89,.62)}
.dragon-float-text.is-heavy{color:#ffc073;font-size:27px}
.dragon-float-text.is-crit{color:#ffe07e;font-size:33px;text-shadow:0 2px 3px #000,0 0 18px rgba(255,171,48,.76)}
.dragon-float-text.is-revive{color:#a8f1d1;font-size:20px;letter-spacing:.10em}
.dragon-raider-card.is-targeted{
  z-index:6;
  animation:dragon-target-pulse .32s ease-in-out infinite alternate;
}
.dragon-raider-card.is-targeted-venom{border-color:rgba(116,231,101,.82)!important;box-shadow:0 0 0 2px rgba(108,220,92,.16),0 0 30px rgba(82,208,75,.30)!important}
.dragon-raider-card.is-targeted-frost{border-color:rgba(199,233,255,.84)!important;box-shadow:0 0 0 2px rgba(172,220,251,.15),0 0 30px rgba(149,211,250,.27)!important}
.dragon-raider-card.is-targeted-shadow{border-color:rgba(183,109,230,.80)!important;box-shadow:0 0 0 2px rgba(150,83,195,.16),0 0 30px rgba(112,50,165,.30)!important}
.dragon-raider-card.is-targeted-necro{border-color:rgba(255,91,91,.84)!important;box-shadow:0 0 0 2px rgba(255,64,64,.14),0 0 30px rgba(232,54,54,.30)!important}
.dragon-raider-card.is-targeted-danger{border-color:rgba(255,132,86,.80)!important;box-shadow:0 0 0 2px rgba(255,106,62,.14),0 0 30px rgba(232,75,43,.27)!important}
.dragon-phase-cue{
  position:absolute;
  left:50%;
  top:45%;
  z-index:22;
  transform:translate(-50%,-50%);
  padding:10px 16px;
  border:1px solid rgba(185,120,214,.42);
  background:rgba(10,7,13,.88);
  color:#e7c7f2;
  font:900 16px/1 var(--font-display,var(--font-mono,monospace));
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 0 28px rgba(143,68,180,.24);
  animation:dragon-phase-cue 1.18s ease-out forwards;
}
.dragon-phase-cue.is-swamp{
  border-color:rgba(121,218,104,.52);
  color:#b8ec9f;
  box-shadow:0 0 30px rgba(79,201,72,.28);
}
.dragon-passive-badge{
  display:inline-block;
  margin-top:7px;
  padding:4px 8px;
  border:1px solid rgba(var(--boss-ring),.22);
  background:rgba(15,10,16,.72);
  color:#9f8997;
  font:800 8px/1 var(--font-mono,monospace);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.dragon-passive-badge.is-awakened{
  border-color:rgba(126,224,104,.62);
  color:#b3ee9e;
  background:rgba(42,82,34,.42);
  box-shadow:0 0 18px rgba(76,201,68,.22);
  animation:dragon-passive-awake 1.25s ease-in-out infinite alternate;
}
.dragon-arena.is-swamp-vigor::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
  background:radial-gradient(circle,rgba(88,190,73,.18),rgba(48,91,39,.06) 48%,transparent 76%);
  animation:dragon-arena-flash 1.05s ease-out forwards;
}
@keyframes dragon-float-up{
  0%{opacity:0;translate:-50% 8px;scale:.86}
  18%{opacity:1;scale:1.06}
  100%{opacity:0;translate:-50% -34px;scale:1}
}
@keyframes dragon-target-pulse{
  from{filter:brightness(1)}
  to{filter:brightness(1.24)}
}
@keyframes dragon-phase-cue{
  0%{opacity:0;translate:0 10px;scale:.88}
  20%{opacity:1;translate:0 0;scale:1.03}
  72%{opacity:1}
  100%{opacity:0;translate:0 -10px;scale:1}
}
@keyframes dragon-passive-awake{
  from{filter:brightness(.98)}
  to{filter:brightness(1.22);text-shadow:0 0 8px rgba(112,224,91,.48)}
}
@media(prefers-reduced-motion:reduce){
  .dragon-float-text,.dragon-phase-cue,.dragon-passive-badge.is-awakened,.dragon-raider-card.is-targeted{animation:none!important}
}


/* Arena fortification: active lane, danger states, death beats, boss ambience */
.dragon-active-lane{
  position:absolute;
  z-index:1;
  height:2px;
  transform-origin:left center;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(201,145,235,.08),rgba(219,164,248,.52),rgba(219,164,248,.08));
  box-shadow:0 0 9px rgba(182,111,224,.24);
  animation:dragon-lane-pulse 1.2s ease-in-out infinite alternate;
}
.dragon-active-lane[hidden]{display:none!important}
.dragon-raider-card.is-low-hp{
  border-color:rgba(220,91,77,.48);
  box-shadow:0 0 0 1px rgba(210,76,63,.08),0 0 18px rgba(189,53,47,.15),inset 0 0 18px rgba(155,42,38,.07);
}
.dragon-raider-card.is-critical-hp{
  border-color:rgba(255,72,72,.72);
  box-shadow:0 0 0 1px rgba(255,65,65,.14),0 0 28px rgba(221,45,45,.24),inset 0 0 24px rgba(187,36,36,.10);
  animation:dragon-critical-heartbeat .82s ease-in-out infinite;
}
.dragon-arena.is-boss-low .dragon-boss-avatar{
  box-shadow:0 0 0 7px rgba(var(--boss-ring),.05),0 0 36px rgba(var(--boss-ring),.24),inset 0 0 42px rgba(0,0,0,.42);
}
.dragon-arena.is-boss-critical .dragon-boss-avatar{
  animation:dragon-boss-critical 1s ease-in-out infinite alternate;
}
.dragon-arena-atmosphere{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.dragon-arena-atmosphere i{
  position:absolute;
  left:var(--x,10%);
  bottom:-18px;
  width:4px;
  height:4px;
  border-radius:50%;
  opacity:.22;
  animation:dragon-atmos-rise var(--dur,7s) linear infinite;
  animation-delay:var(--delay,0s);
}
.dragon-arena-atmosphere i:nth-child(1){--x:8%;--dur:7.8s;--delay:-1s}
.dragon-arena-atmosphere i:nth-child(2){--x:19%;--dur:6.7s;--delay:-4s}
.dragon-arena-atmosphere i:nth-child(3){--x:34%;--dur:8.4s;--delay:-2.2s}
.dragon-arena-atmosphere i:nth-child(4){--x:48%;--dur:6.2s;--delay:-5.1s}
.dragon-arena-atmosphere i:nth-child(5){--x:61%;--dur:7.3s;--delay:-3.4s}
.dragon-arena-atmosphere i:nth-child(6){--x:73%;--dur:8.8s;--delay:-6s}
.dragon-arena-atmosphere i:nth-child(7){--x:86%;--dur:6.9s;--delay:-2.8s}
.dragon-arena-atmosphere i:nth-child(8){--x:94%;--dur:8.1s;--delay:-4.8s}
.dragon-arena[data-boss-id="hydra"] .dragon-arena-atmosphere i{
  background:#77d36a;
  box-shadow:0 0 10px rgba(87,211,75,.68);
}
.dragon-arena[data-boss-id="wendigo"] .dragon-arena-atmosphere i{
  width:3px;height:7px;border-radius:30%;
  background:#d8efff;
  box-shadow:0 0 8px rgba(191,228,255,.60);
}
.dragon-arena[data-boss-id="hym"] .dragon-arena-atmosphere i{
  width:7px;height:7px;
  background:rgba(145,83,194,.48);
  box-shadow:0 0 13px rgba(123,59,174,.70);
  filter:blur(1px);
}
.dragon-arena[data-boss-id="necromorph"] .dragon-arena-atmosphere i{
  width:2px;height:8px;border-radius:0;
  background:#ff5555;
  box-shadow:0 0 8px rgba(255,54,54,.74);
}
.dragon-arena[data-boss-id="deathwing"] .dragon-arena-atmosphere i{
  width:5px;height:5px;
  background:#ff7b38;
  box-shadow:0 0 12px rgba(255,73,29,.78);
}
.dragon-phase-cue.is-attack{
  top:36%;
  padding:8px 14px;
  border-color:rgba(255,116,79,.38);
  color:#ffd0bb;
  background:rgba(22,8,10,.90);
  font-size:13px;
  box-shadow:0 0 24px rgba(194,60,42,.20);
}
.dragon-phase-cue.is-kill{
  border-color:rgba(255,76,76,.62);
  color:#ffd4d4;
  background:rgba(26,5,8,.94);
  font-size:18px;
  box-shadow:0 0 34px rgba(235,48,48,.34);
}
.dragon-raider-card.is-hero-dying{
  animation:dragon-hero-fall .72s cubic-bezier(.2,.8,.24,1) forwards!important;
}
.dragon-float-text.is-fallen{
  color:#ff8383;
  font-size:18px;
  letter-spacing:.14em;
  text-shadow:0 2px 3px #000,0 0 16px rgba(255,52,52,.58);
}
.dragon-arena-boss.is-boss-dying{
  animation:dragon-boss-death .95s cubic-bezier(.18,.82,.26,1) forwards;
  transform-origin:center;
}
.dragon-arena.is-boss-death .dragon-arena-ring{
  animation:dragon-ring-collapse .9s ease-in forwards;
}
.dragon-arena.is-boss-death::before{
  animation:dragon-death-dim .95s ease-in forwards;
}
@keyframes dragon-lane-pulse{
  from{opacity:.28;filter:brightness(.9)}
  to{opacity:.72;filter:brightness(1.28)}
}
@keyframes dragon-critical-heartbeat{
  0%,100%{filter:brightness(1);scale:1}
  42%{filter:brightness(1.13);scale:1.015}
  58%{filter:brightness(1.03);scale:1.005}
}
@keyframes dragon-boss-critical{
  from{filter:brightness(.96) saturate(1)}
  to{filter:brightness(1.15) saturate(1.14);box-shadow:0 0 0 7px rgba(var(--boss-ring),.07),0 0 44px rgba(255,58,58,.28),inset 0 0 44px rgba(80,0,0,.18)}
}
@keyframes dragon-atmos-rise{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:0}
  14%{opacity:.28}
  74%{opacity:.18}
  100%{transform:translate3d(22px,-580px,0) scale(1.35);opacity:0}
}
@keyframes dragon-hero-fall{
  0%{opacity:1;translate:0 0;filter:grayscale(0) brightness(1)}
  28%{opacity:1;translate:0 -4px;filter:grayscale(.2) brightness(1.22)}
  100%{opacity:.38;translate:0 10px;filter:grayscale(.9) brightness(.58)}
}
@keyframes dragon-boss-death{
  0%{opacity:1;translate:0 0;scale:1;filter:brightness(1)}
  22%{translate:-4px 2px;scale:1.06;filter:brightness(1.65)}
  38%{translate:5px -3px;scale:1.03}
  62%{translate:-3px 4px;scale:.96;filter:brightness(.72) grayscale(.25)}
  100%{opacity:.08;translate:0 16px;scale:.72;filter:brightness(.25) grayscale(1)}
}
@keyframes dragon-ring-collapse{
  0%{scale:1;opacity:1}
  55%{scale:1.08;opacity:.72}
  100%{scale:.18;opacity:0}
}
@keyframes dragon-death-dim{
  from{opacity:.6}
  to{opacity:.18}
}
@media(max-width:650px){
  :where(html:not(.asoc-mobile)) .dragon-active-lane{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .dragon-active-lane,.dragon-raider-card.is-critical-hp,.dragon-arena.is-boss-critical .dragon-boss-avatar,
  .dragon-arena-atmosphere i,.dragon-raider-card.is-hero-dying,.dragon-arena-boss.is-boss-dying,
  .dragon-arena.is-boss-death .dragon-arena-ring{animation:none!important}
}

/* ===== Cabinet portraits: real Little Hero avatars + specimen art ===== */
.dragon-raider-portrait{
  --frame:#9B5DE0;
  grid-row:1 / span 2;
  position:relative;
  display:grid;
  place-items:center;
  flex:none;
  width:48px;
  height:48px;
  border:2px solid var(--frame);
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#2a1c33,#0a070d 72%);
  box-shadow:0 0 12px color-mix(in srgb,var(--frame) 42%,transparent),inset 0 0 8px rgba(0,0,0,.65);
}
.dragon-portrait-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  user-select:none;
}
.dragon-portrait-fallback{
  color:rgba(255,238,248,.82);
  font:900 20px/1 var(--font-display,monospace);
  text-shadow:0 0 10px color-mix(in srgb,var(--frame) 60%,transparent);
}
.dragon-raider-portrait.has-avatar .dragon-portrait-fallback{display:none}
.dragon-raider-portrait .dragon-role-icon{
  position:absolute;
  right:-7px;
  bottom:-5px;
  grid-row:auto;
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:rgba(10,7,12,.94);
  font-size:11px;
  font-style:normal;
  line-height:1;
  box-shadow:0 0 6px rgba(0,0,0,.7);
}
.dragon-arena-party .dragon-raider-portrait{width:54px;height:54px}
.dragon-raider-card.is-active .dragon-raider-portrait{
  box-shadow:0 0 0 2px rgba(204,128,255,.28),0 0 18px color-mix(in srgb,var(--frame) 70%,transparent),inset 0 0 8px rgba(0,0,0,.65);
}
.dragon-raider-card.is-fallen .dragon-raider-portrait{filter:grayscale(1) brightness(.7)}
.dragon-raider-card.is-turn-lost{animation:dragon-turn-lost .62s ease-out}
@keyframes dragon-turn-lost{0%,100%{filter:none}35%{filter:grayscale(.9) brightness(.7)}}

/* Specimen portrait in the central frame (the letter is only the last-resort fallback). */
.dragon-boss-avatar.has-art{border-color:transparent;background:transparent}
.dragon-boss-avatar.has-art::before,
.dragon-boss-avatar.has-art::after{display:none}
.dragon-boss-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 32%;
  user-select:none;
}
.dragon-boss-avatar.has-art .dragon-boss-avatar-fallback{display:none}

/* Hero turn clock (server deadline, mirrored here only for display). */
.dragon-card-timer{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:6px;
  margin-top:7px;
}
.dragon-card-timer b{
  min-width:28px;
  color:#ffe2a6;
  font:900 11px/1 var(--font-mono,monospace);
  letter-spacing:.04em;
}
.dragon-card-timer>span{
  display:block;
  height:4px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.10);
}
.dragon-card-timer i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#b9771f,#f2cf6b);
  transition:width .25s linear;
}
.dragon-turn-clock{
  margin-left:6px;
  padding:2px 8px;
  border:1px solid rgba(242,207,107,.5);
  border-radius:99px;
  background:rgba(20,13,6,.7);
  color:#ffe2a6;
  font:900 12px/1 var(--font-mono,monospace);
  letter-spacing:.06em;
}
.dragon-card-timer b.is-critical,
.dragon-turn-clock.is-critical{color:#ff9d5c;border-color:rgba(255,157,92,.7)}
.dragon-card-timer b.is-terminal,
.dragon-turn-clock.is-terminal{color:#ff5a4d;border-color:rgba(255,90,77,.85);animation:dragon-turn-urgent .9s steps(2,end) infinite}
@keyframes dragon-turn-urgent{50%{opacity:.55}}
.dragon-round-feed .timeout{color:#ffb16b}
@media (prefers-reduced-motion:reduce){
  .dragon-card-timer b.is-terminal,.dragon-turn-clock.is-terminal,.dragon-raider-card.is-turn-lost{animation:none!important}
}
@media(max-width:650px){
  :where(html:not(.asoc-mobile)) .dragon-arena-party .dragon-raider-portrait{width:48px;height:48px}
}

/* Portrait rows make the party cards taller: give the arena the room so the top card never overlaps the specimen frame. */
@media(min-width:651px){
  .dragon-arena{min-height:650px}
  .dragon-arena-boss{top:56%}
}
@media(min-width:651px) and (max-width:900px){
  :where(html:not(.asoc-mobile)) .dragon-arena{min-height:780px}
}

/* Cabinet dossier portraits: specimen art stays subordinate to the launch copy. */
.dragon-setup-portrait{
  position:absolute;
  z-index:0;
  right:-8px;
  top:50%;
  width:48%;
  height:118%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  opacity:.23;
  filter:grayscale(.25) contrast(1.18) brightness(.7);
  transform:translateY(-50%) scale(1.02);
  mask-image:linear-gradient(90deg,transparent 0,#000 38%,#000 100%);
  transition:opacity .22s ease,filter .22s ease,transform .28s ease;
}
.dragon-setup-grid>button:hover .dragon-setup-portrait,
.dragon-setup-grid>button:focus-visible .dragon-setup-portrait{
  opacity:.46;
  filter:grayscale(0) contrast(1.12) brightness(.82) saturate(1.08);
  transform:translateY(-50%) scale(1.08);
}
.dragon-setup-grid>button:focus-visible{
  outline:2px solid rgba(var(--boss-accent),.9);
  outline-offset:3px;
}
.dragon-setup-grid>button.is-heroic .dragon-setup-portrait{width:36%;opacity:.3}

/* A short theatrical takeover between hero and specimen turns. */
.dragon-boss-phase{
  position:absolute;
  inset:0;
  z-index:18;
  display:grid;
  place-content:center;
  gap:8px;
  pointer-events:none;
  text-align:center;
  background:radial-gradient(circle,rgba(72,9,13,.35),rgba(5,3,7,.82) 62%,rgba(2,2,4,.93));
  animation:dragon-phase-takeover 1.25s cubic-bezier(.16,.78,.22,1) forwards;
}
.dragon-boss-phase small{color:#ce7880;font:800 10px/1 var(--font-mono,monospace);letter-spacing:.28em}
.dragon-boss-phase b{color:#fff0ee;font:900 clamp(24px,5vw,56px)/1 var(--font-display,monospace);letter-spacing:.16em;text-shadow:0 0 24px rgba(255,48,48,.38)}
@keyframes dragon-phase-takeover{
  0%{opacity:0;clip-path:inset(48% 0)}
  22%,70%{opacity:1;clip-path:inset(0)}
  100%{opacity:0;clip-path:inset(0)}
}

/* Natural extremes deserve a readable beat before the impact animation lands. */
.dragon-roll-drama{
  position:absolute;
  left:50%;
  top:48%;
  z-index:30;
  display:grid;
  min-width:220px;
  place-items:center;
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:dragon-roll-reveal 1.4s cubic-bezier(.17,.85,.25,1) forwards;
}
.dragon-roll-drama::before{content:"";position:absolute;inset:-45px -85px;z-index:-1;background:radial-gradient(circle,rgba(255,188,55,.22),transparent 66%)}
.dragon-roll-drama small,.dragon-roll-drama strong{font:900 10px/1 var(--font-mono,monospace);letter-spacing:.25em}
.dragon-roll-drama b{color:#fff4c4;font:900 clamp(64px,10vw,118px)/.88 var(--font-display,monospace);text-shadow:0 0 12px #ffb52d,0 0 42px rgba(255,117,15,.72)}
.dragon-roll-drama strong{color:#ffd36b}
.dragon-roll-drama.is-fumble::before{background:radial-gradient(circle,rgba(214,20,34,.26),transparent 66%)}
.dragon-roll-drama.is-fumble b{color:#ffd1d1;text-shadow:0 0 12px #ff3048,0 0 42px rgba(174,7,28,.72)}
.dragon-roll-drama.is-fumble strong{color:#ff6674}
.dragon-roll-drama.is-boss-roll small{color:#ef7f88}
@keyframes dragon-roll-reveal{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg);filter:blur(7px)}
  18%,64%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(1.1);filter:blur(2px)}
}

/* Three-line battle memory: enough context to read a round without becoming a log wall. */
.dragon-chronicle{
  margin-top:10px;
  border:1px solid rgba(146,101,160,.3);
  background:linear-gradient(180deg,rgba(15,11,19,.9),rgba(7,7,10,.94));
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.dragon-chronicle>header{display:flex;justify-content:space-between;padding:8px 11px;border-bottom:1px solid rgba(146,101,160,.2);color:#b991ca;font:800 9px/1 var(--font-mono,monospace);letter-spacing:.18em}
.dragon-chronicle>div{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 11px;border-top:1px solid rgba(255,255,255,.035)}
.dragon-chronicle>div:first-of-type{border-top:0;background:rgba(145,84,166,.055)}
.dragon-chronicle i{color:#bc8bd1;font-style:normal;text-align:center}.dragon-chronicle .is-boss i{color:#e45e67}
.dragon-chronicle span{display:flex;min-width:0;gap:8px;align-items:baseline}.dragon-chronicle b{overflow:hidden;color:#e8dceb;font:800 10px/1 var(--font-mono,monospace);text-overflow:ellipsis;white-space:nowrap}.dragon-chronicle span small{overflow:hidden;color:#958b9a;font:700 9px/1 var(--font-mono,monospace);text-overflow:ellipsis;white-space:nowrap}
.dragon-chronicle em{color:#c6a3d5;font:800 9px/1 var(--font-mono,monospace);font-style:normal}.dragon-chronicle .is-boss em{color:#df848a}.dragon-chronicle .is-timeout small{color:#d9a16f}

@media(max-width:650px){
  :where(html:not(.asoc-mobile)) .dragon-setup-portrait{width:58%;opacity:.18}
  :where(html:not(.asoc-mobile)) .dragon-setup-grid>button.is-heroic .dragon-setup-portrait{width:55%}
  :where(html:not(.asoc-mobile)) .dragon-boss-phase b{font-size:23px}
  :where(html:not(.asoc-mobile)) .dragon-chronicle span{display:grid;gap:3px}
}
@media(prefers-reduced-motion:reduce){
  .dragon-setup-portrait{transition:none}
  .dragon-boss-phase,.dragon-roll-drama{display:none}
}

/* Forbidden Archive frame — replace generic boxed UI with carved, asymmetric dossiers. */
.dragon-setup-overlay{
  background:
    radial-gradient(ellipse at 50% 8%,rgba(109,38,126,.24),transparent 42%),
    repeating-radial-gradient(circle at 50% 50%,transparent 0 86px,rgba(171,76,205,.018) 87px 88px),
    linear-gradient(135deg,#030207 0%,#0a0410 52%,#050207 100%);
}
.dragon-setup-panel{
  --archive-edge:#9a4db0;
  width:min(1160px,94vw);
  border:0;
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
  background:
    linear-gradient(90deg,var(--archive-edge),transparent 12%,transparent 88%,var(--archive-edge)) top/100% 1px no-repeat,
    linear-gradient(90deg,var(--archive-edge),transparent 12%,transparent 88%,var(--archive-edge)) bottom/100% 1px no-repeat,
    linear-gradient(180deg,var(--archive-edge),transparent 15%,transparent 85%,var(--archive-edge)) left/1px 100% no-repeat,
    linear-gradient(180deg,var(--archive-edge),transparent 15%,transparent 85%,var(--archive-edge)) right/1px 100% no-repeat,
    linear-gradient(145deg,rgba(24,9,30,.99),rgba(5,4,8,.995) 38%,rgba(10,3,10,.995));
  box-shadow:0 38px 110px #000,0 0 80px rgba(131,31,161,.18);
}
.dragon-setup-panel::before{
  z-index:0;
  inset:10px;
  border:1px solid rgba(177,83,202,.12);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  background:
    linear-gradient(135deg,rgba(204,122,231,.23) 0 2px,transparent 2px) 0 0/18px 18px no-repeat,
    linear-gradient(225deg,rgba(204,122,231,.23) 0 2px,transparent 2px) 100% 0/18px 18px no-repeat,
    linear-gradient(45deg,rgba(204,122,231,.23) 0 2px,transparent 2px) 0 100%/18px 18px no-repeat,
    linear-gradient(315deg,rgba(204,122,231,.23) 0 2px,transparent 2px) 100% 100%/18px 18px no-repeat;
  opacity:1;
}
.dragon-setup-panel>header,
.dragon-setup-panel>p,
.dragon-setup-grid{position:relative;z-index:1}
.dragon-setup-panel>header{
  min-height:126px;
  padding:30px 38px 27px;
  border:0;
  background:
    linear-gradient(90deg,rgba(109,26,126,.62),rgba(45,8,48,.48) 52%,rgba(74,8,23,.55)),
    repeating-linear-gradient(115deg,transparent 0 28px,rgba(255,255,255,.012) 29px 30px);
}
.dragon-setup-panel>header::before{
  content:"ARCHIVE // 05 SPECIMENS // AUTHORITY: SHADOW BROKER";
  position:absolute;
  right:112px;
  bottom:17px;
  color:rgba(213,147,229,.42);
  font:700 8px/1 var(--font-mono,monospace);
  letter-spacing:.18em;
}
.dragon-setup-panel>header::after{
  left:38px;
  right:38px;
  bottom:0;
  height:4px;
  background:linear-gradient(90deg,#bd67d4 0 8%,transparent 8% 10%,#6e327e 10% 68%,transparent 68% 70%,#852238 70% 100%);
  opacity:.82;
}
.dragon-setup-panel h2{text-shadow:0 2px 0 #19061e,0 0 32px rgba(218,125,242,.16)}
.dragon-setup-panel header button{
  position:relative;
  width:52px;
  height:52px;
  border:0;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  background:
    linear-gradient(135deg,rgba(224,112,164,.44) 0 2px,transparent 2px),
    linear-gradient(315deg,rgba(224,112,164,.44) 0 2px,transparent 2px),
    rgba(29,7,20,.9);
  box-shadow:none;
}
.dragon-setup-panel header button::before,.dragon-setup-panel header button::after{content:"";position:absolute;background:#d16c9b;opacity:.66}
.dragon-setup-panel header button::before{width:18px;height:2px;left:17px;top:25px;transform:rotate(45deg)}
.dragon-setup-panel header button::after{width:18px;height:2px;left:17px;top:25px;transform:rotate(-45deg)}
.dragon-setup-panel header button{font-size:0}
.dragon-setup-panel header button:hover{transform:rotate(3deg) scale(1.06);background-color:rgba(68,10,35,.95)}
.dragon-setup-panel>p{
  padding:17px 38px 18px 58px;
  border:0;
  background:rgba(3,3,7,.78);
}
.dragon-setup-panel>p::before{content:"◆";position:absolute;left:36px;color:#b765cd;text-shadow:0 0 12px #9b31bc}
.dragon-setup-panel>p::after{content:"";position:absolute;left:38px;right:38px;bottom:0;height:1px;background:linear-gradient(90deg,rgba(181,91,205,.5),transparent 72%)}
.dragon-setup-grid{gap:13px;padding:26px 28px 30px}
.dragon-setup-grid>button{
  min-height:166px;
  padding:23px 24px 21px 27px;
  border:0;
  border-left:3px solid rgba(var(--boss-accent),.58);
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,14px 100%,0 calc(100% - 14px));
  background:
    linear-gradient(90deg,rgba(var(--boss-soft),.13),transparent 46%),
    linear-gradient(165deg,rgba(23,18,27,.97),rgba(7,7,10,.99));
  box-shadow:inset 0 1px rgba(var(--boss-accent),.24),inset 0 -1px rgba(var(--boss-accent),.16),0 12px 28px rgba(0,0,0,.24);
}
.dragon-setup-grid>button::before{
  z-index:0;
  background:
    linear-gradient(90deg,rgba(var(--boss-accent),.2),transparent 30%) top/100% 1px no-repeat,
    linear-gradient(90deg,transparent 52%,rgba(var(--boss-accent),.08)) bottom/100% 1px no-repeat,
    radial-gradient(circle at 78% 50%,rgba(var(--boss-accent),.13),transparent 32%);
}
.dragon-setup-grid>button::after{
  content:"I";
  right:17px;
  top:14px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(6,6,9,.92) 48%,rgba(var(--boss-accent),.28) 50% 53%,transparent 55%),conic-gradient(from 45deg,transparent 0 10%,rgba(var(--boss-accent),.7) 10% 12%,transparent 12% 35%,rgba(var(--boss-accent),.7) 35% 37%,transparent 37% 100%);
  color:rgba(var(--boss-accent),.92);
  font:900 9px/1 var(--font-mono,monospace);
  opacity:.78;
  transform:none;
  box-shadow:none;
}
.dragon-setup-grid>button[data-boss-id="hym"]::after{content:"II"}
.dragon-setup-grid>button[data-boss-id="hydra"]::after{content:"III"}
.dragon-setup-grid>button[data-boss-id="necromorph"]::after{content:"IV"}
.dragon-setup-grid>button[data-boss-id="deathwing"]::after{content:"V"}
.dragon-setup-grid>button:hover{
  transform:translateY(-3px) translateX(2px);
  border-left-color:rgb(var(--boss-accent));
  box-shadow:inset 0 1px rgba(var(--boss-accent),.52),inset 0 -1px rgba(var(--boss-accent),.28),-7px 0 24px rgba(var(--boss-accent),.09),0 18px 34px rgba(0,0,0,.38);
}
.dragon-setup-grid>button em{
  min-width:0;
  min-height:0;
  padding:8px 13px 7px 17px;
  border:0;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  background:linear-gradient(90deg,rgba(var(--boss-accent),.18),rgba(var(--boss-accent),.035));
  box-shadow:inset 3px 0 rgb(var(--boss-accent));
}
.dragon-setup-grid>button:hover em{border:0;background:linear-gradient(90deg,rgba(var(--boss-accent),.3),rgba(var(--boss-accent),.07));box-shadow:inset 3px 0 rgb(var(--boss-accent)),0 0 20px rgba(var(--boss-accent),.1)}
.dragon-setup-grid>button.is-heroic{border:0;border-left:4px solid rgba(255,66,75,.78);clip-path:polygon(0 0,calc(100% - 25px) 0,100% 25px,100% 100%,18px 100%,0 calc(100% - 18px))}
.dragon-setup-grid>button.is-heroic::after{background:radial-gradient(circle,#170507 45%,rgba(255,61,69,.36) 47% 53%,transparent 55%),conic-gradient(from 45deg,transparent 0 10%,#f34950 10% 12%,transparent 12% 35%,#f34950 35% 37%,transparent 37% 100%)}

@media(max-width:720px){
  :where(html:not(.asoc-mobile)) .dragon-setup-panel>header{padding:24px 22px}:where(html:not(.asoc-mobile)) .dragon-setup-panel>header::before{display:none}
  :where(html:not(.asoc-mobile)) .dragon-setup-panel>header::after{left:22px;right:22px}
  :where(html:not(.asoc-mobile)) .dragon-setup-panel>p{padding-left:44px}:where(html:not(.asoc-mobile)) .dragon-setup-panel>p::before{left:23px}:where(html:not(.asoc-mobile)) .dragon-setup-panel>p::after{left:22px;right:22px}
  :where(html:not(.asoc-mobile)) .dragon-setup-grid{padding:17px 16px 22px}:where(html:not(.asoc-mobile)) .dragon-setup-grid>button{min-height:155px}
}

/* Recruitment chamber — shared by GM and players, styled as a living Cabinet seal. */
.dragon-raid-overlay[data-phase="RECRUITING"]{
  --recruit-accent:190,92,47;
  --recruit-secondary:118,45,27;
  background:
    radial-gradient(ellipse at 50% 35%,rgba(var(--recruit-accent),.13),transparent 44%),
    radial-gradient(circle at 12% 80%,rgba(var(--recruit-secondary),.10),transparent 25%),
    repeating-linear-gradient(118deg,transparent 0 52px,rgba(var(--recruit-accent),.012) 53px 54px),
    rgba(3,2,5,.94);
}
.dragon-raid-overlay[data-phase="RECRUITING"][data-boss-id="wendigo"]{--recruit-accent:184,211,230;--recruit-secondary:89,120,143}
.dragon-raid-overlay[data-phase="RECRUITING"][data-boss-id="hym"]{--recruit-accent:151,96,205;--recruit-secondary:78,42,119}
.dragon-raid-overlay[data-phase="RECRUITING"][data-boss-id="hydra"]{--recruit-accent:91,174,102;--recruit-secondary:36,96,51}
.dragon-raid-overlay[data-phase="RECRUITING"][data-boss-id="necromorph"]{--recruit-accent:216,73,77;--recruit-secondary:105,29,34}
.dragon-raid-overlay[data-phase="RECRUITING"][data-boss-id="deathwing"]{--recruit-accent:255,72,36;--recruit-secondary:139,25,19}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-raid-shell{
  width:min(1160px,96vw);
  padding:34px 38px 30px;
  border:0;
  border-radius:0;
  clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px),0 22px);
  background:
    linear-gradient(90deg,rgb(var(--recruit-accent)),transparent 13%,transparent 87%,rgb(var(--recruit-accent))) top/100% 1px no-repeat,
    linear-gradient(90deg,rgb(var(--recruit-accent)),transparent 13%,transparent 87%,rgb(var(--recruit-accent))) bottom/100% 1px no-repeat,
    linear-gradient(180deg,rgb(var(--recruit-accent)),transparent 16%,transparent 84%,rgb(var(--recruit-accent))) left/1px 100% no-repeat,
    linear-gradient(180deg,rgb(var(--recruit-accent)),transparent 16%,transparent 84%,rgb(var(--recruit-accent))) right/1px 100% no-repeat,
    radial-gradient(circle at 10% 0%,rgba(var(--recruit-accent),.09),transparent 30%),
    linear-gradient(145deg,rgba(15,9,14,.99),rgba(5,5,8,.995) 58%,rgba(var(--recruit-secondary),.055));
  box-shadow:0 35px 100px rgba(0,0,0,.82),0 0 70px rgba(var(--recruit-accent),.1);
}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-raid-shell::before{
  inset:9px;
  border:1px solid rgba(var(--recruit-accent),.1);
  border-radius:0;
  clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 15px);
  background:
    linear-gradient(135deg,rgba(var(--recruit-accent),.5) 0 2px,transparent 2px) 0 0/20px 20px no-repeat,
    linear-gradient(225deg,rgba(var(--recruit-accent),.5) 0 2px,transparent 2px) 100% 0/20px 20px no-repeat,
    linear-gradient(45deg,rgba(var(--recruit-accent),.5) 0 2px,transparent 2px) 0 100%/20px 20px no-repeat,
    linear-gradient(315deg,rgba(var(--recruit-accent),.5) 0 2px,transparent 2px) 100% 100%/20px 20px no-repeat;
}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-heading{
  min-height:100px;
  padding:0 0 22px;
  border:0;
}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-heading::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,rgb(var(--recruit-accent)) 0 9%,transparent 9% 11%,rgba(var(--recruit-accent),.4) 11% 72%,transparent 72% 74%,rgba(var(--recruit-accent),.18));
}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-mark{
  position:relative;
  width:86px;height:86px;
  border:0;border-radius:0;
  clip-path:polygon(50% 0,88% 15%,100% 50%,87% 86%,50% 100%,13% 86%,0 50%,13% 14%);
  background:
    radial-gradient(circle,rgba(var(--recruit-accent),.16) 0 45%,transparent 46%),
    conic-gradient(from 22.5deg,rgba(var(--recruit-accent),.46) 0 1.5%,transparent 1.5% 11%,rgba(var(--recruit-accent),.46) 11% 12.5%,transparent 12.5% 100%);
  filter:drop-shadow(0 0 14px rgba(var(--recruit-accent),.2));
}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-mark::after{content:"";position:absolute;inset:9px;border:1px solid rgba(var(--recruit-accent),.42);transform:rotate(45deg)}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-heading small{color:rgba(var(--recruit-accent),.86)}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-heading h1{color:#f6eff3;text-shadow:0 0 28px rgba(var(--recruit-accent),.2)}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-heading>strong{
  position:relative;
  padding:13px 16px 12px;
  color:rgb(var(--recruit-accent));
  background:linear-gradient(90deg,transparent,rgba(var(--recruit-accent),.06),transparent);
}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-heading>strong::before,.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-heading>strong::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--recruit-accent),.6),transparent)}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-heading>strong::before{top:0}.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-heading>strong::after{bottom:0}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-lore{margin:21px auto 13px;color:#afa5ad}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-party-count{position:relative;margin:17px auto 16px;width:max-content;padding:0 30px;color:rgba(var(--recruit-accent),.85)}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-party-count::before,.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-party-count::after{content:"";position:absolute;top:50%;width:22px;height:1px;background:rgba(var(--recruit-accent),.48)}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-party-count::before{left:0}.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-party-count::after{right:0}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-raider-grid{gap:9px;margin:14px 0 22px}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-raider-card{
  position:relative;
  min-height:148px;
  border:0;border-radius:0;
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,10px 100%,0 calc(100% - 10px));
  background:linear-gradient(160deg,rgba(var(--recruit-accent),.055),rgba(11,10,13,.94) 48%,rgba(5,5,7,.98));
  box-shadow:inset 0 1px rgba(var(--recruit-accent),.25),inset 0 -1px rgba(var(--recruit-accent),.14),inset 3px 0 rgba(var(--recruit-accent),.22);
}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-raider-card::after{content:"";position:absolute;right:8px;top:8px;width:16px;height:16px;background:linear-gradient(135deg,transparent 44%,rgba(var(--recruit-accent),.5) 45% 52%,transparent 53%)}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-raider-card.is-empty{
  border:0;
  color:rgba(var(--recruit-accent),.28);
  background:
    radial-gradient(circle at 50% 50%,transparent 0 22px,rgba(var(--recruit-accent),.07) 23px 24px,transparent 25px),
    linear-gradient(160deg,rgba(var(--recruit-accent),.025),rgba(6,6,8,.76));
  box-shadow:inset 0 1px rgba(var(--recruit-accent),.13),inset 3px 0 rgba(var(--recruit-accent),.12);
}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-raider-card.is-empty b{font:800 12px/1 var(--font-mono,monospace);letter-spacing:.16em}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-raider-card.is-empty small{color:rgba(var(--recruit-accent),.32)}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-gm-observer,
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-locked{
  position:relative;
  margin-top:12px;
  border:0;border-radius:0;
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%);
  background:linear-gradient(90deg,rgba(var(--recruit-secondary),.22),rgba(16,10,19,.88));
  box-shadow:inset 3px 0 rgb(var(--recruit-accent)),inset 0 1px rgba(var(--recruit-accent),.2),inset 0 -1px rgba(var(--recruit-accent),.12);
}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-gm-observer span::before{color:rgb(var(--recruit-accent));text-shadow:0 0 10px rgba(var(--recruit-accent),.6)}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-gm-observer button,
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-class-pick button{
  border:0;border-radius:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  box-shadow:inset 2px 0 currentColor,inset 0 1px rgba(255,255,255,.09);
}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-class-pick button{background:linear-gradient(145deg,rgba(var(--recruit-accent),.13),rgba(10,8,11,.96));color:rgb(var(--recruit-accent))}
.dragon-raid-overlay[data-phase="RECRUITING"] .dragon-class-pick button small{color:#9d929a}

@media(max-width:760px){
  :where(html:not(.asoc-mobile)) .dragon-raid-overlay[data-phase="RECRUITING"] .dragon-raid-shell{padding:25px 20px 22px}
  :where(html:not(.asoc-mobile)) .dragon-raid-overlay[data-phase="RECRUITING"] .dragon-mark{width:66px;height:66px;font-size:34px}
  :where(html:not(.asoc-mobile)) .dragon-raid-overlay[data-phase="RECRUITING"] .dragon-heading{gap:12px}
}

/* Polygon formation: heroes sit on a circle around the specimen (triangle, square, pentagon) */
.dragon-formation{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}
.dragon-formation .orbit{fill:none;stroke:rgba(190,101,219,.14);stroke-width:1;stroke-dasharray:3 7}
.dragon-formation .spoke{stroke:rgba(190,101,219,.14);stroke-width:1}
.dragon-formation polygon,
.dragon-formation line:not(.spoke){fill:rgba(147,77,188,.045);stroke:rgba(201,145,235,.34);stroke-width:1.5;stroke-linejoin:round}
.dragon-formation circle:not(.orbit){fill:rgba(219,164,248,.7)}
.dragon-arena-party.is-polygon .dragon-raider-card:nth-child(n){
  right:auto;
  bottom:auto;
  transform:none;
}
.dragon-arena-party.is-polygon .dragon-raider-card.is-active:nth-child(n){
  transform:translateY(-5px) scale(1.035);
}
.dragon-arena-party.is-polygon .dragon-raider-card.is-fallen:nth-child(n){
  transform:scale(.97);
}
@media(max-width:650px){
  :where(html:not(.asoc-mobile)) .dragon-formation{display:none}
}

/* Too narrow for a polygon: stacked arena (same as phone layout, two columns) */
.dragon-arena.is-compact{
  min-height:auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.dragon-arena.is-compact .dragon-arena-ring,
.dragon-arena.is-compact .dragon-formation{display:none}
.dragon-arena.is-compact .dragon-arena-boss{
  position:relative;
  left:auto;
  top:auto;
  width:100%;
  transform:none;
  order:1;
}
.dragon-arena.is-compact .dragon-arena-party{
  position:relative;
  inset:auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  order:2;
}
.dragon-arena.is-compact .dragon-arena-party .dragon-raider-card:nth-child(n){
  position:relative;
  inset:auto;
  width:auto;
  transform:none;
}
.dragon-arena.is-compact .dragon-arena-party .dragon-raider-card.is-active:nth-child(n){transform:translateY(-3px)}

/* Compact specimen plate: the name sits on the portrait and the HP bar is one slim row,
   so heroes can sit close to the specimen and the arena stays short (>650px, polygon mode). */
@media(min-width:651px){
  .dragon-arena:not(.is-compact) .dragon-boss-avatar{margin-bottom:0}
  .dragon-arena:not(.is-compact) .dragon-boss-title{
    position:relative;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:center;
    gap:2px 10px;
    width:fit-content;
    max-width:100%;
    margin:-24px auto 0;
    padding:6px 16px 7px;
    border:1px solid rgba(201,145,235,.26);
    border-radius:12px;
    background:rgba(8,5,10,.92);
    box-shadow:0 6px 18px rgba(0,0,0,.5);
  }
  .dragon-arena:not(.is-compact) .dragon-boss-title small{display:none}
  .dragon-arena:not(.is-compact) .dragon-boss-title b{font-size:21px}
  .dragon-arena:not(.is-compact) .dragon-arena-boss .dragon-boss-hp{
    display:flex;
    align-items:center;
    gap:10px;
    margin:6px auto 0;
    padding:6px 12px;
  }
  .dragon-arena:not(.is-compact) .dragon-arena-boss .dragon-boss-hp>div{margin:0;flex:0 0 auto}
  .dragon-arena:not(.is-compact) .dragon-arena-boss .dragon-boss-hp>span{flex:1}
}

/* GM controls v2: guarded cancel, explained START, launch safety net, random specimen */
.dragon-gm-actions{flex-wrap:wrap;justify-content:flex-end}
.dragon-gm-countdown{color:#b996c9;font:800 10px/1 var(--font-mono,monospace);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.dragon-gm-countdown b{margin-left:4px;color:#f0dcff;font-variant-numeric:tabular-nums}
.dragon-gm-observer .dragon-gm-countdown::before{content:none}
.dragon-gm-gap{display:inline-block;width:1px;align-self:stretch;min-height:26px;margin:0 8px;background:linear-gradient(180deg,transparent,rgba(190,110,230,.5),transparent)}
.dragon-gm-observer button.dragon-gm-cancel{min-width:150px}
.dragon-gm-observer button.dragon-gm-cancel.is-armed{border-color:#ff5968;background:rgba(160,20,34,.82);color:#fff;box-shadow:0 0 22px rgba(255,70,84,.45);animation:dragonGmArm .8s ease-in-out infinite alternate}
@keyframes dragonGmArm{from{box-shadow:0 0 10px rgba(255,70,84,.25)}to{box-shadow:0 0 26px rgba(255,70,84,.6)}}
@media(prefers-reduced-motion:reduce){.dragon-gm-observer button.dragon-gm-cancel.is-armed{animation:none}}
@media(max-width:640px){
  :where(html:not(.asoc-mobile)) .dragon-gm-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px}
  :where(html:not(.asoc-mobile)) .dragon-gm-gap{display:none}
  :where(html:not(.asoc-mobile)) .dragon-gm-countdown{text-align:center}
}

.dragon-setup-status{margin:0;padding:12px 26px;border-bottom:1px solid #302034;background:rgba(122,48,157,.16);color:#e4c4f3;font:800 11px/1.3 var(--font-mono,monospace);letter-spacing:.12em}
.dragon-setup-status[hidden]{display:none}
.dragon-setup-status.is-error{background:rgba(130,20,34,.28);color:#ff9aa4}
.dragon-setup-panel.is-locked .dragon-setup-grid>button,
.dragon-setup-panel.is-locked .dragon-setup-random>button{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
.dragon-setup-grid>button.is-armed{border-color:#ff3548;background:linear-gradient(110deg,#4a0b12,#1b090c 65%,#4d1409);box-shadow:0 0 34px rgba(255,32,50,.4)}
.dragon-setup-grid>button.is-armed em{color:#ffd1d5}
.dragon-setup-random{padding:0 20px 20px}
.dragon-setup-random>button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:52px;padding:12px 18px;border:1px dashed #8a4fa5;background:rgba(40,20,50,.55);color:#e7d3f1;cursor:pointer;text-align:left;transition:.18s ease}
.dragon-setup-random>button:hover:not(:disabled){border-style:solid;border-color:#c25cf0;box-shadow:0 0 22px rgba(178,61,226,.25)}
.dragon-setup-random>button b{font:800 14px/1 var(--font-display,monospace);letter-spacing:.14em}
.dragon-setup-random>button span{color:#a894b3;font:700 10px/1.3 var(--font-mono,monospace);letter-spacing:.1em;text-align:right}
@media(max-width:720px){:where(html:not(.asoc-mobile)) .dragon-setup-random>button{flex-direction:column;align-items:flex-start}:where(html:not(.asoc-mobile)) .dragon-setup-random>button span{text-align:left}:where(html:not(.asoc-mobile)) .dragon-setup-status{padding:12px 20px}:where(html:not(.asoc-mobile)) .dragon-setup-random{padding:0 14px 14px}}
.dragon-gm-observer button[data-dragon-action="start"]:disabled{color:rgba(190,240,203,.66);border-style:dashed}

/* Native chat dock during Cabinet encounters. No second chat socket or event listeners. */
.dragon-raid-overlay.dragon-chat-visible {
  grid-template-columns: minmax(0, 1fr);
}
.dragon-raid-overlay.dragon-chat-visible > .dragon-raid-shell {
  width: min(1100px, 96vw);
  max-width: 100%;
  min-width: 0;
}
.dragon-chat-dock {
  display: none;
  position: fixed;
  z-index: 6;
  top: 14px;
  right: 14px;
  width: min(340px, calc(100vw - 28px));
  height: min(72vh, 680px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(190, 100, 180, .48);
  border-radius: 14px;
  background: #100c16;
  box-shadow: 0 18px 58px rgba(0,0,0,.82), 0 0 0 1px rgba(0,0,0,.72);
}
.dragon-chat-visible > .dragon-chat-dock {
  display: flex;
  flex-direction: column;
}
.dragon-chat-dock > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  color: #edc5ee;
  border-bottom: 1px solid #55305a;
  background: linear-gradient(90deg, #241126, #120e18);
  font: 800 10px/1 var(--font-mono,monospace);
  letter-spacing: .14em;
}
.dragon-chat-dock > header button {
  color: inherit;
  border: 1px solid #55305a;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  width: 28px;
  height: 24px;
}
.dragon-chat-slot {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dragon-chat-slot > #chat-panel,
.dragon-chat-slot > .gm-chat-panel {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  position: relative !important;
  inset: auto !important;
}
.dragon-chat-slot #chat-messages,
.dragon-chat-slot #gm-chat-messages {
  min-height: 0 !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}
/* The native console is full-screen elsewhere. Inside a raid it becomes a
   dense feed: no duplicated navigation chrome and no flex-grown message rows. */
.dragon-chat-slot .gm-chat-header,
.dragon-chat-slot .gm-chat-search-strip,
.dragon-chat-slot #gm-latest-readout {
  display: none !important;
}
.dragon-chat-slot #gm-chat-messages {
  display: block !important;
  padding: 6px !important;
}
.dragon-chat-slot #gm-chat-messages > * {
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  align-self: auto !important;
}
.dragon-chat-slot .gm-chat-message.gm-flow-message {
  margin: 0 0 5px !important;
  padding-block: 3px !important;
}
.dragon-chat-slot #gm-broker-bar {
  flex: 0 0 auto !important;
  padding: 7px 5px 5px !important;
}
.dragon-chat-open {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  border: 1px solid #ac6cbd;
  border-radius: 8px;
  padding: 10px 16px;
  color: #f0caed;
  background: #1c0d28;
  cursor: pointer;
}
.dragon-chat-visible > .dragon-chat-open { display: none; }
@media (max-width: 1000px) {
  .dragon-chat-visible > .dragon-chat-dock {
    right: 10px;
    bottom: 10px;
    top: auto;
    width: min(400px, calc(100vw - 20px));
    height: min(65vh, 560px);
    box-shadow: 0 12px 50px #000;
  }
}