/* Layout bands. "Wide" (the laptop frames: initiative rail, map, drawer) is 1000 px and up, and also any
   landscape screen at least 760 x 480, so a Fold or a tablet turned on its side changes format. The fold band
   (720 to 1279, portrait) and phones use the rest. gm-v2.js wideNow() is the same test. */
/* Hearth GM mode v2. Dark cards, brass and gold. Loaded only with the screen;
   the rules live in gm-v2.js and switch on ?gm=v2. */
@font-face {
  font-family: "IM Fell English SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/im-fell-english-sc-normal-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/cormorant-garamond-normal-latin.woff2") format("woff2");
}
body.gm2-on { overflow: hidden; background: #0e0e10; }
/* The serif faces default to old-style figures, so "+0" read "+O", "-1" read "-I" and "Round 1" read "Round I".
   GM mode uses lining, tabular figures everywhere: on every element, since a "font:" shorthand resets it (QA 1 Nov). */
body.gm2-on, body.gm2-on *, .gm2, .gm2 * { font-variant-numeric: lining-nums tabular-nums !important; }
body.gm2-on .u-tabbar,
body.gm2-on .u-abar { display: none !important; }

.gm2 {
  --gm-bg: #0e0e10;
  --gm-card: #18181c;
  --gm-card-2: #212125;
  --gm-ink: #f6edd9;
  --gm-soft: #e7d7b8;
  --gm-faint: #cbb892;
  --gm-gold: #f0d59a;
  --gm-gold-deep: #b07f34;
  --gm-line: rgba(232, 195, 120, 0.45);
  --gm-hub: #e8c36a;
  --gm-hub-ink: #2a1a0c;
  --gm-danger: #ffc2b3;
  --gm-ok: #c6ecb8;
  --gm-blue: #7eb6ef;
  --gm-orange: #e07a32;
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: var(--gm-bg);
  color: var(--gm-ink);
  font: 15px/1.35 "Source Sans 3", "Segoe UI", sans-serif;
}
.gm2 button, .gm2 input, .gm2 select { font: inherit; color: inherit; }
.gm2 button { cursor: pointer; }
.gm2 h1, .gm2 h2, .gm2 .gm2-name, .gm2-title b, .gm2-game h2, .gm2-hub b {
  font-family: "Cormorant Garamond", Palatino, Georgia, serif;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.gm2-top {
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  min-height: 58px;
  padding: 6px 8px;
  background: linear-gradient(#1f1f23, #141417);
  border-bottom: 1px solid var(--gm-gold-deep);
  flex: none;
  z-index: 5;
}
.gm2-back, .gm2-iconbtn {
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--gm-line);
  background: #141417;
  color: var(--gm-gold);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.gm2-title { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.gm2-title b { font-size: 22px; line-height: 1; color: var(--gm-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.gm2-subrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gm2-subline { min-width: 0; flex: 1; color: var(--gm-soft); font-size: 12px; white-space: normal; overflow: visible; }
.gm2-chipbtn {
  min-height: 44px; padding: 0 12px; border-radius: 999px;
  border: 1px solid #f3e2b0;
  background: linear-gradient(#f6e2a8, #e0b45a 55%, #b07f34);
  color: var(--gm-hub-ink); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.gm2-pills { display: flex; gap: 8px; padding: 8px 12px 0; flex: none; overflow: auto; }
.gm2-pill {
  border: 1px solid var(--gm-line); background: #141417; color: var(--gm-soft);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; white-space: nowrap;
}
.gm2-pill.on { color: var(--gm-hub-ink); background: var(--gm-hub); border-color: var(--gm-hub); }

.gm2-body { flex: 1; min-height: 0; display: flex; position: relative; }
.gm2-rail {
  display: none;
  flex-direction: column;
  width: 280px;
  background: #161619;
  border-right: 1px solid var(--gm-line);
  min-height: 0;
}
.gm2-rail-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--gm-gold); flex: none; }
.gm2-round {
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--gm-gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1.05;
}
.gm2-round b { font-size: 16px; }
.gm2-rail-list, .gm2-initstrip { overflow: auto; min-height: 0; }
.gm2-rail-list { flex: 1; padding: 4px 8px 12px; }

.gm2-irow {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 44px minmax(0, 1fr) auto 28px;
  gap: 8px;
  align-items: center;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 6px;
  color: var(--gm-ink);
}
.gm2-irow.on { border-color: var(--gm-gold); background: #1e1e22; }
.gm2-irow .ini { font-family: Georgia, serif; font-size: 18px; color: var(--gm-gold); text-align: center; }
.gm2-face {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--gm-orange); background: #1a1a1d; /* was #3a2a1c (31 Oct colour sweep) */
  display: flex; align-items: center; justify-content: center;
}
.gm2-face.player { border-color: var(--gm-blue); }
.gm2-face img { width: 100%; height: 100%; object-fit: cover; }
.gm2-face .ini-face { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--gm-gold); }
.gm2-mon .gm2-face, .gm2-fight .gm2-face { flex: none; }
.gm2-irow .who { min-width: 0; }
.gm2-irow .who b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.gm2-irow .who small { color: var(--gm-faint); }
.gm2-hpmini { height: 4px; border-radius: 4px; background: #2b2b31; margin-top: 4px; overflow: hidden; }
.gm2-hpmini i { display: block; height: 100%; background: linear-gradient(90deg, #8b2e24, #e07a4a); }
.gm2-hpmini.low i { background: #c4473a; }
.gm2-moredot {
  width: 28px; height: 36px; border: 0; background: transparent; color: var(--gm-gold); font-size: 18px;
}

.gm2-float {
  position: absolute; z-index: 4; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14,14,16, 0.78), rgba(14,14,16, 0));
}
.gm2-float .gm2-pills, .gm2-float .gm2-initstrip, .gm2-float button { pointer-events: auto; }
.gm2-initstrip {
  display: flex; gap: 8px; padding: 8px 10px 16px; overflow-x: auto; flex: none;
}
.gm2-initstrip .gm2-irow {
  grid-template-columns: 44px;
  grid-template-rows: auto auto auto;
  width: 72px; justify-items: center; gap: 2px; flex: none;
}
.gm2-initstrip .ini { grid-row: 1; font-size: 12px; }
.gm2-initstrip .who b { font-size: 11px; max-width: 68px; }
.gm2-initstrip .who small, .gm2-initstrip .gm2-moredot { display: none; }

.gm2-stage { flex: 1; min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; }
.gm2-stage .dm-map-scroll {
  flex: 1; min-height: 0; overflow: auto; background: #0a0a0b;
}
/* Fit board: the whole map, centred in the clear part of the stage (gm-v2.js wholeFit sets the offsets) */
.gm2-stage.is-whole .dm-map-scroll { padding: var(--gm2-fit-t, 16px) 0 0 var(--gm2-fit-l, 16px); }
.gm2 .map-token.player { box-shadow: 0 0 0 3px var(--gm-blue); border-radius: 50%; }
.gm2 .map-token.monster { box-shadow: 0 0 0 3px var(--gm-orange); border-radius: 50%; }
.gm2 .map-token.token-turn { box-shadow: 0 0 0 3px var(--gm-gold), 0 0 12px rgba(240, 213, 154, 0.65); }
.gm2 .map-token-caption { color: var(--gm-ink); text-shadow: 0 1px 2px #000; }

.gm2-trail { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gm2-chip {
  position: absolute; transform: translate(-50%, -130%);
  background: #141417; color: var(--gm-gold); border: 1px solid var(--gm-gold);
  border-radius: 999px; padding: 3px 8px; font-size: 12px; white-space: nowrap;
}
.gm2-chip.over { color: #fff8ee; border-color: #ffd0c8; background: #e23b2f; font-weight: 700; }
.gm2-note {
  position: absolute; left: 12px; right: 12px; top: 118px; z-index: 3;
  background: rgba(14,14,16, 0.9); color: var(--gm-soft);
  border: 1px solid var(--gm-line); border-radius: 12px; padding: 8px 12px; font-size: 13px;
}
.gm2-banner {
  position: absolute; left: 12px; right: 12px; bottom: 210px; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #2a1210; color: var(--gm-danger); border: 1px solid #e07a6a;
  border-radius: 14px; padding: 10px 12px;
}
.gm2-banner button { border: 1px solid var(--gm-gold); background: transparent; color: var(--gm-gold); border-radius: 10px; padding: 6px 10px; }

.gm2-wheel {
  position: absolute; left: 0; right: 0; bottom: 6px; height: 228px;
  pointer-events: none; z-index: 5;
}
.gm2-petal, .gm2-hub { pointer-events: auto; position: absolute; }
.gm2-petal {
  width: 64px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; color: var(--gm-gold); padding: 0;
}
.gm2-petal i {
  width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid #e8c36a;
  background: radial-gradient(circle at 40% 32%, #4b4b53, #18181b 68%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 3px #121214, 0 4px 10px rgba(0, 0, 0, 0.45);
  color: var(--gm-gold);
}
.gm2-petal i svg { width: 26px; height: 26px; display: block; }
.gm2-petal.on i { box-shadow: 0 0 0 2px var(--gm-gold), inset 0 0 0 3px #121214; }
.gm2-petal span { font-family: "IM Fell English SC", Palatino, serif; font-size: 13px; color: var(--gm-gold); letter-spacing: 0.04em; }
.gm2-shape svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.gm2-hub {
  width: 112px; height: 112px; border-radius: 50%;
  border: 2px solid #f3e2b0;
  background: radial-gradient(circle at 40% 35%, #f6e2a8, #e0b45a 45%, #b07f34);
  color: var(--gm-hub-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  font-weight: 700;
}
.gm2-hub b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 20px; line-height: 1; }
.gm2-hub small { font-size: 11px; font-weight: 600; }
.gm2-hub.next { /* the app's primary gold, was orange-red (QA 1 Nov) */
  background: radial-gradient(circle at 40% 35%, #f0cf86, #e9c06a 45%, #b4863a);
  color: #1a1007; border-color: #f3e2b0;
}
.gm2-keys {
  display: none; position: absolute; left: 12px; bottom: 10px; z-index: 4;
  color: var(--gm-faint); font-size: 12px; background: rgba(14,14,16, 0.75);
  border-radius: 8px; padding: 4px 8px;
}
.gm2-keys kbd { border: 1px solid var(--gm-line); border-radius: 4px; padding: 0 4px; color: var(--gm-gold); }
/* Jenny's frames: each petal carries its key, the hub its N; only where there is a keyboard and a mouse. */
.gm2-petal { position: absolute; }
.gm2-key { display: none; position: absolute; top: -7px; right: -5px; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box;
  border: 1px solid var(--gm-gold); border-radius: 5px; background: #121214; color: var(--gm-gold); font: 600 11px/18px Inter, system-ui, sans-serif; font-style: normal; text-align: center; }
.gm2-hubkey { display: none; }
@media (hover: hover) and (pointer: fine) { .gm2-key { display: block; } .gm2-hubkey { display: inline; } }
.gm2-subline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gm2-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  max-height: min(86vh, 760px);
  overflow: auto;
  background: #141417;
  color: var(--gm-ink);
  border-radius: 22px 22px 0 0;
  border: 1px solid var(--gm-line);
  border-bottom: 0;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.55);
  padding: 8px 14px 22px;
}
.gm2-sheet h2 { margin: 8px 0; font-size: 28px; color: var(--gm-gold); }
.gm2-grab { width: 42px; height: 4px; border-radius: 4px; background: rgba(201,153,63,.7); margin: 6px auto 8px; } /* was #6b5436 (31 Oct colour sweep) */
.gm2-sheet-h { display: flex; align-items: center; gap: 8px; }
.gm2-sheet-h .grow { flex: 1; min-width: 0; }
.gm2-sub { color: var(--gm-soft); font-size: 13px; }
.gm2-foot { color: var(--gm-faint); font-size: 12px; text-align: center; margin-top: 10px; }

.gm2-card {
  background: var(--gm-card); border: 1px solid var(--gm-line); border-radius: 16px; padding: 12px;
}
.gm2-hpbar { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.gm2-hpbar .track {
  flex: 1; height: 44px; border-radius: 10px; overflow: hidden; position: relative;
  background: #121214; border: 1px solid var(--gm-line);
}
.gm2-hpbar .track i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #6e1e18, #c4472a 40%, #e7a05a); }
.gm2-hpbar .track b, .gm2-hpface b {
  position: relative; z-index: 1; display: flex; height: 100%; align-items: center; justify-content: center;
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px;
}
.gm2-hpface {
  position: absolute; inset: 0; width: 100%; border: 0; background: transparent; padding: 0; color: var(--gm-ink);
}
.gm2-hpset { width: 100%; height: 100%; border: 0; background: transparent; text-align: center; color: var(--gm-ink); font-size: 18px; }
.gm2-ac {
  width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--gm-gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--gm-gold);
}
.gm2-ac b { font-size: 18px; line-height: 1; }
.gm2-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.gm2-steps button, .gm2-gold, .gm2-quiet, .gm2-rowbtn {
  border-radius: 999px; border: 1px solid var(--gm-line); background: #161619; color: var(--gm-ink);
  padding: 8px 12px; min-height: 40px;
}
.gm2-gold {
  background: linear-gradient(#f6e2a8, #e0b45a 50%, #b07f34);
  color: var(--gm-hub-ink); border-color: #f3e2b0; font-weight: 700;
}
.gm2-steps .hit { color: var(--gm-danger); border-color: #e07a6a; }
.gm2-abils { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0; }
.gm2-abils div {
  background: #161619; border: 1px solid var(--gm-line); border-radius: 10px; text-align: center; padding: 6px 2px;
}
.gm2-abils small { display: block; color: var(--gm-faint); font-size: 10px; }
.gm2-abils button { border: 0; background: none; color: var(--gm-gold); padding: 0; min-height: 44px; }
.gm2-atk { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-top: 1px solid rgba(232, 195, 120, 0.2); }
.gm2-atk .grow { flex: 1; min-width: 0; }
.gm2-atk b { color: var(--gm-gold); }
.gm2-tag { display: inline-block; font-size: 10px; letter-spacing: 0.06em; border: 1px solid #e07a6a; color: #ffc2b3; border-radius: 6px; padding: 1px 4px; margin-left: 4px; }
.gm2-conds { display: flex; flex-wrap: wrap; gap: 6px; }
.gm2-conds button {
  min-height: 44px; min-width: 44px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--gm-line); background: #161619; color: var(--gm-ink);
}
.gm2-conds button.on { background: #3d3d45; border-color: var(--gm-orange); color: var(--gm-gold); }

.gm2-search, .gm2-field {
  width: 100%; box-sizing: border-box; background: #0d0d0f; border: 1px solid var(--gm-line);
  border-radius: 12px; padding: 10px 12px; color: var(--gm-ink);
}
.gm2-crs { display: flex; gap: 6px; overflow: auto; padding: 8px 0; }
.gm2-crs button { border-radius: 999px; border: 1px solid var(--gm-line); background: #161619; min-width: 44px; min-height: 44px; padding: 0 12px; }
.gm2-crs button.on { background: var(--gm-hub); color: var(--gm-hub-ink); border-color: var(--gm-hub); }
.gm2-mon {
  display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(232, 195, 120, 0.15);
}
.gm2-mon .grow { flex: 1; min-width: 0; }
.gm2-mon small { color: var(--gm-faint); }
.gm2-stepper { display: inline-flex; align-items: center; gap: 6px; }
.gm2-stepper button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--gm-gold); background: transparent; color: var(--gm-gold); }
.gm2-actions { display: flex; gap: 8px; margin-top: 12px; }
.gm2-actions > * { flex: 1; }

.gm2-lib { padding: 8px 12px 24px; overflow: auto; height: 100%; box-sizing: border-box; }
.gm2-filters { display: flex; gap: 8px; overflow: auto; padding: 8px 0; }
.gm2-enccard {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px;
  width: 100%; text-align: left; background: var(--gm-card); border: 1px solid var(--gm-line);
  border-radius: 16px; padding: 8px; margin: 8px 0; color: var(--gm-ink);
}
.gm2-thumb {
  height: 72px; border-radius: 10px; background: #0a0a0b center/cover no-repeat; border: 1px solid var(--gm-line);
  display: flex; align-items: center; justify-content: center; color: var(--gm-faint); font-size: 12px;
}
.gm2-badge { float: right; border-radius: 999px; padding: 2px 8px; font-size: 12px; border: 1px solid var(--gm-line); color: var(--gm-soft); }
.gm2-badge.run { background: #3d3d45; color: var(--gm-gold); border-color: var(--gm-orange); }
.gm2-badge.done { background: #1d3324; color: var(--gm-ok); border-color: #3e6b48; }
.gm2-mapgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gm2-mapgrid button {
  background: var(--gm-card); border: 1px solid var(--gm-line); border-radius: 12px; padding: 6px; color: var(--gm-ink); text-align: left;
}
.gm2-mapgrid button.on { border-color: var(--gm-gold); }
.gm2-mapgrid .gm2-thumb { height: 64px; }

.gm2-nomap { flex: 1; overflow: auto; background: #e7d3a8; color: #2a2118; }
.gm2-nomap h2 { font-family: "Cormorant Garamond", Georgia, serif; color: #2a2118; margin: 12px 14px 4px; }
.gm2-nomap .hint { margin: 0 14px 8px; color: #5c4a32; font-size: 13px; }
.gm2-nrow {
  width: calc(100% - 20px); margin: 4px 10px; display: grid;
  grid-template-columns: 36px 44px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  background: #f3e6c8; border: 1px solid transparent; border-radius: 12px; padding: 8px; text-align: left; color: #2a2118;
}
.gm2-nrow.on { border-color: #a9782e; background: #fff6df; }
.gm2-nrow .hp { font-family: Georgia, serif; color: #8b2e24; font-size: 18px; }
.gm2-nomap-bar {
  display: flex; gap: 8px; padding: 10px; background: #0e0e10;
}
.gm2-nomap-bar button { flex: 1; }

.gm2-env .gm2-presets, .gm2-wx, .gm2-sound { display: flex; flex-wrap: wrap; gap: 8px; }
/* picked Environment chips: the picked-tile dark and gold, was blue #24324a / #7eb6ef (1 Nov, Tom: dark + gold only) */
.gm2-env button.on { background: linear-gradient(#2a2a2e, #18181b); border-color: var(--gm-gold); color: #f6edd9; box-shadow: inset 0 0 0 1px var(--gm-gold), 0 0 10px rgba(233,189,98,.2); }
.gm2-slide { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: var(--gm-soft); }
.gm2-slide input { flex: 1; }
.gm2-day {
  height: 8px; border-radius: 8px; margin: 8px 0 4px;
  background: linear-gradient(90deg, #f0c27a, #f7e7b0 30%, #d7b07a 60%, #3a4a78);
}
.gm2-menu { display: flex; flex-direction: column; gap: 6px; }
.gm2-menu button, .gm2-menu .gm2-linkchip { text-align: left; }
.gm2-sec { margin: 12px 0 4px; color: var(--gm-gold); font-size: 13px; letter-spacing: 0.04em; }
.gm2-help p { color: var(--gm-soft); }
.gm2-steps .gm2-shape,
.gm2-steps .gm2-dtype { position: static; width: auto; height: auto; min-height: 40px; }
.gm2-shape, .gm2-dtype {
  border-radius: 999px; border: 1px solid var(--gm-line); background: #161619; color: var(--gm-ink);
}
.gm2-shape.on { border-color: var(--gm-gold); color: var(--gm-gold); }
.gm2-dtype { font-size: 12px; padding: 6px 10px; }
.gm2-dtype.on { box-shadow: 0 0 0 2px #f6edd9; }
.gm2-size {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid var(--gm-line); border-radius: 999px; padding: 8px 12px; margin: 8px 0;
}
.gm2-preview-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.gm2 .dm-aoe-label { display: none; }
.gm2-aoe.from-caster { transform-box: fill-box; transform-origin: left center; animation: gm2out 420ms ease-out; }
.gm2-aoe.bloom { transform-box: fill-box; transform-origin: center; animation: gm2bloom 420ms ease-out; }
.gm2-aoe.fill { transform-box: fill-box; transform-origin: top left; animation: gm2fill 420ms ease-out; }
@keyframes gm2out { from { transform: scaleX(0.05); opacity: 0.3; } to { transform: none; opacity: 1; } }
@keyframes gm2bloom { from { transform: scale(0.15); opacity: 0.3; } to { transform: none; opacity: 1; } }
@keyframes gm2fill { from { transform: scaleY(0.08); opacity: 0.3; } to { transform: none; opacity: 1; } }
.gm2-result { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(232, 195, 120, 0.2); }
.gm2-result .tag { border-radius: 999px; padding: 2px 8px; font-size: 12px; }
.gm2-result .tag.fail { background: #6a2420; color: var(--gm-danger); }
.gm2-result .tag.save { background: #1d3324; color: var(--gm-ok); }
.gm2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.gm2-side {
  display: none; width: 360px; min-height: 0; overflow: auto;
  background: #161619; border-left: 1px solid var(--gm-line); padding: 8px 12px 16px;
}

@media (min-width: 1000px), (orientation: landscape) and (min-width: 760px) and (min-height: 480px) {
  .gm2-float { display: none; }
  .gm2-rail { display: flex; }
  .gm2-sheet.dock { position: static; max-height: none; border-radius: 0; border: 0; box-shadow: none; }
  .gm2-side.open { display: block; }
  .gm2-keys { display: block; }
  .gm2-wheel { height: 348px; width: 384px; }
}
@media (min-width: 1300px) {
  .gm2-rail { width: 300px; }
  .gm2-side { width: 400px; }
}
.gm2 .dm-map-scroll { touch-action: none; }
.gm2-legacy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.gm2-encstep {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 8px;
}
.gm2-encstep button {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--gm-gold);
  background: transparent; color: var(--gm-gold);
}
.gm2-encstep button:disabled { opacity: 0.35; }
.gm2-encstep b { font-family: "IM Fell English SC", Palatino, serif; font-size: 18px; font-weight: 400; color: var(--gm-gold); }
.gm2-encstep.mini { margin: 0; gap: 2px; flex: none; }
.gm2-encstep.mini button { width: 26px; height: 26px; border-radius: 8px; }
.gm2-encstep.mini b { font-size: 14px; }
.gm2-enclist { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.gm2-enclist button {
  display: flex; align-items: center; gap: 8px; text-align: left;
  background: var(--gm-card); border: 1px solid var(--gm-line); border-radius: 12px; padding: 8px 10px;
}
.gm2-enclist button.on { border-color: var(--gm-gold); }
.gm2-enclist .grow { flex: 1; min-width: 0; }
.gm2-enclist .ord { width: 28px; height: 28px; border: 0; background: transparent; color: var(--gm-gold); }

/* The games row runs on ui/hearth-carousel.js (Home's carousel): the track slides by transform, a vertical swipe
   still scrolls the page. --d is 0 on the lit game and 1 a card or more away. */
.gm2-carousel {
  flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; overflow: clip;
  touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; padding: 16px 0 12px;
}
.gm2-track { display: flex; column-gap: 16px; align-items: stretch; width: max-content; will-change: transform; }
.gm2-game {
  --d: 0; flex: none; width: min(78vw, 440px); transform: scale(calc(1 - var(--d) * .06)); opacity: calc(1 - var(--d) * .4);
  display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
  background: var(--gm-card); border: 1px solid var(--gm-line); border-radius: 22px; color: var(--gm-ink);
}
.gm2-game h2 { margin: 0; padding: 16px 16px 4px; font-size: 34px; color: var(--gm-gold); line-height: 1; }
.gm2-game .sub { padding: 0 16px 10px; color: var(--gm-soft); font-size: 14px; }
.gm2-game .pic {
  flex: 1; min-height: 240px; margin: 0 12px 12px; border-radius: 16px;
  background: #0a0a0b center/cover no-repeat; border: 1px solid var(--gm-line);
  display: flex; align-items: flex-end; padding: 10px; color: var(--gm-soft);
}
.gm2-game.new { align-items: center; justify-content: center; gap: 8px; font-size: 22px; color: var(--gm-gold); }
.gm2-game.new b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 40px; }

.gm2-end {
  position: absolute; left: 12px; right: 12px; bottom: 210px; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #141417; color: var(--gm-ink); border: 1px solid var(--gm-gold);
  border-radius: 14px; padding: 10px 12px;
}
.gm2-end button { border-radius: 10px; }

@media (max-width: 999px) and (orientation: portrait), (max-width: 759px), (max-width: 999px) and (max-height: 479px) {
  .gm2-title b { font-size: 18px; }
  .gm2-top { height: auto; min-height: 64px; }
  .gm2-chipbtn { font-size: 13px; padding: 0 10px; }
  .gm2-side { display: none; width: auto; border: 0; background: transparent; padding: 0; }
  .gm2-side.open {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; bottom: 0; z-index: 12;
    max-height: 78vh; overflow: hidden;
  }
  .gm2-side.open.tall { top: 64px; max-height: none; }
  .gm2-side .gm2-sheet.dock {
    position: relative; flex: 1 1 auto; min-height: 0; max-height: none;
    overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain;
    border-radius: 22px 22px 0 0;
    border: 1px solid var(--gm-line); box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.55);
  }
  .gm2-side .gm2-sheet.dock :is(button, a) { touch-action: pan-y; }
}
@media (min-width: 1000px), (orientation: landscape) and (min-width: 760px) and (min-height: 480px) {
  .gm2-wheel { height: 348px; width: 384px; }
}

/* Jenny pass — wheel, strip, taps, environment, carousel, grid. */
.gm2-title b { font-size: 22px; color: var(--gm-gold); }
.gm2-subline { font-size: 13px; }
.gm2-wheel {
  left: 50%; right: auto; bottom: 0; width: 384px; height: 348px;
  transform: translateX(-50%); z-index: 6;
}
.gm2-petal {
  width: 72px; height: 72px; border-radius: 50%; gap: 0; padding: 6px 4px;
  border: 2px solid #e8c36a;
  background: radial-gradient(circle at 40% 32%, #4b4b53, #18181b 68%);
  box-shadow: inset 0 0 0 3px #121214, 0 4px 12px rgba(0, 0, 0, 0.5);
  justify-content: center;
}
.gm2-petal svg { width: 20px; height: 20px; display: block; }
.gm2-petal span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 12px; line-height: 1; letter-spacing: 0; color: #f6edd9;
  text-shadow: 0 1px 2px #000;
}
.gm2-petal.on { box-shadow: 0 0 0 3px #f3e2b0, inset 0 0 0 3px #121214; }
.gm2-hub { width: 112px; height: 112px; }
.gm2-hub b { font-size: 18px; line-height: 1.05; text-align: center; }
.gm2-hub small { display: block; max-width: 96px; font-size: 11px; line-height: 1.15; text-align: center; font-weight: 650; }
.gm2-hub.place b { font-size: 22px; }
.gm2-dchip {
  position: absolute; pointer-events: auto;
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(14,14,16, 0.65);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  padding: 0; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.gm2-dchip svg { width: 18px; height: 18px; display: block; }
.gm2-dchip span {
  position: absolute; left: 50%; top: 42px; transform: translateX(-50%);
  font-size: 9px; line-height: 1; color: #f6edd9; font-weight: 700;
  text-shadow: 0 1px 2px #000; white-space: nowrap; pointer-events: none;
}
.gm2-dchip.on { box-shadow: 0 0 0 3px #f6edd9, inset 0 0 0 2px rgba(255, 255, 255, 0.45); }
.gm2-aoechip {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 4px;
  background: #141417; border: 1px solid var(--gm-gold); border-radius: 999px;
  z-index: 2; pointer-events: auto;
}
.gm2-aoechip button {
  width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--gm-gold);
  background: transparent; color: var(--gm-gold); font-size: 22px; line-height: 1;
}
.gm2-aoechip b { min-width: 128px; text-align: center; color: var(--gm-gold); font-weight: 650; font-size: 14px; white-space: nowrap; }
.gm2-aoe-done {
  position: absolute; left: 0; top: 8px; z-index: 3;
  min-width: 64px; min-height: 44px; padding: 0 14px;
  pointer-events: auto;
}

.gm2-initstrip { align-items: flex-end; gap: 10px; padding: 8px 10px 14px; }
.gm2-roundbox {
  width: 56px; min-height: 64px; flex: none; border-radius: 12px;
  border: 1px solid var(--gm-gold); background: rgba(14,14,16, 0.78); color: var(--gm-gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gm2-roundbox small { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.gm2-roundbox b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; line-height: 1; }
.gm2-roundbox.light { background: rgba(255, 248, 230, 0.7); color: #6a3e12; border-color: #a9782e; margin: 0 14px 8px; }
.gm2-scard {
  width: 68px; min-height: 92px; flex: none; border: 0; background: transparent; color: var(--gm-ink);
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0;
}
.gm2-scard .ring {
  width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--gm-orange);
  background: #1a1a1d; position: relative; display: flex; /* was #3a2a1c (31 Oct) */ align-items: center; justify-content: center;
}
.gm2-scard .ring.player { border-color: var(--gm-blue); }
.gm2-scard.on .ring { border-color: var(--gm-gold); box-shadow: 0 0 0 2px rgba(240, 213, 154, 0.55); }
.gm2-scard .ring img, .gm2-scard .ini-face {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.gm2-scard .badge, .gm2-scard .count {
  position: absolute; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 4px;
  background: #141417; border: 1px solid var(--gm-gold); color: var(--gm-gold);
  font-style: normal; font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.gm2-scard .badge { right: -6px; bottom: -4px; }
.gm2-scard .count { left: -6px; top: -4px; background: var(--gm-hub); color: var(--gm-hub-ink); border-color: var(--gm-hub); }
.gm2-scard .bar { width: 46px; height: 5px; border-radius: 4px; background: #2b2b31; overflow: hidden; }
.gm2-scard .bar i { display: block; height: 100%; background: linear-gradient(90deg, #8f2a22, #e7b15a); }
.gm2-scard .bar.low i { background: #c4473a; }
.gm2-scard .nm { font-size: 11px; max-width: 68px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gm2 .dm-map-grid,
.gm2 .dm-map-grid.has-image::after {
  background-image:
    linear-gradient(rgba(232, 214, 170, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 214, 170, 0.15) 1px, transparent 1px) !important;
}
/* (2 Nov) Grid lines off in the menu takes them off a map here too (the players' maps follow the same switch) */
.gm2 .dm-map-grid.has-image.no-overlay,
.gm2 .dm-map-grid.has-image.no-overlay::after { background-image: none !important; }
.gm2 .map-token-caption { display: none !important; }

.gm2-steps button, .gm2-gold, .gm2-quiet, .gm2-rowbtn, .gm2-menu button,
.gm2-env button, .gm2-crs button, .gm2-wx button, .gm2-presets button,
.gm2-sound button, .gm2-done, .gm2-wide, .gm2-partybtn, .gm2-timelabels button {
  min-height: 44px;
}
.gm2-menu { gap: 6px; }
.gm2-mchange, .gm2-menu > button.gm2-mitem {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: 46px; min-height: 46px; margin: 0; padding: 0 10px; box-sizing: border-box;
  text-align: left; white-space: nowrap; overflow: hidden;
  border-radius: 6px; border: 1px solid #2c2c32; background: #111113; color: #e9e4d8;
  font-family: Roboto, "Segoe UI", system-ui, sans-serif; font-size: 13px; font-weight: 500; line-height: 1;
}
.gm2-mchange { margin: 2px 0 8px; }
.gm2-menu > button:not(.gm2-mitem) {
  text-align: left; border-radius: 6px; border: 1px solid #2c2c32;
  background: #111113; color: #e9e4d8; padding: 8px 10px; min-height: 44px;
}
.gm2-mi { width: 16px; height: 16px; flex: none; color: #e9bd62; display: block; }
.gm2-mi svg { width: 16px; height: 16px; display: block; }
.gm2-ml { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gm2-mitem em, .gm2-mchange em {
  margin-left: auto; flex: none; font-style: normal; font-size: 11px; font-weight: 700; color: #e9bd62;
}
.gm2-mitem em.off { color: #9a978f; font-weight: 600; }
.gm2-menu > .gm2-sec {
  color: #9a978f; font: 600 11px/1.2 Roboto, "Segoe UI", system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
}
.gm2-done { min-width: 72px; }
.gm2-wide { width: 100%; margin-top: 8px; }
.gm2-addenc { width: 100%; min-height: 48px; margin-top: 8px; }
.gm2-encstep button { width: 44px; height: 44px; border-radius: 12px; }
.gm2-encstep b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 20px; font-weight: 600; }
.gm2-encrow { display: flex; gap: 8px; align-items: center; }
.gm2-encrow > button:first-child { flex: 1; min-height: 44px; }
.gm2-enclist .ord, .gm2-encrow .ord {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  border: 1px solid var(--gm-gold); background: #141417; color: var(--gm-gold); font-size: 18px;
}
.gm2-fight {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid rgba(232, 195, 120, 0.18);
}
.gm2-fight .grow { flex: 1; min-width: 0; }
.gm2-fight small, .gm2-mon small { color: var(--gm-faint); }
.gm2-stepper button { width: 44px; height: 44px; border-radius: 12px; }
.gm2-party { display: flex; flex-direction: column; gap: 8px; }
.gm2-partybtn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  border-radius: 12px; border: 1px solid var(--gm-line); background: #18181c; padding: 8px 12px;
}
.gm2-partybtn.on { border-color: var(--gm-gold); }
.gm2-partybtn em { font-style: normal; color: var(--gm-gold); min-width: 44px; text-align: right; }
.gm2-meter { margin: 8px 0 12px; }
.gm2-meter-top { display: flex; justify-content: space-between; gap: 8px; color: var(--gm-soft); font-size: 13px; }
.gm2-meter-top b { color: var(--gm-gold); font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; }
#gm2Mons { max-height: none; overflow: visible; }
.gm2-foot3 { margin-top: 12px; }
.gm2-foot3 > * { min-height: 48px; }

.gm2-live { /* gold hairline on the dark, was blue (1 Nov) */
  border: 1px solid var(--gm-gold); color: #f0cf86; background: linear-gradient(#2a2a2e, #18181b);
  border-radius: 999px; padding: 8px 10px; font-size: 12px; white-space: nowrap;
}
.gm2-presets, .gm2-timelabels, .gm2-sndtoggle { display: flex; flex-wrap: wrap; gap: 8px; }
.gm2-presets button, .gm2-timelabels button, .gm2-soundtiles button, .gm2-wxgrid button, .gm2-lights button {
  border-radius: 999px; border: 1px solid var(--gm-line); background: #18181c; color: var(--gm-ink); padding: 8px 12px;
}
.gm2-presets button.on, .gm2-timelabels button.on, .gm2-soundtiles button.on, .gm2-wxgrid button.on,
.gm2-sndtoggle button.on, .gm2-lights button.on { background: #2a2a2e; /* was #3a2e1c (31 Oct) */ border-color: var(--gm-gold); color: var(--gm-gold); }
.gm2-timewrap { position: relative; height: 44px; display: flex; align-items: center; }
.gm2-time-track {
  position: absolute; left: 0; right: 0; height: 12px; border-radius: 8px;
  background: linear-gradient(90deg, #f0a36a, #f7e7b0 34%, #d7a06a 66%, #243056);
}
.gm2-time { position: relative; width: 100%; height: 44px; margin: 0; background: transparent; }
.gm2-lights { display: flex; flex-wrap: wrap; gap: 8px; } /* 4 Nov: GM light switches */
.gm2-lights button { min-height: 44px; }
.gm2-lights .gm2-light-all { flex-basis: 100%; }
.gm2-wxgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gm2-wxgrid button {
  min-height: 72px; border-radius: 14px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; padding: 6px;
}
.gm2-wxgrid b { font-size: 18px; line-height: 1; }
.gm2-wxgrid small { color: var(--gm-gold); }
.gm2-soundtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gm2-soundtiles button { min-height: 56px; border-radius: 14px; }
.gm2-sndtoggle { display: grid; grid-template-columns: 1fr 1fr; }
.gm2-sndtoggle button { border-radius: 999px; }
.gm2-slide { min-height: 44px; }
.gm2-slide input[type="range"] { height: 44px; }
.gm2-slide output { min-width: 42px; color: var(--gm-gold); }

.gm2-abils { grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 4px; }
.gm2-abils button {
  min-height: 52px; min-width: 44px; width: 100%; box-sizing: border-box;
  border-radius: 10px; border: 1px solid var(--gm-line);
  background: #161619; color: var(--gm-gold); padding: 4px 0;
}
.gm2-abils button b { display: block; font-size: 16px; }
.gm2-statline { margin: 6px 0; color: var(--gm-soft); font-size: 14px; }
.gm2-statline b { color: var(--gm-gold); font-weight: 650; margin-right: 6px; }
.gm2-condgrid { display: flex; flex-wrap: wrap; gap: 6px; }
.gm2-condgrid button {
  min-height: 44px; border-radius: 999px; border: 1px solid var(--gm-line);
  background: #161619; color: var(--gm-ink); padding: 6px 10px;
}
.gm2-condgrid button.on { background: #2a2a2e; border-color: var(--gm-gold); color: var(--gm-gold); } /* was brown + orange (1 Nov, dark + gold) */
.gm2-tagged {
  display: inline-flex; align-items: center; min-height: 28px; margin: 4px 0 8px;
  border-radius: 999px; border: 1px solid rgba(201,153,63,.5); color: #f0cf86; background: #19191c; /* was blue (1 Nov) */
  padding: 4px 10px; font-size: 12px;
}
.gm2-meta { color: var(--gm-gold); font-size: 13px; }
.gm2-hpbar .track i {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(90deg, #7a241c 0%, #d4532a 58%, #e7b15a 100%);
}
.gm2-sheet-h h2 { margin: 0; font-size: 28px; }

.gm2-liblist { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow: auto; }
@media (max-width: 999px) and (orientation: portrait), (max-width: 759px), (max-width: 999px) and (max-height: 479px) {
  .gm2-side.open.results { top: auto; max-height: 48vh; }
}
.gm2-libcard {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  width: 100%; text-align: left; min-height: 76px; padding: 8px;
  background: var(--gm-card); border: 1px solid var(--gm-line); border-radius: 16px; color: var(--gm-ink);
}
.gm2-libcard.on { border-color: var(--gm-gold); }
.gm2-libcard .gm2-thumb { height: 64px; }
.gm2-libcard .grow { min-width: 0; }
.gm2-libcard small { display: block; color: var(--gm-faint); }
.gm2-thumb.empty {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 248, 230, 0.45), transparent 50%),
    linear-gradient(165deg, #f0e0c0, #d7b98a 55%, #c4a36a);
  border: 2px solid #e8c36a;
}

.gm2-carousel { padding: 12px 0 4px; }
.gm2-track { column-gap: 12px; }
.gm2-game {
  width: min(460px, calc(100vw - 72px));
  border: 2px solid #a9782e;
}
.gm2-game .pic { border: 2px solid #e8c36a; min-height: 280px; }
.gm2-game .pic.empty {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 248, 230, 0.4), transparent 46%),
    repeating-linear-gradient(0deg, rgba(56,56,64, 0.06) 0 2px, transparent 2px 6px),
    linear-gradient(165deg, #f3e6c8, #d7b98a 55%, #c4a36a);
  color: #5c4328; border: 2px solid #e8c36a;
}
.gm2-cnav { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 4px 0 18px; flex: none; }
.gm2-arw { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--gm-gold); font-size: 28px; line-height: 1; cursor: pointer; }
.gm2-arw:disabled { opacity: .3; cursor: default; }
/* Prev/next stay visible on touch too (Lee QA 29 Oct); swipe and dots still work. */
.gm2-dots { height: 44px; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0 6px; flex: none; }
@media (hover: hover) and (pointer: fine) { .gm2-dots { cursor: pointer; } }
.gm2-dots i { --a: 0; display: block; height: 8px; width: calc(8px + var(--a) * 14px); border-radius: 4px; background: color-mix(in srgb, var(--gm-gold) calc(var(--a) * 100%), #2a2a2e); }
.gm2-dots i.plus { width: 8px; background: none; position: relative; }
.gm2-dots i.plus::before, .gm2-dots i.plus::after { content: ""; position: absolute; background: color-mix(in srgb, var(--gm-gold) calc(var(--a) * 100%), #62626c); left: 3px; top: 0; width: 2px; height: 8px; }
.gm2-dots i.plus::after { left: 0; top: 3px; width: 8px; height: 2px; }
.gm2-game img { -webkit-user-drag: none; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .gm2-game { transform: none; } }

.gm2-nomap .bar { display: block; height: 5px; border-radius: 4px; background: #c4b496; margin-top: 4px; overflow: hidden; }
.gm2-nomap .bar i { display: block; height: 100%; background: linear-gradient(90deg, #8f2a22, #e7b15a); }
.gm2-nomap-bar button { min-height: 48px; }
.gm2-nrow { min-height: 56px; }
.gm2-irow { min-height: 56px; }
.gm2-moredot { width: 44px; height: 44px; }

.gm2-result { min-height: 56px; }
.gm2-result .grow { flex: 1; min-width: 0; }
.gm2-result .grow small { display: block; color: var(--gm-faint); }
.gm2-result .dmg { color: #e7b15a; min-width: 28px; text-align: right; }
.gm2-result .hp { min-width: 52px; text-align: right; color: var(--gm-soft); }
.gm2-search, .gm2-field { min-height: 44px; }

/* Lee: Done stays on screen, dice and toasts stay off the combat hub, the map can pinch. */
.gm2-side.open.encounter {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gm2-side.open.encounter .gm2-sheet.dock {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}
.gm2-side.open.encounter .gm2-sheet-h {
  flex: none;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #141417;
  padding: 4px 0 8px;
}
.gm2-sheet-body { min-height: 0; }
.gm2-side.open.encounter .gm2-sheet-body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.gm2-sheet-foot {
  position: sticky;
  bottom: 0;
  z-index: 4;
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  background: #141417;
  border-top: 1px solid rgba(232, 195, 120, 0.35);
}
.gm2-sheet-foot .gm2-done { min-width: 96px; min-height: 48px; padding: 0 18px; }

body.gm2-on .hd-ov {
  pointer-events: none !important;
  background: transparent !important;
}
body.gm2-on .hd-ov .hd-txt,
body.gm2-on .hd-ov canvas,
body.gm2-on .hd-ov .hd-proj {
  pointer-events: none !important;
}
body.gm2-on .hd-ov:not(.compact) .hd-txt {
  bottom: auto !important;
  top: 72px !important;
}
body.gm2-on .hd-ov.compact {
  top: 72px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  background: rgba(8,8,8, 0.55) !important;
}
body.gm2-on .hd-toast {
  top: 76px !important;
  bottom: auto !important;
  pointer-events: none !important;
  font-size: 22px !important;
}
body.gm2-on .hearth-toast,
body.gm2-on.u2 .hearth-toast,
body.gm2-on.u2.u-phone .hearth-toast,
body.gm2-on.u2.u-desk .hearth-toast,
body.gm2-on.u2.u-notabs.u-phone .hearth-toast {
  top: calc(68px + var(--hearth-safe-top, 0px)) !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 80 !important;
}
body.gm2-on .hearth-roll-toast {
  top: calc(68px + var(--hearth-safe-top, 0px)) !important;
  bottom: auto !important;
  z-index: 80 !important;
}

/* Jenny v2 — dark ink on gold, compact Change map, fold pane, AoE names. */
.gm2 button.gm2-gold,
.gm2 button.gm2-hub:not(.next),
.gm2 button.gm2-hub:not(.next) b,
.gm2 button.gm2-hub:not(.next) small,
.gm2 .gm2-crs button.on,
.gm2 .gm2-pill.on {
  color: #2a1a0c !important;
  -webkit-text-fill-color: #2a1a0c;
}
.gm2-mapbtn, .gm2-notesbtn {
  min-height: 44px; height: 44px; padding: 0 10px; border-radius: 999px; flex: none;
  border: 1px solid #e8c36a; background: transparent !important;
  color: #f0d59a !important; -webkit-text-fill-color: #f0d59a;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-weight: 700; font-size: 13px;
}
.gm2-mapbtn svg, .gm2-notesbtn svg { width: 16px; height: 16px; display: block; flex: none; }
.gm2-hostbtn {
  min-height: 44px; height: 44px; padding: 0 12px; border-radius: 999px; flex: none;
  border: 1px solid #e8c36a !important; background: #141417 !important;
  color: #f0d59a !important; -webkit-text-fill-color: #f0d59a;
  box-shadow: none !important;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font-weight: 700; font-size: 13px; letter-spacing: 0; text-transform: none;
}
.gm2-hostbtn.live { background: #e8c36a !important; color: #2a1a0c !important; -webkit-text-fill-color: #2a1a0c; border-color: #e8c36a !important; }
.gm2-host-narrow { display: none; }
@media (max-width: 480px) {
  .gm2-top { gap: 4px; padding: 0 4px; }
  .gm2-title b { font-size: 20px; }
  .gm2-mapbtn { padding: 0 8px; font-size: 12px; }
  .gm2-mapbtn span { letter-spacing: 0; }
  .gm2-hostbtn { padding: 0 10px; }
  .gm2-stage .gm2-host-wide, .gm2-top .gm2-host-wide { display: none; }
  .gm2-stage .gm2-host-narrow, .gm2-top .gm2-host-narrow { display: inline; }
}
/* (4 Nov) Tom: on small screens Host moves into the ⋮ menu so the game title isn't squashed by + New encounter
   (344: title was 38 px, "Bat…", round line on 4 lines). The menu's Host item is hidden above this width. */
.gm2-menu > button.gm2-mitem.gm2-mhost,
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-menu > button.gm2-mitem.gm2-mhost { display: none !important; }
@media (max-width: 600px) {
  .gm2-top .gm2-hostbtn { display: none !important; }
  .gm2-menu > button.gm2-mitem.gm2-mhost,
  html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-menu > button.gm2-mitem.gm2-mhost { display: flex !important; }
}
.gm2-fightline { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gm-faint); font-size: 12px; }
.gm2-partybtn { gap: 8px; text-align: left; }
.gm2-partybtn .grow { flex: 1; min-width: 0; text-align: left; }
.gm2-partybtn .grow b, .gm2-partybtn .grow small { display: block; }
.gm2-partybtn .grow small { color: var(--gm-faint); font-size: 12px; }
.gm2-toggle {
  min-width: 52px; min-height: 36px; padding: 6px 10px; border-radius: 12px;
  border: 1px solid var(--gm-line); background: #161619; color: var(--gm-soft);
  font-style: normal; text-align: center;
}
.gm2-partybtn.on .gm2-toggle { background: var(--gm-hub); color: #2a1a0c; border-color: #f3e2b0; -webkit-text-fill-color: #2a1a0c; }
.gm2-their {
  flex: none; border-radius: 999px; border: 1px solid #e07a6a; color: #ffc2b3;
  background: #2a1210; padding: 4px 8px; font-size: 12px; white-space: nowrap;
}
.gm2-lasthit {
  border-radius: 999px; border: 1px solid var(--gm-gold); background: #141417; color: var(--gm-gold);
  min-height: 44px; padding: 0 12px; font-weight: 700;
}
.gm2-mapgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gm2-mtile {
  position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: var(--gm-card); border: 1px solid var(--gm-line); border-radius: 14px; padding: 6px; color: var(--gm-ink);
  min-height: 96px;
}
.gm2-mtile.on { border-color: var(--gm-gold); }
.gm2-mtile .gm2-thumb { height: 72px; }
.gm2-mtile .gm2-badge { position: absolute; top: 12px; left: 12px; float: none; background: #141417; }
.gm2-time, .gm2-vol input[type="range"] {
  -webkit-appearance: none; appearance: none; background: transparent; height: 44px;
}
.gm2-time::-webkit-slider-runnable-track, .gm2-vol input[type="range"]::-webkit-slider-runnable-track {
  height: 10px; border-radius: 8px;
  background: linear-gradient(90deg, #f6c98a, #ffe7b0 30%, #e7a15a 55%, #5a4578 78%, #1a2348);
}
.gm2-vol input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #1a1a1d, #e8c36a); /* was #3a2a1c brown (1 Nov) */
}
.gm2-time::-webkit-slider-thumb, .gm2-vol input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f8e7b8, #e0b45a 55%, #b4863a);
  border: 2px solid #f3e2b0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.gm2-time::-moz-range-thumb, .gm2-vol input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #f3e2b0;
  background: radial-gradient(circle at 35% 30%, #f8e7b8, #e0b45a 55%, #b4863a);
}
.gm2-side.open.results {
  display: flex; flex-direction: column; overflow: hidden;
}
.gm2-side.open.results .gm2-sheet.dock {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
.gm2-side.open.results .gm2-sheet-body { flex: 1; overflow: auto; min-height: 0; }
.gm2-save { display: inline-flex; align-items: center; gap: 3px; color: var(--gm-gold); font-size: 12px; }
.gm2-save i { font-style: normal; color: var(--gm-faint); font-size: 10px; }
@media (max-width: 999px) and (orientation: portrait), (max-width: 759px), (max-width: 999px) and (max-height: 479px) {
  .gm2-side.open.results { top: auto; max-height: 48vh; }
}
@media (min-width: 720px) and (max-width: 1279px) and (orientation: portrait) {
  .gm2-side.open.card.tall,
  .gm2-side.open.encounter.tall,
  .gm2-side.open.env.tall,
  .gm2-side.open.results.tall {
    position: relative; top: auto; right: auto; bottom: auto; left: auto;
    width: min(340px, 42vw); max-height: none; height: 100%;
    flex: none; display: flex; flex-direction: column;
    background: #161619; border-left: 1px solid var(--gm-line);
    z-index: 8; overflow: hidden;
  }
  .gm2-side.open.card.tall .gm2-sheet.dock,
  .gm2-side.open.encounter.tall .gm2-sheet.dock,
  .gm2-side.open.env.tall .gm2-sheet.dock,
  .gm2-side.open.results.tall .gm2-sheet.dock {
    position: relative; border-radius: 0; box-shadow: none; border: 0;
    height: 100%; max-height: none; overflow: auto;
  }
  .gm2-float { display: flex; }
}

/* Jenny v3 — readable Next turn, confirm before a map leaves, area chip, corner skull. */
.gm2 button.gm2-hub.next,
.gm2 button.gm2-hub.next b,
.gm2 button.gm2-hub.next small {
  color: #2a1a0c !important;
  -webkit-text-fill-color: #2a1a0c;
}
.gm2-stage.is-nomap .gm2-float,
.gm2-stage.is-nomap .gm2-wheel,
.gm2-stage.is-nomap .dm-map-scroll { display: none; }
.gm2-nomap { position: relative; z-index: 2; min-height: 0; }
.gm2-confirm {
  position: fixed; z-index: 40; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 32px));
  background: #141417; color: var(--gm-ink);
  border: 1px solid var(--gm-gold); border-radius: 18px; padding: 16px 16px 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62);
}
.gm2-confirm::before {
  content: ""; position: fixed; inset: 0; background: rgba(5,5,6, 0.55); z-index: -1;
}
.gm2-confirm h2 { margin: 0 0 8px; color: var(--gm-gold); font-size: 28px; }
.gm2-confirm p { margin: 0; color: var(--gm-soft); }
.gm2-confirm .gm2-actions button { min-height: 44px; }
.gm2-aoechip.dock {
  z-index: 9; top: auto; bottom: calc(48vh + 16px); left: 12px; transform: none;
}
@media (min-width: 720px) {
  .gm2-aoechip.dock { left: 50%; top: 88px; bottom: auto; transform: translateX(-50%); }
}
@media (min-width: 1000px), (orientation: landscape) and (min-width: 760px) and (min-height: 480px) {
  .gm2-aoechip.dock { top: 16px; }
}
.gm2 .map-token.dead { filter: none; }
.gm2 .ht-dead .ht-x { display: none; }
.gm2 .map-token.dead::after {
  content: "\2620";
  position: absolute; right: -1px; bottom: -1px; z-index: 4;
  width: 18px; height: 18px; border-radius: 50%;
  background: #f4efe4; color: #2a1a0c; border: 1px solid #19191d;
  font-size: 11px; line-height: 16px; text-align: center;
  pointer-events: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Jenny v4 — too-far bar, 44px targets, fold column, spell results. */
.gm2 .gm2-steps > button,
.gm2 .gm2-menu button,
.gm2 .gm2-menu button.gm2-legal {
  min-height: 44px;
  min-width: 44px;
}
.gm2-slide input.gm2-num {
  min-height: 44px;
  min-width: 72px;
  flex: 0 0 88px;
  border-radius: 12px;
  border: 1px solid var(--gm-line);
  background: #0d0d0f;
  color: var(--gm-ink);
  text-align: center;
  font-size: 18px;
}
.gm2-hpface, .gm2-hpset { min-height: 44px; }
.gm2-their {
  flex: none;
  align-self: center;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: #6a2420;
  color: #ffe8e0;
  border-color: #ffb0a4;
}
.gm2-snapbar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  bottom: auto;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 24px);
  background: #2a1210;
  border: 1px solid #e23b2f;
  border-radius: 14px;
  padding: 6px 8px;
  color: #ffe8e0;
  pointer-events: auto;
}
.gm2-snapbar .gm2-chip {
  position: static;
  transform: none;
  flex: none;
}
.gm2-snapbar button { min-height: 44px; min-width: 72px; }
.gm2-resultbar {
  display: block;
  height: 8px;
  margin: 4px 0;
  border-radius: 4px;
  background: #2b2b31;
  overflow: hidden;
}
.gm2-resultbar i { display: block; height: 100%; background: linear-gradient(90deg, #8f2a22, #e7b15a); }
.gm2-resultbar.low i { background: #c4473a; }
.gm2-dmgtag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: #e23b2f;
  color: #fff8ee;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  pointer-events: none;
  white-space: nowrap;
}
.gm2-nothumb {
  background:
    linear-gradient(135deg, transparent 46%, #e23b2f 46%, #e23b2f 54%, transparent 54%),
    radial-gradient(circle at 50% 42%, #f3e6c8, #c4a36a 70%, #5d5d67);
  border: 2px solid #e8c36a;
}
.gm2-nrow .who small, .gm2-irow .who small { display: block; font-size: 12px; line-height: 1.25; }
.gm2-nrow .who small { color: #5c4328; }
.gm2 button.gm2-hub.next {
  background: radial-gradient(circle at 40% 35%, #f0cf86, #e9c06a 45%, #b4863a) !important; /* primary gold (QA 1 Nov) */
}
.gm2-intensity {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 44px;
}
.gm2-intensity::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, #1a1a1d, #c9993f 55%, #f0cf86); /* dark to gold, was brown to orange (1 Nov, Tom: dark + gold only) */
}
/* the sliders' thumbs end in deep gold #b4863a, were #8a5a22 brown (1 Nov) */
.gm2-intensity::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f8e7b8, #e0b45a 55%, #b4863a);
  border: 2px solid #f3e2b0;
}
.gm2-intensity::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #f3e2b0;
  background: radial-gradient(circle at 35% 30%, #f8e7b8, #e0b45a 55%, #b4863a);
}
@media (min-width: 720px) and (max-width: 1279px) and (orientation: portrait) {
  .gm2-body { display: flex; flex-direction: row; align-items: stretch; }
  .gm2-rail { display: none !important; }
  .gm2-float { display: flex !important; }
  .gm2-stage { flex: 1 1 auto; min-width: 0; }
  .gm2-side.open.card.tall,
  .gm2-side.open.encounter.tall,
  .gm2-side.open.env.tall,
  .gm2-side.open.results.tall {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 340px !important;
    max-width: 42vw;
    height: 100% !important;
    max-height: none !important;
    flex: 0 0 340px !important;
    display: flex !important;
    z-index: 14;
    overflow: hidden;
  }
  .gm2-side.open.card.tall .gm2-sheet.dock,
  .gm2-side.open.encounter.tall .gm2-sheet.dock,
  .gm2-side.open.env.tall .gm2-sheet.dock,
  .gm2-side.open.results.tall .gm2-sheet.dock {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100%;
    height: 100%;
    max-height: none !important;
    border-radius: 0;
    box-shadow: none;
  }
}
/* Change map keeps Upload and From Map builder on the first screen. */
.gm2-side.open.map { overflow: hidden; display: flex; flex-direction: column; }
.gm2-side.open.map .gm2-sheet.dock {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gm2-mapscroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.gm2-mapfoot {
  flex: none;
  margin: 0;
  padding: 10px 0 4px;
  background: #141417;
}
.gm2-dcpill {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--gm-gold);
  background: #1e1e22;
  color: var(--gm-gold);
  font-weight: 800;
  font-size: 14px;
}
.gm2-savesum {
  margin: 4px 0 8px;
  color: var(--gm-soft);
  font-size: 14px;
}
.gm2 .mi-rh {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 0 2px 12px;
}
.gm2 .mi-rh b { display: block; margin: 0 0 4px; color: var(--gm-gold); }
.gm2 .mi-rh em, .gm2 .mi-rh span { display: block; line-height: 1.45; }
.gm2 .mi-rh em { margin-top: 4px; color: var(--gm-soft); }
.gm2 .gm2-menu button.gm2-legal { min-height: 44px; }
.gm2-abils button { min-height: 44px; }
.gm2-mapfoot button { min-height: 44px; }
.gm2-thumb.gm2-mind {
  background:
    linear-gradient(#1f1f23, #1f1f23) 50% 58% / 54% 2px no-repeat,
    linear-gradient(#1f1f23, #1f1f23) 50% 70% / 54% 2px no-repeat,
    linear-gradient(#1f1f23, #1f1f23) 50% 82% / 36% 2px no-repeat,
    radial-gradient(circle at 50% 36%, #f7efe0, #e4c98a 72%);
  border: 2px solid #5d5d67;
}
@media (min-width: 720px) {
  .gm2-game { width: min(460px, calc(100vw - 64px)); }
}
@media (max-width: 719px) {
  #gm2Mons { max-height: none; overflow: visible; } /* the list rides the sheet, not a 220px box */
  .gm2-side.open.encounter {
    top: 58px;
    bottom: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .gm2-side.open.encounter .gm2-sheet.dock {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }
  .gm2-side.open.encounter .gm2-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-bottom: 28px;
  }
}

/* Jenny v6 — fold column with nothing selected, compact move toast, 44px tiles. */
.gm2-split, .gm2-split-row { display: contents; }
.gm2-body.is-fold .gm2-split {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0;
}
.gm2-body.is-fold .gm2-split-row {
  display: flex; flex-direction: row; flex: 1 1 auto; min-width: 0; min-height: 0;
}
.gm2-body.is-fold .gm2-foldbar {
  display: block; flex: none; width: 100%; overflow: hidden; z-index: 5;
  background: linear-gradient(180deg, rgba(14,14,16, 0.92), rgba(14,14,16, 0.72));
}
.gm2-foldbar .gm2-initstrip { width: 100%; overflow: hidden; flex-wrap: nowrap; }
.gm2-foldbar .gm2-scard { flex: 1 1 0; width: auto; min-width: 0; max-width: 76px; }
.gm2-body.is-fold .gm2-float { display: none !important; }
@media (min-width: 720px) and (max-width: 1279px) and (orientation: portrait) {
  .gm2-float { display: none !important; }
  .gm2-side.open.fold {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 340px !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    flex: 0 0 340px !important;
    display: flex !important;
    flex-direction: column;
    z-index: 4;
    overflow: hidden;
    background: #161619;
    border-left: 1px solid var(--gm-line);
    padding: 0 !important;
  }
  .gm2-side.open.fold .gm2-sheet.dock {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100%;
    height: 100%;
    max-height: none !important;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    padding: 8px 8px 16px;
    overflow: auto;
  }
  .gm2-side.open.fold .gm2-card { padding: 8px; }
}
/* 8 Nov (Tom): the monster list and the CR chips share the Encounter drawer.
   The list used to be a 220px box (and overflow:visible under 720px) inside a sheet that also scrolled,
   so a flick moved nothing. One scroller — the sheet body — reaches every row. The header stays put.
   The CR row pans sideways on its own. Buttons in the sheet are pan-y, which ate that flick; these chips allow pan-x too.
   The map picker's chips (.gmp-cats) are not this row. */
.gm2-side.open.encounter .gm2-sheet-body {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}
#gm2Mons { touch-action: pan-y; }
.gm2-side.open.encounter.fold .gm2-sheet.dock { overflow: hidden; }
.gm2-side.open.encounter .gm2-crscroll {
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.gm2-side.open.encounter .gm2-sheet.dock .gm2-crscroll button {
  /* HearthPop sets every phone pop-up button to pan-y. That ate the sideways flick on the chips. */
  touch-action: pan-x pan-y !important;
}
.gm2 .gm2-menu button.gm2-legal {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  min-height: 44px !important;
  min-width: 44px !important;
  box-sizing: border-box;
}
.gm2-abils button { min-width: 44px; min-height: 44px; box-sizing: border-box; }

/* ---------- Jenny's frames, 24 Oct: the play wheel, measured off the 390 and 1440 frames ----------
   Hub 100px (a 3px ember ring on burnt orange, light ink), 62px above the bottom edge; petals 57px. On a phone
   or a portrait fold the petals sit on a 141px arc centred 38px below the hub; from 1000px wide on a 124px arc
   round the hub (gm-v2.js sends both sets of places as --px/--py and --dx/--dy). A dark bed with a faint brass
   track sits behind them. */
.gm2 .gm2-wheel.gm2-playwheel { left: 50%; right: auto; bottom: 0; width: 384px; height: 240px; transform: translateX(-50%); }
.gm2 .gm2-playwheel .gm2-bed {
  position: absolute; left: 20px; top: 44px; width: 344px; height: 344px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(12,12,14, 0.88) 0 54%, rgba(12,12,14, 0.62) 66%, rgba(12,12,14, 0) 71%);
}
.gm2 .gm2-playwheel .gm2-bed::after {
  content: ""; position: absolute; inset: 31px; border-radius: 50%; border: 1px solid rgba(232, 195, 106, 0.32);
}
.gm2 .gm2-playwheel .gm2-petal {
  left: var(--px); top: var(--py); width: 57px; height: 57px; min-width: 0; min-height: 0; padding: 0; gap: 3px;
  border: 1.5px solid #d9b25c; box-sizing: border-box;
  background: radial-gradient(circle at 42% 32%, #35353b, #141416 70%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.gm2 .gm2-playwheel .gm2-petal svg { width: 19px; height: 19px; color: #e8c36a; }
.gm2 .gm2-playwheel .gm2-petal span {
  font: 500 11.5px/1.1 Inter, Roboto, "Segoe UI", system-ui, sans-serif; letter-spacing: -0.01em; color: #f3e6c8; text-shadow: none;
}
.gm2 .gm2-playwheel .gm2-petal.on { box-shadow: 0 0 0 3px #f3e2b0, 0 4px 12px rgba(0, 0, 0, 0.5); }
.gm2 .gm2-playwheel .gm2-key { top: -6px; right: -6px; min-width: 18px; height: 17px; font-size: 11px; line-height: 15px; z-index: 3; }
.gm2 .gm2-playwheel button.gm2-hub { width: 100px; height: 100px; gap: 1px; border: 3px solid #e9bd62; box-shadow: 0 0 0 2px #17171a, 0 10px 24px rgba(0, 0, 0, 0.55); }
.gm2 .gm2-playwheel button.gm2-hub svg { width: 20px; height: 20px; margin-bottom: 2px; }
.gm2 .gm2-playwheel button.gm2-hub b { font-size: 20px; line-height: 1; }
.gm2 .gm2-playwheel button.gm2-hub small { font: 700 12px/1.15 Inter, Roboto, "Segoe UI", system-ui, sans-serif; max-width: 90px; letter-spacing: -0.01em; }
/* Next turn is the app's primary gold button with dark ink, like Start combat (was orange-red, QA 1 Nov) */
.gm2 .gm2-playwheel button.gm2-hub.next {
  background: radial-gradient(circle at 42% 36%, #f0cf86, #e9c06a 45%, #b4863a) !important;
}
.gm2 .gm2-playwheel button.gm2-hub.next,
.gm2 .gm2-playwheel button.gm2-hub.next b,
.gm2 .gm2-playwheel button.gm2-hub.next small,
.gm2 .gm2-playwheel button.gm2-hub.next svg {
  color: #1a1007 !important; -webkit-text-fill-color: #1a1007;
}
@media (min-width: 1000px), (orientation: landscape) and (min-width: 760px) and (min-height: 480px) {
  .gm2 .gm2-playwheel .gm2-petal { left: var(--dx); top: var(--dy); }
  .gm2 .gm2-playwheel .gm2-bed { left: 36px; top: 22px; width: 312px; height: 312px; }
  .gm2 .gm2-playwheel .gm2-bed::after { inset: 32px; }
}

/* Jenny's 1440 frame: the initiative rail. 208px wide, "Round 2" with the N key, rows of initiative, portrait,
   name over an HP bar and HP on the right. */
@media (min-width: 1000px), (orientation: landscape) and (min-width: 760px) and (min-height: 480px) { .gm2 .gm2-rail { width: 208px; } }
.gm2 .gm2-rail-h { justify-content: space-between; padding: 14px 12px 8px 16px; border-bottom: 1px solid rgba(232, 195, 106, 0.18); }
.gm2 .gm2-rail-round { font: 700 22px/1.1 "Cormorant Garamond", Georgia, serif; color: var(--gm-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm2 .gm2-rail-next { font: 500 12px/1 Inter, Roboto, system-ui, sans-serif; color: var(--gm-soft); white-space: nowrap; }
.gm2 .gm2-rail-next kbd { border: 1px solid var(--gm-gold); border-radius: 4px; padding: 1px 4px; color: var(--gm-gold); font: inherit; font-weight: 700; }
.gm2 .gm2-rail-list { padding: 6px 6px 12px; }
.gm2 .gm2-rail .gm2-irow {
  grid-template-columns: 26px 36px minmax(0, 1fr) auto; gap: 8px; min-height: 52px; padding: 6px 8px 6px 2px;
  border-radius: 12px; margin-bottom: 2px;
}
.gm2 .gm2-rail .gm2-irow.on { border: 1.5px solid #e8c36a; background: #1f1f24; }
.gm2 .gm2-rail .gm2-irow .ini { font: 700 18px/1 "Cormorant Garamond", Georgia, serif; }
.gm2 .gm2-rail .gm2-irow .gm2-face { width: 36px; height: 36px; border-width: 2px; }
.gm2 .gm2-rail .gm2-irow .who b { font: 700 17px/1.1 "Cormorant Garamond", Georgia, serif; color: #f3e6c8; }
.gm2 .gm2-rail .gm2-irow .gm2-hpmini { width: 100%; max-width: 64px; height: 5px; margin-top: 5px; }
.gm2 .gm2-rail .gm2-irow .hpn { font: 500 12.5px/1 Inter, Roboto, system-ui, sans-serif; color: var(--gm-soft); white-space: nowrap; }

/* ---------- AoE (Jenny's AoE frames): the map tools' dial, the damage-type ring and the area panel ----------
   The fan, handles, labels and creature rings are dm/mi.css (scoped to .gm2 as well as the old screen); these are
   the colours it reads, the ring round it, and the panel. */
.gm2 {
  --c2-brass: linear-gradient(180deg, #f6e2a8 0%, #e8c36a 45%, #b4863a 100%);
  --c2-on-gold: #2a1a0c;
  --c2-rim: rgba(93,93,103, 0.45);
  --c2-surface: #18181c;
}
.gm2 .mi-aftogs { top: 12px; right: 12px !important; bottom: auto !important; }
.gm2 .mi-aftogs [data-c2-fly] { display: none; }
.gm2-stage .gm2-dring { position: absolute; right: 0; bottom: 0; z-index: 31; width: var(--afS); height: var(--afS); pointer-events: none; }
.gm2-dring svg { position: absolute; right: 0; bottom: 0; overflow: visible; pointer-events: none; }
.gm2-dring .seg { fill: none; stroke-width: 18; opacity: 0.9; }
.gm2-dring .seg.on { stroke-width: 26; opacity: 1; filter: drop-shadow(0 0 5px rgba(255, 244, 226, 0.55)); }
.gm2-dring .hit { fill: none; stroke: transparent; stroke-width: 44; pointer-events: stroke; cursor: pointer; }
.gm2-dring .hit:focus-visible { stroke: rgba(255, 244, 226, 0.3); outline: none; }
.gm2-dchip-now {
  position: absolute; pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; border: 1.5px solid #d06a30; background: #141416; color: var(--gm-ink); white-space: nowrap;
  font: 600 14px/1 Inter, Roboto, system-ui, sans-serif; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.gm2-dchip-now i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.gm2-dchip-now small { color: var(--gm-soft); font-weight: 500; font-size: 13px; }
.gm2-tplpanel {
  position: absolute; left: 16px; bottom: 52px; z-index: 30; width: min(520px, calc(100% - 330px)); min-width: 340px; box-sizing: border-box;
  background: #141416; border: 1.5px solid #b8562a; border-radius: 18px; padding: 14px 16px 10px; color: var(--gm-ink);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
.gm2-tplpanel.shared { border-color: #d06a30; }
.gm2-tplhead { display: flex; align-items: center; gap: 12px; }
.gm2-tplhead .grow { flex: 1; min-width: 0; }
.gm2-tplhead h2 { margin: 0; font: 700 24px/1.1 "Cormorant Garamond", Georgia, serif; color: var(--gm-gold); }
.gm2-tplhead small { display: block; color: var(--gm-soft); font-size: 13px; margin-top: 2px; }
.gm2-tplico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; color: var(--dmg); }
.gm2-tplico svg { width: 28px; height: 28px; }
.gm2-tplico svg * { stroke: var(--dmg) !important; }
.gm2-dmgfield { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--gm-soft); font-size: 13px; white-space: nowrap; position: relative; }
.gm2-dmgfield input {
  width: 84px; min-width: 72px; min-height: 44px; padding: 0 8px; border-radius: 12px;
  border: 1px solid var(--gm-line); background: #0d0d0f; color: var(--gm-ink); text-align: center; font-size: 16px;
}
.gm2-dcchip {
  min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1.5px solid #e05a3a; background: #19191d; color: #ffd6c6;
  font: 600 14px/1 Inter, Roboto, system-ui, sans-serif; white-space: nowrap;
}
.gm2-dcchip.on { background: #232327; }
.gm2-tpledit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.gm2-tpledit label { display: inline-flex; align-items: center; gap: 6px; color: var(--gm-soft); font-size: 13px; }
.gm2-abl { display: flex; gap: 4px; }
.gm2-abl button { min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid var(--gm-line); background: #18181c; color: var(--gm-ink); font-size: 12px; }
.gm2-abl button.on { border-color: var(--gm-gold); background: #2a2a2e; /* was #3a2a1a (31 Oct) */ color: var(--gm-gold); }
.gm2-tpledit .gm2-num { width: 64px; min-height: 44px; }
.gm2-tpledit .gm2-dice { width: 84px; }
.gm2-caughtlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.gm2-caught { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 10px; border: 1px solid var(--gm-line); border-radius: 12px; background: #18181c; }
.gm2-caught .gm2-face { width: 32px; height: 32px; flex: none; border-color: #e9bd62; box-shadow: 0 0 0 2px rgba(233,189,98, 0.35); }
.gm2-caught > span { min-width: 0; display: flex; flex-direction: column; }
.gm2-caught b { font: 700 17px/1.1 "Cormorant Garamond", Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm2-caught small { color: var(--gm-soft); font-size: 12px; }
.gm2-caught .tag { font-size: 12px; font-weight: 600; margin-top: 2px; }
.gm2-caught .tag.save { color: var(--gm-ok); }
.gm2-caught .tag.fail { color: var(--gm-danger); }
.gm2-tplacts { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: stretch; }
.gm2-tplacts button { min-height: 56px; border-radius: 14px; padding: 0 14px; font: 600 16px/1.1 "Cormorant Garamond", Georgia, serif; }
.gm2-tplacts button svg { width: 18px; height: 18px; vertical-align: -3px; }
.gm2-tplacts button:disabled { opacity: 0.45; }
.gm2 .gm2-tplacts .gm2-apply { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(180deg, #d9622e, #a83f17) !important; border: 1px solid #e9bd62; }
.gm2 .gm2-tplacts .gm2-apply, .gm2 .gm2-tplacts .gm2-apply b, .gm2 .gm2-tplacts .gm2-apply small { color: #fff4e2 !important; -webkit-text-fill-color: #fff4e2; }
.gm2-tplacts .gm2-apply b { font-size: 18px; }
.gm2-tplacts .gm2-apply small { font: 500 12px/1 Inter, Roboto, system-ui, sans-serif; }
.gm2-tplroll { align-self: center; color: var(--gm-soft); font-size: 14px; }
.gm2-tplroll b { color: var(--gm-gold); }
.gm2-tplfoot { margin: 8px 0 0; text-align: center; color: var(--gm-faint); font-size: 12.5px; }
.gm2-tplbanner {
  /* (6 Nov) only in shape mode, as a slim strip at the bottom of the map: at the top it could cover the area's ✥ / ⟳ handles */
  position: absolute; left: 12px; right: auto; bottom: 12px; max-width: calc(100% - 180px); z-index: 33; display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 10px; border-radius: 14px; border: 1px solid var(--gm-line); background: rgba(14,14,16, 0.92); color: var(--gm-ink); font-size: 13px;
  pointer-events: none;
}
.gm2-tplbanner > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm2-tplbanner button { pointer-events: auto; }
/* Tick and X while an area is still a preview. Wide: a pair at the bottom-left, clear of the dial.
   Narrow: they sit in the existing bottom strip, which does not cover the map. */
.gm2-aoeplace {
  position: absolute;
  z-index: 36;
  left: 12px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.gm2-aoeplace .gm2-iconbtn {
  width: 44px;
  height: 44px;
  flex: none;
  font: 700 22px/1 "Cormorant Garamond", Georgia, serif;
}
.gm2 .gm2-aoeplace .gm2-aoeok {
  background: linear-gradient(#f6e2a8, #e0b45a 55%, #b07f34);
  color: var(--gm-hub-ink);
  -webkit-text-fill-color: var(--gm-hub-ink);
  border-color: #f3e2b0;
}
.gm2-aoeplace.is-narrow {
  max-width: calc(100% - 24px);
  padding: 4px 6px 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--gm-line);
  background: rgba(14, 14, 16, 0.92);
  color: var(--gm-ink);
}
.gm2-aoeplace.is-narrow > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm2-aoeplace.is-narrow > span b { color: var(--gm-gold); }
.gm2-aoeplace.is-narrow .gm2-bantype { flex: none; min-height: 44px; }
.gm2-stage.tpl-on:not(.tpl-sel) .mi-hint-aoe { display: none; }
.gm2-dialbtn { margin-left: auto; min-height: 44px; }
.gm2-tplbanner > svg { width: 22px; height: 22px; flex: none; color: var(--gm-gold); }
.gm2-tplbanner b { color: var(--gm-gold); }
.gm2-tplbanner span { flex: 1; min-width: 0; }
.gm2-tplbanner button { flex: none; min-height: 44px; }
@media (min-width: 1000px), (orientation: landscape) and (min-width: 760px) and (min-height: 480px) { .gm2-tplbanner { display: none; } }
@media (max-width: 999px) and (orientation: portrait), (max-width: 759px), (max-width: 999px) and (max-height: 479px) {
  .gm2-tplpanel { left: 0; right: 0; bottom: 0; width: auto; min-width: 0; max-height: 64vh; overflow: auto; border-radius: 22px 22px 0 0; border-bottom: 0; }
  /* (6 Nov) room under the map while the sheet is open, so the map can scroll clear of it and every handle of the area can be grabbed */
  .gm2-stage.tpl-sel:not(.tpl-dial) #dmMapScroll { padding-bottom: 44vh; }
  .gm2-tplacts { grid-template-columns: auto 1fr 1.25fr; }
  .gm2-stage.tpl-sel:not(.tpl-dial) .mi-afan,
  .gm2-stage.tpl-sel:not(.tpl-dial) .gm2-dring,
  .gm2-stage.tpl-sel:not(.tpl-dial) .mi-hint-aoe { display: none; }
  .gm2-stage.tpl-dial .gm2-tplpanel { display: none; }
}
.gm2-stage.tpl-on .gm2-keys { display: none; }
/* the map tools' icons (pin, palette, trash) take the label's size, as on the old screen */
.gm2 svg.hi { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; color: var(--gm-gold); }
.gm2 .mi-pill.on svg.hi, .gm2 .mi-achip svg.hi { color: currentColor; }
/* 44 px to tap: the template handles keep their look and get a wider reach; the fan's undo and delete are 44 px */
.gm2 .mi-hdl::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.gm2 .mi-hdl { overflow: visible; }
.gm2 .mi-afan .mi-pill { min-height: 44px !important; }
/* phone: the ring's chip and the Snap / Show players pills sit at the left edge, above the dial */
/* phones: the damage chip and the Snap / Show players pills are docked to the dial by gm-v2.js dockRingChip() */
@media (max-width: 899px) { .gm2 .mi-aftogs, .gm2 .mi-aftogs.left { flex-direction: row; } }

/* ---------- Jenny's frame: the stat card ---------- */
.gm2 .gm2-cardhead { align-items: center; gap: 12px; }
.gm2 .gm2-cardhead .gm2-face { width: 52px; height: 52px; }
.gm2 .gm2-cardhead h2 { font: 700 28px/1.05 "Cormorant Garamond", Georgia, serif; color: var(--gm-gold); margin: 0; }
.gm2 .gm2-cardhead .gm2-sub { font-size: 14px; color: var(--gm-soft); }
.gm2-cardflags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gm2 .gm2-cardflags .gm2-tagged { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #e8c36a; color: #2a1a0c; font: 600 12.5px/1.2 Inter, Roboto, system-ui, sans-serif; border: 0; }
.gm2 .gm2-card .gm2-hpbar { display: grid; grid-template-columns: 52px 1fr 52px 56px; gap: 8px; align-items: stretch; margin: 12px 0 8px; }
.gm2 .gm2-hpstep { min-height: 52px; border-radius: 12px; border: 1.5px solid var(--gm-line); background: #141416; color: var(--gm-ink); font-size: 26px; line-height: 1; }
.gm2 .gm2-card .gm2-hpbar .track { position: relative; min-height: 52px; border-radius: 12px; overflow: hidden; border: 1.5px solid #e8c36a; background: #111114; }
.gm2 .gm2-card .gm2-hpface { position: absolute; inset: 0; width: 100%; min-height: 52px; border: 0; background: transparent; padding: 0; }
.gm2 .gm2-card .gm2-hpface i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #6e1e18, #c4472a 55%, #e07a4a); }
.gm2 .gm2-card .gm2-hpface b { position: relative; display: block; text-align: center; font: 700 28px/52px "Cormorant Garamond", Georgia, serif; color: #fff4e2; }
.gm2 .gm2-card .gm2-hpface b small { font: 500 14px/1 Inter, Roboto, system-ui, sans-serif; color: #f3e6c8; }
.gm2 .gm2-card .gm2-ac { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; border-radius: 12px; border: 1.5px solid var(--gm-line); background: #141416; }
.gm2 .gm2-card .gm2-ac b { font: 700 24px/1 "Cormorant Garamond", Georgia, serif; color: var(--gm-ink); }
.gm2 .gm2-card .gm2-ac small { font-size: 11px; color: var(--gm-soft); }
.gm2 .gm2-hpchips { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 6px; }
.gm2 .gm2-hpchips > button { min-height: 44px; border-radius: 10px; font: 600 15px/1 Inter, Roboto, system-ui, sans-serif; padding: 0 4px; white-space: nowrap; }
.gm2 .gm2-hpchips .gm2-lasthit { border-color: #e8c36a !important; }
.gm2 .gm2-card .gm2-abils { grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 6px; margin: 10px 0; }
.gm2 .gm2-card .gm2-abils button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 64px; border: 1.5px solid var(--gm-line); border-radius: 10px; background: #141416; }
.gm2 .gm2-card .gm2-abils small { color: var(--gm-soft); font-size: 11px; }
.gm2 .gm2-card .gm2-abils b { font: 700 20px/1 "Cormorant Garamond", Georgia, serif; color: var(--gm-ink); }
.gm2 .gm2-card .gm2-abils i { font-style: normal; font-size: 11px; color: var(--gm-faint); }
.gm2 .gm2-atks { border-top: 1px solid rgba(232, 195, 120, 0.2); margin-top: 6px; }
.gm2 .gm2-card .gm2-atk { align-items: center; }
.gm2 .gm2-card .gm2-atk b { font: 700 20px/1.1 "Cormorant Garamond", Georgia, serif; }
.gm2-atktag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; border: 1px solid #e05a3a; color: #ffb7a6; font: 600 10.5px/1.5 Inter, Roboto, system-ui, sans-serif; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 3px; }
.gm2 .gm2-card .gm2-meta { color: var(--gm-soft); font-size: 14px; }
.gm2 .gm2-card .gm2-atk .gm2-quiet { min-height: 44px; min-width: 72px; border-color: #e8c36a; color: var(--gm-gold); font: 700 17px/1 "Cormorant Garamond", Georgia, serif; }
.gm2-traits { margin: 10px 0; color: var(--gm-ink); font-size: 14px; line-height: 1.45; }
.gm2-traits b { color: var(--gm-ink); }
.gm2 .gm2-condsec { font: 700 20px/1.2 "Cormorant Garamond", Georgia, serif; color: var(--gm-gold); text-transform: none; letter-spacing: 0; margin: 12px 0 8px; }
.gm2 .gm2-condsec small { font: 500 13px/1 Inter, Roboto, system-ui, sans-serif; color: var(--gm-soft); margin-left: 6px; }
.gm2 .gm2-card .gm2-condgrid button { min-height: 44px; border-radius: 999px; padding: 0 14px; }
/* the drawer itself is flat and full height on a wide screen (Esc or Back closes it, so no Done there) */
@media (min-width: 1000px), (orientation: landscape) and (min-width: 760px) and (min-height: 480px) {
  .gm2 .gm2-side.open.card .gm2-sheet.dock { border-radius: 0; border: 0; box-shadow: none; background: #161619; padding: 14px 18px 18px; }
  .gm2 .gm2-side.open.card .gm2-grab, .gm2 .gm2-cardhead .gm2-done { display: none; }
}
.gm2 .gm2-side.open.card .gm2-card { border: 0; background: none; padding: 0; box-shadow: none; }
.gm2 .gm2-cardhead h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm2 .gm2-hpchips { grid-template-columns: 1fr 1fr 1.6fr 1fr 1fr; }
.gm2 .gm2-hpchips > button { font-size: 14px; }
.gm2 .gm2-card .gm2-abils button { min-height: 60px; }
.gm2 .gm2-card .gm2-abils b { font-size: 18px; }
.gm2 .gm2-card .gm2-atk b { font-size: 19px; }
.gm2 .gm2-card .gm2-condgrid button { font-size: 13.5px; padding: 0 12px; }
.gm2 .gm2-card .gm2-statline { margin: 4px 0; }
.gm2 .gm2-card .gm2-statline, .gm2 .gm2-traits { font-size: 13.5px; }
.gm2 .gm2-card .gm2-meta { font-size: 13.5px; }
@media (max-width: 999px) and (orientation: portrait), (max-width: 759px), (max-width: 999px) and (max-height: 479px) {
  .gm2 .gm2-cardhead { flex-wrap: wrap; }
  .gm2 .gm2-cardhead .grow { flex: 1 1 0; min-width: 0; }
  .gm2-cardflags { order: 3; flex: 1 0 100%; flex-direction: row; justify-content: flex-start; padding-left: 64px; }
}
/* a trail's feet chip sits over the tokens, so a big creature never hides it */
.gm2 #dmMapGrid .gm2-chip { z-index: 9; }

/* ---------- Compact AoE panel (Tom, on a Fold and a tablet: the pop-up covered the map) ----------
   Everyone the area reaches sits in one row that scrolls sideways, so the panel never grows with the count.
   Wide: a card at the bottom left of the map (or the top left when that hides less of the template, see
   placeTplPanel in gm-v2.js), clear of the dial. Narrow: a short bottom sheet, as in Jenny's phone frame. */
.gm2-tplpanel { padding: 12px 14px 10px; }
.gm2-tplhead { gap: 10px; }
.gm2-tplhead h2 { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm2-tplhead small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm2-tplico { width: 30px; height: 30px; }
.gm2-tplico svg { width: 24px; height: 24px; }
.gm2-caughtlist { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); overflow-x: auto;
  overscroll-behavior-x: contain; scrollbar-width: none; margin: 10px 0; }
.gm2-caughtlist::-webkit-scrollbar { display: none; }
.gm2-caughtlist > .gm2-sub { grid-column: 1 / -1; margin: 0; }
.gm2-caught { min-height: 48px; padding: 4px 10px 4px 6px; }
.gm2-tplacts { gap: 8px; }
.gm2-tplacts button { min-height: 48px; padding: 0 12px; }
.gm2-tplacts .gm2-apply b { font-size: 17px; white-space: nowrap; }
.gm2-tplfoot { margin-top: 6px; }
@media (min-width: 1000px), (orientation: landscape) and (min-width: 760px) and (min-height: 480px) {
  .gm2-tplpanel { left: 16px; bottom: 16px; width: min(500px, calc(100% - 300px)); min-width: 320px; }
  .gm2-tplpanel.at-top { top: 12px; bottom: auto; }
  .gm2-stage.tpl-sel .mi-hint-aoe { display: none; } /* the panel's last line says the same */
}
@media (max-width: 999px) and (orientation: portrait), (max-width: 759px), (max-width: 999px) and (max-height: 479px) {
  .gm2-tplpanel { max-height: 56vh; padding: 12px 14px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .gm2-tplacts button { font-size: 15px; }
  /* Jenny's phone frame: "Round 2 · Elowen's turn" and a two-line Change map, so the subtitle fits */
  .gm2-subline .gm2-run { display: none; }
  .gm2-subline .gm2-rest { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .gm2-subline .gm2-rest::first-letter { text-transform: uppercase; }
  .gm2-mapbtn { height: auto; min-height: 44px; padding: 4px 12px 4px 10px; gap: 6px; }
  .gm2-mapbtn span { white-space: normal; width: 4.2em; line-height: 1.05; text-align: left; }
}
/* a short screen: the banner keeps to one line and the panel drops its how-to line */
@media (max-height: 700px) {
  .gm2-tplbanner { padding: 4px 6px 4px 12px; }
  .gm2-tplbanner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gm2-tplfoot { display: none; }
}
/* (Tom and Lumi: the names were small and sat on the ring) each shape's name is inside its 56 px button */
.gm2 .mi-afan .mi-af { gap: 3px; }
.gm2 .mi-afan .mi-af span { font-size: 18px; line-height: 1; }
.gm2 .mi-afan .mi-af small { position: static; transform: none; margin: 0; font: 600 10.5px/1 Inter, Roboto, system-ui, sans-serif; letter-spacing: 0;
  color: var(--gm-soft); text-shadow: none; pointer-events: none; }
.gm2 .mi-afan .mi-af.on small { color: var(--c2-on-gold); font-weight: 700; }
@media (max-width: 999px) and (orientation: portrait), (max-width: 759px), (max-width: 999px) and (max-height: 479px) {
  .gm2-stage.tpl-on .mi-hint-aoe { display: none; } /* the banner at the top says the same, and the dial would hide it */
  /* with the sheet up, the sheet names the area and who it reaches: its label on the map would only cover a creature */
  .gm2-stage.tpl-sel:not(.tpl-dial) #dmMapGrid .mi-chip.big { display: none; }
}
/* the keyboard strip is for a laptop: on a touch-only tablet or fold it would only sit under the wheel */
@media (hover: none) and (pointer: coarse) { .gm2-keys { display: none; } }
/* An area keeps its own shape (the map tools' fill and outline), and the squares it covers are lightly shaded
   under it with a thin edge (Tom: "I like the shape of the AoE, then lightly highlight the squares it hits so
   there's no confusion"). A square is in when its centre is inside, the same test that decides who is caught
   (mi.js areaCells); the Player view shades the same squares. */
.gm2 .mi-tpl .sqs .sq { fill: color-mix(in srgb, var(--aoe-color) 13%, transparent); fill-opacity: 1;
  stroke: color-mix(in srgb, var(--aoe-color) 60%, transparent); stroke-opacity: 1; stroke-width: 1; stroke-dasharray: none; pointer-events: none; }
/* A preview has to read on a painted map, including a dark dungeon: a cream edge, a stronger wash,
   and no fade-in. Redrawing the shape used to restart that fade, so a drag never looked solid.
   It stays dashed, so it is still obviously not the placed area. */
.gm2 #miAoeG .mi-tpl.ghost { animation: none; }
.gm2 .mi-tpl.ghost > .s {
  fill: color-mix(in srgb, var(--aoe-color) 46%, transparent);
  stroke: #fff6e4;
  stroke-width: 3.4px;
  stroke-dasharray: 8 5;
  opacity: 1;
  filter: drop-shadow(0 0 1.5px #140e08) drop-shadow(0 0 7px color-mix(in srgb, var(--aoe-color) 85%, #fff));
}
.gm2 .mi-tpl.ghost .sqs .sq {
  fill: color-mix(in srgb, var(--aoe-color) 34%, transparent);
  stroke: color-mix(in srgb, #fff6e4 50%, var(--aoe-color));
  stroke-width: 1.25px;
}
.gm2 #dmMapGrid.mi-dragging .mi-hdl { animation: none; }
/* ---------- Jenny's laptop frames: the drawer tabs ("Bugbear A", "Encounter E", "Environment") ----------
   Upright on the stage's right edge, which is the drawer's left edge when it is open. */
.gm2-tabs { display: none; }
@media (min-width: 1000px), (orientation: landscape) and (min-width: 760px) and (min-height: 480px) {
  .gm2-tabs { position: absolute; right: 0; top: clamp(56px, 16%, 124px); z-index: 26; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
  .gm2-body.is-fold .gm2-tabs, .gm2-stage.tpl-on .gm2-tabs { display: none; }
  .gm2 .gm2-tab {
    pointer-events: auto; width: 44px; min-height: 96px; max-height: 190px; padding: 14px 0 10px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: 8px; overflow: hidden;
    border: 1.5px solid rgba(232, 195, 106, 0.55); border-right: 0; border-radius: 14px 0 0 14px;
    background: #141416 !important; color: var(--gm-gold) !important; -webkit-text-fill-color: var(--gm-gold);
    box-shadow: -4px 6px 16px rgba(0, 0, 0, 0.45);
  }
  .gm2 .gm2-tab span { writing-mode: vertical-rl; font: 700 17px/1 "Cormorant Garamond", Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 130px; }
  .gm2 .gm2-tab kbd { writing-mode: horizontal-tb; }
  .gm2 .gm2-tab.on { border-color: #e8c36a; background: #1e1e21 !important; color: #f6edd9 !important; -webkit-text-fill-color: #f6edd9; }
}
.gm2 .gm2-tab kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border: 1.5px solid currentColor; border-radius: 5px; font: 700 11px/1 Inter, Roboto, system-ui, sans-serif; }
/* ---------- Jenny's Environment frame (light pass; Jenny restyles) ----------
   Presets slide in one row, weather and sound are tiles with the name on the left and the level on the right
   (navy when on, as in the frame), and the volume sits beside All devices / DM only. */
.gm2-env .gm2-sheet-h { gap: 10px; }
.gm2-env .gm2-sheet-h h2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm2-env .gm2-live { flex: none; }
.gm2-env .gm2-sec small { margin-left: 8px; font: 500 12.5px/1 Inter, Roboto, system-ui, sans-serif; color: var(--gm-soft); text-transform: none; letter-spacing: 0; }
.gm2 .gm2-env .gm2-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.gm2-env .gm2-presets::-webkit-scrollbar { display: none; }
.gm2 .gm2-env .gm2-presets button { flex: none; white-space: nowrap; font: 700 16px/1 "Cormorant Garamond", Georgia, serif; padding: 0 16px; }
.gm2 .gm2-env .gm2-wxgrid, .gm2 .gm2-env .gm2-soundtiles { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.gm2 .gm2-env .gm2-wxgrid button, .gm2 .gm2-env .gm2-soundtiles button {
  min-height: 48px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 12px; border-radius: 14px; text-align: left;
}
.gm2 .gm2-env .gm2-wxgrid b { font-size: 18px; width: 20px; flex: none; text-align: center; color: var(--gm-gold); }
.gm2 .gm2-env .gm2-wxgrid span, .gm2 .gm2-env .gm2-soundtiles span { font: 700 16px/1.1 "Cormorant Garamond", Georgia, serif; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm2 .gm2-env .gm2-wxgrid small, .gm2 .gm2-env .gm2-soundtiles small { margin-left: auto; font: 600 12.5px/1 Inter, Roboto, system-ui, sans-serif; color: var(--gm-soft); }
.gm2 .gm2-env .gm2-wxgrid button.on, .gm2 .gm2-env .gm2-soundtiles button.on { background: linear-gradient(#2a2a2e, #18181b) !important; border-color: var(--gm-gold); box-shadow: inset 0 0 0 1px var(--gm-gold), 0 0 10px rgba(233,189,98,.2); /* was blue (1 Nov) */ color: #f6edd9 !important; -webkit-text-fill-color: #f6edd9; }
.gm2 .gm2-env .gm2-wxgrid button.on small, .gm2 .gm2-env .gm2-soundtiles button.on small { color: #f6edd9; }
.gm2-env .gm2-sndrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 10px; }
.gm2-env .gm2-sndrow .gm2-slide { margin: 0; }
.gm2-env .gm2-sndrow .gm2-vis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gm2 .gm2-env .gm2-sndtoggle { display: inline-grid; grid-template-columns: auto auto; gap: 0; border: 1.5px solid var(--gm-line); border-radius: 999px; overflow: hidden; }
.gm2 .gm2-env .gm2-sndtoggle button { border: 0; border-radius: 0; min-height: 44px; padding: 0 14px; white-space: nowrap; }
.gm2 .gm2-env .gm2-sndtoggle button.on { background: #e8c36a !important; color: #2a1a0c !important; -webkit-text-fill-color: #2a1a0c; }
.gm2-env .gm2-foot { font-size: 12.5px; }
.gm2 .gm2-env .gm2-sheet-h h2 { font-size: 23px; }
.gm2 .gm2-env .gm2-wxgrid, .gm2 .gm2-env .gm2-soundtiles { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.gm2-env .gm2-sndrow .gm2-slide { min-width: 0; display: flex; align-items: center; gap: 10px; }
.gm2-env .gm2-sndrow .gm2-slide input { min-width: 0; width: 100%; flex: 1; }
.gm2 .gm2-env .gm2-sndtoggle button:not(.on) { background: transparent !important; }
/* a short screen with an area already placed: the ring's "slide for more" chip would sit over the map; the ring stays */
@media (max-height: 700px) { .gm2-stage.tpl-sel .gm2-dchip-now { display: none; } }
.gm2 .gm2-env .gm2-wxgrid b, .gm2 .gm2-env .gm2-soundtiles b { width: 22px; height: 22px; flex: none; display: grid; place-items: center; color: var(--gm-gold); }
.gm2 .gm2-env .gm2-wxgrid b svg, .gm2 .gm2-env .gm2-soundtiles b svg { width: 22px; height: 22px; display: block; }
.gm2 .gm2-env button.on b { color: var(--gm-gold); } /* was pale blue (1 Nov) */

/* ---------- Tom and Lumi's AoE list ----------
   Handles: 44 px and plain to see (a press inside the selected area also moves it, see mi.js). */
.gm2 .mi-hdl { width: 44px; height: 44px; font-size: 20px; border-width: 3px; }
.gm2 .mi-hdl.sm { width: 34px; height: 34px; font-size: 15px; border-width: 2px; }
.gm2 .mi-hdl.on { box-shadow: 0 0 0 3px rgba(17,17,19, 0.55), 0 0 14px rgba(232, 195, 106, 0.65), 0 3px 8px rgba(0, 0, 0, 0.7); }
.gm2 #miAoeG .mi-tpl.sel > .s, .gm2 #miAoeG .mi-tpl.sel .sqs .sq { pointer-events: auto; touch-action: none; cursor: move; }
/* a blast flares and fades before it clears itself */
@keyframes gm2-blast { 0% { opacity: 1; filter: none; } 30% { opacity: 1; filter: brightness(1.9) drop-shadow(0 0 14px #ffb070); } 100% { opacity: 0; filter: brightness(1.2); } }
.gm2 #miAoeG .mi-tpl.blast { animation: gm2-blast 1.05s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.gm2 .he-blast { animation: gm2-blast 1.05s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .gm2 #miAoeG .mi-tpl.blast, .gm2 .he-blast { animation-duration: 0.2s; } }
/* the panel's Keep on map switch */
.gm2-tplhead { flex-wrap: wrap; }
.gm2 .gm2-keep { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px;
  border: 1.5px solid var(--gm-line); background: transparent !important; color: var(--gm-soft) !important; -webkit-text-fill-color: var(--gm-soft); font: 600 13px/1 Inter, Roboto, system-ui, sans-serif; white-space: nowrap; }
.gm2 .gm2-keep svg { width: 16px; height: 16px; }
.gm2 .gm2-keep.on { border-color: #e9bd62; background: #2a2a2e !important; color: #f0cf86 !important; -webkit-text-fill-color: #f0cf86; } /* was blue (1 Nov) */
/* everyone caught, full names; "+N more" opens the rest */
.gm2 .gm2-caughtlist { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.gm2 .gm2-caughtlist.all { max-height: 40vh; overflow-y: auto; }
.gm2 .gm2-caught { flex: 0 1 auto; min-width: 0; }
.gm2 .gm2-caught b { overflow: visible; text-overflow: clip; white-space: nowrap; }
.gm2 .gm2-caughtmore { flex: none; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px dashed var(--gm-gold); background: transparent !important;
  color: var(--gm-gold) !important; -webkit-text-fill-color: var(--gm-gold); font: 700 14px/1 Inter, Roboto, system-ui, sans-serif; }
/* after a blast clears: what it did, with Undo */
.gm2-undotoast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 100000; display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 24px); padding: 6px 6px 6px 16px; border-radius: 999px; border: 1.5px solid #d06a30; background: #141416; color: var(--gm-ink);
  font: 500 14px/1.2 Inter, Roboto, system-ui, sans-serif; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); }
.gm2-undotoast b { color: #e8c36a; }
.gm2-undotoast span { color: #f3e6c8; }
.gm2-undotoast button { min-height: 44px; border-radius: 999px; padding: 0 16px; border: 1.5px solid #e8c36a; background: transparent; color: #e8c36a; font: 600 14px/1 Inter, Roboto, system-ui, sans-serif; cursor: pointer; }
/* the damage chip docked to the dial */
.gm2 .gm2-dchip-now.beside, .gm2 .gm2-dchip-now.above { position: absolute; }
/* Tom and Lumi: the damage chip never floats over the map. Wide, with no area yet: docked on the bottom edge beside
   the ring (the help line moves to the top). Once an area is placed its type is in the panel's title and the chip
   goes. Phones: the type is a button in the banner at the top. */
.gm2-stage.tpl-sel .gm2-dchip-now { display: none !important; }
@media (min-width: 1000px), (orientation: landscape) and (min-width: 760px) and (min-height: 480px) {
  .gm2 .mi-hint-aoe { top: 12px; bottom: auto; }
}
@media (max-width: 999px) and (orientation: portrait), (max-width: 759px), (max-width: 999px) and (max-height: 479px) {
  .gm2 .gm2-dchip-now { display: none !important; }
}
.gm2 .gm2-bantype { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px;
  border: 1.5px solid #d06a30; background: #141416 !important; color: var(--gm-ink) !important; -webkit-text-fill-color: var(--gm-ink); font: 600 13px/1 Inter, Roboto, system-ui, sans-serif; white-space: nowrap; }
.gm2 .gm2-bantype i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.gm2 .gm2-bantype small { color: var(--gm-soft); font-weight: 500; }
/* the fold: while an area is being placed the map takes the whole width (the dial sits in its corner, not on the card) */
.gm2-body.is-fold.tpl-open .gm2-side { display: none !important; }
/* the selected shape's name, readable on gold */
.gm2 .mi-afan .mi-af.on small { color: #2a1a0c !important; -webkit-text-fill-color: #2a1a0c; }
/* the panel's head wraps (title first) rather than squeezing the spell's name */
.gm2-tplhead .grow { flex: 1 1 150px; }
.gm2 button.gm2-tplico { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--dmg) 70%, transparent);
  background: color-mix(in srgb, var(--dmg) 14%, #141416) !important; display: grid; place-items: center; cursor: pointer; }
/* Keep on map sits in the panel's head; "Keep" on a narrow panel. A short screen gets a tighter panel. */
.gm2 .gm2-keep .k-short { display: none; }
@media (max-width: 999px) and (orientation: portrait), (max-width: 759px), (max-width: 999px) and (max-height: 479px) {
  .gm2 .gm2-keep .k-long { display: none; } .gm2 .gm2-keep .k-short { display: inline; } .gm2 .gm2-keep { padding: 0 10px; }
}
@media (max-height: 700px) {
  .gm2 .gm2-tplpanel { padding-top: 8px; }
  .gm2 .gm2-tplhead h2 { font-size: 20px; }
  .gm2 .gm2-caughtlist { margin: 6px 0; }
  .gm2 .gm2-caught { min-height: 44px; padding-top: 2px; padding-bottom: 2px; }
  .gm2 .gm2-tplacts button { min-height: 44px; }
  .gm2 .gm2-caughtmore { min-height: 44px; }
}
.gm2 .gm2-tplhead .grow { flex: 1 1 120px; }
/* the spell's name is never cut: the title keeps its own width and Keep / DC wrap under it instead; the line
   below it (caster, size) takes whatever room is left */
.gm2 .gm2-tplhead .grow { flex: 1 0 auto; max-width: 100%; }
.gm2 .gm2-tplhead h2 { white-space: nowrap; overflow: visible; text-overflow: clip; }
.gm2 .gm2-tplhead small { width: 0; min-width: 100%; }
/* the Undo toast sits at the top, clear of the panel and the dial */
.gm2-undotoast { top: calc(72px + env(safe-area-inset-top, 0px)); bottom: auto !important; }

/* ---------- Tom's call: the Areas list, lingering rounds, the short skippable effect ---------- */
/* a blast flares for about 2.5 s (a tap skips it), then stays dimmed until cleared */
@keyframes gm2-blast2 { 0% { opacity: 1; filter: none; } 20% { opacity: 1; filter: brightness(2) drop-shadow(0 0 16px #ffb070); } 60% { opacity: 1; filter: brightness(1.3); } 100% { opacity: 0.45; filter: none; } }
.gm2 #miAoeG .mi-tpl.blast { animation: gm2-blast2 2.5s ease-out forwards; }
.gm2 .he-blast { animation: gm2-blast2 2.5s ease-out forwards; }
.gm2 #miAoeG .mi-tpl.spent { opacity: 0.45; }
.gm2 #miAoeG .mi-tpl.spent.sel { opacity: 0.8; }
/* a lingering area whose rounds are up pulses until the GM removes or keeps it */
@keyframes gm2-due { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.gm2 #miAoeG .mi-tpl.due > .s { stroke: #ff6a5a; stroke-width: 3; animation: gm2-due 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .gm2 #miAoeG .mi-tpl.due > .s { animation: none; } }
.gm2 .gm2-rounds { display: inline-flex; align-items: center; gap: 6px; color: var(--gm-soft); font: 600 12.5px/1 Inter, Roboto, system-ui, sans-serif; }
.gm2 .gm2-rounds input { width: 64px; min-height: 44px; border-radius: 10px; border: 1.5px solid var(--gm-line); background: #18181c; color: var(--gm-ink); font: 600 16px/1 Inter, Roboto, system-ui, sans-serif; text-align: center; }
.gm2 .gm2-rounds input::placeholder { color: var(--gm-faint); }
.gm2 .gm2-rounds small { color: var(--gm-gold); font-weight: 700; }
.gm2 .gm2-rounds.due small { color: #ff8a7a; }
/* the list */
.gm2 .gm2-arealist { display: flex; flex-direction: column; gap: 8px; }
.gm2 .gm2-arow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border: 1px solid var(--gm-line); border-radius: 14px; background: #18181c; }
.gm2 .gm2-arow.spent { opacity: 0.75; }
.gm2 .gm2-arow.due { border-color: #e05a3a; background: #242428; }
.gm2 .gm2-arow-main { flex: 1 1 180px; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; text-align: left; background: transparent !important; border: 0; padding: 0; color: var(--gm-ink) !important; -webkit-text-fill-color: var(--gm-ink); }
.gm2 .gm2-arow-main i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.gm2 .gm2-arow-main span { display: flex; flex-direction: column; min-width: 0; }
.gm2 .gm2-arow-main b { font: 700 17px/1.1 "Cormorant Garamond", Georgia, serif; color: #f3e6c8; }
.gm2 .gm2-arow-main small { color: var(--gm-soft); font-size: 12.5px; margin-top: 2px; }
.gm2 .gm2-arow-del { min-height: 44px; padding: 0 14px; flex: none; }
.gm2 .gm2-clearblasts { min-height: 44px; white-space: nowrap; }
/* phones and the fold: the Areas chip on the map */
.gm2 .gm2-areaschip { position: absolute; left: 12px; z-index: 24; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border-radius: 999px; border: 1.5px solid var(--gm-gold); background: rgba(20,20,22, 0.94) !important; color: var(--gm-gold) !important; -webkit-text-fill-color: var(--gm-gold);
  font: 600 13px/1 Inter, Roboto, system-ui, sans-serif; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); top: 140px; }
.gm2 .gm2-areaschip svg { width: 18px; height: 18px; }
.gm2 .gm2-areaschip b { min-width: 20px; height: 20px; border-radius: 10px; background: var(--gm-gold); color: #2a1a0c; -webkit-text-fill-color: #2a1a0c; display: grid; place-items: center; font-size: 12px; padding: 0 5px; }
.gm2 .gm2-areaschip.due { border-color: #e05a3a; color: #ff8a7a !important; -webkit-text-fill-color: #ff8a7a; }
.gm2-body.is-fold .gm2-areaschip { top: 12px; }
.gm2-stage.tpl-on .gm2-areaschip { display: none; }
@media (min-width: 1000px), (orientation: landscape) and (min-width: 760px) and (min-height: 480px) { .gm2 .gm2-areaschip { display: none; } }
/* the ping at zero */
.gm2-undotoast.gm2-ping { border-color: #e05a3a; }
.gm2-undotoast.gm2-ping button + button { border-color: var(--gm-line, #3f3f48); color: #f3e6c8; }
/* on a phone the toasts span the screen, so their text reads on one or two lines */
@media (max-width: 599px) {
  .gm2-undotoast { left: 10px; right: 10px; transform: none; max-width: none; border-radius: 18px; font-size: 13px; }
  .gm2-undotoast span { flex: 1; min-width: 0; }
}

/* Condition badges on initiative tiles */
.gm2-cbadges { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; line-height: 0; margin-top: 2px; max-width: 100%; overflow: hidden; }
.gm2-irow .gm2-cbadges { justify-content: flex-start; }
.gm2-cbadges .he-badge { margin: 0; }

/* ---------- Tom, 29 Oct 23:00: the map comes first ----------
   The play wheel becomes one compact row of small buttons along the bottom edge, so it hides as little of the map
   as possible. The grid is thin, clear black lines. Light effects on the GM screen may brighten (glow) but never
   darken or desaturate the map art below the original. */
.gm2 .gm2-wheel.gm2-playwheel {
  display: flex; align-items: flex-end; justify-content: center; gap: 4px;
  width: auto; max-width: calc(100% - 8px); height: auto; bottom: 6px; padding: 0;
}
.gm2 .gm2-playwheel .gm2-bed { display: none; }
.gm2 .gm2-playwheel .gm2-petal,
.gm2 .gm2-playwheel button.gm2-hub { position: relative; left: auto !important; top: auto !important; flex: none; }
.gm2 .gm2-playwheel .gm2-petal { width: 46px; height: 46px; gap: 1px; order: 1; background: rgba(20,20,22, 0.82); }
.gm2 .gm2-playwheel .gm2-petal:nth-child(n+5) { order: 3; }
.gm2 .gm2-playwheel .gm2-petal svg { width: 16px; height: 16px; }
.gm2 .gm2-playwheel .gm2-petal span { font-size: 9px; }
.gm2 .gm2-playwheel button.gm2-hub { order: 2; width: 72px; height: 72px; border-width: 2px; }
.gm2 .gm2-playwheel button.gm2-hub b { font-size: 15px; }
.gm2 .gm2-playwheel button.gm2-hub small { font-size: 9.5px; max-width: 64px; }
.gm2 .gm2-playwheel button.gm2-hub svg { width: 14px; height: 14px; margin-bottom: 0; }
@media (min-width: 1000px), (orientation: landscape) and (min-width: 760px) and (min-height: 480px) {
  .gm2 .gm2-playwheel .gm2-petal { left: auto; top: auto; }
}
.gm2 .dm-map-grid,
.gm2 .dm-map-grid.has-image::after {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.6) 1px, transparent 1px) !important;
}
.gm2 .hatm-mul, .gm2 .hatm-desat { display: none !important; }

/* ===== 30 Oct 2026 =====
   Key hints never take a click: on a laptop with no map they sat over the Encounter button and swallowed its clicks.
   With no map they sit above the Encounter / Start combat / Roll bar. */
.gm2-keys { pointer-events: none; }
.gm2-stage.is-nomap .gm2-keys { bottom: 78px; }

/* ===== 30 Oct 2026 (Tom, phone test of #71): no old brown anywhere =====
   GM mode in Jenny's dark card colours and Final2 gold (sheet-colours spec). Colours only. */
body.gm2-on { background: #0b0b0d; }
.gm2 { --gm-bg: #0b0b0d; --gm-card: #121214; --gm-card-2: #1a1a1d; background: #0b0b0d; }
.gm2-game { background: linear-gradient(180deg, #19191c, #121214); border-color: rgba(201,153,63,.7); }
.gm2-game .pic.empty {
  background: radial-gradient(ellipse at 30% 20%, rgba(233, 189, 98, .10), transparent 50%), #111113;
  color: #b9ad97; border: 2px dashed rgba(201, 153, 63, .5);
}
/* theatre of the mind (no map) was light parchment */
.gm2-nomap { background: linear-gradient(180deg, #19191c, #121214); color: #e2cba3; }
.gm2-nomap h2 { color: #f4e6cc; }
.gm2-nomap .hint { color: #b9ad97; }
.gm2-nrow { background: #111113; border-color: #26262a; color: #f4e6cc; }
.gm2-nrow.on { background: linear-gradient(#1a1a1d, #111113); border-color: #f0cf86; box-shadow: 0 0 12px rgba(233, 189, 98, .25); }
.gm2-nrow .hp { color: #f08a6e; }
.gm2-nrow .who small { color: #b9ad97; }
.gm2-nrow .ini { color: #e9bd62; }
.gm2-nomap .bar { background: #2c2c31; }
.gm2-roundbox.light { background: #111113; color: #e9bd62; border-color: rgba(201,153,63,.7); }
/* The drawer's text boxes (Search the SRD, names, notes) were leather under the Hearth palette. Sunk dark well,
   gold edge on focus. The palette's input rule is very specific, hence the long prefix. */
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2 :is(input[type="text"], input[type="search"], input:not([type]), textarea) {
  background: #08080a !important; background-image: none !important; border: 1px solid #2c2c31 !important; color: #f4e6cc !important; box-shadow: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2 :is(input[type="text"], input[type="search"], input:not([type]), textarea):focus { border-color: #e9bd62 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2 :is(input, textarea)::placeholder { color: #6e573c; }

/* ===== 30 Oct 2026: the encounter picker (DECIDED 28 Oct; Jenny's gm.html?s=pick) =====
   + picks a monster (tap again for more), the drawer counts "3 picked", Done adds them all at once. */
.gm2-sheet-h h2 .gm2-cnt { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; margin-left: 8px; border-radius: 13px; vertical-align: middle;
  font: 700 12px/1 Roboto, system-ui, sans-serif; color: #1a1007; background: linear-gradient(#f6d58c, #d29d45); }
.gm2-mon.got { background: rgba(233, 189, 98, .07); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.gm2-mon .gm2-xn { height: 26px; min-width: 34px; padding: 0 7px; box-sizing: border-box; border-radius: 13px; display: inline-grid; place-items: center;
  font: 700 12.5px/1 Roboto, system-ui, sans-serif; color: #e9bd62; border: 1px solid rgba(233, 189, 98, .6); background: rgba(233, 189, 98, .12); }
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2 .gm2-stepper .gm2-pl,
.gm2 .gm2-stepper .gm2-pl { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(233, 189, 98, .45) !important; background: rgba(233, 189, 98, .1) !important; color: #e9bd62 !important; font: 500 22px/1 Roboto, system-ui, sans-serif; box-shadow: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2 .gm2-mon.got .gm2-stepper .gm2-pl,
.gm2 .gm2-mon.got .gm2-stepper .gm2-pl { background: linear-gradient(#f6d58c, #d29d45) !important; color: #1a1007 !important; border-color: #f6d98f !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2 .gm2-stepper .gm2-mi,
.gm2 .gm2-stepper .gm2-mi { width: 40px; height: 44px; border-radius: 12px; border: 1px solid rgba(201, 153, 63, .3) !important; background: transparent !important; color: #e2cba3 !important; font: 500 20px/1 Roboto, system-ui, sans-serif; box-shadow: none !important; }
.gm2-sheet-foot { align-items: center; }
.gm2-sheet-foot .gm2-pickhint { flex: 1; min-width: 0; font-size: 12px; line-height: 1.3; color: #b9ad97; }
.gm2-undotoast.gm2-addedtoast b { color: #e9bd62; }

/* 30 Oct overflow sweep. With Live game / Host in the header, a phone had 36 px (360) to 66 px (390) left for the
   game's name and whose turn it is ("Taver…", "Round 2 …"). On phones Change map shows its map icon (the name stays
   as its label for screen readers, and wider screens keep the words), and the line under the name may take two
   lines instead of being cut. */
@media (max-width: 480px) {
  .gm2-top .gm2-mapbtn { width: 44px; min-width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; }
  .gm2-top .gm2-mapbtn span { display: none; }
  .gm2-top .gm2-mapbtn svg { width: 20px; height: 20px; }
  .gm2-top .gm2-notesbtn { height: 44px; min-height: 44px; padding: 0 8px; }
  .gm2-top .gm2-subline { white-space: normal; overflow: visible; line-height: 1.25; }
  .gm2-top .gm2-subline .gm2-rest { display: inline-block; white-space: normal; overflow: visible; max-width: 100%; } /* inline-block keeps "Round" capitalised */
}
@media (max-width: 380px) { .gm2-top .gm2-title b { font-size: 19px; } }
/* The bottom row on a 360 px phone: six 46 px buttons and the 72 px hub were 372 px wide, so "Encounter" and "Ping"
   ran off the edges. Narrow phones get 45 px buttons, a 68 px hub and 2 px gaps (350 px). */
@media (max-width: 379px) {
  .gm2 .gm2-wheel.gm2-playwheel { gap: 2px; }
  .gm2 .gm2-playwheel .gm2-petal { width: 45px; height: 45px; }
  .gm2 .gm2-playwheel .gm2-petal span { letter-spacing: -0.02em; }
  .gm2 .gm2-playwheel button.gm2-hub { width: 68px; height: 68px; }
}
/* (1 Nov) audit H7: on the Fold cover (344 px) the row was still 350 px, so "Encounter" and "Ping" were cut at both
   edges. Under 360 px: 44 px buttons (still a full touch target), a 60 px hub, 1 px gaps (330 px). */
@media (max-width: 359px) {
  .gm2 .gm2-wheel.gm2-playwheel { gap: 1px; }
  .gm2 .gm2-playwheel .gm2-petal { width: 44px; height: 44px; }
  .gm2 .gm2-playwheel .gm2-petal span { font-size: 8.5px; letter-spacing: -0.03em; }
  .gm2 .gm2-playwheel button.gm2-hub { width: 60px; height: 60px; }
  .gm2 .gm2-playwheel button.gm2-hub b { font-size: 14px; }
}
/* A monster's line in the encounter list wraps instead of "CR 2 · 450 XP · AC 11 · H…". */
.gm2-fightline { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; }
/* Filter chips (Library: Towns, Wilds, Dungeons, Your maps) keep their words whole and the row scrolls sideways;
   at 360 px "Dungeons" ran past its chip and "Your maps" broke onto two lines. The map picker's own chips are left as
   they are. */
.gm2-crs:not(.gmp-cats) button { flex: none; white-space: nowrap; }
/* Turn list names on a tablet or laptop take two lines rather than "Bugbea…". */
.gm2 .gm2-rail .gm2-irow .who b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }

/* Hide from players: the row shows the state (sync fixes 31 Oct) */
.gm2 .gm2-menu button.gm2-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gm2 .gm2-menu button.gm2-toggle-row em { flex: none; font-style: normal; font-size: 12px; font-weight: 700; line-height: 1; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--gm-line); color: var(--gm-faint); }
.gm2 .gm2-menu button.gm2-toggle-row.on { border-color: var(--gm-gold); }
.gm2 .gm2-menu button.gm2-toggle-row.on em { background: var(--gm-gold); border-color: var(--gm-gold); color: #1a1007; }

/* ===== QA 1 Nov: the GM map on a laptop =====
   The key hints sit at the foot of the initiative rail (on the map they ran under the bottom dock and were cut off).
   On the laptop and landscape layouts the dock buttons are 56 px so "Encounter" and "Conditions" sit inside the ring
   (they spilled out of the 46 px circles); phones keep their 46 px row. */
.gm2 .gm2-rail .gm2-keys {
  position: static; flex: none; margin: 0; padding: 10px 12px 12px; border-radius: 0; background: none;
  border-top: 1px solid rgba(232, 195, 106, 0.18); line-height: 1.9; white-space: normal;
}
.gm2 .gm2-rail .gm2-keys span { white-space: nowrap; }
@media (min-width: 1000px), (orientation: landscape) and (min-width: 760px) and (min-height: 480px) {
  .gm2 .gm2-playwheel .gm2-petal { width: 56px; height: 56px; gap: 2px; }
  .gm2 .gm2-playwheel .gm2-petal svg { width: 18px; height: 18px; }
  .gm2 .gm2-playwheel .gm2-petal span { font-size: 9.5px; letter-spacing: 0; }
  .gm2 .gm2-playwheel button.gm2-hub { width: 80px; height: 80px; }
}
/* (1 Nov) A monster at 0 HP: "Defeated" on the rail, the strip and the card. It stays in the turn order until the GM
   removes it (the card's "Remove from initiative"). Hearth gold on dark, dimmed portrait. */
.gm2 .gm2-down {
  display: inline-block; margin: 2px 0; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--gm-gold-deep);
  background: #161619; color: var(--gm-gold); font: 700 11px/1.5 Inter, Roboto, system-ui, sans-serif; font-style: normal;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.gm2 .gm2-irow.is-down .who b, .gm2 .gm2-nrow .who .gm2-down + small { opacity: .75; }
.gm2 .gm2-irow.is-down img, .gm2 .gm2-irow.is-down .ini-face,
.gm2 .gm2-scard.is-down .ring img, .gm2 .gm2-scard.is-down .ini-face { filter: grayscale(1) brightness(.6); }
.gm2 .gm2-scard .gm2-down { font-size: 9.5px; padding: 0 5px; }
.gm2 .gm2-cardflags .gm2-down { margin: 0 6px 0 0; padding: 4px 10px; font-size: 12px; }
.gm2 .gm2-downbox {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--gm-gold-deep); background: #161619;
}
.gm2 .gm2-downbox .grow { flex: 1 1 160px; min-width: 0; }
.gm2 .gm2-downbox b { display: block; color: var(--gm-gold); font-size: 15px; }
.gm2 .gm2-downbox small { display: block; color: var(--gm-soft); font-size: 12.5px; line-height: 1.35; }
.gm2 .gm2-downbox button { min-height: 44px; padding: 0 14px; }

/* (1 Nov) Hidden tokens. The tag is drawn from the token's own token-hidden class, which every render sets from
   hiddenFromPlayers, so it shows only while the creature is hidden and goes with the class the moment it is
   shown again (no separate node to clear after a move, a select or a re-render). Gold dashed ring instead of
   the old off-palette blue outline. */
.gm2 .map-token.token-hidden { outline: 2px dashed #e9bd62; outline-offset: 3px; }
.gm2 .map-token.token-hidden > .ht-token { opacity: .72; }
.gm2 .map-token.token-hidden::before {
  content: "Hidden";
  position: absolute; left: 50%; top: -10px; transform: translate(-50%, -100%); z-index: 5;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: #0b0b0d; color: #e9bd62; border: 1px solid #e9bd62;
  font: 700 10px/1.3 Roboto, "Segoe UI", system-ui, sans-serif; letter-spacing: .02em;
}
.gm2 .map-token:not(.token-hidden)::before { content: none; }

/* (1 Nov) Moves by: one chip per speed (walk, fly, swim, climb, burrow). The lit one sets the token's move range. */
.gm2 .gm2-movemodes { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.gm2 .gm2-movemodes button {
  min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--gm-line);
  background: transparent; color: var(--gm-soft); font: 600 13px/1.1 Roboto, "Segoe UI", system-ui, sans-serif;
}
.gm2 .gm2-movemodes button.on { background: var(--gm-gold); border-color: var(--gm-gold); color: #1a1007; }
html:root[data-palette][data-palette] body .gm2 .gm2-movemodes button.on { background: var(--gm-gold) !important; color: #1a1007 !important; }

/* (1 Nov) audit L8: the GM Roll dice sit in one row of seven (d100 wrapped onto a second row on a phone). Each stays
   44 px or more: on the Fold cover the row borrows 4 px of the sheet's side padding. */
.gm2 .gm2-steps.gm2-dicerow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.gm2 .gm2-steps.gm2-dicerow button { min-width: 0; padding: 0; justify-content: center; text-align: center; white-space: nowrap; }
@media (max-width: 359px) { .gm2 .gm2-steps.gm2-dicerow { gap: 2px; margin-left: -4px; margin-right: -4px; } }
/* (1 Nov) audit M17: New game's helper text sat against the name field (its last line ran into the field's gold ring) */
.gm2 .gm2-sheet .gm2-sub.gm2-newsub { margin: 4px 0 14px; line-height: 1.4; }

/* (2 Nov, Tom) token numbers keep one small size on screen as the map zooms (--mi-inv is 1 / zoom), and never grow
   past six tenths of a square when zoomed far out */
.gm2 .dm-map-grid .map-token-num {
  width: min(calc(16px * var(--mi-inv, 1)), 20px); height: min(calc(16px * var(--mi-inv, 1)), 20px);
  font-size: min(calc(10px * var(--mi-inv, 1)), 12.5px);
  border-width: min(calc(1px * var(--mi-inv, 1)), 1.25px);
}

/* (4 Nov) header + New encounter */
.gm2-top .gm2-newenc { font-size: 22px; font-weight: 600; color: var(--gm-gold); flex: none; }
/* (4 Nov) the + New encounter button needs 44 px: on phones Notes goes icon-only (aria-label kept) so the game title still shows */
@media (max-width: 420px) {
  .gm2-top .gm2-notesbtn { width: 44px; min-width: 44px; padding: 0; gap: 0; justify-content: center; }
  .gm2-top .gm2-notesbtn span { display: none; }
  .gm2-top .gm2-notesbtn svg { width: 20px; height: 20px; }
}

/* (6 Nov, Tom) Encounter sheet on an open Fold or a tablet (720–1279 px): a smaller side panel docked to the right, so the
   map keeps its room. Rows, chips and padding tightened; the laptop (1280+) layout is unchanged. */
@media (max-width: 1279px) and (min-width: 720px) {
  .gm2-side.open.encounter, .gm2-side.open.encounter.fold { width: 300px !important; flex-basis: 300px !important; }
  .gm2-side.open.encounter .gm2-sheet.dock { padding: 4px 8px 0 !important; }
  .gm2-side.open.encounter .gm2-sheet-h { padding: 2px 0 6px; }
  .gm2-side.open.encounter .gm2-sheet-h h2 { font-size: 22px; }
  .gm2-side.open.encounter .gm2-sec { margin: 6px 0 4px; font-size: 13px; }
  .gm2-side.open.encounter .gm2-fight { gap: 8px; padding: 5px 0; }
  .gm2-side.open.encounter .gm2-fight .gm2-ava, .gm2-side.open.encounter .gm2-fight img { width: 36px; height: 36px; }
  .gm2-side.open.encounter .gm2-fight b { font-size: 15px; }
  .gm2-side.open.encounter .gm2-fight small { font-size: 12px; }
  .gm2-side.open.encounter .gm2-stepper button, .gm2-side.open.encounter .gm2-encstep button { width: 38px; height: 38px; min-width: 38px; border-radius: 10px; }
  .gm2-side.open.encounter .gm2-stepper { gap: 4px; }
  .gm2-side.open.encounter .gm2-fight small { font-size: 11.5px; line-height: 1.25; }
  .gm2-side.open.encounter .gm2-search, .gm2-side.open.encounter .gm2-field { min-height: 40px; }
  .gm2-side.open.encounter .gm2-crs { gap: 5px; padding: 6px 0; }
  .gm2-side.open.encounter .gm2-crs button { min-height: 40px; min-width: 40px; padding: 0 9px; font-size: 13px; }
  .gm2-side.open.encounter .gm2-mon { padding: 5px 0; gap: 8px; }
  .gm2-side.open.encounter .gm2-mon b { font-size: 15px; }
  .gm2-side.open.encounter .gm2-mon small { font-size: 12px; }
  .gm2-side.open.encounter .gm2-mon .gm2-addmon, .gm2-side.open.encounter .gm2-mon > button:last-child { width: 40px; height: 40px; min-width: 40px; }
  .gm2-side.open.encounter .gm2-sheet-foot { padding: 6px 0 calc(8px + env(safe-area-inset-bottom, 0px)); }
  .gm2-side.open.encounter .gm2-sheet-foot .gm2-done { min-height: 44px; min-width: 80px; }
  .gm2-side.open.encounter .gm2-addenc { min-height: 44px; }
}
/* (6 Nov) a narrow phone: the area panel's head wraps to two rows (title, then the save DC and Shape & type); a tighter row gap keeps the sheet within 40% of the screen */
@media (max-width: 400px) {
  /* Keep Damage on the title row so the sheet does not grow a third line on a narrow phone. */
  .gm2-tplhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 8px; align-items: center; }
  .gm2-tplhead .gm2-tplico { grid-column: 1; grid-row: 1; }
  .gm2-tplhead .grow { grid-column: 2; grid-row: 1; max-width: none; min-width: 0; }
  .gm2-dmgfield { grid-column: 3; grid-row: 1; }
  .gm2-dmgfield span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
  .gm2-dmgfield input { width: 64px; min-width: 56px; }
  .gm2 .gm2-tplhead h2 { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
@media (max-width: 380px) { .gm2-tplhead { gap: 8px; } }

/* Encounter picker. On the wide layout the rail heading is the control (the words Tom already sees).
   On a phone or an upright fold the rail is hidden, so the same control is a bar under the header.
   The list itself is positioned from the button and paints above the map. */
.gm2-rail-h:has(.gm2-encpick) { padding: 2px 8px 2px 8px; }
.gm2-encpick-wrap { position: relative; min-width: 0; flex: 1 1 auto; }
.gm2-encbar {
  display: flex; align-items: center; flex: none;
  padding: 0 8px 0 10px;
  background: linear-gradient(#1c1c20, #141417);
  border-bottom: 1px solid rgba(232, 195, 106, 0.28);
}
.gm2 .gm2-encpick {
  display: flex; align-items: center; gap: 2px;
  width: 100%; max-width: 100%; min-height: 44px; margin: 0; padding: 0 2px;
  border: 0; border-radius: 8px; background: transparent; box-shadow: none;
  color: var(--gm-gold); text-align: left; cursor: pointer;
}
.gm2 .gm2-encpick-txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; }
.gm2 .gm2-encpick .gm2-rail-round,
.gm2 .gm2-encpick .gm2-encpick-name {
  display: block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gm2 .gm2-encpick .gm2-encpick-name {
  font: 700 22px/1.1 "Cormorant Garamond", Georgia, serif; color: var(--gm-gold);
}
.gm2 .gm2-encpick small {
  display: block; max-width: 100%; margin-top: 1px;
  font: 600 12px/1.2 Inter, Roboto, system-ui, sans-serif; color: var(--gm-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gm2 .gm2-chev { width: 18px; height: 18px; flex: none; display: inline-flex; color: var(--gm-gold); }
.gm2 .gm2-chev svg { width: 18px; height: 18px; display: block; }
.gm2 .gm2-encpick.open .gm2-chev { transform: rotate(180deg); }
.gm2 .gm2-encpick:focus-visible { outline: 2px solid var(--gm-gold); outline-offset: 2px; }
.gm2-encmenu {
  position: absolute; z-index: 80; box-sizing: border-box;
  padding: 6px; border-radius: 14px; overflow: auto; overscroll-behavior: contain;
  background: #161619; border: 1px solid rgba(201, 153, 63, 0.75);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
.gm2-encmenu button {
  display: flex; align-items: center; width: 100%; min-height: 44px; margin: 0;
  padding: 6px 10px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; box-shadow: none; color: #f4e6cc; text-align: left; cursor: pointer;
}
.gm2-encmenu button .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gm2-encmenu button b {
  font: 700 18px/1.15 "Cormorant Garamond", Georgia, serif; color: var(--gm-gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gm2-encmenu button small {
  font: 500 12px/1.25 Inter, Roboto, system-ui, sans-serif; color: #b9ad97;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gm2-encmenu button.on { border-color: rgba(233, 189, 98, 0.85); background: rgba(233, 189, 98, 0.1); }
.gm2-encmenu button.gm2-encnew {
  margin-top: 4px; border-top: 1px solid rgba(232, 195, 106, 0.22); border-radius: 10px;
}
.gm2-encmenu button:focus-visible { outline: 2px solid var(--gm-gold); outline-offset: -2px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2 .gm2-encpick,
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2 .gm2-encmenu button {
  background-image: none !important; box-shadow: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2 .gm2-encpick {
  background: transparent !important; border: 0 !important; color: var(--gm-gold) !important;
  min-height: 44px !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2 .gm2-encmenu button {
  background: transparent !important; border-color: transparent !important; color: #f4e6cc !important;
  min-height: 44px !important; text-align: left !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2 .gm2-encmenu button.on {
  background: rgba(233, 189, 98, 0.1) !important; border-color: rgba(233, 189, 98, 0.85) !important;
}