:root{
  --bg0:#060913;
  --bg1:#0a1422;
  --panel:rgba(8,12,24,0.72);
  --panel2:rgba(8,12,24,0.55);
  --border:rgba(160,190,255,0.18);
  --border2:rgba(160,190,255,0.12);
  --text:#eaf1ff;
  --muted:rgba(234,241,255,0.68);
  --cyan:#6fbaff;
  --amber:#d4a35a;
  --danger:#b44a4a;
  --shadow:0 20px 60px rgba(0,0,0,0.55);
  --r:24px;
  --r2:18px;

  /* Global UI scale (keeps mobile spacing closer to the original prototype) */
  --su-scale: 0.86;
}

/* Per-page overrides */
body.page-home{
  --su-scale: 0.82;
}

/* ------------------------------
   START SCREEN: name/world title readability
------------------------------ */
#playerName,
#worldName{
  color: var(--text);
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
}

/* ------------------------------
   Reusable "cut-corner" big buttons (used in Start settings popup)
   (Index had a scoped version; this makes it reusable.)
------------------------------ */
.big-btn{
  position: relative;
  width: 100%;
  height: 74px;
  border: 1px solid rgba(160,190,255,0.22);
  background: rgba(8,12,24,0.65);
  color: var(--text);
  font-weight: 700;
  letter-spacing: .6px;
  border-radius: 18px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
}
.big-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  pointer-events:none;
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.big-btn:active{
  transform: translateY(1px);
}
.big-btn.is-ghost{
  background: rgba(8,12,24,0.50);
}

/* ------------------------------
   START SCREEN: settings popup
------------------------------ */
.su-menu-modal{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(6px);
}
.su-menu-modal[aria-hidden="true"]{ display:none; }

.su-menu-panel{
  width: min(560px, 92vw);
  padding: 22px 18px 18px;
  border-radius: 26px;
  background: rgba(8,12,24,0.78);
  border: 1px solid rgba(160,190,255,0.18);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

.su-menu-stack{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.su-menu-stack .big-btn{
  font-size: 22px;
}
*{box-sizing:border-box}
html,body{height:100%;}
body.alpha{
  margin:0;
  background: radial-gradient(1200px 900px at 50% 0%, #0f1e35 0%, var(--bg0) 55%, #03040a 100%);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  overflow:hidden;
}

/* Background */
.bg{
  position:fixed;
  inset:0;
  background-size:cover;
  background-position:center;
  filter: saturate(0.95) contrast(1.04);
  transform:scale(1.03);
  /* Never block taps/clicks on mobile */
  pointer-events:none;
}
.veil{
  position:fixed;
  inset:0;
  background:
    radial-gradient(1200px 700px at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.38) 65%, rgba(0,0,0,0.65) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
  /* Never block taps/clicks on mobile */
  pointer-events:none;
}

/* Generic page container (some pages use this instead of the old "boot" wrapper) */
.alpha-shell{ position:relative; min-height:100%; }

/* Scrollable content area for pages that use <main class="page"> while body is overflow:hidden */
.page{
  position:fixed;
  left:0; right:0;
  top:72px; /* below .topbar */
  bottom:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:16px;
  padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px));
}

/* Optional spacing helpers used by base.html */
.page__panel{ margin-top:0; }
.page__h{ margin:0 0 6px; font-size:46px; line-height:1; letter-spacing:0.01em; }
.page__p{ margin:0 0 14px; color:var(--muted); font-weight:600; }
.page__actions{ margin-top:16px; }

@media (max-height:740px){
  .page{ padding:12px; }
  .page__h{ font-size:38px; }
}

/* Load screen baseline layout */
.screen-load{
  position:relative;
  min-height:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top: max(72px, calc(env(safe-area-inset-top) + 16px));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* Boot */
.boot{position:fixed; inset:0; display:grid; place-items:center; padding:18px;}
.boot__card{width:min(520px, 100%); background:var(--panel); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:22px; text-align:center;}
.boot__title{font-size:22px; font-weight:800; letter-spacing:0.08em;}
.boot__sub{margin-top:8px; color:var(--muted);}
.boot__spinner{width:36px; height:36px; border:2px solid var(--border2); border-top-color:var(--cyan); border-radius:50%; margin:16px auto 0; animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* Top bar */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:72px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:20;
  pointer-events:none;
}
.topbar > *{pointer-events:auto;}
.topbar .top-left, .topbar .top-right{display:flex; gap:10px; align-items:center;}
.iconbtn{
  width:44px; height:44px;
  border-radius:14px;
  background:var(--panel2);
  border:1px solid var(--border);
  color:var(--text);
  display:grid;
  place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

/* Smaller icon button (used e.g. for building info) */
.iconbtn--sm{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  font-size: 18px;
  line-height: 1;
}

.iconbtn--sm b,
.iconbtn--sm span{
  transform: translateY(-1px);
}
.iconbtn:active{transform:translateY(1px)}
.help{
  min-width:calc(150px * var(--su-scale));
  height:calc(46px * var(--su-scale));
  padding:0 calc(16px * var(--su-scale));
  border-radius:calc(20px * var(--su-scale));
  background:linear-gradient(to bottom, rgba(10,16,34,0.72), rgba(10,16,34,0.55));
  border:1px solid var(--border);
  color:var(--text);
  font-weight:700;
  letter-spacing:0.02em;
  box-shadow:0 12px 40px rgba(0,0,0,0.35);
}
.pill{
  height:calc(46px * var(--su-scale));
  padding:0 calc(14px * var(--su-scale));
  border-radius:calc(22px * var(--su-scale));
  background:var(--panel2);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:calc(10px * var(--su-scale));
}
.pill, a.pill{
  color:var(--text);
  text-decoration:none;
}
a.pill:visited{color:var(--text);}
.pill:active{transform:translateY(1px);}

/* Small top-corner helpers (used by character_load page) */
.corner{
  position:fixed;
  top:calc(env(safe-area-inset-top) + 14px);
  z-index:40;
}
.corner--left{left:14px;}
.corner--right{right:14px;}
.pill .k{color:var(--muted); font-size:12px;}
.pill .v{font-weight:800;}

/* Side docks */
.dock-l, .dock-r{
  position:fixed;
  top:calc(92px * var(--su-scale));
  bottom:calc(92px * var(--su-scale));
  width:calc(74px * var(--su-scale));
  display:flex;
  flex-direction:column;
  gap:calc(14px * var(--su-scale));
  z-index:10;
}
.dock-l{left:calc(10px * var(--su-scale));}
.dock-r{right:calc(10px * var(--su-scale));}
.dockbtn{
  width:calc(74px * var(--su-scale));
  height:calc(74px * var(--su-scale));
  border-radius:999px;
  background:rgba(8,12,24,0.38);
  border:1px solid rgba(160,190,255,0.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(6px * var(--su-scale));
  color:var(--text);
  text-decoration:none;
  box-shadow:0 16px 40px rgba(0,0,0,0.38);
  backdrop-filter: blur(10px);
/* Startseite: Menü-Karte etwas weiter nach unten schieben (Browser wirkt sonst zu „mittig“). */
body.su-homepage .home-card{
  transform: translateY(clamp(0px, 6vh, calc(80px * var(--su-scale))));
}
@media (max-height: 720px){
  body.su-homepage .home-card{
    transform: translateY(clamp(0px, 4vh, calc(48px * var(--su-scale))));
  }
}

}
.dockbtn svg{width:calc(22px * var(--su-scale)); height:calc(22px * var(--su-scale)); opacity:0.95;}
.dockbtn span{font-size:calc(11px * var(--su-scale)); color:var(--muted); font-weight:700;}
.dockbtn.active{outline:2px solid rgba(111,186,255,0.35);}
.dockbtn:active{transform:translateY(1px)}

/* Bottom resource bar */
.dock-b{
  position:fixed;
  left:0; right:0; bottom:0;
  height:calc(74px * var(--su-scale));
  padding:calc(10px * var(--su-scale)) calc(12px * var(--su-scale));
  display:flex;
  gap:calc(10px * var(--su-scale));
  align-items:center;
  justify-content:space-between;
  z-index:15;
}
.resbar{
  flex:1;
  display:flex;
  gap:calc(12px * var(--su-scale));
  overflow:auto;
  padding:calc(8px * var(--su-scale));
  border-radius:calc(22px * var(--su-scale));
  background:rgba(8,12,24,0.42);
  border:1px solid var(--border2);
  backdrop-filter: blur(10px);
/* Startseite: Menü-Karte etwas weiter nach unten schieben (Browser wirkt sonst zu „mittig“). */
body.su-homepage .home-card{
  transform: translateY(clamp(0px, 6vh, calc(80px * var(--su-scale))));
}
@media (max-height: 720px){
  body.su-homepage .home-card{
    transform: translateY(clamp(0px, 4vh, calc(48px * var(--su-scale))));
  }
}

}
.res{
  min-width:calc(108px * var(--su-scale));
  display:flex;
  align-items:center;
  gap:calc(10px * var(--su-scale));
  padding:calc(8px * var(--su-scale)) calc(10px * var(--su-scale));
  border-radius:calc(18px * var(--su-scale));
  background:rgba(8,12,24,0.52);
  border:1px solid rgba(160,190,255,0.10);
}
.res .dot{width:calc(10px * var(--su-scale)); height:calc(10px * var(--su-scale)); border-radius:999px; background:var(--cyan); box-shadow:0 0 0 calc(3px * var(--su-scale)) rgba(111,186,255,0.14);}
.res .lbl{font-size:calc(12px * var(--su-scale)); color:var(--muted); font-weight:800; letter-spacing:0.02em;}
.res .val{font-size:calc(13px * var(--su-scale)); font-weight:900;}

/* Main content */
.home-main{
  position:fixed;
  top:calc(86px * var(--su-scale));
  left:calc(98px * var(--su-scale));
  right:calc(98px * var(--su-scale));
  bottom:calc(92px * var(--su-scale));
  display:flex;
  align-items:center;
  justify-content:center;
}
.home-card{
  width:min(calc(520px * var(--su-scale)), 100%);
  border-radius:calc(var(--r) * var(--su-scale));
  background:linear-gradient(to bottom, rgba(8,12,24,0.62), rgba(8,12,24,0.38));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:calc(16px * var(--su-scale));
  backdrop-filter: blur(10px);
/* Startseite: Menü-Karte etwas weiter nach unten schieben (Browser wirkt sonst zu „mittig“). */
body.su-homepage .home-card{
  transform: translateY(clamp(0px, 6vh, calc(80px * var(--su-scale))));
}
@media (max-height: 720px){
  body.su-homepage .home-card{
    transform: translateY(clamp(0px, 4vh, calc(48px * var(--su-scale))));
  }
}

}
.h-title{font-size:calc(22px * var(--su-scale)); font-weight:900; margin:0;}
.h-sub{margin:calc(4px * var(--su-scale)) 0 0; color:var(--muted); font-size:calc(14px * var(--su-scale));}
.primaryActions{margin-top:calc(12px * var(--su-scale)); display:flex; flex-direction:column; gap:calc(10px * var(--su-scale));}
.action{
  width:100%;
  padding:calc(12px * var(--su-scale)) calc(12px * var(--su-scale));
  border-radius:calc(20px * var(--su-scale));
  background:rgba(8,12,24,0.55);
  border:1px solid rgba(160,190,255,0.14);
  color:var(--text);
  font-size:calc(14px * var(--su-scale));
  font-weight:800;
  letter-spacing:0.02em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(10px * var(--su-scale));
  text-decoration:none;
}
.action.disabled{opacity:0.55; filter:saturate(0.5);}
.action:active{transform:translateY(1px)}

.row{display:flex; gap:calc(12px * var(--su-scale));}
.row .action{flex:1;}

/* Panels */
.panel{
  width:min(620px, 100%);
  margin:0 auto;
  padding:18px;
  border-radius:var(--r);
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
/* Startseite: Menü-Karte etwas weiter nach unten schieben (Browser wirkt sonst zu „mittig“). */
body.su-homepage .home-card{
  transform: translateY(clamp(0px, 6vh, calc(80px * var(--su-scale))));
}
@media (max-height: 720px){
  body.su-homepage .home-card{
    transform: translateY(clamp(0px, 4vh, calc(48px * var(--su-scale))));
  }
}

}
.field{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.label{color:var(--muted); font-weight:800; font-size:12px; letter-spacing:0.02em;}
.input{
  width:100%;
  border-radius:18px;
  border:1px solid rgba(160,190,255,0.16);
  background:rgba(8,12,24,0.55);
  padding:14px 14px;
  color:var(--text);
  font-size:16px;
  outline:none;
}
.input:focus{border-color:rgba(111,186,255,0.55); box-shadow:0 0 0 4px rgba(111,186,255,0.12);}

.btn{
  height:52px;
  padding:0 18px;
  border-radius:20px;
  border:1px solid rgba(111,186,255,0.35);
  background:rgba(8,12,24,0.58);
  color:var(--text);
  font-weight:900;
  letter-spacing:0.02em;
}
.btn.primary{background:linear-gradient(to bottom, rgba(111,186,255,0.22), rgba(8,12,24,0.58));}
.btn:active{transform:translateY(1px)}
.btn.small{height:44px; border-radius:18px;}

/* Modals */
.modal{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  /* Muss über HUD/Sidebars und Settings-Overlay liegen */
  z-index:1300;
}
.modal.on{display:grid;}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.62); backdrop-filter:blur(2px);}
.modal__card{
  position:relative;
  width:min(720px, calc(100% - 24px));
  max-height:calc(100% - 30px);
  overflow:auto;
  border-radius:var(--r);
  background:rgba(8,12,24,0.85);
  color:var(--text);
  border:1px solid rgba(160,190,255,0.16);
  box-shadow:var(--shadow);
  padding:18px;
}
.modal__title{font-size:22px; font-weight:900; margin:0 0 8px;}
.modal__close{position:absolute; top:14px; right:14px;}
.modal__body{margin-top:10px; white-space: pre-line;}

/* Restore (Export/Import) */
.restore-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.restore-actions input[type="file"]{display:none;}
.restore-opt{display:flex; gap:10px; align-items:center; margin-top:12px; color:rgba(225,235,255,0.85);}
.restore-opt input{width:18px; height:18px;}
.restore-log{
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  background:rgba(8,12,24,0.55);
  border:1px solid rgba(160,190,255,0.14);
  color:rgba(230,240,255,0.92);
  font-size:13px;
  line-height:1.35;
  max-height:240px;
  overflow:auto;
}

/* Modal variant: Character Load (match screenshot: tall frosted panel, no title bar) */
.modal.variant-charload .modal__title{display:none;}
.modal.variant-charload .modal__close{display:none;}
.modal.variant-charload .modal__card{
  width:min(720px, calc(100% - 28px));
  min-height:70vh;
  max-height:82vh;
  padding:20px 18px 22px;
  background:rgba(8,12,24,0.78);
  backdrop-filter:blur(6px);
}

.charload-popup{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:18px;
}
.charload-list{
  width:100%;
  max-width:560px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.charload-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
}
.trash-btn{
  width:56px;
  height:56px;
  border-radius:18px;
  background:rgba(8,12,24,0.55);
  border:1px solid rgba(160,190,255,0.16);
  box-shadow:0 10px 26px rgba(0,0,0,0.35);
  display:grid;
  place-items:center;
}
.trash-btn svg{width:22px; height:22px; fill:#e17979;}

.charpick-btn{
  flex:1;
  min-height:56px;
  border-radius:20px;
  padding:18px 16px;
  text-align:center;
  font-size:20px;
  font-weight:900;
  line-height:1.1;
  background:rgba(8,12,24,0.45);
  border:1px solid rgba(160,190,255,0.16);
  box-shadow:0 10px 26px rgba(0,0,0,0.35);
  color:var(--text);
}
.charpick-btn:active{transform:translateY(1px)}

.charload-cancel{
  width:min(320px, 70%);
  min-height:56px;
  border-radius:20px;
  font-size:18px;
}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:92px;
  padding:10px 12px;
  border-radius:18px;
  background:rgba(8,12,24,0.82);
  border:1px solid rgba(160,190,255,0.16);
  color:var(--text);
  font-weight:800;
  z-index:80;
  box-shadow:0 14px 40px rgba(0,0,0,0.45);
  display:none;
}
.toast.on{display:block;}

/* Create page layout */
.createWrap{
  position:fixed;
  top:86px;
  left:14px;
  right:14px;
  bottom:24px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:auto;
  padding-bottom:16px;
}
.portraitBox{margin-top:10px; display:grid; place-items:center; height:220px; border-radius:var(--r); border:1px solid rgba(160,190,255,0.12); background:rgba(8,12,24,0.35); overflow:hidden;}
.portraitBox .ph{width:100%; height:100%; background-size:cover; background-position:center; filter:saturate(0.95);}
.portraitNav{display:flex; justify-content:space-between; margin-top:10px; gap:12px;}

/* Responsive tweaks */
@media (max-width:420px){
  .dock-l,.dock-r{width:68px;}
  .dockbtn{width:68px; height:68px;}
  .home-main{left:88px; right:88px;}
  .res{min-width:98px;}
}

/* ------------------------------------------------------------
   Hub layout ("Space Opera"-style start page)
------------------------------------------------------------- */

.dock{
  position: fixed;
  top: calc(86px + env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 50;
  padding: 10px;
}
.dock-left{ left: calc(8px + env(safe-area-inset-left)); }
.dock-right{ right: calc(8px + env(safe-area-inset-right)); }

.dock-btn{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 1px solid rgba(160,190,255,0.22);
  background: rgba(8,12,24,0.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 18px 36px rgba(0,0,0,0.45);
  display: grid;
  place-items: center;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.dock-btn:active{ transform: translateY(1px); }
.dock-btn svg{ opacity: 0.95; }

.hubTop{
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
}
.hubPill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(8,12,24,0.55);
  border: 1px solid rgba(160,190,255,0.18);
  backdrop-filter: blur(10px);
/* Startseite: Menü-Karte etwas weiter nach unten schieben (Browser wirkt sonst zu „mittig“). */
body.su-homepage .home-card{
  transform: translateY(clamp(0px, 6vh, calc(80px * var(--su-scale))));
}
@media (max-height: 720px){
  body.su-homepage .home-card{
    transform: translateY(clamp(0px, 4vh, calc(48px * var(--su-scale))));
  }
}

}
.hubName{
  text-align:center;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.2px;
}
.hubName .sub{ display:block; font-weight: 700; opacity: 0.86; font-size: 12px; margin-top: 4px; }

.hubHUD{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.hudMini{
  min-width: 70px;
  justify-content: space-between;
  font-weight: 900;
}
.hudMini .ico{ width: 22px; height: 22px; display:inline-grid; place-items:center; }

.hubCenter{
  position: relative;
  z-index: 40;
  min-height: 100vh;
  min-height: 100svh;
  display:flex;
  align-items: center;
  justify-content:center;
  padding: calc(90px + env(safe-area-inset-top)) 18px calc(90px + env(safe-area-inset-bottom)) 18px;
}
.hubStack{
  width: min(520px, 100%);
  display:flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.hubAvatar{
  width: 84px;
  height: 84px;
  border-radius: 999px;
  border: 1px solid rgba(160,190,255,0.22);
  background: rgba(8,12,24,0.55);
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
}
.hubAvatar img{ width:100%; height:100%; object-fit:cover; }
.hubBtn{
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(8,12,24,0.62);
  border: 1px solid rgba(160,190,255,0.18);
  color: var(--text);
  font-weight: 900;
  letter-spacing: 0.2px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  backdrop-filter: blur(10px);
/* Startseite: Menü-Karte etwas weiter nach unten schieben (Browser wirkt sonst zu „mittig“). */
body.su-homepage .home-card{
  transform: translateY(clamp(0px, 6vh, calc(80px * var(--su-scale))));
}
@media (max-height: 720px){
  body.su-homepage .home-card{
    transform: translateY(clamp(0px, 4vh, calc(48px * var(--su-scale))));
  }
}

}
.hubBtn:active{ transform: translateY(1px); }
.hubBtn.secondary{ opacity: 0.92; }

.hubBottom{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) 14px;
}
.resRow{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 20px;
  background: rgba(8,12,24,0.55);
  border: 1px solid rgba(160,190,255,0.18);
  backdrop-filter: blur(10px);
/* Startseite: Menü-Karte etwas weiter nach unten schieben (Browser wirkt sonst zu „mittig“). */
body.su-homepage .home-card{
  transform: translateY(clamp(0px, 6vh, calc(80px * var(--su-scale))));
}
@media (max-height: 720px){
  body.su-homepage .home-card{
    transform: translateY(clamp(0px, 4vh, calc(48px * var(--su-scale))));
  }
}

}
.resItem{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  opacity: 0.95;
}
.resItem small{ opacity: 0.74; font-weight: 700; }

@media (max-width:420px){
  .dock-btn{ width: 54px; height: 54px; }
  .hubBtn{ padding: 13px 14px; }
  .hubAvatar{ width: 78px; height: 78px; }
}

/* =========================================================
   Alpha V3: Space-Opera-like Start UI
   ========================================================= */

body.bg-space .bg{
  background-image: url('../assets/bg/start_1.74.jpg');
}

.su-top{
  position: fixed;
  inset: 0 0 auto 0;
  padding: 14px 14px 10px;
  z-index: 30;
}

.su-top-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.su-pill{
  justify-self: center;
  padding: clamp(10px, 2.8vw, 12px) clamp(16px, 4.2vw, 22px);
  border-radius: 999px;
  border: 1px solid rgba(160,190,255,0.22);
  background: rgba(8,12,24,0.66);
  color: #e8f1ff;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);

  font-size: clamp(13px, 3.5vw, 15px);
}

.su-counter{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(7px, 2.2vw, 9px) clamp(10px, 3.2vw, 12px);
  border-radius: 999px;
  border: 1px solid rgba(160,190,255,0.18);
  background: rgba(8,12,24,0.55);
  color: #e8f1ff;
  font-weight: 700;

  font-size: clamp(13px, 3.4vw, 15px);
}

.su-counter-left{ justify-self: start; }
.su-counter-right{ justify-self: end; }

.su-ico{ opacity: 0.9; }

.su-titleblock{
  margin-top: 6px;
  text-align: center;
  pointer-events: none;
}
.su-titleblock, .su-titleblock .su-h1, .su-titleblock .su-h2{
  color:#eaf0ff;
}
.su-h1{
  font-size: clamp(18px, 5.0vw, 22px);
  font-weight: 900;
  text-shadow: 0 8px 20px rgba(0,0,0,0.55);
}
.su-h2{
  font-size: clamp(12px, 3.4vw, 14px);
  opacity: 0.92;
}

/* Home extras (old prototype layout) */
.itemset-row{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: 10px;
}
.itemset-slot{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.14);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 26px rgba(0,0,0,0.32);
  color: rgba(219,233,255,0.92);
  user-select:none;
}
.itemset-slot span{font-size: 12px; opacity: 0.9;}
.itemset-slot[data-state="locked"]{opacity: 0.55;}
.itemset-slot[data-state="active"]{
  border-color: rgba(111,186,255,0.65);
  box-shadow: 0 0 0 2px rgba(111,186,255,0.10), 0 14px 28px rgba(0,0,0,0.35);
}

.hub-avatar{
  margin-top: 12px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 40px rgba(0,0,0,0.38);
  display: grid;
  place-items: center;
  position: relative;
}
.hub-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hub-progress{
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 18px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(219,233,255,0.92);
  font-size: 13px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.34);
}

.su-side{
  position: fixed;
  /* Startseite: Side-Buttons sollen oben "andocken" statt mittig zu schweben */
  top: calc(84px + env(safe-area-inset-top));
  bottom: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  z-index: 25;
}
.su-left{ left: 14px; }
.su-right{ right: 14px; }

.su-round{
  width: clamp(44px, 12vw, 52px);
  height: clamp(44px, 12vw, 52px);
  border-radius: 50%;
  border: 1px solid rgba(160,190,255,0.22);
  background: rgba(8,12,24,0.55);
  color: #e8f1ff;
  font-size: clamp(16px, 4.6vw, 20px);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.su-round:active{ transform: translateY(1px); }

.su-center{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: start center;
  /* closer to the original prototype: top-aligned hub with space for the boss portrait */
  /* bottom padding follows the real footer height to avoid overlap */
  padding: clamp(82px, 10vh, 110px) clamp(56px, 10vw, 84px) calc(var(--su-bottom-h, 210px) + 18px);
  z-index: 20;
}

.su-stack{
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.su-big{
  position: relative;
  width: 100%;
  padding: clamp(10px, 3.0vw, 14px) clamp(12px, 3.6vw, 16px);
  border-radius: 999px;
  border: 1px solid rgba(160,190,255,0.22);
  background: rgba(8,12,24,0.58);
  color: #e8f1ff;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-align: center;
  box-shadow: 0 16px 34px rgba(0,0,0,0.38);

  font-size: clamp(13px, 3.6vw, 15px);
}

/* Small indicator inside big buttons (e.g. gear while upgrading, check when done) */
.btn-indicator{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0.9;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45));
}

.btn-indicator.gear,
.btn-indicator.done{ display: flex; }

.btn-indicator.gear::before{
  content: "⚙";
  display: block;
  animation: suSpin 1.15s linear infinite;
}

.btn-indicator.done::before{
  content: "✓";
  display: block;
  font-weight: 900;
}

@keyframes suSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.su-big:active{ transform: translateY(1px); }

.su-bottom{
  position: fixed;
  inset: auto 0 0 0;
  padding: 10px 14px 14px;
  z-index: 30;
}

.su-bottom-icons{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.su-small{ width: clamp(44px, 12vw, 54px); height: clamp(44px, 12vw, 54px); font-size: clamp(16px, 4.6vw, 20px); }

.su-resbar{
  /* Old-game style: slim HUD strip + sci-fi divider line */
  position: relative;
  display: flex;
  /* Single-line HUD (like the old build) */
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 6px;
  width: min(720px, calc(100% - 20px));
  margin: 0 auto;
  padding: 8px 10px 6px;
  border-radius: 0;
  border: 0;
  background: rgba(8,12,24,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(232,241,255,0.92);
  font-size: 12.5px;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;     /* IE/Edge */
  scrollbar-width: none;        /* Firefox */
}

/* Hide scrollbar (WebKit) */
.su-resbar::-webkit-scrollbar{ width:0; height:0; }

/* Decorative sci-fi line above the resource strip */
.su-resbar::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(111,186,255,0.0) 10%,
      rgba(111,186,255,0.55) 35%,
      rgba(111,186,255,0.12) 50%,
      rgba(111,186,255,0.55) 65%,
      rgba(111,186,255,0.0) 90%,
      rgba(0,0,0,0) 100%
    );
  opacity: .85;
}

.su-resbar::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  top: -2px;
  height: 1px;
  pointer-events:none;
  background: rgba(160,190,255,0.22);
}

.su-resbar b{ color: #e8f1ff; }



/* Resource icons in footer HUD */
.su-resbar .res{
  display:flex;
  align-items:center;
  gap: 2px;
  /* single row */
  flex: 0 0 auto;
  min-width: 0;
  padding:0;
  position:relative;
}
.su-resbar .res::before{ display:none; }

.su-resbar .lbl{
  /* Old-UI style: no resource names in the HUD, only icon + number */
  display:none;
}

.su-resbar .val{
  /* scales down on small screens but stays readable */
  font-size: clamp(12px, 3.6vw, 14px);
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}

.su-res-ico,
.su-resbar .ico{
  width:14px;
  height:14px;
  flex:0 0 14px;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.9;
  filter: drop-shadow(0 0 6px rgba(111,186,255,0.28));
}

/* Resource icon mapping (reusable) */
.res-metal .su-res-ico,  .res-metal .ico{ background-image:url("../assets/icons/resources/metal.svg"); }
.res-fuel  .su-res-ico,  .res-fuel  .ico{ background-image:url("../assets/icons/resources/fuel.svg"); }
.res-water .su-res-ico,  .res-water .ico{ background-image:url("../assets/icons/resources/water.svg"); }
.res-food  .su-res-ico,  .res-food  .ico{ background-image:url("../assets/icons/resources/food.svg"); }
.res-plastic .su-res-ico, .res-plastic .ico{ background-image:url("../assets/icons/resources/plastic.svg"); }
.res-chips   .su-res-ico, .res-chips   .ico{ background-image:url("../assets/icons/resources/microchips.svg"); }
.res-stasis  .su-res-ico, .res-stasis  .ico{ background-image:url("../assets/icons/resources/stasis.svg"); }

.res-metal .ico{ background-image:url("../assets/icons/resources/metal.svg"); }
.res-fuel  .ico{ background-image:url("../assets/icons/resources/fuel.svg"); }
.res-water .ico{ background-image:url("../assets/icons/resources/water.svg"); }
.res-food  .ico{ background-image:url("../assets/icons/resources/food.svg"); }
.res-plastic .ico{ background-image:url("../assets/icons/resources/plastic.svg"); }
.res-chips   .ico{ background-image:url("../assets/icons/resources/microchips.svg"); }
.res-stasis  .ico{ background-image:url("../assets/icons/resources/stasis.svg"); }






/* Centered help pill (used on create/index/load) */
.help-center{
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
}

/* Accordion blocks (used in Help overlay) */
.acc{
  border: 1px solid rgba(160,190,255,0.18);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,0.12);
}
.acc-btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  background: rgba(0,0,0,0.14);
  color: rgba(245,247,255,0.98);
  font-weight: 800;
}
.acc-btn:active{ transform: translateY(1px); }
.acc-panel{
  padding: 12px 14px;
  border-top: 1px solid rgba(160,190,255,0.14);
  color: rgba(232,241,255,0.92);
  font-size: 13px;
  line-height: 1.4;
}
.acc-kicker{
  opacity: .75;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
}

/* Modal for gather popup */
.su-modal{
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,0.5);
  display: none;
  padding: 22px;
}
.su-modal.open{ display: grid; place-items: center; }

.su-modal-card{
  width: min(560px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(160,190,255,0.22);
  background: rgba(6,9,19,0.78);
  box-shadow: 0 26px 60px rgba(0,0,0,0.55);
  padding: 18px;
}

.su-modal-card h2{
  margin: 0 0 10px;
  font-size: 22px;
}

.su-modal-card p{ opacity: 0.92; margin: 0 0 14px; }

.su-slider{ width: 100%; }

.su-modal-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
}

/* SETTINGS MENU (Startseite) – gleicher Look wie der Rest, nur etwas kompakter */
.su-menu-card{ 
  position: relative;
  padding: 22px 18px 18px;
}

.su-menu-card .su-menu-stack{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.su-menu-card .su-btn{
  width: 100%;
  height: 54px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.su-btn.is-ghost{
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(160,190,255,0.20);
}

.su-menu-x{
  position: absolute;
  top: 12px;
  left: 12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(8,12,24,0.62);
  border: 1px solid rgba(160,190,255,0.22);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  color: rgba(230,240,255,0.90);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.su-menu-x:active{ transform: scale(0.98); }


/* System modal (replaces native alert/confirm) */
.su-modal.su-sysmodal{ z-index: 75; }

.su-btn{
  height:46px;
  padding:0 16px;
  border-radius:22px;
  background:var(--panel2);
  border:1px solid var(--border);
  color:var(--text);
  font-weight:800;
  letter-spacing:.2px;
}
.su-btn:active{ transform: translateY(1px); }
.su-btn.primary{ background: rgba(111,186,255,0.14); border-color: rgba(111,186,255,0.35); }
.su-btn.danger{ background: rgba(180,74,74,0.14); border-color: rgba(180,74,74,0.35); }
@media (max-width: 420px){
  .su-center{ padding: 160px 76px calc(var(--su-bottom-h, 210px) + 18px); }
  .su-round{ width: 54px; height: 54px; font-size: 20px; }
}

body.bg-create .bg{ background-image: url('../assets/bg/create.jpg'); }

/* =========================
   Index / Character Hub
   (Space-Opera style menu)
   ========================= */

.create-shell{
  position:fixed;
  left:0; right:0;
  top:86px;
  bottom:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 16px;
  z-index:10;
}

.create-card{
  width:min(560px, 92vw);
  border-radius:22px;
  padding:22px 18px;
  background:rgba(8,12,24,.66);
  border:1px solid rgba(160,190,255,.18);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
}

.create-title{
  font-weight:900;
  letter-spacing:.08em;
  text-align:center;
  margin:0;
  font-size:26px;
}

.create-sub{
  text-align:center;
  opacity:.8;
  margin:10px 0 18px;
}

.create-grid{display:grid; gap:12px;}

.big-btn{
  width:100%;
  padding:16px 16px;
  border-radius:18px;
  border:1px solid rgba(160,190,255,.22);
  background:rgba(0,0,0,.20);
  color:#eaf3ff;
  font-weight:800;
  letter-spacing:.02em;
  font-size:18px;
}

.big-btn:active{transform:scale(.99)}

.small-row{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:14px}

.lastbox{
  flex:1;
  border-radius:16px;
  padding:12px 12px;
  border:1px solid rgba(160,190,255,.14);
  background:rgba(0,0,0,.18);
}

.lastbox .label{opacity:.75;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.lastbox .value{margin-top:6px;font-weight:800}

.last-go{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(111,186,255,.5);
  background:rgba(111,186,255,.18);
  color:#eaf3ff;
  font-weight:900;
}


/* ===== Index (Login/Character Hub) – mobile-safe layout ===== */
.screen-index .create-shell{
  position:relative;
  top:auto; left:auto; right:auto; bottom:auto;
  /* On mobile, keep the login close to the top so the keyboard doesn't hide it */
  min-height:100svh;
  min-height:100dvh;
  padding: calc(env(safe-area-inset-top) + 10px) 14px calc(env(safe-area-inset-bottom) + 14px);

  /* Index = Charakter-Auswahl: Buttons IMMER untereinander, zentriert.
     (Grid war hübsch am Desktop, aber auf Mobile/Viewer wird sonst gern
     „Desktop-Breite“ angenommen und die Buttons rutschen aus dem Bild.) */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap:10px;
  max-width:520px;
  margin:0 auto;
}

/* Disabled look for wide buttons (used e.g. when max characters reached) */
.char-widebtn.is-disabled,
.big-btn.is-disabled{
  opacity:.55;
  pointer-events:none;
  filter: grayscale(.25);
}

.screen-index .create-card{
  width: min(520px, calc(100vw - 28px));
  padding: 18px 16px 20px;
}

.screen-index .brand-logo{
  width: min(260px, 70vw);
  height: auto;
  align-self: center;
  margin: -4px auto 4px;
  opacity: .95;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}


/* Space‑Opera style: slightly sharper, more "panel" feel */
.screen-index .big-btn{
  border-radius: 0;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}

.screen-index .big-btn{
  border-radius:0;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}

.screen-index .big-btn::before{
  content:"";
  position:absolute;
  inset: 2px;
  border:1px solid rgba(160,190,255,0.18);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  pointer-events:none;
}

/* Start: Settings popup (same button style as index) */
.su-menu-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
}
.su-menu-modal[aria-hidden="true"]{ display:none; }

.su-menu-panel{
  width: min(520px, calc(100vw - 28px));
  background: rgba(8,12,24,0.78);
  border: 1px solid rgba(160,190,255,0.18);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  padding: 18px 16px 16px;
}

.su-menu-stack{
  display:flex;
  flex-direction:column;
  gap: 14px;
  padding: 6px 2px 0;
}

.su-menu-modal .big-btn{
  position: relative;
  border-radius: 0;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.su-menu-modal .big-btn::before{
  content:"";
  position:absolute;
  inset: 2px;
  border:1px solid rgba(160,190,255,0.18);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  pointer-events:none;
}

.big-btn.is-ghost{
  background: rgba(8,12,24,0.50);
  color: var(--text);
}


/* Character load page (full-page modal look) */
.screen-load .loadcard{
  max-width: 520px;
  margin: 0 auto;
}
.loadcard__head{ padding: 18px 18px 10px; }
.loadcard__hint{ font-size: 14px; opacity: .85; }
.loadcard__body{ padding: 10px 14px 14px; }
.loadcard__footer{ display:flex; gap:10px; justify-content: space-between; padding: 12px 14px 16px; }

.char-row{ display:flex; gap:10px; align-items: stretch; margin: 10px 0; }
.char-row .trash{
  width: 54px;
  border-radius: 14px;
  border: 1px solid rgba(160,190,255,0.18);
  background: rgba(8,12,24,0.60);
  color: #cdd8ff;
  font-size: 18px;
}
.char-btn{
  flex:1;
  text-align:left;
  border-radius: 14px;
  border: 1px solid rgba(160,190,255,0.18);
  background: rgba(8,12,24,0.60);
  padding: 12px 14px;
  color: #eaf0ff;
}

/* Wide action buttons (used on Character Load) – same rounded look as name buttons */
.char-widebtn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(160,190,255,0.18);
  background: rgba(8,12,24,0.60);
  padding: 18px 14px;
  color: #eaf0ff;
  font-weight: 800;
  text-decoration:none;
  box-shadow: 0 18px 44px rgba(0,0,0,0.35);
}
.char-widebtn:active{ transform: translateY(1px); }
.char-btn__name{ font-weight: 700; }
.char-btn__meta{ font-size: 12px; opacity: .75; margin-top: 2px; }
.pill.primary{ border-color: rgba(111,186,255,0.55); }
.pill.disabled{ opacity: .5; }

/* --- Character Load: Page-as-Modal layout (mobile friendly) --- */
.load-modal{
  /*
    Mobile fix:
    Absolute centering can get cramped when the Android address bar / safe areas
    change the viewport height. We therefore place the modal naturally and
    center it via margin.
  */
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: min(560px, 92vw);
  max-height: min(680px, calc(100dvh - 220px));
  margin: min(14dvh, 120px) auto 24px auto;
  overflow: auto;
  padding: 18px 16px 16px 16px;
  border-radius: 26px;
  border: 1px solid rgba(160,190,255,0.18);
  background: rgba(8,12,24,0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 22px 70px rgba(0,0,0,0.55);
  display:flex;
  flex-direction: column;
  gap: 14px;
}

/* Shared panel typography (Create + Load, etc.) */
.panel-title{
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0;
}

@media (max-width:380px){
  .panel-title{font-size:22px;}
}

.panel-subtitle{
  text-align: center;
  margin: -6px 0 0 0;
  opacity: .88;
}

.load-title{
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .02em;
}

.load-list{
  display:flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding-right: 2px;
}

.load-row{
  display:flex;
  align-items: stretch;
  gap: 12px;
}

.trash-btn{
  width: 58px;
  border-radius: 16px;
  border: 1px solid rgba(212,163,90,0.35);
  background: rgba(8,12,24,0.60);
  font-size: 22px;
  color: rgba(212,163,90,0.85);
}

.char-btn{
  border-radius: 16px;
  padding: 14px 16px;
}

.load-empty{
  display:flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.load-empty__msg{ opacity: .92; }

.load-actions{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.pill.wide{
  width: min(340px, 80vw);
  justify-content: center;
}

/* Ensure the HTML hidden attribute always wins (we toggle views via JS) */
[hidden]{
  display: none !important;
}

/* Character-load page layout helpers */
.load-listwrap{
  display:flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

.load-list{
  display:flex;
  flex-direction: column;
  gap: 12px;
  min-height: 72px;
  max-height: min(42vh, 320px);
  overflow: auto;
  padding-right: 2px;
}

.trash-btn{
  width: 64px;
  min-width: 64px;
  height: 64px;
  border-radius: 16px;
}

/* =========================
   Base / Idle UI (Basis verwalten)
   ========================= */

.resGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 18px;
}

.resItem{
  padding: 12px;
  border-radius: 18px;
  background: rgba(8,12,24,0.55);
  border: 1px solid rgba(160,190,255,0.18);
}

.resKey{
  font-weight: 900;
  letter-spacing: 0.06em;
  font-size: 12px;
  opacity: 0.85;
}

.resVal{
  font-size: 20px;
  font-weight: 900;
  margin-top: 2px;
}

.bldList{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bldCard{
  padding: 14px 14px;
  border-radius: 22px;
  background: rgba(8,12,24,0.66);
  border: 1px solid rgba(160,190,255,0.18);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

.bldTop{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.bldMain{
  flex: 1;
  min-width: 0;
}

.bldSide{
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.bldInfoBtn{
  font-weight: 800;
}

.bldImg{
  width: 86px;
  height: 86px;
  border-radius: 20px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(160,190,255,0.18);
  background: rgba(0,0,0,0.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.bldImg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 420px){
  .bldImg{ width: 74px; height: 74px; border-radius: 18px; }
}

.bldName{ font-weight: 900; font-size: 18px; }
.bldDesc{ margin-top: 4px; }
.bldMeta{ margin-top: 8px; }
.bldWorkers{ margin-top: 8px; font-weight: 800; }
.bldWorkers .muted{ opacity: .75; font-weight: 700; }
.bldWorkersWrap{ padding: 0 16px 10px 16px; }
.bldActions{ margin-top: 12px; }
.bldActions .cost{ margin-top: 8px; font-size: 13px; }
.bldActions .cost .costItem{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.bldActions .cost .costSep{ opacity: .55; margin: 0 6px; }
.bldActions .cost .su-res-ico{ transform: translateY(1px); }
.lock{ margin-top: 8px; color: rgba(212,163,90,0.95); font-weight: 800; }

@media (min-width: 520px){
  .resGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Building info modal hero image (Biosphären-Node etc.) --- */
#bldInfoBody{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.bldInfoHero{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(160,190,255,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.bldInfoHero img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

.bldInfoText{
  white-space:pre-line;
  line-height:1.45;
  color:rgba(235,245,255,0.92);
}

/* Online-only gate */
.online-gate{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:9999;
  background:rgba(3,5,10,0.82);
  backdrop-filter: blur(8px);
}
.online-gate__card{
  width:min(560px, 100%);
  border-radius:18px;
  padding:18px 16px;
  background:rgba(8,12,24,0.82);
  border:1px solid rgba(160,190,255,0.18);
  box-shadow: 0 18px 60px rgba(0,0,0,0.5);
  color:rgba(235,245,255,0.92);
}
.online-gate__title{
  font-size:18px;
  font-weight:800;
  letter-spacing:0.2px;
  margin:0 0 8px 0;
}
.online-gate__text{ color:rgba(225,235,255,0.86); line-height:1.45; }
.online-gate__small{ margin-top:10px; font-size:12px; color:rgba(200,215,255,0.72); }
.online-gate--off{ display:none; }