/* Hummingbird Market on the Keelan River: play slice.
   Two looks on the same slice: body.style-dusk (warm boho dusk) and body.style-night (dark KR gold night).
   Brand frame stays KR: gold #C9A962, Cormorant Garamond + Source Sans 3, Master logo unaltered. */
:root { --gold:#C9A962; --kr-bg:#08080A; --panel:#12141A; --panel2:#1C1E22; --cream:#F5F2EB; }
body.style-dusk {
  --ground:#caa678; --ground2:#bf9a6b; --tuft:#8f9d6c; --tuft2:#6f7f52;
  --path:#ecd6ae; --path2:#dcc092; --path-edge:#a97d4f; --stone:#d4b384;
  --river1:#2f6f7c; --river2:#4f97a0; --river3:#8cc3c0; --bank:#9c7a4f; --reed:#6f7f52;
  --shimmer:#fff0cf; --light:#ffd27a; --glow:rgba(255,190,110,.55);
  --fab1:#b5532f; --fab2:#efd9b8; --fab3:#7f8f63; --fab4:#8c3a4a; --fab5:#d98b4a;
  --wood:#8a5a34; --wood2:#6d4527; --rope:#e9dcc3;
  --tint:linear-gradient(180deg, rgba(255,150,90,.20), rgba(120,50,110,.18) 55%, rgba(40,20,50,.30));
  --vig:radial-gradient(ellipse 75% 70% at 50% 55%, transparent 55%, rgba(50,20,30,.55));
  --hud-bg:rgba(46,24,20,.72); --hud-ink:#fbeedd; --hud-sub:#f1c89a;
  --tree:#6f8052; --tree2:#56663f; --trunk:#7a5536;
}
body.style-night {
  --ground:#121318; --ground2:#0d0e12; --tuft:#1f2428; --tuft2:#191d20;
  --path:#23252b; --path2:#1b1d22; --path-edge:#6b5a33; --stone:#2c2e34;
  --river1:#07161c; --river2:#0e2b35; --river3:#1d4a57; --bank:#2a2a2e; --reed:#1e2a26;
  --shimmer:#E3C98A; --light:#ffcf7a; --glow:rgba(255,196,110,.65);
  --fab1:#12141A; --fab2:#C9A962; --fab3:#0f4c4f; --fab4:#4a2140; --fab5:#1C1E22;
  --wood:#3a2d22; --wood2:#2a2019; --rope:#8f7a52;
  --tint:linear-gradient(180deg, rgba(10,12,30,.30), rgba(8,8,10,.25) 50%, rgba(8,8,10,.45));
  --vig:radial-gradient(ellipse 70% 65% at 50% 55%, transparent 45%, rgba(0,0,0,.78));
  --hud-bg:rgba(8,8,10,.78); --hud-ink:#F5F2EB; --hud-sub:#C9A962;
  --tree:#1f2d27; --tree2:#18231e; --trunk:#2e241c;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--kr-bg); font-family: 'Source Sans 3', system-ui, sans-serif; color: var(--hud-ink); }
.mk-stage { position: fixed; inset: 0; background: var(--ground); }
.mk-world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: pointer; touch-action: none; }
.mk-vignette { position: absolute; inset: 0; pointer-events: none; background: var(--vig), var(--tint); mix-blend-mode: multiply; }
body.style-night .mk-vignette { mix-blend-mode: normal; }
.mk-canopy { position: absolute; left: 0; top: 0; width: 100%; height: 150px; pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }

/* HUD */
.mk-hud { position: fixed; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 18px; padding: 10px 22px; pointer-events: none; }
.mk-hud > * { pointer-events: auto; }
.mk-hud__logo img { display: block; height: 46px; width: auto; }
.mk-hud__title { background: var(--hud-bg); padding: 8px 18px 9px; border-radius: 14px; border: 1px solid rgba(201,169,98,.45); backdrop-filter: blur(6px); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.mk-hud__title h1 { margin: 0; font: 700 1.35rem/1.05 'Cormorant Garamond', serif; color: var(--hud-ink); letter-spacing: .01em; }
.mk-hud__title h1 em { font-style: italic; font-weight: 500; color: var(--gold); }
.mk-hud__title p { margin: 2px 0 0; font: 400 1.02rem/1 'Caveat Brush', cursive; color: var(--hud-sub); }
.mk-hud__actions { margin-left: auto; display: flex; gap: 10px; }
.mk-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(201,169,98,.7); background: var(--hud-bg); color: var(--hud-ink); font: 600 .92rem/1 'Source Sans 3', sans-serif; text-decoration: none; backdrop-filter: blur(6px); transition: background .2s, box-shadow .2s; }
.mk-btn:hover, .mk-btn:focus-visible { box-shadow: 0 0 0 3px rgba(201,169,98,.35); outline: none; }
.mk-btn--ghost { background: transparent; background: rgba(0,0,0,.25); }
.mk-btn--gold { background: var(--gold); color: #08080A; border-color: var(--gold); }
.mk-tip { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 6; background: var(--hud-bg); border: 1px solid rgba(201,169,98,.6); border-radius: 14px; padding: 10px 18px; font: 600 1rem 'Source Sans 3'; color: var(--hud-ink); box-shadow: 0 10px 30px rgba(0,0,0,.35); pointer-events: none; white-space: nowrap; }
.mk-tip b { color: var(--gold); font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; }
.mk-help { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.42); color: rgba(255,245,230,.9); font-size: .84rem; white-space: nowrap; pointer-events: none; }

/* World SVG styling (themed fills) */
.g-ground { fill: var(--ground); }
.g-ground2 { fill: var(--ground2); }
.g-tuft-blob { fill: var(--tuft); }
.g-flower { opacity: .85; }
body.style-night .g-flower { opacity: .18; }
.g-tuft { stroke: var(--tuft); fill: none; stroke-width: 2.4; stroke-linecap: round; }
.g-tuft2 { stroke: var(--tuft2); fill: none; stroke-width: 2.4; stroke-linecap: round; }
.g-path { fill: none; stroke: var(--path); stroke-linecap: round; stroke-linejoin: round; }
.g-path-edge { fill: none; stroke: var(--path-edge); stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.g-path-stones { fill: none; stroke: var(--stone); stroke-linecap: round; stroke-dasharray: 2 26; opacity: .9; }
.g-bank { fill: var(--bank); }
.g-river { fill: url(#riverGrad); }
.g-river-deep { fill: none; stroke: var(--river1); opacity: .55; }
.g-shimmer { fill: none; stroke: var(--shimmer); stroke-linecap: round; opacity: .55; stroke-dasharray: 34 150; animation: flow 5.5s linear infinite; }
.g-shimmer.s2 { stroke-dasharray: 16 110; opacity: .4; animation-duration: 3.8s; }
.g-shimmer.s3 { stroke-dasharray: 60 260; opacity: .3; animation-duration: 8s; }
@keyframes flow { to { stroke-dashoffset: -1840; } }
.g-sparkle { fill: var(--shimmer); animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: .1; } 50% { opacity: .9; } }
.g-reed { stroke: var(--reed); stroke-width: 3; stroke-linecap: round; fill: none; }
.g-wood { fill: var(--wood); } .g-wood2 { fill: var(--wood2); }
.g-rope { stroke: var(--rope); fill: none; }
.g-light { fill: var(--light); }
.g-glow { fill: url(#glowGrad); animation: flicker 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes flicker { 0%,100% { opacity: .85; } 40% { opacity: .62; } 55% { opacity: 1; } 70% { opacity: .74; } }
.g-bulb { fill: var(--light); animation: bulb 3.4s ease-in-out infinite; }
@keyframes bulb { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.g-wire { stroke: rgba(40,28,20,.7); stroke-width: 1.6; fill: none; }
body.style-night .g-wire { stroke: rgba(201,169,98,.35); }
.g-tree { fill: var(--tree); } .g-tree2 { fill: var(--tree2); } .g-trunk { fill: var(--trunk); }
.g-shadow { fill: rgba(30,15,5,.28); }
body.style-night .g-shadow { fill: rgba(0,0,0,.55); }
.g-fab1 { fill: var(--fab1); } .g-fab2 { fill: var(--fab2); } .g-fab3 { fill: var(--fab3); } .g-fab4 { fill: var(--fab4); } .g-fab5 { fill: var(--fab5); }
.g-firefly { fill: #ffe9a8; animation: ffly 6s ease-in-out infinite; }
@keyframes ffly { 0%,100% { opacity: 0; transform: translate(0,0); } 30% { opacity: .9; } 50% { transform: translate(14px,-18px); opacity: .6; } 80% { opacity: .9; transform: translate(-10px,-6px); } }
body.style-dusk .g-firefly { display: none; }

/* Booths */
.booth { cursor: pointer; transition: filter .25s ease; }
.booth .booth__halo { opacity: 0; transition: opacity .25s ease; }
.booth:hover, .booth:focus-visible, .booth.is-near { filter: drop-shadow(0 0 14px var(--glow)) drop-shadow(0 0 3px rgba(255,230,170,.9)); outline: none; }
.booth:hover .booth__halo, .booth:focus-visible .booth__halo, .booth.is-near .booth__halo { opacity: 1; }
.booth__sway { animation: sway 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes sway { 0%,100% { transform: skewX(0deg); } 50% { transform: skewX(1.6deg); } }
.booth-label { font: 700 22px 'Source Sans 3', sans-serif; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 5px; fill: #fff5e6; }

/* Player */
.player__bob { animation: bob .5s ease-in-out infinite; animation-play-state: paused; }
.player.is-walking .player__bob { animation-play-state: running; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.player__lantern { animation: flicker 1.8s ease-in-out infinite; }
.route-dot { fill: var(--gold); opacity: .8; }

/* Hummingbirds (our own small illustration; never the locked hero bird) */
.hb-fly { animation: flit 7s ease-in-out infinite; }
.hb-wing { animation: flap .09s linear infinite alternate; transform-box: fill-box; transform-origin: 20% 100%; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.35); } }
@keyframes flit {
  0% { transform: translate(0,0); } 14% { transform: translate(38px,-22px); } 22% { transform: translate(38px,-22px); }
  40% { transform: translate(-26px,-40px) scaleX(-1); } 48% { transform: translate(-26px,-40px) scaleX(-1); }
  66% { transform: translate(-50px,6px) scaleX(-1); } 76% { transform: translate(10px,14px); } 100% { transform: translate(0,0); }
}

/* Screen canopy */
.cn-bulb { animation: bulb 3s ease-in-out infinite; }
.cn-glow { animation: flicker 2.8s ease-in-out infinite; }
.cn-drape { animation: drape 7s ease-in-out infinite; transform-origin: 50% 0; transform-box: fill-box; }
@keyframes drape { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.035); } }

/* Map */
.mk-map, .mk-booth { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(8,8,10,.62); backdrop-filter: blur(3px); padding: 18px; }
.mk-map[hidden], .mk-booth[hidden] { display: none; }
.mk-map__card { width: min(1180px, 100%); background: #f3e6cf; color: #3b2416; border-radius: 18px; padding: 16px 18px 18px; box-shadow: 0 30px 80px rgba(0,0,0,.5); border: 2px solid #b88c5c; background-image: radial-gradient(circle at 20% 10%, rgba(255,255,255,.5), transparent 40%), repeating-linear-gradient(45deg, rgba(120,80,40,.04) 0 2px, transparent 2px 7px); }
body.style-night .mk-map__card { background-color: #101116; color: var(--cream); border-color: rgba(201,169,98,.6); background-image: repeating-linear-gradient(45deg, rgba(201,169,98,.03) 0 2px, transparent 2px 7px); }
.mk-map__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.mk-map__head h2 { margin: 0; font: 700 1.8rem 'Cormorant Garamond', serif; }
.mk-map__head p { margin: 0; opacity: .8; }
.mk-map__head .mk-btn { margin-left: auto; color: inherit; }
.mk-map__svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.map-booth { cursor: pointer; }
.map-booth circle.ring { transition: r .2s; }
.map-booth:hover circle.ring, .map-booth:focus-visible circle.ring { r: 58; }
.map-label { font: 700 54px 'Caveat Brush', cursive; }
.map-street { font: italic 600 40px 'Cormorant Garamond', serif; letter-spacing: 1px; }
.map-small { font: 600 34px 'Source Sans 3', sans-serif; }

/* Booth interior */
.mk-booth__card { width: min(1240px, 100%); height: min(88vh, 900px); display: flex; flex-direction: column; background: #0c0d10; border: 1px solid rgba(201,169,98,.55); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.mk-booth__head { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: linear-gradient(90deg, #12141A, #1C1E22); border-bottom: 1px solid rgba(201,169,98,.3); }
.mk-booth__kicker { margin: 0; font: 600 .72rem 'Source Sans 3'; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.mk-booth__head h2 { margin: 2px 0 0; font: 700 1.55rem 'Cormorant Garamond', serif; color: var(--cream); }
.mk-booth__btns { margin-left: auto; display: flex; gap: 10px; }
.mk-booth__frame { flex: 1; width: 100%; border: 0; background: #08080A; }
.mk-booth__pay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid rgba(201,169,98,.25); background: #101116; color: rgba(245,242,235,.8); font-size: .9rem; }
.mk-booth__pay > span { font: 600 .72rem 'Source Sans 3'; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.mk-pay { padding: 7px 14px; border-radius: 999px; border: 1px dashed rgba(245,242,235,.35); background: transparent; color: rgba(245,242,235,.55); font: 600 .85rem 'Source Sans 3'; cursor: not-allowed; }
.mk-pay small { font-weight: 400; opacity: .8; margin-left: 4px; }
.mk-booth__pay em { margin-left: auto; opacity: .7; }
.mk-open__card { width: min(520px, 100%); background: #12141A; border: 1px solid rgba(201,169,98,.55); border-radius: 18px; padding: 26px 28px; color: var(--cream); box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.mk-open__card h2 { margin: 4px 0 10px; font: 700 2rem 'Cormorant Garamond', serif; }
.mk-open__card p { line-height: 1.6; color: rgba(245,242,235,.85); }
.mk-open__btns { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .mk-hud { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .mk-hud__logo img { height: 34px; }
  .mk-hud__title { padding: 6px 10px; }
  .mk-hud__title h1 { font-size: .98rem; }
  .mk-hud__title p { font-size: .85rem; }
  .mk-hud__actions { margin-left: 0; width: 100%; justify-content: flex-start; gap: 6px; }
  .mk-btn { padding: 8px 12px; font-size: .82rem; }
  .mk-canopy { height: 96px; }
  .mk-help { font-size: .72rem; bottom: 10px; white-space: normal; text-align: center; width: 92%; border-radius: 12px; }
  .mk-tip { bottom: 70px; font-size: .9rem; white-space: normal; width: 88%; text-align: center; }
  .mk-booth__head { flex-wrap: wrap; }
  .mk-booth__btns { margin-left: 0; }
  .mk-booth__pay em { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .g-shimmer { stroke-dasharray: none; opacity: .18; }
}