/* Translation Dungeon. Builds on style.css (gruvbox tokens, JetBrains Mono). */
:root { --purple: #d3869b; --orange: #fe8019; --lex: var(--yellow); --monachus: var(--aqua); --hum: var(--purple); --augur: var(--blue); --patronus: var(--orange); }

body.dg { min-height: 100vh; }
.dg .muted { font-size: inherit; }
.dg .small { font-size: 11px; }
.dg a { color: var(--blue); }
.dg a.outline-btn { color: var(--fg); text-decoration: none; }
.dg h1 { font-size: 22px; margin: 4px 0 10px; color: var(--yellow); }
.dg h2 { margin: 4px 0 10px; }
.dg-panel { background: var(--bg1); border: 1px solid var(--line); padding: 16px 18px; }
.dg-center { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.dg-home { max-width: 520px; width: 100%; }
.dg-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0; }
.dg-grow { flex: 1; min-width: 0; }
.dg-field { display: block; margin: 8px 0; }
.dg-field > span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.dg-field input, .dg-field select { width: 100%; background: var(--bg); border: 1px solid var(--line2); padding: 5px 8px; }
.dg-field select:disabled, .dg-check input:disabled { opacity: .7; }
.dg-check { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-size: 12px; }
.dg-error { color: var(--red); }
.dg-big { font-size: 16px; padding: 8px 4px; }
.dg-big:disabled { color: var(--dim); cursor: default; }

/* class colours */
.dg-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; font-weight: 700; font-size: 11px; color: var(--bg); flex: none; }
.cls-humanista .dg-badge, .dg-badge.cls-humanista { background: var(--lex); }
.cls-monachus .dg-badge, .dg-badge.cls-monachus { background: var(--monachus); }
.cls-rhetor .dg-badge, .dg-badge.cls-rhetor { background: var(--hum); }
.cls-text-humanista { color: var(--lex); } .cls-text-monachus { color: var(--monachus); } .cls-text-rhetor { color: var(--hum); }

/* ---------- header ---------- */
.dg-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 8px 16px; background: var(--bg2); border-bottom: 1px solid var(--line); font-size: 12px; }
.dg-title { font-weight: 700; color: var(--yellow); }
.dg-code { color: var(--green); letter-spacing: 2px; }
.dg-push { margin-left: auto; }
.dg-clock { font-weight: 700; }
.dg-state { color: var(--blue); font-weight: 700; }
#inviteLine { overflow-wrap: anywhere; }

/* ---------- lobby ---------- */
.dg-lobby-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; padding: 16px; max-width: 1300px; margin: 0 auto; }
.dg-lobby-players { display: grid; gap: 6px; margin-top: 6px; }
.dg-lp { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0; }
.dg-lp.offline { opacity: .5; }
.dg-host { color: var(--bg); background: var(--yellow); font-size: 10px; padding: 0 4px; font-weight: 700; }
.dg-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.dg-class { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; text-align: left; background: var(--bg); border: 1px solid var(--line2); padding: 10px 12px; cursor: pointer; font-size: 12px; }
.dg-class:hover { border-color: var(--muted); }
.dg-class.chosen.cls-humanista { border-color: var(--lex); box-shadow: inset 3px 0 var(--lex); }
.dg-class.chosen.cls-monachus { border-color: var(--monachus); box-shadow: inset 3px 0 var(--monachus); }
.dg-class.chosen.cls-rhetor { border-color: var(--hum); box-shadow: inset 3px 0 var(--hum); }
.dg-class-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.dg-takers { margin-left: auto; font-size: 11px; color: var(--green); }
.dg-class p { color: var(--muted); margin: 6px 0; }
/* each ability with its icon (the same art as the bar in play) */
.dg-class-abs { margin: 6px 0; display: grid; gap: 8px; }
.dg-class-ab { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--fg); }
.dg-class-ab img { width: 32px; height: 32px; image-rendering: pixelated; margin-top: 2px; }
.dg-passive { color: var(--fg) !important; border-top: 1px dashed var(--line2); padding-top: 6px; }
.dg-rules { margin-top: 14px; font-size: 12px; color: var(--muted); }
.dg-rules summary { cursor: pointer; color: var(--fg); }
.dg-rules li { margin: 5px 0; }

/* ---------- game layout ---------- */
.dg-game { display: flex; flex-direction: column; height: 100vh; }
.dg-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.dg-party { padding: 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.dg-arena-wrap { padding: 0 16px 12px 0; overflow-y: auto; position: relative;
  /* the player column runs the full height, also below the last lane */
  background: linear-gradient(to right, transparent 210px, var(--line) 210px, var(--line) 211px, transparent 211px); }
.dg-side { padding: 12px; border-left: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.dg-arena { display: flex; flex-direction: column; }
.dg-lane { display: grid; grid-template-columns: 210px minmax(0, 1fr); border-bottom: 1px dashed var(--line); }
.dg-lane-frame { padding: 12px; }
.dg-lane-cards { padding: 12px 0 12px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; align-items: start; min-height: 60px; }
.dg-lane-cards:empty::before { content: 'no exercise attacking'; color: var(--dim); font-size: 12px; align-self: center; }
.dg-lane.me .dg-lane-cards { background: rgba(254, 128, 25, .03); }
.dg-empty { padding: 30px 0 30px 226px; text-align: center; }
.dg-hint { position: sticky; top: 0; z-index: 3; margin-left: 226px; margin-top: 10px; background: var(--yellow); color: var(--bg); padding: 6px 10px; margin-bottom: 10px; font-size: 12px; }

/* party frames */
.dg-frame { background: var(--bg1); border: 1px solid var(--line); padding: 8px; font-size: 12px; }
.dg-frame.me { border-color: var(--line2); }
.dg-frame.down { opacity: .55; }
.dg-frame.down .dg-meter.hp span { color: var(--red); }
.dg-frame.offline { border-style: dashed; }
.dg-frame-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.dg-frame-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-key { margin-left: auto; color: var(--dim); font-size: 10px; }
.dg-frame-sub { color: var(--muted); font-size: 11px; min-height: 1em; margin-top: 3px; }

/* meters */
.dg-meter { position: relative; height: 14px; background: var(--bg); border: 1px solid var(--line); margin-top: 3px; overflow: hidden; }
.dg-meter i { position: absolute; inset: 0 auto 0 0; transition: width .3s; }
.dg-meter em { position: absolute; inset: 0 0 0 auto; background: repeating-linear-gradient(45deg, var(--fg) 0 3px, transparent 3px 6px); opacity: .45; }
.dg-meter span { position: relative; font-size: 10px; padding-left: 5px; line-height: 12px; display: block; text-shadow: 0 0 2px var(--bg); }
.dg-meter.hp i { background: #79740e; }
.dg-meter.mana i { background: #076678; }

/* exercise cards */
.dg-card { background: var(--bg1); border: 1px solid var(--line); padding: 10px 12px; }
.dg-card.fresh { animation: dg-in .35s ease-out; }
@keyframes dg-in { from { transform: translateY(-8px) scale(.98); box-shadow: 0 0 0 2px var(--yellow); } }
.dg-card.targets-me { border-color: var(--line2); box-shadow: inset 3px 0 var(--orange); }
.dg-card.ambush { border-color: var(--red); }
.dg-card.claimed { border-color: var(--green); }
.dg-card.grading { opacity: .85; }
.dg-card-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 11px; margin-bottom: 6px; }
.dg-card-head .num { color: var(--yellow); font-size: 12px; }
.dg-card-head .chap { color: var(--muted); }
.dg-card-head .aggro { margin-left: auto; font-weight: 700; }
.tag { font-size: 10px; padding: 0 4px; color: var(--bg); font-weight: 700; }
.tag.red { background: var(--red); } .tag.blue { background: var(--blue); } .tag.aqua { background: var(--aqua); } .tag.yellow { background: var(--yellow); }
.dg-prompt { font-size: 15px; line-height: 2.1; margin-bottom: 6px; padding-top: 8px; }
.dg-prompt .w { position: relative; display: inline-block; line-height: 1.4; }
.dg-prompt .w.glossed { color: var(--yellow); }
.dg-prompt .gl { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--green); line-height: 1.1; text-align: center; white-space: nowrap; }
.dg-timer { display: flex; gap: 8px; align-items: center; font-size: 11px; margin-bottom: 6px; }
.dg-timer.off { display: none; }
.dg-timebar { flex: 1; height: 6px; background: var(--bg); border: 1px solid var(--line); }
.dg-timebar i { display: block; height: 100%; background: var(--green); }
.dg-timer.mid .dg-timebar i { background: var(--yellow); }
.dg-timer.low .dg-timebar i { background: var(--red); }
.dg-timer.low .dg-time { color: var(--red); font-weight: 700; }
.dg-timer.slow .dg-timebar i { background: var(--aqua); }
.dg-timer.frozen .dg-timebar i { background: var(--blue); }
.dg-time { min-width: 3.2em; text-align: right; font-weight: 700; }
.dg-threat { color: var(--muted); }
.dg-draft { width: 100%; resize: vertical; background: var(--bg); border: 1px solid var(--line2); padding: 6px 8px; font-size: 14px; }
.dg-draft:focus { outline: none; border-color: var(--green); }
.dg-draft[readonly] { color: var(--muted); }
.dg-reveal .rv { font-size: 12px; margin-top: 6px; overflow-wrap: anywhere; }
.dg-reveal .rv b { color: var(--yellow); font-weight: 500; }
.dg-reveal .rv.wrong b { color: var(--red); }
.dg-reveal .ok { color: var(--green); } .dg-reveal .bad { color: var(--red); text-decoration: line-through; }
.rv-expl { color: var(--muted); margin-top: 3px; }
.rv-expl ul { margin: 3px 0; padding-left: 18px; }
.dg-status { font-size: 11px; color: var(--blue); margin-top: 4px; min-height: 0; }

/* crypt */
.dg-crypt { display: grid; gap: 8px; margin: 6px 0; }
.dg-card.crypt { padding: 8px 10px; border-style: dashed; animation: none; }
.dg-card.crypt .dg-prompt { font-size: 12px; line-height: 1.9; }
.dg-card.crypt .dg-draft { font-size: 12px; }

/* log */
.dg-log { font-size: 11px; display: grid; gap: 3px; overflow-y: auto; min-height: 120px; flex: 1; align-content: start; }
.lg.solve { color: var(--green); } .lg.expire, .lg.down { color: var(--red); } .lg.heal { color: var(--aqua); }
.lg.cast { color: var(--blue); } .lg.wrong { color: var(--orange); } .lg.ambush { color: var(--red); font-weight: 700; } .lg.system { color: var(--muted); }

/* targeting: highlight what the armed ability can hit */
body[data-targeting] { cursor: crosshair; }
body[data-targeting~="exercise"] .dg-card:not(.crypt),
body[data-targeting~="exercise"][data-targeting~="crypt"] .dg-card.crypt { outline: 2px dashed var(--yellow); outline-offset: 2px; cursor: crosshair; }
body[data-targeting~="word"] .dg-card:not(.crypt) .w,
body[data-targeting~="word"][data-targeting~="crypt"] .dg-card.crypt .w { text-decoration: underline dashed var(--yellow); cursor: crosshair; }
body[data-targeting~="word"] .w:hover { background: var(--yellow); color: var(--bg); }
body[data-targeting~="player"] .dg-frame:not(.down),
body[data-targeting~="downed"] .dg-frame.down { outline: 2px dashed var(--yellow); outline-offset: 2px; cursor: crosshair; opacity: 1; }

/* ---------- action bar ---------- */
.dg-bar { display: flex; gap: 18px; align-items: center; padding: 10px 16px; background: var(--bg2); border-top: 1px solid var(--line); flex-wrap: wrap; }
.dg-me { width: 220px; font-size: 12px; }
.dg-me-name { display: flex; gap: 6px; align-items: center; }
.dg-abilities { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.dg-ab { position: relative; width: 128px; height: 66px; background: var(--bg); border: 1px solid var(--line2); cursor: pointer; text-align: left; padding: 4px 6px; overflow: hidden; display: flex; flex-direction: column; }
.dg-ab:hover { border-color: var(--fg); }
.dg-ab.armed { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }
.dg-ab.nomana .dg-ab-name { color: var(--dim); }
.dg-ab.nomana .dg-ab-cost { color: var(--red); }
.dg-ab.dead { opacity: .4; }
.dg-ab-key { position: absolute; top: 2px; right: 5px; font-size: 10px; color: var(--dim); }
.dg-ab-name { font-weight: 700; font-size: 11px; line-height: 1.2; padding-right: 10px; }
.dg-ab-cost { font-size: 11px; color: var(--blue); }
.dg-ab-target { font-size: 10px; color: var(--muted); margin-top: auto; }
.dg-ab-cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0, 0, 0, .55); pointer-events: none; }
.dg-ab.cooling::after { content: attr(data-cd); position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; font-weight: 700; color: var(--fg); pointer-events: none; }
.dg-passive-chip { align-self: center; font-size: 11px; color: var(--aqua); border: 1px dashed var(--aqua); padding: 3px 6px; }

/* ---------- summary ---------- */
.dg-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: grid; place-items: center; padding: 16px; z-index: 5; }
.dg-summary { max-width: min(1400px, 100%); width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; }
.dg-result.won { color: var(--green); } .dg-result.lost { color: var(--red); } .dg-result.ended { color: var(--yellow); }
.dg-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.dg-table th { text-align: left; color: var(--muted); font-weight: 400; border-bottom: 1px solid var(--line); padding: 3px 6px; }
.dg-table td { padding: 3px 6px; border-bottom: 1px dashed var(--line); }
.dg-unsolved { display: grid; gap: 8px; margin-top: 6px; }
.dg-un { font-size: 12px; border-left: 2px solid var(--line2); padding-left: 8px; }
.dg-key-ans { color: var(--green); }

/* ---------- narrow screens ---------- */
@media (max-width: 1000px) {
  .dg-lobby-grid { grid-template-columns: 1fr; }
  .dg-classes { grid-template-columns: 1fr; }
  .dg-game { height: auto; min-height: 100vh; }
  .dg-body { grid-template-columns: 1fr; }
  .dg-arena-wrap { padding: 0 16px 12px; background: none; }
  .dg-lane { grid-template-columns: 1fr; }
  .dg-lane-frame { padding: 12px 0 0; }
  .dg-lane-cards { padding: 10px 0 12px; }
  .dg-empty { padding-left: 0; }
  .dg-hint { margin-left: 0; }
  .dg-side { border-left: 0; border-top: 1px solid var(--line); }
  .dg-bar { position: sticky; bottom: 0; }
  .dg-me { width: 100%; }
  .dg-ab { width: calc(25% - 6px); min-width: 74px; }
}

/* ---------- countdown: yellow, then red, then big and pulsing ---------- */
.dg-time { transition: font-size .2s, color .2s; }
.dg-timer.mid .dg-time { color: var(--yellow); }
.dg-timer.crit .dg-timebar i { background: var(--red); animation: dg-bar-blink .5s steps(2) infinite; }
.dg-timer.crit .dg-time { font-size: 28px; line-height: 1; color: var(--red); min-width: 2.4em; text-shadow: 0 0 10px rgba(251, 73, 52, .7); animation: dg-pulse 1s ease-out infinite; }
@keyframes dg-pulse { 0% { transform: scale(1.25); } 40% { transform: scale(1); } }
@keyframes dg-bar-blink { 50% { opacity: .45; } }
.dg-card.crit { border-color: var(--red); animation: dg-glow 1s ease-out infinite; }
.dg-card.crit2 { animation: dg-glow .5s ease-out infinite, dg-tremble .12s linear infinite; }
@keyframes dg-glow { 0% { box-shadow: 0 0 0 2px var(--red), 0 0 22px rgba(251, 73, 52, .6); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes dg-tremble { 25% { translate: -1.5px 1px; } 50% { translate: 1px -1px; } 75% { translate: 1.5px 1px; } }

/* ---------- a new exercise ---------- */
.dg-card.ambush.fresh { animation: dg-ambush-in .55s ease-out; }
@keyframes dg-ambush-in { 0% { transform: scale(1.12); box-shadow: 0 0 0 4px var(--red), 0 0 40px var(--red); } 30% { transform: scale(.97); } }

/* ---------- an exercise blows up ---------- */
.dg-fx { position: fixed; z-index: 6; pointer-events: none; }
.dg-boom-card { position: absolute; inset: 0; margin: 0; overflow: hidden; animation: dg-boom .55s ease-in forwards; }
@keyframes dg-boom {
  0% { transform: scale(1); filter: none; }
  18% { transform: scale(1.06); filter: brightness(2.2) sepia(1) saturate(6) hue-rotate(-30deg); border-color: var(--red); }
  100% { transform: scale(1.35); opacity: 0; filter: blur(8px) brightness(3); }
}
.dg-flash { position: absolute; inset: -20%; background: radial-gradient(closest-side, #fff8 0%, var(--yellow) 25%, var(--orange) 45%, #fb493400 75%); animation: dg-flash .5s ease-out forwards; mix-blend-mode: screen; }
@keyframes dg-flash { 0% { opacity: 0; transform: scale(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
.dg-ring { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border: 3px solid var(--orange); border-radius: 50%; animation: dg-ring .6s ease-out forwards; }
@keyframes dg-ring { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(14); opacity: 0; border-width: 1px; } }
.dg-shard { position: absolute; left: 50%; top: 45%; animation: dg-fly .95s cubic-bezier(.15, .7, .35, 1) forwards; }
.dg-shard.word { font-size: 15px; font-weight: 700; color: var(--c); white-space: nowrap; text-shadow: 0 0 6px var(--bg); }
.dg-shard.spark { width: 6px; height: 6px; background: var(--c); box-shadow: 0 0 8px var(--c); }
@keyframes dg-fly {
  0% { transform: translate(-50%, -50%) scale(.6); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1); opacity: 0; }
}
.dg-arena-wrap.shake { animation: dg-shake .35s linear; }
.dg-arena-wrap.shake-big { animation: dg-shake-big .55s linear; }
@keyframes dg-shake { 20% { translate: -4px 2px; } 40% { translate: 4px -2px; } 60% { translate: -3px -1px; } 80% { translate: 2px 1px; } }
@keyframes dg-shake-big { 10% { translate: -10px 4px; } 25% { translate: 9px -6px; } 40% { translate: -7px -3px; } 55% { translate: 6px 5px; } 70% { translate: -4px 2px; } 85% { translate: 2px -1px; } }
.dg-game.hurt::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 7; box-shadow: inset 0 0 120px 30px rgba(251, 73, 52, .55); animation: dg-hurt .7s ease-out forwards; }
@keyframes dg-hurt { to { opacity: 0; } }
/* the card arrives in the crypt still smouldering */
.dg-card.crypt.scorched { animation: dg-scorch 1.6s ease-out; }
@keyframes dg-scorch { 0% { box-shadow: 0 0 0 2px var(--orange), 0 0 18px var(--red); background: #3c1f1a; } }

/* ---------- solved: the card lifts away in green ---------- */
.dg-solved-card { position: absolute; inset: 0; margin: 0; overflow: hidden; border-color: var(--green); animation: dg-solved .7s ease-out forwards; }
@keyframes dg-solved { 0% { box-shadow: 0 0 0 2px var(--green), 0 0 24px var(--green); } 100% { transform: translateY(-24px) scale(1.03); opacity: 0; } }

/* ---------- sound controls ---------- */
.dg-audio { display: inline-flex; gap: 6px; align-items: center; }
.dg-audio button.off { color: var(--dim); text-decoration: line-through; }
.dg-audio input[type=range] { width: 70px; accent-color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  .dg-card.crit2, .dg-arena-wrap.shake, .dg-arena-wrap.shake-big { animation: none; }
  .dg-timer.crit .dg-time { animation: none; }
}

/* ---- tanking, relics, takeover ---- */
.dg-role { border: 1px solid currentColor; padding: 0 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.dg-relics { color: var(--aqua); }
.dg-me-relics { font-size: 12px; margin-top: 3px; }
.dg-countdown { color: var(--yellow); font-weight: 700; font-size: 12px; }
.dg-take { color: var(--orange); font-weight: 700; font-size: 13px; }
.dg-card.idle-warn { border-color: var(--yellow); }
.dg-card.takeable { border: 3px solid var(--orange); animation: dg-blink 0.8s steps(2, jump-none) infinite; cursor: pointer; }
@keyframes dg-blink { 0% { border-color: var(--orange); box-shadow: 0 0 14px var(--orange); } 100% { border-color: transparent; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .dg-card.takeable { animation: none; } }

/* ---- post-game review ---- */
.dg-review-wrap { overflow-x: auto; margin-top: 6px; border: 1px solid var(--line); }
.dg-review { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.dg-review th { position: sticky; top: 0; background: var(--bg2); text-align: left; color: var(--muted); font-weight: 400; padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dg-review td { vertical-align: top; padding: 6px 8px; border-bottom: 1px dashed var(--line); border-left: 1px solid var(--line); }
.dg-rev-ex { min-width: 260px; max-width: 340px; position: sticky; left: 0; background: var(--bg1); border-left: 0 !important; }
.dg-rev-prompt { margin: 3px 0; }
.dg-rev-out { margin-left: 4px; font-size: 11px; }
.dg-rev-out.ok { color: var(--green); } .dg-rev-out.bad { color: var(--red); }
.dg-att { min-width: 240px; max-width: 320px; }
.dg-att.ok { box-shadow: inset 3px 0 var(--green); } .dg-att.bad { box-shadow: inset 3px 0 var(--red); } .dg-att.exp { box-shadow: inset 3px 0 var(--orange); }
.dg-att.ok .dg-att-head b { color: var(--green); } .dg-att.bad .dg-att-head b { color: var(--red); } .dg-att.exp .dg-att-head b { color: var(--orange); }
.dg-att-note { color: var(--blue); font-size: 11px; }
.dg-att-ans { margin: 3px 0; }
.dg-att-expl { color: var(--muted); }
.dg-att ul { margin: 3px 0; padding-left: 16px; color: var(--muted); }

/* ---- Claude cost on the player tiles ---- */
.dg-cost { font-size: 11px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-cost b { color: var(--yellow); font-weight: 700; }
#costBtn.off { text-decoration: line-through; color: var(--dim); }

/* ---- wrong words of a wrong answer: flash red, then stay red ---- */
.ww { color: var(--red); font-weight: 700; text-decoration: underline wavy var(--red); text-underline-offset: 3px; animation: dg-ww .4s steps(2, jump-none) 6; }
@keyframes dg-ww { 0% { color: var(--red); background: rgba(251, 73, 52, .25); } 100% { color: var(--fg); background: transparent; } }
@media (prefers-reduced-motion: reduce) { .ww { animation: none; } }

/* ---- pixel art (Dungeon Crawl Stone Soup tiles, CC0): 32px tiles, scaled without smoothing ---- */
.dg img[src^="art/"] { image-rendering: pixelated; image-rendering: crisp-edges; }
/* the dungeon floor, faint, behind everything */
body.dg { background-color: var(--bg); background-image: linear-gradient(color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--bg) 90%, transparent)), url(art/misc/floor.png); background-size: auto, 64px 64px; }
.dg-portrait { flex: none; display: inline-block; vertical-align: middle; background: var(--bg2); border: 2px solid var(--line2); }
.dg-portrait.sm { width: 24px; height: 24px; border-width: 1px; }
.dg-portrait.md { width: 36px; height: 36px; }
.dg-portrait.lg { width: 72px; height: 72px; border-width: 3px; }
.dg-portrait.cls-humanista { border-color: var(--lex); }
.dg-portrait.cls-monachus { border-color: var(--monachus); }
.dg-portrait.cls-rhetor { border-color: var(--hum); }
.dg-class-head { align-items: center; gap: 10px; flex-wrap: nowrap; }
.dg-class:hover .dg-portrait.lg, .dg-class.chosen .dg-portrait.lg { animation: dg-bob 1.2s ease-in-out infinite; }
.dg-frame.down .dg-portrait { filter: grayscale(1) brightness(.6); transform: rotate(-90deg); }
.dg-frame.offline .dg-portrait { filter: grayscale(1); }

/* monsters on the cards */
.dg-card-body { display: flex; gap: 10px; align-items: flex-start; }
.dg-card-body .dg-prompt { flex: 1; min-width: 0; }
.dg-monster { width: 64px; height: 64px; flex: none; margin-top: 6px; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .5)); animation: dg-bob 1.6s ease-in-out infinite; }
.dg-card.targets-me .dg-monster { animation-duration: .9s; }
.dg-card.ambush .dg-monster { filter: drop-shadow(0 0 6px var(--red)); }
.dg-card.grading .dg-monster { animation: dg-shake .25s linear infinite; }
.dg-card.crypt .dg-monster { width: 40px; height: 40px; opacity: .7; animation: none; }
.dg-card-head .mon { color: var(--orange); font-style: italic; }
@keyframes dg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes dg-float { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(-4px); opacity: .45; } }
@keyframes dg-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

/* ability icons, relics, the crypt and the result */
.dg-ab:has(.dg-ab-icon) { width: 150px; padding-left: 44px; }
.dg-ab-icon { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; }
.dg-ab.nomana .dg-ab-icon, .dg-ab.dead .dg-ab-icon { filter: grayscale(1) brightness(.7); }
.dg-relic { display: inline-flex; align-items: center; gap: 1px; margin-right: 4px; }
.dg-relic img { width: 16px; height: 16px; }
.dg-crypt-head { display: flex; align-items: center; gap: 6px; }
.dg-crypt-head img { width: 24px; height: 24px; }
.dg-result { display: flex; align-items: center; gap: 12px; }
.dg-result-art { width: 64px; height: 64px; }
@media (prefers-reduced-motion: reduce) { .dg-monster, .dg-portrait { animation: none !important; } }
@media (max-width: 600px) { .dg-monster { width: 40px; height: 40px; } .dg-portrait.lg { width: 48px; height: 48px; } }

/* ---- stages: the chapter map, chamber announcements, the boss ---- */
.dg-stage { display: inline-flex; align-items: center; gap: 8px; }
.dg-stage-ch { color: var(--fg); }
.dg-pips { display: inline-flex; align-items: center; gap: 3px; }
.dg-pip { width: 12px; height: 12px; border: 1px solid var(--line2); background: var(--bg); display: inline-grid; place-items: center; }
.dg-pip.done { background: var(--green); border-color: var(--green); }
.dg-pip.here { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); animation: dg-pip 1.4s ease-in-out infinite; }
.dg-pip.boss { width: 20px; height: 20px; border-color: var(--red); }
.dg-pip.boss img { width: 18px; height: 18px; }
.dg-pip.boss.done { background: var(--bg2); border-color: var(--green); }
.dg-stage-room { color: var(--orange); }
@keyframes dg-pip { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 40%, transparent); } }

.dg-arena-wrap { position: relative; }
.dg-interlude { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(2px); animation: dg-int-in .4s ease-out; }
.dg-interlude[hidden] { display: none; }
.dg-int-box { text-align: center; max-width: 560px; padding: 24px 28px; border: 1px solid var(--line2); background: var(--bg1); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.dg-interlude.boss .dg-int-box { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 10px 50px rgba(251, 73, 52, .25); }
.dg-int-door { width: 64px; height: 64px; }
.dg-int-boss { width: 160px; height: 160px; animation: dg-bob 1.4s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .6)); }
.dg-int-ch { font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 6px; }
.dg-int-title { font-size: 28px; font-weight: 700; color: var(--yellow); margin: 4px 0; }
.dg-interlude.boss .dg-int-title { color: var(--red); }
.dg-int-en { color: var(--muted); font-style: italic; margin-bottom: 4px; }
.dg-int-sub { color: var(--fg); font-size: 13px; }
.dg-int-bar { height: 3px; background: var(--bg2); margin-top: 14px; overflow: hidden; }
.dg-int-bar i { display: block; height: 100%; background: var(--yellow); animation: dg-int-bar linear forwards; }
.dg-interlude.boss .dg-int-bar i { background: var(--red); }
@keyframes dg-int-in { from { opacity: 0; } }
@keyframes dg-int-bar { from { width: 100%; } to { width: 0; } }

.dg-boss { display: flex; gap: 16px; align-items: center; margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--red); background: linear-gradient(90deg, color-mix(in srgb, var(--red) 14%, var(--bg1)), var(--bg1) 60%); }
.dg-boss[hidden] { display: none; }
.dg-boss-img { width: 96px; height: 96px; flex: none; animation: dg-bob 1.2s ease-in-out infinite; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .6)); }
.dg-boss-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.dg-boss-name { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.dg-boss-name b { font-size: 18px; color: var(--red); }
.dg-boss-parts { margin-left: auto; font-weight: 700; color: var(--yellow); }
.dg-boss-timer { position: relative; height: 16px; background: var(--bg2); border: 1px solid var(--line2); }
.dg-boss-timer i { position: absolute; inset: 0 auto 0 0; background: var(--green); transition: width .2s linear; }
.dg-boss-timer.mid i { background: var(--yellow); }
.dg-boss-timer.low i { background: var(--red); animation: dg-blink .5s steps(2) infinite; }
.dg-boss-timer span { position: relative; display: block; text-align: center; font-size: 11px; font-weight: 700; line-height: 14px; }
@keyframes dg-blink { 50% { opacity: .5; } }
.dg-card.boss-part { border-color: var(--red); box-shadow: inset 3px 0 var(--red); }
.dg-card.boss-part .mon { color: var(--red); font-style: normal; font-weight: 700; }
.dg-card.boss-part .dg-monster { width: 48px; height: 48px; }
.dg-rev-room { color: var(--orange); font-size: 11px; margin-left: 6px; }
.dg-sum-stages { display: flex; align-items: center; gap: 6px; }
.dg-sum-stages img { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .dg-int-boss, .dg-boss-img, .dg-pip.here { animation: none !important; } }

/* ---- the augur ---- */
.cls-augur .dg-badge, .dg-badge.cls-augur { background: var(--augur); }
.cls-text-augur { color: var(--augur); }
.dg-class.chosen.cls-augur { border-color: var(--augur); box-shadow: inset 3px 0 var(--augur); }
.dg-portrait.cls-augur { border-color: var(--augur); }
.cls-patronus .dg-badge, .dg-badge.cls-patronus { background: var(--patronus); }
.cls-text-patronus { color: var(--patronus); }
.dg-class.chosen.cls-patronus { border-color: var(--patronus); box-shadow: inset 3px 0 var(--patronus); }
.dg-portrait.cls-patronus { border-color: var(--patronus); }

/* ---- themed tooltips ---- */
.dg-tip { position: fixed; z-index: 100; max-width: 300px; padding: 8px 10px; background: var(--bg2); color: var(--fg); border: 1px solid var(--line2); border-top: 2px solid var(--yellow); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); font-size: 12px; line-height: 1.45; pointer-events: none; animation: dg-tip-in .12s ease-out; }
.dg-tip[hidden] { display: none; }
.dg-tip b { color: var(--yellow); }
.dg-tip .tip-meta { color: var(--blue); font-size: 11px; }
.dg-tip p { margin: 4px 0 0; color: var(--fg); }
@keyframes dg-tip-in { from { opacity: 0; transform: translateY(3px); } }

/* ---- chat ---- */
.dg-chat { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.dg-chat-slot.lobby .dg-chat-list { height: 180px; }
.dg-chat-slot.game { flex: none; }
.dg-chat-slot.game .dg-chat-list { height: 160px; }
.dg-chat-list { overflow-y: auto; display: grid; align-content: start; gap: 4px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; }
.dg-msg { line-height: 1.4; overflow-wrap: anywhere; }
.dg-msg .dg-portrait.sm { width: 16px; height: 16px; margin-right: 4px; }
.dg-msg b { margin-right: 2px; }
.dg-msg.mine span { color: var(--fg); }
.dg-msg:not(.mine) span { color: var(--fg); }
.dg-chat-form { display: flex; gap: 6px; }
.dg-chat-input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line2); padding: 5px 8px; color: var(--fg); font: inherit; font-size: 12px; }
.dg-chat-input:focus { outline: none; border-color: var(--yellow); }

/* ---- class cards: HP and mana ---- */
.dg-class-stats { display: flex; gap: 10px; font-size: 11px; font-weight: 700; margin: 2px 0 4px; }
.dg-class-stats .hp { color: var(--yellow); }
.dg-class-stats .mana { color: var(--blue); }

/* ---- monachi work in the crypt: a wider side panel, crypt cards at their normal size ---- */
@media (min-width: 1001px) { body[data-cls="monachus"] .dg-body { grid-template-columns: minmax(0, 1fr) 440px; } }
body[data-cls="monachus"] .dg-card.crypt { padding: 10px 12px; }
body[data-cls="monachus"] .dg-card.crypt .dg-prompt { font-size: 15px; line-height: 2.1; }
body[data-cls="monachus"] .dg-card.crypt .dg-draft { font-size: 14px; }
body[data-cls="monachus"] .dg-card.crypt .dg-monster { width: 64px; height: 64px; }

/* ---- themed confirm box ---- */
.dg-modal-back { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); animation: dg-tip-in .12s ease-out; }
.dg-modal { width: min(420px, 100%); padding: 18px 20px 14px; background: var(--bg1); border: 1px solid var(--line2); border-top: 2px solid var(--red); box-shadow: 0 10px 40px rgba(0, 0, 0, .55); }
.dg-modal h3 { margin: 0 0 6px; font-size: 16px; color: var(--fg); }
.dg-modal p { margin: 0 0 14px; }
.dg-modal-btns { display: flex; justify-content: flex-end; gap: 10px; }
.dg-modal .primary-btn.danger { color: var(--red); }
.dg-modal .primary-btn.danger:hover { background: var(--red); color: var(--bg); }
.dg-modal button:focus-visible { outline: 1px dashed var(--yellow); outline-offset: 2px; }

/* ---- characters: level chips, the character panel, the pack, items on the bar ---- */
:root { --tier0: var(--muted); --tier1: var(--blue); --tier2: var(--purple); }
.tier-text-0 { color: var(--tier0); } .tier-text-1 { color: var(--tier1); } .tier-text-2 { color: var(--tier2); }
.dg-lvl { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; font-size: 10px; font-weight: 700; color: var(--bg); background: var(--yellow); flex: none; }
.dg-lvl.big { min-width: 40px; height: 40px; font-size: 20px; }
.dg-char-head { display: flex; gap: 10px; align-items: center; }
.dg-char-title { color: var(--yellow); }
.dg-xp { position: relative; height: 14px; background: var(--bg); border: 1px solid var(--line2); margin: 8px 0 6px; }
.dg-xp i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--yellow) 45%, transparent); }
.dg-xp span { position: relative; display: block; font-size: 10px; line-height: 12px; text-align: center; color: var(--fg); }
.dg-char p, .dg-home-char p { margin: 4px 0; }
.dg-home-char { margin: 6px 0 10px; padding: 10px 12px; border: 1px solid var(--line); background: var(--bg); }
.dg-home-char:empty { display: none; }
.dg-pack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dg-item-tile { position: relative; width: 58px; height: 62px; background: var(--bg); border: 1px solid var(--tier0); cursor: pointer; padding: 4px 2px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dg-item-tile img { width: 32px; height: 32px; image-rendering: pixelated; }
.dg-item-tile.tier-1 { border-color: var(--tier1); } .dg-item-tile.tier-2 { border-color: var(--tier2); box-shadow: 0 0 6px color-mix(in srgb, var(--tier2) 50%, transparent); }
.dg-item-tile.on { background: color-mix(in srgb, var(--yellow) 16%, var(--bg)); outline: 2px solid var(--yellow); outline-offset: 1px; }
.dg-item-tile:hover { filter: brightness(1.15); }
.dg-item-ch { font-size: 9px; letter-spacing: 1px; color: var(--yellow); }
.dg-item-on { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 700; color: var(--bg); background: var(--yellow); padding: 0 3px; }
.dg-item-x { position: absolute; top: 0; right: 2px; font-size: 12px; color: var(--dim); line-height: 1; padding: 1px; }
.dg-item-x:hover { color: var(--red); }
.dg-items:empty, .dg-items[hidden] { display: none; }
.dg-items { padding-left: 12px; border-left: 1px dashed var(--line2); }
.dg-it { border-color: var(--tier0); }
.dg-it.tier-1 { border-color: var(--tier1); } .dg-it.tier-2 { border-color: var(--tier2); }
.dg-it .dg-charges { color: var(--yellow); letter-spacing: 1px; }
.dg-spoils { margin-top: 12px; display: grid; gap: 4px; justify-items: center; }
.dg-spoil { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.dg-spoil img { width: 24px; height: 24px; image-rendering: pixelated; }
.dg-spoil.tier-1 { color: var(--tier1); } .dg-spoil.tier-2 { color: var(--tier2); }
.dg-spoil b { color: var(--fg); }
.dg-up { color: var(--green); } .dg-down { color: var(--red); }
.dg-lvlup { color: var(--yellow); font-weight: 700; }
.dg-loot-cell { white-space: nowrap; }
.dg-loot-icon { width: 20px; height: 20px; image-rendering: pixelated; border-bottom: 2px solid var(--tier0); }
.dg-loot-icon.tier-1 { border-color: var(--tier1); } .dg-loot-icon.tier-2 { border-color: var(--tier2); }
.lg.loot { color: var(--purple); } .lg.levelup { color: var(--yellow); font-weight: 700; }
.dg-code-box { margin: 10px 0 4px; }
.dg-code-box .dg-row { align-items: flex-end; }
.dg-charcode { font-size: 12px; padding: 4px 8px; background: var(--bg); border: 1px solid var(--line2); user-select: all; overflow-wrap: anywhere; }

/* ---- the book: lore before a chapter, the book panel during play, the credits ---- */
.dg-body { position: relative; }
.dg-book { line-height: 1.65; font-size: 13px; }
.dg-book h2 { font-size: 18px; color: var(--yellow); margin: 18px 0 8px; }
.dg-book h3 { font-size: 15px; color: var(--yellow); margin: 14px 0 6px; }
.dg-book h4 { font-size: 13px; color: var(--fg); margin: 12px 0 4px; }
.dg-book h2:first-child, .dg-book h3:first-child { margin-top: 0; }
.dg-book p { margin: 0 0 10px; }
.dg-book i { color: var(--aqua); font-style: italic; }
.dg-book .bk-rule b { color: var(--yellow); }
.dg-book .bk-ex { margin: 0 0 2px 18px; color: var(--fg); border-left: 2px solid var(--line2); padding-left: 10px; }
.dg-book .bk-ex + p:not(.bk-ex) { margin-top: 10px; }
.dg-book .bk-small, .dg-book .bk-fn { font-size: 12px; color: var(--muted); }
.dg-book ul, .dg-book ol { margin: 0 0 10px; padding-left: 22px; }
.dg-book table { border-collapse: collapse; margin: 0 0 12px; font-size: 12px; }
.dg-book th, .dg-book td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.dg-book a { color: var(--blue); overflow-wrap: anywhere; }
.dg-book code { font-size: 12px; color: var(--aqua); }
/* the lore covers the board; its box never runs past the bottom of the window: the text scrolls inside it,
   between the fixed head and foot (a flex column, so max-height: 100% really holds) */
.dg-lore { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 18px; background: color-mix(in srgb, var(--bg) 88%, transparent); }
.dg-lore[hidden] { display: none; }
.dg-lore-box { width: min(780px, 100%); max-height: 100%; min-height: 0; display: flex; flex-direction: column; background: var(--bg1); border: 1px solid var(--line2); border-top: 2px solid var(--yellow); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.dg-lore-head, .dg-lore-foot { flex: none; }
.dg-lore-head { display: flex; gap: 12px; align-items: center; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.dg-lore-head img { width: 40px; height: 40px; image-rendering: pixelated; }
.dg-lore-title { font-size: 20px; font-weight: 700; color: var(--yellow); }
.dg-lore-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 22px; }
/* on narrow screens the board grows past the window, so the lore covers the window instead of the board */
@media (max-width: 1000px) { .dg-lore { position: fixed; } }
.dg-lore-foot { display: flex; gap: 10px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--bg2); }
.dg-bookpanel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: min(520px, 100%); display: flex; flex-direction: column; background: var(--bg1); border-left: 2px solid var(--yellow); box-shadow: -10px 0 30px rgba(0, 0, 0, .45); }
.dg-bookpanel[hidden] { display: none; }
.dg-bookpanel-head { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.dg-bookpanel-head img { width: 28px; height: 28px; image-rendering: pixelated; }
.dg-bookpanel-head select { flex: 1; min-width: 0; background: var(--bg); color: var(--fg); border: 1px solid var(--line2); padding: 4px 6px; font: inherit; font-size: 12px; }
.dg-book-note { font-size: 11px; color: var(--muted); padding: 6px 14px; border-bottom: 1px dashed var(--line); }
.dg-book-note b { color: var(--aqua); }
.dg-bookpanel-text { overflow-y: auto; padding: 12px 16px; flex: 1; }
#bookBtn.on { background: var(--yellow); color: var(--bg); }
.link-btn { background: none; border: 0; padding: 0; color: var(--blue); text-decoration: underline; cursor: pointer; font: inherit; }
.dg-modal.dg-credits { width: min(860px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; border-top-color: var(--yellow); padding: 0; }
.dg-credits-head { display: flex; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.dg-credits-head h3 { margin: 0; color: var(--yellow); }
.dg-credits-body { overflow-y: auto; padding: 4px 20px 16px; }
.dg-credits-body h2 { border-bottom: 1px solid var(--line); padding-bottom: 4px; }

/* paused: the sentences, drafts and hints blur (not while you read the book in mastery; see dungeon-ui.js) */
.dg-paused .dg-prompt, .dg-paused .dg-draft, .dg-paused .dg-reveal { filter: blur(7px); pointer-events: none; user-select: none; transition: filter .2s; }
.dg-paused .dg-arena-wrap::before { content: 'paused'; position: sticky; top: 8px; z-index: 5; display: block; width: max-content; margin: 8px auto;
  padding: 4px 14px; border: 1px solid var(--yellow); color: var(--yellow); background: var(--bg); font-family: var(--mono); letter-spacing: .2em; text-transform: uppercase; }

.dg-avatar { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; margin-right: 6px; }
.dg-name-row { display: flex; gap: 8px; align-items: center; }
.dg-name-row input[readonly] { color: var(--fg); cursor: default; border-style: dashed; }
.dg-home-avatar { width: 32px; height: 32px; image-rendering: pixelated; flex: none; background: var(--bg); border: 1px solid var(--line2); }
.dg-name-link { color: var(--aqua, #8ec07c); margin-left: 6px; text-decoration: none; }
.dg-name-link:hover { color: var(--yellow); }
.dg-name-row input[readonly] { caret-color: transparent; }
.dg-name-row input[readonly]:focus { outline: none; border-color: var(--line2); }

.dg-linkbtn { background: none; border: 0; color: var(--green); font: inherit; font-size: 12px; cursor: pointer; padding: 0 2px; }
.dg-linkbtn:hover { text-decoration: underline; }
.dg-comp-cls { font: inherit; font-size: 12px; background: var(--bg2); color: var(--fg); border: 1px solid var(--line); padding: 1px 4px; }
.dg-host.dg-comp { background: var(--blue, #6cb6ff); }
.dg-frame-sub .dg-comp { color: var(--blue, #6cb6ff); }
.dg-comp-note { margin: 6px 0 0; max-width: 640px; }