.encounter-shell {
  --parchment: #ead8a0;
  --mint: #82d9b3;
  min-height: calc(100vh - 4rem);
  padding: clamp(.7rem, 2vw, 2rem);
  color: #e7ebe5;
  background:
    linear-gradient(90deg, rgba(3, 15, 11, .97) 0%, rgba(5, 22, 16, .84) 45%, rgba(5, 14, 13, .28) 76%, rgba(2, 8, 7, .58) 100%),
    linear-gradient(0deg, rgba(2, 12, 9, .84), rgba(4, 13, 12, .08) 66%),
    url("art/encounter-crossroads.b9ae6aa4d25a.webp") 69% top / cover fixed;
}
.encounter-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.encounter-shell svg { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

.encounter-heading,
.encounter-layout,
.encounter-shell > .market-alert { width: min(1480px, 100%); margin-right: auto; margin-left: auto; }
.encounter-heading {
  position: relative;
  padding: clamp(1.4rem, 4vw, 3.2rem);
  border: 1px solid rgba(230, 201, 121, .3);
  border-top: 3px solid var(--parchment);
  background:
    linear-gradient(100deg, rgba(3, 21, 14, .98) 0%, rgba(7, 30, 20, .86) 58%, rgba(23, 31, 24, .66) 100%);
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .36);
  overflow: hidden;
}
.encounter-heading::after {
  content: '⚔';
  position: absolute;
  right: clamp(1rem, 6vw, 6rem);
  bottom: -3.4rem;
  color: rgba(231, 201, 121, .09);
  font-size: clamp(8rem, 19vw, 17rem);
  transform: rotate(-12deg);
}
.encounter-heading .back { display: inline-block; position: relative; z-index: 1; margin-bottom: 1.5rem; color: #c8d1ca; }
.encounter-heading h1,
.encounter-result h2,
.encounter-empty h2 {
  position: relative;
  z-index: 1;
  margin: .2rem 0;
  color: #f0dda7;
  font-family: Georgia, serif;
  font-weight: 500;
}
.encounter-heading h1 { font-size: clamp(2.3rem, 6vw, 5.2rem); line-height: .94; }
.encounter-heading > p:last-child { position: relative; z-index: 1; max-width: 52rem; color: #c6d0c7; }

.encounter-layout { display: grid; grid-template-columns: minmax(19rem, 25rem) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; align-items: start; }
.encounter-controls {
  display: grid;
  gap: 1.2rem;
  position: sticky;
  top: 1rem;
  padding: 1.15rem;
  border: 1px solid rgba(119, 175, 142, .4);
  background: rgba(3, 19, 13, .96);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .3);
}
.encounter-controls section { display: grid; gap: .55rem; }
.encounter-controls .eyebrow { margin: 0; color: #91d1b4; }
.context-options { display: grid; gap: .35rem; }
.context-options label,
.risk-options label { margin: 0; cursor: pointer; }
.context-options input,
.risk-options input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.context-options span {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .18rem;
  padding: .65rem .75rem;
  border: 1px solid #315644;
  border-left: 3px solid #315644;
  background: rgba(8, 35, 23, .72);
}
.context-options b { align-self: end; }
.context-options small { grid-column: 2; color: #91a599; font-size: .7rem; line-height: 1.3; }
.context-glyph { grid-row: 1 / 3; align-self: center; color: #77ad92; font: 1.35rem/1 Georgia, serif; text-align: center; }
.context-glyph-roads::before { content: '⌁'; }
.context-glyph-urban::before { content: '▥'; }
.context-glyph-river::before { content: '≈'; }
.context-glyph-sea::before { content: '≋'; }
.context-glyph-jungle::before { content: '♣'; }
.context-glyph-east::before { content: '◇'; }
.context-options input:checked + span { border-color: #d9bc70; border-left-color: #e8d18d; background: #173d2a; }
.context-options input:checked + span b { color: #f0dda7; }
.context-options input:checked + span .context-glyph { color: #e8d18d; }
.risk-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: .28rem; }
.risk-options span { display: grid; min-height: 4.1rem; place-content: center; padding: .35rem .15rem; border: 1px solid #3d5549; text-align: center; background: #071a12; }
.risk-options b { font-size: .68rem; }
.risk-options small { margin-top: .18rem; color: #99a99f; font-size: .56rem; }
.risk-options input:checked + span { outline: 2px solid currentColor; outline-offset: 1px; background: rgba(255, 255, 255, .07); }
.risk-green { color: #72d998; }
.risk-yellow { color: #e0cc64; }
.risk-orange { color: #e99a52; }
.risk-red { color: #e06b65; }
.risk-black { color: #b59ac9; }
.rule-note { margin: .15rem 0 0; color: #91a197; font-size: .74rem; line-height: 1.45; }
.encounter-button { width: 100%; padding: .9rem; font-size: 1.02rem; }

.encounter-result {
  min-width: 0;
  min-height: 48rem;
  border: 1px solid rgba(231, 201, 121, .4);
  border-top: 3px solid var(--parchment);
  background: rgba(3, 17, 12, .94);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .4);
  overflow: hidden;
}
.encounter-art {
  min-height: clamp(18rem, 38vw, 32rem);
  background:
    linear-gradient(0deg, #06150f 0%, rgba(4, 18, 12, .05) 50%, rgba(4, 18, 12, .12) 100%),
    var(--encounter-art) center / cover no-repeat;
}
.encounter-story { position: relative; margin-top: -7rem; padding: clamp(1.1rem, 3vw, 2.2rem); background: linear-gradient(0deg, #06150f 84%, transparent); }
.encounter-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.encounter-meta span { padding: .3rem .55rem; border: 1px solid rgba(130, 217, 179, .35); color: #a8cbbb; background: rgba(2, 18, 12, .86); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.encounter-meta .risk-badge { border-color: currentColor; }
.encounter-result h2 { max-width: 54rem; margin: .8rem 0 .45rem; font-size: clamp(2.2rem, 5vw, 4.3rem); line-height: .98; text-shadow: 0 2px 16px #000; }
.encounter-opening { max-width: 65rem; margin: 0; color: #d9dfd9; font: clamp(1.05rem, 1.8vw, 1.28rem)/1.55 Georgia, serif; }
.encounter-at-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: 1.25rem; }
.encounter-at-glance article { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr); gap: .7rem; padding: .85rem; border: 1px solid rgba(126, 187, 151, .3); background: linear-gradient(135deg, rgba(13, 46, 31, .9), rgba(4, 24, 17, .72)); }
.encounter-at-glance svg { width: 2.1rem; height: 2.1rem; color: #d7bd72; }
.encounter-at-glance small { display: block; color: #82d9b3; font-size: .62rem; letter-spacing: .12em; }
.encounter-at-glance b { display: block; margin-top: .12rem; color: #f0dda7; font: 1.1rem Georgia, serif; }
.encounter-at-glance p { margin: .3rem 0 0; color: #aebdb3; font-size: .76rem; line-height: 1.4; }
.encounter-at-glance .encounter-kind-monster { border-color: rgba(222, 92, 73, .72); background: linear-gradient(135deg, rgba(76, 22, 17, .94), rgba(22, 9, 8, .82)); box-shadow: inset 0 0 0 1px rgba(255, 164, 111, .12); }
.encounter-at-glance .encounter-kind-monster svg { color: #ff9c73; }
.encounter-at-glance .encounter-kind-monster b { color: #ffd0a6; text-transform: uppercase; }
.encounter-at-glance .encounter-kind-beast { border-color: rgba(204, 162, 75, .62); background: linear-gradient(135deg, rgba(58, 43, 14, .94), rgba(18, 23, 10, .8)); }
.encounter-at-glance .encounter-kind-beast svg { color: #e7c467; }
.director-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1.3rem; }
.director-grid article { padding: 1rem; border: 1px solid rgba(105, 154, 124, .28); border-left: 3px solid #4d8c6c; background: rgba(4, 26, 17, .75); }
.director-grid .terrain { grid-column: 1 / -1; border-left-color: #71a9c7; background: linear-gradient(90deg, rgba(15, 47, 58, .8), rgba(4, 26, 17, .72)); }
.director-grid article:nth-child(2),
.director-grid article:nth-child(4) { border-left-color: #c49a53; }
.director-grid article:nth-child(5) { border-left-color: #d36560; }
.director-grid article:nth-child(6) { border-left-color: #9870b5; }
.director-grid small,
.encounter-footer small { color: #82d9b3; letter-spacing: .1em; }
.director-grid small { display: flex; gap: .45rem; align-items: center; }
.director-grid small svg { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; color: #d9bd70; }
.director-grid p { margin: .38rem 0 0; color: #cbd4cd; line-height: 1.48; }
.director-grid ul { margin: .45rem 0 0; padding-left: 1.1rem; color: #cbd4cd; }
.director-grid li + li { margin-top: .3rem; }
.reversible-panel,
.encounter-clock { margin-top: .8rem; padding: 1rem; border: 1px solid rgba(231, 201, 121, .3); background: rgba(6, 22, 16, .82); }
.reversible-panel > header,
.encounter-clock > header { display: flex; gap: .75rem; align-items: center; }
.reversible-panel > header svg,
.encounter-clock > header svg { width: 2rem; height: 2rem; color: #e0c578; }
.reversible-panel header small,
.encounter-clock header small,
.decisive-question small { color: #82d9b3; font-size: .64rem; letter-spacing: .13em; }
.reversible-panel h3,
.encounter-clock h3 { margin: .16rem 0 0; color: #ead8a0; font: 1.18rem Georgia, serif; }
.branch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .8rem; }
.branch-grid article { padding: .9rem; border-left: 3px solid; background: rgba(2, 14, 10, .74); }
.branch-grid article small { font-size: .62rem; letter-spacing: .08em; }
.branch-grid article p { margin: .38rem 0 0; color: #cbd4cd; line-height: 1.46; }
.branch-positive { border-color: #62c68d; }
.branch-positive small { color: #78daa1; }
.branch-negative { border-color: #cf6964; }
.branch-negative small { color: #e1857d; }
.encounter-clock { border-color: rgba(112, 164, 192, .34); }
.encounter-clock ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin: .8rem 0 0; padding: 0; list-style: none; counter-reset: none; }
.encounter-clock li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .45rem; align-items: start; padding: .7rem; background: rgba(6, 25, 27, .72); }
.encounter-clock li span { display: grid; width: 1.75rem; height: 1.75rem; place-content: center; border: 1px solid #6392a8; color: #b8d6df; font-size: .68rem; }
.encounter-clock li p { margin: 0; color: #bac8c6; font-size: .78rem; line-height: 1.42; }
.decisive-question { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .7rem; margin-top: .8rem; padding: .85rem 1rem; border-left: 3px solid #a77bc4; background: linear-gradient(90deg, rgba(51, 24, 65, .67), rgba(5, 20, 14, .74)); }
.decisive-question svg { width: 1.8rem; height: 1.8rem; color: #c8a0dc; }
.decisive-question p { margin: .24rem 0 0; color: #eadff0; font: 1rem/1.4 Georgia, serif; }
.encounter-footer { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1rem; align-items: end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(231, 201, 121, .28); }
.encounter-footer p { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 0; }
.encounter-footer p span { padding: .3rem .5rem; color: #d4e2d8; border: 1px solid #3a674e; background: #0b2b1d; font-size: .75rem; }
.lf-roll { display: grid; gap: .25rem; }
.lf-roll b { color: #eddaa1; }
.lf-roll span { color: #96a79b; font-size: .75rem; }
.encounter-empty { display: grid; min-height: 48rem; place-content: center; padding: 2rem; text-align: center; background: radial-gradient(circle, rgba(37, 75, 54, .45), transparent 22rem); }
.encounter-empty > span { color: #e2c879; font-size: 4rem; }
.encounter-empty h2 { font-size: 2.4rem; }
.encounter-empty p { max-width: 35rem; color: #9fb0a4; }

@media (max-width: 1050px) {
  .encounter-layout { grid-template-columns: 1fr; }
  .encounter-controls { position: static; }
  .context-options { grid-template-columns: repeat(2, 1fr); }
  .encounter-at-glance { grid-template-columns: 1fr; }
  .encounter-clock ol { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .encounter-shell { padding: .55rem; background-position: 68% top; background-attachment: scroll; }
  .context-options { grid-template-columns: 1fr; }
  .risk-options { grid-template-columns: repeat(5, minmax(3.2rem, 1fr)); overflow-x: auto; padding: 2px; }
  .director-grid { grid-template-columns: 1fr; }
  .branch-grid { grid-template-columns: 1fr; }
  .encounter-footer { grid-template-columns: 1fr; align-items: start; }
  .encounter-story { margin-top: -3.5rem; }
  .encounter-art { min-height: 20rem; }
}