@import url('https://fonts.googleapis.com/css2?family=Almendra:wght@400;700&family=Crimson+Text:wght@400;600;700&family=IM+Fell+English+SC&display=swap');

.lord-town {
  --lf-ink: #392419;
  --lf-dark: #211711;
  --lf-stone: #4b3c2b;
  --lf-brass: #d6a849;
  --lf-gold: #f5d276;
  --lf-paper: #f0dca8;
  --lf-paper-light: #ffeab9;
  --lf-red: #8b2420;
  --lf-leaf: #315e2f;
  --lf-blue: #174b78;
  min-height: 100dvh;
  padding: clamp(8px, 1.7vw, 18px);
  color: var(--lf-ink);
  font-family: 'Crimson Text', Georgia, serif;
  background:
    radial-gradient(ellipse at 20% 12%, rgba(229, 191, 133, .19), transparent 29%),
    radial-gradient(ellipse at 78% 62%, rgba(25, 17, 11, .3), transparent 38%),
    repeating-linear-gradient(164deg, rgba(255, 228, 182, .025) 0 2px, transparent 2px 8px),
    linear-gradient(120deg, #76614a, #514436 34%, #6d5842 67%, #493a2d);
}
.lord-town *, .lord-town *::before, .lord-town *::after { box-sizing: border-box; }
.lord-town button, .lord-town input { font: inherit; }
.lord-town button { color: inherit; }
.lord-town button:focus-visible, .lord-town input:focus-visible { outline: 3px solid #a02b1f; outline-offset: 2px; }
.lf-stone-frame {
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 9px;
  border: 4px ridge #c28a39;
  outline: 2px solid rgba(43, 27, 15, .7);
  background:
    linear-gradient(90deg, rgba(18, 11, 6, .36), transparent 10% 90%, rgba(18, 11, 6, .4)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(22, 13, 8, .52) 24px 27px, rgba(224, 174, 99, .13) 28px 29px, transparent 30px 53px),
    linear-gradient(105deg, #4a3321, #715437 26%, #503924 60%, #684a2e);
  box-shadow: 0 12px 40px rgba(24, 15, 8, .55), inset 0 0 0 2px #68452b, inset 0 0 0 5px #24180f;
  position: relative;
}
.lf-stone-frame::before, .lf-stone-frame::after {
  content: ''; position: absolute; z-index: 3; width: 15px; height: 15px;
  border: 2px solid #e3bb61; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe7a0, #8a5622 75%);
  box-shadow: 0 1px 3px #1b1009;
}
.lf-stone-frame::before { left: 4px; top: 4px; }
.lf-stone-frame::after { right: 4px; top: 4px; }
.lf-header {
  min-height: 102px; display: flex; align-items: center; justify-content: center; position: relative;
  overflow: hidden; margin: 0 0 10px; border: 2px solid #9c682f;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(226, 164, 68, .25), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(19, 12, 7, .22) 15px 17px),
    linear-gradient(90deg, #241610, #58351f 24%, #3e2517 50%, #59351e 77%, #261710);
  box-shadow: inset 0 0 0 3px #26180f, inset 0 0 20px #140c08, 0 3px 0 #18100b;
}
.lf-vine { position: absolute; top: -9px; bottom: -8px; width: 115px; opacity: .55; pointer-events: none; }
.lf-vine::before, .lf-vine::after { content: ''; position: absolute; width: 95px; height: 35px; border: 2px solid #597043; border-color: #597043 transparent transparent; border-radius: 50%; transform: rotate(22deg); }
.lf-vine::before { top: 22px; left: 0; }
.lf-vine::after { top: 49px; left: 14px; transform: rotate(-18deg); }
.lf-vine-left { left: 0; }
.lf-vine-right { right: 0; transform: scaleX(-1); }
.lf-title-plaque {
  z-index: 1; width: min(620px, 72%); min-height: 77px; display: flex; align-items: center; justify-content: center;
  position: relative; padding: 7px 74px; border: 3px ridge #d8ad50; border-radius: 5px;
  background: linear-gradient(180deg, #6f301e, #391b13 45%, #562718);
  box-shadow: 0 3px 0 #20120c, inset 0 0 0 2px #28140d, inset 0 0 20px rgba(8, 4, 3, .75);
  transform: perspective(500px) rotateX(1deg);
}
.lf-title-plaque::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(255, 217, 123, .5); pointer-events: none; }
.lf-dragon { position: absolute; z-index: 2; top: 0; width: clamp(110px, 16vw, 180px); height: 82px; object-fit: fill; opacity: .98; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(9, 4, 2, .7)); }
.lf-dragon-left { left: 2.5%; }
.lf-dragon-right { right: 2.5%; }
.lf-brand-text { text-align: center; position: relative; z-index: 1; text-shadow: 0 2px 2px #190b07, 0 0 8px rgba(255, 196, 82, .2); }
.lf-overline { display: block; color: #efc96d; font: 10px 'IM Fell English SC', Georgia, serif; letter-spacing: .17em; text-transform: uppercase; }
.lf-brand-text h1 { margin: 1px 0 0; color: #fff0bd; font: clamp(24px, 3.1vw, 36px)/1 'Almendra', Georgia, serif; text-shadow: 0 2px 0 #712713, 0 3px 4px #1a0b05; white-space: nowrap; }
.lf-brand-text h1 em { color: #f2bf53; font-style: normal; }
.lf-rule { display: block; width: 62%; height: 1px; margin: 5px auto 0; background: linear-gradient(90deg, transparent, #e3b85a, transparent); }
.lf-rule i { display: block; width: 5px; height: 5px; margin: -2px auto 0; transform: rotate(45deg); background: #f8d984; }
.lf-header-meta { position: absolute; right: 21px; top: 18px; color: #f4d98c; text-align: right; font: 12px 'IM Fell English SC', Georgia, serif; text-shadow: 0 1px 3px #180d07; }
.lf-header-meta small { display: block; color: #cfb084; margin-top: 5px; font: 10px 'Crimson Text', Georgia, serif; }
.lf-sun-mark { display: inline-block; vertical-align: -2px; width: 11px; height: 11px; margin-right: 5px; border-radius: 50%; background: #f5cc65; box-shadow: 0 0 0 3px rgba(245,204,101,.22), 0 0 10px #efb546; }
.lf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 302px; gap: 12px; align-items: stretch; }
.lf-adventure { min-width: 0; }
.lf-scene-frame { padding: 5px; border: 3px ridge #c39046; background: linear-gradient(145deg, #f5d278, #754523 30%, #e7ba5b 51%, #604027); box-shadow: 0 3px 6px rgba(12,7,4,.62), inset 0 0 0 2px #382416; }
.lf-scene {
  height: clamp(280px, 32vw, 356px); min-height: 275px; position: relative; overflow: hidden;
  background: #8dbfdb url('images/fantasy-town/town-square.jpg') center 53% / cover no-repeat;
  border: 2px solid #392516; box-shadow: inset 0 0 36px rgba(22, 18, 12, .36);
}
.lf-scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 22px rgba(27,17,10,.34); background: linear-gradient(180deg, rgba(27,35,24,.13), transparent 28% 73%, rgba(23,16,10,.22)); }
.lf-scene-light { position: absolute; width: 55%; height: 60%; right: -6%; top: -20%; background: radial-gradient(ellipse, rgba(255,231,143,.45), transparent 70%); mix-blend-mode: screen; }
.lf-location-ribbon { position: absolute; z-index: 2; bottom: -1px; left: 50%; transform: translateX(-50%); min-width: 48%; padding: 8px 31px 11px; color: #4b2712; text-align: center; white-space: nowrap; font: 23px/1 'Almendra', Georgia, serif; background: linear-gradient(#f6d77f, #d6a64e 63%, #9c6629); border: 2px ridge #ffe39a; box-shadow: 0 -2px 6px rgba(45,25,10,.4), inset 0 0 0 2px #9a6428; clip-path: polygon(0 10%, 9% 16%, 7% 0, 93% 0, 91% 16%, 100% 10%, 96% 100%, 4% 100%); text-shadow: 0 1px rgba(255,244,202,.55); }
.lf-story-panel { min-height: 87px; position: relative; display: flex; align-items: center; gap: 12px; margin: 8px 0 9px; padding: 14px 18px 13px 17px; border: 3px ridge #d1a04c; background: repeating-linear-gradient(0deg, rgba(153,106,44,.08) 0 1px, transparent 1px 4px), linear-gradient(110deg, #f4dfad, #ffecc2 48%, #eed8a5); box-shadow: inset 0 0 0 2px #fff0c9, inset 0 0 15px rgba(120,75,27,.19), 0 2px 3px rgba(14,8,3,.5); }
.lf-story-panel::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(151,104,43,.55); pointer-events: none; }
.lf-story-ornament { z-index: 1; width: 33px; height: 33px; flex: none; display: grid; place-items: center; border: 2px ridge #bd8840; border-radius: 50%; color: #8f351f; font-size: 18px; background: #f8e6b7; box-shadow: inset 0 0 0 2px #ffefc8; }
.lf-story-copy { z-index: 1; }
.lf-narrative { margin: 0; color: #382718; font: 16px/1.25 'Crimson Text', Georgia, serif; text-shadow: 0 1px rgba(255,255,255,.35); }
.lf-corner { position: absolute; z-index: 2; width: 11px; height: 11px; border-color: #8f5e29; border-style: solid; }
.lf-corner-tl { top: 0; left: 0; border-width: 2px 0 0 2px; }.lf-corner-tr { top: 0; right: 0; border-width: 2px 2px 0 0; }.lf-corner-bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }.lf-corner-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.lf-actions { position: relative; }
.lf-primary-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lf-destination {
  min-height: 76px; display: flex; align-items: center; gap: 9px; position: relative; padding: 8px 9px;
  border: 3px ridge #e0b451; border-radius: 4px; color: #fff2c4 !important; text-align: left;
  cursor: pointer; box-shadow: inset 0 0 0 2px rgba(28,15,7,.8), inset 0 3px 6px rgba(255,255,255,.15), 0 3px 0 #21130b, 0 5px 6px rgba(15,8,4,.5);
  text-shadow: 0 2px 2px #1d1009; transition: transform .14s ease, filter .14s ease;
}
.lf-destination:hover { transform: translateY(-2px); filter: brightness(1.12); }
.lf-destination:active { transform: translateY(1px); }
.lf-destination-f { background: linear-gradient(#4f8139, #295329 58%, #1d4022); }
.lf-destination-i { background: linear-gradient(#a23d2d, #79251e 58%, #571a18); }
.lf-destination-shops { background: linear-gradient(#3479a6, #21577d 58%, #153d5e); }
.lf-destination-icon { width: 39px; height: 39px; flex: none; display: grid; place-items: center; color: #ffe09a; border: 1px solid rgba(255,223,151,.62); background: radial-gradient(circle at 35% 25%, rgba(255,241,192,.25), rgba(28,16,8,.4)); box-shadow: inset 0 0 0 2px rgba(20,12,7,.46), 0 1px 2px #170d07; }
.lf-icon { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.lf-destination-copy { min-width: 0; flex: 1; }
.lf-destination-copy b { display: block; color: #fff1bf; font: 17px/1.02 'Almendra', Georgia, serif; }
.lf-destination-copy small { display: block; margin-top: 4px; color: #f3dba5; font: 10px/1.1 'Crimson Text', Georgia, serif; }
.lf-keycap { align-self: flex-start; min-width: 17px; padding: 2px 4px; color: #ffe9aa; border: 1px solid rgba(255,220,150,.38); background: rgba(21,12,7,.38); text-align: center; font: 9px 'IM Fell English SC', Georgia, serif; }
.lf-shop-shelf { margin: 7px 0; padding: 7px; border: 2px ridge #bf8b3d; background: linear-gradient(115deg,#f5e1b0,#e9d09a); box-shadow: inset 0 0 0 2px #fff0c8; }
.lf-shelf-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 3px 6px; color: #654321; font: 13px 'IM Fell English SC', Georgia, serif; }
.lf-shelf-heading button { border: 0; background: transparent; color: #7b2c1e; cursor: pointer; font: 12px 'Crimson Text', Georgia, serif; }
.lf-shelf-heading button b { font-size: 17px; padding-left: 4px; }
.lf-shop-action { display: inline-flex !important; width: calc(33.333% - 5px); }
.lf-secondary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.lf-small-action { min-width: 0; min-height: 34px; display: flex; align-items: center; gap: 6px; padding: 4px 7px; position: relative; color: #f5dfaa !important; background: linear-gradient(#4b3524, #2f2117); border: 2px ridge #b37a35; box-shadow: inset 0 0 0 1px #24160e, 0 2px 2px rgba(10,6,3,.7); cursor: pointer; text-align: left; transition: filter .13s ease, transform .13s ease; }
.lf-small-action:hover { filter: brightness(1.22); transform: translateY(-1px); }
.lf-small-action > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; flex: 1; font: 12px/1.05 'Crimson Text', Georgia, serif; }
.lf-small-icon { width: 20px; height: 20px; flex: none; display: grid; place-items: center; color: #efc76f; }
.lf-small-icon .lf-icon { width: 18px; height: 18px; }
.lf-small-action kbd { padding: 1px 3px; color: #d6b775; border: 1px solid rgba(255,221,143,.22); background: rgba(17,10,6,.35); font: 9px 'IM Fell English SC', Georgia, serif; }
.lf-quit { border-color: #9d4432; }
.lf-mail-preview { margin-top: 8px; padding: 9px 11px; background: #f2dfae; border: 2px ridge #c89849; box-shadow: inset 0 0 0 2px #fff0c8; }
.lf-mail-preview label { display: flex; justify-content: space-between; color: #51351c; font: 14px 'IM Fell English SC', Georgia, serif; }
.lf-mail-preview label span { color: #89704b; font: 11px 'Crimson Text', Georgia, serif; }
.lf-mail-row { display: flex; gap: 6px; margin-top: 6px; }
.lf-mail-row input { min-width: 0; flex: 1; height: 33px; padding: 5px 9px; color: #3a2a1a; background: #fff3d0; border: 1px solid #a88048; }
.lf-mail-row button { padding: 0 11px; color: #fff0be; background: linear-gradient(#92412b,#642519); border: 2px ridge #d1a557; cursor: pointer; font: 12px 'IM Fell English SC', Georgia, serif; }
.lf-mail-result { margin: 6px 0 0; font: italic 12px 'Crimson Text', Georgia, serif; }
.lf-feedback { min-height: 24px; display: flex; align-items: center; gap: 7px; margin-top: 7px; padding: 4px 8px; color: #e4ca91; border-left: 2px solid #b27d37; background: rgba(24,15,9,.52); font: 11px/1.25 'Crimson Text', Georgia, serif; }
.lf-feedback-star { color: #edc66b; }
.lf-character { position: relative; min-width: 0; padding: 12px 14px 10px; border: 4px ridge #d3a24b; background: repeating-linear-gradient(0deg, rgba(140,90,32,.055) 0 1px, transparent 1px 4px), linear-gradient(130deg,#ffe8b3,#f1d69c 43%,#ffe8b4); box-shadow: inset 0 0 0 3px #fff0c7, inset 0 0 18px rgba(115,73,27,.24), 0 4px 8px rgba(14,8,3,.62); }
.lf-character::before { content: ''; position: absolute; inset: 5px; pointer-events: none; border: 1px solid rgba(155,103,40,.55); }
.lf-panel-top { display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 5px 5px; border-bottom: 1px solid rgba(116,75,32,.45); color: #743a1d; }
.lf-panel-label { font: 14px 'IM Fell English SC', Georgia, serif; letter-spacing: .07em; text-transform: uppercase; }
.lf-panel-flourish { color: #b28336; font-size: 24px; line-height: 1; }
.lf-profile { display: flex; align-items: center; gap: 12px; padding: 11px 3px 12px; border-bottom: 2px solid rgba(130,83,35,.45); }
.lf-portrait-wrap { position: relative; width: 77px; height: 83px; flex: none; padding: 4px; border: 3px ridge #a77836; background: linear-gradient(135deg,#f6d17a,#714625); box-shadow: 0 2px 4px rgba(55,33,14,.42); }
.lf-portrait { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.lf-portrait-corner { position: absolute; inset: 3px; border: 1px solid rgba(255,225,146,.62); pointer-events: none; }
#fantasy-town .lf-portrait-wrap { width: 88px; height: 108px; }
#fantasy-town .lf-portrait,
#fantasy-town .lf-mobile-summary > img { object-fit: contain; object-position: center; background-color: #f4dfad; }
.lf-profile-copy h2 { margin: 0; color: #382315; font: 25px/1 'Almendra', Georgia, serif; }
.lf-profile-copy p { margin: 4px 0 7px; color: #5e4426; font: 16px 'Crimson Text', Georgia, serif; }
.lf-mobile-summary { display: none; }
.lf-character-body { display: block; }
.lf-health { padding: 10px 2px 11px; border-bottom: 1px solid rgba(130,83,35,.4); }
.lf-stat-heading { display: flex; justify-content: space-between; align-items: center; color: #422a19; font: 15px 'IM Fell English SC', Georgia, serif; }
.lf-stat-heading > span { display: flex; align-items: center; gap: 7px; }
.lf-stat-heading b { font: 700 15px 'Crimson Text', Georgia, serif; }
.lf-stat-heading small { font-size: 13px; color: #725733; }
.lf-heart { width: 13px; height: 13px; display: inline-block; position: relative; transform: rotate(-45deg); background: #a72c21; margin: 0 3px 0 2px; }
.lf-heart::before,.lf-heart::after { content: ''; position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #b93828; }
.lf-heart::before { top: -7px; left: 0; }.lf-heart::after { left: 7px; top: 0; }
.lf-health-track { height: 10px; margin-top: 7px; padding: 1px; border: 1px solid #6f241b; border-radius: 8px; background: linear-gradient(#987755,#d2b581); box-shadow: inset 0 1px 2px rgba(38,20,7,.5); }
.lf-health-track i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(#ef6250,#a61d18 55%,#781710); box-shadow: inset 0 1px 2px rgba(255,211,147,.55); transition: width .35s ease; }
.lf-stat-list { padding: 8px 1px 8px; border-bottom: 1px solid rgba(130,83,35,.4); }
.lf-stat-row,.lf-equipment-row { display: flex; justify-content: space-between; align-items: center; min-height: 26px; color: #3e2a1a; font: 15px 'Crimson Text', Georgia, serif; }
.lf-stat-row span,.lf-equipment-row span { display: flex; align-items: center; gap: 8px; }
.lf-stat-row b,.lf-equipment-row b { color: #352316; font: 700 16px 'Crimson Text', Georgia, serif; }
.lf-glyph { width: 15px; height: 15px; display: inline-block; position: relative; flex: none; }
.lf-coin { border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff0a3,#dfa629 52%,#8c5715); border: 1px solid #8c5715; box-shadow: 0 1px 1px #78501c; }
.lf-gem { width: 13px; height: 13px; margin: 1px; transform: rotate(45deg) scale(.84); background: linear-gradient(135deg,#b2e9ef,#49a5bd 55%,#26718b); border: 1px solid #4c8e9e; }
.lf-star { color: #d49b28; font-style: normal; }
.lf-star::before { content: '★'; position: absolute; font-size: 17px; line-height: 15px; text-shadow: 0 1px #855b1d; }
.lf-bank { border: 1px solid #87652f; height: 11px; margin-top: 3px; background: linear-gradient(#e3c26f,#b88b3c); }
.lf-bank::before { content: ''; position: absolute; left: -2px; top: -5px; width: 16px; height: 7px; border: 1px solid #80602f; background: #d5aa50; clip-path: polygon(50% 0,100% 100%,0 100%); }
.lf-bank::after { content: ''; position: absolute; inset: 2px 2px -2px; background: repeating-linear-gradient(90deg,#76562b 0 2px,transparent 2px 5px); }
.lf-turns { padding: 8px 0; border-bottom: 2px solid rgba(130,83,35,.42); }
.lf-turn-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 7px; min-height: 29px; color: #482f1b; font: 14px 'IM Fell English SC', Georgia, serif; }
.lf-turn-row b { font: 700 17px 'Crimson Text', Georgia, serif; }
.lf-turn-icon { color: #486734; }
.lf-turn-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lf-turn-icon.lf-crossed { color: #8b3829; }
.lf-equipment { padding: 7px 0 3px; }
.lf-equipment-row { min-height: 27px; }
.lf-equipment-row b { font-size: 15px; }
.lf-equipment-mark { width: 15px; height: 15px; display: inline-block; position: relative; }
.lf-sword-mark::before { content: ''; position: absolute; width: 4px; height: 14px; left: 6px; top: 0; background: linear-gradient(90deg,#755337,#f1d18a,#79583b); transform: rotate(42deg); border: 1px solid #725130; }
.lf-sword-mark::after { content: ''; position: absolute; width: 9px; height: 3px; left: 1px; top: 10px; border-top: 2px solid #725130; transform: rotate(42deg); }
.lf-shield-mark { clip-path: polygon(50% 0,95% 15%,88% 68%,50% 100%,12% 68%,5% 15%); background: linear-gradient(90deg,#174865,#5d9ab0,#143951); border: 1px solid #8ab4bd; }
.lf-panel-foot { position: relative; padding: 7px 0 0; border-top: 1px solid rgba(130,83,35,.3); color: #856c47; font: 10px 'Crimson Text', Georgia, serif; text-align: center; }
.lf-panel-foot .lf-sun-mark { width: 8px; height: 8px; }
.lf-footer { display: flex; justify-content: space-between; gap: 10px; padding: 8px 7px 1px; color: #e5c88a; font: 10px 'IM Fell English SC', Georgia, serif; letter-spacing: .045em; }
.lf-footer i { padding: 0 4px; color: #dcaa4c; font-style: normal; }
.lf-footer b { color: #efc971; }

@media (min-width: 801px) {
  .lf-header { min-height: 82px; }
  .lf-title-plaque { min-height: 67px; }
  .lf-scene { height: 300px; min-height: 0; }
  .lf-story-panel { min-height: 76px; padding-top: 10px; padding-bottom: 10px; }
  .lf-narrative { font-size: 15px; }
  .lf-destination { min-height: 66px; padding-top: 6px; padding-bottom: 6px; }
  .lf-destination-icon { width: 34px; height: 34px; }
  .lf-destination-copy b { font-size: 15px; }
  .lf-destination-copy small { font-size: 9px; }
  .lf-secondary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .lf-small-action { min-height: 30px; gap: 5px; padding: 3px 6px; }
  .lf-small-action > span:nth-child(2) { font-size: 13px; line-height: 1.05; }
  .lf-small-icon { width: 17px; height: 17px; }
  .lf-small-icon .lf-icon { width: 16px; height: 16px; }
  .lf-feedback { min-height: 22px; margin-top: 5px; padding-top: 2px; padding-bottom: 2px; }
  .lf-footer { padding-top: 5px; }
}

@media (min-width: 801px) {
  .lf-character { min-height: 100%; }
}
@media (max-width: 800px) {
  .lord-town { padding: 8px; }
  .lf-stone-frame { padding: 7px; }
  .lf-header { min-height: 88px; }
  .lf-dragon { height: 88px; }
  .lf-title-plaque { width: 66%; min-height: 67px; padding: 6px 35px; }
  .lf-layout { grid-template-columns: 1fr; }
  .lf-scene { height: clamp(245px, 45vw, 355px); }
  .lf-character { display: block; padding: 0; }
  .lf-character > summary { display: flex; align-items: center; gap: 10px; min-height: 71px; padding: 7px 10px; cursor: pointer; list-style: none; }
  .lf-character > summary::-webkit-details-marker { display: none; }
  .lf-character > summary::marker { content: ''; }
  .lf-mobile-summary > img { width: 48px; height: 52px; flex: none; object-fit: cover; border: 2px ridge #b58542; }
  .lf-mobile-summary-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 2px; }
  .lf-mobile-summary-label { color: #805324; font: 10px 'IM Fell English SC', Georgia, serif; letter-spacing: .06em; text-transform: uppercase; }
  .lf-mobile-summary-copy > b { color: #382315; font: 18px/1 'Almendra', Georgia, serif; }
  .lf-mobile-summary-copy > b small { color: #674b2b; font: 12px 'Crimson Text', Georgia, serif; }
  .lf-mobile-health { display: flex; align-items: center; gap: 5px; color: #5c4327; font: 12px 'Crimson Text', Georgia, serif; }
  .lf-mobile-health strong { color: #aa7b36; }
  .lf-mobile-health .lf-heart { transform: scale(.72) rotate(-45deg); margin-right: 0; }
  .lf-mobile-caret { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: #6f321d; border: 1px solid #bb8d4c; border-radius: 50%; font: 19px/1 'Crimson Text', Georgia, serif; }
  .lf-character[open] > summary { border-bottom: 1px solid rgba(130,83,35,.4); }
  .lf-character-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; padding: 0 12px 10px; }
  .lf-panel-top,.lf-profile,.lf-health,.lf-panel-foot { grid-column: 1 / -1; }
  .lf-profile { padding: 8px 3px; }
  .lf-portrait-wrap { width: 64px; height: 69px; }
  .lf-stat-list { border-bottom: 0; }
  .lf-turns { padding: 8px 0; }
}
@media (max-width: 520px) {
  .lord-town { padding: 4px; }
  .lf-stone-frame { padding: 5px; border-width: 3px; }
  .lf-header { min-height: 73px; margin-bottom: 7px; }
  .lf-title-plaque { width: 82%; min-height: 58px; padding: 5px 17px; }
  .lf-title-plaque { width: 100%; min-height: 58px; padding: 5px 8px; border: 0; background: linear-gradient(90deg, transparent, #391b13 13% 87%, transparent); box-shadow: none; }
  .lf-title-plaque::before { display: none; }
  .lf-brand-text h1 { font-size: clamp(17px, 5vw, 20px); }
  .lf-overline { font-size: 8px; }
  .lf-dragon { width: 64px; height: 73px; }
  .lf-dragon-left { left: 0; }
  .lf-dragon-right { right: 0; }
  .lf-vine { opacity: .35; width: 60px; }
  .lf-scene-frame { padding: 3px; }
  .lf-scene { min-height: 223px; height: 58vw; background-position: center 55%; }
  .lf-location-ribbon { min-width: 68%; padding: 7px 20px 9px; font-size: 20px; }
  .lf-story-panel { min-height: 84px; gap: 8px; padding: 11px 11px; margin: 6px 0 7px; }
  .lf-story-ornament { width: 28px; height: 28px; font-size: 15px; }
  .lf-narrative { font-size: 14px; line-height: 1.2; }
  .lf-primary-actions { grid-template-columns: 1fr; gap: 6px; }
  .lf-destination { min-height: 57px; padding: 6px 8px; }
  .lf-destination-icon { width: 34px; height: 34px; }
  .lf-destination-copy b { font-size: 16px; }
  .lf-destination-copy small { margin-top: 2px; font-size: 10px; }
  .lf-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 6px; }
  .lf-small-action { min-height: 36px; padding: 4px 5px; gap: 4px; }
  .lf-small-action > span:nth-child(2) { font-size: 11px; }
  .lf-shop-action { width: 100% !important; margin-bottom: 4px; }
  .lf-shelf-heading { font-size: 12px; }
  .lf-character-body { gap: 0 10px; padding: 0 9px 9px; }
  .lf-mobile-summary > img { width: 42px; height: 46px; }
  .lf-panel-label { font-size: 12px; }
  .lf-profile { gap: 9px; }
  .lf-profile-copy h2 { font-size: 23px; }
  .lf-profile-copy p { font-size: 14px; }
  .lf-stat-row,.lf-equipment-row { min-height: 24px; font-size: 13px; }
  .lf-stat-row b,.lf-equipment-row b { font-size: 14px; }
  .lf-turn-row { grid-template-columns: 20px 1fr auto; gap: 5px; font-size: 12px; }
  .lf-footer { flex-direction: column; align-items: center; padding: 7px 2px 1px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .lord-town *, .lord-town *::before, .lord-town *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Adapter to the original client. Styles are active only in the Town Square. */
.lord-graphical-on .is-fantasy-town > .lg-topbar,
.lord-graphical-on .is-fantasy-town > .lg-layout,
.lord-graphical-on .is-fantasy-town > .lg-backdrop { display: none !important; }
.lord-graphical-on #fantasy-town[hidden] { display: none !important; }
.lord-graphical-on #fantasy-town .lf-brand-text h1 { color: #fff0bd; }
.lord-graphical-on #fantasy-town #lg-story {
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  color: #382718; font: 15px/1.25 'Crimson Text', Georgia, serif;
}
#fantasy-town #lg-story p { margin: 0 0 3px; font: inherit; }
#fantasy-town .lf-story-fallback { margin: 0; }
#fantasy-town .lf-story-copy:has(#lg-story:not([hidden])) .lf-story-fallback { display: none; }
.lord-graphical-on #fantasy-town #prompt-controls {
  display: block; width: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; box-shadow: none; max-height: none;
}
#fantasy-town .pc-title, #fantasy-town .pc-hint { display: none !important; }
.lord-graphical-on #fantasy-town .lf-primary-actions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0;
}
.lord-graphical-on #fantasy-town button.lf-destination {
  display: flex; gap: 9px; min-height: 66px; padding: 6px 9px;
  border: 3px ridge #e0b451; border-radius: 4px; color: #fff2c4;
  text-align: left; justify-content: flex-start; white-space: normal;
}
.lord-graphical-on #fantasy-town button.lf-destination-f { background: linear-gradient(#4f8139, #295329 58%, #1d4022); }
.lord-graphical-on #fantasy-town button.lf-destination-i { background: linear-gradient(#a23d2d, #79251e 58%, #571a18); }
.lord-graphical-on #fantasy-town button.lf-destination-shops { background: linear-gradient(#3479a6, #21577d 58%, #153d5e); }
.lord-graphical-on #fantasy-town .lf-secondary-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 7px 0 0;
  padding: 0; border: 0;
}
.lord-graphical-on #fantasy-town button.lf-small-action {
  display: flex; min-height: 30px; gap: 5px; padding: 3px 6px; text-align: left;
  border: 2px ridge #b37a35; border-radius: 0; background: linear-gradient(#4b3524, #2f2117);
  justify-content: flex-start; white-space: normal;
}
#fantasy-town button[hidden] { display: none !important; }
#fantasy-town button:disabled { opacity: .55; cursor: wait; transform: none; filter: none; }
#fantasy-town .lf-profile-copy, #fantasy-town [data-lf] { overflow-wrap: anywhere; }
.lord-graphical-on:has(.is-fantasy-town) #controls { margin-top: 0; }
.lord-graphical-on:has(.is-fantasy-town) body { background: #4b3c2b; }
.lord-graphical-on #fantasy-town #controls {
  width: 100%; margin: 7px 0 0; padding: 9px; min-height: 44px;
  background: rgba(24,15,9,.5); border-top: 1px solid #a57b38; color: #f5dfaa;
}
#fantasy-town #controls a { color: #51351c; }
#fantasy-town #controls #status { color: #e4ca91; opacity: 1; }
.lord-graphical-on #fantasy-town .lf-current-prompt {
  margin: 9px 2px; color: #ffe6a3; font: 22px/1.2 'Almendra', Georgia, serif;
}
.lord-graphical-on #fantasy-town.lf-no-character .lf-layout { grid-template-columns: minmax(0, 1fr); }
#fantasy-town.lf-auth-scene .lf-stone-frame { max-width: 940px; }
#fantasy-town[data-scene="forest"] .lf-scene { background-image: url('images/fantasy-town/forest.jpg'); }
#fantasy-town[data-scene="inn"] .lf-scene { background-image: url('images/fantasy-town/inn.jpg'); }
#fantasy-town[data-scene="shops"] .lf-scene { background-image: url('images/fantasy-town/shops.jpg'); }
#fantasy-town[data-scene="bank"] .lf-scene { background-image: url('images/fantasy-town/bank.jpg'); }
#fantasy-town[data-scene="training"] .lf-scene { background-image: url('images/fantasy-town/training.jpg'); }
#fantasy-town[data-scene="dragon"] .lf-scene { background-image: url('images/fantasy-town/dragon.jpg'); }
.lord-graphical-on #fantasy-town #lg-encounter {
  margin: 9px 0; padding: 14px 17px; color: #392419;
  border: 3px ridge #d1a04c; border-radius: 0;
  background: linear-gradient(110deg, #f4dfad, #ffecc2 48%, #eed8a5);
  box-shadow: inset 0 0 0 2px #fff0c9;
}
.lord-graphical-on #fantasy-town #lg-encounter h2 { color: #642519; font-family: 'Almendra', Georgia, serif; }
.lord-graphical-on #fantasy-town #lg-encounter .lg-feedback { color: #604421; background: #e7d3a2; }
.lord-graphical-on #fantasy-town .pc-form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px;
  margin: 9px 0; padding: 16px; border: 3px ridge #d1a04c;
  background: linear-gradient(110deg, #f4dfad, #ffecc2 48%, #eed8a5);
}
.lord-graphical-on #fantasy-town .pc-form label { grid-column: 1 / -1; color: #51351c; font: 17px 'Almendra', Georgia, serif; }
.lord-graphical-on #fantasy-town .pc-field {
  min-width: 0; width: 100%; min-height: 44px; padding: 9px 12px;
  color: #392419; background: #fff3d0; border: 1px solid #9b7138;
  border-radius: 0; font: 16px/1.35 'Crimson Text', Georgia, serif;
}
.lord-graphical-on #fantasy-town .pc-submit {
  min-height: 44px; padding: 8px 17px; border: 2px ridge #d1a557;
  border-radius: 0; color: #fff0be; background: linear-gradient(#92412b,#642519);
  font: 16px 'Almendra', Georgia, serif;
}
#fantasy-town .lf-location-ribbon { max-width: 98%; white-space: normal; overflow-wrap: anywhere; }
.lord-graphical-on #fantasy-town button.lf-small-action { min-height: 40px; }
.lord-graphical-on #fantasy-town .pc-anykey { display: flex; gap: 8px; margin: 8px 0; }
.lord-graphical-on #fantasy-town .lg-story-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 18px;
  padding: 4px 0; border-bottom: 1px solid rgba(130,83,35,.2);
}
@media (max-width: 520px) {
  .lord-graphical-on #fantasy-town .lf-primary-actions { grid-template-columns: 1fr; gap: 6px; }
  .lord-graphical-on #fantasy-town button.lf-destination { min-height: 57px; padding: 6px 8px; }
  .lord-graphical-on #fantasy-town .lf-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lord-graphical-on #fantasy-town button.lf-small-action { min-height: 44px; padding: 4px 5px; gap: 4px; }
  .lord-graphical-on #fantasy-town #lg-story { font-size: 14px; line-height: 1.2; }
}

/* Structured player list (promptId player_list): same engine buttons, as rows. */
.lord-graphical-on #fantasy-town .pc-options.pc-player-list { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; }
.lord-graphical-on #fantasy-town button.pc-player {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 8px 12px; text-align: left; white-space: normal; cursor: pointer;
  color: #392419; border: 2px ridge #c89849; border-radius: 0;
  background: linear-gradient(110deg, #f4dfad, #ffecc2 48%, #eed8a5);
  box-shadow: inset 0 0 0 2px #fff0c8, 0 2px 2px rgba(20,12,6,.35);
  touch-action: manipulation; transition: filter .13s ease, transform .13s ease;
}
.lord-graphical-on #fantasy-town button.pc-player:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
#fantasy-town .pc-player-key { min-width: 30px; padding: 3px 6px; text-align: center; color: #ffe9aa; background: #5a2a1b; border: 1px solid #b07a38; font: 13px 'IM Fell English SC', Georgia, serif; }
#fantasy-town .pc-player-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#fantasy-town .pc-player-name { color: #3a2014; font: 18px/1.15 'Almendra', Georgia, serif; overflow-wrap: anywhere; word-break: break-word; }
#fantasy-town .pc-player-tag { margin-left: 7px; padding: 0 5px; color: #fff0be; background: #315e2f; font: 11px 'IM Fell English SC', Georgia, serif; vertical-align: 2px; }
#fantasy-town .pc-player-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; color: #5e4426; font: 14px/1.2 'Crimson Text', Georgia, serif; }
#fantasy-town .pc-player-status { color: #6d3b1f; font: italic 14px/1.2 'Crimson Text', Georgia, serif; overflow-wrap: anywhere; }
#fantasy-town .pc-player-reason, #fantasy-town .pc-reason { display: block; color: #8b2420; font: 600 14px/1.2 'Crimson Text', Georgia, serif; overflow-wrap: anywhere; }
#fantasy-town button.pc-player-npc { border-color: #8b5a2b; }
#fantasy-town button.pc-player-self { background: linear-gradient(110deg, #e6e2b8, #f4efc9); }
.lord-graphical-on #fantasy-town button.pc-player:disabled { opacity: .78; cursor: not-allowed; filter: grayscale(.45); }
#fantasy-town button.pc-player:disabled .pc-player-reason { opacity: 1; }
/* player_actions: Attack / Send Message / Cancel, large and clear. */
.lord-graphical-on #fantasy-town .lg-player-actions .pc-reason { display: block; grid-column: 2 / -1; white-space: normal; overflow-wrap: anywhere; color: #eacb9a; font-size: 13px; line-height: 1.3; }
.lord-graphical-on #fantasy-town .lg-player-actions .lf-secondary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lord-graphical-on #fantasy-town .lg-player-actions button.lf-small-action { min-height: 52px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-content: center; padding: 8px; }
.lord-graphical-on #fantasy-town .lg-player-actions > .pc-label,
.lord-graphical-on #fantasy-town .lg-player-directory > .pc-label { display: none; }
.lord-graphical-on #fantasy-town .lg-player-actions .lf-small-action > span:nth-child(2) { font-size: 16px; }
.lord-graphical-on #fantasy-town .lg-player-actions .pc-label { margin: 4px 2px 6px; color: #ffe6a3; font: 18px/1.25 'Almendra', Georgia, serif; overflow-wrap: anywhere; }
@media (max-width: 800px) {
  .lord-graphical-on #fantasy-town button.pc-player { min-height: 60px; padding: 9px 10px; }
  .lord-graphical-on #fantasy-town .lg-player-actions .lf-secondary-grid { grid-template-columns: 1fr; }
  .lord-graphical-on #fantasy-town .lg-player-actions .pc-label { color: #69321f; }
}