:root{--dark:#153f55;--blue:#146c9b;--sky:#e4f5ff;--orange:#ffbe32;--green:#32a862;--paper:#fffaf1;--shadow:0 12px 28px #214a5d29;--head:68px}
*,*:before,*:after{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:ui-rounded,"Trebuchet MS",system-ui,-apple-system,Arial,sans-serif;color:#173949;background:#d8e9ee;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #e9a322;outline-offset:3px}
.site-head{height:var(--head);padding:7px clamp(9px,2vw,22px);display:flex;align-items:center;gap:13px;justify-content:space-between;background:linear-gradient(120deg,#0d6688,#1695a5);box-shadow:0 4px 14px #062a4550;color:white;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:10px;font-weight:1000;font-size:clamp(17px,2.3vw,28px);text-shadow:0 2px #103947;line-height:1}.brand small{display:block;font-weight:800;text-shadow:none;color:#dbf5fa;font-size:11px;margin-top:6px;letter-spacing:.04em}.brand-wheel{display:grid;place-items:center;font-size:31px;background:#ffdc89;border:2px solid #fff4c2;border-radius:14px;width:48px;height:48px;text-shadow:none}
.icon-button{flex-shrink:0;border:2px solid #b5eefb;color:#fff;background:#287bb3;border-radius:13px;width:49px;height:49px;font-size:28px;font-weight:900;box-shadow:0 4px #184b70}.icon-button:active{transform:translateY(3px);box-shadow:none}
.nav-context{margin-left:auto;background:#ffffff29;border-radius:24px;padding:8px 14px;font-size:13px;font-weight:900;white-space:nowrap}
main{max-width:1500px;margin:auto;padding:clamp(10px,1.7vw,24px)}
.page-welcome,.page-gallery{min-height:calc(100svh - var(--head) - 25px)}
.page-welcome{padding:12px 0 24px;background:radial-gradient(circle at 80% 10%,#f1f9ff,transparent 60%),linear-gradient(120deg,#d6eeda,#e5f2f9)}
.overline{font-size:12px;font-weight:1000;letter-spacing:.14em;text-transform:uppercase;color:#3d9479}
h1,h2,h3{line-height:1.09;margin:0}h1{font-size:clamp(30px,3.7vw,48px);color:#17556a;margin:9px 0}h2{font-size:clamp(23px,2.8vw,34px)}p{line-height:1.4}
.hero{padding:22px 15px 10px;text-align:center}.hero p{color:#58777b;margin:0 auto 12px;max-width:700px}
.theme-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(11px,2vw,24px);padding:10px clamp(3px,1vw,12px) 24px}
.theme-card{padding:0;border:5px solid white;border-radius:24px;background:#fff9eb;overflow:hidden;box-shadow:var(--shadow);text-align:left;transition:transform .14s;min-width:0}.theme-card:hover{transform:translateY(-5px)}.theme-card:active{transform:translateY(1px)}
.theme-photo{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.theme-label{padding:14px 17px;display:flex;align-items:center;justify-content:space-between;font-size:clamp(20px,2.3vw,28px);font-weight:1000;color:#fff;background:#167b9a}.theme-card[data-cat="bau"] .theme-label{background:linear-gradient(100deg,#b3690d,#f4a51b)}.theme-card[data-cat="strasse"] .theme-label{background:linear-gradient(100deg,#1c64a5,#359dcc)}.theme-card[data-cat="landwirtschaft"] .theme-label{background:linear-gradient(100deg,#297744,#4eaa63)}.theme-label small{display:block;font-size:12px;font-weight:800;opacity:.95;margin-top:4px}.theme-label .arrow{font-size:35px}
.crumbs{display:flex;align-items:center;justify-content:space-between;gap:13px;margin:3px 0 16px}.crumbs .title-copy{display:flex;flex-direction:column;gap:4px}.crumbs .title-copy small{color:#55787d;font-weight:700}
.back-button{border:0;border-radius:14px;background:#e0f0f4;color:#21627e;padding:11px 14px;font-weight:950;white-space:nowrap}
.gallery-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(9px,1.2vw,17px)}
.vehicle-card{background:#fff;border:3px solid white;box-shadow:0 4px 0 #adc1c8,0 7px 18px #264e5b21;border-radius:16px;padding:5px;overflow:hidden;min-width:0;text-align:left;position:relative}.vehicle-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:11px;background:#cadfe3;transition:filter .15s}.vehicle-card.locked img{filter:grayscale(.9) brightness(.66)}.vehicle-card.locked{cursor:default}.vehicle-card.unlocked:hover{transform:translateY(-3px);border-color:#ffdc61}.vehicle-card.unlocked{box-shadow:0 5px 0 #aad4ac,0 6px 18px #264e5b23}
.vehicle-name{display:block;padding:9px 5px 3px;font-size:clamp(12px,1.3vw,17px);font-weight:1000;min-height:38px}.vehicle-info{display:block;padding:0 5px 7px;color:#558077;font-size:clamp(10px,1vw,12px);font-weight:850}.vehicle-card.locked .vehicle-name{color:#6a7b83}.lock-label{position:absolute;top:17%;left:50%;transform:translateX(-50%);font-size:clamp(26px,3.3vw,52px);filter:drop-shadow(0 2px 4px #1119);pointer-events:none}.card-number{position:absolute;top:11px;left:11px;background:#fff;box-shadow:0 2px 4px #0003;border-radius:999px;padding:5px 9px;font-weight:1000;font-size:11px}
.progress-note{margin:13px 0 0;text-align:center;color:#56757a;font-weight:800}
body.in-game{overflow:hidden;height:100svh}
body.in-game main{height:calc(100svh - var(--head));max-width:none;padding:9px 12px;overflow:hidden}
body.in-game #app{height:100%}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,315px);gap:12px;height:100%;min-height:0}
.board-panel,.parts-panel{border:3px solid #fff;border-radius:21px;background:#fffdf5;box-shadow:var(--shadow);min-height:0;overflow:hidden;display:flex;flex-direction:column}
.board-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px 8px}.board-top h2{font-size:clamp(18px,2vw,26px)}.board-top small{color:#647f7c;font-size:12px;font-weight:800}.counter{white-space:nowrap;background:#e1f4dc;padding:8px 12px;border-radius:999px;color:#227c4d;font-weight:1000}
.board-frame{flex:1;display:flex;justify-content:center;align-items:center;min-height:0;margin:0 10px 4px;border-radius:14px;background:#c5e3df;overflow:hidden;border:3px solid #e6f7f2;position:relative}
#board{display:block;touch-action:none;object-fit:contain;max-width:100%;max-height:100%;width:auto;height:auto;aspect-ratio:4/3;border-radius:4px;box-shadow:0 5px 14px #102f4e33;background:#f8f8ed;cursor:crosshair}
.board-actions{padding:8px 11px 11px;display:flex;gap:6px;flex-wrap:wrap}.board-actions button{flex:1;min-width:105px;min-height:42px;border:2px solid #c6e3e2;border-radius:12px;background:#eaf7ef;color:#24645c;font-size:12px;font-weight:1000;padding:6px}.board-actions button.on{background:#ffedaa;border-color:#e9bb59;color:#74501d}
.parts-panel{padding:0 9px 8px}.parts-head{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:11px 4px 6px;flex-shrink:0}.parts-head h3{font-size:19px}.parts-head small{font-size:12px;font-weight:850;color:#638181}
.level-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:2px 1px 8px;flex-shrink:0}.level-row button{border:2px solid #e1d7b7;border-radius:11px;background:#f7f1de;color:#666247;padding:8px 1px;min-width:0;font-size:13px;font-weight:1000}.level-row button.active{background:#238d68;border-color:#16664b;color:#fff}.level-title{font-size:11px;text-transform:uppercase;font-weight:1000;letter-spacing:.08em;color:#65817c;padding-left:2px}
.tray-tip{font-size:11px;color:#5c7b78;line-height:1.35;margin:4px 2px 6px;flex-shrink:0}.tray-scroll{min-height:0;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;scrollbar-color:#93b9ba #e8f2ef;padding:4px 1px 10px}
.tray-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.tile{min-height:98px;border:2px solid #c2dadc;background:linear-gradient(180deg,#fff,#f1f7f2);border-radius:12px;padding:4px;display:flex;flex-direction:column;align-items:center;gap:1px;justify-content:center;touch-action:pan-y;position:relative}.tile img{display:block;pointer-events:none;object-fit:contain;width:100%;height:74px}.tile span{font-size:11px;color:#476d70;font-weight:900;line-height:1.1}.tile.active{border-color:#f6ad20;background:#fff0bd;box-shadow:inset 0 0 0 1px #edc75a}.tile.placed{opacity:.35;pointer-events:none}.tile.placed:after{content:'✓';position:absolute;font-size:23px;font-weight:1000;color:#187746;background:#ffffffda;border-radius:50%;padding:2px 9px}.tile:hover:not(.placed){border-color:#f2bd4c}
#toast{pointer-events:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;background:#134a62eb;color:#fff;padding:10px 18px;border-radius:18px;font-weight:800;box-shadow:0 7px 20px #0326385c;opacity:0;transition:opacity .18s}#toast.show{opacity:1}
.drag-preview{position:fixed;pointer-events:none;z-index:15;transform:translate(-50%,-50%);width:100px;height:90px;opacity:.92;filter:drop-shadow(0 8px 9px #0006)}
.modal-layer{position:fixed;z-index:50;inset:0;background:#092a3aaa;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}.modal-layer[hidden]{display:none!important}.modal-box{background:#fffcf1;border-radius:22px;border:4px solid white;padding:22px;text-align:center;width:min(520px,100%);box-shadow:0 19px 45px #1325356b}.modal-box h2{margin:0 0 7px;color:#165d73}.modal-box p{color:#466d72;margin:7px 0 15px}.modal-img{width:100%;max-height:48vh;object-fit:contain;border-radius:12px}.modal-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:15px}.primary{background:linear-gradient(#ffcf4b,#ffac21);border:2px solid #d88b1b;color:#563d12;padding:11px 18px;border-radius:13px;font-weight:1000;min-height:46px}.secondary{background:#e6f3ef;border:2px solid #c3deda;color:#275e58;padding:11px 17px;border-radius:13px;font-weight:1000;min-height:46px}
.win-star{font-size:65px;animation:pop 1.1s ease-in-out infinite alternate}@keyframes pop{from{transform:scale(.96) rotate(-7deg)}to{transform:scale(1.11) rotate(9deg)}}
@media(max-width:1100px){.game-layout{grid-template-columns:minmax(0,1fr) minmax(235px,285px)}.tile img{height:65px}.tile{min-height:88px}.parts-head h3{font-size:17px}}
@media(max-width:780px){.brand small,.nav-context{display:none}.site-head{gap:7px}.theme-cards{grid-template-columns:1fr}.theme-photo{aspect-ratio:16/9}.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.game-layout{grid-template-columns:minmax(0,1fr) minmax(200px,240px)}.board-actions button{min-width:75px;font-size:11px}.level-row button{font-size:11px}}
@media(max-width:620px){body.in-game{overflow:auto;height:auto}body.in-game main{overflow:auto;height:auto}.game-layout{display:flex;flex-direction:column;height:auto}.board-panel{position:sticky;top:0;z-index:3}.board-frame{height:42vh;flex:unset}.parts-panel{height:42vh}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-cards{grid-template-columns:1fr}.nav-context{display:none}}
@media(prefers-reduced-motion:reduce){*,*:after,*:before{animation-duration:.01ms!important;transition-duration:.01ms!important}}