@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800;900&display=swap');

@font-face {
    font-family: 'Pokemon Solid';
    src: url('../../../assets/fonts/Pokemon%20Solid.ttf') format('truetype');
}

:root {
  --tcm-bg:        #080c18;
  --tcm-surface:   rgba(14, 20, 40, 0.85);
  --tcm-glass:     rgba(20, 29, 58, 0.7);
  --tcm-border:    rgba(0, 229, 255, 0.15);
  --tcm-cyan:      #00e5ff;
  --tcm-purple:    #b829ff;
  --tcm-pink:      #ff4d9e;
  --tcm-text:      #e8f4ff;
  --tcm-muted:     #7a8aaa;
  --tcm-radius:    14px;
  --tcm-font:      'Outfit', sans-serif;
  
  --color-accent-red: #e53935;
  --color-accent-yellow: #fdd835;
  --color-text-secondary: #7a8aaa;
  --color-border: rgba(255,255,255,0.1);
  --color-bg-secondary: rgba(20, 29, 58, 0.7);
  --color-bg-tertiary: rgba(8, 12, 24, 0.8);
}


[data-theme="light"] {
  --tcm-bg:        #f0f4f8;
  --tcm-surface:   rgba(255, 255, 255, 0.9);
  --tcm-glass:     rgba(255, 255, 255, 0.7);
  --tcm-border:    rgba(0, 0, 0, 0.1);
  --tcm-cyan:      #0097a7; 
  --tcm-purple:    #7b1fa2;
  --tcm-pink:      #c2185b;
  --tcm-text:      #1a202c;
  --tcm-muted:     #4a5568;
  
  --color-border: rgba(0,0,0,0.1);
  --color-bg-secondary: rgba(255,255,255,0.8);
  --color-bg-tertiary: rgba(240,244,248,0.9);
}

[data-theme="light"] .tcm-inline-poke,
[data-theme="light"] .tcm-asset-card,
[data-theme="light"] .tcm-selector-filters input, 
[data-theme="light"] .tcm-selector-filters select,
[data-theme="light"] .tcm-input-wrapper input,
[data-theme="light"] .tcm-tool-item input,
[data-theme="light"] .tcm-tool-item select {
  background: rgba(0,0,0,0.03);
  color: var(--tcm-text);
  border-color: rgba(0,0,0,0.15);
}

[data-theme="light"] .rg-generate-btn,
[data-theme="light"] .tcm-action-btn,
[data-theme="light"] .tcm-nav-arrow {
  color: #ffffff; 
  text-shadow: 0 1px 2px rgba(0,0,0,0.5); 
}

[data-theme="light"] .tcm-action-btn {
  background: var(--tcm-cyan); 
  border-color: rgba(0,0,0,0.1);
}

[data-theme="light"] .tcm-action-btn:hover {
  background: var(--tcm-pink);
}

[data-theme="light"] .tcm-modal-content {
  background: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--tcm-bg); color: var(--tcm-text); font-family: var(--tcm-font); line-height: 1.5; }

.tcm-main { min-height: 100vh; padding-bottom: 4rem; }
.tcm-container { max-width: 1300px; margin: 0 auto; width: 100%; padding: 0; }


.rg-hero { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding: 2.5rem 0 0; }
.rg-hero-text h1 { 
  font-size: clamp(1.8rem, 4.5vw, 2.8rem); font-weight: 900;
  background: linear-gradient(135deg, var(--color-accent-yellow), var(--color-accent-red));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: .25rem; line-height: 1.1; 
}
.rg-hero-text p { color: var(--color-text-secondary); font-size: 1rem; }

.rg-generate-btn { 
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem 1.5rem; background: linear-gradient(135deg, var(--color-accent-red), #b71c1c);
  color: #fff; border: none; border-radius: 10px; font-size: 1.1rem; font-weight: 800; cursor: pointer;
  transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 15px rgba(229,57,53,.3);
}
.rg-generate-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(229,57,53,.45); }
.rg-generate-btn svg { width: 18px; height: 18px; }


.tcm-advanced-grid {
  display: grid;
  grid-template-columns: 7.5fr 2.5fr;
  gap: 2rem;
  padding: 0;
  align-items: start;
}


.tcm-col-left { display: flex; flex-direction: column; gap: 1.5rem; }
.tcm-canvas-container { 
  position: relative; background: rgba(0,0,0,0.3); border: 1px solid var(--tcm-border); 
  border-radius: var(--tcm-radius); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); 
}
#trainerCard { display: block; width: 100%; height: auto; border-radius: var(--tcm-radius); }
.tcm-preview-label {
  position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6);
  color: var(--tcm-cyan); font-size: 0.7rem; font-weight: 800; padding: 4px 12px;
  border-radius: 4px; text-transform: uppercase; border: 1px solid var(--tcm-border);
}


.tcm-team-tray { background: var(--tcm-glass); border: 1px solid var(--tcm-border); border-radius: var(--tcm-radius); padding: 1.25rem; backdrop-filter: blur(10px); }
.tcm-tray-label { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; color: var(--tcm-cyan); margin-bottom: 1rem; }
.tcm-tray-items { display: flex; gap: 1rem; min-height: 90px; align-items: center; flex-wrap: wrap; }
.tcm-tray-placeholder { color: var(--tcm-muted); font-size: 0.9rem; font-style: italic; width: 100%; text-align: center; }
.tcm-tray-item { position: relative; width: 90px; height: 90px; background: rgba(255,255,255,0.03); border: 1px solid var(--tcm-border); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.tcm-tray-item img { width: 80%; height: 80%; object-fit: contain; }
.tcm-tray-item:hover { border-color: var(--tcm-pink); transform: translateY(-3px); }
.tcm-remove-btn { 
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background: var(--tcm-pink); 
  color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; 
  font-size: 14px; font-weight: bold; cursor: pointer; opacity: 0; transition: 0.2s; z-index: 10;
}
.tcm-tray-item:hover .tcm-remove-btn { opacity: 1; }


.tcm-inline-selector { background: var(--tcm-glass); border: 1px solid var(--tcm-border); border-radius: var(--tcm-radius); padding: 1.5rem; }
.tcm-selector-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; }
.tcm-selector-header h3 { font-size: 1rem; font-weight: 900; text-transform: uppercase; color: var(--tcm-cyan); }
.tcm-selector-filters { display: flex; gap: 0.75rem; width: 100%; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.tcm-selector-filters input, .tcm-selector-filters select { 
  background: rgba(0,0,0,0.3); border: 1px solid var(--color-border); border-radius: 8px; color: #fff; padding: 0.5rem; outline: none; 
}
.tcm-inline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.75rem; max-height: 440px; overflow-y: auto; padding: 0.5rem; }
.tcm-inline-poke { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; padding: 0.5rem; cursor: pointer; transition: 0.2s; }
.tcm-inline-poke img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.tcm-inline-poke:hover { border-color: var(--tcm-cyan); transform: translateY(-3px); }


.tcm-shiny-toggle { display: flex; align-items: center; gap: 0.5rem; }
.tcm-shiny-label { font-size: 0.7rem; font-weight: 800; color: var(--tcm-pink); text-transform: uppercase; }
.tcm-switch { position: relative; width: 40px; height: 20px; }
.tcm-switch input { opacity: 0; width: 0; height: 0; }
.tcm-slider { position: absolute; cursor: pointer; inset: 0; background: rgba(255,255,255,0.1); border-radius: 20px; border: 1px solid var(--tcm-border); }
.tcm-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: 0.3s; }
input:checked + .tcm-slider { background: var(--tcm-pink); }
input:checked + .tcm-slider:before { transform: translateX(20px); }


.tcm-col-right { display: flex; flex-direction: column; gap: 1.5rem; }
.tcm-option-group { background: var(--tcm-glass); border: 1px solid var(--tcm-border); border-radius: var(--tcm-radius); padding: 1.25rem; }
.tcm-option-label { display: block; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; color: var(--tcm-cyan); margin-bottom: 0.75rem; }
.tcm-input-wrapper input { 
  width: 100%; background: var(--color-bg-tertiary); border: 1px solid var(--color-border); 
  border-radius: 10px; padding: 0.75rem; color: #fff; outline: none; transition: 0.2s; 
}
.tcm-input-wrapper input:focus { border-color: var(--tcm-cyan); }

.tcm-typography-toolbar { display: flex; gap: 0.75rem; margin-top: 1rem; border-top: 1px solid var(--color-border); padding-top: 1rem; }
.tcm-tool-item { flex: 1; }
.tcm-tool-item label { display: block; font-size: 0.6rem; font-weight: 700; color: var(--tcm-muted); text-transform: uppercase; margin-bottom: 2px; }
.tcm-tool-item input, .tcm-tool-item select { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--color-border); border-radius: 6px; padding: 0.4rem; color: #fff; font-size: 0.85rem; }

.tcm-social-inputs { display: flex; flex-direction: column; gap: 0.75rem; }
.tcm-social-input-row { display: flex; gap: 0.5rem; }
.tcm-social-input-row select { flex: 0 0 100px; background: rgba(0,0,0,0.3); border: 1px solid var(--color-border); color: #fff; border-radius: 8px; padding: 0.5rem; }
.tcm-social-input-row input { flex: 1; background: rgba(0,0,0,0.3); border: 1px solid var(--color-border); color: #fff; border-radius: 8px; padding: 0.5rem; }


.tcm-display-box { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.2); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.25rem 1rem; }
.tcm-display-preview { width: 120px; height: 120px; background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tcm-display-preview img { max-width: 90%; max-height: 90%; object-fit: contain; }
.tcm-nav-arrow { 
  width: 32px; height: 32px; background: rgba(255,255,255,0.05); border: 1px solid var(--tcm-border); 
  color: #fff; border-radius: 50%; font-weight: 900; cursor: pointer; transition: 0.2s; 
}
.tcm-nav-arrow:hover { background: var(--tcm-cyan); color: #000; transform: scale(1.1); }
.tcm-display-actions-v3 { display: flex; gap: 0.5rem; margin-top: 1rem; }
.tcm-action-btn { 
  flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--color-border); 
  border-radius: 6px; color: #fff; padding: 0.5rem; font-size: 0.75rem; font-weight: 700; cursor: pointer; text-transform: uppercase; 
}
.tcm-action-btn:hover { background: var(--tcm-cyan); color: #000; }
.tcm-bg-preview div { width: 100%; height: 100%; }


.tcm-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.tcm-modal[hidden] { display: none; }
.tcm-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); }
.tcm-modal-content { 
  position: relative; z-index: 2; background: #0c111d; border: 1px solid var(--tcm-border); 
  border-radius: 20px; width: 90%; max-width: 800px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; 
}
.tcm-modal-header { padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; }
.tcm-modal-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 1rem; 
  padding: 1rem; 
  overflow-y: auto; 
}


.tcm-inline-grid::-webkit-scrollbar,
.tcm-modal-grid::-webkit-scrollbar {
  width: 8px;
}
.tcm-inline-grid::-webkit-scrollbar-track,
.tcm-modal-grid::-webkit-scrollbar-track {
  background: rgba(128, 128, 128, 0.1);
  border-radius: 4px;
}
.tcm-inline-grid::-webkit-scrollbar-thumb,
.tcm-modal-grid::-webkit-scrollbar-thumb {
  background: var(--tcm-cyan);
  border-radius: 4px;
}
[data-theme="light"] .tcm-inline-grid::-webkit-scrollbar-thumb,
[data-theme="light"] .tcm-modal-grid::-webkit-scrollbar-thumb {
  background: var(--tcm-muted);
}
@media (min-width: 900px) {
  .tcm-modal-grid { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; padding: 1.5rem; }
}
.tcm-asset-card { 
  background: rgba(255,255,255,0.03); 
  border: 1px solid var(--color-border); 
  border-radius: 12px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  overflow: hidden; 
  position: relative;
  transition: 0.2s;
  min-height: 180px; 
  padding: 5px;
}
.tcm-asset-card:hover { border-color: var(--tcm-cyan); transform: scale(1.03); z-index: 10; }
.tcm-asset-card img { width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block; }
.tcm-bg-asset { min-height: 120px; aspect-ratio: 16/9; }
.tcm-bg-asset img { width: 100%; height: 100%; object-fit: cover; }
.tcm-bg-asset img { width: 100%; height: 100%; object-fit: cover; }


@media (max-width: 1100px) { .tcm-advanced-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .tcm-container { display: flex; flex-direction: column; padding: 0 5px; }
  .rg-hero { flex-direction: column; text-align: center; gap: 1rem; margin-bottom: 20px; order: 1; }
  .tcm-advanced-grid { order: 2; }
  .rg-hero-actions { order: 3; width: 100%; display: flex; justify-content: center; margin-top: 20px; }
  .tcm-guide-box { order: 4; }
  .rg-generate-btn { width: 100%; max-width: 400px; }
}
@media (max-width: 600px) { .tcm-tray-items { justify-content: center; } }


.tcm-guide-box {
  margin: 3rem auto 0;
  max-width: 1300px;
  background: var(--tcm-glass);
  border: 1px solid var(--tcm-border);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.tcm-guide-box details { width: 100%; }

.tcm-guide-box details summary {
  padding: 1.25rem 1.5rem;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--tcm-cyan);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  transition: background .2s;
}

.tcm-guide-box details summary::-webkit-details-marker { display: none; }
.tcm-guide-box details summary:hover { background: rgba(0, 229, 255, 0.05); }

.tcm-guide-box details summary::after {
  content: "▼";
  font-size: 0.8rem;
  transition: transform 0.3s ease;
  color: var(--tcm-muted);
}

.tcm-guide-box details[open] summary::after { transform: rotate(180deg); }
.tcm-guide-box details[open] summary { border-bottom: 1px solid var(--tcm-border); }

.tcm-guide-content {
  padding: 2.5rem;
  line-height: 1.8;
  color: var(--tcm-text);
  font-size: 1.05rem;
}

.tcm-guide-content h2 { 
  color: var(--tcm-cyan); 
  margin: 2.5rem 0 1.25rem; 
  font-size: 1.75rem; 
  font-weight: 900; 
  letter-spacing: -0.02em;
}

.tcm-guide-content h3 { 
  color: var(--tcm-pink); 
  margin: 2rem 0 1rem; 
  font-size: 1.4rem; 
  font-weight: 800; 
}

.tcm-guide-content h2:first-child, 
.tcm-guide-content h3:first-child { margin-top: 0; }

.tcm-guide-content p { margin-bottom: 1.5rem; opacity: 0.9; }
.tcm-guide-content p strong { color: var(--tcm-cyan); font-weight: 700; }
.tcm-guide-content p:last-child { margin-bottom: 0; }

.tcm-guide-content ul { margin: 0 0 1.5rem 1.5rem; padding: 0; list-style: none; }
.tcm-guide-content li { 
  margin-bottom: 1rem; 
  position: relative; 
  padding-left: 1.5rem;
  opacity: 0.9;
}

.tcm-guide-content li::before {
  content: "▹";
  position: absolute;
  left: 0;
  color: var(--tcm-cyan);
  font-weight: 900;
}

.tcm-guide-content li strong { color: var(--tcm-cyan); font-weight: 700; }

@media (max-width: 768px) {
  .tcm-guide-box { margin: 2rem 5px 0; }
  .tcm-guide-content { padding: 1.5rem; font-size: 0.95rem; }
  .tcm-guide-content h2 { font-size: 1.5rem; }
  .tcm-guide-content h3 { font-size: 1.25rem; }
}