.ygo-page { display:grid; gap:20px; }
.ygo-hero { padding:28px 26px; border-radius:var(--radius-md); border:1px solid var(--border); background:linear-gradient(135deg, rgba(99,102,241,0.18), rgba(15,23,42,0.95)), radial-gradient(circle at top, rgba(236,72,153,0.2), transparent 45%); }
.gambling-breadcrumb { margin:0 0 12px; font-size:0.95rem; }
.gambling-breadcrumb a { color:#ddd6fe; text-decoration:none; font-weight:700; }
.gambling-breadcrumb a:hover { text-decoration:underline; }
.ygo-wallet, .stat-strip { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; }
.tab-btn { border:1px solid var(--border); background:rgba(255,255,255,0.03); color:var(--text); padding:10px 16px; border-radius:999px; cursor:pointer; font-weight:700; }
.tab-btn.active { border-color:#a78bfa; background:rgba(167,139,250,0.18); }
.ygo-panel { display:none; }
.ygo-panel.active { display:block; }
.section-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.pack-grid, .collection-grid, .catalog-grid, .mission-grid, .achievement-grid { display:grid; gap:14px; }
.pack-grid { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.collection-grid, .catalog-grid { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.mission-grid, .achievement-grid { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); margin-top:14px; }
.pack-card, .ygo-card, .mission-card, .achievement-card { border:1px solid var(--border); border-radius:18px; padding:16px; background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(2,6,23,0.9)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); }
.pack-cover, .card-art { width:100%; border-radius:14px; background:rgba(15,23,42,0.8); border:1px solid rgba(255,255,255,0.08); object-fit:cover; }
.pack-cover { height:220px; }
.card-art { height:280px; }
.pack-odds, .detail-list { display:grid; gap:6px; margin:12px 0; }
.odds-row, .detail-row { display:flex; justify-content:space-between; gap:10px; font-size:0.9rem; color:var(--muted); }
.rarity-pill, .mini-pill { display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:6px 10px; background:rgba(255,255,255,0.06); font-size:0.82rem; font-weight:700; }
.action-row, .filter-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.price-line { font-size:1.15rem; font-weight:800; margin:12px 0 8px; }
.foil-text { color:#e2e8f0; font-size:0.9rem; line-height:1.45; }
.open-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.82); display:none; align-items:center; justify-content:center; padding:20px; z-index:2100; }
.open-modal-overlay.open { display:flex; }
.open-modal { width:min(1080px, 100%); max-height:90vh; overflow:auto; border-radius:20px; background:#020617; border:1px solid var(--border); padding:20px; }
.open-modal-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:16px; }
.eyebrow { text-transform:uppercase; letter-spacing:0.12em; color:#c4b5fd; font-size:0.74rem; margin:0 0 6px; }
.open-results-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.result-card { position:relative; overflow:hidden; border-radius:18px; padding:12px; border:1px solid rgba(255,255,255,0.09); background:linear-gradient(180deg, rgba(15,23,42,0.96), rgba(30,41,59,0.9)); }
.result-card::after { content:''; position:absolute; inset:0; pointer-events:none; background:var(--foil-overlay, none); opacity:0.5; }
.result-card.rare { --foil-overlay: linear-gradient(120deg, rgba(255,255,255,0.08), rgba(226,232,240,0.35), rgba(255,255,255,0.08)); }
.result-card.super { --foil-overlay: radial-gradient(circle at top, rgba(96,165,250,0.25), transparent 55%); }
.result-card.ultra { --foil-overlay: linear-gradient(135deg, rgba(251,191,36,0.3), transparent 40%), radial-gradient(circle at center, rgba(251,191,36,0.18), transparent 58%); }
.result-card.ultimate { --foil-overlay: repeating-linear-gradient(135deg, rgba(251,191,36,0.22), rgba(251,191,36,0.22) 4px, rgba(255,255,255,0.03) 4px, rgba(255,255,255,0.03) 8px); }
.result-card.secret { --foil-overlay: repeating-linear-gradient(120deg, rgba(196,181,253,0.25), rgba(196,181,253,0.25) 2px, transparent 2px, transparent 10px); }
.result-card.ghost { --foil-overlay: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(226,232,240,0.08)); filter:saturate(0.25) brightness(1.15); }
.bonus-banner { border:1px solid rgba(74,222,128,0.45); background:rgba(22,163,74,0.12); color:#dcfce7; border-radius:14px; padding:12px 14px; margin-bottom:14px; }
.hidden { display:none !important; }
.progress { height:8px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; margin-top:10px; }
.progress > span { display:block; height:100%; background:linear-gradient(90deg, #8b5cf6, #ec4899); }
@media (max-width: 720px) { .open-modal-head, .section-header { flex-direction:column; } }
