/* =============================================================================
   Future Gaming — Frontend CSS
   Estilo: moderno, limpio, profesional. Inspirado en dashboards SaaS/EdTech.
   Paleta base: #002b73 (azul principal), grises neutros, fondos blancos/light.
   Fuentes: Inter > Poppins > Roboto > sans-serif.
   CSS custom properties permiten theming por cuerpo vía inline style.
   ============================================================================= */

/* -------------------------------------------------------------------------- */
/* Tokens de diseño                                                            */
/* -------------------------------------------------------------------------- */
:root {
	/* Colores de marca */
	--fg-primary:       #002b73;
	--fg-primary-light: #1a52b3;
	--fg-primary-xlight:#e8effa;
	--fg-accent:        #2563eb;
	--fg-accent-hover:  #1d4ed8;

	/* Semánticos */
	--fg-success:       #16a34a;
	--fg-success-bg:    #f0fdf4;
	--fg-warning:       #d97706;
	--fg-warning-bg:    #fffbeb;
	--fg-danger:        #dc2626;
	--fg-danger-bg:     #fef2f2;

	/* Fondos y superficies */
	--fg-bg:            #f8fafc;
	--fg-surface:       #ffffff;
	--fg-surface-2:     #f1f5f9;
	--fg-border:        #e2e8f0;
	--fg-border-strong: #cbd5e1;

	/* Texto */
	--fg-text:          #1e293b;
	--fg-text-secondary:#475569;
	--fg-text-muted:    #94a3b8;
	--fg-text-invert:   #ffffff;

	/* Tipografía */
	--fg-font:    'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
	--fg-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

	/* Escala de texto */
	--fg-text-xs:   12px;
	--fg-text-sm:   13px;
	--fg-text-base: 14px;
	--fg-text-md:   15px;
	--fg-text-lg:   17px;
	--fg-text-xl:   20px;
	--fg-text-2xl:  24px;
	--fg-text-3xl:  28px;

	/* Espaciado y forma */
	--fg-radius-sm: 6px;
	--fg-radius:    10px;
	--fg-radius-lg: 14px;
	--fg-radius-xl: 20px;
	--fg-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--fg-shadow:    0 4px 12px rgba(0,43,115,.08), 0 1px 3px rgba(0,0,0,.05);
	--fg-shadow-lg: 0 10px 30px rgba(0,43,115,.12), 0 4px 8px rgba(0,0,0,.06);
	--fg-transition: .18s ease;
}

/* Scope: todos los elementos del plugin */
.fg-widget,
.fg-profile,
.fg-leaderboard,
.fg-missions,
.fg-badges,
.fg-reward-shop,
.fg-avatar-builder,
.fg-streak-widget,
.fg-xp-bar-widget,
.fg-currency-balance,
#fg-notifications {
	font-family: var(--fg-font);
	font-size:   var(--fg-text-base);
	color:       var(--fg-text);
	line-height: 1.5;
	box-sizing:  border-box;
}

*, *::before, *::after { box-sizing: inherit; }

/* -------------------------------------------------------------------------- */
/* Utilidades compartidas                                                      */
/* -------------------------------------------------------------------------- */

/* Tarjeta base */
.fg-card {
	background:    var(--fg-surface);
	border:        1px solid var(--fg-border);
	border-radius: var(--fg-radius);
	box-shadow:    var(--fg-shadow);
	overflow:      hidden;
}

/* Título de sección */
.fg-section-title {
	font-size:    var(--fg-text-lg);
	font-weight:  700;
	color:        var(--fg-primary);
	margin:       0 0 .25em;
	line-height:  1.2;
}

/* Etiqueta pequeña */
.fg-label {
	font-size:      var(--fg-text-xs);
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:          var(--fg-text-muted);
}

/* Valor numérico destacado */
.fg-value {
	font-size:   var(--fg-text-2xl);
	font-weight: 800;
	color:       var(--fg-primary);
	line-height: 1;
}

.fg-value--lg { font-size: var(--fg-text-3xl); }
.fg-value--sm { font-size: var(--fg-text-xl); }

/* Badge/chip de estado */
.fg-chip {
	display:       inline-flex;
	align-items:   center;
	gap:           .3em;
	padding:       .2em .7em;
	border-radius: var(--fg-radius-xl);
	font-size:     var(--fg-text-xs);
	font-weight:   600;
	line-height:   1.4;
}

.fg-chip--blue    { background: var(--fg-primary-xlight); color: var(--fg-primary); }
.fg-chip--green   { background: var(--fg-success-bg);     color: var(--fg-success); }
.fg-chip--yellow  { background: var(--fg-warning-bg);     color: var(--fg-warning); }
.fg-chip--red     { background: var(--fg-danger-bg);      color: var(--fg-danger);  }
.fg-chip--neutral { background: var(--fg-surface-2);      color: var(--fg-text-secondary); }

/* Botones */
.fg-btn {
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	gap:           .4em;
	padding:       .55em 1.3em;
	border:        none;
	border-radius: var(--fg-radius-sm);
	font-family:   var(--fg-font);
	font-weight:   600;
	font-size:     var(--fg-text-sm);
	cursor:        pointer;
	transition:    background var(--fg-transition), box-shadow var(--fg-transition), transform var(--fg-transition);
	text-decoration: none;
	white-space:   nowrap;
}

.fg-btn:active { transform: translateY(1px); }

.fg-btn--primary {
	background: var(--fg-accent);
	color:      var(--fg-text-invert);
	box-shadow: 0 2px 6px rgba(37,99,235,.3);
}
.fg-btn--primary:hover { background: var(--fg-accent-hover); box-shadow: 0 4px 10px rgba(37,99,235,.35); }

.fg-btn--secondary {
	background: var(--fg-surface);
	color:      var(--fg-primary);
	border:     1px solid var(--fg-border-strong);
}
.fg-btn--secondary:hover { background: var(--fg-primary-xlight); }

.fg-btn--ghost {
	background: transparent;
	color:      var(--fg-text-secondary);
	border:     1px solid var(--fg-border);
}
.fg-btn--ghost:hover { background: var(--fg-surface-2); }

.fg-btn--disabled,
.fg-btn[disabled] {
	opacity:        .45;
	cursor:         not-allowed;
	pointer-events: none;
	box-shadow:     none;
}

/* Divisor */
.fg-divider {
	border:     none;
	border-top: 1px solid var(--fg-border);
	margin:     .75rem 0;
}

/* -------------------------------------------------------------------------- */
/* Barra de XP                                                                 */
/* -------------------------------------------------------------------------- */

.fg-xp-bar-widget {
	background:    var(--fg-surface);
	border:        1px solid var(--fg-border);
	border-radius: var(--fg-radius);
	padding:       1rem 1.25rem;
	box-shadow:    var(--fg-shadow-sm);
}

.fg-xp-bar-header {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	margin-bottom:   .6rem;
}

.fg-xp-level {
	font-size:   var(--fg-text-md);
	font-weight: 700;
	color:       var(--fg-primary);
}

.fg-xp-amount {
	font-size:   var(--fg-text-sm);
	font-weight: 600;
	color:       var(--fg-text-secondary);
}

/* Barra visual */
.fg-xp-bar {
	position:      relative;
	height:        10px;
	background:    var(--fg-surface-2);
	border-radius: var(--fg-radius-xl);
	overflow:      hidden;
	border:        1px solid var(--fg-border);
}

.fg-xp-bar__fill,
.fg-xp-bar-fill {
	height:        100%;
	background:    linear-gradient(90deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
	border-radius: var(--fg-radius-xl);
	transition:    width .5s cubic-bezier(.4,0,.2,1);
	min-width:     4px;
}

.fg-xp-bar__label {
	position:    absolute;
	inset:       0;
	display:     flex;
	align-items: center;
	justify-content: center;
	font-size:   10px;
	font-weight: 600;
	color:       var(--fg-text-invert);
	text-shadow: 0 0 4px rgba(0,0,0,.5);
	pointer-events: none;
}

.fg-xp-bar-footer {
	display:         flex;
	justify-content: space-between;
	margin-top:      .45rem;
	font-size:       var(--fg-text-xs);
	color:           var(--fg-text-muted);
	font-weight:     500;
}

/* -------------------------------------------------------------------------- */
/* Perfil de usuario                                                           */
/* -------------------------------------------------------------------------- */

.fg-profile {
	background:    var(--fg-surface);
	border:        1px solid var(--fg-border);
	border-radius: var(--fg-radius-lg);
	box-shadow:    var(--fg-shadow);
	padding:       1.75rem;
	display:       flex;
	gap:           1.5rem;
	align-items:   flex-start;
}

@media (max-width: 520px) {
	.fg-profile { flex-direction: column; align-items: center; text-align: center; }
}

.fg-profile__avatar-wrapper {
	flex-shrink: 0;
	width:       88px;
	height:      88px;
	border-radius: var(--fg-radius);
	overflow:    hidden;
	border:      2px solid var(--fg-border);
	background:  var(--fg-surface-2);
}

.fg-profile__info { flex: 1; min-width: 0; }

.fg-profile__name {
	font-size:   var(--fg-text-xl);
	font-weight: 800;
	color:       var(--fg-primary);
	margin:      0 0 .4em;
}

.fg-profile__corps,
.fg-profile__rank {
	display:     flex;
	align-items: center;
	gap:         .4em;
	margin-bottom: .3em;
}

.fg-corps__icon,
.fg-rank__badge {
	height: 18px;
	width:  auto;
}

.fg-corps__name,
.fg-rank__name {
	font-size:   var(--fg-text-sm);
	font-weight: 600;
	color:       var(--fg-text-secondary);
}

.fg-profile__level {
	display:     flex;
	align-items: baseline;
	gap:         .75rem;
	margin:      .65rem 0;
}

.fg-level__number {
	font-size:   var(--fg-text-2xl);
	font-weight: 800;
	color:       var(--fg-primary);
	line-height: 1;
}

.fg-level__xp {
	font-size:  var(--fg-text-sm);
	color:      var(--fg-text-muted);
	font-weight: 500;
}

.fg-profile__stats {
	display:    grid;
	grid-template-columns: repeat(3, 1fr);
	gap:        .5rem;
	margin-top: .9rem;
	padding-top: .9rem;
	border-top: 1px solid var(--fg-border);
}

@media (max-width: 520px) {
	.fg-profile__stats { grid-template-columns: repeat(3, 1fr); }
}

.fg-stat {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            .1em;
	padding:        .6rem .4rem;
	background:     var(--fg-surface-2);
	border-radius:  var(--fg-radius-sm);
	border:         1px solid var(--fg-border);
}

.fg-stat__icon  { font-size: 1.1rem; line-height: 1; }

.fg-stat__value {
	font-size:   var(--fg-text-xl);
	font-weight: 800;
	color:       var(--fg-primary);
	line-height: 1.1;
}

.fg-stat__label {
	font-size:      var(--fg-text-xs);
	font-weight:    500;
	color:          var(--fg-text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	text-align:     center;
}

/* -------------------------------------------------------------------------- */
/* Avatar display (used in profile widget, etc.)                               */
/* -------------------------------------------------------------------------- */

.fg-avatar {
	position:    relative;
	width:       100%;
	aspect-ratio: 1;
	overflow:    hidden;
	border-radius: var(--fg-radius);
}

/* Layers are positioned via inline transform, these are fallback guarantees */
.fg-avatar-layer {
	position:    absolute;
	width:       100%;
	height:      100%;
	object-fit:  contain;
	pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* Avatar Builder                                                              */
/* -------------------------------------------------------------------------- */

.fg-avatar-builder {
	display:       grid;
	grid-template-columns: 220px 1fr;
	gap:           1.5rem;
	background:    var(--fg-surface);
	border:        1px solid var(--fg-border);
	border-radius: var(--fg-radius-lg);
	box-shadow:    var(--fg-shadow);
	padding:       1.5rem;
}

@media (max-width: 640px) {
	.fg-avatar-builder { grid-template-columns: 1fr; }
}

.fg-avatar-builder__preview {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            .9rem;
}

.fg-avatar-builder__actions {
	display:         flex;
	gap:             .5rem;
	flex-wrap:       wrap;
	justify-content: center;
}

.fg-avatar-message {
	width:         100%;
	padding:       .5em .9em;
	border-radius: var(--fg-radius-sm);
	font-size:     var(--fg-text-sm);
	font-weight:   500;
	text-align:    center;
}

.fg-avatar-message--success { background: var(--fg-success-bg); color: var(--fg-success); border: 1px solid #bbf7d0; }
.fg-avatar-message--error   { background: var(--fg-danger-bg);  color: var(--fg-danger);  border: 1px solid #fecaca; }

/* Tabs */
.fg-avatar-tabs {
	display:       flex;
	gap:           .25rem;
	flex-wrap:     wrap;
	margin-bottom: .85rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--fg-border);
}

.fg-avatar-tab {
	background:    var(--fg-surface);
	border:        1px solid var(--fg-border);
	border-radius: var(--fg-radius-sm);
	padding:       .3em .85em;
	color:         var(--fg-text-secondary);
	cursor:        pointer;
	font-family:   var(--fg-font);
	font-size:     var(--fg-text-sm);
	font-weight:   500;
	transition:    all var(--fg-transition);
}

.fg-avatar-tab:hover  { border-color: var(--fg-accent); color: var(--fg-accent); }
.fg-avatar-tab--active {
	background:   var(--fg-primary);
	border-color: var(--fg-primary);
	color:        var(--fg-text-invert);
	font-weight:  600;
}

.fg-avatar-pieces       { display: none; }
.fg-avatar-pieces--active { display: block; }

.fg-avatar-pieces__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
	gap:     .45rem;
}

.fg-avatar-piece {
	position:      relative;
	aspect-ratio:  1;
	border:        2px solid var(--fg-border);
	border-radius: var(--fg-radius-sm);
	overflow:      hidden;
	cursor:        pointer;
	background:    var(--fg-surface-2);
	transition:    border-color var(--fg-transition), transform var(--fg-transition), box-shadow var(--fg-transition);
}

.fg-avatar-piece:hover {
	border-color: var(--fg-accent);
	transform:    scale(1.04);
	box-shadow:   0 2px 8px rgba(37,99,235,.2);
}

.fg-avatar-piece--equipped {
	border-color: var(--fg-primary);
	box-shadow:   0 0 0 2px var(--fg-primary-xlight);
}

.fg-avatar-piece__img { width: 100%; height: 100%; object-fit: contain; }

.fg-avatar-piece__check {
	position:    absolute;
	top:         2px;
	right:       3px;
	font-size:   .75rem;
	color:       var(--fg-primary);
	text-shadow: 0 0 4px rgba(255,255,255,.8);
}

.fg-avatar-piece--none {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	gap:            .15em;
}

.fg-avatar-piece__none-icon { font-size: 1.2rem; color: var(--fg-text-muted); }
.fg-avatar-piece__label     { font-size: 10px;   color: var(--fg-text-muted); }

.fg-avatar-pieces__empty {
	font-size: var(--fg-text-sm);
	color:     var(--fg-text-muted);
	padding:   1rem 0;
}

/* -------------------------------------------------------------------------- */
/* Leaderboard                                                                 */
/* -------------------------------------------------------------------------- */

.fg-leaderboard {
	background:    var(--fg-surface);
	border:        1px solid var(--fg-border);
	border-radius: var(--fg-radius-lg);
	box-shadow:    var(--fg-shadow);
	overflow:      hidden;
}

.fg-leaderboard__table {
	width:           100%;
	border-collapse: collapse;
}

.fg-leaderboard__table thead tr {
	background:  var(--fg-surface-2);
	border-bottom: 2px solid var(--fg-border);
}

.fg-leaderboard__table th {
	padding:        .7rem 1rem;
	text-align:     left;
	font-size:      var(--fg-text-xs);
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:          var(--fg-text-muted);
}

.fg-leaderboard__table td {
	padding:     .65rem 1rem;
	font-size:   var(--fg-text-base);
	border-bottom: 1px solid var(--fg-border);
}

.fg-leaderboard__table tbody tr:last-child td { border-bottom: none; }

.fg-lb__row { transition: background var(--fg-transition); }
.fg-lb__row:hover td { background: var(--fg-surface-2); }

/* Fila del usuario actual */
.fg-lb__row--current td {
	background: var(--fg-primary-xlight) !important;
}
.fg-lb__row--current .fg-lb__name { font-weight: 700; color: var(--fg-primary); }

/* Top 3 */
.fg-lb__row--top-1 .fg-lb__pos { font-size: 1.2rem; }
.fg-lb__row--top-2 .fg-lb__pos { font-size: 1.1rem; }
.fg-lb__row--top-3 .fg-lb__pos { font-size: 1.05rem; }

.fg-lb__user {
	display:     flex;
	align-items: center;
	gap:         .6rem;
}

.fg-lb__avatar {
	width:         30px;
	height:        30px;
	border-radius: 50%;
	object-fit:    cover;
	border:        1px solid var(--fg-border);
	flex-shrink:   0;
}

.fg-lb__name {
	font-weight: 500;
	color:       var(--fg-text);
}

.fg-lb__you {
	font-size:   var(--fg-text-xs);
	font-weight: 600;
	color:       var(--fg-accent);
	margin-left: .25rem;
	padding:     .1em .45em;
	background:  var(--fg-primary-xlight);
	border-radius: var(--fg-radius-xl);
}

.fg-lb__xp,
.fg-lb__level {
	font-size:   var(--fg-text-base);
	font-weight: 700;
	color:       var(--fg-primary);
}

.fg-lb__streak {
	font-weight: 600;
	color:       var(--fg-text-secondary);
}

.fg-leaderboard__empty {
	padding:    2.5rem;
	text-align: center;
	color:      var(--fg-text-muted);
	font-size:  var(--fg-text-sm);
}

/* -------------------------------------------------------------------------- */
/* Panel de misiones                                                           */
/* -------------------------------------------------------------------------- */

.fg-missions { color: var(--fg-text); }

.fg-missions__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap:     1rem;
}

.fg-mission {
	background:    var(--fg-surface);
	border:        1px solid var(--fg-border);
	border-radius: var(--fg-radius);
	padding:       1.25rem;
	box-shadow:    var(--fg-shadow-sm);
	border-top:    3px solid var(--fg-border);
	transition:    box-shadow var(--fg-transition), transform var(--fg-transition);
	display:       flex;
	flex-direction: column;
	gap:           .65rem;
}

.fg-mission:hover { box-shadow: var(--fg-shadow); transform: translateY(-2px); }

.fg-mission--daily    { border-top-color: #f59e0b; }
.fg-mission--weekly   { border-top-color: var(--fg-accent); }
.fg-mission--special  { border-top-color: #8b5cf6; }
.fg-mission--campaign { border-top-color: #06b6d4; }

.fg-mission--completed {
	opacity:          .75;
	background:       var(--fg-success-bg);
	border-top-color: var(--fg-success);
}

.fg-mission__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

.fg-mission__type {
	font-size:      var(--fg-text-xs);
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding:        .2em .65em;
	border-radius:  var(--fg-radius-xl);
}

.fg-badge--daily    { background: #fef3c7; color: #92400e; }
.fg-badge--weekly   { background: var(--fg-primary-xlight); color: var(--fg-primary); }
.fg-badge--special  { background: #ede9fe; color: #5b21b6; }
.fg-badge--campaign { background: #cffafe; color: #155e75; }

.fg-mission__complete-icon { font-size: 1rem; }

.fg-mission__name {
	font-size:   var(--fg-text-md);
	font-weight: 700;
	color:       var(--fg-primary);
	margin:      0;
}

.fg-mission__description {
	font-size:  var(--fg-text-sm);
	color:      var(--fg-text-secondary);
	margin:     0;
	line-height: 1.5;
}

/* Objetivos */
.fg-mission__objectives {
	display:  flex;
	flex-direction: column;
	gap:      .3rem;
}

.fg-objective {
	display:     flex;
	align-items: center;
	gap:         .5rem;
	font-size:   var(--fg-text-sm);
	padding:     .3rem .5rem;
	border-radius: var(--fg-radius-sm);
	background:  var(--fg-surface-2);
}

.fg-objective--done {
	background: var(--fg-success-bg);
	color:      var(--fg-success);
}

.fg-objective__check {
	flex-shrink: 0;
	font-size:   .85rem;
	width:       18px;
	text-align:  center;
}

.fg-objective__text  { flex: 1; font-weight: 500; }

.fg-objective__progress {
	font-size:   var(--fg-text-xs);
	font-weight: 700;
	color:       var(--fg-text-muted);
	white-space: nowrap;
}

.fg-objective--done .fg-objective__progress { color: var(--fg-success); }

/* Barra de progreso de misión */
.fg-mission__progress-bar {
	height:        6px;
	background:    var(--fg-surface-2);
	border-radius: var(--fg-radius-xl);
	overflow:      hidden;
	border:        1px solid var(--fg-border);
}

.fg-mission__progress-fill {
	height:        100%;
	background:    linear-gradient(90deg, var(--fg-primary), var(--fg-accent));
	border-radius: var(--fg-radius-xl);
	transition:    width .4s ease;
	min-width:     3px;
}

/* Recompensas de misión */
.fg-mission__rewards {
	display:   flex;
	gap:       .35rem;
	flex-wrap: wrap;
}

.fg-reward-tag {
	display:       inline-flex;
	align-items:   center;
	gap:           .25em;
	background:    var(--fg-primary-xlight);
	color:         var(--fg-primary);
	border-radius: var(--fg-radius-xl);
	padding:       .2em .65em;
	font-size:     var(--fg-text-xs);
	font-weight:   700;
}

/* Botón reclamar */
.fg-mission__claim-btn {
	width:         100%;
	padding:       .6rem;
	background:    var(--fg-accent);
	color:         var(--fg-text-invert);
	border:        none;
	border-radius: var(--fg-radius-sm);
	font-family:   var(--fg-font);
	font-size:     var(--fg-text-sm);
	font-weight:   700;
	cursor:        pointer;
	transition:    background var(--fg-transition), box-shadow var(--fg-transition);
	box-shadow:    0 2px 6px rgba(37,99,235,.25);
	margin-top:    auto;
}

.fg-mission__claim-btn:hover {
	background: var(--fg-accent-hover);
	box-shadow: 0 4px 10px rgba(37,99,235,.3);
}

.fg-mission__claim-btn[disabled] {
	opacity:   .4;
	cursor:    not-allowed;
	box-shadow: none;
}

.fg-missions__empty {
	text-align: center;
	color:      var(--fg-text-muted);
	padding:    3rem;
	font-size:  var(--fg-text-sm);
}

/* -------------------------------------------------------------------------- */
/* Vitrina de insignias                                                        */
/* -------------------------------------------------------------------------- */

.fg-badges {
	display: grid;
	gap:     .9rem;
}

.fg-badges--cols-2 { grid-template-columns: repeat(2, 1fr); }
.fg-badges--cols-3 { grid-template-columns: repeat(3, 1fr); }
.fg-badges--cols-4 { grid-template-columns: repeat(4, 1fr); }
.fg-badges--cols-5 { grid-template-columns: repeat(5, 1fr); }
.fg-badges--cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 500px) {
	.fg-badges { grid-template-columns: repeat(2, 1fr) !important; }
}

.fg-badge-item {
	background:    var(--fg-surface);
	border:        1px solid var(--fg-border);
	border-radius: var(--fg-radius);
	padding:       1.1rem .85rem;
	text-align:    center;
	box-shadow:    var(--fg-shadow-sm);
	transition:    box-shadow var(--fg-transition), transform var(--fg-transition);
	display:       flex;
	flex-direction: column;
	align-items:   center;
	gap:           .35rem;
}

.fg-badge-item:hover {
	box-shadow: var(--fg-shadow);
	transform:  translateY(-2px);
}

.fg-badge__img {
	width:       56px;
	height:      56px;
	object-fit:  contain;
	display:     block;
}

.fg-badge__placeholder {
	font-size:   2.2rem;
	line-height: 1;
}

.fg-badge__name {
	font-size:   var(--fg-text-sm);
	font-weight: 700;
	color:       var(--fg-primary);
	line-height: 1.2;
}

.fg-badge__description {
	font-size:  var(--fg-text-xs);
	color:      var(--fg-text-muted);
	line-height: 1.4;
}

.fg-badge__date {
	font-size:  var(--fg-text-xs);
	color:      var(--fg-text-muted);
	font-weight: 500;
	padding:    .2em .55em;
	background: var(--fg-surface-2);
	border-radius: var(--fg-radius-xl);
	border:     1px solid var(--fg-border);
}

.fg-badges__empty {
	text-align: center;
	color:      var(--fg-text-muted);
	padding:    2.5rem;
	font-size:  var(--fg-text-sm);
}

/* -------------------------------------------------------------------------- */
/* Tienda de recompensas                                                       */
/* -------------------------------------------------------------------------- */

.fg-reward-shop { color: var(--fg-text); }

.fg-reward-shop__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-bottom:   1.5rem;
	flex-wrap:       wrap;
	gap:             .75rem;
}

.fg-reward-shop__title {
	font-size:   var(--fg-text-xl);
	font-weight: 800;
	color:       var(--fg-primary);
	margin:      0;
}

/* Saldo */
.fg-reward-shop__balance {
	display:       flex;
	align-items:   center;
	gap:           .4em;
	background:    var(--fg-surface);
	border:        1px solid var(--fg-border);
	border-radius: var(--fg-radius-xl);
	padding:       .45rem 1.1rem;
	box-shadow:    var(--fg-shadow-sm);
	font-size:     var(--fg-text-sm);
	font-weight:   500;
	color:         var(--fg-text-secondary);
}

.fg-balance__amount {
	font-size:   var(--fg-text-xl);
	font-weight: 800;
	color:       var(--fg-primary);
	line-height: 1;
}

/* Grid de productos */
.fg-reward-shop__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap:     1rem;
}

.fg-shop-item {
	background:    var(--fg-surface);
	border:        1px solid var(--fg-border);
	border-radius: var(--fg-radius);
	box-shadow:    var(--fg-shadow-sm);
	display:       flex;
	flex-direction: column;
	overflow:      hidden;
	transition:    box-shadow var(--fg-transition), transform var(--fg-transition);
}

.fg-shop-item:hover {
	box-shadow: var(--fg-shadow);
	transform:  translateY(-2px);
}

.fg-shop-item--locked { opacity: .55; }
.fg-shop-item--locked:hover { transform: none; box-shadow: var(--fg-shadow-sm); }

.fg-shop-item__img {
	width:       100%;
	height:      140px;
	object-fit:  cover;
	display:     block;
	background:  var(--fg-surface-2);
}

.fg-shop-item__placeholder {
	height:          140px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       3rem;
	background:      var(--fg-surface-2);
}

.fg-shop-item__name {
	font-size:   var(--fg-text-md);
	font-weight: 700;
	color:       var(--fg-primary);
	margin:      .85rem .9rem .3rem;
}

.fg-shop-item__description {
	font-size:   var(--fg-text-sm);
	color:       var(--fg-text-secondary);
	margin:      0 .9rem .75rem;
	line-height: 1.45;
	flex:        1;
}

.fg-shop-item__footer {
	padding:         .75rem .9rem;
	border-top:      1px solid var(--fg-border);
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             .5rem;
	flex-wrap:       wrap;
	background:      var(--fg-surface-2);
}

.fg-shop-item__price {
	font-size:   var(--fg-text-md);
	font-weight: 800;
	color:       var(--fg-primary);
	line-height: 1;
}

.fg-price--cant-afford { color: var(--fg-danger); }
.fg-price--free        { color: var(--fg-success); }

.fg-shop-item__stock {
	font-size:   var(--fg-text-xs);
	font-weight: 500;
	color:       var(--fg-text-muted);
}

.fg-shop-item__buy { margin-left: auto; }

/* Mensajes de la tienda */
.fg-shop-message {
	padding:       .75rem 1.1rem;
	border-radius: var(--fg-radius-sm);
	margin-top:    1rem;
	font-size:     var(--fg-text-sm);
	font-weight:   600;
	border:        1px solid transparent;
}

.fg-shop-message--success {
	background:   var(--fg-success-bg);
	color:        var(--fg-success);
	border-color: #bbf7d0;
}

.fg-shop-message--error {
	background:   var(--fg-danger-bg);
	color:        var(--fg-danger);
	border-color: #fecaca;
}

.fg-reward-shop__empty {
	text-align: center;
	color:      var(--fg-text-muted);
	padding:    3rem;
	font-size:  var(--fg-text-sm);
}

/* -------------------------------------------------------------------------- */
/* Widgets inline: racha y saldo de moneda                                    */
/* -------------------------------------------------------------------------- */

.fg-streak-widget {
	display:       inline-flex;
	align-items:   center;
	gap:           .55rem;
	background:    var(--fg-surface);
	border:        1px solid var(--fg-border);
	border-radius: var(--fg-radius);
	padding:       .75rem 1.1rem;
	box-shadow:    var(--fg-shadow-sm);
}

.fg-streak--active  { border-left: 3px solid #f59e0b; }
.fg-streak--inactive { border-left: 3px solid var(--fg-border-strong); }

.fg-streak-icon  { font-size: 1.4rem; line-height: 1; }

.fg-streak-days {
	font-size:   var(--fg-text-2xl);
	font-weight: 800;
	color:       var(--fg-primary);
	line-height: 1;
}

.fg-streak-label {
	font-size:   var(--fg-text-sm);
	font-weight: 500;
	color:       var(--fg-text-secondary);
}

.fg-streak-next {
	font-size:     var(--fg-text-xs);
	color:         var(--fg-text-muted);
	padding:       .15em .55em;
	background:    var(--fg-surface-2);
	border-radius: var(--fg-radius-xl);
	border:        1px solid var(--fg-border);
	margin-left:   .25rem;
}

.fg-currency-balance {
	display:       inline-flex;
	align-items:   center;
	gap:           .35em;
	background:    var(--fg-surface);
	border:        1px solid var(--fg-border);
	border-radius: var(--fg-radius-xl);
	padding:       .35em .9em;
	font-size:     var(--fg-text-sm);
	font-weight:   500;
	color:         var(--fg-text-secondary);
	box-shadow:    var(--fg-shadow-sm);
}

/* -------------------------------------------------------------------------- */
/* Login required                                                              */
/* -------------------------------------------------------------------------- */

.fg-login-required {
	background:    var(--fg-surface-2);
	border:        1px solid var(--fg-border);
	border-radius: var(--fg-radius);
	padding:       1rem 1.25rem;
	font-size:     var(--fg-text-sm);
	color:         var(--fg-text-secondary);
	text-align:    center;
}

.fg-login-required a { color: var(--fg-accent); font-weight: 600; }

/* -------------------------------------------------------------------------- */
/* Sistema de notificaciones                                                   */
/* -------------------------------------------------------------------------- */

#fg-notifications {
	position:    fixed;
	top:         1.25rem;
	right:       1.25rem;
	z-index:     99999;
	display:     flex;
	flex-direction: column;
	gap:         .5rem;
	pointer-events: none;
	max-width:   340px;
	width:       100%;
}

/* Toast */
.fg-toast {
	background:    var(--fg-surface);
	border:        1px solid var(--fg-border);
	border-left:   4px solid var(--fg-accent);
	border-radius: var(--fg-radius);
	box-shadow:    var(--fg-shadow-lg);
	padding:       .9rem 1rem;
	pointer-events: all;
	display:       flex;
	align-items:   flex-start;
	gap:           .7rem;
	animation:     fg-slide-in .28s cubic-bezier(.2,0,.2,1) both;
}

.fg-toast--level-up  { border-left-color: #f59e0b; }
.fg-toast--rank-up   { border-left-color: #8b5cf6; }
.fg-toast--badge     { border-left-color: #06b6d4; }
.fg-toast--streak    { border-left-color: #f59e0b; }
.fg-toast--mission   { border-left-color: var(--fg-success); }
.fg-toast--reward    { border-left-color: var(--fg-accent); }

.fg-toast__icon {
	font-size:   1.35rem;
	flex-shrink: 0;
	line-height: 1;
	margin-top:  .05rem;
}

.fg-toast__body  { flex: 1; min-width: 0; }

.fg-toast__title {
	font-size:   var(--fg-text-sm);
	font-weight: 700;
	color:       var(--fg-primary);
	margin-bottom: .15em;
}

.fg-toast__msg {
	font-size:  var(--fg-text-xs);
	color:      var(--fg-text-secondary);
	line-height: 1.4;
}

.fg-toast__close {
	background: none;
	border:     none;
	color:      var(--fg-text-muted);
	cursor:     pointer;
	font-size:  .9rem;
	line-height: 1;
	padding:    0;
	flex-shrink: 0;
	transition: color var(--fg-transition);
}

.fg-toast__close:hover { color: var(--fg-text); }
.fg-toast--leaving     { animation: fg-slide-out .22s ease both; }

/* Modal de nivel */
#fg-levelup-modal {
	position:        fixed;
	inset:           0;
	z-index:         100000;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      rgba(0,0,0,.55);
	backdrop-filter: blur(6px);
	animation:       fg-fade-in .25s ease both;
}

#fg-levelup-modal.fg-modal--hidden { display: none; }

.fg-levelup-modal__inner {
	background:    var(--fg-surface);
	border:        2px solid var(--fg-primary);
	border-radius: var(--fg-radius-xl);
	padding:       2.5rem 2rem;
	text-align:    center;
	max-width:     380px;
	width:         90%;
	box-shadow:    var(--fg-shadow-lg);
	animation:     fg-pop-in .35s cubic-bezier(.34,1.56,.64,1) both;
}

.fg-levelup-modal__icon  { font-size: 3.2rem; margin-bottom: .4em; }

.fg-levelup-modal__title {
	font-size:   var(--fg-text-3xl);
	font-weight: 800;
	color:       var(--fg-primary);
	margin:      0 0 .2em;
	font-family: var(--fg-font);
}

.fg-levelup-modal__level {
	font-size:   var(--fg-text-lg);
	font-weight: 600;
	color:       var(--fg-text-secondary);
	margin:      0 0 .4em;
}

.fg-levelup-modal__msg {
	font-size:   var(--fg-text-base);
	color:       var(--fg-text-muted);
	margin:      0 0 1.5rem;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------- */
/* Animaciones                                                                 */
/* -------------------------------------------------------------------------- */

@keyframes fg-slide-in {
	from { opacity: 0; transform: translateX(calc(100% + 1.5rem)); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes fg-slide-out {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(calc(100% + 1.5rem)); }
}

@keyframes fg-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes fg-pop-in {
	from { opacity: 0; transform: scale(.75); }
	to   { opacity: 1; transform: scale(1); }
}