/* ===================================================================== MTG Commander — CommanderLobby styles Place in wwwroot/css/commander-lobby.css and reference in index.html or _Host.cshtml, OR copy into app.css / site.css ===================================================================== */ /* ── Google Fonts (add to in App.razor / index.html) ─────────── */ /* */ :root { --crimson: #8B0000; --crimson-bright: #C41E3A; --crimson-light: #DC143C; --crimson-glow: #ff2244; --gold: #C9A84C; --gold-light: #E8C96A; --parchment: #F5EDD6; --parchment-dark: #E8D9B5; --ink: #1A0A0A; --ink-mid: #2D1010; --ink-soft: #4A2020; --white: #FDF6E3; --border: #8B0000; --shadow-crimson: rgba(139,0,0,0.4); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Crimson Text', Georgia, serif; background: #121212; color: var(--parchment); min-height: 100vh; overflow-x: hidden; } /* ── HEADER ─────────────────────────────────────────────────────────── */ header { display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 64px; background: linear-gradient(180deg, #0D0404 0%, #1A0808 100%); border-bottom: 2px solid var(--crimson); position: relative; box-shadow: 0 4px 32px rgba(139,0,0,0.3); } header::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .header-left { display: flex; align-items: center; gap: 8px; font-family: 'Crimson Text', serif; font-size: 13px; color: var(--parchment-dark); letter-spacing: 0.05em; } .header-left .username { color: var(--gold-light); font-style: italic; font-size: 16px; } .header-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; } .config-btn { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.15em; color: var(--parchment-dark); background: transparent; border: 1px solid rgba(139,0,0,0.5); padding: 6px 16px; cursor: pointer; transition: all 0.2s; text-transform: uppercase; } .config-btn:hover { border-color: var(--gold); color: var(--gold-light); } .site-title { font-family: 'Cinzel', serif; font-size: 22px; font-weight: 600; background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, #A07830 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gold-static-button, .gold-button { font-weight: bold; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: linear-gradient(135deg, var(--gold-light), var(--gold)); border: none; padding: 8px 20px; cursor: pointer; transition: all 0.25s; clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); } .gold-button:hover { background: linear-gradient(135deg, #fff0b0, var(--gold-light)); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201,168,76,0.4); } .gold-static-button:hover { background: linear-gradient(135deg, #fff0b0, var(--gold-light)); box-shadow: 0 4px 16px rgba(201,168,76,0.4); } /* ── MAIN LAYOUT ─────────────────────────────────────────────────────── */ .main-layout { display: grid; grid-template-columns: 260px 1fr; height: calc(100vh - 64px); padding: 10px; gap: 16px; } .sidebar { display: flex; flex-direction: column; gap: 12px; animation: fadeSlideIn 0.5s ease 0.1s both; margin-top: 58px; } .panel { background: linear-gradient(160deg, #1E0808 0%, #150505 100%); border: 1px solid var(--crimson); position: relative; overflow: hidden; } .panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent); } .panel-header { color: var(--gold); font-family: 'Cinzel', serif; font-size: 14px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 10px 14px 8px; border-bottom: 1px solid rgba(139,0,0,0.4); display: flex; align-items: center; gap: 8px; } .panel-header::before { content: '◆'; font-size: 10px; color: var(--crimson-light); } .panel-header::after { content: '◆'; font-size: 10px; color: var(--crimson-light); margin-left: 6px; } .deck-panel { margin: auto 0; } .commander-art .deck-card-placeholder { width: 100%; height: 100%; min-height: 23rem; display: flex; flex-direction: column; margin: 0; } .commander-art { margin: 12px; min-height: 23rem; height: 100%; background: linear-gradient(180deg, rgba(139,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%), linear-gradient(135deg, #2a1010 0%, #3d1818 40%, #1a0808 100%); border: 1px solid rgba(139,0,0,0.5); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .commander-art::after { content: ''; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(201,168,76,0.05) 0%, transparent 70%); pointer-events: none; } .commander-art .deck-card-placeholder { border-radius: 0; padding: 0; } .commander-label { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; text-align: center; width: 100%; padding: 0 12px; } .commander-random-button { position: absolute; top: 24px; left: 50%; width: fit-content; transform: translateX(-50%); z-index: 3; white-space: nowrap; } .deck-name { padding: 8px 14px 12px; font-family: 'Cinzel', serif; font-size: 11px; color: var(--parchment-dark); text-align: center; font-style: italic; letter-spacing: 0.05em; opacity: 0.6; } /* Game info */ .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(139,0,0,0.2); margin: 12px; } .info-cell { background: rgba(26,8,8,0.8); padding: 10px 12px; text-align: center; } .info-value { font-family: 'Cinzel', serif; font-size: 22px; font-weight: 700; color: var(--crimson-light); line-height: 1; display: block; } .info-label { font-size: 10px; letter-spacing: 0.1em; color: var(--parchment-dark); opacity: 0.5; text-transform: uppercase; display: block; margin-top: 3px; } /* ── MAIN CONTENT ────────────────────────────────────────────────────── */ .main-content { display: flex; flex-direction: column; gap: 12px; min-height: 0; animation: fadeSlideIn 0.5s ease 0.2s both; } .search-bar-wrap { background: linear-gradient(160deg, #1E0808 0%, #150505 100%); border: 1px solid var(--crimson); padding: 10px 16px; display: flex; align-items: center; gap: 12px; } .search-icon { color: var(--crimson-light); font-size: 14px; opacity: 0.7; } .search-input { flex: 1; background: transparent; border: none; outline: none; font-family: 'Crimson Text', serif; font-size: 16px; color: var(--parchment); letter-spacing: 0.05em; } .search-input::placeholder { color: var(--parchment); opacity: 0.3; font-style: italic; } .search-divider { width: 1px; height: 20px; background: rgba(139,0,0,0.4); } .filter-chips { font-size: 12px; display: flex; gap: 6px; } .chip { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border: 1px solid rgba(139,0,0,0.4); color: var(--parchment-dark); opacity: 0.6; cursor: pointer; transition: all 0.2s; background: transparent; } .chip:hover, .chip.active { border-color: var(--gold); color: var(--gold-light); opacity: 1; } /* ── DECK LIST PANEL ─────────────────────────────────────────────────── */ .deck-list-panel { flex: 1; background: linear-gradient(160deg, #1A0606 0%, #120404 100%); border: 1px solid var(--crimson); overflow: hidden; display: flex; flex-direction: column; min-height: 0; } .deck-list-header { display: flex; align-items: center; justify-content: space-between; padding: 5px 16px; border-bottom: 1px solid rgba(139,0,0,0.4); } .deck-list-title { font-family: 'Cinzel', serif; font-size: 14px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 8px; } .deck-list-title::before { content: '◆'; font-size: 10px; color: var(--crimson-light); } .shared-badge { font-size: 12px; padding: 2px 8px; border: 1px solid rgba(139,0,0,0.4); color: var(--parchment-dark); opacity: 0.5; letter-spacing: 0.1em; font-family: 'Cinzel', serif; } /* Color pips */ .color-pips { display: flex; gap: 3px; margin-top: 5px; } .pip { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); font-size: 7px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: rgba(0,0,0,0.7); } .pip-W { background: #F9FAF4; } .pip-U { background: #0E68AB; color: rgba(255,255,255,0.8); } .pip-B { background: #150B00; color: rgba(255,255,255,0.5); } .pip-R { background: #D3202A; color: rgba(255,255,255,0.8); } .pip-G { background: #00733E; color: rgba(255,255,255,0.8); } /* Guest badge */ .guest-badge { position: absolute; top: 6px; left: 6px; background: rgba(139,0,0,0.8); border: 1px solid rgba(196,30,58,0.5); font-family: 'Cinzel', serif; font-size: 7px; letter-spacing: 0.1em; color: var(--parchment-dark); padding: 2px 5px; text-transform: uppercase; } /* Art placeholder gradients */ .art-1 { background: linear-gradient(135deg, #4a1515 0%, #2a0505 100%); } .art-2 { background: linear-gradient(135deg, #151a4a 0%, #050a2a 100%); } .art-3 { background: linear-gradient(135deg, #1a4a15 0%, #052a05 100%); } .art-4 { background: linear-gradient(135deg, #3a2a10 0%, #1a1005 100%); } .art-5 { background: linear-gradient(135deg, #2a154a 0%, #10052a 100%); } .art-6 { background: linear-gradient(135deg, #4a3015 0%, #2a1505 100%); } .art-7 { background: linear-gradient(135deg, #104a3a 0%, #052a20 100%); } .art-8 { background: linear-gradient(135deg, #4a1530 0%, #2a0515 100%); } /* Animations */ @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } header { animation: fadeSlideIn 0.4s ease; }