/* Two looks over the same page: Ember Forge (WoW style, html.look-ember) and Broadcast (modern, html.look-broadcast).
   index.html picks one before the page draws; the "Modern look" / "WoW look" button switches and this browser remembers it.
   Both looks only restyle style.css through its colour and font tokens plus a few layout rules, so every feature stays the same.
   Both are dark, so index.html also sets data-theme="dark" and the dark rules in style.css and dungeon-journal.css apply. */

/* ---------- shared: icons, welcome band, side brand ---------- */
.ico, .pmark { display: inline-grid; place-items: center; flex: none; }
.ico svg { width: 18px; height: 18px; display: block; }
.pmark svg { width: 22px; height: 22px; display: block; }
.side-brand { display: none; }
.cn { display: none; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.hero .eyebrow { margin: 0 0 6px; }
.hero h1 { margin: 0; }
.hero .lede { margin: 8px 0 0; max-width: 58ch; }
.hero .sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 14px 0 0; }
.hero .sg { cursor: pointer; border-radius: 999px; padding: 2px 11px; }
.hero-stats { display: flex; gap: 16px; }
.hs { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; line-height: 1.2; }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* phones: header buttons stay on one line and the row scrolls sideways */
@media (max-width: 860px) { .appbar .top-actions .btn { white-space: nowrap; } }


/* =====================================================================
   EMBER FORGE: riveted iron plates, molten orange seams, hot-metal titles
   ===================================================================== */
:root.look-ember {
  --ef-bg: #0c0a09; --ef-iron: #1b1715; --ef-iron2: #141110; --ef-edge: #3a322d; --ef-edge2: #4d423a; --ef-fg: #efe6da; --ef-mut: #a99b8d; --ef-cream: #f6e3c4;
  --ef-molt: #ff7a1a; --ef-hot: #ffd27a; --ef-red: #c2290f; --ef-on: #7ee25b;
  --ef-heat: linear-gradient(90deg, #3e0f08, #9a220b 28%, #e2531b 55%, #ff9a2e 78%, #ffd98a 92%, #fff3cf);
  --ef-rivet: radial-gradient(circle at 40% 38%, #c1b4a7 0 .8px, #6d6058 1.6px, #2e2723 3.2px, rgba(0, 0, 0, .6) 4px, transparent 4.6px);
  --ef-plate: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 38%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .011) 0 1px, transparent 1px 3px), linear-gradient(160deg, #211c19, #151211);
  --ef-rivets: var(--ef-rivet) 6px 6px / 10px 10px no-repeat, var(--ef-rivet) calc(100% - 6px) 6px / 10px 10px no-repeat, var(--ef-rivet) 6px calc(100% - 6px) / 10px 10px no-repeat, var(--ef-rivet) calc(100% - 6px) calc(100% - 6px) / 10px 10px no-repeat;
  /* style.css tokens, retuned for cream on dark iron */
  --bg: var(--ef-bg);
  --panel: var(--ef-iron);
  --panel-2: #221d1a;
  --line: var(--ef-edge);
  --ink: var(--ef-fg);
  --ink-2: var(--ef-mut);
  --gold: #ffb366;
  --gold-fill: var(--ef-molt);
  --gold-ink: #1d0d04;
  --focus: var(--ef-hot);
  --note-bg: rgba(255, 122, 26, .1);
  --note-ink: #ffd9a0;
  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'Alegreya', Georgia, serif;
  --f-mono: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --bar-bg: transparent; --bar-ink: var(--ef-cream); --bar-mute: var(--ef-mut); --bar-line: var(--ef-edge2);
  --tip-bg: #090c18; --tip-line: #8a96b8;
  color-scheme: dark;
}
.look-ember body {
  font-size: 16px; line-height: 1.45; color: var(--ef-fg); -webkit-font-smoothing: antialiased;
  background: radial-gradient(120% 60% at 50% 0, #17110e, transparent 70%) fixed, var(--ef-bg);
}
.look-ember ::selection { background: rgba(255, 122, 26, .45); color: #fff; }
.look-ember a { color: #ffb366; }
.look-ember a:hover { color: #ffd9a0; }
.look-ember .brand, .look-ember .brand:hover { color: var(--ef-cream); }

/* top: riveted iron bar with a molten line under it */
.look-ember .appbar {
  border-bottom: 1px solid #000;
  background: var(--ef-rivet) 14px calc(100% - 2px) / 48px 10px repeat-x, linear-gradient(180deg, #2a2420, #1a1614 55%, #110e0d);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 10px 30px rgba(0, 0, 0, .6);
}
.look-ember .appbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 110, 20, .75) 20%, rgba(255, 200, 110, .9) 50%, rgba(255, 110, 20, .75) 80%, transparent);
  box-shadow: 0 0 12px rgba(255, 100, 20, .6);
}
.look-ember .appbar-in { max-width: 1360px; padding: 12px 28px; }
.look-ember .brand-mark {
  width: 38px; height: 38px; border-radius: 4px; color: #1d0d04; font: 800 21px/1 var(--f-display);
  background: linear-gradient(180deg, #ffdc8c, #ff8a1f 55%, #d4480f); box-shadow: 0 0 0 1px #6a2408, inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 16px rgba(255, 110, 20, .45);
}
.look-ember .brand-text strong { font: 700 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: var(--ef-cream); }
.look-ember .brand-text small { margin-top: 3px; font: italic 13px/1.1 var(--f-body); color: var(--ef-mut); }
.look-ember .appbar .finder input {
  background: rgba(12, 9, 8, .84); color: #fff3e2; border: 1px solid #5d4b3e; border-radius: 4px; font: 500 17px var(--f-body);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 2px 6px #000;
}
.look-ember .appbar .finder input::placeholder { color: #8f8071; }
.look-ember .appbar .finder input:focus { border-color: var(--ef-molt); box-shadow: 0 0 0 3px rgba(255, 120, 30, .25), 0 0 26px rgba(255, 100, 20, .3); }
.look-ember .finder-key { font: 700 13px var(--f-display); color: #cbb59c; border-color: #5d4b3e; border-radius: 2px; }
.look-ember .appbar .who { color: var(--ef-mut); }

/* buttons: molten metal for the main action, dark iron for the rest */
.look-ember .btn {
  border-radius: 3px; font: 700 14px/1 var(--f-display); letter-spacing: .07em; text-transform: uppercase;
  color: #f2dcc0; background: linear-gradient(180deg, #2e2724, #1a1614); border: 0; box-shadow: 0 0 0 1px var(--ef-edge2), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.look-ember .btn:hover:not(:disabled) { color: #fff; box-shadow: 0 0 0 1px rgba(255, 140, 50, .7), inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 18px -4px rgba(255, 110, 20, .55); }
.look-ember .btn.primary, .look-ember .appbar .btn.primary, .look-ember .seg button[aria-selected="true"] {
  color: #1d0d04; background: linear-gradient(180deg, #ffdc8c, #ff8a1f 55%, #d4480f);
  box-shadow: 0 0 0 1px #6a2408, inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 20px -8px rgba(255, 100, 20, .8);
}
.look-ember .btn.primary:hover:not(:disabled) { filter: brightness(1.1); color: #1d0d04; }
.look-ember .btn.quiet { background: transparent; box-shadow: none; color: var(--ef-mut); }
.look-ember .btn.quiet:hover:not(:disabled) { color: #fff; box-shadow: 0 0 0 1px var(--ef-edge2); }
.look-ember .appbar .btn.ghost { background: linear-gradient(180deg, #2e2724, #1a1614); color: #ffd9a0; border: 0; }
.look-ember #look-btn { color: #ffd9a0; }
.look-ember .seg { border-color: var(--ef-edge); border-radius: 4px; background: #0f0c0b; }
.look-ember .seg button { font: 700 13px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ef-mut); }

/* section tabs: an iron strip, the open tab glows like hot metal */
.look-ember .views {
  background: var(--ef-rivet) 8px calc(100% - 1px) / 40px 10px repeat-x, linear-gradient(180deg, #221d1a, #120f0e); border-bottom: 1px solid #000;
  box-shadow: 0 2px 0 rgba(255, 110, 20, .45), 0 8px 22px rgba(0, 0, 0, .6);
}
.look-ember .views-in { max-width: 1360px; padding: 8px 28px; gap: 4px; }
.look-ember .vtab {
  display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 13px; border: 1px solid transparent; border-radius: 4px; color: #bdae9f;
  font: 600 16px/1 var(--f-display); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.look-ember .vtab .ico svg { width: 16px; height: 16px; opacity: .8; }
.look-ember .vtab:hover { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 120, 30, .08)); border-color: #3c332d; }
.look-ember .vtab[aria-current="page"] {
  color: #fff1d6; border-color: rgba(255, 150, 60, .75); text-shadow: 0 0 10px rgba(255, 140, 40, .8);
  background: radial-gradient(120% 90% at 50% 120%, rgba(255, 120, 30, .75), rgba(200, 60, 10, .35) 45%, transparent 75%), linear-gradient(180deg, #3a2a21, #1c1411);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, .25), inset 0 -2px 6px rgba(255, 140, 40, .35), 0 0 20px rgba(255, 100, 20, .45);
}
.look-ember .vtab[aria-current="page"] .ico svg { opacity: 1; }
.look-ember .vbadge { font: 700 11.5px/1 var(--f-display); padding: 3px 5px; border-radius: 2px; background: var(--ef-red); color: #fff; box-shadow: 0 0 8px rgba(194, 41, 15, .7); text-shadow: none; }

/* page */
.look-ember .wrap { max-width: 1360px; padding: 26px 28px 40px; gap: 22px; }
.look-ember h1, .look-ember h2, .look-ember h3 { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .03em; color: var(--ef-cream); }
.look-ember h2, .look-ember .toolbar h2 { font-size: 27px; line-height: 1.05; }
.look-ember h3 { font-size: 19px; }
.look-ember .toolbar { position: relative; padding-bottom: 12px; }
.look-ember .toolbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--ef-molt), rgba(255, 122, 26, .25) 45%, rgba(255, 122, 26, 0)); box-shadow: 0 0 10px rgba(255, 110, 20, .45); }
.look-ember .sec, .look-ember .dhead, .look-ember .dkicker, .look-ember .card h3, .look-ember .news .relg h3, .look-ember .bpick h4, .look-ember .mlabel {
  font: 700 14px/1.2 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: #ff9a3d;
}
.look-ember .dtitle, .look-ember .ptitle, .look-ember .title-in { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: #ffe6bd; }
.look-ember .foot { color: var(--ef-mut); font-style: italic; text-align: center; }
.look-ember .note { background: linear-gradient(90deg, rgba(255, 122, 26, .14), rgba(255, 122, 26, .04)); border: 1px solid rgba(255, 140, 50, .45); border-left: 4px solid var(--ef-molt); color: #ffe3bf; border-radius: 3px; }

/* iron plates with four rivets */
.look-ember .card, .look-ember .step, .look-ember .req, .look-ember .bcard, .look-ember .gcard, .look-ember .pprof, .look-ember .pnote, .look-ember .manage, .look-ember .empty, .look-ember .mblock, .look-ember .gate-box {
  border: 1px solid var(--ef-edge); border-radius: 6px; color: var(--ef-fg);
  background: var(--ef-rivets), var(--ef-plate);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 0 rgba(0, 0, 0, .45), 0 22px 44px -24px rgba(0, 0, 0, .95);
}
.look-ember .manage, .look-ember .card, .look-ember .empty { padding-inline: 22px; }
.look-ember .ledger-wrap, .look-ember .results, .look-ember .dj-mapbox, .look-ember .mchar {
  border: 1px solid var(--ef-edge); border-radius: 6px; background: linear-gradient(160deg, #1d1917, #131010);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 22px 44px -24px rgba(0, 0, 0, .95);
}
.look-ember .chip, .look-ember .sk { border: 1px solid rgba(255, 180, 110, .28); border-radius: 3px; color: #f3dcc0; background: rgba(18, 13, 10, .66); }
.look-ember .chip.on, .look-ember .chip[aria-pressed="true"] { color: #1d0d04; background: linear-gradient(180deg, #ffd27a, #ff8a1f); border-color: #ff9a3d; box-shadow: 0 0 14px rgba(255, 110, 20, .5); }
.look-ember .pill { color: #ffb366; border-color: rgba(255, 150, 60, .6); font: 700 12px/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }

/* welcome band: the guild painting, embers glow at the bottom, hot-metal title */
.look-ember .hero {
  position: relative; overflow: hidden; min-height: 500px; align-items: end; padding: 40px 34px 30px; border: 1px solid #000; border-radius: 6px;
  background:
    radial-gradient(70% 55% at 22% 105%, rgba(255, 90, 20, .42), transparent 70%),
    linear-gradient(180deg, rgba(10, 7, 6, .35) 0, rgba(10, 7, 6, 0) 22%, rgba(10, 7, 6, 0) 46%, rgba(10, 7, 6, .82) 74%, rgba(10, 7, 6, .96)),
    url('art/guild.jpg') center 88% / cover no-repeat, #000;
  box-shadow: 0 0 0 1px var(--ef-edge), 0 30px 60px -28px #000, 0 0 50px -24px rgba(255, 100, 20, .45);
}
.look-ember .hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ff5a00 12%, #ffd27a 30%, #ff7a1a 48%, #ffe2a0 66%, #ff5a00 86%, transparent); box-shadow: 0 0 14px 2px rgba(255, 100, 20, .65);
}
.look-ember .hero .eyebrow { font: 600 15px/1.2 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: #f0d6b4; text-shadow: 0 1px 4px #000; }
.look-ember .hero h1 {
  font: 800 clamp(40px, 5.6vw, 84px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: .005em; color: #ffb347;
  background: linear-gradient(180deg, #fff8e6 0%, #ffe1a0 30%, #ff9b2e 62%, #d23f0c 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 100, 20, .42)) drop-shadow(0 4px 0 rgba(40, 10, 2, .9));
}
.look-ember .hero .lede { margin-top: 16px; font-size: 19px; line-height: 1.5; color: #f0e4d4; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.look-ember .hero .sugg { font-style: italic; color: #d8c8b5; font-size: 15px; text-shadow: 0 1px 4px #000; }
.look-ember .hero .sg {
  border: 1px solid rgba(255, 180, 110, .35); border-radius: 3px; padding: 5px 12px; color: #f3dcc0; background: rgba(18, 13, 10, .72);
  font: 600 14px/1.1 var(--f-display); font-style: normal; letter-spacing: .05em; text-transform: uppercase;
}
.look-ember .hero .sg:hover { color: #1d0d04; background: linear-gradient(180deg, #ffd27a, #ff8a1f); border-color: #ff9a3d; }
.look-ember .hero-stats { gap: 12px; }
.look-ember .hs {
  width: 150px; align-items: flex-start; text-align: left; gap: 4px; padding: 16px 18px 18px; border: 1px solid var(--ef-edge); border-radius: 6px;
  font: italic 14px/1.2 var(--f-body); color: var(--ef-mut);
  background: var(--ef-rivets), linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 40%), linear-gradient(160deg, rgba(36, 30, 27, .94), rgba(20, 17, 15, .95));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 30px -18px #000;
}
.look-ember .hs b {
  font: 700 44px/.95 var(--f-display); font-variant-numeric: tabular-nums; color: #ffb347;
  background: linear-gradient(180deg, #fff3cf, #ffb347 50%, #e2531b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(255, 110, 20, .45));
}

/* profession medallions */
.look-ember .profbar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.look-ember .pcard {
  gap: 14px; padding: 12px 16px 12px 12px; border: 1px solid var(--ef-edge); border-radius: 6px; color: var(--ef-fg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 40%), linear-gradient(160deg, #221d1a, #151211);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 30px -20px #000; transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .3s;
}
.look-ember .pcard:hover { transform: translateY(-2px); border-color: #5d4b3e; }
.look-ember .pmark {
  display: grid; width: 56px; height: 56px; border-radius: 50%; color: #e9d2b4;
  background: radial-gradient(circle at 50% 45%, #2a2320 0 54%, transparent 56%), conic-gradient(from 210deg, #8b7e73, #2b2522, #5b5049, #1c1816, #8b7e73);
  box-shadow: 0 0 0 1px #000, 0 6px 16px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.look-ember .pmark svg { width: 24px; height: 24px; }
.look-ember .pcard .pname { font: 700 18px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--ef-cream); }
.look-ember .pcard .pstat { font-size: 13.5px; color: var(--ef-mut); }
.look-ember .pcard[aria-current="true"] {
  border-color: rgba(255, 140, 50, .85);
  background: radial-gradient(90% 120% at 15% 120%, rgba(255, 100, 20, .32), transparent 65%), linear-gradient(160deg, #2a1f19, #171210);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, .15), 0 0 0 1px rgba(255, 120, 30, .3), 0 0 30px -6px rgba(255, 100, 20, .55);
}
.look-ember .pcard[aria-current="true"] .pmark {
  color: #fff3dc; background: radial-gradient(circle at 50% 45%, #3a2418 0 54%, transparent 56%), conic-gradient(from 210deg, #ffe2a0, #ff7a1a, #9a220b, #ff9a2e, #ffe2a0);
  box-shadow: 0 0 0 1px #3a1004, 0 0 22px rgba(255, 110, 20, .7);
}
.look-ember .pbar { height: 8px; border-radius: 2px; background: #0b0908; outline: 1px solid var(--ef-edge); box-shadow: inset 0 1px 3px #000; }
.look-ember .pbar > span { background: var(--ef-heat); box-shadow: 0 0 10px rgba(255, 110, 20, .6); }

/* ledger, lists and the recipe panel */
.look-ember .ledger thead th, .look-ember .ledger thead .rowhead, .look-ember .mats th, .look-ember table.bis thead th {
  font: 600 13px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ef-mut); background: #161210; border-bottom: 1px solid var(--ef-edge2);
}
.look-ember .ledger thead .rowhead { color: var(--ef-cream); }
.look-ember .ledger tbody th, .look-ember .ledger tbody td { border-color: #2c2522; }
.look-ember .ledger tbody tr:hover > * { background: #241e1b; }
.look-ember .ledger tbody tr.sel > *, .look-ember .res.sel { background: linear-gradient(90deg, rgba(255, 100, 20, .2), rgba(255, 100, 20, .06)), #1c1512; }
.look-ember .ledger tbody tr.sel .rowhead, .look-ember .res.sel { box-shadow: inset 4px 0 0 var(--ef-molt); }
.look-ember .ledger tbody tr.sel .rname, .look-ember .res.sel .rname { color: #ffe3b5; }
.look-ember .ledger .rname, .look-ember .res .rname, .look-ember .rlink, .look-ember .bc-name, .look-ember .pprof .pname { font: 700 16px/1.25 var(--f-body); }
.look-ember .res { border-color: #2c2522; }
.look-ember .res:hover { background: #241e1b; }
.look-ember .box { border-color: #6b5f56; border-radius: 3px; background: #0f0c0b; }
.look-ember .box.on, .look-ember .tick input:checked + .box { background: linear-gradient(180deg, #ffd27a, #ff8a1f); border-color: #ff9a3d; box-shadow: 0 0 10px rgba(255, 110, 20, .5); color: #1d0d04; }
.look-ember .detail {
  top: 140px; max-height: calc(100vh - 160px); border: 1px solid var(--ef-edge2); border-radius: 8px 8px 5px 5px;
  background: var(--ef-rivets), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 30%), linear-gradient(170deg, #272120, #161312 60%, #120f0e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -3px 0 rgba(0, 0, 0, .5), 0 0 0 1px #000, 0 30px 60px -28px #000, 0 0 50px -24px rgba(255, 100, 20, .45);
}
.look-ember .detail .dtitle { font-size: 27px; line-height: 1; text-shadow: 0 0 18px rgba(255, 120, 30, .35); }
.look-ember .dreag li {
  color: #f6e9d6; border: 0; border-radius: 3px; text-shadow: 0 1px 2px #000;
  background: linear-gradient(180deg, #4b4039 0, #2f2723 52%, #1f1a17 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px #000;
}
.look-ember .dcount {
  font: 800 15px var(--f-display); color: #2a0f03; text-shadow: none; border-radius: 2px; min-width: 2.2em; text-align: center; padding: 1px 5px;
  background: linear-gradient(180deg, #ffe6a8, #ff9a2e 60%, #c9420c); box-shadow: 0 0 10px rgba(255, 120, 30, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.look-ember .dot { background: #4a413b; }
.look-ember .dot.on { background: var(--ef-on); box-shadow: 0 0 0 3px rgba(126, 226, 91, .18), 0 0 10px var(--ef-on); }
.look-ember .dcard, .look-ember .tip { background: linear-gradient(#090c18, #10142a); border-color: #8a96b8; font-family: 'Barlow Semi Condensed', 'Alegreya', sans-serif; }
.look-ember .main input[type="text"], .look-ember .main input[type="number"], .look-ember .main input[type="search"], .look-ember .main select, .look-ember .main textarea,
.look-ember .find, .look-ember .controls select, .look-ember .mf input, .look-ember .mf select, .look-ember .addrec input, .look-ember .qty, .look-ember .price,
.look-ember .rq-form input, .look-ember .rq-form select, .look-ember .import textarea, .look-ember .mblock textarea, .look-ember .tag-sel, .look-ember .gate-box input {
  background: #0f0c0b; color: #fff3e2; border: 1px solid #4a3f37; border-radius: 3px; box-shadow: inset 0 1px 4px #000;
}
.look-ember .main input:focus, .look-ember .main select:focus, .look-ember .main textarea:focus { border-color: var(--ef-molt); box-shadow: 0 0 0 3px rgba(255, 120, 30, .22); outline: none; }
.look-ember .srange, .look-ember .bprog strong { color: #ffcf8a; }
.look-ember .toast { background: #1a1614; color: #ffe3bf; border: 1px solid rgba(255, 140, 50, .7); box-shadow: 0 0 24px rgba(255, 100, 20, .35); }
.look-ember .gate { background: rgba(8, 6, 5, .85); }
.look-ember .dj-tab, .look-ember .dj-tool { border-color: var(--ef-edge2); background: #161210; }

@media (max-width: 1180px) { .look-ember .profbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .look-ember .detail { top: auto; max-height: 72vh; border-radius: 10px 10px 0 0; border-top: 2px solid var(--ef-molt); }
}
@media (max-width: 860px) {
  .look-ember .appbar-in { padding: 10px 16px; }
  .look-ember .views-in { padding: 6px 12px; }
  .look-ember .vtab { height: 38px; padding: 0 11px; font-size: 15px; }
  .look-ember .wrap { padding: 18px 16px 32px; }
  .look-ember .profbar { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .look-ember .pcard { flex: none; width: 220px; }
}
@media (max-width: 760px) {
  .look-ember .hero-stats { gap: 8px; }
  .look-ember .hs { width: auto; flex: 1; padding: 12px 12px 14px; font-size: 12.5px; }
  .look-ember .hs b { font-size: 32px; }
  .look-ember .hero .lede { font-size: 16.5px; }
  .look-ember h2, .look-ember .toolbar h2 { font-size: 23px; }
}

/* =====================================================================
   BROADCAST: night-blue studio, square panels, red live accent, lower-third titles
   ===================================================================== */
:root.look-broadcast {
  --bc-bg: #05070c; --bc-surf: #0c111d; --bc-surf2: #101727; --bc-hover: #131a2b; --bc-line: #1f2840; --bc-line2: #2a3554;
  --bc-fg: #f4f6fb; --bc-mut: #98a2b8; --bc-dim: #7d88a3; --bc-red: #ff2d55; --bc-blue: #2f8cff; --bc-gold: #ffd23f;
  /* style.css tokens */
  --bg: var(--bc-bg);
  --panel: var(--bc-surf);
  --panel-2: var(--bc-hover);
  --line: var(--bc-line);
  --ink: var(--bc-fg);
  --ink-2: var(--bc-mut);
  --gold: var(--bc-gold);
  --gold-fill: var(--bc-red);
  --gold-ink: #fff;
  --focus: var(--bc-blue);
  --note-bg: rgba(47, 140, 255, .1);
  --note-ink: #d0e4ff;
  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'Barlow Semi Condensed', 'Geist', system-ui, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --bar-bg: #070a12; --bar-ink: var(--bc-fg); --bar-mute: var(--bc-mut); --bar-line: var(--bc-line2);
  --tip-bg: #090c18; --tip-line: #8a96b8;
  color-scheme: dark;
}
.look-broadcast body { font-size: 15px; color: var(--bc-fg); background: var(--bc-bg); }
.look-broadcast a { color: #7fb6ff; }
.look-broadcast .brand { color: var(--bc-fg); }
.look-broadcast ::selection { background: rgba(255, 45, 85, .45); color: #fff; }

/* top bar: the channel strip */
.look-broadcast .appbar { background: #070a12; border-bottom: 3px solid var(--bc-red); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.look-broadcast .appbar-in { max-width: 1560px; padding: 10px max(16px, 2.4vw); }
.look-broadcast .brand-mark {
  width: auto; height: 32px; padding: 0 11px; border-radius: 0; background: var(--bc-red); color: #fff; font: 800 18px/1 var(--f-display);
  letter-spacing: .1em; box-shadow: 0 0 22px rgba(255, 45, 85, .5);
}
.look-broadcast .brand-text { border-left: 4px solid var(--bc-blue); padding: 2px 0 2px 10px; background: rgba(12, 17, 29, .9); }
.look-broadcast .brand-text strong { font: 800 19px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; }
.look-broadcast .brand-text small { margin-top: 2px; font: 500 12px var(--f-body); color: var(--bc-mut); }
.look-broadcast .appbar .finder input {
  background: var(--bc-surf); color: var(--bc-fg); border: 1px solid var(--bc-line); border-left: 4px solid var(--bc-red); border-radius: 0; font: 500 16px var(--f-body);
}
.look-broadcast .appbar .finder input:focus { border-color: var(--bc-red); box-shadow: 0 0 0 3px rgba(255, 45, 85, .22); }
.look-broadcast .finder-key { border-radius: 0; font-family: var(--f-mono); color: var(--bc-mut); border-color: var(--bc-line2); }
.look-broadcast .appbar .who { color: var(--bc-mut); font-family: var(--f-mono); }

/* buttons: square, red for the main action */
.look-broadcast .btn {
  border-radius: 0; font: 700 14px/1 var(--f-display); letter-spacing: .07em; text-transform: uppercase;
  background: var(--bc-hover); border: 1px solid var(--bc-line2); color: var(--bc-fg);
}
.look-broadcast .btn:hover:not(:disabled) { border-color: #4a5a85; background: #18213a; }
.look-broadcast .btn.primary, .look-broadcast .appbar .btn.primary, .look-broadcast .seg button[aria-selected="true"] { background: var(--bc-red); border-color: var(--bc-red); color: #fff; }
.look-broadcast .btn.primary:hover:not(:disabled) { background: #ff4a6c; border-color: #ff4a6c; }
.look-broadcast .btn.quiet { background: transparent; border-color: transparent; color: var(--bc-mut); }
.look-broadcast .appbar .btn.ghost { background: rgba(12, 17, 29, .9); border-color: rgba(255, 255, 255, .22); color: #fff; }
.look-broadcast .seg { border-radius: 0; border-color: var(--bc-line2); background: #0b1222; }
.look-broadcast .seg button { font: 800 13px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--bc-dim); border-radius: 0; }

/* section tabs: broadcast tabs, the live one is white with a red underline */
.look-broadcast .views { background: #070a12; border-bottom: 1px solid var(--bc-line); }
.look-broadcast .views-in { max-width: 1560px; padding: 8px max(16px, 2.4vw); gap: 3px; }
.look-broadcast .vtab {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 0; background: rgba(12, 17, 29, .9); color: #e6eaf4;
  font: 700 16px/1.05 var(--f-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.look-broadcast .vtab .ico svg { width: 16px; height: 16px; opacity: .75; }
.look-broadcast .vtab:hover { background: rgba(30, 40, 66, .95); color: #fff; }
.look-broadcast .vtab[aria-current="page"] { background: var(--bc-fg); color: #070a12; box-shadow: inset 0 -3px 0 var(--bc-red); }
.look-broadcast .vtab[aria-current="page"] .ico svg { opacity: 1; color: var(--bc-red); }
.look-broadcast .vbadge { font: 700 10.5px/1.5 'Geist', sans-serif; background: var(--bc-red); color: #fff; border-radius: 999px; padding: 0 6px; }

/* page */
.look-broadcast .wrap { max-width: 1560px; padding: 22px max(16px, 2.4vw) 40px; gap: 18px; }
.look-broadcast h1, .look-broadcast h2, .look-broadcast h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.look-broadcast h2, .look-broadcast .toolbar h2 { font-size: 28px; line-height: 1.05; }
.look-broadcast .toolbar h2::before { content: ''; display: inline-block; width: 10px; height: 10px; margin: 0 10px 4px 0; border-radius: 50%; background: var(--bc-red); box-shadow: 0 0 12px rgba(255, 45, 85, .7); vertical-align: middle; }
.look-broadcast .sec, .look-broadcast .dhead, .look-broadcast .dkicker, .look-broadcast .card h3, .look-broadcast .news .relg h3, .look-broadcast .bpick h4, .look-broadcast .mlabel {
  font: 700 11.5px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bc-mut);
}
.look-broadcast .dtitle, .look-broadcast .ptitle, .look-broadcast .title-in { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; }
.look-broadcast .foot { color: var(--bc-dim); font: 500 12px var(--f-mono); text-align: center; }
.look-broadcast .note { border-radius: 0; border: 1px solid var(--bc-line); border-left: 4px solid var(--bc-blue); background: rgba(12, 17, 29, .95); color: #d0d6e6; }

/* panels: square, a coloured top edge like an on-screen graphic */
.look-broadcast .ledger-wrap, .look-broadcast .results, .look-broadcast .empty, .look-broadcast .manage, .look-broadcast .card, .look-broadcast .step,
.look-broadcast .req, .look-broadcast .bcard, .look-broadcast .gcard, .look-broadcast .pprof, .look-broadcast .pnote, .look-broadcast .detail, .look-broadcast .dj-mapbox,
.look-broadcast .mblock, .look-broadcast .mchar, .look-broadcast .gate-box {
  border-radius: 0; background: var(--bc-surf); border: 0; border-top: 3px solid var(--bc-red); box-shadow: 0 0 0 1px var(--bc-line);
}
.look-broadcast .card, .look-broadcast .step, .look-broadcast .bcard, .look-broadcast .gcard, .look-broadcast .pprof { border-top-color: var(--bc-blue); }
.look-broadcast .chip, .look-broadcast .sk { border-radius: 0; background: var(--bc-hover); border-color: var(--bc-line2); }
.look-broadcast .chip.on, .look-broadcast .chip[aria-pressed="true"] { background: var(--bc-blue); border-color: var(--bc-blue); color: #fff; }
.look-broadcast .pill { border-radius: 0; font: 700 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--bc-red); border-color: var(--bc-red); }

/* welcome band: the guild picture on stage, the title as a lower third, numbers as a scoreboard */
.look-broadcast .hero {
  position: relative; overflow: hidden; min-height: 520px; align-items: end; gap: 20px; padding: 28px max(16px, 2.4vw); border-radius: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(4, 6, 11, .55), rgba(4, 6, 11, 0) 24%, rgba(4, 6, 11, 0) 52%, rgba(4, 6, 11, .9)),
    url('art/guild.jpg') center 88% / cover no-repeat, #04060b;
  box-shadow: 0 0 0 1px var(--bc-line);
}
.look-broadcast .hero-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.look-broadcast .hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 12px 6px 10px; background: var(--bc-red); color: #fff;
  font: 800 14px/1 var(--f-display); text-transform: uppercase; letter-spacing: .14em; box-shadow: 0 0 22px rgba(255, 45, 85, .55);
}
.look-broadcast .hero .eyebrow::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: bcPulse 1.2s ease-in-out infinite; }
.look-broadcast .hero h1 {
  background: var(--bc-fg); color: #070a12; padding: 8px 22px 5px; font: 800 clamp(30px, 3.8vw, 52px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em;
}
.look-broadcast .hero .lede {
  margin: 0; max-width: 64ch; padding: 8px 22px; background: rgba(7, 10, 18, .92); border-left: 4px solid var(--bc-blue); color: #d0d6e6; font: 600 16px/1.4 var(--f-body);
}
.look-broadcast .hero .sugg { margin-top: 12px; font: 600 12px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: #d0d6e6; }
.look-broadcast .hero .sugg > span { background: rgba(7, 10, 18, .85); padding: 4px 8px; }
.look-broadcast .hero .sg { border-radius: 0; border: 1px solid rgba(255, 255, 255, .3); background: rgba(8, 11, 20, .78); color: #fff; padding: 5px 12px; font: 700 14px var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.look-broadcast .hero .sg:hover { background: var(--bc-fg); color: #070a12; }
.look-broadcast .hero-stats {
  display: grid; gap: 0; width: 300px; align-self: end; background: rgba(7, 10, 18, .92); border-top: 3px solid var(--bc-blue); box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}
.look-broadcast .hero-stats::before {
  content: 'Guild board'; display: block; padding: 8px 12px; background: linear-gradient(90deg, #14203d, #0b1222);
  font: 800 17px/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: #fff;
}
.look-broadcast .hs {
  flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; text-align: left;
  font: 700 15px/1.2 var(--f-body); color: #e6eaf4; border-top: 1px solid var(--bc-line);
}
.look-broadcast .hs b { font: 700 22px/1 var(--f-mono); color: #fff; font-variant-numeric: tabular-nums; }
.look-broadcast .hs:first-child b { color: var(--bc-gold); }
@keyframes bcPulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .look-broadcast .hero .eyebrow::before { animation: none; } }

/* profession cards: team cards with a coloured edge */
.look-broadcast .profbar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.look-broadcast .pcard { gap: 12px; padding: 10px 12px; border: 0; border-left: 4px solid var(--bc-blue); border-radius: 0; background: var(--bc-surf); box-shadow: none; }
.look-broadcast .pcard:hover { background: var(--bc-hover); }
.look-broadcast .pcard[aria-current="true"] {
  border-left-color: var(--bc-red); background: linear-gradient(90deg, rgba(255, 45, 85, .28), var(--bc-surf));
  box-shadow: inset 0 0 0 1px var(--bc-red), 0 0 20px rgba(255, 45, 85, .3);
}
.look-broadcast .pmark { display: grid; width: 40px; height: 40px; border-radius: 0; background: #0b1222; color: #e6eaf4; box-shadow: inset 0 0 0 1px var(--bc-line2); }
.look-broadcast .pcard[aria-current="true"] .pmark { background: var(--bc-red); color: #fff; box-shadow: none; }
.look-broadcast .pcard .pname { font: 800 19px/1.05 var(--f-display); text-transform: uppercase; }
.look-broadcast .pcard .pstat { font: 500 12px var(--f-mono); color: var(--bc-mut); }
.look-broadcast .pbar { height: 5px; border-radius: 0; outline: 0; background: #1a2238; }
.look-broadcast .pbar > span { background: linear-gradient(90deg, var(--bc-blue), #7fb6ff); }
.look-broadcast .pcard[aria-current="true"] .pbar > span { background: linear-gradient(90deg, var(--bc-red), #ff7a92); }

/* ledger, lists and the recipe panel */
.look-broadcast .ledger thead th, .look-broadcast .ledger thead .rowhead, .look-broadcast .mats th, .look-broadcast table.bis thead th {
  background: var(--bc-surf2); font: 700 11px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--bc-mut);
}
.look-broadcast .ledger tbody th, .look-broadcast .ledger tbody td { border-color: var(--bc-line); }
.look-broadcast .ledger tbody tr:hover > * { background: var(--bc-hover); }
.look-broadcast .ledger tbody tr.sel > *, .look-broadcast .res.sel { background: linear-gradient(90deg, rgba(255, 45, 85, .2), rgba(255, 45, 85, .05)), var(--bc-surf); }
.look-broadcast .ledger tbody tr.sel .rowhead, .look-broadcast .res.sel { box-shadow: inset 4px 0 0 var(--bc-red); }
.look-broadcast .ledger .rname, .look-broadcast .res .rname, .look-broadcast .rlink, .look-broadcast .bc-name, .look-broadcast .pprof .pname { font: 700 16px/1.25 var(--f-body); }
.look-broadcast .res { border-color: var(--bc-line); }
.look-broadcast .res:hover { background: var(--bc-hover); }
.look-broadcast .box { border-radius: 0; border-color: #4a5a85; background: #0b1222; }
.look-broadcast .box.on, .look-broadcast .tick input:checked + .box { background: var(--bc-red); border-color: var(--bc-red); color: #fff; }
.look-broadcast .detail { top: 128px; max-height: calc(100vh - 144px); }
.look-broadcast .detail .dtitle { font-size: 26px; line-height: 1.05; }
.look-broadcast .dreag li { border-radius: 0; background: var(--bc-surf2); border: 1px solid var(--bc-line); }
.look-broadcast .dcount { border-radius: 0; font: 700 13px var(--f-mono); color: #fff; background: var(--bc-red); min-width: 2.2em; text-align: center; padding: 1px 4px; }
.look-broadcast .dot.on { background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.look-broadcast .dcard, .look-broadcast .tip { background: linear-gradient(#090c18, #10142a); border-color: #8a96b8; border-radius: 0; }
.look-broadcast .main input[type="text"], .look-broadcast .main input[type="number"], .look-broadcast .main input[type="search"], .look-broadcast .main select, .look-broadcast .main textarea,
.look-broadcast .find, .look-broadcast .controls select, .look-broadcast .mf input, .look-broadcast .mf select, .look-broadcast .addrec input, .look-broadcast .qty, .look-broadcast .price,
.look-broadcast .rq-form input, .look-broadcast .rq-form select, .look-broadcast .import textarea, .look-broadcast .mblock textarea, .look-broadcast .tag-sel, .look-broadcast .gate-box input {
  border-radius: 0; background: #080c16; color: var(--bc-fg); border: 1px solid var(--bc-line2);
}
.look-broadcast .main input:focus, .look-broadcast .main select:focus, .look-broadcast .main textarea:focus { border-color: var(--bc-red); box-shadow: 0 0 0 3px rgba(255, 45, 85, .2); outline: none; }
.look-broadcast .srange, .look-broadcast .bprog strong { color: var(--bc-gold); }
.look-broadcast .toast { border-radius: 0; background: var(--bc-fg); color: #070a12; border-top: 3px solid var(--bc-red); font-weight: 700; }
.look-broadcast .gate { background: rgba(4, 6, 11, .85); }
.look-broadcast .dj-tab, .look-broadcast .dj-tool { border-radius: 0; border-color: var(--bc-line2); background: var(--bc-hover); }

@media (max-width: 1180px) { .look-broadcast .profbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .look-broadcast .detail { top: auto; max-height: 72vh; } }
@media (max-width: 900px) { .look-broadcast .hero-stats { width: 100%; } }
@media (max-width: 860px) {
  .look-broadcast .views-in { padding: 6px 12px; }
  .look-broadcast .vtab { padding: 8px 11px; font-size: 15px; }
  .look-broadcast .profbar { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .look-broadcast .pcard { flex: none; width: 210px; }
}
@media (max-width: 760px) {
  .look-broadcast .hero h1 { padding: 6px 12px 3px; }
  .look-broadcast .hero .lede { padding: 6px 12px; font-size: 14.5px; }
  .look-broadcast h2, .look-broadcast .toolbar h2 { font-size: 24px; }
}

/* narrow screens: the text sits under the heroes in the guild picture, so the dark wash runs top to bottom instead */
@media (max-width: 900px) {
  .look-ember .hero, .look-broadcast .hero { min-height: 0; padding-top: 200px; }
  .look-ember .hero {
    background: radial-gradient(70% 40% at 22% 105%, rgba(255, 90, 20, .35), transparent 70%),
      linear-gradient(180deg, rgba(10, 7, 6, 0) 0, rgba(10, 7, 6, 0) 140px, rgba(10, 7, 6, .9) 235px, rgba(10, 7, 6, .97) 280px), url('art/guild.jpg') center -40px / auto 300px no-repeat, #000;
  }
  .look-broadcast .hero {
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, rgba(4, 6, 11, 0) 0, rgba(4, 6, 11, 0) 140px, rgba(4, 6, 11, .9) 235px, rgba(4, 6, 11, .97) 280px), url('art/guild.jpg') center -40px / auto 300px no-repeat, #04060b;
  }
}
@media (max-width: 760px) { .look-ember .hero { padding-inline: 16px; } }

/* Races page per look */
.look-ember .rc-card, .look-ember .rc-abil, .look-ember .rc-class, .look-ember .rc-notes {
  border-color: var(--ef-edge); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 40%), linear-gradient(160deg, #221d1a, #151211);
}
.look-ember .rc-card[aria-current="true"] { border-color: rgba(255, 140, 50, .85); box-shadow: 0 0 0 1px rgba(255, 120, 30, .3), 0 0 26px -6px rgba(255, 100, 20, .55); background: radial-gradient(90% 120% at 15% 120%, rgba(255, 100, 20, .32), transparent 65%), linear-gradient(160deg, #2a1f19, #171210); }
.look-ember .rc-cn strong, .look-ember .rc-ah strong { text-transform: uppercase; letter-spacing: .02em; color: var(--ef-cream); }
.look-ember .rc-ban { border-color: #000; box-shadow: inset 0 -140px 120px -40px rgba(10, 7, 6, .95), 0 0 0 1px var(--ef-edge), 0 0 50px -24px rgba(255, 100, 20, .45); }
.look-ember .rc-name { font: 800 clamp(34px, 4.6vw, 60px)/.95 var(--f-display); color: #ffb347; background: linear-gradient(180deg, #fff8e6 0%, #ffe1a0 30%, #ff9b2e 62%, #d23f0c 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 rgba(40, 10, 2, .9)); text-shadow: none; }
.look-ember .rc-bt .eyebrow { font-family: var(--f-display); }
.look-broadcast .rc-card, .look-broadcast .rc-abil, .look-broadcast .rc-class, .look-broadcast .rc-notes, .look-broadcast .rc-ban, .look-broadcast .rc-st, .look-broadcast .rc-uk, .look-broadcast .rc-class em { border-radius: 0; }
.look-broadcast .rc-card { border: 0; border-left: 4px solid var(--bc-blue); }
.look-broadcast .rc-card[aria-current="true"] { border-left-color: var(--bc-red); background: linear-gradient(90deg, rgba(255, 45, 85, .28), var(--bc-surf)); box-shadow: inset 0 0 0 1px var(--bc-red); }
.look-broadcast .rc-face { border-radius: 0; }
.look-broadcast .rc-abil { border: 0; border-top: 3px solid var(--bc-blue); box-shadow: 0 0 0 1px var(--bc-line); }
.look-broadcast .rc-cn strong, .look-broadcast .rc-ah strong { font-weight: 800; text-transform: uppercase; }
.look-broadcast .rc-name { font-size: clamp(28px, 3.6vw, 46px); display: inline-block; background: var(--bc-fg); color: #070a12; padding: 6px 16px 3px; text-transform: uppercase; text-shadow: none; }
.look-broadcast .rc-bt .eyebrow { display: inline-block; background: var(--bc-red); color: #fff; padding: 4px 10px; font: 800 13px/1 var(--f-display); text-shadow: none; }

/* profession pictures inside the medallion (Ember Forge) and the square tile (Broadcast) */
.look-ember .pmark.pic { padding: 5px; }
.look-ember .pmark.pic img { border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .7); filter: saturate(.9) brightness(.92); }
.look-ember .pcard:hover .pmark.pic img, .look-ember .pcard[aria-current="true"] .pmark.pic img { filter: none; }
.look-ember .pmark.pic { background: conic-gradient(from 210deg, #8b7e73, #2b2522, #5b5049, #1c1816, #8b7e73); }
.look-ember .pcard[aria-current="true"] .pmark.pic { background: conic-gradient(from 210deg, #ffe2a0, #ff7a1a, #9a220b, #ff9a2e, #ffe2a0); }
.look-broadcast .pmark.pic { width: 44px; height: 44px; padding: 0; }
.look-broadcast .pcard[aria-current="true"] .pmark.pic { box-shadow: 0 0 0 2px var(--bc-red); background: none; }
.look-broadcast .ri, .look-broadcast .tip-icon { border-radius: 0; }