*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(circle at top, #141422 0%, #07070b 60%);
  color:#fff;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:40px 16px;
}


.result-card {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  transition: 0.15s ease;
  box-shadow: 0 0 18px rgba(0,0,0,0.4);
}

.result-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 28px rgba(168,85,247,0.45);
}

.result-title {
  font-size: 18px;
  font-weight: 800;
  color: #c4b5fd;
  margin-bottom: 6px;
}

.result-meta {
  font-size: 13px;
  opacity: 0.9;
  line-height: 1.4;
}

.vote-pill {
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  font-weight: 700;
  display: inline-block;
}

.follows-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.empty{
  opacity:0.75;
  font-size:14px;
}

/* Shared grids for cards (Search + Room) */
.follows-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
}

.empty{
  opacity:0.85;
  font-size:14px;
}

.container{
  width:100%;
  max-width:640px;
  background: rgba(18,18,22,0.9);
  border:1px solid rgba(160,80,255,0.25);
  border-radius:18px;
  padding:28px;
  box-shadow: 0 0 50px rgba(0,0,0,0.65);
}

h1{
  font-size:54px;
  line-height:1;
  text-align:center;
  margin-bottom:10px;
  color:#a855f7;
  text-shadow: 0 0 18px rgba(168,85,247,0.35);
}

.sub{
  text-align:center;
  opacity:0.8;
  margin-bottom:18px;
}

/* Startseite: Buttons Create/Login untereinander */
.actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:16px;
}

.panel{
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  padding:18px;
  margin-top:16px;
}

h2{
  font-size:22px;
  margin-bottom:12px;
  color:#c4b5fd;
}

label{
  display:block;
  font-size:14px;
  opacity:0.9;
  margin:10px 0 6px;
}

input{
  width:100%;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color:#fff;
  outline:none;
}
input:focus{
  border-color: rgba(168,85,247,0.6);
  box-shadow: 0 0 0 3px rgba(168,85,247,0.18);
}

.btn{
  width:100%;
  margin-top:12px;
  padding:12px 14px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-size:16px;
  font-weight:600;
}

.btn-primary{ background:#6d28d9; color:#fff; }
.btn-primary:hover{ filter:brightness(1.1); }

.btn-blue{ background:#1677ff; color:#fff; }
.btn-blue:hover{ filter:brightness(1.08); }

.btn-ghost{
  background: transparent;
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;
}
.btn-ghost:hover{
  border-color: rgba(168,85,247,0.55);
  box-shadow: 0 0 18px rgba(168,85,247,0.15);
}

.hint{
  margin-top:10px;
  font-size:14px;
  opacity:0.85;
  min-height:18px;
}

/* MODALS (zentriert, nicht links buggy) */
.modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.72);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:24px;
  z-index:999;
}

.modal-box{
  width:100%;
  max-width:420px;
  background: rgba(18,18,24,0.95);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:22px;
  box-shadow:
    0 0 40px rgba(168, 85, 247, 0.35),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

.modal-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.modal-actions .btn{
  width:100%;
}

@media (max-width:520px){
  h1{ font-size:40px; }
  .container{ padding:22px; }
}



/* ===== Search: Stories Grid ===== */
#storiesResults,
.stories-results,
.search-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;
}

/* ===== Story Card (in Search) ===== */
.story-card,
.search-story-card {
  background: rgba(20, 20, 24, 0.75);
  border: 1px solid rgba(170, 120, 255, 0.35);
  border-radius: 14px;
  padding: 14px;
  min-height: 260px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.story-card:hover,
.search-story-card:hover {
  border-color: rgba(170, 120, 255, 0.7);
  transform: translateY(-2px);
}

/* Buch-Icon: klein + sauber zentriert */
.story-card img,
.search-story-card img,
.story-card .story-icon,
.search-story-card .story-icon {
  width: 70px !important;
  height: 70px !important;
  object-fit: contain;
  display: block;
  margin: 10px auto 6px auto;
  opacity: 0.95;
}

/* Titel schöner */
.story-card .story-title,
.search-story-card .story-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin: 6px 0 6px 0;
}

/* Meta (Raum/Kampagne/Charakter/Tags) kompakter */
.story-card .story-meta,
.search-story-card .story-meta {
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.35;
  margin-top: 6px;
}

.story-card .story-meta a,
.search-story-card .story-meta a {
  text-decoration: none;
  border-bottom: 1px dotted rgba(170,120,255,0.55);
}

.story-card .story-meta a:hover,
.search-story-card .story-meta a:hover {
  border-bottom-style: solid;
}

/* Upvote Button unten sauber */
.story-card .upvote-btn,
.search-story-card .upvote-btn {
  margin-top: 10px;
  width: 100%;
  border-radius: 12px;
  padding: 10px 12px;
}

/* ===== Search: Stories als Grid ===== */
#storiesArea.search-stories-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:16px;
  align-items:start;
}

/* ===== Icon in result-card klein halten ===== */
.result-card{
  overflow:hidden;              /* verhindert, dass Bilder aus der Card rauslaufen */
  min-height: 260px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.result-icon{
  width:72px;
  height:72px;
  object-fit:contain;
  display:block;
  margin:10px auto 8px auto;
  opacity:0.95;
}

/* Meta-links bisschen cleaner */
.result-meta a{
  color:#c4b5fd;
  text-decoration:none;
  border-bottom: 1px dotted rgba(196,181,253,0.6);
}
.result-meta a:hover{
  border-bottom-style: solid;
}


.room-link { font-weight: 700; }
.muted { opacity: 0.75; font-size: 12px; }

/* ===== Topbar / inline buttons (Campaign page) ===== */
.topbar{
  position: fixed;
  top: 14px;
  left: 14px;
  right: 14px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  z-index:50;
}

.topbar-left,.topbar-right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn-inline{
  appearance:none;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
}

.btn-inline:hover{
  border-color: rgba(168,85,247,0.55);
  box-shadow: 0 0 18px rgba(168,85,247,0.15);
}

.page{
  width:100%;
  max-width:980px;
  margin-top:84px; /* space under fixed topbar */
}


select{
  width:100%;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color:#fff;
  outline:none;
}
select:focus{
  border-color: rgba(168,85,247,0.6);
  box-shadow: 0 0 0 3px rgba(168,85,247,0.18);
}

.room-wrap{
  width:100%;
  max-width: min(1700px, 96vw);
  background: rgba(18,18,22,0.92);
  border:1px solid rgba(160,80,255,0.25);
  border-radius:22px;
  padding:32px;
  box-shadow: 0 0 60px rgba(0,0,0,0.7);
  margin-top: 24px;
}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.grid2 .span2{ grid-column: 1 / -1; }
@media (max-width: 980px){
  .grid2{ grid-template-columns:1fr; }
  .grid2 .span2{ grid-column:auto; }
}

.dropzone{
  border:1px dashed rgba(255,255,255,0.25);
  border-radius:14px;
  padding:18px;
  background:rgba(0,0,0,0.25);
  text-align:center;
  cursor:pointer;
  user-select:none;
}
.dropzone.dragover{
  border-color: rgba(168,85,247,0.95);
  box-shadow: 0 0 0 3px rgba(168,85,247,0.18);
}
.dz-title{ font-weight:800; }
.dz-sub{ opacity:.85; font-size:13px; margin-top:4px; }
.dz-file{ margin-top:10px; opacity:.9; font-size:13px; word-break:break-all; }

.progressTrack{
  height:10px;
  background:rgba(255,255,255,0.08);
  border-radius:999px;
  overflow:hidden;
}
.progressBar{
  height:10px;
  width:0%;
  background:rgba(168,85,247,0.9);
}

.locked{
  opacity:0.55;
  filter: grayscale(0.25);
  pointer-events:none;
}


/* ===== ROOM PAGE OVERRIDES ===== */
body.room-page{
  align-items:flex-start;
  padding:32px;
}

/* Header / Title / Actions */
.room-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:24px;
  flex-wrap:wrap;
}

.room-title{
  font-size:64px;
  line-height:1;
  color:#a855f7;
  text-shadow:0 0 24px rgba(168,85,247,0.45);
  word-break:break-word;
}

.room-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}

/* Inline Buttons look like before */
.btn-inline{
  width:auto;
  padding:12px 20px;
  border-radius:12px;
  font-weight:700;
  font-size:16px;
  border:none;
  cursor:pointer;
  color:#fff;
  transition: 0.15s ease;
}

.btn-back{ background:#1677ff; }
.btn-mypage{ background:#1677ff; }
.btn-upload{ background:#6d28d9; }
.btn-edit{ background:#6d28d9; }
.btn-login{ background:#22c55e; color:#06130a; }

.btn-inline:hover{ filter:brightness(1.1); transform: translateY(-1px); }

/* Top grid */
.top-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:18px;
  margin-bottom: 6px;
  align-items: stretch;
}
@media (max-width: 980px){
  .top-grid{ grid-template-columns: 1fr; }
}

.room-info{
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:18px;
  margin-top:18px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.room-info b{ color:#c4b5fd; }
.room-info a{
  color:#a855f7;
  text-decoration:none;
  word-break:break-all;
}
.room-info a:hover{ text-decoration:underline; }

.follow-side{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  min-width: 220px;
}

.follow-info{
  opacity:0.85;
  font-size:14px;
  line-height:1.25;
  text-align:right;
  color:#c4b5fd;
}

.btn-follow{
  background: rgba(109,40,217,0.18);
  border: 1px solid rgba(160,80,255,0.35);
  color:#fff;
  padding:10px 16px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  transition:0.15s ease;
}
.btn-follow:hover{ filter:brightness(1.08); transform: translateY(-1px); }

.story-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:18px;
  margin-top:18px;
}


.access-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
@media (max-width: 760px){
  .access-grid{ grid-template-columns: 1fr; }
}

.access-check{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background: rgba(0,0,0,.25);
  line-height: 1.2;
}

.access-check input{
  width:16px;
  height:16px;
  margin:0;
  accent-color: rgba(154,107,255,0.95);
}
.row-inline{
  display:flex;
  gap:10px;
  align-items:center;
}

.btn.small{
  padding: 10px 14px;
}

.readonly-chipfield{
  min-height: 44px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
  padding: 10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.25);
}

.chip{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  user-select:none;
}

.chip .x{
  cursor:pointer;
  font-weight: 700;
  opacity: .8;
}

.chip .x:hover{
  opacity: 1;
}


/* --- Access checkbox UI (added) --- */
.access-box{margin-top:8px}
.access-toggles{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(0,0,0,.18)}
.access-toggles .chk{display:flex;align-items:center;gap:10px;font-size:.95rem;opacity:.95}
.access-toggles input[type="checkbox"]{transform:scale(1.05)}
.access-sub{margin-top:10px;padding:10px;border:1px dashed rgba(255,255,255,.15);border-radius:12px;background:rgba(0,0,0,.12)}
.access-row{display:flex;gap:10px;align-items:center}
.miniBtn{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(120,60,255,.20);color:#fff;cursor:pointer}
.miniBtn:hover{filter:brightness(1.1)}
.chipField{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;min-height:44px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(120,60,255,.15);user-select:none}
.chip .x{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.2);cursor:pointer;opacity:.9}
.chip .x:hover{filter:brightness(1.2)}

/* ===== Visual polish / missing pieces (Room + Campaign) ===== */
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.panel-head h2{
  margin:0;
}

.about-text{
  white-space:pre-wrap;
  line-height:1.45;
  opacity:0.9;
}

.btn-logout-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  border:none;
  cursor:pointer;
  background:#ff4500;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:white;
  transition:0.15s ease;
}
.btn-logout-icon:hover{ filter:brightness(1.1); transform: translateY(-1px); }

/* Campaign cards (if rendered as generic cards) */
.campaign-card,
#campaignsArea .result-card,
#campaignsArea .follow-card{
  min-height: 200px;
}

/* Upload modal: keep buttons aligned + spacing */
#uploadModal .btn{
  margin-top:12px;
}
#uploadModal .btn.small{
  margin-top:0;
}

/* ===== Make room story cards match search cards (robust, JS-agnostic) ===== */
.room-page .story-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:16px;
}

.room-page .story-grid > *{
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(150,90,255,0.35);
  border-radius: 16px;
  padding: 14px 14px 12px;
  min-height: 220px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  position: relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.room-page .story-grid > *::before{
  content:"";
  width:54px;
  height:54px;
  margin: 4px auto 10px;
  background: url("/buchicon.webp") center/contain no-repeat;
  opacity:0.95;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55));
}

/* If you don't have /buchicon.webp, we still show a fallback emoji */
.room-page .story-grid > *:not(:has(img)):not(:has(svg))::after{
  content:"📖";
  position:absolute;
  top:16px;
  left:16px;
  font-size: 22px;
  opacity: 0.0; /* hidden because ::before uses image; keep for fallback if you remove image line */
}

.room-page .story-grid a{
  color: #c9b8ff;
  text-decoration:none;
}
.room-page .story-grid a:hover{
  text-decoration:underline;
}

/* Title: first link (common case) */
.room-page .story-grid > * > a:first-of-type,
.room-page .story-grid .story-title,
.room-page .story-grid h3,
.room-page .story-grid .title{
  text-align:center;
  font-weight:800;
  font-size: 16px;
  margin: 0 0 10px 0;
  color:#d7cbff;
}

/* Meta text: push to bottom and style small */
.room-page .story-grid .meta,
.room-page .story-grid .sub,
.room-page .story-grid small,
.room-page .story-grid p{
  margin: 2px 0;
  font-size: 12px;
  opacity: 0.85;
}

/* Votes / actions at bottom (works for many markups) */
.room-page .story-grid .votes,
.room-page .story-grid .vote,
.room-page .story-grid .upvote,
.room-page .story-grid button{
  margin-top:auto;
}

.room-page .story-grid button{
  width: 100%;
  border-radius: 12px;
  border: 0;
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  color:#eae6ff;
  cursor:pointer;
}
.room-page .story-grid button:hover{
  background: rgba(255,255,255,0.10);
}

/* Keep card links from looking like default browser blue */
.room-page a:visited{ color:#c9b8ff; }

/* ===== v3 tweaks: bigger book, title above, tighter non-story cards ===== */

/* Make story cards layout consistent even if markup differs */
#storiesArea > *{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 18px 16px 18px;
}

/* Title should sit at the top */
#storiesArea > * a,
#storiesArea > * h3,
#storiesArea > * .title{
  order:1;
  margin:0;
  text-decoration:none;
}

/* Book icon larger and placed under title */
/* REMOVE FAKE SECOND BOOK ICON IN SEARCH */
#storiesArea.search-stories-grid > *::before{
  display: none !important;
  content: none !important;
}

/* Everything after title (meta lines) sits below icon */
#storiesArea > * .meta,
#storiesArea > * .sub,
#storiesArea > * small,
#storiesArea > * p{
  order:3;
}

/* If the upvote element exists, style it as a small bar */
#storiesArea .vote-bar,
#storiesArea .upvote-bar,
#storiesArea .votes{
  margin-top:auto;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-weight:700;
}

/* Links inside story cards should not be neon-blue */
#storiesArea > * a{
  color: #d7d0ff;
  font-weight:700;
}
#storiesArea > * a:hover{
  filter:brightness(1.08);
  text-decoration:underline;
}

/* ===== Non-story cards: no book icon, tighter, clearer ===== */
#campaignsArea > *::before,
#followsArea > *::before,
#followersArea > *::before{
  content:none !important;
}

/* Tighten those cards (less dead space) */
#campaignsArea > *,
#followsArea > *,
#followersArea > *{
  min-height: 140px;
  padding:14px 14px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Make their titles readable and centered */
#campaignsArea > * a,
#followsArea > * a,
#followersArea > * a{
  text-decoration:none;
  font-weight:800;
  color:#d7d0ff;
  text-align:center;
  margin-top:6px;
}

/* Meta text smaller + compact */
#campaignsArea > *,
#followsArea > *,
#followersArea > *{
  font-size: 13px;
}

/* ===== v4 patch: remove duplicate book on room story cards + make vote pill look clickable ===== */
.room-page #storiesArea .story-card::before{
  content:none !important; /* v3 generated icon - remove because room.js uses <img> */
}
.room-page #storiesArea .story-card .result-icon{
  width:58px;
  height:58px;
  display:block;
  margin:2px auto 6px auto;
  object-fit:contain;
}
.room-page #storiesArea .story-card .vote-pill{
  cursor:pointer;
  user-select:none;
}
.room-page #storiesArea .story-card .vote-pill:active{
  transform: translateY(1px);
  filter:brightness(0.98);
}


/* Upload Modal Shell */
#uploadModal {
  backdrop-filter: blur(6px);
  background: rgba(10, 10, 15, 0.75);
}

.upload-panel {
  background: linear-gradient(180deg, #0f0f17, #0b0b12);
  border: 1px solid rgba(160, 120, 255, 0.25);
  box-shadow: 0 0 40px rgba(140, 90, 255, 0.25);
  border-radius: 16px;
  padding: 28px;
  max-width: 680px;
  width: 100%;
}

/* Section Titles */
.upload-panel h2 {
  color: #c9b8ff;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}

/* Input Fields */
.upload-panel input,
.upload-panel select {
  background: #0f0f1a;
  border: 1px solid rgba(140, 90, 255, 0.3);
  border-radius: 10px;
  padding: 10px 12px;
  color: #eee;
  transition: border 0.2s, box-shadow 0.2s;
}

.upload-panel input:focus,
.upload-panel select:focus {
  outline: none;
  border-color: #9a6bff;
  box-shadow: 0 0 0 2px rgba(154, 107, 255, 0.25);
}

/* Section Grouping */
.upload-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Checkboxes as Cards */
.access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.02);
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 8px;
  transition: background 0.2s;
}

.access-row:hover {
  background: rgba(160,120,255,0.08);
}

/* Dropzone */
#dropzone {
  border: 2px dashed rgba(160,120,255,0.4);
  border-radius: 14px;
  padding: 28px;
  text-align: center;
  color: #aaa;
  transition: border-color 0.2s, background 0.2s;
}

#dropzone.dragover {
  border-color: #b38cff;
  background: rgba(160,120,255,0.1);
}

/* Buttons */
.upload-panel button {
  background: linear-gradient(135deg, #7a3cff, #9f6bff);
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  color: white;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

.upload-panel button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(160,120,255,0.4);
}

.upload-panel button:active {
  transform: translateY(0);
}


/* Upload Modal: feste Größe, Inhalt scrollt */
#uploadModal {
  position: fixed;
  inset: 0;
  display: none;                /* JS setzt auf flex */
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  z-index: 9999;
}

/* Die eigentliche Upload-Card */
#uploadModal .upload-panel,
#uploadModal #uploadCard {
  width: min(720px, 96vw);
  max-height: 88vh;            /* <- HIER die feste Höhe */
  overflow-y: auto;          /* <- Scrollbar innen */
  overflow-x: hidden;
  border-radius: 16px;
  padding: 22px;
  background: linear-gradient(180deg, #101018, #0b0b12);
  border: 1px solid rgba(160,120,255,0.25);
  box-shadow: 0 0 40px rgba(140,90,255,0.25);
}

/* Scrollbar hübsch (WebKit/Chromium) */
#uploadModal .upload-panel::-webkit-scrollbar,
#uploadModal #uploadCard::-webkit-scrollbar {
  width: 8px;
}
#uploadModal .upload-panel::-webkit-scrollbar-thumb,
#uploadModal #uploadCard::-webkit-scrollbar-thumb {
  background: rgba(154,107,255,0.6);
  border-radius: 8px;
}
#uploadModal .upload-panel::-webkit-scrollbar-track,
#uploadModal #uploadCard::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}

/* Upload Modal: Card bleibt fix, Inhalt scrollt */
#uploadModal .modal-box{
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Scrollbar hübsch (Chrome/Edge) */
#uploadModal .modal-box::-webkit-scrollbar{
  width: 8px;
}
#uploadModal .modal-box::-webkit-scrollbar-thumb{
  background: rgba(154,107,255,0.6);
  border-radius: 8px;
}
#uploadModal .modal-box::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.05);
}





/* ===== Edit mode ornaments ===== */
.edit-host{position:relative;}
.edit-title-host{position:relative;display:inline-block;padding-right:44px;}
.edit-ornament-btn{
  position:absolute;
  z-index:30;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(168,85,247,.55);
  background:radial-gradient(circle at 30% 30%, rgba(196,181,253,.28), rgba(109,40,217,.92));
  box-shadow:0 0 18px rgba(168,85,247,.35);
  color:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.edit-ornament-btn:hover{filter:brightness(1.08);transform:scale(1.03);}
.edit-ornament-btn[data-kind="pencil"]{top:10px;right:10px;}
.edit-title-host > .edit-ornament-btn[data-kind="pencil"]{top:2px;right:0;}
.edit-ornament-btn[data-kind="gear"]{top:50%;left:50%;transform:translate(-50%,-50%);}
body.edit-mode-active .edit-ornament-btn{display:flex;}
body.edit-mode-active .editable-card{opacity:.62;filter:saturate(.88);}
body.edit-mode-active .editable-card:hover{transform:none;}
body.edit-mode-active .story-card.locked{opacity:.62;}



/* ===== Final UI unification patch (safe CSS-only overrides) ===== */

/* keep page layouts from original design */
body.room-page,
body.campaign-page,
body.extra-room-page{
  align-items:flex-start;
  padding:32px;
}

/* edit mode should work for both systems used in JS */
body.room-edit-mode .room-edit-pencil,
body.room-edit-mode .room-edit-gear,
body.edit-mode-active .edit-ornament-btn{
  display:flex !important;
}

/* title / about hosts */
.room-title.edit-host,
.room-title.edit-title-host,
#roomName.edit-host,
#campTitle.edit-host,
#extraTitle.edit-host{
  position:relative;
  display:inline-block;
  padding-right:56px;
  max-width:100%;
}

.panel .panel-head.edit-host,
.panel.edit-host,
.panel .panel-head{
  position:relative;
}

/* same pencil everywhere */
.room-edit-pencil,
.edit-ornament-btn[data-kind="pencil"]{
  width:34px !important;
  height:34px !important;
  border-radius:999px !important;
  border:1px solid rgba(168,85,247,.42) !important;
  background:rgba(14,18,30,.92) !important;
  color:#f4f0ff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 0 18px rgba(168,85,247,.24) !important;
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  font-size:15px !important;
  line-height:1 !important;
  padding:0 !important;
}
.room-edit-pencil:hover,
.edit-ornament-btn[data-kind="pencil"]:hover{
  transform:scale(1.03);
  filter:brightness(1.06);
}

/* fixed pencil placement, never inside long title text */
.room-title .room-edit-pencil,
.room-title > .edit-ornament-btn[data-kind="pencil"],
.edit-title-host > .edit-ornament-btn[data-kind="pencil"]{
  position:absolute !important;
  top:50% !important;
  right:8px !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
}
.panel .room-edit-pencil,
.panel > .edit-ornament-btn[data-kind="pencil"],
.panel-head .room-edit-pencil,
.panel-head > .edit-ornament-btn[data-kind="pencil"]{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  transform:none !important;
}

/* editable cards look softly dimmed like locked, without ugly bar */
body.room-edit-mode #storiesArea .story-card,
body.edit-mode-active .story-card.editable-card,
body.edit-mode-active #groupArea1 .story-card,
body.edit-mode-active #groupArea2 .story-card,
body.edit-mode-active #groupArea3 .story-card,
body.edit-mode-active #groupArea4 .story-card,
body.edit-mode-active #groupArea5 .story-card,
body.edit-mode-active #stories-player .story-card,
body.edit-mode-active #stories-npc .story-card,
body.edit-mode-active #stories-item .story-card,
body.edit-mode-active #stories-chronicle .story-card,
body.edit-mode-active #stories-session .story-card{
  opacity:.62 !important;
  filter:grayscale(.18) saturate(.92) !important;
}

/* gear wrapper from old room.js */
.room-edit-gear{
  display:none;
  position:absolute !important;
  inset:0 !important;
  z-index:30 !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  cursor:pointer !important;
}
.room-edit-gear-badge{
  width:58px !important;
  height:58px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(14,18,30,.92) !important;
  border:1px solid rgba(168,85,247,.42) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 0 18px rgba(168,85,247,.24) !important;
  color:#f4f0ff !important;
  font-size:24px !important;
  line-height:1 !important;
  backdrop-filter:blur(6px);
}
.room-edit-gear:hover .room-edit-gear-badge{transform:scale(1.03);filter:brightness(1.06);}

/* gear button from campaign/extra js */
.edit-ornament-btn[data-kind="gear"]{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:58px !important;
  height:58px !important;
  border-radius:999px !important;
  border:1px solid rgba(168,85,247,.42) !important;
  background:rgba(14,18,30,.92) !important;
  color:#f4f0ff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 0 18px rgba(168,85,247,.24) !important;
  font-size:24px !important;
  line-height:1 !important;
  padding:0 !important;
  backdrop-filter:blur(6px);
}
.edit-ornament-btn[data-kind="gear"]:hover{
  filter:brightness(1.06);
}

/* enough inner spacing so centered gear never feels stuck to edges */
.story-card,
#campaignsArea .result-card,
#extraRoomsArea .result-card,
#membersArea .result-card,
#groupArea1 .story-card,
#groupArea2 .story-card,
#groupArea3 .story-card,
#groupArea4 .story-card,
#groupArea5 .story-card,
#stories-player .story-card,
#stories-npc .story-card,
#stories-item .story-card,
#stories-chronicle .story-card,
#stories-session .story-card{
  position:relative;
  overflow:hidden;
}

/* disable old ugly overlays / bars from prior attempts */
.room-edit-gear::before,
.room-edit-gear::after,
.edit-ornament-btn[data-kind="gear"]::before,
.edit-ornament-btn[data-kind="gear"]::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

/* cards other than stories: same ornament look but no dimming required unless edit mode */
body.edit-mode-active .result-card.editable-card,
body.room-edit-mode #campaignsArea .result-card,
body.room-edit-mode #extraRoomsArea .result-card{
  opacity:1 !important;
  filter:none !important;
}

/* visible toggles */
body.room-edit-mode .room-edit-pencil,
body.room-edit-mode .room-edit-gear,
body.edit-mode-active .edit-ornament-btn{
  display:flex !important;
}

/* hidden when edit mode off */
.room-edit-pencil,
.room-edit-gear,
.edit-ornament-btn{
  display:none;
}

/* keep clicks on ornaments active while edit mode blocks cards */
body.room-edit-mode .room-edit-gear,
body.room-edit-mode .room-edit-pencil,
body.edit-mode-active .edit-ornament-btn{
  pointer-events:auto !important;
}

/* nicer compact extra-room / campaign story groups */
body.campaign-page .story-grid,
body.extra-room-page .story-grid{
  gap:16px;
}

/* avoid title/icon overlap inside small compact cards */
#campaignsArea .result-card .result-title,
#extraRoomsArea .result-card .result-title,
#membersArea .result-card .result-title,
.story-card .result-title{
  position:relative;
  z-index:2;
}