body.lego-game { background:#e4f1ee; color:#2a5268; }
.lego-game > header,.lego-game > footer { display:none; }
.lego-game #app { width:min(1100px,100%); max-width:1100px; min-height:100dvh; margin:auto; padding:0 18px 16px; background:#fffdf5; }
.lg-shell { font-family:Library,'Trebuchet MS',sans-serif; letter-spacing:0; }
.lg-shell * { box-sizing:border-box; }
.lg-shell h1,.lg-shell h2,.lg-shell h3,.lg-shell button,.lg-shell input,.lg-shell a { font-family:inherit; }
.lg-shell button,.lg-shell a.lg-secondary { min-width:48px; min-height:48px; padding:10px 14px; border-radius:8px; font-size:16px; font-weight:800; line-height:1.2; cursor:pointer; }
.lg-shell button:disabled { cursor:default; opacity:.65; }
.lg-shell :focus-visible { outline:3px solid #9160b5; outline-offset:3px; }
.lg-primary { border:2px solid #a54e59; background:#b95364; color:#fff; box-shadow:0 3px 0 #8c3f50; }
.lg-primary:hover { background:#a24759; }
.lg-secondary { display:inline-flex; align-items:center; justify-content:center; border:1px solid #a7c5ca; background:#f7fcf5; color:#315e72; text-decoration:none; }
.lg-secondary:hover { background:#e5f3ef; }
.lg-toolbar { display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid #d2e2dc; }
.lg-toolbar > div { flex:1; min-width:0; }
.lg-toolbar h1 { font-size:18px; line-height:1.2; margin:0 0 3px; }
.lg-toolbar span { font-size:12px; }
.lg-toolbar > a { font-size:14px!important; white-space:nowrap; }
.lg-sound { width:48px; font-size:25px!important; padding:3px!important; }
.lg-effects { display:flex; gap:5px; align-items:center; min-height:48px; font-size:12px; }
.lg-effects input { width:18px; height:18px; accent-color:#288d91; }
.lg-mission { margin:10px 0; padding:9px 13px; border-left:4px solid #e8bc4c; background:#fff0c9; }
.lg-mission > span { font-size:12px; font-weight:800; color:#9e5f70; }
.lg-mission h2 { font-size:21px; line-height:1.35; margin:4px 0 0; }
.lg-workspace { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:18px; align-items:start; }
.lg-workspace > * { min-width:0; }
.lg-site { min-width:0; }
.lg-map-strip { display:flex; align-items:center; height:66px; background:#dff1d5; border-bottom:2px solid #c4dcba; }
.lg-map-strip .lg-city { flex:1; width:calc(100% - 60px); height:64px; object-fit:contain; }
.lg-robot { display:block; width:58px; height:64px; flex-shrink:0; }
.lg-build-stage { display:grid; grid-template-columns:minmax(0,1fr) 220px; align-items:center; gap:8px; min-height:310px; }
.lg-building { min-width:0; }
.lg-object-art { display:block; width:100%; height:auto; }
.lg-building > .lg-object-art { height:205px; }
.lg-inspector { width:220px; min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.lg-preview-title { font-size:15px; line-height:1.35; font-weight:800; min-height:24px; text-align:center; }
.lg-preview-figure { width:220px; height:220px; background:#f3f5eb; border:1px solid #c2d3cd; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.lg-preview-figure > span { color:#c4d3c8; font-size:55px; }
.lg-shape { display:block; width:100%; height:100%; touch-action:manipulation; }
.lg-shape [role="button"] { cursor:pointer; }
.lg-shape [role="button"]:focus-visible { outline:2px solid #8f5db0; }
.lg-count-modes { display:flex; gap:4px; width:100%; margin-bottom:5px; }
.lg-count-modes > button { flex:1; min-height:48px; padding:6px 3px; border:1px solid #b8b0c9; background:#f4ebf9; color:#665880; font-size:14px; }
.lg-count-modes [aria-pressed="true"] { border:2px solid #775495; background:#e9dcf3; }
.lg-counter { min-height:25px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:13px; line-height:1.25; padding:3px 1px; }
.lg-reference { display:flex; justify-content:center; align-items:center; height:65px; gap:5px; font-size:13px; color:#627f89; }
.lg-reference svg { width:70px; height:65px; }
.lg-desk { min-width:0; padding-top:5px; }
.lg-shelf { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.lg-shelf.lg-five { grid-template-columns:repeat(3,minmax(0,1fr)); }
.lg-piece { height:133px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:3px!important; background:#fffefa; border:2px solid #c4d5ce; color:#426077; box-shadow:0 4px 0 #e5dac0; }
.lg-piece > svg { width:105px; height:105px; flex-shrink:0; }
.lg-piece > span { font-size:14px; line-height:20px; height:20px; }
.lg-piece[aria-pressed="true"] { border:3px solid #427f91; background:#edf7ef; box-shadow:0 4px 0 #a8c4bf; }
.lg-piece:hover { background:#fff2cd; }
.lg-rotation { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:8px; margin-top:14px; }
.lg-rotation > button { width:48px; height:48px; padding:2px!important; font-size:28px; }
.lg-rotation > span { font-size:14px; text-align:center; line-height:1.3; }
.lg-feedback { min-height:76px; display:flex; align-items:center; padding:9px 12px; margin:9px 0; background:#f1e8f8; border-left:4px solid #b49bc9; font-size:16px; line-height:1.4; }
.lg-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.lg-actions > .lg-primary { min-width:170px; }
.lg-number-panel { display:flex; flex-direction:column; align-items:center; gap:18px; padding:16px 5px 6px; }
.lg-fields { display:flex; gap:18px; align-items:start; width:100%; }
.lg-fields label { flex:1; min-width:0; font-size:17px; font-weight:700; text-align:center; }
.lg-fields input { display:block; width:95px; height:60px; padding:5px; border:2px solid #91b7b9; border-radius:5px; margin:7px auto 0; background:#fffdf4; color:#335d72; font-size:29px; text-align:center; font-weight:800; }
.lg-fields label:focus-within input { border-color:#8b61aa; }
.lg-fields small { display:block; font-size:12px; color:#4f886c; padding-top:4px; }
.lg-fields input:disabled { opacity:.9; background:#e6f4e6; }
.lg-keypad { display:grid; grid-template-columns:repeat(3,48px); gap:5px; }
.lg-keypad > button { width:48px; height:48px; padding:3px; border:1px solid #bfb2d0; background:#f2eaf8; color:#625578; font-size:21px; }
.lg-cover { text-align:center; padding:24px 0 12px; }
.lg-eyebrow { color:#9676a8; font-size:14px; }
.lg-cover h2 { font-size:34px; line-height:1.2; margin:10px 0 14px; }
.lg-cover > p:not(.lg-eyebrow) { font-size:18px; line-height:1.5; max-width:680px; margin:0 auto 18px; }
.lg-cover img { display:block; width:min(700px,100%); aspect-ratio:3/2; object-fit:cover; border-radius:8px; margin:20px auto 12px; }
.lg-cover > span { font-size:14px; }
.lg-help { position:fixed; inset:0; width:min(550px,calc(100% - 24px)); max-height:calc(100dvh - 24px); margin:auto; padding:22px; border:3px solid #9bbfc3; border-radius:8px; background:#fffdf5; color:#355c70; box-shadow:0 0 0 100vmax #26475766; overflow:auto; }
.lg-help h2 { font-size:24px; margin:0 0 12px; }
.lg-help p { font-size:17px; line-height:1.5; }
.lg-finish { padding:18px 0; }
.lg-finish > h2 { font-size:30px; margin:0 0 8px; }
.lg-finish > .lg-city { display:block; width:100%; max-height:420px; margin:8px 0; }
.lg-city [role="button"] { cursor:pointer; }
.lg-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:15px 0; }
.lg-summary > div { display:flex; flex-direction:column; gap:3px; padding:8px 0; border-top:4px solid #eac14d; }
.lg-summary strong { font-size:32px; color:#337e90; }
.lg-summary span { font-size:14px; }
.lg-paint { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:12px 0; }
.lg-paint > span { font-weight:700; font-size:16px; min-width:200px; }
.lg-paint > div { display:flex; flex-wrap:wrap; gap:7px; }
.lg-swatch { width:48px; height:48px; padding:0!important; border:2px solid #fff; background:var(--swatch); box-shadow:0 0 0 1px #afc3be; color:#25455a; }
.lg-swatch[aria-pressed="true"] { outline:3px solid #3e6f86; outline-offset:1px; }
.lg-finish details { padding:12px 0; border-bottom:1px solid #d6e1d8; }
.lg-finish summary { min-height:28px; font-weight:700; cursor:pointer; }
.lg-finish details p { font-size:16px; line-height:1.5; }
.lg-bonus-shapes { display:flex; align-items:center; justify-content:center; gap:15px; }
.lg-bonus-shapes svg { width:120px; height:120px; }
.lg-installing > svg { animation:lg-build .55s ease-out; }
@keyframes lg-build { 0% { transform:translateY(-8px); opacity:.5; } 60% { transform:translateY(3px); } 100% { transform:translateY(0); opacity:1; } }
@media (min-width:901px) and (max-height:740px) { .lg-toolbar { padding:5px 0; } .lg-mission { margin:6px 0; padding:7px 11px; } .lg-mission h2 { font-size:20px; } .lg-map-strip { height:50px; } .lg-map-strip .lg-city,.lg-map-strip .lg-robot { height:48px; } .lg-feedback { min-height:72px; margin:7px 0; } }
@media (max-width:1000px) { .lg-workspace { grid-template-columns:minmax(0,1fr) 325px; gap:12px; } .lg-build-stage { grid-template-columns:minmax(0,1fr) 220px; gap:0; } .lg-piece > svg { width:95px; height:95px; } .lg-shelf.lg-five { gap:6px; } }
@media (max-width:800px) { .lg-toolbar { flex-wrap:wrap; } .lg-toolbar > div { min-width:240px; } .lg-effects { margin-left:auto; } .lg-workspace { grid-template-columns:1fr; gap:8px; } .lg-map-strip { height:54px; } .lg-map-strip .lg-city,.lg-map-strip .lg-robot { height:52px; } .lg-build-stage { grid-template-columns:minmax(0,1fr) 240px; min-height:300px; } .lg-inspector { width:240px; min-height:300px; } .lg-preview-figure { width:220px; height:220px; } .lg-shelf { grid-template-columns:repeat(4,minmax(0,1fr)); } .lg-shelf.lg-five { grid-template-columns:repeat(5,minmax(0,1fr)); } .lg-piece { height:120px; } .lg-number-panel { flex-direction:row; padding:0; justify-content:space-around; } .lg-fields { max-width:320px; } .lg-feedback { min-height:88px; } }
@media (max-width:600px) { .lego-game #app { padding:0 10px 16px; } .lg-toolbar { gap:6px; } .lg-toolbar > div { min-width:0; flex-basis:calc(100% - 160px); } .lg-toolbar h1 { font-size:16px; } .lg-toolbar > a { padding:8px!important; font-size:12px!important; } .lg-toolbar > button[data-lg-action="help"] { font-size:13px; } .lg-effects { margin-left:0; } .lg-mission { padding:8px; } .lg-mission h2 { font-size:18px; } .lg-mission > span { font-size:11px; } .lg-map-strip { height:44px; } .lg-map-strip .lg-city,.lg-map-strip .lg-robot { height:42px; } .lg-build-stage { display:flex; flex-direction:column; min-height:0; gap:5px; } .lg-building { width:100%; display:flex; justify-content:center; align-items:center; } .lg-building > .lg-object-art { width:170px; height:100px; } .lg-reference { height:70px; width:120px; flex-direction:column; gap:0; } .lg-reference svg { height:55px; width:65px; } .lg-inspector { width:100%; min-height:0; } .lg-preview-figure { width:220px; height:220px; } .lg-preview-title { font-size:14px; } .lg-count-modes { width:220px; } .lg-counter { font-size:12px; } .lg-shelf { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; } .lg-shelf.lg-five { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .lg-piece { height:103px; min-width:0!important; } .lg-piece > svg { width:100%; max-width:90px; height:77px; flex-shrink:1; } .lg-piece > span { font-size:13px; } .lg-five .lg-piece > svg { height:78px; } .lg-rotation { margin-top:10px; } .lg-rotation > span { font-size:13px; } .lg-feedback { font-size:14px; min-height:96px; padding:8px; } .lg-actions > .lg-primary { flex:1; } .lg-actions button { font-size:14px; padding:9px; } .lg-number-panel { flex-direction:column; gap:12px; } .lg-fields { gap:12px; } .lg-fields input { width:88px; height:54px; } .lg-cover { padding:14px 0; } .lg-cover h2 { font-size:28px; } .lg-cover > p:not(.lg-eyebrow) { font-size:16px; } .lg-cover img { margin:15px auto 10px; } .lg-summary { gap:8px; } .lg-summary span { font-size:12px; } .lg-summary strong { font-size:28px; } .lg-finish > .lg-city { min-height:220px; } .lg-paint { gap:8px; } }
@media (prefers-reduced-motion:reduce) { .lg-shell * { animation:none!important; scroll-behavior:auto!important; } }
@media (max-width:600px) {
  .lg-toolbar { padding:4px 0; }
  .lg-map-strip { height:30px; }
  .lg-map-strip .lg-city,.lg-map-strip .lg-robot { height:28px; }
  .lg-build-stage { display:grid; grid-template-columns:minmax(0,1fr) 140px; min-height:195px; gap:4px; }
  .lg-build-stage:has(.lg-counting) { grid-template-columns:minmax(0,1fr) 220px; }
  .lg-building { display:block; }
  .lg-building > .lg-object-art { width:100%; height:150px; }
  .lg-reference { width:100%; }
  .lg-inspector { width:140px; }
  .lg-inspector:not(.lg-counting) .lg-preview-figure { width:140px; height:140px; }
  .lg-inspector.lg-counting { width:220px; }
  .lg-inspector .lg-preview-title { min-height:24px; }
  .lg-feedback { min-height:88px; }
}
.lg-still * { animation:none!important; }