/* Lakbay (/games/lakbay/): Bohol walking map and panels. Classes start with lk-. Battle styles are in lakbay-battle.css.
   Golden-hour palette from the design boards. The template adds ?v=<hash> to this file, so no manual bump. */
.lk {
  --plum: #2b1d33; --plum-d: #1c1222; --amber: #e0a050; --cream: #ffe2a0; --muted: #d9b98a; --ink: #120a18;
  --hp: #6fbf5a; --mp: #5aa7e0; --foe: #e0605a; --xp: #e0a050;
  position: relative; height: clamp(520px, calc(100svh - 190px), 820px); overflow: hidden; isolation: isolate;
  border-radius: 14px; background: var(--plum-d); color: var(--cream); font-family: Nunito, "Plus Jakarta Sans", system-ui, sans-serif;
  border: 2px solid var(--amber); box-shadow: 0 4px 0 var(--ink); user-select: none; -webkit-user-select: none;
}
.lk [hidden] { display: none !important; }
.lk button { font: inherit; color: inherit; cursor: pointer; }
.lk button:focus-visible, .lk a:focus-visible { outline: 3px solid #8fd3ff; outline-offset: 2px; }
.lk h2, .lk h3 { font-family: Fredoka, Nunito, system-ui, sans-serif; font-weight: 700; margin: 0; color: var(--cream); }
.lk-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 700 20px Fredoka, sans-serif; }
.lk-screen { position: absolute; inset: 0; }

.lk-panel { background: var(--plum); border: 2px solid var(--amber); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); padding: 10px 14px; }
.lk-btn { background: var(--plum); border: 2px solid var(--amber); border-radius: 12px; padding: 8px 14px; font-weight: 800; box-shadow: 0 3px 0 var(--ink); min-height: 40px; }
.lk-btn:hover:not(:disabled) { background: #3b2848; }
.lk-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.lk-btn:disabled { opacity: .45; cursor: not-allowed; }
.lk-btn[aria-pressed="true"] { background: #4a3258; box-shadow: 0 0 0 3px var(--cream); }
.lk-btn.go { background: var(--amber); color: #3a1a05; border-color: #ffd58a; }
.lk-btn.go:hover:not(:disabled) { background: #f0b868; }
/* round icon buttons */
.lk-ib { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; flex: none; background: var(--plum); border: 2px solid var(--amber); border-radius: 50%; box-shadow: 0 3px 0 var(--ink); }
.lk-ib:hover { background: #3b2848; }
.lk-ib:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.lk-ib[aria-pressed="true"] { background: #4a3258; }
.lk-ic { display: block; line-height: 0; }
.lk-ic svg { width: 22px; height: 22px; }

/* bars */
.lk-bar { position: relative; height: 16px; background: var(--plum-d); border: 2px solid var(--amber); border-radius: 999px; overflow: hidden; }
.lk-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--hp); transition: width .25s; }
.lk-bar.mp i { background: var(--mp); }
.lk-bar b { position: absolute; right: 8px; top: -1px; font-size: 11px; font-weight: 800; color: #fffaf0; text-shadow: 0 1px 0 #000; }
.lk-row { display: flex; align-items: center; gap: 8px; }

/* start, panels and cards */
.lk-center:has(> .lk-note) { background: rgb(0 0 0 / .35); } /* a short notice: the map stays in view */
.lk-center { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; overflow: auto;
  background: radial-gradient(ellipse at 50% 20%, #5a3a4a, var(--plum-d) 70%); z-index: 9; }
.lk-card { width: min(560px, 100%); display: grid; gap: 10px; text-align: center; padding: 16px 20px; max-height: 100%; overflow: auto; }
.lk-card.wide { width: min(760px, 100%); }
.lk-card h2 { font-size: 30px; }
.lk-card h3 { font-size: 18px; text-align: left; }
.lk-card p { margin: 0; color: var(--muted); }
.lk-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lk-pick button:not(.lk-btn) { display: grid; justify-items: center; gap: 4px; padding: 10px; background: var(--plum-d); border: 2px solid var(--amber); border-radius: 12px; font-weight: 800; }
.lk-pick button[aria-pressed="true"] { background: #4a3258; box-shadow: 0 0 0 3px var(--cream); }
.lk-pick img { width: 112px; height: 112px; image-rendering: pixelated; }
/* sign-up step 1: the painted profiles as cards. The chosen card lifts, shows a check and the walking sprite. */
.lk-pick.np { gap: 14px; }
.lk-pick.np button { justify-items: stretch; gap: 2px; padding: 8px 8px 12px; text-align: left; background: #fffaf0; border: 2px solid #e3d3ae; color: #3a2a1c; filter: saturate(.7); opacity: .85; transition: transform .18s, box-shadow .18s, border-color .18s, filter .18s; }
.lk-pick.np button:hover { filter: none; opacity: 1; }
.lk-pick.np button[aria-pressed="true"] { background: #fffaf0; border-color: #4e7a46; box-shadow: 0 10px 24px rgba(0, 0, 0, .35), 0 0 0 3px rgba(78, 122, 70, .35); transform: translateY(-4px); filter: none; opacity: 1; }
.lk-pick.np b { font-size: 17px; padding: 0 4px; }
.lk-pick.np small { color: #7a6448; padding: 0 4px; font: 600 12.5px Fredoka, sans-serif; }
.lk-npart { position: relative; display: block; overflow: hidden; border-radius: 10px; height: clamp(150px, 30vh, 250px); margin: 0 auto 6px; background: #ebdccf; }
.lk-npart img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lk-npwalk { position: absolute; right: 6px; bottom: 6px; display: grid; padding: 3px 4px 0; border-radius: 8px; background: rgba(255, 250, 240, .82); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.lk-npwalk .lk-px { animation: lk-npw calc(var(--n) * 110ms) steps(var(--n)) infinite; }
@keyframes lk-npw { to { background-position-x: calc(var(--cw) * var(--n) * -1); } }
.lk-pick.np button[aria-pressed="false"] .lk-npwalk { display: none; }
.lk-npchk { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #4e7a46; color: #fff; font-style: normal; font-weight: 700; font-size: 14px; opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s; }
.lk-pick.np button[aria-pressed="true"] .lk-npchk { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lk-pick.np button[aria-pressed="true"] { transform: none; } .lk-npwalk .lk-px { animation: none; } }
.lk-err { color: #ff9a8a; min-height: 1.2em; font-weight: 700; }
.lk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.lk-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--plum-d); border-radius: 8px; padding: 6px 10px; }
.lk-list li > span { display: grid; min-width: 0; }
.lk-list small { color: var(--muted); font-weight: 700; font-size: 12px; }
.lk-coin { font: 700 18px Fredoka, sans-serif; color: #ffd23f !important; }
.lk-reward { display: grid; gap: 4px; justify-items: center; padding: 14px; border: 3px solid var(--amber); border-radius: 14px; background: linear-gradient(160deg, #5a3a4a, var(--plum-d)); transform: rotate(-2deg); }
.lk-reward big { font: 700 28px Fredoka, sans-serif; }
.lk-reward small { color: var(--muted); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.lk-card .lk-sp { height: 64px; width: 64px; object-fit: contain; }
.lk-party { display: flex; flex-wrap: wrap; gap: 10px; }
.lk-party > div { display: grid; justify-items: center; background: var(--plum-d); border-radius: 10px; padding: 4px 8px; }
.lk-party small { font-weight: 800; color: var(--muted); font-size: 11px; }
.lk-chip { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--c, #888); color: #1c1222; text-transform: uppercase; letter-spacing: .05em; margin-left: 8px; vertical-align: middle; }
.lk-ghost { --c: #888; -webkit-mask: url(/static/games/lakbay/spirits/bakunawa.webp) center / contain no-repeat; mask: url(/static/games/lakbay/spirits/bakunawa.webp) center / contain no-repeat; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 60%, #000)); }

/* spirit book */
.lk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lk-cell { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 6px 4px; min-width: 0; background: var(--plum-d); border: 2px solid #4a3a52; border-radius: 12px; }
.lk-cell.own { border-color: var(--amber); background: #3b2848; }
.lk-cell.met { border-color: #6a5a72; }
.lk-cell:hover { border-color: var(--cream); }
.lk-face { display: grid; place-items: center; width: 100%; aspect-ratio: 1; max-width: 62px; }
.lk-face .lk-sp { width: 100%; height: 100%; object-fit: contain; }
.lk-card .lk-face .lk-sp { height: 100%; width: 100%; }
.lk-dark { filter: brightness(0); }
.lk-q { font: 700 36px Fredoka, sans-serif; color: #6a5a72; }
.lk-cell small { display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 12px; color: var(--muted); max-width: 100%; }
.lk-dotc { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lk-info { min-height: 78px; text-align: left; background: var(--plum-d); border-radius: 12px; padding: 10px 14px; display: grid; gap: 4px; align-content: start; }
.lk-info h3 { display: flex; align-items: center; }

/* HUD: a pill on the left, round buttons on the right (the sound and full screen buttons sit beside them, far right) */
.lk-hud { position: absolute; left: 8px; right: 104px; top: 8px; display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; pointer-events: none; z-index: 5; }
.lk-hud > * { pointer-events: auto; }
.lk-pill { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; min-width: 0; background: var(--plum); border: 2px solid var(--amber); border-radius: 999px; box-shadow: 0 3px 0 var(--ink); }
.lk-fc { position: relative; width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 50%; background: #4a3258; border: 2px solid var(--amber); }
.lk-fc { --d: 36px; }
.lk-fc .lk-head { position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); background-repeat: no-repeat; image-rendering: pixelated; }
.lk-pc { display: grid; gap: 3px; min-width: 150px; }
.lk-pc .lk-row { gap: 8px; line-height: 1.1; }
.lk-pc .lk-row b { font: 700 15px Fredoka, sans-serif; }
.lk-pc small { color: var(--muted); font-weight: 700; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-pc .lk-bar { height: 8px; border-width: 1.5px; }
.lk-pc .lk-bar b { display: none; }
.lk-nav { display: flex; gap: 8px; }

/* map screens */
.lk-map { position: absolute; inset: 0; display: grid; place-items: center; background: var(--plum-d); }
.lk-mapbox { position: relative; height: 100%; max-width: 100%; }
.lk-mapbox img.lk-art { display: block; height: 100%; width: 100%; object-fit: contain; }
.lk-pin { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 2px; background: none; border: 0; padding: 0; }
.lk-pin .lk-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--amber); border: 3px solid var(--plum); box-shadow: 0 0 0 2px var(--amber), 0 0 16px 4px rgba(255, 190, 80, .7); animation: lk-pulse 1.6s ease-in-out infinite; }
.lk-pin .lk-tag { background: var(--plum); border: 2px solid var(--amber); border-radius: 10px; padding: 2px 9px; font-weight: 800; font-size: 13px; white-space: nowrap; box-shadow: 0 2px 0 var(--ink); order: -1; }
.lk-pin .lk-tag small { display: block; font-size: 10px; color: var(--muted); font-weight: 700; }
.lk-pin:hover .lk-tag, .lk-pin:focus-visible .lk-tag { background: #4a3258; }
.lk-pin.locked .lk-dot { display: grid; place-items: center; width: 28px; height: 28px; background: #6f6577; border-color: #3a3040; box-shadow: 0 0 0 2px #8a7f90; animation: none; color: #fff; }
.lk-pin.locked .lk-dot .lk-ic svg { width: 15px; height: 15px; }
.lk-pin.locked .lk-tag { background: rgba(60, 52, 66, .92); border-color: #8a7f90; color: #cfc6d4; }
.lk-pin.next .lk-dot { background: #fff3b0; }
/* a province you cannot play yet shows its label only on hover or keyboard focus, so a crowded region stays readable */
.lk-pin.quiet .lk-tag { position: absolute; bottom: calc(100% + 2px); opacity: 0; pointer-events: none; transition: opacity .15s; }
.lk-pin:not(.quiet) { z-index: 2; }
.lk-pin.quiet:hover, .lk-pin.quiet:focus-visible { z-index: 5; }
.lk-pin.quiet .lk-dot, .lk-pin.quiet.locked .lk-dot { width: 14px; height: 14px; border-width: 2px; box-shadow: 0 0 0 1px var(--amber); animation: none; }
.lk-pin.quiet.locked .lk-dot { box-shadow: 0 0 0 1px #8a7f90; }
.lk-pin.quiet .lk-dot .lk-ic { display: none; }
.lk-pin.quiet:hover .lk-tag, .lk-pin.quiet:focus-visible .lk-tag { opacity: 1; }
/* world map: labels show on hover or focus only and every pin keeps its dot. Open: the dot swells. Locked: it stays small and the pointer says no. */
.lk-pin.hov .lk-tag { position: absolute; bottom: calc(100% + 2px); opacity: 0; pointer-events: none; transition: opacity .15s; }
.lk-pin.hov:hover, .lk-pin.hov:focus-visible { z-index: 5; }
.lk-pin.hov:hover .lk-tag, .lk-pin.hov:focus-visible .lk-tag { opacity: 1; }
.lk-pin.hov:not(.locked):not(.quiet):hover .lk-dot, .lk-pin.hov:not(.locked):not(.quiet):focus-visible .lk-dot { animation: none; transform: scale(1.4); box-shadow: 0 0 0 2px var(--amber), 0 0 22px 8px rgba(255, 210, 110, .9); }
.lk-pin.hov.locked, .lk-pin.hov.quiet { cursor: not-allowed; }
.lk-pin.hov.locked:hover .lk-dot { box-shadow: 0 0 0 2px #cfc6d4; }
@keyframes lk-pulse { 50% { transform: scale(1.25); } }
.lk-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 14px; font-weight: 800; font-size: 13px; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; z-index: 4; }

/* sector */
.lk-view { position: absolute; inset: 0; overflow: hidden; background: #84b457; touch-action: none; cursor: pointer; }
.lk-world { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; transform-origin: 0 0; will-change: transform; }
.lk-world > img.lk-art { position: absolute; inset: 0; width: 1600px; height: 1000px; display: block; pointer-events: none; }
.lk-mist { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(7px); }
.lk-mist.glow { background: radial-gradient(closest-side, rgba(238, 222, 255, .8), rgba(196, 166, 240, .38) 55%, rgba(196, 166, 240, 0)); }
.lk-mist.dawn { background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(236, 244, 255, .5) 60%, rgba(236, 244, 255, 0)); }
.lk-spot { position: absolute; width: 0; height: 0; pointer-events: none; }
.lk-spot::before { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 226, 160, .85); border: 3px solid var(--plum); box-shadow: 0 0 14px 3px rgba(255, 190, 80, .8); }
/* place names: above the spot (and above your head), only when you are near */
.lk-lab { position: absolute; z-index: 3000; transform: translate(-50%, -100%); opacity: 0; pointer-events: none; transition: opacity .2s; background: var(--plum); border: 2px solid var(--amber); border-radius: 10px; padding: 3px 10px; font-weight: 800; font-size: 15px; white-space: nowrap; color: var(--cream); }
.lk-lab.on { opacity: 1; }
/* road signs at the exits */
.lk-sign { position: absolute; transform: translate(-50%, -100%); pointer-events: none; width: max-content; max-width: 190px; }
.lk-sign .board { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; padding: 3px 10px; background: #9a6a34; border: 2px solid #4a2e14; border-radius: 8px; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); color: #fff3d0; font: 800 13px/1.2 Nunito, sans-serif; text-align: center; }
.lk-sign .board b { font: 700 17px Fredoka, sans-serif; }
.lk-sign .board .lk-ic svg { width: 16px; height: 16px; }
.lk-sign small { display: none; flex-basis: 100%; font-size: 11px; font-weight: 700; white-space: normal; }
.lk-sign.near small { display: block; }
.lk-sign .post { display: block; width: 6px; height: 24px; margin: 0 auto; background: #5a3a1a; border-radius: 0 0 2px 2px; }
.lk-sign.locked .board { background: #5a5060; border-color: #2a2430; color: #e4dbe8; }
/* spirits in the mist: a dark glowing shape with a "!" */
.lk-sil { position: absolute; left: 0; top: 0; width: 48px; height: 64px; padding: 0; border: 0; background: none; opacity: 0; pointer-events: none; transition: opacity .3s; cursor: pointer; }
.lk-sil.on { pointer-events: auto; }
.lk-sil .body { position: absolute; inset: 14px 5px 0; border-radius: 46% 46% 28% 28% / 58% 58% 30% 30%; background: radial-gradient(ellipse at 50% 30%, #2c1a3c, #07030b 75%); box-shadow: 0 0 12px 3px rgba(205, 160, 255, .7), 0 0 28px 10px rgba(150, 90, 230, .35); animation: lk-flick 2.4s ease-in-out infinite; }
.lk-sil .body::before, .lk-sil .body::after { content: ""; position: absolute; top: 28%; width: 7px; height: 9px; border-radius: 50%; background: #ffe9a0; box-shadow: 0 0 6px #ffd66a; }
.lk-sil .body::before { left: 22%; } .lk-sil .body::after { right: 22%; }
.lk-sil .bub { position: absolute; left: 50%; top: -6px; margin-left: -12px; width: 24px; height: 24px; border-radius: 50%; background: #fff3b0; border: 2px solid var(--plum); color: #3a1a05; font: 700 17px/20px Fredoka, sans-serif; text-align: center; animation: lk-bubble 1s ease-in-out infinite alternate; }
.lk-world.tired .lk-sil .body, .lk-world.tired .lk-sil .bub { filter: grayscale(1) brightness(.7); opacity: .55; }
@keyframes lk-flick { 50% { box-shadow: 0 0 16px 5px rgba(205, 160, 255, .85), 0 0 34px 14px rgba(150, 90, 230, .45); } }
@keyframes lk-bubble { to { translate: 0 -5px; } }
/* you and your follower */
.lk-avatar { position: absolute; width: 96px; height: 96px; pointer-events: none; image-rendering: pixelated; }
/* the walk sheet at half size: see SPRITE in lakbay.js. The feet stand on the shadow, 80 px from the top. */
.lk-px { width: var(--cw); height: var(--ch); background-size: calc(var(--cw) * 8) calc(var(--ch) * 4); background-repeat: no-repeat; image-rendering: pixelated; }
.lk-avatar .lk-px { position: absolute; left: 50%; bottom: 16px; margin-left: calc(var(--cw) / -2); }
.lk-avatar .sh, .lk-fol .sh { position: absolute; left: 50%; top: 80px; width: 40px; height: 12px; margin: -6px 0 0 -20px; border-radius: 50%; background: rgba(10, 6, 14, .4); filter: blur(2px); }
.lk-fol { position: absolute; left: 0; top: 0; width: 42px; height: 42px; pointer-events: none; }
.lk-fol .sh { top: 38px; width: 26px; height: 8px; margin: -4px 0 0 -13px; }
.lk-fol .lk-folimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: lk-hop .7s ease-in-out infinite alternate; }
.lk-fol.walk .lk-folimg { animation-duration: .3s; }
.lk-fol.flip .lk-folimg { scale: -1 1; }
@keyframes lk-hop { to { translate: 0 -5px; } }
.lk-toast { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 12; max-width: 90%; text-align: center; padding: 8px 16px; font-weight: 800; animation: lk-pop .25s ease-out; }
@keyframes lk-pop { from { transform: translateX(-50%) scale(.85); opacity: 0; } }
.lk-act { position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); z-index: 6; max-width: 94%; }
.lk-kb { font: 800 11px Nunito, sans-serif; }
kbd.lk-kb { opacity: .7; margin-left: 4px; }

/* rest spot and quest games */
.lk-say { min-height: 1.4em; font-weight: 700; }
.lk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lk-area { display: grid; gap: 10px; justify-items: center; }
.lk-tree { position: relative; width: 300px; height: 210px; max-width: 100%; border-radius: 12px; overflow: hidden; background: linear-gradient(#bfe3f2, #f2e9c0); }
.lk-tree .trunk { position: absolute; left: 138px; top: 110px; width: 24px; height: 110px; background: #6a4a2a; border-radius: 4px; }
.lk-clump { position: absolute; z-index: 2; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, hsl(var(--h) 55% 50%), hsl(var(--h) 55% 28%) 85%); box-shadow: inset -4px -6px 0 rgba(0, 0, 0, .18), 0 2px 0 rgba(0, 0, 0, .25); }
.lk-clump:hover { filter: brightness(1.12); }
.lk-eyes { position: absolute; z-index: 1; display: flex; gap: 4px; transform: translateX(-50%); animation: lk-blink 3.2s infinite; }
.lk-eyes i { width: 24px; height: 26px; border-radius: 50%; border: 3px solid #3a2410; background: radial-gradient(circle at 50% 50%, #120a18 0 6px, #f6d56a 7px); }
.lk-eyes.found { animation: none; scale: 1.4; z-index: 3; }
@keyframes lk-blink { 0%, 90%, 100% { scale: 1 1; } 94% { scale: 1 .1; } }
.lk-river { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 12px; border: 3px solid #5a8a40; background: repeating-linear-gradient(100deg, #2f86a8 0 24px, #3a98ba 24px 48px); background-size: 96px 100%; animation: lk-flow 2s linear infinite; }
@keyframes lk-flow { to { background-position: -96px 0; } }
.lk-boat { position: absolute; left: 12%; top: 50%; width: 120px; height: 44px; margin-top: -26px; background: #8a5a2a; clip-path: polygon(20% 0, 80% 0, 80% 30%, 100% 30%, 86% 100%, 12% 100%, 0 30%, 20% 30%); animation: lk-hop 1.2s ease-in-out infinite alternate; }
.lk-boat::before { content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 30%; background: #e0605a; }
.lk-flower { position: absolute; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle, #ffd23f 0 22%, #ff7ab0 24% 100%); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .4); }
.lk-sunset { position: relative; width: 320px; height: 200px; max-width: 100%; overflow: hidden; border-radius: 12px; background: linear-gradient(#3b2a6a, #ff8a50 72%, #ffd08a); }
.lk-sunset .sun { position: absolute; left: 140px; top: 10px; width: 40px; height: 40px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 30px 12px rgba(255, 200, 100, .7); }
.lk-sunset .hill { position: absolute; border-radius: 50%; background: #7a5a30; }
.lk-sunset .hill.a { left: -60px; width: 190px; height: 110px; bottom: -50px; background: #6a4a28; }
.lk-sunset .hill.b { left: 190px; width: 190px; height: 100px; bottom: -50px; background: #6a4a28; }
.lk-sunset .hill.c { left: 60px; width: 200px; height: 130px; bottom: -60px; }
.lk-sunset.snap::after { content: ""; position: absolute; inset: 0; background: #fff; animation: lk-snap .6s ease-out forwards; }
@keyframes lk-snap { to { opacity: 0; } }
.lk-timing { position: relative; width: 100%; height: 34px; overflow: hidden; border-radius: 999px; background: #1c3a5a; border: 2px solid var(--amber); }
.lk-timing .zone { position: absolute; top: 0; bottom: 0; background: #4fd37a; opacity: .85; }
.lk-timing .mk { position: absolute; top: 0; bottom: 0; width: 8px; margin-left: -4px; border-radius: 4px; background: #fff; box-shadow: 0 0 8px #fff; }

/* sound control: a full screen button and a sound button, with the volume slider on hover */
.lk-snd { position: absolute; z-index: 10; display: flex; align-items: center; gap: 8px; right: 8px; top: 8px; }
.lk-snd input { display: none; position: absolute; right: 0; top: 48px; width: 120px; padding: 10px; box-sizing: content-box; background: var(--plum); border: 2px solid var(--amber); border-radius: 12px; accent-color: var(--amber); }
.lk-snd:hover input, .lk-snd:focus-within input { display: block; }
.lk-veil { position: absolute; inset: 0; background: #120a18; z-index: 20; pointer-events: none; }
.lk:fullscreen { height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
.lk:-webkit-full-screen { height: 100vh; border: 0; border-radius: 0; }

@media (hover: none) { .lk-kb { display: none; } .lk-snd input { display: none !important; } }
@media (max-width: 680px) {
  .lk { height: clamp(560px, calc(100svh - 150px), 900px); }
  .lk-hud { right: 88px; left: 6px; top: 6px; gap: 6px; }
  .lk-snd { right: 6px; top: 6px; gap: 6px; }
  .lk-ib { width: 34px; height: 34px; } .lk-ic svg { width: 19px; height: 19px; }
  .lk-nav { gap: 6px; }
  .lk-pill { padding: 3px 10px 3px 3px; gap: 6px; } .lk-fc { width: 34px; height: 34px; --d: 30px; }
  .lk-pc { min-width: 84px; } .lk-pc small { display: none; }
  .lk-toast { top: 56px; }
  .lk-hint { white-space: normal; text-align: center; width: max-content; max-width: 92%; }
  .lk-grid { grid-template-columns: repeat(3, 1fr); }
  .lk-card { padding: 14px; } .lk-card h2 { font-size: 24px; }
  .lk-two .lk-btn { padding: 6px 6px; font-size: 13px; }
  .lk-pin .lk-tag { font-size: 11px; padding: 1px 6px; } .lk-pin .lk-tag small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lk *:not(.fx-full, .fx-full *), .lk *:not(.fx-full, .fx-full *)::before { animation: none !important; transition: none !important; } }
.lk-world > .lk-walk { position: absolute; inset: 0; pointer-events: none; }
.lk-walk rect { fill: rgb(80 220 120 / .16); stroke: rgb(80 220 120 / .35); stroke-width: .75; }
.lk-walk rect.shut { fill: rgb(230 70 60 / .3); stroke: rgb(230 70 60 / .6); }
.lk-walk[hidden] { display: none; }
/* Bohol Passport: a stamped place spot turns into a small amber ring, and the postcard text */
a.lk-btn { display: inline-block; color: inherit; text-decoration: none; text-align: center; }
/* Bohol Passport postcard (design A): a tilted paper card with a photo and a red stamp mark */
/* Postcard (design C): a real postcard. The photo, a message on ruled lines, a postage stamp for the coins, a handwritten
   "Read more" and tape for a new card. The whole card links to PinasDex, and an X closes it. */
.lk-center:has(> .pc) { container-type: size; }
.lk-card.pc { position: relative; display: flex; flex-direction: column; padding: 10px; gap: 0; width: min(400px, 100%); max-height: 100%; overflow: visible; text-align: left; }
.lk-card.pc > h2 { display: none; }
.lk-pcard { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; background: #f6e7c6; color: #4a3320; border-radius: 6px; padding: 8px; box-shadow: 0 6px 14px rgba(0, 0, 0, .45); text-decoration: none; cursor: pointer; transition: transform .15s; }
a.lk-pcard:hover { text-decoration: none; transform: translateY(-2px) rotate(.4deg); }
a.lk-pcard:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.lk-ppic { position: relative; flex: 1 1 0; min-height: 64px; }
.lk-ppic img { display: block; width: 100%; height: 100%; object-fit: cover; border: 3px solid #fff; border-radius: 2px; background: #d9c59a; }
.lk-pcredit { position: absolute; left: 3px; right: 3px; bottom: 3px; padding: 10px 8px 2px; font-size: 10px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-pmsg { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 2px 0; background: repeating-linear-gradient(transparent 0 21px, rgba(138, 90, 43, .18) 21px 22px); background-position: 0 8px; }
.lk-pkind { grid-column: 1; font: 600 17px/22px Caveat, cursive; color: #8a5a2b; }
.lk-pcard h3 { grid-column: 1; margin: 0; font: 700 20px/22px Fredoka, sans-serif; color: #4a3320; }
.lk-pcard p { grid-column: 1; margin: 0; font-size: 13.5px; line-height: 22px; color: #4a3320; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.lk-ppost { grid-column: 2; grid-row: 1 / 4; justify-self: end; display: grid; gap: 3px; justify-items: center; align-content: start; }
.lk-pstamp { width: 58px; height: 58px; padding: 4px; background: #fff; border-radius: 50%; color: #1f7a45; display: grid; place-items: center; text-align: center; font: 700 9px/1.15 Fredoka, sans-serif; transform: rotate(-8deg); box-shadow: 0 2px 5px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .06); }
.lk-pstamp span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #d8f5e2; border: 2px solid #2f9a5a; }
.lk-pstamp b { display: block; font: 700 17px/1 Fredoka, sans-serif; }
.lk-ppm { font-size: 10px; font-weight: 800; color: #8a5a2b; letter-spacing: .04em; text-align: center; }
.lk-pfoot { display: flex; justify-content: flex-end; margin-top: 6px; }
.lk-pmore { font: 600 18px/1 Caveat, cursive; color: #b3402f; white-space: nowrap; border-bottom: 1.5px dashed rgba(179, 64, 47, .4); padding-bottom: 1px; }
.lk-ptape { position: absolute; z-index: 3; left: 14px; top: -9px; transform: rotate(-4deg); background: rgba(224, 160, 80, .92); color: #120a18; padding: 1px 12px; font-weight: 800; font-size: 11px; letter-spacing: .03em; box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.lk-x { position: absolute; z-index: 6; top: -11px; right: -11px; width: 32px; height: 32px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: #120a18; border: 2px solid var(--amber); color: var(--cream); cursor: pointer; }
.lk-x:hover, .lk-x:focus-visible { background: var(--amber); color: #120a18; }
.lk-x .lk-ic svg { width: 16px; height: 16px; stroke-width: 3; }
@container (aspect-ratio > 1.3) {
  .lk-card.pc { width: min(640px, 100%); }
  .lk-pcard { flex-direction: row; gap: 12px; }
  .lk-ppic { flex: 0 0 46%; }
  .lk-pbody { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; border-left: 1px solid rgba(138, 90, 43, .27); padding-left: 12px; }
  .lk-pmsg { padding-top: 2px; }
  .lk-pcard p { -webkit-line-clamp: 5; }
}
@container (max-aspect-ratio: 1.3) { .lk-pbody { display: contents; } }
/* confetti over a new stamp's postcard */
.lk-rain { position: absolute; inset: 0; z-index: 5; overflow: hidden; border-radius: 12px; pointer-events: none; }
.lk-rain i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: lk-fall ease-in forwards; }
@keyframes lk-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), 420px) rotate(var(--r)); } }
/* the passport strip under the postcard: a kraft punch card, one round sticker per stamped place */
.lk-strip { flex: none; margin-top: 8px; padding: 8px 12px 10px; border-radius: 8px; background: #d8b987 radial-gradient(rgba(90, 55, 20, .12) 1px, transparent 1.4px) 0 0 / 5px 5px; border: 2px dashed rgba(74, 51, 32, .55); color: #4a3320; }
.lk-shead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.lk-shead b { font: 700 13px/1 Fredoka, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.lk-shead span { font: 700 15px/1 Caveat, cursive; color: #6b4a2b; }
.lk-sbody { display: grid; gap: 5px; max-height: 34cqh; overflow-y: auto; }
.lk-srow { display: grid; grid-template-columns: minmax(60px, 28%) 1fr; align-items: center; gap: 8px; }
.lk-srow > span { font: 700 12px/1.1 Nunito, sans-serif; color: #6b4a2b; }
.lk-srow.here > span { color: #1f7a45; }
.lk-slots { display: flex; flex-wrap: wrap; gap: 4px; }
.lk-slot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed rgba(74, 51, 32, .5); background: rgba(255, 255, 255, .18); }
.lk-slot.boss { border-color: #b3402f; color: #b3402f; }
.lk-slot.on { border: 3px solid #2f9a5a; background: #d8f5e2; color: #1f7a45; font: 700 12px/1 Fredoka, sans-serif; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .35); }
.lk-slot.now { outline: 2px solid #4a3320; outline-offset: 2px; animation: lk-pop .5s ease-out; }
@keyframes lk-pop { from { transform: scale(1.5) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lk-slot.now { animation: none; } }
/* shop tooltip: hover or focus an item name */
.lk-card.wide { position: relative; }
.lk-card.wide > .lk-x { top: 8px; right: 8px; }
.lk-tip { position: relative; cursor: help; border-bottom: 1px dotted rgba(255, 255, 255, .5); }
.lk-tip::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 8; width: max-content; max-width: min(260px, 70vw); padding: 6px 10px; border-radius: 8px; background: #120a18; border: 1px solid var(--amber); color: var(--cream); font: 600 12.5px/1.35 Nunito, sans-serif; opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .12s, transform .12s; }
.lk-tip:hover::after, .lk-tip:focus-visible::after, .lk-tip:focus::after { opacity: 1; transform: none; }
/* the guardian and boss prompt */
.lk-card.gp { max-width: 470px; text-align: left; }
.lk-gtop { display: flex; gap: 12px; align-items: center; }
.lk-gart { flex: 0 0 78px; height: 78px; border-radius: 14px; background: #1c1222; border: 2px solid rgba(255, 255, 255, .13); display: grid; place-items: center; }
.lk-gart .lk-sp { height: 70px; width: 70px; }
.lk-card.gp h3 { margin: 0 0 4px; font: 700 20px/1.1 Fredoka, sans-serif; }
.lk-gchips { display: flex; flex-wrap: wrap; gap: 5px; }
.lk-gchips span { border-radius: 99px; padding: 1px 10px; font-weight: 800; font-size: 12px; background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .19); }
.lk-gchips .el { background: rgba(242, 212, 108, .2); border-color: rgba(242, 212, 108, .53); color: #ffe9a0; }
.lk-gchips .weak { background: rgba(111, 227, 154, .13); border-color: rgba(111, 227, 154, .47); color: #9df0bd; }
.lk-gwin { display: grid; gap: 3px; background: rgba(18, 10, 24, .53); border-radius: 10px; padding: 6px 10px; font-size: 13px; color: var(--cream); }
.lk-gwin b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Stamp markers (design 1, ring and check): a pulsing white dashed ring means "not stamped yet", a green disc with a check means "stamped" */
.lk-spot.place::before { width: 26px; height: 26px; left: -13px; top: -13px; box-sizing: border-box; border: 3px dashed #fff; background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 3px rgba(18, 10, 24, .55), 0 0 14px 3px rgba(255, 255, 255, .7); animation: lk-ring 1.8s ease-in-out infinite; }
.lk-spot.place.stamped::before { border: 3px solid #123b24; background: #6fe39a; box-shadow: 0 0 0 3px rgba(18, 10, 24, .55), 0 0 12px 2px rgba(111, 227, 154, .7); animation: none; }
.lk-spot.place.stamped::after { content: ""; position: absolute; left: -6px; top: -10px; width: 7px; height: 13px; border: solid #123b24; border-width: 0 3.5px 3.5px 0; transform: rotate(40deg); }
@keyframes lk-ring { 50% { box-shadow: 0 0 0 3px rgba(18, 10, 24, .55), 0 0 20px 8px rgba(255, 255, 255, .95); } }
@media (prefers-reduced-motion: reduce) { .lk-spot.place::before { animation: none; } }
/* the button row (map, bag, book, grid) and the full screen and sound buttons sit in the lower right on the map screens */
:is([data-screen="sector"], [data-screen="province"], [data-screen="world"]) .lk-snd { top: auto; bottom: 8px; }
:is([data-screen="sector"], [data-screen="province"], [data-screen="world"]) .lk-snd input { top: auto; bottom: 48px; }
:is([data-screen="sector"], [data-screen="province"], [data-screen="world"]) .lk-hud { inset: 0; padding: 8px; }
:is([data-screen="sector"], [data-screen="province"], [data-screen="world"]) .lk-nav { position: absolute; right: 104px; bottom: 8px; }
@media (max-width: 680px) {
  :is([data-screen="sector"], [data-screen="province"], [data-screen="world"]) .lk-snd { bottom: 6px; }
  :is([data-screen="sector"], [data-screen="province"], [data-screen="world"]) .lk-hud { padding: 6px; }
  :is([data-screen="sector"], [data-screen="province"], [data-screen="world"]) .lk-nav { right: 88px; bottom: 6px; }
  :is([data-screen="sector"], [data-screen="province"], [data-screen="world"]) .lk-hint { bottom: 54px; }
  :is([data-screen="sector"], [data-screen="province"], [data-screen="world"]) .lk-act { bottom: 100px; }
}
/* Quest spot: a red diamond with "!", pulsing until done, then green with a check. Rest spot: a pink square with a heart, pulsing when you are hurt. */
.lk-spot.guardian::before, .lk-spot.heal::before { width: 24px; height: 24px; left: -12px; top: -12px; box-sizing: border-box; }
.lk-spot.guardian::before { border-radius: 5px; transform: rotate(45deg); border: 3px solid #5a1a14; background: #e0605a; box-shadow: 0 0 0 3px rgba(18, 10, 24, .55), 0 0 14px 3px rgba(224, 96, 90, .8); animation: lk-qring 1.8s ease-in-out infinite; }
.lk-spot.heal::before { border-radius: 9px; border: 3px solid #5a1a3c; background: #ff8ec7; box-shadow: 0 0 0 3px rgba(18, 10, 24, .55), 0 0 12px 2px rgba(255, 142, 199, .7); }
.lk-spot.guardian::after, .lk-spot.heal::after { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; display: grid; place-items: center; font: 800 15px/1 Fredoka, sans-serif; color: #fff; }
.lk-spot.guardian::after { content: ""; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z' fill='%23ffffff44' stroke='white' stroke-width='2.4' stroke-linejoin='round'/></svg>") center / 16px no-repeat; }
.lk-spot.heal::after { content: "♥"; }
.lk-spot.heal.hurt::before { animation: lk-hring 1.2s ease-in-out infinite; }
.lk-spot.guardian.done::before { border-color: #123b24; background: #6fe39a; box-shadow: 0 0 0 3px rgba(18, 10, 24, .55), 0 0 12px 2px rgba(111, 227, 154, .7); animation: none; }
.lk-spot.guardian.done::after { content: ""; background: none; display: block; left: -6px; top: -10px; width: 7px; height: 13px; border: solid #123b24; border-width: 0 3.5px 3.5px 0; transform: rotate(40deg); }
@keyframes lk-qring { 50% { box-shadow: 0 0 0 3px rgba(18, 10, 24, .55), 0 0 22px 8px rgba(224, 96, 90, .95); } }
@keyframes lk-hring { 50% { box-shadow: 0 0 0 3px rgba(18, 10, 24, .55), 0 0 22px 9px rgba(255, 142, 199, 1); } }
@media (prefers-reduced-motion: reduce) { .lk-spot.guardian::before, .lk-spot.heal.hurt::before { animation: none; } }
/* Boss spot: a dark violet disc with a moon, pulsing until the boss is beaten, then green with a check */
.lk-spot.boss::before { width: 32px; height: 32px; left: -16px; top: -16px; box-sizing: border-box; border: 3px solid #1c1222; background: #7a4fc0; box-shadow: 0 0 0 3px rgba(18, 10, 24, .6), 0 0 16px 4px rgba(150, 100, 230, .9); animation: lk-bring 1.4s ease-in-out infinite; }
.lk-spot.boss::after { content: "☾"; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; display: grid; place-items: center; font: 800 20px/1 Fredoka, sans-serif; color: #fff; }
.lk-spot.boss.done::before { border-color: #123b24; background: #6fe39a; box-shadow: 0 0 0 3px rgba(18, 10, 24, .55), 0 0 12px 2px rgba(111, 227, 154, .7); animation: none; }
.lk-spot.boss.done::after { content: ""; display: block; left: -6px; top: -10px; width: 7px; height: 13px; border: solid #123b24; border-width: 0 3.5px 3.5px 0; transform: rotate(40deg); }
@keyframes lk-bring { 50% { box-shadow: 0 0 0 3px rgba(18, 10, 24, .6), 0 0 28px 12px rgba(170, 120, 255, 1); } }
@media (prefers-reduced-motion: reduce) { .lk-spot.boss::before { animation: none; } }
.lk-spot.boss.sealed::before { background: #4a3d58; box-shadow: 0 0 0 3px rgba(18, 10, 24, .6); animation: none; opacity: .75; }
.lk-spot.boss.sealed::after { opacity: .6; }

/* Bohol Passport (Q): a paper book. The left page is the traveler ID, the party and the luggage grid. Bookmark tabs pick
   the right page: Stats, Spirits or Cards. In a narrow stage every page, the ID too, is a tab. */
.lk-center:has(> .bk) { container-type: size; }
.lk-card.bk { position: relative; width: min(940px, 100%); height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
  grid-template-areas: "id tabs" "id page";
  gap: 0; padding: 6px; background: #8a5a2b; border-color: #6b4520; overflow: visible; text-align: left; color: #4a3320; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
.lk-card.bk > h2, .lk-bktabs button[data-tab="id"] { display: none; }
.lk-bktabs { grid-area: tabs; display: flex; gap: 4px; padding: 0 0 0 4px; }
.lk-bktabs button { position: relative; flex: 1; padding: 6px 0; border: 0; border-radius: 6px 6px 0 0; background: #b07a40; color: #f6e7c6; font: 700 14px Fredoka, sans-serif; }
.lk-bktabs button:hover { background: #c48a4a; }
.lk-bktabs button.r { background: #f6e7c6; color: #4a3320; }
.lk-new { display: inline-block; min-width: 18px; margin-left: 5px; padding: 0 5px; border-radius: 999px; background: #c8452f; color: #fff; font: 700 11px/18px Fredoka, sans-serif; font-style: normal; }
.lk-card.bk > .lk-bkpg:not([data-pane="id"]):not(.r) { display: none; }
.lk-bkpg { min-height: 0; overflow: auto; padding: 14px 16px; background: #f6e7c6; display: grid; align-content: start; gap: 8px; }
.lk-bkpg[data-pane="id"] { grid-area: id; border-radius: 8px 0 0 8px; box-shadow: inset -14px 0 18px -14px rgba(74, 51, 32, .5); }
.lk-bkpg:not([data-pane="id"]) { grid-area: page; border-radius: 0 0 8px 0; border-left: 1px dashed #c9a774; box-shadow: inset 14px 0 18px -14px rgba(74, 51, 32, .5); }
.lk-card .lk-bkpg h3 { margin: -6px 0 0; font: 700 20px/1.1 Fredoka, sans-serif; color: #4a3320; text-align: left; }
.lk-bkcap { font: 700 18px/1 Caveat, cursive; color: #8a5a2b; }
.lk-bkrow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 800; color: #8a5a2b; }
.lk-bkrow b { font: 700 14px Fredoka, sans-serif; color: #4a3320; }
.lk-bkrow small { font-size: 11.5px; }
.lk-bkid { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px; border: 1.5px solid #c9a774; border-radius: 6px; background: repeating-linear-gradient(135deg, #f6e7c6 0 8px, #f1dfb8 8px 9px); }
.lk-bkphoto { position: relative; width: 92px; height: 112px; overflow: hidden; border: 3px solid #fff; background: #c9b28a; box-shadow: 0 2px 4px rgba(74, 51, 32, .35); }
.lk-bkphoto .lk-px { position: absolute; left: 50%; top: -7px; margin-left: calc(var(--cw) / -2); }
.lk-bkid dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; align-content: start; min-width: 0; }
.lk-bkid dt { font: 700 10px/20px Fredoka, sans-serif; color: #8a5a2b; letter-spacing: .05em; }
.lk-bkid dd { margin: 0; font: 700 15px/20px Fredoka, sans-serif; color: #4a3320; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-bkxp { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: -4px; }
.lk-bkxp i { height: 10px; border-radius: 3px; background: #e7d1a6; border: 1px solid #c9a774; }
.lk-bkxp i.f { background: var(--amber); border-color: #b97a2e; }
.lk-bkvit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; font-weight: 800; color: #8a5a2b; }
.lk-bkvit .lk-bar { height: 9px; margin-top: 2px; border-width: 1.5px; border-color: #8a5a2b; background: #e7d1a6; }
.lk-bkvit .lk-bar b { display: none; }
.lk-bkparty { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-bkparty div { width: 50px; display: grid; justify-items: center; padding: 3px 2px 1px; border-radius: 6px; background: #ead3a4; }
.lk-bkparty .lk-sp { width: 40px; height: 40px; object-fit: contain; }
.lk-bkparty small { font: 700 10px Fredoka, sans-serif; color: #4a3320; }
.lk-bklug { display: grid; gap: 6px; margin-top: 4px; }
.lk-bkgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 8px; border-radius: 8px; background: #ead3a4; box-shadow: inset 0 2px 4px rgba(74, 51, 32, .25); }
.lk-bkslot { position: relative; aspect-ratio: 1; padding: 0; display: grid; place-items: center; border-radius: 6px; border: 2px solid #c9a774; background: #f8ecd2; transition: transform .12s, border-color .12s; }
button.lk-bkslot:hover { transform: translateY(-1px); border-color: #8a5a2b; }
.lk-bkslot.empty { border-style: dashed; border-color: #d4b986; background: rgba(248, 236, 210, .45); }
.lk-art { display: grid; width: 72%; height: 72%; } .lk-art svg { width: 100%; height: 100%; }
.lk-bkn { position: absolute; right: -4px; bottom: -4px; min-width: 18px; padding: 0 4px; border-radius: 999px; background: #4a3320; color: #fff3dc; font: 700 11px/18px Fredoka, sans-serif; text-align: center; border: 1.5px solid #f8ecd2; }
.lk-bkabout { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; min-height: 58px; padding: 8px 10px; border: 1.5px dashed #c9a774; border-radius: 8px; }
.lk-bkabout .big { width: 40px; height: 40px; }
.lk-bkabout b { display: block; font: 700 15px/1.2 Fredoka, sans-serif; color: #4a3320; }
.lk-bkabout small { display: block; font-size: 12px; line-height: 1.3; color: #6d5238; font-weight: 700; }
.lk-bkabout em { font: 600 16px/1.1 Caveat, cursive; color: #8a5a2b; white-space: nowrap; }
/* the item card floats above its slot on hover or focus (a tap focuses the slot); the top row opens downward so the page edge does not cut it */
.lk-bkslot:hover, .lk-bkslot:focus { z-index: 5; }
.lk-bktip { position: absolute; left: -2px; bottom: calc(100% + 8px); z-index: 20; width: calc(600% + 54px); box-sizing: border-box; text-align: left; background: #f6e6c3; box-shadow: 0 6px 16px rgba(40, 24, 8, .4); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity .12s, transform .12s, visibility .12s; }
.lk-bkslot:hover .lk-bktip, .lk-bkslot:focus .lk-bktip { opacity: 1; visibility: visible; transform: none; }
/* the card spans the grid: shift it left by its slot's column (6 columns, 6px gap, 2px slot border: % is the slot's inner box) */
.lk-bkgrid > .lk-bkslot:nth-child(6n+2) .lk-bktip { left: calc(-2px - 1 * (100% + 10px)); }
.lk-bkgrid > .lk-bkslot:nth-child(6n+3) .lk-bktip { left: calc(-2px - 2 * (100% + 10px)); }
.lk-bkgrid > .lk-bkslot:nth-child(6n+4) .lk-bktip { left: calc(-2px - 3 * (100% + 10px)); }
.lk-bkgrid > .lk-bkslot:nth-child(6n+5) .lk-bktip { left: calc(-2px - 4 * (100% + 10px)); }
.lk-bkgrid > .lk-bkslot:nth-child(6n+6) .lk-bktip { left: calc(-2px - 5 * (100% + 10px)); }
.lk-bkgrid > .lk-bkslot:nth-child(-n+6) .lk-bktip { bottom: auto; top: calc(100% + 8px); }
.lk-bkslots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; height: 104px; padding-top: 6px; }
.lk-bkslots.shake { animation: lk-bkshake .35s; }
@keyframes lk-bkshake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.lk-bksl { position: relative; display: grid; place-items: center; padding: 0; border-radius: 8px; border: 2px dashed #c9a774; background: rgba(201, 167, 116, .12); color: #a8875a; font: 700 12px Fredoka, sans-serif; }
.lk-bksl.full { border: 3px solid #fff; border-radius: 2px; background: #c9b28a; transform: rotate(-1.5deg); box-shadow: 0 3px 6px rgba(74, 51, 32, .35); }
.lk-bksl.full:nth-child(2) { transform: rotate(1.2deg); } .lk-bksl.full:nth-child(3) { transform: rotate(-.6deg); }
.lk-bksl.full::before { content: ""; position: absolute; z-index: 2; top: -9px; left: 50%; width: 46px; height: 14px; transform: translateX(-50%) rotate(-3deg); background: rgba(224, 160, 80, .85); }
.lk-bksl.full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lk-bksn { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; background: linear-gradient(transparent, rgba(18, 10, 24, .85)); color: #fff; font: 700 12px/1.1 Fredoka, sans-serif; text-align: left; }
.lk-bksx { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); border: 1.5px solid var(--amber); color: var(--cream); }
.lk-bksx .lk-ic svg { width: 10px; height: 10px; stroke-width: 3.5; }
.lk-card p.lk-bkhint { margin: 0; font: 600 16px/1.2 Caveat, cursive; color: #8a5a2b; }
.lk-bkcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.lk-bkcard { position: relative; display: grid; grid-template-rows: auto 1fr; align-content: start; padding: 0; text-align: left; color: #4a3320; background: #fff8e6; border: 2px solid #e9d4a8; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(74, 51, 32, .3); transition: transform .12s, border-color .12s; }
button.lk-bkcard:hover { transform: translateY(-2px); }
.lk-bkcard img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lk-bkcard > span { display: grid; gap: 1px; padding: 5px 7px 7px; }
.lk-bkcard b { font: 700 13px/1.15 Fredoka, sans-serif; }
.lk-bkcard small { font-size: 11px; line-height: 1.3; color: #6d5238; font-weight: 700; }
.lk-bkcard.on { border-color: var(--hp); }
.lk-bkcard.on::after, .lk-bkcard.keep::after { position: absolute; top: 5px; right: 5px; padding: 1px 6px; border-radius: 999px; font: 700 9px Fredoka, sans-serif; letter-spacing: .04em; }
.lk-bkcard.on::after { content: "EQUIPPED"; background: var(--hp); color: var(--ink); }
.lk-bkcard.keep::after { content: "KEEPSAKE"; background: #f6e7c6; color: #8a5a2b; border: 1px solid #c9a774; }
.lk-bkcard.keep { filter: saturate(.8); }
.lk-bkcard.lock { grid-template-rows: none; place-content: center; justify-items: center; gap: 2px; min-height: 150px; padding: 10px 8px; text-align: center; background: rgba(201, 167, 116, .15); border: 2px dashed #c9a774; box-shadow: none; color: #8a5a2b; }
.lk-bkcard.lock small { color: #a8875a; }
.lk-bkcard.lock .lk-ic svg { width: 18px; height: 18px; }
.lk-card.bk > .lk-x { top: -12px; right: -12px; }
button.lk-pill { font: inherit; text-align: left; cursor: pointer; }
button.lk-pill:hover { border-color: var(--cream); }
@media (prefers-reduced-motion: reduce) { .lk-bkslots.shake { animation: none; } }
@container (max-width: 700px) { .lk-bkcards { grid-template-columns: repeat(2, 1fr); } }
@container (max-width: 620px) {
  .lk-card.bk { grid-template-columns: 1fr; grid-template-areas: "tabs" "page"; padding: 5px; }
  .lk-bktabs { padding: 0; }
  .lk-bktabs button[data-tab="id"] { display: block; }
  .lk-bktabs button { font-size: 13px; }
  .lk-bktabs button.r { background: #b07a40; color: #f6e7c6; }
  .lk-bktabs button.on { background: #f6e7c6; color: #4a3320; }
  .lk-bkpg { grid-area: page !important; border-radius: 0 0 6px 6px !important; border-left: 0 !important; box-shadow: none !important; padding: 12px; }
  .lk-card.bk > .lk-bkpg.on { display: grid; }
  .lk-card.bk > .lk-bkpg:not(.on) { display: none; }
  .lk-bkid { grid-template-columns: 80px 1fr; } .lk-bkphoto { width: 80px; height: 98px; }
  .lk-bkslots { height: 92px; }
  .lk-card.bk > .lk-x { top: -10px; right: -6px; }
}

/* stat points: the shared editor (sign-up on plum, Passport on paper), sign-up steps and starters, companions */
.lk-pill.pts { position: relative; }
.lk-pill.pts::after { content: ""; position: absolute; top: -3px; left: 34px; width: 12px; height: 12px; border-radius: 50%; background: #c8452f; border: 2px solid var(--cream); }
.lk-stx { display: grid; gap: 8px; text-align: left; }
.lk-stleft { justify-self: end; font: 700 13px Fredoka, sans-serif; opacity: .85; }
.lk-stleft b { display: inline-block; min-width: 26px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--amber); color: #3a1a05; text-align: center; }
.lk-strows { display: grid; gap: 5px; }
.lk-strow { display: grid; grid-template-columns: 38px 1fr auto; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 8px; background: rgba(0, 0, 0, .14); }
.lk-strow > i { display: grid; place-items: center; height: 26px; border-radius: 6px; background: var(--c); color: #1c1222; font: 700 11px Fredoka, sans-serif; font-style: normal; letter-spacing: .04em; }
.lk-strow > span:not(.lk-stbtn) { display: grid; min-width: 0; }
.lk-strow b { font: 700 14px/1.15 Fredoka, sans-serif; }
.lk-strow small { font-size: 11.5px; font-weight: 700; opacity: .8; line-height: 1.25; }
.lk-stbtn { display: flex; align-items: center; gap: 4px; }
.lk-stbtn button { width: 34px; height: 34px; padding: 0; border-radius: 8px; border: 2px solid var(--c); background: transparent; font: 700 18px/1 Fredoka, sans-serif; }
.lk-stbtn button:hover:not(:disabled) { background: var(--c); color: #1c1222; }
.lk-stbtn button:disabled { opacity: .3; cursor: not-allowed; }
.lk-stbtn output { min-width: 24px; text-align: center; font: 700 17px Fredoka, sans-serif; }
.lk-stdl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 4px; }
.lk-stdl div { padding: 4px 5px; border-radius: 6px; border-top: 3px solid var(--c); background: rgba(0, 0, 0, .14); }
.lk-stdl div.up { background: rgba(224, 160, 80, .3); }
.lk-stdl dt { font-size: 10px; font-weight: 800; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-stdl dd { margin: 0; font: 700 14px Fredoka, sans-serif; }
.lk-stnav { display: flex; justify-content: space-between; gap: 10px; }
.lk-stnav .lk-btn { min-width: 110px; }
.lk-bkpg .lk-strow, .lk-bkpg .lk-stdl div { background: #ead3a4; }
.lk-bkpg .lk-stdl div.up { background: #f3c98a; }
.lk-bkpg .lk-stbtn button { border-color: #8a5a2b; color: #4a3320; }
.lk-bkpg .lk-stbtn button:hover:not(:disabled) { background: #8a5a2b; color: #f6e7c6; }
.lk-bkpg .lk-btn { color: var(--cream); }
.lk-bkpg .lk-btn.go { color: #3a1a05; }
.lk-center:has(> .lk-start) { container-type: inline-size; }
.lk-start { width: min(680px, 100%); }
.lk-steps { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 6px; }
.lk-steps li { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; font: 700 13px Fredoka, sans-serif; opacity: .55; }
.lk-steps li i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--amber); font-style: normal; font-size: 12px; }
.lk-steps li.on { opacity: 1; background: var(--plum-d); } .lk-steps li.on i { background: var(--amber); color: #3a1a05; }
.lk-steps li.done { opacity: .85; }
.lk-starters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lk-starters button { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 8px 4px; background: var(--plum-d); border: 2px solid var(--c); border-radius: 12px; }
.lk-starters button[aria-pressed="true"] { background: #4a3258; box-shadow: 0 0 0 3px var(--cream); }
.lk-starters .lk-sp { width: 100%; max-width: 104px; aspect-ratio: 1; object-fit: contain; }
.lk-starters b { font: 700 14px Fredoka, sans-serif; }
.lk-starters .lk-chip { margin: 0; }
.lk-starters small { font-size: 11px; font-weight: 700; color: var(--muted); }
.lk-stinfo { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: var(--plum-d); text-align: left; }
.lk-stinfo p { font-size: 13.5px; }
.lk-stinfo small { font-weight: 800; color: var(--cream); font-size: 12.5px; }
.lk-sug { justify-self: center; border-color: var(--c); font-size: 13px; }
.lk-cslots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.lk-cslot { display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: center; min-height: 76px; padding: 8px; border-radius: 8px; border: 2px solid var(--c, #c9a774); background: #fff8e6; }
.lk-cslot .lk-sp { width: 56px; height: 56px; object-fit: contain; }
.lk-cslot.lock, .lk-cslot.empty { grid-template-columns: auto 1fr; border-style: dashed; background: rgba(201, 167, 116, .15); color: #8a5a2b; }
.lk-cslot > span, .lk-clist li > span:not(.lk-cbtns) { display: grid; gap: 1px; min-width: 0; }
.lk-cslot b, .lk-clist b { font: 700 14px/1.15 Fredoka, sans-serif; color: #4a3320; }
.lk-cslot small, .lk-clist small { font-size: 11.5px; font-weight: 700; color: #6d5238; }
.lk-give { color: #2f6b2a !important; }
.lk-clist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lk-clist li { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: #ead3a4; border-left: 4px solid var(--c); }
.lk-clist .lk-sp { width: 44px; height: 44px; object-fit: contain; }
.lk-cbtns { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.lk-cbtns .lk-btn { min-height: 32px; padding: 3px 10px; font-size: 12.5px; }
@container (max-width: 620px) {
  .lk-clist li { grid-template-columns: 44px 1fr; } .lk-cbtns { grid-column: 1 / -1; }
  .lk-starters { grid-template-columns: repeat(3, 1fr); }
}

/* an open road: its sign glows softly so it reads as "you can go here" */
.lk-sign:not(.locked) .board { box-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 12px 3px rgba(255, 210, 120, .55); animation: lk-signglow 2.4s ease-in-out infinite; }
@keyframes lk-signglow {
  50% { box-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 22px 7px rgba(255, 210, 120, .85); }
}
@media (prefers-reduced-motion: reduce) { .lk-sign:not(.locked) .board { animation: none; } }
/* every map spot gets a soft halo, so it stands out on a busy map */
.lk-spot::before { filter: drop-shadow(0 0 5px rgba(255, 244, 214, .95)) drop-shadow(0 0 12px rgba(255, 210, 120, .7)); }
.lk-avatar .lk-px { filter: drop-shadow(0 0 3px rgba(255, 244, 214, .95)) drop-shadow(0 0 10px rgba(255, 210, 120, .6)); }

/* Pasaporte ng Lakbay: the profile book. Two pages, one column on narrow screens. */
.lk-center:has(> .lk-pf) { container-type: inline-size; }
.lk-pf { position: relative; width: min(1000px, 100%); grid-template-columns: 1fr 1.2fr; gap: 0; padding: 0; text-align: left; background: #f6e7c6; color: #4a3320; border-radius: 10px; }
.lk-pf .lk-pfx { position: absolute; top: 10px; right: 12px; z-index: 2; padding: 6px 14px; background: var(--plum); border-color: var(--amber); }
.lk-pf .lk-pfx { color: var(--cream); }
.lk-pf p { color: #4a3320; }
.lk-pf .lk-pfsub { color: #8a5a2b; }
.lk-pfpage { display: grid; align-content: start; gap: 10px; padding: 22px 24px; min-width: 0; }
.lk-pfpage:first-of-type { box-shadow: inset -14px 0 18px -14px rgba(74, 51, 32, .5); }
.lk-pfpage + .lk-pfpage { padding-top: 52px; border-left: 1px dashed #c9a774; box-shadow: inset 14px 0 18px -14px rgba(74, 51, 32, .5); }
.lk-pfhead h2 { margin: 0; font: 700 28px/1.1 Caveat, cursive; color: #8a5a2b; text-align: left; }
.lk-pfhead small, .lk-pfsub { color: #8a5a2b; font-weight: 700; font-size: 12px; margin: 0; }
.lk-pfphoto { position: relative; width: min(170px, 55%); aspect-ratio: 720 / 1073; margin: 6px auto; border: 6px solid #fff; border-radius: 4px; box-shadow: 0 8px 18px rgba(74, 51, 32, .4); transform: rotate(-2deg); overflow: hidden; }
.lk-pfphoto img:first-child { display: block; width: 100%; height: 100%; object-fit: contain; }
.lk-pfcomp { position: absolute; top: 6px; right: 6px; width: 36%; height: auto; aspect-ratio: 1; object-fit: contain; animation: lk-float 3.2s ease-in-out infinite; }
@keyframes lk-float { 50% { transform: translateY(-5px); } }
.lk-pf h3 { margin: 0; font: 700 22px/1.1 Fredoka, sans-serif; color: #4a3320; text-align: left; }
.lk-pf h4 { margin: 0 0 6px; font: 700 14px/1.1 Fredoka, sans-serif; color: #8a5a2b; letter-spacing: .04em; text-transform: uppercase; display: flex; gap: 8px; align-items: center; }
.lk-pflv { display: flex; align-items: center; gap: 10px; }
.lk-pfxp { flex: 1; display: grid; gap: 2px; font-size: 12px; font-weight: 800; color: #8a5a2b; }
.lk-pftrack { height: 10px; border-radius: 3px; background: #e7d1a6; border: 1px solid #c9a774; overflow: hidden; }
.lk-pftrack i { display: block; height: 100%; background: var(--c, var(--amber)); }
.lk-pfvit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; font-weight: 800; color: #8a5a2b; }
.lk-pfvit .lk-bar { height: 9px; margin-top: 2px; border-color: #8a5a2b; background: #e7d1a6; }
.lk-pfstats { display: grid; gap: 7px; }
.lk-pfstat { display: grid; grid-template-columns: 78px 1fr 24px; gap: 2px 8px; align-items: center; font-size: 13px; font-weight: 700; }
.lk-pfstat small { grid-column: 1 / -1; color: #7a6448; font-weight: 600; font-size: 12px; }
.lk-pfcompcard { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 10px; border: 1.5px solid #c9a774; border-radius: 8px; background: #fffaf0; }
.lk-pfcompcard .lk-sp { width: 72px; height: 72px; object-fit: contain; }
.lk-pfcompcard h4 { margin: 0; text-transform: none; font-size: 17px; color: #4a3320; }
.lk-pfcompcard p { margin: 2px 0; font-size: 13px; }
.lk-pfcompcard small { color: #7a6448; font-weight: 700; }
.lk-pfstamps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
.lk-pfstamp { display: grid; justify-items: center; gap: 2px; font-size: 11px; font-weight: 700; text-align: center; color: var(--ink); }
.lk-pfstamp svg { width: 72px; height: 72px; transform: rotate(var(--rot)); }
.lk-pfstamp.off { color: #8a7457; }
.lk-pfkeeps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lk-pfkeeps li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.lk-pfkeeps img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #c9a774; }
.lk-pfkeeps small { display: block; color: #7a6448; font-weight: 600; font-size: 12px; }
.lk-pfseen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lk-pfsp { width: 46px; height: 46px; border-radius: 50%; object-fit: contain; background: #fffaf0; border: 2px solid #c9a774; }
.lk-pfmore { font-weight: 700; color: #8a5a2b; }
@container (max-width: 760px) {
  .lk-pf { grid-template-columns: 1fr; }
  .lk-pfpage + .lk-pfpage { border-left: 0; border-top: 1px dashed #c9a774; box-shadow: none; }
  .lk-pfpage { padding: 18px 16px; }
  .lk-pfpage + .lk-pfpage { padding-top: 18px; }
  .lk-pfhead { padding-right: 70px; }
}
@media (prefers-reduced-motion: reduce) { .lk-pfcomp { animation: none; } }
.lk-pfvit .lk-bar b { display: none; }
/* Province map: the province name (a link) under the player pill, and the stamp count at the top right. */
.lk-ptag { position: absolute; z-index: 5; top: 58px; left: 8px; max-width: calc(100% - 16px); display: flex; align-items: center; gap: 8px; padding: 5px 14px; background: var(--plum); border: 2px solid var(--amber); border-radius: 999px; box-shadow: 0 3px 0 var(--ink); color: var(--cream); font-family: Nunito, system-ui, sans-serif; font-size: 15px; font-weight: 800; line-height: 1.2; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.lk-ptag:hover, a.lk-ptag:focus-visible { border-color: var(--cream); text-decoration: underline; }
.lk-pstamps { left: auto; right: 8px; top: 8px; font-weight: 700; cursor: help; }
.lk-pstamps b { color: var(--amber); font-weight: 800; }
@media (max-width: 680px) { .lk-ptag { top: 50px; left: 6px; font-size: 13px; padding: 4px 10px; } .lk-ptag.lk-pstamps { left: auto; right: 6px; top: 6px; font-size: 12px; gap: 5px; } }
/* Province map: no player pill (the Q and P keys still find it in the DOM). The province name takes its corner. */
[data-screen="province"] .lk-hud .lk-pill { display: none; }
[data-screen="province"] a.lk-ptag, [data-screen="province"] div.lk-ptag:not(.lk-pstamps) { top: 8px; }
@media (max-width: 680px) { [data-screen="province"] a.lk-ptag, [data-screen="province"] div.lk-ptag:not(.lk-pstamps) { top: 6px; } }

/* icon tooltip: the game's plum and amber, with the shortcut as a key cap */
.lk-tt { position: absolute; z-index: 60; display: flex; align-items: center; gap: 8px; width: max-content; max-width: min(240px, calc(100% - 12px)); padding: 6px 10px; background: var(--plum-d); border: 2px solid var(--amber); border-radius: 10px; box-shadow: 0 3px 0 var(--ink), 0 10px 22px rgba(0, 0, 0, .4); color: var(--cream); font: 800 13px/1.25 Nunito, sans-serif; pointer-events: none; animation: lk-tt-in .12s ease-out; }
.lk-tt[hidden] { display: none; }
.lk-tt::after { content: ""; position: absolute; left: var(--tt-x); bottom: -7px; width: 10px; height: 10px; margin-left: -7px; background: var(--plum-d); border: solid var(--amber); border-width: 0 2px 2px 0; border-bottom-right-radius: 2px; transform: rotate(45deg); }
.lk-tt.below::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.lk-tt kbd { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; background: var(--amber); color: #3a1a05; border-radius: 5px; box-shadow: 0 2px 0 #8a5a2b; font: 800 11px Nunito, sans-serif; }
@keyframes lk-tt-in { from { opacity: 0; } }