/* Google Fonts loaded via <link> in HTML for parallel loading — see play.html */
body {
  /* Same dark mystical gradient that used to be drawn inside the canvas — now
     covers the entire viewport so the gradient shows through behind the
     panels and outside the canvas letterbox. */
  background: radial-gradient(ellipse at 50% 55%, #241638 0%, #120a1f 55%, #05030a 100%);
  background-color: #05030a;
  color: white;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#canvas , #canvas:focus {
  outline: none;
  background-color: transparent;
}

/* Floating drag ghost — visible above the category bar while picking a new item */
.drag-ghost {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  display: none;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  opacity: 0.92;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
}
.drag-ghost img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
}

html, body {
  height: 100%;
  overflow-y: auto;
}

.hide{display: none !important;}
/* ── Write Modal (paper / bay leaf) ── */
.write-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 5200;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.write-modal {
  background: rgba(18, 22, 34, 0.96);
  border: 1px solid rgba(100, 220, 220, 0.18);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.65);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  font-family: Raleway, sans-serif;
  color: #e0e4ec;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.write-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(100, 220, 220, 0.12);
}

.write-modal-title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #e0e4ec;
}

.write-modal-close {
  background: none;
  border: none;
  color: #6ee7e7;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.write-modal-close:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #a0f0f0;
}

.write-modal-body {
  padding: 16px 18px;
  flex: 1;
  min-height: 0;
  display: flex;
}

.write-modal-textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  background: rgba(8, 10, 18, 0.6);
  border: 1px solid rgba(100, 220, 220, 0.18);
  border-radius: 8px;
  padding: 12px 14px;
  color: #e8ecf2;
  font-family: Raleway, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.write-modal-textarea::placeholder {
  color: rgba(200, 210, 230, 0.35);
  font-style: italic;
}

.write-modal-textarea:focus {
  border-color: rgba(110, 231, 231, 0.55);
  box-shadow: 0 0 0 3px rgba(110, 231, 231, 0.12);
}

.write-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(100, 220, 220, 0.1);
}

.write-modal-btn {
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-family: Raleway, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  color: #fff;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}

.write-modal-btn:active {
  transform: scale(0.97);
}

.write-modal-btn-secondary {
  background: transparent;
  border: 1px solid rgba(200, 210, 230, 0.25);
  color: rgba(220, 225, 235, 0.85);
}

.write-modal-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(200, 210, 230, 0.45);
}

.write-modal-btn-primary {
  background: linear-gradient(135deg, #2c8a8a, #4ec0c0);
}

.write-modal-btn-primary:hover {
  background: linear-gradient(135deg, #34a3a3, #6ee7e7);
}

.write-modal-btn-danger {
  background: linear-gradient(135deg, #8a2c2c, #c04e4e);
}

.write-modal-btn-danger:hover {
  background: linear-gradient(135deg, #a33434, #e76e6e);
}

/* ── Sigil Maker Modal ─────────────────────────────────────────────── */
.sigil-modal {
  max-width: 360px;
}

.sigil-toolbar {
  display: flex;
  gap: 8px;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(100, 220, 220, 0.1);
}

.sigil-tool-btn {
  background: transparent;
  border: 1px solid rgba(100, 220, 220, 0.25);
  border-radius: 7px;
  color: rgba(220, 225, 235, 0.8);
  font-family: Raleway, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sigil-tool-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(110, 231, 231, 0.45);
  color: #e0e4ec;
}

.sigil-tool-active {
  background: rgba(110, 231, 231, 0.15);
  border-color: rgba(110, 231, 231, 0.55);
  color: #6ee7e7;
}

.sigil-tool-clear {
  margin-left: auto;
  border-color: rgba(200, 80, 80, 0.35);
  color: rgba(220, 130, 130, 0.9);
}

.sigil-tool-clear:hover {
  background: rgba(200, 80, 80, 0.1);
  border-color: rgba(200, 80, 80, 0.6);
}

.sigil-body {
  padding: 12px 18px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.sigil-hint {
  margin: 0;
  font-size: 13px;
  color: rgba(200, 210, 230, 0.55);
  font-style: italic;
  text-align: center;
  min-height: 16px;
}

.sigil-canvas-wrap {
  position: relative;
  width: 280px;
  height: 392px;
  max-width: 100%;
  max-height: 56vh;
}

.sigil-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: #f5f0e8;
  cursor: crosshair;
  touch-action: none;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.25);
}

.sigil-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Platypi', serif;
  font-size: 26px;
  color: rgba(50, 30, 80, 0.35);
  pointer-events: none;
  text-align: center;
  padding: 0 20px;
}

.sigil-placeholder.hide { display: none; }

@media (max-width: 600px) {
  .sigil-canvas-wrap { width: 240px; height: 336px; max-height: 50vh; }
}

/* ── Delete Confirmation Modal ─────────────────────────────────────── */
.delete-confirm-modal {
  max-width: 380px;
}

.delete-confirm-body {
  display: block;
  padding: 20px 18px;
}

.delete-confirm-message {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(220, 225, 235, 0.9);
}

@media (max-width: 600px) {
  /* align-items: flex-start keeps the modal near the top so the native
     keyboard (which grows from the bottom) doesn't hide it.
     The visualViewport JS listener adjusts overlay bottom as needed.     */
  .write-modal-overlay { padding: 10px; align-items: flex-start; padding-top: 16px; }
  .write-modal { max-height: 80dvh; border-radius: 14px; }
  .write-modal-textarea { min-height: 130px; font-size: 15px; }
  .write-modal-btn { padding: 10px 16px; flex: 1; }
}


#tooltip {
  position: fixed;
  z-index: 2000;
  display: none; 
  background: rgba(0,0,0,0.85); 
  color: white;
  padding: 6px 10px; 
  border-radius: 5px; 
  font-size: 14px; 
  pointer-events: none; 
  transition: opacity 0.1s ease;
  max-width: 200px;
  white-space: normal;
  word-break: break-word;
}

/* ── Transient Toast (e.g. rejected drop) ── */
.altar-toast {
  position: fixed;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -8px);
  z-index: 5400;
  background: rgba(18, 22, 34, 0.94);
  color: #f0e6d2;
  border: 1px solid rgba(220, 180, 120, 0.35);
  border-radius: 999px;
  padding: 12px 28px;
  font-family: Raleway, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.60);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  max-width: 86vw;
  text-align: center;
  white-space: nowrap;
}
.altar-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.altar-toast.hide {
  display: none;
}
@media (max-width: 600px) {
  .altar-toast {
    top: 35%;
    font-size: 13px;
    padding: 10px 20px;
  }
}

/* ── First-visit welcome hint ── */
.first-visit-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 3, 10, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fvh-in 0.35s ease;
}
.first-visit-overlay.fvh-out {
  animation: fvh-out 0.35s ease forwards;
}
@keyframes fvh-in  { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes fvh-out { from { opacity: 1; } to { opacity: 0; } }
.fvh-card {
  background: linear-gradient(160deg, #1a1130 0%, #0d0820 100%);
  border: 1px solid rgba(160, 110, 220, 0.4);
  border-radius: 18px;
  box-shadow: 0 0 40px rgba(120, 60, 200, 0.35);
  padding: 36px 40px 30px;
  max-width: 480px;
  width: 90%;
  text-align: center;
  color: #e8daf8;
}
.fvh-icon   { font-size: 2.4rem; margin-bottom: 8px; }
.fvh-title  { font-family: 'Platypi', serif; font-size: 2rem; color: #c8a8ff; margin: 0 0 16px; }
.fvh-list   { text-align: left; list-style: none; padding: 0; margin: 0 0 24px; font-size: 0.95rem; line-height: 1.65; }
.fvh-list li { padding: 5px 0 5px 1.4em; position: relative; }
.fvh-list li::before { content: '✦'; position: absolute; left: 0; color: #9060d0; font-size: 0.75em; top: 0.55em; }
.fvh-btn {
  background: linear-gradient(135deg, #7040c0, #4a2090);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 10px 32px;
  font-size: 1rem;
  font-family: 'Raleway', sans-serif;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.15s;
}
.fvh-btn:hover { background: linear-gradient(135deg, #8050d8, #5a30a8); transform: scale(1.04); }
@media (max-width: 500px) {
  .fvh-card { padding: 24px 20px 20px; }
  .fvh-title { font-size: 1.6rem; }
  .fvh-list { font-size: 0.88rem; }
}

/* ══════════════════════════════════════════
   Login Screen Overlay (HTML-based)
══════════════════════════════════════════ */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Raleway, sans-serif;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 55%, rgba(60, 18, 80, 0.97) 0%, rgba(8, 5, 18, 0.99) 72%);
}

/* Pulsing aura behind the card */
.login-bg-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160, 60, 200, 0.20) 0%, transparent 70%);
  animation: loginAuraPulse 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes loginAuraPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.16); }
}

/* Floating sparkle particles (injected by JS) */
.login-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(200, 155, 255, 0.75);
  pointer-events: none;
  animation: loginParticleFloat linear infinite;
}

@keyframes loginParticleFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-85vh) scale(1.3); }
}

/* Main card */
.login-card {
  position: relative;
  z-index: 2;
  background: rgba(14, 10, 26, 0.90);
  border: 1px solid rgba(180, 120, 255, 0.20);
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 0 60px rgba(140, 60, 200, 0.22),
    0 16px 48px rgba(0, 0, 0, 0.72);
  padding: 44px 36px 32px;
  max-width: 320px;
  width: calc(100% - 32px);
  text-align: center;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: loginCardIn 0.5s cubic-bezier(0.22, 0.94, 0.46, 1.01) both;
}

@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Logo container */
.login-logo-ring {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.login-logo-ring::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 90, 240, 0.32) 0%, transparent 68%);
  animation: loginLogoPulse 3.2s ease-in-out infinite;
}

@keyframes loginLogoPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.14); }
}

.login-logo {
  width: 110px;
  height: 110px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 14px rgba(180, 100, 240, 0.50));
  animation: loginLogoFloat 5s ease-in-out infinite;
  position: relative;
}

@keyframes loginLogoFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* Title */
.login-title {
  font-family: 'Platypi', serif;
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  text-shadow: 0 0 18px rgba(200, 130, 255, 0.55), 0 2px 8px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.login-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgba(200, 160, 255, 0.55);
  margin: 0 0 28px;
}

.login-board-picker {
  margin: -8px 0 18px;
  text-align: left;
}

.login-board-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(224, 206, 252, 0.8);
  margin: 0 0 8px;
}

.login-board-select {
  width: 100%;
  box-sizing: border-box;
  background: rgba(25, 16, 43, 0.82);
  border: 1px solid rgba(185, 140, 255, 0.45);
  border-radius: 10px;
  color: #f3ebff;
  font-family: Raleway, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 10px 12px;
  outline: none;
}

.login-board-select:focus {
  border-color: rgba(213, 175, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(195, 145, 255, 0.25);
}

.login-board-description {
  min-height: 18px;
  margin: 8px 2px 0;
  color: rgba(224, 206, 252, 0.72);
  font-size: 11px;
  line-height: 1.35;
}

/* ── Board Select inline overlay (step after login) ── */
.board-select-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  max-height: 240px;
  overflow-y: auto;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: rgba(185, 140, 255, 0.3) transparent;
}
.board-select-list::-webkit-scrollbar { width: 5px; }
.board-select-list::-webkit-scrollbar-thumb { background: rgba(185,140,255,0.3); border-radius: 4px; }

.board-select-item {
  background: rgba(25, 16, 43, 0.55);
  border: 1px solid rgba(185, 140, 255, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.board-select-item-info {
  min-width: 0;
  flex: 1;
}
.board-select-item:hover {
  border-color: rgba(185, 140, 255, 0.55);
  background: rgba(60, 24, 90, 0.55);
}
.board-select-item.selected {
  border-color: rgba(213, 175, 255, 0.85);
  background: rgba(80, 30, 110, 0.55);
  box-shadow: 0 0 0 2px rgba(195, 145, 255, 0.20);
}
.board-select-item-name {
  font-size: 13px;
  font-weight: 700;
  color: #f3ebff;
  letter-spacing: 0.4px;
}
.board-select-item-desc {
  margin-top: 3px;
  font-size: 11px;
  color: rgba(224, 206, 252, 0.60);
  line-height: 1.35;
}
/* ── Estilo para las miniaturas── */
.board-select-item-preview {
  width: 116px;
  height: 72px;
  border-radius: 8px;
  border: 1px solid rgba(185, 140, 255, 0.35);
  background: rgba(13, 8, 24, 0.70);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.board-select-item-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.board-select-item-preview-fallback {
  color: rgba(224, 206, 252, 0.58);
  font-size: 10px;
  letter-spacing: 0.2px;
  text-align: center;
  padding: 0 6px;
}
/* Private "Visible only to you" preview for the personal altar */
.board-select-item-preview-private {
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(120, 70, 180, 0.25) 0%, rgba(13, 8, 24, 0.85) 70%),
    repeating-linear-gradient(45deg, rgba(185, 140, 255, 0.06) 0 6px, transparent 6px 12px);
  border-color: rgba(185, 140, 255, 0.45);
  color: rgba(224, 206, 252, 0.85);
}
.board-select-private-icon {
  width: 28px;
  height: 28px;
  color: rgba(213, 175, 255, 0.85);
  filter: drop-shadow(0 0 6px rgba(180, 100, 240, 0.45));
}
.board-select-private-label {
  font-size: 10px;
  letter-spacing: 0.4px;
  text-align: center;
  color: rgba(224, 206, 252, 0.78);
  padding: 0 4px;
  line-height: 1.3;
}
@media (max-width: 768px) {
  .board-select-private-icon { width: 36px; height: 36px; }
  .board-select-private-label { font-size: 12px; }
}
/* ── Recorte PNG para las miniaturas── */
@media (max-width: 520px) {
  .board-select-item-preview {
    width: 98px;
    height: 62px;
  }
}
.board-select-empty {
  text-align: center;
  color: rgba(200, 165, 255, 0.65);
  font-size: 13px;
  padding: 16px 0;
}

/* ──────────────────────────────────────────────────────────────
   Full-screen Altar Selector (responsive grid, no inner scroll)
   Overrides the default boxed .login-card layout for #boardSelectScreen
   ────────────────────────────────────────────────────────────── */
.board-select-screen {
  align-items: stretch;
  justify-content: stretch;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.board-select-screen .login-bg-aura {
  top: 22%;
  width: 540px;
  height: 540px;
}

.board-select-screen .login-card {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  max-width: 1180px;
  width: 100%;
  padding: 36px 28px 32px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  text-align: center;
  animation: loginCardIn 0.5s cubic-bezier(0.22, 0.94, 0.46, 1.01) both;
}

.board-select-header {
  flex-shrink: 0;
  margin-bottom: 24px;
}

.board-select-screen .login-logo-ring {
  margin-bottom: 14px;
}

.board-select-screen .login-logo {
  width: 96px;
  height: 96px;
}

.board-select-title {
  font-size: 38px !important;
  margin: 0 0 6px;
}

.board-select-subtitle {
  letter-spacing: 3.5px !important;
  margin: 0 !important;
  font-size: 12px;
}

/* List becomes responsive grid: no inner scroll, fills available height */
.board-select-screen .board-select-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-height: none;
  overflow: visible;
  flex: 1 1 auto;
  align-content: start;
  padding: 4px;
  margin-bottom: 0;
  text-align: left;
}

.board-select-screen .board-select-item {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px;
  background: rgba(25, 16, 43, 0.62);
  border: 1px solid rgba(185, 140, 255, 0.28);
  border-radius: 16px;
  transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.board-select-screen .board-select-item:hover {
  transform: translateY(-3px);
  border-color: rgba(213, 175, 255, 0.7);
  background: rgba(60, 24, 90, 0.55);
  box-shadow: 0 12px 30px rgba(140, 60, 200, 0.28);
}

.board-select-screen .board-select-item.selected {
  border-color: rgba(213, 175, 255, 0.9);
  background: rgba(80, 30, 110, 0.6);
  box-shadow: 0 0 0 2px rgba(195, 145, 255, 0.25),
              0 12px 30px rgba(140, 60, 200, 0.30);
}

/* Preview image sits on top of the card */
.board-select-screen .board-select-item-preview {
  order: -1;
  width: 100%;
  height: 130px;
  border-radius: 12px;
}

.board-select-screen .board-select-item-info {
  flex: 0 0 auto;
}

.board-select-screen .board-select-item-name {
  font-size: 15px;
}

.board-select-screen .board-select-item-desc {
  font-size: 12px;
  margin-top: 4px;
  color: rgba(224, 206, 252, 0.72);
}

/* Mobile: full-screen, single column, larger tap targets */
@media (max-width: 768px) {
  .board-select-screen .login-card {
    padding: 28px 18px 28px;
  }
  .board-select-header {
    margin-bottom: 20px;
  }
  .board-select-screen .login-logo {
    width: 88px;
    height: 88px;
  }
  .board-select-title {
    font-size: 32px !important;
  }
  .board-select-screen .board-select-list {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 2px 0 24px;
  }
  .board-select-screen .board-select-item {
    padding: 14px;
    border-radius: 18px;
  }
  .board-select-screen .board-select-item-preview {
    height: 170px;
    border-radius: 14px;
  }
  .board-select-screen .board-select-item-name {
    font-size: 16px;
  }
  .board-select-screen .board-select-item-desc {
    font-size: 13px;
  }
}

/* Larger desktops: slightly bigger card preview */
@media (min-width: 1100px) {
  .board-select-screen .board-select-item-preview {
    height: 150px;
  }
}

/* Buttons */
.login-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.login-btn {
  width: 100%;
  padding: 14px 24px;
  border-radius: 12px;
  font-family: Raleway, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: transform 0.12s, box-shadow 0.18s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.login-btn:active { transform: scale(0.97); }

.login-btn-primary {
  background: linear-gradient(135deg, #c94e43 0%, #a82c42 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(180, 50, 60, 0.45);
}

.login-btn-primary:hover {
  box-shadow: 0 6px 28px rgba(200, 70, 70, 0.60);
  opacity: 0.93;
}

.login-btn-ghost {
  background: transparent;
  color: rgba(200, 155, 255, 0.88);
  border: 1px solid rgba(180, 110, 255, 0.40);
}

.login-btn-ghost:hover {
  background: rgba(160, 90, 220, 0.14);
  border-color: rgba(180, 120, 255, 0.70);
}

.login-error-msg {
  background: rgba(160, 20, 20, 0.55);
  border: 1px solid rgba(220, 80, 80, 0.55);
  border-radius: 10px;
  color: #fcc;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 14px;
  padding: 10px 14px;
  text-align: center;
}

/* Spinner */
.login-spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  min-height: 80px;
}

.login-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255,255,255,0.10);
  border-top-color: rgba(200,155,255,0.85);
  border-radius: 50%;
  animation: loginSpin 0.75s linear infinite;
}

@keyframes loginSpin { to { transform: rotate(360deg); } }

.login-spinner-text {
  font-size: 13px;
  color: rgba(200, 165, 255, 0.65);
  letter-spacing: 0.5px;
}

/* Create account link */
.login-create-link {
  display: block;
  font-size: 12px;
  color: rgba(200, 155, 255, 0.50);
  text-decoration: none;
  margin-bottom: 18px;
  letter-spacing: 0.3px;
  transition: color 0.15s;
}

.login-create-link:hover { color: rgba(200, 155, 255, 0.80); }

/* Remember checkbox */
.login-remember-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.2px;
}

.login-remember-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #c94e43;
  cursor: pointer;
}

@media (max-width: 440px) {
  .login-card { padding: 32px 20px 24px; }
  .login-title { font-size: 36px; }
  .login-logo { width: 90px; height: 90px; }
}

.help-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 20, 20, 0.8);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: auto;
}

#helpPanel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  width: 100%;
  height: 100%;
}

.help-container {
  position: relative;
  background-color: #fff;
  background-image: none;
  padding: 28px 32px 24px;
  width: 90%;
  max-width: 600px;
  border-radius: 18px;
  border: 1px solid rgba(140, 90, 200, 0.2);
  box-shadow: 0 4px 32px rgba(80, 40, 140, 0.18), 0 0 6px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  color: #1a1228;
}

/* ── Close button ── */
.help-close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: rgba(100, 70, 160, 0.55);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.help-close-btn:hover {
  color: #6030a8;
  background: rgba(120, 70, 200, 0.10);
}

/* ── Page header ── */
.help-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.help-page-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.help-page-title {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #2a1840;
  letter-spacing: 0.02em;
}

/* ── Body text ── */
.help-text {
  font-family: sans-serif;
  font-size: 0.97rem;
  line-height: 1.6;
  color: #1a1228;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  text-align: left;
}
.help-text p { margin: 0 0 10px; }
.help-text ul {
  margin: 0 0 6px;
  padding-left: 1.3em;
}
.help-text li { margin-bottom: 6px; }
.help-text strong { color: #2a1840; }
.help-text em { color: #5a3888; font-style: italic; }

/* ── Progress dots ── */
.help-progress {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 18px 0 6px;
}
.help-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(100, 70, 160, 0.2);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.help-dot.active {
  background: #7030c8;
  transform: scale(1.25);
}

/* ── Nav controls ── */
.help-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.help-nav-btn {
  background: rgba(120, 70, 200, 0.25);
  border: 1px solid rgba(160, 100, 255, 0.4);
  color: #c8a8ff;
  font-size: 16px;
  padding: 8px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.help-nav-btn:hover:not(:disabled) {
  background: rgba(140, 80, 220, 0.45);
  transform: scale(1.05);
}
.help-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.help-done-btn {
  background: linear-gradient(135deg, #7030c8, #9b50e0);
  border: none;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: filter 0.2s, transform 0.15s;
}
.help-done-btn:hover {
  filter: brightness(1.15);
  transform: scale(1.04);
}

@media (max-width: 600px) {
  .help-container { padding: 20px 18px 18px; }
  .help-page-title { font-size: 1.1rem; }
  .help-text { font-size: 0.9rem; }
}

/* ── Footer nav bar ── */
.altar-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1500;
  text-align: center;
  padding: 5px 12px;
  background: rgba(10, 13, 22, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
}

.altar-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 2px;
}

.altar-footer-links a {
  color: rgba(200, 210, 230, 0.55);
  text-decoration: none;
  font-family: Raleway, sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 3px;
  transition: color 0.2s, background 0.2s;
}

.altar-footer-links a:hover {
  color: #c8d2e6;
  background: rgba(255, 255, 255, 0.06);
}

.altar-footer-sep {
  color: rgba(200, 210, 230, 0.25);
  font-size: 10px;
  user-select: none;
}

@media (max-width: 400px) {
  .altar-footer-links a { font-size: 10px; }
}


/* ── Spectator prompt overlay ── */
.spectator-prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.spectator-prompt-panel {
  position: static !important;
  width: 300px;
  max-height: none;
}

.turn-panel {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2000;
  width: 300px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  background: rgba(18, 22, 34, 0.92);
  border: 1px solid rgba(100, 220, 220, 0.18);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  font-family: Raleway, sans-serif;
  color: #c8cdd8;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.turn-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(30, 40, 60, 0.6);
  border-bottom: 1px solid rgba(100, 220, 220, 0.1);
  cursor: pointer;
}

.turn-panel-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #e0e4ec;
}

.turn-panel-hint {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #6ee7e7;
  opacity: 0.75;
  margin-right: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  animation: hint-pulse 1.8s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}

.turn-panel-collapse {
  background: none;
  border: none;
  color: #6ee7e7;
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  pointer-events: none;
  transition: transform 0.2s;
  line-height: 1;
}

.turn-panel-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.turn-panel.collapsed .turn-panel-collapse {
  transform: rotate(-90deg);
}

.btn-switch-altar {
  background: none;
  border: 1px solid rgba(110, 231, 231, 0.35);
  border-radius: 4px;
  color: #6ee7e7;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  cursor: pointer;
  margin: 0 8px;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.btn-switch-altar:hover {
  background: rgba(110, 231, 231, 0.12);
  border-color: rgba(110, 231, 231, 0.65);
}

/* Glow pulse on header when someone joins the queue while collapsed */
@keyframes queue-glow {
  0%   { box-shadow: 0 0 0 0 rgba(110, 231, 231, 0.6); }
  30%  { box-shadow: 0 0 12px 4px rgba(110, 231, 231, 0.5); }
  70%  { box-shadow: 0 0 18px 6px rgba(110, 231, 231, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(110, 231, 231, 0); }
}

.turn-panel-header.queue-glow {
  animation: queue-glow 1.2s ease-out;
}

.turn-panel-body {
  padding: 8px 14px 10px;
  overflow-y: auto;
  max-height: calc(100vh - 80px);
  transition: max-height 0.25s ease, padding 0.25s ease;
}

.turn-panel.collapsed .turn-panel-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.turn-status {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.35;
  color: #a0a8b8;
}

.turn-timer {
  margin-bottom: 6px;
  min-height: 0;
  color: #6ee7e7;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.turn-timer:empty {
  display: none;
}

.turn-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.btn-queue {
  flex: 1;
  border: none;
  border-radius: 6px;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
  color: #fff;
}

.btn-join {
  background: linear-gradient(135deg, #1a8a6e, #22b88a);
}
.btn-join:hover:not(:disabled) {
  background: linear-gradient(135deg, #22b88a, #2ed9a0);
}

.btn-leave {
  background: linear-gradient(135deg, #4a4e60, #5c6178);
}
.btn-leave:hover:not(:disabled) {
  background: linear-gradient(135deg, #5c6178, #6e738a);
}

.btn-end {
  background: linear-gradient(135deg, #a84040, #d05050);
}
.btn-end:hover:not(:disabled) {
  background: linear-gradient(135deg, #c04848, #e06060);
}

.btn-queue:active:not(:disabled) {
  transform: scale(0.96);
}

.btn-queue:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.queue-section {
  border-top: 1px solid rgba(100, 220, 220, 0.08);
  padding-top: 6px;
}

.queue-list {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #8890a0;
}

.queue-list li {
  padding: 1px 0;
}

@media (max-width: 768px) {
  .turn-panel {
    width: auto;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 8px;
    max-height: 55vh;
    border-radius: 10px;
  }

  .turn-panel-header {
    padding: 8px 12px;
  }

  .turn-panel-body {
    padding: 8px 12px 10px;
    max-height: calc(55vh - 44px);
    overflow-y: auto;
  }

  .btn-queue {
    padding: 8px 0;
    font-size: 13px;
  }
}

/* ── Category Bar ───────────────────────────────────────────── */
.category-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1500;
  background: rgba(18, 22, 34, 0.94);
  border-top: 1px solid rgba(100, 220, 220, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: Raleway, sans-serif;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease;
  touch-action: none;
}

.category-bar.collapsed .category-grid-wrapper {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.category-bar.collapsed .category-tabs {
  max-height: 0;
  overflow: hidden;
}

.category-bar.collapsed .turn-panel-collapse {
  transform: rotate(-90deg);
}

/* ── Header ── */
.category-bar-header {
  position: relative; /* stacks above the absolute trash-zone overlay */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(30, 40, 60, 0.6);
  border-bottom: 1px solid rgba(100, 220, 220, 0.1);
  cursor: pointer;
  user-select: none;
}

.category-bar-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #e0e4ec;
}

/* ── Tab Strip ── */
.category-tabs {
  display: flex;
  align-items: center;
  max-height: 80px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  padding: 0;
  background: rgba(30, 40, 60, 0.5);
  border-bottom: 1px solid rgba(100, 220, 220, 0.08);
  transition: max-height 0.25s ease;
}

.category-tabs::-webkit-scrollbar {
  display: none;
}

.category-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
  min-width: 64px;
  padding: 8px 6px 6px;
  border: none;
  background: transparent;
  color: rgba(200, 210, 230, 0.55);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  font-family: Raleway, sans-serif;
  position: relative;
}

.category-tab-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
}

.category-tab-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  white-space: nowrap;
}

.category-tab:hover {
  color: #c8d2e6;
  background: rgba(255, 255, 255, 0.04);
}

.category-tab.active {
  color: #6ee7e7;
  background: rgba(110, 231, 231, 0.08);
}

.category-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: #6ee7e7;
  border-radius: 2px;
}


/* ── Trash / Remove Zone ── */
/* In trash-mode the underlying tabs + grid stay in the layout (just hidden)
   so the panel keeps its full height; the trash zone is overlaid on top. */
.category-bar.trash-mode .category-tabs,
.category-bar.trash-mode .category-grid-wrapper {
  visibility: hidden;
}
/* Hide scroll arrows when the remove-drop zone is active or the panel is collapsed */
.category-bar.trash-mode .category-scroll-btn,
.category-bar.collapsed .category-scroll-btn {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.category-bar.trash-mode {
  position: fixed; /* ensure abs-positioned trash zone anchors to the bar */
}
.category-bar.trash-mode .category-trash-zone {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: rgba(180, 60, 60, 0.18);
  border: 2px dashed rgba(200, 80, 80, 0.45);
}
.category-trash-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  margin: 12px auto;
  padding: 18px 0;
  font-size: 20px;
  font-family: Raleway, sans-serif;
  color: rgba(200, 210, 230, 0.55);
  background: rgba(180, 60, 60, 0.10);
  border: 2px dashed rgba(200, 80, 80, 0.3);
  border-radius: 8px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  pointer-events: none;
}
.category-trash-zone.active {
  color: #ff6b6b;
  background: rgba(255, 60, 60, 0.22);
  border-color: rgba(255, 100, 100, 0.6);
  transform: scale(1.03);
}

/* ── Item Grid (horizontal scroll with snap) ── */
.category-grid-wrapper {
  position: relative;
  padding: 8px 8px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  transition: max-height 0.25s ease, padding 0.25s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 220, 220, 0.15) transparent;
  touch-action: pan-x;
  scroll-snap-type: x proximity;
  /* Edge fade: content softly fades into the panel bg near both ends,
     signalling there's more to scroll toward on either side. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}

.category-grid-wrapper {
  scrollbar-color: rgba(140, 230, 230, 0.55) transparent;
  scrollbar-width: thin;
}
.category-grid-wrapper::-webkit-scrollbar {
  height: 8px;
}
.category-grid-wrapper::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}
.category-grid-wrapper::-webkit-scrollbar-thumb {
  background: rgba(140, 230, 230, 0.55);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.category-grid-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(170, 245, 245, 0.8);
}

.category-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  padding: 0 4px;
}

.category-grid-item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  cursor: grab;
  transition: background 0.12s, transform 0.1s;
  position: relative;
  /* Allow horizontal pan for scrolling the grid; vertical gestures become drag. */
  touch-action: pan-x;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  scroll-snap-align: center;
}

.category-grid-item:hover {
  background: rgba(110, 231, 231, 0.1);
  transform: scale(1.08);
  z-index: 10;
}

.category-grid-item:active {
  cursor: grabbing;
  transform: scale(0.95);
}

.category-grid-item img {
  max-width: 52px;
  max-height: 52px;
  object-fit: contain;
  pointer-events: none;
  image-rendering: auto;
}

/* ── Scroll arrows for the item grid ────────────────────────────── */
.category-grid-shell {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 8px;
}
.category-grid-shell .category-grid-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}
.category-scroll-btn {
  flex: 0 0 auto;
  align-self: center;
  z-index: 12;
  width: 34px;
  height: 56px;
  border: 1px solid rgba(140, 230, 230, 0.45);
  background: rgba(20, 30, 36, 0.78);
  color: rgba(220, 245, 245, 0.95);
  font-size: 28px;
  line-height: 1;
  font-family: serif;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.15s ease, background 0.12s ease, transform 0.12s ease;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.category-grid-shell.has-prev .category-scroll-left,
.category-grid-shell.has-next .category-scroll-right {
  opacity: 0.9;
  pointer-events: auto;
  visibility: visible;
}
.category-scroll-btn:hover {
  background: rgba(40, 60, 70, 0.92);
  transform: scale(1.06);
}
.category-scroll-btn:active {
  transform: scale(0.94);
}

/* item-label removed: tooltips for grid items use the page-level #tooltip element */

/* ── Activity Feed ── */
/* ── Activity Feed (collapsible) ── */
.activity-details {
  border-top: 1px solid rgba(100, 220, 220, 0.08);
  margin-top: 6px;
}

.activity-summary {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5a6070;
  font-weight: 600;
  cursor: pointer;
  padding: 5px 0;
  user-select: none;
  list-style: none;
  position: relative;
}

.activity-summary[data-unread]::after {
  content: attr(data-unread);
  display: inline-block;
  margin-left: 6px;
  min-width: 14px;
  padding: 0 4px;
  height: 14px;
  line-height: 14px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  border-radius: 7px;
  background: #b78cff;
  color: #1a1a25;
  letter-spacing: 0;
  box-shadow: 0 0 6px rgba(183, 140, 255, 0.6);
}

@keyframes activityPulse {
  0%   { color: #5a6070; }
  35%  { color: #d4b3ff; text-shadow: 0 0 6px rgba(183, 140, 255, 0.7); }
  100% { color: #5a6070; text-shadow: none; }
}

.activity-summary.pulse {
  animation: activityPulse 900ms ease-out;
}

.activity-summary::-webkit-details-marker {
  display: none;
}

.activity-summary::before {
  content: '▸ ';
  font-size: 9px;
}

.activity-details[open] .activity-summary::before {
  content: '▾ ';
}

.activity-feed {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  line-height: 1.45;
  color: #6a7080;
  max-height: 100px;
  overflow-y: auto;
}

.activity-feed li {
  padding: 1px 0;
  border-bottom: 1px solid rgba(100, 220, 220, 0.04);
}

.activity-feed li:last-child {
  border-bottom: none;
}

.activity-feed .feed-time {
  color: #4a5060;
  font-size: 10px;
  margin-right: 4px;
}

/* ── Options Modal ── */
.options-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.options-modal {
  background: rgba(18, 22, 34, 0.96);
  border: 1px solid rgba(100, 220, 220, 0.18);
  border-radius: 12px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
  width: 280px;
  font-family: Raleway, sans-serif;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.options-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(100, 220, 220, 0.1);
}

.options-modal-title {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #e0e4ec;
}

.options-modal-user {
  font-size: 12px;
  font-weight: 400;
  color: rgba(110, 231, 231, 0.65);
  letter-spacing: 0.3px;
  margin-top: 2px;
  text-transform: none;
}

.options-modal-close {
  background: none;
  border: none;
  color: #6ee7e7;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
}

.options-modal-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.options-modal-btn {
  border: none;
  border-radius: 8px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  color: #fff;
  transition: background 0.15s, transform 0.1s;
}

.options-modal-btn:active {
  transform: scale(0.97);
}

.options-modal-help {
  background: linear-gradient(135deg, #5a4a8a, #7a60b8);
}

.options-modal-help:hover {
  background: linear-gradient(135deg, #7a60b8, #9070d0);
}

.options-modal-toggle {
  background: rgba(26, 38, 52, 0.85);
  border: 1.5px solid rgba(80, 180, 160, 0.28);
  color: rgba(180, 200, 210, 0.70);
}

.options-modal-toggle:hover {
  background: rgba(30, 48, 60, 0.95);
  border-color: rgba(80, 180, 160, 0.50);
  color: #b0d8d0;
}

.options-modal-toggle--active {
  background: rgba(20, 80, 70, 0.80);
  border-color: rgba(80, 220, 190, 0.60);
  color: #90eed8;
}

.options-modal-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(100, 220, 220, 0.1);
  padding-top: 12px;
  margin-top: 2px;
}

.options-modal-links a {
  color: rgba(200, 210, 230, 0.65);
  text-decoration: none;
  font-family: Raleway, sans-serif;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  text-align: center;
}

.options-modal-links a:hover {
  color: #c8d2e6;
  background: rgba(255, 255, 255, 0.07);
}

.options-modal-links a[id$="LogoutLink"] {
  color: rgba(220, 100, 100, 0.7);
}

.options-modal-links a[id$="LogoutLink"]:hover {
  color: #e06060;
  background: rgba(200, 60, 60, 0.1);
}

.options-modal-links a[id$="LogoutLink"]:hover {
  color: #e06060;
  background: rgba(200, 60, 60, 0.1);
}

/* ── Cloth Theme Picker Modal ── */
.cloth-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 5100;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cloth-picker-modal {
  background: rgba(18, 22, 34, 0.97);
  border: 1px solid rgba(100, 220, 220, 0.18);
  border-radius: 14px;
  box-shadow: 0 6px 40px rgba(0, 0, 0, 0.7);
  width: 320px;
  max-width: 96vw;
  font-family: Raleway, sans-serif;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-bottom: 18px;
}

.cloth-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(100, 220, 220, 0.1);
}

.cloth-picker-title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #e0e4ec;
}

.cloth-picker-close {
  background: none;
  border: none;
  color: #6ee7e7;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
}

.cloth-picker-desc {
  font-size: 12px;
  color: rgba(180, 200, 210, 0.70);
  text-align: center;
  margin: 12px 18px 8px;
  line-height: 1.5;
}

.cloth-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px 16px 12px;
}

.cloth-theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}

.cloth-theme-swatch:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(100, 220, 220, 0.30);
}

.cloth-theme-swatch.selected {
  border-color: rgba(100, 220, 220, 0.75);
  background: rgba(100, 220, 220, 0.08);
}

.cloth-theme-swatch-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.cloth-theme-swatch-label {
  font-size: 10px;
  color: rgba(200, 210, 230, 0.75);
  text-align: center;
  line-height: 1.3;
}

.cloth-picker-locked {
  font-size: 12px;
  color: rgba(255, 180, 100, 0.85);
  text-align: center;
  margin: 0 18px 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 140, 40, 0.08);
  border: 1px solid rgba(255, 140, 40, 0.20);
  line-height: 1.5;
}

.cloth-picker-actions {
  display: flex;
  gap: 10px;
  padding: 4px 16px 0;
}

.cloth-picker-btn {
  flex: 1;
  border: none;
  border-radius: 8px;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.cloth-picker-btn:active {
  transform: scale(0.97);
}

.cloth-picker-cancel {
  background: rgba(26, 38, 52, 0.85);
  border: 1.5px solid rgba(80, 180, 160, 0.28);
  color: rgba(180, 200, 210, 0.70);
}

.cloth-picker-cancel:hover {
  background: rgba(30, 48, 60, 0.95);
  color: #b0d8d0;
}

.cloth-picker-save {
  background: linear-gradient(135deg, #5a4a8a, #7a60b8);
  color: #fff;
}

.cloth-picker-save:hover {
  background: linear-gradient(135deg, #7a60b8, #9070d0);
}

.cloth-picker-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cloth-picker-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Options modal: Reset Altar button ── */
.options-modal-reset {
  background: rgba(120, 30, 30, 0.55);
  border: 1.5px solid rgba(200, 60, 60, 0.35);
  color: rgba(255, 160, 160, 0.90);
}

.options-modal-reset:hover {
  background: rgba(160, 40, 40, 0.75);
  border-color: rgba(220, 80, 80, 0.60);
  color: #ffaaaa;
}

/* ── Reset confirmation modal ── */
.reset-confirm-modal {
  background: rgba(18, 22, 34, 0.97);
  border: 1px solid rgba(200, 60, 60, 0.30);
  border-radius: 14px;
  box-shadow: 0 6px 40px rgba(0, 0, 0, 0.7);
  width: 280px;
  max-width: 92vw;
  font-family: Raleway, sans-serif;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 24px 20px 18px;
}

.reset-confirm-msg {
  font-size: 14px;
  color: rgba(220, 200, 210, 0.85);
  text-align: center;
  line-height: 1.6;
  margin: 0 0 20px;
}

/* ── Responsive: Desktop with queue on right ── */
@media (min-width: 769px) {
  .turn-panel {
    right: 12px;
    top: 12px;
    bottom: auto;
    width: 340px;
    max-height: calc(100vh - 24px);
  }

  /* Hide the close/open hint on desktop — enough room for Switch btn without it */
  .turn-panel-hint {
    display: none;
  }

  .category-bar {
    right: 0;
  }

  /* Center inner content on the full viewport width */
  .category-bar-header,
  .category-tabs,
  .category-grid-wrapper {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Responsive: Mobile ── */
@media (max-width: 768px) {
  .category-bar {
    /* Stack above the queue status */
    bottom: 0;
    left: 0;
    right: 0;
  }

  .category-grid-item {
    width: 56px;
    height: 56px;
  }

  .category-grid-item img {
    max-width: 44px;
    max-height: 44px;
  }

  .category-tab {
    min-width: 52px;
    padding: 6px 4px 4px;
  }

  .category-tab-icon {
    font-size: 18px;
  }

  .category-tab-label {
    font-size: 8px;
  }

  /* Queue panel sits above category bar on mobile */
  .turn-panel {
    bottom: auto;
    top: 8px;
    left: 8px;
    right: 8px;
    max-height: 40vh;
  }

  /* Trash zone matches the height the panel had with tabs + grid visible
     (~56px tab row + 56+24px grid + paddings) so dragging back over the
     panel still lands on the drop target without it feeling cramped. */
  .category-trash-zone {
    margin: 14px auto;
    padding: 36px 0;
    font-size: 18px;
  }
}

/* ══════════════════════════════════════════════════════════════
   Guided Tutorial (replaces the legacy help-overlay)
   Built by virtual_altar_data/help.js
   ══════════════════════════════════════════════════════════════ */

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
}

.tutorial-overlay.hide { display: none; }

.tutorial-dimmer {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  /* Allow the user to interact with the underlying UI while the tutorial
     is open. The dimmer is purely visual; only the card captures clicks. */
  pointer-events: none;
}

.tutorial-highlight {
  position: absolute;
  border: 2px solid rgba(180, 140, 255, 0.95);
  border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45), 0 0 24px rgba(180, 140, 255, 0.55);
  pointer-events: none;
  transition: left 0.25s, top 0.25s, width 0.25s, height 0.25s;
}

.tutorial-card {
  position: absolute;
  width: min(420px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: rgba(22, 16, 36, 0.98);
  color: #f6efff;
  border: 1px solid rgba(180, 140, 255, 0.35);
  border-radius: 18px;
  padding: 18px 20px 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  font-family: sans-serif;
  box-sizing: border-box;
  transition: width 0.3s ease, max-width 0.3s ease, padding 0.28s ease;
}

.tutorial-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.tutorial-card-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.tutorial-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(180, 140, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
  color: #d8cbf0;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tutorial-icon-btn:hover {
  background: rgba(180, 140, 255, 0.2);
  color: #fff;
  border-color: rgba(180, 140, 255, 0.6);
}

.tutorial-progress {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
  margin: 0;
}

.tutorial-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(180, 140, 255, 0.25);
  transition: background 0.2s, transform 0.2s;
}

.tutorial-dot.active {
  background: #b48cff;
  transform: scale(1.3);
}

.tutorial-title {
  margin: 0 0 10px;
  font-family: 'Raleway', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #f6efff;
  letter-spacing: 0.01em;
  cursor: default;
}

/* When collapsed, the title doubles as the click-to-expand affordance. */
.tutorial-collapsed .tutorial-title {
  cursor: pointer;
  margin-bottom: 0;
}
.tutorial-collapsed .tutorial-title:hover { color: #fff; }

.tutorial-text {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: #ece4ff;
}

.tutorial-text strong { color: #fff; }
.tutorial-text em { color: #d4baff; font-style: italic; }

.tutorial-hint {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(180, 140, 255, 0.10);
  border-left: 3px solid rgba(180, 140, 255, 0.6);
  border-radius: 6px;
  color: #d8cbf0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.tutorial-hint.hide { display: none; }

.tutorial-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 16px;
}

.tutorial-btn {
  font-family: 'Raleway', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(180, 140, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  color: #f6efff;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s, border-color 0.18s;
  min-width: 72px;
}

.tutorial-btn:hover:not(:disabled) {
  background: rgba(180, 140, 255, 0.18);
  border-color: rgba(180, 140, 255, 0.7);
}

.tutorial-btn:active:not(:disabled) { transform: translateY(1px); }

.tutorial-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tutorial-btn.tutorial-skip {
  display: none; /* legacy class — close button replaced this */
}

.tutorial-btn.tutorial-primary {
  background: linear-gradient(135deg, #7c4ad2 0%, #a06fe6 100%);
  border-color: rgba(180, 140, 255, 0.8);
  color: #fff;
}

.tutorial-btn.tutorial-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #8a55e0 0%, #b07fee 100%);
}

.tutorial-btn.hide { display: none; }

/* ── Collapsed state ──────────────────────────────────────────
   Hides the dimmer, highlight and card body. Only the title row
   stays visible so the user can interact with the underlying app
   unobstructed and re-expand the card with one tap. */
.tutorial-collapsed .tutorial-dimmer,
.tutorial-collapsed .tutorial-highlight {
  display: none !important;
}
.tutorial-card-body {
  overflow: hidden;
  max-height: 700px;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.22s ease;
}

.tutorial-collapsed .tutorial-card-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.tutorial-collapsed .tutorial-card {
  width: auto;
  max-width: min(360px, calc(100vw - 24px));
  padding: 10px 12px;
  /* Pin to the top-right of the viewport when collapsed. */
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
}
/* Some steps anchor at the bottom so the collapsed bubble doesn't cover
   the UI the step is pointing at (e.g. the BOS hamburger menu or the
   Music modal close button at the top of their containers). */
.tutorial-collapsed.tutorial-anchor-bottom .tutorial-card {
  top: auto !important;
  bottom: 12px !important;
}

@media (max-width: 680px) {
  .tutorial-card {
    left: 12px !important;
    right: 12px !important;
    width: auto;
    bottom: calc(160px + env(safe-area-inset-bottom));
    top: auto !important;
    padding: 14px;
    max-height: calc(100vh - 200px);
  }
  .tutorial-collapsed .tutorial-card {
    /* Pin to the top-right on mobile when collapsed so it stays out of
       the way of the altar canvas (including items near the bottom). */
    top: 12px !important;
    bottom: auto !important;
    left: auto !important;
    right: 12px !important;
    max-width: min(280px, calc(100vw - 24px));
  }
  .tutorial-collapsed.tutorial-anchor-bottom .tutorial-card {
    /* Push collapsed bubble above the bottom panel on mobile so it stays
       out of the way of the BOS hamburger / Music modal close button. */
    top: auto !important;
    bottom: calc(160px + env(safe-area-inset-bottom)) !important;
  }
  .tutorial-title { font-size: 1.05rem; }
  .tutorial-text { font-size: 0.92rem; }
  .tutorial-btn { padding: 10px 14px; font-size: 0.92rem; min-width: 64px; }
  .tutorial-icon-btn { width: 34px; height: 34px; font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-highlight, .tutorial-card, .tutorial-card-body, .tutorial-dot, .tutorial-btn {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   Preset Hint Tooltip
   Shown once after the tutorial ends / is skipped, if spell
   presets are available. Highlights the Book of Shadows item.
   ══════════════════════════════════════════════════════════════ */

.preset-tooltip-overlay {
  position: fixed;
  inset: 0;
  z-index: 11500;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preset-tooltip-overlay.hide { display: none; }

.preset-tooltip-card {
  width: min(300px, calc(100vw - 24px));
  background: rgba(22, 16, 36, 0.97);
  color: #f6efff;
  border: 1px solid rgba(180, 140, 255, 0.4);
  border-radius: 16px;
  padding: 14px 16px 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  pointer-events: all;
  animation: preset-card-in 0.25s ease-out;
}

@keyframes preset-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.preset-tooltip-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: rgba(200, 180, 240, 0.7);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.preset-tooltip-close:hover { color: #fff; background: rgba(180,140,255,0.15); }

.preset-tooltip-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 22px;
  margin-bottom: 12px;
}

.preset-tooltip-icon { font-size: 1.5rem; flex-shrink: 0; }

.preset-tooltip-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #e8dcff;
}

.preset-tooltip-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.preset-tooltip-btn-primary,
.preset-tooltip-btn-secondary {
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  font-weight: 600;
}

.preset-tooltip-btn-primary {
  background: rgba(140, 100, 255, 0.85);
  color: #fff;
}
.preset-tooltip-btn-primary:hover { background: rgba(160, 120, 255, 0.95); }

.preset-tooltip-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(200, 180, 240, 0.85);
}
.preset-tooltip-btn-secondary:hover { background: rgba(255, 255, 255, 0.14); }

@media (prefers-reduced-motion: reduce) {
  .preset-tooltip-card { animation: none; }
}