@font-face {
  font-family: "Clash Grotesk";
  src: url("/assets/fonts/ClashGrotesk-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("/assets/fonts/ClashGrotesk-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --indus-purple: #A855F7;
  --indus-purple-dark: #2E1065;
  --text-main: #E8E8EC;
  --text-soft: #8888A0;
  --bg-dark: #08080B;
  --bg-panel: rgba(255, 255, 255, 0.025);
  --border-soft: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(168, 85, 247, 0.75);
  --clash: 'Clash Grotesk', system-ui, -apple-system, sans-serif;

  /* Status colors */
  --status-success: #1bff6b;
  --status-error: #ff6b6b;
  --status-warning: #ffb86b;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Border radius tokens */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-full: 999px;

  /* Letter spacing */
  --ls-tight: 0.02em;
  --ls-normal: 0.04em;
  --ls-wide: 0.06em;
}

.owner-controls-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: var(--radius-md);
  background: rgba(168, 85, 247, 0.06);
  color: var(--text-main);
  text-decoration: none;
}

.owner-controls-link:hover {
  background: rgba(168, 85, 247, 0.12);
  border-color: var(--indus-purple);
}

@font-face {
  font-family: "HaettenschweilerIndus";
  src: url("/assets/fonts/haettenschweiler.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

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

button {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}

/* Focus visible for accessibility */
button:focus-visible,
a:focus-visible,
.tool-nav-button:focus-visible,
.main-button:focus-visible,
.card-action-button:focus-visible,
.planner-mode-button:focus-visible,
.sidebar-back-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--indus-purple);
  outline-offset: 2px;
}

/* Skip link for keyboard navigation */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--indus-purple);
  color: #0D0815;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  z-index: 100;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: var(--space-md);
}

/* Loading spinner */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(168, 85, 247, 0.3);
  border-top-color: var(--indus-purple);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 0.5rem;
  vertical-align: middle;
}

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

/* Status message colors */
.status-success {
  color: var(--status-success);
}

.status-error {
  color: var(--status-error);
}

.status-warning {
  color: var(--status-warning);
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  background: #101014;
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  font-size: 0.85rem;
  z-index: 1000;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.toast.toast-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.toast.toast-success {
  border-color: var(--indus-purple);
}

.toast.toast-error {
  border-color: var(--status-error);
}

body {
  margin: 0;
  padding: 0;
  font-family: "Clash Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: #08080B;
  color: var(--text-main);
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
body::-webkit-scrollbar {
  width: 5px;
}
body::-webkit-scrollbar-track {
  background: transparent;
}
body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Tools workspace entry animation */
body.tools-enter {
  opacity: 0;
  transform: scale(0.98);
}

body.tools-enter.tools-enter-active {
  transition: opacity 1.6s ease, transform 1.6s ease;
  opacity: 1;
  transform: scale(1);
}

/* Initial hidden positions for staggered entry */
body.tools-enter .sidebar {
  opacity: 0;
  transform: translateX(-10px);
}

body.tools-enter .tool-header,
body.tools-enter .card {
  opacity: 0;
  transform: translateY(8px);
}

/* Staggered entry for sidebar and main content */
body.tools-enter.tools-enter-active .sidebar {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1.2s ease 0.1s, transform 1.2s ease 0.1s;
}

body.tools-enter.tools-enter-active .tool-header {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s ease 0.2s, transform 1.2s ease 0.2s;
}

body.tools-enter.tools-enter-active .card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s ease 0.3s, transform 1.2s ease 0.3s;
}

/* Tool panel entrance animation */
@keyframes toolPanelIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tool-panel-animate {
  animation: toolPanelIn 0.3s ease-out forwards;
}

/* Layout wrapper */
.page-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Sidebar */
.sidebar {
  width: 270px;
  min-width: 270px;
  background: linear-gradient(to bottom, #0E0E14, #08080B);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.4rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  box-shadow: 2px 0 8px rgba(0,0,0,0.25);
  overflow: hidden;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0;
  overflow: visible;
  flex-shrink: 0;
}

.sidebar-logo-img {
  height: 86px;
  width: auto;
  display: block;
  margin: 0 auto;
  transition: transform 0.2s ease;
}

.sidebar-logo-img:hover {
  transform: scale(1.08);
}

.sidebar-logo-text {
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.top-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1.2rem;
}

.back-link {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.05);
  color: #E8E8EC;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease,
    transform 0.12s ease;
}

.back-link:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.14);
  opacity: 0.98;
  transform: translateY(-1px);
}

/* Tool nav — container, no scroll on this element */
.tool-nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: visible;
}

/* Inner scroll container — this is what actually scrolls */
.tool-nav-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 2px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12px, black calc(100% - 12px), transparent);
  mask-image: linear-gradient(to bottom, transparent, black 12px, black calc(100% - 12px), transparent);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.tool-nav-scroll::-webkit-scrollbar {
  display: none;
}

/* Custom scrollbar track — positioned on the right edge */
.tool-nav-scrollbar {
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: -10px;
  width: 5px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.3s ease 0.5s;
  pointer-events: none;
  z-index: 5;
}

/* Show scrollbar when hovering over tool-nav OR when scrolling (via JS class) */
.tool-nav:hover .tool-nav-scrollbar,
.tool-nav-scrollbar.is-scrolling {
  opacity: 1;
  transition: opacity 0.15s ease;
}

/* Custom scrollbar thumb */
.tool-nav-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 30px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  transition: background 0.15s ease;
}

.tool-nav:hover .tool-nav-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.tool-nav-button {
  width: 100%;
  text-align: left;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  color: #E8E8EC;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  transition: 0.12s ease;
}

.tool-nav-button:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

.tool-nav-button.active {
  border-color: rgba(168, 85, 247, 0.75);
  background: rgba(168, 85, 247, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.1);
}

.tool-nav-button.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tool-nav-button.disabled:hover {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.06);
}

.sidebar-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-soft);
  padding: 1rem 1rem 0.35rem 1rem;
  opacity: 0.6;
}

.sidebar-back-wrapper {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.sidebar-back-button {
  display: block;
  text-align: center;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #E8E8EC;
  text-decoration: none;
  cursor: pointer;
  transition: 0.12s ease;
}

.sidebar-back-button:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.10);
}

/* Main content panel */
.main-panel {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 2.6rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.main-panel::-webkit-scrollbar {
  width: 5px;
}
.main-panel::-webkit-scrollbar-track {
  background: transparent;
}
.main-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.main-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.tool-header {
  margin-bottom: 1.3rem;
}

.tool-label-path {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

/* Use Haettenschweiler for logo text */
.sidebar-logo-text {
  font-family: "HaettenschweilerIndus", "Impact", system-ui, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 400;
}

/* Use Clash Grotesk for headings */
.tool-title,
.card h3 {
  font-family: var(--clash);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Main page title */
.tool-title {
  font-size: 2.1rem;
  margin: 0.3rem 0 0.6rem 0;
}

/* Card headings */
.card h3 {
  font-size: 1.1rem;
  margin: 0 0 0.6rem 0;
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.card-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.card-action-button {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.28rem 0.9rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.05);
  color: #E8E8EC;
  cursor: pointer;
  opacity: 0.9;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    opacity 0.12s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.card-action-button:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.card-action-button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Tiny path label uses JetBrains Mono */
.tool-label-path {
  font-family: "JetBrains Mono", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

/* Keep JetBrains Mono for form data entry */
input, select, textarea {
  font-family: inherit;
}

.tool-subtitle {
  font-size: 1.05rem;
  max-width: 820px;
  opacity: 0.82;
  line-height: 1.5;
}


/* Planner mode toggle (Basic / Pro) */
.planner-mode-toggle {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  margin-bottom: 0.35rem;
}

.planner-mode-button {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.05);
  color: #E8E8EC;
  cursor: pointer;
  opacity: 0.9;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    opacity 0.12s ease,
    transform 0.12s ease;
}

.planner-mode-button:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.planner-mode-button.active {
  border-color: var(--border-strong);
  background: rgba(168, 85, 247, 0.08);
  box-shadow: none;
  opacity: 1;
}

.planner-pro-notice {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-top: 0.25rem;
  margin-bottom: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.6rem;
  border: 1px dashed rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  max-width: 720px;
}

/* Card styling */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  padding: 1.2rem 1.6rem;
  margin-bottom: 1.6rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Form inputs */
.form-row {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
}

.form-row-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

label {
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
  color: var(--text-soft);
  font-weight: 600;
}

input,
select,
textarea {
  font-family: inherit;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.45rem;
  padding: 0.55rem;
  font-size: 0.95rem;
  min-height: 2.4rem;
}

textarea {
  min-height: 80px;
  resize: vertical;
}

.footprint-input-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.footprint-dimension-input {
  flex: 1;
  min-width: 0;
}

.footprint-dimension-input input {
  width: 100%;
  font-family: "JetBrains Mono", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-main);
  min-height: 2.4rem;
}

/* Typed-only: remove all browser spinner chrome */
.footprint-dimension-input input::-webkit-outer-spin-button,
.footprint-dimension-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.footprint-dimension-input input[type="number"] {
  -moz-appearance: textfield;
}

.footprint-dimension-input input:focus {
  outline: none;
  border-color: #A855F7;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.35);
}

.footprint-multiply {
  opacity: 0.75;
  font-size: 0.85rem;
}

.footprint-hint {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 0.2rem;
}

/* ── Custom Indus dropdowns ── */
.indus-select {
  position: relative;
  width: 100%;
  font-family: inherit;
}

.indus-select-display {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
  min-height: 2.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.indus-select-display:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-main);
}

/* SVG chevron arrow — starts pointing right, rotates 90° on open */
.indus-select-display::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-left: 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
  transform-origin: center center;
}

.indus-select.open .indus-select-display::after {
  transform: rotate(90deg);
}

/* When open, join the bottom to the dropdown panel */
.indus-select.open .indus-select-display {
  border-color: rgba(168, 85, 247, 0.5);
  color: var(--text-main);
  border-radius: 6px 6px 0 0;
  border-bottom-color: transparent;
}

.indus-select-display:focus-visible {
  outline: 2px solid rgba(168, 85, 247, 0.6);
  outline-offset: 2px;
}

/* Hide the native select; we still use it for value + JS */
.indus-select-native {
  display: none;
}

.indus-select-options {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #18181c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  max-height: 220px;
  overflow-y: auto;
  padding: 0.25rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 40;
}
.indus-select-options::-webkit-scrollbar {
  width: 5px;
}
.indus-select-options::-webkit-scrollbar-track {
  background: transparent;
}
.indus-select-options::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.indus-select-options::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.indus-select.open .indus-select-options {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.indus-select-option {
  padding: 0.45rem 0.8rem;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text-soft);
  white-space: nowrap;
  transition: background 0.1s ease, color 0.1s ease;
}

.indus-select-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
}

.indus-select-option.selected {
  background: rgba(168, 85, 247, 0.12);
  color: var(--text-main);
}

.indus-select-option.focused {
  background: rgba(168, 85, 247, 0.15);
  color: var(--text-main);
}

.indus-select-option[data-disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Custom Indus slider ── */
.indus-slider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

.indus-slider-native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.indus-slider-track {
  position: relative;
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  cursor: default;
  /* Expand click target; content-box prevents border-box collapse */
  box-sizing: content-box;
  padding: 8px 0;
  background-clip: content-box;
}

.indus-slider-fill {
  position: absolute;
  top: 8px;
  left: 0;
  height: 4px;
  background: #A855F7;
  border-radius: 2px;
  pointer-events: none;
  transition: width 0.1s ease-out;
}

.indus-slider-thumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #A855F7;
  border: 2px solid #C084FC;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.3);
  transform: translate(-50%, -50%);
  cursor: grab;
  transition: left 0.1s ease-out, box-shadow 0.15s ease;
  z-index: 1;
}

.indus-slider-thumb:hover {
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

.indus-slider-thumb:active,
.indus-slider.dragging .indus-slider-thumb {
  cursor: grabbing;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.6);
}

/* During drag: disable position transitions for direct cursor tracking */
.indus-slider.dragging .indus-slider-fill {
  transition: none;
}
.indus-slider.dragging .indus-slider-thumb {
  transition: box-shadow 0.15s ease;
}

.indus-slider-thumb:focus-visible {
  outline: 2px solid rgba(168, 85, 247, 0.6);
  outline-offset: 2px;
}

.indus-slider-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  min-width: 5rem;
  text-align: right;
  color: var(--text-soft);
  white-space: nowrap;
}

/* Generate button */
.main-button {
  background: linear-gradient(
    to bottom,
    #9B5DE5,
    #5B21B6
  );
  color: #FFFFFF;
  border: none;
  border-radius: 0.65rem;
  padding: 0.75rem 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  margin-top: 0.6rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.main-button:hover {
  transform: scale(1.025);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.22);
}

/* ── Card footer action zone ── */
.card-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-soft);
}

.card-footer .main-button {
  flex: 0 0 auto;
  padding: 0.65rem 1.8rem;
  font-size: 0.95rem;
  margin-top: 0;
}

.card-footer .credit-status {
  margin-left: auto;
}

/* ── Form sections (grouped parameter areas) ── */
.form-section {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-soft);
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-section:has(+ .card-footer) {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin-bottom: 0.6rem;
}

/* ── Structure Generator type selector ── */
.sg-type-selector {
  display: flex;
  border: 1px solid var(--border-soft);
  border-radius: 0.65rem;
  overflow: hidden;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.sg-type-btn {
  flex: 1;
  padding: 0.65rem 1rem;
  min-width: 0;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-soft);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sg-type-btn:last-child {
  border-right: none;
}

.sg-type-btn.active {
  background: rgba(168, 85, 247, 0.1);
  color: var(--text-main);
}

.sg-type-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Structure Generator type panels ── */
.sg-type-panel {
  border: 1px solid var(--border-soft);
  border-radius: 0.65rem;
  padding: 1rem;
  margin-bottom: 0.9rem;
  background: rgba(255, 255, 255, 0.015);
}

/* ── Structure Generator panel transition ── */
.sg-panel-wrapper {
  position: relative;
  overflow: hidden;
}

.sg-panel-hidden {
  display: none;
}

.sg-panel-fading-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sg-panel-invisible {
  opacity: 0 !important;
  transition: none !important;
}

.sg-panel-wrapper-resizing {
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.sg-panel-fading-in {
  animation: sgPanelFadeIn 0.3s ease forwards;
}

@keyframes sgPanelFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sg-type-btn.sg-type-transitioning {
  pointer-events: none;
  opacity: 0.5;
}

/* ── Form hint (replaces inline style on tip text) ── */
.form-hint {
  font-size: 0.75rem;
  color: var(--text-soft);
  opacity: 0.65;
  margin-top: 0.3rem;
  line-height: 1.4;
}

/* ── Status text styling ── */
.status-text {
  font-size: 0.82rem;
  color: var(--text-soft);
}

/* NEW expanded layout */
.output-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.6rem;
}

@media (max-width: 1100px) {
  .output-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile sidebar edge tab — hidden on desktop */
.mobile-sidebar-tab {
  display: none;
  position: fixed;
  left: 0;
  top: 80px;
  z-index: 60;
  width: 22px;
  height: 38px;
  border: none;
  border-radius: 0 8px 8px 0;
  background: rgba(14, 14, 20, 0.85);
  border-right: 1px solid rgba(168, 85, 247, 0.3);
  border-top: 1px solid rgba(168, 85, 247, 0.15);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.3s ease;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

.mobile-sidebar-tab:active {
  background: rgba(168, 85, 247, 0.15);
}

.mobile-sidebar-tab-chevron {
  color: rgba(168, 85, 247, 0.9);
  font-size: 1rem;
  line-height: 1;
  display: block;
  transition: transform 0.3s ease;
  margin-left: 1px;
}

/* When sidebar is open, slide the tab to the right edge of the sidebar and flip the chevron */
.mobile-sidebar-tab.active {
  transform: translateX(270px);
}

.mobile-sidebar-tab.active .mobile-sidebar-tab-chevron {
  transform: scaleX(-1);
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 49;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.sidebar-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile responsive sidebar */
@media (max-width: 768px) {
  .mobile-sidebar-tab {
    display: flex;
  }

  /* Override entry animations on mobile — sidebar must stay hidden by default */
  .sidebar,
  body.tools-enter .sidebar,
  body.tools-enter.tools-enter-active .sidebar,
  .app-entering .sidebar,
  .app-entering .app-sidebar,
  .app-entered .sidebar,
  .app-entered .app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow: hidden;
  }

  /* When open, override everything to show it */
  .sidebar.sidebar-open,
  body.tools-enter .sidebar.sidebar-open,
  body.tools-enter.tools-enter-active .sidebar.sidebar-open,
  .app-entering .sidebar.sidebar-open,
  .app-entered .sidebar.sidebar-open {
    transform: translateX(0);
    opacity: 1;
  }

  .mobile-sidebar-tab.active {
    transform: translateX(270px);
  }

  .sidebar-overlay {
    display: block;
    pointer-events: none;
  }

  .main-panel {
    padding: 1.5rem 1rem;
    padding-top: 1.5rem;
  }

  .tool-title {
    font-size: 1.6rem;
  }

  .form-row {
    flex-direction: column;
  }

  .card {
    padding: 1rem 1.2rem;
  }

  .output-grid {
    gap: 1rem;
  }

  .card-footer .main-button {
    width: 100%;
  }

  .profile-auth-actions {
    flex-direction: column;
  }

  .profile-auth-actions .main-button,
  .profile-auth-actions .discord-login-button {
    width: 100%;
  }

  .sg-type-selector {
    flex-wrap: wrap;
  }

  .sg-type-btn {
    min-width: 120px;
    flex: 1 1 auto;
  }
}

.saved-card {
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.saved-card::-webkit-scrollbar {
  width: 5px;
}
.saved-card::-webkit-scrollbar-track {
  background: transparent;
}
.saved-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.saved-card::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.saved-plan-item {
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: 0.12s ease;
}

.saved-plan-item:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.clear-all {
  float: right;
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.7;
}

.clear-all:hover {
  opacity: 1;
  text-decoration: underline;
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.task-phase {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.5rem;
}

.task-phase:first-child {
  border-top: none;
  padding-top: 0;
}

.task-phase-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.9;
  margin-bottom: 0.25rem;
}

.task-phase-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.4rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition:
    background 0.12s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.task-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.task-dot {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.task-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: transparent;
  transition: background 0.15s ease;
}

.task-dot.task-dot-completed {
  border-color: rgba(168, 85, 247, 0.9);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.45);
  transform: scale(1.05);
}

.task-dot.task-dot-completed::after {
  background: var(--indus-purple);
}

.task-text-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.task-category {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  opacity: 0.95;
}

.task-text {
  opacity: 0.95;
}

.task-item.task-completed .task-text {
  opacity: 0.7;
  text-decoration: line-through;
}

/* "City complete" pulse on tasks card */
@keyframes tasksCardPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.0);
    border-color: rgba(255, 255, 255, 0.06);
  }
  40% {
    box-shadow: 0 0 0 12px rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(168, 85, 247, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.0);
    /* settle to white-alpha border */
    border-color: rgba(255, 255, 255, 0.14);
  }
}

.tasks-card-complete {
  animation: tasksCardPulse 1.8s ease-out;
}

/* Persistent "all tasks complete" frame */
.tasks-card-complete-persistent {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

/* Transport Links — selectable tile grid */
.transport-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.transport-link-option {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.75rem;
  cursor: pointer;
  user-select: none;
  position: relative;
  opacity: 0.8;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease,
    box-shadow 0.15s ease;
}

.transport-link-option:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

.transport-link-option:has(input:checked) {
  border-color: rgba(168, 85, 247, 0.6);
  background: rgba(168, 85, 247, 0.15);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 1;
  color: #fff;
}

.transport-link-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* --- Profile / Subscription page template --- */
.profile-muted {
  font-size: 0.85rem;
  opacity: 0.78;
  line-height: 1.55;
  margin-top: 0.75rem;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
  margin-top: 0.5rem;
}

.profile-mini-card {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 0.95rem;
  padding: 0.9rem 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.profile-mini-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

.profile-mini-value {
  font-family: "JetBrains Mono", system-ui, sans-serif;
  font-size: 2rem;
  letter-spacing: 0.02em;
  margin-top: 0.25rem;
}

.profile-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.profile-plan-card {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 1rem;
  padding: 1rem 1.05rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.profile-plan-card.profile-plan-active {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.profile-plan-title {
  font-family: var(--clash);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.profile-plan-sub {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-top: 0.15rem;
}

.profile-plan-list {
  margin-top: 0.75rem;
  padding-left: 1.1rem;
  opacity: 0.9;
  font-size: 0.85rem;
  line-height: 1.55;
}

.profile-plan-foot {
  margin-top: 0.85rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.profile-inline-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  align-items: center;
}

.sg-preview-status {
  font-size: 0.85rem;
  opacity: 0.78;
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.55;
}

.sg-three-preview {
  height: 380px;
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  overflow: hidden;
}

.sg-blueprint-details {
  margin-top: 0.9rem;
}

.sg-blueprint-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  opacity: 0.85;
  user-select: none;
}

.sg-blueprint-pre {
  font-family: "JetBrains Mono", system-ui, sans-serif;
  margin-top: 0.6rem;
  min-height: 120px;
  max-height: 320px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.025);
  padding: 0.75rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.sg-blueprint-pre::-webkit-scrollbar {
  width: 5px;
}
.sg-blueprint-pre::-webkit-scrollbar-track {
  background: transparent;
}
.sg-blueprint-pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.sg-blueprint-pre::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.sg-toggle-active {
  border-color: rgba(168, 85, 247, 0.8) !important;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25) !important;
  color: rgba(168, 85, 247, 0.95) !important;
}

.sg-preview-help {
  font-size: 0.78rem;
  opacity: 0.72;
  margin-top: 0.55rem;
  line-height: 1.45;
  padding: 0.45rem 0.65rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

.sg-preview-wrap {
  position: relative;
}

.sg-preview-tip {
  position: absolute;
  left: 14px;
  top: 14px;
  max-width: calc(100% - 28px);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(16, 16, 20, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  font-size: 0.72rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  user-select: none;
}

.sg-preview-tip.sg-preview-tip-show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== AUTH MODAL ===== */

.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.auth-modal-overlay.auth-modal-visible {
  opacity: 1;
  pointer-events: auto;
}

.auth-modal {
  background: #101014;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  max-width: 400px;
  width: 92%;
  position: relative;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.auth-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  background: none;
  border: none;
  color: var(--text-soft);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  line-height: 1;
  transition: color 0.15s ease;
}

.auth-modal-close:hover {
  color: var(--text-main);
}

.auth-modal-tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

.auth-tab-btn {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.auth-tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-main);
}

.auth-tab-btn.active {
  border-color: var(--border-strong);
  background: rgba(168, 85, 247, 0.08);
  color: var(--text-main);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auth-form label {
  font-size: 0.78rem;
  margin-bottom: 0;
  opacity: 0.85;
}

.auth-form input {
  font-family: inherit;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
}

.auth-submit-btn {
  margin-top: 0.5rem;
  width: 100%;
}

.auth-error {
  color: var(--status-error);
  font-size: 0.8rem;
  min-height: 1.2em;
  padding: 0;
  line-height: 1.4;
}

.auth-error:not(:empty) {
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.2);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  margin-top: 0.15rem;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  color: var(--text-soft);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.discord-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(88, 101, 242, 0.5);
  background: rgba(88, 101, 242, 0.12);
  color: #bcc3f5;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.discord-login-button:hover {
  background: rgba(88, 101, 242, 0.22);
  border-color: rgba(88, 101, 242, 0.7);
}

.discord-login-button-sm {
  width: auto;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
}

.auth-switch {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-soft);
  margin-top: 0.75rem;
}

.auth-switch-link {
  color: var(--indus-purple);
  text-decoration: underline;
  cursor: pointer;
}

.auth-switch-link:hover {
  color: #C084FC;
}

/* ===== SIDEBAR USER AREA ===== */

#sidebarUserArea {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0 0.15rem;
  flex-shrink: 0;
}

.sidebar-signin-btn {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.08);
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sidebar-signin-btn:hover {
  background: rgba(168, 85, 247, 0.16);
  border-color: rgba(168, 85, 247, 0.55);
}

.sidebar-create-link {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-soft);
}

.sidebar-create-link a {
  color: var(--indus-purple);
  text-decoration: underline;
  cursor: pointer;
}

.sidebar-create-link a:hover {
  color: #C084FC;
}

.sidebar-user-signed-in {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}

.sidebar-avatar.avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168, 85, 247, 0.15);
  color: var(--indus-purple);
  font-weight: 600;
  border-radius: 50%;
  text-align: center;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 0.8rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-logout-btn {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 600;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-soft);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.sidebar-logout-btn:hover {
  color: var(--status-error);
  border-color: rgba(255, 107, 107, 0.35);
  background: rgba(255, 107, 107, 0.08);
}

/* ===== ADMIN BADGE ===== */

.admin-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: var(--indus-purple);
  vertical-align: middle;
  margin-left: 0.3rem;
  line-height: 1.4;
}

/* ===== CREDIT STATUS ===== */

.credit-status {
  font-family: "JetBrains Mono", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: var(--ls-tight);
  color: var(--text-soft);
  margin-top: 0.35rem;
}

.credit-warning {
  color: var(--status-warning);
}

.credit-exhausted {
  color: var(--status-error);
}

/* ===== PROFILE AUTH CARD ===== */

.profile-auth-actions {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.9rem;
}

.profile-auth-actions .main-button {
  flex: 0 1 auto;
  padding: 0.6rem 1.4rem;
  font-size: 0.92rem;
  margin-top: 0;
}

.profile-auth-actions .discord-login-button {
  flex: 0 1 auto;
  width: auto;
}

.profile-auth-account-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.profile-auth-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}

.profile-auth-avatar.avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168, 85, 247, 0.15);
  color: var(--indus-purple);
  font-weight: 600;
  border-radius: 50%;
  text-align: center;
}

.profile-auth-name {
  font-size: 1rem;
  font-weight: 600;
}

.profile-auth-email {
  font-size: 0.8rem;
  color: var(--text-soft);
}

.profile-discord-row {
  margin-bottom: 0.75rem;
}

.profile-discord-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  background: rgba(88, 101, 242, 0.1);
  border: 1px solid rgba(88, 101, 242, 0.3);
  color: #bcc3f5;
}

.profile-usage-card {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

.profile-usage-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
  margin-bottom: 0.6rem;
}

.profile-usage-row {
  margin-bottom: 0.5rem;
}

.profile-usage-row:last-of-type {
  margin-bottom: 0;
}

.profile-usage-row-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.2rem;
}

.profile-usage-label {
  font-size: 0.78rem;
  color: var(--text-soft);
}

.profile-usage-value {
  font-family: "JetBrains Mono", system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: var(--ls-tight);
}

.profile-usage-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.profile-usage-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--indus-purple);
  transition: width 0.3s ease;
}

.profile-usage-bar-fill.usage-warning {
  background: var(--status-warning);
}

.profile-usage-bar-fill.usage-exhausted {
  background: var(--status-error);
}

.profile-usage-reset {
  font-size: 0.72rem;
  color: var(--text-soft);
  margin-top: 0.5rem;
  opacity: 0.8;
}

/* ===== ADMIN STATS ===== */

.admin-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.admin-refresh-btn {
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.admin-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-main);
}

.admin-activity-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
}

.admin-activity-row:last-child {
  border-bottom: none;
}

.admin-activity-user {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-activity-tool {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  flex-shrink: 0;
}

.admin-activity-time {
  font-family: "JetBrains Mono", system-ui, sans-serif;
  font-size: 0.7rem;
  color: var(--text-soft);
  flex-shrink: 0;
  letter-spacing: var(--ls-tight);
}

/* ===== PROFILE SECTION HEADERS ===== */

.profile-section-header {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-soft);
  opacity: 0.6;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.profile-section-header:first-child {
  margin-top: 0;
}

/* ===== CARD SUB-HEADINGS (within cards) ===== */

.card-sub-heading {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, 0.35);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.card-sub-heading:first-child {
  margin-top: 0;
}

.card-sub-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* ===== REWARDS SECTION ===== */

.rewards-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.rewards-status-dot.active {
  background: var(--status-success);
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.4);
}

.rewards-status-dot.inactive {
  background: rgba(255, 255, 255, 0.2);
}

.rewards-join-prompt {
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.rewards-join-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid rgba(88, 101, 242, 0.4);
  background: rgba(88, 101, 242, 0.1);
  color: #7289da;
  font-weight: 600;
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}

.rewards-join-btn:hover {
  background: rgba(88, 101, 242, 0.2);
  border-color: rgba(88, 101, 242, 0.6);
}

/* Leaderboard tabs */
.rewards-lb-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 0.4rem;
}

.rewards-lb-tab {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.rewards-lb-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
}

.rewards-lb-tab.active {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
  color: var(--text-main);
}

/* Leaderboard list */
.rewards-lb-content {
  min-height: 12rem;
}

.rewards-lb-list {
  display: flex;
  flex-direction: column;
}

.rewards-lb-row {
  display: flex;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  font-size: 0.82rem;
}

.rewards-lb-row:last-child {
  border-bottom: none;
}

.rewards-lb-row-me {
  background: rgba(168, 85, 247, 0.06);
  border-radius: 6px;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  margin-left: -0.4rem;
  margin-right: -0.4rem;
}

.rewards-lb-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-soft);
  min-width: 3rem;
  flex-shrink: 0;
}

.rewards-lb-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-main);
}

.rewards-lb-row-me .rewards-lb-name {
  font-weight: 600;
}

.rewards-lb-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-soft);
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.rewards-epoch-line {
  display: flex;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-soft);
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.rewards-points-status {
  font-size: 0.82rem;
  color: var(--text-soft);
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.rewards-points-enabled {
  color: var(--status-success);
  font-weight: 600;
}

.rewards-points-disabled {
  color: var(--status-error);
  font-weight: 600;
}

/* ===== MINESWEEPER ===== */

#minesweeperGameContainer {
  position: relative;
  text-align: center;
  overflow: hidden;
}

/* Stats row */
.ms-stats-row {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ms-stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  min-width: 80px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ms-stat-icon {
  font-size: 1rem;
  margin-bottom: 0.15rem;
  line-height: 1;
}

.ms-stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.ms-stat-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 0.1rem;
}

/* Stat box pulse animations */
@keyframes statPulseGreen {
  0% { border-color: rgba(255, 255, 255, 0.06); box-shadow: none; }
  50% { border-color: rgba(74, 222, 128, 0.4); box-shadow: 0 0 12px rgba(74, 222, 128, 0.15); }
  100% { border-color: rgba(74, 222, 128, 0.15); box-shadow: none; }
}

@keyframes statPulseRed {
  0% { border-color: rgba(255, 255, 255, 0.06); box-shadow: none; }
  50% { border-color: rgba(239, 68, 68, 0.4); box-shadow: 0 0 12px rgba(239, 68, 68, 0.15); }
  100% { border-color: rgba(255, 255, 255, 0.06); box-shadow: none; }
}

.ms-stat-pulse-green { animation: statPulseGreen 1s ease-out; }
.ms-stat-pulse-red { animation: statPulseRed 0.6s ease-out; }

/* Status line */
.ms-status-line {
  margin-bottom: 0.6rem;
}

.ms-status {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-soft);
  transition: color 0.2s ease;
}

.ms-status-playing { color: var(--text-main); }
.ms-status-win { color: var(--status-success); }
.ms-status-lose { color: var(--status-error); }

/* Grid wrapper */
.ms-grid-wrapper {
  position: relative;
  display: inline-block;
  margin: 0 auto 0.5rem;
}

/* Shockwave effect */
.ms-shockwave {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}

@keyframes shockwaveExpand {
  0% {
    width: 0; height: 0;
    margin-left: 0; margin-top: 0;
    opacity: 0.6;
    box-shadow: 0 0 20px 10px rgba(239, 68, 68, 0.4);
  }
  100% {
    width: 500px; height: 500px;
    margin-left: -250px; margin-top: -250px;
    opacity: 0;
    box-shadow: 0 0 60px 30px rgba(239, 68, 68, 0);
  }
}

.ms-shockwave-active {
  animation: shockwaveExpand 0.6s ease-out forwards;
}

/* Grid */
.minesweeper-grid {
  display: grid;
  gap: 2px;
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.3);
  width: max-content;
  margin: 0 auto;
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.minesweeper-grid--beginner { grid-template-columns: repeat(9, var(--cell-size, 38px)); }
.minesweeper-grid--intermediate { grid-template-columns: repeat(16, var(--cell-size, 30px)); }
.minesweeper-grid--expert { grid-template-columns: repeat(30, var(--cell-size, 24px)); }

/* Grid win glow */
@keyframes gridWinGlow {
  0% { border-color: rgba(255, 255, 255, 0.06); box-shadow: none; }
  30% { border-color: rgba(74, 222, 128, 0.4); box-shadow: 0 0 30px 8px rgba(74, 222, 128, 0.12); }
  100% { border-color: rgba(74, 222, 128, 0.15); box-shadow: 0 0 10px 2px rgba(74, 222, 128, 0.05); }
}

.ms-grid-win {
  animation: gridWinGlow 2s ease-out forwards;
}

/* Grid shake */
@keyframes gridShake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-4px); }
  20% { transform: translateX(4px); }
  30% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  50% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
  70% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

.ms-grid-shake {
  animation: gridShake 0.4s ease-out;
}

/* Difficulty transition */
.ms-grid-fading-out {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.ms-grid-invisible {
  opacity: 0 !important;
  transition: none !important;
}

.ms-wrapper-resizing {
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.ms-grid-fading-in {
  animation: msGridFadeIn 0.4s ease forwards;
}

@keyframes msGridFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ms-diff-btn.ms-diff-transitioning {
  pointer-events: none;
  opacity: 0.5;
}

/* Cells */
.ms-cell {
  width: var(--cell-size, 38px);
  height: var(--cell-size, 38px);
  min-width: var(--cell-size, 38px);
  min-height: var(--cell-size, 38px);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-main);
  transition: background 0.08s ease, transform 0.06s ease, box-shadow 0.1s ease;
  position: relative;
}

.ms-cell-hidden {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.ms-cell-hidden:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.ms-cell-hidden:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.16);
}

.ms-cell-revealed {
  cursor: default;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

/* Number colors — vibrant for dark bg */
.ms-cell-one { color: #60a5fa; }
.ms-cell-two { color: #4ade80; }
.ms-cell-three { color: #f87171; }
.ms-cell-four { color: #a78bfa; }
.ms-cell-five { color: #fb923c; }
.ms-cell-six { color: #2dd4bf; }
.ms-cell-seven { color: #e2e8f0; }
.ms-cell-eight { color: #94a3b8; }

/* Flag */
.ms-cell-flag {
  background: rgba(168, 85, 247, 0.1);
  cursor: pointer;
  border: 1px solid rgba(168, 85, 247, 0.15);
}

.ms-flag-icon {
  font-size: 0.85em;
  color: var(--indus-purple);
}

@keyframes flagBounce {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.ms-cell-flag .ms-flag-icon {
  animation: flagBounce 0.2s ease-out;
}

/* Mine */
.ms-cell-mine {
  background: rgba(239, 68, 68, 0.12);
  cursor: default;
}

.ms-cell-mine-hit {
  background: rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

.ms-mine-icon { font-size: 0.85em; }

/* Win star */
.ms-cell-mine.ms-cell-revealed:not(.ms-cell-mine-hit) {
  background: rgba(250, 204, 21, 0.08);
}

.ms-star-icon {
  color: #facc15;
  font-size: 0.9em;
}

@keyframes starAppear {
  0% { transform: scale(0) rotate(-30deg); opacity: 0; }
  70% { transform: scale(1.3) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.ms-grid-win .ms-star-icon {
  animation: starAppear 0.4s ease-out both;
}

/* Cell reveal wave */
@keyframes cellRevealWave {
  0% { opacity: 0; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

.ms-cell-reveal {
  animation: cellRevealWave 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Win sweep animation — green flash radiating from center */
@keyframes cellWinSweep {
  0% { background: rgba(255, 255, 255, 0.025); }
  40% { background: rgba(74, 222, 128, 0.18); box-shadow: inset 0 0 8px rgba(74, 222, 128, 0.15); }
  100% { background: rgba(74, 222, 128, 0.04); box-shadow: none; }
}

.ms-cell-win-sweep {
  animation: cellWinSweep 0.6s ease-out both;
}

/* Cell explosion */
@keyframes cellExplode {
  0% { opacity: 0; transform: scale(0.3); background: rgba(239, 68, 68, 0); }
  40% { opacity: 1; transform: scale(1.2); background: rgba(239, 68, 68, 0.4); }
  100% { opacity: 1; transform: scale(1); background: rgba(239, 68, 68, 0.12); }
}

.ms-cell-explode {
  animation: cellExplode 0.3s ease-out both;
}

/* Timer tick pulse */
@keyframes timerTick {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.ms-tick {
  animation: timerTick 0.15s ease-out;
}

/* Reward pop */
@keyframes rewardPop {
  0% { transform: scale(1); color: var(--text-main); }
  40% { transform: scale(1.3); color: var(--status-success); }
  100% { transform: scale(1); color: var(--status-success); }
}

.ms-reward-pop {
  animation: rewardPop 0.5s ease-out;
}

/* ===== CONFETTI ===== */

.ms-confetti-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  overflow: hidden;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  15% {
    transform: translateY(calc(var(--launch-height, 80px) * -1)) translateX(calc(var(--x-drift) * 0.2)) rotate(calc(var(--rotation) * 0.3));
    opacity: 1;
  }
  100% {
    transform: translateY(400px) translateX(var(--x-drift)) rotate(var(--rotation));
    opacity: 0;
  }
}

.ms-confetti-piece {
  position: absolute;
  top: 40%;
  animation: confettiFall 1.5s ease-in both;
}

/* Confetti white flash */
@keyframes confettiFlash {
  0% { opacity: 0.5; }
  100% { opacity: 0; }
}

.ms-confetti-flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  pointer-events: none;
  animation: confettiFlash 0.4s ease-out forwards;
}

/* Hint */
.ms-hint {
  font-size: 0.72rem;
  color: var(--text-soft);
  opacity: 0.5;
  margin: 0.5rem 0 0.75rem;
}

/* Difficulty toggle */
.ms-difficulty-row {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}

.ms-diff-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  min-width: 110px;
}

.ms-diff-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}

.ms-diff-btn.active {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.3);
  color: var(--text-main);
}

.ms-diff-name {
  font-size: 0.8rem;
  font-weight: 600;
}

.ms-diff-desc {
  font-size: 0.62rem;
  opacity: 0.5;
  margin-top: 0.1rem;
}

/* Difficulty badge */
.ms-diff-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-top: 0.2rem;
  line-height: 1.2;
}

.ms-diff-badge--won {
  color: var(--status-success);
  background: rgba(74, 222, 128, 0.1);
}

.ms-diff-badge--locked {
  color: var(--status-error);
  background: rgba(239, 68, 68, 0.1);
}

.ms-diff-badge--active {
  color: var(--status-warning);
  background: rgba(255, 184, 107, 0.1);
}

/* Earn info */
.ms-earn-info {
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 0.6rem;
}

.ms-earn-info--earn {
  color: var(--status-success);
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.1);
}

.ms-earn-info--cooldown {
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-earn-info--admin {
  color: var(--indus-purple);
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.12);
}

#minesweeperEarnInfo.ms-earn-info--admin {
  margin-top: 10px;
}

.ms-earn-info--won {
  color: var(--status-success);
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.15);
}

.ms-earn-info--none {
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* New Game button */
.ms-new-game-row {
  margin-top: 0.25rem;
}

.ms-new-game-btn {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 2rem;
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  background: rgba(168, 85, 247, 0.1);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.02em;
}

.ms-new-game-btn:hover {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.12);
}

.ms-new-game-btn:active {
  transform: scale(0.97);
}

/* Mobile */
@media (max-width: 640px) {
  .ms-stats-row {
    gap: 0.4rem;
  }

  .ms-stat-box {
    padding: 0.4rem 0.6rem;
    min-width: 65px;
  }

  .ms-stat-value {
    font-size: 0.9rem;
  }

  .ms-grid-wrapper {
    max-width: 100%;
    overflow-x: auto;
  }

  .minesweeper-grid {
    --cell-size: 30px;
  }

  .minesweeper-grid--intermediate {
    --cell-size: 20px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }
  .minesweeper-grid--intermediate::-webkit-scrollbar {
    height: 5px;
  }
  .minesweeper-grid--intermediate::-webkit-scrollbar-track {
    background: transparent;
  }
  .minesweeper-grid--intermediate::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
  }
  .minesweeper-grid--intermediate::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }

  .minesweeper-grid--expert {
    --cell-size: 16px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }
  .minesweeper-grid--expert::-webkit-scrollbar {
    height: 5px;
  }
  .minesweeper-grid--expert::-webkit-scrollbar-track {
    background: transparent;
  }
  .minesweeper-grid--expert::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
  }
  .minesweeper-grid--expert::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }

  .ms-difficulty-row {
    flex-direction: column;
    align-items: center;
  }

  .ms-diff-btn {
    width: 100%;
    max-width: 280px;
    flex-direction: row;
    justify-content: space-between;
  }
}

/* === MINESWEEPER 3-COLUMN LAYOUT === */

.ms-layout {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  width: 100%;
}

.ms-panel {
  flex: 0 0 200px;
  min-width: 0;
}

.ms-game-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.ms-panel-header {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  opacity: 0.6;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Live feed */
.ms-feed {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.ms-feed::-webkit-scrollbar {
  width: 5px;
}

.ms-feed::-webkit-scrollbar-track {
  background: transparent;
}

.ms-feed::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

.ms-feed::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.ms-feed-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.03);
  font-size: 0.72rem;
  color: var(--text-soft);
}

.ms-feed-item.feed-expert {
  border-color: rgba(251, 191, 36, 0.2);
  background: rgba(251, 191, 36, 0.03);
}

.ms-feed-item.feed-intermediate {
  border-color: rgba(168, 85, 247, 0.15);
  background: rgba(168, 85, 247, 0.02);
}

.ms-feed-top-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.ms-feed-user {
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90px;
}

.ms-feed-diff {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-soft);
}

.ms-feed-diff.diff-expert {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
}

.ms-feed-diff.diff-intermediate {
  color: #a855f7;
  background: rgba(168, 85, 247, 0.08);
}

.ms-feed-bottom-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
}

.ms-feed-points {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: #14b8a6;
}

.ms-feed-time {
  opacity: 0.5;
}

.ms-feed-ago {
  margin-left: auto;
  opacity: 0.4;
  font-size: 0.6rem;
}

/* Right panel stats stacked */
.ms-stats-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ms-stats-stack .ms-stat-box {
  width: 100%;
}

/* Mobile: stack panels */
@media (max-width: 900px) {
  .ms-layout {
    flex-direction: column;
    align-items: center;
  }

  .ms-panel {
    flex: none;
    width: 100%;
    max-width: 400px;
  }

  .ms-panel-left {
    order: 3;
  }

  .ms-game-center {
    order: 1;
    width: 100%;
  }

  .ms-panel-right {
    order: 2;
  }

  .ms-stats-stack {
    flex-direction: row;
    justify-content: center;
  }

  .ms-feed {
    max-height: 200px;
  }
}

/* ===== ADMIN CHARTS ===== */

.admin-chart-controls {
  display: flex;
  gap: 0.35rem;
}

/* ===== CUSTOM DROPDOWN ===== */

.custom-dropdown {
  position: relative;
  display: inline-block;
}

.custom-dropdown-trigger {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.custom-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-main);
}

.custom-dropdown.open .custom-dropdown-trigger {
  border-color: rgba(168, 85, 247, 0.5);
  color: var(--text-main);
}

.custom-dropdown-arrow {
  font-size: 0.6rem;
  transition: transform 0.15s ease;
}

.custom-dropdown.open .custom-dropdown-arrow {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 120px;
  background: #18181c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 100;
  padding: 0.25rem 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.custom-dropdown.open .custom-dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.custom-dropdown-item {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.65rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
  white-space: nowrap;
}

.custom-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
}

.custom-dropdown-item.active {
  background: rgba(168, 85, 247, 0.12);
  color: var(--text-main);
}

.admin-chart-summary {
  margin-bottom: 0.6rem;
}

.admin-chart-total {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-main);
}

.admin-chart-total-label {
  font-size: 0.8rem;
  color: var(--text-soft);
}

.admin-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  padding-top: 0.5rem;
}

.admin-chart-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.admin-chart-bar-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--text-soft);
  margin-bottom: 2px;
  min-height: 0.8rem;
}

.admin-chart-bar-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
}

.admin-chart-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.6) 0%, rgba(168, 85, 247, 0.25) 100%);
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
  min-height: 2px;
}

.admin-chart-bar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  color: var(--text-soft);
  opacity: 0.6;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== ADMIN ACTIVITY TABS ===== */

.admin-activity-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 0.4rem;
}

.admin-activity-tab {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.admin-activity-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
}

.admin-activity-tab.active {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
  color: var(--text-main);
}

/* ===== SCROLLABLE ACTIVITY FEED + LEADERBOARD ===== */

#adminActivityContent {
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

#adminActivityContent::-webkit-scrollbar {
  width: 5px;
}

#adminActivityContent::-webkit-scrollbar-track {
  background: transparent;
}

#adminActivityContent::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

#adminActivityContent::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

#rewardsLeaderboardContent {
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

#rewardsLeaderboardContent::-webkit-scrollbar {
  width: 5px;
}

#rewardsLeaderboardContent::-webkit-scrollbar-track {
  background: transparent;
}

#rewardsLeaderboardContent::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

#rewardsLeaderboardContent::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ===== PAGE ENTRANCE TRANSITION ===== */

/* Starting state — content slightly zoomed and invisible */
.app-entering .sidebar,
.app-entering .app-sidebar {
  opacity: 0;
  transform: scale(1.015) translateX(-8px);
}

.app-entering main,
.app-entering .main-content {
  opacity: 0;
  transform: scale(1.02) translateY(8px);
}

/* Animate in — sidebar first, content slightly after */
.app-entered .sidebar,
.app-entered .app-sidebar {
  transition: opacity 0.55s cubic-bezier(0.22, 0.68, 0.35, 1),
              transform 0.55s cubic-bezier(0.22, 0.68, 0.35, 1);
  opacity: 1;
  transform: scale(1) translateX(0);
}

.app-entered main,
.app-entered .main-content {
  transition: opacity 0.6s cubic-bezier(0.22, 0.68, 0.35, 1) 0.08s,
              transform 0.6s cubic-bezier(0.22, 0.68, 0.35, 1) 0.08s;
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Background starts black, returns to normal */
html.app-entering,
html.app-entering body {
  background-color: #000 !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

html.app-entered,
html.app-entered body {
  transition: background-color 0.5s ease;
}

/* ===== DAILY SPIN ===== */

#spinGameContainer {
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Wheel wrapper */
.spin-wheel-wrapper {
  position: relative;
  display: inline-block;
  margin: 0.75rem auto;
}

/* Pointer triangle on right side */
.spin-wheel-pointer {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: right center;
  z-index: 10;
  font-size: 1.4rem;
  color: #a855f7;
  filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, 0.5));
  line-height: 1;
}

/* Spin result card popup */
.spin-result-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  background: rgba(10, 10, 14, 0.92);
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 12px;
  padding: 1rem 1.6rem;
  text-align: center;
  min-width: 120px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(168, 85, 247, 0.15);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.spin-result-card.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.spin-result-card-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.spin-result-card-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.2rem;
}

.spin-result-card.jackpot-card {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(251, 191, 36, 0.2);
}

.spin-result-card.jackpot-card .spin-result-card-value {
  color: #fbbf24;
}

.spin-result-card.miss-card .spin-result-card-value {
  color: rgba(255, 255, 255, 0.4);
}

/* Position admin earn-info absolutely so it doesn't push the wheel off center */
#spinEarnInfo {
  text-align: center;
}

#spinEarnInfo.ms-earn-info--admin {
  margin-top: 10px;
  text-align: center;
}

/* Canvas */
#spinWheelCanvas {
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1), 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Spin button */
.spin-btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.65rem 3rem;
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
}

.spin-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3) 0%, rgba(139, 92, 246, 0.25) 100%);
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
  transform: scale(1.02);
}

.spin-btn:active:not(:disabled) {
  transform: scale(0.97);
}

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

/* Flash effects on win */
@keyframes spinFlashGold {
  0% { box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1), 0 4px 20px rgba(0, 0, 0, 0.3); }
  30% { box-shadow: 0 0 30px 10px rgba(251, 191, 36, 0.3), 0 0 60px 20px rgba(251, 191, 36, 0.1); }
  100% { box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1), 0 4px 20px rgba(0, 0, 0, 0.3); }
}

@keyframes spinFlashPurple {
  0% { box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1), 0 4px 20px rgba(0, 0, 0, 0.3); }
  30% { box-shadow: 0 0 25px 8px rgba(168, 85, 247, 0.3), 0 0 50px 15px rgba(168, 85, 247, 0.1); }
  100% { box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1), 0 4px 20px rgba(0, 0, 0, 0.3); }
}

.spin-flash-gold #spinWheelCanvas {
  animation: spinFlashGold 1.5s ease-out;
}

.spin-flash-purple #spinWheelCanvas {
  animation: spinFlashPurple 1s ease-out;
}

/* Today's results row */
.spin-results-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.spin-results-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.3);
}

.spin-result-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  min-width: 36px;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.spin-result-jackpot {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.25);
}

.spin-result-big {
  color: #a855f7;
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.2);
}

.spin-result-win {
  color: var(--status-success);
  background: rgba(74, 222, 128, 0.06);
  border-color: rgba(74, 222, 128, 0.12);
}

.spin-result-miss {
  color: var(--text-soft);
  opacity: 0.5;
  background: rgba(255, 255, 255, 0.02);
}

.spin-result-pending {
  color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.01);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.06);
}

/* === SPIN 3-COLUMN LAYOUT === */

.spin-layout {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  width: 100%;
}

.spin-panel {
  flex: 0 0 200px;
  min-width: 0;
}

.spin-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.spin-panel-header {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  opacity: 0.6;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Live feed */
.spin-feed {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.spin-feed::-webkit-scrollbar {
  width: 5px;
}

.spin-feed::-webkit-scrollbar-track {
  background: transparent;
}

.spin-feed::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

.spin-feed::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.spin-feed-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.03);
  font-size: 0.72rem;
  color: var(--text-soft);
  line-height: 1.3;
}

.spin-feed-item.feed-jackpot {
  border-color: rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.04);
}

.spin-feed-item.feed-big {
  border-color: rgba(168, 85, 247, 0.2);
  background: rgba(168, 85, 247, 0.03);
}

.spin-feed-icon {
  flex-shrink: 0;
  font-size: 0.8rem;
}

.spin-feed-user {
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90px;
}

.spin-feed-value {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 0.7rem;
  white-space: nowrap;
}

.spin-feed-value.feed-val-jackpot {
  color: #fbbf24;
}

.spin-feed-value.feed-val-big {
  color: #a855f7;
}

.spin-feed-value.feed-val-normal {
  color: #14b8a6;
}

.spin-feed-time {
  font-size: 0.6rem;
  opacity: 0.4;
  white-space: nowrap;
}

/* Right panel stats stacked */
.spin-stats-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.spin-stats-stack .ms-stat-box {
  width: 100%;
}

/* Enlarge the wheel */
.spin-center .spin-wheel-wrapper {
  margin: 0.5rem auto;
}

.spin-center #spinWheelCanvas {
  width: 420px !important;
  height: 420px !important;
}

/* Remove old status line from spin */
#spinGameContainer .ms-status-line {
  display: none;
}

/* Mobile: stack panels */
@media (max-width: 900px) {
  .spin-layout {
    flex-direction: column;
    align-items: center;
  }

  .spin-panel {
    flex: none;
    width: 100%;
    max-width: 400px;
  }

  .spin-panel-left {
    order: 3;
  }

  .spin-center {
    order: 1;
    width: 100%;
  }

  .spin-panel-right {
    order: 2;
  }

  .spin-stats-stack {
    flex-direction: row;
    justify-content: center;
  }

  .spin-center #spinWheelCanvas {
    width: 360px !important;
    height: 360px !important;
  }

  .spin-feed {
    max-height: 200px;
  }
}

@media (max-width: 480px) {
  .spin-center #spinWheelCanvas {
    width: 300px !important;
    height: 300px !important;
  }
}

/* Sidebar spin button */
.sidebar-tool-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
  text-align: left;
}

.sidebar-tool-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-tool-btn.active {
  background: rgba(168, 85, 247, 0.08);
  border-left: 2px solid var(--indus-purple);
}

.sidebar-tool-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Mobile */
@media (max-width: 640px) {
  #spinWheelCanvas {
    width: 280px !important;
    height: 280px !important;
  }
}

/* === MOBILE STAT CARD OVERRIDES — must be after desktop .profile-grid rule === */
@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem;
  }

  .profile-mini-card {
    padding: 0.55rem 0.65rem;
  }

  .profile-mini-label {
    font-size: 0.55rem;
  }

  .profile-mini-value {
    font-size: 1.1rem;
    margin-top: 0.15rem;
  }
}

/* Mobile: disable body-level transform so position:fixed works correctly */
@media (max-width: 768px) {
  body.tools-enter {
    transform: none !important;
  }

  body.tools-enter.tools-enter-active {
    transform: none !important;
  }

  body.app-entering,
  body.app-entered {
    transform: none !important;
  }
}