/* Themed profile / account / settings chrome — driven by data-ui-skin */ html.profile-skin-mode .browse-chrome, .browse-shell.profile-skin-mode .browse-chrome, .profile-skin-mode .browse-chrome { display: none !important; } .profile-skin { --skin-accent: var(--amber); --skin-panel: rgba(18, 14, 10, 0.88); --skin-line: rgba(255, 255, 255, 0.1); --skin-ink: #f3efe6; --skin-muted: rgba(243, 239, 230, 0.55); position: relative; min-height: 100vh; color: var(--skin-ink); isolation: isolate; } .profile-skin-atmosphere { position: fixed; inset: 0; z-index: 0; background: var(--skin-bg, var(--bg)); pointer-events: none; /* Smooth skin switches when CSS vars update on / shell */ transition: background 0.2s ease; } .profile-skin-scan { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.07; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.35) 2px, rgba(0, 0, 0, 0.35) 3px ); } .profile-skin-frame { position: relative; z-index: 2; margin: 0 auto; max-width: 44rem; padding: 1.5rem 1.25rem 3.5rem; } .profile-skin-frame--narrow { max-width: 32rem; } @media (min-width: 640px) { .profile-skin-frame { padding: 2rem 1.5rem 4rem; } } .profile-skin-top { display: grid; gap: 1rem; align-items: start; } @media (min-width: 720px) { .profile-skin-top { grid-template-columns: auto 1fr auto; align-items: center; } } .profile-skin-back { font-family: var(--font-display), sans-serif; font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--skin-muted); text-decoration: none; transition: color 0.15s ease; } .profile-skin-back:hover { color: var(--skin-accent); } .profile-skin-brand { display: flex; align-items: center; gap: 0.85rem; } .profile-skin-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 3.1rem; height: 3.1rem; padding: 0 0.4rem; border: 1px solid color-mix(in srgb, var(--skin-accent) 55%, transparent); background: color-mix(in srgb, var(--skin-accent) 12%, transparent); color: var(--skin-accent); font-family: var(--font-display), sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; } .profile-skin-kicker { margin: 0; font-family: var(--font-display), sans-serif; font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--skin-muted); } .profile-skin-title { margin: 0.15rem 0 0; font-family: var(--font-display), sans-serif; font-size: clamp(1.35rem, 3vw, 1.85rem); letter-spacing: 0.04em; font-weight: 600; line-height: 1.15; } .profile-skin-user { display: flex; align-items: center; gap: 0.55rem; justify-self: start; } @media (min-width: 720px) { .profile-skin-user { justify-self: end; } } .profile-skin-avatar { width: 0.75rem; height: 0.75rem; border-radius: 999px; box-shadow: 0 0 10px color-mix(in srgb, var(--skin-accent) 50%, transparent); } .profile-skin-user-name { font-size: 0.85rem; color: var(--skin-muted); } .profile-skin-nav { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1.35rem; padding: 0.35rem; border: 1px solid var(--skin-line); background: color-mix(in srgb, var(--skin-panel) 80%, transparent); backdrop-filter: blur(10px); } .profile-skin-nav-link { font-family: var(--font-display), sans-serif; font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--skin-muted); padding: 0.55rem 0.75rem; transition: color 0.15s ease, background 0.15s ease; } .profile-skin-nav-link:hover { color: var(--skin-ink); background: color-mix(in srgb, var(--skin-accent) 12%, transparent); } .profile-skin-nav-link.is-active { color: #0a0a0a; background: var(--skin-accent); } .profile-skin-subtitle { margin: 1rem 0 0; max-width: 36rem; font-size: 0.92rem; line-height: 1.5; color: var(--skin-muted); } .profile-skin-body { margin-top: 1.5rem; } .profile-skin-loading-text { position: relative; z-index: 2; padding: 4rem 1.5rem; text-align: center; color: var(--fg-muted); } /* Remap settings panels inside themed shells */ .profile-skin .settings-panel { border-color: var(--skin-line); background: linear-gradient( 180deg, color-mix(in srgb, var(--skin-panel) 100%, transparent), color-mix(in srgb, #000 55%, var(--skin-panel)) ); backdrop-filter: blur(8px); } .profile-skin .settings-heading { color: var(--skin-ink); } .profile-skin .settings-label { color: var(--skin-muted); } .profile-skin .settings-input { border-color: var(--skin-line); background: color-mix(in srgb, #000 45%, transparent); color: var(--skin-ink); } .profile-skin .settings-input:focus { border-color: var(--skin-accent); } .profile-skin .btn-primary { background: var(--skin-accent); color: #0a0a0a; border-color: var(--skin-accent); } .profile-skin .btn-ghost { border-color: var(--skin-line); color: var(--skin-ink); } .profile-skin .btn-ghost:hover { border-color: var(--skin-accent); color: var(--skin-accent); } .profile-skin .text-muted { color: var(--skin-muted); } .profile-skin .text-amber, .profile-skin .text-accent { color: var(--skin-accent); } /* Profile cards / memory-card select */ .profile-card-list { display: grid; gap: 0.55rem; } .profile-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; border: 1px solid var(--skin-line); background: color-mix(in srgb, var(--skin-panel) 70%, transparent); padding: 0.95rem 1.1rem; color: inherit; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease; } .profile-card:hover { border-color: color-mix(in srgb, var(--skin-accent) 55%, transparent); background: color-mix(in srgb, var(--skin-accent) 8%, transparent); } .profile-card.is-active { border-color: var(--skin-accent); box-shadow: inset 3px 0 0 var(--skin-accent); background: color-mix(in srgb, var(--skin-accent) 12%, transparent); } .profile-card-name { font-size: 1rem; font-weight: 600; } .profile-card-badge { font-family: var(--font-display), sans-serif; font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--skin-accent); } .profile-stat-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .profile-stat { border: 1px solid var(--skin-line); background: color-mix(in srgb, #000 30%, transparent); padding: 0.85rem 0.75rem; } .profile-stat dt { font-family: var(--font-display), sans-serif; font-size: 0.45rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--skin-muted); } .profile-stat dd { margin: 0.35rem 0 0; font-size: 1.05rem; font-weight: 600; } .profile-achieve { border: 1px solid var(--skin-line); padding: 0.7rem 0.85rem; font-size: 0.875rem; } .profile-achieve.is-on { border-color: color-mix(in srgb, var(--skin-accent) 45%, transparent); background: color-mix(in srgb, var(--skin-accent) 8%, transparent); } .profile-achieve.is-off { color: var(--skin-muted); } /* Per-skin accents / frame flavor */ .profile-skin--classic { --skin-accent: #f0a030; --skin-panel: rgba(22, 16, 10, 0.9); } .profile-skin--ps3-xmb { --skin-accent: #7eb8ff; --skin-panel: rgba(8, 18, 32, 0.9); --skin-line: rgba(126, 184, 255, 0.18); } .profile-skin--ps3-xmb .profile-skin-mark { border-radius: 999px; } .profile-skin--psp-xmb { --skin-accent: #c0c8d8; --skin-panel: rgba(16, 18, 24, 0.92); --skin-line: rgba(192, 200, 216, 0.2); } .profile-skin--psp-xmb .profile-skin-frame { max-width: 28rem; } .profile-skin--nes { --skin-accent: #c0392b; --skin-panel: rgba(40, 40, 40, 0.92); --skin-line: rgba(255, 255, 255, 0.16); } .profile-skin--nes .profile-skin-mark, .profile-skin--nes .profile-card, .profile-skin--nes .settings-panel { border-radius: 0; } .profile-skin--snes { --skin-accent: #b08cff; --skin-panel: rgba(28, 18, 40, 0.92); --skin-line: rgba(176, 140, 255, 0.22); } .profile-skin--n64 { --skin-accent: #3ddc84; --skin-panel: rgba(8, 22, 14, 0.92); --skin-line: rgba(61, 220, 132, 0.2); } .profile-skin--gba { --skin-accent: #7aa2ff; --skin-panel: rgba(14, 20, 32, 0.94); --skin-line: rgba(122, 162, 255, 0.22); } .profile-skin--gba .profile-skin-frame { max-width: 30rem; } .profile-skin--gba .profile-skin-mark { border-radius: 0.65rem; } .profile-skin--genesis { --skin-accent: #e74c3c; --skin-panel: rgba(12, 8, 8, 0.94); --skin-line: rgba(231, 76, 60, 0.25); } .profile-skin--arcade { --skin-accent: #ff2a6d; --skin-panel: rgba(16, 6, 20, 0.94); --skin-line: rgba(255, 42, 109, 0.28); } .profile-skin--arcade .profile-skin-title { text-shadow: 0 0 18px color-mix(in srgb, var(--skin-accent) 55%, transparent); } .profile-skin--arcade .profile-skin-nav-link.is-active { color: #fff; }