/* ============================================
   Oxofoxo - components.css
   Step 6.5 (part 1/3): Layout + Logo + Theme toggle
   ============================================ */

/* ========== Layout primitives ========== */

body {
  min-height: 100vh;
  min-height: 100dvh; /* mobile viewport, accounts for browser chrome */
  display: flex;
  flex-direction: column;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.site-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-5);
  width: 100%;
}

.site-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

/* ========== View containers ========== */

.view {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* native [hidden] handles visibility - no custom CSS needed */

/* ========== Logo system ========== */

.logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-primary);
  transition: opacity var(--transition-fast) var(--easing-snappy);
}

.logo-link:hover {
  opacity: 0.85;
}

.logo-link:focus-visible {
  outline: 2px solid var(--ring-accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.logo {
  display: block;
  height: auto;
}

/* Default: full visible, icon hidden (desktop-first) */
.logo-full {
  width: 170px;
  max-width: 100%;
}

.logo-icon {
  width: 40px;
  display: none;
}

/* Mobile: icon visible, full hidden */
@media (max-width: 639px) {
  .logo-full {
    display: none;
  }
  .logo-icon {
    display: block;
  }
}

/* ========== Theme toggle ========== */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast) var(--easing-snappy),
              border-color var(--transition-fast) var(--easing-snappy);
}

.theme-toggle:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-strong);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--ring-accent);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

/* Show sun in dark mode (toggle says "switch to light"), moon in light mode */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ============================================
   Step 6.5 (part 2/3): Hero + Buttons + Auth card
   ============================================ */

/* ========== Hero (landing view) ========== */

.hero {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  padding: var(--space-8) 0;
}

.hero-title {
  margin: 0;
}

.hero-tagline {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  max-width: 32ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-2);
}

/* ========== Buttons ========== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background var(--transition-fast) var(--easing-snappy),
              border-color var(--transition-fast) var(--easing-snappy),
              transform var(--transition-fast) var(--easing-snappy);
  min-height: 44px; /* mobile tap target */
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn:focus-visible {
  outline: 2px solid var(--ring-accent);
  outline-offset: 2px;
}

/* Primary - lime */
.btn-primary {
  background: var(--brand-lime);
  color: var(--brand-lime-on);
  border-color: var(--brand-lime);
}

.btn-primary:hover:not(:disabled) {
  background: var(--brand-lime-dark);
  border-color: var(--brand-lime-dark);
}

.btn-primary:active:not(:disabled) {
  background: var(--brand-lime-active);
  border-color: var(--brand-lime-active);
}

/* Secondary - outline */
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-secondary);
  border-color: var(--text-primary);
}

/* Link button (button styled as text link) */
.link-button {
  display: inline;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-link);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast) var(--easing-snappy);
}

.link-button:hover {
  color: var(--text-link-hover);
}

.link-button:focus-visible {
  outline: 2px solid var(--ring-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ========== Auth card ========== */

.auth-card {
  width: 100%;
  max-width: var(--max-width-form);
  padding: var(--space-8) var(--space-6);
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
              0 4px 12px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

[data-theme="dark"] .auth-card {
  background: var(--bg-secondary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
              0 4px 12px rgba(0, 0, 0, 0.2);
}

.auth-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.auth-subtitle {
  margin: 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.auth-form-placeholder {
  padding: var(--space-6);
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  text-align: center;
  font-size: var(--text-sm);
  font-style: italic;
}

.auth-switch {
  margin: 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ============================================
   Step 6.5 (part 3/3): Loading + Footer + Utilities
   ============================================ */

/* ========== Loading view ========== */

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-12) 0;
  min-height: 200px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-subtle);
  border-top-color: var(--brand-lime);
  border-radius: var(--radius-full);
  animation: oxo-spin 700ms linear infinite;
}

.loading-text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

@keyframes oxo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Honor reduced-motion: spinner becomes a soft pulse instead */
@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation: oxo-pulse 1.5s ease-in-out infinite;
    border-top-color: var(--brand-lime);
  }
  @keyframes oxo-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }
}

/* ========== Footer ========== */

.footer-text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.footer-version {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

.footer-sep {
  color: var(--text-tertiary);
  opacity: 0.6;
}

.footer-link {
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--transition-fast) var(--easing-snappy);
}

.footer-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-link:focus-visible {
  outline: 2px solid var(--ring-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ========== Utilities ========== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========== Mobile refinements ========== */

@media (max-width: 639px) {
  .site-header {
    padding: var(--space-3) var(--space-4);
  }

  .site-main {
    padding: var(--space-5) var(--space-4);
  }

  .hero {
    padding: var(--space-5) 0;
    gap: var(--space-5);
  }

  .hero-tagline {
    font-size: var(--text-lg);
  }

  .hero-actions {
    width: 100%;
    flex-direction: column;
  }

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

  .auth-card {
    padding: var(--space-6) var(--space-4);
  }
}

/* ========== Fix: hidden attribute override ========== */
/* The [hidden] attribute must override .view display:flex */
.view[hidden] {
  display: none;
}

/* ============================================
   Step 6.5 (LEVEL 3): Hero redesign
   Adds: bg orbs, hero icon, display wordmark,
         feature pills, accent divider, btn-large
   ============================================ */

/* ========== Background orbs (subtle ambient) ========== */

.bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
}

.bg-orb-lime {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--brand-lime) 0%, transparent 70%);
  top: -150px;
  left: -150px;
}

.bg-orb-orange {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #EA580C 0%, transparent 70%);
  bottom: -100px;
  right: -100px;
}

[data-theme="dark"] .bg-orb {
  opacity: 0.12;
}

/* Make sure content sits above orbs */
.site-header,
.site-main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* ========== Header refinements (Level 3) ========== */

.site-header {
  padding: var(--space-5) var(--space-6);
}

.logo-full {
  width: 200px;
}

.logo-icon {
  width: 44px;
}

/* ========== Hero (Level 3 redesign) ========== */

.view-landing {
  padding: var(--space-6) 0 var(--space-12);
  gap: 0;
}

.hero-icon {
  width: 96px;
  height: 96px;
  display: block;
  color: var(--text-primary);
  margin-bottom: var(--space-5);
  filter: drop-shadow(0 4px 12px rgba(151, 196, 89, 0.15));
}

[data-theme="dark"] .hero-icon {
  filter: drop-shadow(0 4px 16px rgba(151, 196, 89, 0.25));
}

.hero-wordmark {
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-sans);
  font-size: clamp(48px, 8vw, 80px);
  font-weight: var(--weight-bold);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--brand-lime);
  text-align: center;
}

.hero-pill {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.2em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.hero-divider {
  width: 60px;
  height: 3px;
  background: #EA580C;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

.hero-tagline {
  margin: 0 0 var(--space-8) 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  max-width: 32ch;
  text-align: center;
}

/* ========== Feature pills ========== */

.feature-pills {
  list-style: none;
  margin: 0 0 var(--space-8) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  transition: border-color var(--transition-fast) var(--easing-snappy),
              transform var(--transition-fast) var(--easing-snappy);
}

.feature-pill:hover {
  border-color: var(--brand-lime);
  transform: translateY(-1px);
}

.feature-icon {
  width: 16px;
  height: 16px;
  color: var(--brand-lime);
  flex-shrink: 0;
}

.feature-label {
  letter-spacing: 0.02em;
}

/* ========== Hero actions (Level 3) ========== */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

/* ========== Button large variant ========== */

.btn-large {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  min-height: 52px;
  min-width: 160px;
}

/* ========== Mobile refinements (Level 3) ========== */

@media (max-width: 639px) {
  .site-header {
    padding: var(--space-3) var(--space-4);
  }

  .view-landing {
    padding: var(--space-4) 0 var(--space-8);
  }

  .hero-icon {
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-4);
  }

  .hero-wordmark {
    font-size: clamp(40px, 12vw, 56px);
  }

  .hero-pill {
    font-size: 10px;
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-5);
  }

  .hero-divider {
    margin-bottom: var(--space-5);
  }

  .hero-tagline {
    font-size: var(--text-lg);
    margin-bottom: var(--space-6);
  }

  .feature-pills {
    margin-bottom: var(--space-6);
    gap: var(--space-2);
  }

  .feature-pill {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
  }

  .btn-large {
    min-width: 0;
  }

  .bg-orb-lime {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -100px;
  }

  .bg-orb-orange {
    width: 250px;
    height: 250px;
    bottom: -80px;
    right: -80px;
  }
}

/* ============================================
   Step 6.5 (LEVEL 3 v2): Fit-without-scroll fixes
   - Header logo bigger (icon only now)
   - Hero spacing tightened
   - Smaller hero icon + wordmark
   ============================================ */

/* Header logo icon (now the only logo in header) */
.logo-icon {
  width: 48px;
}

/* Always show logo-icon in header (not just mobile) */
@media (min-width: 640px) {
  .logo-icon {
    display: block;
  }
}

/* Hero icon - smaller */
.hero-icon {
  width: 80px;
  height: 80px;
  margin-bottom: var(--space-4);
}

/* Wordmark - smaller, more proportionate */
.hero-wordmark {
  font-size: clamp(40px, 6vw, 64px);
  margin-bottom: var(--space-2);
}

/* Pill - tighter */
.hero-pill {
  margin-bottom: var(--space-4);
}

/* Divider - tighter */
.hero-divider {
  margin-bottom: var(--space-5);
}

/* Tagline - tighter */
.hero-tagline {
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
}

/* Feature pills - tighter */
.feature-pills {
  margin-bottom: var(--space-6);
}

/* Landing view - reduce overall padding */
.view-landing {
  padding: var(--space-4) 0;
}

/* Mobile refinements (overrides Level 3 mobile) */
@media (max-width: 639px) {
  .logo-icon {
    width: 44px;
  }

  .hero-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-3);
  }

  .hero-wordmark {
    font-size: clamp(36px, 10vw, 48px);
  }

  .hero-pill {
    margin-bottom: var(--space-3);
  }

  .hero-divider {
    margin-bottom: var(--space-4);
  }

  .hero-tagline {
    font-size: var(--text-base);
    margin-bottom: var(--space-5);
  }

  .feature-pills {
    margin-bottom: var(--space-5);
  }

  .view-landing {
    padding: var(--space-3) 0;
  }
}

/* ============================================
   Step 6.5 (LEVEL 3 ATMOSPHERIC):
   Background dot pattern + hero pulse +
   floating particles + vignette
   ============================================ */

/* ========== Constellation dot pattern ========== */

body {
  background-image:
    radial-gradient(circle, rgba(151, 196, 89, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0;
}

[data-theme="dark"] body {
  background-image:
    radial-gradient(circle, rgba(151, 196, 89, 0.08) 1px, transparent 1px);
}

/* ========== Vignette overlay ========== */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.06) 100%
  );
}

[data-theme="dark"] body::before {
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

/* ========== Stronger background orbs ========== */

.bg-orb-lime {
  opacity: 0.20;
}

.bg-orb-orange {
  opacity: 0.15;
}

[data-theme="dark"] .bg-orb-lime {
  opacity: 0.18;
}

[data-theme="dark"] .bg-orb-orange {
  opacity: 0.14;
}

/* ========== Hero icon - pulse + multi-layer glow ========== */

.hero-icon {
  position: relative;
  filter:
    drop-shadow(0 0 12px rgba(151, 196, 89, 0.35))
    drop-shadow(0 0 32px rgba(151, 196, 89, 0.20))
    drop-shadow(0 4px 12px rgba(151, 196, 89, 0.15));
  animation: oxo-hero-pulse 4s ease-in-out infinite;
}

[data-theme="dark"] .hero-icon {
  filter:
    drop-shadow(0 0 16px rgba(151, 196, 89, 0.50))
    drop-shadow(0 0 40px rgba(151, 196, 89, 0.30))
    drop-shadow(0 4px 16px rgba(151, 196, 89, 0.25));
}

@keyframes oxo-hero-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-icon {
    animation: none;
  }
}

/* ========== Floating particles ========== */

.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0;
}

.particle-1 {
  width: 6px;
  height: 6px;
  background: var(--brand-lime);
  top: 25%;
  left: 15%;
  animation: oxo-float-1 18s ease-in-out infinite;
}

.particle-2 {
  width: 4px;
  height: 4px;
  background: #EA580C;
  top: 60%;
  left: 80%;
  animation: oxo-float-2 22s ease-in-out infinite;
  animation-delay: -3s;
}

.particle-3 {
  width: 5px;
  height: 5px;
  background: var(--brand-lime);
  top: 75%;
  left: 20%;
  animation: oxo-float-1 20s ease-in-out infinite;
  animation-delay: -8s;
}

.particle-4 {
  width: 3px;
  height: 3px;
  background: #EA580C;
  top: 30%;
  left: 75%;
  animation: oxo-float-2 25s ease-in-out infinite;
  animation-delay: -12s;
}

.particle-5 {
  width: 4px;
  height: 4px;
  background: var(--brand-lime);
  top: 50%;
  left: 50%;
  animation: oxo-float-1 24s ease-in-out infinite;
  animation-delay: -6s;
}

@keyframes oxo-float-1 {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10%, 90% {
    opacity: 0.5;
  }
  50% {
    transform: translate(40px, -60px);
    opacity: 0.7;
  }
}

@keyframes oxo-float-2 {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10%, 90% {
    opacity: 0.4;
  }
  50% {
    transform: translate(-50px, -40px);
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .particle {
    animation: none;
    opacity: 0.3;
  }
}

/* Hide particles on mobile (performance) */
@media (max-width: 639px) {
  .particles {
    display: none;
  }

  body {
    background-size: 24px 24px;
  }
}

/* ============================================================
   FORMS (Step 6.7)
   Login + Register forms inside .auth-card
   ============================================================ */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-2);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-normal);
  user-select: none;
}

.form-input {
  width: 100%;
  /* Locked dimensions to prevent autofill / password-manager jitter */
  height: 48px;
  box-sizing: border-box;
  padding: 0 var(--space-4);
  /* Reserve right padding for browser/extension icons (autofill, password mgr) */
  padding-right: var(--space-10);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast) var(--easing-snappy),
              box-shadow var(--transition-fast) var(--easing-snappy);
  outline: none;
}

.form-input::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

.form-input:hover:not(:disabled):not(:focus) {
  border-color: var(--border-strong);
}

.form-input:focus {
  border-color: var(--brand-lime);
  box-shadow: 0 0 0 3px var(--ring-accent);
}

.form-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-secondary);
}

/* Error state on input */
.form-field.has-error .form-input {
  border-color: var(--danger);
}

.form-field.has-error .form-input:focus {
  box-shadow: 0 0 0 3px var(--ring-danger);
}

.form-helper {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.2;
  /* Fixed pixel height (not 1em) - immune to font-load size changes */
  min-height: 16px;
}

.form-field.has-error .form-helper {
  color: var(--danger);
}

/* Inline form-level error box (network errors, server errors) */
.form-error {
  padding: var(--space-3) var(--space-4);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-md);
  color: var(--danger);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  animation: oxoSlideIn 200ms var(--easing-snappy);
}

.form-error[hidden] {
  display: none;
}

@keyframes oxoSlideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button extensions */
.btn-block {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  position: relative;
}

.btn[data-submit][disabled],
.btn[data-submit].is-loading {
  cursor: progress;
  opacity: 0.85;
}

.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: oxoSpin 700ms linear infinite;
}

.btn-spinner[hidden] {
  display: none;
}

.btn.is-loading .btn-text {
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .form-error {
    animation: none;
  }
  .btn-spinner {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.6;
  }
}

/* ============================================================ */
/* SPLIT LAYOUT - Auth views (login + register)                  */
/* ============================================================ */
/*                                                                */
/* Desktop (>= 768px):  [ branding ] | [ form ]   side-by-side   */
/* Mobile  (<  768px):  branding stacked above form              */
/*                                                                */
/* The .auth-view section becomes a flex/grid container so the   */
/* .auth-branding (added via HTML) sits next to the .auth-card.  */
/* ============================================================ */

/* --- Container: turn auth-view into a 2-column shell --- */
.auth-view {
  /* Explicitly row to override .view's column direction (set earlier in file). */
  display: flex;
  flex-direction: row;
  /* Top-align: branding starts at the same height as the "Sign in" heading. */
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-10);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  /* Push content up - smaller top padding, generous bottom for breathing room */
  padding: var(--space-10) var(--space-6) var(--space-6);
}

/* --- Branding column --- */
.auth-branding {
  flex: 1 1 0;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Tighter gap between branding elements */
  gap: var(--space-2);
  color: var(--text-primary);
  /* Padding matches the auth-card's internal padding so the headline
     visually aligns with the "Sign in" heading on the right. */
  padding-top: var(--space-6);
}

/* .auth-branding-logo removed - duplicate of header logo */

/* Removed: .auth-branding-wordmark (wordmark moved to site header) */

.auth-branding-headline {
  font-family: var(--font-sans);
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin: 0;
  color: var(--text-primary);
}

.auth-branding-pill {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  text-transform: uppercase;
  /* Subtle backdrop for atmospheric depth */
  background: linear-gradient(135deg,
    rgba(151, 196, 89, 0.04) 0%,
    rgba(234, 88, 12, 0.03) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.auth-branding-divider {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, #EA580C 0%, rgba(234, 88, 12, 0) 100%);
  border-radius: var(--radius-full);
  margin: var(--space-2) 0;
}

.auth-branding-tagline {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.auth-branding-features {
  list-style: none;
  padding: 0;
  /* Pulled closer to the tagline above */
  margin: var(--space-1) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-branding-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  transition: transform var(--transition-fast) var(--easing-snappy);
}

.auth-branding-feature:hover {
  transform: translateX(2px);
}

.auth-branding-feature svg {
  width: 20px;
  height: 20px;
  color: var(--brand-lime);
  flex-shrink: 0;
  margin-top: 2px;
}

.auth-branding-feature .feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.auth-branding-feature .feature-text strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.2;
}

.auth-branding-feature .feature-text span {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.3;
}

/* --- Form column: keep auth-card width, but allow flex-grow on its side --- */
.auth-view .auth-card {
  flex: 1 1 0;
  max-width: var(--max-width-form);
  margin: 0;
}

/* ============================================================ */
/* MOBILE: stack vertically                                      */
/* ============================================================ */
@media (max-width: 767px) {
  .auth-view {
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-4) var(--space-6);
    align-items: stretch;
  }

  /* Branding column on mobile: left-aligned, compact, no features.
     Keep pill + headline + tagline (the emotional hook).
     Features hidden because they are too long for small screens. */
  .auth-branding {
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
    gap: var(--space-2);
    padding-top: var(--space-2);
    /* Disable the desktop vertical separator */
    position: static;
  }

  .auth-branding::after {
    /* Remove the vertical separator on mobile */
    display: none;
  }

  /* Single-line headline on mobile - slightly smaller to fit */
  .auth-branding-headline {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  /* Smaller tagline */
  .auth-branding-tagline {
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  /* Subtle divider on mobile (smaller) */
  .auth-branding-divider {
    width: 48px;
  }

  /* Hide features on mobile (5 items = too tall) */
  .auth-branding-features {
    display: none;
  }

  .auth-view .auth-card {
    width: 100%;
    max-width: 100%;
  }
}

/* ============================================================ */
/* AUTH VIEW: prevent page scroll                                */
/* ============================================================ */
/* When showing an auth view, lock the page to viewport height   */
/* and hide overflow. Auth content should always fit in one      */
/* screen (we already tightened spacing above).                  */
/* ============================================================ */
/* Scroll-lock only on large desktops where 5 features fit comfortably.
   Smaller screens allow page scroll (5 features + form may exceed viewport). */
@media (min-width: 1024px) {
  body:has(.auth-view:not([hidden])) {
    overflow: hidden;
  }

  body:has(.auth-view:not([hidden])) .site-main {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
  }
}

/* ============================================================ */
/* POLISH: vertical separator between branding and form          */
/* ============================================================ */
@media (min-width: 768px) {
  .auth-branding {
    position: relative;
  }

  .auth-branding::after {
    content: "";
    position: absolute;
    top: var(--space-4);
    bottom: var(--space-4);
    /* Position at the right edge of the column, in the gap. */
    right: calc(var(--space-10) * -0.5);
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      var(--border-subtle) 20%,
      var(--border-subtle) 80%,
      transparent 100%
    );
    pointer-events: none;
  }
}

/* ============================================================ */
/* AUTOFILL STABILIZATION                                        */
/* ============================================================ */
/* Chrome/Safari apply yellow/blue tint + re-paint when           */
/* autofilling. The transition trick keeps our background color  */
/* and prevents the visible "flash + resize" jitter.             */
/* ============================================================ */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
  /* Match our normal background via inset shadow (override yellow) */
  -webkit-box-shadow: 0 0 0 1000px var(--bg-primary) inset;
  /* Override Chrome's text color */
  -webkit-text-fill-color: var(--text-primary);
  /* Slow down the bg transition so we never see the yellow flash */
  transition: background-color 99999s ease-in-out 0s,
              color 99999s ease-in-out 0s;
  /* Keep our font (Chrome resets it on autofill) */
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

/* Same treatment for the focused autofill state */
.form-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-primary) inset,
                      0 0 0 3px var(--ring-accent);
}

/* ============================================================ */
/* MICRO-JITTER PREVENTION                                       */
/* ============================================================ */
/* The HTML `hidden` attribute should always remove the element  */
/* from layout. Some inline-block elements with explicit         */
/* `display:` rules can override this; force the issue.          */
/* ============================================================ */
[hidden] {
  display: none !important;
}

/* Lock font-related metrics so font swap doesn't shift layout */
.auth-form,
.auth-form * {
  /* Use the same line-height regardless of font (Inter / fallback) */
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

/* Form labels: fixed px height instead of em-based */
.form-label {
  line-height: 1.2;
  min-height: 18px;
}

/* ============================================================ */
/* HEADER WORDMARK                                               */
/* ============================================================ */
.logo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}

.logo-wordmark {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-lime);
  line-height: 1;
}

/* Wordmark stays visible on mobile - it's the brand identity. */

/* ============================================================ */
/* INLINE LIME ACCENT (used in tagline keywords)                 */
/* ============================================================ */
.auth-branding-tagline .accent {
  color: var(--brand-lime);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   GAME VIEW
   ============================================================ */
.view-game {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: var(--space-6);
}

.game-layout {
  width: 100%;
  max-width: var(--max-width-page);
  margin: 0 auto;
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-6);
}

.game-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.game-char-name {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--brand-lime);
}

.game-char-meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.game-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.game-panel-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.game-inventory {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.game-empty {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-6) 0;
}

.inv-slot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.inv-item-name {
  flex: 1;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.inv-item-qty {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--brand-lime);
  min-width: 40px;
  text-align: right;
}

.inv-item-cat {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  min-width: 80px;
  text-align: right;
}

/* ========== CHARACTER CREATOR ========== */
.creator-layout{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:24px;min-height:100vh;align-items:start}
.creator-preview{display:flex;flex-direction:column;gap:14px}
.creator-avatar-frame{background:var(--bg-secondary);border:0.5px solid var(--border-subtle);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}
.creator-badge{font-size:11px;font-weight:500;padding:3px 12px;border-radius:20px;background:var(--bg-tertiary);color:var(--text-secondary);transition:background 0.2s,color 0.2s}
.creator-name-display{font-size:13px;font-weight:500;color:var(--text-primary)}
.creator-appearance{display:flex;flex-direction:column;gap:8px}
.creator-section-label{font-size:11px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}
.creator-swatches{display:flex;gap:5px;flex-wrap:wrap}
.creator-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .12s}
.creator-swatch:hover{transform:scale(1.15)}
.creator-swatch-active{border-color:var(--text-primary);transform:scale(1.1)}
.creator-options{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.creator-paths{display:flex;flex-direction:column;gap:6px}
.creator-path-card{border:0.5px solid var(--border-subtle);border-radius:var(--radius-md);padding:10px 12px;cursor:pointer;transition:background .12s;background:var(--bg-primary)}
.creator-path-card:hover:not(.creator-path-soon){background:var(--bg-secondary)}
.creator-path-soon{opacity:.5;cursor:default}
.creator-path-top{display:flex;align-items:center;gap:8px}
.creator-path-em{font-size:16px;line-height:1}
.creator-path-name{font-size:13px;font-weight:500;color:var(--text-primary)}
.creator-path-bonus{font-size:11px;color:var(--text-secondary)}
.creator-path-soon-tag{font-size:10px;color:var(--text-tertiary);font-weight:400}
.creator-form{margin-top:4px}
@media(max-width:767px){.creator-layout{grid-template-columns:1fr}.creator-avatar-frame{flex-direction:row;gap:16px;justify-content:flex-start}}

/* === CREATOR V2 === */
.creator-paths{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.creator-path-card{padding:7px 9px}
.creator-path-info{flex:1;min-width:0}
.creator-preview-info{background:var(--bg-tertiary);border-radius:var(--radius-md);padding:8px 10px;width:100%;min-height:48px}
.preview-path-name{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:2px}
.preview-bonus{font-size:11px;color:var(--brand-lime-dark)}
.preview-item{font-size:10px;color:var(--text-tertiary);margin-top:2px}
.creator-seg-row{display:flex;flex-wrap:wrap;gap:4px}
.creator-seg-btn{background:var(--bg-secondary);border:0.5px solid var(--border-subtle);border-radius:var(--radius-sm);padding:3px 8px;font-size:11px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .12s;font-family:inherit;line-height:1.4}
.creator-seg-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.creator-seg-active,.creator-seg-active:hover{background:var(--brand-lime);border-color:var(--brand-lime-dark);color:var(--brand-lime-on)}
.creator-randomize{background:none;border:0.5px solid var(--border-subtle);border-radius:var(--radius-sm);padding:5px 10px;font-size:11px;color:var(--text-secondary);cursor:pointer;font-family:inherit;transition:all .12s;width:100%;margin-top:4px}
.creator-randomize:hover{background:var(--bg-secondary);color:var(--text-primary)}

/* === CREATOR COMPACT LEFT === */
.creator-layout{grid-template-columns:200px 1fr;gap:16px;padding:16px;min-height:unset}
.creator-avatar-frame{padding:10px 8px;gap:5px}
#creator-avatar{width:130px;height:178px}
.creator-preview-info{padding:6px 8px;min-height:40px}
.preview-path-name{font-size:11px}
.preview-bonus{font-size:10px}
.preview-item{font-size:9px}
.creator-appearance{gap:4px}
.creator-section-label{font-size:10px;margin-top:2px}
.creator-swatches{gap:3px}
.creator-swatch{width:18px;height:18px;border-width:1.5px}
.creator-seg-row{gap:3px}
.creator-seg-btn{padding:2px 6px;font-size:10px}
.creator-randomize{padding:4px 8px;font-size:10px;margin-top:2px}
.creator-badge{font-size:10px;padding:2px 10px}
.creator-name-display{font-size:12px}

/* === CREATOR V3 FIXES === */
.creator-path-card.creator-path-active{background:var(--bg-secondary)}
.creator-path-check{display:none;color:var(--brand-lime);font-weight:700;font-size:13px;margin-left:auto}
.creator-path-active .creator-path-check{display:block}
.creator-paths-footer{font-size:10px;color:var(--text-tertiary);margin-top:4px;padding:4px 0}
.creator-name-input-wrap{position:relative}
#char-name:placeholder-shown ~ .creator-enter-hint{display:block}
#char-name:not(:placeholder-shown) ~ .creator-enter-hint{display:none}

/* === CREATOR V5 - appearance in right column === */
.creator-layout{grid-template-columns:180px 1fr}
.creator-preview{position:sticky;top:16px}
.creator-appearance{background:var(--bg-secondary);border:0.5px solid var(--border-subtle);border-radius:var(--radius-md);padding:8px 10px;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.creator-appearance .creator-section-label{grid-column:span 1}
.creator-appearance .creator-swatches{grid-column:span 1}
.creator-appearance .creator-seg-row{grid-column:span 2}
.creator-appearance .creator-randomize{grid-column:span 2}
.creator-preview-info{display:none}

/* === CREATOR V6 - appearance in right === */
.creator-layout{grid-template-columns:185px 1fr;align-items:start}
.creator-preview{position:sticky;top:16px}
.creator-appearance{display:grid;grid-template-columns:repeat(4,1fr);gap:3px 10px;background:var(--bg-secondary);border:0.5px solid var(--border-subtle);border-radius:var(--radius-md);padding:8px 10px;margin-bottom:8px}
.creator-appearance .creator-section-label{grid-column:span 1;align-self:end}
.creator-appearance .creator-swatches{grid-column:span 1}
.creator-appearance .creator-seg-row{grid-column:span 2}

/* === CREATOR V7 RESET === */
.creator-layout{display:grid;grid-template-columns:185px 1fr;gap:16px;padding:16px;align-items:start}
.creator-preview{position:sticky;top:16px;display:flex;flex-direction:column;gap:8px}
.creator-options{display:flex;flex-direction:column;gap:10px}
.creator-appearance{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px 16px;align-items:flex-start;background:var(--bg-secondary);border:0.5px solid var(--border-subtle);border-radius:var(--radius-md);padding:8px 10px}
.creator-appearance .creator-section-label{width:100%;flex-basis:100%}
.creator-app-group{display:flex;flex-direction:column;gap:3px}
.creator-app-group .creator-section-label{width:auto;flex-basis:auto}

/* === CREATOR FINAL - CLEAN OVERRIDE === */
#view-character-create .creator-layout{
  display:grid !important;
  grid-template-columns:185px 1fr !important;
  gap:16px !important;
  padding:16px !important;
  align-items:start !important;
  min-height:unset !important;
}
#view-character-create .creator-preview{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  position:sticky !important;
  top:16px !important;
}
#view-character-create .creator-options{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}
#view-character-create .creator-appearance{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  gap:4px 14px !important;
  background:var(--bg-secondary) !important;
  border:0.5px solid var(--border-subtle) !important;
  border-radius:var(--radius-md) !important;
  padding:8px 10px !important;
  grid-column:unset !important;
  grid-template-columns:unset !important;
}
#view-character-create .creator-app-group{
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  min-width:0 !important;
}
#view-character-create .creator-section-label{
  font-size:9px !important;
  width:auto !important;
  flex-basis:auto !important;
}
#view-character-create .creator-swatches{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:3px !important;
}
#view-character-create .creator-swatch{
  width:14px !important;
  height:14px !important;
  flex-shrink:0 !important;
}
#view-character-create .creator-seg-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:2px !important;
}
#view-character-create .creator-seg-btn{
  padding:2px 5px !important;
  font-size:9px !important;
}

/* === CREATOR POLISH === */
#view-character-create .creator-appearance{
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  border-left:none;border-right:none;
  border-radius:0;
  background:transparent;
  padding:10px 0;
  gap:0;
  justify-content:space-between;
}
#view-character-create .creator-app-group{
  padding:0 10px;
  border-right:0.5px solid var(--border-subtle);
  flex:1;
  min-width:0;
}
#view-character-create .creator-app-group:last-child{border-right:none}
#view-character-create .creator-section-label{
  font-size:9px;color:var(--text-tertiary);
  margin-bottom:5px;display:block;
}
#view-character-create .creator-swatches{flex-wrap:wrap;gap:3px}
#view-character-create .creator-swatch{width:13px;height:13px}
#view-character-create .creator-seg-btn{font-size:9px;padding:2px 5px}
#view-character-create .creator-paths{grid-template-columns:1fr 1fr;gap:5px}
#view-character-create .creator-path-card{padding:8px 10px}
#view-character-create .creator-options{gap:10px}
#view-character-create .auth-title{font-size:var(--text-2xl)}

/* === CREATOR FINAL POLISH === */
#view-character-create{display:flex;justify-content:center;padding:0}
#view-character-create .creator-layout{max-width:1020px;width:100%;grid-template-columns:210px 1fr}
#view-character-create #creator-avatar{width:180px;height:248px}
#view-character-create .creator-avatar-frame{padding:14px 10px 10px}
#view-character-create .creator-badge{font-size:11px;padding:3px 12px}
#view-character-create .creator-name-display{font-size:13px}
#view-character-create .creator-randomize{font-size:11px;padding:5px 10px}
#view-character-create .creator-paths{grid-template-columns:1fr 1fr;gap:6px}
#view-character-create .creator-path-card{padding:9px 11px}
#view-character-create .creator-path-name{font-size:13px}
#view-character-create .creator-path-bonus{font-size:11px}
#view-character-create .creator-path-active{background:color-mix(in srgb,var(--brand-lime) 8%,var(--bg-primary))}
#view-character-create .auth-title{font-size:var(--text-2xl)}
#view-character-create .creator-appearance{
  justify-content:flex-start;
  gap:0;
  padding:8px 0;
  margin:2px 0;
}
#view-character-create .creator-app-group{
  padding:0 12px;
  border-right:0.5px solid var(--border-subtle);
  flex:none;
}
#view-character-create .creator-app-group:last-child{border-right:none}
#view-character-create .creator-section-label{font-size:9px;margin-bottom:4px;white-space:nowrap}
#view-character-create .creator-swatches{flex-wrap:nowrap;gap:3px}
#view-character-create .creator-swatch{width:14px;height:14px;flex-shrink:0}
#view-character-create .creator-seg-row{flex-wrap:wrap;gap:2px}
#view-character-create .creator-seg-btn{font-size:9px;padding:2px 6px}
#view-character-create .creator-form{margin-top:2px}

/* =============================================
   Game View - Welcome Dashboard (Phase 4.7)
   ============================================= */

/* HUD face in header */
.game-face-hud {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border: 2px solid var(--border-subtle);
}

/* Header layout */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
}

.game-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.game-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.game-char-name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.2;
}

.game-path-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  line-height: 1.4;
  width: fit-content;
}

/* Game body */
.game-body {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

/* Welcome hero */
.game-welcome-hero {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.game-face-welcome {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border: 3px solid var(--border-subtle);
}

.game-welcome-text {
  flex: 1;
}

.game-welcome-name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-1) 0;
  line-height: 1.2;
}

.game-welcome-path {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* Starter gear card */
.game-gear-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}

.game-gear-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
}

.game-gear-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.game-gear-slot {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.game-gear-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  flex: 1;
}

.game-gear-bonus {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: #97C459;
  background: #97C45918;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* Action button */
.game-action-btn {
  width: 100%;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  color: white;
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.game-action-btn:hover {
  opacity: 0.88;
}

.game-loading-msg {
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-8);
}

/* Mobile */
@media (max-width: 480px) {
  .game-face-welcome { width: 72px; height: 72px; }
  .game-welcome-name { font-size: var(--text-xl); }
  .game-body { padding: var(--space-6) var(--space-4); }
}

/* =============================================
   Dashboard Grid (Phase 4.7)
   ============================================= */
.db-hero {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.db-hero-info { flex: 1; }
.db-stats {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.db-stat { font-size: var(--text-sm); color: var(--text-secondary); }
.db-stat b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.db-stat-sep { color: var(--text-tertiary); font-size: var(--text-xs); }

.db-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  align-items: start;
}
.db-col-main, .db-col-side { display: flex; flex-direction: column; gap: var(--space-4); }

.db-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.db-card-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
}

/* Action card */
.db-action-card { border-color: var(--border-default); }
.db-action-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.db-action-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-5) 0;
  line-height: var(--leading-relaxed);
}
.game-action-btn {
  width: 100%;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  color: white;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  border: none;
}
.game-action-btn:hover { opacity: 0.88; }

/* Goal card */
.db-goal-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.db-goal-reward {
  font-size: var(--text-sm);
  color: var(--brand-lime-dark);
  font-weight: var(--weight-medium);
}

/* Lore card */
.db-lore-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.db-lore-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Mobile: stack columns */
@media (max-width: 767px) {
  .db-grid { grid-template-columns: 1fr; }
  .db-hero { gap: var(--space-4); }
}

/* =============================================
   Phase 4.7.1 - Layout Fix
   ============================================= */

/* Topbar */
.gv-layout { min-height: 100vh; background: var(--bg-primary); }
.gv-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
}
.gv-topbar-brand {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--brand-lime);
  letter-spacing: var(--tracking-tight);
}
.gv-container {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}
.gv-loading {
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-12);
}

/* Welcome card */
.db-welcome-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}

/* CRITICAL: avatar size lock */
.db-welcome-face {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  min-height: 80px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-subtle);
}
.db-welcome-face svg,
.db-welcome-face > * {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.db-welcome-info { flex: 1; min-width: 0; }
.db-welcome-name {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-2);
}
.db-name-accent { color: var(--brand-lime); }
.db-welcome-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.db-path-pill {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 2px 10px;
  border-radius: var(--radius-full);
}
.db-level {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}
.db-stats-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.db-stat-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.db-stat-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.db-stat-val {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* Grid */
#view-game .db-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-5);
  align-items: start;
}
#view-game .db-col-main,
#view-game .db-col-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
#view-game .db-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
#view-game .db-card-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
}
#view-game .db-action-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
#view-game .db-action-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-5) 0;
}
#view-game .game-action-btn {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: none;
  color: white;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
#view-game .game-action-btn:hover { opacity: 0.85; }
#view-game .db-goal-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
#view-game .db-goal-reward {
  font-size: var(--text-xs);
  color: var(--brand-lime);
  font-weight: var(--weight-medium);
}
#view-game .db-lore-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
#view-game .db-lore-text {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}
#view-game .game-gear-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
#view-game .game-gear-slot {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
#view-game .game-gear-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  flex: 1;
}
#view-game .game-gear-bonus {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--brand-lime);
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-full);
}
#view-game .db-empty {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

/* HUD face in old header (hidden now but keep small) */
#view-game .game-face-hud {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  overflow: hidden;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Mobile */
@media (max-width: 767px) {
  #view-game .db-grid { grid-template-columns: 1fr; }
  .gv-container { padding: var(--space-5) var(--space-4); }
  .db-welcome-card { gap: var(--space-4); }
  .db-welcome-face {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }
}

/* =============================================
   Phase 4.7.2 - Dashboard Composition
   ============================================= */

/* Hide site-header inside game view */
[data-route="game"] .site-header { display: none !important; }

/* Wider container */
#view-game .gv-container { max-width: 1120px !important; }

/* Stat badges */
.db-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
}
.db-badge b { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* Action subtitle */
.db-action-subtitle {
  font-size: var(--text-sm);
  color: var(--brand-lime);
  font-style: italic;
  margin: 0 0 var(--space-2) 0;
  line-height: var(--leading-snug);
}

/* Placeholder text */
.db-placeholder-text {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
  font-style: italic;
}

/* Resources rows */
.db-res-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}
.db-res-row:last-child { border-bottom: none; }
.db-res-locked { color: var(--text-tertiary); }
.db-res-val { font-weight: var(--weight-semibold); color: var(--brand-lime); }
.db-locked-tag {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
}

/* Skills rows */
.db-skill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border-subtle);
}
.db-skill-row:last-child { border-bottom: none; }
.db-skill-active .db-skill-name { color: var(--brand-lime); font-weight: var(--weight-semibold); }
.db-skill-locked .db-skill-name { color: var(--text-tertiary); }
.db-skill-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--brand-lime);
  background: #97C45918;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* Foxhaven progress */
.db-progress-wrap {
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  height: 6px;
  margin: var(--space-3) 0 var(--space-2);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.db-progress-bar {
  height: 100%;
  background: var(--brand-lime);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}
.db-progress-text {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: 0;
}

/* Mobile overrides */
@media (max-width: 767px) {
  #view-game .gv-container { padding: var(--space-4) var(--space-3) !important; }
  .db-stats-row { gap: var(--space-2); }
  .db-badge { padding: 2px 8px; }
}

/* =============================================
   Phase 4.7.3 - MMO Dashboard Shell
   ============================================= */

[data-route="game"] .site-header { display: none !important; }

.mmo-shell { display: flex; flex-direction: column; height: 100vh; background: var(--bg-primary); overflow: hidden; }

/* TOP BAR */
.mmo-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: 0 var(--space-5); height: 52px; min-height: 52px;
  background: var(--bg-primary); border-bottom: 1px solid var(--border-subtle);
  z-index: var(--z-raised); flex-shrink: 0;
}
.mmo-topbar-left  { display: flex; align-items: center; gap: var(--space-2); }
.mmo-topbar-center { flex: 1; display: flex; justify-content: center; }
.mmo-topbar-right { display: flex; align-items: center; gap: var(--space-3); }
.mmo-brand { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--brand-lime); letter-spacing: -0.5px; }
.mmo-world-status {
  font-size: var(--text-xs); color: var(--text-tertiary);
  background: var(--bg-tertiary); padding: 3px 10px;
  border-radius: var(--radius-full); border: 1px solid var(--border-subtle);
}
.mmo-world-status b { color: var(--brand-lime); font-weight: var(--weight-semibold); }
.mmo-res-badge { display: flex; align-items: center; gap: 3px; font-size: var(--text-xs); color: var(--text-tertiary); }
.mmo-res-badge b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.mmo-face-topbar {
  width: 30px !important; height: 30px !important;
  min-width: 30px; max-width: 30px; min-height: 30px; max-height: 30px;
  border-radius: 50%; overflow: hidden;
  border: 1.5px solid var(--border-subtle); background: var(--bg-tertiary); flex-shrink: 0;
}
.mmo-face-topbar svg, .mmo-face-topbar > * { width: 100% !important; height: 100% !important; display: block; }

/* BODY */
.mmo-body { display: flex; flex: 1; overflow: hidden; }

/* SIDEBAR */
.mmo-sidebar {
  width: 210px; min-width: 210px;
  background: var(--bg-secondary); border-right: 1px solid var(--border-subtle);
  overflow-y: auto; padding: var(--space-4) 0; flex-shrink: 0;
}
.mmo-nav-group { margin-bottom: var(--space-3); padding: 0 var(--space-3); }
.mmo-nav-header {
  font-size: 10px; font-weight: var(--weight-bold); color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-2); margin-bottom: 2px;
}
.mmo-nav-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 6px var(--space-2); border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--text-secondary);
  background: none; border: none; cursor: pointer; text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mmo-nav-item:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.mmo-nav-active  { color: var(--brand-lime) !important; background: #97C45914 !important; font-weight: var(--weight-medium); }
.mmo-nav-locked  { opacity: 0.45; cursor: default; }
.mmo-nav-locked:hover { background: none !important; color: var(--text-secondary) !important; }
.mmo-lock-icon   { font-size: 9px; opacity: 0.6; }

/* MAIN */
.mmo-main { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-6); }
.mmo-content { max-width: 960px; margin: 0 auto; }

/* BOTTOM NAV mobile */
.mmo-bottom-nav {
  display: none; align-items: center; justify-content: space-around;
  height: 56px; background: var(--bg-primary); border-top: 1px solid var(--border-subtle); flex-shrink: 0;
}
.mmo-bottom-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1;
  height: 100%; font-size: 10px; font-weight: var(--weight-medium);
  color: var(--text-tertiary); background: none; border: none; cursor: pointer;
  padding: var(--space-2) 0; transition: color var(--transition-fast);
}
.mmo-bottom-btn:hover, .mmo-bottom-active { color: var(--brand-lime); }

/* WELCOME HERO */
#view-game .db-welcome-card {
  display: flex; align-items: center; gap: var(--space-5);
  background: var(--bg-secondary); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-5);
}
.db-lore-line {
  font-size: var(--text-sm); color: var(--text-tertiary);
  font-style: italic; margin: var(--space-2) 0 0 0; line-height: var(--leading-relaxed);
}

/* GRID */
#view-game .db-grid { display: grid; grid-template-columns: 1fr 270px; gap: var(--space-5); align-items: start; }
#view-game .db-col-main, #view-game .db-col-side { display: flex; flex-direction: column; gap: var(--space-4); }

/* Restore Foxhaven */
.db-restore-need-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-1) 0; font-size: var(--text-sm); color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.db-restore-need-row:last-child { border-bottom: none; }
.db-restore-next { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--brand-lime); font-weight: var(--weight-medium); }

/* MOBILE */
@media (max-width: 767px) {
  .mmo-sidebar { display: none; }
  .mmo-bottom-nav { display: flex; }
  .mmo-topbar-center { display: none; }
  .mmo-res-badge { display: none; }
  .mmo-main { padding: var(--space-4) var(--space-3); }
  #view-game .db-grid { grid-template-columns: 1fr; }
  .db-welcome-card { gap: var(--space-3); }
}

/* Reward preview tags */
.db-reward-preview {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin: 0 0 var(--space-4) 0;
}
.db-reward-tag {
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--brand-lime); background: #97C45918;
  padding: 2px 8px; border-radius: var(--radius-full);
  border: 1px solid #97C45930;
}

/* =============================================
   Phase 4.7.5 - Final Visual Polish
   ============================================= */

/* Shell: full-width MMO feel */
#view-game { display: block !important; }
#view-game .mmo-shell {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Topbar polish */
#view-game .mmo-topbar {
  height: 48px;
  min-height: 48px;
  padding: 0 var(--space-4);
  gap: var(--space-4);
}
#view-game .mmo-brand {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--brand-lime);
  letter-spacing: -0.3px;
}
#view-game .mmo-topbar-right { gap: var(--space-3); }
#view-game .mmo-topbar-right .btn {
  font-size: var(--text-xs);
  padding: 4px 10px;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}
#view-game .mmo-topbar-right .btn:hover { opacity: 1; }

/* Body */
#view-game .mmo-body {
  flex: 1;
  overflow: hidden;
  display: flex;
}

/* Sidebar */
#view-game .mmo-sidebar {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  overflow-y: auto;
  flex-shrink: 0;
  padding: var(--space-3) 0;
}
#view-game .mmo-nav-group { padding: 0 var(--space-2); margin-bottom: var(--space-2); }
#view-game .mmo-nav-header {
  font-size: 10px;
  padding: var(--space-2) var(--space-2) 4px;
  margin-bottom: 0;
}
#view-game .mmo-nav-item {
  padding: 5px var(--space-2);
  font-size: 13px;
  border-radius: var(--radius-sm);
}

/* Main scroll area */
#view-game .mmo-main {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  min-width: 0;
}
#view-game .mmo-content { max-width: 100%; }

/* Welcome card: use full width + mini status */
#view-game .db-welcome-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.db-welcome-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-5);
  border-left: 1px solid var(--border-subtle);
}
.db-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.db-status-item b { color: var(--text-primary); font-weight: var(--weight-medium); }
.db-status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-lime);
  margin-right: 4px;
}

/* Grid */
#view-game .db-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--space-4);
}
#view-game .db-col-main,
#view-game .db-col-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Cards */
#view-game .db-card {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
}

/* Progress bar */
#view-game .db-progress-wrap {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  margin: var(--space-2) 0 var(--space-3);
}
#view-game .db-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-lime-dark), var(--brand-lime));
  border-radius: var(--radius-full);
  min-width: 4px;
}

/* Action button */
#view-game .game-action-btn {
  width: 100%;
  padding: 10px var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: white;
  border: none;
  cursor: pointer;
  margin-top: var(--space-3);
  transition: filter var(--transition-fast);
}
#view-game .game-action-btn:hover { filter: brightness(1.1); }

/* Stats row in welcome */
#view-game .db-stats-row { gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
#view-game .db-badge {
  font-size: 11px;
  padding: 2px 8px;
}

/* MOBILE */
@media (max-width: 767px) {
  #view-game .mmo-shell { height: 100%; max-height: none; overflow: visible; }
  #view-game .mmo-body { overflow: visible; }
  #view-game .mmo-main { overflow: visible; padding: var(--space-3) 14px 80px; }
  #view-game .mmo-sidebar { display: none !important; }
  #view-game .mmo-topbar { padding: 0 14px; }
  #view-game .mmo-topbar-center { display: none; }
  #view-game .mmo-res-badge { display: none; }

  #view-game .db-welcome-card {
    grid-template-columns: auto 1fr;
  }
  .db-welcome-status { display: none; }

  #view-game .db-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  #view-game .db-welcome-face {
    width: 64px !important; height: 64px !important;
    min-width: 64px !important; max-width: 64px !important;
    min-height: 64px !important; max-height: 64px !important;
  }
  #view-game .db-welcome-name { font-size: var(--text-lg); }
  #view-game .game-action-btn { padding: 12px; }
}

@media (min-width: 768px) {
  #view-game .mmo-bottom-nav { display: none !important; }
}

/* =============================================
   Phase 4.7.6 - Premium UI Polish
   ============================================= */

/* Topbar: slimmer */
#view-game .mmo-topbar {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 var(--space-4) !important;
}
#view-game .mmo-topbar-right .btn {
  font-size: 11px !important;
  padding: 3px 10px !important;
  opacity: 0.55 !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
}
#view-game .mmo-topbar-right .btn:hover {
  opacity: 1 !important;
  color: var(--text-primary) !important;
  background: var(--bg-tertiary) !important;
}
#view-game .mmo-world-status {
  font-size: 11px !important;
  padding: 2px 10px !important;
}
#view-game .mmo-res-badge {
  font-size: 11px !important;
  gap: 3px !important;
}
#view-game .mmo-face-topbar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
}

/* Welcome card: tighter */
#view-game .db-welcome-card {
  padding: var(--space-3) var(--space-5) !important;
  margin-bottom: var(--space-3) !important;
  gap: var(--space-4) !important;
}
#view-game .db-welcome-face {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
}
#view-game .db-welcome-name {
  font-size: var(--text-lg) !important;
  margin-bottom: 4px !important;
}
#view-game .db-lore-line {
  font-size: 11px !important;
  margin: 4px 0 !important;
}
#view-game .db-stats-row {
  margin-top: 6px !important;
  gap: 6px !important;
}
#view-game .db-badge {
  font-size: 11px !important;
  padding: 2px 7px !important;
}
#view-game .db-welcome-meta {
  margin-bottom: 4px !important;
}

/* Mini status: cleaner */
#view-game .db-welcome-status {
  gap: 6px !important;
  padding-left: var(--space-4) !important;
  min-width: 160px;
}
#view-game .db-status-item {
  font-size: 11px !important;
  gap: var(--space-3) !important;
}

/* Grid: tighter gap */
#view-game .db-grid {
  gap: var(--space-3) !important;
  grid-template-columns: 1fr 248px !important;
}
#view-game .db-col-main,
#view-game .db-col-side {
  gap: var(--space-3) !important;
}

/* Cards: tighter padding */
#view-game .db-card {
  padding: var(--space-3) var(--space-4) !important;
}
#view-game .db-card-label {
  margin-bottom: var(--space-2) !important;
  font-size: 10px !important;
}

/* Action card: button polish */
#view-game .db-action-title {
  font-size: var(--text-base) !important;
  margin-bottom: 4px !important;
}
#view-game .db-action-subtitle {
  font-size: 11px !important;
  margin-bottom: 4px !important;
}
#view-game .db-action-desc {
  font-size: var(--text-xs) !important;
  margin-bottom: var(--space-3) !important;
}
#view-game .db-reward-preview {
  margin-bottom: var(--space-3) !important;
  gap: 6px !important;
}
#view-game .game-action-btn {
  padding: 9px var(--space-4) !important;
  font-size: 13px !important;
  margin-top: 0 !important;
}

/* Restore Foxhaven: stronger */
#view-game .db-progress-wrap {
  height: 10px !important;
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-default) !important;
  margin: var(--space-2) 0 var(--space-2) !important;
}
#view-game .db-progress-bar {
  background: linear-gradient(90deg, #5a8a3a, #97C459) !important;
  min-width: 6px !important;
  box-shadow: 0 0 6px #97C45940 !important;
}
.db-restore-subtitle {
  font-size: 11px !important;
  color: var(--text-tertiary) !important;
  font-style: italic !important;
  margin: 0 0 var(--space-2) 0 !important;
}
.db-restore-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--brand-lime);
  background: #97C45914;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid #97C45930;
  margin-bottom: var(--space-2);
  float: right;
}
#view-game .db-restore-need-row {
  padding: 4px 0 !important;
  font-size: var(--text-xs) !important;
}
#view-game .db-restore-next {
  font-size: 11px !important;
  margin-top: var(--space-2) !important;
}

/* World Story: compact */
#view-game .db-lore-card .db-lore-title {
  font-size: var(--text-sm) !important;
  margin-bottom: 4px !important;
}
#view-game .db-lore-card .db-lore-text {
  font-size: 11px !important;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sidebar polish */
#view-game .mmo-nav-item { font-size: 12px !important; padding: 4px var(--space-2) !important; }
#view-game .mmo-lock-icon { font-size: 8px !important; opacity: 0.4 !important; }
#view-game .mmo-nav-locked { opacity: 0.4 !important; }
#view-game .mmo-nav-header { font-size: 9px !important; opacity: 0.6; }

/* Goal + gear side cards */
#view-game .db-goal-title { font-size: var(--text-sm) !important; }
#view-game .db-goal-reward { font-size: 11px !important; }
#view-game .game-gear-slot { font-size: 11px !important; }
#view-game .game-gear-name { font-size: var(--text-sm) !important; }
#view-game .game-gear-bonus { font-size: 11px !important; }
#view-game .db-res-row { font-size: var(--text-xs) !important; padding: 3px 0 !important; }
#view-game .db-locked-tag { font-size: 10px !important; padding: 1px 6px !important; }

/* Activity Log */
#view-game .db-placeholder-text { font-size: var(--text-xs) !important; }

/* Mobile reorder */
@media (max-width: 767px) {
  #view-game .db-col-side { order: 2; }
  #view-game .db-col-main { order: 1; }
  #view-game .mmo-main { padding: var(--space-3) 12px 72px !important; }
  #view-game .db-welcome-card {
    grid-template-columns: auto 1fr !important;
    padding: var(--space-3) var(--space-3) !important;
  }
}

/* =============================================
   Phase 4.7.6 - Premium Micro Polish
   ============================================= */

/* Hide duplicate stats in welcome on desktop */
@media (min-width: 768px) {
  #view-game .db-stats-row { display: none !important; }
}

/* Membership badge */
.db-membership-free {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: var(--weight-bold);
  color: var(--text-tertiary); background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  padding: 1px 7px; border-radius: var(--radius-full);
  letter-spacing: 0.04em; text-transform: uppercase;
  vertical-align: middle; margin-left: 6px;
}
.db-membership-premium {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: var(--weight-bold);
  color: #b8860b; background: #b8860b18;
  border: 1px solid #b8860b40;
  padding: 1px 7px; border-radius: var(--radius-full);
  letter-spacing: 0.04em; text-transform: uppercase;
  vertical-align: middle; margin-left: 6px;
}

/* Mini status panel */
#view-game .db-welcome-status {
  gap: 8px !important;
  min-width: 170px !important;
}
#view-game .db-status-item {
  display: grid !important;
  grid-template-columns: 16px 1fr auto !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  padding: 3px 0 !important;
  border-bottom: 1px solid var(--border-subtle);
}
#view-game .db-status-item:last-child { border-bottom: none !important; }
.db-status-icon { font-size: 12px; opacity: 0.7; line-height: 1; }
.db-status-label { color: var(--text-tertiary); font-size: 10px; }
.db-status-val { font-weight: var(--weight-semibold); color: var(--text-primary); font-size: 11px; }

/* Topbar resource badges with icons */
#view-game .mmo-res-badge {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  background: var(--bg-tertiary) !important;
  padding: 3px 8px !important;
  border-radius: var(--radius-full) !important;
  border: 1px solid var(--border-subtle) !important;
}
#view-game .mmo-res-badge b { color: var(--text-primary) !important; }
#view-game .mmo-res-icon { font-size: 11px; line-height: 1; }
#view-game .mmo-world-status {
  display: flex; align-items: center; gap: 5px;
}

/* Sidebar section icons */
#view-game .mmo-nav-header {
  display: flex; align-items: center; gap: 5px;
}
.mmo-section-icon { font-size: 10px; opacity: 0.6; }

/* Reward chips with icons */
#view-game .db-reward-tag {
  display: inline-flex; align-items: center; gap: 3px;
}
.db-reward-icon { font-size: 10px; }

/* Restore Foxhaven: Next Unlock prominent */
#view-game .db-restore-next {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px !important;
  color: var(--brand-lime) !important;
  background: #97C45912;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  margin-top: var(--space-2) !important;
}

/* Starter Gear: rarity hint */
#view-game .game-gear-name::before {
  content: '';
}
#view-game .db-gear-rarity {
  font-size: 10px; font-weight: var(--weight-semibold);
  color: #5a8a3a; background: #5a8a3a14;
  padding: 1px 6px; border-radius: var(--radius-full);
  border: 1px solid #5a8a3a30; margin-left: 4px;
}

/* Path badge in welcome */
#view-game .db-path-pill {
  font-size: 11px !important;
  padding: 2px 8px !important;
  font-weight: var(--weight-semibold) !important;
}
#view-game .db-level {
  font-size: 11px !important;
  color: var(--text-tertiary) !important;
}

/* Welcome name line */
#view-game .db-welcome-name {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 2px; line-height: 1.3 !important;
}

/* Mobile: show stats in welcome */
@media (max-width: 767px) {
  #view-game .db-stats-row { display: flex !important; }
}

/* =============================================
   Phase 4.7.7 - Premium Sidebar + Topbar
   ============================================= */

/* Sidebar items with icons */
#view-game .mmo-nav-item {
  display: grid !important;
  grid-template-columns: 18px 1fr auto !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px var(--space-2) !important;
  font-size: 12px !important;
}
.mmo-item-icon { font-size: 12px; opacity: 0.75; line-height: 1; }
.mmo-nav-active .mmo-item-icon { opacity: 1; }
.mmo-nav-locked .mmo-item-icon { opacity: 0.35; }

/* Section headers with icons */
#view-game .mmo-nav-header {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 9px !important;
  color: var(--text-tertiary) !important;
  padding: var(--space-3) var(--space-2) 4px !important;
  margin-bottom: 2px !important;
}
.mmo-section-icon { font-size: 10px; opacity: 0.5; }

/* Sidebar divider between groups */
#view-game .mmo-nav-group {
  padding: 0 var(--space-2) !important;
  margin-bottom: var(--space-1) !important;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-2) !important;
}
#view-game .mmo-nav-group:last-child { border-bottom: none !important; }

/* OXO Coin badge - premium subtle */
.mmo-res-badge-oxo {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: #b8860b;
  background: #b8860b12;
  border: 1px solid #b8860b30;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}
.mmo-res-badge-oxo b { color: #b8860b; font-weight: var(--weight-semibold); }

/* Theme toggle in topbar */
.mmo-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}
.mmo-theme-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-default);
}

/* Membership badge stronger */
.db-membership-free {
  font-size: 9px !important;
  font-weight: var(--weight-bold) !important;
  color: var(--text-tertiary) !important;
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-default) !important;
  padding: 1px 6px !important;
  border-radius: var(--radius-full) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
}
.db-membership-premium {
  font-size: 9px !important;
  font-weight: var(--weight-bold) !important;
  color: #b8860b !important;
  background: #b8860b18 !important;
  border: 1px solid #b8860b50 !important;
  padding: 1px 7px !important;
  border-radius: var(--radius-full) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
}

/* Topbar: tighten gap */
#view-game .mmo-topbar-right { gap: var(--space-2) !important; }

/* Mobile: hide OXO coin too */
@media (max-width: 767px) {
  .mmo-res-badge-oxo { display: none; }
}

/* =============================================
   Phase 4.7.8 - Final Micro Polish
   ============================================= */

/* Sidebar: active left accent */
#view-game .mmo-nav-active {
  border-left: 2px solid var(--brand-lime) !important;
  padding-left: calc(var(--space-2) - 2px) !important;
  background: #97C45914 !important;
}
#view-game .mmo-nav-item:not(.mmo-nav-active) {
  border-left: 2px solid transparent !important;
}

/* Sidebar: unified icon size */
#view-game .mmo-item-icon {
  font-size: 13px !important;
  width: 18px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  opacity: 0.8 !important;
}
#view-game .mmo-nav-active .mmo-item-icon { opacity: 1 !important; }
#view-game .mmo-nav-locked .mmo-item-icon { opacity: 0.3 !important; }
#view-game .mmo-lock-icon {
  font-size: 9px !important;
  opacity: 0.35 !important;
  margin-left: auto !important;
}

/* Sidebar section headers */
#view-game .mmo-section-icon {
  font-size: 9px !important;
  opacity: 0.45 !important;
}

/* Topbar: tighter chip spacing */
#view-game .mmo-topbar-right {
  gap: 6px !important;
}
#view-game .mmo-res-badge {
  padding: 3px 8px !important;
  gap: 3px !important;
  font-size: 11px !important;
}
#view-game .mmo-res-badge-oxo {
  padding: 3px 8px !important;
  gap: 3px !important;
  font-size: 11px !important;
}
#view-game .mmo-res-badge-oxo::after {
  content: '';
}

/* Theme toggle: clearer */
#view-game .mmo-theme-btn {
  width: 30px !important;
  height: 30px !important;
  font-size: 14px !important;
  background: var(--bg-secondary) !important;
  border-color: var(--border-default) !important;
}
#view-game .mmo-theme-btn:hover {
  background: var(--bg-tertiary) !important;
  border-color: var(--brand-lime) !important;
}

/* Sign out: cleaner ghost */
#view-game .mmo-topbar-right .btn-ghost {
  font-size: 11px !important;
  padding: 3px 10px !important;
  opacity: 0.5 !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  transition: all var(--transition-fast) !important;
}
#view-game .mmo-topbar-right .btn-ghost:hover {
  opacity: 1 !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}

/* Welcome card: tighter meta row */
#view-game .db-welcome-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
  flex-wrap: wrap !important;
}
#view-game .db-path-pill { font-size: 11px !important; }
#view-game .db-level {
  font-size: 11px !important;
  color: var(--text-tertiary) !important;
  background: var(--bg-tertiary) !important;
  padding: 1px 7px !important;
  border-radius: var(--radius-full) !important;
  border: 1px solid var(--border-subtle) !important;
}

/* FREE badge: sharper */
.db-membership-free {
  font-size: 9px !important;
  padding: 1px 6px !important;
  border-radius: 3px !important;
  letter-spacing: 0.06em !important;
  vertical-align: middle !important;
}

/* Mini status: label/value stronger contrast */
#view-game .db-status-label {
  color: var(--text-tertiary) !important;
  font-size: 10px !important;
  font-weight: var(--weight-regular) !important;
}
#view-game .db-status-val {
  color: var(--text-primary) !important;
  font-size: 11px !important;
  font-weight: var(--weight-semibold) !important;
  text-align: right !important;
}
#view-game .db-status-icon {
  font-size: 11px !important;
  line-height: 1 !important;
  width: 16px !important;
  text-align: center !important;
}
#view-game .db-status-item {
  padding: 4px 0 !important;
}

/* Progress bar: slightly stronger */
#view-game .db-progress-wrap {
  height: 10px !important;
  border-color: var(--border-default) !important;
}
#view-game .db-progress-bar {
  box-shadow: 0 0 8px #97C45950 !important;
}

/* Next Unlock: prominent */
#view-game .db-restore-next {
  font-weight: var(--weight-medium) !important;
  letter-spacing: 0.01em !important;
}

/* Chip consistency across all chips */
#view-game .db-badge,
#view-game .db-reward-tag,
#view-game .db-locked-tag {
  border-radius: var(--radius-full) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

/* Gear rarity */
#view-game .db-gear-rarity {
  font-size: 10px !important;
  padding: 1px 6px !important;
  font-weight: var(--weight-semibold) !important;
  border-radius: 3px !important;
}

/* =============================================
   Phase 4.7.9 - Light/Dark Final Polish
   ============================================= */

/* ---- LIGHT MODE overrides ---- */
[data-theme="light"] {
  --bg-primary:    #f5f3ef;
  --bg-secondary:  #faf9f7;
  --bg-tertiary:   #ede9e2;
  --border-subtle: #ddd8cf;
  --border-default:#c8c2b8;
  --text-primary:  #1a1814;
  --text-secondary:#4a4640;
  --text-tertiary: #7a7470;
}

/* Light mode sidebar: green-tinted panel */
[data-theme="light"] #view-game .mmo-sidebar {
  background: #f0f5ee !important;
  border-right-color: #c8d8c0 !important;
}
[data-theme="light"] #view-game .mmo-nav-active {
  background: #e4f0e0 !important;
  border-left-color: var(--brand-lime) !important;
  color: #2a6a1a !important;
}
[data-theme="light"] #view-game .mmo-nav-active .mmo-item-icon { opacity: 1 !important; color: #2a6a1a !important; }
[data-theme="light"] #view-game .mmo-nav-item { color: #3a3630 !important; }
[data-theme="light"] #view-game .mmo-nav-item:hover:not(.mmo-nav-locked) { background: #e8ede4 !important; }
[data-theme="light"] #view-game .mmo-nav-locked { opacity: 0.55 !important; }
[data-theme="light"] #view-game .mmo-nav-header { color: #5a6a55 !important; opacity: 1 !important; }

/* Light mode topbar */
[data-theme="light"] #view-game .mmo-topbar {
  background: #faf9f7 !important;
  border-bottom-color: #d8d2c8 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] #view-game .mmo-res-badge {
  background: #ede9e2 !important;
  border-color: #c8c2b8 !important;
  color: #4a4640 !important;
}
[data-theme="light"] #view-game .mmo-res-badge b { color: #1a1814 !important; }
[data-theme="light"] #view-game .mmo-res-badge-oxo {
  background: #f5ead8 !important;
  border-color: #d4a840 !important;
  color: #8a6010 !important;
}
[data-theme="light"] #view-game .mmo-res-badge-oxo b { color: #7a5008 !important; }
[data-theme="light"] #view-game .mmo-theme-btn {
  background: #ede9e2 !important;
  border-color: #c8c2b8 !important;
  color: #4a4640 !important;
}
[data-theme="light"] #view-game .mmo-topbar-right .btn-ghost {
  border-color: #c8c2b8 !important;
  color: #5a5650 !important;
}

/* Light mode cards: depth */
[data-theme="light"] #view-game .db-card {
  background: #faf9f7 !important;
  border-color: #d8d2c8 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] #view-game .db-welcome-card {
  background: #faf9f7 !important;
  border-color: #d8d2c8 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
}

/* Light mode progress bar */
[data-theme="light"] #view-game .db-progress-wrap {
  background: #e0dbd2 !important;
  border-color: #c8c2b8 !important;
}
[data-theme="light"] #view-game .db-progress-bar {
  background: linear-gradient(90deg, #4a8a2a, #7ab840) !important;
  box-shadow: 0 0 6px #7ab84060 !important;
}

/* Light mode reward chips */
[data-theme="light"] #view-game .db-reward-tag {
  background: #e8f0e4 !important;
  border-color: #b8d0a8 !important;
  color: #2a6a1a !important;
}

/* Light mode locked chips */
[data-theme="light"] .db-locked-tag {
  background: #e8e4dc !important;
  border-color: #c8c0b0 !important;
  color: #6a6460 !important;
}

/* Light mode res rows */
[data-theme="light"] #view-game .db-res-row { color: #3a3630 !important; }
[data-theme="light"] #view-game .db-res-locked { color: #7a7470 !important; }
[data-theme="light"] #view-game .db-res-val { color: #3a7a20 !important; }

/* Light mode status items */
[data-theme="light"] #view-game .db-status-label { color: #6a6460 !important; }
[data-theme="light"] #view-game .db-status-val { color: #1a1814 !important; }
[data-theme="light"] #view-game .db-welcome-status { border-left-color: #d8d2c8 !important; }

/* Light mode badges */
[data-theme="light"] .db-membership-free {
  background: #ede9e2 !important;
  border-color: #c0bab0 !important;
  color: #5a5650 !important;
}
[data-theme="light"] #view-game .db-path-pill { box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important; }
[data-theme="light"] #view-game .db-level {
  background: #ede9e2 !important;
  border-color: #c8c2b8 !important;
  color: #5a5650 !important;
}

/* Light mode gear rarity */
[data-theme="light"] .db-gear-rarity {
  background: #e4f0e0 !important;
  border-color: #b0d0a0 !important;
  color: #3a7a20 !important;
}

/* Light mode restore badge */
[data-theme="light"] .db-restore-badge { background: #e4f0e0 !important; border-color: #a8d090 !important; }
[data-theme="light"] .db-restore-next { background: #e4f0e0 !important; }

/* Light mode mmo shell bg */
[data-theme="light"] #view-game .mmo-shell { background: #f5f3ef !important; }
[data-theme="light"] #view-game .mmo-main { background: #f5f3ef !important; }

/* Light mode card labels */
[data-theme="light"] #view-game .db-card-label { color: #6a6460 !important; }
[data-theme="light"] #view-game .db-action-title { color: #1a1814 !important; }
[data-theme="light"] #view-game .db-action-desc { color: #4a4640 !important; }
[data-theme="light"] #view-game .db-action-subtitle { color: #4a8a2a !important; }
[data-theme="light"] #view-game .db-lore-text { color: #5a5650 !important; }
[data-theme="light"] #view-game .db-lore-title { color: #2a2820 !important; }
[data-theme="light"] #view-game .db-goal-title { color: #1a1814 !important; }
[data-theme="light"] #view-game .db-goal-reward { color: #3a7a20 !important; }
[data-theme="light"] #view-game .game-gear-name { color: #1a1814 !important; }
[data-theme="light"] #view-game .game-gear-slot { background: #ede9e2 !important; color: #6a6460 !important; }
[data-theme="light"] #view-game .game-gear-bonus { background: #e4f0e0 !important; color: #3a7a20 !important; }
[data-theme="light"] #view-game .db-placeholder-text { color: #8a8480 !important; }
[data-theme="light"] #view-game .db-welcome-name { color: #1a1814 !important; }
[data-theme="light"] #view-game .db-lore-line { color: #7a7470 !important; }
[data-theme="light"] #view-game .db-badge {
  background: #ede9e2 !important;
  border-color: #c8c2b8 !important;
  color: #4a4640 !important;
}
[data-theme="light"] #view-game .db-badge b { color: #1a1814 !important; }
[data-theme="light"] #view-game .db-restore-subtitle { color: #6a6460 !important; }
[data-theme="light"] #view-game .db-restore-need-row { color: #3a3630 !important; border-bottom-color: #d8d2c8 !important; }
[data-theme="light"] #view-game .db-world-status b { color: #3a7a20 !important; }
[data-theme="light"] #view-game .mmo-brand { color: #3a7a20 !important; }
[data-theme="light"] #view-game .mmo-world-status { background: #ede9e2 !important; border-color: #c8c2b8 !important; color: #4a4640 !important; }

/* OXO tooltip */
#view-game .mmo-res-badge-oxo { cursor: default; }

/* Dark mode: subtle card shadow */
[data-theme="dark"] #view-game .db-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
[data-theme="dark"] #view-game .db-welcome-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

/* Mobile reorder: action first, then side cards */
@media (max-width: 767px) {
  #view-game .db-col-main { order: 1 !important; }
  #view-game .db-col-side { order: 2 !important; }
  [data-theme="light"] #view-game .mmo-main { background: #f5f3ef !important; }
}

/* =============================================
   Daily Foxhaven Check-in Block
   ============================================= */
.db-checkin-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-3);
}
.db-checkin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  gap: var(--space-3);
}
.db-checkin-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.db-checkin-subtitle {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
  margin: 0 0 var(--space-3) 0;
}
.db-checkin-days {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  margin-bottom: var(--space-3);
}
.db-checkin-days::-webkit-scrollbar { display: none; }
.db-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 40px;
  flex-shrink: 0;
}
.db-day-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  transition: all var(--transition-fast);
}
.db-day-done .db-day-circle {
  background: #97C45920;
  border-color: var(--brand-lime);
  color: var(--brand-lime);
}
.db-day-today .db-day-circle {
  background: var(--brand-lime);
  border-color: var(--brand-lime);
  color: #1a1a1a;
  box-shadow: 0 0 8px #97C45950;
  font-weight: var(--weight-bold);
}
.db-day-bonus .db-day-circle {
  border-color: #b8860b;
  background: #b8860b18;
  font-size: 16px;
}
.db-day-label {
  font-size: 9px;
  color: var(--text-tertiary);
  text-align: center;
  white-space: nowrap;
}
.db-day-today .db-day-label { color: var(--brand-lime); font-weight: var(--weight-medium); }
.db-checkin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.db-checkin-reward {
  font-size: 11px;
  color: var(--text-secondary);
}
.db-checkin-reward b { color: var(--brand-lime); }
.db-checkin-btn {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  cursor: default;
  opacity: 0.7;
}
.db-checkin-coming {
  font-size: 10px;
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
}

/* Light mode */
[data-theme="light"] .db-checkin-card {
  background: #faf9f7 !important;
  border-color: #d8d2c8 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .db-day-circle {
  background: #ede9e2 !important;
  border-color: #c8c2b8 !important;
  color: #7a7470 !important;
}
[data-theme="light"] .db-day-done .db-day-circle {
  background: #e4f0e0 !important;
  border-color: #7ab840 !important;
  color: #3a7a20 !important;
}
[data-theme="light"] .db-day-today .db-day-circle {
  background: var(--brand-lime) !important;
  color: #1a1a1a !important;
}
[data-theme="light"] .db-checkin-btn { background: #ede9e2 !important; border-color: #c8c2b8 !important; }

/* =============================================
   Final Premium Polish
   ============================================= */

/* Check-in: compact + progress line */
.db-checkin-card { padding: var(--space-2) var(--space-4) !important; }
.db-checkin-subtitle { margin-bottom: var(--space-2) !important; }
.db-checkin-days { gap: 0 !important; position: relative; margin-bottom: var(--space-2) !important; }
.db-day { position: relative; flex: 1; min-width: 0; }
.db-day::after {
  content: '';
  position: absolute;
  top: 17px; left: 50%;
  width: 100%; height: 2px;
  background: var(--border-subtle);
  z-index: 0;
}
.db-day:last-child::after { display: none; }
.db-day-done::after { background: var(--brand-lime) !important; opacity: 0.4; }
.db-day-circle { position: relative; z-index: 1; width: 30px !important; height: 30px !important; font-size: 11px !important; }
.db-day-today .db-day-circle { width: 32px !important; height: 32px !important; }
.db-day-label { font-size: 8px !important; }
.db-checkin-btn { display: none !important; }
.db-checkin-footer { justify-content: flex-start !important; }
.db-checkin-reward {
  font-size: 11px !important;
  background: var(--bg-tertiary);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
}

/* Activity log: empty state */
.db-actlog-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: var(--space-3) 0;
  text-align: center;
}
.db-actlog-icon { font-size: 22px; opacity: 0.35; }
.db-actlog-title { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.db-actlog-hint { font-size: 11px; color: var(--text-tertiary); font-style: italic; }

/* Card section title icons */
.db-card-label-icon { margin-right: 4px; font-size: 11px; opacity: 0.7; }

/* Reward chips */
#view-game .db-reward-tag {
  padding: 2px 8px !important;
  font-size: 11px !important;
  gap: 3px !important;
  border: 1px solid #97C45930 !important;
}
#view-game .db-reward-icon { font-size: 10px !important; }

/* Action button hover */
#view-game .game-action-btn {
  transition: filter var(--transition-fast), transform var(--transition-fast) !important;
}
#view-game .game-action-btn:hover {
  filter: brightness(1.12) !important;
  transform: translateY(-1px) !important;
}
#view-game .game-action-btn:active { transform: translateY(0) !important; }

/* Restore rows: better alignment */
#view-game .db-restore-need-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 0 !important;
  font-size: 12px !important;
}
#view-game .db-restore-need-row span:first-child { color: var(--text-primary) !important; }
#view-game .db-restore-need-row span:last-child { font-size: 11px !important; }

/* Sidebar: tighter active + icon size */
#view-game .mmo-item-icon { font-size: 12px !important; }
#view-game .mmo-lock-icon { font-size: 8px !important; opacity: 0.3 !important; }
#view-game .mmo-nav-header {
  font-size: 9px !important;
  letter-spacing: 0.07em !important;
  padding-top: var(--space-3) !important;
}
#view-game .mmo-nav-active {
  font-weight: var(--weight-semibold) !important;
  font-size: 12px !important;
}

/* Topbar: unified chip height */
#view-game .mmo-res-badge,
#view-game .mmo-res-badge-oxo {
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Cards: unified title spacing */
#view-game .db-card-label { margin-bottom: 8px !important; }
#view-game .db-goal-title { margin-bottom: 4px !important; }
#view-game .db-lore-title { margin-bottom: 4px !important; }
#view-game .db-lore-text { font-size: 11px !important; }
#view-game .db-goal-reward { margin-top: 2px !important; }

/* Welcome: tighten name+badge row */
#view-game .db-welcome-name { margin-bottom: 6px !important; line-height: 1.3 !important; }
#view-game .db-welcome-meta { gap: 5px !important; margin-bottom: 5px !important; }
#view-game .db-lore-line { margin: 3px 0 6px 0 !important; }

/* Light mode polish for new elements */
[data-theme="light"] .db-checkin-card {
  background: #faf9f7 !important; border-color: #d8d2c8 !important;
}
[data-theme="light"] .db-actlog-empty .db-actlog-title { color: #4a4640 !important; }
[data-theme="light"] .db-checkin-reward {
  background: #ede9e2 !important; border-color: #c8c2b8 !important;
}

/* Check-in Streak */
.db-checkin-streak-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.db-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: #EA580C;
  background: #EA580C12;
  border: 1px solid #EA580C30;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}
.db-streak-bonus {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--brand-lime);
  background: #97C45914;
  border: 1px solid #97C45930;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.db-streak-restore {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #b8860b;
  background: #b8860b10;
  border: 1px solid #b8860b30;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  cursor: default;
  opacity: 0.8;
}
.db-streak-restore-icon { font-size: 10px; }
.db-streak-broken {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

[data-theme="light"] .db-streak-badge {
  background: #fff0ea !important;
  border-color: #EA580C50 !important;
}
[data-theme="light"] .db-streak-bonus {
  background: #e4f0e0 !important;
  border-color: #a8d090 !important;
}
[data-theme="light"] .db-streak-restore {
  background: #f5ead8 !important;
  border-color: #d4a840 !important;
}

/* =============================================
   Mobile Responsive Repair - Phase 4.7 Mobile
   ============================================= */

/* Base: prevent horizontal overflow */
@media (max-width: 767px) {
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  *, *::before, *::after { box-sizing: border-box !important; }

  /* Shell: full column */
  #view-game .mmo-shell {
    height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Hide sidebar */
  #view-game .mmo-sidebar { display: none !important; }

  /* Body: full width */
  #view-game .mmo-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
  }

  /* Main scroll */
  #view-game .mmo-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 80px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  #view-game .mmo-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ALL cards: full width */
  #view-game .db-card,
  #view-game .db-welcome-card,
  .db-checkin-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Grid: single column */
  #view-game .db-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  #view-game .db-col-main,
  #view-game .db-col-side {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  #view-game .db-col-main { order: 1 !important; }
  #view-game .db-col-side { order: 2 !important; }

  /* TOP BAR: compact */
  #view-game .mmo-topbar {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }
  #view-game .mmo-topbar-center { display: none !important; }
  /* Hide coins, OXO on mobile — keep energy + bag */
  #view-game .mmo-topbar-right {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  #view-game .mmo-res-badge:nth-child(2),
  #view-game .mmo-res-badge-oxo { display: none !important; }
  #view-game .mmo-res-badge {
    padding: 2px 7px !important;
    font-size: 10px !important;
    height: 24px !important;
  }
  #view-game .mmo-face-topbar {
    width: 26px !important; height: 26px !important;
    min-width: 26px !important; max-width: 26px !important;
    min-height: 26px !important; max-height: 26px !important;
  }
  #view-game .mmo-theme-btn {
    width: 26px !important; height: 26px !important;
    font-size: 12px !important;
  }
  #view-game .mmo-topbar-right .btn-ghost { display: none !important; }

  /* WELCOME CARD: compact mobile layout */
  #view-game .db-welcome-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
  }
  #view-game .db-welcome-face {
    width: 60px !important; height: 60px !important;
    min-width: 60px !important; max-width: 60px !important;
    min-height: 60px !important; max-height: 60px !important;
    flex-shrink: 0 !important;
  }
  #view-game .db-welcome-info { flex: 1 !important; min-width: 0 !important; }
  #view-game .db-welcome-name { font-size: 15px !important; flex-wrap: wrap !important; }
  #view-game .db-welcome-meta { flex-wrap: wrap !important; gap: 4px !important; }
  #view-game .db-lore-line { font-size: 10px !important; }
  #view-game .db-stats-row { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; }
  #view-game .db-badge { font-size: 10px !important; padding: 2px 6px !important; }
  /* Hide right status panel on mobile */
  #view-game .db-welcome-status { display: none !important; }

  /* DAILY CHECK-IN: horizontal scroll for days */
  .db-checkin-card {
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
  }
  .db-checkin-days {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
    /* Show only first 7 days on mobile via width constraint */
  }
  .db-checkin-days::-webkit-scrollbar { display: none !important; }
  .db-day {
    min-width: 38px !important;
    flex-shrink: 0 !important;
  }
  .db-day-circle {
    width: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
  }
  .db-day-today .db-day-circle {
    width: 32px !important;
    height: 32px !important;
  }
  .db-day-label { font-size: 8px !important; }
  .db-checkin-footer { flex-direction: column !important; gap: 6px !important; align-items: flex-start !important; }
  .db-checkin-reward { font-size: 10px !important; }
  .db-checkin-subtitle { font-size: 10px !important; margin-bottom: 8px !important; }
  .db-checkin-streak-row { flex-wrap: wrap !important; gap: 6px !important; }
  .db-streak-badge { font-size: 11px !important; }
  .db-streak-bonus { font-size: 10px !important; }
  .db-streak-restore { font-size: 10px !important; }

  /* CURRENT ACTION: full width */
  #view-game .db-action-card {
    width: 100% !important;
  }
  #view-game .db-action-title { font-size: 15px !important; }
  #view-game .db-reward-preview { flex-wrap: wrap !important; gap: 5px !important; }
  #view-game .game-action-btn {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
  }

  /* RESTORE FOXHAVEN: full width */
  #view-game .db-progress-wrap { width: 100% !important; }
  #view-game .db-restore-need-row { font-size: 12px !important; }

  /* ACTIVITY LOG */
  .db-actlog-empty { padding: 12px 0 !important; }

  /* GEAR + GOAL */
  #view-game .game-gear-item { flex-wrap: wrap !important; gap: 5px !important; }

  /* BOTTOM NAV: fixed */
  #view-game .mmo-bottom-nav {
    display: flex !important;
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--z-overlay) !important;
    height: 56px !important;
    background: var(--bg-primary) !important;
    border-top: 1px solid var(--border-subtle) !important;
    flex-shrink: 0 !important;
  }
  #view-game .mmo-bottom-btn {
    font-size: 10px !important;
    gap: 2px !important;
  }

  /* World story compact */
  #view-game .db-lore-card .db-lore-text {
    -webkit-line-clamp: 3 !important;
    font-size: 11px !important;
  }

  /* Card padding on mobile */
  #view-game .db-card { padding: 12px !important; }
  #view-game .db-card-label { margin-bottom: 6px !important; }
}

/* =============================================
   Mobile Final Polish
   ============================================= */
@media (max-width: 767px) {

  /* Safe area + bottom nav clearance */
  #view-game .mmo-main {
    padding: 12px 12px calc(72px + env(safe-area-inset-bottom, 16px)) !important;
  }
  #view-game .mmo-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    height: auto !important;
    min-height: 56px !important;
  }

  /* Top bar: add wallet chip (Coins) */
  #view-game .mmo-res-badge:nth-child(2) {
    display: inline-flex !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    height: 24px !important;
  }

  /* Welcome card: more compact */
  #view-game .db-welcome-card {
    padding: 10px !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  #view-game .db-welcome-face {
    width: 56px !important; height: 56px !important;
    min-width: 56px !important; max-width: 56px !important;
    min-height: 56px !important; max-height: 56px !important;
  }
  #view-game .db-welcome-name { font-size: 14px !important; margin-bottom: 4px !important; }
  #view-game .db-welcome-meta { gap: 3px !important; margin-bottom: 3px !important; }
  #view-game .db-lore-line { font-size: 10px !important; margin: 2px 0 4px !important; }
  #view-game .db-stats-row { gap: 3px !important; margin-top: 4px !important; }
  #view-game .db-badge { font-size: 10px !important; padding: 1px 5px !important; }
  .db-membership-free { font-size: 8px !important; padding: 1px 5px !important; }

  /* Daily check-in: show 7 days + Day 30 note */
  .db-checkin-card { padding: 8px 12px !important; margin-bottom: 10px !important; }
  .db-checkin-title { font-size: 12px !important; }
  .db-checkin-subtitle { font-size: 10px !important; margin-bottom: 6px !important; }
  .db-day { min-width: 34px !important; }
  .db-day-circle {
    width: 28px !important; height: 28px !important; font-size: 10px !important;
  }
  .db-day-today .db-day-circle { width: 30px !important; height: 30px !important; }
  .db-day-label { font-size: 7px !important; }
  .db-checkin-footer { gap: 4px !important; padding-top: 4px !important; }
  .db-checkin-reward { font-size: 10px !important; padding: 2px 7px !important; }
  .db-checkin-streak-row { gap: 4px !important; padding-top: 6px !important; }
  .db-streak-badge { font-size: 10px !important; padding: 2px 7px !important; }
  .db-streak-bonus { font-size: 10px !important; padding: 2px 6px !important; }
  .db-streak-restore { font-size: 9px !important; padding: 2px 7px !important; }

  /* Cards: unified gap */
  #view-game .db-col-main,
  #view-game .db-col-side { gap: 10px !important; }
  #view-game .db-grid { gap: 10px !important; }
  #view-game .db-card { padding: 12px !important; }

  /* Progress bar full width */
  #view-game .db-progress-wrap { width: 100% !important; box-sizing: border-box !important; }

  /* Restore rows */
  #view-game .db-restore-need-row { font-size: 12px !important; padding: 4px 0 !important; }
  #view-game .db-restore-next { font-size: 10px !important; padding: 2px 7px !important; }

  /* Activity log empty state compact */
  .db-actlog-empty { padding: 8px 0 !important; gap: 4px !important; }
  .db-actlog-icon { font-size: 18px !important; }
  .db-actlog-title { font-size: 11px !important; }
  .db-actlog-hint { font-size: 10px !important; }

  /* Action card */
  #view-game .db-action-title { font-size: 14px !important; }
  #view-game .db-action-subtitle { font-size: 10px !important; }
  #view-game .db-action-desc { font-size: 11px !important; }
  #view-game .db-reward-preview { gap: 4px !important; margin-bottom: 10px !important; }
  #view-game .db-reward-tag { font-size: 10px !important; padding: 2px 6px !important; }
  #view-game .game-action-btn { padding: 11px !important; font-size: 13px !important; }

  /* Gear + goal */
  #view-game .game-gear-name { font-size: 12px !important; }
  #view-game .game-gear-slot { font-size: 10px !important; }
  #view-game .game-gear-bonus { font-size: 10px !important; }
  #view-game .db-goal-title { font-size: 12px !important; }
  #view-game .db-goal-reward { font-size: 11px !important; }
  #view-game .db-res-row { font-size: 11px !important; padding: 3px 0 !important; }
  #view-game .db-locked-tag { font-size: 9px !important; }

  /* Lore card */
  #view-game .db-lore-title { font-size: 12px !important; }
  #view-game .db-lore-text { font-size: 10px !important; -webkit-line-clamp: 4 !important; }

  /* Bottom nav items */
  #view-game .mmo-bottom-btn { font-size: 9px !important; gap: 1px !important; }

  /* Card labels */
  #view-game .db-card-label { font-size: 9px !important; margin-bottom: 6px !important; }
}

/* =============================================
   Mobile Topbar Right Edge Fix
   ============================================= */
@media (max-width: 767px) {
  #view-game .mmo-topbar {
    overflow: hidden !important;
    padding: 0 10px !important;
    gap: 6px !important;
  }
  #view-game .mmo-topbar-left { flex-shrink: 0 !important; }
  #view-game .mmo-topbar-right {
    gap: 5px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    margin-right: 0 !important;
  }
  /* Ensure theme btn fully visible */
  #view-game .mmo-theme-btn {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
  }
  #view-game .mmo-face-topbar {
    flex-shrink: 0 !important;
    margin-right: 0 !important;
  }
  /* Shrink energy/bag chips slightly */
  #view-game .mmo-res-badge {
    padding: 2px 5px !important;
    font-size: 10px !important;
    gap: 2px !important;
    height: 22px !important;
  }
  #view-game .mmo-res-icon { font-size: 9px !important; }
  #view-game .mmo-brand { font-size: 13px !important; }
}

/* =============================================
   Mobile Final Polish + Hamburger Menu
   ============================================= */
@media (max-width: 767px) {

  /* Hide logo icon on mobile, keep wordmark only */
  #view-game .mmo-topbar .mmo-topbar-left svg,
  #view-game .mmo-topbar .mmo-topbar-left img,
  #view-game .mmo-topbar .mmo-topbar-left .logo-icon { display: none !important; }

  /* Topbar: Logo + chips + theme + hamburger */
  #view-game .mmo-topbar {
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    gap: 5px !important;
    overflow: hidden !important;
  }
  #view-game .mmo-topbar-left { flex-shrink: 0 !important; }
  #view-game .mmo-topbar-center { display: none !important; }
  #view-game .mmo-topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  /* Hide avatar in topbar mobile (hamburger replaces it) */
  #view-game .mmo-face-topbar { display: none !important; }
  /* Hide sign out (inside drawer) */
  #view-game .mmo-topbar-right .btn-ghost { display: none !important; }

  /* Hamburger button */
  .mmo-hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }

  /* Welcome card: hide stats row (avoid duplication) */
  #view-game .db-stats-row { display: none !important; }

  /* Daily check-in compact */
  .db-checkin-card { padding: 8px 10px !important; }
  .db-checkin-reward {
    white-space: nowrap !important;
    overflow-x: auto !important;
    display: block !important;
    font-size: 10px !important;
    padding: 2px 0 !important;
    scrollbar-width: none !important;
  }
  .db-checkin-reward::-webkit-scrollbar { display: none !important; }
  .db-day-circle { width: 26px !important; height: 26px !important; font-size: 10px !important; }
  .db-day-today .db-day-circle { width: 28px !important; height: 28px !important; }
  .db-day { min-width: 30px !important; }
  .db-checkin-streak-row { padding-top: 5px !important; gap: 4px !important; }

  /* Better padding-bottom for safe area */
  #view-game .mmo-main {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px)) !important;
  }
  #view-game .mmo-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* Desktop: hide hamburger */
@media (min-width: 768px) {
  .mmo-hamburger { display: none !important; }
  .mmo-drawer-overlay { display: none !important; }
}

/* DRAWER */
.mmo-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.mmo-drawer-overlay.open {
  opacity: 1; pointer-events: all;
}
.mmo-drawer {
  position: fixed; top: 0; right: -280px; bottom: 0;
  width: 270px;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-subtle);
  z-index: 1000;
  overflow-y: auto;
  transition: right 0.25s cubic-bezier(0.4,0,0.2,1);
  padding: 0 0 40px 0;
  box-shadow: -4px 0 24px rgba(0,0,0,0.18);
}
.mmo-drawer.open { right: 0; }
.mmo-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}
.mmo-drawer-brand {
  font-size: var(--text-base); font-weight: var(--weight-bold);
  color: var(--brand-lime); letter-spacing: -0.3px;
}
.mmo-drawer-close {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.mmo-drawer-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.mmo-drawer-footer-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--text-secondary);
}
.mmo-drawer-footer .btn {
  font-size: 12px; padding: 5px 14px;
  width: 100%; text-align: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
}

[data-theme="light"] .mmo-drawer { background: #faf9f7 !important; border-left-color: #d8d2c8 !important; }
[data-theme="light"] .mmo-drawer-header { border-bottom-color: #d8d2c8 !important; }
[data-theme="light"] .mmo-drawer-brand { color: #3a7a20 !important; }

/* Player Title Badge */
.db-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: #2a7aa0;
  background: #2a7aa018;
  border: 1px solid #2a7aa030;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
[data-theme="light"] .db-title-badge {
  background: #e4f0f8 !important;
  border-color: #a8ccdc !important;
  color: #1a5a7a !important;
}

/* Mobile: wider content area */
@media (max-width: 767px) {
  #view-game .mmo-main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #view-game .db-card,
  #view-game .db-welcome-card,
  .db-checkin-card {
    border-radius: var(--radius-md) !important;
  }
}

/* =============================================
   Mobile Topbar Final Fix
   ============================================= */
@media (max-width: 767px) {
  /* Hide theme toggle from topbar on mobile */
  #view-game .mmo-theme-btn { display: none !important; }
  /* Hide avatar from topbar on mobile */
  #view-game .mmo-face-topbar { display: none !important; }
  /* Hide sign out from topbar on mobile */
  #view-game .mmo-topbar-right .btn-ghost { display: none !important; }

  /* Topbar layout: logo | chips | hamburger */
  #view-game .mmo-topbar {
    padding: 0 12px !important;
    gap: 6px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
  }
  #view-game .mmo-topbar-left { flex-shrink: 0 !important; }
  #view-game .mmo-topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  /* Show all 3 chips on mobile */
  #view-game .mmo-res-badge {
    display: inline-flex !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    height: 24px !important;
    gap: 2px !important;
  }
  #view-game .mmo-res-icon { font-size: 9px !important; }
  #view-game .mmo-res-badge b { font-size: 10px !important; }
  /* Hide OXO on mobile to save space */
  #view-game .mmo-res-badge-oxo { display: none !important; }

  /* Hamburger: larger tap target, fully visible */
  .mmo-hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex-shrink: 0 !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    margin-right: 0 !important;
  }
}

/* =============================================
   Phase 5 - Action Card Active State + Toast
   ============================================= */
.db-action-active { border-color: var(--brand-lime) !important; }
.db-action-status-badge {
  float: right;
  font-size: 9px; font-weight: var(--weight-bold);
  color: var(--brand-lime); background: #97C45920;
  border: 1px solid #97C45940;
  padding: 1px 7px; border-radius: var(--radius-full);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.db-action-timer {
  display: flex; align-items: center; gap: 8px;
  margin: var(--space-2) 0; padding: var(--space-2) var(--space-3);
  background: var(--bg-tertiary); border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.db-timer-label { font-size: 11px; color: var(--text-tertiary); }
.db-timer-value {
  font-size: var(--text-base); font-weight: var(--weight-bold);
  color: var(--brand-lime); font-variant-numeric: tabular-nums;
}
.db-action-pending { margin-bottom: var(--space-3); }
.db-pending-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 0; font-size: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.db-pending-row:last-child { border-bottom: none; }
.db-pending-label { color: var(--text-secondary); }
.db-pending-val { font-weight: var(--weight-semibold); color: var(--brand-lime); }
.db-action-btns { display: flex; gap: var(--space-2); }
.db-collect-btn { flex: 1; }
.db-stop-btn {
  padding: 8px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-tertiary); color: var(--text-secondary);
  font-size: 12px; cursor: pointer;
  transition: all var(--transition-fast);
}
.db-stop-btn:hover { border-color: var(--danger); color: var(--danger); }

/* Toast */
.oxo-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-secondary); border: 1px solid var(--brand-lime);
  color: var(--text-primary); padding: 10px 20px;
  border-radius: var(--radius-lg); font-size: 13px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  z-index: 9999; opacity: 0;
  transition: all 0.3s ease; white-space: nowrap;
}
.oxo-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =============================================
   Skill Pages - Lumberjack Area
   ============================================= */
.skill-shell {
  height: 100%;
  overflow-y: auto;
  background: var(--bg-primary);
}
.skill-topbar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  position: sticky; top: 0; z-index: var(--z-raised);
}
.skill-back-btn {
  font-size: 12px; color: var(--text-secondary);
  background: none; border: none; cursor: pointer;
  padding: 4px 8px; border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.skill-back-btn:hover { color: var(--brand-lime); background: var(--bg-tertiary); }
.skill-topbar-title {
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* Hero */
.skill-hero {
  display: flex; align-items: flex-start; gap: var(--space-6);
  padding: var(--space-5) var(--space-5) var(--space-4);
  margin: var(--space-4) var(--space-5) 0;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}
.skill-hero-text { flex: 1; }
.skill-hero-title {
  font-size: var(--text-lg); font-weight: var(--weight-bold);
  color: var(--text-primary); margin-bottom: var(--space-1);
}
.skill-hero-desc {
  font-size: 12px; color: var(--text-secondary);
  line-height: var(--leading-relaxed); margin: 0;
}
.skill-hero-stats {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 160px;
}
.skill-stat {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-4); font-size: 12px;
}
.skill-stat-label { color: var(--text-tertiary); }
.skill-stat-val { font-weight: var(--weight-semibold); color: var(--text-primary); }

/* XP bar */
.skill-xp-bar-wrap {
  margin: var(--space-3) var(--space-5) 0;
  height: 6px; background: var(--bg-tertiary);
  border-radius: var(--radius-full); overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.skill-xp-bar {
  height: 100%; border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

/* Grid */
.skill-grid {
  display: grid; grid-template-columns: 1fr 260px;
  gap: var(--space-4); padding: var(--space-4) var(--space-5);
  align-items: start;
}
.skill-col-main, .skill-col-side {
  display: flex; flex-direction: column; gap: var(--space-3);
}

/* Cards */
.skill-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.skill-session-active { border-color: var(--brand-lime) !important; }
.skill-card-label {
  font-size: 10px; font-weight: var(--weight-bold);
  color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.07em; margin-bottom: var(--space-3);
  display: flex; align-items: center; gap: 5px;
}

/* Zones */
.skill-zones { display: flex; flex-direction: column; gap: 8px; }
.skill-zone {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-tertiary);
  font-size: 12px;
}
.skill-zone-active {
  border-color: var(--brand-lime) !important;
  background: #97C45912 !important;
}
.skill-zone-locked { opacity: 0.5; }
.skill-zone-name { font-weight: var(--weight-medium); color: var(--text-primary); }
.skill-zone-stats { font-size: 11px; color: var(--text-tertiary); }

/* Tool */
.skill-tool-name {
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-primary); margin-bottom: 4px;
}
.skill-tool-bonus {
  font-size: 11px; font-weight: var(--weight-semibold);
  color: var(--brand-lime); background: #97C45914;
  padding: 2px 8px; border-radius: var(--radius-full);
  display: inline-block; border: 1px solid #97C45930;
}

/* Inventory row */
.skill-inv-row {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-secondary); padding: 3px 0;
}

/* Mobile */
@media (max-width: 767px) {
  .skill-grid { grid-template-columns: 1fr; }
  .skill-hero { flex-direction: column; gap: var(--space-3); }
  .skill-hero-stats { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); min-width: 0; }
  .skill-stat { flex-direction: column; align-items: flex-start; gap: 2px; }
  .skill-topbar { padding: var(--space-2) 12px; }
  .skill-grid { padding: var(--space-3) 12px; }
  .skill-hero { margin: var(--space-3) 12px 0; }
  .skill-xp-bar-wrap { margin: var(--space-2) 12px 0; }
}

/* Light mode */
[data-theme="light"] .skill-card { background: #faf9f7 !important; border-color: #d8d2c8 !important; }
[data-theme="light"] .skill-hero { background: #faf9f7 !important; border-color: #d8d2c8 !important; }
[data-theme="light"] .skill-zone { background: #ede9e2 !important; border-color: #c8c2b8 !important; }

/* ====================================================
   SKILL AREA v2 — Hero + Grid + Card base + Activity + Zones
   ==================================================== */
.skill-area-wrap { padding: 0; }
.skill-area-hero {
  height: 240px; border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: var(--space-4); position: relative;
}
.skill-area-hero-lumberjack {
  background:
    linear-gradient(to right,rgba(4,9,3,.93) 30%,rgba(4,9,3,.65) 50%,rgba(4,9,3,.08) 100%),
    url('/assets/img/area-lumberjack.jpg') center 40%/cover no-repeat;
}
.skill-area-hero-inner {
  position:absolute; inset:0; display:flex; align-items:center; padding:var(--space-6);
}
.skill-area-hero-content {
  max-width:52%; display:flex; flex-direction:column; gap:var(--space-2);
}
.skill-area-location {
  font-size:var(--text-xs); color:var(--text-tertiary);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
}
.skill-area-location .loc-accent { color:var(--brand-lime); }
.skill-area-title {
  font-size:28px; font-weight:var(--weight-bold);
  color:var(--text-primary); margin:0; line-height:1.1;
}
.skill-area-title .title-accent { color:var(--brand-lime); }
.skill-area-desc {
  font-size:var(--text-sm); color:var(--text-secondary);
  line-height:var(--leading-relaxed); margin:0; max-width:380px;
}
.skill-area-tagline { font-size:var(--text-sm); color:var(--brand-lime); font-weight:var(--weight-medium); margin:0; }
.skill-area-grid { display:grid; gap:var(--space-3); margin-bottom:var(--space-3); }
.skill-area-grid-top { grid-template-columns:1.5fr 1fr 1fr 1fr; }
.skill-area-grid-bottom { grid-template-columns:1fr 1fr 1fr 1fr; }
.skill-area-card {
  background:var(--bg-secondary); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:var(--space-4);
  display:flex; flex-direction:column;
}
.skill-area-card-label {
  font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--text-tertiary);
  text-transform:uppercase; letter-spacing:var(--tracking-wide); margin-bottom:var(--space-3);
  display:flex; justify-content:space-between; align-items:center;
}
.skill-area-active-pill {
  background:rgba(151,196,89,.15); color:var(--brand-lime); font-size:10px;
  font-weight:var(--weight-semibold); padding:2px 8px; border-radius:var(--radius-full);
  border:1px solid rgba(151,196,89,.3);
}
.skill-area-footer-btn {
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  margin-top:auto; padding:var(--space-2) 0; border:none;
  border-top:1px solid var(--border-subtle); background:none;
  color:var(--text-tertiary); font-size:var(--text-xs); cursor:pointer; width:100%;
}
.skill-act-header { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); }
.skill-act-icon {
  width:52px; height:52px; border-radius:var(--radius-full);
  background:rgba(151,196,89,.1); border:2px solid rgba(151,196,89,.3);
  display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
}
.skill-act-name { font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--text-primary); }
.skill-act-node { font-size:var(--text-xs); color:var(--brand-lime); font-weight:var(--weight-medium); margin-bottom:2px; }
.skill-act-started { font-size:var(--text-xs); color:var(--text-tertiary); }
.skill-act-prog-wrap { background:var(--bg-tertiary); border-radius:var(--radius-full); height:6px; margin-bottom:4px; overflow:hidden; }
.skill-act-prog-bar { height:100%; border-radius:var(--radius-full); background:var(--brand-lime); transition:width 1s linear; }
.skill-act-pct { font-size:10px; color:var(--text-tertiary); text-align:right; margin-bottom:var(--space-3); }
.skill-act-meta { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--space-2); margin-bottom:var(--space-2); }
.skill-act-meta-item { background:var(--bg-tertiary); border-radius:var(--radius-md); padding:var(--space-2); text-align:center; }
.skill-act-meta-lbl { font-size:10px; color:var(--text-tertiary); margin-bottom:2px; }
.skill-act-meta-val { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-primary); }
.skill-act-tool-note { font-size:var(--text-xs); color:var(--text-tertiary); font-style:italic; margin-bottom:var(--space-3); }
.skill-act-btns { display:flex; gap:var(--space-2); }
.skill-btn-pause { padding:8px 14px; background:var(--bg-tertiary); border:1px solid var(--border-default); border-radius:var(--radius-md); color:var(--text-secondary); font-size:var(--text-sm); cursor:pointer; }
.skill-btn-stop { padding:8px 14px; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); border-radius:var(--radius-md); color:#ef4444; font-size:var(--text-sm); cursor:pointer; }
.skill-btn-continue { flex:1; padding:8px 14px; background:var(--brand-lime); border:none; border-radius:var(--radius-md); color:var(--brand-lime-on); font-size:var(--text-sm); font-weight:var(--weight-semibold); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.skill-act-idle { text-align:center; padding:var(--space-6) 0; }
.skill-act-idle-icon { font-size:36px; margin-bottom:var(--space-3); }
.skill-act-idle-text { font-size:var(--text-sm); color:var(--text-tertiary); margin-bottom:var(--space-4); }
.skill-btn-start { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; background:var(--brand-lime); border:none; border-radius:var(--radius-md); color:var(--brand-lime-on); font-size:var(--text-sm); font-weight:var(--weight-semibold); cursor:pointer; }
.skill-zone-list { display:flex; flex-direction:column; gap:var(--space-2); }
.skill-zone-row { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); border:1px solid var(--border-subtle); transition:var(--transition-fast); }
.skill-zone-row.zone-active { border-color:var(--brand-lime); background:rgba(151,196,89,.08); cursor:pointer; }
.skill-zone-row.zone-locked { opacity:.45; cursor:not-allowed; }
.skill-zone-icon { font-size:18px; flex-shrink:0; }
.skill-zone-info { flex:1; }
.skill-zone-name { font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-primary); }
.skill-zone-sub { font-size:10px; color:var(--text-tertiary); }
.skill-zone-req { font-size:var(--text-xs); font-weight:var(--weight-semibold); flex-shrink:0; }
.req-ok { color:var(--brand-lime); } .req-locked { color:var(--danger); }

/* SKILL AREA — Rewards + Tool + Restoration + Inventory + Log + Stats + Responsive */
.skill-reward-list { display:flex; flex-direction:column; gap:var(--space-2); }
.skill-reward-row { display:flex; align-items:center; justify-content:space-between; }
.skill-reward-left { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); color:var(--text-secondary); }
.skill-reward-icon { font-size:16px; }
.skill-reward-right { font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--text-secondary); }
.skill-reward-rarity-badge { font-size:10px; padding:1px 6px; border-radius:var(--radius-full); background:rgba(99,102,241,.15); color:#818cf8; border:1px solid rgba(99,102,241,.3); }
.skill-reward-hr { border:none; border-top:1px solid var(--border-subtle); margin:var(--space-2) 0; }
.skill-reward-bonus { display:flex; justify-content:space-between; font-size:var(--text-xs); color:var(--brand-lime); font-weight:var(--weight-medium); }
.skill-tool-header { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); }
.skill-tool-icon { width:56px; height:56px; background:var(--bg-tertiary); border-radius:var(--radius-md); border:1px solid var(--border-default); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; }
.skill-tool-name { font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--text-primary); margin-bottom:4px; }
.skill-tool-rarity-uncommon { font-size:10px; padding:2px 8px; border-radius:var(--radius-full); background:rgba(74,222,128,.12); color:#4ade80; border:1px solid rgba(74,222,128,.25); }
.skill-tool-rarity-common { font-size:10px; padding:2px 8px; border-radius:var(--radius-full); background:var(--bg-tertiary); color:var(--text-tertiary); border:1px solid var(--border-subtle); }
.skill-tool-speed { font-size:var(--text-xs); color:var(--brand-lime); font-weight:var(--weight-semibold); margin-top:4px; }
.skill-tool-stat-lbl { font-size:var(--text-xs); color:var(--text-tertiary); margin:var(--space-2) 0 4px; }
.skill-tool-dur-wrap { background:var(--bg-tertiary); border-radius:var(--radius-full); height:4px; margin-bottom:var(--space-3); overflow:hidden; }
.skill-tool-dur-bar { height:100%; border-radius:var(--radius-full); background:var(--brand-lime); }
.skill-tool-passive { font-size:var(--text-xs); color:var(--text-tertiary); font-style:italic; margin-bottom:var(--space-2); }
.skill-resto-body { display:flex; gap:var(--space-3); margin-bottom:var(--space-2); }
.skill-resto-img { width:60px; height:60px; border-radius:var(--radius-md); background:linear-gradient(135deg,#1a3010,#2a4a1a); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; }
.skill-resto-desc { font-size:var(--text-sm); color:var(--text-secondary); margin-bottom:var(--space-2); }
.skill-resto-stat { font-size:var(--text-xs); color:var(--text-tertiary); margin-bottom:var(--space-1); }
.skill-resto-stat b { color:var(--brand-lime); }
.skill-resto-prog-wrap { background:var(--bg-tertiary); border-radius:var(--radius-full); height:4px; margin:var(--space-2) 0 var(--space-3); overflow:hidden; }
.skill-resto-prog-bar { height:100%; border-radius:var(--radius-full); background:var(--brand-lime); }
.skill-resto-next { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); background:var(--bg-tertiary); border-radius:var(--radius-md); border:1px solid var(--border-subtle); margin-bottom:var(--space-3); }
.skill-resto-next-icon { font-size:20px; }
.skill-resto-next-info { flex:1; }
.skill-resto-next-lbl { font-size:10px; color:var(--text-tertiary); }
.skill-resto-next-name { font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--text-primary); }
.skill-resto-next-req { font-size:10px; color:var(--text-tertiary); }
.skill-inv-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-3); }
.skill-inv-bag { font-size:var(--text-xs); color:var(--text-tertiary); }
.skill-inv-list { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-2); }
.skill-inv-row { display:flex; align-items:center; gap:var(--space-2); }
.skill-inv-icon { font-size:18px; }
.skill-inv-name { flex:1; font-size:var(--text-sm); color:var(--text-secondary); }
.skill-inv-name-rare { color:#818cf8; }
.skill-inv-qty { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-primary); }
.skill-log-list { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-2); }
.skill-log-row { display:flex; align-items:flex-start; gap:var(--space-2); }
.skill-log-icon { font-size:13px; flex-shrink:0; margin-top:1px; }
.skill-log-text { flex:1; font-size:var(--text-xs); color:var(--text-secondary); }
.skill-log-time { font-size:10px; color:var(--text-tertiary); flex-shrink:0; }
.skill-stats-list { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-2); }
.skill-stats-row { display:flex; align-items:center; justify-content:space-between; }
.skill-stats-lbl { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs); color:var(--text-secondary); }
.skill-stats-icon { font-size:13px; }
.skill-stats-val { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-primary); }
.skill-stats-val-pos { color:var(--brand-lime); }
@media (max-width:1100px) { .skill-area-grid-top,.skill-area-grid-bottom { grid-template-columns:1fr 1fr; } }
@media (max-width:768px) { .skill-area-grid-top,.skill-area-grid-bottom { grid-template-columns:1fr; } .skill-area-hero-content { max-width:100%; } .skill-area-hero { height:180px; } }

.skill-dur-label{font-size:11px;color:var(--text-tertiary);margin-bottom:8px;text-align:center;}
.skill-dur-pills{display:flex;gap:8px;margin-bottom:16px;justify-content:center;flex-wrap:wrap;}
.skill-dur-pill{padding:5px 14px;border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--bg-tertiary);color:var(--text-secondary);font-size:var(--text-xs);cursor:pointer;transition:var(--transition-fast);}
.skill-dur-pill:hover{border-color:var(--brand-lime);color:var(--brand-lime);}
.skill-dur-pill-sel{border-color:var(--brand-lime);background:rgba(151,196,89,.15);color:var(--brand-lime);font-weight:var(--weight-semibold);}

/* Session Complete Modal */
.sc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s ease;}
.sc-overlay.sc-visible{opacity:1;}
.sc-modal{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--space-8);max-width:380px;width:90%;text-align:center;transform:translateY(12px);transition:transform .3s var(--easing-snappy);}
.sc-overlay.sc-visible .sc-modal{transform:translateY(0);}
.sc-icon{font-size:48px;margin-bottom:var(--space-3);}
.sc-title{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary);margin-bottom:var(--space-4);}
.sc-rewards{background:var(--bg-tertiary);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);}
.sc-reward-row{display:flex;align-items:center;gap:var(--space-2);}
.sc-reward-icon{font-size:18px;}
.sc-reward-label{flex:1;font-size:var(--text-sm);color:var(--text-secondary);text-align:left;}
.sc-reward-val{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--brand-lime);}
.sc-tagline{font-size:var(--text-sm);color:var(--text-tertiary);font-style:italic;margin-bottom:var(--space-5);}
.sc-btns{display:flex;gap:var(--space-3);}
.sc-btn-pri{flex:1;padding:10px 0;background:var(--brand-lime);border:none;border-radius:var(--radius-md);color:var(--brand-lime-on);font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;}
.sc-btn-sec{flex:1;padding:10px 0;background:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;}
.skill-area-state-line{font-size:var(--text-xs);color:var(--text-tertiary);margin:0;font-style:italic;}

/* ─── Phase 5 Layer 2 - Reward Preview Sections (2026-05-08) ─── */
.skill-reward-section-head {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: var(--space-3) 0 var(--space-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.skill-reward-section-head:first-child {
  margin-top: 0;
}
.skill-reward-section-sub {
  font-size: 10px;
  font-weight: var(--weight-regular);
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
  opacity: .7;
}
.skill-reward-list-pending .skill-reward-row {
  background: rgba(151, 196, 89, 0.06);
  border-left: 2px solid var(--brand-lime);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  margin-left: -var(--space-2);
}
.skill-reward-right-active {
  color: var(--brand-lime) !important;
  font-weight: var(--weight-bold) !important;
}
.skill-reward-right-locked {
  color: var(--text-tertiary) !important;
  font-style: italic;
  opacity: .7;
}
.skill-reward-list-pending .skill-reward-right {
  color: var(--brand-lime);
  font-weight: var(--weight-bold);
}
/* Hide standalone <hr> since section heads have their own borders */
.skill-area-card .skill-reward-hr {
  display: none;
}
/* Override the Future badge styling */
.skill-reward-rarity-badge {
  background: rgba(124, 58, 237, .12);
  color: #a78bfa;
  border-color: rgba(167, 139, 250, .3);
}
/* ─── End Phase 5 Layer 2 - Reward Preview ─── */

/* ─── Phase 5 Layer 2 - MMO Bag Grid (2026-05-08) ─── */
.skill-inv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.skill-inv-head-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.skill-inv-bag {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
.skill-bag-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
@media (max-width: 768px) {
  .skill-bag-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
}
.skill-bag-slot {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast) var(--easing-snappy);
}
.skill-bag-slot-empty {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border-subtle);
  opacity: .5;
}
.skill-bag-slot-occupied {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
}
.skill-bag-slot-occupied:hover,
.skill-bag-slot-occupied:focus-visible {
  background: linear-gradient(180deg, rgba(151,196,89,0.08) 0%, rgba(151,196,89,0.02) 100%);
  border-color: var(--border-default);
  transform: translateY(-1px);
  outline: none;
}
.skill-bag-slot-uncommon {
  border-color: rgba(151, 196, 89, .35);
  box-shadow: inset 0 0 0 1px rgba(151, 196, 89, .15);
}
.skill-bag-slot-uncommon:hover,
.skill-bag-slot-uncommon:focus-visible {
  border-color: var(--brand-lime);
  box-shadow: 0 0 0 1px rgba(151, 196, 89, .25), inset 0 0 12px rgba(151, 196, 89, .12);
}
.skill-bag-slot-rare {
  border-color: rgba(99, 102, 241, .4);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .2);
}
.skill-bag-slot-epic {
  border-color: rgba(168, 85, 247, .4);
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .2);
}
.skill-bag-slot-legendary {
  border-color: rgba(245, 158, 11, .5);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .25);
}
.skill-bag-slot-icon {
  font-size: 24px;
  line-height: 1;
  margin-top: 2px;
}
.skill-bag-slot-qty {
  position: absolute;
  bottom: 4px;
  right: 5px;
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  background: rgba(0, 0, 0, .55);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  line-height: 1.4;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.skill-bag-slot-stackbar {
  position: absolute;
  bottom: 0;
  left: 4px;
  right: 4px;
  height: 2px;
  background: rgba(255, 255, 255, .05);
  border-radius: 1px;
  overflow: hidden;
  pointer-events: none;
}
.skill-bag-slot-stackbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-lime-dark), var(--brand-lime));
  border-radius: 1px;
  transition: width var(--transition-base) var(--easing-snappy);
}
/* ─── End Phase 5 Layer 2 - MMO Bag Grid ─── */

/* ─── Phase 5 Layer 2 - Bag Tooltip (2026-05-08) ─── */
.oxo-bag-tooltip {
  position: fixed;
  z-index: var(--z-modal);
  min-width: 200px;
  max-width: 260px;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, rgba(28, 32, 28, 0.98), rgba(20, 24, 20, 0.98));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.oxo-bag-tooltip-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.oxo-tip-name {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: 2px;
}
.oxo-tip-name-uncommon { color: var(--brand-lime); }
.oxo-tip-name-rare     { color: #818cf8; }
.oxo-tip-name-epic     { color: #c084fc; }
.oxo-tip-name-legendary{ color: #fbbf24; }
.oxo-tip-rarity {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.oxo-tip-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-2) 0;
}
.oxo-tip-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  padding: 2px 0;
}
.oxo-tip-row > span:first-child {
  color: var(--text-tertiary);
}
.oxo-tip-row > span:last-child {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}
.oxo-tip-val-good {
  color: var(--brand-lime) !important;
  font-weight: var(--weight-semibold) !important;
}
.oxo-tip-use {
  font-size: 10px;
  color: var(--text-tertiary);
  font-style: italic;
  text-align: center;
  margin-top: 2px;
}
/* ─── End Phase 5 Layer 2 - Bag Tooltip ─── */

/* ─── Phase 5 Layer 2 - Session Complete Modal (2026-05-08) ─── */
.oxo-session-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 8, 0.78);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-4);
  opacity: 0;
  transition: opacity 240ms ease;
}
.oxo-session-modal-overlay.oxo-session-modal-visible {
  opacity: 1;
}
.oxo-session-modal {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, rgba(36, 42, 36, 0.98) 0%, rgba(22, 28, 22, 0.98) 100%);
  border: 1px solid rgba(151, 196, 89, 0.25);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5) var(--space-5);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 80px rgba(151, 196, 89, 0.08);
  transform: scale(0.92) translateY(12px);
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.oxo-session-modal-visible .oxo-session-modal {
  transform: scale(1) translateY(0);
}
.oxo-session-header {
  text-align: center;
  margin-bottom: var(--space-5);
}
.oxo-session-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: var(--space-3);
  filter: drop-shadow(0 4px 12px rgba(151, 196, 89, 0.3));
  animation: oxo-session-icon-bounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms both;
}
@keyframes oxo-session-icon-bounce {
  0%   { transform: scale(0) rotate(-12deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.oxo-session-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
  letter-spacing: -0.02em;
}
.oxo-session-subtitle {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}
.oxo-session-levelup {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), rgba(151, 196, 89, 0.15));
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-weight: var(--weight-bold);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  animation: oxo-session-levelup-pulse 2s ease-in-out infinite;
}
@keyframes oxo-session-levelup-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
.oxo-session-rewards {
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.oxo-session-reward-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}
.oxo-session-reward-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.oxo-session-reward-label {
  flex: 1;
  color: var(--text-secondary);
}
.oxo-session-reward-val {
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--brand-lime);
  letter-spacing: 0.01em;
}
.oxo-session-reward-val-muted {
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.oxo-session-reward-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-2) 0;
}
.oxo-session-reward-meta .oxo-session-reward-label {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}
.oxo-session-message {
  text-align: center;
  font-style: italic;
  color: var(--brand-lime);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-5);
  letter-spacing: 0.01em;
  opacity: 0.9;
}
.oxo-session-actions {
  display: flex;
  gap: var(--space-3);
}
.oxo-session-btn-primary,
.oxo-session-btn-secondary {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast) var(--easing-snappy);
  border: 1px solid transparent;
  font-family: inherit;
}
.oxo-session-btn-primary {
  background: linear-gradient(180deg, var(--brand-lime) 0%, var(--brand-lime-dark) 100%);
  color: var(--brand-lime-on);
  box-shadow: 0 2px 8px rgba(151, 196, 89, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  flex: 1.4;
}
.oxo-session-btn-primary:hover {
  background: linear-gradient(180deg, var(--brand-lime-light) 0%, var(--brand-lime) 100%);
  box-shadow: 0 4px 16px rgba(151, 196, 89, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.oxo-session-btn-primary:active {
  transform: translateY(0);
}
.oxo-session-btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border-color: var(--border-default);
}
.oxo-session-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
@media (max-width: 480px) {
  .oxo-session-modal {
    padding: var(--space-5) var(--space-4) var(--space-4);
  }
  .oxo-session-icon { font-size: 48px; }
  .oxo-session-title { font-size: var(--text-xl); }
  .oxo-session-actions { flex-direction: column; }
  .oxo-session-btn-primary, .oxo-session-btn-secondary { flex: 1; }
}
/* ─── End Phase 5 Layer 2 - Session Complete Modal ─── */