/* Lantern Harbour · loaded after ../straits-deal/style.css, which supplies the page chrome, buttons, seats, stage, log drawer and dialogs.
   This file adds only what is Lantern Harbour's own: papercut cards, the market laid out in the middle of the table,
   the physical dice thrown over it, and harbours shown as small cards. */
:root{--hero-art:url('./art/hero.webp');--table-art:url('./art/table.webp');--hand-peek:0px;
 --cream:#f3e7cf;--ink:#1b2430;--mustard:#e2a52b;
 --tide:#2f5d9a;--trade:#4f7a3a;--host:#b5402f;--major:#6a3768;--mark:#1f5f5b}
[data-kind=blue]{--k:var(--tide)}[data-kind=green]{--k:var(--trade)}[data-kind=red]{--k:var(--host)}[data-kind=purple]{--k:var(--major)}[data-kind=landmark]{--k:var(--mark)}

/* Our own art: a url() in a custom property resolves against the stylesheet that uses it, so the backgrounds are restated here. */
body.lh-page:not(.in-match){background:linear-gradient(90deg,#0a1014 0,#0a1014d9 20%,#0a101400 34%,#0a101400 66%,#0a1014d9 78%,#0a1014 100%),linear-gradient(0deg,#0a1014 2%,transparent 30%),url('./art/hero.webp') calc(50vw - 112vh) bottom/auto 100vh no-repeat fixed,#0a1014}
.lh-page .sd-match{background:linear-gradient(180deg,#0a1014a8,#0a1014c8 45%,#0a1014b0),url('./art/scene/sea.webp') center/cover,#0a1014}
@media (max-width:980px){body.lh-page:not(.in-match){background:linear-gradient(180deg,#0a1014e0,#0a1014b3 40%,#0a1014f2),url('./art/hero.webp') 72% top/cover fixed,#0a1014}}

/* The table: rivals along the top, the market in the middle with the stage under it, your harbour at the bottom. */
.lh-arena{grid-template-columns:minmax(0,1fr)}
.lh-main{display:flex;flex-direction:column}
.lh-rivals{flex:none;padding:10px clamp(10px,2vw,20px) 6px}
.lh-centre{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px clamp(10px,2vw,20px) 8px}
.lh-stage{flex:none;margin:0;width:min(940px,100%);grid-template-columns:minmax(0,1fr)}
.lh-you{flex:none;min-height:0;max-height:38%;background:linear-gradient(180deg,#0c1519e6,#0a1014f5)}
.lh-you .lh-board{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding-bottom:10px}

/* The market: every building laid out on a mat in the middle of the table, cheapest numbers first. */
.lh-market{position:relative;flex:1;min-height:0;width:100%;max-width:1400px;display:flex;flex-direction:column;padding:8px 12px 10px;border-radius:18px;border:1px dashed #ffffff22;background:radial-gradient(70% 80% at 50% 45%,#1f5f5b55,#0d262699)}
.lh-market-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 4px 6px}
.lh-market-head h2{margin:0;font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lh-market-note{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lime)}
.lh-market-cards{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--cols,5),var(--cw,120px));justify-content:center;align-content:center;grid-auto-rows:max-content;gap:8px}
button.lh-buy{position:relative;display:flex;flex-direction:column;width:var(--cw,120px);min-height:auto;padding:0;border:0;border-radius:9px;overflow:hidden;background:var(--k);color:var(--ink);text-align:left;box-shadow:3px 4px 0 #0009;cursor:default;transition:transform .14s,opacity .2s}
button.lh-buy:hover:not(:disabled){background:var(--k)}
.lh-buy-art{display:block;flex:none;width:100%;aspect-ratio:1;object-fit:cover}
.lh-buy .lh-roll{top:5px;left:5px;min-width:22px;height:22px;font-size:11px}
.lh-buy .lh-cost{position:absolute;top:5px;right:5px;min-width:24px;height:24px;font-size:12px}
.lh-buy-name{padding:4px 6px 0;background:var(--cream);font:750 12.5px/1.15 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-buy-short{padding:1px 6px 0;background:var(--cream);font-size:11px;line-height:1.25;color:#444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-buy-left{padding:3px 6px 6px;background:var(--cream);font:700 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--k) 72%,#000)}
.lh-market.is-buying button.lh-buy:not(.can){opacity:.45}
button.lh-buy.can{cursor:pointer;outline:2px solid #d9ed96aa;outline-offset:1px}
button.lh-buy.can:hover:not(:disabled){transform:translateY(-4px) rotate(-1deg)}
button.lh-buy.picked{outline:3px solid var(--lime);transform:translateY(-6px)}
button.lh-buy.gone{opacity:.3;filter:grayscale(.7)}

/* The dice: cut-paper cubes on their own layer over the cards. They take clicks only when they are yours to roll. */
.lh-dice-layer{position:absolute;inset:9% 6% 8%;z-index:4;pointer-events:none;perspective:1100px;transform-style:preserve-3d}
/* A die is a real cube: six cut-paper faces placed in 3D, turned by the physics each frame. */
.lh-die{position:absolute;top:0;left:0;transform-style:preserve-3d;pointer-events:none;will-change:transform}
.lh-face{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding:14%;border-radius:16%;background:var(--cream);box-shadow:inset 0 0 0 1.5px #1b243055,inset -2px -3px 0 #ded0b0;backface-visibility:hidden}
.lh-face i{border-radius:50%;margin:1px}
.lh-face i.on{background:var(--ink)}
.lh-die-shadow{position:absolute;top:0;left:0;border-radius:18%;background:#000;filter:blur(4px);pointer-events:none;will-change:transform}
.lh-dice-layer.can-roll .lh-die{pointer-events:auto;cursor:grab;touch-action:none}
.lh-dice-layer.can-roll .lh-face{box-shadow:inset 0 0 0 2px var(--lime),inset -2px -3px 0 #ded0b0}
.lh-dice-layer.holding .lh-die{cursor:grabbing}
body.dice-moving .lh-mini.hit{outline:none;box-shadow:0 2px 0 #000a}

/* A harbour: four landmark tiles, then its buildings as small cards in number order. */
.lh-seat .sd-seat-head{margin-bottom:6px}
.lh-board{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-start}
.lh-marks{display:flex;gap:4px;flex:none}
.lh-town{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
.lh-mark{position:relative;display:block;width:34px;height:34px;min-height:0;padding:0;border-radius:7px;overflow:hidden;background:var(--mark);border:1px dashed #ffffff40;box-shadow:none;color:var(--text)}
.lh-mark-art{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.45);opacity:.6}
.lh-mark.built{border:2px solid var(--mustard)}
.lh-mark.built .lh-mark-art{filter:none;opacity:1}
.lh-seat:not(.is-me) .lh-mark .lh-cost{display:none}
.lh-mark .lh-cost,.lh-mark-done{position:absolute;right:2px;bottom:2px;transform:scale(.72);transform-origin:100% 100%}
.lh-mark-done{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--mustard);color:var(--ink);font:800 12px/1 var(--mono)}
.lh-mark-name{display:block;padding:3px 4px 4px;font:600 10px/1.15 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:center;background:#0a1014e6}
.lh-mini{position:relative;display:block;width:var(--mini,44px);min-height:0;padding:0;border:0;border-radius:6px;overflow:hidden;background:var(--k);box-shadow:0 2px 0 #000a;color:var(--ink);transition:transform .15s}
.lh-mini-art{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.lh-mini-name{display:none}
.lh-roll{position:absolute;top:3px;left:3px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:99px;background:var(--cream);border:1.5px solid var(--ink);color:var(--ink);font:800 10px/1 var(--mono);letter-spacing:-.02em}
.lh-count{position:absolute;top:3px;right:3px;padding:2px 4px;border-radius:99px;background:var(--ink);color:var(--cream);font:700 10px/1 var(--mono)}
.lh-cost{display:grid;place-items:center;min-width:26px;height:26px;padding:0 4px;border-radius:99px;background:var(--mustard);border:2px solid var(--ink);color:var(--ink);font:800 13px/1 var(--mono)}
.lh-mini.hit{outline:2px solid var(--lime);outline-offset:1px;box-shadow:0 0 0 4px #d9ed9633,0 2px 0 #000a}
.lh-mini.fresh,.lh-mark.fresh{animation:lh-pop .55s cubic-bezier(.2,.8,.3,1.3)}
button.lh-mini.can,button.lh-mark.can{cursor:pointer;outline:2px solid var(--lime);outline-offset:1px}
button.lh-mini.can:hover:not(:disabled),button.lh-mark.can:hover:not(:disabled){transform:translateY(-3px);background:var(--k)}
.lh-mini.picked,.lh-mark.picked{outline:3px solid var(--lime);transform:translateY(-4px)}
.sd-seat.lh-seat.can{cursor:pointer;outline:2px dashed var(--lime);outline-offset:2px}
.sd-seat.lh-seat.can:hover{background:linear-gradient(180deg,#22383dcc,#101a20cc)}
.lh-purse b{color:var(--mustard)}

/* Your own harbour is the big one: named landmark tiles and buildings you can read. */
.lh-seat.is-me{--mini:58px}
.lh-seat.is-me .lh-marks{gap:8px}
.lh-seat.is-me .lh-mark{width:80px;height:auto}
.lh-seat.is-me .lh-mark-art{height:auto;aspect-ratio:1}
.lh-seat.is-me .lh-mark .lh-cost,.lh-seat.is-me .lh-mark-done{transform:none;right:4px;bottom:26px}
.lh-seat.is-me .lh-mini-name{display:block;padding:2px 3px 3px;background:var(--cream);font:700 9.5px/1.1 var(--font);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-seat.is-me .lh-roll{min-width:22px;height:22px;font-size:11px}
.lh-seat.is-me .lh-town{gap:8px}
.lh-prompt{align-items:center}
.lh-hint{margin:0 6px 0 0;color:var(--muted)}

/* Full cards: the peek, and the gallery in the rules. */
.lh-card{position:relative;display:flex;flex-direction:column;width:100%;border-radius:9px;overflow:hidden;background:var(--k);color:var(--ink);box-shadow:4px 5px 0 #0009}
.lh-card-art{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.lh-card .lh-roll{top:7px;left:7px;min-width:28px;height:28px;font-size:13px;border-width:2px}
.lh-card-body{display:grid;gap:3px;padding:8px 10px 6px;background:var(--cream)}
.lh-card-name{font:750 15px/1.15 var(--font)}
.lh-card-text{font-size:12.5px;line-height:1.3;color:#3a3a3a}
.lh-card-foot{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:4px 8px 7px 10px;background:var(--cream);border-top:1px dashed #1b243040}
.lh-card-kind{font:700 9.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:color-mix(in srgb,var(--k) 75%,#000)}
.lh-peek{position:fixed;top:0;left:0;z-index:1000;width:190px;pointer-events:none}
.lh-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:8px 0 16px}

/* Motion */
.lh-fx{position:fixed;inset:0;pointer-events:none;z-index:900}
.lh-flying-coin{position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--mustard);border:2px solid var(--ink)}
.lh-flying-card{position:absolute;top:0;left:0;border-radius:6px;box-shadow:0 6px 18px #000a}
.lh-float{position:absolute;top:0;left:0;font:800 17px/1 var(--mono);color:var(--lime);text-shadow:0 2px 0 #000,0 0 8px #000;white-space:nowrap}
.lh-float.loss{color:#ff8a7a}
@keyframes lh-pop{0%{transform:scale(.5)}100%{transform:none}}
@keyframes lh-land{0%{box-shadow:inset -3px -4px 0 #d9c9a6,0 0 0 0 #d9ed96aa}100%{box-shadow:inset -3px -4px 0 #d9c9a6,0 0 0 16px #d9ed9600}}
@media (prefers-reduced-motion:reduce){.lh-mini.fresh,.lh-mark.fresh,.lh-die.landed{animation:none}}

/* Short laptop windows: everything around the market gives up height so the market's cards stay readable. */
@media (max-height:820px) and (min-width:901px){
 .lh-rivals{padding:6px clamp(10px,2vw,20px) 4px}
 .lh-rivals .sd-seat{padding:6px 9px 7px}
 .lh-seat .sd-seat-head{margin-bottom:4px}
 .lh-seat .sd-avatar{width:30px;height:30px}
 .lh-seat .sd-counter b{font-size:16px}
 .lh-seat:not(.is-me){--mini:34px}
 .lh-seat:not(.is-me) .lh-mark{width:28px;height:28px}
 .lh-seat:not(.is-me) .lh-board{flex-wrap:nowrap}
 .lh-seat:not(.is-me) .lh-town{gap:4px}
 .lh-centre{gap:6px;padding-bottom:6px}
 .lh-market{padding:6px 10px 8px}
 .lh-market-head{margin-bottom:4px}
 .lh-stage{padding:6px 12px}
 .lh-stage .sd-now{gap:4px}
 .lh-stage .sd-headline{font-size:18px}
 .lh-stage .sd-prompt button{min-height:34px;padding:.3rem .9rem}
 .lh-you{max-height:32%;padding-top:5px}
 .lh-seat.is-me{--mini:46px}
 .lh-seat.is-me .lh-mark{width:58px}
 .lh-seat.is-me .lh-mark-name{font-size:8.5px;padding:2px 2px 3px}
 .lh-seat.is-me .lh-mini-name{display:none}
 .lh-buy-short{display:none}
}
/* Short and wide: the stage stands beside the market instead of under it, so the market gets the full height. */
@media (max-height:720px) and (min-width:1200px){
 .lh-centre{flex-direction:row;align-items:stretch}
 .lh-stage{width:min(330px,26vw);align-self:center}
 .lh-stage .sd-now{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
 .lh-stage .sd-now>*{grid-area:auto}
}
/* Phones and narrow windows: one column, rivals swipe sideways, the stage stays on screen at the bottom while you look over the market. */
@media (max-width:900px){
 .sd-match{height:auto;min-height:100dvh}
 .lh-main{overflow:visible}
 .lh-rivals{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px}
 .lh-rivals .sd-seat{flex:0 0 min(82vw,340px);scroll-snap-align:start}
 .lh-centre{display:flex;padding:2px 8px 8px}
 .lh-market{flex:none}
 .lh-market-cards{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
 button.lh-buy{width:auto}
 .lh-stage{position:sticky;bottom:0;z-index:6}
 .lh-you{flex:none;overflow:visible;max-height:none;min-height:0}
 .lh-you .lh-board{overflow:visible}
 .lh-seat.is-me .lh-marks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
 .lh-seat.is-me .lh-mark{width:auto}
}
@media (max-width:520px){
 .lh-market-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .lh-hint{flex:1 0 100%}
}

/* The roll's total beside the dice, and every card showing that number lit. */
.lh-total{position:absolute;z-index:7;transform:translate(-50%,-115%);padding:5px 11px;border-radius:99px;background:var(--lime);color:#10181c;font:800 19px/1 var(--mono);white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px #000a;animation:lh-pop .35s ease-out}
.rolled .lh-roll,.lh-sprite-tag.rolled{background:var(--lime);color:#10181c;box-shadow:0 0 0 3px #d9ed9666}
@media (prefers-reduced-motion:reduce){.lh-total{animation:none}}

/* The harbour scene: every player's town is an island in the sea; the market floats on a raft between them. */
:root{--coral:#e0604e}
.lh-rivals .sd-seat,.lh-you .sd-seat{background:none;border:0;box-shadow:none;padding:0;outline-offset:4px}
.lh-seat{position:relative}
.lh-seat .sd-seat-head{position:absolute;z-index:6;top:0;left:0;right:auto;max-width:calc(100% - 8px);margin:0;padding:4px 8px;gap:8px;border-radius:10px;background:#0a1014d0;border:1px solid #ffffff14;border-top:3px solid var(--seat)}
.lh-seat .sd-seat-head .sd-stats{margin-left:10px}
.lh-seat.is-turn .sd-seat-head{border-color:var(--lime);border-top-color:var(--lime)}
.sd-seat.lh-seat.is-turn{outline:none;background:none}
/* isolation keeps the sprites' depth order inside their own town, so it never paints over the card pop-up or the dialogs. */
.lh-town-scene{position:relative;isolation:isolate;height:var(--town-h,150px);cursor:zoom-in;border-radius:12px}
.lh-town-scene:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.lh-town-scene.mine{--town-h:clamp(150px,23vh,230px)}
.lh-island{position:absolute;pointer-events:none;filter:drop-shadow(0 8px 10px #0008)}
.lh-sprite{position:absolute;display:block;padding:0;margin:0;border:0;background:none;min-height:0;border-radius:0;transform-origin:50% 100%;cursor:inherit;box-shadow:none}
button.lh-sprite:hover:not(:disabled){background:none;transform:translateY(-3px)}
.lh-sprite-img{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(2px 3px 0 #0007);transform:translate(calc(var(--i,0)*-14%),calc(var(--i,0)*-9%)) scale(calc(1 - var(--i,0)*.07))}
.lh-sprite.ghost .lh-sprite-img{opacity:.13;filter:grayscale(1) brightness(2)}
.lh-sprite-tag{position:absolute;z-index:5000;transform:translate(-50%,-30%);pointer-events:none;padding:1px 5px;border-radius:99px;background:var(--cream);border:1.5px solid var(--ink);color:var(--ink);font:800 9.5px/1.2 var(--mono);white-space:nowrap}
.lh-sprite-tag.ghost{background:var(--mustard);opacity:.85}
.lh-sprite.can{cursor:pointer}
.lh-sprite.can .lh-sprite-img{opacity:1;filter:drop-shadow(0 0 4px var(--lime)) drop-shadow(0 0 2px var(--lime))}
.lh-sprite.can.ghost .lh-sprite-img{opacity:.75;filter:drop-shadow(0 0 4px var(--lime)) grayscale(.3)}
.lh-sprite.picked .lh-sprite-img{filter:drop-shadow(0 0 6px var(--lime)) drop-shadow(0 0 2px #fff)}
.lh-sprite.hit{animation:lh-hop .7s cubic-bezier(.3,1.6,.5,1)}
.lh-sprite.hit::after{content:"";position:absolute;left:10%;right:10%;bottom:-4px;height:8px;border-radius:50%;background:radial-gradient(#d9ed96aa,transparent 70%)}
body.dice-moving .lh-sprite.hit{animation:none}
body.dice-moving .lh-sprite.hit::after{display:none}
.lh-sprite.rising{animation:lh-rise .85s cubic-bezier(.2,.9,.3,1.3)}
.lh-bit{position:absolute;left:50%;bottom:15%;width:7px;height:5px;background:var(--c);border-radius:1px;animation:lh-bit .85s ease-out forwards;pointer-events:none}
@keyframes lh-rise{0%{transform:scaleY(0) scaleX(.6);opacity:0}45%{opacity:1}70%{transform:scaleY(1.12) scaleX(.96)}100%{transform:none}}
@keyframes lh-hop{0%,100%{transform:none}35%{transform:translateY(-14%)}60%{transform:translateY(0) scaleY(.94)}}
@keyframes lh-bit{0%{transform:rotate(var(--a)) translateX(0) rotate(0);opacity:1}100%{transform:rotate(var(--a)) translateX(46px) rotate(220deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.lh-sprite.rising,.lh-sprite.hit,.lh-bit{animation:none}}
/* The market on its raft. */
.lh-market{border:0;background:url('./art/scene/raft.webp') center/100% 100% no-repeat;padding:clamp(14px,3.4%,32px) clamp(30px,5.5%,70px) clamp(18px,4.2%,40px)}
.lh-market-head{background:#0a1014b0;border-radius:8px;padding:4px 8px;align-self:center;gap:16px}
.lh-market-cards{filter:drop-shadow(0 2px 2px #0005)}
/* Looking closer at a town. */
.lh-townview{width:min(1180px,94vw);max-height:92dvh;padding:16px 20px 18px;border:1px solid var(--line-2);border-radius:16px;background:linear-gradient(180deg,#0a1014e8,#0a1014f2),url('./art/scene/sea.webp') center/cover;color:var(--text)}
.lh-townview::backdrop{background:#04090bcc}
.lh-townview-head{display:flex;justify-content:space-between;align-items:start;gap:12px}
.lh-townview-head h2{margin:0;font-size:22px}
.lh-townview-stats{margin:2px 0 0;font:600 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lh-town-scene.big{--town-h:min(58vh,560px);cursor:default;margin-top:8px}
.lh-town-scene.big .lh-sprite-tag{font-size:12px;padding:2px 7px}
.lh-townview-news{margin:8px 0 0;min-height:1.4em;color:var(--muted)}
@media (max-height:820px) and (min-width:901px){.lh-town-scene{--town-h:118px}.lh-town-scene.mine{--town-h:150px}}

/* Wide screens: the stage stands beside the raft, so the market gets the whole middle band. */
@media (min-width:1200px){
 .lh-centre{flex-direction:row;align-items:stretch}
 .lh-stage{width:clamp(280px,23vw,360px);align-self:center}
 .lh-stage .sd-now{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
 .lh-stage .sd-now>*{grid-area:auto}
}
.lh-you{max-height:none;padding-top:4px;background:none;border-top:0}

/* Editions: the sequel's market rows, closed buildings, the Inventor's Shed. */
.lh-row-label{grid-column:1/-1;align-self:end;margin:2px 2px -2px;font:600 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cream);text-shadow:0 1px 0 #000a}
.lh-market.rows .lh-market-cards{justify-content:center}
.lh-sprite.closed .lh-sprite-img{filter:grayscale(.85) brightness(.75) drop-shadow(2px 3px 0 #0007)}
.lh-sprite.closed::before{content:"";position:absolute;inset:30% 8% 25%;z-index:3;background:repeating-linear-gradient(135deg,#e2a52bcc 0 6px,#1b2430cc 6px 12px);border-radius:3px;opacity:.85}
.lh-shed b{color:#7fd6e8}

.lh-market.rows .lh-market-head{display:none}
.lh-market.rows .lh-market-cards{grid-template-columns:32px repeat(5,var(--cw,110px));align-content:center;align-items:center;gap:8px}
.lh-market.rows .lh-row-label{grid-column:auto;align-self:center;justify-self:center;margin:0;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;line-height:1.1;max-height:120px;overflow:hidden;text-align:center;white-space:nowrap}

/* Scenery and plots around the buildings. */
.lh-decor{position:absolute;display:block;pointer-events:none;transform-origin:50% 100%}
.lh-decor img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(1px 2px 0 #0006)}
.lh-decor.under img{filter:none;opacity:.92;object-fit:fill}
.lh-decor.sky img{filter:none;opacity:.85}

.lh-check{display:flex;align-items:center;gap:8px;flex-direction:row;font-weight:500;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap}
#entry .sd-entry-row.lh-options{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px 10px}
#entry .sd-entry-row.lh-options .lh-game,#entry .sd-entry-row.lh-options .lh-check{grid-column:1/-1}
#entry .sd-entry-row.lh-options .lh-game~#market-pick-label[hidden]+.sd-field{grid-column:1/-1}
.sd-lobby .lh-check{align-self:center;min-height:40px}
#entry .sd-entry-row.lh-options .sd-field{min-width:0}
#entry .sd-entry-row.lh-options select{width:100%;min-width:0}
.lh-check input,#entry .sd-entry-row .lh-check input{flex:none;width:18px;height:18px;min-width:0;min-height:0;margin:0;padding:0}
.sd-lobby #lobby-edition-label{flex-basis:200px}
.lh-check input{width:18px;height:18px;accent-color:var(--lime)}

/* Card type symbols (icons.js): a badge in the art's lower-left corner, a glyph before a type named in text, and a glyph
   at the front of each town tag. */
.lh-icon{position:absolute;z-index:2;display:grid;place-items:center;width:22px;height:22px;border-radius:99px;background:var(--cream);border:1.5px solid var(--ink);color:var(--ink);box-shadow:1px 1.5px 0 #0006}
.lh-icon svg{width:15px;height:15px}
.lh-buy .lh-icon{left:5px;top:31px;width:24px;height:24px}
.lh-buy .lh-icon svg{width:16px;height:16px}
.lh-card .lh-icon{left:7px;top:40px;width:28px;height:28px}
.lh-card .lh-icon svg{width:19px;height:19px}
.lh-icon-word{white-space:nowrap}
.lh-icon-word svg{display:inline-block;width:1.15em;height:1.15em;margin:0 .15em 0 .05em;vertical-align:-.2em}
.lh-sprite-tag svg{display:inline-block;width:1.2em;height:1.2em;margin:0 .2em 0 -.15em;vertical-align:-.25em}
.lh-legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:0;margin:6px 0 12px;list-style:none}
.lh-legend li{display:flex;align-items:center;gap:6px}
.lh-legend svg{width:24px;height:24px;padding:3px;border-radius:99px;background:var(--cream,#f6ecd6);color:var(--ink,#1d2a30);border:1.5px solid var(--ink,#1d2a30)}
#rules ul.lh-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 14px;padding-left:0;list-style:none}
#rules ul.lh-legend li{display:flex;align-items:center;gap:8px;margin:0}
#rules ul.lh-legend li::before,#rules ul.lh-legend li::marker{content:none}