@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&display=swap');
/* look-kit.css: the shared look kit (Wave 0 of the look programme, 11 Oct 2026). Pairs with js/look-kit.js; the whole API,
 * with a worked example, is in css/LOOK-KIT.md. Load it AFTER /css/theme.css (it reads the theme tokens) and before the
 * game's own stylesheet (so a game can override any --lk- colour).
 *
 * The look bar (Carmen, 8 Oct 2026): flat colours, depth from 2 or 3 tones and flat offset shadows, never a gradient, no
 * purple. The highlight and the lower edge of every raised control are the same two flat see-through bands
 * (--lk-hi and --lk-lo), so a control needs only one colour of its own and reads as raised on any palette.
 *
 * The display face is Barlow Condensed (800), the condensed face three of the A games already load (Twin Chests, The
 * Inventors' Shed, Loose Words), with Arial Narrow and the system sans as the fallback. */

/* ════════ 1. Theme-wide colours (follow Light and Dark; the same in every palette) ════════ */
:root {
  --lk-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --lk-hi: rgba(255, 255, 255, 0.2); --lk-lo: rgba(0, 0, 0, 0.3); --lk-shade: rgba(40, 22, 10, 0.2);
  --lk-paper: #fbf3df; --lk-paper2: #e9d8b4; --lk-paper-line: #d8c6a0; --lk-paper-ink: #2d2a26; --lk-paper-dim: #5f574a;
  --lk-pin: #d9603c; --lk-star: #f4efd8; --lk-lamp: #ffd98a;
  --lk-key: #f6ead0; --lk-key-text: #2d2a26; --lk-key-fn: #e2cfa6;
  --lk-readout: #2f3a40; --lk-readout-text: #f6ead0;
  --lk-scrim: rgba(36, 22, 10, 0.62);
}
:root[data-theme="dark"] {
  --lk-hi: rgba(255, 255, 255, 0.14); --lk-lo: rgba(0, 0, 0, 0.4); --lk-shade: rgba(0, 0, 0, 0.32);
  --lk-paper: #f3e8cc; --lk-paper2: #cdb98f; --lk-paper-line: #cdb98f;
  --lk-key: #efe2c4; --lk-key-fn: #d6c196;
  --lk-readout: #1d2529;
  --lk-scrim: rgba(8, 10, 18, 0.72);
}

/* ════════ 2. Palettes: put data-lk-palette="workshop|shop|lab|mine|outdoor|site" on <html> (LookKit.palette) or any box.
 * Each sets 28 colours: the scene (sky, sun, cloud, far2, far, dark, wall1-3, trim1-3, floor1-3, acc1-3), the door, the
 * plates (Home, Menu, the room signs), the go button, the board and the title. Workshop is the default. ════════ */
:root, [data-lk-palette] { --lk-title-em: var(--lk-acc1); }
:root, [data-lk-palette="workshop"] {
  --lk-sky: #bfe2ef; --lk-sun: #fff1b8; --lk-cloud: #f4fbff; --lk-far2: #a9cb9c; --lk-far: #7db26a; --lk-dark: #2c1b10;
  --lk-wall1: #c58b55; --lk-wall2: #b97f4b; --lk-wall3: #7c4b29; --lk-trim1: #8e5a33; --lk-trim2: #7a4a28; --lk-trim3: #5f381c;
  --lk-floor1: #9a6a3f; --lk-floor2: #8a5c34; --lk-floor3: #5d3b1f; --lk-acc1: #e39a2a; --lk-acc2: #13897e; --lk-acc3: #d9603c;
  --lk-door: #13897e; --lk-plate: #5f381c; --lk-plate-text: #fdf3e4; --lk-go: #b9652e; --lk-go-text: #fffaf0; --lk-board: #c9955c;
  --lk-title: #fdf3e4; --lk-title-s1: #b9652e; --lk-title-s2: #3a2410;
}
:root[data-theme="dark"], [data-theme="dark"] [data-lk-palette="workshop"], [data-theme="dark"][data-lk-palette="workshop"] {
  --lk-sky: #1c2647; --lk-sun: #f3eccb; --lk-cloud: #2a3560; --lk-far2: #2a3c48; --lk-far: #22363a; --lk-dark: #120b06;
  --lk-wall1: #5d3d27; --lk-wall2: #533622; --lk-wall3: #2c1b10; --lk-trim1: #47301d; --lk-trim2: #3a2414; --lk-trim3: #2a190c;
  --lk-floor1: #3f2818; --lk-floor2: #362215; --lk-floor3: #1f130a; --lk-acc1: #c9841f; --lk-acc2: #0f6c63; --lk-acc3: #b84f30;
  --lk-door: #0f6c63; --lk-plate: #2a190c; --lk-plate-text: #f6ead2; --lk-go: #b9652e; --lk-go-text: #fffaf0; --lk-board: #7e5a35;
  --lk-title: #fbf0da; --lk-title-s1: #b9652e; --lk-title-s2: #120b06;
}
[data-lk-palette="shop"] {
  --lk-sky: #bfe2ef; --lk-sun: #fff1b8; --lk-cloud: #f4fbff; --lk-far2: #a9cb9c; --lk-far: #7db26a; --lk-dark: #24170e;
  --lk-wall1: #e9dcc2; --lk-wall2: #ddcfb2; --lk-wall3: #b9a581; --lk-trim1: #1a9a8e; --lk-trim2: #13897e; --lk-trim3: #0d6f66;
  --lk-floor1: #b98550; --lk-floor2: #a87543; --lk-floor3: #6e4a28; --lk-acc1: #e39a2a; --lk-acc2: #d9603c; --lk-acc3: #2a72a6;
  --lk-door: #d9603c; --lk-plate: #0d6f66; --lk-plate-text: #f4fbf9; --lk-go: #0d6f66; --lk-go-text: #ffffff; --lk-board: #31473f;
  --lk-title: #0d4f49; --lk-title-s1: #e39a2a; --lk-title-s2: #b9a581; --lk-title-em: #13897e;
}
[data-theme="dark"] [data-lk-palette="shop"], [data-theme="dark"][data-lk-palette="shop"] {
  --lk-sky: #1c2647; --lk-sun: #f3eccb; --lk-cloud: #2a3560; --lk-far2: #2a3c48; --lk-far: #22363a; --lk-dark: #0e0905;
  --lk-wall1: #34403f; --lk-wall2: #2e3938; --lk-wall3: #1b2322; --lk-trim1: #0f7a70; --lk-trim2: #0b6159; --lk-trim3: #07423d;
  --lk-floor1: #4a3220; --lk-floor2: #3f2a1b; --lk-floor3: #24170e; --lk-acc1: #c9841f; --lk-acc2: #b84f30; --lk-acc3: #1d5a87;
  --lk-door: #b84f30; --lk-plate: #07423d; --lk-plate-text: #e9f6f4; --lk-go: #0d6f66; --lk-go-text: #ffffff; --lk-board: #24392f;
  --lk-title: #fbf0da; --lk-title-s1: #13897e; --lk-title-s2: #06201d; --lk-title-em: var(--lk-acc1);
}
[data-lk-palette="lab"] {
  --lk-sky: #bfe2ef; --lk-sun: #fff1b8; --lk-cloud: #f4fbff; --lk-far2: #a9cb9c; --lk-far: #7db26a; --lk-dark: #161c29;
  --lk-wall1: #dfe6ee; --lk-wall2: #d2dae5; --lk-wall3: #a9b6c6; --lk-trim1: #6b7c93; --lk-trim2: #5b6b82; --lk-trim3: #44536a;
  --lk-floor1: #b8c2cf; --lk-floor2: #a9b4c3; --lk-floor3: #7d8a9c; --lk-acc1: #2a72a6; --lk-acc2: #13897e; --lk-acc3: #e39a2a;
  --lk-door: #2a72a6; --lk-plate: #44536a; --lk-plate-text: #f1f4f8; --lk-go: #2a72a6; --lk-go-text: #ffffff; --lk-board: #2e4a43;
  --lk-title: #1d2a3a; --lk-title-s1: #e39a2a; --lk-title-s2: #a9b6c6; --lk-title-em: #2a72a6;
}
[data-theme="dark"] [data-lk-palette="lab"], [data-theme="dark"][data-lk-palette="lab"] {
  --lk-sky: #1c2647; --lk-sun: #f3eccb; --lk-cloud: #2a3560; --lk-far2: #2a3c48; --lk-far: #22363a; --lk-dark: #0b0f17;
  --lk-wall1: #263044; --lk-wall2: #222b3d; --lk-wall3: #161c29; --lk-trim1: #4a5a70; --lk-trim2: #3b4a5e; --lk-trim3: #2a3646;
  --lk-floor1: #2a3446; --lk-floor2: #242d3d; --lk-floor3: #151b26; --lk-acc1: #2a72a6; --lk-acc2: #0f6c63; --lk-acc3: #c9841f;
  --lk-door: #25659a; --lk-plate: #2a3646; --lk-plate-text: #eef1f8; --lk-go: #2a72a6; --lk-go-text: #ffffff; --lk-board: #22382f;
  --lk-title: #f1efe8; --lk-title-s1: #2a72a6; --lk-title-s2: #0b1020; --lk-title-em: var(--lk-acc1);
}
[data-lk-palette="mine"] {
  --lk-sky: #bfe2ef; --lk-sun: #fff1b8; --lk-cloud: #f4fbff; --lk-far2: #a9cb9c; --lk-far: #3a352e; --lk-dark: #1a1714;
  --lk-wall1: #8c8577; --lk-wall2: #7a7366; --lk-wall3: #5c5649; --lk-trim1: #9a6a3c; --lk-trim2: #7a5230; --lk-trim3: #55371e;
  --lk-floor1: #6e6656; --lk-floor2: #5e5748; --lk-floor3: #3e3a30; --lk-acc1: #e39a2a; --lk-acc2: #3cc8d8; --lk-acc3: #1e9bb0;
  --lk-door: #7a5230; --lk-plate: #3e3a30; --lk-plate-text: #f6ead0; --lk-go: #e39a2a; --lk-go-text: #2d2a26; --lk-board: #4a5058;
  --lk-title: #f6ead0; --lk-title-s1: #c9841f; --lk-title-s2: #24211b;
}
[data-theme="dark"] [data-lk-palette="mine"], [data-theme="dark"][data-lk-palette="mine"] {
  --lk-sky: #1c2647; --lk-sun: #f3eccb; --lk-cloud: #2a3560; --lk-far2: #2a3c48; --lk-far: #221f1b; --lk-dark: #0d0b09;
  --lk-wall1: #4a463f; --lk-wall2: #403c36; --lk-wall3: #2a2723; --lk-trim1: #6e4a2a; --lk-trim2: #57391f; --lk-trim3: #3b2614;
  --lk-floor1: #3a362f; --lk-floor2: #312e28; --lk-floor3: #1d1b18; --lk-acc1: #e39a2a; --lk-acc2: #2fb3c2; --lk-acc3: #168596;
  --lk-door: #57391f; --lk-plate: #24211b; --lk-plate-text: #f6ead0; --lk-go: #e39a2a; --lk-go-text: #2d2a26; --lk-board: #343940;
  --lk-title: #f6ead0; --lk-title-s1: #c9841f; --lk-title-s2: #0d0b09;
}
[data-lk-palette="outdoor"] {
  --lk-sky: #bfe2ef; --lk-sun: #fff1b8; --lk-cloud: #f4fbff; --lk-far2: #a9cb9c; --lk-far: #7db26a; --lk-dark: #17291c;
  --lk-wall1: #c58b55; --lk-wall2: #b97f4b; --lk-wall3: #7c4b29; --lk-trim1: #d9c49a; --lk-trim2: #a8865a; --lk-trim3: #7a5a36;
  --lk-floor1: #6aa35a; --lk-floor2: #5a934c; --lk-floor3: #4a7f3f; --lk-acc1: #e39a2a; --lk-acc2: #13897e; --lk-acc3: #d9603c;
  --lk-door: #2e8b57; --lk-plate: #1f5a3a; --lk-plate-text: #f4fbf2; --lk-go: #1f7a40; --lk-go-text: #ffffff; --lk-board: #9a6a3c;
  --lk-title: #17331f; --lk-title-s1: #e39a2a; --lk-title-s2: #8fb6c4; --lk-title-em: #1f7a40;
}
[data-theme="dark"] [data-lk-palette="outdoor"], [data-theme="dark"][data-lk-palette="outdoor"] {
  --lk-sky: #1c2647; --lk-sun: #f3eccb; --lk-cloud: #2a3560; --lk-far2: #2a3c48; --lk-far: #22363a; --lk-dark: #0c1510;
  --lk-wall1: #5d3d27; --lk-wall2: #533622; --lk-wall3: #2c1b10; --lk-trim1: #8a7650; --lk-trim2: #6b5838; --lk-trim3: #4a3c24;
  --lk-floor1: #2c4a33; --lk-floor2: #25402c; --lk-floor3: #1b3122; --lk-acc1: #c9841f; --lk-acc2: #0f6c63; --lk-acc3: #b84f30;
  --lk-door: #1f6b42; --lk-plate: #143d27; --lk-plate-text: #eef8ee; --lk-go: #1f7a40; --lk-go-text: #ffffff; --lk-board: #5e4027;
  --lk-title: #f1efe8; --lk-title-s1: #1f7a40; --lk-title-s2: #050c08; --lk-title-em: var(--lk-acc1);
}
/* site: the theme's own cream and navy, for a page that keeps its site look but wants the drawn controls */
[data-lk-palette="site"] {
  --lk-sky: var(--blue-soft); --lk-sun: var(--gold); --lk-cloud: var(--card); --lk-far2: var(--green-soft); --lk-far: var(--green); --lk-dark: var(--ink);
  --lk-wall1: var(--bg); --lk-wall2: var(--panel-soft); --lk-wall3: var(--border); --lk-trim1: var(--border); --lk-trim2: var(--slate); --lk-trim3: var(--slate-text);
  --lk-floor1: var(--panel-soft); --lk-floor2: var(--border); --lk-floor3: var(--slate); --lk-acc1: var(--amber); --lk-acc2: var(--teal); --lk-acc3: var(--coral);
  --lk-door: var(--teal); --lk-plate: var(--card); --lk-plate-text: var(--text); --lk-go: var(--primary); --lk-go-text: var(--on-primary); --lk-board: var(--panel-soft);
  --lk-title: var(--text); --lk-title-s1: var(--amber); --lk-title-s2: var(--border);
}

/* every kit part sizes with its padding inside (pages on the old look do not all set this) */
[class^="lk-"], [class*=" lk-"], [class^="lk-"]::before, [class^="lk-"]::after, [class*=" lk-"]::before, [class*=" lk-"]::after { box-sizing: border-box; }

/* ════════ 3. Icons ════════ */
.lk-ico { display: inline-block; flex: none; vertical-align: middle; overflow: visible; }
.lk-ico-wrap { display: inline-flex; align-items: center; justify-content: center; }

/* ════════ 4. The display title ════════ */
.lk-title { margin: 0; font-family: var(--lk-display); font-weight: 800; font-size: clamp(56px, 7.6vw, 104px); line-height: 0.9; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--lk-title); text-shadow: 0 4px 0 var(--lk-title-s1), 0 8px 0 var(--lk-title-s2); }
.lk-title.is-m { font-size: clamp(40px, 5vw, 64px); text-shadow: 0 3px 0 var(--lk-title-s1), 0 6px 0 var(--lk-title-s2); }
.lk-title.is-s { font-size: 34px; line-height: 1; text-shadow: 0 2px 0 var(--lk-title-s1), 0 4px 0 var(--lk-title-s2); }
.lk-title em { font-style: normal; color: var(--lk-title-em, var(--lk-acc1)); }
.lk-eyebrow { display: inline-block; align-self: flex-start; margin: 0 0 10px; padding: 5px 12px 6px; border-radius: 8px; background: var(--lk-plate); color: var(--lk-plate-text);
  font-family: var(--lk-display); font-weight: 700; font-size: 19px; line-height: 1.1; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 3px 0 var(--lk-lo); }
.lk-scene-text { color: var(--lk-title); text-shadow: 0 2px 0 var(--lk-title-s2); font-size: 19px; line-height: 1.45; }
/* a title on paper or on a light card: same face and shadow, ink on the paper */
.lk-paper .lk-title, .lk-sheet .lk-title, .lk-on-paper { color: var(--lk-paper-ink); text-shadow: 0 2px 0 var(--lk-paper2); }
.lk-paper .lk-eyebrow, .lk-sheet .lk-eyebrow { padding: 0; background: none; box-shadow: none; color: var(--lk-paper-dim); }

/* ════════ 5. Raised controls: the corner plates, buttons and keys share one shape language ════════ */
.lk-corners { position: fixed; left: 0; right: 0; top: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) calc(env(safe-area-inset-right, 0px) + 16px) 0 calc(env(safe-area-inset-left, 0px) + 16px); pointer-events: none; }
.lk-corner-row { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.lk-corner { display: inline-flex; align-items: center; gap: 6px; height: 58px; min-width: 58px; padding: 0 20px 0 7px; margin: 0; border: 0; border-radius: 29px;
  background: var(--lk-plate); color: var(--lk-plate-text); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-family: var(--lk-display); font-weight: 800; font-size: 23px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  box-shadow: inset 0 3px 0 var(--lk-hi), inset 0 -4px 0 var(--lk-lo), 0 5px 0 var(--lk-lo); transition: transform 0.08s, box-shadow 0.08s; }
.lk-corner-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lk-lo); flex: none; }
.lk-corner:active { transform: translateY(4px); box-shadow: inset 0 3px 0 var(--lk-hi), inset 0 -2px 0 var(--lk-lo), 0 1px 0 var(--lk-lo); }
.lk-corner:focus-visible, .lk-btn:focus-visible, .lk-key:focus-visible, .lk-go:focus-visible, .lk-door:focus-visible, .lk-tag:focus-visible,
.lk-seg-btn:focus-visible, .lk-sheet-x:focus-visible, .lk-fbslot .fb-bulb:focus-visible { outline: 4px solid var(--focus, #2a72a6); outline-offset: 3px; }
/* the ideas bulb (js/feedback.js) in the corner slot: the same round plate, the drawn bulb */
.lk-fbslot { display: inline-flex; align-items: center; }
.lk-fbslot .fb-bulb { width: 58px; min-width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: var(--lk-plate); color: var(--lk-plate-text);
  box-shadow: inset 0 3px 0 var(--lk-hi), inset 0 -4px 0 var(--lk-lo), 0 5px 0 var(--lk-lo); font-size: 24px; }
.lk-fbslot .fb-bulb .lk-corner-ico { width: 44px; height: 44px; }
.lk-fbslot .fb-bulb:active { transform: translateY(4px); box-shadow: inset 0 3px 0 var(--lk-hi), 0 1px 0 var(--lk-lo); }
@media (max-width: 599px) { .lk-corner { padding: 0 7px; } .lk-corner-word { display: none; } }

/* the plate button (menu rows, page actions): .lk-btn, and the one main action per screen .lk-btn.is-go */
.lk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 8px 20px; margin: 0; border: 0; border-radius: 14px;
  background: var(--lk-plate); color: var(--lk-plate-text); text-decoration: none; cursor: pointer; font-family: var(--lk-display); font-weight: 800; font-size: 23px;
  letter-spacing: 0.04em; line-height: 1.05; text-align: center; box-shadow: inset 0 3px 0 var(--lk-hi), inset 0 -5px 0 var(--lk-lo), 0 4px 0 var(--lk-lo); }
.lk-btn.is-go { background: var(--lk-go); color: var(--lk-go-text); }
.lk-btn:active { transform: translateY(3px); box-shadow: inset 0 3px 0 var(--lk-hi), inset 0 -3px 0 var(--lk-lo), 0 1px 0 var(--lk-lo); }
.lk-btn[disabled] { opacity: 0.5; cursor: default; }

/* ════════ 6. The Menu sheet ════════ */
.lk-ov { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 90px 20px 24px; background: var(--lk-scrim); overflow: auto; }
.lk-sheet { position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 120px); overflow: auto; padding: 26px 30px 28px; border-radius: 20px;
  background: var(--lk-paper); color: var(--lk-paper-ink); box-shadow: inset 0 0 0 4px var(--lk-paper-line), 0 8px 0 var(--lk-shade); font-size: 17px; line-height: 1.45; }
.lk-sheet-title { margin: 0 56px 16px 0; }
.lk-sheet-x { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--lk-paper2); color: var(--lk-paper-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 0 var(--lk-paper-line); }
.lk-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lk-menu-grid .lk-btn { justify-content: flex-start; }
.lk-seg-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.lk-seg-label { font-family: var(--lk-display); font-weight: 800; font-size: 22px; letter-spacing: 0.04em; min-width: 130px; }
.lk-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.lk-seg-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 14px 4px 8px; border: 0; border-radius: 26px; background: var(--lk-paper2); color: var(--lk-paper-ink);
  font-family: var(--lk-display); font-weight: 800; font-size: 20px; cursor: pointer; box-shadow: inset 0 -3px 0 var(--lk-paper-line); }
.lk-seg-btn[aria-pressed="true"] { background: var(--lk-go); color: var(--lk-go-text); box-shadow: inset 0 3px 0 var(--lk-hi), inset 0 -4px 0 var(--lk-lo); }
.lk-sheet-h3 { margin: 18px 0 6px; font-family: var(--lk-display); font-weight: 800; font-size: 23px; letter-spacing: 0.02em; }
.lk-bul { margin: 4px 0 0; padding-left: 22px; } .lk-bul li { margin: 4px 0; }
@media (max-width: 520px) { .lk-menu-grid { grid-template-columns: 1fr; } .lk-sheet { padding: 22px 18px; } }

/* ════════ 7. The scene behind the page ════════ */
/* z-index -1: it paints under everything in the page, so a game's own fixed or absolute parts stay as they are. The page
 * background moves to <html> (the scene's wall colour shows for a moment while the SVG paints) and <body> goes clear. */
.lk-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--lk-wall1); pointer-events: none; }
.lk-scene.is-boxed { position: absolute; z-index: 0; }
.lk-scene.is-boxed ~ * { position: relative; z-index: 1; }
.lk-scene-svg { display: block; width: 100%; height: 100%; }
html.lk-has-scene { background: var(--lk-wall1); }
html.lk-has-scene body { background: transparent; }
.lk-night { display: none; }
[data-theme="dark"] .lk-night { display: inline; }
[data-theme="dark"] .lk-day { display: none; }
/* a scene as a framed picture (LookKit.sceneSVG inside a box) */
.lk-frame { position: relative; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 8px var(--lk-trim2), 0 0 0 12px var(--lk-trim3), 0 12px 0 4px var(--lk-shade); }
.lk-frame > svg { display: block; width: 100%; height: 100%; }

/* ════════ 8. The room picker: drawn doors on steps (or stalls), each with a hanging sign ════════ */
.lk-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--lk-door-w), 1fr)); gap: 22px 24px; justify-items: center; align-items: start; }
.lk-rooms.is-l { --lk-door-w: 220px; } .lk-rooms.is-m { --lk-door-w: 180px; } .lk-rooms.is-s { --lk-door-w: 146px; }
.lk-door { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 260px; margin: 0; padding: 14px 0 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lk-door-face { position: relative; display: flex; align-items: center; justify-content: center; width: 70%; aspect-ratio: 4 / 5; border-radius: 50% 50% 6px 6px / 30% 30% 6px 6px;
  background: var(--lk-door); box-shadow: 0 0 0 9px var(--lk-trim1), 0 0 0 14px var(--lk-trim3), inset -16px 0 0 var(--lk-lo), inset 0 6px 0 var(--lk-hi); }
.lk-door-pic { display: flex; align-items: center; justify-content: center; width: 74%; aspect-ratio: 1 / 1; margin-top: -14%; border-radius: 50%; overflow: hidden;
  background: var(--lk-paper); box-shadow: inset 0 0 0 6px var(--lk-trim3); }
.lk-door-pic img { display: block; width: 80%; height: 80%; object-fit: contain; }
.lk-door-pic svg { display: block; width: 72%; height: 72%; }
.lk-door-knob { position: absolute; right: 13%; top: 62%; width: 12px; height: 12px; border-radius: 50%; background: var(--lk-acc1); box-shadow: 0 2px 0 var(--lk-lo); }
.lk-door-step { display: block; width: 100%; height: 14px; margin-top: 14px; border-radius: 3px; background: var(--lk-trim1); box-shadow: inset 0 3px 0 var(--lk-hi), 0 7px 0 var(--lk-trim3); }
.lk-plaque { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; margin-top: 22px; padding: 8px 12px 10px; border-radius: 12px;
  background: var(--lk-plate); color: var(--lk-plate-text); text-align: center; box-shadow: inset 0 3px 0 var(--lk-hi), inset 0 -4px 0 var(--lk-lo), 0 4px 0 var(--lk-lo); }
.lk-plaque::before, .lk-plaque::after { content: ''; position: absolute; top: -14px; width: 4px; height: 14px; border-radius: 2px; background: var(--lk-trim3); }
.lk-plaque::before { left: 22%; } .lk-plaque::after { right: 22%; }
.lk-plaque-name { font-family: var(--lk-display); font-weight: 800; font-size: 23px; line-height: 1.05; letter-spacing: 0.01em; }
.lk-plaque-sub, .lk-plaque-count { font-size: 15px; line-height: 1.25; font-weight: 600; }
.lk-plaque-count { font-family: var(--lk-display); font-weight: 700; font-size: 17px; letter-spacing: 0.04em; }
.lk-badge { position: absolute; top: 0; right: 8%; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%;
  background: var(--lk-paper); box-shadow: 0 0 0 4px var(--lk-trim3), 0 4px 0 4px var(--lk-lo); }
.lk-door.is-locked .lk-door-face { background: var(--lk-wall3); }
.lk-door.is-locked .lk-door-pic > * { opacity: 0.45; }
.lk-door.is-on .lk-plaque { background: var(--lk-go); color: var(--lk-go-text); }
.lk-door.is-on .lk-door-face { box-shadow: 0 0 0 9px var(--lk-acc1), 0 0 0 14px var(--lk-trim3), inset -16px 0 0 var(--lk-lo), inset 0 6px 0 var(--lk-hi); }
.lk-door:active .lk-door-face { transform: translateY(3px); }
.lk-rooms.is-m .lk-door-face, .lk-rooms.is-s .lk-door-face { width: 66%; }
.lk-rooms.is-s .lk-plaque-name { font-size: 20px; } .lk-rooms.is-s .lk-badge { width: 42px; height: 42px; }
.lk-rooms.is-s .lk-badge svg { width: 28px; height: 28px; }
@media (max-width: 599px) { .lk-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } .lk-plaque-name { font-size: 19px; } }
/* stalls: the same, with a striped awning and a square front */
.lk-rooms.is-stall .lk-door { padding-top: 0; }
.lk-awning { display: block; width: 100%; height: 40px; margin-bottom: -6px; position: relative; z-index: 1; }
.lk-rooms.is-stall .lk-door-face { width: 92%; aspect-ratio: 5 / 4; border-radius: 4px; box-shadow: 0 0 0 7px var(--lk-trim1), 0 0 0 11px var(--lk-trim3), inset 0 -18px 0 var(--lk-lo); }
.lk-rooms.is-stall .lk-door-pic { width: 62%; margin-top: -8%; border-radius: 12px; }
.lk-rooms.is-stall .lk-door-knob { display: none; }
.lk-rooms.is-stall .lk-badge { top: 30px; }

/* ════════ 9. Stages: paper tags hanging from a rail ════════ */
.lk-tags { position: relative; display: flex; flex-wrap: wrap; gap: 26px 14px; padding: 22px 6px 6px; }
.lk-tags::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 5px; background: var(--lk-trim1); box-shadow: 0 4px 0 var(--lk-trim3); }
.lk-tag { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 66px; padding: 8px 16px 8px 34px; margin: 0; border: 0; border-radius: 6px 14px 14px 6px;
  background: var(--lk-paper); color: var(--lk-paper-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 5px 0 var(--lk-paper2), 6px 9px 0 var(--lk-shade); }
.lk-tag::before { content: ''; position: absolute; left: 15px; top: -22px; width: 3px; height: 30px; background: var(--lk-trim3); }
.lk-tag-hole { position: absolute; left: 11px; top: 50%; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: var(--lk-trim3); }
.lk-tag-pic { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
.lk-tag-pic img, .lk-tag-pic svg { max-width: 44px; max-height: 44px; object-fit: contain; }
.lk-tag-text { display: flex; flex-direction: column; }
.lk-tag-text b { font-family: var(--lk-display); font-weight: 800; font-size: 22px; line-height: 1.05; }
.lk-tag-text small { font-size: 15px; color: var(--lk-paper-dim); }
.lk-tag.is-locked { background: var(--lk-paper2); }
.lk-tag.is-locked .lk-tag-text b { color: var(--lk-paper-dim); }
.lk-tag.is-on { box-shadow: inset 0 0 0 4px var(--lk-go), 0 5px 0 var(--lk-paper2), 6px 9px 0 var(--lk-shade); }
.lk-tag:active { transform: translateY(3px); }

/* ════════ 10. The stage frame: a board (cork, chalk or slate) with paper pinned on it ════════ */
.lk-stage { position: relative; padding: 30px 32px 32px; border-radius: 18px; background: var(--lk-board); color: var(--lk-paper-ink);
  box-shadow: inset 0 0 0 12px var(--lk-trim1), inset 0 0 0 18px var(--lk-trim3), 0 8px 0 var(--lk-trim3), 14px 22px 0 var(--lk-shade); }
.lk-stage.is-chalk { background: #2e4a43; } [data-theme="dark"] .lk-stage.is-chalk { background: #22382f; }
.lk-stage.is-slate { background: #3d4652; } [data-theme="dark"] .lk-stage.is-slate { background: #2b323b; }
.lk-stage.is-cork { background: var(--lk-board); }
.lk-stage-head { padding: 4px 8px 16px; }
.lk-stage-head .lk-title { color: var(--lk-title); }
.lk-stage-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: start; }
.lk-stage-body.is-solo { grid-template-columns: minmax(0, 1fr); }
.lk-paper { position: relative; min-width: 0; padding: 34px 34px 28px; border-radius: 6px; background: var(--lk-paper); color: var(--lk-paper-ink); font-size: 19px; line-height: 1.45;
  box-shadow: 0 6px 0 var(--lk-paper2), 8px 14px 0 var(--lk-shade); }
.lk-pin { position: absolute; top: 10px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--lk-pin); box-shadow: 0 3px 0 var(--lk-lo); }
.lk-side { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.lk-q, .lk-paper .lk-q { margin: 0 0 14px; font-family: var(--lk-display); font-weight: 800; font-size: 40px; line-height: 1.05; }
.lk-q-line, .lk-paper .lk-q-line { margin: 0 0 10px; font-size: 20px; font-weight: 700; }
@media (max-width: 860px) { .lk-stage-body { grid-template-columns: minmax(0, 1fr); } .lk-side { align-items: center; } .lk-stage { padding: 22px 18px 24px; } }

/* ════════ 11. The guide's note ════════ */
.lk-say { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 18px 16px; border-radius: 14px; background: var(--lk-paper); color: var(--lk-paper-ink);
  font-size: 19px; line-height: 1.4; box-shadow: inset 0 0 0 3px var(--lk-paper-line), 0 4px 0 var(--lk-shade); }
.lk-say-face { flex: none; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--lk-paper2); display: inline-flex; align-items: center; justify-content: center; }
.lk-say-face svg, .lk-say-face img { width: 100%; height: 100%; object-fit: contain; }
.lk-say-body { display: flex; flex-direction: column; min-width: 0; }
.lk-say-who { font-family: var(--lk-display); font-weight: 800; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lk-pin); }

/* ════════ 12. The keypad ════════ */
.lk-keypad { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: max-content; }
.lk-readout { display: flex; align-items: baseline; justify-content: center; gap: 10px; min-height: 80px; padding: 8px 18px; border-radius: 14px; background: var(--lk-readout); color: var(--lk-readout-text);
  font-family: var(--lk-display); font-weight: 800; font-size: 50px; line-height: 1; letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 6px 0 var(--lk-lo), 0 0 0 5px var(--lk-trim3); align-items: center; }
.lk-readout small { font-size: 24px; letter-spacing: 0.02em; opacity: 0.85; }
.lk-readout-ph { opacity: 0.55; }
.lk-pad { display: grid; grid-template-columns: repeat(3, var(--lk-key-w, 86px)); gap: 12px; }
.lk-key, .lk-key-gap { height: var(--lk-key-h, 72px); }
.lk-key { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: 14px; background: var(--lk-key); color: var(--lk-key-text);
  font-family: var(--lk-display); font-weight: 800; font-size: 38px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  box-shadow: inset 0 4px 0 var(--lk-hi), inset 0 -6px 0 var(--lk-lo), 0 5px 0 var(--lk-trim3); }
.lk-key.is-fn { background: var(--lk-key-fn); }
.lk-key:active { transform: translateY(4px); box-shadow: inset 0 4px 0 var(--lk-hi), inset 0 -3px 0 var(--lk-lo), 0 1px 0 var(--lk-trim3); }
.lk-key[disabled], .lk-go[disabled] { opacity: 0.5; cursor: default; transform: none; }
.lk-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 70px; padding: 8px 22px; margin: 0; border: 0; border-radius: 16px;
  background: var(--lk-go); color: var(--lk-go-text); font-family: var(--lk-display); font-weight: 800; font-size: 30px; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
  box-shadow: inset 0 4px 0 var(--lk-hi), inset 0 -6px 0 var(--lk-lo), 0 5px 0 var(--lk-trim3); }
.lk-go:active { transform: translateY(4px); box-shadow: inset 0 4px 0 var(--lk-hi), inset 0 -3px 0 var(--lk-lo), 0 1px 0 var(--lk-trim3); }
@media (max-width: 640px) { .lk-pad { --lk-key-w: 72px; } .lk-key, .lk-key-gap { --lk-key-h: 62px; } }

@media (prefers-reduced-motion: reduce) { .lk-corner, .lk-btn, .lk-key, .lk-go, .lk-door-face, .lk-tag { transition: none; } }