/* 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; }
/* guild board: every character, ranked, beside the welcome text */
.hero-side { display: flex; flex-direction: column; gap: 12px; width: 400px; max-width: 100%; align-self: end; min-width: 0; }
.hero-side .hero-stats > .hs { flex: 1; min-width: 0; }
.gboard { display: flex; flex-direction: column; min-width: 0; }
.gb-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.gb-head h2 { flex: 1; margin: 0; min-width: 0; }
.gb-pic { width: 28px; height: 28px; flex: none; border-radius: 4px; }
.gb-sel { max-width: 52%; font: inherit; font-size: 14px; padding: 4px 6px; }
.gb-list { list-style: none; margin: 0; padding: 0; }
.gb-list.all { max-height: 430px; overflow-y: auto; overscroll-behavior: contain; }
.gb-list > li > a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 12px; color: inherit; text-decoration: none; }
.gb-rk { font-variant-numeric: tabular-nums; text-align: center; font-weight: 700; }
.gb-who { display: grid; gap: 3px; min-width: 0; }
.gb-nm { display: flex; align-items: center; gap: 7px; min-width: 0; }
.gb-nm b { color: var(--cc, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; border-radius: 2px; }
.gb-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-you { flex: none; padding: 0 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 3px; }
.gb-bar { display: block; height: 4px; overflow: hidden; }
.gb-bar > span { display: block; height: 100%; min-width: 0; }
.gb-sc { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 2ch; text-align: right; }
.gb-row.blank .gb-sc, .gb-row.blank .gb-rk { opacity: .55; }
.gb-empty { padding: 14px 12px 16px; }
.gb-empty p { margin: 0 0 10px; }
.gb-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; font-size: 12.5px; }
.gb-foot a, .gb-foot .linkish { font-size: 13px; }
.hero-side .hero-start { width: auto; align-self: stretch; }
.look-broadcast .hero-side .hero-start + .gboard { margin-top: 12px; }
@media (max-width: 900px) { .hero-side { width: 100%; } }
@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 { padding-block: 12px; }
.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 { 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 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, .look-ember .sb-box, .look-ember .sb-list, .look-ember .sb-dbox {
  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));
}

.look-ember .hero-side .hero-stats { gap: 8px; }
.look-ember .hero-side .hs { width: auto; padding: 10px 12px 12px; font-size: 12.5px; }
.look-ember .hero-side .hs b { font-size: 30px; }
.look-ember .gboard {
  border: 1px solid var(--ef-edge); border-radius: 6px; overflow: hidden; color: var(--ef-fg);
  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, .95), rgba(20, 17, 15, .96));
  -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 .gb-head { padding: 10px 16px 9px; border-bottom: 1px solid var(--ef-edge); }
.look-ember .gb-head h2 { font: 700 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--ef-cream); }
.look-ember .gb-pic { box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6420; }
.look-ember .gb-sel { border: 1px solid var(--ef-edge2); border-radius: 3px; background: #120f0d; color: var(--ef-fg); }
.look-ember .gb-list > li > a { padding: 5px 16px; border-top: 1px solid rgba(255, 255, 255, .04); }
.look-ember .gb-list > li:first-child > a { border-top: 0; }
.look-ember .gb-list > li > a:hover { background: rgba(255, 140, 50, .08); }
.look-ember .gb-rk { font: 700 20px/1 var(--f-display); color: var(--ef-mut); }
.look-ember .gb-row.top .gb-rk { color: #ffb347; text-shadow: 0 0 10px rgba(255, 110, 20, .6); }
.look-ember .gb-nm b { font: 700 16px/1.1 var(--f-body); }
.look-ember .gb-who small { color: var(--ef-mut); font-size: 12.5px; }
.look-ember .gb-you { color: #1d0d04; background: linear-gradient(180deg, #ffd27a, #ff8a1f); }
.look-ember .gb-row.me > a { box-shadow: inset 3px 0 0 var(--ef-molt); background: rgba(255, 120, 30, .07); }
.look-ember .gb-bar { border-radius: 2px; background: #0d0b0a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); }
.look-ember .gb-bar > span { background: var(--ef-heat); box-shadow: 0 0 8px rgba(255, 110, 20, .5); }
.look-ember .gb-sc { font: 700 22px/1 var(--f-display); color: var(--ef-cream); }
.look-ember .gb-row.top .gb-sc { color: #ffb347; }
.look-ember .gb-mine { border-top: 1px dashed var(--ef-edge2); }
.look-ember .gb-foot { border-top: 1px solid var(--ef-edge); color: var(--ef-mut); font-style: italic; }
.look-ember .gb-foot a, .look-ember .gb-foot .linkish { color: var(--ef-hot); font-style: normal; }

/* 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 .mprof input, .look-ember .mprof 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 .vtab { height: 38px; padding: 0 11px; font-size: 15px; }
  .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 { padding-block: 10px; }
.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 { 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 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-side { gap: 0; box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.look-broadcast .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: rgba(7, 10, 18, .92); border-top: 1px solid var(--bc-line2); }
.look-broadcast .hs {
  align-items: flex-start; gap: 4px; padding: 8px 12px; text-align: left; font: 600 12px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--bc-mut);
}
.look-broadcast .hs + .hs { border-left: 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); }
.look-broadcast .gboard { background: rgba(7, 10, 18, .92); border-top: 3px solid var(--bc-blue); color: var(--bc-fg); }
.look-broadcast .gb-head { padding: 8px 12px; background: linear-gradient(90deg, #14203d, #0b1222); }
.look-broadcast .gb-head h2 { font: 800 17px/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: #fff; }
.look-broadcast .gb-head h2::before { content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--bc-red); box-shadow: 0 0 8px var(--bc-red); }
.look-broadcast .gb-pic { border-radius: 0; }
.look-broadcast .gb-sel { border-radius: 0; border: 1px solid var(--bc-line2); background: #080c16; color: var(--bc-fg); font: 600 13px var(--f-mono); }
.look-broadcast .gb-list > li > a { padding: 6px 12px; border-top: 1px solid var(--bc-line); }
.look-broadcast .gb-list > li:first-child > a { border-top: 0; }
.look-broadcast .gb-list > li > a:hover { background: var(--bc-hover); }
.look-broadcast .gb-rk { font: 700 15px/1 var(--f-mono); color: var(--bc-mut); background: #0b1222; padding: 5px 0; box-shadow: inset 0 0 0 1px var(--bc-line2); }
.look-broadcast .gb-row.top .gb-rk { background: var(--bc-gold); color: #070a12; box-shadow: none; }
.look-broadcast .gb-nm b { font: 700 15px/1.15 var(--f-body); }
.look-broadcast .gb-who small { color: var(--bc-mut); font: 500 11.5px var(--f-mono); }
.look-broadcast .gb-you { border-radius: 0; color: #fff; background: var(--bc-red); font-family: var(--f-mono); }
.look-broadcast .gb-row.me > a { box-shadow: inset 4px 0 0 var(--bc-red); background: linear-gradient(90deg, rgba(255, 45, 85, .14), transparent 70%); }
.look-broadcast .gb-bar { height: 3px; background: #1a2238; }
.look-broadcast .gb-bar > span { background: linear-gradient(90deg, var(--cc, var(--bc-blue)), #7fb6ff); }
.look-broadcast .gb-sc { font: 700 20px/1 var(--f-mono); color: #fff; }
.look-broadcast .gb-row.top .gb-sc { color: var(--bc-gold); }
.look-broadcast .gb-mine { border-top: 2px solid var(--bc-line2); }
.look-broadcast .gb-foot { border-top: 1px solid var(--bc-line); color: var(--bc-mut); font: 600 11px var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.look-broadcast .gb-foot a, .look-broadcast .gb-foot .linkish { color: #7fb6ff; font: 700 11px var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
@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 .mprof input, .look-broadcast .mprof 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: 860px) {
  .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; overflow: hidden; }
  .look-broadcast .pcard .pname { font-size: 16px; }
}
@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, .look-ember .rc-mwrap {
  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, .look-broadcast .rc-facts div, .look-broadcast .rc-mwrap, .look-broadcast .rc-classic { 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; }

/* =====================================================================
   HOME WELCOME BAND: clickable guild numbers and the "Get started" card
   ===================================================================== */
button.hs { cursor: pointer; font: inherit; color: inherit; background: none; border: 0; margin: 0; }
.hero-start { width: 380px; align-self: end; }
.hero-start ol { list-style: none; margin: 0; padding: 0; display: grid; }
.hstep { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.hstep-n { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; }
.hstep-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hstep .btn { grid-column: 2; justify-self: start; min-height: 32px; padding: 4px 14px; }
@media (max-width: 900px) { .hero-start { width: 100%; } }
@media (max-width: 560px) { .hero .sugg .sg:nth-of-type(n+4) { display: none; } }

.look-ember button.hs { transition: border-color .15s, box-shadow .15s, transform .15s; }
.look-ember button.hs:hover, .look-ember button.hs:focus-visible { border-color: #ff9a3d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 22px -4px rgba(255, 110, 20, .6); transform: translateY(-2px); outline: none; }
.look-ember .hs.hot { border-color: #ff9a3d; color: #f3dcc0; }
.look-ember .hero-start {
  padding: 16px 18px 18px; border: 1px solid var(--ef-edge); border-radius: 6px; color: var(--ef-fg);
  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, .95), rgba(20, 17, 15, .96));
  -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 .hstart-head { margin: 0 0 10px; font: 700 20px/1.1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #ffb347; }
.look-ember .hero-start ol { gap: 12px; }
.look-ember .hstep-n { border-radius: 50%; border: 1px solid rgba(255, 180, 110, .45); background: #120d0a; color: #ffd27a; font: 700 16px/1 var(--f-display); }
.look-ember .hstep.done .hstep-n { background: linear-gradient(180deg, #ffd27a, #ff8a1f); border-color: #ff9a3d; color: #1d0d04; }
.look-ember .hstep-t strong { font: 600 16px/1.2 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ef-cream); }
.look-ember .hstep-t span { font: italic 14px/1.35 var(--f-body); color: var(--ef-mut); }
.look-ember .hstep.done .hstep-t strong { color: var(--ef-mut); text-decoration: line-through; text-decoration-color: rgba(255, 154, 61, .6); }

.look-broadcast button.hs { width: 100%; }
.look-broadcast button.hs:hover, .look-broadcast button.hs:focus-visible { background: var(--bc-hover); box-shadow: inset 4px 0 0 var(--bc-red); outline: none; }
.look-broadcast .hs.hot { background: linear-gradient(90deg, rgba(255, 45, 85, .25), transparent); }
.look-broadcast .hs.hot b { color: var(--bc-red); }
.look-broadcast .hero-start { background: rgba(7, 10, 18, .94); border-top: 3px solid var(--bc-red); box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.look-broadcast .hstart-head {
  margin: 0; padding: 8px 12px; background: linear-gradient(90deg, #3a0f1d, #0b1222);
  font: 800 17px/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: #fff;
}
.look-broadcast .hstep { padding: 10px 12px; border-top: 1px solid var(--bc-line); }
.look-broadcast .hstep-n { width: 28px; height: 28px; background: #0b1222; box-shadow: inset 0 0 0 1px var(--bc-line2); color: #fff; font: 700 14px/1 var(--f-mono); }
.look-broadcast .hstep.done .hstep-n { background: #3ddc84; box-shadow: none; color: #04060b; }
.look-broadcast .hstep-t strong { font: 800 16px/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.look-broadcast .hstep-t span { font: 500 13.5px/1.35 var(--f-body); color: var(--bc-mut); }
.look-broadcast .hstep.done .hstep-t strong { color: var(--bc-mut); text-decoration: line-through; }
.look-broadcast .fg-hero, .look-broadcast .fg-head, .look-broadcast .fg-tree, .look-broadcast .fg-ladder, .look-broadcast .fg-sheet, .look-broadcast .fg-card, .look-broadcast .fg-ic, .look-broadcast .fg-classes button { border-radius: 0; }
.look-broadcast .fg-hero h2 { letter-spacing: .02em; }
.look-ember .rc-classic { border-left-color: rgba(255, 140, 50, .45); background: rgba(0, 0, 0, .28); }
.look-ember .rc-facts div { border-color: rgba(255, 140, 50, .35); }
.look-ember .rc-matrix tr.on { background: rgba(255, 100, 20, .16); }
.look-broadcast .rc-classic { border-left-color: var(--bc-blue); }
.look-broadcast .rc-facts div { border: 0; border-left: 3px solid var(--bc-blue); background: rgba(7, 10, 18, .82); }
.look-broadcast .rc-matrix tr.on { background: rgba(255, 45, 85, .18); }
@media (max-width: 760px) { .look-ember .rc-detail .rc-ban { box-shadow: inset 0 -300px 180px -60px rgba(10, 7, 6, .95), 0 0 0 1px var(--ef-edge); } }
/* My characters: save badge and the per-character header in each look */
.look-ember .save-pill { background: #1a1614; border-color: #4a3f37; }
.look-ember .save-pill.ok { color: #ffd08a; border-color: rgba(255, 140, 50, .7); }
.look-broadcast .save-pill { border-radius: 0; background: #080c16; border-color: var(--bc-line2); }
.look-broadcast .mc-name { font-family: 'Barlow Condensed', var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.look-broadcast .tickhelp, .look-broadcast .pknown { border-radius: 0; }
.look-broadcast .rac-card, .look-broadcast .rac-ic, .look-broadcast .rac-more { border-radius: 0; }
.look-broadcast .sb-ban, .look-broadcast .sb-box, .look-broadcast .sb-list, .look-broadcast .sb-dbox, .look-broadcast .sb-frame, .look-broadcast .sb-frame .sb-ic,
.look-broadcast .sb-badge, .look-broadcast .sb-side, .look-broadcast .sb-step, .look-broadcast .sb-mic, .look-broadcast .sb-ci { border-radius: 0; }
.look-ember .sb-ban { border-color: var(--ef-edge); }
.look-ember .sb-ban h2 { color: #ffe6bd; }
.look-ember .sb-lh h3 { font-size: 18px; }
.look-ember .sb-rpick button[aria-pressed="true"] { border-bottom-color: #ff9a3d; }
.look-ember .sb-rl { color: #ff9a3d; }
/* Spellbook book layout: ember turns it into a leather-bound book with molten edges; broadcast keeps it flat and square */
.look-ember .gb-book { border-color: var(--ef-edge); background: linear-gradient(160deg, #1f1a16, #141010); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px #000, 0 26px 50px -24px rgba(0, 0, 0, .95); }
.look-ember .gb-page.left { border-right: 0; box-shadow: inset -14px 0 18px -14px rgba(0, 0, 0, .9); }
.look-ember .gb-page.right { box-shadow: inset 14px 0 18px -14px rgba(0, 0, 0, .9); }
.look-ember .gb-marks { background: linear-gradient(90deg, #120e0b, #1a1512); border-right-color: var(--ef-edge); }
.look-ember .gb-mark[aria-selected="true"] { background: #1f1a16; border-color: var(--ef-edge); color: #ff9a3d; }
.look-ember .gb-mark[aria-selected="true"] .gb-mic { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ff9a3d, 0 0 12px rgba(255, 120, 30, .5); }
.look-ember .gb-ph h3, .look-ember .gb-big { color: #ffe6bd; }
.look-ember .gb-level, .look-ember .gb-roadbox, .look-ember .gb-cls { border-color: var(--ef-edge); background: linear-gradient(160deg, #1d1917, #131010); }
.look-ember .gb-lv { color: #ff9a3d; text-shadow: 0 0 12px rgba(255, 120, 30, .5); }
.look-ember .gb-stopc.done::before, .look-ember .gb-lfill { background: linear-gradient(90deg, #ff7a1a, #ffb347); box-shadow: 0 0 8px rgba(255, 110, 20, .5); }
.look-ember .gb-tile.sel { border-color: #ff9a3d; box-shadow: inset 3px 0 0 #ff9a3d; }
.look-broadcast .gb-book, .look-broadcast .gb-marks, .look-broadcast .gb-mark, .look-broadcast .gb-page.right, .look-broadcast .gb-level, .look-broadcast .gb-lvbox,
.look-broadcast .gb-roadbox, .look-broadcast .gb-cls, .look-broadcast .gb-tile, .look-broadcast .gb-tt, .look-broadcast .gb-hl, .look-broadcast .gb-ri,
.look-broadcast .gb-ri .sb-ic, .look-broadcast .gb-mic, .look-broadcast .gb-bottom { border-radius: 0; }
.look-broadcast .gb-cls img { border-radius: 0; }

/* One page frame for both looks: the header, the tab bar and the page share the same width and side space,
   so switching looks only changes the styling, never the size. Set here only, not per look. */
.look-ember .appbar-in, .look-broadcast .appbar-in,
.look-ember .views-in, .look-broadcast .views-in,
.look-ember .wrap, .look-broadcast .wrap { max-width: 1560px; padding-inline: max(16px, 2.4vw); }
.look-ember .views-in, .look-broadcast .views-in { padding-block: 8px; }
.look-ember .wrap, .look-broadcast .wrap { padding-block: 24px 40px; gap: 20px; }
@media (max-width: 860px) {
  .look-ember .appbar-in, .look-broadcast .appbar-in { padding-block: 10px; }
  .look-ember .views-in, .look-broadcast .views-in { padding: 6px 12px; }
  .look-ember .wrap, .look-broadcast .wrap { padding: 18px 16px 32px; }
}

/* Page kit (every page, see style.css "Page kit"): ember makes plates and a leather-bound book with molten edges,
   broadcast keeps everything flat and square. Sizes are never set here, so both looks keep the same layout. */
.look-ember .pk-head:not(.has-art), .look-ember .pk-bar, .look-ember .pk-strip, .look-ember .pk-pick { border-color: var(--ef-edge); background: linear-gradient(160deg, #1d1917, #131010); }
.look-ember .pk-head { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px #000; }
.look-ember .pk-head.has-art { border-color: var(--ef-edge2); }
.look-ember .pk-ht h1, .look-ember .pk-ht h2 { text-transform: uppercase; letter-spacing: .03em; color: #ffe6bd; }
.look-ember .pk-crest { box-shadow: 0 0 0 1px #000, 0 0 0 3px #8a6420, 0 0 22px rgba(255, 120, 30, .45); }
.look-ember .pk-book { border-color: var(--ef-edge); background: linear-gradient(160deg, #1f1a16, #141010); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px #000, 0 26px 50px -24px rgba(0, 0, 0, .95); }
.look-ember .pk-book:not(.no-side) > .pk-page { border-right: 0; box-shadow: inset -14px 0 18px -14px rgba(0, 0, 0, .9); }
.look-ember .pk-book > .pk-side, .look-ember .pk-book.docked > .detail { box-shadow: inset 14px 0 18px -14px rgba(0, 0, 0, .9); }
.look-ember .pk-marks { background: linear-gradient(90deg, #120e0b, #1a1512); border-right-color: var(--ef-edge); }
.look-ember .pk-mark[aria-selected="true"] { background: #1f1a16; border-color: var(--ef-edge); color: #ff9a3d; }
.look-ember .pk-mark[aria-selected="true"] .pk-mic { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ff9a3d, 0 0 12px rgba(255, 120, 30, .5); }
.look-ember .pk-ph h3, .look-ember .pk-bigt { color: #ffe6bd; text-transform: uppercase; letter-spacing: .02em; }
.look-ember .pk-bv { color: #ff9a3d; text-shadow: 0 0 12px rgba(255, 120, 30, .5); }
.look-ember .pk-big, .look-ember .pk-stat { border-color: var(--ef-edge2); background: #120f0d; }
.look-ember .pk-stat[aria-pressed="true"] { border-color: #ff9a3d; box-shadow: inset 0 -3px 0 #ff9a3d; }
.look-ember .pk-pick[aria-selected="true"] { border-color: #ff9a3d; background: linear-gradient(180deg, rgba(255, 120, 30, .16), #131010); box-shadow: 0 0 0 1px #000, 0 0 18px -6px rgba(255, 120, 30, .6); }
.look-ember .pk-pick[aria-selected="true"] .pk-pn { color: #ffb347; }
.look-ember .pk-pf > span { background: var(--ef-heat); box-shadow: 0 0 6px rgba(255, 110, 20, .5); }
.look-ember .pk-sh h3 { text-transform: uppercase; letter-spacing: .03em; color: #ffe6bd; }
.look-broadcast .pk-head, .look-broadcast .pk-crest, .look-broadcast .pk-bar, .look-broadcast .pk-big, .look-broadcast .pk-stat, .look-broadcast .pk-strip,
.look-broadcast .pk-pick, .look-broadcast .pk-pick img, .look-broadcast .pk-pico, .look-broadcast .pk-pf, .look-broadcast .pk-book, .look-broadcast .pk-marks,
.look-broadcast .pk-mark, .look-broadcast .pk-mic, .look-broadcast .pk-ph, .look-broadcast .pk-side, .look-broadcast .pk-book.docked > .detail, .look-broadcast .pk-phic { border-radius: 0; }
.look-broadcast .pk-head { border-left: 4px solid var(--bc-red); }
.look-broadcast .pk-ht h1, .look-broadcast .pk-ht h2, .look-broadcast .pk-ph h3, .look-broadcast .pk-sh h3 { text-transform: uppercase; letter-spacing: .02em; }
.look-broadcast .pk-marks { background: #080c16; }
.look-broadcast .pk-mark[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--bc-red); }
.look-broadcast .pk-big { background: #080c16; border-color: var(--bc-line2); }
.look-broadcast .pk-stat { background: #080c16; border-color: var(--bc-line2); }
.look-broadcast .pk-stat b { color: #fff; }
.look-broadcast .pk-pick[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--bc-red); }
@media (max-width: 900px) { .look-broadcast .pk-mark[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--bc-red); } }
.look-broadcast .rc-side .rc-facts div, .look-broadcast .rc-cls-mini img { border-radius: 0; }
.look-broadcast .ad-facts div { border-radius: 0; }