* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0c0a09; }
body { font: 15px/1.55 "Iowan Old Style", Palatino, Georgia, serif; color: #e9ded2; }
#view { display: block; width: 100vw; height: 100vh; }

#boot {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: #0c0a09; z-index: 20; transition: opacity .6s ease;
}
#boot.gone { opacity: 0; pointer-events: none; }
.bootcard { text-align: center; }
.bootcard h1 {
  font-size: 54px; margin: 0 0 10px; color: #d8b163; letter-spacing: .04em;
  text-shadow: 0 0 30px rgba(216,177,99,.3);
}
#boot-msg { color: #a5948a; margin: 0; }

/* ------------------------------------------------------------ hud */

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud button { pointer-events: auto; }

.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding: 14px 22px;
}

.stronghold {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(14,11,10,.72); border: 1px solid #3a2f2b;
  border-radius: 11px; padding: 9px 18px; min-width: 116px;
  backdrop-filter: blur(4px);
}
.stronghold .who { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #a5948a; }
.stronghold .deck { font-size: 27px; color: #d8b163; line-height: 1.15; }
.stronghold .lbl { font-size: 11px; color: #7d6f66; }
.stronghold.active { border-color: #8d7239; box-shadow: 0 0 22px rgba(216,177,99,.2); }
.stronghold.sieged { border-color: #a33; box-shadow: 0 0 26px rgba(200,50,40,.45); }
.stronghold.sieged .deck { color: #ff6a5a; }

.turnbox { text-align: center; flex: 1; }
.turn { font-size: 21px; color: #e9ded2; }
.turn.p0 { color: #7fc4ee; }
.turn.p1 { color: #ef8b84; }
.actions { display: flex; gap: 7px; justify-content: center; margin-top: 7px; }
.dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid #5d4c44; background: #241d19;
}
.dot.on { background: #d8b163; border-color: #d8b163; box-shadow: 0 0 10px rgba(216,177,99,.55); }
.hint { font-size: 13px; color: #b9a595; margin-top: 8px; min-height: 18px; }

.hud-log {
  position: absolute; left: 22px; bottom: 168px;
  width: 260px; font-size: 13px; color: #9a8b80;
  background: rgba(14,11,10,.55); border-left: 2px solid #3a2f2b;
  padding: 8px 12px; border-radius: 0 8px 8px 0; max-height: 150px; overflow: hidden;
}
.hud-log div { margin: 2px 0; }
.hud-log div:last-child { color: #d8c8b8; }

.hud-hand {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 9px; justify-content: center; align-items: flex-end;
  padding: 8px 22px 10px;
  background: linear-gradient(transparent, rgba(10,8,7,.82) 42%);
  flex-wrap: wrap;
  /* a hovered card grows UP out of the bar, so it must not be clipped */
  overflow: visible;
}
.handcard {
  position: relative; width: 84px; padding: 0; cursor: pointer;
  background: #1b1512; border: 2px solid #3a2f2b; border-radius: 9px;
  overflow: hidden; color: inherit; font: inherit;
  transform-origin: bottom center;
  transition: transform .14s cubic-bezier(.2,.9,.3,1.2),
              border-color .12s ease, box-shadow .14s ease;
}
/* In hand there is no click-target problem, so hovering shows you the card
   properly: it grows and lifts clear of its neighbours. */
.handcard:hover, .handcard:focus-visible {
  transform: translateY(-26px) scale(2.05);
  border-color: #d8b163; z-index: 30; outline: none;
  box-shadow: 0 18px 40px rgba(0,0,0,.85), 0 0 0 1px rgba(216,177,99,.3);
}
.handcard:hover .hc-name { font-size: 8px; padding: 3px 4px; }
.handcard.sel {
  transform: translateY(-14px) scale(1.12); border-color: #d8b163;
  box-shadow: 0 0 0 2px rgba(216,177,99,.45), 0 10px 26px rgba(0,0,0,.7);
}
.handcard.sel:hover { transform: translateY(-26px) scale(2.05); }
.handcard img, .handcard .noart { display: block; width: 100%; height: 74px; object-fit: cover; }
.handcard .noart { background: #2a221c; }
.hc-name {
  display: block; font-size: 11px; line-height: 1.3; padding: 4px 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #d8c8b8;
}
.hc-cost {
  position: absolute; top: 4px; left: 4px; width: 19px; height: 19px;
  display: grid; place-items: center; border-radius: 5px;
  background: rgba(10,8,7,.85); border: 1px solid #8d7239;
  font-size: 12px; color: #d8b163;
}
.hc-inert {
  position: absolute; top: 4px; right: 4px;
  background: rgba(10,8,7,.85); border: 1px solid #5d4c44;
  border-radius: 4px; font-size: 9px; padding: 1px 4px; color: #9a8b80;
}
.tacticcard { border-style: dashed; }
.handempty { color: #7d6f66; font-size: 13px; padding: 30px 0; }

.exitbtn {
  position: absolute; left: 22px; bottom: 150px;
  background: rgba(14,11,10,.8); border: 1px solid #3a2f2b; color: #a5948a;
  border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer;
}
.exitbtn:hover { color: #ef8b84; border-color: #7d1418; }

.banner {
  position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%);
  background: rgba(14,11,10,.92); border: 1px solid #8d7239;
  border-radius: 14px; padding: 20px 38px; font-size: 24px; color: #d8b163;
  box-shadow: 0 16px 60px rgba(0,0,0,.8); text-align: center;
}
.bannertext { margin-bottom: 4px; }
.bannerbtn { width: auto; margin-top: 14px; padding: 10px 22px; font-size: 15px; }
.banner.good { border-color: #2f6b47; color: #6fcf97; }
.banner.bad { border-color: #7d1418; color: #ef8b84; }

/* ------------------------------------------------------------ choices */

.choice {
  position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%);
  background: rgba(14,11,10,.94); border: 1px solid #8d7239;
  border-radius: 12px; padding: 14px 18px; max-width: min(760px, 92vw);
  box-shadow: 0 14px 44px rgba(0,0,0,.75);
}
.choice-prompt { color: #d8b163; font-size: 15px; margin-bottom: 10px; text-align: center; }
.choice-opts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.choicebtn {
  background: #221b17; border: 1px solid #5d4c44; color: #d8c8b8;
  border-radius: 8px; padding: 7px 13px; font: inherit; font-size: 13px; cursor: pointer;
}
/* an option that names a card shows the card */
.choicebtn.hascard {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 104px; padding: 7px;
}
.choicebtn.hascard img {
  width: 88px; height: 88px; object-fit: cover; border-radius: 6px;
  border: 1px solid #3a2f2b;
}
.choicebtn.hascard span {
  /* Two lines rather than an ellipsis: "the middle row, left" is the WHOLE
     answer, and "the middle row, ..." is no answer at all. */
  font-size: 11px; line-height: 1.25; text-align: center;
  max-width: 96px; white-space: normal; word-break: break-word;
}
.choicebtn.hascard.on { background: #3a2f18; }
.choice-opts { max-height: 46vh; overflow-y: auto; }
.choicebtn:hover { border-color: #8d7239; color: #fff; }
.choicebtn.on { background: #3a2f18; border-color: #d8b163; color: #f0cd8a; }
.choicebtn.yes { background: #2f6b47; border-color: #6fcf97; color: #eaffef; }
.choicebtn:disabled { opacity: .45; cursor: default; }

/* ------------------------------------------------------------ lobby */

#lobby {
  position: fixed; inset: 0; z-index: 15; overflow: auto;
  display: grid; place-items: center; padding: 28px 16px;
  background: radial-gradient(circle at 50% 30%, rgba(40,28,22,.6), rgba(8,6,5,.94) 70%);
  backdrop-filter: blur(3px);
}
#lobby[hidden] { display: none; }

.lobby-card {
  width: min(560px, 94vw);
  background: rgba(16,12,11,.96); border: 1px solid #3a2f2b;
  border-radius: 16px; padding: 26px 28px 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.8);
}
.lobby-card h1 {
  margin: 0; font-size: 42px; color: #d8b163; letter-spacing: .04em; text-align: center;
  text-shadow: 0 0 26px rgba(216,177,99,.25);
}
.lobby-sub { margin: 4px 0 20px; text-align: center; color: #a5948a; font-size: 14px; }

.lobby-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.lobbytab {
  flex: 1; background: #1c1613; border: 1px solid #3a2f2b; color: #a5948a;
  border-radius: 9px; padding: 9px 6px; font: inherit; font-size: 14px; cursor: pointer;
}
.lobbytab:hover { color: #e9ded2; border-color: #6b5350; }
.lobbytab.on { background: #d8b163; border-color: #d8b163; color: #1a1207; font-weight: 600; }

.lobby-label {
  display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: #7d6f66; margin: 14px 0 7px;
}
.deckpick { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.deckbtn {
  text-align: left; background: #1c1613; border: 1px solid #3a2f2b; color: #d8c8b8;
  border-radius: 9px; padding: 9px 11px; font: inherit; cursor: pointer;
}
.deckbtn:hover { border-color: #6b5350; }
.deckbtn.on { border-color: #d8b163; background: #241c12; }
.dname { display: block; font-size: 14px; }
.dfac { display: block; font-size: 11px; color: #8d7f74; margin-top: 2px; }

#joincode {
  width: 100%; background: #1c1613; border: 1px solid #3a2f2b; color: #d8b163;
  border-radius: 9px; padding: 12px; font: inherit; font-size: 26px;
  letter-spacing: .34em; text-align: center; text-transform: uppercase;
}
#joincode:focus { outline: 2px solid #8d7239; }

.bigbtn {
  width: 100%; margin-top: 18px; background: #c8242a; border: 0; color: #fff3e2;
  border-radius: 10px; padding: 13px; font: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer; box-shadow: 0 0 22px rgba(200,36,42,.32);
}
.bigbtn:hover { background: #e03a40; }
.bigbtn:disabled { background: #4a2a2c; color: #9a8b80; box-shadow: none; cursor: default; }

.roomcode { margin-top: 16px; text-align: center; }
.roomcode .code {
  display: inline-block; font-size: 46px; letter-spacing: .3em; color: #d8b163;
  background: #1c1613; border: 1px solid #8d7239; border-radius: 12px;
  padding: 10px 14px 10px 24px;
}
.lobby-status { text-align: center; color: #b9a595; font-size: 13px; min-height: 18px; margin: 14px 0 0; }
.lobby-status.bad { color: #ef8b84; }
.lobby-note { text-align: center; color: #7d6f66; font-size: 12px; margin: 10px 0 0; line-height: 1.5; }

@media (max-width: 480px) { .deckpick { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ action menu */

.actionmenu {
  position: absolute; width: 250px;
  background: rgba(14,11,10,.96); border: 1px solid #8d7239;
  border-radius: 11px; padding: 6px; z-index: 12;
  box-shadow: 0 16px 44px rgba(0,0,0,.8);
}
.actionmenu[hidden] { display: none; }
.amitem {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 8px; padding: 9px 11px;
  color: #e9ded2; font: inherit;
}
.amitem:hover { background: #2a211a; }
.amitem.off { opacity: .4; cursor: default; }
.amitem.off:hover { background: none; }
.amitem.defend:hover { background: #3a1614; }
.amlabel { display: block; font-size: 15px; }
.amitem.defend .amlabel { color: #ef8b84; }
.amitem.ability .amlabel { color: #d8b163; font-style: italic; }
.amdetail {
  display: block; font-size: 12px; color: #a5948a; line-height: 1.45; margin-top: 3px;
  white-space: pre-line;   /* the reason a row is unavailable goes on its own line */
}
.amitem.fight .amlabel { color: #ef8b84; }

/* ------------------------------------------------------------ stack panel */

.stackpanel {
  position: absolute; right: 22px; top: 108px; width: 252px;
  background: rgba(14,11,10,.93); border: 1px solid #3a2f2b;
  border-radius: 11px; padding: 9px; z-index: 11;
  box-shadow: 0 12px 34px rgba(0,0,0,.7);
}
.stackpanel[hidden] { display: none; }
.sp-title {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: #7d6f66; padding: 2px 4px 7px;
}
.sprow {
  display: flex; align-items: center; gap: 8px; pointer-events: auto;
  padding: 5px 6px; border-radius: 7px; cursor: pointer;
}
.sprow:hover { background: #241c17; }
.sprow.top { background: #241c12; border: 1px solid #5d4c44; }
.sprow.attach { margin-left: 14px; opacity: .92; }
.sprow img, .spnoart {
  width: 34px; height: 34px; object-fit: cover; border-radius: 5px;
  border: 1px solid #3a2f2b; flex: none; background: #2a221c;
}
.spname {
  font-size: 12px; color: #d8c8b8; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spname b { color: #d8b163; }
.sptag { font-size: 9px; color: #7d6f66; text-transform: uppercase; letter-spacing: .07em; }
.sparrow { color: #d8b163; font-size: 15px; flex: none; }

.cardzoom {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(6,4,4,.9); pointer-events: auto; cursor: zoom-out;
}
.cardzoom[hidden] { display: none; }
.cardzoom img {
  width: min(460px, 86vw); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.85);
}

/* A card from the stack panel, big enough to READ, beside the panel rather
   than over the board — hovering a row should not black out the game. */
.sppeek {
  position: absolute; right: 288px; top: 108px; z-index: 12;
  pointer-events: none;
}
.sppeek[hidden] { display: none; }
.sppeek img {
  width: min(330px, 30vw); border-radius: 12px;
  border: 1px solid #5d4c44;
  box-shadow: 0 18px 50px rgba(0,0,0,.85);
}
.stackpanel.pinned { border-color: #6b5647; }
.sp-title { display: flex; align-items: center; justify-content: space-between; }
.sp-close {
  background: none; border: 0; color: #9b8a7e; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0 2px;
}
.sp-close:hover { color: #e8d9c5; }

/* A card you cannot pay for right now. Dimmed, with its cost in red — the
   rules always refused these, but silently. */
.handcard.unaffordable { opacity: .45; filter: saturate(.5); }
.handcard.unaffordable:hover { opacity: .62; }
.hc-cost.short { background: #7a2019; color: #ffd7d2; }

/* The little board shown for a choice that lands on an empty square. */
.minib {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  width: 42px; height: 42px; flex: none;
  padding: 3px; border-radius: 5px;
  background: #241c17; border: 1px solid #3a2f2b;
}
.minib i { background: #3d322b; border-radius: 1px; }
.minib i.on { background: #d8b163; box-shadow: 0 0 5px rgba(216,177,99,.8); }
.minib.void, .minib.sh { outline: 1px solid #6b5647; }

/* A discard pile can be twenty cards deep, so the panel scrolls rather than
   running off the bottom of the screen. */
.stackpanel { max-height: 62vh; overflow-y: auto; }

/* ---------------------------------------------------------- effects bench */
/* DEV ONLY. Delete this block with game/js/fxlab.js. */
#fxlab {
  position: absolute; left: 18px; top: 96px; width: 268px; z-index: 30;
  background: rgba(14,11,10,.94); border: 1px solid #3a2f2b; border-radius: 11px;
  padding: 10px; max-height: 76vh; overflow-y: auto;
  box-shadow: 0 12px 34px rgba(0,0,0,.7);
}
.fxl-head b { color: #e8d9c5; font-size: 14px; }
.fxl-sub { display: block; color: #7d6f66; font-size: 11px; margin-top: 2px; }
.fxl-speed { display: flex; gap: 8px; align-items: center; margin: 9px 0; font-size: 11px; color: #9b8a7e; }
.fxl-speed button {
  background: #241c17; border: 1px solid #5d4c44; color: #d8c8b8;
  border-radius: 6px; padding: 3px 9px; font: inherit; cursor: pointer;
}
.fxl-speed button:hover { border-color: #8d7239; color: #fff; }
.fxl-group {
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: #7d6f66; margin: 11px 0 4px; line-height: 1.35;
}
.fxl-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #1d1714; border: 1px solid #332a25; color: #d8c8b8;
  border-radius: 7px; padding: 6px 8px; margin-bottom: 4px; font: inherit;
}
.fxl-item:hover { background: #2a211b; border-color: #6b5647; }
.fxl-item span { display: block; font-size: 12.5px; }
.fxl-item i { display: block; font-size: 10.5px; color: #8a7a6d; font-style: normal; line-height: 1.3; }
.fxl-now { margin-top: 9px; font-size: 11px; color: #d8b163; min-height: 14px; line-height: 1.35; }

/* ------------------------------------------------------------ the ending */

/* The arena itself plays the ending (game/js/victory.js): the light goes out
   of it, a Stronghold falls, the camera leaves its seat. So this is a LOWER
   THIRD over a picture worth seeing, not a dialog in front of it — the panel
   holds the bottom of the frame and the table keeps the top. */

#hud.is-ending .hud-hand,
#hud.is-ending .hud-log,
#hud.is-ending .exitbtn,
#hud.is-ending .turnbox,
#hud.is-ending .stackpanel,
#hud.is-ending .sppeek,
#hud.is-ending .actionmenu { opacity: 0; pointer-events: none; transition: opacity .7s ease; }
/* Both deck counters go with the rest of it. Everything they were there to
   tell you is now said in words, and in a dark frame two lit boxes in the
   corners are the first thing the eye lands on. */
#hud.is-ending .stronghold { opacity: 0; transition: opacity 1.1s ease; }

.ending { position: absolute; inset: 0; pointer-events: none; }

/* Darkening the corners is what makes a rendered frame read as a held shot.
   It is also the only safe way to buy contrast here: the renderer tone-maps,
   so anything added as light comes back as a white slab.

   TWO layers, not one. They used to be a single element and folding the panel
   away took the whole thing with it — which is the one moment the frame has to
   stand on its own, and what it showed was the lower half of the screen filled
   with lit grass outside the ruin. The grade is not part of the panel: the
   vignette stays while the arena is playing an ending, and only the scrim that
   exists to make the text readable goes with the text. */
.end-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 78% 62% at 50% 34%, transparent 18%, rgba(6,5,4,.84) 100%);
  opacity: 0; animation: end-veil 1.1s ease forwards;
}
.end-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,5,4,.97) 22%, rgba(6,5,4,.76) 42%, transparent 68%);
  opacity: 0; animation: end-veil .9s ease forwards;
}
@keyframes end-veil { to { opacity: 1; } }

.end-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 34px 26px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(16px);
  animation: end-rise .7s cubic-bezier(.2,.7,.3,1) .35s forwards;
}
@keyframes end-rise { to { opacity: 1; transform: none; } }
.ending.folded .end-body {
  opacity: 0; transform: translateY(24px);
  transition: opacity .45s ease, transform .45s ease; animation: none;
}
.ending.folded .end-veil { opacity: 0; transition: opacity .45s ease; animation: none; }
/* #hud gives every button pointer-events:auto, so folding the panel by fading
   it left two invisible buttons lying across the bottom of the table, eating
   clicks on a board the fold exists to let you look at. Take them out of the
   hit test as well as out of sight. */
.ending.folded, .ending.folded button { pointer-events: none; }
.ending.folded .end-body { visibility: hidden; transition: visibility 0s .45s; }

/* The small type sits on the top edge of the veil, where the board is still
   bright — "THE FIELD IS LOST" was half-eaten by a lit flagstone behind it and
   read as "THE FIELD IS LO". Everything at this size carries its own shadow. */
.end-over {
  font-size: 12px; letter-spacing: .34em; text-transform: uppercase;
  color: #b3a397; margin-bottom: 10px;
  text-shadow: 0 1px 3px #000, 0 0 16px rgba(0,0,0,.95);
}
/* A hairline in the winning faction's colour, which is the only place the
   faction gets to speak on this screen. */
.end-over::after {
  content: ''; display: block; width: 74px; height: 1px; margin: 9px auto 0;
  background: var(--accent); opacity: .75;
}
.end-title {
  margin: 0; font-size: 58px; line-height: 1.05; letter-spacing: .015em;
  color: #f0e2cf; text-shadow: 0 2px 26px rgba(0,0,0,.9);
}
.end-sub {
  margin-top: 8px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: #9a8b80; text-shadow: 0 1px 3px #000, 0 0 14px rgba(0,0,0,.9);
}
.end-why {
  margin: 14px 0 0; max-width: 620px; font-size: 16px; color: #cbbcae;
  text-shadow: 0 1px 12px rgba(0,0,0,.9);
}
.end-why b { color: #e3d5c4; font-weight: normal; }

.ending.won .end-title { color: #f2d69a; text-shadow: 0 2px 34px rgba(216,177,99,.35), 0 2px 20px rgba(0,0,0,.9); }
.ending.lost .end-title { color: #ded1c4; }
.ending.lost .end-over { color: #b08a83; }
.ending.draw .end-title { color: #d9cfc2; }

/* Which cards were left at the end. The one part of this screen that is about
   THIS game and not about winning in the abstract. */
.end-roll { margin-top: 16px; }
.end-rolltitle {
  display: block; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: #8a7a6d; margin-bottom: 8px; text-shadow: 0 1px 3px #000;
}
.end-cards { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.end-card { margin: 0; width: 62px; }
.end-card img, .end-noart {
  display: block; width: 62px; height: 62px; object-fit: cover; border-radius: 6px;
  border: 1px solid #4b3e36; background: #241c17;
  box-shadow: 0 6px 18px rgba(0,0,0,.7);
}
.ending.won .end-card img { border-color: #7a6334; }
.ending.lost .end-card img { filter: grayscale(.72) brightness(.62); }
.end-card figcaption {
  font-size: 9.5px; line-height: 1.25; color: #9a8b80; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.end-buttons { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
/* NOT .bigbtn. That is the lobby's start button and it is a saturated #c8242a
   with a red glow under it — dropped into a firelit ruin at the end of a match
   it was the brightest object on the screen, an alarm sitting under a victory.
   The HUD's own language for "this matters" is the .banner: dark panel, brass
   border, brass text, and that is what this takes. */
.end-leave {
  width: auto; margin: 0; padding: 11px 26px; font-size: 15px; font-weight: normal;
  background: rgba(14,11,10,.86); border: 1px solid #8d7239; color: #d8b163;
  border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.6); cursor: pointer;
}
.end-leave:hover { border-color: #d8b163; color: #f2d69a; background: rgba(28,22,19,.92); }
/* Victory gets the brass lit; defeat gets it cold. Same shape, different
   temperature — the two screens are told apart before a word is read. */
.ending.won .end-leave {
  border-color: #b08f46; box-shadow: 0 10px 34px rgba(0,0,0,.6), 0 0 26px rgba(216,177,99,.18);
}
.ending.lost .end-leave { border-color: #4b3e36; color: #b9a595; }
.ending.lost .end-leave:hover { border-color: #7d6f66; color: #ded1c4; background: rgba(28,22,19,.92); }
.end-stay {
  background: none; border: 0; border-bottom: 1px solid #4b3e36; color: #9a8b80;
  font: inherit; font-size: 13px; padding: 4px 2px; cursor: pointer;
}
.end-stay:hover { color: #d8c8b8; border-color: #8d7239; }

.end-tab {
  position: absolute; right: 22px; bottom: 22px;
  background: rgba(14,11,10,.88); border: 1px solid #5d4c44; color: #d8c8b8;
  border-radius: 9px; padding: 9px 15px; font: inherit; font-size: 13px; cursor: pointer;
}
.end-tab:hover { border-color: #8d7239; color: #fff; }
.end-tab[hidden] { display: none; }

@media (max-height: 720px) {
  .end-title { font-size: 42px; }
  .end-card, .end-card img, .end-noart { width: 48px; }
  .end-card img, .end-noart { height: 48px; }
}

/* ------------------------------------------------------------ soundtrack */

/* Bottom-left, where nothing else lives: the log is above it, the hand is
   centred, and the two Stronghold panels are at the top. Deliberately quiet —
   a volume slider is not a thing anybody should be looking at while playing. */
#sound {
  position: fixed; left: 18px; bottom: 16px; z-index: 12;
  display: flex; align-items: center; gap: 8px;
  background: rgba(14,11,10,.72); border: 1px solid #3a2f2b;
  border-radius: 11px; padding: 5px 10px;
  backdrop-filter: blur(4px);
  opacity: .34; transition: opacity .18s ease;
}
#sound:hover, #sound:focus-within { opacity: 1; }

#sound-mute {
  background: none; border: 0; cursor: pointer; padding: 0 2px;
  color: #d8c8b8; font-size: 15px; line-height: 1;
}
#sound-mute[aria-pressed="true"] { color: #6b5a52; }

/* The slider only takes up room once you are actually reaching for it. */
#sound-vol {
  width: 0; opacity: 0; accent-color: #c89a5b;
  transition: width .18s ease, opacity .18s ease;
}
#sound:hover #sound-vol, #sound:focus-within #sound-vol { width: 78px; opacity: 1; }