:root { color-scheme: dark; --bg: #0c0d16; --panel: #171928; --panel-2: #20233a; --ink: #f4f2ff; --muted: #9a9ab8; --accent: #b9ff65; --purple: #9d7cff; --gold: #ffd66b; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 10% 0%, #292045 0, transparent 36%), var(--bg); color: var(--ink); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
button { border: 0; color: inherit; font: inherit; cursor: pointer; }
.app-shell { width: min(100%, 720px); margin: 0 auto; padding: 22px 18px 48px; }
.topbar, .stats-row, .hero-panel, .tabs, .chest, .equipment-slot { background: rgba(23, 25, 40, .88); border: 1px solid #2d3050; border-radius: 20px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; }
h1, h2, p { margin: 0; } h1 { font-size: 27px; letter-spacing: -.04em; } h2 { font-size: 21px; line-height: 1.15; margin: 4px 0 8px; }
.eyebrow { color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.wallet { display: flex; gap: 7px; align-items: center; color: var(--gold); font-size: 19px; }
.hero-panel { margin-top: 13px; padding: 20px; display: flex; gap: 14px; align-items: end; justify-content: space-between; background: linear-gradient(135deg, rgba(157,124,255,.28), rgba(23,25,40,.9) 60%); }
.hero-panel p:not(.eyebrow) { color: var(--muted); font-size: 13px; }
.primary-button { padding: 11px 16px; border-radius: 12px; background: var(--accent); color: #111510; font-weight: 800; white-space: nowrap; } .primary-button:disabled { opacity: .4; cursor: wait; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 13px; padding: 14px 8px; text-align: center; } .stats-row div { display: grid; gap: 3px; } .stats-row span { color: var(--muted); font-size: 11px; } .stats-row strong { font-size: 18px; }
.tabs { display: flex; gap: 5px; padding: 5px; margin-top: 18px; } .tab { flex: 1; background: transparent; color: var(--muted); border-radius: 14px; padding: 10px; } .tab.active { background: var(--panel-2); color: var(--ink); }
.tab-panel { padding-top: 14px; } .hidden { display: none !important; }
.chest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .chest { padding: 18px; min-height: 165px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; } .chest::after { content: '✦'; position: absolute; right: 18px; top: 8px; color: var(--gold); font-size: 58px; opacity: .22; }
.chest h3 { margin: 0; font-size: 17px; } .chest p { color: var(--muted); font-size: 12px; } .chest button { align-self: start; margin-top: 14px; padding: 9px 13px; background: var(--purple); border-radius: 10px; font-weight: 700; } .chest button:disabled { opacity: .35; cursor: not-allowed; }
.probability-note { color: var(--muted); font-size: 11px; padding: 12px 3px; }
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .card { position: relative; padding: 12px; min-height: 142px; border: 1px solid #363959; border-radius: 16px; background: linear-gradient(160deg, #242746, #151726); } .card.common { border-color: #68718a; } .card.rare { border-color: #5aa7ff; } .card.epic { border-color: #c37cff; } .card.legendary { border-color: var(--gold); background: linear-gradient(160deg, #45341e, #201b1b); } .card .emoji { font-size: 42px; } .card h3 { margin: 5px 0 2px; font-size: 14px; } .card small { color: var(--muted); } .quantity { position: absolute; right: 10px; top: 10px; background: #0b0d17; padding: 3px 7px; border-radius: 9px; font-size: 11px; }
.card.hell-card { background: linear-gradient(160deg, #2d1838, #100f19); box-shadow: inset 0 0 22px #8f2d5d22; } .mirror-status { margin-top: 7px; color: #ca91e9; font-size: 10px; } .flip-button { margin-top: 8px; padding: 6px 9px; border-radius: 8px; background: #442651; color: #f4dcff; font-size: 11px; }
.equipment-grid { display: grid; gap: 10px; } .equipment-slot { min-height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; } .equipment-slot span { color: var(--muted); } .equipment-slot strong { color: var(--accent); } .equipment-slot button { background: #303451; padding: 8px 11px; border-radius: 9px; font-size: 12px; }
.shop-balance { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; margin-bottom: 10px; border: 1px solid #3a3d5e; border-radius: 14px; color: var(--muted); } .shop-balance strong { color: var(--gold); font-size: 20px; } .shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .product { padding: 17px; border: 1px solid #49405f; border-radius: 17px; background: linear-gradient(145deg, #28223c, #171827); } .product .icon { font-size: 38px; } .product h3 { margin: 6px 0 2px; } .product p { min-height: 38px; color: var(--muted); font-size: 12px; } .product button { margin-top: 12px; width: 100%; padding: 10px; border-radius: 11px; background: var(--gold); color: #211b0d; font-weight: 800; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #f4f2ff; color: #11121d; padding: 11px 16px; border-radius: 12px; transition: .2s; box-shadow: 0 8px 30px #0008; } .toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 430px) { .hero-panel { display: block; } .hero-panel .primary-button { margin-top: 15px; } .chest-grid, .card-grid { grid-template-columns: 1fr 1fr; } }