@import url("/assets/v48.css?v=2");

/* V49.5: sichtbare Baugrundflaechen, Platzierung direkt am Finger und ein
   bedienbarer Katalog fuer die ersten Siedlungsassets. */
.placement-hud[hidden],.storage-plot[hidden],.workshop-building[hidden],.building-catalog[hidden],
.catalog-plot[hidden],.catalog-building[hidden],.catalog-close[hidden]{display:none!important}

.storage-plot,.workshop-plot,.workshop-foundation,.workshop-building,.catalog-plot,.catalog-building{
  width:166px;height:137px;
}
.storage-plot,.catalog-plot{
  position:absolute;z-index:17;left:var(--v47-workshop-x,72%);top:var(--v47-workshop-y,68%);
  transform:translate(-50%,-50%);border:0;background:transparent;color:#efffff;text-align:center;
  filter:drop-shadow(0 11px 17px rgba(0,0,0,.72));pointer-events:none
}
.workshop-building,.catalog-building{
  position:absolute;z-index:18;left:var(--v47-workshop-x,76%);top:var(--v47-workshop-y,72%);
  transform:translate(-50%,-58%);border:0;background:transparent;color:#efffff;text-align:center;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.74));
}
.workshop-building,.catalog-building{padding:0;appearance:none;cursor:pointer}
.workshop-building[data-selected="true"],.building--storage[data-selected="true"],.catalog-building[data-selected="true"]{
  outline:1px solid rgba(140,242,226,.82);outline-offset:5px;border-radius:18px;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.76)) drop-shadow(0 0 10px rgba(86,225,212,.72))
}
.placement-grid{
  position:absolute;z-index:0;left:50%;top:57px;display:grid;
  grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px);gap:2px;
  transform:translate(-50%,-50%) rotateX(62deg) rotateZ(45deg);
  transform-style:preserve-3d;filter:drop-shadow(0 6px 8px rgba(0,0,0,.56));
}
.placement-grid i{
  display:block;border:1px solid rgba(129,229,218,.82);border-radius:2px;
  background:rgba(44,180,169,.18);box-shadow:inset 0 0 10px rgba(77,224,209,.13);
}
.placement-grid--2x1{top:64px;grid-template-columns:repeat(2,36px);grid-template-rows:34px}
.storage-plot[data-v48-preview="free"] .placement-grid i,
.workshop-plot[data-v48-preview="free"] .placement-grid i,
.catalog-plot[data-v48-preview="free"] .placement-grid i{
  border-color:rgba(143,246,217,.94);background:rgba(60,206,160,.25);
  box-shadow:0 0 7px rgba(73,224,176,.18),inset 0 0 10px rgba(91,235,198,.18)
}
.storage-plot[data-v48-preview="blocked"] .placement-grid i,
.workshop-plot[data-v48-preview="blocked"] .placement-grid i,
.catalog-plot[data-v48-preview="blocked"] .placement-grid i{
  border-color:rgba(246,128,116,.94);background:rgba(176,56,48,.28);
  box-shadow:0 0 6px rgba(225,79,69,.15),inset 0 0 9px rgba(225,79,69,.17)
}
.placement-grid--fixed i{border-color:rgba(106,177,176,.54);background:rgba(23,79,81,.22)}
.workshop-plot__mark{display:none}

.workshop-ghost{
  position:absolute;z-index:1;left:50%;top:1px;width:152px;height:110px;overflow:hidden;
  transform:translateX(-50%) scale(.76);transform-origin:50% 72%;opacity:.48;
  mix-blend-mode:screen;filter:saturate(.72) hue-rotate(118deg) drop-shadow(0 8px 7px rgba(0,0,0,.55));
}
.storage-ghost{
  position:absolute;z-index:1;left:50%;top:-10px;width:136px;height:112px;
  transform:translateX(-50%) scale(.78);transform-origin:50% 78%;opacity:.48;
  filter:saturate(.78) drop-shadow(0 9px 8px rgba(0,0,0,.62));pointer-events:none
}
.storage-ghost img{display:block;width:100%;height:100%;object-fit:contain}
.storage-plot[data-v48-preview="blocked"] .storage-ghost{filter:grayscale(.5) sepia(.24) hue-rotate(300deg) saturate(1.2);opacity:.34}
.workshop-ghost img,.building-concept--workshop img{
  position:absolute;left:-360px;top:0;width:512px;height:341px;max-width:none;
}
.workshop-plot[data-v48-preview="blocked"] .workshop-ghost{filter:grayscale(.55) sepia(.28) hue-rotate(300deg) saturate(1.25);opacity:.34}
.catalog-ghost{left:50%;top:0;width:152px;height:108px;transform:translateX(-50%) scale(.78);transform-origin:50% 76%;opacity:.46;filter:saturate(.72) hue-rotate(105deg) drop-shadow(0 8px 7px rgba(0,0,0,.58))}
.catalog-plot--collector .catalog-ghost img{left:-286px;top:0;width:422px;height:282px}
.catalog-plot--wall .catalog-ghost{top:9px;height:86px}
.catalog-plot--wall .catalog-ghost img{left:-305px;top:-9px;width:438px;height:218px}
.catalog-plot[data-v48-preview="blocked"] .catalog-ghost{filter:grayscale(.6) sepia(.28) hue-rotate(300deg) saturate(1.2);opacity:.32}
.storage-plot b,.storage-plot small,.workshop-plot b,.workshop-foundation b,.workshop-plot small,.workshop-foundation small,
.catalog-plot b,.catalog-plot small{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;text-shadow:0 2px 8px #000}
.storage-plot b,.workshop-plot b,.workshop-foundation b,.catalog-plot b{top:105px;font-size:12px}
.storage-plot small,.workshop-plot small,.workshop-foundation small,.catalog-plot small{top:121px;color:#8bd0cc;font-size:7px;letter-spacing:.1em}

.placement-hud{
  position:absolute;z-index:46;right:max(18px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));
  display:grid;grid-template-columns:110px 92px minmax(112px,1fr) auto;gap:7px;align-items:stretch;
  box-sizing:border-box;padding:8px;border:1px solid rgba(116,211,207,.42);border-radius:14px;
  background:linear-gradient(145deg,rgba(3,15,21,.975),rgba(7,31,34,.96));
  color:#efffff;box-shadow:0 18px 46px rgba(0,0,0,.58);backdrop-filter:blur(13px)
}
.placement-hud>span{display:flex;min-height:38px;padding:5px 9px;box-sizing:border-box;flex-direction:column;justify-content:center;border:1px solid rgba(128,210,207,.14);border-radius:8px;background:rgba(2,11,15,.4)}
.placement-hud small{color:#7abfbd;font-size:7px;letter-spacing:.12em}.placement-hud b{margin-top:2px;font-size:11px;line-height:1.08}
#placementState[data-state="free"]{color:#9cf3d4}#placementState[data-state="blocked"]{color:#f1a79d}
.placement-hud button{min-height:38px;padding:7px 14px;border-radius:999px;font-size:10px;font-weight:820;cursor:pointer}
#placementConfirm{border:1px solid rgba(164,237,229,.46);background:linear-gradient(135deg,#b6ebd9,#73c7ca);color:#06171b}
#placementConfirm:disabled{border-color:rgba(230,126,115,.38);background:rgba(103,46,43,.75);color:#efb3ad;cursor:not-allowed}
#placementCancel{border:1px solid rgba(142,194,195,.23);background:rgba(4,19,24,.8);color:#a9d2d0}

.workshop-result>button{
  width:100%;min-height:42px;margin-top:9px;padding:9px 14px;border:1px solid rgba(164,237,229,.46);
  border-radius:999px;background:linear-gradient(135deg,#b6ebd9,#73c7ca);color:#06171b;
  font-size:11px;font-weight:820;cursor:pointer
}
.workshop-result>button:disabled{opacity:.55;cursor:wait}
.workshop-foundation[data-build-state="supply"]{animation:v49-foundation-supply .9s ease-in-out infinite alternate}
.workshop-foundation[data-build-state="building"] .workshop-foundation__base{animation:v49-build-pulse .55s ease-in-out infinite alternate}

.building-concept{position:absolute;display:block;overflow:hidden;mix-blend-mode:screen;pointer-events:none}
.building-concept--workshop{left:50%;top:0;width:152px;height:110px;transform:translateX(-50%);filter:drop-shadow(0 9px 8px rgba(0,0,0,.68))}
.building-ground-shadow{position:absolute;z-index:-1;left:50%;top:88px;width:116px;height:30px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.78),rgba(0,0,0,.24) 60%,transparent 74%);filter:blur(2px)}
.workshop-building>b,.workshop-building>small,.catalog-building>b,.catalog-building>small{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;text-shadow:0 2px 8px #000}
.workshop-building>b,.catalog-building>b{top:105px;font-size:12px}.workshop-building>small,.catalog-building>small{top:121px;color:#8bd0cc;font-size:7px;letter-spacing:.1em}
.catalog-building--collector .building-concept--collector{left:50%;top:0;width:152px;height:110px;transform:translateX(-50%);filter:drop-shadow(0 9px 8px rgba(0,0,0,.68))}
.catalog-building--collector .building-concept--collector img{left:-286px;top:0;width:422px;height:282px}
.catalog-building--wall{width:132px;height:104px;transform:translate(-50%,-56%)}
.catalog-building--wall .building-concept--wall{left:50%;top:4px;width:126px;height:76px;transform:translateX(-50%);filter:drop-shadow(0 8px 7px rgba(0,0,0,.68))}
.catalog-building--wall .building-concept--wall img{left:-290px;top:-8px;width:418px;height:208px}
.catalog-building--wall .building-ground-shadow{top:65px;width:94px;height:20px}
.catalog-building--wall>b{top:76px;font-size:10px}.catalog-building--wall>small{top:89px;font-size:6px}

.building-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:9px}
.building-catalog>button{position:relative;min-height:68px;padding:7px 66px 7px 116px;box-sizing:border-box;border:1px solid rgba(128,210,207,.2);border-radius:10px;background:rgba(2,11,15,.48);color:#efffff;text-align:left;cursor:pointer}
.building-catalog>button:hover,.building-catalog>button:focus-visible{border-color:rgba(137,235,221,.6);background:rgba(15,52,54,.7);outline:none}
.building-catalog>button>b,.building-catalog>button>small,.building-catalog>button>strong{display:block}.building-catalog>button>b{margin-top:8px;font-size:11px}.building-catalog>button>small{margin-top:3px;color:#88cac7;font-size:7px;letter-spacing:.08em}.building-catalog>button>strong{position:absolute;right:9px;top:24px;color:#b8eee0;font-size:9px}
.building-catalog>button:disabled{opacity:.46;cursor:not-allowed}.building-catalog>button[data-catalog-state="built"]{opacity:.72;border-color:rgba(98,222,168,.38)}
.building-catalog__image{left:4px;top:3px;width:108px;height:59px;filter:drop-shadow(0 5px 5px rgba(0,0,0,.6))}
.building-concept--collector img{position:absolute;left:-210px;top:0;width:310px;height:207px;max-width:none}
.building-concept--wall img{position:absolute;left:-247px;top:-7px;width:355px;height:177px;max-width:none}

@keyframes v49-foundation-supply{from{filter:drop-shadow(0 10px 16px rgba(0,0,0,.7))}to{filter:drop-shadow(0 10px 19px rgba(72,223,207,.42))}}
@keyframes v49-build-pulse{from{transform:translateX(-50%) scale(.96);filter:brightness(.82)}to{transform:translateX(-50%) scale(1.04);filter:brightness(1.35)}}

@media (max-height:430px){
  .placement-hud{right:12px;bottom:8px;grid-template-columns:98px 78px 104px auto;padding:6px}
  .placement-hud>span{min-height:34px}.placement-hud button{min-height:34px;padding:6px 10px}
  .workshop-result{max-height:48vh;overflow:auto}.building-catalog>button{min-height:56px;padding-left:96px}.building-catalog__image{width:88px;height:50px}
}
@media (max-width:760px){
  .placement-hud{left:10px;right:10px;grid-template-columns:1fr 1fr}.placement-hud button{width:100%}
  .building-catalog{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.workshop-foundation[data-build-state]{animation:none}.workshop-foundation[data-build-state] .workshop-foundation__base{animation:none}}