* { box-sizing: border-box; font-family: system-ui, sans-serif; }
body { margin: 0; background: #1b1b1f; color: #e8e8ec; }
#app { min-height: 100vh; display: flex; flex-direction: column; }

/* Belt-and-suspenders: some elements below set their own `display` value, which
   (being author CSS) can override the browser's built-in "hidden means invisible"
   rule. This guarantees [hidden] always wins regardless of what else sets display. */
[hidden] { display: none !important; }

#topbar { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1.5rem; border-bottom: 1px solid #333; }

/* logo.png has a lot of blank/gradient padding baked into the canvas around the actual
   wordmark, so displaying it at its native aspect ratio makes the text tiny and unreadable
   at any reasonable header height. This crops that padding out: the image is rendered much
   taller than the visible window and centered, then the window's overflow:hidden clips away
   the excess top/bottom margin so the wordmark itself fills the space. */
.logo-wrap { height: 64px; width: 200px; overflow: hidden; position: relative; }
.logo-wrap img {
  position: absolute; top: 50%; left: 50%; height: 190%; width: auto;
  transform: translate(-50%, -50%);
}
#user-badge { display: flex; align-items: center; gap: 0.6rem; }
#user-avatar { width: 28px; height: 28px; border-radius: 50%; }

.view { flex: 1; padding: 1.5rem; max-width: 720px; width: 100%; margin: 0 auto; overflow-y: auto; }
#view-create { max-width: 860px; }

.button { display: inline-block; padding: 0.6rem 1.2rem; background: #4a3f8a; color: #fff; border-radius: 6px; text-decoration: none; margin-top: 1rem; }

.card, .tile { background: #232329; border: 1px solid #333; border-radius: 8px; padding: 1.25rem; margin: 1rem 0; }
.card-label, .tile-label { font-size: 0.75rem; letter-spacing: 0.05em; color: #9a8fe0; text-transform: uppercase; }
.card-title, .tile-title { font-size: 1.3rem; font-weight: 600; margin: 0.25rem 0 0.75rem; }
.tile-secondary { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; margin-bottom: 0.5rem; padding: 0.5rem; background: #2a2a30; border: none; color: inherit; border-radius: 4px; cursor: pointer; }

.continue-card-body { display: flex; align-items: center; gap: 1rem; }
.continue-card-body button { margin-right: 0.5rem; }

.button-danger { background: #4a1f1f; color: #ffb4b4; }
.button-danger:hover { background: #5a2626; }

.tile-secondary-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.tile-secondary-row .tile-secondary { margin-bottom: 0; flex: 1; }
.tile-delete-btn {
  flex-shrink: 0; width: 32px; height: 32px; padding: 0; display: flex; align-items: center;
  justify-content: center; background: #2a2a30; color: #ffb4b4; border-radius: 6px; font-size: 0.9rem;
}
.tile-delete-btn:hover { background: #4a1f1f; }

.campaign-header-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.avatar-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: #2a2a30; font-size: 1.3rem;
}

.party-member { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1.25rem; }
.party-member .avatar-img { width: 28px; height: 28px; }

.wizard-step h2 { margin-top: 0; }
.wizard-step input, .wizard-step textarea, .wizard-step select {
  width: 100%; padding: 0.6rem; border-radius: 6px; border: 1px solid #444; background: #111; color: inherit; margin-bottom: 0.75rem;
}

#error-banner { background: #4a1f1f; color: #ffb4b4; border: 1px solid #7a2f2f; padding: 0.75rem 1.5rem; }

.hint { font-size: 0.85rem; color: #9a8fe0; margin-bottom: 0.75rem; }

.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.class-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 1rem 0.5rem; background: #232329; border: 1px solid #333; border-radius: 8px;
  color: inherit; cursor: pointer; text-align: center;
}
.class-tile .class-icon { font-size: 2rem; }
.class-tile .class-icon-img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.class-tile .class-name { font-weight: 600; }
.class-tile .class-rationale { font-size: 0.7rem; color: #b8a9ff; }
.class-tile .badge {
  position: absolute; top: 6px; right: 6px; font-size: 0.6rem; background: #4a3f8a;
  padding: 0.1rem 0.4rem; border-radius: 999px;
}
.class-tile.suggested { border-color: #8a7ae0; }
.class-tile.selected { border-color: #8a7ae0; background: #2d2740; box-shadow: 0 0 0 2px #8a7ae0; }

.race-picker { display: flex; gap: 1.5rem; align-items: flex-start; }

.race-list {
  flex: 1 1 320px; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem; margin: 1rem 0; max-height: 480px; overflow-y: auto; padding-right: 0.25rem;
}
.race-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center;
  background: #232329; border: 1px solid #333; border-radius: 10px; padding: 1rem;
  color: inherit; cursor: pointer;
}
.race-card.selected { border-color: #8a7ae0; background: #2d2740; box-shadow: 0 0 0 2px #8a7ae0; }
.race-card-image { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; }
.race-card-icon-emoji {
  width: 88px; height: 88px; font-size: 2.5rem; display: flex;
  align-items: center; justify-content: center; background: #1a1a1f; border-radius: 8px;
}
.race-card-name { font-weight: 600; font-size: 0.9rem; }

/* Stationary bio panel next to the grid -- updates on hover/focus/select instead of
   a floating tooltip, so it can never run off the top/bottom of the screen. */
.race-detail-panel {
  flex: 1 1 300px; position: sticky; top: 1rem; align-self: flex-start; margin-top: 1rem;
  min-height: 240px; background: #1a1a1f; border: 1px solid #444; border-radius: 8px; padding: 1.25rem;
}
.race-detail-panel .hint { margin: 0; }
.race-detail-panel .race-card-header { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.race-detail-panel .race-card-header h3 { margin: 0; font-size: 1.2rem; }
.race-detail-panel .race-card-meta { font-size: 0.8rem; color: #9a8fe0; }
.race-detail-panel .race-card-description { margin: 0 0 0.75rem; line-height: 1.4; }
.race-detail-panel .race-card-traits { margin: 0; padding-left: 1.2rem; }
.race-detail-panel .race-card-traits li { margin-bottom: 0.35rem; font-size: 0.88rem; line-height: 1.35; }

@media (max-width: 700px) {
  .race-picker { flex-direction: column; }
  .race-detail-panel { position: static; width: 100%; }
}

.portrait-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin: 0.75rem 0; }
#cc-portrait-wrap { background: #1a1a1f; border: 1px solid #444; border-radius: 8px; padding: 0.5rem; }
#cc-portrait-img { display: block; width: 220px; height: 220px; object-fit: cover; border-radius: 6px; }

.pc-badge {
  /* top clears the topbar (logo + padding) so this doesn't sit on top of the
     sign-out button -- topbar is ~81px tall, so 6rem/96px leaves a clean gap. */
  position: fixed; top: 6rem; right: 1.5rem; z-index: 20;
  display: flex; align-items: center; gap: 0.65rem;
  background: #232329; border: 1px solid #444; border-radius: 999px;
  padding: 0.5rem 1rem 0.5rem 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.pc-badge-avatar-slot .avatar-img,
.pc-badge-avatar-slot .avatar-placeholder { width: 40px; height: 40px; }
.pc-badge-name { font-weight: 700; font-size: 0.85rem; line-height: 1.2; }
.pc-badge-hp { font-size: 0.75rem; color: #b8a9ff; line-height: 1.2; }
.pc-badge-hp span { font-weight: 600; color: inherit; }

@media (max-width: 700px) {
  .pc-badge { position: static; margin-bottom: 1rem; align-self: flex-start; }
}

#view-campaign { display: flex; flex-direction: column; max-width: 1100px; }

.campaign-layout { display: flex; gap: 1.25rem; align-items: flex-start; flex: 1; min-height: 0; }
.campaign-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.campaign-sidebar {
  position: relative; flex: 0 0 240px; background: #1e1e24; border: 1px solid #333;
  border-radius: 8px; padding: 0.75rem; align-self: stretch; overflow-y: auto;
}
.campaign-sidebar.collapsed { flex-basis: 44px; padding: 0.75rem 0.5rem; }
.campaign-sidebar.collapsed .sidebar-body { display: none; }
.sidebar-toggle {
  width: 28px; height: 28px; padding: 0; margin-bottom: 0.5rem; background: #2a2a30;
  border: 1px solid #444; border-radius: 6px; color: inherit; cursor: pointer; line-height: 1;
}
.campaign-sidebar.collapsed .sidebar-toggle { transform: rotate(180deg); }

.sidebar-tabs { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; }
.sidebar-tab {
  text-align: left; background: transparent; border: none; color: #9a9aa4;
  padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.85rem; cursor: pointer;
}
.sidebar-tab:hover { background: #2a2a30; color: inherit; }
.sidebar-tab.active { background: #2d2740; color: #fff; font-weight: 600; }

.sidebar-panel { font-size: 0.85rem; }
.sidebar-panel .hint { margin: 0; }

.char-sheet-name { font-size: 1rem; font-weight: 700; margin-bottom: 0.15rem; }
.char-sheet-sub { color: #9a8fe0; font-size: 0.8rem; margin-bottom: 0.75rem; }
.char-sheet-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
.char-stat { background: #2a2a30; border-radius: 6px; padding: 0.4rem; text-align: center; }
.char-stat .label { display: block; font-size: 0.65rem; color: #9a9aa4; text-transform: uppercase; }
.char-stat .value { display: block; font-size: 0.95rem; font-weight: 700; }
.char-sheet-vitals { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.8rem; color: #b8a9ff; }
.char-sheet-section { margin-bottom: 0.75rem; }
.char-sheet-section h4 { margin: 0 0 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: #9a8fe0; }
.char-sheet-section p { margin: 0; line-height: 1.4; }
.item-list { list-style: none; margin: 0; padding: 0; }
.item-list li { background: #2a2a30; border-radius: 6px; padding: 0.4rem 0.6rem; margin-bottom: 0.35rem; }

@media (max-width: 800px) {
  .campaign-layout { flex-direction: column; }
  .campaign-sidebar { flex-basis: auto; width: 100%; }
}

/* Fixed-height scrolling chat box -- without a max-height, this (and the sidebar, which
   stretches to match it via .campaign-sidebar's align-self: stretch) just kept growing
   taller with every turn instead of staying put and scrolling internally. */
#log { flex: 1; overflow-y: auto; border: 1px solid #333; border-radius: 4px; padding: 1rem; margin: 1rem 0; white-space: pre-wrap; min-height: 300px; max-height: 55vh; }
.entry { margin-bottom: 1rem; }
.entry .actor { font-weight: bold; }
.entry .dm { color: #b8a9ff; }
.entity-name { font-weight: 700; }

.suggestions-row { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.suggestion-chip {
  display: flex; align-items: baseline; gap: 0.75rem; width: 100%; text-align: left;
  background: #1e1e24; border: 1px solid #333; padding: 0.75rem 1rem; border-radius: 8px;
  cursor: pointer; color: inherit; font-size: 0.9rem;
}
.suggestion-chip:hover { border-color: #8a7ae0; }
.suggestion-chip:disabled { opacity: 0.5; cursor: not-allowed; }
.suggestion-index { color: #777; font-weight: 600; min-width: 1em; flex-shrink: 0; }
.suggestion-category { font-weight: 700; min-width: 100px; flex-shrink: 0; }
.suggestion-text { flex: 1; }
.suggestion-other { border-style: dashed; opacity: 0.85; color: #9a9a9a; }

form { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
input, select, textarea { flex: 1; padding: 0.5rem; border-radius: 4px; border: 1px solid #444; background: #111; color: inherit; }
button { padding: 0.5rem 1rem; border-radius: 4px; border: none; background: #4a3f8a; color: white; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: not-allowed; }