*{margin:0;padding:0;box-sizing:border-box}:root{--gold: #c9a227;--gold-hell: #e8c95a;--holz: rgba(43, 28, 16, .92);--holz-hell: #5a3a22;--pergament: #e8dcc0;--rot: #b03a2a;--gruen: #4f8f3a;--blau: #2a6fb0}html,body{width:100%;height:100%;overflow:hidden;background:#0b1d2a}body{font-family:Georgia,Times New Roman,serif;color:var(--pergament);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app,#app canvas{position:fixed;inset:0;width:100%;height:100%;display:block}#ui{position:fixed;inset:0;pointer-events:none;z-index:10}#ui>*{pointer-events:auto}.versteckt{display:none!important}.knopf{font-family:inherit;font-size:16px;color:var(--pergament);background:linear-gradient(180deg,#6b4423,#4a2f1b);border:2px solid var(--gold);border-radius:6px;padding:10px 18px;cursor:pointer;min-width:44px;min-height:44px;text-shadow:0 1px 2px #000}.knopf:hover{background:linear-gradient(180deg,#7d5230,#5a3a22)}.knopf:disabled{opacity:.45;cursor:default}.knopf.klein{padding:4px 10px;font-size:14px;min-height:34px}.knopf.gefahr{border-color:var(--rot)}.panel{background:var(--holz);border:3px solid var(--gold);border-radius:10px;box-shadow:0 10px 40px #0009,inset 0 0 60px #00000059;padding:18px 22px}.panel h2{color:var(--gold-hell);font-size:22px;letter-spacing:1px;border-bottom:1px solid var(--gold);padding-bottom:8px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:12px}.panel h3{color:var(--gold);font-size:16px;margin:10px 0 6px}.panel .klein-grau{font-size:13px;opacity:.75}#titel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(ellipse at 50% 35%,#0b1d2a40,#0b1d2ae0 75%)}#titel h1{font-size:clamp(40px,9vw,84px);color:var(--gold-hell);letter-spacing:6px;text-shadow:0 4px 0 #4a2f1b,0 8px 24px #000;font-variant:small-caps}#titel .untertitel{font-size:clamp(14px,2.5vw,20px);opacity:.85;margin-bottom:18px;font-style:italic}#titel .knopf{width:260px;font-size:19px}#netz-status{position:absolute;bottom:14px;font-size:13px;opacity:.8}.hud-ecke{position:absolute;display:flex;flex-direction:column;gap:8px}#hud-oben-links{top:12px;left:12px}#hud-unten-links{bottom:12px;left:12px}#hud-unten-mitte{bottom:12px;left:50%;transform:translate(-50%);align-items:center}.hud-karte{background:var(--holz);border:2px solid var(--gold);border-radius:8px;padding:8px 12px;font-size:15px;display:flex;gap:14px;align-items:center;text-shadow:0 1px 2px #000}.balken{width:170px;height:12px;background:#20140a;border:1px solid var(--gold);border-radius:6px;overflow:hidden}.balken>div{height:100%;transition:width .25s}.balken .fuellung-rumpf{background:linear-gradient(90deg,#7d5230,#b08d57)}.balken .fuellung-segel{background:linear-gradient(90deg,#8f8f7a,#e8e0cc)}.balken .fuellung-laden{background:linear-gradient(90deg,#a06a1a,var(--gold-hell))}.balken .fuellung-wasser{background:linear-gradient(90deg,#1f4e9c,#6ab0f0)}#minimap{position:absolute;top:12px;right:12px;border:2px solid var(--gold);border-radius:50%;background:#0b1d2ae6;box-shadow:0 4px 20px #00000080}#kompass{position:absolute;top:12px;left:50%;transform:translate(-50%);background:var(--holz);border:2px solid var(--gold);border-radius:20px;padding:4px 18px;font-size:15px;letter-spacing:2px;display:flex;gap:10px;align-items:center}#windpfeil{display:inline-block;color:var(--gold-hell);transition:transform .5s;font-size:18px}#hinweis{position:absolute;bottom:21%;left:50%;transform:translate(-50%);background:var(--holz);border:2px solid var(--gold);border-radius:8px;padding:10px 20px;font-size:17px;text-align:center;text-shadow:0 1px 2px #000;animation:puls 1.6s ease-in-out infinite;max-width:86vw}@keyframes puls{0%,to{box-shadow:0 0 #c9a22700}50%{box-shadow:0 0 22px #c9a2278c}}#meldungen{position:absolute;top:64px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;width:min(92vw,560px)}.toast{background:var(--holz);border:1px solid var(--gold);border-radius:8px;padding:8px 16px;font-size:15px;text-align:center;animation:toast-in .3s ease-out;text-shadow:0 1px 2px #000}.toast.wichtig{border-color:var(--rot);color:#f0b0a0}.toast.gold{color:var(--gold-hell)}@keyframes toast-in{0%{opacity:0;transform:translateY(-12px)}to{opacity:1}}#missionsliste{display:flex;flex-direction:column;gap:6px;max-width:300px}.mission-eintrag{background:#2b1c10cc;border-left:3px solid var(--gold);padding:6px 10px;font-size:13px;border-radius:0 6px 6px 0}.mission-eintrag.illegal{border-left-color:var(--rot)}#flotte-anzeige{display:flex;flex-direction:column;gap:4px;font-size:13px}.flotte-schiff{background:#2b1c10cc;border:1px solid var(--gold);border-radius:6px;padding:4px 8px}#touch-ui{position:absolute;inset:0;pointer-events:none}#touch-ui>*{pointer-events:auto}#joystick{position:absolute;bottom:70px;left:26px;width:130px;height:130px;border:2px solid rgba(201,162,39,.6);border-radius:50%;background:#2b1c1066}#joystick-knubbel{position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%;background:#c9a227bf;transform:translate(-50%,-50%);box-shadow:0 2px 10px #00000080}.touch-knopf{position:absolute;width:62px;height:62px;border-radius:50%;background:#2b1c10bf;border:2px solid var(--gold);color:var(--pergament);font-size:22px;display:flex;align-items:center;justify-content:center;text-shadow:0 1px 2px #000}.touch-knopf:active{background:#c9a22780}#tk-segel-plus{right:26px;bottom:196px}#tk-segel-minus{right:26px;bottom:118px}#tk-feuer-l{right:104px;bottom:52px}#tk-feuer-r{right:26px;bottom:40px}#tk-aktion{right:190px;bottom:40px;border-color:var(--gruen)}#tk-sprung{right:272px;bottom:40px}#tk-karte{right:26px;top:190px}#menu-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#050c128c;backdrop-filter:blur(2px)}#menu-box{width:min(94vw,640px);max-height:88vh;overflow-y:auto}#menu-box table{width:100%;border-collapse:collapse;font-size:15px}#menu-box th{color:var(--gold);text-align:left;padding:4px 6px;border-bottom:1px solid rgba(201,162,39,.4);font-weight:400}#menu-box td{padding:5px 6px;border-bottom:1px solid rgba(201,162,39,.15)}#menu-box .zahl{text-align:right;font-variant-numeric:tabular-nums}.menu-knoepfe{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;justify-content:flex-end}.gebaude-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.gebaude-karte{border:2px solid var(--gold);border-radius:8px;padding:14px 10px;text-align:center;background:#5a3a2280;cursor:pointer;font-size:16px}.gebaude-karte:hover{background:#c9a22740}.gebaude-karte .icon{font-size:30px;display:block;margin-bottom:6px}.ruf-zeile{display:flex;justify-content:space-between;padding:3px 0;font-size:15px}.ruf-wert{font-weight:700}.ruf-gut{color:#8fc97a}.ruf-schlecht{color:#e08070}.ruf-neutral{color:var(--pergament)}#weltkarte{position:absolute;inset:0;background:#050c12d9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px}#weltkarte canvas{border:3px solid var(--gold);border-radius:8px;max-width:94vw;max-height:80vh;background:#12344a}#weltkarte .legende{font-size:14px;opacity:.85}#ziel-punkt{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#e8dcc0b3;box-shadow:0 0 6px #000}@media (max-width: 760px){#missionsliste{max-width:210px}.hud-karte{font-size:13px;padding:6px 8px;gap:8px}.balken{width:120px}#kompass{font-size:12px;padding:3px 10px}}