:root{
  --bg: #0f1320;
  --panel: #161b2e;
  --text: #e6e8ef;
  --muted: #aab1c6;
  --primary: #6aa6ff;
  --danger: #ff6a6a;
  --chip-owned: #1f8a70;
  --chip-unowned: #4b5563;
  --char-card-size: 120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
.header-main{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
header{display:flex;flex-direction:column;gap:12px;padding:16px 24px;border-bottom:1px solid #232a45;background:linear-gradient(180deg,#12172a,transparent)}
h1{margin:0;font-size:20px;letter-spacing:.3px}
main.page{display:none;grid-template-columns:320px 1fr;gap:16px;padding:16px}
main.page.visible{display:grid}
main.page#page-team{display:none;grid-template-columns:none;padding:0}
main.page#page-team.visible{display:block}
aside{display:flex;flex-direction:column;gap:16px}
.panel{background:var(--panel);border:1px solid #232a45;border-radius:12px;padding:12px}
.header-actions{display:flex;gap:8px}
.coop-link-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.9rem;color:#b9c3ff;background:rgba(15,24,49,.6);border:1px solid rgba(108,118,168,.4);border-radius:8px;padding:10px 12px}
.coop-link-label{text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;color:#8091d5}
.coop-link-code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;font-size:1.05rem;color:#f5f7ff;letter-spacing:.12em}
.coop-link-status{min-width:160px;font-size:.85rem;color:#b9c3ff}
.coop-link-status.success{color:#6ae79c}
.coop-link-status.error{color:#ff8a8a}
.coop-link-status.pending{color:#ffc27f}
button{border:none;border-radius:10px;padding:10px 14px;color:var(--text);background:#2a3357;cursor:pointer}
button.primary{background:var(--primary)}
button.danger{background:var(--danger)}
button.secondary{background:#2f3a66}
button:disabled{opacity:.6;cursor:not-allowed}
/* Player Management Redesign */
.player-management{position:relative}
.player-tabs-container{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.player-tabs{display:flex;flex-wrap:wrap;flex:1 1 200px;gap:8px;max-width:100%}
.player-tabs::-webkit-scrollbar{display:none}
.player-tab{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  background:#2a3357;
  border:1px solid #3d4875;
  border-radius:8px;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
  transition:all .15s ease;
  font-size:14px;
  font-weight:500;
}
.player-tab:hover{background:#334080;transform:translateY(-1px)}
.player-tab.active{
  background:var(--primary);
  border-color:var(--primary);
  box-shadow:0 2px 8px rgba(106,166,255,.3);
  font-weight:600;
}
.player-tab .count{
  background:rgba(0,0,0,.2);
  padding:2px 6px;
  border-radius:10px;
  font-size:12px;
  font-weight:600;
}
.player-tab .close{
  background:rgba(0,0,0,.2);
  border:none;
  border-radius:4px;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  cursor:pointer;
  margin-left:4px;
  font-size:12px;
}
.player-tab .close:hover{background:rgba(0,0,0,.4)}
.add-player-tab{
  background:#1f2845;
  border:2px dashed #3d4875;
  border-radius:8px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  cursor:pointer;
  font-size:18px;
  font-weight:300;
  transition:all .15s ease;
  align-self:flex-start;
}
.add-player-tab:hover{
  background:#2a3357;
  border-color:var(--primary);
  color:var(--primary);
  transform:scale(1.05);
}
.checkbox{display:flex;align-items:center;gap:6px;color:var(--muted)}
/* Custom circular checkbox */
label.checkbox{position:relative;display:inline-flex;align-items:center;gap:8px;padding-left:26px;cursor:pointer;color:var(--text)}
label.checkbox input{position:absolute;opacity:0;inset:0;cursor:pointer}
label.checkbox::before{content:"";position:absolute;left:0;width:16px;height:16px;border-radius:50%;border:2px solid var(--text);background:transparent;transition:all .15s ease}
label.checkbox:has(input:checked)::before{background:var(--primary);box-shadow:0 0 0 4px rgba(106,166,255,.15);transform:scale(1.05)}
label.checkbox:active::before{transform:scale(.96)}
/* Player Actions & Info */
.player-actions{display:flex;gap:8px;margin-bottom:12px}
.player-actions button{display:flex;align-items:center;gap:6px;font-size:13px}
.player-actions .icon{font-size:16px}
.active-player-info{
  padding:8px 12px;
  background:linear-gradient(135deg,#1d2647,#10162b);
  border:1px solid #2b3356;
  border-radius:8px;
  font-size:13px;
  color:var(--muted);
}

.constellation-tools{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  background:rgba(15,19,32,0.75);
  border:1px solid #272f4a;
  border-radius:10px;
  text-align:center;
}

.constellation-tools h4{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--text);
}

.constellation-tools button{
  align-self:center;
  min-width:180px;
}

.constellation-tools-note{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}
.active-player-info strong{color:var(--text)}

/* Team Selection */
.team-selection h3{margin:0 0 12px 0;font-size:16px;font-weight:600}
.team-player-checkboxes{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
}
.team-actions{display:flex;gap:6px}
.team-actions button.small{padding:6px 10px;font-size:12px}

.bulk-actions{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.filters input[type="text"]{min-width:240px;flex:1;background:#0c1020;border:1px solid #283152;border-radius:10px;padding:10px;color:var(--text)}
.filter-group{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pill{padding:6px 10px;border-radius:999px;border:1px solid #2b3356;background:#141a2f;color:var(--muted);cursor:pointer}
.pill.active{border-color:var(--primary);color:var(--text)}
.content{background:var(--panel);border:1px solid #232a45;border-radius:12px;padding:12px}
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--char-card-size),1fr));gap:12px}
.char-card{cursor:pointer;border-radius:12px;overflow:hidden;border:1px solid #273055;background:#0e1427;transition:transform .12s ease, box-shadow .12s ease, filter .2s ease, opacity .2s ease}
.char-card .img-wrap{position:relative;aspect-ratio:1/1;background:#0b0f1e;display:flex;align-items:center;justify-content:center}

/* Constellation badges */
.constellation-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.constellation-badge:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Constellation color coding */
.constellation-badge.c0 {
  background: #6b7280;
  color: white;
}

.constellation-badge.c1,
.constellation-badge.c2,
.constellation-badge.c3,
.constellation-badge.c4,
.constellation-badge.c5 {
  background: linear-gradient(135deg, #6aa6ff, #a855f7);
  color: white;
}

.constellation-badge.c6 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1f2937;
  font-weight: 700;
  border-color: rgba(245, 158, 11, 0.3);
}

.constellation-badge.c7 {
  background: linear-gradient(135deg, #ec4899, #be185d);
  color: white;
  font-weight: 700;
  border-color: rgba(236, 72, 153, 0.4);
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
}

.constellation-badge.c8 {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  font-weight: 700;
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
  animation: pulse-glow 2s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
  from {
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
  }
  to {
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.6);
  }
}

.constellation-badge.unset {
  background: transparent;
  border: 2px dotted #6b7280;
  color: #9ca3af;
  font-weight: 500;
}

.constellation-badge.unset:hover {
  border-color: #9ca3af;
  color: #d1d5db;
}
.char-card img{width:100%;height:100%;object-fit:contain;display:block;transition:filter .2s ease;-webkit-user-drag:none;user-select:none;pointer-events:none}
.char-card .caption{padding:8px 8px 10px;text-align:center;font-size:13px}

.element-icon{
  position:absolute;
  top:4px;
  right:4px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(0,0,0,0.6);
  padding:2px;
  z-index:1;
}

.element-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.team-card .element-icon{
  position:absolute;
  top:6px;
  right:6px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(0,0,0,0.7);
  padding:3px;
  z-index:1;
}
.char-card.owned{box-shadow:0 0 0 1px rgba(106,166,255,.25) inset, 0 6px 18px rgba(0,0,0,.25)}
.char-card.unowned{filter:grayscale(.6) brightness(.8) saturate(.8)}
.char-card.unowned img{filter:grayscale(1) brightness(.75) saturate(.6)}
.rarity-5 .img-wrap, .img-wrap.rarity-5{background:linear-gradient(135deg,#d6a54f,#8a5b12)}
.rarity-4 .img-wrap, .img-wrap.rarity-4{background:linear-gradient(135deg,#8b5cf6,#5b21b6)}
.char-card:hover{transform:translateY(-2px)}
.team-page{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - 120px);
  padding:40px 20px;
  gap:32px;
  width:100%;
}

.team-generation-card{
  background:var(--panel);
  border:1px solid #232a45;
  border-radius:12px;
  padding:32px;
  width:100%;
  max-width:700px;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.team-generation-card h2{
  margin:0 0 24px 0;
  font-size:24px;
  font-weight:600;
}

.config-section{
  margin-bottom:24px;
  text-align:left;
}

.config-section h3{
  margin:0 0 12px 0;
  font-size:16px;
  font-weight:600;
  color:var(--text);
  text-align:center;
}

.options-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
  width:100%;
}

/* Advanced Options Styling */
.advanced-options{
  width:100%;
  max-width:500px;
  margin:0 auto;
}

.advanced-options-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  background:linear-gradient(135deg,#1d2647,#10162b);
  border:1px solid #2b3356;
  border-radius:8px;
  cursor:pointer;
  transition:all 0.2s ease;
  font-size:14px;
  font-weight:500;
  color:var(--text);
  user-select:none;
}

.advanced-options-header:hover{
  background:linear-gradient(135deg,#243050,#151a2f);
  border-color:#3a4463;
}

.advanced-options-header:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(106,166,255,0.3);
}

.advanced-options-header .chevron{
  transition:transform 0.3s ease;
  color:var(--muted);
}

.advanced-options-header.expanded .chevron{
  transform:rotate(180deg);
}

.advanced-options-content{
  overflow:hidden;
  max-height:0;
  transition:max-height 0.3s ease, padding 0.3s ease;
  background:rgba(22,27,46,0.5);
  border:1px solid #2b3356;
  border-top:none;
  border-radius:0 0 8px 8px;
}

.advanced-options-content.expanded{
  max-height:300px;
  padding:16px;
}

.filter-section{
  margin-bottom:16px;
}

.filter-section:last-child{
  margin-bottom:0;
}

.filter-label{
  font-size:13px;
  font-weight:600;
  color:var(--text);
  margin-bottom:8px;
  text-align:center;
}

.checkbox-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
}

.element-pills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  align-items:center;
}

/* Reuse existing pill styling for element filters */
.element-pills .pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #2b3356;
  background:#141a2f;
  color:var(--muted);
  cursor:pointer;
  font-size:12px;
  transition:all 0.2s ease;
}

.element-pills .pill:hover{
  border-color:#3a4463;
  background:#1a1f35;
}

.element-pills .pill.active{
  border-color:var(--primary);
  background:rgba(106,166,255,0.15);
  color:var(--text);
}

.element-pills .pill.active:hover{
  background:rgba(106,166,255,0.25);
}

.generation-action{
  margin-top:8px;
  text-align:center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.generation-message {
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(255, 106, 106, 0.1);
  border: 1px solid rgba(255, 106, 106, 0.3);
  color: #ff8a8a;
  font-size: 14px;
  text-align: center;
  max-width: 400px;
  line-height: 1.4;
}

button.large{
  font-size:16px;
  padding:14px 28px;
  font-weight:600;
}

/* Enhanced Options Layout */

.basic-options {
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  max-width:360px;
  margin:0 auto 16px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(43, 51, 86, 0.5);
}

.basic-options label.checkbox{
  display:block;
  padding:10px 16px 10px 44px;
  border-radius:8px;
  width:100%;
  background:rgba(16,22,43,0.4);
  transition:background 0.2s ease;
}

.basic-options label.checkbox:hover{
  background:rgba(28,36,64,0.6);
}

.basic-options label.checkbox::before{
  left:18px;
}

/* Enhanced Advanced Options Header */
.advanced-options-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1d2647, #10162b);
  border: 1px solid #2b3356;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  user-select: none;
  position: relative;
}

.advanced-options-header:hover {
  border-color: #3a4463;
  background: linear-gradient(135deg, #1f2a4d, #121829);
}

.advanced-options-header[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.filter-icon {
  color: var(--muted);
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.advanced-options-header:hover .filter-icon {
  color: var(--primary);
}

.chevron {
  color: var(--muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: auto;
}

/* Filter Status Badge */
.filter-badge {
  position: absolute;
  top: -6px;
  right: 32px;
  background: var(--primary);
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(106, 166, 255, 0.3);
}

/* Advanced Options Content */
.advanced-options-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  margin-top: 12px;
}

.advanced-options-content[aria-hidden="false"] {
  max-height: 400px;
}

/* Enhanced Filter Sections */
.filter-section {
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(14, 20, 39, 0.3);
  border-radius: 6px;
  border: 1px solid rgba(43, 51, 86, 0.3);
}

.filter-section:last-child {
  margin-bottom: 0;
}

.filter-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.filter-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Filter Action Buttons */
.element-quick-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.filter-action, .filter-reset {
  background: none;
  border: 1px solid #3d4875;
  border-radius: 4px;
  padding: 4px 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.filter-action:hover, .filter-reset:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(106, 166, 255, 0.1);
}

/* Enhanced Element Pills */
.element-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.element-pills .pill {
  padding: 8px 12px;
  border-radius: 20px;
  border: 1.5px solid #2b3356;
  background: #141a2f;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
  min-width: 44px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.element-icon-small {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.element-pills .pill:hover {
  border-color: #3a4463;
  background: #1a1f35;
  transform: translateY(-1px);
}

.element-pills .pill.active {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(106, 166, 255, 0.2), rgba(106, 166, 255, 0.1));
  color: var(--text);
  box-shadow: 0 2px 8px rgba(106, 166, 255, 0.15);
}

.element-pills .pill.active:hover {
  background: linear-gradient(135deg, rgba(106, 166, 255, 0.3), rgba(106, 166, 255, 0.2));
}

/* Enhanced Checkbox Group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.team-results{
  width:100%;
  display:flex;
  justify-content:center;
}

.team-card-container{
  background:var(--panel);
  border:1px solid #232a45;
  border-radius:12px;
  padding:32px;
  text-align:center;
  width:100%;
  max-width:700px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.team-card-container h3{
  margin:0 0 20px 0;
  font-size:20px;
  font-weight:600;
}

.location-result{
  margin-top:24px;
  display:none;
  flex-direction:column;
  gap:10px;
  align-items:center;
}

.location-result.visible{display:flex}

.location-result-title{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  color:var(--muted);
}

.location-card{
  width:min(520px, 100%);
  border-radius:16px;
  overflow:hidden;
  border:1px solid #2a3357;
  background:linear-gradient(135deg,#131a33,#0b1022);
  box-shadow:0 10px 24px rgba(0,0,0,0.3);
  aspect-ratio:16/9;
}

.location-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.location-result-name{
  font-size:18px;
  font-weight:600;
  color:var(--text);
  letter-spacing:.04em;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(4, calc(var(--char-card-size) * 1.25));
  gap:16px;
  justify-content:center;
  align-items:center;
  opacity:1;
  transition:opacity .15s ease;
  visibility:visible;
  will-change:opacity;
  position:relative;
  z-index:0;
}

.team-grid::before{
  content:"";
  position:absolute;
  inset:-24px;
  border-radius:32px;
  background:radial-gradient(circle at center,rgba(255,255,255,.16) 0%,rgba(106,166,255,.18) 36%,transparent 72%);
  opacity:0;
  pointer-events:none;
  transform:scale(.9);
  transition:none;
  z-index:-1;
}

.team-grid.gacha-landing::before{
  animation:gachaGridPulse .8s ease-out forwards;
}

.grid-layer{display:contents}

.team-grid.placeholder{
  min-height:200px;
  background:linear-gradient(135deg,#1d2647,#10162b);
  border-radius:12px;
  border:1px solid #2b3356;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.team-grid.is-hiding{
  opacity:0;
  pointer-events:none;
}

.team-grid.is-hidden{
  visibility:hidden;
}

.team-grid.placeholder::before{
  content:"Click 'Generate Teams' to create your team";
  color:var(--muted);
  font-size:16px;
  font-weight:500;
}

.team-card{
  border-radius:14px;
  border:1px solid #273055;
  overflow:hidden;
  background:#0e1427;
  position:relative;
  backface-visibility:hidden;
  contain:paint;
  will-change:transform, opacity;
}

.team-card .img-wrap{aspect-ratio:1/1;position:relative}
.team-card img{width:100%;height:100%;object-fit:contain;display:block}
.team-card .meta{padding:10px;text-align:center}
.team-card .owner{font-size:12px;color:var(--muted)}
.team-card.animate{
  opacity:0;
  transform:translateY(14px) scale(0.98);
  will-change:transform, opacity;
  animation:cardReveal3D 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

/* Hidden pre-state for new cards while overlay fades out */
.team-card.pre{
  opacity:0;
  transform:translateY(14px) scale(0.98);
}

/* Snapshot overlay for fade-out */
.fade-overlay{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(4, calc(var(--char-card-size) * 1.25));
  gap:16px;
  justify-content:center;
  align-content:start;
  padding:0; /* overlay mirrors inner content only */
  background:transparent;
  z-index:1;
  opacity:1;
  transition:opacity .2s ease;
  pointer-events:none;
}
.fade-overlay.hidden{opacity:0}

@keyframes gachaGridPulse{
  0%{opacity:0;transform:scale(.9)}
  40%{opacity:.42;transform:scale(1)}
  100%{opacity:0;transform:scale(1.06)}
}

@keyframes cardReveal3D{
  0%{
    opacity:0;
    transform:translateY(14px) scale(0.98);
  }
  60%{
    opacity:1;
    transform:translateY(-2px) scale(1.01);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    will-change:auto;
  }
}

/* Gacha reveal overlay */
body.gacha-open{overflow:hidden}

.gacha-overlay{
  --gacha-final:#f6d860;
  --gacha-tail:#facc15;
  --gacha-intro-one:#f7d685;
  --gacha-intro-two:#b286ff;
  --gacha-text:#f8fbff;
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  z-index:900;
  font-family:inherit;
  visibility:hidden;
}

.gacha-overlay.active{
  opacity:1;
  pointer-events:auto;
  visibility:visible;
}

.gacha-overlay.rarity-4{
  --gacha-final:#a87dff;
  --gacha-tail:#8b5cf6;
}

.gacha-overlay.rarity-5{
  --gacha-final:#f6d860;
  --gacha-tail:#facc15;
}

.gacha-backdrop{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.18),rgba(22,31,66,.88) 45%,rgba(7,10,24,.96) 100%);
  overflow:hidden;
}

.gacha-backdrop::before,
.gacha-backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:repeat;
  pointer-events:none;
}

.gacha-backdrop::before{
  opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px);
  background-size:120px 120px;
  animation:gachaStarsSlow 14s linear infinite;
}

.gacha-backdrop::after{
  opacity:.22;
  background-image:radial-gradient(rgba(255,255,255,.25) .8px,transparent .8px);
  background-size:70px 70px;
  animation:gachaStarsFast 9s linear infinite reverse;
}

.gacha-content{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  padding:32px clamp(12px,4vw,36px);
  text-align:center;
  color:var(--gacha-text);
  width:min(90vw,680px);
}

.gacha-player-name{
  font-size:1.1rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.gacha-starfield{
  position:relative;
  width:min(70vw,420px);
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  filter:drop-shadow(0 28px 45px rgba(0,0,0,.45));
}

.gacha-streak,
.gacha-star-glow,
.gacha-star-core,
.gacha-rings{
  position:absolute;
  opacity:0;
  transform:scale(.65);
}

.gacha-streak{
  width:140%;
  height:40%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 12%,var(--gacha-intro-two) 46%,var(--gacha-final) 78%,transparent 100%);
  filter:blur(6px);
}

.gacha-star-glow{
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.86) 0%,rgba(255,255,255,.05) 48%,transparent 70%);
  filter:blur(2px);
}

.gacha-star-core{
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle,var(--gacha-intro-one) 0%,var(--gacha-intro-two) 55%,transparent 68%);
  box-shadow:0 0 65px rgba(255,215,141,.58),0 0 120px rgba(165,110,255,.55);
}

.gacha-star-core::before,
.gacha-star-core::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle,rgba(255,255,255,.8) 0%,transparent 70%);
}

.gacha-star-core::before{transform:rotate(45deg);mix-blend-mode:screen}
.gacha-star-core::after{filter:blur(10px);opacity:.65}

.gacha-rings{
  width:320px;
  height:320px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.32);
  box-shadow:0 0 35px rgba(255,255,255,.25);
}

.gacha-card{
  opacity:0;
  transform:translateY(28px) scale(.96);
  pointer-events:none;
}

.gacha-card.show{
  animation:gachaCardReveal .6s cubic-bezier(.22,.75,.2,1) forwards;
  pointer-events:auto;
}

.gacha-card-frame{
  position:relative;
  padding:26px clamp(14px,4vw,32px) 28px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(21,27,44,.95),rgba(12,16,32,.96));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 22px 55px rgba(0,0,0,.55),0 0 45px rgba(147,197,253,.16);
  overflow:hidden;
}

.gacha-card-frame::before{
  content:"";
  position:absolute;
  inset:-20% -40% 50% -40%;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.4),transparent 70%);
  opacity:.35;
  filter:blur(10px);
}

.gacha-card[data-rarity="5"] .gacha-card-frame{
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 65px rgba(252,211,77,.35);
}

.gacha-card[data-rarity="4"] .gacha-card-frame{
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 60px rgba(168,118,255,.25);
}

.gacha-card-rarity{
  position:absolute;
  top:16px;
  left:20px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.28);
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
  z-index:2;
}

.gacha-card[data-rarity="5"] .gacha-card-rarity{
  background:rgba(46,34,8,.65);
  border-color:rgba(252,211,77,.55);
  color:#fde68a;
  box-shadow:0 0 18px rgba(252,211,77,.3);
}

.gacha-card[data-rarity="4"] .gacha-card-rarity{
  background:rgba(38,22,60,.65);
  border-color:rgba(192,132,252,.55);
  color:#d8b4fe;
  box-shadow:0 0 18px rgba(168,118,255,.28);
}

.gacha-card[data-rarity="5"] .gacha-card-frame::before{
  background:radial-gradient(circle at 50% 0%,rgba(252,211,77,.55),transparent 70%);
}

.gacha-card[data-rarity="4"] .gacha-card-frame::before{
  background:radial-gradient(circle at 50% 0%,rgba(168,118,255,.55),transparent 70%);
}

.gacha-card img{
  position:relative;
  width:min(38vw,220px);
  height:min(38vw,220px);
  object-fit:contain;
  display:block;
  margin:12px auto 18px auto;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));
  z-index:1;
}

.gacha-card-info{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}

.gacha-character-name{font-size:1.45rem;font-weight:600;letter-spacing:.05em}

.gacha-character-owner{font-size:.95rem;color:rgba(255,255,255,.68);letter-spacing:.12em;text-transform:uppercase}

.gacha-tip{
  font-size:.82rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .35s ease, transform .35s ease;
}

.gacha-tip.visible{opacity:1;transform:translateY(0)}

.gacha-skip{
  position:absolute;
  top:24px;
  right:28px;
  padding:9px 22px;
  border-radius:999px;
  background:rgba(10,15,30,.7);
  border:1px solid rgba(255,255,255,.22);
  color:var(--gacha-text);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
  z-index:2;
}

.gacha-skip:hover{background:rgba(16,24,46,.82);border-color:rgba(255,255,255,.35)}

.gacha-overlay.active .gacha-streak,
.gacha-overlay.active .gacha-star-glow,
.gacha-overlay.active .gacha-star-core,
.gacha-overlay.active .gacha-rings{animation:none}

.gacha-starfield.active .gacha-streak{animation:gachaStreakSweep 2s ease-out forwards}
.gacha-starfield.active .gacha-star-glow{animation:gachaGlowPulse 2.2s ease forwards}
.gacha-starfield.active .gacha-star-core{animation:gachaStarCore 2.1s ease forwards}
.gacha-starfield.active .gacha-rings{animation:gachaRings 2.4s ease forwards}

@keyframes gachaStarsSlow{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-40px,-20px,0)}}
@keyframes gachaStarsFast{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(35px,25px,0)}}

@keyframes gachaStreakSweep{
  0%{opacity:0;transform:translateX(-140%) rotate(-12deg) scale(.85)}
  12%{opacity:1}
  52%{transform:translateX(6%) rotate(-6deg) scale(1)}
  100%{opacity:0;transform:translateX(14%) rotate(-4deg) scale(1.05)}
}

@keyframes gachaGlowPulse{
  0%{opacity:0;transform:scale(.55)}
  40%{opacity:.95;transform:scale(1)}
  100%{opacity:.45;transform:scale(1.06)}
}

@keyframes gachaStarCore{
  0%{
    opacity:0;
    transform:scale(.55);
    background:radial-gradient(circle,var(--gacha-intro-one) 0%,var(--gacha-intro-two) 55%,transparent 70%);
  }
  45%{
    opacity:1;
    transform:scale(1.05);
  }
  100%{
    opacity:1;
    transform:scale(1);
    background:radial-gradient(circle,var(--gacha-final) 0%,var(--gacha-final) 50%,transparent 70%);
    box-shadow:0 0 85px rgba(255,215,141,.7),0 0 120px rgba(165,110,255,.4);
  }
}

@keyframes gachaRings{
  0%{opacity:0;transform:scale(.8)}
  35%{opacity:.88}
  100%{opacity:0;transform:scale(1.18)}
}

@keyframes gachaCardReveal{
  0%{opacity:0;transform:translateY(32px) scale(.92)}
  60%{opacity:1;transform:translateY(-6px) scale(1.03)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
footer{padding:12px 16px;color:var(--muted);border-top:1px solid #232a45}

/* Prevent dragging on team images as well */
.team-card img{-webkit-user-drag:none;user-select:none;pointer-events:none}

@media (max-width: 640px) {
  .gacha-content{gap:18px;padding:26px 18px;width:100%}
  .gacha-player-name{font-size:.95rem;letter-spacing:.12em}
  .gacha-starfield{width:75vw}
  .gacha-card-frame{padding:22px 18px 24px}
  .gacha-card img{width:min(65vw,200px);height:min(65vw,200px)}
  .gacha-tip{font-size:.72rem;letter-spacing:.18em}
  .gacha-skip{top:18px;right:18px;padding:8px 18px}
}

/* Constellation responsive styles */
@media (max-width: 768px) {
  .constellation-badge {
    width: 18px;
    height: 18px;
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .constellation-badge {
    width: 16px;
    height: 16px;
    font-size: 8px;
    bottom: 3px;
    right: 3px;
  }
}

@media (max-width: 900px){
  main{grid-template-columns:1fr}
}
.players-select{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  max-height:120px;
  overflow-y:auto;
  padding:8px;
  background:#0e1427;
  border:1px solid #273055;
  border-radius:8px;
}
.player-chip{
  background:#0e1427;
  border:1px solid #273055;
  border-radius:999px;
  padding:8px 12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition:all 0.2s ease;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}

.player-chip:hover{
  border-color:#3a4463;
  background:#1a1f35;
}

.player-chip.selected{
  background:linear-gradient(135deg,#3b82f6,#6366f1);
  border-color:#6aa6ff;
  color:white;
}

.player-chip .name{
  font-weight:600;
  pointer-events:none;
}

.player-chip input{
  display:none;
}

/* Modal and Dialog Styles */
.modal-overlay{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.7);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
  opacity:0;
  transition:opacity .2s ease;
}
.modal-overlay.show{
  display:flex;
  opacity:1;
}
.modal{
  background:var(--panel);
  border:1px solid #232a45;
  border-radius:12px;
  padding:24px;
  min-width:400px;
  max-width:90vw;
  transform:scale(.95);
  transition:transform .2s ease;
}
.modal-overlay.show .modal{transform:scale(1)}
.modal h3{margin:0 0 16px 0;font-size:18px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}

/* Constellation Modal Styles */
.constellation-modal {
  text-align: center;
  min-width: 350px;
}

.constellation-modal .character-info {
  margin-bottom: 20px;
}

.constellation-modal .character-name {
  font-size: 20px;
  font-weight: 600;
  margin-top: 8px;
  color: var(--text);
}

.constellation-modal .character-portrait {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: var(--panel);
  border: 2px solid #3d4875;
  overflow: hidden;
}

.constellation-modal .character-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.constellation-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
  padding: 20px;
  background: rgba(15, 19, 32, 0.6);
  border-radius: 12px;
  border: 1px solid #232a45;
}

.constellation-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.constellation-row.standard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 12px;
}

.constellation-row.ascension {
  display: grid;
  grid-template-columns: repeat(2, minmax(64px, 1fr));
  gap: 12px;
  justify-content: center;
}

.constellation-row.clear-row {
  justify-content: center;
}

.constellation-row.clear-row .constellation-button {
  min-width: 120px;
}

.constellation-button.clear {
  font-weight: 500;
}

.constellation-button {
  min-width: 64px;
  min-height: 54px;
  border: 2px solid #3d4875;
  border-radius: 12px;
  background: #1a2038;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px 12px;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.constellation-button:hover {
  border-color: var(--primary);
  background: #242c4a;
  transform: scale(1.05);
}

.constellation-button.selected {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary), #a855f7);
  color: white;
  box-shadow: 0 4px 12px rgba(106, 166, 255, 0.3);
}

.constellation-button.c6.selected {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #f59e0b;
  color: #1f2937;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.constellation-button.c7.selected {
  background: linear-gradient(135deg, #ec4899, #be185d);
  border-color: #ec4899;
  color: white;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
}

.constellation-button.c8.selected {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: #8b5cf6;
  color: white;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.6);
}

.constellation-button.disabled,
.constellation-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
  border-color: #2d3252;
  background: #131a30;
  color: rgba(170, 177, 198, 0.5);
  box-shadow: none;
}

.constellation-button.disabled:hover,
.constellation-button[aria-disabled="true"]:hover {
  transform: none;
  border-color: #2d3252;
}

.constellation-quick-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.constellation-quick-actions button {
  background: #2a3357;
  color: var(--text);
  border: 1px solid #3d4875;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 8px;
}

.constellation-quick-actions button:hover {
  background: #343c6b;
  border-color: #4a5386;
}
.constellation-quick-actions button.disabled,
.constellation-quick-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  background: rgba(42, 51, 87, 0.6);
  border-color: #2c3454;
  color: rgba(230, 232, 239, 0.5);
}

.constellation-quick-actions button.disabled:hover,
.constellation-quick-actions button:disabled:hover {
  background: rgba(42, 51, 87, 0.6);
  border-color: #2c3454;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.icon-button {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.icon-button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.bulk-constellation-modal {
  max-width: 760px;
  width: 90vw;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bulk-constellation-summary {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.bulk-constellation-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.bulk-constellation-search {
  flex: 1 1 220px;
  min-width: 200px;
  max-width: 260px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #2f385b;
  background: #0c1020;
  color: var(--text);
  font-size: 14px;
}

.bulk-constellation-search::placeholder {
  color: rgba(170, 177, 198, 0.6);
}

.bulk-constellation-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(106, 166, 255, 0.15);
}

.bulk-constellation-rarity {
  display: flex;
  gap: 8px;
}

.rarity-toggle {
  border: 1px solid #323b61;
  background: rgba(20, 26, 47, 0.8);
  color: var(--muted);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rarity-toggle.active {
  background: rgba(106, 166, 255, 0.15);
  border-color: var(--primary);
  color: var(--text);
}

.rarity-toggle:hover {
  border-color: var(--primary);
  color: var(--text);
}

.bulk-constellation-list {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 6px;
  margin-bottom: 16px;
}

.bulk-constellation-row {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(15, 19, 32, 0.6);
  border-radius: 10px;
  border: 1px solid #272f4a;
}

.bulk-constellation-row.changed {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(106, 166, 255, 0.35);
}

.bulk-constellation-character {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bulk-constellation-character img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #394063;
}

.bulk-constellation-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bulk-constellation-meta .name {
  font-weight: 600;
  color: var(--text);
}

.bulk-constellation-meta .detail {
  font-size: 12px;
  color: var(--muted);
}

.bulk-constellation-levels {
  display: grid;
  grid-template-columns: repeat(9, minmax(48px, 1fr));
  gap: 8px;
}

.bulk-constellation-choice,
.constellation-choice {
  border: 1px solid #323b61;
  background: rgba(20, 26, 47, 0.85);
  color: var(--muted);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
}

.constellation-choice:hover {
  border-color: var(--primary);
  color: var(--text);
  transform: translateY(-1px);
}

.constellation-choice.selected {
  background: linear-gradient(135deg, var(--primary), #a855f7);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 6px 14px rgba(106, 166, 255, 0.25);
}

.constellation-choice.disabled {
  cursor: not-allowed;
  opacity: 0.35;
  border-color: #262d4a;
  background: #12182c;
  color: rgba(170, 177, 198, 0.45);
  transform: none;
}

.constellation-choice.disabled:hover {
  border-color: #262d4a;
  transform: none;
}

.bulk-constellation-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  background: rgba(15, 19, 32, 0.6);
  border: 1px dashed #2f385b;
  border-radius: 10px;
}
.input-group{margin-bottom:16px}
.input-group label{display:block;margin-bottom:6px;font-weight:500}
.input-group input{
  width:100%;
  background:#0c1020;
  border:1px solid #283152;
  border-radius:8px;
  padding:10px;
  color:var(--text);
  font-size:14px;
}
.input-group input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(106,166,255,.2);
}

/* File Upload Styling */
.file-drop-zone{
  border:2px dashed #3d4875;
  border-radius:8px;
  padding:20px;
  text-align:center;
  color:var(--muted);
  cursor:pointer;
  transition:all .2s ease;
}
.file-drop-zone:hover, .file-drop-zone.drag-over{
  border-color:var(--primary);
  background:rgba(106,166,255,.05);
  color:var(--text);
}
.file-drop-zone.drag-over{transform:scale(1.02)}