/* css/plan.css: The planning panel under the map, and the game history list.
   The css/ files are CONTIGUOUS SLICES of the old single styles.css, loaded by index.html in this order (base, front, shell, combat, map, plan, sheets, play, shared).
   Cascade order is part of the meaning: a rule that overrides an earlier rule of the same specificity must stay in a file that loads after it. Move rules between files
   only with a screenshot diff (tools/ui_snapshots.py). New rules for a screen go at the END of the file that owns it. */
/* ---- planning: a panel under the map, the map stays live above it ---- */

 
 

.realm-svg .youring { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-dasharray: 1.5 5; stroke-linecap: round; }
.realm-svg .youring.hid { stroke: #7fd1c8; }
.itemrow { display: flex; gap: 8px; align-items: stretch; }
.itemrow .btn.row { flex: 1; min-width: 0; }
.leavebtn { flex: none; min-width: 64px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); color: var(--dim); font-size: calc(14px * var(--ts, 1)); margin-top: 8px; cursor: pointer; }
.realm-svg .targetring { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 5 4; pointer-events: none; }
.realm-svg .targetring.maybe { stroke-width: 2; stroke-dasharray: 1.5 5; stroke-linecap: round; opacity: .8; }

.realm-svg .leader { stroke: rgba(240, 232, 208, .85); stroke-width: 1.3; stroke-dasharray: 3 2; }
.realm-svg .pill.more rect { fill: #3a3d4e; }
.realm-svg .chit.nm { display: none; }
.realm-svg.zoomed .chit.nm { display: inline; }
.realm-svg .pill.warning rect { fill: #8a4a24; } .realm-svg .pill.star rect { fill: #5b4d86; }
.realm-svg .pill.lost-city rect, .realm-svg .pill.lost-castle rect { fill: #5b4d86; }
.realm-svg .pill .pillnum { fill: #0c0e14; stroke: rgba(255,255,255,.75); stroke-width: 1; }
.realm-svg .pill .pillnumtxt { font-size: calc(8.5px * var(--ts, 1)); font-weight: 800; fill: #fff; }
.chip.dim, .chip:disabled { opacity: .3; color: var(--dim); border-style: dashed; cursor: default; pointer-events: none; }

/* ---- game history ---- */
.histrow { display: flex; justify-content: space-between; gap: 10px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--dim); border-radius: 12px; padding: 10px 12px; color: inherit; cursor: pointer; }
.histrow.res-died { border-left-color: #c44; } .histrow.res-finished { border-left-color: var(--moss, #6fae8a); } .histrow.res-playing { border-left-color: var(--gold); }
.histrow small { display: block; color: var(--dim); font-size: calc(12px * var(--ts, 1)); margin-top: 2px; }
.btn.danger { border-color: #a44; color: #e88; }

.bugbtn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: calc(20px * var(--ts, 1)); line-height: 1; padding: 0; cursor: pointer; flex: none; }
.bugform { display: flex; flex-direction: column; gap: 12px; }
.bugtext { width: 100%; box-sizing: border-box; min-height: 120px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: calc(16px * var(--ts, 1)); padding: 10px 12px; resize: vertical; }

button.foe { text-align: left; color: inherit; font: inherit; width: 100%; cursor: pointer; }
.foe .sidetag { display: block; font-style: normal; font-size: calc(11px * var(--ts, 1)); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.foe.rev { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.foe.rev .sidetag { color: var(--gold); }
.foe i { font-style: normal; }
.foe i.chg { color: var(--gold); font-weight: 700; }
.foe .was { display: block; color: var(--dim); font-size: calc(12px * var(--ts, 1)); margin-top: 2px; }

button.foe { flex-direction: row; align-items: center; gap: 10px; }
.foe .foe-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.foe svg.counter { flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.foe.rev svg.counter { outline: 2px solid var(--gold); border-radius: 12px; }
.cb-foes { grid-template-columns: 1fr; }                 /* a counter and its words need the full width */
.cb-foes .foe .foe-text { font-size: calc(14px * var(--ts, 1)); }