html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI";
  touch-action: pan-y;
}

body {
  background: #e5e7eb;
  -webkit-user-select: none; /* Safari / old Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* old Edge/IE */
  user-select: none;         /* standard */
}

.app {
  height: 100vh;        /* not min-height */
  display: flex;
  flex-direction: column;
  overflow: hidden;     /* prevent scrolling */
}



 








/* PLAYFIELD */

.playfield {
  flex: 0 0 75%;
  padding: 12px 16px;
  background: radial-gradient(circle at top, #f5f7ff 0, #e3e7f0 40%, #d7dde8 100%);
  display: flex;
  touch-action: pan-y;
}

.board {
  position: relative;
  flex: 1;
  border-radius: 16px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 6px 18px rgba(15,23,42,0.15);
  overflow: visible;
  z-index: 3;
  touch-action: pan-y;
}

.board-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #9ca3af;
  font-size: 0.9rem;
}

.resize-handle {
  height: 0px;
  width: 100%; 
  background: #020617;
  cursor: row-resize;
  position: relative;
  z-index: 1;
  touch-action: none;
}

/* Optional small lighter line in the middle for “grip” feel */
.resize-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10%;
  height: 6px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #4b5563;
}



/* CHIPS */

.chip {
  display: inline-block; 
  margin: 3px; 
  padding: 6px 12px;
  border-radius: 999px;
  touch-action: none;

  background: #ffffff;          /* white */
  border: 1px solid #111827;    /* dark border */

  color: #111827;               /* dark text */
  font-size: 0.8rem;
  white-space: nowrap;
  cursor: pointer;

  transition: background 0.15s ease, box-shadow 0.15s ease;
}






/* TILES */

.board-item {
  position: absolute;
  padding: 6px 12px;
  border-radius: 999px;
  touch-action: none;

  background: #ffffff;            /* white background */
  border: 1px solid #111827;      /* dark border */
  color: #111827;                 /* dark text */
  
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  z-index: 20; 

  box-shadow: 0 0 18px rgba(0,0,0,0.14);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease
}



/* Highlight state (glow + scale) */
.board-item.highlighted {
  transform: scale(1.12);
  border-color: #2563eb;               /* blue glow border */
  box-shadow: 0 0 18px rgba(37,99,235,0.35);
}


.board-item.combining {
  animation: combinePulse 0.45s ease-in-out infinite alternate;
  pointer-events: none; 
}

@keyframes combinePulse {
  from {
    /* match the highlighted state */
    transform: scale(1.12);
    box-shadow: 0 0 18px rgba(37,99,235,0.35);
  }
  to {
    /* a bit smaller + less blue glow */
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(37,99,235,0.25);
  }
}


/* New element flash (simple, no pseudo-elements) */
.board-item.new-element {
  animation: newElementSparkle 0.45s ease-out;
}

@keyframes newElementSparkle {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}




.clear-board-icon {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 10;

  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.clear-board-icon img {
  display: block;
  width: 50px;   /* tweak size here */
  height: 50px;
}


/* MENU */

.menu {
  flex: 0 0 25%;
  background: #111827;
  color: #e5e7eb;
  padding: 10px 16px;
  box-shadow: 0 -8px 16px rgba(15,23,42,0.5);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.menu-status {
  font-size: 0.8rem;
  color: #cbd5f5;
}

.error { color: #fca5a5; }

.menu-elements {
  display: flex;
  flex-wrap: wrap;        /* wrap items onto new rows */
  justify-content: flex-start;

  padding-top: 4px;
  padding-bottom: 40px;   /* ⬅ gives breathing room for last row */

  /* IMPORTANT: let it fill remaining menu space, but be shrinkable */
  flex: 1 1 auto;
  min-height: 0;

  overflow-y: auto;       /* vertical scrolling */
  overflow-x: hidden;     /* no horizontal scroll */
  align-content: flex-start;
}


/* ===== Custom scrollbar for the library (right side) ===== */

/* WebKit browsers (Chrome / Edge / Safari) */
.menu-elements::-webkit-scrollbar {
  width: 8px;              /* thickness */
}

.menu-elements::-webkit-scrollbar-track {
  background: #020617;     /* same as menu background */
}

.menu-elements::-webkit-scrollbar-thumb {
  background: #4b5563;     /* dark grey thumb */
  border-radius: 999px;    /* fully rounded */
  border: 2px solid #020617;  /* creates a little inset effect */
}

.menu-elements::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;     /* slightly lighter on hover */
}

/* Firefox */
.menu-elements {
  scrollbar-width: thin;                 /* thin scrollbar */
  scrollbar-color: #4b5563 #020617;      /* thumb color | track color */
}

.menu-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}




/* Container for button + popup */
.sort-wrapper {
  position: relative;
}

/* Sort pill button */
.sort-button {
  padding: 6px 18px;              /* bigger */
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #1f2937; 
  color: #e5e7eb;
  font-size: 0.82rem;             /* slightly larger */
  min-width: 110px;               /* wider pill */

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.08s ease,
    box-shadow 0.12s ease;
}


.sort-button:hover {
  background: #020617;
  border-color: #9ca3af;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* Popup menu */
.sort-menu {
  position: absolute;
  left: 0;                         /* align to right edge of button */
  bottom: calc(100% + 6px);         /* unfold upwards */
  min-width: 140px;

  background: #020617;
  border-radius: 10px;
  border: 1px solid #4b5563;
  box-shadow: 0 10px 24px rgba(0,0,0,0.7);
  padding: 4px;

  z-index: 30;
}



/* Items inside popup */
.sort-menu-item {
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #e5e7eb;
  font-size: 0.78rem;
  cursor: pointer;

  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.sort-menu-item:hover {
  background: #1f2937;
  color: #f9fafb;
}


.sort-dir-button {
  margin-left: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #1f2937; 
  color: #e5e7eb;
  font-size: 0.75rem;

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.08s ease,
    box-shadow 0.12s ease;
}

.sort-dir-button:hover {
  background: #020617;
  border-color: #9ca3af;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}



.search-input {
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #1f2937;
  color: #e5e7eb;
  font-size: 0.82rem;
  min-width: 140px;

  outline: none;
  display: inline-flex;
  align-items: center;

  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.08s ease,
    box-shadow 0.12s ease;
}

.search-input::placeholder {
  color: #6b7280;
}

.search-input:focus,
.search-input:hover {
  background: #020617;
  border-color: #9ca3af;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}







/* ===== Menu button inside board (top-left) ===== */

.menu-board-icon {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 10;

  border-radius: 999px;
  border: 1px solid #4b5563;
  padding: 4px 10px;
  background: #0F172AF0;
  color: #e5e7eb;
  font-size: 0.8rem;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.08s ease,
    box-shadow 0.12s ease;
}

.menu-board-icon:hover {
  background: #111827;
  border-color: #9ca3af;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
}





/* ===== Center modal ===== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-window {
  width: 420px;
  max-width: 90vw;
  max-height: 88vh;

  background: #0b1120;
  color: #e5e7eb;
  border-radius: 18px;
  border: 1px solid #4b5563;
  box-shadow: 0 24px 60px rgba(0,0,0,0.75);

  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;   /* centers the text */
  padding: 8px 0 8px 0; 
}

/* Center title visually even with side buttons */
.modal-title-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

/* User button (top-left) */
.modal-user-btn {
  position: absolute;
  left: 0;
  top: 60%;
  transform: translateY(-50%);

  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #1f2937;
  background: #020617;

  color: #9ca3af;
  font-size: 0.8rem;
  cursor: pointer;

  transition: background 0.12s ease, border-color 0.12s ease;
}

.modal-user-btn:hover {
  background: #111827;
  border-color: #4b5563;
  box-shadow: 0 6px 14px rgba(0,0,0,0.6);
}

.modal-settings {
  position: absolute;
  right: 30px;
  top: 58%;
  transform: translateY(-50%);

  width: 23px;
  height: 23px;
  border-radius: 50%;

  border: 1px solid #4b5563;
  background: transparent;

  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  padding: 0;

  transition:
    color 0.12s ease,
    border-color 0.12s ease;
}

.modal-settings:hover {
  color: #e5e7eb;
  border-color: #9ca3af;
}


/* Close button stays top-right */
.modal-close {
  position: absolute;
  right: 0;
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
}

.modal-close:hover {
  color: #e5e7eb;
}

.mode-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mode-card {
  width: 100%;
  text-align: left;
  border-radius: 12px;
  border: 1px solid #1f2937;
  background: #020617;
  padding: 9px 14px;
  cursor: pointer;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  

  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.08s ease,
    box-shadow 0.12s ease;
}

.mode-card-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.mode-streak {
  font-size: 0.8rem;
  font-weight: 600;
  color: #9ca3af;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.mode-streak-emoji {
  font-size: 1rem;         /* bigger emoji */
  line-height: 1;
  display: inline-flex;
  align-items: center;
}


.mode-card:hover {
  background: #111827;
  border-color: #4b5563;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.6);
}

.mode-card.active {
  border-color: #f97316;
  box-shadow: 0 0 0 1px rgba(249,115,22,0.6);
}

.mode-name {
  font-size: 0.96rem;
  font-weight: 500;
  color: #9ca3af
}

.mode-desc {
  font-size: 0.80rem;
  color: #6b7280;
}



/* ===== target drag and drop zone ===== */

.target-popup {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;

  background:#0F172AF0;
  color: #e5e7eb;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease
}

.target-popup.highlighted {
  border-color: #2563eb;
  transform: translateX(-50%) scale(1.02);
}

.target-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: #9ca3af;
  width: 100%;
  text-align: center;
}

.target-word {
  font-size: 0.90rem;
  font-weight: 600;
  color: #fef9c3; /* soft yellow highlight */
  width: 100%;
  text-align: center;
}

.target-hint {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-top: 2px;
  letter-spacing: 0.02em;
  width: 100%;
  text-align: center;
}





.result-buttons {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.result-btn-primary,
.result-btn-secondary {
  flex: 1;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.result-btn-primary {
  background: #22c55e;      /* green */
  color: #022c22;
  border-color: #16a34a;
}

.result-btn-primary:hover {
  filter: brightness(1.05);
}

.result-btn-secondary {
  background: #020617;
  color: #e5e7eb;
  border-color: #4b5563;
}

.result-btn-secondary:hover {
  background: #111827;
}


.craftle-result-title {
  font-size: 1.3rem;
  text-align: center;
}

.result-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.result-target-block {
  text-align: center;
}

.result-target-word-display {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #020617;
  color: #fef9c3;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.result-stats-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.result-stat-card {
  flex: 1 1 0;
  border-radius: 10px;
  border: 1px solid #1f2937;
  background: #020617;
  padding: 6px 8px;
}

.result-stat-label {
  font-size: 0.7rem;
  color: #9ca3af;
  margin-bottom: 2px;
}

.result-stat-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e5e7eb;
}





.user-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.user-stat-card {
  border-radius: 10px;
  border: 1px solid #1f2937;
  background: #020617;
  padding: 8px 10px;
}

.user-stat-label {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-bottom: 2px;
}

.user-stat-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e5e7eb;
}

.user-stat-sub {
  margin-top: 2px;
  font-size: 0.68rem;
  color: #6b7280;
}

.user-extra-section {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.user-extra-btn {
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #111827;
  color: #e5e7eb;
  font-size: 0.8rem;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.user-extra-btn:hover {
  background: #1f2937;
  border-color: #9ca3af;
}




.info-text {
  font-size: 0.82rem;
  color: #cbd5f5;
  line-height: 1.45;
  margin-left: 6px;
}

.info-controls-title {
  margin-top: 15px;
  margin-bottom: 4px;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
}

.info-controls-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.info-controls-table td {
  padding: 6px 4px;
  border-bottom: 1px solid #1f2937;
  color: #e5e7eb;
}

.info-controls-table td:first-child {
  color: #9ca3af;
  width: 45%;
  white-space: nowrap;
}


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

  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #1f2937;
  background: #020617;
}

.info-toggle-label {
  font-size: 0.8rem;
  color: #9ca3af;
}

.info-toggle-btn {
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #111827;
  color: #e5e7eb;
  font-size: 0.8rem;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.info-toggle-btn:hover {
  background: #1f2937;
  border-color: #9ca3af;
}






/* Wider window for galleries */
.modal-window-wide {
  width: 650px;
  max-width: 95vw;
}

.modal-subtitle {
  margin-top: 4px;    
  text-align: center;
  color: #9ca3af;
  font-size: 0.78rem;
  letter-spacing: 0.01em;    
  line-height: 1.2;
}

/* First discoveries layout */
.first-discoveries-empty {
  font-size: 0.85rem;
  color: #9ca3af;
  text-align: center;
  padding: 16px 4px;
}

.first-discoveries-grid {
  max-height: 58vh;
  padding-top: 8px;

  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: 6px;

  overflow-y: auto;
  overflow-x: hidden;
}

/* Optional: slight tweak so these chips feel a bit more “gallery-like” */
/* reuse .chip base styling; this just slightly tweaks presentation */
.discovery-chip {
  font-size: 0.82rem;
  cursor: default !important;
  pointer-events: none;
  transform: none !important;
  background: #ffffff;
}

.discovery-chip:hover {
  transform: none !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Optional: scrollbar like the menu */
.first-discoveries-grid::-webkit-scrollbar {
  width: 8px;
}

.first-discoveries-grid::-webkit-scrollbar-track {
  background: #020617;
}

.first-discoveries-grid::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 999px;
  border: 2px solid #020617;
}

.first-discoveries-grid::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.first-discoveries-grid {
  scrollbar-width: thin;
  scrollbar-color: #4b5563 #020617;
}





.toast-first-discovery {
  position: fixed;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;

  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: rgba(15,23,42,0.96);
  box-shadow: 0 6px 18px rgba(0,0,0,0.7);

  font-size: 0.85rem;
  color: #e5e7eb;
  text-align: center;
  white-space: nowrap;
}

.toast-first-discovery-name {
  font-weight: 600;
  color: #fef9c3;
}





/* ===========================
   DARK MODE – STAGE + CANVAS
   =========================== */

body.dark {
  background: #e5e7eb; /* unchanged page */
}

/* Playfield: slightly lighter dark grey */
body.dark .playfield {
  background:
    radial-gradient(
      circle at center,
      #323238 0%,
      #242428 45%,
      #1a1a1e 75%,
      #121214 100%
    );
}

body.dark .board {
  background: #030303;
  box-shadow:
    /* crisp uniform rim (everywhere) */
    0 0 0 1px rgba(255,255,255,0.08),



    /* subtle ambient glow */
    0 0 18px rgba(255,255,255,0.06);
}


/* Pills */
body.dark .board-item {
  background: #000000;
  color: #ffffff;
  border-color: #e5e7eb;
  border-width: 0.2px;
}

/* Highlight still visible but calm */
body.dark .board-item.highlighted {
  border-color: #93c5fd;
  box-shadow: 0 0 18px rgba(147,197,253,0.35);
}

/* Library chips */
body.dark .chip {
  background: #000000;
  color: #ffffff;
  border-color: #e5e7eb;
  border-width: 0.2px;
}

/* Library / menu background */
body.dark .menu {
  background: #0a0a0c;
  box-shadow: 0 -8px 16px rgba(0,0,0,0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark .menu-board-icon {
  background: #020617;
}
/* Target pill */
body.dark .target-popup {
  background: #020617;
  border-color: #e5e7eb;
  border-width: 0.2px;
}

/* Target highlight matches pill highlight */
body.dark .target-popup.highlighted {
  border-color: #93c5fd;
}


body.dark .sort-button,
body.dark .search-input,
body.dark .sort-dir-button {
  background: #111827;
  border-color: #4b5563;
}

body.dark .sort-button:hover,
body.dark .search-input:hover,
body.dark .search-input:focus,
body.dark .sort-dir-button:hover {
  background: #020617;
  border-color: #9ca3af;
}



/* Default: light mode */
.clear-board-icon .trash-light { display: block !important; }
.clear-board-icon .trash-dark  { display: none  !important; }

/* Dark mode */
body.dark .clear-board-icon .trash-light { display: none  !important; }
body.dark .clear-board-icon .trash-dark  { display: block !important; }
















/* =========================
   MOBILE UI COMPACT MODE
   ========================= */


/* Desktop/real-hover only (stricter) */
@media (hover: hover) and (pointer: fine) {
  .board-item:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 18px rgba(0,0,0,0.2);
  }

  .chip:hover {
    transform: scale(0.96);
    background: #e5e7eb;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
  }
}

/* Touch devices: prevent sticky hover/focus/active visuals */
@media (pointer: coarse) {
  .chip:hover,
  .chip:active,
  .chip:focus,
  .chip:focus-visible {
    transform: none !important;
    background: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
  }

  .board-item:not(.combining):not(.highlighted):hover,
  .board-item:not(.combining):not(.highlighted):active,
  .board-item:not(.combining):not(.highlighted):focus,
  .board-item:not(.combining):not(.highlighted):focus-visible {
    transform: none !important;
    box-shadow: 0 0 18px rgba(0,0,0,0.14) !important;
    outline: none !important;
    filter: none !important;
  }
}

@media (pointer: coarse) {
  /* 1) Prevent sticky states */
  .sort-dir-button:hover,
  .sort-dir-button:focus,
  .sort-dir-button:focus-visible {
    transform: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;

    background: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
  }

  /* 2) Allow feedback WHILE touching */
  .sort-dir-button:active {
    transform: translateY(-1px) !important;  /* or scale(0.98) */
    box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important;

    background: #020617 !important;   /* match your desktop hover look */
    border-color: #9ca3af !important;
    filter: none !important;
  }
}

/* Touch devices + DARK MODE: prevent sticky hover/focus/active on chips */
@media (pointer: coarse) {
  body.dark .chip:hover,
  body.dark .chip:active,
  body.dark .chip:focus,
  body.dark .chip:focus-visible {
    transform: none !important;
    outline: none !important;
    box-shadow: none !important;

    /* restore DARK base visuals (instead of white) */
    background: #000000 !important;
    border-color: #e5e7eb !important;
    color: #ffffff !important;
  }
}

.chip.touch-hover {
  transform: scale(0.96) !important;
  background: #e5e7eb !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Touch hover effect for chips in DARK MODE */
body.dark .chip.touch-hover {
  background: #111827 !important;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.08) !important;
  transform: scale(0.96) !important;
}


.board-item.touch-hover {
  transform: scale(1.06) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.2) !important;
}








@media (max-width: 1025px) {
  .app {
    height: 100svh;
    max-height: 100vh;
    overflow: hidden;
  }


  .sort-button { width: 20vw; min-width: 50px; }
  .search-input { width: 30vw; min-width: 80px; }
  .resize-handle { display: none; }



  /* Hide resize handle on mobile */
  .resize-handle { display: none; }




  .menu-elements {
    display: flex;
    flex-direction: column;
    gap: 6px;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    padding-bottom: 12px;
    touch-action: pan-x;
  }

  .library-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: max-content;          /* key: row grows to content width */
  }

  .chip {
    margin: 0;
    flex: 0 0 auto;
    width: max-content;          /* keep pill width natural */
    touch-action: none;
  }
}

* { -webkit-tap-highlight-color: transparent; }




.seo-intro {
  position: fixed;
  left: 8px;
  bottom: 8px;
  width: 1px;
  height: 1px;
  overflow: hidden;

  opacity: 0.01;
  pointer-events: none;
  z-index: -1;

  /* just in case */
  background: transparent;
  color: transparent;
  text-shadow: none;
}

.seo-intro * {
  margin: 0;
  padding: 0;
  font-size: 1px;
  line-height: 1px;
  color: transparent;
}

.seo-h1 {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}