:root{
  color-scheme:light;
  --red:#b24d36;
  --red-deep:#733423;
  --gold:#b88a45;
  --ink:#17231d;
  --text:#f7f1df;
  --muted:#665f50;
  --green:#4f9b63;
  --forest:#29483a;
  --forest-deep:#183329;
  --stone:#e8dec4;
  --stone-deep:#bcae8b;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#243b31;font-family:Arial,Helvetica,sans-serif}
button{font:inherit}
body{min-width:320px}
.app{
  width:100vw;height:100vh;min-height:590px;
  display:grid;grid-template-rows:clamp(92px,14vh,132px) minmax(0,1fr) clamp(44px,7vh,64px);
  overflow:hidden;background:#29483a;
}

.hero{
  position:relative;z-index:5;overflow:hidden;display:flex;align-items:center;
  padding:8px clamp(14px,3vw,42px);
  background:
    radial-gradient(circle at 78% 20%,rgba(230,201,132,.28),transparent 28%),
    linear-gradient(115deg,#203f34 0%,#416453 55%,#294a3c 100%);
  border-bottom:3px solid #c29b5a;
  box-shadow:0 8px 26px rgba(20,39,31,.34);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.30;
  background:
    url('assets/side-left.jpg') left 34%/270px auto no-repeat,
    url('assets/side-right.jpg') right 38%/270px auto no-repeat,
    repeating-linear-gradient(118deg,transparent 0 18px,rgba(255,255,255,.04) 19px 20px);
  filter:grayscale(1) sepia(.48) hue-rotate(62deg) saturate(.78) brightness(1.35);
  mix-blend-mode:soft-light;
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:rgba(255,239,195,.42);pointer-events:none}
.brand{position:relative;z-index:2;display:flex;align-items:center;gap:14px;height:100%}
.brand-crest{width:clamp(72px,8.5vw,112px);height:100%;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.28)) grayscale(.42) sepia(.36) hue-rotate(62deg) saturate(.62) brightness(1.08)}
.brand-copy{display:flex;flex-direction:column;justify-content:center;text-shadow:0 2px 4px rgba(0,0,0,.36)}
.brand-copy span{font-size:clamp(7px,.65vw,10px);letter-spacing:.28em;color:#d9cda9;font-weight:700}
.brand-copy h1{margin:1px 0 0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(28px,4.3vw,58px);line-height:.95;letter-spacing:.055em;color:#f3e8c8;font-weight:700}
.brand-copy b{margin-top:4px;font-size:clamp(8px,.78vw,11px);letter-spacing:.38em;color:#d2aa63}
.server-card{
  position:absolute;z-index:2;right:clamp(14px,2vw,30px);top:50%;transform:translateY(-50%);
  min-width:176px;display:grid;grid-template-columns:12px 1fr auto;grid-template-rows:auto auto;gap:2px 10px;
  align-items:center;padding:10px 14px;border:1px solid rgba(226,205,153,.74);border-radius:12px;
  background:linear-gradient(135deg,rgba(244,235,208,.94),rgba(214,203,169,.92));
  box-shadow:inset 0 0 16px rgba(255,255,255,.28),0 6px 18px rgba(15,34,27,.32);
}
.online-dot{grid-row:1/3;width:10px;height:10px;border-radius:50%;background:#3d9a58;box-shadow:0 0 10px rgba(61,154,88,.7)}
.server-copy{display:flex;flex-direction:column}.server-copy small,.players{font-size:8px;color:#655f50}.server-copy b{font-size:14px;color:#307c49}
.server-card strong{grid-row:1/3;font-size:22px;color:#24382e}.server-card strong i{font-size:12px;font-style:normal;color:#817865}.players{grid-column:2}

.workspace{
  position:relative;min-height:0;isolation:isolate;display:grid;place-items:center;
  padding:12px clamp(12px,2.2vw,34px);
  background:
    radial-gradient(circle at 50% 42%,rgba(230,219,181,.42),transparent 47%),
    radial-gradient(circle at 8% 45%,rgba(151,182,139,.42),transparent 28%),
    radial-gradient(circle at 92% 48%,rgba(139,175,130,.38),transparent 30%),
    linear-gradient(135deg,#54735f 0%,#365946 45%,#294b3c 100%);
}
.workspace::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:clamp(190px,19vw,280px);z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(236,224,185,.14),transparent 82%),
    url('assets/side-left.jpg') 42% center/auto 100% no-repeat;
  filter:grayscale(.72) sepia(.38) hue-rotate(60deg) saturate(.72) brightness(1.48) contrast(.88);
  opacity:.42;
  mix-blend-mode:soft-light;
}
.workspace::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:clamp(190px,19vw,280px);z-index:-1;pointer-events:none;
  background:
    linear-gradient(270deg,rgba(236,224,185,.14),transparent 82%),
    url('assets/side-right.jpg') 38% center/auto 100% no-repeat;
  filter:grayscale(.72) sepia(.38) hue-rotate(60deg) saturate(.72) brightness(1.48) contrast(.88);
  opacity:.42;
  mix-blend-mode:soft-light;
}
.map-shell{
  position:relative;width:min(74vw,calc((100vh - clamp(92px,14vh,132px) - clamp(44px,7vh,64px) - 24px)*1.6));
  max-width:1050px;height:auto;aspect-ratio:16/10;overflow:hidden;
  border:2px solid #d0b574;border-radius:13px;background:#082337;
  box-shadow:0 0 0 3px rgba(53,75,57,.92),0 18px 42px rgba(17,42,32,.42),0 0 26px rgba(229,213,163,.22),inset 0 0 24px rgba(0,0,0,.52);
}
.map-viewport{position:relative;width:100%;height:100%;overflow:hidden;background:#07283e;cursor:grab;touch-action:none}
.map-viewport.dragging{cursor:grabbing}
.map-world{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.gateway-map{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;filter:contrast(1.07) saturate(1.05) brightness(1.02)}
.terrain-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 0 48%,rgba(0,7,12,.22) 88%,rgba(0,0,0,.34));mix-blend-mode:soft-light}
.markers{position:absolute;inset:0}

.legend-dock{
  position:absolute;z-index:4;left:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%);
  width:clamp(200px,17vw,232px);max-height:calc(100% - 20px);display:flex;flex-direction:column;
  padding:12px;border:1px solid rgba(239,226,187,.86);border-radius:14px;
  background:linear-gradient(145deg,rgba(229,237,218,.97),rgba(190,207,187,.95));
  backdrop-filter:blur(10px);box-shadow:inset 0 0 20px rgba(255,255,255,.35),0 16px 34px rgba(18,46,35,.34),0 0 0 1px rgba(62,88,67,.18);
}
.dock-heading{display:flex;align-items:end;justify-content:space-between;padding:0 3px 9px;border-bottom:1px solid rgba(91,102,77,.32)}
.dock-heading h2{margin:0;color:#315c46;font-size:14px;letter-spacing:.16em;font-weight:800}.eyebrow{font-size:8px;letter-spacing:.18em;color:#7d745f}
.legend-list{min-height:0;overflow:hidden;display:grid;gap:4px;padding:8px 0}
.legend-item{
  width:100%;min-height:36px;display:grid;grid-template-columns:27px 1fr auto;align-items:center;gap:8px;
  padding:4px 7px;border:1px solid rgba(99,103,78,.27);border-radius:7px;
  background:linear-gradient(90deg,rgba(248,250,235,.78),rgba(203,218,197,.62));color:#243a33;cursor:pointer;text-align:left;
  transition:background .16s,border-color .16s,opacity .16s;
}
.legend-item:hover{border-color:#567b70;background:linear-gradient(90deg,rgba(250,253,241,.98),rgba(211,229,210,.84))}
.legend-item.off{opacity:.38;filter:grayscale(.7)}
.dino-icon{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;background:rgba(46,64,52,.88);box-shadow:0 2px 5px rgba(34,50,40,.28);color:inherit}
.dino-icon svg{width:18px;height:18px;display:block;fill:currentColor}
.legend-label{font-size:9px;font-weight:800}.state{font-size:7px;color:#797464;font-weight:900}
.marker-tools{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;padding-top:9px;border-top:1px solid rgba(91,102,77,.30)}
.marker-tools h3{margin:0 0 3px;color:#38634c;font-size:9px;letter-spacing:.1em}.marker-tools p{margin:0;max-width:125px;color:#6f6857;font-size:7px;line-height:1.35}
.danger-btn{border:1px solid #9b6145;background:linear-gradient(#bd7958,#8e4f37);color:#fff9ea;border-radius:6px;padding:8px;font-size:7px;font-weight:900;cursor:pointer}.danger-btn:hover{filter:brightness(1.08)}

.marker{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;white-space:nowrap}
.marker-dot{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:900;color:#0b0c0c;border:2px solid #fff1d0;box-shadow:0 0 8px #000}
.marker-label{padding:4px 7px;border-radius:5px;background:rgba(8,9,9,.9);border:1px solid #8a653a;color:#f6efdd;font-size:9px;font-weight:800;box-shadow:0 2px 8px #000}
.marker.personal .marker-dot{background:#e74a3e!important;color:#fff}
.map-controls{position:absolute;top:12px;right:12px;z-index:20;display:flex;gap:4px;padding:5px;border:1px solid rgba(155,186,164,.86);border-radius:9px;background:rgba(211,226,207,.93);backdrop-filter:blur(6px);box-shadow:0 6px 16px rgba(17,43,45,.36)}
.map-controls button{width:36px;height:34px;border:1px solid #708e83;border-radius:5px;background:linear-gradient(#eef3df,#b8cdb7);color:#214b48;font-size:18px;font-weight:900;cursor:pointer}.map-controls button:hover{border-color:#337c7a;background:#f8f9e8}
.coords{position:absolute;left:14px;bottom:14px;z-index:20;display:flex;gap:12px;align-items:center;padding:8px 12px;border-radius:7px;border:1px solid #735833;background:rgba(7,8,8,.88);color:#f1e8d5;font-size:11px}.coords b{color:#ff5c50}
.zoom-readout{position:absolute;right:14px;bottom:14px;z-index:20;padding:7px 10px;border-radius:6px;border:1px solid #735833;background:rgba(7,8,8,.88);font-size:9px;color:#f0e4ca;font-weight:900}
.notice{position:absolute;left:50%;top:15px;transform:translateX(-50%);z-index:30;padding:7px 12px;border-radius:7px;border:1px solid #9b7746;background:rgba(7,8,8,.95);color:#f2dfbd;font-size:10px;opacity:0;transition:opacity .2s}.notice.show{opacity:1}

footer{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;background:linear-gradient(115deg,#203f34,#456756 55%,#294a3c);border-top:3px solid #c29b5a;color:#ead8a8;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:clamp(10px,1.4vw,18px);letter-spacing:.34em;text-shadow:0 2px 3px rgba(0,0,0,.38)}
footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.30;background:url('assets/side-left.jpg') left 38%/210px auto no-repeat,url('assets/side-right.jpg') right 38%/210px auto no-repeat;filter:grayscale(1) sepia(.46) hue-rotate(62deg) saturate(.72) brightness(1.35);mix-blend-mode:soft-light}
footer span{position:relative;z-index:1;padding-left:.34em}

@media(max-width:980px){
  .map-shell{width:min(88vw,calc((100vh - 150px)*1.6))}
  .legend-dock{width:190px;left:8px;padding:9px}.legend-item{min-height:32px}.legend-list{gap:3px}.marker-tools p{display:none}.marker-tools{grid-template-columns:1fr}.danger-btn{width:100%}
}
@media(max-width:720px){
  .app{min-height:520px;grid-template-rows:86px minmax(0,1fr) 42px}.hero{padding-left:7px}.brand{gap:5px}.brand-crest{width:68px}.brand-copy span{display:none}.brand-copy h1{font-size:22px}.brand-copy b{font-size:6px;letter-spacing:.2em}.server-card{right:8px;min-width:138px;padding:7px 9px}.server-card strong{font-size:17px}
  .workspace{padding:7px}.workspace::before,.workspace::after{opacity:.18}.map-shell{width:100%;height:100%;aspect-ratio:auto;border-radius:8px}
  .legend-dock{top:8px;bottom:auto;transform:none;width:154px;max-height:calc(100% - 16px);padding:7px;border-radius:10px}.dock-heading{padding-bottom:6px}.eyebrow{display:none}.dock-heading h2{font-size:10px}.legend-list{gap:2px;padding:5px 0}.legend-item{min-height:27px;grid-template-columns:22px 1fr auto;padding:2px 5px}.dino-icon{width:21px;height:21px}.dino-icon svg{width:14px;height:14px}.legend-label{font-size:7px}.marker-tools{padding-top:5px}.marker-tools h3{display:none}.danger-btn{padding:6px;font-size:6px}
  .coords{left:auto;right:8px;bottom:8px;font-size:8px;padding:5px 7px;gap:6px}.zoom-readout{display:none}.map-controls{top:8px;right:8px}.map-controls button{width:31px;height:29px;font-size:15px}footer{font-size:8px;letter-spacing:.16em}
}

/* V54 – eine durchgehende, helle prähistorische URZEITFLUCH-Welt */
.app{
  position:relative;
  isolation:isolate;
  background:#385642;
}
.app::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:url('assets/urzeitfluch-island-world-v1.png') center center/cover no-repeat;
  filter:saturate(.94) contrast(1.03) brightness(.96);
}
.app::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 76% 10%,rgba(224,238,211,.10),transparent 25%),
    linear-gradient(180deg,rgba(5,52,82,.08),rgba(7,73,91,.03) 20%,rgba(5,66,84,.03) 82%,rgba(3,41,68,.15));
}
.hero{
  background:linear-gradient(90deg,rgba(10,55,75,.76),rgba(28,99,104,.38) 54%,rgba(10,61,82,.60));
  backdrop-filter:blur(1px);
}
.hero::before{
  opacity:.28;
  background:repeating-linear-gradient(118deg,transparent 0 18px,rgba(255,255,255,.045) 19px 20px);
  filter:none;
  mix-blend-mode:normal;
}
.workspace{
  background:
    radial-gradient(circle at 50% 45%,rgba(225,215,169,.05),transparent 45%),
    linear-gradient(90deg,rgba(30,78,75,.12),rgba(39,88,80,.02) 30%,rgba(39,88,80,.02) 70%,rgba(30,78,75,.12));
}
.workspace::before,.workspace::after{display:none}
footer{
  background:linear-gradient(90deg,rgba(7,48,73,.74),rgba(20,96,101,.48) 50%,rgba(7,48,73,.74));
  backdrop-filter:blur(1px);
}
footer::before{display:none}

/* V61 – mystische URZEITFLUCH-Nacht: Die leuchtende Karte bleibt der Mittelpunkt */
.app{background:#071c21}
.app::before{
  background:url('assets/urzeitfluch-gateway-world-v1.png') center center/cover no-repeat;
  filter:saturate(.48) hue-rotate(14deg) contrast(1.16) brightness(.58);
}
.app::after{
  background:
    radial-gradient(circle at 50% 46%,rgba(10,83,100,.10),rgba(3,20,28,.22) 56%,rgba(2,13,20,.46) 100%),
    linear-gradient(180deg,rgba(3,28,36,.30),rgba(4,33,39,.12) 20%,rgba(3,27,34,.16) 82%,rgba(1,18,25,.42));
}
.hero{
  background:linear-gradient(90deg,rgba(3,26,34,.91),rgba(10,48,54,.70) 54%,rgba(3,29,38,.88));
  border-bottom-color:#4aa6a0;
  box-shadow:0 8px 28px rgba(0,10,15,.65),0 2px 0 rgba(118,220,206,.12);
}
.hero::after{background:linear-gradient(90deg,transparent,rgba(119,218,204,.64),transparent)}
.brand-copy span{color:#8fb9b0}.brand-copy h1{color:#e7dfc7;text-shadow:0 2px 4px #000,0 0 22px rgba(68,190,181,.18)}.brand-copy b{color:#69c8bd}
.brand-crest{filter:drop-shadow(0 5px 9px rgba(0,0,0,.55)) grayscale(.58) sepia(.16) hue-rotate(108deg) saturate(.78) brightness(.92)}
.server-card{border-color:rgba(90,174,163,.58);background:linear-gradient(135deg,rgba(8,36,40,.94),rgba(14,52,53,.90));box-shadow:inset 0 0 16px rgba(53,169,157,.08),0 6px 20px rgba(0,0,0,.42)}
.server-copy small,.players{color:#8eaaa3}.server-card strong{color:#e9e2ca}.server-card strong i{color:#8ca8a2}.server-copy b{color:#5fe58b}
.workspace{background:linear-gradient(90deg,rgba(2,20,27,.26),rgba(5,45,51,.04) 30%,rgba(5,45,51,.04) 70%,rgba(2,20,27,.26))}
.map-shell{border-color:#58a9a2;box-shadow:0 0 0 3px rgba(5,31,37,.96),0 18px 46px rgba(0,8,13,.64),0 0 28px rgba(46,170,177,.24),inset 0 0 24px rgba(0,0,0,.52)}
.legend-dock{
  border-color:rgba(81,158,151,.58);
  background:linear-gradient(145deg,rgba(5,27,33,.96),rgba(8,42,44,.93));
  box-shadow:inset 0 0 26px rgba(0,0,0,.54),0 16px 38px rgba(0,8,13,.56),0 0 22px rgba(42,166,159,.10);
}
.dock-heading{border-bottom-color:rgba(75,162,154,.34)}
.dock-heading h2{color:#83d2c5;text-shadow:0 0 12px rgba(64,203,189,.22)}.eyebrow{color:#78958f}
.legend-item{
  border-color:rgba(81,132,126,.24);
  background:linear-gradient(90deg,rgba(18,59,60,.72),rgba(5,28,34,.58));
  color:#e8e4d6;
}
.legend-item:hover{border-color:#55bfb5;background:linear-gradient(90deg,rgba(24,81,78,.86),rgba(7,39,44,.78))}
.legend-item.off{opacity:.34}
.dino-icon{background:rgba(4,21,27,.86);box-shadow:inset 0 0 7px rgba(98,212,199,.08),0 0 7px rgba(0,0,0,.58)}
.state{color:#77918c}.marker-tools{border-top-color:rgba(75,162,154,.30)}.marker-tools h3{color:#75c9bd}.marker-tools p{color:#91aaa4}
.danger-btn{border-color:#667f76;background:linear-gradient(#476c62,#263f3a);color:#f3edda}.danger-btn:hover{filter:brightness(1.16)}
.map-controls{border-color:rgba(85,170,163,.68);background:rgba(5,31,37,.90);box-shadow:0 6px 18px rgba(0,0,0,.52)}
.map-controls button{border-color:#477b77;background:linear-gradient(#234f50,#102d34);color:#d9eee7}.map-controls button:hover{border-color:#72d7cc;background:#285f5c;color:#fff}
footer{background:linear-gradient(90deg,rgba(2,24,32,.92),rgba(10,53,56,.76) 50%,rgba(2,24,32,.92));border-top-color:#4aa6a0;color:#b9d9d1;text-shadow:0 2px 3px #000,0 0 14px rgba(72,196,184,.20)}

/* V62 – Fossilien, Ausgrabungsstein und türkis leuchtender Urzeitfluch */
.app::before{
  background:url('assets/urzeitfluch-fossil-curse-v1.png') center center/cover no-repeat;
  filter:saturate(.64) hue-rotate(10deg) contrast(1.10) brightness(.82);
}
.app::after{
  background:
    radial-gradient(circle at 50% 47%,rgba(15,91,98,.08),rgba(2,18,25,.16) 55%,rgba(1,11,17,.36) 100%),
    linear-gradient(180deg,rgba(2,24,31,.18),rgba(3,35,40,.06) 20%,rgba(2,29,35,.08) 82%,rgba(1,15,21,.34));
}
.legend-dock{
  isolation:isolate;
  overflow:hidden;
  border:2px solid rgba(92,156,148,.60);
  background:linear-gradient(145deg,rgba(12,35,39,.97),rgba(19,49,48,.95));
  box-shadow:inset 0 0 30px rgba(0,0,0,.52),0 16px 38px rgba(0,7,11,.60),0 0 24px rgba(48,191,179,.12);
}
.legend-dock::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.16;
  background:
    radial-gradient(circle at 18% 18%,transparent 0 12px,rgba(117,213,199,.48) 13px 14px,transparent 15px),
    url('assets/urzeitfluch-fossil-curse-v1.png') 96% 90%/auto 112% no-repeat;
  filter:grayscale(.35) saturate(.70) contrast(1.18) brightness(1.18);
  mix-blend-mode:screen;
}
.legend-dock > *{position:relative;z-index:1}
.dock-heading h2{color:#a7ded2;letter-spacing:.19em}.eyebrow{color:#86a69e}
.legend-item{border-color:rgba(133,157,143,.26);background:linear-gradient(100deg,rgba(35,65,62,.82),rgba(8,31,36,.70));box-shadow:inset 2px 0 0 rgba(95,194,181,.12)}
.legend-item:hover{border-color:#71c9bd;background:linear-gradient(100deg,rgba(48,85,78,.92),rgba(12,44,47,.84))}
.marker-tools{border-top-color:rgba(111,179,166,.32)}
.map-shell{box-shadow:0 0 0 3px rgba(5,28,33,.96),0 18px 46px rgba(0,7,11,.68),0 0 32px rgba(55,189,186,.28),inset 0 0 24px rgba(0,0,0,.52)}

/* V63 – vollständig einheitliche Fluch-Identität aus Obsidian, Fossil und Geisterlicht */
.app::after{
  background:
    radial-gradient(ellipse at 50% 48%,transparent 25%,rgba(0,13,18,.22) 68%,rgba(0,5,9,.56) 100%),
    linear-gradient(180deg,rgba(2,18,24,.14),rgba(1,26,31,.03) 20%,rgba(1,21,27,.06) 80%,rgba(0,10,15,.36));
}
.hero{
  background:
    linear-gradient(90deg,rgba(1,13,18,.96),rgba(7,31,35,.83) 54%,rgba(1,15,21,.95));
  border-bottom:1px solid #62bdb2;
  box-shadow:0 7px 26px rgba(0,0,0,.82),0 2px 0 rgba(87,184,173,.22),inset 0 -12px 24px rgba(0,0,0,.28);
}
.hero::before{
  opacity:.22;
  background:
    radial-gradient(circle at 78% 42%,rgba(70,210,194,.16),transparent 22%),
    repeating-linear-gradient(118deg,transparent 0 20px,rgba(110,199,187,.04) 21px 22px);
}
.hero::after{height:2px;bottom:3px;background:linear-gradient(90deg,transparent 3%,rgba(99,206,193,.72) 30%,rgba(204,225,211,.42) 50%,rgba(99,206,193,.72) 70%,transparent 97%);box-shadow:0 0 12px rgba(78,197,184,.46)}
.brand-crest{
  padding:4px;border:1px solid rgba(100,189,178,.46);border-radius:4px;
  background:rgba(2,17,21,.72);
  filter:drop-shadow(0 0 10px rgba(63,205,188,.26)) grayscale(.70) sepia(.12) hue-rotate(112deg) saturate(.92) brightness(.86) contrast(1.16);
  box-shadow:inset 0 0 14px rgba(0,0,0,.68),0 0 0 2px rgba(7,37,39,.75);
}
.brand-copy span{color:#719a94}.brand-copy h1{font-weight:700;letter-spacing:.075em;color:#ded8c4;text-shadow:0 2px 3px #000,0 0 10px rgba(94,205,191,.22),0 0 28px rgba(57,157,147,.14)}.brand-copy b{color:#6ac4b8;text-shadow:0 0 8px rgba(65,190,176,.30)}
.server-card{border:1px solid rgba(91,174,164,.50);border-radius:6px;background:linear-gradient(145deg,rgba(5,27,31,.96),rgba(9,43,42,.92));box-shadow:inset 0 0 20px rgba(0,0,0,.58),0 5px 18px rgba(0,0,0,.55),0 0 14px rgba(57,175,163,.10)}
.server-copy small,.players{color:#829d97}.server-card strong{color:#ded8c4}.server-copy b{color:#63db88;text-shadow:0 0 8px rgba(74,220,132,.28)}
.map-shell{border:1px solid #66bdb3;border-radius:7px;box-shadow:0 0 0 2px #071f24,0 0 0 3px rgba(128,144,127,.38),0 18px 48px rgba(0,4,8,.76),0 0 28px rgba(53,196,183,.32),inset 0 0 28px rgba(0,0,0,.62)}
.legend-dock{
  border:1px solid rgba(108,187,176,.68);border-radius:7px;
  background:linear-gradient(155deg,rgba(7,25,29,.98),rgba(18,43,41,.96));
  box-shadow:inset 0 0 32px rgba(0,0,0,.68),0 14px 40px rgba(0,4,7,.72),0 0 0 2px rgba(4,26,29,.78),0 0 22px rgba(48,190,177,.15);
}
.legend-dock::after{content:"";position:absolute;inset:5px;z-index:0;pointer-events:none;border:1px solid rgba(123,143,127,.20);border-radius:3px;box-shadow:inset 0 0 14px rgba(52,190,175,.04)}
.legend-dock > *{position:relative;z-index:1}
.dock-heading{border-bottom:1px solid rgba(103,184,173,.36)}.dock-heading h2{font-family:Georgia,'Times New Roman',serif;color:#c9d9cd;text-shadow:0 0 10px rgba(83,215,199,.34)}.eyebrow{color:#658b85}
.legend-item{
  min-height:36px;border:1px solid rgba(100,137,126,.30);border-radius:3px;
  background:linear-gradient(180deg,rgba(33,57,53,.88),rgba(11,31,34,.90));
  color:#dedbcb;box-shadow:inset 0 1px rgba(190,207,188,.07),inset 3px 0 rgba(78,183,170,.10),0 2px 5px rgba(0,0,0,.24);
}
.legend-item:hover{border-color:#68bfb4;background:linear-gradient(180deg,rgba(43,76,69,.96),rgba(15,43,44,.94));box-shadow:inset 0 1px rgba(210,227,208,.10),inset 3px 0 rgba(97,220,204,.30),0 0 12px rgba(56,189,175,.12)}
.legend-item.off{opacity:.30;filter:grayscale(.82)}
.dino-icon{border-width:1px;background:radial-gradient(circle,rgba(27,61,57,.86),rgba(2,18,23,.94));box-shadow:inset 0 0 8px rgba(86,211,197,.10),0 0 8px rgba(0,0,0,.70)}
.legend-label{letter-spacing:.025em}.state{color:#6e8d87}
.marker-tools{border-top:1px solid rgba(100,178,167,.30)}.marker-tools h3{font-family:Georgia,'Times New Roman',serif;color:#a7c9bf}.marker-tools p{color:#7e9c96}
.danger-btn{border:1px solid #5e887e;border-radius:3px;background:linear-gradient(#315b54,#162f31);color:#ddd8c6;box-shadow:inset 0 1px rgba(255,255,255,.06),0 2px 5px rgba(0,0,0,.35)}.danger-btn:hover{border-color:#71c1b5;background:linear-gradient(#3e7369,#1d4241)}
.map-controls{border:1px solid rgba(98,178,168,.72);border-radius:5px;background:linear-gradient(145deg,rgba(5,27,32,.96),rgba(12,49,48,.94));box-shadow:inset 0 0 14px rgba(0,0,0,.46),0 6px 20px rgba(0,0,0,.62),0 0 12px rgba(56,181,169,.12)}
.map-controls button{border:1px solid #487f78;border-radius:3px;background:linear-gradient(#2d5954,#102f34);color:#d8ded0;box-shadow:inset 0 1px rgba(255,255,255,.06)}.map-controls button:hover{border-color:#74d0c4;background:linear-gradient(#3d766d,#1a4c4b);color:#fff}
footer{background:linear-gradient(90deg,rgba(1,14,20,.97),rgba(7,40,42,.90) 50%,rgba(1,14,20,.97));border-top:1px solid #61b8ae;color:#c8d6ca;text-shadow:0 2px 3px #000,0 0 12px rgba(76,202,187,.28);box-shadow:inset 0 3px 16px rgba(0,0,0,.40)}

/* V64 – rötlicher Krallenfluch als einheitliche Markenoptik */
.app{background:#160707}
.app::before{
  filter:grayscale(.44) sepia(.28) hue-rotate(318deg) saturate(.88) contrast(1.18) brightness(.60);
}
.app::after{
  background:
    radial-gradient(ellipse at 50% 48%,transparent 28%,rgba(48,4,7,.18) 68%,rgba(16,0,2,.62) 100%),
    linear-gradient(180deg,rgba(54,4,8,.20),rgba(22,3,5,.05) 22%,rgba(26,2,5,.08) 80%,rgba(36,1,4,.42));
}
.hero{
  background:linear-gradient(90deg,rgba(15,2,4,.97),rgba(55,8,10,.84) 54%,rgba(17,2,4,.96));
  border-bottom-color:#a43e37;
  box-shadow:0 7px 28px rgba(0,0,0,.86),0 2px 0 rgba(195,67,57,.20),inset 0 -12px 24px rgba(0,0,0,.34);
}
.hero::before{
  opacity:1;
  background:
    linear-gradient(113deg,transparent 0 77%,rgba(217,60,49,.00) 77.2%,rgba(217,60,49,.66) 77.8%,rgba(101,18,16,.86) 78.4%,transparent 79.1%),
    linear-gradient(113deg,transparent 0 80%,rgba(217,60,49,.00) 80.2%,rgba(217,60,49,.72) 80.8%,rgba(101,18,16,.88) 81.4%,transparent 82.1%),
    linear-gradient(113deg,transparent 0 83%,rgba(217,60,49,.00) 83.2%,rgba(217,60,49,.62) 83.8%,rgba(101,18,16,.84) 84.4%,transparent 85.1%);
  filter:drop-shadow(0 0 6px rgba(207,48,39,.42));
  mix-blend-mode:screen;
}
.hero::after{background:linear-gradient(90deg,transparent 3%,rgba(170,45,38,.72) 30%,rgba(221,111,84,.50) 50%,rgba(170,45,38,.72) 70%,transparent 97%);box-shadow:0 0 12px rgba(187,47,39,.52)}
.brand-crest{border-color:rgba(165,59,51,.60);background:rgba(18,2,4,.82);filter:drop-shadow(0 0 12px rgba(197,43,34,.38)) grayscale(.38) sepia(.32) hue-rotate(320deg) saturate(1.10) brightness(.85) contrast(1.20);box-shadow:inset 0 0 15px rgba(0,0,0,.72),0 0 0 2px rgba(54,9,10,.84)}
.brand-copy span{color:#9a7770}.brand-copy h1{color:#ded4c0;text-shadow:0 2px 3px #000,0 0 11px rgba(191,57,47,.28),0 0 30px rgba(135,26,22,.18)}.brand-copy b{color:#c05a4f;text-shadow:0 0 8px rgba(182,45,37,.36)}
.server-card{border-color:rgba(153,60,52,.58);background:linear-gradient(145deg,rgba(22,5,6,.97),rgba(55,11,12,.92));box-shadow:inset 0 0 20px rgba(0,0,0,.62),0 5px 18px rgba(0,0,0,.58),0 0 14px rgba(178,44,36,.12)}
.server-copy small,.players{color:#a28c83}.server-card strong{color:#ded4c0}
.workspace{background:linear-gradient(90deg,rgba(45,3,7,.26),rgba(35,4,7,.03) 30%,rgba(35,4,7,.03) 70%,rgba(45,3,7,.26))}
.map-shell{border-color:#a3433c;box-shadow:0 0 0 2px #240608,0 0 0 3px rgba(109,75,63,.42),0 18px 50px rgba(0,0,0,.78),0 0 30px rgba(187,49,41,.30),inset 0 0 28px rgba(0,0,0,.62)}
.legend-dock{border-color:rgba(159,67,59,.72);background:linear-gradient(155deg,rgba(24,5,7,.98),rgba(56,13,13,.96));box-shadow:inset 0 0 32px rgba(0,0,0,.72),0 14px 40px rgba(0,0,0,.76),0 0 0 2px rgba(48,7,8,.84),0 0 22px rgba(187,44,36,.16)}
.legend-dock::before{opacity:.13;filter:grayscale(.25) sepia(.36) hue-rotate(320deg) saturate(.90) contrast(1.25) brightness(1.12);mix-blend-mode:screen}
.legend-dock::after{
  inset:5px;border-color:rgba(151,83,69,.22);
  background:
    linear-gradient(112deg,transparent 0 78%,rgba(202,54,45,.56) 78.5%,transparent 79.2%),
    linear-gradient(112deg,transparent 0 83%,rgba(202,54,45,.46) 83.5%,transparent 84.2%),
    linear-gradient(112deg,transparent 0 88%,rgba(202,54,45,.38) 88.5%,transparent 89.2%);
  opacity:.48;
}
.dock-heading{border-bottom-color:rgba(170,68,58,.38)}.dock-heading h2{color:#d0bfb0;text-shadow:0 0 10px rgba(206,60,49,.34)}.eyebrow{color:#967b72}
.legend-item{border-color:rgba(143,84,72,.30);background:linear-gradient(180deg,rgba(68,24,23,.90),rgba(27,7,10,.92));color:#ddd3c2;box-shadow:inset 0 1px rgba(220,177,147,.06),inset 3px 0 rgba(187,57,47,.18),0 2px 5px rgba(0,0,0,.30)}
.legend-item:hover{border-color:#bd5a4f;background:linear-gradient(180deg,rgba(91,31,28,.97),rgba(45,10,12,.95));box-shadow:inset 0 1px rgba(235,196,164,.08),inset 3px 0 rgba(222,73,59,.48),0 0 12px rgba(188,48,39,.16)}
.dino-icon{background:radial-gradient(circle,rgba(76,29,27,.90),rgba(18,3,7,.96));box-shadow:inset 0 0 8px rgba(216,89,70,.08),0 0 8px rgba(0,0,0,.74)}
.state{color:#9c8177}.marker-tools{border-top-color:rgba(164,70,60,.32)}.marker-tools h3{color:#c5a397}.marker-tools p{color:#a1887e}
.danger-btn{border-color:#985046;background:linear-gradient(#743129,#3d1013);color:#e5d9c5}.danger-btn:hover{border-color:#d06b5d;background:linear-gradient(#934238,#54171a)}
.map-controls{border-color:rgba(160,65,57,.74);background:linear-gradient(145deg,rgba(24,5,7,.97),rgba(59,13,14,.95));box-shadow:inset 0 0 14px rgba(0,0,0,.52),0 6px 20px rgba(0,0,0,.68),0 0 12px rgba(182,45,37,.14)}
.map-controls button{border-color:#87453e;background:linear-gradient(#6c302c,#351012);color:#e3d8c4}.map-controls button:hover{border-color:#d16c5e;background:linear-gradient(#91433a,#55191a);color:#fff}
footer{background:linear-gradient(90deg,rgba(15,1,4,.98),rgba(55,8,10,.93) 50%,rgba(15,1,4,.98));border-top-color:#a13f38;color:#d5c5b3;text-shadow:0 2px 3px #000,0 0 12px rgba(192,54,44,.30);box-shadow:inset 0 3px 16px rgba(0,0,0,.48)}
footer::after{content:"";position:absolute;right:8%;top:-70%;width:150px;height:220%;pointer-events:none;opacity:.46;background:linear-gradient(112deg,transparent 0 28%,#b53d34 29%,transparent 30%),linear-gradient(112deg,transparent 0 48%,#9c3029 49%,transparent 50%),linear-gradient(112deg,transparent 0 68%,#84241f 69%,transparent 70%);filter:drop-shadow(0 0 5px rgba(190,45,36,.45));transform:rotate(-4deg)}

/* V65 – Primeval Expedition: ruhiges Premium-Design aus Basalt, Bronze und Fossilstein */
.app{background:#111512}
.app::before{
  background:url('assets/urzeitfluch-fossil-curse-v1.png') center center/cover no-repeat;
  filter:grayscale(.72) sepia(.16) hue-rotate(338deg) saturate(.48) contrast(1.08) brightness(.48);
}
.app::after{
  background:
    radial-gradient(ellipse at 50% 47%,rgba(75,91,69,.06),rgba(10,14,12,.18) 62%,rgba(4,6,5,.54) 100%),
    linear-gradient(180deg,rgba(12,16,13,.18),rgba(10,14,12,.03) 20%,rgba(10,14,12,.05) 82%,rgba(5,8,6,.38));
}
.hero{
  background:linear-gradient(100deg,rgba(7,10,8,.97),rgba(30,37,29,.88) 55%,rgba(9,12,10,.96));
  border-bottom:2px solid #9d7a45;
  box-shadow:0 8px 28px rgba(0,0,0,.80),inset 0 -10px 24px rgba(0,0,0,.28);
}
.hero::before{opacity:.26;background:repeating-linear-gradient(118deg,transparent 0 22px,rgba(214,193,151,.035) 23px 24px);filter:none;mix-blend-mode:normal}
.hero::after{height:1px;bottom:4px;background:linear-gradient(90deg,transparent 2%,rgba(190,151,84,.78) 28%,rgba(232,211,167,.52) 50%,rgba(190,151,84,.78) 72%,transparent 98%);box-shadow:0 0 8px rgba(183,137,66,.24)}
.brand-crest{padding:4px;border:1px solid rgba(164,132,76,.62);border-radius:5px;background:rgba(10,13,10,.82);filter:drop-shadow(0 6px 10px rgba(0,0,0,.48)) grayscale(.52) sepia(.32) saturate(.68) brightness(.96) contrast(1.10);box-shadow:inset 0 0 14px rgba(0,0,0,.62),0 0 0 2px rgba(44,37,24,.74)}
.brand-copy span{color:#9b9a84}.brand-copy h1{color:#e7ddc5;text-shadow:0 2px 3px #000,0 0 16px rgba(202,168,105,.12)}.brand-copy b{color:#bd9656;text-shadow:none}
.server-card{border:1px solid rgba(154,128,80,.58);border-radius:7px;background:linear-gradient(145deg,rgba(18,23,18,.97),rgba(42,48,35,.94));box-shadow:inset 0 0 18px rgba(0,0,0,.48),0 6px 18px rgba(0,0,0,.46)}
.server-copy small,.players{color:#9c9b86}.server-card strong{color:#e6ddc7}.server-card strong i{color:#918d78}.server-copy b{color:#67d985;text-shadow:none}
.workspace{background:linear-gradient(90deg,rgba(5,8,6,.28),transparent 26%,transparent 74%,rgba(5,8,6,.28))}
.map-shell{border:1px solid #a4834d;border-radius:8px;box-shadow:0 0 0 2px #171b15,0 0 0 3px rgba(137,119,80,.34),0 18px 48px rgba(0,0,0,.72),0 0 24px rgba(172,132,67,.15),inset 0 0 26px rgba(0,0,0,.54)}
.legend-dock{border:1px solid rgba(157,132,84,.64);border-radius:8px;background:linear-gradient(150deg,rgba(18,23,18,.98),rgba(45,49,35,.96));box-shadow:inset 0 0 28px rgba(0,0,0,.56),0 15px 38px rgba(0,0,0,.62),0 0 0 2px rgba(28,29,20,.72)}
.legend-dock::before{opacity:.11;background:url('assets/urzeitfluch-fossil-curse-v1.png') 96% 90%/auto 112% no-repeat;filter:grayscale(.72) sepia(.24) saturate(.50) contrast(1.10) brightness(1.24);mix-blend-mode:screen}
.legend-dock::after{inset:5px;border:1px solid rgba(179,157,109,.18);border-radius:4px;background:none;opacity:1;filter:none;transform:none}
.dock-heading{border-bottom-color:rgba(160,136,88,.34)}.dock-heading h2{color:#d9ceb5;text-shadow:none}.eyebrow{color:#85877a}
.legend-item{border:1px solid rgba(142,131,99,.26);border-radius:4px;background:linear-gradient(180deg,rgba(61,65,47,.78),rgba(25,30,23,.88));color:#e2dccb;box-shadow:inset 0 1px rgba(232,220,184,.05),inset 3px 0 rgba(183,147,78,.12),0 2px 4px rgba(0,0,0,.22)}
.legend-item:hover{border-color:#a98a53;background:linear-gradient(180deg,rgba(78,80,55,.92),rgba(35,41,29,.94));box-shadow:inset 0 1px rgba(242,229,192,.07),inset 3px 0 rgba(207,165,83,.36),0 0 10px rgba(168,126,61,.10)}
.dino-icon{background:radial-gradient(circle,rgba(63,70,51,.88),rgba(10,15,12,.94));box-shadow:inset 0 0 7px rgba(213,190,139,.06),0 0 7px rgba(0,0,0,.62)}
.state{color:#8d8d7a}.marker-tools{border-top-color:rgba(157,133,87,.30)}.marker-tools h3{color:#c6b48f}.marker-tools p{color:#98988a}
.danger-btn{border-color:#806e4b;background:linear-gradient(#5d5a3e,#303324);color:#e2dac7}.danger-btn:hover{border-color:#ad8e56;background:linear-gradient(#747047,#40442d)}
.map-controls{border:1px solid rgba(152,127,78,.72);border-radius:6px;background:linear-gradient(145deg,rgba(16,21,17,.97),rgba(45,49,34,.95));box-shadow:inset 0 0 12px rgba(0,0,0,.42),0 6px 18px rgba(0,0,0,.56)}
.map-controls button{border:1px solid #766b4d;border-radius:4px;background:linear-gradient(#555942,#292f25);color:#e2dcc9}.map-controls button:hover{border-color:#b59255;background:linear-gradient(#717152,#3e4431);color:#fff}
footer{background:linear-gradient(90deg,rgba(7,10,8,.98),rgba(31,38,29,.94) 50%,rgba(7,10,8,.98));border-top:2px solid #987542;color:#d9cbaa;text-shadow:0 2px 3px #000;box-shadow:inset 0 3px 16px rgba(0,0,0,.42)}
footer::after{display:none}

/* V66 – THE ISLE: EVRIMA Testdesign für URZEITFLUCH */
.app{background:#0c1513}
.app::before{background:url('assets/urzeitfluch-evrima-world-v1.png') center center/cover no-repeat;filter:saturate(.76) contrast(1.08) brightness(.68)}
.app::after{background:radial-gradient(ellipse at 50% 47%,rgba(55,91,81,.03),rgba(5,13,12,.12) 64%,rgba(2,7,7,.46) 100%),linear-gradient(180deg,rgba(6,18,18,.12),transparent 22%,transparent 78%,rgba(3,10,10,.32))}
.hero{background:linear-gradient(100deg,rgba(5,13,13,.96),rgba(22,42,38,.80) 56%,rgba(7,17,17,.94));border-bottom:2px solid #708d78;box-shadow:0 8px 28px rgba(0,0,0,.76),inset 0 -10px 24px rgba(0,0,0,.24)}
.hero::before{opacity:.22;background:repeating-linear-gradient(118deg,transparent 0 24px,rgba(183,207,192,.035) 25px 26px);filter:none;mix-blend-mode:normal}
.hero::after{height:1px;bottom:4px;background:linear-gradient(90deg,transparent 2%,rgba(106,143,121,.72) 28%,rgba(190,207,193,.45) 50%,rgba(106,143,121,.72) 72%,transparent 98%);box-shadow:none}
.brand-crest{padding:4px;border:1px solid rgba(107,143,120,.60);border-radius:4px;background:rgba(6,15,14,.80);filter:drop-shadow(0 6px 10px rgba(0,0,0,.46)) grayscale(.42) sepia(.10) hue-rotate(82deg) saturate(.62) brightness(1.02) contrast(1.12);box-shadow:inset 0 0 14px rgba(0,0,0,.58),0 0 0 2px rgba(24,43,36,.72)}
.brand-copy span{color:#91aaa0}.brand-copy h1{color:#e1e2d8;text-shadow:0 2px 3px #000,0 0 15px rgba(111,159,136,.12)}.brand-copy b{color:#7da28d;text-shadow:none}
.server-card{border:1px solid rgba(103,139,118,.56);border-radius:5px;background:linear-gradient(145deg,rgba(11,24,22,.96),rgba(31,51,42,.92));box-shadow:inset 0 0 18px rgba(0,0,0,.44),0 6px 18px rgba(0,0,0,.44)}
.server-copy small,.players{color:#91a69c}.server-card strong{color:#e2e2d7}.server-card strong i{color:#899b91}.server-copy b{color:#65dc83}
.workspace{background:linear-gradient(90deg,rgba(2,9,9,.28),transparent 25%,transparent 75%,rgba(2,9,9,.28))}
.map-shell{border:1px solid #73917c;border-radius:7px;box-shadow:0 0 0 2px #101c19,0 0 0 3px rgba(87,114,96,.34),0 18px 48px rgba(0,0,0,.70),0 0 24px rgba(83,131,107,.14),inset 0 0 26px rgba(0,0,0,.52)}
.legend-dock{border:1px solid rgba(108,141,118,.66);border-radius:7px;background:linear-gradient(150deg,rgba(10,23,21,.97),rgba(35,52,42,.95));box-shadow:inset 0 0 28px rgba(0,0,0,.52),0 15px 38px rgba(0,0,0,.60),0 0 0 2px rgba(17,32,27,.72)}
.legend-dock::before{display:none}.legend-dock::after{display:block;inset:5px;border:1px solid rgba(132,159,139,.16);border-radius:3px;background:none;opacity:1;filter:none;transform:none}
.dock-heading{border-bottom-color:rgba(111,145,122,.34)}.dock-heading h2{font-family:Arial,Helvetica,sans-serif;color:#d2d9cf;text-shadow:none;letter-spacing:.16em}.eyebrow{color:#7f958a}
.legend-item{border:1px solid rgba(103,130,110,.27);border-radius:4px;background:linear-gradient(180deg,rgba(49,68,55,.80),rgba(20,34,29,.90));color:#dce0d7;box-shadow:inset 0 1px rgba(220,235,223,.05),inset 3px 0 rgba(103,150,122,.13),0 2px 4px rgba(0,0,0,.22)}
.legend-item:hover{border-color:#789d83;background:linear-gradient(180deg,rgba(64,88,70,.92),rgba(29,48,39,.94));box-shadow:inset 0 1px rgba(230,240,230,.07),inset 3px 0 rgba(116,177,137,.35),0 0 10px rgba(87,140,105,.10)}
.dino-icon{background:radial-gradient(circle,rgba(52,76,61,.88),rgba(7,19,17,.94));box-shadow:inset 0 0 7px rgba(178,213,190,.05),0 0 7px rgba(0,0,0,.58)}
.state{color:#84988e}.marker-tools{border-top-color:rgba(111,145,122,.30)}.marker-tools h3{font-family:Arial,Helvetica,sans-serif;color:#b6c8bc}.marker-tools p{color:#8fa198}
.danger-btn{border-color:#667c6d;background:linear-gradient(#4b6654,#26382f);color:#dce0d6}.danger-btn:hover{border-color:#80a18b;background:linear-gradient(#617d67,#344b3d)}
.map-controls{border:1px solid rgba(105,139,117,.70);border-radius:5px;background:linear-gradient(145deg,rgba(9,22,21,.96),rgba(34,54,44,.94));box-shadow:inset 0 0 12px rgba(0,0,0,.40),0 6px 18px rgba(0,0,0,.54)}
.map-controls button{border:1px solid #5c7766;border-radius:3px;background:linear-gradient(#496653,#22382f);color:#dce2da}.map-controls button:hover{border-color:#83ad91;background:linear-gradient(#617e68,#34503f);color:#fff}
footer{background:linear-gradient(90deg,rgba(4,12,12,.96),rgba(24,45,38,.90) 50%,rgba(4,12,12,.96));border-top:2px solid #6c8974;color:#c5d2c8;font-family:Arial,Helvetica,sans-serif;text-shadow:0 2px 3px #000;box-shadow:inset 0 3px 16px rgba(0,0,0,.38)}

/* V67 – exklusiver URZEITFLUCH-Rahmen aus Inselbasalt, Fossilien und Knochen */
.app{background:#080b0a}
.app::before{background:url('assets/urzeitfluch-exclusive-frame-v1.png') center center/cover no-repeat;filter:saturate(.78) contrast(1.06) brightness(.78)}
.app::after{background:radial-gradient(ellipse at 50% 47%,rgba(11,57,62,.03),rgba(2,8,8,.08) 62%,rgba(0,3,4,.32) 100%),linear-gradient(180deg,rgba(3,9,9,.08),transparent 20%,transparent 80%,rgba(2,6,6,.20))}
.hero{background:linear-gradient(100deg,rgba(4,7,7,.84),rgba(16,22,19,.58) 55%,rgba(4,7,7,.82));border-bottom:2px solid #867153;box-shadow:0 7px 26px rgba(0,0,0,.74),inset 0 -9px 22px rgba(0,0,0,.22)}
.hero::before{opacity:.16;background:repeating-linear-gradient(118deg,transparent 0 25px,rgba(210,197,163,.04) 26px 27px);filter:none;mix-blend-mode:normal}
.hero::after{height:1px;bottom:4px;background:linear-gradient(90deg,transparent 2%,rgba(133,108,72,.78) 28%,rgba(209,193,153,.48) 50%,rgba(133,108,72,.78) 72%,transparent 98%);box-shadow:0 0 7px rgba(139,111,70,.20)}
.brand-crest{padding:4px;border:1px solid rgba(145,122,84,.68);border-radius:3px;background:rgba(5,9,8,.78);filter:drop-shadow(0 6px 10px rgba(0,0,0,.52)) grayscale(.50) sepia(.27) saturate(.70) brightness(.98) contrast(1.14);box-shadow:inset 0 0 14px rgba(0,0,0,.64),0 0 0 2px rgba(40,34,23,.72)}
.brand-copy span{color:#9d9c8b}.brand-copy h1{color:#e4dcc7;text-shadow:0 2px 3px #000,0 0 15px rgba(176,148,96,.14)}.brand-copy b{color:#b29561}
.server-card{border:1px solid rgba(139,117,80,.62);border-radius:4px;background:linear-gradient(145deg,rgba(8,13,12,.94),rgba(31,35,27,.90));box-shadow:inset 0 0 18px rgba(0,0,0,.50),0 6px 18px rgba(0,0,0,.48)}
.server-copy small,.players{color:#98998c}.server-card strong{color:#e2dbc8}.server-copy b{color:#61d983}
.workspace{background:linear-gradient(90deg,rgba(1,5,5,.18),transparent 24%,transparent 76%,rgba(1,5,5,.18))}
.map-shell{border:1px solid #897354;border-radius:6px;box-shadow:0 0 0 2px #101513,0 0 0 3px rgba(108,92,64,.36),0 18px 48px rgba(0,0,0,.72),0 0 24px rgba(31,117,119,.16),inset 0 0 26px rgba(0,0,0,.54)}
.legend-dock{border:1px solid rgba(151,128,88,.72);border-radius:5px;background:linear-gradient(150deg,rgba(7,12,11,.97),rgba(30,34,26,.95));box-shadow:inset 0 0 30px rgba(0,0,0,.64),0 15px 38px rgba(0,0,0,.66),0 0 0 2px rgba(26,23,16,.76)}
.legend-dock::before{display:block;opacity:.13;background:url('assets/urzeitfluch-exclusive-frame-v1.png') 48% 96%/auto 112% no-repeat;filter:grayscale(.42) sepia(.24) saturate(.55) contrast(1.15) brightness(1.15);mix-blend-mode:screen}
.legend-dock::after{display:block;inset:5px;border:1px solid rgba(181,159,113,.20);border-radius:2px;background:none;opacity:1;filter:none;transform:none}
.dock-heading{border-bottom-color:rgba(149,126,86,.38)}.dock-heading h2{font-family:Georgia,'Times New Roman',serif;color:#d7ccb4;text-shadow:none;letter-spacing:.18em}.eyebrow{color:#898a7d}
.legend-item{border:1px solid rgba(137,122,91,.30);border-radius:3px;background:linear-gradient(180deg,rgba(54,58,43,.84),rgba(19,24,21,.92));color:#dfd8c6;box-shadow:inset 0 1px rgba(229,216,181,.06),inset 3px 0 rgba(166,134,77,.14),0 2px 4px rgba(0,0,0,.25)}
.legend-item:hover{border-color:#9d8152;background:linear-gradient(180deg,rgba(72,73,50,.94),rgba(29,35,28,.95));box-shadow:inset 0 1px rgba(238,225,190,.08),inset 3px 0 rgba(195,154,77,.38),0 0 10px rgba(145,105,50,.10)}
.dino-icon{background:radial-gradient(circle,rgba(60,65,49,.88),rgba(6,13,12,.95));box-shadow:inset 0 0 7px rgba(209,189,143,.06),0 0 7px rgba(0,0,0,.64)}
.state{color:#8c8d80}.marker-tools{border-top-color:rgba(146,124,86,.32)}.marker-tools h3{font-family:Georgia,'Times New Roman',serif;color:#c3b38f}.marker-tools p{color:#97998d}
.danger-btn{border-color:#796848;background:linear-gradient(#57543d,#292f27);color:#dfd7c3}.danger-btn:hover{border-color:#a48755;background:linear-gradient(#6d6847,#394034)}
.map-controls{border:1px solid rgba(142,119,80,.76);border-radius:4px;background:linear-gradient(145deg,rgba(7,13,12,.96),rgba(32,37,28,.94));box-shadow:inset 0 0 12px rgba(0,0,0,.44),0 6px 18px rgba(0,0,0,.58)}
.map-controls button{border:1px solid #6f6348;border-radius:2px;background:linear-gradient(#50543f,#242d27);color:#ded8c7}.map-controls button:hover{border-color:#a78a57;background:linear-gradient(#6a6a4b,#364139);color:#fff}
footer{background:linear-gradient(90deg,rgba(3,7,7,.88),rgba(19,24,19,.70) 50%,rgba(3,7,7,.88));border-top:2px solid #83704f;color:#ded1b4;font-family:Georgia,'Times New Roman',serif;text-shadow:0 2px 3px #000;box-shadow:inset 0 3px 16px rgba(0,0,0,.38)}

/* V68 – Farbabstimmung der Originalkarte auf Basalt, Bronze und Petrol */
.gateway-map{filter:contrast(1.04) saturate(.74) brightness(.94) hue-rotate(-8deg)}
.terrain-light{
  background:
    radial-gradient(circle at 50% 46%,rgba(211,194,151,.035),transparent 43%,rgba(4,17,20,.16) 82%,rgba(0,5,8,.32) 100%),
    linear-gradient(135deg,rgba(147,126,81,.045),transparent 38%,rgba(5,61,67,.035));
  mix-blend-mode:soft-light;
}
.map-shell{border-color:#81765c;box-shadow:0 0 0 2px #101513,0 0 0 3px rgba(81,112,104,.34),0 18px 48px rgba(0,0,0,.72),0 0 24px rgba(36,124,129,.18),inset 0 0 26px rgba(0,0,0,.54)}

/* V69 – großes Dino-Motiv rechts, freie Fläche hinter der Legende */
.app::before{background-image:url('assets/urzeitfluch-exclusive-frame-v2.png')}
.legend-dock::before{background-image:url('assets/urzeitfluch-exclusive-frame-v2.png')}

/* V71 – hervorgehobenes UZF-Wappen */
.brand-crest{
  width:clamp(78px,9vw,118px);
  padding:5px;
  border:1px solid rgba(205,174,113,.86);
  background:linear-gradient(145deg,rgba(20,26,21,.96),rgba(6,12,11,.94));
  filter:drop-shadow(0 7px 11px rgba(0,0,0,.58)) grayscale(.18) sepia(.16) saturate(.88) brightness(1.24) contrast(1.15);
  box-shadow:inset 0 0 16px rgba(0,0,0,.48),0 0 0 2px rgba(61,48,29,.82),0 0 15px rgba(40,141,139,.22);
}

/* V72 – identische Dino-Symbole in Legende und Kartenmarkern */
.marker-dot svg{width:11px;height:11px;display:block;fill:currentColor}
.marker-dot{color:#111b16}
.marker.personal .marker-dot{color:#fff}

/* V73 – größere und kontrastreichere Dino-Symbole */
.legend-item{min-height:38px;grid-template-columns:34px 1fr auto;gap:9px;padding:3px 7px}
.dino-icon{width:32px;height:32px;border-width:2px}
.dino-icon svg{width:22px;height:22px}
.marker{gap:7px}
.marker-dot{width:26px;height:26px;border-width:2px;box-shadow:0 0 0 1px rgba(0,0,0,.55),0 2px 9px rgba(0,0,0,.82)}
.marker-dot svg{width:17px;height:17px}
.marker-label{padding:5px 8px;font-size:10px}
@media(max-width:980px) and (min-width:721px){
  .legend-item{min-height:35px;grid-template-columns:29px 1fr auto;gap:7px}
  .dino-icon{width:28px;height:28px}.dino-icon svg{width:19px;height:19px}
}

/* V74 – zusätzliche Zonen und schaltbare Gebietsnamen */
.layer-heading{margin:5px 2px 3px;color:#a99b7d;font:700 8px/1 Arial,sans-serif;letter-spacing:.16em}
.layer-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.layer-toggle{min-width:0;height:48px;padding:3px 1px;border:1px solid rgba(137,122,91,.34);border-radius:3px;background:linear-gradient(180deg,rgba(54,58,43,.88),rgba(19,24,21,.94));color:#ddd6c3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
.layer-toggle span{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#0b1210;box-shadow:inset 0 0 7px rgba(209,189,143,.08)}
.layer-toggle svg{width:18px;height:18px;fill:currentColor}.layer-toggle b{max-width:100%;overflow:hidden;font:700 7px/1 Arial,sans-serif;letter-spacing:.04em;text-overflow:ellipsis}
.layer-toggle:hover{border-color:#a78a57}.layer-toggle.off{opacity:.4;filter:grayscale(1)}
.map-zone{position:absolute;transform:translate(-50%,-50%) rotate(-5deg);border:2px dashed currentColor;border-radius:48% 52% 43% 57%;pointer-events:none;z-index:2;box-sizing:border-box;opacity:.78}
.map-zone::before{content:"";position:absolute;inset:3px;border:1px solid currentColor;border-radius:inherit;opacity:.35}
.map-zone.patrol{color:#f0ad3e;background:rgba(224,145,31,.12);box-shadow:inset 0 0 22px rgba(236,151,31,.18),0 0 10px rgba(0,0,0,.38)}
.map-zone.protected{color:#75d18a;background:rgba(57,161,91,.13);box-shadow:inset 0 0 22px rgba(68,181,104,.20),0 0 10px rgba(0,0,0,.38)}
.map-zone>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);display:flex;align-items:center;gap:4px;padding:3px 6px;border:1px solid currentColor;border-radius:3px;background:rgba(5,12,11,.84);color:inherit;white-space:nowrap;font:700 7px/1 Arial,sans-serif;letter-spacing:.06em;text-shadow:0 1px 2px #000}
.map-zone svg{width:13px;height:13px;fill:currentColor}
.area-label{position:absolute;z-index:3;transform:translate(-50%,-50%);padding:2px 5px;border:1px solid rgba(220,204,164,.45);border-radius:2px;background:rgba(6,14,14,.68);color:#eee3c8;box-shadow:0 1px 5px rgba(0,0,0,.7);font:700 7px/1.1 Georgia,serif;letter-spacing:.08em;text-align:center;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px #000}
.marker{z-index:5}
@media(max-height:760px){.legend-list{overflow-y:auto;scrollbar-width:thin}.layer-toggle{height:43px}.layer-heading{margin-top:3px}.marker-tools p{display:none}}

/* V75 – ruhige Kartenebenen: bessere Lesbarkeit und weniger Überlagerungen */
.map-zone{z-index:1;opacity:.58;border-width:2px;border-style:solid;background:transparent!important;box-shadow:inset 0 0 18px rgba(0,0,0,.08)!important}
.map-zone::before{inset:5px;border-style:dashed;opacity:.42}
.map-zone>span{display:none}
.map-zone.patrol{color:#f0ad3e}.map-zone.protected{color:#71d18a}
.area-label{z-index:3;max-width:105px;padding:4px 7px;border:1px solid rgba(232,216,174,.72);background:rgba(3,10,11,.88);color:#fff0c8;box-shadow:0 2px 8px rgba(0,0,0,.9),inset 0 0 8px rgba(181,151,87,.12);font:700 9px/1.15 Arial,sans-serif;letter-spacing:.07em;white-space:normal;text-shadow:0 1px 2px #000,0 0 4px #000}
.area-names-on .marker-label{opacity:0;visibility:hidden;transform:translateX(-4px);transition:opacity .14s ease,transform .14s ease,visibility .14s}
.area-names-on .marker:hover .marker-label{opacity:1;visibility:visible;transform:translateX(0)}
.area-names-on .marker-dot{box-shadow:0 0 0 1px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.88)}

/* V77 – eindeutige Gebietszeiger an allen Namen */
.area-label::after{content:"";position:absolute;left:50%;width:1px;height:11px;transform:translateX(-50%);background:linear-gradient(#ead18f,#9a7335);box-shadow:0 0 3px rgba(0,0,0,.95),0 0 4px rgba(222,183,99,.4)}
.area-label::before{content:"";position:absolute;left:50%;width:5px;height:5px;transform:translateX(-50%);border-radius:50%;background:#efd697;border:1px solid #33240e;box-shadow:0 0 4px #000}
.area-label.stem-down::after{top:100%}.area-label.stem-down::before{top:calc(100% + 9px)}
.area-label.stem-up::after{bottom:100%}.area-label.stem-up::before{bottom:calc(100% + 9px)}

/* V79 – sechs echte Gateway-Sanctuary-Standorte statt zweier Beispielzonen */
.map-zone.protected{border-width:2px;opacity:.88;background:radial-gradient(circle,rgba(82,211,119,.18),rgba(82,211,119,.04) 62%,transparent 64%)!important;box-shadow:0 0 8px rgba(61,213,107,.34),inset 0 0 10px rgba(67,205,106,.20)!important}
.map-zone.protected::before{inset:3px;border-style:dotted;opacity:.65}

/* V80 – vollständige datengestützte Ebene mit 60 möglichen Patrouillenzonen */
.patrol-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:hidden}
.patrol-layer circle,.patrol-layer polygon{fill:rgba(239,153,47,.055);stroke:rgba(247,174,66,.72);stroke-width:1.6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.patrol-layer circle{stroke-dasharray:3 2}

/* V81 – stärkere Zonenkontraste bei unveränderter Größe */
.patrol-layer circle,.patrol-layer polygon{
  fill:rgba(235,143,31,.14);
  stroke:rgba(255,190,72,.98);
  stroke-width:2.4;
  filter:drop-shadow(0 0 2px rgba(0,0,0,1)) drop-shadow(0 0 3px rgba(241,157,39,.62));
}
.patrol-layer circle{stroke-dasharray:4 2}
.map-zone.protected{
  opacity:1;
  border:3px solid #79e79a;
  background:radial-gradient(circle,rgba(67,214,112,.34),rgba(43,173,86,.18) 58%,rgba(32,137,70,.08) 72%,transparent 74%)!important;
  box-shadow:0 0 0 1px rgba(4,18,11,.92),0 0 10px rgba(76,232,123,.72),inset 0 0 12px rgba(92,238,137,.38)!important;
}
.map-zone.protected::before{inset:3px;border:2px dashed rgba(188,255,205,.82);opacity:.9}
.marker.danger .marker-dot{
  border:3px solid #e8b4ff;
  box-shadow:0 0 0 2px rgba(80,12,94,.92),0 0 13px rgba(194,74,233,.96),0 2px 9px rgba(0,0,0,.9);
}

/* V88 – feste Gefahrenzone als roter Warnkreis bei „Die Grube“ */
.map-zone.danger{z-index:2;opacity:1;transform:translate(-50%,-50%);border:3px solid #ff4b42;border-radius:50%;background:radial-gradient(circle,rgba(255,48,40,.32),rgba(201,24,24,.17) 58%,rgba(126,8,11,.08) 72%,transparent 74%)!important;box-shadow:0 0 0 2px rgba(61,0,3,.9),0 0 13px rgba(255,52,43,.88),inset 0 0 15px rgba(255,75,60,.42)!important}
.map-zone.danger::before{inset:4px;border:2px dashed rgba(255,213,189,.92);border-radius:50%;opacity:1}

/* V82 – echte Babyzonen, Hafen-RP und offizielle Wasserstellen */
.marker.baby .marker-dot{box-shadow:0 0 0 2px rgba(74,19,58,.9),0 0 10px rgba(237,112,190,.78),0 2px 8px rgba(0,0,0,.86)}
.marker.rp .marker-dot{box-shadow:0 0 0 2px rgba(9,64,59,.9),0 0 11px rgba(54,211,194,.78),0 2px 8px rgba(0,0,0,.86)}
.marker.water .marker-dot{border-color:#b9f4ff;box-shadow:0 0 0 1px rgba(1,47,61,.94),0 0 9px rgba(39,205,236,.72),0 2px 7px rgba(0,0,0,.84)}

/* V83 – alte Markerplaketten niemals dauerhaft anzeigen */
.marker-label{opacity:0;visibility:hidden;transform:translateX(-4px);transition:opacity .14s ease,transform .14s ease,visibility .14s}
.marker:hover .marker-label{opacity:1;visibility:visible;transform:translateX(0)}

/* Dasselbe Markenlogo wie auf der Hauptseite. */
.brand .brand-crest{
  width:auto;
  height:clamp(72px,10vh,102px);
  max-width:min(48vw,620px);
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  object-fit:contain;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.72));
}
.brand .brand-main-logo{
  flex:none;
}
.brand .brand-copy{display:none}

/* Desktop-Einbettung: Karte links, Legende direkt am Rand, Dino rechts frei. */
@media(min-width:981px){
  .workspace{
    display:grid;
    grid-template-columns:clamp(210px,17vw,232px) auto;
    column-gap:clamp(12px,1.2vw,20px);
    place-items:center start;
    justify-content:start;
    padding:12px clamp(24px,3vw,58px);
  }
  .legend-dock{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    grid-column:1;
    grid-row:1;
    width:clamp(210px,17vw,232px);
    max-height:calc(100% - 20px);
  }
  .map-shell{
    grid-column:2;
    grid-row:1;
    width:min(57vw,1080px,calc((100vh - clamp(92px,14vh,132px) - clamp(44px,7vh,64px) - 24px)*1.6));
    max-width:1080px;
  }
}